.jw-header-block {
    max-width: 960px;
    margin: 0 auto;
    padding-bottom: var(--jw-space-6);
    gap: var(--jw-space-2);
}

/* =========================================
   Generic Fields (used across screens)
   ========================================= */
.jw-field {
  display: grid;
  gap: var(--jw-space-2);
}

.jw-field + .jw-field {
  margin-top: var(--jw-space-3);
}

.jw-field-label {
  font-size: var(--jw-fs-3);
  font-weight: 500;
  color: var(--jw-text);
}

.jw-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jw-space-2);
}

.jw-field-help {
  font-size: var(--jw-fs-2);
  color: var(--jw-text-muted);
  line-height: var(--jw-lh);
  margin-top: 0px;
}

.jw-field-actions {
  margin-top: var(--jw-space-2);
}

/* Inputs / selects */
.jw-field-control {
  width: 100%;
  min-height: var(--jw-hit);
  padding: 8px 12px;
  font-size: var(--jw-fs-3);
  border-radius: var(--jw-radius-2);
  border: 1px solid var(--jw-border-soft, rgba(0,0,0,0.10));
  background: var(--jw-surface, #fff);
  color: var(--jw-text, #111);
}

.jw-field-control:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--jw-primary) 70%, transparent);
  outline-offset: 2px;
}

/* Divider */
.jw-divider {
  height: 1px;
  background: var(--jw-border-soft, rgba(0,0,0,0.10));
  margin: var(--jw-space-3) 0;
}

.jw-dot {
  opacity: 0.7;
  padding-inline: 6px;
}

/* =========================================
   Toggle (switch)
   ========================================= */
.jw-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 28px;
}

.jw-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.jw-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--jw-surface-2, rgba(0,0,0,0.10));
  border: 1px solid var(--jw-border-soft, rgba(0,0,0,0.12));
  border-radius: 999px;
  transition: background 0.15s ease;
}

.jw-toggle-slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--jw-surface, #fff);
  box-shadow: var(--jw-shadow-1, 0 1px 4px rgba(0,0,0,0.10));
  transition: transform 0.15s ease;
}

.jw-toggle input:checked + .jw-toggle-slider {
  background: color-mix(in srgb, var(--jw-primary) 25%, var(--jw-surface));
  border-color: color-mix(in srgb, var(--jw-primary) 35%, transparent);
}

.jw-toggle input:checked + .jw-toggle-slider::after {
  transform: translateX(16px);
}

/* RTL: flip the knob movement */
.jw-rtl .jw-toggle-slider::after {
  left: auto;
  right: 3px;
}
.jw-rtl .jw-toggle input:checked + .jw-toggle-slider::after {
  transform: translateX(-16px);
}

/* =========================================
   Settings panes & actions
   ========================================= */
.jw-settings-pane { display: none; }
.jw-settings-pane.is-active { display: block; }

.jw-settings-actions {
  margin-top: var(--jw-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jw-space-2);
}

.jw-settings-status {
  font-size: var(--jw-fs-2);
  color: var(--jw-text-muted);
}



.jw-theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  justify-items: start; /* aligns cards to the left */
  margin-top: 12px;
}

/* === Shared card behavior (theme + styles) === */
.jw-theme-card,
.jw-style-card {
  cursor: pointer;
  text-align: center;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.jw-theme-card:hover,
.jw-style-card:hover {
  transform: translateY(-2px);
}

.jw-theme-card.is-selected,
.jw-style-card.is-selected {
  border-color: var(--jw-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--jw-accent) 40%, transparent);
}


/* === Style pickers (fonts, effects, borders) === */
.jw-style-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.jw-style-card {
  padding: 14px 10px;
  border-radius: 14px;
  background: var(--jw-card-bg);
}

.jw-style-preview {
  width: 100%;
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--jw-border-soft);
  background: var(--jw-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 6px;
}

.jw-style-card[data-font] .jw-style-preview {
  font-size: 26px;
  letter-spacing: 0.02em;
}

.jw-font-system   { font-family: system-ui, sans-serif; }
.jw-font-serif    { font-family: serif; }
.jw-font-rounded  { font-family: 'Nunito', system-ui; }
.jw-font-playful  { font-family: 'Comic Neue', cursive; }

.jw-style-card[data-effect] .jw-style-preview {
  font-size: 26px;
}

.jw-style-card[data-effect]:hover .jw-style-preview {
  transform: scale(1.05);
}

.jw-style-card[data-border] .jw-style-preview {
  font-size: 18px;
  letter-spacing: 0.1em;
}

.jw-style-card[data-border="mid"] .jw-style-preview {
  border-style: dashed;
}

.jw-style-card[data-border="geometric"] .jw-style-preview {
  border-image: var(--jw-border-geo);
}

.jw-style-label {
  font-size: 12px;
  line-height: 1.3;
  color: var(--jw-text-muted);
}



.jw-border-preview {
  width: 100%;
  height: 56px;
  border-radius: 12px;
  background: var(--jw-surface);
  border: 2px solid var(--jw-border-soft);
}

/* === Individual border styles === */

.jw-style-card[data-border="soft"] .jw-border-preview {
  border-width: 1px;
  border-radius: 16px;
}

.jw-style-card[data-border="mid"] .jw-border-preview {
  border-style: dashed;
  border-width: 2px;
}

.jw-style-card[data-border="bold"] .jw-border-preview {
  border-width: 3px;
}

.jw-style-card[data-border="geometric"] .jw-border-preview {
  border-width: 3px;
  border-image: var(--jw-border-geo);
  border-image-slice: 1;
}

.jw-style-card[data-border="none"] .jw-border-preview {
  border: none;
  background:
    repeating-linear-gradient(
      45deg,
      var(--jw-border-soft),
      var(--jw-border-soft) 4px,
      transparent 4px,
      transparent 8px
    );
}

.jw-effect-icon {
  width: 28px;
  height: 28px;
  opacity: 0.9;
}

.jw-style-card.is-selected .jw-effect-icon {
  opacity: 1;
}

.jw-style-card[data-effect] .jw-style-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0; /* kill emoji sizing */
}

.jw-style-card[data-effect]:hover .jw-effect-icon {
  transform: scale(1.1);
}



.jw-theme-preview {
  width: 150px;
  height: 100px;
  border-radius: 6px;
  border: 1px solid var(--jw-border-soft);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 4px; /* spacing between preview and label */
}

.jw-theme-header {
  height: 18px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 3px;
  box-sizing: border-box;
}

.jw-theme-primary-pill {
  height: 10px;
  width: 30px;
  border-radius: 6px;
}

.jw-theme-dots {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 8px;
}

.jw-theme-dot-secondary,
.jw-theme-dot-accent {
  width: 15px;
  height: 15px;
  border-radius: 100%;
}

.jw-theme-label {
  font-size: 10px;      /* very small font */
  line-height: 1.2;
  color: var(--jw-text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ===============================
   Border picker preview sizing
   =============================== */

.jw-border-preview-root {
  width: 100%;
}


/* =========================================
   Border preview cards (isolated)
   ========================================= */

.jw-border-preview-card {
  position: relative;
  border-radius: var(--jw-frame-radius);
  overflow: hidden;
  background: var(--jw-card-bg);
}


/* empty inner content just to give depth */
.jw-border-preview-content {
  width: 100%;
  height: 100%;
}



.jw-border-preview-root[data-jw-border-style="mid"]
  .jw-border-preview-card {
  border-radius: var(--jw-frame-radius);
  box-shadow: var(--jw-card-shadow);
  border: 2px dashed color-mix(in srgb, var(--jw-ornate-c1) 70%, transparent);
  outline: 1px solid color-mix(in srgb, var(--jw-ornate-ink) 14%, transparent);
  outline-offset: -6px;
}

.jw-border-preview-root[data-jw-border-style="mid"]
  .jw-border-preview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--jw-frame-fill) 85%, transparent),
      color-mix(in srgb, var(--jw-frame-fill-2) 85%, transparent)
    );

  padding: var(--jw-frame-gap);
  box-sizing: border-box;
  -webkit-mask: linear-gradient(#000,#000) content-box,
                linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000,#000) content-box,
        linear-gradient(#000,#000);
  mask-composite: exclude;

  opacity: 0.95;
}

.jw-border-preview-root[data-jw-border-style="mid"]
  .jw-border-preview-card::after {
  content: "";
  position: absolute;
  inset: calc(var(--jw-frame-gap) - 2px);
  pointer-events: none;
  border-radius: calc(
    var(--jw-frame-radius) - var(--jw-frame-gap) + 2px
  );
  border: 1px solid
    color-mix(in srgb, var(--jw-ornate-c2) 35%, transparent);
  opacity: 0.9;
}


.jw-border-preview-root[data-jw-border-style="max"]
  .jw-border-preview-card {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--jw-ornate-c1) 70%, transparent) inset,
    0 0 0 8px color-mix(in srgb, var(--jw-ornate-c2) 18%, transparent) inset,
    var(--jw-card-shadow);
}

.jw-border-preview-root[data-jw-border-style="max"]
  .jw-border-preview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  --r: 7px;

  background-image:
    radial-gradient(
      var(--r),
      transparent 98%,
      color-mix(in srgb, var(--jw-ornate-c1) 55%, transparent)
    );
  background-repeat: round;
  background-position:
    calc(var(--r) * -1.5) calc(var(--r) * -1.5);
  background-size:
    calc(var(--r) * 3) calc(var(--r) * 3);

  padding: 10px;
  box-sizing: border-box;
  -webkit-mask: linear-gradient(#000,#000) content-box,
                linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000,#000) content-box,
        linear-gradient(#000,#000);
  mask-composite: exclude;

  opacity: 0.9;
}


.jw-border-preview-root[data-jw-border-style="geometric"]
  .jw-border-preview-card {
  box-shadow: var(--jw-card-shadow);
  border: 1px solid
    color-mix(in srgb, var(--jw-frame-ink) 55%, var(--jw-card-bg));
}

.jw-border-preview-root[data-jw-border-style="geometric"]
  .jw-border-preview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  --ring: 11px;
  padding: var(--ring);
  box-sizing: border-box;

  -webkit-mask: linear-gradient(#000,#000) content-box,
                linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000,#000) content-box,
        linear-gradient(#000,#000);
  mask-composite: exclude;

  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 10px,
      color-mix(in srgb, var(--jw-frame-ink) 55%, var(--jw-card-bg)) 10px 12px,
      transparent 12px 22px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 10px,
      color-mix(in srgb, var(--jw-frame-ink2) 50%, var(--jw-card-bg)) 10px 12px,
      transparent 12px 22px
    );

  opacity: 1;
}

.jw-border-preview-root[data-jw-border-style="geometric"]
  .jw-border-preview-card::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border-radius: calc(var(--jw-frame-radius) - 8px);
  border: 1px solid
    color-mix(in srgb, var(--jw-frame-line) 70%, var(--jw-card-bg));
}


.jw-border-preview-root[data-jw-border-style="diagonal"]
  .jw-border-preview-card {
  box-shadow: var(--jw-card-shadow);
  border: 1px solid
    color-mix(in srgb, var(--jw-frame-ink) 55%, var(--jw-card-bg));
}

.jw-border-preview-root[data-jw-border-style="diagonal"]
  .jw-border-preview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  padding: 10px;
  box-sizing: border-box;
  -webkit-mask: linear-gradient(#000,#000) content-box,
                linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000,#000) content-box,
        linear-gradient(#000,#000);
  mask-composite: exclude;

  background:
    repeating-linear-gradient(
      45deg,
      var(--jw-card-bg) 0 10px,
      color-mix(in srgb, var(--jw-frame-ink) 38%, var(--jw-card-bg)) 10px 11px,
      var(--jw-card-bg) 11px 22px
    );
}


.jw-border-preview-root[data-jw-border-style="architectural"]
  .jw-border-preview-card {
  box-shadow: var(--jw-card-shadow);
  border: 1px solid
    color-mix(in srgb, var(--jw-frame-ink) 55%, var(--jw-card-bg));
}

.jw-border-preview-root[data-jw-border-style="architectural"]
  .jw-border-preview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  --ring: 12px;
  padding: var(--ring);
  box-sizing: border-box;

  -webkit-mask: linear-gradient(#000,#000) content-box,
                linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000,#000) content-box,
        linear-gradient(#000,#000);
  mask-composite: exclude;

  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--jw-frame-ink) 35%, var(--jw-card-bg)) 0 2px,
      transparent 2px
    ),
    linear-gradient(to top,
      color-mix(in srgb, var(--jw-frame-ink2) 40%, var(--jw-card-bg)) 0 2px,
      transparent 2px
    );
}

.jw-border-preview-root[data-jw-border-style="premium"]
  .jw-border-preview-card {
  box-shadow: var(--jw-card-shadow);
  border: 1px solid
    color-mix(in srgb, var(--jw-frame-ink) 55%, var(--jw-card-bg));
}

.jw-border-preview-root[data-jw-border-style="premium"]
  .jw-border-preview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  padding: 12px;
  box-sizing: border-box;
  -webkit-mask: linear-gradient(#000,#000) content-box,
                linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000,#000) content-box,
        linear-gradient(#000,#000);
  mask-composite: exclude;

  background:
    radial-gradient(circle,
      color-mix(in srgb, var(--jw-frame-ink) 55%, var(--jw-card-bg)) 35%,
      var(--jw-card-bg) 38%
    ) 0 0 / 10px 10px,
    radial-gradient(circle,
      color-mix(in srgb, var(--jw-frame-ink2) 50%, var(--jw-card-bg)) 28%,
      var(--jw-card-bg) 32%
    ) 5px 5px / 10px 10px;
}


/* Slider track and thumb */
.jw-font-scale-slider {
  width: 100%;
  margin: 0.5em 0;
  -webkit-appearance: none;
  background: var(--jw-card-bg); /* track background */
  height: 6px;
  border-radius: 3px;
  border: 1px solid var(--jw-tab-border);
}

.jw-font-scale-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--jw-tab-active-bg);
  border: 2px solid var(--jw-tab-active-border);
  cursor: pointer;
  margin-top: -7px; /* center thumb on track */
}

.jw-font-scale-slider::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--jw-tab-active-bg);
  border: 2px solid var(--jw-tab-active-border);
  cursor: pointer;
}

/* Labels beneath the slider */
.jw-font-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  margin-top: -0.25em;
  color: var(--jw-tab-text); /* theme text color */
}