* { box-sizing: border-box; margin: 0; padding: 0; }

    body { font-family: 'Nunito', Arial, sans-serif; background: linear-gradient(160deg, #eef2f7 0%, #f5f7fa 100%); min-height: 100vh; padding: 0; }

    /* ── Site Header ── */
    .site-header {
      background: #1B2A4A;
      border-bottom: 3px solid #3498db;
      padding: 0;
    }
    .site-header-inner {
      max-width: 1240px;
      margin: 0 auto;
      padding: 14px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .site-brand { display: flex; align-items: center; gap: 12px; }
    .site-logo { font-size: 26px; line-height: 1; }
    .site-name { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.3px; }
    .site-tagline { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 1px; }
    .chinese-link {
      display: inline-flex; align-items: center; gap: 7px;
      color: #C9A84C; text-decoration: none;
      padding: 8px 16px; border-radius: 6px;
      font-size: 13px; font-weight: 700;
      border: 2px solid #C9A84C;
      transition: background 0.2s;
    }
    .chinese-link:hover { background: rgba(201,168,76,0.12); }

    /* ── Language dropdown ── */
    .lang-dropdown { position: relative; }
    .lang-dropdown-btn {
      display: inline-flex; align-items: center; gap: 7px;
      color: #C9A84C; text-decoration: none;
      padding: 8px 16px; border-radius: 6px;
      font-size: 13px; font-weight: 700;
      border: 2px solid #C9A84C;
      background: transparent; cursor: pointer;
      transition: background 0.2s;
    }
    .lang-dropdown-btn:hover { background: rgba(201,168,76,0.12); }
    .lang-dropdown-menu {
      display: none; position: absolute; right: 0; top: 100%; margin-top: 6px;
      background: #1B2A4A; border: 1px solid rgba(201,168,76,0.3); border-radius: 8px;
      min-width: 220px; padding: 6px 0; z-index: 200;
      box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    }
    .lang-dropdown:hover .lang-dropdown-menu { display: block; }
    .lang-dropdown-menu a {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 18px; color: #fff; text-decoration: none;
      font-size: 13px; font-weight: 600; transition: background 0.15s;
    }
    .lang-dropdown-menu a:hover { background: rgba(201,168,76,0.15); }

    /* ── Page body padding (below header) ── */
    .page-body { padding: 24px 20px; }

    /* ── Feature strip ── */
    .feature-strip {
      background: #fff;
      border-bottom: 1px solid #e0e4ea;
      text-align: center;
      padding: 10px 20px 0;
    }
    .feature-badge {
      display: inline-block;
      font-size: 13px;
      font-weight: 700;
      color: #2c3e50;
      padding: 4px 0;
    }
    .feature-sep { color: #bbb; margin: 0 8px; font-size: 13px; }
    .feature-seo {
      font-size: 12px;
      color: #aaa;
      margin: 6px auto 0;
      max-width: 760px;
      padding-bottom: 8px;
      line-height: 1.5;
    }

    h1 { color: #2c3e50; font-size: 24px; text-align: center; margin-bottom: 6px; }
    .subtitle { text-align: center; color: #666; margin-bottom: 20px; }

    .layout { display: flex; gap: 24px; align-items: flex-start; max-width: 1200px; margin: 0 auto; font-family: 'Nunito', Arial, sans-serif; }

    /* ── Online mode zoom: sidebar collapses, preview expands ── */
    .sidebar { transition: max-width 0.4s ease, min-width 0.4s ease, opacity 0.3s ease, padding 0.4s ease, margin 0.4s ease; }
    .layout.online-mode .sidebar { max-width: 0; min-width: 0; opacity: 0; padding: 0; margin: 0; overflow: hidden; pointer-events: none; }
    #btnBackToSettings { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.4); color: white; padding: 4px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; }
    #btnBackToSettings:hover { background: rgba(255,255,255,0.25); }

    /* ── Sidebar ── */
    .sidebar {
      background: white; border-radius: 12px; padding: 14px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08); min-width: 240px; max-width: 260px;
      position: sticky; top: 20px;
    }
    .sidebar h3 { color: #1B2A4A; font-size: 12px; font-weight: 800; margin: 6px 0 3px;
                  border-bottom: 2px solid #eef2f7; padding-bottom: 3px;
                  display: flex; justify-content: space-between; align-items: center;
                  cursor: pointer; }
    .sidebar h3:first-child { margin-top: 0; }
    .sidebar h3:hover { color: #2c7be5; }
    .sec-icon { margin-right: 5px; font-size: 14px; }
    .sec-chevron { font-size: 11px; color: #aaa; margin-left: 4px; }
    .btn-expand-all {
      width: 100%; padding: 4px 10px; margin-bottom: 6px;
      background: none; border: 1.5px solid #dde3ed; border-radius: 8px;
      font-size: 11px; font-weight: 700; color: #888; cursor: pointer;
      font-family: 'Nunito', Arial, sans-serif; transition: all 0.15s;
      text-align: left;
    }
    .btn-expand-all:hover { border-color: #2c7be5; color: #2c7be5; background: #eef4fd; }
    .section-toggle { font-size: 10px; font-weight: 600; color: #3498db; cursor: pointer; user-select: none; background: #eaf4fb; padding: 2px 7px; border-radius: 10px; }
    .section-toggle:hover { background: #d6eaf8; }
    .tt-lbl { display: inline-flex !important; align-items: center; background: #f0f4ff; border: 1px solid #c5d3f5; border-radius: 5px; padding: 2px 6px; font-size: 12px; font-weight: 600; color: #3a5bd9; cursor: pointer; margin: 0 !important; }
    .tt-lbl input { margin-right: 3px !important; }
    .sidebar label { display: block; margin: 3px 0; font-size: 13px; cursor: pointer; color: #333; }
    .btn-jump-preview { display: none; }
    .sidebar input[type="checkbox"] { margin-right: 7px; accent-color: #27ae60; }

    /* ── Pill-style checkboxes for type sections ── */
    .type-section {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      margin-bottom: 4px;
    }
    .type-section label {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 14px;
      border: 1.5px solid #dde3ed;
      background: #f4f6f9;
      color: #555;
      font-size: 11px;
      font-weight: 700;
      margin: 0;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      user-select: none;
    }
    .type-section label:hover {
      border-color: #2c7be5;
      color: #2c7be5;
      background: #eef4fd;
    }
    .type-section label:has(input:checked) {
      background: #2c7be5;
      border-color: #2c7be5;
      color: #fff;
    }
    .type-section label input[type="checkbox"] {
      display: none;
    }
    .sidebar input[type="number"]   { width: 100%; padding: 7px; font-size: 13px;
                                       border-radius: 6px; border: 1px solid #ccc; margin-top: 4px; }
    .btn { width: 100%; padding: 11px; font-size: 14px; color: white; border: none;
           border-radius: 8px; cursor: pointer; margin-top: 8px; display: none; font-weight: 700;
           font-family: 'Nunito', Arial, sans-serif; transition: background 0.15s, transform 0.1s; }
    .btn:active { transform: scale(0.97); }
    .btn.always  { display: block; }
    .btn.visible { display: block; }
    .btn-preview  { background: #2c7be5; letter-spacing: 0.3px; } .btn-preview:hover  { background: #1a68d0; }
    .btn-shuffle  { background: #e67e22; } .btn-shuffle:hover  { background: #d35400; }
    .btn-print    { background: #8e44ad; } .btn-print:hover    { background: #7d3c98; }
    .btn-download { background: #27ae60; } .btn-download:hover { background: #219150; }

    .btn-row-secondary { display: flex; gap: 6px; margin-top: 6px; }
    .btn-row-secondary .btn { margin-top: 0; font-size: 12px; padding: 9px 4px; }
    .btn-row-secondary .btn.visible { display: flex; align-items: center; justify-content: center; gap: 4px; }

    /* ── Theme Swatches ── */
    .theme-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 6px;
    }
    .theme-swatch {
      border-radius: 8px;
      padding: 6px 4px;
      cursor: pointer;
      text-align: center;
      font-size: 11px;
      font-weight: bold;
      border: 3px solid transparent;
      transition: border 0.2s, transform 0.15s;
      line-height: 1.4;
      user-select: none;
    }
    .theme-swatch:hover   { transform: scale(1.06); }
    .theme-swatch.active  { border: 3px solid #2c3e50; transform: scale(1.06); }
    .theme-swatch .swatch-icon { font-size: 18px; display: block; margin-bottom: 2px; }

    /* ── Preview Panel ── */
    .preview-panel {
      flex: 1; background: white; border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden;
    }
    .preview-toolbar {
      background: #2c3e50; color: white; padding: 10px 16px;
      font-size: 13px; display: flex; align-items: center; gap: 8px;
    }
    .preview-toolbar .label { flex: 1; margin-left: 6px; }
    .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
    .dot-red { background: #e74c3c; } .dot-yellow { background: #f1c40f; } .dot-green { background: #2ecc71; }

    .preview-placeholder {
      display: flex; align-items: center; justify-content: center;
      min-height: 680px; padding: 40px 24px;
      background: linear-gradient(160deg, #f8fafd 0%, #eef2f7 100%);
    }
    .placeholder-inner {
      text-align: center; max-width: 420px;
    }
    .placeholder-icon { font-size: 56px; margin-bottom: 16px; line-height: 1; }
    .placeholder-title { font-size: 20px; font-weight: 800; color: #1B2A4A; margin-bottom: 8px; }
    .placeholder-sub { font-size: 14px; color: #888; line-height: 1.6; margin-bottom: 28px; }
    .placeholder-steps {
      display: flex; align-items: center; justify-content: center;
      gap: 8px; margin-bottom: 28px; flex-wrap: wrap;
    }
    .ph-step {
      display: flex; align-items: center; gap: 7px;
      background: #fff; border: 1.5px solid #dde3ed;
      border-radius: 10px; padding: 8px 14px;
      font-size: 13px; font-weight: 700; color: #2c3e50;
    }
    .ph-num {
      background: #2c7be5; color: #fff;
      border-radius: 50%; width: 20px; height: 20px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 800; flex-shrink: 0;
    }
    .ph-arrow { color: #bbb; font-size: 18px; font-weight: bold; }
    .placeholder-badges {
      display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    }
    .placeholder-badges span {
      background: #fff; border: 1.5px solid #dde3ed;
      border-radius: 20px; padding: 4px 12px;
      font-size: 12px; font-weight: 700; color: #555;
    }

    /* ── Worksheet Base Styles ── */
    .ws-sheet { padding: 32px 40px; font-family: Arial, sans-serif; font-size: 15px; line-height: 1.6; color: #111; }
    .ws-sheet.in-preview { max-height: 1100px; overflow-y: auto; }
    .ws-custom-title { font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 2px; color: #555; }
    .ws-title { font-size: 22px; font-weight: bold; text-align: center; margin-bottom: 14px; }
    .ws-info  { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
    .ws-sheet hr { border: none; border-top: 2px solid #ccc; margin: 10px 0; }
    .ws-directions { font-style: italic; font-size: 13px; color: #555; margin-bottom: 18px; }
    .problem-block { border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; page-break-inside: avoid; break-inside: avoid; }
    .problem-header { display: flex; justify-content: space-between; align-items: flex-start; }
    .problem-number { font-size: 16px; font-weight: bold; margin-right: 10px; min-width: 28px; }
    .problem-type-tag { font-size: 11px; font-style: italic; padding: 2px 7px; border-radius: 10px; }
    .problem-text  { font-size: 15px; margin: 4px 0 8px 0; }
    .problem-blank { font-size: 15px; margin: 4px 0; }
    .drill-vertical { display: inline-block; text-align: right; font-size: 20px; font-family: 'Courier New', monospace; font-weight: bold; line-height: 1.5; margin: 8px 0 4px 20px; }
    .drill-vertical .drill-line { display: block; letter-spacing: 4px; white-space: nowrap; }
    .drill-vertical .drill-separator { display: block; border-bottom: 3px solid #333; margin: 2px 0; }
    .drill-vertical .drill-answer-line { display: block; letter-spacing: 4px; color: #aaa; }
    .drill-grid { display: flex; flex-wrap: wrap; gap: 24px 48px; margin-top: 8px; }
    .drill-grid-horizontal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .drill-h-block { padding: 14px 12px; text-align: center; }
    .drill-h-text { font-family: 'Courier New', monospace; font-weight: bold; font-size: 18px; white-space: nowrap; }
    .ws-footer { text-align: center; font-style: italic; font-size: 12px; margin-top: 20px; }
    .ws-section-title { font-size: 16px; font-weight: bold; margin: 24px 0 12px; padding-bottom: 4px; border-bottom: 2px solid var(--hr-color, #aed6f1); color: var(--title-color, #1a5276); }
    .ws-section-title:first-of-type { margin-top: 0; }
    .answer-key { margin-top: 30px; page-break-before: always; break-before: always; }
    .answer-key h2 { font-size: 18px; text-align: center; margin-bottom: 10px; }
    .answer-item { font-size: 14px; padding: 4px 0; border-bottom: 1px solid #eee; }

    /* ── Theme CSS variables ── */
    /* Plain (default) */
    .theme-plain  { --title-color:#333; --hr-color:#ccc; --block-bg:transparent; --tag-bg:transparent; --tag-color:#555; --footer-color:#999; --ak-border:#ddd; }
    /* Blue */
    .theme-blue   { --title-color:#1a5276; --hr-color:#aed6f1; --block-bg:#eaf4fb; --tag-bg:#d6eaf8; --tag-color:#1a5276; --footer-color:#7fb3d3; --ak-border:#aed6f1; }
    /* Ocean */
    .theme-ocean  { --title-color:#0e6655; --hr-color:#a2d9ce; --block-bg:#e8f8f5; --tag-bg:#d1f2eb; --tag-color:#0e6655; --footer-color:#76b39d; --ak-border:#a2d9ce; }
    /* Sunny */
    .theme-sunny  { --title-color:#b7770d; --hr-color:#f9e79f; --block-bg:#fef9e7; --tag-bg:#fdebd0; --tag-color:#b7770d; --footer-color:#f0b429; --ak-border:#f9e79f; }
    /* Rose */
    .theme-rose   { --title-color:#922b21; --hr-color:#f5b7b1; --block-bg:#fdedec; --tag-bg:#fad7d4; --tag-color:#922b21; --footer-color:#e57e77; --ak-border:#f5b7b1; }
    /* Lavender */
    .theme-lavender { --title-color:#6c3483; --hr-color:#d7bde2; --block-bg:#f5eef8; --tag-bg:#e8daef; --tag-color:#6c3483; --footer-color:#af7ac5; --ak-border:#d7bde2; }
    /* Mint */
    .theme-mint   { --title-color:#1e8449; --hr-color:#a9dfbf; --block-bg:#eafaf1; --tag-bg:#d5f5e3; --tag-color:#1e8449; --footer-color:#58d68d; --ak-border:#a9dfbf; }
    /* Peach */
    .theme-peach  { --title-color:#ca6f1e; --hr-color:#fad7a0; --block-bg:#fef5e7; --tag-bg:#fdebd0; --tag-color:#ca6f1e; --footer-color:#f0a500; --ak-border:#fad7a0; }
    /* Sky */
    .theme-sky    { --title-color:#1a6fa8; --hr-color:#aed6f1; --block-bg:#eaf4fb; --tag-bg:#d2e9f7; --tag-color:#1a6fa8; --footer-color:#5dade2; --ak-border:#aed6f1; }
    /* Mono */
    .theme-mono   { --title-color:#1c1c1c; --hr-color:#bbb; --block-bg:#f4f4f4; --tag-bg:#e0e0e0; --tag-color:#333; --footer-color:#888; --ak-border:#ccc; }

    /* Apply theme variables to elements */
    .ws-sheet .ws-title         { color: var(--title-color, #1a5276); }
    .ws-sheet hr                { border-top-color: var(--hr-color, #aed6f1) !important; }
    .ws-sheet .problem-block    { background: var(--block-bg, #eaf4fb); }
    .ws-sheet .problem-type-tag { background: var(--tag-bg, #d6eaf8); color: var(--tag-color, #1a5276); }
    .ws-sheet .ws-footer        { color: var(--footer-color, #7fb3d3); }
    .ws-sheet .answer-item      { border-bottom-color: var(--ak-border, #aed6f1); }

    /* ── Skeleton loader ── */
    @keyframes shimmer {
      0%   { background-position: -600px 0; }
      100% { background-position:  600px 0; }
    }
    .sk {
      background: linear-gradient(90deg, #ececec 25%, #e0e0e0 50%, #ececec 75%);
      background-size: 1200px 100%;
      animation: shimmer 1.4s infinite linear;
      border-radius: 8px;
      margin-bottom: 14px;
    }
    .sk-title  { height: 26px; width: 55%; margin: 0 auto 20px; border-radius: 6px; }
    .sk-line   { height: 13px; width: 80%; margin: 0 auto 14px; border-radius: 6px; }
    .sk-block  { height: 58px; width: 100%; border-radius: 10px; }

    /* ── Image Matching ── */
    .match-table { width:100%; border-collapse:collapse; margin:8px auto; }
    .match-table td { padding:6px 8px; vertical-align:middle; }
    .match-emoji { font-size:4em; text-align:center; line-height:1.2; }
    .match-num { font-size:14px; text-align:center; color:#888; }
    .match-spacer { width:40px; }
    .match-word { font-size:16px; font-weight:bold; text-align:center; text-transform:uppercase; letter-spacing:2px; }

    /* ── Online Mode — Multiple Choice ── */
    .mc-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .mc-btn {
      padding: 7px 16px; font-size: 15px; border: 2px solid #ccc;
      border-radius: 8px; background: white; cursor: pointer;
      font-family: inherit; transition: border 0.15s, background 0.15s;
      min-width: 54px; text-align: center;
    }
    .mc-btn:hover:not(:disabled) { border-color: #3498db; background: #eaf4fb; }
    .mc-btn.mc-selected  { border-color: #3498db; background: #d6eaf8; font-weight: bold; }
    .mc-btn.mc-correct   { border-color: #27ae60; background: #eafaf1; color: #1e8449; font-weight: bold; }
    .mc-btn.mc-wrong     { border-color: #e74c3c; background: #fdedec; color: #922b21; }
    .mc-btn:disabled     { cursor: default; }

    /* Drill online list (replaces mm-grid in online mode) */
    .drill-online-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
    .drill-online-item { display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
                         padding: 10px 14px; background: var(--block-bg, #eaf4fb); border-radius: 8px; }

    /* ── Online Mode ── */
    .online-input {
      border: none; border-bottom: 2px solid #3498db;
      background: transparent; font-size: 1em; font-family: inherit;
      width: 80px; text-align: center; padding: 2px 4px;
      outline: none; color: #111; border-radius: 0;
    }
    .online-input:focus { border-bottom-color: #2c3e50; background: #f0f8ff; }
    .online-input.online-correct { border-bottom-color: #27ae60; background: #eafaf1; color: #1e8449; font-weight: bold; }
    .online-input.online-wrong   { border-bottom-color: #e74c3c; background: #fdedec; color: #922b21; }
    .drill-online-input { width: 60px; font-family: 'Courier New', monospace; font-weight: bold; }
    .online-score {
      display: none; text-align: center; margin: 16px 0 4px;
      font-size: 18px; font-weight: bold; padding: 10px;
      border-radius: 8px; background: #eaf4fb; color: #1a5276;
    }
    .online-reveal { font-size: 11px; color: #e74c3c; display: block; margin-top: 2px; }

    /* ── Settings Block ── */
    .settings-block {
      display: flex;
      flex-direction: column;
      gap: 3px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 6px 10px;
      margin-top: 4px;
    }
    .setting-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }
    .setting-label {
      font-size: 13px;
      font-weight: 600;
      color: #4a5568;
      flex-shrink: 0;
    }
    .setting-select {
      flex: 1;
      min-width: 0;
      padding: 5px 8px;
      border: 1px solid #cbd5e0;
      border-radius: 6px;
      font-size: 13px;
      font-family: inherit;
      background: #fff;
      color: #2d3748;
      cursor: pointer;
    }
    .setting-select:focus { outline: none; border-color: #3498db; }
    .setting-input {
      width: 70px;
      padding: 5px 8px;
      border: 1px solid #cbd5e0;
      border-radius: 6px;
      font-size: 13px;
      font-family: inherit;
      text-align: center;
      background: #fff;
      color: #2d3748;
    }
    .setting-input:focus { outline: none; border-color: #3498db; }
    .setting-check {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #4a5568;
      cursor: pointer;
    }
    .setting-check input[type="checkbox"] {
      width: 15px;
      height: 15px;
      accent-color: #3498db;
      cursor: pointer;
    }
    .setting-text {
      width: 100%;
      box-sizing: border-box;
      padding: 5px 8px;
      border: 1px solid #cbd5e0;
      border-radius: 6px;
      font-size: 12px;
      font-family: inherit;
      color: #2d3748;
      background: #fff;
    }
    .setting-text:focus { outline: none; border-color: #3498db; }
    .setting-text::placeholder { color: #a0aec0; }

    /* ── Site Footer ── */
    .site-footer {
      background: #1B2A4A;
      color: rgba(255,255,255,0.6);
      margin-top: 48px;
      padding: 0;
    }
    .site-footer-inner {
      max-width: 1240px;
      margin: 0 auto;
      padding: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      text-align: center;
    }
    .footer-brand { font-size: 14px; color: rgba(255,255,255,0.85); }
    .footer-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
    .footer-links a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 13px; transition: color 0.2s; }
    .footer-links a:hover { color: #C9A84C; }
    .footer-copy { font-size: 12px; color: rgba(255,255,255,0.35); }
    .btn-submit     { background: #27ae60; } .btn-submit:hover     { background: #219150; }
    .btn-reset-online { background: #7f8c8d; } .btn-reset-online:hover { background: #6c7a7d; }

    /* ── Mobile Responsive ── */
    @media (max-width: 768px) {
      body { padding: 0; }
      .site-header-inner { padding: 10px 16px; gap: 8px; }
      .site-name { font-size: 16px; }
      .site-tagline { display: none; }
      .chinese-link { font-size: 12px; padding: 6px 10px; white-space: nowrap; }
      .lang-dropdown-btn { font-size: 12px; padding: 6px 10px; }
      .lang-dropdown-menu { right: auto; left: 0; min-width: 180px; }
      .page-body { padding: 12px 8px; }
      h1 { font-size: 20px; }
      .layout { flex-direction: column; gap: 16px; }
      .sidebar {
        min-width: unset; max-width: 100%; width: 100%;
        position: static; /* disable sticky on mobile */
      }
      .preview-panel { width: 100%; }
      .preview-placeholder { height: 300px; font-size: 14px; }
      .ws-sheet { padding: 16px 12px; }
      .ws-sheet.in-preview { max-height: none; }
      .drill-grid { gap: 16px 24px; }
      .drill-grid-horizontal { grid-template-columns: repeat(2, 1fr); gap: 8px; }
      .drill-h-text { font-size: 16px; }
      #adsterra-top, #adsterra-bottom { max-width: 100%; overflow: hidden; }
      .theme-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
      .theme-swatch { font-size: 10px; padding: 4px 2px; }
      .theme-swatch .swatch-icon { font-size: 16px; }
      .btn { padding: 13px; font-size: 15px; } /* larger tap targets */
      .sidebar label { font-size: 14px; padding: 2px 0; }
      .sidebar input[type="checkbox"] { width: 18px; height: 18px; }
      .btn-jump-preview {
        display: block; width: 100%; margin-top: 14px;
        padding: 12px; font-size: 15px; font-weight: 700;
        background: #2c7be5; color: white; border: none; border-radius: 10px;
        cursor: pointer; font-family: 'Nunito', Arial, sans-serif;
        letter-spacing: 0.3px;
      }
      .btn-jump-preview:active { background: #1a5fbe; }
    }

    /* ── Print Styles ── */
    @media print {
      * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      body { background: #fff !important; }
      .theme-plain .problem-block { background: none !important; }
      .theme-plain .problem-type-tag { background: none !important; }
      .theme-plain hr { border-top-color: #ccc !important; }
      .theme-plain .ws-section-title { border-bottom-color: #ccc !important; color: #333 !important; }
      body > * { display: none !important; }
      #printArea {
        display: block !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      #printArea * {
        max-height: none !important;
        overflow: visible !important;
      }
      @page { size: A4; margin: 1.5cm 0.8cm 1.2cm; @top-center { content: "generateworksheet.com"; font-size: 12px; color: #444; font-weight: bold; } @bottom-center { content: "generateworksheet.com"; font-size: 12px; color: #444; font-weight: bold; } }
      @page :first { margin-top: 1.2cm; }
      /* NOTE: do NOT use display:flex on .ws-sheet here — iOS Safari ignores
         page-break-before on children of flex containers, which causes
         multi-page drill grids to run together on a single physical page.
         @page @bottom-center already prints "generateworksheet.com" on
         every page, so .ws-footer + .ws-footer-spacer are redundant in print. */
      .ws-sheet { padding: 6px 4px !important; }
      .ws-footer, .ws-footer-spacer { display: none !important; }
      .drill-vertical { margin: 0 !important; }
      .ws-sheet.in-preview { max-height: none !important; overflow: visible !important; }
      .ws-title { font-size: 16px !important; margin-bottom: 3px !important; }
      .ws-info { font-size: 12px !important; margin-bottom: 1px !important; }
      .ws-sheet hr { margin: 3px 0 !important; }
      .ws-directions { font-size: 11px !important; margin-bottom: 4px !important; }
      .ws-section-title { font-size: 13px !important; margin: 4px 0 3px !important; padding-bottom: 2px !important; }
      .problem-block { page-break-inside: avoid; break-inside: avoid; }
      .answer-key { page-break-before: always; break-before: always; }
      /* .drill-page wraps non-first drill grids. padding-top visually
         mirrors the ~28mm header (title + info + directions + Drills
         heading) that only page 1 has, so page 2's grid doesn't hug the
         top edge. 20mm leaves ~12mm buffer on desktop and ~15mm on iOS. */
      .drill-page { page-break-before: always; break-before: page; padding-top: 20mm; }
      #shareNudge, #socialShare, #feedbackSection,
      #adsterra-top, #adsterra-bottom, #adsterra-mid, #adsterra-native { display: none !important; }
      .preview-only { display: none !important; }
    }