:root {
  --bg:#f3f6fb; --panel:#fff; --text:#172033; --muted:#6b7280; --line:#d9e1ec;
  --accent:#2563eb; --cell:60px; --picSize:62px; --clueBox:68px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
.app{max-width:1660px;margin:auto;padding:20px}
h1{margin:0;font-size:27px}
.sub{color:var(--muted);font-size:14px;margin-top:6px}
.layout{display:grid;grid-template-columns:540px 1fr;gap:18px;margin-top:18px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 7px 22px #1720330d}
.controls{padding:17px;position:sticky;top:14px;max-height:calc(100vh - 28px);overflow:auto}
.viewer{padding:16px}
.topline{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.count{font-size:13px;font-weight:700;background:#eff6ff;color:#1e40af;border-radius:99px;padding:5px 9px}
.toolbar,.opts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
button,select,input[type=text]{border:1px solid #cbd5e1;background:#fff;border-radius:9px;min-height:38px;padding:0 11px;font-weight:700;color:#243045}
input[type=text]{font-weight:500; width:100%}
button{cursor:pointer} button:hover{background:#f8fafc}
.primary{background:var(--accent);border-color:var(--accent);color:#fff;flex:1}
.toolbar.tight button{min-height:34px;padding:0 10px;font-size:12px}
.picture-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;max-height:540px;overflow:auto;padding:3px}
.card{position:relative;min-height:116px;border:2px solid #e5e7eb;border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;padding:6px;cursor:pointer}
.card:hover{border-color:#93c5fd} .card.sel{border-color:#2563eb;background:#eff6ff}
.card img{width:96px;height:96px;object-fit:contain;display:block}
.card .name{display:none;position:absolute;left:4px;right:4px;bottom:4px;background:#111827dd;color:#fff;border-radius:6px;padding:3px;font-size:10px;font-weight:700;text-align:center}
.show-names .name{display:block}
.check{display:none;position:absolute;right:5px;top:5px;width:21px;height:21px;border-radius:50%;background:#2563eb;color:white;font-weight:900;align-items:center;justify-content:center}
.card.sel .check{display:flex}
label{font-size:13px;color:#374151} input{vertical-align:middle}
.hint{font-size:12px;color:var(--muted);line-height:1.45;margin-top:8px}
.search-row{display:grid;grid-template-columns:1.35fr .95fr;gap:8px;margin-top:6px}
.category-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.category-pills button{min-height:32px;padding:0 10px;font-size:12px;border-radius:999px}
.size-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}
.size-control{border:1px solid var(--line);border-radius:10px;padding:9px;background:#fafcff}
.size-control label{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}
.size-control input[type=number]{width:100%;height:38px;border:1px solid #cbd5e1;border-radius:8px;padding:0 9px;font-size:16px;font-weight:700;color:var(--text);background:#fff}
.status{margin-top:13px;border-top:1px solid var(--line);padding-top:12px;font-size:12px}
.msg{padding:9px 10px;border-radius:9px;background:#eff6ff;color:#1e40af;margin-bottom:9px}
.warn{background:#fff7ed;color:#9a3412}
.rowstat{display:flex;justify-content:space-between;border:1px solid var(--line);border-radius:8px;padding:6px 8px;margin-top:5px}
.ok{color:#166534;font-weight:700} .bad{color:#991b1b;font-weight:700}
.viewerbar{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px}
.viewerbar small{color:var(--muted)}
.worksheet-wrap{padding:18px;background:#e9edf3;border-radius:12px;margin-top:14px;overflow:auto}
.worksheet{width:900px;max-width:100%;min-height:1080px;margin:auto;background:#fff;padding:30px 34px 42px;border:1px solid #d1d5db;box-shadow:0 6px 20px #00000014}
.print-head{text-align:center;margin-bottom:8px}
.print-head h2{font-size:32px;letter-spacing:1px;margin:0 0 7px}
.print-head p{margin:0;font-size:16px}
.meta-line{margin-top:10px;display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#475569}
.clue-sections{margin:18px 0 10px;display:grid;gap:14px}
.clue-group h3{margin:0 0 8px;font-size:18px}
.clue-list{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-start}
.clue-item{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:70px}
.clue-num{width:24px;height:24px;border:2px solid #111;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;line-height:1;background:#fff}
.clue-pic{width:var(--clueBox);height:var(--clueBox);display:flex;align-items:center;justify-content:center}
.clue-pic img{width:var(--picSize);height:var(--picSize);object-fit:contain;display:block}
.crossword-area{
  display:flex;justify-content:center;align-items:flex-start;margin-top:18px;
  break-inside:avoid;page-break-inside:avoid
}
.crossword-svg-wrap{
  display:flex;justify-content:center;align-items:flex-start;
  width:max-content;max-width:100%;
  break-inside:avoid;page-break-inside:avoid
}
.crossword-svg{
  display:block;
  width:auto;height:auto;
  max-width:100%;
  overflow:visible;
  shape-rendering:crispEdges
}
.crossword-svg .grid-line{
  stroke:#111;stroke-width:2;fill:none;
  vector-effect:non-scaling-stroke;
  shape-rendering:crispEdges
}
.crossword-svg .cell-bg{fill:#fff}
.crossword-svg .cell-num{
  fill:#111;font-family:Arial,Helvetica,sans-serif;font-weight:800;
  text-anchor:start;dominant-baseline:hanging
}
.crossword-svg .cell-letter{
  fill:#111;font-family:Arial,Helvetica,sans-serif;font-weight:800;
  text-anchor:middle;dominant-baseline:middle
}
.empty{padding:90px 20px;text-align:center;color:var(--muted)}
.legend{margin-top:10px;font-size:12px;color:var(--muted)}
@media(max-width:1100px){.layout{grid-template-columns:1fr}.controls{position:static;max-height:none}}
@media print{
  @page{size:A4 portrait;margin:7mm}
  body{background:#fff}
  .header,.controls,.viewerbar{display:none!important}
  .app,.layout,.viewer{display:block!important;max-width:none;margin:0;padding:0;border:0;box-shadow:none}
  .worksheet-wrap{padding:0;background:#fff;overflow:visible}
  .worksheet{width:100%;min-height:0;border:0;box-shadow:none;padding:4mm 2mm}
  .print-head h2{font-size:22pt}
  .print-head p{font-size:11pt}
  .meta-line{font-size:9pt;margin-top:2mm}
  .clue-sections{gap:10px;margin:5mm 0 3mm}
  .clue-group h3{font-size:14pt;margin:0 0 2mm}
  .clue-list{gap:2.5mm 3mm}
  .clue-item{min-width:17mm;gap:1mm}
  .clue-num{width:6mm;height:6mm;font-size:9pt}
  .crossword-area{margin-top:4mm;break-inside:avoid;page-break-inside:avoid}.crossword-svg-wrap{break-inside:avoid;page-break-inside:avoid}
}

/* ---------- Product flow ---------- */
body{min-height:100vh}
.product-header{
  max-width:1500px;margin:0 auto;padding:18px 24px 0;
  display:flex;align-items:center;justify-content:space-between;gap:20px
}
.brand-title{font-size:23px;font-weight:900;letter-spacing:-.3px}
.brand-sub{font-size:12px;color:var(--muted);margin-top:3px}
.steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.step-pill{
  display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800;color:#64748b
}
.step-pill i{
  width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#eef2f7;font-style:normal;font-size:11px
}
.step-pill.active{border-color:#93c5fd;color:#1d4ed8;background:#eff6ff}
.step-pill.active i{background:#2563eb;color:#fff}

#homeScreen{display:none;max-width:1120px;margin:34px auto 70px;padding:0 22px}
.home-hero{text-align:center;margin:34px 0 28px}
.home-hero h1{font-size:38px;letter-spacing:-1.2px;margin:0 0 10px}
.home-hero p{max-width:650px;margin:0 auto;color:var(--muted);font-size:16px;line-height:1.5}
.home-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;
  box-shadow:0 12px 38px rgba(31,41,55,.07)
}
.home-section-title{font-size:15px;font-weight:900;margin-bottom:12px}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.quick-card{
  text-align:left;border:1px solid #dbe3ee;border-radius:15px;background:#fff;padding:16px;
  min-height:112px;cursor:pointer;transition:.15s ease
}
.quick-card:hover{border-color:#60a5fa;box-shadow:0 6px 18px rgba(37,99,235,.1);transform:translateY(-1px)}
.quick-card b{display:block;font-size:17px;margin-bottom:5px}
.quick-card small{color:var(--muted);font-weight:500;line-height:1.35}
.quick-card.primary-card{background:#eff6ff;border-color:#93c5fd}
.theme-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.theme-strip button{border-radius:999px}
.home-footer-action{display:flex;justify-content:center;margin-top:18px}
.home-footer-action button{min-width:220px}

#workspace{display:none;max-width:1500px;margin:18px auto 70px;padding:0 20px}
#configPanel{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 12px 36px rgba(31,41,55,.08);padding:20px
}
.config-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:15px}
.config-head h2{font-size:22px;margin:0}
.config-head p{font-size:13px;color:var(--muted);margin:5px 0 0}
.config-actions-top{display:flex;gap:8px}
.drawer-only{display:none}
.config-summary{
  display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:10px 0 14px
}
.config-summary .box{border:1px solid var(--line);background:#fafcff;border-radius:11px;padding:9px}
.config-summary label{display:block;font-size:10px;font-weight:800;color:var(--muted);margin-bottom:5px}
.config-summary select{width:100%;min-height:36px}
.auto-row{display:flex;gap:8px;margin-bottom:12px}
.auto-row .primary{flex:1}
.cards-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:12px 0 8px}
.cards-heading b{font-size:14px}
.config-footer{
  position:sticky;bottom:-20px;margin:14px -20px -20px;padding:14px 20px 18px;
  background:linear-gradient(to bottom,rgba(255,255,255,.9),#fff 25%);
  border-top:1px solid var(--line);z-index:3
}
.config-footer .toolbar{margin:0}
#gen{min-height:46px;font-size:15px}

#resultStage{display:none}
.result-actions{
  position:sticky;top:10px;z-index:20;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 8px 24px rgba(31,41,55,.08);padding:10px;
  display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:12px
}
.result-actions .sep{width:1px;height:28px;background:var(--line);margin:0 2px}
.result-actions button{min-height:36px;font-size:12px;padding:0 10px}
.result-actions .em{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}
.result-actions .grow{flex:1}
.history-info{font-size:11px;font-weight:800;color:#64748b;padding:0 4px}
.result-panel{border-radius:18px}
.result-panel.viewer{padding:14px}
.result-panel .viewerbar{padding:3px 3px 12px}
.result-panel .worksheet-wrap{margin-top:12px}

.quick-size{display:flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:9px;padding:3px}
.quick-size span{font-size:10px;font-weight:800;color:#64748b;padding:0 3px}
.quick-size button{min-width:31px;padding:0}

#drawerBackdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.28);z-index:89;
  opacity:0;pointer-events:none;transition:.18s ease
}
body.drawer-open #drawerBackdrop{opacity:1;pointer-events:auto}

body.mode-home #homeScreen{display:block}
body.mode-home #workspace{display:none}

body.mode-config #homeScreen{display:none}
body.mode-config #workspace{display:block}
body.mode-config #resultStage{display:none}
body.mode-config #configPanel{
  position:static;max-width:920px;margin:18px auto 0;transform:none;height:auto;max-height:none;overflow:visible
}
body.mode-config .drawer-only{display:none}

body.mode-result #homeScreen{display:none}
body.mode-result #workspace{display:block}
body.mode-result #resultStage{display:block}
body.mode-result #configPanel{
  position:fixed;z-index:100;right:0;top:0;width:min(570px,96vw);height:100vh;
  max-height:100vh;overflow:auto;border-radius:18px 0 0 18px;margin:0;
  transform:translateX(104%);transition:transform .2s ease
}
body.mode-result.drawer-open #configPanel{transform:translateX(0)}
body.mode-result .drawer-only{display:inline-flex}

.mode-result #configPanel .picture-grid{max-height:360px}
.mode-result #configPanel .config-footer{bottom:0}

.empty-note{
  padding:10px 12px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;
  font-size:12px;color:#64748b;margin-top:8px
}

@media(max-width:800px){
  .product-header{align-items:flex-start;flex-direction:column}
  .steps{width:100%}
  .quick-grid{grid-template-columns:1fr}
  .home-hero h1{font-size:31px}
  .config-summary{grid-template-columns:1fr}
  .result-actions{top:4px}
}
@media print{
  .product-header,#homeScreen,#configPanel,#drawerBackdrop,.result-actions{display:none!important}
  #workspace,#resultStage{display:block!important;max-width:none!important;margin:0!important;padding:0!important}
  .result-panel{border:0!important;box-shadow:none!important}
  .worksheet{overflow:visible!important}
  .clue-sections{margin-top:3mm!important;margin-bottom:2mm!important;gap:2mm!important}
  .crossword-area{
    margin-top:2mm!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important
  }
  .crossword-svg-wrap{
    max-width:180mm!important;
    max-height:150mm!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important
  }
  .crossword-svg{
    max-width:180mm!important;
    max-height:150mm!important;
    width:auto!important;
    height:auto!important
  }
}


/* ---------- Product polish: projects / print / worksheet settings ---------- */
.worksheet-options{
  display:grid;grid-template-columns:1.35fr .8fr .8fr;gap:9px;margin:10px 0 12px
}
.worksheet-options .box{
  border:1px solid var(--line);background:#fafcff;border-radius:11px;padding:9px
}
.worksheet-options label{
  display:block;font-size:10px;font-weight:800;color:var(--muted);margin-bottom:5px
}
.worksheet-options input[type=text],
.worksheet-options select{
  width:100%;height:36px;border:1px solid #cbd5e1;border-radius:8px;
  background:#fff;padding:0 9px;color:var(--text)
}
.inline-checks{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 12px}
.inline-checks label{display:flex;gap:6px;align-items:center}

.pack-section{
  border:1px solid var(--line);border-radius:12px;background:#fafcff;
  padding:10px;margin:10px 0 12px
}
.pack-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}
.pack-head b{font-size:13px}
.pack-buttons{display:flex;gap:6px;flex-wrap:wrap}
.pack-buttons button{min-height:32px;border-radius:999px;font-size:12px}

.print-controls{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:10px;padding:4px 6px
}
.print-controls select{
  min-height:32px;height:32px;padding:0 7px;border:0;background:#fff;font-size:11px;font-weight:800
}

.project-modal{
  position:fixed;z-index:150;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(15,23,42,.38);padding:18px
}
.project-modal.open{display:flex}
.project-dialog{
  width:min(680px,96vw);max-height:82vh;overflow:auto;background:#fff;
  border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.2);
  padding:18px
}
.project-dialog-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:13px}
.project-dialog-head h3{margin:0;font-size:20px}
.project-list{display:grid;gap:8px}
.project-row{
  border:1px solid var(--line);border-radius:11px;padding:10px;
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center
}
.project-row b{display:block;margin-bottom:3px}
.project-row small{color:var(--muted)}
.project-actions{display:flex;gap:6px}
.project-actions button{min-height:32px;font-size:11px}
.project-empty{
  padding:28px;text-align:center;border:1px dashed #cbd5e1;border-radius:12px;color:#64748b
}
.save-row{display:flex;gap:8px;margin:0 0 14px}
.save-row input{
  flex:1;min-width:0;height:40px;border:1px solid #cbd5e1;border-radius:9px;padding:0 10px
}
.home-projects{display:flex;justify-content:center;gap:8px;margin-top:10px}

.worksheet.no-meta .meta-line{display:none}
.worksheet-title-custom{word-break:break-word}
.print-page-label{
  display:none;text-align:center;font-size:10px;font-weight:800;color:#64748b;margin-bottom:2mm
}
#printBothPages{display:none}

@media(max-width:800px){
  .worksheet-options{grid-template-columns:1fr}
}
@media print{
  body.print-both .result-panel .worksheet-wrap>.worksheet{display:none!important}
  body.print-both #printBothPages{display:block!important}
  body.print-both #printBothPages .worksheet{
    display:block!important;page-break-after:always;break-after:page;
    width:100%!important;min-height:0!important;border:0!important;box-shadow:none!important;
    padding:4mm 2mm!important
  }
  body.print-both #printBothPages .worksheet:last-child{page-break-after:auto;break-after:auto}
  body.print-both #printBothPages .print-page-label{display:block}
}


/* ---------- Product polish v2 ---------- */
.asset-note{
  margin:10px 2px 2px;font-size:10px;color:#94a3b8;text-align:center
}
@media print{.asset-note{display:none!important}}

.home-recent{
  margin-top:18px;border-top:1px solid var(--line);padding-top:16px
}
.home-recent-head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px
}
.home-recent-head b{font-size:15px}
.home-recent-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px
}
.recent-project-card{
  border:1px solid var(--line);background:#fff;border-radius:13px;padding:12px;text-align:left;
  cursor:pointer;min-height:86px
}
.recent-project-card:hover{border-color:#93c5fd;background:#f8fbff}
.recent-project-card b{display:block;font-size:14px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-project-card small{color:var(--muted);font-weight:500}
.home-recent-empty{
  color:var(--muted);font-size:12px;padding:12px;border:1px dashed #cbd5e1;border-radius:11px
}

.result-actions .danger-soft{color:#991b1b}
.project-actions .rename-btn{color:#1d4ed8}
.project-actions .duplicate-btn{color:#166534}

.new-project-confirm{
  position:fixed;z-index:170;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(15,23,42,.34);padding:18px
}
.new-project-confirm.open{display:flex}
.new-project-box{
  width:min(430px,94vw);background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 22px 60px rgba(15,23,42,.2);padding:18px
}
.new-project-box h3{margin:0 0 7px}
.new-project-box p{font-size:13px;color:var(--muted);line-height:1.45;margin:0 0 15px}
.new-project-actions{display:flex;justify-content:flex-end;gap:8px}

@media(max-width:800px){
  .home-recent-grid{grid-template-columns:1fr}
}


/* ---------- Exercise picker ---------- */
.exercise-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px
}
.exercise-card{
  position:relative;text-align:left;border:1px solid #dbe3ee;border-radius:16px;background:#fff;
  padding:16px;min-height:144px;display:flex;flex-direction:column;gap:10px;cursor:pointer;
  transition:.16s ease
}
.exercise-card.available:hover{
  border-color:#60a5fa;box-shadow:0 7px 20px rgba(37,99,235,.10);transform:translateY(-1px)
}
.exercise-card.available{
  background:linear-gradient(180deg,#f8fbff,#fff);border-color:#93c5fd
}
.exercise-card.future{
  background:#fafafa;color:#64748b
}
.exercise-card.future:hover{
  border-color:#cbd5e1;background:#f8fafc
}
.exercise-icon{
  width:42px;height:42px;border-radius:12px;background:#eff6ff;color:#2563eb;
  display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900
}
.exercise-card.future .exercise-icon{background:#f1f5f9;color:#64748b}
.exercise-copy{display:block;padding-right:44px}
.exercise-copy b{display:block;font-size:16px;color:#172033;margin-bottom:5px}
.exercise-card.future .exercise-copy b{color:#475569}
.exercise-copy small{display:block;font-size:12px;line-height:1.4;color:var(--muted);font-weight:500}
.exercise-badge{
  position:absolute;right:12px;top:12px;border-radius:999px;background:#f1f5f9;color:#64748b;
  padding:4px 8px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.25px
}
.exercise-badge.ready{background:#dcfce7;color:#166534}
.module-divider{height:1px;background:var(--line);margin:20px 0}
.future-note{
  margin:10px 0 2px;padding:11px 12px;border-radius:11px;
  background:#f8fafc;border:1px solid #dbe3ee;color:#475569;font-size:12px;line-height:1.45
}
@media(max-width:900px){
  .exercise-grid{grid-template-columns:1fr}
  .exercise-card{min-height:118px}
}
@media print{
  .exercise-grid,.future-note{display:none!important}
}


/* ---------- Crossword UX cleanup ---------- */
.creator-basics{
  display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:10px;margin:12px 0 10px
}
.basic-box{
  border:1px solid var(--line);background:#fafcff;border-radius:12px;padding:10px
}
.basic-box label{
  display:block;font-size:10px;font-weight:900;color:#64748b;margin-bottom:6px
}
.basic-box select,.basic-box input[type=text]{
  width:100%;min-height:38px;border:1px solid #cbd5e1;border-radius:9px;
  background:#fff;padding:0 10px;color:#172033
}
.title-box{grid-column:auto}
.quick-create-row{
  display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 14px
}
.quick-create-row .primary{flex:1;min-width:180px}
.selection-panel{
  border:1px solid var(--line);background:#fafcff;border-radius:14px;padding:12px;margin-bottom:12px
}
.selection-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px
}
.selection-head b{display:block;font-size:14px}
.selection-head small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.selected-words{
  display:flex;flex-wrap:wrap;gap:8px;min-height:42px
}
.selected-chip{
  display:flex;align-items:center;gap:8px;border:1px solid #dbe3ee;background:#fff;border-radius:999px;
  padding:5px 8px 5px 5px;max-width:100%
}
.selected-chip img{
  width:30px;height:30px;object-fit:contain;background:#fff;border-radius:999px;flex:0 0 auto
}
.selected-chip .txt{
  display:flex;flex-direction:column;min-width:0
}
.selected-chip .txt b{
  font-size:12px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.selected-chip .txt small{
  font-size:10px;color:#64748b;line-height:1.1
}
.selected-chip .remove{
  width:24px;height:24px;border-radius:999px;padding:0;min-width:24px;
  display:inline-flex;align-items:center;justify-content:center;font-weight:900
}
.selected-empty{
  width:100%;padding:10px 12px;border:1px dashed #cbd5e1;border-radius:11px;background:#fff;color:#64748b;font-size:12px
}
.manual-picker{
  border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px;margin-bottom:12px
}
.cards-heading.cleaner{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px
}
.cards-heading.cleaner b{display:block;font-size:14px}
.cards-heading.cleaner small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.manual-picker-actions{
  display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end
}
.opts.compact{margin-top:10px}
.advanced-panel{
  border:1px solid var(--line);background:#fff;border-radius:14px;margin-bottom:12px
}
.advanced-panel[open]{padding-bottom:12px}
.advanced-panel summary{
  cursor:pointer;list-style:none;padding:13px 14px;font-weight:900;user-select:none
}
.advanced-panel summary::-webkit-details-marker{display:none}
.advanced-panel summary::after{
  content:"▾";float:right;color:#64748b;font-size:12px
}
.advanced-panel[open] summary::after{content:"▴"}
.advanced-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:0 12px 10px
}
.advanced-panel .size-controls,.advanced-panel .opts{padding:0 12px}
.pack-section.compact{margin-top:0}
.result-actions{
  position:sticky;top:10px;z-index:20;background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 8px 24px rgba(31,41,55,.08);padding:10px;
  display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px
}
.result-group{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  padding:7px 8px;border:1px solid #e5eaf1;background:#fbfdff;border-radius:12px
}
.result-group.strong{background:#eff6ff;border-color:#bfdbfe}
.group-label{
  font-size:10px;font-weight:900;letter-spacing:.2px;text-transform:uppercase;color:#64748b;
  margin-right:2px
}
.history-mini{
  display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:9px;padding:2px 4px;background:#fff
}
.history-mini button{
  min-width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center
}
.result-actions .history-info{min-width:42px;text-align:center}
.result-actions .print-controls{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  border:0;padding:0
}
.result-actions .print-controls select{
  min-height:34px;height:34px;border:1px solid var(--line);border-radius:9px
}
.result-actions .project-group,.result-actions .print-group{background:#fff}
@media(max-width:900px){
  .creator-basics{grid-template-columns:1fr}
  .advanced-grid{grid-template-columns:1fr}
  .selection-head,.cards-heading.cleaner{flex-direction:column;align-items:flex-start}
  .manual-picker-actions{justify-content:flex-start}
}
@media print{
  .selection-panel,.manual-picker,.advanced-panel,.quick-create-row{display:none!important}
}

/* ---------- Button hover + modal header polish ---------- */

/* Neutral buttons: preserve readable text on hover */
button{
  transition:background-color .14s ease,border-color .14s ease,color .14s ease,
             box-shadow .14s ease,transform .14s ease;
}
button:hover:not(:disabled){
  background:#f1f5f9;
  border-color:#94a3b8;
  color:#172033;
}
button:active:not(:disabled){
  transform:translateY(1px);
}
button:focus-visible{
  outline:3px solid rgba(37,99,235,.18);
  outline-offset:2px;
}

/* Primary / emphasized buttons must stay high-contrast on hover */
button.primary:hover:not(:disabled),
.primary:hover:not(:disabled){
  background:#1d4ed8;
  border-color:#1d4ed8;
  color:#fff;
}
button.em:hover:not(:disabled),
.em:hover:not(:disabled){
  background:#dbeafe;
  border-color:#60a5fa;
  color:#1d4ed8;
}

/* Selected cards and special buttons should not lose their state */
.card.sel:hover{
  background:#eff6ff;
  border-color:#2563eb;
  color:#172033;
}
.exercise-card.available:hover{
  color:#172033;
}
.exercise-card.future:hover{
  color:#475569;
}

/* Top-right controls in the settings drawer / configurator */
.config-actions-top{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.config-actions-top button{
  min-height:36px;
  height:36px;
  padding:0 12px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  color:#334155;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:none;
}
.config-actions-top button:hover:not(:disabled){
  background:#f8fafc;
  border-color:#94a3b8;
  color:#0f172a;
}
.config-actions-top #cancelDrawer{
  background:#f8fafc;
}
.config-actions-top #cancelDrawer:hover:not(:disabled){
  background:#eef2f7;
  border-color:#94a3b8;
  color:#0f172a;
}

/* In drawer mode, "Начало" is secondary and "Затвори" is the compact close action */
body.mode-result .config-actions-top{
  gap:6px;
}
body.mode-result .config-actions-top #backFromConfig{
  color:#64748b;
}
body.mode-result .config-actions-top #cancelDrawer{
  color:#172033;
}

/* Better header balance in narrow drawer */
body.mode-result #configPanel .config-head{
  align-items:center;
}
body.mode-result #configPanel .config-head > div:first-child{
  min-width:0;
  flex:1 1 auto;
}
body.mode-result #configPanel .config-head h2{
  line-height:1.15;
}
body.mode-result #configPanel .config-head p{
  line-height:1.35;
}

@media(max-width:620px){
  .config-head{
    align-items:flex-start;
  }
  .config-actions-top{
    gap:6px;
  }
  .config-actions-top button{
    padding:0 10px;
    min-height:34px;
    height:34px;
  }
}


/* ---------- Drawer redesign ---------- */
body.mode-result #configPanel{
  width:min(660px,96vw);
  padding:0;
  background:#f6f8fb;
  border-left:1px solid #dbe3ee;
  border-top:0;
  border-bottom:0;
  border-radius:18px 0 0 18px;
  box-shadow:-18px 0 45px rgba(15,23,42,.14);
  scrollbar-gutter:stable;
}

/* Drawer header */
body.mode-result #configPanel .config-head{
  position:sticky;
  top:0;
  z-index:12;
  margin:0;
  padding:18px 20px 14px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #e2e8f0;
  align-items:center;
}
body.mode-result #configPanel .config-head h2{
  font-size:21px;
  margin:0;
}
body.mode-result #configPanel .config-head p{
  display:none;
}
body.mode-result #configPanel .config-actions-top #backFromConfig{
  display:none;
}
body.mode-result #configPanel .config-actions-top{
  margin-left:auto;
}
body.mode-result #configPanel .config-actions-top #cancelDrawer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  height:38px;
  padding:0 13px;
  background:#f8fafc;
  border:1px solid #cbd5e1;
  border-radius:10px;
  color:#334155;
  font-size:12px;
  font-weight:900;
}
body.mode-result #configPanel .config-actions-top #cancelDrawer:hover{
  background:#eef2f7;
  border-color:#94a3b8;
  color:#0f172a;
}

/* Main drawer content spacing */
body.mode-result #configPanel > .creator-basics,
body.mode-result #configPanel > .quick-create-row,
body.mode-result #configPanel > .pack-section,
body.mode-result #configPanel > .selection-panel,
body.mode-result #configPanel > .manual-picker,
body.mode-result #configPanel > .advanced-panel,
body.mode-result #configPanel > .status,
body.mode-result #configPanel > .asset-note{
  margin-left:20px;
  margin-right:20px;
}

body.mode-result #configPanel > .creator-basics{
  margin-top:16px;
}

/* Basics: two columns + full-width title */
body.mode-result #configPanel .creator-basics{
  grid-template-columns:1fr 1fr;
  gap:10px;
}
body.mode-result #configPanel .creator-basics .title-box{
  grid-column:1 / -1;
}
body.mode-result #configPanel .basic-box{
  background:#fff;
  border-color:#dbe3ee;
  padding:10px 11px;
}
body.mode-result #configPanel .basic-box select,
body.mode-result #configPanel .basic-box input[type=text]{
  min-height:40px;
}

/* Primary actions */
body.mode-result #configPanel .quick-create-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
body.mode-result #configPanel .quick-create-row .primary{
  grid-column:1 / -1;
  min-width:0;
  min-height:42px;
}
body.mode-result #configPanel .quick-create-row button:not(.primary){
  width:100%;
}

/* Ready packs */
body.mode-result #configPanel .pack-section{
  padding:10px 11px;
  background:#fff;
}
body.mode-result #configPanel .pack-head{
  margin-bottom:7px;
}
body.mode-result #configPanel .pack-head small{
  display:none;
}
body.mode-result #configPanel .pack-buttons{
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:thin;
}
body.mode-result #configPanel .pack-buttons button{
  flex:0 0 auto;
  white-space:nowrap;
}

/* Selected images: one clean horizontal strip */
body.mode-result #configPanel .selection-panel{
  background:#fff;
  padding:11px 12px 12px;
}
body.mode-result #configPanel .selection-head{
  align-items:center;
  margin-bottom:8px;
}
body.mode-result #configPanel .selection-head small{
  display:none;
}
body.mode-result #configPanel .selected-words{
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  min-height:54px;
  padding:2px 1px 5px;
  scrollbar-width:thin;
}
body.mode-result #configPanel .selected-chip{
  flex:0 0 auto;
  gap:6px;
  padding:4px 6px 4px 4px;
}
body.mode-result #configPanel .selected-chip img{
  width:28px;
  height:28px;
}
body.mode-result #configPanel .selected-chip .txt small{
  display:none;
}
body.mode-result #configPanel .selected-chip .remove{
  width:22px;
  min-width:22px;
  height:22px;
}

/* Manual picker */
body.mode-result #configPanel .manual-picker{
  background:#fff;
}
body.mode-result #configPanel .picture-grid{
  max-height:310px;
}
body.mode-result #configPanel .cards-heading.cleaner small{
  display:none;
}

/* Advanced settings */
body.mode-result #configPanel .advanced-panel{
  background:#fff;
}
body.mode-result #configPanel .advanced-panel summary{
  padding:13px 14px;
}

/* Status: only the useful summary in drawer, no diagnostic word-by-word list */
body.mode-result #configPanel .status{
  margin-top:12px;
  padding-top:0;
  border-top:0;
}
body.mode-result #configPanel .status .rowstat{
  display:none;
}
body.mode-result #configPanel .status .msg{
  margin:0;
  border:1px solid #bfdbfe;
  padding:9px 11px;
}
body.mode-result #configPanel .asset-note{
  display:none;
}

/* Prevent sticky CTA from covering content */
body.mode-result #configPanel{
  padding-bottom:86px;
}
body.mode-result #configPanel .config-footer{
  position:fixed;
  right:0;
  bottom:0;
  z-index:15;
  width:min(660px,96vw);
  margin:0;
  padding:12px 20px 14px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);
  border-top:1px solid #dbe3ee;
  box-shadow:0 -10px 24px rgba(15,23,42,.08);
}
body.mode-result #configPanel .config-footer .toolbar{
  margin:0;
}
body.mode-result #configPanel #gen{
  min-height:46px;
  border-radius:11px;
  font-size:15px;
}

/* Drawer itself scrolls, header/footer stay visually anchored */
body.mode-result #configPanel{
  overflow-y:auto;
  overscroll-behavior:contain;
}

@media(max-width:700px){
  body.mode-result #configPanel{
    width:100vw;
    max-width:100vw;
    border-radius:0;
  }
  body.mode-result #configPanel .config-footer{
    width:100vw;
  }
}


/* ---------- Clean result command bar ---------- */
.clean-commandbar{
  position:sticky;
  top:10px;
  z-index:25;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 12px;
  margin-bottom:12px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);
  border:1px solid #dbe3ee;
  border-radius:14px;
  box-shadow:0 7px 20px rgba(15,23,42,.06);
}
.command-main{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.clean-commandbar button,
.clean-commandbar summary,
.clean-commandbar select{
  min-height:36px;
  height:36px;
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#fff;
  color:#334155;
  font-size:12px;
  font-weight:800;
}
.clean-commandbar button{
  padding:0 11px;
}
.clean-commandbar button:hover:not(:disabled),
.clean-commandbar summary:hover{
  background:#f8fafc;
  border-color:#94a3b8;
  color:#0f172a;
}
.clean-commandbar .command-primary{
  background:#eff6ff;
  border-color:#93c5fd;
  color:#1d4ed8;
}
.clean-commandbar .command-primary:hover{
  background:#dbeafe;
  border-color:#60a5fa;
  color:#1d4ed8;
}
.clean-commandbar .command-ghost{
  border-color:transparent;
  background:transparent;
  color:#64748b;
  padding-left:7px;
  padding-right:7px;
}
.clean-commandbar .command-ghost:hover{
  background:#f1f5f9;
  border-color:#e2e8f0;
  color:#0f172a;
}

/* Dropdown menus */
.command-menu{
  position:relative;
}
.command-menu > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 11px;
  user-select:none;
}
.command-menu > summary::-webkit-details-marker{display:none}
.command-menu .chev{
  font-size:9px;
  color:#94a3b8;
  transition:transform .14s ease;
}
.command-menu[open] .chev{
  transform:rotate(180deg);
}
.command-menu[open] > summary{
  background:#f8fafc;
  border-color:#94a3b8;
  color:#0f172a;
}
.command-popover{
  position:absolute;
  top:43px;
  left:0;
  z-index:50;
  min-width:190px;
  padding:7px;
  display:grid;
  gap:5px;
  background:#fff;
  border:1px solid #dbe3ee;
  border-radius:12px;
  box-shadow:0 16px 38px rgba(15,23,42,.14);
}
.command-popover > button{
  width:100%;
  text-align:left;
  justify-content:flex-start;
  border-color:transparent;
  background:#fff;
}
.command-popover > button:hover{
  background:#f1f5f9;
  border-color:#e2e8f0;
}
.command-menu.wide .command-popover{
  min-width:260px;
}
.layout-popover{
  gap:9px;
  padding:10px;
}
.popover-section{
  display:grid;
  gap:5px;
}
.popover-section + .popover-section{
  padding-top:8px;
  border-top:1px solid #edf1f5;
}
.popover-label{
  font-size:10px;
  font-weight:900;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.25px;
}
.popover-inline,
.variant-control{
  display:flex;
  align-items:center;
  gap:6px;
}
.popover-inline span{
  flex:1;
  text-align:center;
  font-size:12px;
  font-weight:800;
  color:#475569;
}
.popover-inline button,
.variant-control button{
  min-width:34px;
  padding:0 8px;
}
.popover-section .full{
  width:100%;
}
.variant-control .history-info{
  flex:1;
  min-width:54px;
  text-align:center;
  font-size:12px;
  font-weight:900;
  color:#475569;
}

/* Print block: visually separated primary action */
.command-print{
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
}
.command-print select{
  padding:0 30px 0 10px;
  background:#fff;
}
.clean-commandbar .print-main{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
  padding:0 16px;
}
.clean-commandbar .print-main:hover{
  background:#1d4ed8;
  border-color:#1d4ed8;
  color:#fff;
}

@media(max-width:980px){
  .clean-commandbar{
    align-items:flex-start;
  }
  .command-print{
    width:100%;
    justify-content:flex-end;
    border-top:1px solid #edf1f5;
    padding-top:9px;
  }
}
@media(max-width:650px){
  .command-main{
    width:100%;
  }
  .command-menu{
    position:static;
  }
  .command-popover{
    position:fixed;
    left:12px;
    right:12px;
    top:auto;
    width:auto;
  }
  .command-print{
    justify-content:stretch;
  }
  .command-print select,
  .command-print .print-main{
    flex:1;
  }
}
@media print{
  .clean-commandbar{display:none!important}
}


/* ---------- Global UX cleanup ---------- */

/* App shell */
body{
  background:#eef3f8;
}
.app{
  max-width:1480px;
  margin:0 auto;
}

/* Header / stepper */
header{
  padding-bottom:10px;
}
.steps{
  gap:10px;
}
.step-pill{
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid #dbe3ee;
  box-shadow:0 1px 0 rgba(15,23,42,.02);
  color:#64748b;
  font-size:13px;
  font-weight:800;
}
.step-pill i{
  width:22px;height:22px;font-size:12px;
}
.step-pill.active{
  background:#eff6ff;
  border-color:#93c5fd;
  color:#1d4ed8;
}
.step-pill.done{
  background:#f8fafc;
}

/* Config stage card */
body.mode-config #configPanel{
  max-width:920px;
  margin:8px auto 0;
  padding:20px;
  background:#fff;
  border:1px solid #dbe3ee;
  border-radius:22px;
  box-shadow:0 14px 40px rgba(15,23,42,.05);
}
body.mode-config #configPanel .config-head{
  margin-bottom:14px;
}
body.mode-config #configPanel .config-head h2{
  font-size:20px;
  line-height:1.15;
}
body.mode-config #configPanel .config-head p{
  max-width:560px;
  font-size:13px;
  line-height:1.45;
  color:#6b7280;
}
body.mode-config #configPanel .config-actions-top button{
  min-height:38px;
  height:38px;
  padding:0 14px;
  border-radius:11px;
}

/* Basics cleaner */
body.mode-config #configPanel .creator-basics{
  gap:12px;
  margin-bottom:12px;
}
body.mode-config #configPanel .basic-box{
  background:#f8fafc;
  border-color:#dbe3ee;
  border-radius:14px;
  padding:12px;
}
body.mode-config #configPanel .basic-box label{
  font-size:11px;
  margin-bottom:7px;
}
body.mode-config #configPanel .basic-box select,
body.mode-config #configPanel .basic-box input[type=text]{
  min-height:40px;
  border-radius:10px;
}

/* Primary quick actions */
body.mode-config #configPanel .quick-create-row{
  display:grid;
  grid-template-columns:1.35fr .65fr .65fr;
  gap:8px;
  margin:0 0 14px;
}
body.mode-config #configPanel .quick-create-row button{
  min-height:42px;
  border-radius:11px;
}
body.mode-config #configPanel .quick-create-row .primary{
  min-width:0;
}

/* Section cards */
body.mode-config #configPanel .pack-section,
body.mode-config #configPanel .selection-panel,
body.mode-config #configPanel .manual-picker,
body.mode-config #configPanel .advanced-panel{
  background:#fbfdff;
  border:1px solid #dbe3ee;
  border-radius:16px;
}
body.mode-config #configPanel .pack-section{
  padding:12px;
  margin-bottom:12px;
}
body.mode-config #configPanel .pack-head{
  align-items:center;
  margin-bottom:8px;
}
body.mode-config #configPanel .pack-head small{
  color:#94a3b8;
}

/* Ready pack buttons */
body.mode-config #configPanel .pack-buttons{
  gap:8px;
  flex-wrap:wrap;
}
body.mode-config #configPanel .pack-buttons button{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:#fff;
}

/* Selected images now compact strip */
body.mode-config #configPanel .selection-panel{
  padding:12px;
  margin-bottom:14px;
}
body.mode-config #configPanel .selection-head{
  align-items:center;
  margin-bottom:8px;
}
body.mode-config #configPanel .selection-head small{
  display:none;
}
body.mode-config #configPanel .selected-words{
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  gap:8px;
  min-height:56px;
  padding:2px 1px 4px;
  scrollbar-width:thin;
}
body.mode-config #configPanel .selected-chip{
  flex:0 0 auto;
  gap:7px;
  padding:5px 7px 5px 5px;
  border-radius:999px;
}
body.mode-config #configPanel .selected-chip img{
  width:31px;
  height:31px;
}
body.mode-config #configPanel .selected-chip .txt small{
  display:none;
}
body.mode-config #configPanel .selected-chip .remove{
  width:24px;
  min-width:24px;
  height:24px;
}
body.mode-config #configPanel .selected-empty{
  font-size:12px;
}

/* Manual picker simplified */
body.mode-config #configPanel .manual-picker{
  padding:12px;
  margin-bottom:14px;
}
body.mode-config #configPanel .cards-heading.cleaner{
  align-items:center;
  margin-bottom:10px;
}
body.mode-config #configPanel .cards-heading.cleaner small{
  display:none;
}
body.mode-config #configPanel .manual-picker-actions{
  gap:6px;
}
body.mode-config #configPanel .manual-picker-actions button{
  min-height:34px;
  padding:0 10px;
  border-radius:10px;
  font-size:12px;
}
body.mode-config #configPanel .search-row{
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:8px;
  margin-bottom:10px;
}
body.mode-config #configPanel .search-row input,
body.mode-config #configPanel .search-row select{
  min-height:40px;
  border-radius:10px;
  border-color:#dbe3ee;
  background:#fff;
}

/* Categories as a cleaner scrollable chip row */
body.mode-config #configPanel .category-pills{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 0 8px;
  scrollbar-width:thin;
}
body.mode-config #configPanel .category-pills button{
  flex:0 0 auto;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  white-space:nowrap;
}

/* Picture grid: smaller and calmer */
body.mode-config #configPanel .picture-grid{
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;
  max-height:390px;
  padding:2px;
}
body.mode-config #configPanel .card{
  min-height:112px;
  border-width:1px;
  border-color:#dbe3ee;
  border-radius:14px;
  background:#fff;
  padding:8px;
}
body.mode-config #configPanel .card:hover{
  border-color:#93c5fd;
  box-shadow:0 3px 10px rgba(37,99,235,.08);
}
body.mode-config #configPanel .card.sel{
  background:#eff6ff;
  border-color:#2563eb;
}
body.mode-config #configPanel .card img{
  width:84px;
  height:84px;
}
body.mode-config #configPanel .card .name{
  left:6px;right:6px;bottom:6px;
  font-size:10px;
  padding:3px 5px;
}
body.mode-config #configPanel .check{
  width:20px;height:20px;
}

/* Hide technical placement rows in config globally */
body.mode-config #configPanel .status{
  margin-top:10px;
}
body.mode-config #configPanel .status .rowstat{
  display:none;
}
body.mode-config #configPanel .status .msg{
  margin:0;
  padding:10px 12px;
  border-radius:12px;
}
body.mode-config #configPanel .asset-note{
  display:none;
}

/* Advanced settings */
body.mode-config #configPanel .advanced-panel{
  margin-bottom:12px;
}
body.mode-config #configPanel .advanced-panel summary{
  padding:14px 15px;
  font-size:15px;
}
body.mode-config #configPanel .advanced-grid{
  gap:12px;
  padding:0 12px 12px;
}
body.mode-config #configPanel .size-controls{
  gap:12px;
}
body.mode-config #configPanel .opts{
  gap:10px 18px;
}

/* Bottom CTA calmer */
body.mode-config #configPanel .config-footer{
  position:sticky;
  bottom:0;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96) 26%,rgba(255,255,255,.98));
  padding-top:10px;
  margin-top:10px;
}
body.mode-config #configPanel .config-footer .toolbar{
  margin:0;
}
body.mode-config #configPanel #gen{
  min-height:46px;
  border-radius:12px;
  box-shadow:0 10px 22px rgba(37,99,235,.14);
}

/* Result stage shell a bit cleaner too */
body.mode-result #resultStage{
  background:#fff;
  border:1px solid #dbe3ee;
  border-radius:22px;
  box-shadow:0 14px 40px rgba(15,23,42,.05);
  padding:14px;
}
body.mode-result .preview-shell{
  border-radius:18px;
}
body.mode-result .stage-head{
  padding:0 2px 12px;
}

/* Home screen cards a little calmer */
#homeScreen .home-card{
  border-radius:20px;
  border-color:#dbe3ee;
  box-shadow:0 14px 40px rgba(15,23,42,.05);
}

/* Responsive */
@media(max-width:960px){
  body.mode-config #configPanel{
    max-width:none;
    margin:8px 12px 0;
    padding:16px;
  }
  body.mode-config #configPanel .quick-create-row{
    grid-template-columns:1fr 1fr;
  }
  body.mode-config #configPanel .quick-create-row .primary{
    grid-column:1 / -1;
  }
}
@media(max-width:720px){
  body.mode-config #configPanel .creator-basics,
  body.mode-config #configPanel .advanced-grid,
  body.mode-config #configPanel .search-row{
    grid-template-columns:1fr;
  }
  body.mode-config #configPanel .cards-heading.cleaner{
    align-items:flex-start;
  }
  body.mode-config #configPanel .manual-picker-actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  body.mode-config #configPanel .picture-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* ---------- Crossword quality tools ---------- */
.placement-notice{
  margin:0 2px 10px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid #fed7aa;
  background:#fff7ed;
  color:#9a3412;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
}
.placement-notice[hidden]{display:none!important}
.placement-notice button{
  flex:0 0 auto;
  min-height:34px;
  border:1px solid #fdba74;
  background:#fff;
  color:#9a3412;
  border-radius:9px;
  font-weight:900;
}
.placement-notice button:hover{
  background:#ffedd5;
  border-color:#fb923c;
  color:#7c2d12;
}
.clean-commandbar .active-toggle{
  background:#eff6ff!important;
  border-color:#60a5fa!important;
  color:#1d4ed8!important;
}
@media print{
  .placement-notice{display:none!important}
}


/* ---------- Prevent CTA from covering manual picture selection ---------- */
body.mode-result #configPanel.manual-picker-open{
  padding-bottom:20px;
}
body.mode-result #configPanel.manual-picker-open .config-footer{
  position:static;
  width:auto;
  margin:14px 20px 4px;
  padding:0;
  background:transparent;
  border-top:0;
  box-shadow:none;
}
body.mode-result #configPanel.manual-picker-open .config-footer .toolbar{
  margin:0;
}
body.mode-result #configPanel.manual-picker-open #gen{
  width:100%;
}

/* Give the picture picker a little breathing room at the bottom */
body.mode-result #configPanel.manual-picker-open .manual-picker{
  margin-bottom:14px;
}

/* Full configurator: same principle when manually choosing pictures */
body.mode-config #configPanel.manual-picker-open .config-footer{
  position:static;
  margin:14px 0 0;
  padding:0;
  background:transparent;
}


/* ---------- Apply settings without rebuilding the crossword ---------- */
.config-footer-actions{
  display:flex;
  gap:8px;
}
body.mode-result #configPanel .config-footer-actions #applySettings{
  display:inline-flex;
  flex:0 0 auto;
  min-width:170px;
  justify-content:center;
  align-items:center;
  min-height:46px;
  border-radius:11px;
  border:1px solid #93c5fd;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:13px;
  font-weight:900;
}
body.mode-result #configPanel .config-footer-actions #applySettings:hover:not(:disabled){
  background:#dbeafe;
  border-color:#60a5fa;
  color:#1d4ed8;
}
body.mode-result #configPanel .config-footer-actions #applySettings:disabled{
  opacity:.48;
  cursor:not-allowed;
}
body.mode-result #configPanel .config-footer-actions #gen{
  flex:1;
}
.regen-hint{
  margin-top:7px;
  padding:7px 9px;
  border-radius:9px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#9a3412;
  font-size:11px;
  line-height:1.35;
}
body.mode-config #applySettings,
body.mode-config #regenHint{
  display:none!important;
}
body.mode-result #configPanel.manual-picker-open .config-footer-actions{
  display:grid;
  grid-template-columns:auto 1fr;
}
@media(max-width:560px){
  body.mode-result #configPanel .config-footer-actions,
  body.mode-result #configPanel.manual-picker-open .config-footer-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  body.mode-result #configPanel .config-footer-actions #applySettings{
    min-width:0;
  }
}


/* ---------- Drawer scroll fix for Advanced settings ---------- */

/* Make the drawer reserve space for the sticky footer so the last
   controls can scroll fully into view. */
body.mode-result #configPanel{
  box-sizing:border-box;
  padding:20px 20px 120px;
}

/* Use a cleaner sticky footer inside the drawer */
body.mode-result #configPanel .config-footer{
  position:sticky;
  bottom:0;
  margin:14px 0 0;
  padding:12px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.94) 24%,#fff 54%);
  border-top:0;
  z-index:6;
}

/* Keep the manual-picker case consistent too */
body.mode-result #configPanel.manual-picker-open .config-footer{
  margin:14px 0 0;
}

/* Give the last settings block a little extra room visually */
body.mode-result #configPanel .advanced-panel{
  margin-bottom:12px;
}
body.mode-result #configPanel .status{
  margin-bottom:8px;
}

/* Mobile full-width drawer */
@media(max-width:700px){
  body.mode-result #configPanel{
    padding:18px 16px 120px;
  }
}


/* ---------- Robust drawer structure: header / scroll body / footer ---------- */

/* Outside drawer, wrapper should not alter the existing full-page layout. */
.config-scroll-body{
  display:contents;
}

/* Drawer becomes a real 3-zone layout. */
body.mode-result #configPanel{
  display:flex;
  flex-direction:column;
  height:100dvh;
  max-height:100dvh;
  overflow:hidden!important;
  padding:0!important;
}

/* Header stays fixed at top but is not inside the scroll area. */
body.mode-result #configPanel .config-head{
  flex:0 0 auto;
  position:relative!important;
  top:auto!important;
  margin:0!important;
  padding:18px 20px 14px!important;
  background:#fff!important;
  border-bottom:1px solid #e2e8f0;
  z-index:3;
}

/* Only the middle content scrolls. */
body.mode-result #configPanel .config-scroll-body{
  display:block;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:16px 20px 22px;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

/* Restore clean spacing now that direct-child selectors no longer apply. */
body.mode-result #configPanel .config-scroll-body > .creator-basics,
body.mode-result #configPanel .config-scroll-body > .quick-create-row,
body.mode-result #configPanel .config-scroll-body > .pack-section,
body.mode-result #configPanel .config-scroll-body > .selection-panel,
body.mode-result #configPanel .config-scroll-body > .manual-picker,
body.mode-result #configPanel .config-scroll-body > .advanced-panel,
body.mode-result #configPanel .config-scroll-body > .status,
body.mode-result #configPanel .config-scroll-body > .asset-note{
  margin-left:0!important;
  margin-right:0!important;
}

body.mode-result #configPanel .config-scroll-body > .creator-basics{
  margin-top:0!important;
}

/* Footer is a fixed-height zone BELOW the scrolling content, never on top of it. */
body.mode-result #configPanel .config-footer,
body.mode-result #configPanel.manual-picker-open .config-footer{
  flex:0 0 auto;
  position:relative!important;
  inset:auto!important;
  width:auto!important;
  margin:0!important;
  padding:12px 20px 14px!important;
  background:#fff!important;
  border-top:1px solid #dbe3ee!important;
  box-shadow:0 -8px 22px rgba(15,23,42,.07)!important;
  z-index:4;
}

/* No special bottom padding is needed anymore. */
body.mode-result #configPanel.manual-picker-open{
  padding-bottom:0!important;
}

/* Keep advanced settings fully reachable. */
body.mode-result #configPanel .advanced-panel{
  margin-bottom:12px!important;
}
body.mode-result #configPanel .status{
  margin-bottom:0!important;
}

/* Prevent horizontal overflow from wide settings rows. */
body.mode-result #configPanel .advanced-grid,
body.mode-result #configPanel .size-controls{
  min-width:0;
}
body.mode-result #configPanel .basic-box,
body.mode-result #configPanel .size-control{
  min-width:0;
}
body.mode-result #configPanel select,
body.mode-result #configPanel input{
  max-width:100%;
}

/* Mobile / narrow viewport */
@media(max-width:700px){
  body.mode-result #configPanel .config-head{
    padding:15px 16px 12px!important;
  }
  body.mode-result #configPanel .config-scroll-body{
    padding:14px 16px 20px;
  }
  body.mode-result #configPanel .config-footer,
  body.mode-result #configPanel.manual-picker-open .config-footer{
    padding:10px 16px 12px!important;
  }
}


/* ============================================================
   Split drawers: Settings vs Words
   ============================================================ */

/* Settings drawer in result mode: hide all word-related controls. */
body.mode-result #configPanel .word-config-only{
  display:none!important;
}
body.mode-result #configPanel .config-basics-main{
  grid-template-columns:1fr!important;
}
body.mode-result #configPanel .config-basics-main > .basic-box:nth-child(1),
body.mode-result #configPanel .config-basics-main > .basic-box:nth-child(2){
  display:none!important;
}
body.mode-result #configPanel .config-basics-main .title-box{
  grid-column:1!important;
}
body.mode-result #configPanel #advancedConfig{
  display:block!important;
  border:0;
  background:transparent;
  margin:0;
}
body.mode-result #configPanel #advancedConfig > summary{
  display:none;
}
body.mode-result #configPanel #advancedConfig[open]{
  padding-bottom:0;
}
body.mode-result #configPanel #advancedConfig .advanced-grid{
  grid-template-columns:1fr 1fr!important;
  padding:0 0 12px!important;
}
body.mode-result #configPanel #advancedConfig .size-controls,
body.mode-result #configPanel #advancedConfig .opts{
  padding-left:0!important;
  padding-right:0!important;
}
body.mode-result #configPanel #gen{
  display:none!important;
}
body.mode-result #configPanel .config-footer-actions #applySettings{
  width:100%;
  min-width:0;
  flex:1;
}
body.mode-result #configPanel .regen-hint{
  margin-bottom:0;
}
body.mode-result #configPanel .status{
  display:none!important;
}

/* Words drawer shell */
.words-drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:108;
  background:rgba(15,23,42,.28);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
body.words-drawer-open .words-drawer-backdrop{
  opacity:1;
  pointer-events:auto;
}
#wordsDrawer{
  position:fixed;
  z-index:109;
  top:0;
  right:0;
  width:min(660px,96vw);
  height:100dvh;
  max-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#f6f8fb;
  border-left:1px solid #dbe3ee;
  border-radius:18px 0 0 18px;
  box-shadow:-18px 0 45px rgba(15,23,42,.14);
  transform:translateX(104%);
  transition:transform .2s ease;
}
body.words-drawer-open #wordsDrawer{
  transform:translateX(0);
}
.words-drawer-head{
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:18px 20px 14px;
  background:#fff;
  border-bottom:1px solid #e2e8f0;
}
.words-drawer-head h2{
  margin:0;
  font-size:21px;
}
.words-drawer-head p{
  margin:4px 0 0;
  color:#64748b;
  font-size:12px;
  line-height:1.35;
}
.words-drawer-head button{
  min-height:38px;
  height:38px;
  padding:0 13px;
  border-radius:10px;
  white-space:nowrap;
}
.words-drawer-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:16px 20px 22px;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.words-drawer-footer{
  flex:0 0 auto;
  padding:11px 20px 14px;
  background:#fff;
  border-top:1px solid #dbe3ee;
  box-shadow:0 -8px 22px rgba(15,23,42,.07);
}
.words-drawer-footer > div{
  margin-bottom:7px;
  color:#64748b;
  font-size:11px;
}
.words-drawer-footer button{
  width:100%;
  min-height:46px;
  border-radius:11px;
}

.words-basics{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}
.words-basics .basic-box{
  background:#fff;
}
.words-primary-actions{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:8px;
  margin:12px 0;
}
.words-primary-actions button{
  min-height:42px;
}
.words-quick-edit{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:12px;
  padding:10px 11px;
  border:1px solid #dbe3ee;
  border-radius:12px;
  background:#fff;
}
.words-quick-edit > span{
  margin-right:auto;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.words-quick-edit button{
  min-height:34px;
  font-size:12px;
}
.words-pack-panel,
.words-selected-panel,
.words-manual-panel{
  margin-bottom:12px;
  padding:11px 12px;
  border:1px solid #dbe3ee;
  border-radius:14px;
  background:#fff;
}
.words-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.words-section-head b{font-size:14px}
.words-section-head small{
  display:block;
  margin-top:2px;
  color:#64748b;
  font-size:11px;
}
.words-selected-preview{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  padding:2px 1px 5px;
  scrollbar-width:thin;
}
.words-selected-chip{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 7px 5px 5px;
  border:1px solid #dbe3ee;
  border-radius:999px;
  background:#fff;
}
.words-selected-chip img{
  width:30px;height:30px;object-fit:contain;
}
.words-selected-chip b{font-size:12px}
.words-selected-chip button{
  min-width:23px;width:23px;height:23px;padding:0;border-radius:999px;
}
.words-manual-panel{
  padding:0;
}
.words-manual-panel summary{
  cursor:pointer;
  list-style:none;
  padding:13px 14px;
  font-weight:900;
}
.words-manual-panel summary::-webkit-details-marker{display:none}
.words-manual-panel summary::after{
  content:"▾";float:right;color:#64748b;font-size:11px;
}
.words-manual-panel[open] summary::after{content:"▴"}
.words-manual-panel[open]{
  padding-bottom:12px;
}
.words-search-row{
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:8px;
  padding:0 12px 9px;
}
.words-search-row input,
.words-search-row select{
  min-height:39px;
  width:100%;
}
.words-cat-pills{
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:0 12px 9px;
  scrollbar-width:thin;
}
.words-cat-pills button{
  flex:0 0 auto;
  min-height:32px;
  border-radius:999px;
  white-space:nowrap;
  font-size:11px;
}
.words-manual-tools{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding:0 12px 9px;
}
.words-manual-tools button{
  min-height:33px;
  font-size:11px;
}
.words-picture-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  max-height:350px;
  overflow-y:auto;
  padding:2px 12px 10px;
}
.words-card{
  position:relative;
  min-height:108px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7px;
  border:1px solid #dbe3ee;
  border-radius:13px;
  background:#fff;
  cursor:pointer;
}
.words-card:hover{
  border-color:#93c5fd;
}
.words-card.sel{
  border-color:#2563eb;
  background:#eff6ff;
}
.words-card img{
  width:82px;height:82px;object-fit:contain;
}
.words-card .words-check{
  display:none;
  position:absolute;
  top:5px;right:5px;
  width:20px;height:20px;
  align-items:center;justify-content:center;
  border-radius:50%;
  background:#2563eb;color:#fff;font-weight:900;
}
.words-card.sel .words-check{display:flex}
.words-card .words-name{
  display:none;
  position:absolute;
  left:5px;right:5px;bottom:5px;
  padding:3px;
  border-radius:6px;
  background:rgba(15,23,42,.85);
  color:#fff;
  font-size:10px;
  font-weight:800;
  text-align:center;
}
.words-picture-grid.show-names .words-name{display:block}
.words-show-names{
  display:block;
  padding:0 12px;
  font-size:12px;
}

/* ============================================================
   Screen A4 orientation preview
   ============================================================ */
.worksheet.orientation-portrait{
  width:900px;
  max-width:100%;
  min-height:0!important;
  aspect-ratio:210 / 297;
}
.worksheet.orientation-landscape{
  width:1180px;
  max-width:100%;
  min-height:0!important;
  aspect-ratio:297 / 210;
  display:grid;
  grid-template-columns:minmax(260px, .38fr) minmax(0, .62fr);
  grid-template-areas:
    "head head"
    "clues crossword";
  column-gap:24px;
  align-content:start;
}
.worksheet.orientation-landscape .print-head{
  grid-area:head;
}
.worksheet.orientation-landscape .clue-sections{
  grid-area:clues;
  margin:14px 0 0;
  align-self:start;
}
.worksheet.orientation-landscape .crossword-area{
  grid-area:crossword;
  margin-top:14px;
  align-self:start;
  justify-content:center;
}
.worksheet.orientation-landscape .clue-list{
  gap:8px 10px;
}
.worksheet.orientation-landscape .clue-item{
  min-width:62px;
}

/* ============================================================
   Landscape printing: clues left + crossword right on ONE A4
   ============================================================ */
@media print{
  .worksheet.orientation-landscape{
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    display:grid!important;
    grid-template-columns:36% 64%!important;
    grid-template-areas:
      "head head"
      "clues crossword"!important;
    column-gap:4mm!important;
    row-gap:0!important;
    align-content:start!important;
    padding:2.5mm 2mm!important;
    page-break-inside:avoid!important;
    break-inside:avoid!important;
    overflow:hidden!important;
  }
  .worksheet.orientation-landscape .print-head{
    grid-area:head!important;
    margin-bottom:2mm!important;
  }
  .worksheet.orientation-landscape .print-head h2{
    font-size:19pt!important;
    margin-bottom:1mm!important;
  }
  .worksheet.orientation-landscape .print-head p{
    font-size:9.5pt!important;
  }
  .worksheet.orientation-landscape .meta-line{
    margin-top:1.5mm!important;
    font-size:8.5pt!important;
  }
  .worksheet.orientation-landscape .clue-sections{
    grid-area:clues!important;
    margin:0!important;
    gap:2.5mm!important;
    align-self:start!important;
  }
  .worksheet.orientation-landscape .clue-group h3{
    font-size:11pt!important;
    margin-bottom:1.5mm!important;
  }
  .worksheet.orientation-landscape .clue-list{
    gap:1.5mm 2mm!important;
  }
  .worksheet.orientation-landscape .clue-item{
    min-width:14mm!important;
    gap:.5mm!important;
  }
  .worksheet.orientation-landscape .clue-num{
    width:5mm!important;height:5mm!important;font-size:7.5pt!important;
  }
  .worksheet.orientation-landscape .clue-pic{
    width:14mm!important;height:14mm!important;
  }
  .worksheet.orientation-landscape .clue-pic img{
    max-width:13mm!important;max-height:13mm!important;
  }
  .worksheet.orientation-landscape .crossword-area{
    grid-area:crossword!important;
    margin:0!important;
    align-self:start!important;
    justify-content:center!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  .worksheet.orientation-landscape .crossword-svg-wrap{
    max-width:170mm!important;
    max-height:158mm!important;
  }
  .worksheet.orientation-landscape .crossword-svg{
    max-width:170mm!important;
    max-height:158mm!important;
  }
}

/* Hide new drawer in print */
@media print{
  #wordsDrawer,#wordsDrawerBackdrop{display:none!important}
}

@media(max-width:700px){
  #wordsDrawer{
    width:100vw;
    max-width:100vw;
    border-radius:0;
  }
  .words-basics{
    grid-template-columns:1fr;
  }
  .words-primary-actions{
    grid-template-columns:1fr;
  }
  .words-picture-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .worksheet.orientation-landscape{
    grid-template-columns:1fr;
    grid-template-areas:
      "head"
      "clues"
      "crossword";
  }
}


/* ---------- Settings drawer visibility fix ---------- */
body.mode-result #configPanel #advancedConfig[open]{
  display:block!important;
}
body.mode-result #configPanel #advancedConfig .advanced-grid{
  margin-top:0;
}
body.mode-result #configPanel .config-scroll-body{
  background:#f6f8fb;
}
body.mode-result #configPanel .config-basics-main{
  margin-bottom:12px!important;
}


/* ---------- Words count behavior ---------- */
.words-basics .basic-box:first-child::after{
  content:"Промяната на броя запазва текущите думи, когато е възможно.";
  display:block;
  margin-top:6px;
  color:#94a3b8;
  font-size:9px;
  line-height:1.25;
}


/* ============================================================
   Platform Stabilization v5
   ============================================================ */
.legacy-steps{display:none!important}
.platform-breadcrumb{display:flex;align-items:center;gap:7px;color:#64748b;font-size:12px;font-weight:700;background:#fff;border:1px solid #dbe3ee;border-radius:999px;min-height:34px;padding:0 13px}
.platform-breadcrumb b{color:#1e40af}.crumb-sep{color:#cbd5e1}
.project-io-row{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid #edf1f5}
.project-io-row button{min-height:36px}
.print-preflight{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 8px;border-radius:999px;font-size:10px;font-weight:900;white-space:nowrap;color:#64748b;background:#f8fafc;border:1px solid #e2e8f0}
.print-preflight.ok{color:#166534;background:#f0fdf4;border-color:#bbf7d0}.print-preflight.warn{color:#9a3412;background:#fff7ed;border-color:#fed7aa}
.worksheet.print-fit-warning{outline:2px dashed #fdba74;outline-offset:-2px}
body.print-tight .worksheet{zoom:.91}
.home-projects{flex-wrap:wrap}
.words-drawer-footer .draft-safe-note{color:#166534}
@media(max-width:720px){.platform-breadcrumb{display:none}}


/* ============================================================
   Professional UI / UX pass — v5.1
   Worksheet internals intentionally remain unchanged.
   ============================================================ */
:root{
  --ui-bg:#f5f7fb;
  --ui-surface:#ffffff;
  --ui-surface-soft:#f8faff;
  --ui-text:#172033;
  --ui-muted:#667085;
  --ui-line:#e3e8f0;
  --ui-line-strong:#ccd5e3;
  --ui-accent:#2f63e9;
  --ui-accent-hover:#2454cc;
  --ui-accent-soft:#eef4ff;
  --ui-success:#15803d;
  --ui-shadow-sm:0 1px 2px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.04);
  --ui-shadow-md:0 14px 40px rgba(15,23,42,.08);
  --ui-radius:14px;
  --ui-radius-lg:20px;
}

body{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--ui-bg);
  color:var(--ui-text);
  letter-spacing:-.005em;
}
button,select,input{
  font-family:inherit;
}
button{
  font-weight:700;
}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid rgba(47,99,233,.18)!important;
  outline-offset:2px;
}

/* Header */
.product-header{
  max-width:1440px;
  padding:18px 24px 8px;
}
.product-header > div:nth-child(2){
  min-width:0;
}
.brand-title{
  font-size:20px;
  letter-spacing:-.35px;
}
.brand-sub{
  font-size:11px;
  margin-top:2px;
}
.platform-breadcrumb{
  min-height:32px;
  border-color:var(--ui-line);
  box-shadow:none;
  font-size:11px;
}

/* HOME */
#homeScreen{
  max-width:1240px;
  margin:20px auto 64px;
  padding:0 24px;
}
.home-pro{
  display:grid;
  gap:18px;
}
.home-hero-pro{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:18px;
  align-items:stretch;
}
.hero-copy,
.home-continue-card,
.home-card{
  background:var(--ui-surface);
  border:1px solid var(--ui-line);
  box-shadow:var(--ui-shadow-sm);
}
.hero-copy{
  border-radius:24px;
  padding:34px 36px;
  background:
    radial-gradient(circle at 88% 18%,rgba(47,99,233,.10),transparent 32%),
    linear-gradient(135deg,#ffffff 0%,#fbfdff 100%);
}
.hero-eyebrow,.section-eyebrow,.config-kicker,.drawer-kicker{
  display:block;
  margin-bottom:7px;
  color:#4467b6;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-copy h1{
  max-width:680px;
  margin:0;
  font-size:42px;
  line-height:1.05;
  letter-spacing:-1.5px;
}
.hero-copy p{
  max-width:660px;
  margin:15px 0 0;
  color:var(--ui-muted);
  font-size:15px;
  line-height:1.58;
}
.hero-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:22px;
}
.hero-actions button{
  min-height:44px;
  border-radius:11px;
}
.hero-primary{
  flex:0 0 auto!important;
  padding:0 18px;
}
.hero-secondary{
  background:#fff;
}
.hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:7px 16px;
  margin-top:22px;
  color:#667085;
  font-size:11px;
  font-weight:700;
}
.hero-trust span::before{
  content:"✓";
  margin-right:5px;
  color:#16a34a;
}

.home-continue-card{
  border-radius:24px;
  padding:20px;
  display:flex;
  flex-direction:column;
}
.home-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.home-card-head h2,.quick-start-head h3{
  margin:0;
  font-size:18px;
  letter-spacing:-.35px;
}
.text-action{
  min-height:30px;
  border:0;
  background:transparent;
  color:#315ecb;
  padding:0 5px;
}
.text-action:hover{
  background:#f2f6ff!important;
  color:#234aa6!important;
}
.home-continue-card .home-recent-grid{
  grid-template-columns:1fr;
  margin-top:12px;
  gap:8px;
}
.home-continue-card .recent-project-card{
  min-height:64px;
  border-color:var(--ui-line);
  border-radius:12px;
  background:#fbfcfe;
  padding:10px 12px;
}
.new-project-home{
  width:100%;
  margin-top:auto;
  min-height:39px;
  background:#fff;
  border-style:dashed;
  color:#475467;
}
.new-project-home:hover{
  border-color:#9fb3e8!important;
  background:#f7f9ff!important;
}

.home-card{
  border-radius:24px;
  padding:24px;
}
.exercise-head{
  margin-bottom:13px;
}
.exercise-grid{
  grid-template-columns:1.35fr 1fr 1fr;
  gap:10px;
}
.exercise-card{
  min-height:118px;
  border:1px solid var(--ui-line);
  border-radius:16px;
  padding:15px;
  box-shadow:none;
}
.exercise-card.available{
  background:linear-gradient(135deg,#f7faff 0%,#ffffff 100%);
  border-color:#b9cafa;
}
.exercise-card.available:hover{
  box-shadow:0 8px 20px rgba(47,99,233,.08);
}
.exercise-icon{
  width:38px;height:38px;border-radius:10px;
  font-size:21px;
}
.exercise-copy{
  padding-right:0;
}
.exercise-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.exercise-copy b{
  font-size:14px;
}
.exercise-copy small{
  margin-top:4px;
  font-size:11px;
}
.exercise-badge{
  position:static;
  flex:0 0 auto;
  padding:3px 7px;
  font-size:9px;
}
.exercise-arrow{
  position:absolute;
  right:14px;
  bottom:12px;
  color:#315ecb;
  font-size:17px;
}

.quick-start-pro{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--ui-line);
}
.quick-start-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.quick-grid{
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.quick-card{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:78px;
  border:1px solid var(--ui-line);
  border-radius:14px;
  padding:12px;
  background:#fff;
}
.quick-card.primary-card{
  background:#f7faff;
  border-color:#bfd0fa;
}
.quick-card b{
  margin:0 0 2px;
  font-size:13px;
}
.quick-card small{
  display:block;
  font-size:10px;
  line-height:1.35;
}
.quick-number{
  width:38px;height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:10px;
  background:#eef4ff;
  color:#2454cc;
  font-size:17px;
  font-weight:900;
}
.theme-row-pro{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:12px;
}
.theme-row-pro > span{
  padding-top:8px;
  color:#667085;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.theme-row-pro .theme-strip{
  margin:0;
}
.theme-row-pro .theme-strip button{
  min-height:32px;
  border-color:var(--ui-line);
  font-size:11px;
}

/* CREATION */
body.mode-config #configPanel{
  max-width:900px;
  margin-top:12px;
  border:1px solid var(--ui-line);
  border-radius:22px;
  box-shadow:var(--ui-shadow-md);
  overflow:hidden;
}
body.mode-config #configPanel .config-head{
  padding:24px 26px 17px;
  margin:0;
  border-bottom:1px solid var(--ui-line);
  background:#fff;
}
.config-head h2{
  font-size:21px;
  letter-spacing:-.4px;
}
.config-head p{
  max-width:600px;
  line-height:1.45;
}
body.mode-config #configPanel .config-scroll-body{
  display:block;
  padding:20px 26px 16px;
  background:#fbfcfe;
}
body.mode-config #configPanel .creator-basics{
  grid-template-columns:.75fr 1fr 1.4fr;
  gap:9px;
  margin:0 0 12px;
}
body.mode-config #configPanel .basic-box,
body.mode-config #configPanel .size-control{
  border:1px solid var(--ui-line);
  background:#fff;
  border-radius:13px;
}
body.mode-config #configPanel .quick-create-row{
  margin-bottom:12px;
}
body.mode-config #configPanel .quick-create-row .primary{
  box-shadow:none;
}
body.mode-config #configPanel .pack-section,
body.mode-config #configPanel .selection-panel,
body.mode-config #configPanel .manual-picker,
body.mode-config #configPanel .advanced-panel{
  border-color:var(--ui-line);
  border-radius:14px;
  background:#fff;
}
body.mode-config #configPanel .pack-section{
  padding:11px 12px;
}
body.mode-config #configPanel .selection-panel{
  padding:11px 12px;
}
body.mode-config #configPanel .selected-chip{
  background:#f9fbff;
}
body.mode-config #configPanel .advanced-panel summary{
  font-size:13px;
}
body.mode-config #configPanel .config-footer{
  padding:12px 26px 20px;
  margin:0;
  background:#fff;
  border-top:1px solid var(--ui-line);
}
body.mode-config #configPanel #gen{
  min-height:46px;
  border-radius:11px;
  box-shadow:none;
}

/* RESULT WORKSPACE */
body.mode-result #workspace{
  max-width:1520px;
  margin-top:10px;
}
body.mode-result #resultStage{
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.pro-commandbar{
  top:8px;
  padding:9px 11px;
  border:1px solid var(--ui-line);
  border-radius:15px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  background:rgba(255,255,255,.96);
}
.workspace-left,.workspace-right{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.workspace-right{
  margin-left:auto;
}
.command-icon{
  width:36px!important;
  padding:0!important;
  border-color:transparent!important;
  background:transparent!important;
  font-size:16px!important;
}
.workspace-context{
  display:flex;
  flex-direction:column;
  min-width:112px;
  margin-right:2px;
  line-height:1.15;
}
.workspace-context span{
  color:#98a2b3;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.workspace-context b{
  max-width:180px;
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#344054;
  font-size:11px;
}
.toolbar-divider{
  width:1px;
  height:26px;
  margin:0 2px;
  background:var(--ui-line);
}
.pro-commandbar button,
.pro-commandbar summary,
.pro-commandbar select{
  border-color:var(--ui-line);
  border-radius:9px;
  min-height:36px;
  height:36px;
  font-size:11px;
}
.pro-commandbar .command-primary{
  background:var(--ui-accent-soft);
  border-color:#aac0f6;
  color:#2454cc;
}
.save-direct{
  background:#fff;
}
.more-summary{
  width:38px;
  justify-content:center!important;
  padding:0!important;
  font-size:16px!important;
  letter-spacing:1px;
}
.right-popover{
  left:auto!important;
  right:0;
}
.command-print{
  padding:0;
}
.pro-commandbar .print-main{
  background:var(--ui-accent);
  border-color:var(--ui-accent);
}
.pro-commandbar .print-main:hover{
  background:var(--ui-accent-hover)!important;
  border-color:var(--ui-accent-hover)!important;
}
.result-panel.viewer{
  padding:14px;
  border:1px solid var(--ui-line);
  border-radius:18px;
  box-shadow:var(--ui-shadow-sm);
}
.result-panel .viewerbar{
  padding:1px 3px 12px;
}
.result-panel .viewerbar b{
  font-size:14px;
}
.result-panel .viewerbar small{
  font-size:11px;
}
.result-panel .worksheet-wrap{
  padding:22px;
  margin-top:10px;
  border:1px solid #dde3eb;
  border-radius:14px;
  background:#e9edf4;
}

/* DRAWERS */
body.mode-result #configPanel,
#wordsDrawer{
  width:min(620px,96vw);
  background:#f7f9fc;
  border-left:1px solid var(--ui-line);
  border-radius:18px 0 0 18px;
  box-shadow:-18px 0 54px rgba(15,23,42,.16);
}
body.mode-result #configPanel .config-head,
.words-drawer-head{
  padding:18px 20px 14px!important;
  border-bottom:1px solid var(--ui-line);
  background:#fff!important;
}
body.mode-result #configPanel .config-head h2,
.words-drawer-head h2{
  font-size:19px;
  letter-spacing:-.3px;
}
body.mode-result #configPanel .config-kicker{
  display:none;
}
.drawer-kicker{
  margin-bottom:4px;
}
body.mode-result #configPanel .config-scroll-body,
.words-drawer-body{
  padding:16px 20px 22px;
}
body.mode-result #configPanel .basic-box,
body.mode-result #configPanel .size-control,
.words-basics .basic-box,
.words-quick-edit,
.words-pack-panel,
.words-selected-panel,
.words-manual-panel{
  border-color:var(--ui-line);
  background:#fff;
  border-radius:13px;
}
body.mode-result #configPanel .config-basics-main{
  margin-bottom:10px!important;
}
body.mode-result #configPanel #advancedConfig{
  background:#fff;
  border:1px solid var(--ui-line);
  border-radius:13px;
  padding:13px!important;
}
body.mode-result #configPanel #advancedConfig .advanced-grid{
  gap:9px;
}
body.mode-result #configPanel .config-footer,
.words-drawer-footer{
  padding:11px 20px 14px!important;
  border-top:1px solid var(--ui-line)!important;
  box-shadow:0 -8px 20px rgba(15,23,42,.05)!important;
}
body.mode-result #configPanel .config-footer-actions #applySettings{
  min-height:43px;
}
.words-basics{
  gap:8px;
}
.words-primary-actions{
  margin:10px 0;
}
.words-quick-edit{
  padding:9px 10px;
}
.words-pack-panel,.words-selected-panel{
  padding:10px 11px;
}
.words-section-head{
  margin-bottom:7px;
}
.words-selected-chip{
  background:#f9fbff;
}
.drawer-footer-actions{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px;
}
.drawer-footer-actions button{
  min-height:44px;
}
#cancelWordsDraft{
  min-width:92px;
}
.words-drawer-footer #wordsDirtyHint{
  margin-bottom:7px;
  color:#667085;
}

/* PROJECTS */
.project-modal{
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(2px);
}
.project-dialog{
  width:min(720px,96vw);
  border-color:var(--ui-line);
  border-radius:20px;
  box-shadow:0 26px 90px rgba(15,23,42,.22);
  padding:20px;
}
.project-dialog-head{
  margin-bottom:16px;
}
.project-dialog-head h3{
  margin:0;
  font-size:20px;
}
.save-row{
  padding:12px;
  margin-bottom:10px;
  border:1px solid var(--ui-line);
  border-radius:13px;
  background:#f8faff;
}
.project-io-row{
  padding:0 0 12px;
}
.project-row{
  border-color:var(--ui-line);
  border-radius:13px;
  background:#fff;
}
.project-row:hover{
  border-color:#bcccf0;
  background:#fbfdff;
}

/* GLOBAL CONTROLS */
button,select,input[type=text],input[type=number]{
  border-color:var(--ui-line-strong);
}
button:hover:not(:disabled){
  background:#f6f8fc;
  border-color:#aebbcf;
  color:#172033;
}
.primary,.hero-primary{
  background:var(--ui-accent);
  border-color:var(--ui-accent);
  color:#fff;
}
.primary:hover:not(:disabled),.hero-primary:hover:not(:disabled){
  background:var(--ui-accent-hover)!important;
  border-color:var(--ui-accent-hover)!important;
  color:#fff!important;
}
.count{
  background:#eef4ff;
  color:#315ecb;
}
.msg{
  border:1px solid #d6e2ff;
  background:#f4f7ff;
}
.print-preflight{
  min-height:28px;
}

/* RESPONSIVE */
@media(max-width:1050px){
  .home-hero-pro{
    grid-template-columns:1fr;
  }
  .home-continue-card{
    min-height:auto;
  }
  .exercise-grid{
    grid-template-columns:1fr;
  }
  .exercise-card{
    min-height:96px;
  }
  .workspace-context{
    display:none;
  }
}
@media(max-width:820px){
  #homeScreen{
    padding:0 14px;
  }
  .hero-copy,.home-card,.home-continue-card{
    border-radius:18px;
  }
  .hero-copy{
    padding:24px 20px;
  }
  .hero-copy h1{
    font-size:34px;
  }
  .home-card{
    padding:18px;
  }
  .quick-grid{
    grid-template-columns:1fr;
  }
  .theme-row-pro{
    flex-direction:column;
    gap:6px;
  }
  .theme-row-pro > span{
    padding:0;
  }
  .pro-commandbar{
    align-items:stretch;
  }
  .workspace-left,.workspace-right{
    width:100%;
  }
  .workspace-right{
    justify-content:flex-end;
    padding-top:7px;
    border-top:1px solid var(--ui-line);
  }
}
@media(max-width:620px){
  .product-header{
    padding-left:16px;
    padding-right:16px;
  }
  .brand-sub{
    display:none;
  }
  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .hero-actions button{
    width:100%;
  }
  body.mode-result #configPanel,#wordsDrawer{
    width:100vw;
    max-width:100vw;
    border-radius:0;
  }
  .workspace-left{
    gap:5px;
  }
  .workspace-right{
    justify-content:stretch;
  }
  .workspace-right > button,
  .workspace-right > details{
    flex:0 0 auto;
  }
  .command-print{
    flex:1;
  }
  .command-print select{
    flex:1;
  }
  .result-panel.viewer{
    padding:8px;
  }
  .result-panel .worksheet-wrap{
    padding:10px;
  }
}
@media print{
  .product-header,.pro-commandbar{display:none!important}
}


/* ============================================================
   Worksheet auto-fit — v5.2
   ============================================================ */

/* The page itself is a hard visual boundary. Normal cases are solved by
   JavaScript size reduction before this becomes relevant. */
.worksheet.orientation-portrait,
.worksheet.orientation-landscape{
  overflow:hidden;
}

/* Auto-fit should never make the SVG exceed the actual crossword area. */
.worksheet .crossword-area,
.worksheet .crossword-svg-wrap,
.worksheet .crossword-svg{
  min-width:0;
  min-height:0;
}

.print-preflight.fitted{
  background:#effaf3;
  border-color:#b7e4c7;
  color:#166534;
}

/* Last-resort containment for extreme layouts after minimum readable sizes.
   The normal auto-fit loop should resolve ordinary 6–12 word worksheets
   without this class. */
.worksheet.fit-hard-limit .crossword-area{
  max-height:100%;
  overflow:hidden;
}

@media print{
  .worksheet.orientation-portrait,
  .worksheet.orientation-landscape{
    overflow:hidden!important;
  }
}


/* ============================================================
   Drawers UX cleanup — v5.3
   ============================================================ */

/* Shared drawer section language */
.drawer-section,
.settings-section{
  border:1px solid var(--ui-line);
  border-radius:14px;
  background:#fff;
}
.drawer-section{
  margin-bottom:11px;
}
.drawer-section-head,
.settings-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.drawer-section-head{
  margin-bottom:10px;
}
.drawer-section-head b,
.settings-section-head b{
  display:block;
  font-size:13px;
  color:#27364d;
}
.drawer-section-head small,
.settings-section-head small{
  display:block;
  max-width:390px;
  margin-top:3px;
  color:#7a8799;
  font-size:10px;
  line-height:1.35;
}

/* WORDS — one clear flow instead of many equal boxes */
.words-compose-panel,
.words-selected-panel{
  padding:12px;
}
.words-basics{
  grid-template-columns:.72fr 1.18fr 1fr;
  gap:8px;
}
.words-basics .basic-box{
  padding:9px;
  border-radius:11px;
}
.words-basics .basic-box label{
  font-size:9px;
}
.words-primary-actions{
  grid-template-columns:1fr auto;
  margin:9px 0 0;
}
.words-primary-actions #wordsRandom{
  min-width:112px;
}
.words-primary-actions button{
  min-height:40px;
}

.words-selected-panel{
  margin-bottom:11px;
}
.words-section-head.selected-head{
  margin-bottom:10px;
}
.words-selected-preview{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  overflow:visible;
  padding:0;
}
.words-selected-chip{
  min-width:0;
  padding:6px 7px;
  border-color:#e1e7ef;
  border-radius:11px;
  background:#fafcff;
}
.words-selected-chip img{
  width:34px;
  height:34px;
  flex:0 0 auto;
}
.words-selected-chip b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
}
.words-selected-chip button{
  margin-left:auto;
  flex:0 0 auto;
  border-color:transparent;
  background:transparent;
  color:#7a8799;
}
.words-selected-chip button:hover{
  background:#fee2e2!important;
  color:#991b1b!important;
}
.selected-word-actions{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:7px;
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid #edf1f6;
}
.selected-word-actions button{
  min-height:34px;
  font-size:10px;
  color:#475467;
}

/* Presets and library become secondary / collapsed */
.words-preset-panel,
.words-manual-panel{
  padding:0;
}
.words-preset-panel > summary,
.words-manual-panel > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  list-style:none;
  padding:12px 13px;
}
.words-preset-panel > summary::-webkit-details-marker,
.words-manual-panel > summary::-webkit-details-marker{
  display:none;
}
.words-preset-panel > summary::after,
.words-manual-panel > summary::after{
  content:"⌄";
  color:#8491a3;
  font-size:15px;
}
.words-preset-panel[open] > summary::after,
.words-manual-panel[open] > summary::after{
  content:"⌃";
}
.words-preset-panel > summary span,
.words-manual-panel > summary span{
  min-width:0;
}
.words-preset-panel > summary b,
.words-manual-panel > summary b{
  display:block;
  font-size:12px;
}
.words-preset-panel > summary small,
.words-manual-panel > summary small{
  display:block;
  margin-top:2px;
  color:#7a8799;
  font-size:10px;
  font-weight:500;
}
.words-preset-panel .pack-buttons{
  padding:0 12px 12px;
}
.words-preset-panel .pack-buttons button{
  min-height:31px;
  font-size:10px;
}

.words-manual-panel[open]{
  padding-bottom:10px;
}
.words-search-row{
  padding:0 12px 8px;
}
.words-cat-pills{
  padding:0 12px 8px;
}
.words-library-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 12px 9px;
}
.words-show-names{
  padding:0;
  color:#667085;
  font-size:10px;
}
.words-bulk-menu{
  position:relative;
}
.words-bulk-menu > summary{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 9px;
  border:1px solid #d7dee8;
  border-radius:8px;
  background:#fff;
  color:#475467;
  cursor:pointer;
  list-style:none;
  font-size:10px;
  font-weight:800;
}
.words-bulk-menu > summary::-webkit-details-marker{display:none}
.words-bulk-menu > div{
  position:absolute;
  z-index:20;
  right:0;
  top:36px;
  width:170px;
  padding:6px;
  border:1px solid #dbe3ee;
  border-radius:10px;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.12);
}
.words-bulk-menu > div button{
  width:100%;
  min-height:32px;
  margin:0;
  border:0;
  text-align:left;
  font-size:10px;
}
.words-picture-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  max-height:330px;
  padding:2px 12px 6px;
}
.words-card{
  min-height:94px;
  border-radius:11px;
}
.words-card img{
  width:70px;
  height:70px;
}
.words-card .words-name{
  font-size:9px;
}

/* Footer is only decision-making, not another settings block */
.words-drawer-footer #wordsDirtyHint{
  font-size:9.5px;
  line-height:1.35;
}
.drawer-footer-actions{
  grid-template-columns:100px 1fr;
}

/* SETTINGS — dedicated result drawer hierarchy */
body.mode-result #configPanel .config-basics-main{
  padding:0;
  border:0;
  background:transparent;
}
body.mode-result #configPanel .config-basics-main .title-box{
  padding:11px 12px;
  border:1px solid var(--ui-line);
  border-radius:14px;
  background:#fff;
}
body.mode-result #configPanel .config-basics-main .title-box label{
  color:#667085;
  font-size:9px;
}
body.mode-result #configPanel #advancedConfig{
  padding:0!important;
  border:0;
  background:transparent;
}
body.mode-result #configPanel #advancedConfig .settings-section{
  margin-bottom:11px;
  padding:12px;
}
body.mode-result #configPanel #advancedConfig .settings-section:last-child{
  margin-bottom:0;
}
body.mode-result #configPanel #advancedConfig .settings-page-grid{
  grid-template-columns:1fr!important;
  padding:0!important;
  margin-top:10px;
}
body.mode-result #configPanel .print-mode-box{
  display:none!important;
}
body.mode-result #configPanel .preference-option{
  display:none!important;
}
.settings-auto-badge{
  flex:0 0 auto;
  padding:4px 7px;
  border:1px solid #cfe0ff;
  border-radius:999px;
  background:#f2f6ff;
  color:#315ecb;
  font-size:8px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* Range controls */
.range-size-controls{
  grid-template-columns:1fr;
  gap:8px;
  margin-top:10px;
}
.range-setting{
  padding:10px 11px!important;
}
.range-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
}
.range-label-row label{
  margin:0!important;
  color:#344054!important;
  font-size:11px!important;
  font-weight:800;
}
.range-label-row strong{
  color:#667085;
  font-size:10px;
}
.range-setting input[type=range]{
  width:100%;
  margin:0;
  accent-color:var(--ui-accent);
}
.range-scale{
  display:flex;
  justify-content:space-between;
  margin-top:3px;
  color:#98a2b3;
  font-size:8.5px;
}

/* Professional switch rows */
.settings-toggle-list{
  display:grid;
  gap:0;
  margin-top:8px;
  border-top:1px solid #edf1f6;
}
.setting-toggle{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"copy switch";
  align-items:center;
  gap:12px;
  min-height:55px;
  padding:8px 1px;
  border-bottom:1px solid #edf1f6;
  cursor:pointer;
}
.setting-toggle:last-child{
  border-bottom:0;
}
.setting-toggle > span{
  grid-area:copy;
}
.setting-toggle > span b{
  display:block;
  color:#344054;
  font-size:11px;
}
.setting-toggle > span small{
  display:block;
  margin-top:2px;
  color:#7a8799;
  font-size:9.5px;
  font-weight:500;
  line-height:1.3;
}
.setting-toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.setting-toggle i{
  grid-area:switch;
  position:relative;
  width:34px;
  height:20px;
  border-radius:999px;
  background:#d7dde7;
  transition:.16s ease;
}
.setting-toggle i::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(15,23,42,.2);
  transition:.16s ease;
}
.setting-toggle input:checked + i{
  background:var(--ui-accent);
}
.setting-toggle input:checked + i::after{
  transform:translateX(14px);
}
.setting-toggle:focus-within i{
  outline:3px solid rgba(47,99,233,.15);
}

/* Result settings footer mirrors Words drawer */
body.mode-result #configPanel .config-footer-actions{
  display:grid;
  grid-template-columns:100px 1fr;
  width:100%;
  gap:8px;
}
body.mode-result #configPanel .config-footer-actions #cancelSettingsFooter,
body.mode-result #configPanel .config-footer-actions #applySettings{
  display:flex;
  min-width:0;
  width:100%;
  justify-content:center;
}
body.mode-result #configPanel .config-footer-actions #applySettings{
  background:var(--ui-accent);
  border-color:var(--ui-accent);
  color:#fff;
}

/* Full configurator keeps the same controls but without drawer-only simplification */
body.mode-config #advancedConfig .settings-section{
  margin-bottom:10px;
}
body.mode-config #advancedConfig .settings-section-head{
  padding:0 12px 7px;
}
body.mode-config #advancedConfig .settings-toggle-list{
  padding:0 12px;
}
body.mode-config #advancedConfig .range-size-controls{
  padding:0 12px;
}
body.mode-config #advancedConfig .settings-page-grid{
  padding:0 12px 10px;
}

@media(max-width:620px){
  .words-basics{
    grid-template-columns:1fr;
  }
  .words-selected-preview{
    grid-template-columns:1fr;
  }
  .selected-word-actions{
    grid-template-columns:1fr 1fr 1fr;
  }
  .words-picture-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* ============================================================
   Bidirectional A4 utilization — v5.4
   ============================================================ */

.print-preflight.fitted{
  font-weight:900;
}

.worksheet.orientation-portrait,
.worksheet.orientation-landscape{
  /* Visual page remains a hard boundary while auto-fit maximizes usage. */
  overflow:hidden;
}

/* Give the worksheet content a predictable inner safe zone so the fitter
   targets usable A4 space rather than the absolute edge. */
.worksheet{
  --fit-safe-inset: 0px;
}

/* The fitter grows only the crossword and clue pictures; typography remains
   stable so small worksheets do not become visually cartoonishly large. */
.worksheet .print-head,
.worksheet .meta-line,
.worksheet .clue-group h3{
  flex-shrink:0;
}


/* ============================================================
   Editor polish — v5.5
   ============================================================ */
.ui-icon{
  width:16px;height:16px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round
}
.icon-button-label{
  display:inline-flex!important;align-items:center;justify-content:center;gap:6px
}
.print-main .ui-icon{width:15px;height:15px}
.drawer-close-button{display:inline-flex;align-items:center;gap:5px}
.drawer-close-button .ui-icon{width:14px;height:14px}

.layout-primary-action{
  width:100%;
  min-height:38px!important;
  margin-bottom:6px;
  background:#f4f7ff!important;
  border-color:#c9d8fb!important;
  color:#315ecb!important;
}

.selected-head-meta{display:flex;align-items:center;gap:7px}
.draft-state{
  padding:4px 7px;border:1px solid #dce3ec;border-radius:999px;
  background:#f8fafc;color:#7a8799;font-size:8.5px;font-weight:900;white-space:nowrap
}
.draft-state.dirty{
  border-color:#fed7aa;background:#fff7ed;color:#9a3412
}

.words-selected-chip .chip-actions{
  display:flex;align-items:center;gap:1px;margin-left:auto
}
.words-selected-chip .chip-actions button{margin:0}
.words-selected-chip .chip-replace{
  display:flex;align-items:center;justify-content:center;
  width:25px;height:25px;padding:0;border-radius:7px;color:#52657d
}
.words-selected-chip .chip-replace .ui-icon{width:13px;height:13px}
.words-selected-chip .chip-remove{
  width:24px!important;height:24px!important;min-width:24px!important
}
.replace-word-notice{
  margin:0 12px 9px;padding:8px 9px;
  border:1px solid #cfe0ff;border-radius:9px;
  background:#f3f7ff;color:#315ecb;font-size:10px;line-height:1.35
}
.replace-word-notice button{
  min-height:25px;margin-left:5px;padding:0 7px;
  border-color:#bfd0f7;color:#315ecb;font-size:9px
}
.words-manual-panel.replace-mode{
  border-color:#b6caf8;box-shadow:0 0 0 2px rgba(47,99,233,.06)
}
.words-manual-panel.replace-mode .words-card.sel{opacity:.48}

.settings-size-actions{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end
}
.text-mini-button{
  min-height:26px;padding:0 8px;border-radius:8px;
  border-color:#dce3ec;color:#52657d;font-size:8.5px;background:#fff
}
.range-setting input[type=range]{cursor:pointer}

@media(max-width:760px){
  .selected-head-meta{align-items:flex-end;flex-direction:column;gap:4px}
}


/* ============================================================
   Product reliability & content quality — v5.6
   ============================================================ */

/* Auto / Manual sizing */
.size-mode-toggle{
  display:inline-flex;
  padding:2px;
  border:1px solid #d9e1ec;
  border-radius:9px;
  background:#f7f9fc;
}
.size-mode-toggle button{
  min-height:25px;
  padding:0 8px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#667085;
  font-size:8.5px;
}
.size-mode-toggle button.active{
  background:#fff;
  color:#2454cc;
  box-shadow:0 1px 4px rgba(15,23,42,.09);
}
.print-preflight.manual{
  background:#f8fafc;
  border-color:#d7dee8;
  color:#52657d;
}

/* Save status */
.workspace-context span em{
  font-style:normal;
  color:#98a2b3;
}
.workspace-context span em.saved{color:#15803d}
.workspace-context span em.dirty{color:#b45309}

/* Discard confirmation */
.discard-confirm{z-index:220}
.discard-confirm-box{width:min(470px,94vw)}
.danger-button{
  background:#fff;
  border-color:#fecaca;
  color:#b42318;
}
.danger-button:hover{
  background:#fff1f2!important;
  border-color:#fda4af!important;
  color:#9f1239!important;
}

/* Rich project cards + mini crossword thumbnail */
.project-row-rich{
  grid-template-columns:76px 1fr auto;
}
.project-copy{
  min-width:0;
}
.project-copy b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.project-copy small,.project-copy em{
  display:block;
}
.project-copy em{
  margin-top:3px;
  color:#98a2b3;
  font-size:9.5px;
  font-style:normal;
}
.project-thumb{
  width:68px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  border:1px solid #e4e9f0;
  border-radius:9px;
  background:#f8fafc;
  overflow:hidden;
}
.project-thumb > span{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  grid-template-rows:repeat(var(--rows),1fr);
  gap:1px;
}
.project-thumb i{
  min-width:1px;
  min-height:1px;
  background:#64748b;
  border-radius:1px;
}
.empty-thumb{
  color:#94a3b8;
  font-size:22px;
}
.recent-project-rich{
  display:grid!important;
  grid-template-columns:60px 1fr;
  gap:10px;
  align-items:center;
}
.recent-project-rich .project-thumb{
  width:58px;height:48px;
}
.recent-copy{
  min-width:0;
}
.recent-copy b,.recent-copy small,.recent-copy em{
  display:block;
}
.recent-copy b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.recent-copy em{
  margin-top:3px;
  color:#98a2b3;
  font-size:9px;
  font-style:normal;
}

/* Library rows stay usable on narrower screens */
@media(max-width:720px){
  .project-row-rich{
    grid-template-columns:62px 1fr;
  }
  .project-row-rich .project-actions{
    grid-column:1 / -1;
    justify-content:flex-end;
  }
  .project-thumb{width:58px;height:46px}
}

/* Accessibility / focus */
.project-modal:focus-visible,
.words-drawer:focus-visible{
  outline:none;
}


/* ============================================================
   Automatic sizing only — v5.9
   ============================================================ */
.automatic-size-section .settings-section-head{
  align-items:center;
}
.automatic-size-info{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.automatic-size-info > span{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:38px;
  padding:0 10px;
  border:1px solid #e4e9f0;
  border-radius:10px;
  background:#fafcff;
  color:#667085;
  font-size:10px;
}
.automatic-size-info strong{
  color:#344054;
  font-size:10px;
}
.internal-size-controls{
  display:none!important;
}
.settings-auto-badge{
  min-width:82px;
  text-align:center;
}


/* ============================================================
   Larger clue images — v5.10
   ============================================================ */

/* OpenMoji SVG files often contain some internal whitespace.
   Give the visible artwork a little more presence while preserving
   the existing automatic A4 fit behavior. */
.worksheet .clue-pic{
  min-width:50px;
  min-height:50px;
}
.worksheet .clue-pic img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* On print, the same visual hierarchy is preserved. */
@media print{
  .worksheet .clue-pic{
    min-width:13mm;
    min-height:13mm;
  }
}


/* ============================================================
   v5.11 Print header refresh
   - remove page frame
   - add full-width Bulgarian alphabet strip
   ============================================================ */
.worksheet{
  --sheet-pad-top:30px;
  --sheet-pad-x:34px;
  --sheet-pad-bottom:42px;
  padding:var(--sheet-pad-top) var(--sheet-pad-x) var(--sheet-pad-bottom);
  border:0!important;
  border-radius:0!important;
}

.alphabet-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  margin:0 calc(-1 * var(--sheet-pad-x)) 16px;
  padding:0 var(--sheet-pad-x) 10px;
  border-bottom:2px solid #0f172a;
  color:#0f172a;
  font-size:12px;
  font-weight:800;
  letter-spacing:.1px;
  line-height:1;
}
.alphabet-strip span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  flex:1 1 0;
}

.print-head{margin-top:2px}
.print-head h2{margin-top:0}

@media (max-width: 900px){
  .alphabet-strip{font-size:10px;gap:2px}
}

@media print{
  .worksheet{
    --sheet-pad-top:4mm;
    --sheet-pad-x:2mm;
    --sheet-pad-bottom:4mm;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .alphabet-strip{
    margin:0 calc(-1 * var(--sheet-pad-x)) 3mm;
    padding:0 var(--sheet-pad-x) 2.4mm;
    font-size:8.2pt;
    border-bottom:1.2pt solid #0f172a;
  }
}


/* ============================================================
   v5.12 Print frame fix
   The professional screen preview wrapper must never print.
   ============================================================ */
@media print{
  .result-panel{
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#fff!important;
  }
  .result-panel .worksheet-wrap{
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#fff!important;
    overflow:visible!important;
  }
  .result-panel .worksheet{
    margin:0 auto!important;
    border:0!important;
    border-radius:0!important;
    outline:0!important;
    box-shadow:none!important;
  }
}


/* ============================================================
   v5.13 Professional UX simplification
   ============================================================ */

/* Creation is intentionally short: content first, advanced print/display
   choices only after a worksheet exists. */
body.mode-config #configPanel .creator-basics{
  grid-template-columns:.75fr 1.15fr 1fr!important;
}
body.mode-config #configPanel .creator-basics .title-box{
  grid-column:1 / -1;
}
body.mode-config #configPanel #advancedConfig,
body.mode-config #configPanel .pack-section{
  display:none!important;
}
body.mode-config #configPanel #rnd{
  display:none!important;
}
body.mode-config #configPanel .quick-create-row{
  grid-template-columns:1fr auto!important;
}
body.mode-config #configPanel .quick-create-row .primary{
  grid-column:auto!important;
}
body.mode-config #configPanel #manualPickerToggle{
  min-width:140px;
}

/* The generated worksheet settings contain no technical sizing controls. */
.internal-settings-controls{
  display:none!important;
}
body.mode-result #configPanel #advancedConfig .settings-page-grid{
  grid-template-columns:1fr!important;
  padding:0!important;
}
body.mode-result #configPanel #advancedConfig .settings-section{
  padding:13px!important;
}

/* Words: the three selectors immediately drive the draft.
   Remove redundant "auto pick", generic add/remove/swap and duplicated presets. */
#wordsDrawer #wordsAutoPick,
#wordsDrawer .selected-word-actions,
#wordsDrawer .words-preset-panel{
  display:none!important;
}
#wordsDrawer .words-primary-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:9px;
}
#wordsDrawer #wordsRandom{
  min-width:120px;
}
#wordsDrawer .words-compose-panel{
  padding-bottom:11px;
}

/* Layout popover is now purely about crossword layout/variants. */
.legacy-layout-help{
  display:none!important;
}

/* Slightly clearer print area hierarchy */
.command-print select{
  min-width:118px;
}

/* Friendlier compact helper copy */
.settings-section-head small,
.drawer-section-head small,
.words-section-head small{
  line-height:1.4;
}

/* On smaller widths, keep creation linear and obvious. */
@media(max-width:760px){
  body.mode-config #configPanel .creator-basics{
    grid-template-columns:1fr!important;
  }
  body.mode-config #configPanel .creator-basics .title-box{
    grid-column:auto;
  }
  body.mode-config #configPanel .quick-create-row{
    grid-template-columns:1fr!important;
  }
  body.mode-config #configPanel #manualPickerToggle{
    width:100%;
  }
}

/* ============================================================
   Friendly family & classroom UI — v5.26
   Visual-only product layer. Worksheet/print internals stay intact.
   ============================================================ */
:root{
  --friendly-bg:#f7fbff;
  --friendly-surface:#ffffff;
  --friendly-navy:#123160;
  --friendly-text:#24415f;
  --friendly-muted:#6f8399;
  --friendly-blue:#2f6cf6;
  --friendly-blue-dark:#2157cf;
  --friendly-blue-soft:#eaf3ff;
  --friendly-sky:#dceeff;
  --friendly-yellow:#ffd76a;
  --friendly-yellow-soft:#fff5cf;
  --friendly-mint:#aee9cd;
  --friendly-mint-soft:#eafaf2;
  --friendly-coral:#ffb8bd;
  --friendly-coral-soft:#fff0f1;
  --friendly-lilac:#d9c8ff;
  --friendly-line:#dfeaf4;
  --friendly-line-strong:#c8d9e8;
  --friendly-shadow:0 14px 38px rgba(59,101,145,.10);
  --friendly-shadow-soft:0 5px 18px rgba(59,101,145,.07);
}

html{scroll-behavior:smooth}
body{
  font-family:"Nunito","Segoe UI Rounded","Segoe UI",Arial,sans-serif;
  color:var(--friendly-text);
  background:
    radial-gradient(circle at 8% 5%,rgba(174,233,205,.28),transparent 17%),
    radial-gradient(circle at 94% 2%,rgba(220,238,255,.62),transparent 21%),
    var(--friendly-bg);
}
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(circle at 15% 88%,rgba(255,215,106,.10),transparent 14%),
    radial-gradient(circle at 87% 78%,rgba(255,184,189,.11),transparent 16%);
}

/* Friendly product header */
.product-header{
  max-width:1460px;
  min-height:74px;
  margin:0 auto;
  padding:14px 24px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
}
.brand-lockup{
  display:flex;align-items:center;gap:10px;
  padding:0!important;min-height:auto!important;border:0!important;background:transparent!important;
  color:var(--friendly-navy)!important;text-align:left;box-shadow:none!important;
}
.brand-lockup:hover{transform:none!important;background:transparent!important}
.brand-mark{
  width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;
  border-radius:14px;background:var(--friendly-yellow-soft);
  box-shadow:inset 0 0 0 1px rgba(255,215,106,.45);
}
.brand-mark svg{width:29px;height:29px;fill:none;stroke:#f5b51b;stroke-width:3.3;stroke-linecap:round}
.brand-mark svg circle{fill:#ffd454;stroke:#f3b61e}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}
.brand-title{font-size:19px;font-weight:950;letter-spacing:-.55px;color:var(--friendly-navy)}
.brand-sub{margin-top:5px;font-size:10.5px;font-weight:700;color:#7c8ea2}
.top-nav{display:flex;align-items:center;justify-content:center;gap:4px}
.top-nav button{
  min-height:38px;padding:0 14px;border:0;background:transparent;color:#61758d;
  border-radius:12px;font-size:12px;font-weight:850;
}
.top-nav button:hover{background:#edf5ff!important;color:var(--friendly-blue-dark)!important;border-color:transparent!important}
.header-actions{display:flex;align-items:center;justify-content:flex-end}
.header-free-note{
  display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--friendly-line);
  border-radius:999px;background:rgba(255,255,255,.82);color:#6d8197;font-size:10px;font-weight:850;
}
.header-free-dot{width:8px;height:8px;border-radius:50%;background:#42c884;box-shadow:0 0 0 4px #e8faef}
.platform-breadcrumb{display:none!important}

/* Home */
#homeScreen{max-width:1320px;margin:12px auto 70px;padding:0 24px}
.home-pro{gap:20px}
.home-hero-pro{
  position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(410px,.9fr);
  min-height:430px;gap:0;overflow:hidden;border:1px solid var(--friendly-line);border-radius:30px;
  background:linear-gradient(135deg,#fff 0%,#f7fbff 52%,#eff8ff 100%);box-shadow:var(--friendly-shadow);
}
.hero-copy{
  position:relative;z-index:2;padding:58px 32px 48px 48px;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
}
.hero-eyebrow,.section-eyebrow,.config-kicker,.drawer-kicker{
  color:#4f76ba;font-size:10px;letter-spacing:.09em;font-weight:950;
}
.hero-copy h1{
  max-width:700px;font-size:50px;line-height:1.02;letter-spacing:-2px;color:var(--friendly-navy);
}
.hero-copy h1 span{color:var(--friendly-blue)}
.hero-copy p{max-width:610px;color:#647a92;font-size:16px;line-height:1.65}
.hero-actions{margin-top:26px;gap:10px}
.hero-actions button{min-height:50px;border-radius:14px;font-size:13px}
.hero-primary{padding:0 20px!important;background:var(--friendly-blue)!important;border-color:var(--friendly-blue)!important;box-shadow:0 10px 22px rgba(47,108,246,.18)}
.hero-primary:hover{background:var(--friendly-blue-dark)!important;border-color:var(--friendly-blue-dark)!important;color:#fff!important}
.hero-secondary{padding:0 18px;background:#fff!important;border-color:#cfe0ef!important;color:#35506d!important}
.hero-trust{margin-top:24px;gap:8px 18px;color:#71879d;font-size:11px}
.hero-trust span::before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:7px;border-radius:50%;background:var(--friendly-mint-soft);color:#1f9a62;font-weight:950}

.hero-visual{position:relative;min-height:430px;overflow:hidden}
.hero-visual::before{
  content:"";position:absolute;width:420px;height:420px;right:-75px;top:-65px;border-radius:50%;
  background:radial-gradient(circle,#dff2ff 0%,#eef8ff 64%,transparent 65%);
}
.hero-shape{position:absolute;border-radius:999px;opacity:.78;filter:saturate(.9)}
.hero-shape-a{width:120px;height:48px;right:18px;bottom:36px;background:var(--friendly-mint);transform:rotate(-18deg)}
.hero-shape-b{width:62px;height:62px;right:340px;top:38px;background:var(--friendly-yellow-soft)}
.hero-shape-c{width:78px;height:34px;right:300px;bottom:46px;background:var(--friendly-coral-soft);transform:rotate(22deg)}
.hero-mini-sheet{
  position:absolute;z-index:2;width:275px;height:338px;right:68px;top:44px;padding:18px 18px 20px;
  border:1px solid #d9e5ef;border-radius:15px;background:#fff;box-shadow:0 24px 42px rgba(39,75,113,.17);
  transform:rotate(3deg);
}
.mini-sheet-head{display:flex;align-items:center;gap:7px;justify-content:center;color:#1d3152;font-size:12px}
.mini-sun{color:#f4b71d;font-size:22px}
.mini-clues{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:17px 0 13px}
.mini-clues span{display:grid;place-items:center;height:48px;border:1px solid #edf2f6;border-radius:10px;background:#fbfdff}
.mini-clues img{width:38px;height:38px;object-fit:contain}
.mini-crossword{width:150px;height:148px;margin:0 auto;display:grid;grid-template-columns:repeat(6,24px);grid-auto-rows:24px;position:relative}
.mini-crossword i{display:block;border:1.4px solid #1e2f48;background:#fff}
.mini-crossword i:nth-child(1),.mini-crossword i:nth-child(2),.mini-crossword i:nth-child(3),.mini-crossword i:nth-child(4),.mini-crossword i:nth-child(5),.mini-crossword i:nth-child(6){visibility:hidden}
.mini-crossword i:nth-child(7),.mini-crossword i:nth-child(10),.mini-crossword i:nth-child(13),.mini-crossword i:nth-child(16){visibility:hidden}
.hero-float-card{
  position:absolute;z-index:4;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(213,227,239,.9);
  border-radius:15px;background:rgba(255,255,255,.95);box-shadow:0 10px 24px rgba(39,75,113,.12);color:#49647e;font-size:10px;font-weight:900;
}
.hero-float-card img{width:38px;height:38px;object-fit:contain}
.hero-float-one{left:10px;bottom:70px;transform:rotate(-4deg)}
.hero-float-two{right:27px;top:26px;transform:rotate(3deg)}
.float-heart{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--friendly-coral-soft);color:#ee6d78;font-size:16px}

.audience-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px;border:1px solid var(--friendly-line);
  border-radius:22px;background:rgba(255,255,255,.9);box-shadow:var(--friendly-shadow-soft);
}
.audience-strip > div{display:flex;align-items:center;gap:10px;padding:10px 12px;border-right:1px solid #edf2f6}
.audience-strip > div:last-child{border-right:0}
.audience-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;font-size:18px;font-weight:950}
.audience-home{background:#eef4ff;color:#3a6be5}.audience-teacher{background:var(--friendly-mint-soft);color:#329c69}.audience-kids{background:var(--friendly-yellow-soft);color:#d69b12}.audience-print{background:var(--friendly-coral-soft);color:#e96d77}
.audience-strip b{display:block;color:#254260;font-size:11px}.audience-strip small{display:block;margin-top:2px;color:#7e91a4;font-size:9.5px;font-weight:650}

.home-card,.home-continue-card{
  border:1px solid var(--friendly-line)!important;border-radius:24px!important;background:#fff!important;
  box-shadow:var(--friendly-shadow-soft)!important;
}
.exercises-home-card{padding:26px 28px!important}
.home-card-head h2,.quick-start-head h3{color:var(--friendly-navy);letter-spacing:-.6px}
.home-card-head h2{font-size:22px}.section-helper{margin:5px 0 0;color:#8294a7;font-size:11px;line-height:1.45}
.exercise-grid{grid-template-columns:1.25fr 1fr 1fr;gap:12px}
.exercise-card{
  min-height:135px;border:1px solid var(--friendly-line)!important;border-radius:18px!important;background:#fff!important;
  box-shadow:0 4px 12px rgba(59,101,145,.04)!important;transition:.18s ease!important;
}
.exercise-card:hover{transform:translateY(-2px)!important;box-shadow:0 10px 24px rgba(59,101,145,.10)!important;border-color:#b9d0e8!important}
.exercise-card.available{background:linear-gradient(145deg,#f7fbff,#fff)!important;border-color:#afc9ff!important}
.exercise-icon{width:46px;height:46px;border-radius:14px;font-size:24px}.exercise-blue{background:#eaf3ff!important;color:#2f6cf6!important}.exercise-green{background:#ebfaf2!important;color:#29a567!important}.exercise-yellow{background:#fff4cf!important;color:#d99b12!important}
.exercise-copy b{color:#24415f;font-size:15px}.exercise-copy small{color:#7a8da1;font-size:11px;line-height:1.48}.exercise-badge{border-radius:999px;padding:4px 8px}.exercise-badge.ready{background:#e7f8ef;color:#2d9562}
.exercise-arrow{color:var(--friendly-blue);font-weight:950}

.quick-start-pro{margin-top:24px;padding-top:22px;border-top:1px dashed #dce7f0}
.quick-start-head small{display:block;margin-top:4px;color:#8a9caf;font-size:10px}
.quick-card{min-height:88px;border-radius:16px!important;border-color:var(--friendly-line)!important;background:#fbfdff!important}
.quick-card:hover{border-color:#b7cff2!important;background:#f6faff!important;box-shadow:0 7px 18px rgba(47,108,246,.08)!important}
.quick-card.primary-card{background:#edf5ff!important;border-color:#acc9ff!important}
.quick-number{width:43px;height:43px;border-radius:13px;background:#e3efff;color:var(--friendly-blue);font-size:18px}.quick-card b{color:#2b4765}.quick-card small{color:#8294a7}
.theme-row-pro{align-items:center;margin-top:15px}.theme-row-pro>span{padding-top:0}.theme-strip{gap:7px}.theme-strip button{min-height:34px!important;border:0!important;padding:0 12px!important;background:#f4f7fb!important;color:#60758b!important}
.theme-strip .theme-animal{background:#eef6ff!important;color:#3a67b4!important}.theme-strip .theme-food{background:#fff1ef!important;color:#c95f5f!important}.theme-strip .theme-nature{background:#ecfaf2!important;color:#27845d!important}.theme-strip .theme-road{background:#fff6d9!important;color:#a7790a!important}.theme-strip .theme-home{background:#f2ecff!important;color:#7357b5!important}

.home-continue-card{padding:23px 26px!important}.home-recent-grid{grid-template-columns:repeat(3,1fr)!important;gap:10px!important;margin-top:15px!important}.recent-project-card{border:1px solid var(--friendly-line)!important;border-radius:16px!important;background:#fbfdff!important;box-shadow:none!important}.new-project-home{margin-top:12px!important;border:1px dashed #bfd1e0!important;border-radius:14px!important;color:#50708d!important;background:#f9fcff!important}

/* Creation/configurator */
body.mode-config #workspace{max-width:1100px!important;margin-top:16px!important}
body.mode-config #configPanel{
  max-width:1020px!important;border:1px solid var(--friendly-line)!important;border-radius:26px!important;
  background:#fff!important;box-shadow:var(--friendly-shadow)!important;
}
body.mode-config #configPanel .config-head{padding:27px 30px 18px!important;border-bottom:0!important;background:linear-gradient(180deg,#fff,#fbfdff)!important}
.config-head h2{color:var(--friendly-navy)!important;font-size:24px!important;letter-spacing:-.8px!important}.config-head p{color:#71869c!important;font-size:12px!important}
.creation-steps{display:flex;align-items:center;justify-content:center;gap:9px;padding:0 30px 20px;background:#fbfdff;border-bottom:1px solid var(--friendly-line)}
.creation-steps span{display:flex;align-items:center;gap:7px;color:#98a9b9;font-size:10px;font-weight:850;white-space:nowrap}.creation-steps i{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#eef2f7;color:#8998a7;font-style:normal;font-size:10px}.creation-steps span.active{color:#3565c9}.creation-steps span.active i{background:var(--friendly-blue);color:#fff;box-shadow:0 5px 12px rgba(47,108,246,.18)}.creation-steps em{width:64px;height:1px;background:#dfe8f0}
body.mode-config #configPanel .config-scroll-body{padding:24px 30px 19px!important;background:#f8fbfe!important}
body.mode-config #configPanel .creator-basics{grid-template-columns:.75fr 1fr 1fr 1.3fr!important;gap:10px!important}
.basic-box{border-color:var(--friendly-line)!important}.basic-box label{color:#72869a!important;font-size:9px!important;letter-spacing:.06em!important}.basic-box select,.basic-box input{border-color:#d7e3ed!important;background:#fff!important;color:#294560!important}
.quick-create-row{gap:8px!important}.quick-create-row button{border-radius:12px!important}.pack-section,.selection-panel,.manual-picker,.advanced-panel{border-color:var(--friendly-line)!important;border-radius:16px!important}.selection-panel{background:#fff!important}.selected-chip{border-color:#e1eaf2!important;background:#fbfdff!important}
#gen{background:var(--friendly-blue)!important;border-color:var(--friendly-blue)!important;border-radius:13px!important;box-shadow:0 8px 18px rgba(47,108,246,.14)!important}
#gen:hover{background:var(--friendly-blue-dark)!important;color:#fff!important}

/* Editor/workspace */
body.mode-result #workspace{max-width:1540px!important;margin-top:8px!important}
.pro-commandbar{
  top:8px!important;padding:8px 10px!important;border:1px solid var(--friendly-line)!important;border-radius:17px!important;
  background:rgba(255,255,255,.96)!important;box-shadow:0 8px 24px rgba(59,101,145,.08)!important;
}
.workspace-context span{color:#98a9b8!important}.workspace-context b{color:#38526d!important}
.pro-commandbar button,.pro-commandbar summary,.pro-commandbar select{border-color:#dce6ef!important;border-radius:11px!important;background:#fff!important;color:#49647e!important;font-weight:850!important}
.pro-commandbar .command-primary{background:#eaf3ff!important;border-color:#b8d0fb!important;color:#2e62cc!important}
.pro-commandbar #openConfig,.pro-commandbar #layoutMenu>summary{background:#f8fbfe!important}
.pro-commandbar .save-direct{background:#fff!important}
.pro-commandbar .print-main{background:var(--friendly-yellow)!important;border-color:#f1c94e!important;color:#594514!important;box-shadow:0 5px 12px rgba(218,167,30,.14)!important}
.pro-commandbar .print-main:hover{background:#ffce48!important;border-color:#eebf38!important;color:#4f3c0d!important}
.result-panel.viewer{padding:15px!important;border-color:var(--friendly-line)!important;border-radius:22px!important;box-shadow:var(--friendly-shadow-soft)!important;background:#fff!important}
.result-panel .viewerbar{padding:3px 5px 14px!important;border-bottom:1px solid #edf2f6!important}.viewer-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.viewer-heading b{font-size:15px!important;color:#284764}.viewer-heading small{width:100%;margin-top:-4px;color:#8799aa!important}.ready-pill{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:999px;background:#ebfaf2;color:#2d9562;font-size:9px;font-weight:950;letter-spacing:.02em}
.result-panel .worksheet-wrap{padding:28px!important;border:1px solid #d9e7f1!important;border-radius:18px!important;background:linear-gradient(145deg,#eef6fb,#e7f1f8)!important}
.worksheet{border-color:#d8e0e6!important;box-shadow:0 18px 38px rgba(49,79,109,.13)!important}

/* Drawers */
body.mode-result #configPanel,#wordsDrawer{width:min(650px,96vw)!important;background:#f7fbfe!important;border-left:1px solid var(--friendly-line)!important;border-radius:24px 0 0 24px!important;box-shadow:-20px 0 60px rgba(36,65,95,.16)!important}
body.mode-result #configPanel .config-head,.words-drawer-head{padding:22px 24px 17px!important;background:#fff!important;border-bottom:1px solid var(--friendly-line)!important}.words-drawer-head h2,body.mode-result #configPanel .config-head h2{color:var(--friendly-navy)!important;font-size:22px!important}.words-drawer-head p{color:#7f92a5!important;line-height:1.45!important}.drawer-close-button{border-radius:12px!important}
body.mode-result #configPanel .config-scroll-body,.words-drawer-body{padding:18px 24px 24px!important;background:#f8fbfe!important}.drawer-section,.words-selected-panel,.words-manual-panel,.words-preset-panel{border-color:var(--friendly-line)!important;border-radius:16px!important;background:#fff!important;box-shadow:0 3px 10px rgba(59,101,145,.035)!important}.drawer-section-head b,.words-section-head b{color:#294763!important}.drawer-section-head small,.words-section-head small{color:#8496a8!important}.words-basics .basic-box{background:#fbfdff!important}.words-primary-actions button{border-radius:12px!important}.words-picture-grid .card,.picture-grid .card{border-color:#e3ebf2!important;border-radius:14px!important;background:#fff!important}.words-picture-grid .card:hover,.picture-grid .card:hover{border-color:#9ec1ff!important;box-shadow:0 5px 14px rgba(47,108,246,.08)!important}.words-picture-grid .card.sel,.picture-grid .card.sel{border-color:#5c8cf5!important;background:#eef5ff!important}.words-drawer-footer,body.mode-result #configPanel .config-footer{background:#fff!important;border-top:1px solid var(--friendly-line)!important}.words-drawer-footer #wordsRegenerate,#applySettings{background:var(--friendly-blue)!important;border-color:var(--friendly-blue)!important;color:#fff!important;border-radius:12px!important}

/* Settings drawer friendly grouping */
.settings-section{border-color:#e2ebf2!important;border-radius:15px!important;background:#fff!important}.settings-section-head b{color:#294763!important}.setting-toggle{border-color:#e6edf3!important;border-radius:14px!important;background:#fbfdff!important}.setting-toggle:hover{background:#f5f9fd!important}.setting-toggle span b{color:#35516d!important}.setting-toggle span small{color:#8496a8!important}

/* Project library */
.project-modal{background:rgba(22,49,78,.34)!important;backdrop-filter:blur(4px)!important}.project-dialog{width:min(820px,96vw)!important;padding:24px!important;border:1px solid var(--friendly-line)!important;border-radius:24px!important;background:#fff!important;box-shadow:0 28px 90px rgba(35,63,93,.22)!important}.project-dialog-head h3{color:var(--friendly-navy)!important;font-size:23px!important}.save-row{border-color:var(--friendly-line)!important;border-radius:16px!important;background:#f6faff!important}.project-row{border-color:var(--friendly-line)!important;border-radius:16px!important;background:#fbfdff!important}.project-row:hover{background:#f5faff!important;border-color:#b8d0ed!important}

/* Generic controls */
button,select,input[type=text],input[type=number]{border-color:#d7e3ed;color:#35516d}
button{transition:background .16s,border-color .16s,color .16s,transform .16s,box-shadow .16s}
button:hover:not(:disabled){background:#f4f8fc;border-color:#b8cbdc;color:#294763}
.primary{background:var(--friendly-blue)!important;border-color:var(--friendly-blue)!important;color:#fff!important}
.primary:hover:not(:disabled){background:var(--friendly-blue-dark)!important;border-color:var(--friendly-blue-dark)!important;color:#fff!important}
.text-action{color:#3b69ce!important}.count{background:#eaf3ff!important;color:#3565c9!important}.msg{border-color:#d7e7fb!important;background:#f1f7ff!important;color:#3565c9!important}.warn{background:#fff8e7!important;border-color:#f6df9a!important;color:#956b0e!important}

/* Softer modals */
.new-project-confirm{background:rgba(22,49,78,.30)!important;backdrop-filter:blur(3px)!important}.new-project-box{border-color:var(--friendly-line)!important;border-radius:22px!important;box-shadow:0 24px 74px rgba(35,63,93,.20)!important}.new-project-box h3{color:var(--friendly-navy)!important}

/* Responsive */
@media(max-width:1100px){
  .top-nav{display:none}
  .home-hero-pro{grid-template-columns:1fr minmax(330px,.75fr)}
  .hero-copy{padding:46px 28px 42px 34px}.hero-copy h1{font-size:43px}
  .audience-strip{grid-template-columns:repeat(2,1fr)}.audience-strip>div:nth-child(2){border-right:0}.audience-strip>div:nth-child(-n+2){border-bottom:1px solid #edf2f6}
  .home-recent-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:840px){
  .product-header{grid-template-columns:1fr auto;padding:12px 16px}.header-actions{display:none}
  .home-hero-pro{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:38px 26px 32px}.hero-copy h1{font-size:40px}.hero-visual{min-height:330px}.hero-mini-sheet{right:50%;transform:translateX(50%) rotate(2deg);top:15px;height:300px}.hero-float-one{left:8%;bottom:32px}.hero-float-two{right:8%;top:24px}
  .exercise-grid{grid-template-columns:1fr!important}.home-recent-grid{grid-template-columns:1fr!important}
  body.mode-config #configPanel .creator-basics{grid-template-columns:1fr 1fr!important}.creation-steps em{width:25px}
}
@media(max-width:620px){
  #homeScreen{padding:0 12px}.brand-sub{display:none}.brand-mark{width:38px;height:38px}.brand-title{font-size:17px}
  .home-hero-pro{border-radius:22px}.hero-copy{padding:30px 20px 26px}.hero-copy h1{font-size:34px;letter-spacing:-1.4px}.hero-copy p{font-size:14px}.hero-visual{display:none}
  .audience-strip{grid-template-columns:1fr}.audience-strip>div{border-right:0;border-bottom:1px solid #edf2f6}.audience-strip>div:last-child{border-bottom:0}
  .exercises-home-card{padding:20px 16px!important}.home-continue-card{padding:20px 16px!important}
  body.mode-config #configPanel{border-radius:18px!important}.creation-steps{padding:0 14px 16px;gap:5px}.creation-steps b{display:none}.creation-steps em{width:32px}body.mode-config #configPanel .config-scroll-body{padding:18px 16px!important}body.mode-config #configPanel .creator-basics{grid-template-columns:1fr!important}
  body.mode-result #configPanel,#wordsDrawer{border-radius:0!important}
  .pro-commandbar .workspace-left{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.pro-commandbar .workspace-left>button,.pro-commandbar .workspace-left>details{flex:0 0 auto}.toolbar-divider{display:none}.workspace-right{justify-content:flex-start!important;overflow-x:auto;flex-wrap:nowrap!important}.command-print{min-width:240px}
}

@media print{
  body{background:#fff!important}
  body::before,.top-nav,.header-actions,.brand-lockup,.creation-steps{display:none!important}
  .worksheet{box-shadow:none!important}
}

/* The 3-step guide belongs to initial creation, not the sheet-settings drawer. */
body.mode-result #configPanel .creation-steps{display:none!important}

/* ============================================================
   Playful Education UI — v5.27
   Full visual redesign aligned with the approved design board.
   ============================================================ */
:root{
  --play-bg:#f6fbff;
  --play-ink:#15345f;
  --play-blue:#2d69f6;
  --play-blue-2:#66a9ff;
  --play-yellow:#ffd15a;
  --play-yellow-soft:#fff3bf;
  --play-mint:#9ee6c7;
  --play-mint-soft:#e8fbf2;
  --play-pink:#ffb9c2;
  --play-pink-soft:#fff0f2;
  --play-purple:#cdb9ff;
  --play-orange:#ffc58f;
  --play-card:#ffffff;
  --play-line:#dbe9f5;
  --play-shadow:0 18px 45px rgba(61,99,145,.12);
}

body{
  background:
    radial-gradient(circle at 4% 8%,rgba(158,230,199,.34) 0 54px,transparent 55px),
    radial-gradient(circle at 92% 6%,rgba(255,209,90,.22) 0 90px,transparent 91px),
    radial-gradient(circle at 97% 72%,rgba(255,185,194,.16) 0 120px,transparent 121px),
    radial-gradient(circle at 3% 82%,rgba(102,169,255,.13) 0 115px,transparent 116px),
    linear-gradient(#f8fcff,#f4faff 62%,#f9fcff);
  color:var(--play-ink);
}

/* Header feels like a friendly app, not an admin bar */
.product-header{
  position:relative;
  max-width:1380px;
  min-height:78px;
  margin:12px auto 0;
  padding:12px 18px;
  border:1px solid rgba(214,231,244,.95);
  border-radius:24px;
  background:rgba(255,255,255,.93);
  box-shadow:0 10px 28px rgba(59,95,136,.08);
  backdrop-filter:blur(14px);
}
.brand-mark{background:#fff3c4!important;border-radius:16px!important;box-shadow:0 5px 14px rgba(240,184,32,.12)!important}
.brand-title{font-size:21px!important;letter-spacing:-.7px!important;color:#143565!important}
.brand-sub{font-size:10px!important;color:#7b91a7!important}
.top-nav{gap:5px!important}
.top-nav button{padding:0 15px!important;border-radius:999px!important;font-size:11px!important}
.top-nav button:first-child{background:#eaf3ff!important;color:#2c62cf!important}
.header-free-note{background:#eefaf4!important;border-color:#d5f0e2!important;color:#388663!important}
.header-free-dot{background:#4bcc8a!important}

/* HOME — colorful editorial composition */
body.mode-home #homeScreen{max-width:1380px!important;margin-top:18px!important}
.home-hero-pro{
  min-height:470px!important;
  border-radius:34px!important;
  border:1px solid #d9eaf7!important;
  background:
    radial-gradient(circle at 78% 25%,rgba(255,209,90,.34) 0 95px,transparent 96px),
    radial-gradient(circle at 94% 82%,rgba(158,230,199,.34) 0 125px,transparent 126px),
    radial-gradient(circle at 62% 88%,rgba(255,185,194,.28) 0 90px,transparent 91px),
    linear-gradient(120deg,#fff 0 48%,#edf7ff 48% 100%)!important;
  box-shadow:0 22px 55px rgba(54,96,139,.12)!important;
}
.hero-copy{padding:62px 38px 52px 52px!important}
.hero-eyebrow{
  display:inline-flex!important;align-items:center;gap:7px;
  padding:8px 12px;border-radius:999px;background:#fff3c7;color:#9a6a00!important;
  letter-spacing:0!important;font-size:10.5px!important;
}
.hero-eyebrow::before{content:"★";color:#f2b719}
.hero-copy h1{font-size:56px!important;line-height:.98!important;letter-spacing:-2.7px!important;margin-top:16px!important}
.hero-copy h1 span{color:#2e69f4!important}
.hero-copy p{font-size:17px!important;max-width:620px!important;color:#607a95!important}
.hero-actions{margin-top:28px!important}
.hero-actions button{min-height:54px!important;border-radius:16px!important;font-size:13px!important;font-weight:950!important}
.hero-primary{background:linear-gradient(135deg,#2c6cf6,#255bd8)!important;box-shadow:0 12px 25px rgba(45,105,246,.23)!important}
.hero-secondary{background:#fff!important}
.hero-trust{font-size:11.5px!important}

.hero-visual{min-height:470px!important}
.hero-visual::before{width:460px!important;height:460px!important;right:-60px!important;top:-30px!important;background:radial-gradient(circle,#dff2ff 0 67%,transparent 68%)!important}
.hero-mini-sheet{width:300px!important;height:355px!important;right:70px!important;top:52px!important;border-radius:20px!important;box-shadow:0 26px 55px rgba(32,63,96,.18)!important;transform:rotate(4deg)!important}
.hero-float-card{border-radius:18px!important;padding:11px 14px!important;font-size:10.5px!important}
.hero-icon-orbit{position:absolute;z-index:5;display:grid;place-items:center;width:70px;height:70px;border-radius:24px;background:#fff;box-shadow:0 12px 28px rgba(51,85,120,.13);border:1px solid #e2edf5}
.hero-icon-orbit img{width:48px;height:48px;object-fit:contain}
.orbit-a{right:375px;top:48px;transform:rotate(-7deg);background:#fff5d6}
.orbit-b{right:24px;bottom:46px;transform:rotate(8deg);background:#edf5ff}
.orbit-c{right:355px;bottom:42px;transform:rotate(5deg);background:#ebfaf2}

.audience-strip{gap:12px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.audience-strip>div{border:1px solid #e1ecf5!important;border-radius:18px!important;background:#fff!important;padding:14px 15px!important;box-shadow:0 6px 18px rgba(55,90,125,.05)!important}
.audience-strip>div:nth-child(1){background:linear-gradient(135deg,#fff,#f0f6ff)!important}
.audience-strip>div:nth-child(2){background:linear-gradient(135deg,#fff,#effcf5)!important}
.audience-strip>div:nth-child(3){background:linear-gradient(135deg,#fff,#fff8dd)!important}
.audience-strip>div:nth-child(4){background:linear-gradient(135deg,#fff,#fff0f2)!important}
.audience-icon{width:42px!important;height:42px!important;border-radius:15px!important;font-size:19px!important}
.audience-strip b{font-size:12px!important;color:#28496d!important}.audience-strip small{font-size:9.8px!important}

.home-card,.home-continue-card{border-radius:28px!important;padding:30px!important;box-shadow:0 14px 34px rgba(63,97,132,.08)!important}
.home-card-head h2{font-size:28px!important;letter-spacing:-1px!important}.section-helper{font-size:12px!important}
.exercise-grid{gap:16px!important}
.exercise-card{position:relative;overflow:hidden;min-height:205px!important;padding:20px!important;border-radius:22px!important;align-items:flex-start!important}
.exercise-card::after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-30px;bottom:-34px;opacity:.55}
.exercise-card:nth-child(1){background:linear-gradient(145deg,#f0f6ff,#fff)!important;border-color:#b9d1ff!important}
.exercise-card:nth-child(1)::after{background:#cfe2ff}
.exercise-card:nth-child(2){background:linear-gradient(145deg,#effcf5,#fff)!important;border-color:#c7ead8!important}
.exercise-card:nth-child(2)::after{background:#c9efd9}
.exercise-card:nth-child(3){background:linear-gradient(145deg,#fff8dd,#fff)!important;border-color:#f5df9e!important}
.exercise-card:nth-child(3)::after{background:#ffe39a}
.exercise-icon{width:52px!important;height:52px!important;border-radius:17px!important;font-size:26px!important}
.exercise-copy b{font-size:15px!important}.exercise-copy small{font-size:10.5px!important;line-height:1.5!important}
.exercise-art{display:flex;align-items:center;gap:7px;margin-top:14px;min-height:50px}
.exercise-art img{width:46px;height:46px;object-fit:contain;border-radius:12px;background:rgba(255,255,255,.72);padding:4px;border:1px solid rgba(221,232,241,.8)}
.exercise-art .mini-path{font-size:19px;color:#76a1d3;letter-spacing:3px;font-weight:900}
.exercise-arrow{position:absolute!important;right:16px!important;bottom:15px!important;width:34px!important;height:34px!important;border-radius:50%!important;background:#fff!important;display:grid!important;place-items:center!important;color:#2e69f4!important;box-shadow:0 4px 12px rgba(43,79,118,.08)}
.exercise-badge{border-radius:999px!important}

.quick-start-pro{margin-top:20px!important;padding:24px!important;border:1px dashed #c9ddec!important;border-radius:22px!important;background:linear-gradient(135deg,#fbfdff,#f6fbff)!important}
.quick-grid{gap:12px!important}.quick-card{min-height:104px!important;border-radius:18px!important;border:1px solid #dce8f2!important;background:#fff!important}
.quick-card:nth-child(1){background:#edf5ff!important}.quick-card:nth-child(2){background:#fff8de!important}.quick-card:nth-child(3){background:#eefaf4!important}
.quick-number{width:48px!important;height:48px!important;border-radius:16px!important;background:#fff!important;color:#2e69f4!important;box-shadow:0 5px 12px rgba(48,82,120,.07)!important}
.theme-quick{border-radius:999px!important;padding:9px 13px!important;font-weight:900!important}
.theme-animal{background:#edf5ff!important}.theme-food{background:#fff0f2!important}.theme-nature{background:#eefaf4!important}.theme-road{background:#fff8de!important}.theme-home{background:#f3efff!important}

.home-continue-card{background:linear-gradient(145deg,#fff,#fbfdff)!important}
.new-project-home{min-height:52px!important;border:2px dashed #c9dbea!important;border-radius:17px!important;background:#f8fbfe!important;color:#52708f!important;font-weight:900!important}

/* CREATE PAGE — feels like a guided activity builder */
body.mode-config #workspace{max-width:1220px!important;margin-top:22px!important;padding:0 18px 70px!important}
body.mode-config #configPanel{overflow:visible!important;border-radius:30px!important;border:1px solid #d8e7f4!important;background:#fff!important;box-shadow:0 20px 50px rgba(55,91,130,.11)!important}
body.mode-config #configPanel .config-head{
  position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) 270px auto!important;align-items:center!important;gap:18px!important;
  padding:30px 30px 24px!important;border-radius:30px 30px 0 0!important;
  background:
    radial-gradient(circle at 85% 30%,rgba(255,209,90,.28) 0 68px,transparent 69px),
    radial-gradient(circle at 68% 100%,rgba(158,230,199,.22) 0 72px,transparent 73px),
    linear-gradient(120deg,#fff,#eef7ff)!important;
}
body.mode-config #configPanel .config-head h2{font-size:31px!important;letter-spacing:-1.2px!important;color:#143862!important;margin-top:4px!important}
body.mode-config #configPanel .config-head p{font-size:12px!important;color:#6f879f!important;max-width:620px!important}
.config-tip-card{display:flex;align-items:center;gap:9px;padding:13px 14px;border-radius:17px;background:#fff7d7;border:1px solid #f3df99;color:#7c630d;box-shadow:0 6px 15px rgba(188,145,24,.08)}
.config-tip-card .tip-star{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:#ffd65f;color:#fff;font-size:15px}.config-tip-card b{font-size:11px}.config-tip-card small{display:block;font-size:9px;line-height:1.35;color:#937a28}
body.mode-result .config-tip-card{display:none!important}
.creation-steps{margin:0 30px 0!important;padding:18px 0 20px!important;border-top:1px solid #e8f0f6!important;background:#fff!important}
.creation-steps span{padding:9px 13px!important;border-radius:999px!important;background:#f6f9fc!important}.creation-steps span.active{background:#edf5ff!important;color:#2d69f6!important}.creation-steps span i{background:#fff!important;border:1px solid #c7d9ef!important;color:#3868cd!important}.creation-steps span.active i{background:#2d69f6!important;color:#fff!important;border-color:#2d69f6!important}
body.mode-config #configPanel .config-scroll-body{padding:26px 30px!important;background:linear-gradient(#f8fbfe,#f5faff)!important}
body.mode-config #configPanel .creator-basics{gap:12px!important}
body.mode-config #configPanel .basic-box{padding:14px!important;border:1px solid #e1ebf3!important;border-radius:17px!important;background:#fff!important;box-shadow:0 4px 12px rgba(55,91,130,.04)!important}
body.mode-config #configPanel .basic-box:nth-child(1){background:#eef5ff!important}.creator-basics .basic-box:nth-child(2){background:#eefaf4!important}.creator-basics .basic-box:nth-child(3){background:#fff8df!important}.creator-basics .basic-box:nth-child(4){background:#fff0f2!important}
body.mode-config #configPanel .basic-box label{color:#6b7f94!important;font-size:9px!important}.basic-box select,.basic-box input{min-height:42px!important;border-radius:11px!important;background:#fff!important}
body.mode-config #configPanel .quick-create-row{padding:16px 0!important}.quick-create-row button{min-height:44px!important;border-radius:14px!important;font-weight:900!important}.quick-create-row .primary{box-shadow:0 7px 18px rgba(45,105,246,.17)!important}
body.mode-config #configPanel .selection-panel{padding:18px!important;border-radius:20px!important;background:#fff!important;box-shadow:0 8px 22px rgba(55,91,130,.055)!important}
.selected-words{gap:10px!important}.selected-chip{border-radius:15px!important;padding:9px!important;background:#f8fbfe!important}.selected-chip img{background:#fff!important;border-radius:11px!important;padding:3px}
body.mode-config #configPanel .config-footer{padding:16px 30px!important;background:#fff!important;border-radius:0 0 30px 30px!important}
body.mode-config #configPanel #gen{min-height:50px!important;border-radius:15px!important;font-size:13px!important;padding:0 22px!important}

/* RESULT PAGE — preview as the hero, actions as friendly tabs */
body.mode-result #workspace{max-width:1480px!important;padding:0 18px 70px!important}
.result-hero-strip{
  margin:10px 0 12px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;
  border:1px solid #dceaf5;border-radius:24px;background:
    radial-gradient(circle at 90% 20%,rgba(255,209,90,.28) 0 54px,transparent 55px),
    radial-gradient(circle at 75% 100%,rgba(158,230,199,.24) 0 72px,transparent 73px),
    linear-gradient(120deg,#fff,#eef7ff);box-shadow:0 10px 28px rgba(60,95,132,.07)
}
.result-kicker{display:inline-flex;padding:6px 9px;border-radius:999px;background:#eaf9f1;color:#299965;font-size:9.5px;font-weight:950;letter-spacing:.06em;text-transform:uppercase}
.result-hero-copy h2{margin:7px 0 4px;font-size:23px;letter-spacing:-.8px;color:#173a66}.result-hero-copy p{margin:0;color:#73899f;font-size:11px}
.result-hero-pictures{display:flex;gap:9px;align-items:center}.result-hero-pictures span{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:#fff;border:1px solid #e1ebf3;box-shadow:0 6px 14px rgba(51,83,116,.06)}.result-hero-pictures span:nth-child(1){background:#fff0f2}.result-hero-pictures span:nth-child(2){background:#eef5ff}.result-hero-pictures span:nth-child(3){background:#fff8df}.result-hero-pictures img{width:42px;height:42px;object-fit:contain}
.pro-commandbar{position:sticky!important;top:8px!important;z-index:35!important;border-radius:19px!important;padding:9px 10px!important;background:rgba(255,255,255,.94)!important;backdrop-filter:blur(12px)!important;box-shadow:0 10px 28px rgba(55,90,126,.08)!important}
.pro-commandbar .workspace-context{padding-right:6px!important}.workspace-context b{font-size:12px!important}.workspace-context span{font-size:9px!important}
.pro-commandbar .command-primary{background:#edf5ff!important;color:#2b61d0!important;border-color:#bfd4ff!important}.pro-commandbar #openConfig{background:#eefaf4!important;border-color:#ccebdc!important;color:#398765!important}.pro-commandbar #layoutMenu>summary{background:#fff8df!important;border-color:#f1dfa9!important;color:#936b0d!important}
.pro-commandbar .save-direct{background:#f6f1ff!important;border-color:#ddd0ff!important;color:#6b56a8!important}.pro-commandbar .print-main{background:#ffd45e!important;border-color:#f0c543!important;color:#5c470e!important}
.result-panel.viewer{margin-top:12px!important;border-radius:26px!important;padding:18px!important;background:#fff!important;box-shadow:0 18px 44px rgba(61,96,132,.10)!important}
.result-panel .viewerbar{padding:4px 6px 15px!important}.ready-pill{background:#eaf9f1!important;color:#258b5d!important}.viewer-heading b{font-size:16px!important}
.result-panel .worksheet-wrap{min-height:680px!important;padding:36px!important;border-radius:22px!important;background:
  radial-gradient(circle at 5% 8%,rgba(102,169,255,.08) 0 90px,transparent 91px),
  radial-gradient(circle at 95% 92%,rgba(158,230,199,.13) 0 120px,transparent 121px),
  linear-gradient(135deg,#eef6fb,#e8f2f9)!important}
.worksheet{border-radius:5px!important;box-shadow:0 22px 45px rgba(44,73,101,.15)!important}

/* DRAWERS — colorful, friendly editing panels */
body.mode-result #configPanel,#wordsDrawer{width:min(690px,96vw)!important;border-radius:30px 0 0 30px!important;background:#f5faff!important;box-shadow:-26px 0 70px rgba(29,56,85,.20)!important}
body.mode-result #configPanel .config-head,.words-drawer-head{
  padding:24px 26px 20px!important;border-bottom:1px solid #deebf5!important;
  background:linear-gradient(135deg,#fff,#eef6ff)!important
}
.words-drawer-head{background:
  radial-gradient(circle at 87% 15%,rgba(255,209,90,.25) 0 64px,transparent 65px),
  linear-gradient(135deg,#fff,#eef6ff)!important}
.drawer-kicker{display:inline-flex;align-items:center;gap:6px!important;color:#4d72b6!important}.drawer-kicker-dot{font-style:normal;color:#f0b61c}
.words-drawer-head h2,body.mode-result #configPanel .config-head h2{font-size:25px!important;letter-spacing:-.7px!important}
body.mode-result #configPanel .config-scroll-body,.words-drawer-body{padding:20px 26px 26px!important;background:#f6faff!important}
.drawer-section,.words-selected-panel,.words-manual-panel,.words-preset-panel,.settings-section{border-radius:19px!important;border:1px solid #dfeaf3!important;background:#fff!important;box-shadow:0 7px 18px rgba(56,90,124,.045)!important}
.words-compose-panel{background:linear-gradient(145deg,#fff,#fbfdff)!important}.words-basics .basic-box:nth-child(1){background:#eef5ff!important}.words-basics .basic-box:nth-child(2){background:#eefaf4!important}.words-basics .basic-box:nth-child(3){background:#fff8df!important}
.words-selected-chip{border-radius:15px!important;background:#f8fbfe!important;border-color:#e1ebf3!important}.words-selected-chip img{border-radius:11px!important;background:#fff!important;padding:3px}
.words-card,.picture-grid .card{border-radius:16px!important}.words-card:nth-child(5n+1){background:#fff8e5!important}.words-card:nth-child(5n+2){background:#eef7ff!important}.words-card:nth-child(5n+3){background:#eefaf4!important}.words-card:nth-child(5n+4){background:#fff0f2!important}.words-card:nth-child(5n+5){background:#f4f0ff!important}
.words-card.sel,.picture-grid .card.sel{box-shadow:0 0 0 2px #6b98ff inset,0 8px 18px rgba(45,105,246,.10)!important}
.words-drawer-footer,body.mode-result #configPanel .config-footer{padding:16px 24px!important;background:#fff!important}
.setting-toggle{background:#fbfdff!important;border-radius:16px!important}.setting-toggle:nth-child(1){background:#eef5ff!important}.setting-toggle:nth-child(2){background:#fff8df!important}.setting-toggle:nth-child(3){background:#eefaf4!important}

/* Projects and dialogs */
.project-dialog{border-radius:28px!important;background:linear-gradient(180deg,#fff,#f9fcff)!important}.project-dialog-head{padding-bottom:14px!important;border-bottom:1px solid #e8f0f6!important}.project-row{background:#fff!important;border-radius:19px!important}.project-row:nth-child(3n+1),.project-row:nth-child(3n+2),.project-row:nth-child(3n){box-shadow:none}
.new-project-box{border-radius:26px!important;background:linear-gradient(160deg,#fff,#f7fbff)!important}

/* Friendly hover states */
button:not(:disabled):hover{transform:translateY(-1px)}
button.primary:not(:disabled):hover{box-shadow:0 8px 18px rgba(45,105,246,.18)!important}

@media(max-width:1050px){
  .product-header{margin:8px 10px 0!important}
  .home-hero-pro{grid-template-columns:1fr .82fr!important}
  .hero-copy h1{font-size:48px!important}.hero-mini-sheet{right:35px!important}
  body.mode-config #configPanel .config-head{grid-template-columns:1fr auto!important}.config-tip-card{display:none}
  .result-hero-strip{padding:17px 18px}.result-hero-pictures span{width:48px;height:48px}.result-hero-pictures img{width:36px;height:36px}
}
@media(max-width:820px){
  .product-header{border-radius:18px!important}.home-hero-pro{grid-template-columns:1fr!important}.hero-copy{padding:42px 28px 36px!important}.hero-copy h1{font-size:43px!important}.hero-visual{min-height:360px!important}
  .hero-mini-sheet{right:50%!important;transform:translateX(50%) rotate(3deg)!important}.orbit-a{left:8%!important;right:auto!important}.orbit-b{right:8%!important}.orbit-c{display:none!important}
  .exercise-grid{grid-template-columns:1fr!important}.exercise-card{min-height:150px!important}.exercise-art{position:absolute;right:20px;bottom:18px;margin:0}
  .result-hero-strip{align-items:flex-start}.result-hero-pictures{display:none}
  .pro-commandbar{border-radius:15px!important}.result-panel .worksheet-wrap{padding:18px!important}
}
@media(max-width:620px){
  body{background:#f6fbff!important}.product-header{margin:0!important;border-radius:0 0 18px 18px!important;border-top:0!important}.brand-title{font-size:18px!important}
  .hero-copy h1{font-size:37px!important}.hero-copy p{font-size:14px!important}.hero-visual{display:none!important}
  .audience-strip{gap:8px!important}.home-card,.home-continue-card{padding:20px 16px!important;border-radius:22px!important}.home-card-head h2{font-size:23px!important}
  body.mode-config #workspace{padding:0 10px 50px!important}.config-tip-card{display:none!important}body.mode-config #configPanel .config-head{grid-template-columns:1fr auto!important;padding:22px 18px!important}body.mode-config #configPanel .config-head h2{font-size:25px!important}.creation-steps{margin:0 18px!important}.result-hero-strip{border-radius:18px!important;margin-top:8px!important}.result-hero-copy h2{font-size:19px!important}
  body.mode-result #workspace{padding:0 8px 50px!important}.result-panel.viewer{padding:10px!important;border-radius:18px!important}.result-panel .worksheet-wrap{padding:10px!important;border-radius:14px!important}
  body.mode-result #configPanel,#wordsDrawer{border-radius:0!important}
}

@media print{
  .result-hero-strip{display:none!important}
  .product-header{box-shadow:none!important;border:0!important;margin:0!important}
}

/* ============================================================
   v5.27a — Print isolation hotfix
   Keep the Playful Education UI strictly screen-only. The v5.27
   screen shell uses late !important declarations, so this final
   print block must live at the END of the stylesheet.
   ============================================================ */
@media print{
  html,
  body{
    width:auto!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
  }

  /* Screen-only product chrome must not affect printable geometry. */
  .product-header,
  .result-hero-strip,
  .pro-commandbar,
  .clean-commandbar,
  .viewerbar,
  #homeScreen,
  #configPanel,
  #drawerBackdrop,
  #wordsDrawer,
  #wordsDrawerBackdrop,
  #projectModal,
  #newProjectConfirm,
  #discardChangesModal{
    display:none!important;
  }

  body.mode-result #workspace,
  #workspace,
  body.mode-result #resultStage,
  #resultStage{
    display:block!important;
    width:auto!important;
    max-width:none!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
  }

  /* Undo v5.27 screen card geometry. */
  .result-panel,
  .result-panel.viewer{
    display:block!important;
    width:auto!important;
    max-width:none!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  .result-panel .worksheet-wrap{
    display:block!important;
    width:auto!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    outline:0!important;
    background:#fff!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  .result-panel .worksheet,
  .worksheet{
    margin:0 auto!important;
    border:0!important;
    border-radius:0!important;
    outline:0!important;
    box-shadow:none!important;
  }

  /* Portrait print should use the full printable width again. The old
     print safeguards remain responsible for fitting clues + crossword. */
  .worksheet.orientation-portrait{
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    aspect-ratio:auto!important;
  }

  /* Remove only the accidental v5.27 spacing. */
  body.mode-result #workspace,
  .result-panel.viewer,
  .result-panel .worksheet-wrap{
    padding-left:0!important;
    padding-right:0!important;
    padding-bottom:0!important;
  }
}


/* ============================================================
   v5.27b — Unified shell + explicit module selection
   Same horizontal rhythm on Home / Create / Editor. Future module
   selections hide crossword-only content and show their own state.
   ============================================================ */
@media screen{
  :root{--play-shell-width:1380px}

  .product-header,
  body.mode-home #homeScreen,
  body.mode-config #workspace,
  body.mode-result #workspace{
    width:calc(100% - 32px)!important;
    max-width:var(--play-shell-width)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body.mode-home #homeScreen{
    padding-left:0!important;
    padding-right:0!important;
  }

  body.mode-config #workspace,
  body.mode-result #workspace{
    padding-left:0!important;
    padding-right:0!important;
  }

  body.mode-config #configPanel{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  .exercise-card{
    outline:0 solid transparent;
    isolation:isolate;
  }
  .exercise-card.is-selected{
    transform:translateY(-2px)!important;
    box-shadow:0 0 0 3px rgba(45,105,246,.16),0 14px 28px rgba(50,91,135,.12)!important;
  }
  .exercise-card.is-selected:nth-child(1){border-color:#6fa0ff!important;background:linear-gradient(145deg,#eaf3ff,#fff)!important}
  .exercise-card.is-selected:nth-child(2){border-color:#73cca0!important;background:linear-gradient(145deg,#e9faf1,#fff)!important}
  .exercise-card.is-selected:nth-child(3){border-color:#e8bf45!important;background:linear-gradient(145deg,#fff5cf,#fff)!important}
  .exercise-card.is-selected .exercise-badge{display:none!important}
  .exercise-card.is-selected .exercise-icon{box-shadow:0 0 0 4px rgba(255,255,255,.92),0 0 0 7px rgba(45,105,246,.11)!important}
  .module-select-state{
    display:none;position:absolute;right:15px;top:15px;z-index:4;
    padding:6px 9px;border-radius:999px;background:#2d69f6;color:#fff;
    font-size:9px;font-weight:950;letter-spacing:.02em;box-shadow:0 5px 12px rgba(45,105,246,.18)
  }
  .exercise-card:nth-child(2).is-selected .module-select-state{background:#37a974}
  .exercise-card:nth-child(3).is-selected .module-select-state{background:#d69c0b}
  .exercise-card.is-selected .module-select-state{display:inline-flex;align-items:center;gap:4px}

  .module-hidden{display:none!important}

  .future-note{
    margin:18px 0 0!important;padding:0!important;border:0!important;background:transparent!important;
  }
  .future-module-panel{
    min-height:150px;display:flex;align-items:center;gap:18px;padding:24px 26px;
    border:1px solid #dce9f3;border-radius:22px;background:#fff;
    box-shadow:0 10px 24px rgba(57,91,124,.06)
  }
  .future-module-panel.green{background:linear-gradient(135deg,#effbf5,#fff);border-color:#ccebdc}
  .future-module-panel.yellow{background:linear-gradient(135deg,#fff8df,#fff);border-color:#f1dfa9}
  .future-module-icon{
    flex:0 0 auto;width:66px;height:66px;display:grid;place-items:center;border-radius:20px;
    background:#fff;color:#2d69f6;font-size:30px;font-weight:950;box-shadow:0 7px 18px rgba(55,91,130,.08)
  }
  .future-module-panel.green .future-module-icon{color:#319866}
  .future-module-panel.yellow .future-module-icon{color:#c18a06}
  .future-module-kicker{font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:#7590aa}
  .future-module-panel h3{margin:5px 0 6px;font-size:22px;color:#173b67;letter-spacing:-.5px}
  .future-module-panel p{margin:0;max-width:720px;font-size:12px;line-height:1.55;color:#6c8298}
}

@media screen and (max-width:620px){
  .product-header,
  body.mode-home #homeScreen,
  body.mode-config #workspace,
  body.mode-result #workspace{width:100%!important}
  body.mode-home #homeScreen{padding-left:12px!important;padding-right:12px!important}
  body.mode-config #workspace,body.mode-result #workspace{padding-left:10px!important;padding-right:10px!important}
  .future-module-panel{align-items:flex-start;padding:20px 17px;gap:13px}.future-module-icon{width:50px;height:50px;border-radius:16px;font-size:24px}.future-module-panel h3{font-size:19px}
}

/* ============================================================
   v5.27c — worksheet footer meta + landscape alphabet fix
   Name/date live in the reserved bottom edge of the sheet.
   The alphabet is an explicit first grid row in landscape.
   ============================================================ */
.worksheet{
  position:relative;
  --sheet-footer-offset:8px;
  --sheet-footer-space:54px;
  padding-bottom:max(var(--sheet-pad-bottom),var(--sheet-footer-space))!important;
}

.worksheet-footer-meta{
  position:absolute;
  left:var(--sheet-pad-x);
  right:var(--sheet-pad-x);
  bottom:var(--sheet-footer-offset);
  margin:0!important;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  font-size:13px;
  color:#475569;
  line-height:1.2;
  pointer-events:none;
}

.worksheet.no-meta .worksheet-footer-meta{display:none!important}

/* Landscape is a real four-zone composition: alphabet, title, content, footer. */
.worksheet.orientation-landscape{
  grid-template-areas:
    "alphabet alphabet"
    "head head"
    "clues crossword"!important;
}
.worksheet.orientation-landscape .alphabet-strip{
  grid-area:alphabet;
  width:auto;
  min-width:0;
  align-self:start;
}
.worksheet.orientation-landscape .print-head{grid-area:head}
.worksheet.orientation-landscape .clue-sections{grid-area:clues}
.worksheet.orientation-landscape .crossword-area{grid-area:crossword}

@media print{
  .worksheet{
    --sheet-footer-offset:0.8mm;
    --sheet-footer-space:11mm;
    --sheet-pad-bottom:11mm;
    padding-bottom:var(--sheet-footer-space)!important;
  }
  .worksheet-footer-meta{
    left:var(--sheet-pad-x)!important;
    right:var(--sheet-pad-x)!important;
    bottom:var(--sheet-footer-offset)!important;
    font-size:8.5pt!important;
    line-height:1.15!important;
  }

  .worksheet.orientation-landscape{
    grid-template-areas:
      "alphabet alphabet"
      "head head"
      "clues crossword"!important;
  }
  .worksheet.orientation-landscape .alphabet-strip{
    grid-area:alphabet!important;
    margin:0 calc(-1 * var(--sheet-pad-x)) 2.4mm!important;
    padding:0 var(--sheet-pad-x) 2.2mm!important;
  }
}

/* ============================================================
   v5.27d — Module Identity Refresh
   Distinct activity identities inspired by the approved design board.
   ============================================================ */
@media screen {
  .module-grid-v527d{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:18px!important;
    align-items:stretch;
  }

  .module-card{
    --module-accent:#2d69f6;
    --module-soft:#edf4ff;
    --module-border:#b9d1ff;
    position:relative!important;
    min-height:242px!important;
    padding:20px 20px 18px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 132px!important;
    grid-template-rows:1fr auto!important;
    gap:14px 16px!important;
    border:1.5px solid var(--module-border)!important;
    border-radius:24px!important;
    background:#fff!important;
    overflow:hidden!important;
    text-align:left!important;
    box-shadow:0 10px 26px rgba(49,82,117,.06)!important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease!important;
  }
  .module-card::before{
    content:"";position:absolute;left:0;top:0;width:6px;height:100%;background:var(--module-accent);opacity:.95;
  }
  .module-card::after{
    content:"";position:absolute;right:-34px;bottom:-42px;width:145px;height:145px;border-radius:50%;background:var(--module-soft);opacity:.92;z-index:0;
  }
  .module-card:hover{transform:translateY(-3px)!important;box-shadow:0 16px 32px rgba(50,88,126,.11)!important;border-color:var(--module-accent)!important}
  .module-card.is-selected{
    transform:translateY(-3px)!important;
    border-color:var(--module-accent)!important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--module-accent) 15%, transparent),0 18px 34px rgba(50,88,126,.14)!important;
  }

  .module-crossword{--module-accent:#2d69f6;--module-soft:#e7f0ff;--module-border:#b8cffd}
  .module-maze{--module-accent:#25a76f;--module-soft:#e3f8ee;--module-border:#bde5d0}
  .module-path{--module-accent:#e0a21e;--module-soft:#fff1bf;--module-border:#f0d587}

  .module-card-copy,.module-visual,.module-card-action{position:relative;z-index:2}
  .module-card-copy{display:flex;flex-direction:column;min-width:0}
  .module-card-headline{display:flex;align-items:center;gap:11px;margin-bottom:10px}
  .module-symbol{
    width:48px;height:48px;flex:0 0 48px;border-radius:16px;display:grid;place-items:center;
    font-size:23px;font-weight:950;background:var(--module-soft);color:var(--module-accent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--module-accent) 18%, transparent)
  }
  .module-title-stack{display:flex;flex-direction:column;gap:4px;min-width:0}
  .module-title-stack b{font-size:18px!important;line-height:1.05;color:#173b67!important;letter-spacing:-.25px}
  .module-status{
    width:max-content;padding:4px 7px;border-radius:999px;background:#eef2f7;color:#71849a;
    font-size:8px;font-weight:950;letter-spacing:.06em;text-transform:uppercase
  }
  .module-status.ready{background:#e7f8ee;color:#278f61}
  .module-card-copy>small{display:block;max-width:260px;font-size:11px!important;line-height:1.5!important;color:#70859a!important}
  .module-meta-line{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:14px}
  .module-meta-line span{
    padding:5px 8px;border-radius:999px;background:#f6f9fc;color:#6e8296;font-size:8px;font-weight:850;border:1px solid #edf2f6
  }

  .module-visual{
    align-self:center;justify-self:stretch;height:138px;border-radius:21px;background:var(--module-soft);
    border:1px solid color-mix(in srgb,var(--module-accent) 16%, white);
    display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.88)
  }
  .module-paper{
    width:98px;height:112px;background:#fff;border-radius:10px;box-shadow:0 10px 20px rgba(56,87,119,.13);
    transform:rotate(2deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px
  }
  .module-clue-icons{display:flex;gap:7px}
  .module-clue-icons img{width:25px;height:25px;object-fit:contain}
  .mini-crossword-shape{width:60px;height:52px;display:grid;grid-template-columns:repeat(4,13px);grid-template-rows:repeat(4,13px);position:relative}
  .mini-crossword-shape i{width:13px;height:13px;border:1.5px solid #34516e;background:#fff;box-sizing:border-box;position:absolute}
  .mini-crossword-shape i:nth-child(1){left:13px;top:0}.mini-crossword-shape i:nth-child(2){left:13px;top:13px}.mini-crossword-shape i:nth-child(3){left:0;top:26px}.mini-crossword-shape i:nth-child(4){left:13px;top:26px}.mini-crossword-shape i:nth-child(5){left:26px;top:26px}.mini-crossword-shape i:nth-child(6){left:39px;top:26px}.mini-crossword-shape i:nth-child(7){left:26px;top:13px}.mini-crossword-shape i:nth-child(8){left:26px;top:39px}.mini-crossword-shape i:nth-child(9){left:39px;top:13px}

  .module-visual-maze,.module-visual-path{position:relative;display:block}
  .module-start-icon,.module-goal-icon{position:absolute;z-index:3;width:38px;height:38px;object-fit:contain;background:#fff;border-radius:12px;padding:5px;box-sizing:border-box;box-shadow:0 5px 12px rgba(53,88,124,.10)}
  .module-start-icon{left:9px;bottom:10px}.module-goal-icon{right:9px;top:10px}
  .maze-preview-svg,.path-preview-svg{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px)}
  .maze-preview-svg path{fill:none;stroke:#98cdb4;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
  .maze-preview-svg .maze-route{stroke:#25a76f;stroke-width:3.5;stroke-dasharray:5 5;opacity:1}
  .path-preview-svg .path-route{fill:none;stroke-width:4;stroke-linecap:round}
  .path-preview-svg .path-route-good{stroke:#e0a21e}.path-preview-svg .path-route-bad{stroke:#d8dde5;stroke-dasharray:5 6}
  .path-preview-svg .path-check{fill:#48b780}.path-preview-svg .path-x{stroke:#ef7f8c;stroke-width:3;stroke-linecap:round}

  .module-card-action{
    grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:7px;
    color:var(--module-accent);font-size:10px;font-weight:950;letter-spacing:.01em
  }
  .module-card-action>span{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:var(--module-soft);font-size:12px}

  .module-card .module-select-state{
    right:14px;top:14px;background:var(--module-accent)!important;color:#fff!important;padding:6px 9px!important;z-index:5!important
  }
  .module-card.is-selected .module-status{opacity:.92}

  /* The settings under the selected module should read as one context panel,
     not a second row of similarly coloured activity cards. */
  .quick-start-pro{
    margin-top:22px!important;padding:24px!important;border:1px solid #dfe8f1!important;border-radius:22px!important;
    background:#fbfdff!important;box-shadow:0 8px 22px rgba(56,87,119,.045)!important
  }
  .quick-start-head{padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid #edf2f6}
  .quick-start-head .section-eyebrow{color:#2d69f6!important}
  .quick-start-head h3{font-size:21px!important;color:#173b67!important}
  .quick-grid{gap:12px!important}
  .quick-grid .quick-card{
    background:#fff!important;border:1px solid #dce6f0!important;box-shadow:none!important;border-radius:17px!important;min-height:94px!important;
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important
  }
  .quick-grid .quick-card:hover{transform:translateY(-2px)!important;border-color:#9dbcf7!important;box-shadow:0 9px 18px rgba(48,84,122,.07)!important}
  .quick-grid .quick-card.primary-card{background:#fff!important;border-color:#9dbcf7!important}
  .quick-grid .quick-number{background:#edf4ff!important;color:#2d69f6!important;box-shadow:none!important}
  .quick-grid .quick-card b{color:#27496e!important}
  .quick-grid .quick-card small{color:#7c8fa3!important}

  /* Distinct contextual panels for not-yet-available modules. */
  .future-note{margin-top:22px!important}
  .future-module-showcase{
    --future-accent:#25a76f;--future-soft:#ecfaf3;--future-border:#cce9da;
    display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:26px;align-items:center;
    padding:26px 28px;border:1px solid var(--future-border);border-radius:24px;background:#fff;
    box-shadow:0 10px 24px rgba(57,91,124,.055);overflow:hidden;position:relative
  }
  .future-module-showcase.path{--future-accent:#d99c12;--future-soft:#fff8df;--future-border:#efdda9}
  .future-showcase-copy{position:relative;z-index:2}
  .future-module-kicker{color:var(--future-accent)!important}
  .future-module-showcase h3{margin:5px 0 7px;font-size:25px;color:#173b67;letter-spacing:-.55px}
  .future-module-showcase p{margin:0;max-width:650px;font-size:12px;line-height:1.6;color:#6e8398}
  .future-feature-label{display:block;margin-top:18px;color:#7890a6;font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}
  .future-feature-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
  .future-feature-list span{padding:7px 10px;border-radius:999px;background:var(--future-soft);color:var(--future-accent);font-size:9px;font-weight:900}
  .future-availability{display:inline-flex;margin-top:16px;padding:7px 10px;border-radius:10px;background:#f5f7fa;color:#7a8b9d;font-size:9px;font-weight:850}
  .future-showcase-visual{
    position:relative;height:180px;border-radius:22px;background:var(--future-soft);border:1px solid var(--future-border);overflow:hidden
  }
  .future-showcase-visual .module-start-icon{width:48px;height:48px;left:16px;bottom:16px}.future-showcase-visual .module-goal-icon{width:48px;height:48px;right:16px;top:16px}
  .future-showcase-visual svg{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
  .future-showcase-visual .maze-preview-svg path{stroke-width:8}.future-showcase-visual .maze-preview-svg .maze-route{stroke-width:4}
  .future-showcase-visual .path-preview-svg .path-route{stroke-width:5}

  @media (max-width:1050px){
    .module-grid-v527d{grid-template-columns:1fr!important}
    .module-card{grid-template-columns:minmax(0,1fr) 190px!important;min-height:205px!important}
    .module-visual{height:128px}
    .future-module-showcase{grid-template-columns:1fr 280px}
  }
  @media (max-width:720px){
    .module-card{grid-template-columns:1fr!important;min-height:auto!important}
    .module-visual{height:120px;grid-row:auto}.module-card-action{margin-top:2px}
    .future-module-showcase{grid-template-columns:1fr;padding:20px}.future-showcase-visual{height:155px}
  }
}


/* v5.27e — audience strip redesign: distinct design language from module cards */
.audience-strip{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.audience-strip > div{
  position:relative;
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  grid-template-areas:
    "tag tag"
    "icon text"!important;
  align-items:center!important;
  gap:12px 12px!important;
  min-height:112px;
  padding:16px 16px 16px!important;
  border:1px solid #dde8f2!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 10px 24px rgba(55,90,125,.055)!important;
  overflow:hidden;
}
.audience-strip > div::before{
  grid-area:tag;
  align-self:start;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:5px 10px;
  border-radius:999px;
  font-size:9px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.audience-strip > div::after{
  content:"";
  position:absolute;
  right:-18px;
  bottom:-22px;
  width:86px;
  height:86px;
  border-radius:50%;
  opacity:.75;
}
.audience-strip > div > .audience-icon{
  grid-area:icon;
  width:52px!important;
  height:52px!important;
  border-radius:18px!important;
  font-size:20px!important;
  border:1px solid rgba(36,67,96,.09);
  background:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8), 0 6px 14px rgba(65,92,122,.06);
}
.audience-strip > div > span:last-child{grid-area:text; position:relative; z-index:2}
.audience-strip b{display:block; margin-bottom:4px; font-size:14px!important; color:#23415f!important; letter-spacing:-.2px}
.audience-strip small{display:block; margin-top:0!important; font-size:11px!important; line-height:1.45; color:#6e849b!important}

.audience-strip > div:nth-child(1){border-color:#d9e4ff!important; background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%)!important}
.audience-strip > div:nth-child(1)::before{content:"У дома"; background:#eef1ff; color:#6574d6}
.audience-strip > div:nth-child(1)::after{background:#eef2ff}
.audience-strip > div:nth-child(1) .audience-icon{color:#6a79db!important; background:#f6f8ff!important}

.audience-strip > div:nth-child(2){border-color:#e0ece8!important; background:linear-gradient(180deg,#ffffff 0%,#fbfdfc 100%)!important}
.audience-strip > div:nth-child(2)::before{content:"За клас и група"; background:#edf7f3; color:#4d9873}
.audience-strip > div:nth-child(2)::after{background:#ebf7f1}
.audience-strip > div:nth-child(2) .audience-icon{color:#4f9b75!important; background:#f4fbf7!important}

.audience-strip > div:nth-child(3){border-color:#f1e4cf!important; background:linear-gradient(180deg,#ffffff 0%,#fffdf9 100%)!important}
.audience-strip > div:nth-child(3)::before{content:"Различни възрасти"; background:#fff4dd; color:#c08a25}
.audience-strip > div:nth-child(3)::after{background:#fff3d3}
.audience-strip > div:nth-child(3) .audience-icon{color:#cf9426!important; background:#fff9eb!important}

.audience-strip > div:nth-child(4){border-color:#eadfec!important; background:linear-gradient(180deg,#ffffff 0%,#fefbff 100%)!important}
.audience-strip > div:nth-child(4)::before{content:"Готово за A4"; background:#f4ecfb; color:#9a66b7}
.audience-strip > div:nth-child(4)::after{background:#f5ecfb}
.audience-strip > div:nth-child(4) .audience-icon{color:#9d69ba!important; background:#fbf6ff!important}

@media (max-width: 1100px){
  .audience-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width: 720px){
  .audience-strip{grid-template-columns:1fr!important}
  .audience-strip > div{min-height:auto}
}


/* v5.27f — future modules added from playful design board */
@media screen {
  .module-grid-v527d{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
  .module-card{min-height:224px!important;padding:18px!important;grid-template-columns:minmax(0,1fr) 118px!important;gap:12px 14px!important}
  .module-card-copy>small{max-width:none!important}
  .module-visual{height:126px!important}
  .module-title-stack b{font-size:17px!important}
  .module-symbol{width:44px;height:44px;flex-basis:44px;font-size:20px}
  .module-symbol-picturewords,.module-symbol-math{font-size:14px!important;letter-spacing:-.04em}
  .module-status{font-size:8px}
  .module-meta-line{padding-top:10px!important}
  .module-card-action{font-size:9px!important}

  .module-picturewords{--module-accent:#ec6f63;--module-soft:#fff0ed;--module-border:#f4c2b9}
  .module-coloring{--module-accent:#b06fe6;--module-soft:#f4eaff;--module-border:#dcc4f6}
  .module-connect{--module-accent:#4ab8b0;--module-soft:#e8fbfa;--module-border:#b8ece8}
  .module-math{--module-accent:#5f7bea;--module-soft:#eef2ff;--module-border:#cad6ff}
  .module-differences{--module-accent:#ef8fab;--module-soft:#fff0f5;--module-border:#f6cad8}

  .module-visual-picturewords,.module-visual-math,.module-visual-differences,.module-visual-coloring{display:grid;place-items:center}
  .module-visual-picturewords{grid-template-columns:1fr 1fr;gap:8px;padding:12px}
  .pw-card{width:100%;height:78px;border-radius:18px;background:#fff;border:1px solid rgba(30,41,59,.08);display:grid;place-items:center;box-shadow:0 8px 16px rgba(68,92,122,.08)}
  .pw-card img{width:44px;height:44px;object-fit:contain}
  .pw-card-letters{grid-template-columns:1fr 1fr;gap:7px;padding:0 10px}
  .pw-card-letters span{display:grid;place-items:center;width:100%;height:44px;border-radius:12px;background:#fff6d8;color:#c77c00;font-weight:950;font-size:20px}

  .module-visual-coloring{position:relative;padding:14px}
  .coloring-sheet{width:78px;height:92px;background:#fff;border-radius:14px;border:1px solid rgba(30,41,59,.08);display:grid;place-items:center;box-shadow:0 8px 18px rgba(68,92,122,.08)}
  .coloring-sheet img{width:44px;height:44px;object-fit:contain}
  .color-pencil{position:absolute;right:16px;bottom:16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#b06fe6;font-size:18px;box-shadow:0 8px 16px rgba(68,92,122,.08)}

  .module-visual-connect{display:grid;place-items:center}
  .connect-preview-svg{width:100%;height:100%;padding:12px;box-sizing:border-box}
  .connect-preview-svg circle{fill:#69c7c0}
  .connect-preview-svg path{fill:none;stroke:#4ab8b0;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4 5}

  .module-visual-math{grid-template-columns:44px auto 44px;gap:8px;padding:12px}
  .module-visual-math img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:12px;padding:5px;box-shadow:0 8px 16px rgba(68,92,122,.08)}
  .math-plus{font-weight:950;color:#5f7bea;font-size:22px}

  .module-visual-differences{grid-template-columns:1fr 1fr;gap:10px;padding:12px}
  .diff-card{display:grid;place-items:center;height:84px;border-radius:18px;background:#fff;border:1px solid rgba(30,41,59,.08);box-shadow:0 8px 16px rgba(68,92,122,.08)}
  .diff-card img{width:44px;height:44px;object-fit:contain}
  .diff-card.offset{transform:translateY(-4px)}

  .future-module-showcase.picture-words{--future-accent:#ec6f63;--future-soft:#fff0ed;--future-border:#f4c2b9}
  .future-module-showcase.coloring{--future-accent:#b06fe6;--future-soft:#f4eaff;--future-border:#dcc4f6}
  .future-module-showcase.connect-dots{--future-accent:#4ab8b0;--future-soft:#e8fbfa;--future-border:#b8ece8}
  .future-module-showcase.math{--future-accent:#5f7bea;--future-soft:#eef2ff;--future-border:#cad6ff}
  .future-module-showcase.differences{--future-accent:#ef8fab;--future-soft:#fff0f5;--future-border:#f6cad8}
  .future-showcase-visual .future-mini{position:absolute;inset:0;display:grid;place-items:center;padding:16px}
  .future-mini-picturewords{grid-template-columns:1fr 1fr;gap:12px}
  .future-mini-picturewords .pw-card{height:96px}
  .future-mini-picturewords .pw-card img{width:54px;height:54px}
  .future-mini-picturewords .pw-card-letters span{height:52px;font-size:24px}
  .future-mini-coloring .coloring-sheet{width:96px;height:112px}
  .future-mini-coloring .coloring-sheet img{width:52px;height:52px}
  .future-mini-coloring .color-pencil{right:26px;bottom:24px;width:46px;height:46px;font-size:21px}
  .future-showcase-visual .connect-preview-svg{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
  .future-mini-math{grid-template-columns:54px auto 54px;gap:12px}
  .future-mini-math img{width:54px;height:54px;object-fit:contain;background:#fff;border-radius:14px;padding:6px;box-shadow:0 8px 16px rgba(68,92,122,.08)}
  .future-mini-math .math-plus{font-size:28px}
  .future-mini-differences{grid-template-columns:1fr 1fr;gap:14px}
  .future-mini-differences .diff-card{height:100px}
  .future-mini-differences .diff-card img{width:52px;height:52px}

  @media (max-width: 1300px){
    .module-grid-v527d{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  }
  @media (max-width: 720px){
    .module-grid-v527d{grid-template-columns:1fr!important}
    .module-card{grid-template-columns:1fr!important;min-height:auto!important}
  }
}


/* v5.27g — audience strip neutral redesign to avoid color matching with modules */
.audience-strip{
  gap:16px!important;
}
.audience-strip > div{
  grid-template-columns:56px minmax(0,1fr)!important;
  grid-template-areas:
    "tag tag"
    "icon text"!important;
  gap:14px 14px!important;
  min-height:118px!important;
  padding:18px 18px 18px!important;
  border:1px solid #dde7f0!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
  box-shadow:0 10px 26px rgba(55,90,125,.05)!important;
}
.audience-strip > div::before{
  min-height:26px;
  padding:6px 12px;
  border-radius:999px;
  background:#eef4fb!important;
  color:#5e7896!important;
  border:1px solid #dde8f4;
  font-size:9.5px!important;
  letter-spacing:.06em;
}
.audience-strip > div::after{
  right:14px;
  bottom:12px;
  width:74px;
  height:74px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(234,241,249,.9),rgba(246,249,252,.4))!important;
  opacity:1;
  transform:rotate(10deg);
}
.audience-strip > div > .audience-icon{
  width:56px!important;
  height:56px!important;
  border-radius:18px!important;
  color:#3f5f83!important;
  background:linear-gradient(180deg,#fffdfa 0%,#f8fafc 100%)!important;
  border:1px solid #dbe5ee!important;
  box-shadow:0 8px 18px rgba(65,92,122,.06), inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.audience-strip b{color:#264363!important;font-size:15px!important}
.audience-strip small{font-size:11px!important;line-height:1.45;color:#6c8297!important;max-width:22ch}

/* remove previous per-card color mapping */
.audience-strip > div:nth-child(1),
.audience-strip > div:nth-child(2),
.audience-strip > div:nth-child(3),
.audience-strip > div:nth-child(4){
  border-color:#dde7f0!important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
}
.audience-strip > div:nth-child(1)::after,
.audience-strip > div:nth-child(2)::after,
.audience-strip > div:nth-child(3)::after,
.audience-strip > div:nth-child(4)::after{
  background:linear-gradient(180deg,rgba(234,241,249,.92),rgba(246,249,252,.45))!important;
}
.audience-strip > div:nth-child(1) .audience-icon,
.audience-strip > div:nth-child(2) .audience-icon,
.audience-strip > div:nth-child(3) .audience-icon,
.audience-strip > div:nth-child(4) .audience-icon{
  color:#3f5f83!important;
  background:linear-gradient(180deg,#fffdfa 0%,#f8fafc 100%)!important;
}

/* subtle individual identity through structure, not color */
.audience-strip > div:nth-child(1)::before{content:"У дома"}
.audience-strip > div:nth-child(2)::before{content:"За клас и група"}
.audience-strip > div:nth-child(3)::before{content:"Различни възрасти"}
.audience-strip > div:nth-child(4)::before{content:"Готово за A4"}
.audience-strip > div:nth-child(1){background-image:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%), radial-gradient(circle at 84% 78%, rgba(228,235,245,.8) 0 18px, transparent 19px)!important}
.audience-strip > div:nth-child(2){background-image:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%), linear-gradient(90deg, transparent 0 82%, rgba(233,239,246,.75) 82% 83%, transparent 83%)!important}
.audience-strip > div:nth-child(3){background-image:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%), radial-gradient(circle at 88% 80%, rgba(239,242,246,.8) 0 18px, transparent 19px)!important}
.audience-strip > div:nth-child(4){background-image:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%), linear-gradient(135deg, transparent 0 74%, rgba(236,241,246,.85) 74% 100%)!important}

@media (max-width: 720px){
  .audience-strip > div{min-height:auto!important;padding:16px!important}
  .audience-strip small{max-width:none}
}


/* v5.29 print chooser */
.print-appearance-chip{border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:999px;min-height:40px;padding:0 12px;font-weight:700;white-space:nowrap}
.print-appearance-chip[data-mode="color"]{background:#fff7ed;border-color:#fdba74;color:#b45309}
.print-style-modal{position:fixed;inset:0;background:rgba(15,23,42,.34);display:grid;place-items:center;z-index:1200;padding:20px}
.print-style-dialog{position:relative;width:min(560px,100%);background:#fff;border:1px solid #dbe5f0;border-radius:24px;box-shadow:0 24px 80px rgba(15,23,42,.18);padding:24px}
.modal-close-button{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:999px;border:1px solid #d6deeb;background:#fff;font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer}
.dialog-kicker{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#eef4ff;color:#3159c9;font-size:12px;font-weight:700;margin-bottom:12px}
.print-style-dialog h3{margin:0 0 8px;color:#16346e;font-size:28px;line-height:1.1}
.dialog-copy{margin:0 0 18px;color:#64748b;line-height:1.55}
.print-style-options{display:grid;gap:12px}
.print-style-option{display:block;cursor:pointer}
.print-style-option input{position:absolute;opacity:0;pointer-events:none}
.print-style-card{display:block;border:1.5px solid #dbe5f0;border-radius:18px;padding:16px 18px;background:#fff}
.print-style-card b{display:block;color:#17305d;font-size:17px;margin-bottom:6px}
.print-style-card small{display:block;color:#64748b;line-height:1.45}
.print-style-option input:checked + .print-style-card{border-color:#6d93ff;box-shadow:0 0 0 4px rgba(109,147,255,.12);background:#f8fbff}
.print-style-option.is-default .print-style-card::after{content:"По подразбиране";display:inline-flex;margin-top:12px;padding:4px 8px;border-radius:999px;background:#e8f7ee;color:#15803d;font-size:11px;font-weight:700}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.ghost-action,.primary-action{min-height:42px;border-radius:12px;padding:0 16px;font-weight:700;cursor:pointer}
.ghost-action{background:#fff;border:1px solid #d6deeb;color:#334155}
.primary-action{background:#2f66f3;border:1px solid #2f66f3;color:#fff}
body.modal-open{overflow:hidden}


/* v5.29a — print dialog visibility + selection hotfix */
.print-style-modal[hidden]{display:none!important}
.print-style-modal.is-open{display:grid!important}
.print-style-option{appearance:none;width:100%;padding:0;margin:0;border:0;background:transparent;text-align:left;cursor:pointer;min-height:0}
.print-style-option:focus-visible{outline:3px solid rgba(47,102,243,.28);outline-offset:3px;border-radius:18px}
.print-style-option .print-style-card{width:100%;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease,transform .15s ease}
.print-style-option:hover .print-style-card{border-color:#abc0ff;background:#fbfdff}
.print-style-option.is-selected .print-style-card{border-color:#6d93ff;box-shadow:0 0 0 4px rgba(109,147,255,.12);background:#f8fbff}
.print-style-default-badge{display:inline-flex;margin-top:12px;padding:4px 8px;border-radius:999px;background:#e8f7ee;color:#15803d;font-size:11px;font-weight:700}
.print-style-option.is-default .print-style-card::after{content:none!important}

/* ============================================================
   v5.31 — Mobile-friendly pass
   Screen-only. Desktop and print geometry remain untouched.
   ============================================================ */
@media screen and (max-width:720px){
  html,body{max-width:100%;overflow-x:hidden}
  body{font-size:15px;-webkit-text-size-adjust:100%}
  button,select,input,summary{touch-action:manipulation}
  button,select,input[type=text],input[type=number]{min-height:44px}

  /* Compact app header */
  .product-header{
    width:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px 10px!important;
    padding:10px 12px 9px!important;
    border-radius:0 0 18px 18px!important;
  }
  .brand-lockup{min-width:0!important;justify-self:start!important;padding:0!important}
  .brand-mark{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:13px!important}
  .brand-copy{min-width:0!important}.brand-title{font-size:17px!important;white-space:nowrap}.brand-sub{display:none!important}
  .header-actions{display:none!important}
  .top-nav{
    grid-column:1/-1!important;
    width:100%!important;
    display:flex!important;
    gap:6px!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:2px 0 1px!important;
  }
  .top-nav::-webkit-scrollbar{display:none}
  .top-nav button{flex:0 0 auto!important;min-height:40px!important;padding:0 14px!important;font-size:11px!important}

  /* Home */
  body.mode-home #homeScreen{margin-top:12px!important;padding:0 10px 28px!important}
  .home-pro{gap:12px!important}
  .home-hero-pro{min-height:0!important;border-radius:22px!important}
  .hero-copy{padding:26px 18px 24px!important}
  .hero-eyebrow{font-size:9px!important;padding:7px 10px!important}
  .hero-copy h1{font-size:34px!important;line-height:1.02!important;letter-spacing:-1.5px!important;margin-top:14px!important}
  .hero-copy p{font-size:14px!important;line-height:1.5!important;margin-top:14px!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;margin-top:20px!important}
  .hero-actions button{width:100%!important;min-height:50px!important}
  .hero-trust{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;margin-top:16px!important}
  .hero-visual{display:none!important}

  .audience-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .audience-strip>div{
    min-width:0!important;min-height:118px!important;padding:13px!important;border-radius:18px!important;
    grid-template-columns:42px minmax(0,1fr)!important;gap:9px!important;
  }
  .audience-strip>div::before{font-size:8px!important;min-height:22px!important;padding:5px 8px!important}
  .audience-strip>div>.audience-icon{width:42px!important;height:42px!important;border-radius:13px!important;font-size:17px!important}
  .audience-strip b{font-size:12px!important}.audience-strip small{font-size:9.5px!important;line-height:1.35!important}

  .home-card,.home-continue-card{padding:18px 14px!important;border-radius:20px!important}
  .home-card-head{align-items:flex-start!important;gap:10px!important}.home-card-head h2{font-size:22px!important;line-height:1.1!important}
  .section-helper{font-size:11px!important;line-height:1.4!important}

  /* Keep modules compact instead of making each card huge */
  .module-grid-v527d{grid-template-columns:1fr!important;gap:10px!important}
  .module-card{
    grid-template-columns:minmax(0,1fr) 96px!important;
    min-height:172px!important;
    padding:15px!important;
    border-radius:19px!important;
    column-gap:10px!important;
  }
  .module-card-copy{min-width:0!important}.module-card-headline{gap:8px!important}.module-symbol{width:38px!important;height:38px!important;flex:0 0 38px!important}
  .module-title-stack b{font-size:17px!important}.module-card-copy>small{font-size:11px!important;line-height:1.4!important}
  .module-meta-line{gap:5px!important;flex-wrap:wrap!important}.module-meta-line span{font-size:9px!important}
  .module-visual{width:96px!important;min-width:96px!important;max-width:96px!important;align-self:center!important}
  .module-card-action{margin-top:10px!important;font-size:10px!important}

  .quick-start-pro{padding:16px 12px!important;border-radius:18px!important}
  .quick-start-head{align-items:flex-start!important;gap:8px!important}
  .quick-grid{grid-template-columns:1fr!important;gap:8px!important}
  .quick-grid .quick-card{min-height:78px!important;padding:12px!important;border-radius:14px!important}
  .quick-number{width:38px!important;height:38px!important;border-radius:11px!important}
  .theme-row-pro{align-items:flex-start!important}.theme-strip{width:100%!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:3px!important;scrollbar-width:none}
  .theme-strip::-webkit-scrollbar{display:none}.theme-strip button{flex:0 0 auto!important}
  .home-recent-grid{grid-template-columns:1fr!important}

  /* Configurator */
  body.mode-config #workspace{padding:0 8px 32px!important;margin-top:8px!important}
  body.mode-config #configPanel{width:100%!important;max-width:none!important;border-radius:20px!important}
  body.mode-config #configPanel .config-head{padding:18px 15px 14px!important;grid-template-columns:1fr auto!important}
  body.mode-config #configPanel .config-head h2{font-size:22px!important;line-height:1.15!important}
  .creation-steps{margin:0!important;padding:0 12px 14px!important;justify-content:flex-start!important;overflow-x:auto!important;scrollbar-width:none}
  .creation-steps::-webkit-scrollbar{display:none}.creation-steps em{width:26px!important;flex:0 0 26px!important}
  body.mode-config #configPanel .config-scroll-body{padding:14px 12px 16px!important}
  body.mode-config #configPanel .creator-basics,.words-basics{grid-template-columns:1fr!important;gap:8px!important}
  .quick-create-row,.words-primary-actions{grid-template-columns:1fr!important}
  .selected-words,.words-selected-preview{gap:7px!important}
  .picture-grid,.words-picture-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .picture-grid .card,.words-picture-grid .words-card{min-height:92px!important}
  .picture-grid .card img,.words-picture-grid .words-card img{width:68px!important;height:68px!important}
  body.mode-config #configPanel .config-footer{padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;border-radius:0 0 20px 20px!important}

  /* Result workspace */
  body.mode-result #workspace{padding:0 6px 30px!important;margin-top:5px!important}
  .pro-commandbar{
    top:4px!important;
    padding:7px!important;
    gap:6px!important;
    border-radius:14px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .workspace-context{display:none!important}
  .workspace-left,.workspace-right{width:100%!important;min-width:0!important;gap:6px!important}
  .workspace-left{
    display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none;padding-bottom:2px!important;
  }
  .workspace-left::-webkit-scrollbar,.workspace-right::-webkit-scrollbar{display:none}
  .workspace-left>button,.workspace-left>details{flex:0 0 auto!important}
  .workspace-right{display:flex!important;flex-wrap:wrap!important;overflow:visible!important;padding-top:6px!important;border-top:1px solid #e8eef4!important;justify-content:flex-start!important}
  .workspace-right>.save-direct,.workspace-right>.command-menu{flex:0 0 auto!important}
  .toolbar-divider{display:none!important}
  .command-print{order:10;width:100%!important;min-width:0!important;display:grid!important;grid-template-columns:minmax(90px,.8fr) minmax(0,1fr) auto!important;gap:6px!important}
  .command-print select{width:100%!important;min-width:0!important}
  .print-preflight{display:none!important}
  .print-appearance-chip{min-width:0!important;padding:0 8px!important;font-size:10px!important;overflow:hidden;text-overflow:ellipsis}
  .print-main{padding:0 12px!important;white-space:nowrap!important}

  .result-panel.viewer{padding:7px!important;border-radius:15px!important}
  .result-panel .viewerbar{padding:4px 3px 10px!important}.viewer-heading b{font-size:14px!important}.viewer-heading small{font-size:10px!important;line-height:1.35!important}
  .result-panel .worksheet-wrap{
    padding:6px!important;border-radius:12px!important;overflow-x:auto!important;overflow-y:visible!important;-webkit-overflow-scrolling:touch;
  }
  .result-panel .worksheet{width:100%!important;max-width:100%!important;min-width:0!important;box-shadow:0 10px 24px rgba(44,73,101,.12)!important}
  .worksheet .alphabet-strip{font-size:9px!important;gap:1px!important}
  .worksheet .print-head h2{font-size:24px!important}.worksheet .print-head p{font-size:12px!important}
  .worksheet .clue-sections{gap:8px!important}.worksheet .clue-group h3{font-size:13px!important}
  .worksheet-footer-meta{font-size:10px!important}

  /* Full-screen drawers */
  body.mode-result #configPanel,#wordsDrawer{
    top:0!important;right:0!important;bottom:0!important;left:0!important;
    width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;
    border-radius:0!important;border-left:0!important;
  }
  body.mode-result #configPanel .config-head,.words-drawer-head{padding:14px 13px 12px!important;gap:8px!important}
  body.mode-result #configPanel .config-head h2,.words-drawer-head h2{font-size:20px!important}.words-drawer-head p{font-size:10.5px!important}
  .drawer-close-button{width:42px!important;height:42px!important;padding:0!important;flex:0 0 42px!important}.drawer-close-button span{display:none!important}
  body.mode-result #configPanel .config-scroll-body,.words-drawer-body{padding:12px 10px 104px!important}
  body.mode-result #configPanel .config-footer,.words-drawer-footer{
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;
    padding:9px 10px calc(9px + env(safe-area-inset-bottom))!important;
  }
  .words-drawer-footer button,body.mode-result #configPanel .config-footer button{min-height:48px!important}

  /* Project library */
  .project-dialog{width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;padding:16px 12px!important;border-radius:20px!important;overflow-y:auto!important}
  .project-dialog-head{align-items:flex-start!important}.project-dialog-head h3{font-size:20px!important}
  .save-row{grid-template-columns:1fr!important;gap:8px!important;padding:10px!important}
  .project-row-rich{grid-template-columns:54px minmax(0,1fr)!important;gap:9px!important;padding:10px!important}
  .project-row-rich .project-actions{grid-column:1/-1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
  .project-actions button{min-height:40px!important}

  /* Print chooser as a phone bottom-sheet */
  .print-style-modal{align-items:end!important;padding:10px 8px 0!important}
  .print-style-dialog{
    width:100%!important;max-height:92dvh!important;overflow-y:auto!important;
    border-radius:24px 24px 0 0!important;padding:20px 14px calc(14px + env(safe-area-inset-bottom))!important;
  }
  .print-style-dialog h3{font-size:23px!important;padding-right:36px!important}.dialog-copy{font-size:13px!important}
  .print-style-card{padding:14px!important}.print-style-card b{font-size:16px!important}.print-style-card small{font-size:11px!important}
  .dialog-actions{display:grid!important;grid-template-columns:1fr 1.25fr!important;gap:8px!important}.dialog-actions button{width:100%!important;min-height:48px!important}
}

@media screen and (max-width:420px){
  .hero-copy h1{font-size:31px!important}
  .audience-strip{grid-template-columns:1fr!important}
  .audience-strip>div{min-height:auto!important}
  .module-card{grid-template-columns:minmax(0,1fr) 82px!important;min-height:168px!important}.module-visual{width:82px!important;min-width:82px!important;max-width:82px!important}
  .picture-grid,.words-picture-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .command-print{grid-template-columns:minmax(84px,.8fr) 1fr!important}.print-appearance-chip{display:none!important}.print-main{width:100%!important}
  .worksheet .alphabet-strip{font-size:8px!important}
}


/* ============================================================
   v5.31a — Mobile words drawer polish
   Compact controls, wrapped categories, semantic category colours.
   ============================================================ */

/* The old helper under “Брой думи” added height without adding value. */
.words-basics .basic-box:first-child::after{
  content:none!important;
  display:none!important;
}

/* Compact the three task-definition controls. */
.words-basics .basic-box{
  padding:7px 9px!important;
  min-height:0!important;
}
.words-basics .basic-box label{
  margin-bottom:4px!important;
  line-height:1.1!important;
}
.words-basics .basic-box select{
  min-height:36px!important;
  height:36px!important;
  padding-top:0!important;
  padding-bottom:0!important;
}

/* Category filters wrap naturally instead of becoming a horizontal scroller. */
.words-cat-pills{
  display:flex!important;
  flex-wrap:wrap!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
  scrollbar-width:none!important;
  row-gap:6px!important;
}
.words-cat-pills::-webkit-scrollbar{display:none!important}
.words-cat-pills button{
  flex:0 0 auto!important;
  min-height:30px!important;
}

/* One stable pastel surface per semantic category. No more nth-child/random look. */
.words-picture-grid .words-card[data-category="Животни"]{background:#fff2df!important;border-color:#f3d7ad!important}
.words-picture-grid .words-card[data-category="Храна"]{background:#fff0ef!important;border-color:#f2cfcb!important}
.words-picture-grid .words-card[data-category="Природа"]{background:#eaf8ef!important;border-color:#c9e8d4!important}
.words-picture-grid .words-card[data-category="Превоз"]{background:#eaf3ff!important;border-color:#cbdcf3!important}
.words-picture-grid .words-card[data-category="У дома"]{background:#f3edff!important;border-color:#ddd0f5!important}
.words-picture-grid .words-card[data-category="Учене"]{background:#eaf8fb!important;border-color:#c8e7ec!important}
.words-picture-grid .words-card[data-category="Игри"]{background:#fff0f7!important;border-color:#f1cfe0!important}
.words-picture-grid .words-card[data-category="Облекло"]{background:#f4f1ff!important;border-color:#dcd5f5!important}
.words-picture-grid .words-card[data-category="Тяло"]{background:#fff3e9!important;border-color:#f0d8c3!important}

/* Selection should keep the category identity and only add a clear selection ring. */
.words-picture-grid .words-card.sel{
  border-color:#5c8cf5!important;
  box-shadow:0 0 0 2px #6b98ff inset,0 8px 18px rgba(45,105,246,.10)!important;
}

@media screen and (max-width:720px){
  /* Keep the 3 primary controls side-by-side on phones; the cards are now compact enough. */
  .words-basics{
    grid-template-columns:.78fr 1.22fr 1fr!important;
    gap:6px!important;
  }
  .words-basics .basic-box{
    padding:6px 7px!important;
    border-radius:12px!important;
  }
  .words-basics .basic-box label{
    font-size:8px!important;
    margin-bottom:3px!important;
    white-space:nowrap!important;
  }
  .words-basics .basic-box select{
    min-height:34px!important;
    height:34px!important;
    padding:0 7px!important;
    font-size:11px!important;
    border-radius:9px!important;
  }
  .words-cat-pills{
    padding:0 10px 8px!important;
    gap:5px!important;
  }
  .words-cat-pills button{
    min-height:29px!important;
    padding:0 9px!important;
    font-size:10px!important;
  }
  .words-picture-grid .words-card{
    min-height:88px!important;
  }
  .words-picture-grid .words-card img{
    width:64px!important;
    height:64px!important;
  }
}

@media screen and (max-width:420px){
  /* Very narrow phones get a slightly safer split without reverting to a tall single column. */
  .words-basics{
    grid-template-columns:.82fr 1.18fr 1fr!important;
  }
  .words-basics .basic-box{
    padding:6px!important;
  }
  .words-basics .basic-box select{
    font-size:10px!important;
    padding:0 5px!important;
  }
}

/* ============================================================
   v5.31b — Mobile drawer final polish
   - Category filters: exact 5 x 2 grid on phones
   - Worksheet settings: unified, cleaner hierarchy
   ============================================================ */

@media screen and (max-width:720px){
  /* Ten category filters = two tidy rows of five. */
  #wordsDrawer .words-cat-pills{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    padding:0 0 10px!important;
    margin:8px 0 0!important;
    overflow:visible!important;
    justify-content:stretch!important;
  }
  #wordsDrawer .words-cat-pills button{
    width:100%!important;
    min-width:0!important;
    min-height:31px!important;
    height:31px!important;
    padding:0 4px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:nowrap!important;
    font-size:9.5px!important;
    line-height:1!important;
    border-radius:999px!important;
  }

  /* Give the settings content one calm, centered column. */
  body.mode-result #configPanel .config-scroll-body{
    padding:16px 16px 110px!important;
    background:#f6f9fc!important;
  }
  body.mode-result #configPanel .config-scroll-body > .config-basics-main,
  body.mode-result #configPanel .config-scroll-body > #advancedConfig{
    width:100%!important;
    max-width:620px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Title is a clean field, not a large pink block. */
  body.mode-result #configPanel .config-basics-main .title-box{
    position:relative!important;
    padding:12px 13px 13px!important;
    margin:0 0 10px!important;
    border:1px solid #dce6ef!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 4px 14px rgba(44,73,101,.035)!important;
  }
  body.mode-result #configPanel .config-basics-main .title-box::before{
    content:"";
    position:absolute;
    left:0;
    top:13px;
    bottom:13px;
    width:3px;
    border-radius:0 3px 3px 0;
    background:#6b98ff;
  }
  body.mode-result #configPanel .config-basics-main .title-box label{
    display:block!important;
    margin:0 0 6px!important;
    padding-left:3px!important;
    color:#64748b!important;
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.08em!important;
  }
  body.mode-result #configPanel .config-basics-main .title-box input{
    min-height:42px!important;
    height:42px!important;
    border:1px solid #d4e0ea!important;
    border-radius:11px!important;
    background:#fbfdff!important;
    padding:0 12px!important;
    color:#294763!important;
    font-size:12px!important;
  }

  /* Page and content sections now share the same card language. */
  body.mode-result #configPanel #advancedConfig{
    display:grid!important;
    gap:10px!important;
  }
  body.mode-result #configPanel #advancedConfig .settings-section{
    margin:0!important;
    padding:13px!important;
    border:1px solid #dce6ef!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 4px 14px rgba(44,73,101,.035)!important;
  }
  body.mode-result #configPanel #advancedConfig .settings-section-head{
    margin:0 0 10px!important;
    align-items:flex-start!important;
  }
  body.mode-result #configPanel #advancedConfig .settings-section-head b{
    color:#294763!important;
    font-size:13px!important;
    line-height:1.2!important;
  }
  body.mode-result #configPanel #advancedConfig .settings-section-head small{
    margin-top:4px!important;
    color:#8293a5!important;
    font-size:9.5px!important;
    line-height:1.35!important;
  }
  body.mode-result #configPanel #advancedConfig .settings-page-grid{
    margin:0!important;
    padding:0!important;
  }
  body.mode-result #configPanel #advancedConfig .settings-page-grid .basic-box{
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  body.mode-result #configPanel #advancedConfig .settings-page-grid .basic-box label{
    display:block!important;
    margin:0 0 5px!important;
    color:#74879a!important;
    font-size:8.5px!important;
    font-weight:800!important;
    letter-spacing:.07em!important;
  }
  body.mode-result #configPanel #advancedConfig #printOrientation{
    min-height:42px!important;
    height:42px!important;
    border:1px solid #d4e0ea!important;
    border-radius:11px!important;
    background:#fbfdff!important;
    padding:0 12px!important;
    color:#294763!important;
    font-size:12px!important;
  }

  /* One grouped settings list; colour is an accent, not a full background. */
  body.mode-result #configPanel .settings-toggle-list{
    display:block!important;
    margin:0!important;
    border:1px solid #e2eaf1!important;
    border-radius:14px!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  body.mode-result #configPanel .setting-toggle{
    position:relative!important;
    min-height:60px!important;
    margin:0!important;
    padding:10px 12px 10px 17px!important;
    border:0!important;
    border-bottom:1px solid #e8eef4!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  body.mode-result #configPanel .setting-toggle:last-child{
    border-bottom:0!important;
  }
  body.mode-result #configPanel .setting-toggle::before{
    content:"";
    position:absolute;
    left:7px;
    top:16px;
    width:3px;
    height:28px;
    border-radius:999px;
    background:#7ba7ff;
  }
  body.mode-result #configPanel .setting-toggle:nth-child(2)::before{background:#f1be45}
  body.mode-result #configPanel .setting-toggle:nth-child(3)::before{background:#5fc19a}
  body.mode-result #configPanel .setting-toggle:hover{background:#fbfdff!important}
  body.mode-result #configPanel .setting-toggle > span b{
    color:#344f6b!important;
    font-size:11.5px!important;
    line-height:1.2!important;
  }
  body.mode-result #configPanel .setting-toggle > span small{
    margin-top:3px!important;
    color:#8495a6!important;
    font-size:9px!important;
    line-height:1.3!important;
  }

  /* Footer feels attached to the form instead of a separate white slab. */
  body.mode-result #configPanel .config-footer{
    padding:10px 16px calc(10px + env(safe-area-inset-bottom))!important;
    border-top:1px solid #dfe8f0!important;
    background:rgba(255,255,255,.97)!important;
    box-shadow:0 -8px 24px rgba(42,72,104,.07)!important;
    backdrop-filter:blur(10px)!important;
  }
  body.mode-result #configPanel .config-footer-actions{
    width:100%!important;
    max-width:620px!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:100px minmax(0,1fr)!important;
    gap:8px!important;
  }
  body.mode-result #configPanel .config-footer-actions button{
    min-height:44px!important;
    height:44px!important;
    border-radius:11px!important;
  }

  /* Nothing technical or decorative should peek below the drawer footer. */
  body.mode-result #configPanel .status,
  body.mode-result #configPanel .asset-note,
  body.mode-result #configPanel .internal-settings-controls{
    display:none!important;
  }
}

@media screen and (max-width:420px){
  #wordsDrawer .words-cat-pills{
    gap:5px!important;
  }
  #wordsDrawer .words-cat-pills button{
    height:30px!important;
    min-height:30px!important;
    padding:0 2px!important;
    font-size:8.7px!important;
    letter-spacing:-.01em!important;
  }
}

/* ============================================================
   v5.31c — Global platform drawer polish
   Desktop + tablet + mobile. These rules intentionally are NOT
   mobile-only: the same visual system applies across the product.
   ============================================================ */
@media screen {
  /* Words drawer — exact 5 × 2 category matrix everywhere. */
  #wordsDrawer .words-cat-pills{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    margin:10px 0 12px!important;
    padding:0!important;
    overflow:visible!important;
    justify-content:stretch!important;
  }
  #wordsDrawer .words-cat-pills button{
    width:100%!important;
    min-width:0!important;
    min-height:34px!important;
    height:34px!important;
    margin:0!important;
    padding:0 6px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:nowrap!important;
    border-radius:999px!important;
    font-size:10.5px!important;
    line-height:1!important;
  }

  /* Settings drawer — one calm surface instead of several coloured blocks. */
  body.mode-result #configPanel .config-scroll-body{
    padding:18px 24px 112px!important;
    background:#f5f8fb!important;
  }
  body.mode-result #configPanel .config-scroll-body > .config-basics-main,
  body.mode-result #configPanel .config-scroll-body > #advancedConfig{
    width:100%!important;
    max-width:650px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body.mode-result #configPanel .config-basics-main{
    display:block!important;
    padding:0!important;
    margin-bottom:12px!important;
    border:0!important;
    background:transparent!important;
  }
  body.mode-result #configPanel .config-basics-main > .basic-box:not(.title-box){
    display:none!important;
  }
  body.mode-result #configPanel .config-basics-main .title-box{
    position:relative!important;
    display:block!important;
    margin:0!important;
    padding:14px 15px 15px!important;
    border:1px solid #dce6ef!important;
    border-radius:17px!important;
    background:#fff!important;
    box-shadow:0 5px 16px rgba(42,72,104,.04)!important;
  }
  body.mode-result #configPanel .config-basics-main .title-box::before{
    content:"";
    position:absolute;
    left:0;
    top:15px;
    bottom:15px;
    width:3px;
    border-radius:0 4px 4px 0;
    background:#6d94f5;
  }
  body.mode-result #configPanel .config-basics-main .title-box label{
    display:block!important;
    margin:0 0 7px!important;
    padding-left:3px!important;
    color:#6f8296!important;
    font-size:9px!important;
    font-weight:900!important;
    letter-spacing:.08em!important;
  }
  body.mode-result #configPanel .config-basics-main .title-box input{
    width:100%!important;
    min-height:43px!important;
    height:43px!important;
    padding:0 12px!important;
    border:1px solid #d4e0ea!important;
    border-radius:11px!important;
    background:#fbfdff!important;
    color:#294763!important;
    font-size:12.5px!important;
    box-shadow:none!important;
  }

  body.mode-result #configPanel #advancedConfig{
    display:grid!important;
    gap:12px!important;
    padding:0!important;
    margin:0 auto!important;
    border:0!important;
    background:transparent!important;
  }
  body.mode-result #configPanel #advancedConfig > summary{
    display:none!important;
  }
  body.mode-result #configPanel #advancedConfig .settings-section{
    margin:0!important;
    padding:15px!important;
    border:1px solid #dce6ef!important;
    border-radius:17px!important;
    background:#fff!important;
    box-shadow:0 5px 16px rgba(42,72,104,.04)!important;
  }
  body.mode-result #configPanel #advancedConfig .settings-section-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin:0 0 11px!important;
    padding:0!important;
  }
  body.mode-result #configPanel #advancedConfig .settings-section-head b{
    display:block!important;
    color:#294763!important;
    font-size:13px!important;
    line-height:1.2!important;
  }
  body.mode-result #configPanel #advancedConfig .settings-section-head small{
    display:block!important;
    margin-top:4px!important;
    max-width:480px!important;
    color:#8192a5!important;
    font-size:9.5px!important;
    line-height:1.4!important;
  }
  body.mode-result #configPanel #advancedConfig .settings-page-grid{
    display:block!important;
    margin:0!important;
    padding:0!important;
  }
  body.mode-result #configPanel #advancedConfig .settings-page-grid .basic-box{
    display:block!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.mode-result #configPanel #advancedConfig .settings-page-grid .basic-box label{
    display:block!important;
    margin:0 0 6px!important;
    color:#708399!important;
    font-size:8.5px!important;
    font-weight:900!important;
    letter-spacing:.07em!important;
  }
  body.mode-result #configPanel #printOrientation{
    width:100%!important;
    min-height:43px!important;
    height:43px!important;
    padding:0 12px!important;
    border:1px solid #d4e0ea!important;
    border-radius:11px!important;
    background:#fbfdff!important;
    color:#294763!important;
    font-size:12.5px!important;
    box-shadow:none!important;
  }

  body.mode-result #configPanel .settings-toggle-list{
    display:block!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid #e2eaf1!important;
    border-radius:14px!important;
    background:#fff!important;
  }
  body.mode-result #configPanel .setting-toggle{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:14px!important;
    min-height:62px!important;
    margin:0!important;
    padding:10px 13px 10px 20px!important;
    border:0!important;
    border-bottom:1px solid #e8eef4!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  body.mode-result #configPanel .setting-toggle:last-child{
    border-bottom:0!important;
  }
  body.mode-result #configPanel .setting-toggle::before{
    content:"";
    position:absolute;
    left:9px;
    top:17px;
    width:3px;
    height:28px;
    border-radius:999px;
    background:#6d94f5;
  }
  body.mode-result #configPanel .setting-toggle:nth-child(2)::before{background:#e9b23f!important}
  body.mode-result #configPanel .setting-toggle:nth-child(3)::before{background:#57b98f!important}
  body.mode-result #configPanel .setting-toggle:hover{background:#fbfdff!important}
  body.mode-result #configPanel .setting-toggle > span b{
    display:block!important;
    color:#344f6b!important;
    font-size:11.5px!important;
    line-height:1.2!important;
  }
  body.mode-result #configPanel .setting-toggle > span small{
    display:block!important;
    margin-top:3px!important;
    color:#8394a6!important;
    font-size:9.2px!important;
    line-height:1.35!important;
  }

  /* Prevent hidden technical controls from leaking below the form. */
  body.mode-result #configPanel .internal-settings-controls,
  body.mode-result #configPanel .asset-note,
  body.mode-result #configPanel .status{
    display:none!important;
  }

  /* Footer belongs visually to the same drawer. */
  body.mode-result #configPanel .config-footer{
    padding:11px 24px calc(11px + env(safe-area-inset-bottom))!important;
    border-top:1px solid #dfe8f0!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 -8px 24px rgba(42,72,104,.065)!important;
    backdrop-filter:blur(10px)!important;
  }
  body.mode-result #configPanel .config-footer-actions{
    width:100%!important;
    max-width:650px!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:104px minmax(0,1fr)!important;
    gap:9px!important;
  }
  body.mode-result #configPanel .config-footer-actions #cancelSettingsFooter,
  body.mode-result #configPanel .config-footer-actions #applySettings{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:44px!important;
    height:44px!important;
    width:100%!important;
    border-radius:11px!important;
  }
  body.mode-result #configPanel .config-footer-actions #gen{
    display:none!important;
  }
}

@media screen and (max-width:460px){
  #wordsDrawer .words-cat-pills{gap:5px!important}
  #wordsDrawer .words-cat-pills button{
    min-height:31px!important;
    height:31px!important;
    padding:0 2px!important;
    font-size:8.8px!important;
    letter-spacing:-.015em!important;
  }
  body.mode-result #configPanel .config-scroll-body{padding:14px 12px 106px!important}
  body.mode-result #configPanel .config-footer{padding-left:12px!important;padding-right:12px!important}
}

/* ============================================================
   v5.31d — Global config flow polish
   Compact centred category matrix, no horizontal word strips,
   balanced one-row creation controls.
   ============================================================ */
@media screen {
  /* Category filters stay 5 × 2, but no longer stretch edge-to-edge. */
  #wordsDrawer .words-cat-pills,
  body.mode-config #configPanel .category-pills{
    width:min(100%,560px)!important;
    max-width:560px!important;
    margin:10px auto 12px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:8px!important;
    overflow:visible!important;
    padding:0!important;
  }
  #wordsDrawer .words-cat-pills button,
  body.mode-config #configPanel .category-pills button{
    width:100%!important;
    min-width:0!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 7px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:nowrap!important;
    border-radius:999px!important;
  }

  /* Selected words should grow naturally into rows; never a sideways strip. */
  body.mode-config #configPanel .selected-words,
  body.mode-result #configPanel .selected-words,
  #wordsDrawer .words-selected-preview{
    flex-wrap:wrap!important;
    overflow-x:visible!important;
    overflow-y:visible!important;
    scrollbar-width:none!important;
    min-height:0!important;
    padding:2px 0!important;
  }
  body.mode-config #configPanel .selected-words::-webkit-scrollbar,
  body.mode-result #configPanel .selected-words::-webkit-scrollbar,
  #wordsDrawer .words-selected-preview::-webkit-scrollbar{display:none!important}
  body.mode-config #configPanel .selected-chip,
  body.mode-result #configPanel .selected-chip{
    flex:0 1 auto!important;
  }

  /* Main creation form: four related fields form one balanced row. */
  body.mode-config #configPanel .config-basics-main{
    display:grid!important;
    grid-template-columns:.72fr 1.05fr .95fr 1.45fr!important;
    gap:10px!important;
    align-items:stretch!important;
    margin-bottom:16px!important;
  }
  body.mode-config #configPanel .config-basics-main > .basic-box,
  body.mode-config #configPanel .config-basics-main > .basic-box:nth-child(1),
  body.mode-config #configPanel .config-basics-main > .basic-box:nth-child(2),
  body.mode-config #configPanel .config-basics-main > .basic-box:nth-child(3),
  body.mode-config #configPanel .config-basics-main > .basic-box:nth-child(4){
    grid-column:auto!important;
    margin:0!important;
    padding:11px 12px!important;
    min-width:0!important;
    min-height:82px!important;
    border:1px solid #dce6ef!important;
    border-radius:15px!important;
    background:#fff!important;
    box-shadow:0 4px 14px rgba(42,72,104,.035)!important;
  }
  body.mode-config #configPanel .config-basics-main .title-box{
    grid-column:auto!important;
  }
  body.mode-config #configPanel .config-basics-main .basic-box label{
    margin:0 0 6px!important;
    color:#708399!important;
    font-size:9px!important;
    font-weight:900!important;
    letter-spacing:.07em!important;
  }
  body.mode-config #configPanel .config-basics-main .basic-box select,
  body.mode-config #configPanel .config-basics-main .basic-box input[type="text"]{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 11px!important;
    border:1px solid #d4e0ea!important;
    border-radius:10px!important;
    background:#fbfdff!important;
    box-shadow:none!important;
  }

  /* Keep the primary action meaningful and visually balanced. */
  body.mode-config #configPanel .quick-create-row{
    grid-template-columns:minmax(0,1fr) 150px!important;
    gap:10px!important;
    margin:0 0 16px!important;
  }
  body.mode-config #configPanel #autoPick,
  body.mode-config #configPanel #manualPickerToggle{
    min-height:44px!important;
  }
}

@media screen and (max-width:980px){
  body.mode-config #configPanel .config-basics-main{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media screen and (max-width:620px){
  #wordsDrawer .words-cat-pills,
  body.mode-config #configPanel .category-pills{
    width:100%!important;
    max-width:none!important;
    gap:5px!important;
  }
  #wordsDrawer .words-cat-pills button,
  body.mode-config #configPanel .category-pills button{
    padding:0 3px!important;
    font-size:9px!important;
  }
  body.mode-config #configPanel .config-basics-main{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  body.mode-config #configPanel .config-basics-main > .basic-box{
    min-height:0!important;
  }
  body.mode-config #configPanel .quick-create-row{
    grid-template-columns:1fr!important;
  }
}


/* ============================================================
   v5.31e — Title-first setup + true full repick
   ============================================================ */
@media screen {
  body.mode-config #configPanel .config-basics-main{
    grid-template-columns:1.55fr .72fr 1.05fr .95fr!important;
  }
  body.mode-config #configPanel .config-basics-main .title-box{
    order:0!important;
  }
  body.mode-config #configPanel .config-basics-main .title-box input{
    font-weight:800!important;
    color:#173765!important;
  }
}
@media screen and (max-width:980px){
  body.mode-config #configPanel .config-basics-main{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.mode-config #configPanel .config-basics-main .title-box{
    grid-column:1 / -1!important;
  }
}
@media screen and (max-width:620px){
  body.mode-config #configPanel .config-basics-main{grid-template-columns:1fr!important}
  body.mode-config #configPanel .config-basics-main .title-box{grid-column:auto!important}
}


/* ============================================================
   v5.32 — Crossword Setup UX Redesign
   One clean setup flow + dedicated manual picture picker.
   ============================================================ */
@media screen {
  body.mode-config #configPanel{overflow:visible!important}
  body.mode-config #configPanel .creation-steps{display:none!important}
  body.mode-config #configPanel .config-tip-card{display:none!important}
  body.mode-config #configPanel .setup-head-v532{
    padding:28px 30px 20px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    border-bottom:1px solid #e5edf4!important;
    background:linear-gradient(180deg,#fff,#fbfdff)!important;
  }
  body.mode-config #configPanel .setup-head-v532 .config-kicker{
    display:block!important;margin-bottom:7px!important;color:#4c72c9!important;
    font-size:10px!important;font-weight:900!important;letter-spacing:.12em!important;
  }
  body.mode-config #configPanel .setup-head-v532 h2{font-size:30px!important;letter-spacing:-1.1px!important;margin:0!important}
  body.mode-config #configPanel .setup-head-v532 p{max-width:760px!important;font-size:12px!important;margin-top:7px!important}

  body.mode-config #configPanel .setup-flow-v532{padding:24px 30px 110px!important;background:#f7fafc!important}
  .setup-basics-section,.setup-selection-v532{
    max-width:1180px!important;margin:0 auto 18px!important;padding:20px!important;
    border:1px solid #dbe6ef!important;border-radius:22px!important;background:#fff!important;
    box-shadow:0 8px 24px rgba(48,79,112,.055)!important;
  }
  .setup-section-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:18px!important;margin-bottom:16px!important}
  .setup-section-head h3{margin:4px 0 0!important;font-size:19px!important;letter-spacing:-.35px!important;color:#183b68!important}
  .setup-section-head>small{color:#8091a3!important;font-size:10.5px!important}
  .setup-section-head .section-eyebrow,.setup-selection-v532 .section-eyebrow{font-size:9px!important;letter-spacing:.09em!important;color:#5474b8!important}

  body.mode-config #configPanel .config-basics-main{
    display:grid!important;grid-template-columns:1.7fr .72fr 1.05fr .92fr!important;gap:12px!important;margin:0!important;
  }
  body.mode-config #configPanel .config-basics-main>.basic-box,
  body.mode-config #configPanel .config-basics-main>.basic-box:nth-child(n){
    min-height:0!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
  }
  body.mode-config #configPanel .config-basics-main .basic-box label{display:block!important;margin:0 0 6px!important;color:#718499!important;font-size:9px!important;font-weight:900!important;letter-spacing:.07em!important}
  body.mode-config #configPanel .config-basics-main .basic-box select,
  body.mode-config #configPanel .config-basics-main .basic-box input[type="text"]{
    height:44px!important;min-height:44px!important;border:1px solid #d4e0ea!important;border-radius:12px!important;background:#fbfdff!important;padding:0 12px!important;box-shadow:none!important;
  }
  body.mode-config #configPanel .config-basics-main .title-box input{font-weight:850!important;color:#173765!important}
  .setup-choice-actions{display:grid!important;grid-template-columns:minmax(0,1fr) 190px!important;gap:10px!important;margin:18px 0 0!important;padding:0!important}
  .setup-choice-actions button{min-height:46px!important;border-radius:13px!important;font-weight:900!important}
  .setup-choice-actions #autoPick{box-shadow:0 8px 18px rgba(45,105,246,.16)!important}
  .setup-choice-actions #manualPickerToggle{background:#fff!important;border-color:#cbd9e7!important;color:#294c72!important}

  .setup-selection-v532 .selection-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;margin-bottom:14px!important}
  .setup-selection-v532 .selection-head>div:first-child b{display:block!important;margin-top:3px!important;color:#173765!important;font-size:17px!important}
  .setup-selection-v532 .selection-head>div:first-child small{display:block!important;margin-top:4px!important;color:#8091a3!important;font-size:10.5px!important}
  .selection-head-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important}
  .selection-head-actions button{min-height:34px!important;border-radius:10px!important;padding:0 11px!important;font-size:10.5px!important;background:#fff!important}
  .selection-head-actions #selectionEdit{border-color:#bcd0e5!important;color:#315c8f!important}
  .selection-head-actions #selectionClear{border-color:#d8e2ec!important;color:#536b82!important}

  body.mode-config #configPanel .selected-words{
    display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:9px!important;overflow:visible!important;padding:0!important;
  }
  body.mode-config #configPanel .selected-chip{
    min-width:0!important;width:100%!important;min-height:58px!important;padding:8px 34px 8px 8px!important;
    display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;align-items:center!important;gap:8px!important;
    border:1px solid #dfe8f0!important;border-radius:14px!important;background:#fbfdff!important;position:relative!important;
  }
  body.mode-config #configPanel .selected-chip img{width:42px!important;height:42px!important;padding:2px!important;background:#fff!important;border-radius:10px!important}
  body.mode-config #configPanel .selected-chip .txt{min-width:0!important}
  body.mode-config #configPanel .selected-chip .txt b{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:10.5px!important}
  body.mode-config #configPanel .selected-chip .txt small{display:none!important}
  body.mode-config #configPanel .selected-chip .remove{position:absolute!important;right:7px!important;top:50%!important;transform:translateY(-50%)!important;width:24px!important;height:24px!important;border-radius:999px!important}
  body.mode-config #configPanel .selected-empty{grid-column:1/-1!important;padding:20px!important;border:1px dashed #cbd9e6!important;border-radius:14px!important;background:#f9fbfd!important;color:#72869a!important;text-align:center!important}

  body.mode-config #configPanel .pack-section{display:none!important}
  body.mode-config #configPanel .advanced-panel{max-width:1180px!important;margin:0 auto 18px!important;border-radius:18px!important;background:#fff!important;border-color:#dbe6ef!important}
  body.mode-config #configPanel .status{max-width:1180px!important;margin:0 auto 16px!important;border:0!important;padding:0!important}
  body.mode-config #configPanel .status:empty{display:none!important}
  body.mode-config #configPanel .status .msg{margin:0!important;border:1px solid #d7e5f7!important;background:#f6f9ff!important;color:#5070a4!important;border-radius:12px!important;padding:10px 12px!important}
  body.mode-config #configPanel .asset-note{display:none!important}

  /* Dedicated manual picker overlay. */
  .manual-picker-backdrop-v532{position:fixed!important;inset:0!important;z-index:1400!important;background:rgba(20,39,63,.36)!important;backdrop-filter:blur(2px)!important}
  .manual-picker-backdrop-v532[hidden],.manual-picker-modal-v532[hidden]{display:none!important}
  .manual-picker-modal-v532{
    position:fixed!important;z-index:1410!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
    width:min(1120px,calc(100vw - 48px))!important;max-height:min(90vh,860px)!important;margin:0!important;padding:0!important;
    display:flex!important;flex-direction:column!important;overflow:hidden!important;border:1px solid #d7e3ed!important;border-radius:24px!important;
    background:#fff!important;box-shadow:0 28px 90px rgba(24,48,75,.24)!important;
  }
  .manual-picker-modal-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:20px!important;padding:20px 22px 15px!important;border-bottom:1px solid #e4ecf3!important;background:#fff!important;flex:0 0 auto!important}
  .manual-picker-modal-head h3{margin:5px 0 4px!important;font-size:24px!important;letter-spacing:-.65px!important;color:#173765!important}
  .manual-picker-modal-head p{margin:0!important;color:#75889c!important;font-size:11px!important}
  .manual-picker-modal-body{padding:16px 22px 20px!important;overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important;background:#f9fbfd!important}
  .manual-picker-toolbar-v532{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;align-items:center!important;margin-bottom:8px!important}
  .manual-picker-toolbar-v532 #search{height:44px!important;border:1px solid #d4e0ea!important;border-radius:12px!important;background:#fff!important;padding:0 14px!important}
  .picker-cat-select-hidden{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
  .picker-name-toggle{display:flex!important;align-items:center!important;gap:7px!important;padding:0 10px!important;height:40px!important;border-radius:10px!important;color:#536b82!important;background:#fff!important;border:1px solid #dce6ef!important;white-space:nowrap!important}
  .manual-picker-modal-v532 .category-pills{
    width:min(100%,720px)!important;max-width:720px!important;margin:12px auto!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:7px!important;padding:0!important;overflow:visible!important;
  }
  .manual-picker-modal-v532 .category-pills button{height:34px!important;min-height:34px!important;width:100%!important;padding:0 6px!important;border-radius:999px!important;font-size:10px!important;white-space:nowrap!important;background:#fff!important}
  .manual-picker-modal-v532 .category-pills button.active{background:#edf4ff!important;border-color:#7aa2ff!important;color:#245bc5!important;box-shadow:0 0 0 2px rgba(91,139,255,.08)!important}
  .picker-summary-v532{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin:10px 0!important;padding:9px 11px!important;border-radius:11px!important;background:#eef5ff!important;color:#45658d!important;font-size:10.5px!important}
  .picker-summary-v532 #pickerSelectedCount{font-weight:900!important;color:#245bc5!important}
  .manual-picker-modal-v532 .picture-grid{
    display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:9px!important;max-height:none!important;overflow:visible!important;padding:0!important;
  }
  .manual-picker-modal-v532 .card{min-height:122px!important;border-radius:16px!important;border:1px solid #dce6ef!important;background:#fff!important;padding:8px!important}
  .manual-picker-modal-v532 .card img{width:90px!important;height:90px!important;object-fit:contain!important}
  .manual-picker-modal-v532 .card[data-category="Животни"]{background:#fff2df!important;border-color:#f1d3a6!important}
  .manual-picker-modal-v532 .card[data-category="Храна"]{background:#fff0ef!important;border-color:#f0cfca!important}
  .manual-picker-modal-v532 .card[data-category="Природа"]{background:#eaf8ef!important;border-color:#c9e8d4!important}
  .manual-picker-modal-v532 .card[data-category="Превоз"]{background:#eaf3ff!important;border-color:#cbdcf3!important}
  .manual-picker-modal-v532 .card[data-category="У дома"]{background:#f3edff!important;border-color:#ddd0f5!important}
  .manual-picker-modal-v532 .card[data-category="Учене"]{background:#eaf8fb!important;border-color:#c8e7ec!important}
  .manual-picker-modal-v532 .card[data-category="Игри"]{background:#fff0f7!important;border-color:#f1cfe0!important}
  .manual-picker-modal-v532 .card[data-category="Облекло"]{background:#f4f1ff!important;border-color:#dcd5f5!important}
  .manual-picker-modal-v532 .card[data-category="Тяло"]{background:#fff3e9!important;border-color:#f0d8c3!important}
  .manual-picker-modal-v532 .card.sel{box-shadow:0 0 0 3px #5f8cff inset,0 8px 20px rgba(45,105,246,.10)!important;border-color:#6b98ff!important}
  .manual-picker-modal-v532 .card .check{display:none!important}
  .manual-picker-modal-v532 .card.sel .check{display:flex!important;right:8px!important;top:8px!important}
  .manual-picker-modal-v532 .card .name{left:8px!important;right:8px!important;bottom:7px!important}
  .manual-picker-modal-footer{display:grid!important;grid-template-columns:100px 100px minmax(0,1fr)!important;gap:9px!important;padding:13px 22px calc(13px + env(safe-area-inset-bottom))!important;border-top:1px solid #e0e9f0!important;background:#fff!important;flex:0 0 auto!important}
  .manual-picker-modal-footer button{min-height:44px!important;border-radius:11px!important;font-weight:850!important}
  .manual-picker-modal-footer #manualPickerDone:disabled{opacity:.45!important;cursor:not-allowed!important;box-shadow:none!important}
  body.manual-picker-modal-open{overflow:hidden!important}

  /* Footer CTA remains the single final action. */
  body.mode-config #configPanel .config-footer{padding:14px 30px!important;background:#fff!important;border-top:1px solid #e3ebf2!important}
  body.mode-config #configPanel .config-footer-actions{max-width:1180px!important;margin:0 auto!important}
  body.mode-config #configPanel .config-footer-actions #gen{min-height:50px!important;border-radius:14px!important;font-size:13px!important;font-weight:900!important}
}

@media screen and (max-width:1050px){
  body.mode-config #configPanel .config-basics-main{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.mode-config #configPanel .config-basics-main .title-box{grid-column:1/-1!important}
  body.mode-config #configPanel .selected-words{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .manual-picker-modal-v532 .picture-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media screen and (max-width:700px){
  body.mode-config #configPanel .setup-head-v532{padding:20px 16px 15px!important}
  body.mode-config #configPanel .setup-head-v532 h2{font-size:24px!important}
  body.mode-config #configPanel .setup-flow-v532{padding:14px 12px 100px!important}
  .setup-basics-section,.setup-selection-v532{padding:15px!important;border-radius:18px!important}
  .setup-section-head{align-items:flex-start!important;flex-direction:column!important;gap:4px!important}
  body.mode-config #configPanel .config-basics-main{grid-template-columns:1fr!important;gap:10px!important}
  body.mode-config #configPanel .config-basics-main .title-box{grid-column:auto!important}
  .setup-choice-actions{grid-template-columns:1fr!important}
  .setup-selection-v532 .selection-head{align-items:flex-start!important;flex-direction:column!important}
  .selection-head-actions{justify-content:flex-start!important}
  body.mode-config #configPanel .selected-words{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .manual-picker-modal-v532{width:100vw!important;height:100dvh!important;max-height:none!important;left:0!important;top:0!important;transform:none!important;border-radius:0!important;border:0!important}
  .manual-picker-modal-head{padding:15px 14px 12px!important}
  .manual-picker-modal-head h3{font-size:21px!important}
  .manual-picker-modal-body{padding:12px 12px 18px!important}
  .manual-picker-toolbar-v532{grid-template-columns:1fr!important}
  .picker-name-toggle{width:max-content!important}
  .manual-picker-modal-v532 .category-pills{width:100%!important;gap:5px!important}
  .manual-picker-modal-v532 .category-pills button{font-size:8.5px!important;padding:0 2px!important}
  .manual-picker-modal-v532 .picture-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .manual-picker-modal-v532 .card{min-height:100px!important}
  .manual-picker-modal-v532 .card img{width:72px!important;height:72px!important}
  .manual-picker-modal-footer{grid-template-columns:86px 86px minmax(0,1fr)!important;padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important}
}
@media screen and (max-width:430px){
  body.mode-config #configPanel .selected-words{grid-template-columns:1fr!important}
  .manual-picker-modal-v532 .picture-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .manual-picker-modal-footer{grid-template-columns:1fr 1fr!important}
  .manual-picker-modal-footer #manualPickerDone{grid-column:1/-1!important}
}


/* ============================================================
   v5.32a — Print footer anchoring + future-ready My Sheets library
   ============================================================ */

/* Real printed page anchoring. The worksheet occupies the full printable
   A4 content box, so absolute footer metadata sits at the physical bottom
   safe edge instead of the bottom of the crossword content. */
@media print{
  .worksheet.orientation-portrait{
    min-height:283mm!important;
    height:283mm!important;
    max-height:283mm!important;
    box-sizing:border-box!important;
  }
  .worksheet.orientation-landscape{
    min-height:196mm!important;
    height:196mm!important;
    max-height:196mm!important;
    box-sizing:border-box!important;
  }
  .worksheet-footer-meta{
    bottom:1mm!important;
  }
}

/* My Sheets becomes a cross-exercise library surface. */
.home-library-v532a{
  position:relative;
  overflow:hidden;
}
.home-library-v532a::after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-70px;
  bottom:-90px;
  border-radius:50%;
  background:linear-gradient(145deg,rgba(221,240,255,.55),rgba(238,232,255,.28));
  pointer-events:none;
}
.home-library-v532a .home-card-head{
  position:relative;
  z-index:1;
  align-items:center;
}
.home-library-v532a .home-card-head h2{
  font-size:25px!important;
  letter-spacing:-.7px!important;
  color:#173a70!important;
}
.home-library-v532a .section-helper{
  max-width:690px;
  line-height:1.5;
}
.home-library-v532a .home-recent-grid{
  position:relative;
  z-index:1;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  margin-top:18px!important;
}
.library-project-card{
  min-height:118px!important;
  padding:14px 15px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:12px!important;
  text-align:left!important;
  background:linear-gradient(145deg,#fff,#f9fcff)!important;
  border:1px solid #d5e3ef!important;
  border-radius:18px!important;
  transition:.18s ease!important;
}
.library-project-card:hover{
  transform:translateY(-2px)!important;
  border-color:#b6cfee!important;
  box-shadow:0 10px 24px rgba(49,83,119,.09)!important;
}
.library-project-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
}
.library-project-top>em{
  font-style:normal;
  font-size:10px;
  color:#91a1b2;
  font-weight:700;
}
.library-type-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:27px;
  padding:0 9px;
  border-radius:999px;
  background:#edf5ff;
  color:#3567bd;
  font-size:10px;
  font-weight:850;
}
.library-type-badge i{
  font-style:normal;
  display:grid;
  place-items:center;
  min-width:17px;
  height:17px;
  border-radius:6px;
  background:#fff;
  font-size:10px;
}
.library-type-badge.maze{background:#ebfaf3;color:#25835a}
.library-type-badge.path{background:#fff6dd;color:#9a7312}
.library-type-badge.words{background:#fff0ef;color:#b85d59}
.library-type-badge.coloring{background:#f5edff;color:#7657ad}
.library-type-badge.dots{background:#e9fbfa;color:#23837d}
.library-type-badge.math{background:#eef1ff;color:#5866c5}
.library-type-badge.differences{background:#fff0f6;color:#ad5279}
.library-project-main{
  display:grid;
  grid-template-columns:74px minmax(0,1fr) 34px;
  align-items:center;
  gap:13px;
  width:100%;
}
.library-project-card .project-thumb{
  width:74px!important;
  height:58px!important;
  border-radius:13px!important;
  background:#f2f7fc!important;
  border:1px solid #dde8f2!important;
}
.library-project-card .recent-copy{
  min-width:0;
  display:flex!important;
  flex-direction:column;
  gap:5px;
}
.library-project-card .recent-copy b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px!important;
  color:#203f64!important;
}
.library-project-card .recent-copy small{
  color:#74889d!important;
  font-size:10px!important;
}
.library-open-arrow{
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#edf4ff;
  color:#3269d8;
  font-weight:900;
  font-size:15px;
}
.home-library-v532a .new-project-home{
  position:relative;
  z-index:1;
  min-height:58px!important;
  margin-top:13px!important;
  padding:9px 15px!important;
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr) 28px;
  align-items:center;
  text-align:left;
  gap:10px;
  background:#fbfdff!important;
}
.home-library-v532a .new-project-home>span:first-child{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#edf5ff;
  color:#3169da;
  font-size:18px;
}
.home-library-v532a .new-project-home>span:nth-child(2){display:flex;flex-direction:column;gap:2px}
.home-library-v532a .new-project-home b{font-size:12px;color:#31506f}
.home-library-v532a .new-project-home small{font-size:9px;color:#8a9caf;font-weight:600}
.home-library-v532a .new-project-home i{font-style:normal;color:#4d6d8d;font-size:15px;text-align:center}
.home-library-empty{
  grid-column:1/-1;
  min-height:94px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  border:1px dashed #c9d9e7;
  border-radius:17px;
  background:#fbfdff;
  color:#7890a5;
}
.home-library-empty>span{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#edf5ff;color:#3f6fb7;font-size:20px
}
.home-library-empty div{display:flex;flex-direction:column;gap:3px}
.home-library-empty b{font-size:12px;color:#47627d}
.home-library-empty small{font-size:10px}
#homeExercisesSection.module-picker-nudge{
  animation:modulePickerNudge 1.2s ease;
}
@keyframes modulePickerNudge{
  0%,100%{box-shadow:0 14px 34px rgba(63,97,132,.08)}
  35%{box-shadow:0 0 0 5px rgba(62,110,244,.13),0 18px 38px rgba(63,97,132,.13)}
}
@media screen and (max-width:820px){
  .home-library-v532a .home-recent-grid{grid-template-columns:1fr!important}
  .library-project-main{grid-template-columns:62px minmax(0,1fr) 32px}
  .library-project-card .project-thumb{width:62px!important;height:52px!important}
}

/* ============================================================
   v5.32b — Home quick start redesign
   ============================================================ */
@media screen {
  .quick-start-v532b{
    padding:22px 24px 20px!important;
    background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
    border:1px solid #dce7f0!important;
    border-radius:22px!important;
    box-shadow:0 8px 22px rgba(52,84,118,.045)!important;
  }
  .quick-start-head-v532b{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:18px!important;
    padding:0 0 16px!important;
    margin:0 0 14px!important;
    border-bottom:1px solid #edf2f7!important;
  }
  .quick-start-title-wrap{display:flex;align-items:center;gap:12px;min-width:0}
  .quick-start-icon{
    width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
    background:#edf4ff;color:#2d69f6;font-size:18px;font-weight:900
  }
  .quick-start-head-v532b .section-eyebrow{display:block;margin-bottom:3px;color:#5d7ec7!important}
  .quick-start-head-v532b h3{margin:0!important;font-size:20px!important;line-height:1.15;color:#183b68!important;letter-spacing:-.35px!important}
  .quick-start-head-v532b small{margin-top:4px!important;color:#8496a8!important;font-size:11px!important}
  .quick-custom-button{
    flex:0 0 auto;min-height:38px;padding:0 13px;border-radius:11px;border:1px solid #cfddeb;background:#fff;
    color:#355777;font-size:11px;font-weight:850;display:inline-flex;align-items:center;gap:7px
  }
  .quick-custom-button:hover{border-color:#9ebbf0;background:#f7faff}

  .quick-pw-modes{
    margin:0 0 15px!important;padding:0 0 15px!important;border-bottom:1px dashed #e1e9f1!important
  }
  .quick-pw-modes[hidden]{display:none!important}
  .quick-pw-modes-label,.quick-step-label{
    display:block;margin:0 0 9px;color:#74889c;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.06em
  }
  .quick-pw-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .quick-pw-mode{
    position:relative;min-width:0;min-height:118px;padding:18px 18px;border:1px solid #d7e3ef;border-radius:20px;color:#355777;
    display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:16px;text-align:left;box-shadow:0 8px 18px rgba(47,71,103,.04);
    transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
    overflow:hidden
  }
  .quick-pw-mode::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:7px;border-radius:20px 0 0 20px;background:#cbd5e1;opacity:.95
  }
  .quick-pw-mode:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(47,71,103,.07)}
  .quick-pw-mode.is-selected{box-shadow:0 0 0 2px rgba(36,72,111,.08),0 12px 24px rgba(47,71,103,.09)}
  .quick-pw-mode-copy{min-width:0}
  .quick-pw-mode-copy b{display:block;color:#24486f;font-size:15px;line-height:1.18;margin-bottom:6px}
  .quick-pw-mode-copy small{display:block;color:#6f8498;font-size:11px;line-height:1.34;font-weight:700}
  .quick-pw-mode-visual{
    width:86px;height:76px;border-radius:17px;border:1px solid #e6edf6;background:linear-gradient(180deg,#f9fbff 0%,#ffffff 100%);
    display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)
  }
  .quick-pw-mode--write{background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);border-color:#d4e3fb}
  .quick-pw-mode--write::before{background:#7aa8ff}
  .quick-pw-mode--write:hover{border-color:#aac7fb;background:linear-gradient(180deg,#f2f8ff 0%,#ffffff 100%)}
  .quick-pw-mode--write.is-selected{border-color:#7aa8ff;background:linear-gradient(180deg,#eff6ff 0%,#ffffff 100%)}
  .quick-pw-mode--write .quick-pw-mode-visual{border-color:#cfe0ff;background:linear-gradient(180deg,#eef5ff 0%,#ffffff 100%)}
  .quick-pw-mode--write .quick-pw-mode-visual img{width:26px;height:26px;object-fit:contain}
  .quick-pw-mode--match{background:linear-gradient(180deg,#fffaf3 0%,#ffffff 100%);border-color:#f3dec1}
  .quick-pw-mode--match::before{background:#f0b35e}
  .quick-pw-mode--match:hover{border-color:#edc98e;background:linear-gradient(180deg,#fff7ed 0%,#ffffff 100%)}
  .quick-pw-mode--match.is-selected{border-color:#eca350;background:linear-gradient(180deg,#fff4e8 0%,#ffffff 100%)}
  .quick-pw-mode--match .quick-pw-mode-visual{border-color:#f3dfbf;background:linear-gradient(180deg,#fff6e9 0%,#ffffff 100%)}
  .quick-pw-mode--match .quick-pw-mode-visual img{width:26px;height:26px;object-fit:contain}
  .quick-pw-mode--choice{background:linear-gradient(180deg,#fff7f5 0%,#ffffff 100%);border-color:#f3d3cd}
  .quick-pw-mode--choice::before{background:#ec8d83}
  .quick-pw-mode--choice:hover{border-color:#efb3aa;background:linear-gradient(180deg,#fff3f0 0%,#ffffff 100%)}
  .quick-pw-mode--choice.is-selected{border-color:#eb8d83;background:linear-gradient(180deg,#ffefec 0%,#ffffff 100%)}
  .quick-pw-mode--choice .quick-pw-mode-visual{border-color:#f1c4bc;background:linear-gradient(180deg,#fff4f1 0%,#ffffff 100%)}
  .quick-pw-mode--choice .quick-pw-mode-visual img{width:28px;height:28px;object-fit:contain}
  .qpw-mini-picture{
    width:26px;height:26px;border-radius:8px;background:#fff;display:grid;place-items:center;border:1px solid rgba(141,163,187,.30);
    box-shadow:0 2px 5px rgba(52,78,108,.06);overflow:hidden
  }
  .qpw-mini-picture img{width:23px;height:23px;object-fit:contain;display:block}
  .quick-pw-mode--write .qpw-mini-picture{background:#f8fbff;border-color:#cfe0ff}
  .quick-pw-mode--match .qpw-mini-picture{background:#fffaf1;border-color:#f1d2a1}
  .quick-pw-mode--choice .qpw-mini-picture{background:#fff7f5;border-color:#f2c9c2}
  .quick-pw-mode-visual-write{grid-template-columns:26px auto;gap:6px;padding:0 7px}
  .qpw-mini-boxes{display:inline-flex;gap:2px;align-items:center}
  .qpw-mini-boxes i,.qpw-mini-options i{display:block;background:#fff;border:1.4px solid #93a4b8;border-radius:3px}
  .qpw-mini-boxes i{width:7px;height:11px}
  .quick-pw-mode-visual-match{grid-template-columns:26px 16px auto;gap:4px;padding:0 6px}
  .qpw-mini-connector{width:16px;height:2px;background:#f08f84;position:relative;border-radius:999px}
  .quick-pw-mode--match .qpw-mini-connector{background:#eca350}
  .qpw-mini-connector::after{content:"";position:absolute;right:-1px;top:-3px;border-left:5px solid #f08f84;border-top:4px solid transparent;border-bottom:4px solid transparent}
  .quick-pw-mode--match .qpw-mini-connector::after{border-left-color:#eca350}
  .qpw-mini-word{padding:2px 5px;border-radius:999px;background:#eef4fb;color:#507090;font-size:7px;font-weight:950;letter-spacing:.04em;white-space:nowrap}
  .quick-pw-mode--match .qpw-mini-word{background:#fff0d8;color:#9b6b25}
  .quick-pw-mode-visual-choice{grid-template-columns:26px auto;gap:7px;padding:0 7px}
  .qpw-mini-options{display:grid;gap:3px}
  .qpw-mini-options i{width:17px;height:6px;border-radius:999px}
  .qpw-mini-options i.is-correct{border-color:#e5887c;background:#fff1ee;box-shadow:inset 0 0 0 1px rgba(229,136,124,.28)}

  .quick-preset-block{margin-top:8px;padding:12px 14px 0;border-top:1px solid rgba(225,233,241,.52)}
  .quick-preset-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
  .quick-preset-grid .quick-preset{
    position:relative;min-height:68px!important;padding:9px 11px!important;border-radius:15px!important;
    display:grid!important;grid-template-columns:40px minmax(0,1fr) 24px!important;align-items:center!important;gap:8px!important;
    text-align:left!important;background:#fcfdff!important;border:1px solid #e8edf4!important;overflow:hidden;box-shadow:none!important;opacity:.96
  }
  .quick-preset-grid .quick-preset:hover{transform:translateY(-1px)!important;border-color:#d0dceb!important;box-shadow:0 5px 10px rgba(49,82,120,.035)!important}
  .quick-preset-grid .quick-preset.recommended{
    border-color:#c9d8f0!important;background:linear-gradient(180deg,#fbfdff 0%,#f8fbff 100%)!important;
    box-shadow:0 3px 8px rgba(47,105,246,.028)!important
  }
  .quick-preset-grid .quick-number{
    width:38px!important;height:38px!important;border-radius:12px!important;display:grid!important;place-items:center!important;
    background:#f2f6fd!important;color:#2d69f6!important;font-size:15px!important;font-weight:950!important
  }
  .quick-preset-copy{min-width:0}
  .quick-preset-copy b{display:block!important;margin:0 0 3px!important;color:#355777!important;font-size:12px!important;line-height:1.15!important}
  .quick-preset-copy small{display:block!important;color:#8a9bad!important;font-size:8.8px!important;line-height:1.25!important;font-weight:600!important}
  .quick-preset-arrow{
    width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#f3f6fa;color:#7d90a6;font-size:11px;font-weight:900
  }
  .quick-preset.recommended .quick-preset-arrow{background:#edf3ff;color:#4a78dd}
  .quick-recommended{
    position:absolute;top:7px;right:9px;padding:3px 6px;border-radius:999px;background:#f1f5ff;color:#6c86bc;
    font-size:6.8px;font-weight:950;letter-spacing:.02em
  }

  .quick-theme-row{
    margin-top:14px!important;padding-top:13px!important;border-top:1px dashed #e6edf4!important;
    display:flex!important;align-items:center!important;gap:12px!important;flex-wrap:wrap!important
  }
  .quick-theme-label{padding:0!important;color:#74889c!important;font-size:9px!important;font-weight:900!important;text-transform:uppercase;letter-spacing:.06em}
  .quick-theme-row .theme-strip{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:0!important}
  .quick-theme-row .theme-strip button{
    min-height:30px!important;padding:0 10px!important;border-radius:999px!important;font-size:9px!important;font-weight:850!important;
    box-shadow:none!important
  }
}

@media screen and (max-width:900px){
  .quick-pw-mode-grid{grid-template-columns:1fr!important}
  .quick-pw-mode{min-height:98px;grid-template-columns:78px minmax(0,1fr);padding:15px 14px}
  .quick-preset-grid{grid-template-columns:1fr!important}
  .quick-preset-grid .quick-preset{min-height:70px!important}
}

@media screen and (max-width:620px){
  .quick-start-v532b{padding:16px 14px!important}
  .quick-start-head-v532b{align-items:flex-start!important;gap:10px!important}
  .quick-start-title-wrap{align-items:flex-start}
  .quick-start-icon{width:34px;height:34px;border-radius:10px;font-size:16px}
  .quick-start-head-v532b h3{font-size:17px!important}
  .quick-start-head-v532b small{font-size:10px!important}
  .quick-custom-button{min-height:34px;padding:0 10px;font-size:10px}
  .quick-theme-row{align-items:flex-start!important}
  .quick-pw-mode{padding:13px 12px}
  .quick-pw-mode-copy b{font-size:13px}
  .quick-pw-mode-copy small{font-size:10px}
  .quick-theme-row .theme-strip{width:100%!important;overflow:visible!important;flex-wrap:wrap!important;padding:0!important}
}

/* ============================================================
   v5.33 — Picture Words module
   Second production exercise type, sharing the crossword shell.
   ============================================================ */
@media screen{
  .module-picturewords.is-selected .module-select-state{background:#ec6f63!important}

  .picture-words-mode-section:not([hidden]){
    display:block;
    margin-top:16px;
    padding:17px 18px 18px;
    border:1px solid #e5e8f1;
    border-radius:20px;
    background:linear-gradient(180deg,#fff 0%,#fffafa 100%);
    box-shadow:0 8px 22px rgba(74,76,111,.045);
  }
  .compact-mode-head{margin-bottom:12px!important}
  .compact-mode-head h3{margin:2px 0 0!important;font-size:17px!important;color:#284764!important}
  .picture-words-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .picture-words-mode-card{
    min-height:86px!important;padding:12px!important;border:1px solid #dfe6ee!important;border-radius:15px!important;
    background:#fff!important;display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;align-items:center!important;
    gap:10px!important;text-align:left!important;color:#36516c!important;box-shadow:none!important
  }
  .picture-words-mode-card:hover{border-color:#efb0aa!important;background:#fffaf9!important}
  .picture-words-mode-card.is-selected{border-color:#ec8c83!important;background:#fff4f2!important;box-shadow:0 0 0 2px rgba(236,111,99,.08)!important}
  .pw-mode-icon{
    width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#fff0ed;color:#c85f56;
    font-size:13px;font-weight:950;border:1px solid #f6d1cb
  }
  .picture-words-mode-card b{display:block;font-size:12px;color:#294966;margin-bottom:3px}
  .picture-words-mode-card small{display:block;font-size:9px;line-height:1.35;color:#8092a5;font-weight:600}

  .project-thumb-picturewords{display:grid!important;grid-template-columns:1.25fr .9fr!important;align-items:center!important;gap:5px!important;padding:6px!important}
  .project-thumb-picturewords .pw-thumb-pics{display:flex;align-items:center;justify-content:center;gap:2px;min-width:0}
  .project-thumb-picturewords .pw-thumb-pics img{width:24px;height:24px;object-fit:contain}
  .project-thumb-picturewords .pw-thumb-boxes{display:flex;gap:2px;justify-content:center}
  .project-thumb-picturewords .pw-thumb-boxes i{width:7px;height:9px;border:1px solid #718096;background:#fff}
}

.worksheet.exercise-picture-words .clue-sections{display:none!important}
.worksheet.exercise-picture-words .crossword-area{
  display:block!important;width:100%;margin-top:18px!important;break-inside:avoid;page-break-inside:avoid
}
.picture-words-sheet{width:100%;max-width:100%;color:#172033}
.pw-write-grid,.pw-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;width:100%}
.pw-exercise-item{position:relative;min-width:0;break-inside:avoid;page-break-inside:avoid}
.pw-write-item{
  min-height:118px;display:grid;grid-template-columns:26px minmax(58px,calc(var(--picSize) * .92)) minmax(0,1fr);
  align-items:center;gap:8px 8px;padding:10px 4px 12px 0;border-bottom:1px solid #d9e1e8
}
.pw-item-number,.pw-match-key{
  width:25px;height:25px;border:1.7px solid #172033;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:900;line-height:1;background:#fff;flex:0 0 auto
}
.pw-picture{display:grid;place-items:center;min-width:0}
.pw-picture img{width:calc(var(--picSize) * 1.06);height:calc(var(--picSize) * 1.06);max-width:100%;object-fit:contain;display:block}
.pw-write-item .pw-picture img{width:calc(var(--picSize) * .92);height:calc(var(--picSize) * .92)}
.pw-write-item.is-compact .pw-picture img{width:calc(var(--picSize) * .84);height:calc(var(--picSize) * .84)}
.pw-write-item.is-tight .pw-picture img{width:calc(var(--picSize) * .78);height:calc(var(--picSize) * .78)}
.pw-writing-area{display:flex;align-items:center;justify-content:flex-start;gap:5px;row-gap:6px;flex-wrap:wrap;min-width:0;align-content:center}
.pw-letter-word{display:inline-flex;gap:3px;white-space:nowrap;min-width:0}
.pw-letter-box{
  width:clamp(20px,calc(var(--cell) * .50),34px);height:clamp(25px,calc(var(--cell) * .58),40px);
  display:grid;place-items:center;border:1.7px solid #172033;background:#fff;font-style:normal;font-weight:900;
  font-size:clamp(12px,calc(var(--cell) * .26),18px);line-height:1
}
.pw-writing-area.is-compact .pw-letter-box{width:clamp(18px,calc(var(--cell) * .46),31px);height:clamp(23px,calc(var(--cell) * .53),36px);font-size:clamp(11px,calc(var(--cell) * .23),16px)}
.pw-writing-area.is-tight .pw-letter-box{width:clamp(16px,calc(var(--cell) * .42),28px);height:clamp(22px,calc(var(--cell) * .49),34px);font-size:clamp(10px,calc(var(--cell) * .21),15px)}
.pw-word-space{width:4px}
.pw-writing-area.is-compact .pw-word-space{width:3px}
.pw-writing-area.is-tight .pw-word-space{width:2px}

.pw-match-grid{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1.08fr);gap:22px;align-items:start;width:100%}
.pw-match-divider{width:1px;height:100%;min-height:420px;background:#dfe5eb}
.pw-match-side{display:grid;gap:8px}
.pw-match-picture{
  min-height:76px;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:12px;
  padding:5px 8px;border-bottom:1px solid #e1e6eb;break-inside:avoid;page-break-inside:avoid
}
.pw-match-picture img{width:var(--picSize);height:var(--picSize);object-fit:contain;justify-self:center}
.pw-match-word{
  min-height:76px;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:5px 8px;border-bottom:1px solid #e1e6eb;break-inside:avoid;page-break-inside:avoid
}
.pw-match-word b{font-size:clamp(13px,calc(var(--cell) * .26),19px);letter-spacing:.03em;overflow-wrap:anywhere}
.pw-match-line{width:42px;border-bottom:1.5px solid #64748b;height:1px;align-self:end;justify-self:end;margin-bottom:7px}
.pw-match-answer{min-width:42px;font-size:12px;font-weight:900;text-align:right;color:#172033;align-self:end;justify-self:end;margin-bottom:4px}

.pw-choice-grid{gap:10px 22px}
.pw-choice-item{
  min-height:128px;display:grid;grid-template-columns:26px minmax(70px,calc(var(--picSize) + 12px)) minmax(0,1fr);
  align-items:center;gap:8px 10px;padding:10px 6px 11px 0;border-bottom:1px solid #d9e1e8
}
.pw-choice-options{display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:0}
.pw-choice-option{
  min-height:29px;display:flex;align-items:center;gap:6px;padding:4px 7px;border:1px solid #cbd5df;border-radius:7px;
  background:#fff;font-size:11px;font-weight:800;line-height:1.15;overflow-wrap:anywhere
}
.pw-choice-option i{font-style:normal;font-size:13px;line-height:1}
.pw-choice-option.is-correct{border:2px solid #172033;padding:3px 6px;font-weight:950}

.worksheet.orientation-landscape.exercise-picture-words{
  grid-template-areas:"alphabet alphabet" "head head" "crossword crossword"!important;
}
.worksheet.orientation-landscape.exercise-picture-words .crossword-area{grid-area:crossword!important}
.worksheet.orientation-landscape.exercise-picture-words .pw-write-grid,
.worksheet.orientation-landscape.exercise-picture-words .pw-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

@media screen and (max-width:760px){
  .picture-words-mode-grid{grid-template-columns:1fr}
  .picture-words-mode-card{min-height:72px!important}
  .pw-write-grid,.pw-choice-grid{grid-template-columns:1fr;gap:8px}
  .pw-match-grid{gap:10px;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr)}
  .pw-write-item,.pw-choice-item{grid-template-columns:22px 58px minmax(0,1fr);min-height:92px}
  .pw-picture img{width:min(58px,var(--picSize));height:min(58px,var(--picSize))}
  .pw-letter-box{width:22px;height:26px;font-size:13px}
  .pw-match-picture,.pw-match-word{min-height:58px;padding:4px}
  .pw-match-picture img{width:48px;height:48px}
  .pw-match-word{grid-template-columns:24px minmax(0,1fr)}
  .pw-match-line,.pw-match-answer{grid-column:2;justify-self:end}
}

@media print{
  .picture-words-mode-section{display:none!important}
  .worksheet.exercise-picture-words .crossword-area{margin-top:3mm!important}
  .pw-write-grid,.pw-choice-grid{gap:2.2mm 5.8mm}
  .pw-write-item{min-height:24mm;padding:1.5mm .8mm 2mm 0;border-bottom:.35mm solid #8b949e;grid-template-columns:5.7mm minmax(13mm,calc(var(--picSize) * .88)) minmax(0,1fr)}
  .pw-picture img{width:var(--picSize);height:var(--picSize)}
  .pw-write-item .pw-picture img{width:calc(var(--picSize) * .88);height:calc(var(--picSize) * .88)}
  .pw-write-item.is-compact .pw-picture img{width:calc(var(--picSize) * .80);height:calc(var(--picSize) * .80)}
  .pw-write-item.is-tight .pw-picture img{width:calc(var(--picSize) * .74);height:calc(var(--picSize) * .74)}
  .pw-item-number,.pw-match-key{width:5.7mm;height:5.7mm;font-size:8.5pt;border-width:.45mm}
  .pw-letter-word{gap:.7mm}
  .pw-letter-box{width:6.4mm;height:7.6mm;border-width:.42mm;font-size:10.2pt}
  .pw-writing-area.is-compact .pw-letter-box{width:5.7mm;height:7.0mm;font-size:9.6pt}
  .pw-writing-area.is-tight .pw-letter-box{width:5.0mm;height:6.5mm;font-size:9.1pt}
  .pw-word-space{width:1.0mm}
  .pw-writing-area.is-compact .pw-word-space{width:.8mm}
  .pw-writing-area.is-tight .pw-word-space{width:.6mm}
  .pw-match-grid{gap:4mm}
  .pw-match-divider{min-height:110mm;background:#9ca3af}
  .pw-match-side{gap:1.2mm}
  .pw-match-picture,.pw-match-word{min-height:17mm;padding:1mm 1.5mm;border-bottom:.3mm solid #9ca3af}
  .pw-match-picture img{width:var(--picSize);height:var(--picSize)}
  .pw-match-word b{font-size:11pt}
  .pw-match-line{width:10mm;border-bottom:.4mm solid #475569;margin-bottom:1.3mm}
  .pw-match-answer{font-size:9pt}
  .pw-choice-item{min-height:25mm;padding:1.5mm 1mm 2mm 0;border-bottom:.35mm solid #8b949e}
  .pw-choice-options{gap:1mm}
  .pw-choice-option{min-height:6mm;padding:.7mm 1.4mm;border:.3mm solid #7c8793;border-radius:1.5mm;font-size:8.5pt;background:#fff!important}
  .pw-choice-option.is-correct{border:.55mm solid #111;padding:.45mm 1.15mm}
  .project-thumb-picturewords img{filter:none!important}
}

/* ============================================================
   v5.33c — Settings drawer scope cleanup
   The exercise type belongs to the main configurator, not to the
   generated-sheet settings drawer. Hidden conditional settings must
   remain truly hidden even when drawer styling forces grid display.
   ============================================================ */
@media screen{
  body.mode-result.drawer-open #configPanel .setup-basics-section{
    display:none!important;
  }
  #firstLetterSetting[hidden]{
    display:none!important;
  }
}


/* ============================================================
   v5.33d — First-letter setting relevance fix
   In Picture Words, first-letter help belongs only to Write mode.
   ============================================================ */
@media screen{
  #firstLetterSetting[aria-hidden="true"],
  #firstLetterQuick[hidden]{
    display:none!important;
  }
}

/* ============================================================
   v5.34 — Picture Words stabilization pass
   ============================================================ */
@media screen{
  .field-helper{
    display:block;margin-top:6px;color:#8395a8;font-size:9px;line-height:1.35;font-weight:650
  }
  .field-helper[hidden]{display:none!important}

  /* Configurator: mirror the clearer visual language from Home Quick Start. */
  .picture-words-mode-grid{gap:12px!important}
  .picture-words-mode-card{
    position:relative;min-height:102px!important;padding:13px 14px!important;border-radius:17px!important;
    grid-template-columns:66px minmax(0,1fr)!important;gap:12px!important;overflow:hidden
  }
  .picture-words-mode-card::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#cbd5e1
  }
  .picture-words-mode-card--write{border-color:#d4e3fb!important;background:linear-gradient(180deg,#f8fbff,#fff)!important}
  .picture-words-mode-card--write::before{background:#7aa8ff}
  .picture-words-mode-card--write.is-selected{border-color:#7aa8ff!important;background:linear-gradient(180deg,#eff6ff,#fff)!important;box-shadow:0 0 0 2px rgba(122,168,255,.10)!important}
  .picture-words-mode-card--match{border-color:#f3dec1!important;background:linear-gradient(180deg,#fffaf3,#fff)!important}
  .picture-words-mode-card--match::before{background:#f0b35e}
  .picture-words-mode-card--match.is-selected{border-color:#eca350!important;background:linear-gradient(180deg,#fff4e8,#fff)!important;box-shadow:0 0 0 2px rgba(236,163,80,.10)!important}
  .picture-words-mode-card--choice{border-color:#f3d3cd!important;background:linear-gradient(180deg,#fff7f5,#fff)!important}
  .picture-words-mode-card--choice::before{background:#ec8d83}
  .picture-words-mode-card--choice.is-selected{border-color:#eb8d83!important;background:linear-gradient(180deg,#ffefec,#fff)!important;box-shadow:0 0 0 2px rgba(235,141,131,.10)!important}
  .pw-config-visual{
    width:58px;height:56px;border-radius:13px;background:rgba(255,255,255,.86);border:1px solid rgba(170,190,212,.48);
    display:flex;align-items:center;justify-content:center;gap:4px;padding:5px;box-sizing:border-box;overflow:hidden
  }
  .pw-config-visual img{width:25px;height:25px;object-fit:contain;flex:0 0 auto}
  .pw-config-boxes{display:flex;gap:2px}.pw-config-boxes i{width:6px;height:10px;border:1px solid #8294a8;background:#fff}
  .pw-config-line{width:9px;height:2px;background:#e6a347;border-radius:999px;position:relative}
  .pw-config-line::after{content:"";position:absolute;right:-2px;top:-2px;border-left:4px solid #e6a347;border-top:3px solid transparent;border-bottom:3px solid transparent}
  .pw-config-word{font-size:6.5px;font-weight:950;color:#8b672e;white-space:nowrap}
  .pw-config-options{display:grid;gap:2px}.pw-config-options i{width:12px;height:4px;border:1px solid #a8b5c4;border-radius:999px;background:#fff}.pw-config-options i.correct{border-color:#e5887c;background:#fff0ed}

  /* Content drawer: exercise type belongs here because it regenerates content. */
  .words-pw-mode-block{margin:0 0 14px;padding:12px;border:1px solid #dde7f0;border-radius:15px;background:#fbfdff}
  .words-pw-mode-block[hidden]{display:none!important}
  .words-pw-mode-label{display:block;margin-bottom:8px;color:#74889c;font-size:9px;font-weight:900;letter-spacing:.06em}
  .words-pw-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .words-pw-mode{
    min-height:48px;padding:7px 9px;border:1px solid #dbe5ef;border-radius:11px;background:#fff;color:#365574;
    display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;box-shadow:none
  }
  .words-pw-mode span{width:24px;height:24px;border-radius:8px;background:#f1f5fb;display:grid;place-items:center;font-weight:950;color:#587391}
  .words-pw-mode b{font-size:10px}
  .words-pw-mode.is-selected{border-color:#8fb0ea;background:#f4f8ff;box-shadow:0 0 0 2px rgba(77,122,207,.07)}
  .words-pw-mode.is-selected span{background:#e6efff;color:#2d69f6}

  /* Saved-project thumbnails now reflect the actual Picture Words mode. */
  .project-thumb-picturewords{grid-template-columns:1fr 1fr!important}
  .project-thumb-picturewords .pw-thumb-pics img{width:27px!important;height:27px!important}
  .pw-thumb-match{grid-template-columns:auto 12px auto!important}
  .pw-thumb-link{width:12px;height:2px;background:#e5a041;border-radius:999px;position:relative}
  .pw-thumb-link::after{content:"";position:absolute;right:-2px;top:-2px;border-left:4px solid #e5a041;border-top:3px solid transparent;border-bottom:3px solid transparent}
  .pw-thumb-word{font-size:6px;font-weight:950;color:#8c6a32;background:#fff3df;border-radius:999px;padding:2px 4px}
  .pw-thumb-choice{grid-template-columns:1fr .8fr!important}
  .pw-thumb-options{display:grid;gap:2px;justify-content:center}.pw-thumb-options i{width:14px;height:4px;border:1px solid #9aa9b9;border-radius:999px;background:#fff}.pw-thumb-options i.active{border-color:#e7867b;background:#fff0ed}
}

/* Match mode: one clear mechanic — write the picture number beside the word. */
.pw-match-word{
  grid-template-columns:minmax(0,1fr) auto!important;
}
.pw-match-line{min-width:34px}
.pw-match-answer::before{content:"№ ";font-weight:700;color:#64748b}

@media screen and (max-width:760px){
  .picture-words-mode-card{min-height:88px!important;grid-template-columns:60px minmax(0,1fr)!important}
  .pw-config-visual{width:52px;height:50px}
  .words-pw-mode-grid{grid-template-columns:1fr}
  /* Mobile preview may stack the two match columns; print keeps the two-column worksheet. */
  .pw-match-grid{grid-template-columns:1fr!important;gap:12px!important}
  .pw-match-divider{width:100%!important;height:1px!important;min-height:1px!important}
  .pw-match-word{grid-template-columns:minmax(0,1fr) auto!important}
  .pw-match-line,.pw-match-answer{grid-column:2!important;justify-self:end!important}
}

@media print{
  .pw-match-word{grid-template-columns:minmax(0,1fr) auto!important}
}

/* ============================================================
   v5.35 — Maze production module
   ============================================================ */
@media screen{
  .module-maze.available .module-select-state{background:#6da985!important}
  .quick-maze-modes{margin:0 0 4px;padding:2px 0 4px}
  .quick-maze-modes[hidden]{display:none!important}
  .quick-maze-label{display:block;margin:0 0 10px;color:#74889c;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
  .quick-maze-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .quick-maze-card{
    position:relative;min-height:112px;padding:15px 16px;border:1px solid #dbe7df;border-radius:19px;
    display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:14px;text-align:left;
    background:linear-gradient(180deg,#fbfefc 0%,#fff 100%);box-shadow:0 7px 17px rgba(54,91,67,.04);color:#355777
  }
  .quick-maze-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:19px 0 0 19px;background:#8bb99b}
  .quick-maze-card:hover{transform:translateY(-1px);border-color:#aecfba;box-shadow:0 10px 20px rgba(54,91,67,.08)}
  .quick-maze-card.is-selected{border-color:#75ae88;background:linear-gradient(180deg,#f1faf4 0%,#fff 100%);box-shadow:0 0 0 2px rgba(92,155,113,.10),0 12px 24px rgba(54,91,67,.08)}
  .quick-maze-card--easy::before{background:#7ab5e7}.quick-maze-card--easy{border-color:#d5e7f5;background:linear-gradient(180deg,#f6fbff,#fff)}
  .quick-maze-card--easy.is-selected{border-color:#7ab5e7;background:linear-gradient(180deg,#edf7ff,#fff)}
  .quick-maze-card--standard::before{background:#7eae8e}
  .quick-maze-card--hard::before{background:#d69a70}.quick-maze-card--hard{border-color:#f0ddcf;background:linear-gradient(180deg,#fff9f5,#fff)}
  .quick-maze-card--hard.is-selected{border-color:#d69a70;background:linear-gradient(180deg,#fff3eb,#fff)}
  .quick-maze-card b{display:block;margin-bottom:5px;color:#294966;font-size:14px}.quick-maze-card small{display:block;color:#7e91a4;font-size:10px;line-height:1.3;font-weight:650}
  .quick-maze-mini{width:82px;height:68px;border:1px solid #dfe8e2;border-radius:15px;background:#fff;display:grid;grid-template-columns:24px 1fr 24px;gap:5px;align-items:center;padding:0 7px;overflow:hidden}
  .quick-maze-mini img{width:24px;height:24px;object-fit:contain}.maze-mini-path{height:34px;border:2px solid #8295a7;border-left:0;border-right:0;position:relative;opacity:.85}
  .maze-mini-path::before,.maze-mini-path::after{content:"";position:absolute;width:12px;height:15px;border:2px solid #8295a7;background:#fff}
  .maze-mini-path::before{left:3px;top:4px;border-top:0}.maze-mini-path::after{right:2px;bottom:3px;border-bottom:0}
  .maze-mini-path.easy{height:22px}.maze-mini-path.hard{height:42px}.maze-mini-path.hard::before{height:24px;top:1px}.maze-mini-path.hard::after{height:26px;bottom:1px}

  .maze-config-section:not([hidden]){display:block;margin-top:16px;padding:18px;border:1px solid #dce9e0;border-radius:20px;background:linear-gradient(180deg,#fff 0%,#fbfefc 100%);box-shadow:0 8px 22px rgba(54,91,67,.045)}
  .maze-difficulty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
  .maze-difficulty-card{min-height:72px;padding:11px 12px;border:1px solid #dfe7e2;border-radius:14px;background:#fff;text-align:left;color:#36516c;box-shadow:none}
  .maze-difficulty-card b{display:block;font-size:12px;margin-bottom:4px;color:#294966}.maze-difficulty-card small{display:block;font-size:9px;color:#8495a7;font-weight:650}
  .maze-difficulty-card:hover{border-color:#a9cdb6;background:#fbfefc}.maze-difficulty-card.is-selected{border-color:#75ae88;background:#f1faf4;box-shadow:0 0 0 2px rgba(92,155,113,.08)}
  .maze-character-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
  .maze-character-card{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px 12px;align-items:center;padding:12px;border:1px solid #e1e8ed;border-radius:16px;background:#fff}
  .maze-character-card select{grid-column:1/-1;width:100%;min-height:38px;border:1px solid #d6e0e9;border-radius:10px;background:#fff;padding:0 10px;color:#355777;font-weight:750}
  .maze-character-card b{display:block;color:#294966;font-size:12px;margin-bottom:3px}.maze-character-card small{display:block;color:#8798a9;font-size:9px;line-height:1.3;font-weight:650}
  .maze-character-preview{width:56px;height:56px;border-radius:15px;background:#f2f8f4;border:1px solid #d5e8dc;display:grid;place-items:center}
  .maze-character-preview img{width:45px;height:45px;object-fit:contain}.maze-config-note{margin:10px 2px 0;color:#7c8fa2;font-size:9px;line-height:1.4}

  .worksheet.exercise-maze .clue-sections{display:none!important}
  .worksheet.exercise-maze .crossword-area{display:block!important;width:100%;margin-top:12px!important;break-inside:avoid;page-break-inside:avoid}
  .maze-sheet{width:100%;max-width:100%;color:#172033}.maze-work{width:100%;display:grid;gap:9px;justify-items:center}
  .maze-legend{width:min(100%,720px);display:flex;justify-content:space-between;align-items:center;padding:0 5px}
  .maze-legend span{display:flex;align-items:center;gap:7px}.maze-legend img{width:42px;height:42px;object-fit:contain}.maze-legend i{font-style:normal;font-size:9px;font-weight:950;letter-spacing:.08em;color:#60758a}
  .maze-board{position:relative;width:min(100%,720px);aspect-ratio:var(--maze-aspect);background:#fff;border-radius:9px}
  .maze-svg{width:100%;height:100%;display:block;overflow:visible}.maze-bg{fill:#fff}.maze-walls{fill:none;stroke:#172033;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
  .maze-solution-route{fill:none;stroke:#e57669;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;opacity:.72}
  .maze-marker{position:absolute;width:clamp(24px,5.1%,46px);height:auto;max-height:46px;object-fit:contain;transform:translate(-50%,-50%);z-index:3;background:#fff;border:1px solid #dbe4ea;border-radius:10px;padding:2px;box-sizing:border-box;box-shadow:0 2px 5px rgba(42,62,84,.08)}
  .maze-marker-start{outline:2px solid rgba(91,160,116,.16)}.maze-marker-goal{outline:2px solid rgba(229,118,105,.14)}

  .project-thumb-maze{display:grid!important;grid-template-columns:28px 1fr 28px!important;align-items:center!important;gap:5px!important;padding:6px!important}
  .maze-thumb-icon{display:grid;place-items:center}.maze-thumb-icon img{width:25px;height:25px;object-fit:contain}
  .maze-thumb-grid{height:38px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);border:1px solid #70849a;background:#fff}
  .maze-thumb-grid i{border-right:1px solid #9eacb9;border-bottom:1px solid #9eacb9}.maze-thumb-grid i:nth-child(2),.maze-thumb-grid i:nth-child(5){border-bottom-color:transparent}.maze-thumb-grid i:nth-child(4),.maze-thumb-grid i:nth-child(8){border-right-color:transparent}
  .library-type-badge.maze{background:#eef8f1;color:#4f8561}
}

@media screen and (max-width:900px){
  .quick-maze-grid{grid-template-columns:1fr}.quick-maze-card{min-height:94px;grid-template-columns:80px minmax(0,1fr)}
  .maze-character-grid{grid-template-columns:1fr}.maze-difficulty-grid{grid-template-columns:1fr}.maze-difficulty-card{min-height:60px}
}
@media screen and (max-width:620px){
  .quick-maze-card{padding:12px 13px}.quick-maze-mini{width:72px;height:58px}.quick-maze-card b{font-size:13px}
  .maze-config-section:not([hidden]){padding:14px 12px}.maze-legend img{width:34px;height:34px}.maze-board{width:100%}.maze-walls{stroke-width:4}.maze-solution-route{stroke-width:9}
}

@media print{
  .worksheet.exercise-maze .crossword-area{margin-top:3mm!important}
  .maze-work{gap:2mm}.maze-legend{width:174mm;padding:0 1mm}.maze-legend img{width:11mm;height:11mm}.maze-legend i{font-size:8pt}
  .maze-board{width:174mm;max-height:146mm;border-radius:0}
  .maze-walls{stroke:#111;stroke-width:1.15mm}.maze-solution-route{stroke:#222;stroke-width:2.4mm;opacity:.55}
  .maze-marker{width:8.5mm;max-height:8.5mm;border:.25mm solid #888;border-radius:1.5mm;padding:.4mm;box-shadow:none;outline:none}
  .project-thumb-maze img{filter:none!important}
}
@media screen{
  body[data-exercise-type="maze"] #configPanel .word-config-only{display:none!important}
  body[data-exercise-type="maze"] #configPanel .creator-basics{grid-template-columns:1fr!important}
  body[data-exercise-type="maze"] #configPanel .title-box{grid-column:1!important}
}

/* ============================================================
   v5.35.1 — Maze UX cleanup
   ============================================================ */
@media screen{
  /* First-letter help is never relevant to a maze. */
  body[data-exercise-type="maze"] #firstLetterSetting,
  body[data-exercise-type="maze"] #firstLetterQuick{
    display:none!important;
  }

  /* The Maze button on the result toolbar opens a focused content drawer. */
  body.mode-result.drawer-open.maze-content-drawer #configPanel .setup-basics-section{
    display:block!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.mode-result.drawer-open.maze-content-drawer #configPanel .setup-basics-section > .setup-section-head,
  body.mode-result.drawer-open.maze-content-drawer #configPanel .setup-basics-section > .creator-basics,
  body.mode-result.drawer-open.maze-content-drawer #configPanel #advancedConfig,
  body.mode-result.drawer-open.maze-content-drawer #configPanel .word-config-only{
    display:none!important;
  }
  body.mode-result.drawer-open.maze-content-drawer #configPanel #mazeConfigSection{
    display:block!important;
    margin-top:0!important;
  }
  body.mode-result.drawer-open.maze-content-drawer #configPanel .config-scroll-body{
    padding-top:18px!important;
  }
  body.mode-result.drawer-open.maze-content-drawer #configPanel #applySettings{
    display:flex!important;
  }

  /* Give the Start/Goal legend some breathing room above the maze. */
  .maze-work{gap:18px!important}
  .maze-legend{padding:0 10px}

  /* Hero and goal sit outside the actual maze, aligned with the open entrance/exit. */
  .maze-board-shell{
    position:relative;
    width:min(100%,840px);
    padding:0 58px;
    box-sizing:border-box;
  }
  .maze-board{
    position:relative;
    width:100%!important;
    aspect-ratio:var(--maze-aspect);
    background:#fff;
    border-radius:9px;
  }
  .maze-marker{
    width:48px;
    max-height:48px;
    transform:translateY(-50%);
  }
  .maze-marker-start{left:4px!important}
  .maze-marker-goal{right:4px!important;left:auto!important}

  .maze-character-card select optgroup{font-weight:900;color:#4b657d}
  .maze-character-card select option{font-weight:650;color:#355777}
}

@media screen and (max-width:620px){
  .maze-work{gap:14px!important}
  .maze-board-shell{padding:0 43px}
  .maze-marker{width:36px;max-height:36px}
  .maze-marker-start{left:2px!important}.maze-marker-goal{right:2px!important}
}

@media print{
  .maze-work{gap:4mm!important}
  .maze-legend{width:174mm;padding:0 1mm}
  .maze-board-shell{position:relative;width:174mm;padding:0 12mm;box-sizing:border-box}
  .maze-board{width:100%!important;max-height:146mm;border-radius:0}
  .maze-marker{width:9mm;max-height:9mm;transform:translateY(-50%);border:.25mm solid #888;border-radius:1.5mm;padding:.4mm;box-shadow:none;outline:none}
  .maze-marker-start{left:1mm!important}.maze-marker-goal{right:1mm!important;left:auto!important}
}


/* ============================================================
   v5.35.2 — Maze print + geometry polish
   ============================================================ */
@media screen{
  /* Maze uses the full sheet width in landscape instead of the crossword
     two-column clues/content composition. */
  .worksheet.orientation-landscape.exercise-maze{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "alphabet"
      "head"
      "crossword"!important;
    column-gap:0!important;
    justify-items:stretch!important;
  }
  .worksheet.orientation-landscape.exercise-maze .alphabet-strip{grid-area:alphabet!important}
  .worksheet.orientation-landscape.exercise-maze .print-head{grid-area:head!important}
  .worksheet.orientation-landscape.exercise-maze .crossword-area{
    grid-area:crossword!important;
    width:100%!important;
    margin-top:22px!important;
    justify-self:stretch!important;
    justify-content:center!important;
  }

  /* A little more breathing room below START / GOAL. */
  .worksheet.exercise-maze .maze-work{gap:26px!important}

  /* Center the maze, keep the actual picture markers clearly outside it. */
  .worksheet.exercise-maze .maze-board-shell{
    width:min(100%,860px)!important;
    padding:0 72px!important;
    margin:0 auto!important;
  }
  .worksheet.orientation-landscape.exercise-maze .maze-board-shell{
    width:min(100%,940px)!important;
    padding:0 78px!important;
  }
  .worksheet.exercise-maze .maze-board{
    width:100%!important;
    aspect-ratio:var(--maze-aspect)!important;
    margin:0 auto!important;
  }
  .worksheet.exercise-maze .maze-legend{
    width:min(100%,716px)!important;
    padding:0!important;
  }
  .worksheet.orientation-landscape.exercise-maze .maze-legend{
    width:min(100%,784px)!important;
  }

  /* The artwork should feel like part of the worksheet, not UI chips. */
  .worksheet.exercise-maze .maze-marker{
    width:52px!important;
    max-height:52px!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    padding:0!important;
    box-shadow:none!important;
    outline:0!important;
  }
  .worksheet.exercise-maze .maze-marker-start{left:8px!important}
  .worksheet.exercise-maze .maze-marker-goal{right:8px!important;left:auto!important}

  /* Slightly finer walls are easier on the eye and leave more open corridor. */
  .worksheet.exercise-maze .maze-walls{stroke-width:4!important}
}

@media screen and (max-width:620px){
  .worksheet.exercise-maze .maze-work{gap:18px!important}
  .worksheet.exercise-maze .maze-board-shell{padding:0 48px!important}
  .worksheet.exercise-maze .maze-marker{width:38px!important;max-height:38px!important}
  .worksheet.exercise-maze .maze-marker-start{left:4px!important}
  .worksheet.exercise-maze .maze-marker-goal{right:4px!important}
}

@media print{
  /* Maze print must define its own SVG presentation. The screen-only SVG
     rules must not fall back to SVG's default black rect fill. */
  .worksheet.exercise-maze .maze-work{
    gap:6mm!important;
    justify-items:center!important;
  }
  .worksheet.exercise-maze .maze-board-shell{
    position:relative!important;
    width:184mm!important;
    padding:0 14mm!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
    background:#fff!important;
  }
  .worksheet.exercise-maze .maze-board{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:var(--maze-aspect)!important;
    margin:0 auto!important;
    background:#fff!important;
    border-radius:0!important;
  }
  .worksheet.exercise-maze .maze-svg{
    display:block!important;
    width:100%!important;
    height:100%!important;
    overflow:visible!important;
    background:#fff!important;
  }
  .worksheet.exercise-maze .maze-bg{fill:#fff!important;stroke:none!important}
  .worksheet.exercise-maze .maze-walls{
    fill:none!important;
    stroke:#111!important;
    stroke-width:.85mm!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
    vector-effect:non-scaling-stroke!important;
  }
  .worksheet.exercise-maze .maze-solution-route{
    fill:none!important;
    stroke:#222!important;
    stroke-width:2.1mm!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
    opacity:.55!important;
    vector-effect:non-scaling-stroke!important;
  }
  .worksheet.exercise-maze .maze-legend{
    width:156mm!important;
    padding:0!important;
    margin:0 auto!important;
  }
  .worksheet.exercise-maze .maze-marker{
    width:10mm!important;
    max-height:10mm!important;
    transform:translateY(-50%)!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    padding:0!important;
    box-shadow:none!important;
    outline:0!important;
  }
  .worksheet.exercise-maze .maze-marker-start{left:1.5mm!important}
  .worksheet.exercise-maze .maze-marker-goal{right:1.5mm!important;left:auto!important}

  /* Landscape Maze is a centered single-column worksheet, not the crossword
     36/64 clues-grid. */
  .worksheet.orientation-landscape.exercise-maze{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:
      "alphabet"
      "head"
      "crossword"!important;
    column-gap:0!important;
    justify-items:stretch!important;
  }
  .worksheet.orientation-landscape.exercise-maze .alphabet-strip{grid-area:alphabet!important}
  .worksheet.orientation-landscape.exercise-maze .print-head{grid-area:head!important}
  .worksheet.orientation-landscape.exercise-maze .crossword-area{
    grid-area:crossword!important;
    width:100%!important;
    margin:3mm 0 0!important;
    justify-self:stretch!important;
    justify-content:center!important;
  }
  .worksheet.orientation-landscape.exercise-maze .maze-board-shell{
    width:230mm!important;
    padding:0 16mm!important;
  }
  .worksheet.orientation-landscape.exercise-maze .maze-legend{
    width:198mm!important;
  }
}


/* ============================================================
   v5.35.3 — Maze final line weight + robust print lanes
   ============================================================ */
/* Maze never exposes first-letter help. Keep this outside media queries so
   no drawer/layout rule can re-enable the row. */
body[data-exercise-type="maze"] #firstLetterSetting,
body[data-exercise-type="maze"] #firstLetterQuick{
  display:none!important;
}

@media screen{
  .worksheet.exercise-maze .maze-walls{
    stroke-width:3.2!important;
  }
  .worksheet.exercise-maze .maze-solution-route{
    stroke-width:7!important;
    opacity:.66!important;
  }

  /* Three real columns make the artwork independent from the SVG geometry:
     hero | maze | goal. This also gives printing a stable layout. */
  .worksheet.exercise-maze .maze-board-shell{
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr) 64px!important;
    align-items:stretch!important;
    width:min(100%,920px)!important;
    padding:0!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
  }
  .worksheet.orientation-landscape.exercise-maze .maze-board-shell{
    width:min(100%,980px)!important;
    grid-template-columns:68px minmax(0,1fr) 68px!important;
  }
  .worksheet.exercise-maze .maze-marker-lane{
    position:relative!important;
    min-width:0!important;
    align-self:stretch!important;
  }
  .worksheet.exercise-maze .maze-marker-lane .maze-marker{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    transform:translate(-50%,-50%)!important;
    width:52px!important;
    max-height:52px!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    padding:0!important;
    box-shadow:none!important;
    outline:0!important;
  }
  .worksheet.exercise-maze .maze-board{
    grid-column:2!important;
    min-width:0!important;
  }
  .worksheet.exercise-maze .maze-legend{
    width:min(100%,792px)!important;
  }
  .worksheet.orientation-landscape.exercise-maze .maze-legend{
    width:min(100%,844px)!important;
  }
}

@media screen and (max-width:620px){
  .worksheet.exercise-maze .maze-board-shell{
    grid-template-columns:46px minmax(0,1fr) 46px!important;
    width:100%!important;
  }
  .worksheet.exercise-maze .maze-marker-lane .maze-marker{
    width:38px!important;
    max-height:38px!important;
  }
}

@media print{
  /* Finer strokes on paper. */
  .worksheet.exercise-maze .maze-walls{
    stroke-width:.60mm!important;
  }
  .worksheet.exercise-maze .maze-solution-route{
    stroke:#222!important;
    stroke-width:1.35mm!important;
    opacity:.52!important;
  }

  .worksheet.exercise-maze .maze-work{
    gap:4.5mm!important;
    justify-items:center!important;
  }
  .worksheet.exercise-maze .maze-board-shell{
    display:grid!important;
    grid-template-columns:10mm minmax(0,1fr) 10mm!important;
    align-items:stretch!important;
    position:relative!important;
    width:174mm!important;
    padding:0!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
    background:#fff!important;
  }
  .worksheet.exercise-maze .maze-marker-lane{
    position:relative!important;
    min-width:0!important;
    align-self:stretch!important;
  }
  .worksheet.exercise-maze .maze-marker-lane .maze-marker{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    transform:translate(-50%,-50%)!important;
    width:8.5mm!important;
    max-height:8.5mm!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    padding:0!important;
    box-shadow:none!important;
    outline:0!important;
  }
  .worksheet.exercise-maze .maze-board{
    grid-column:2!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    min-width:0!important;
    aspect-ratio:var(--maze-aspect)!important;
  }
  .worksheet.exercise-maze .maze-legend{
    width:154mm!important;
  }

  /* Landscape intentionally uses a smaller maze than the maximum available
     width. The reserved vertical space keeps a clear safe gap above Name/Date. */
  .worksheet.orientation-landscape.exercise-maze .crossword-area{
    margin-top:3mm!important;
    padding-bottom:8mm!important;
    box-sizing:border-box!important;
  }
  .worksheet.orientation-landscape.exercise-maze .maze-board-shell{
    width:190mm!important;
    grid-template-columns:12mm minmax(0,1fr) 12mm!important;
  }
  .worksheet.orientation-landscape.exercise-maze .maze-legend{
    width:166mm!important;
  }
  .worksheet.orientation-landscape.exercise-maze .maze-marker-lane .maze-marker{
    width:9mm!important;
    max-height:9mm!important;
  }
}

/* ============================================================
   v5.35.4 — Maze marker labels + landscape print scale
   ============================================================ */
@media screen{
  /* START / GOAL now travel with the actual marker, so the label always
     describes the real entrance / exit row rather than a page corner. */
  .worksheet.exercise-maze .maze-marker-group{
    position:absolute!important;
    left:50%!important;
    width:52px!important;
    height:52px!important;
    transform:translate(-50%,-50%)!important;
    display:block!important;
    overflow:visible!important;
    z-index:3!important;
  }
  .worksheet.exercise-maze .maze-marker-group .maze-marker{
    position:static!important;
    display:block!important;
    width:52px!important;
    height:52px!important;
    max-height:none!important;
    transform:none!important;
    object-fit:contain!important;
  }
  .worksheet.exercise-maze .maze-marker-label{
    position:absolute!important;
    left:50%!important;
    bottom:calc(100% + 6px)!important;
    transform:translateX(-50%)!important;
    white-space:nowrap!important;
    font-style:normal!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.04em!important;
    color:#64748b!important;
  }
  .worksheet.exercise-maze .maze-legend{display:none!important}
}

@media screen and (max-width:620px){
  .worksheet.exercise-maze .maze-marker-group{
    width:38px!important;
    height:38px!important;
  }
  .worksheet.exercise-maze .maze-marker-group .maze-marker{
    width:38px!important;
    height:38px!important;
  }
  .worksheet.exercise-maze .maze-marker-label{
    bottom:calc(100% + 4px)!important;
    font-size:8px!important;
  }
}

@media print{
  .worksheet.exercise-maze .maze-marker-group{
    position:absolute!important;
    left:50%!important;
    width:8.5mm!important;
    height:8.5mm!important;
    transform:translate(-50%,-50%)!important;
    display:block!important;
    overflow:visible!important;
    z-index:3!important;
  }
  .worksheet.exercise-maze .maze-marker-group .maze-marker{
    position:static!important;
    display:block!important;
    width:8.5mm!important;
    height:8.5mm!important;
    max-height:none!important;
    transform:none!important;
    object-fit:contain!important;
  }
  .worksheet.exercise-maze .maze-marker-label{
    position:absolute!important;
    left:50%!important;
    bottom:calc(100% + 1.4mm)!important;
    transform:translateX(-50%)!important;
    white-space:nowrap!important;
    font-style:normal!important;
    font-size:7pt!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.02em!important;
    color:#333!important;
  }
  .worksheet.exercise-maze .maze-legend{display:none!important}

  /* Use a little more of the landscape page while keeping the footer-safe
     vertical reserve introduced in v5.35.3. */
  .worksheet.orientation-landscape.exercise-maze .maze-board-shell{
    width:208mm!important;
    grid-template-columns:12mm minmax(0,1fr) 12mm!important;
  }
  .worksheet.orientation-landscape.exercise-maze .maze-marker-group{
    width:9mm!important;
    height:9mm!important;
  }
  .worksheet.orientation-landscape.exercise-maze .maze-marker-group .maze-marker{
    width:9mm!important;
    height:9mm!important;
  }
}


/* ============================================================
   v1.0.2 — Contextual worksheet top strip refresh
   Language exercises keep the Bulgarian alphabet.
   Maze and Choose Path now use custom visual strips with the
   same height footprint: dog → house, matching the approved board.
   ============================================================ */
.alphabet-strip{
  display:block!important;
}
.worksheet-strip-content{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
}
.worksheet-strip-content > span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  flex:1 1 0;
}
.strip-maze,
.strip-choose-path,
.strip-connect-dots{display:none}
.strip-hero-goal-icon{
  width:20px;
  height:20px;
  object-fit:contain;
  flex:0 0 auto;
}
.strip-maze,
.strip-choose-path{
  gap:10px;
  min-height:20px;
}
.strip-maze-trail,
.strip-route-mini{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.strip-maze-trail{
  gap:clamp(7px,1.3vw,13px);
}
.strip-paw-print{
  width:16px;
  height:14px;
  fill:#94a3b8;
  opacity:.95;
  flex:0 0 auto;
}
.strip-paw-print:nth-child(odd){transform:translateY(1px) rotate(-12deg)}
.strip-paw-print:nth-child(even){transform:translateY(-1px) rotate(12deg)}
.strip-route-mini svg{
  display:block;
  width:100%;
  height:16px;
  overflow:visible;
}
.strip-route-mini .route-line{
  fill:none;
  stroke-linecap:round;
  stroke-width:2.45;
}
.strip-route-mini .route-line-a{stroke:#d9a11d}
.strip-route-mini .route-line-b{stroke:#bfd2ea;stroke-dasharray:3.2 3.9}
.strip-route-mini .route-line-c{stroke:#5f8fdb;opacity:.92}
/* Connect Dots worksheet strip: same compact height as the alphabet strip. */
.strip-connect-dots{
  justify-content:center;
  min-height:12px!important;
  height:12px;
  overflow:visible;
}
.strip-dots-mini{
  display:block;
  width:100%;
  height:12px;
  overflow:visible;
}
.strip-dots-path{
  fill:none;
  stroke:#17212b;
  stroke-width:2.15;
  stroke-linecap:round;
  stroke-dasharray:1 7;
}
.strip-dots-point{fill:#17212b}
.strip-dots-label{
  fill:#17212b;
  font:900 9px Arial,sans-serif;
}
.strip-dots-pencil{image-rendering:auto}
body[data-exercise-type="maze"] .strip-alphabet,
body[data-exercise-type="choose-path"] .strip-alphabet,
body[data-exercise-type="connect-dots"] .strip-alphabet{display:none!important}
body[data-exercise-type="maze"] .strip-maze{display:flex!important}
body[data-exercise-type="choose-path"] .strip-choose-path{display:flex!important}
body[data-exercise-type="connect-dots"] .strip-connect-dots{display:flex!important}
@media screen and (max-width:900px){
  .strip-maze,
  .strip-choose-path{gap:8px}
  .strip-connect-dots{height:12px!important;min-height:12px!important}
  .strip-hero-goal-icon{width:18px;height:18px}
  .strip-paw-print{width:14px;height:12px}
  .strip-route-mini svg{height:15px}
}
@media print{
  .strip-hero-goal-icon{
    width:4.8mm!important;
    height:4.8mm!important;
  }
  .strip-maze,
  .strip-choose-path{
    gap:2.2mm!important;
    min-height:4.8mm!important;
  }
  .strip-connect-dots{height:3.2mm!important;min-height:3.2mm!important}
  .strip-dots-mini{height:3.2mm!important}
  .strip-paw-print{
    width:3.8mm!important;
    height:3.2mm!important;
    fill:#7f8ea3!important;
  }
  .strip-route-mini svg{height:4mm!important}
  .strip-route-mini .route-line{stroke-width:0.72mm!important}
}

/* ============================================================
   v5.36.0 — Unified maximum worksheet fit
   Every exercise fills the largest safe task area available on the sheet.
   ============================================================ */
@media screen{
  .worksheet.exercise-maze .maze-board-shell{
    width:var(--maze-fit-width,100%)!important;
    max-width:100%!important;
  }
}


/* ============================================================
   v5.36.1 — Task-first fit + print-safe crossword composition
   Main task may grow to the safe sheet area; clue pictures are capped.
   ============================================================ */
@media print{
  .worksheet.orientation-portrait.exercise-crossword{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto minmax(0,1fr)!important;
    grid-template-areas:
      "alphabet"
      "head"
      "clues"
      "crossword"!important;
    align-content:stretch!important;
  }
  .worksheet.orientation-portrait.exercise-crossword .alphabet-strip{grid-area:alphabet!important}
  .worksheet.orientation-portrait.exercise-crossword .print-head{grid-area:head!important}
  .worksheet.orientation-portrait.exercise-crossword .clue-sections{
    grid-area:clues!important;
    margin:4mm 0 2.5mm!important;
  }
  .worksheet.orientation-portrait.exercise-crossword .crossword-area{
    grid-area:crossword!important;
    min-height:0!important;
    height:100%!important;
    margin:1.5mm 0 0!important;
    align-items:flex-start!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  .worksheet.orientation-portrait.exercise-crossword .crossword-svg-wrap{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    min-height:0!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
  }
  .worksheet.orientation-portrait.exercise-crossword .crossword-svg{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
  }
  .worksheet.exercise-crossword .clue-pic img{
    max-width:22mm!important;
    max-height:22mm!important;
  }
}


/* ============================================================
   v5.36.2 — Helper-image scale + task spacing + match-row alignment
   The task remains the dominant element; clue/picture helpers stay compact.
   ============================================================ */
@media screen{
  /* More breathing room after the worksheet title/instruction. */
  .worksheet.exercise-crossword .clue-sections{margin-top:26px!important}
  .worksheet.exercise-picture-words .crossword-area{margin-top:26px!important}
  .worksheet.exercise-maze .crossword-area{margin-top:18px!important}

  /* Crossword clue pictures: intentionally secondary to the grid. */
  .worksheet.exercise-crossword .clue-pic img{
    width:min(var(--picSize),64px)!important;
    height:min(var(--picSize),64px)!important;
  }

  /* Picture Words: keep illustrations readable but smaller than the task UI. */
  .worksheet.exercise-picture-words .pw-picture img{
    width:min(calc(var(--picSize) * .88),60px)!important;
    height:min(calc(var(--picSize) * .88),60px)!important;
  }
  .worksheet.exercise-picture-words .pw-write-item.is-compact .pw-picture img{
    width:min(calc(var(--picSize) * .80),56px)!important;
    height:min(calc(var(--picSize) * .80),56px)!important;
  }
  .worksheet.exercise-picture-words .pw-write-item.is-tight .pw-picture img{
    width:min(calc(var(--picSize) * .74),52px)!important;
    height:min(calc(var(--picSize) * .74),52px)!important;
  }

  /* Match mode must align row-for-row across both columns. */
  .worksheet.exercise-picture-words .pw-match-grid{
    --pw-match-row-height:var(--pw-match-row-screen,clamp(64px,calc(var(--picSize) * .82 + 18px),78px));
  }
  .worksheet.exercise-picture-words .pw-match-side{
    display:grid!important;
    grid-auto-rows:var(--pw-match-row-height)!important;
    gap:8px!important;
  }
  .worksheet.exercise-picture-words .pw-match-picture,
  .worksheet.exercise-picture-words .pw-match-word{
    height:100%!important;
    min-height:0!important;
    box-sizing:border-box!important;
    align-self:stretch!important;
  }
  .worksheet.exercise-picture-words .pw-match-picture img{
    width:min(calc(var(--picSize) * .80),54px)!important;
    height:min(calc(var(--picSize) * .80),54px)!important;
  }
}

@media print{
  /* Preserve the extra title-to-task breathing room on paper. */
  .worksheet.exercise-crossword .clue-sections{margin-top:5mm!important}
  .worksheet.exercise-picture-words .crossword-area{margin-top:4.5mm!important}

  /* Smaller print illustrations; the puzzle itself gets the page area. */
  .worksheet.exercise-crossword .clue-pic img{
    max-width:18mm!important;
    max-height:18mm!important;
  }
  .worksheet.exercise-picture-words .pw-picture img{
    max-width:16mm!important;
    max-height:16mm!important;
  }
  .worksheet.exercise-picture-words .pw-match-side{
    display:grid!important;
    grid-auto-rows:var(--pw-match-row-print,17mm)!important;
    gap:1.2mm!important;
  }
  .worksheet.exercise-picture-words .pw-match-picture,
  .worksheet.exercise-picture-words .pw-match-word{
    height:var(--pw-match-row-print,17mm)!important;
    min-height:0!important;
    box-sizing:border-box!important;
    align-self:stretch!important;
  }
  .worksheet.exercise-picture-words .pw-match-picture img{
    width:min(var(--picSize),14mm)!important;
    height:min(var(--picSize),14mm)!important;
  }
  .worksheet.exercise-picture-words .pw-write-item{min-height:var(--pw-write-row-print,24mm)!important;}
  .worksheet.exercise-picture-words .pw-choice-item{min-height:var(--pw-choice-row-print,25mm)!important;}
}

.words-limit-notice{
  margin-top:10px;padding:9px 11px;border-radius:10px;background:#f6f9fc;border:1px solid #dfe8f1;color:#687d92;font-size:10px;font-weight:700;line-height:1.35
}
.words-limit-notice.at-limit{background:#fff8ed;border-color:#f1d5a7;color:#9a671e}

/* v5.36.3 — Count limits and compact high-count Picture Words rows */
@media screen{
  .worksheet.exercise-picture-words .pw-count-13 .pw-match-picture img,
  .worksheet.exercise-picture-words .pw-count-14 .pw-match-picture img{width:min(calc(var(--picSize) * .72),48px)!important;height:min(calc(var(--picSize) * .72),48px)!important}
  .worksheet.exercise-picture-words .pw-count-15 .pw-match-picture img,
  .worksheet.exercise-picture-words .pw-count-16 .pw-match-picture img{width:min(calc(var(--picSize) * .64),42px)!important;height:min(calc(var(--picSize) * .64),42px)!important}
}
@media print{
  .worksheet.exercise-picture-words .pw-count-13 .pw-match-picture img,
  .worksheet.exercise-picture-words .pw-count-14 .pw-match-picture img{max-width:11.5mm!important;max-height:11.5mm!important}
  .worksheet.exercise-picture-words .pw-count-15 .pw-match-picture img,
  .worksheet.exercise-picture-words .pw-count-16 .pw-match-picture img{max-width:9.5mm!important;max-height:9.5mm!important}
}

/* ============================================================
   v5.36.4 — Platform-wide WYSIWYG print
   The on-screen A4 worksheet is the canonical composition. Printing uses a
   frozen screen snapshot and scales the whole sheet uniformly into the
   printer-safe A4 area instead of recomposing individual exercise modules.
   ============================================================ */
@media print{
  body.print-wysiwyg .result-panel .worksheet-wrap > .worksheet{
    display:none!important;
  }
  body.print-wysiwyg #printBothPages{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    background:#fff!important;
  }
  body.print-wysiwyg #printBothPages .wysiwyg-print-page{
    position:relative!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    break-after:page!important;
    page-break-after:always!important;
    background:#fff!important;
  }
  body.print-wysiwyg #printBothPages .wysiwyg-print-page:last-child{
    break-after:auto!important;
    page-break-after:auto!important;
  }
  body.print-wysiwyg #printBothPages .wysiwyg-print-page-portrait{
    height:283mm!important;
  }
  body.print-wysiwyg #printBothPages .wysiwyg-print-page-landscape{
    height:196mm!important;
  }
  body.print-wysiwyg #printBothPages .wysiwyg-print-sheet{
    flex:0 0 auto!important;
    transform:none!important;
    transform-origin:top center!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  body.print-wysiwyg #printBothPages .wysiwyg-print-page-label{
    position:absolute!important;
    z-index:20!important;
    top:1mm!important;
    right:1.5mm!important;
    padding:.7mm 1.3mm!important;
    border:.25mm solid #cbd5e1!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#64748b!important;
    font:800 7pt/1 Arial,Helvetica,sans-serif!important;
    letter-spacing:.02em!important;
  }
}

/* ============================================================
   v5.36.5 — Picture Words landscape capacity fit
   Landscape uses a denser, count-aware composition so high-count sheets
   remain fully inside the A4 preview. WYSIWYG print then freezes exactly
   that same composition.
   ============================================================ */
@media screen {
  /* Choice mode: from 9 items upward, three columns use landscape width
     instead of forcing too many tall rows down the page. */
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-9 .pw-choice-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-10 .pw-choice-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-11 .pw-choice-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-12 .pw-choice-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-13 .pw-choice-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-14 .pw-choice-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-15 .pw-choice-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-16 .pw-choice-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px 14px!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-9 .pw-choice-item,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-10 .pw-choice-item,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-11 .pw-choice-item,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-12 .pw-choice-item {
    min-height:94px!important;
    grid-template-columns:22px 42px minmax(0,1fr)!important;
    gap:5px 7px!important;
    padding:5px 3px 6px 0!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-13 .pw-choice-item,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-14 .pw-choice-item,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-15 .pw-choice-item,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-16 .pw-choice-item {
    min-height:84px!important;
    grid-template-columns:20px 36px minmax(0,1fr)!important;
    gap:4px 6px!important;
    padding:4px 2px 5px 0!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-9 .pw-choice-option,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-10 .pw-choice-option,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-11 .pw-choice-option,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-12 .pw-choice-option {
    min-height:23px!important;
    padding:3px 5px!important;
    font-size:10px!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-13 .pw-choice-option,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-14 .pw-choice-option,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-15 .pw-choice-option,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-16 .pw-choice-option {
    min-height:20px!important;
    padding:2px 4px!important;
    border-radius:5px!important;
    font-size:9px!important;
    line-height:1.08!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-13 .pw-choice-options,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-14 .pw-choice-options,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-15 .pw-choice-options,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-16 .pw-choice-options {
    gap:3px!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-9 .pw-choice-item .pw-picture img,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-10 .pw-choice-item .pw-picture img,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-11 .pw-choice-item .pw-picture img,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-12 .pw-choice-item .pw-picture img {
    width:min(calc(var(--picSize) * .66),40px)!important;
    height:min(calc(var(--picSize) * .66),40px)!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-13 .pw-choice-item .pw-picture img,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-14 .pw-choice-item .pw-picture img,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-15 .pw-choice-item .pw-picture img,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-16 .pw-choice-item .pw-picture img {
    width:min(calc(var(--picSize) * .56),34px)!important;
    height:min(calc(var(--picSize) * .56),34px)!important;
  }

  /* Write mode stays two-column (long words need width), but rows become
     progressively shorter at high counts. */
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-9 .pw-write-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-10 .pw-write-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-11 .pw-write-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-12 .pw-write-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-13 .pw-write-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-14 .pw-write-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-15 .pw-write-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-16 .pw-write-grid {
    gap:5px 20px!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-9 .pw-write-item,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-10 .pw-write-item,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-11 .pw-write-item,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-12 .pw-write-item {
    min-height:82px!important;
    padding:5px 2px 6px 0!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-13 .pw-write-item,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-14 .pw-write-item,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-15 .pw-write-item,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-16 .pw-write-item {
    min-height:68px!important;
    grid-template-columns:22px minmax(42px,54px) minmax(0,1fr)!important;
    gap:4px 6px!important;
    padding:4px 2px 5px 0!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-13 .pw-write-item .pw-picture img,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-14 .pw-write-item .pw-picture img,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-15 .pw-write-item .pw-picture img,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-16 .pw-write-item .pw-picture img {
    width:min(calc(var(--picSize) * .54),34px)!important;
    height:min(calc(var(--picSize) * .54),34px)!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-13 .pw-letter-box,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-14 .pw-letter-box,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-15 .pw-letter-box,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-16 .pw-letter-box {
    width:clamp(15px,calc(var(--cell) * .38),24px)!important;
    height:clamp(20px,calc(var(--cell) * .45),30px)!important;
    font-size:clamp(9px,calc(var(--cell) * .19),13px)!important;
  }

  /* Match mode has one row per item, so landscape needs genuinely compact
     rows at higher counts. Both sides still share exactly the same row size. */
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-9 .pw-match-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-10 .pw-match-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-11 .pw-match-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-12 .pw-match-grid {
    --pw-match-row-height:40px!important;
    gap:12px!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-13 .pw-match-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-14 .pw-match-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-15 .pw-match-grid,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-16 .pw-match-grid {
    --pw-match-row-height:31px!important;
    gap:10px!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-9 .pw-match-side,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-10 .pw-match-side,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-11 .pw-match-side,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-12 .pw-match-side {
    gap:3px!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-13 .pw-match-side,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-14 .pw-match-side,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-15 .pw-match-side,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-16 .pw-match-side {
    gap:2px!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-9 .pw-match-picture,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-10 .pw-match-picture,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-11 .pw-match-picture,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-12 .pw-match-picture,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-9 .pw-match-word,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-10 .pw-match-word,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-11 .pw-match-word,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-12 .pw-match-word {
    padding:2px 5px!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-13 .pw-match-picture,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-14 .pw-match-picture,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-15 .pw-match-picture,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-16 .pw-match-picture,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-13 .pw-match-word,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-14 .pw-match-word,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-15 .pw-match-word,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-16 .pw-match-word {
    padding:1px 4px!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-13 .pw-match-picture img,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-14 .pw-match-picture img,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-15 .pw-match-picture img,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-16 .pw-match-picture img {
    width:24px!important;
    height:24px!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-13 .pw-match-word b,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-14 .pw-match-word b,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-15 .pw-match-word b,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-16 .pw-match-word b {
    font-size:10px!important;
  }

  .worksheet.orientation-landscape.exercise-picture-words .pw-count-13 .pw-match-key,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-14 .pw-match-key,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-15 .pw-match-key,
  .worksheet.orientation-landscape.exercise-picture-words .pw-count-16 .pw-match-key {
    width:19px!important;
    height:19px!important;
    font-size:8px!important;
  }
}

/* ============================================================
   v5.36.6 — Picture Words portrait footer breathing room
   High-count portrait sheets keep a deliberate visual safety gap above
   Name/Date instead of filling the page to the last available pixel.
   ============================================================ */
@media screen {
  /* Choice mode: the common 13–16 item case needs only a modest reduction
     in row height to restore a clear bottom breathing area. */
  .worksheet.orientation-portrait.exercise-picture-words .pw-count-13 .pw-choice-item,
  .worksheet.orientation-portrait.exercise-picture-words .pw-count-14 .pw-choice-item,
  .worksheet.orientation-portrait.exercise-picture-words .pw-count-15 .pw-choice-item,
  .worksheet.orientation-portrait.exercise-picture-words .pw-count-16 .pw-choice-item {
    min-height:112px!important;
    padding-top:7px!important;
    padding-bottom:8px!important;
  }

  /* Write mode gets the same footer reserve while keeping enough height for
     letter cells and multi-word answers. */
  .worksheet.orientation-portrait.exercise-picture-words .pw-count-13 .pw-write-item,
  .worksheet.orientation-portrait.exercise-picture-words .pw-count-14 .pw-write-item,
  .worksheet.orientation-portrait.exercise-picture-words .pw-count-15 .pw-write-item,
  .worksheet.orientation-portrait.exercise-picture-words .pw-count-16 .pw-write-item {
    min-height:104px!important;
    padding-top:7px!important;
    padding-bottom:8px!important;
  }

  /* Match mode has one row per selected item on both sides. Keep the shared
     row contract, but lower it at high counts so both columns finish safely
     above the footer. */
  .worksheet.orientation-portrait.exercise-picture-words .pw-count-13 .pw-match-grid,
  .worksheet.orientation-portrait.exercise-picture-words .pw-count-14 .pw-match-grid {
    --pw-match-row-height:56px!important;
  }
  .worksheet.orientation-portrait.exercise-picture-words .pw-count-15 .pw-match-grid,
  .worksheet.orientation-portrait.exercise-picture-words .pw-count-16 .pw-match-grid {
    --pw-match-row-height:52px!important;
  }
  .worksheet.orientation-portrait.exercise-picture-words .pw-count-13 .pw-match-side,
  .worksheet.orientation-portrait.exercise-picture-words .pw-count-14 .pw-match-side,
  .worksheet.orientation-portrait.exercise-picture-words .pw-count-15 .pw-match-side,
  .worksheet.orientation-portrait.exercise-picture-words .pw-count-16 .pw-match-side {
    gap:5px!important;
  }
}
/* v5.40.1 — Choose Path V2 weave constraints
   Independent smooth freeform routes, continuous base strokes, geometry-selected
   inter-route crossings, local bridge overlays, one shared start and explicit X dead ends. */
.worksheet.exercise-choose-path .clue-sections{display:none!important}
#clues[hidden]{display:none!important}
.choose-path-sheet{width:100%;height:100%;display:flex;flex-direction:column}
.choose-path-work{flex:1;min-height:0;display:grid;align-items:center;justify-items:center;align-content:center;width:100%}
.choose-path-marker{min-height:0;height:100%;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;width:100%}
.choose-path-marker img{width:min(96px,90%);max-height:110px;object-fit:contain;transform:translateY(-8px)}
.choose-path-marker b{position:absolute;left:0;right:0;top:calc(50% + 54px);display:block;font-size:12px;letter-spacing:.08em;margin:0}
.choose-path-board{width:100%;max-width:100%;min-height:0;align-self:center;justify-self:stretch}
.choose-path-board-inner{width:100%;height:100%;display:grid;place-items:center;overflow:visible}
.choose-path-svg{display:block;width:100%;height:100%;overflow:visible}
.choose-path-v10 .choose-path-board{display:grid;place-items:center}
.choose-path-v10 .choose-path-svg{overflow:visible}
.choose-path-route-halo{fill:none;stroke:#fff;stroke-width:15.6px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.choose-path-route{fill:none;stroke:#222;stroke-width:3.8px;stroke-linecap:round;stroke-linejoin:round}
.choose-path-road{pointer-events:none}
.choose-path-road-edge{fill:none;stroke:#252525;stroke-width:10.4px;stroke-linecap:round;stroke-linejoin:round}
.choose-path-road-fill{fill:none;stroke:#fff;stroke-width:7.5px;stroke-linecap:round;stroke-linejoin:round}
.choose-path-road-axis{fill:none;stroke:#5b6470;stroke-width:1.25px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.5 3.8}
.choose-path-bridge-layer{pointer-events:none}
.choose-path-bridge-gap{fill:none;stroke:#fff;stroke-width:6.8px;stroke-linecap:butt;stroke-linejoin:round}
.choose-path-bridge{fill:none;stroke:#222;stroke-width:3.8px;stroke-linecap:round;stroke-linejoin:round}
.choose-path-start-trunk{fill:none;stroke:#222;stroke-width:3.8px;stroke-linecap:round}
.choose-path-start-dot{fill:#222}
.choose-path-dead-end circle{fill:#fff;stroke:#222;stroke-width:1.8px}
.choose-path-dead-end path{fill:none;stroke:#222;stroke-width:1.9px;stroke-linecap:round}
.choose-path-sheet.solution .choose-path-route:not(.solution){opacity:.20}
.choose-path-sheet.solution .choose-path-road:not(.solution){opacity:.18}
.choose-path-sheet.solution .choose-path-bridge-layer{display:none}
.choose-path-sheet.solution .choose-path-route-halo{display:none}
.choose-path-sheet.solution .choose-path-dead-end{opacity:.45}
.choose-path-sheet.solution .choose-path-route.solution{opacity:1;stroke:#111;stroke-width:5.2px}
.choose-path-sheet.solution .choose-path-road.solution{opacity:1}
.choose-path-sheet.solution .choose-path-road.solution .choose-path-road-edge{stroke:#111;stroke-width:10.9px}
.choose-path-sheet.solution .choose-path-road.solution .choose-path-road-axis{stroke:#111;stroke-width:1.55px;stroke-dasharray:none}
.choose-path-sheet.solution .choose-path-start-trunk{stroke-width:4.2px}

.choose-path-flow-horizontal .choose-path-work{grid-template-columns:clamp(54px,7.5%,82px) minmax(0,1fr) clamp(54px,7.5%,82px);gap:clamp(8px,1vw,16px);padding:8px 0 12px}
.choose-path-flow-horizontal .choose-path-board{aspect-ratio:112 / 72;height:auto}
.choose-path-flow-horizontal .choose-path-marker img{width:min(84px,88%);max-height:96px}
.choose-path-flow-horizontal .choose-path-marker b{font-size:11px;top:calc(50% + 46px)}

.choose-path-flow-vertical .choose-path-work{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:10px;padding:6px 0 8px}
.choose-path-flow-vertical .choose-path-marker{height:auto;min-height:68px}
.choose-path-flow-vertical .choose-path-marker img{width:min(80px,34vw);max-height:84px;transform:none}
.choose-path-flow-vertical .choose-path-marker b{position:static;margin-top:4px;font-size:11px}
.choose-path-flow-vertical .choose-path-marker{display:flex;flex-direction:column;gap:2px}
.choose-path-flow-vertical .choose-path-board{width:min(100%, 620px);aspect-ratio:72 / 112;justify-self:center}
.choose-path-flow-vertical .choose-path-board-inner{overflow:visible}
.worksheet.orientation-portrait.exercise-choose-path .choose-path-svg{width:155.56%;height:155.56%;transform:rotate(90deg);transform-origin:center center;flex:none}
.worksheet.orientation-landscape.exercise-choose-path .choose-path-svg{width:100%;height:100%;transform:none;transform-origin:center center;flex:none}

@media (max-width:760px){
  .choose-path-flow-horizontal .choose-path-work{grid-template-columns:clamp(46px,10%,66px) minmax(0,1fr) clamp(46px,10%,66px);gap:6px}
  .choose-path-flow-horizontal .choose-path-marker img{width:min(66px,90%);max-height:72px}
  .choose-path-flow-horizontal .choose-path-marker b{font-size:10px;top:calc(50% + 40px)}
  .choose-path-flow-vertical .choose-path-board{width:min(100%, 430px)}
  .choose-path-flow-vertical .choose-path-marker img{width:min(64px,28vw);max-height:66px}
}
body[data-exercise-type="choose-path"] #configPanel .word-config-only{display:none!important}
body[data-exercise-type="choose-path"] .strip-alphabet{display:none!important}

/* v5.40.1 — Choose Path focused result drawer + orientation safety */
@media screen{
  body[data-exercise-type="choose-path"] #firstLetterSetting,
  body[data-exercise-type="choose-path"] #firstLetterQuick{display:none!important}
  body.mode-result.drawer-open.path-content-drawer #configPanel .setup-basics-section{
    display:block!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important
  }
  body.mode-result.drawer-open.path-content-drawer #configPanel .setup-basics-section > .setup-section-head,
  body.mode-result.drawer-open.path-content-drawer #configPanel .setup-basics-section > .creator-basics,
  body.mode-result.drawer-open.path-content-drawer #configPanel #advancedConfig,
  body.mode-result.drawer-open.path-content-drawer #configPanel .word-config-only,
  body.mode-result.drawer-open.path-content-drawer #configPanel #mazeConfigSection{display:none!important}
  body.mode-result.drawer-open.path-content-drawer #configPanel #choosePathConfigSection{display:block!important;margin-top:0!important}
  body.mode-result.drawer-open.path-content-drawer #configPanel .config-scroll-body{padding-top:18px!important}
  body.mode-result.drawer-open.path-content-drawer #configPanel #applySettings{display:flex!important}
}
.worksheet.orientation-landscape.exercise-choose-path{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-areas:
    "alphabet"
    "head"
    "crossword"!important;
  column-gap:0!important;
  justify-items:stretch!important;
}
.worksheet.orientation-landscape.exercise-choose-path .alphabet-strip{grid-area:alphabet!important}
.worksheet.orientation-landscape.exercise-choose-path .print-head{grid-area:head!important}
.worksheet.orientation-landscape.exercise-choose-path .crossword-area{
  grid-area:crossword!important;
  width:100%!important;
  margin-top:16px!important;
  justify-self:stretch!important;
  justify-content:center!important;
}
.worksheet.orientation-landscape.exercise-choose-path .choose-path-work{
  width:min(100%,1040px)!important;
  margin:0 auto!important;
  grid-template-columns:clamp(44px,5.8%,66px) minmax(0,1fr) clamp(44px,5.8%,66px);
  padding-top:4px;
  padding-bottom:8px;
  gap:4px;
  align-content:center;
}
.worksheet.orientation-landscape.exercise-choose-path .choose-path-board{aspect-ratio:112 / 72;max-width:100%}
.worksheet.orientation-landscape.exercise-choose-path .choose-path-marker{min-height:0}
.worksheet.orientation-landscape.exercise-choose-path .choose-path-marker img{width:min(56px,78%);max-height:64px}
.worksheet.orientation-landscape.exercise-choose-path .choose-path-marker b{top:calc(50% + 34px);font-size:10px}
.worksheet.orientation-portrait.exercise-choose-path .crossword-area{margin-top:14px!important}
.worksheet.orientation-portrait.exercise-choose-path .choose-path-work{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:8px;padding-top:4px;padding-bottom:14px}
.worksheet.orientation-portrait.exercise-choose-path .choose-path-board{width:min(100%, 146mm);aspect-ratio:72 / 112;max-width:100%}
@media print{
  .worksheet.orientation-landscape.exercise-choose-path{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:
      "alphabet"
      "head"
      "crossword"!important;
    column-gap:0!important;
    justify-items:stretch!important;
  }
  .worksheet.orientation-landscape.exercise-choose-path .alphabet-strip{grid-area:alphabet!important}
  .worksheet.orientation-landscape.exercise-choose-path .print-head{grid-area:head!important}
  .worksheet.orientation-landscape.exercise-choose-path .crossword-area{
    grid-area:crossword!important;
    width:100%!important;
    margin:2.5mm 0 0!important;
    justify-self:stretch!important;
    justify-content:center!important;
  }
  .worksheet.orientation-landscape.exercise-choose-path .choose-path-work{width:248mm!important;max-width:100%!important;grid-template-columns:11mm 1fr 11mm;gap:1.5mm;padding:1.5mm 0 3.5mm;align-content:center;margin:0 auto!important}
  .worksheet.orientation-landscape.exercise-choose-path .choose-path-board{width:100%;aspect-ratio:112 / 72;max-width:100%}
  .worksheet.orientation-landscape.exercise-choose-path .choose-path-marker img{width:9.5mm;max-height:12mm}
  .worksheet.orientation-landscape.exercise-choose-path .choose-path-marker b{font-size:7.5pt;top:calc(50% + 7mm)}
  .worksheet.orientation-portrait.exercise-choose-path .crossword-area{margin-top:2.2mm!important}
  .worksheet.orientation-portrait.exercise-choose-path .choose-path-work{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:2.4mm;padding:1.5mm 0 5.5mm}
  .worksheet.orientation-portrait.exercise-choose-path .choose-path-board{width:146mm;max-width:100%;aspect-ratio:72 / 112}
  .worksheet.orientation-portrait.exercise-choose-path .choose-path-marker{height:auto;min-height:auto}
  .worksheet.orientation-portrait.exercise-choose-path .choose-path-marker img{width:12mm;max-height:14mm;transform:none}
  .worksheet.orientation-portrait.exercise-choose-path .choose-path-marker b{position:static;font-size:8pt;margin-top:1.2mm}
}

/* ============================================================
   v5.51.16 — Home create block redesign (Variant 1, approved)
   ============================================================ */
@media screen {
  .home-create-board{
    padding:28px!important;
    border-radius:28px!important;
    background:linear-gradient(180deg,#ffffff 0%,#f9fcff 100%)!important;
    border:1px solid #dbe7f3!important;
    box-shadow:0 18px 40px rgba(55,88,122,.06)!important;
  }
  .home-create-board .create-board-head{
    margin-bottom:18px!important;
    padding-bottom:0!important;
    border-bottom:0!important;
  }
  .home-create-board .section-eyebrow{
    color:#5f7ea5!important;
  }
  .home-create-board h2{
    font-size:44px!important;
    line-height:1.02!important;
    letter-spacing:-1.3px!important;
    color:#183d6d!important;
    margin-bottom:8px!important;
  }
  .home-create-board .section-helper{
    font-size:18px!important;
    color:#56708e!important;
    max-width:640px!important;
  }

  .module-grid-v1{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:18px!important;
    margin-top:8px!important;
  }
  .module-card-v1{
    position:relative!important;
    min-height:292px!important;
    border-radius:26px!important;
    border:1.5px solid #d9e7f4!important;
    background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
    box-shadow:0 10px 24px rgba(56,87,119,.055)!important;
    padding:20px 18px 16px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:14px!important;
    text-align:center!important;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
  }
  .module-card-v1:hover{
    transform:translateY(-3px)!important;
    border-color:#afc8f0!important;
    box-shadow:0 16px 32px rgba(56,87,119,.09)!important;
  }
  .module-card-v1.is-selected{
    border-color:#4a7dff!important;
    box-shadow:0 0 0 3px rgba(74,125,255,.12),0 18px 34px rgba(47,87,144,.12)!important;
  }
  .module-card-v1 .module-select-state{
    position:absolute!important;
    top:14px!important;right:14px!important;
    background:#356ef5!important;color:#fff!important;
    border-radius:999px!important;padding:7px 10px!important;
    font-size:10px!important;font-weight:900!important;
    box-shadow:0 8px 18px rgba(53,110,245,.22)!important;
    opacity:0;transform:translateY(-4px);pointer-events:none;
    transition:opacity .15s ease,transform .15s ease;
  }
  .module-card-v1.is-selected .module-select-state{opacity:1;transform:translateY(0)}
  .module-v1-visual{
    height:150px;
    border-radius:22px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    border:1px solid #e7eef7;
    background:linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%);
  }
  .module-crossword-v1 .module-v1-visual{background:linear-gradient(180deg,#f2f7ff 0%,#e8f0ff 100%)}
  .module-maze-v1 .module-v1-visual{background:linear-gradient(180deg,#f2fbf5 0%,#e6f7ec 100%)}
  .module-path-v1 .module-v1-visual{background:linear-gradient(180deg,#fffaf0 0%,#fff2cf 100%)}
  .module-picturewords-v1 .module-v1-visual{background:linear-gradient(180deg,#fff8f5 0%,#fff2ed 100%)}

  .module-v1-copy{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;justify-content:flex-start}
  .module-v1-copy b{font-size:20px!important;color:#173b67!important;line-height:1.12!important;letter-spacing:-.35px}
  .module-v1-copy small{font-size:13px!important;line-height:1.45!important;color:#647e99!important;max-width:220px}
  .module-v1-age{
    margin-top:auto;
    display:inline-flex;align-items:center;justify-content:center;
    min-width:120px;padding:9px 14px;border-radius:999px;
    background:#edf4ff;color:#49698d;font-size:13px;font-weight:800;
  }

  .module-v1-icon-shell{
    width:70px;height:70px;border-radius:20px;display:grid;place-items:center;
    background:rgba(255,255,255,.85);box-shadow:0 10px 18px rgba(65,97,135,.09)
  }
  .module-v1-icon-shell img{width:46px;height:46px;object-fit:contain}
  .module-v1-sheet{
    position:absolute;left:24px;top:30px;
    width:92px;height:82px;border-radius:20px;background:#ffffff;
    display:grid;place-items:center;border:1px solid #dde8f4;box-shadow:0 10px 20px rgba(57,90,124,.08)
  }
  .module-v1-sheet--small{position:relative;left:auto;top:auto;width:84px;height:76px}
  .module-v1-visual-picturewords{
    display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:16px;
  }
  .module-v1-visual-picturewords img{width:42px;height:42px;object-fit:contain}
  .module-v1-letter-boxes{display:flex;gap:7px;width:100%;justify-content:center}
  .module-v1-letter-boxes i{width:28px;height:22px;border:2px dashed #bdcad8;border-radius:8px;background:#fff}
  .module-v1-inline-icon{position:absolute;width:36px;height:36px;object-fit:contain}
  .module-v1-inline-icon-left{left:14px;bottom:18px}
  .module-v1-inline-icon-right{right:14px;top:18px}

  .quick-start-v1{
    margin-top:22px!important;
    padding:22px!important;
    border:1px solid #dbe7f3!important;
    border-radius:24px!important;
    background:linear-gradient(180deg,#fafdff 0%,#f3f8ff 100%)!important;
    box-shadow:none!important;
  }
  .quick-start-shell-v1{
    display:grid;
    grid-template-columns:340px minmax(0,1fr) 220px;
    gap:18px;
    align-items:center;
  }
  .quick-summary-card{
    display:flex;align-items:center;gap:18px;
    padding:18px;border-radius:20px;background:#fff;border:1px solid #dce8f4;
    min-height:140px;
  }
  .quick-summary-visual{
    width:132px;height:96px;flex:0 0 132px;position:relative;
    display:grid;place-items:center;border-radius:18px;
    background:linear-gradient(180deg,#f1f7ff 0%,#e8f0ff 100%);
    border:1px solid #e1eaf5;overflow:hidden;
  }
  .quick-summary-maze{background:linear-gradient(180deg,#f1fbf5 0%,#e6f7ec 100%)}
  .quick-summary-choose-path{background:linear-gradient(180deg,#fffaf0 0%,#fff2cf 100%)}
  .quick-summary-picture-words{background:linear-gradient(180deg,#fff8f5 0%,#fff2ed 100%);display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px}
  .quick-summary-picture-words img{width:32px;height:32px;object-fit:contain}
  .quick-summary-copy h3{font-size:22px!important;color:#173b67!important;margin:0 0 7px!important}
  .quick-summary-copy small{display:block;font-size:15px!important;line-height:1.45!important;color:#5d7895!important}

  .quick-start-center-v1{display:flex;flex-direction:column;gap:14px;min-width:0}
  .quick-start-actions-v1{display:flex;justify-content:flex-end}
  .quick-primary-button{
    width:100%;max-width:210px;
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    border:0;border-radius:18px;padding:20px 22px;
    background:linear-gradient(135deg,#2f6cf5 0%,#3c7bff 100%);color:#fff;
    font-size:28px;font-weight:900;letter-spacing:-.3px;cursor:pointer;
    box-shadow:0 14px 30px rgba(52,108,245,.25);
  }
  .quick-primary-button span{font-size:30px;line-height:1}

  .quick-start-v1 .quick-preset-grid,
  .quick-start-v1 .quick-maze-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  .quick-start-v1 .quick-card,
  .quick-start-v1 .quick-maze-card{
    min-height:0!important;
    padding:16px 14px!important;
    border-radius:18px!important;
    border:1.5px solid #d6e3f0!important;
    background:#fff!important;
    box-shadow:none!important;
    text-align:center!important;
    display:flex!important;align-items:center;justify-content:center!important;
  }
  .quick-start-v1 .quick-card.primary-card,
  .quick-start-v1 .quick-maze-card.is-selected{
    border-color:#4776f4!important;
    box-shadow:0 0 0 3px rgba(71,118,244,.11)!important;
    background:#f9fbff!important;
  }
  .quick-start-v1 .quick-card .quick-preset-copy,
  .quick-start-v1 .quick-maze-card span{display:flex;flex-direction:column;gap:5px;align-items:center}
  .quick-start-v1 .quick-card .quick-preset-copy b,
  .quick-start-v1 .quick-maze-card b{font-size:18px!important;color:#173b67!important}
  .quick-start-v1 .quick-card .quick-preset-copy small,
  .quick-start-v1 .quick-maze-card small{font-size:12px!important;color:#6c84a0!important;line-height:1.35!important}
  .quick-start-v1 .quick-recommended,
  .quick-start-v1 .quick-number,
  .quick-start-v1 .quick-preset-arrow,
  .quick-start-v1 .quick-maze-mini{display:none!important}

  .quick-start-v1 .quick-step-label,
  .quick-start-v1 .quick-maze-label,
  .quick-start-v1 .quick-pw-modes-label{
    display:block;
    margin-bottom:8px;
    color:#657e98;
    font-size:12px;
    font-weight:800;
  }
  .quick-start-v1 .quick-pw-mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  .quick-start-v1 .quick-pw-mode{border-radius:18px!important;border:1.5px solid #d6e3f0!important;background:#fff!important;box-shadow:none!important;padding:14px 12px!important}
  .quick-start-v1 .quick-pw-mode.is-selected{border-color:#4776f4!important;box-shadow:0 0 0 3px rgba(71,118,244,.11)!important;background:#f9fbff!important}

  .quick-custom-link{
    display:inline-flex;align-items:center;gap:8px;
    padding:0;border:0;background:transparent;cursor:pointer;
    color:#315980;font-size:15px;font-weight:800;
  }
  .quick-custom-link span{font-size:15px}

  .more-activities-panel{
    margin-top:20px;
    padding:18px 20px 20px;
    border:1px solid #dde9f4;
    border-radius:24px;
    background:linear-gradient(180deg,#ffffff 0%,#fcfefe 100%);
  }
  .more-activities-head h3{margin:0 0 6px!important;font-size:32px!important;color:#173b67!important;letter-spacing:-.7px}
  .more-activities-head p{margin:0 0 16px!important;color:#627d97!important;font-size:15px!important}
  .more-activities-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .more-activity-card{
    display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;
    border:1px solid #eadff0;background:linear-gradient(180deg,#fff7fb 0%,#fffafb 100%);
  }
  .more-activity-card:nth-child(2){border-color:#dde8fb;background:linear-gradient(180deg,#f7fbff 0%,#fbfdff 100%)}
  .more-activity-card:nth-child(3){border-color:#e7def7;background:linear-gradient(180deg,#faf7ff 0%,#fcfbff 100%)}
  .more-activity-card:nth-child(4){border-color:#f0e2ef;background:linear-gradient(180deg,#fff8f8 0%,#fffdfd 100%)}
  .more-activity-icon{width:52px;height:52px;flex:0 0 52px;border-radius:16px;background:#fff;display:grid;place-items:center;border:1px solid #edf2f7}
  .more-activity-icon img{width:34px;height:34px;object-fit:contain}
  .more-activity-card b{font-size:17px!important;color:#27496e!important;line-height:1.15!important;flex:1}
  .more-activity-badge{padding:8px 12px;border-radius:999px;background:#eef3fb;color:#5f7894;font-size:12px;font-weight:800}

  @media (max-width:1200px){
    .module-grid-v1{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .quick-start-shell-v1{grid-template-columns:1fr!important}
    .quick-start-actions-v1{justify-content:flex-start}
    .quick-primary-button{max-width:none}
    .more-activities-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:760px){
    .home-create-board{padding:18px!important}
    .home-create-board h2{font-size:34px!important}
    .home-create-board .section-helper{font-size:16px!important}
    .module-grid-v1{grid-template-columns:1fr!important;gap:14px!important}
    .module-card-v1{min-height:0!important}
    .quick-summary-card{flex-direction:column;align-items:flex-start}
    .quick-summary-visual{width:100%;height:110px;flex:0 0 auto}
    .quick-start-v1 .quick-preset-grid,
    .quick-start-v1 .quick-maze-grid,
    .quick-start-v1 .quick-pw-mode-grid,
    .more-activities-grid{grid-template-columns:1fr!important}
    .more-activity-card{flex-wrap:wrap}
  }
}

/* ============================================================
   v5.51.17 — Home redesign polish / logic alignment fixes
   ============================================================ */
@media screen {
  .module-card-v1{
    min-height:314px!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
  }
  .module-v1-visual{
    height:140px!important;
    padding:16px!important;
  }
  .module-scene{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
  }
  .module-scene-compact{gap:10px}
  .module-scene-sheet{
    width:84px;height:72px;border-radius:18px;background:#fff;
    display:grid;place-items:center;border:1px solid #dbe7f4;
    box-shadow:0 10px 18px rgba(57,90,124,.08);
    flex:0 0 84px;
  }
  .module-scene-icon{width:42px;height:42px;object-fit:contain;flex:0 0 42px}
  .module-scene-icon-left{margin-right:2px}
  .module-scene-icon-right{margin-left:2px}
  .module-scene-pencil{width:34px;height:34px}
  .module-scene-svg{position:static!important;inset:auto!important;width:96px!important;height:60px!important;flex:0 0 96px}
  .module-scene .maze-preview-svg path{stroke:#9fcdb0!important;stroke-width:7!important;opacity:1!important}
  .module-scene .maze-preview-svg .maze-route{stroke:#22a56f!important;stroke-width:3.5!important}
  .module-scene .path-preview-svg .path-route{stroke-width:5.5!important}
  .module-scene .path-preview-svg .path-route-good{stroke:#dc9d1f!important}
  .module-scene .path-preview-svg .path-route-bad{stroke:#cbd4df!important;stroke-dasharray:6 6!important}
  .module-scene-picturewords{flex-wrap:wrap;gap:10px;padding:8px 8px 2px}
  .module-scene-picturewords img{width:40px;height:40px;object-fit:contain}
  .module-scene-picturewords .module-v1-letter-boxes{width:100%;margin-top:4px}
  .module-scene-picturewords .module-v1-letter-boxes i{width:26px;height:20px}
  .module-v1-copy{justify-content:space-between!important;min-height:118px}
  .module-v1-copy small{min-height:38px}

  .quick-start-v1{
    padding:20px!important;
    border-radius:26px!important;
  }
  .quick-start-shell-v1{
    grid-template-columns:340px minmax(0,1fr) 190px!important;
    gap:16px!important;
    align-items:stretch!important;
  }
  .quick-summary-card{
    min-height:174px!important;
    border-radius:22px!important;
  }
  .quick-summary-visual{
    width:124px!important;height:96px!important;flex:0 0 124px!important;
  }
  .quick-summary-copy{min-width:0}
  .quick-summary-copy h3{font-size:21px!important;line-height:1.12!important}
  .quick-summary-copy small{font-size:14px!important}

  .quick-start-center-v1{justify-content:center!important}
  .quick-step-label,.quick-maze-label,.quick-pw-modes-label{
    letter-spacing:.03em!important;
  }

  .quick-start-v1 .quick-maze-card,
  .quick-start-v1 .quick-card,
  .quick-start-v1 .quick-pw-mode{
    position:relative!important;
    overflow:hidden!important;
    min-height:104px!important;
    border:1.5px solid #d6e2ef!important;
    border-radius:18px!important;
    box-shadow:none!important;
    background:#fff!important;
  }
  .quick-start-v1 .quick-maze-card::before,
  .quick-start-v1 .quick-pw-mode::before{display:none!important}
  .quick-start-v1 .quick-maze-card:hover,
  .quick-start-v1 .quick-card:hover,
  .quick-start-v1 .quick-pw-mode:hover{
    transform:translateY(-1px)!important;
    border-color:#b8cae5!important;
    box-shadow:0 10px 18px rgba(60,91,125,.08)!important;
  }
  .quick-start-v1 .quick-maze-card.is-selected,
  .quick-start-v1 .quick-card.is-selected,
  .quick-start-v1 .quick-card.primary-card,
  .quick-start-v1 .quick-pw-mode.is-selected{
    border-color:#4b77f4!important;
    background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%)!important;
    box-shadow:0 0 0 3px rgba(75,119,244,.10),0 12px 20px rgba(60,91,125,.08)!important;
  }
  .quick-start-v1 .quick-preset-grid,
  .quick-start-v1 .quick-maze-grid,
  .quick-start-v1 .quick-pw-mode-grid{
    gap:12px!important;
  }
  .quick-start-v1 .quick-pw-mode{
    padding:14px 12px!important;
    display:grid!important;
    grid-template-columns:76px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:center!important;
    min-height:102px!important;
  }
  .quick-start-v1 .quick-pw-mode-visual{
    margin:0!important;
    width:76px!important;height:76px!important;
    border-radius:18px!important;
  }
  .quick-start-v1 .quick-pw-mode-copy b,
  .quick-start-v1 .quick-card .quick-preset-copy b,
  .quick-start-v1 .quick-maze-card b{font-size:15px!important;line-height:1.16!important}
  .quick-start-v1 .quick-pw-mode-copy small,
  .quick-start-v1 .quick-card .quick-preset-copy small,
  .quick-start-v1 .quick-maze-card small{font-size:11px!important;line-height:1.35!important}

  .quick-start-actions-v1{
    align-items:center!important;
    justify-content:center!important;
  }
  .quick-primary-button{
    max-width:170px!important;
    padding:16px 18px!important;
    min-height:60px!important;
    border-radius:18px!important;
    font-size:18px!important;
    line-height:1.1!important;
    box-shadow:0 14px 24px rgba(52,108,245,.18)!important;
  }
  .quick-primary-button span{font-size:20px!important}

  .quick-custom-link{
    color:#335b85!important;
    font-size:15px!important;
  }

  .quick-summary-picture-words .module-scene-picturewords img{width:30px;height:30px}
  .quick-summary-picture-words .module-v1-letter-boxes i{width:22px;height:18px}

  @media (max-width:1280px){
    .quick-start-shell-v1{grid-template-columns:1fr!important}
    .quick-start-actions-v1{justify-content:flex-start!important}
    .quick-primary-button{max-width:220px!important}
  }
  @media (max-width:900px){
    .quick-start-v1 .quick-pw-mode-grid,
    .quick-start-v1 .quick-preset-grid,
    .quick-start-v1 .quick-maze-grid{grid-template-columns:1fr!important}
    .quick-start-v1 .quick-pw-mode{grid-template-columns:64px minmax(0,1fr)!important}
    .module-card-v1{min-height:0!important}
  }
}

/* ============================================================
   v5.51.18 — Unified home quick choices + compact action pair
   ============================================================ */
@media screen {
  .quick-start-shell-v1{
    grid-template-columns:330px minmax(0,1fr) 300px!important;
    align-items:center!important;
  }

  .quick-choice-card{
    min-height:98px!important;
    border:1.5px solid #d6e2ef!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:none!important;
    color:#173b67!important;
    transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease!important;
  }
  .quick-choice-card::before{display:none!important}
  .quick-choice-card:hover{
    transform:translateY(-1px)!important;
    border-color:#b8cae5!important;
    background:#fff!important;
    box-shadow:0 9px 18px rgba(56,87,119,.07)!important;
  }
  .quick-choice-card.is-selected,
  .quick-choice-card.primary-card{
    border-color:#4d78f6!important;
    background:linear-gradient(180deg,#f7faff 0%,#ffffff 100%)!important;
    box-shadow:0 0 0 3px rgba(77,120,246,.10),0 10px 20px rgba(56,87,119,.07)!important;
  }
  .quick-choice-card b{
    color:#173b67!important;
    font-size:16px!important;
    line-height:1.16!important;
    margin:0!important;
  }
  .quick-choice-card small{
    color:#6d84a0!important;
    font-size:11px!important;
    line-height:1.35!important;
    font-weight:650!important;
  }

  .quick-start-v1 .quick-preset-grid,
  .quick-start-v1 .quick-maze-grid,
  .quick-start-v1 .quick-pw-mode-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .quick-start-v1 .quick-preset,
  .quick-start-v1 .quick-maze-card{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:14px 12px!important;
    text-align:center!important;
  }
  .quick-start-v1 .quick-preset-copy,
  .quick-start-v1 .quick-maze-card>span{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
  }

  .quick-start-v1 .quick-pw-modes{
    margin:0!important;
  }
  .quick-start-v1 .quick-pw-mode{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    min-height:112px!important;
    padding:12px 10px!important;
    text-align:center!important;
  }
  .quick-start-v1 .quick-pw-mode-visual{
    width:48px!important;
    height:42px!important;
    min-width:48px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    margin:0!important;
    padding:0!important;
  }
  .quick-start-v1 .quick-pw-mode-copy{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:4px!important;
  }
  .quick-start-v1 .quick-pw-mode-copy b{
    font-size:14px!important;
    margin:0!important;
  }
  .quick-start-v1 .quick-pw-mode-copy small{
    font-size:10.5px!important;
    max-width:150px!important;
  }
  .quick-start-v1 .quick-pw-mode--write,
  .quick-start-v1 .quick-pw-mode--match,
  .quick-start-v1 .quick-pw-mode--choice{
    border-color:#d6e2ef!important;
    background:#fff!important;
  }
  .quick-start-v1 .quick-pw-mode--write.is-selected,
  .quick-start-v1 .quick-pw-mode--match.is-selected,
  .quick-start-v1 .quick-pw-mode--choice.is-selected{
    border-color:#4d78f6!important;
    background:linear-gradient(180deg,#f7faff 0%,#ffffff 100%)!important;
  }

  .quick-start-v1 .quick-preset-block{
    margin-top:0!important;
    padding:0!important;
    border-top:0!important;
  }
  .quick-start-v1 .quick-pw-modes + .quick-preset-block{
    margin-top:12px!important;
    padding-top:12px!important;
    border-top:1px solid #e5edf6!important;
  }
  .quick-start-v1 .quick-step-label,
  .quick-start-v1 .quick-maze-label,
  .quick-start-v1 .quick-pw-modes-label{
    margin:0 0 8px!important;
    color:#637c98!important;
    font-size:11px!important;
    font-weight:900!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
  }

  .quick-start-actions-v1{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    align-self:center!important;
  }
  .quick-primary-button,
  .quick-secondary-button{
    min-height:54px!important;
    border-radius:16px!important;
    padding:13px 16px!important;
    font-size:15px!important;
    font-weight:900!important;
    line-height:1.1!important;
    cursor:pointer!important;
    white-space:nowrap!important;
  }
  .quick-primary-button{
    width:auto!important;
    min-width:142px!important;
    max-width:none!important;
    border:1px solid #316cf4!important;
    background:linear-gradient(135deg,#326df5 0%,#3f7cf9 100%)!important;
    color:#fff!important;
    box-shadow:0 10px 20px rgba(52,108,245,.18)!important;
  }
  .quick-primary-button span{font-size:16px!important}
  .quick-secondary-button{
    min-width:126px!important;
    border:1.5px solid #cfddec!important;
    background:#fff!important;
    color:#31597f!important;
    box-shadow:none!important;
  }
  .quick-secondary-button:hover{
    border-color:#aebfd4!important;
    background:#f9fbfd!important;
  }

  @media (max-width:1320px){
    .quick-start-shell-v1{grid-template-columns:1fr!important}
    .quick-start-actions-v1{justify-content:flex-start!important}
  }
  @media (max-width:760px){
    .quick-start-v1 .quick-preset-grid,
    .quick-start-v1 .quick-maze-grid,
    .quick-start-v1 .quick-pw-mode-grid{grid-template-columns:1fr!important}
    .quick-start-actions-v1{flex-wrap:wrap!important}
  }
}

/* ============================================================
   v5.51.19 — Home quick variants exact vertical alignment
   ============================================================ */
@media screen {
  .quick-start-v1 .quick-preset-block,
  .quick-start-v1 .quick-maze-modes{
    margin:0!important;
    padding:0!important;
    border:0!important;
    min-height:130px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
  }
  .quick-start-v1 .quick-maze-modes[hidden]{display:none!important}
  .quick-start-v1 .quick-step-label,
  .quick-start-v1 .quick-maze-label{
    margin:0 0 8px!important;
    min-height:16px!important;
    line-height:16px!important;
  }
  .quick-start-v1 .quick-preset-grid,
  .quick-start-v1 .quick-maze-grid{
    margin:0!important;
    align-items:stretch!important;
  }
  .quick-start-v1 .quick-preset,
  .quick-start-v1 .quick-maze-card{
    height:104px!important;
    min-height:104px!important;
    box-sizing:border-box!important;
  }
}

/* v5.51.20 — restore hidden behavior after v5.51.19 alignment contract */
@media screen {
  .quick-start-v1 .quick-preset-block[hidden],
  .quick-start-v1 .quick-pw-modes[hidden],
  .quick-start-v1 .quick-maze-modes[hidden]{
    display:none!important;
  }
}


/* v1.0.4 header tuning + home CTA polish */
.strip-maze-trail{gap:clamp(5px,0.95vw,10px)!important}
.strip-paw-print{width:14px!important;height:auto!important;opacity:.82!important}
.strip-route-mini{width:min(86%,760px)!important}
.strip-route-mini svg{height:18px!important}
.strip-route-mini .route-line{stroke-width:2.2!important}
.strip-route-mini .route-line-a{stroke:#6f94d8!important}
.strip-route-mini .route-line-b{stroke:#bfd2ea!important;stroke-dasharray:3.1 4.6!important}
.strip-route-mini .route-line-c{stroke:#d9a11f!important}
.hero-primary{transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease!important;transform:none!important;will-change:auto!important}
.hero-primary:hover,.hero-primary:focus-visible{transform:none!important}
#startCustom{backface-visibility:hidden;-webkit-font-smoothing:antialiased}


/* v1.0.5 hover stability + denser maze paws + cleaner choose-path header */
.strip-maze-trail{width:min(92%,820px)!important;justify-content:space-between!important;gap:0!important}
.strip-paw-print{width:11px!important;height:auto!important;opacity:.8!important}
.strip-paw-print:nth-child(odd){transform:translateY(1px) rotate(-11deg)!important}
.strip-paw-print:nth-child(even){transform:translateY(-1px) rotate(11deg)!important}
.strip-route-mini{width:min(88%,780px)!important}
.strip-route-mini svg{height:17px!important}
.strip-route-mini .route-line{stroke-width:2.15!important}
.strip-route-mini .route-line-a{stroke:#6d92d8!important}
.strip-route-mini .route-line-b{stroke:#d7a11f!important;opacity:.96!important}
.strip-route-mini .route-line-c{stroke:#bfd2ea!important;stroke-dasharray:3 5!important;opacity:.95!important}
.hero-primary{transform:none!important;will-change:auto!important}
.hero-primary:hover,.hero-primary:focus-visible{transform:none!important}
#startCustom,#startCustom:hover,#startCustom:focus-visible{transform:none!important;animation:none!important;box-shadow:0 12px 25px rgba(45,105,246,.23)!important}
#startCustom{transition:background-color .16s ease,color .16s ease,border-color .16s ease!important;backface-visibility:hidden;-webkit-font-smoothing:antialiased;outline-offset:2px}
#startCustom:hover{background:#255bd8!important;border-color:#255bd8!important;color:#fff!important}
#startCustom span[aria-hidden="true"]{transition:none!important;display:inline-block}


/* v1.0.6 — exact v1.0.4 Choose Path strip restore + isolated Hero CTA */
/* Keep Maze strip from v1.0.5 unchanged. */
.strip-route-mini{width:min(86%,760px)!important}
.strip-route-mini svg{height:18px!important}
.strip-route-mini .route-line{stroke-width:2.2!important}
.strip-route-mini .route-line-a{stroke:#6f94d8!important;opacity:1!important;stroke-dasharray:none!important}
.strip-route-mini .route-line-b{stroke:#bfd2ea!important;stroke-dasharray:3.1 4.6!important;opacity:1!important}
.strip-route-mini .route-line-c{stroke:#d9a11f!important;stroke-dasharray:none!important;opacity:1!important}

/* The Hero CTA is fully isolated from legacy/global button hover rules. */
#startCustom,
#startCustom:link,
#startCustom:visited,
#startCustom:hover,
#startCustom:focus,
#startCustom:focus-visible,
#startCustom:active{
  background-color:#2c6cf6!important;
  background-image:none!important;
  border-color:#2c6cf6!important;
  color:#fff!important;
  transform:none!important;
  animation:none!important;
  transition:none!important;
  box-shadow:0 12px 25px rgba(45,105,246,.23)!important;
}
#startCustom:hover,
#startCustom:focus-visible{
  background-color:#255bd8!important;
  border-color:#255bd8!important;
}
#startCustom:active{
  background-color:#214fc0!important;
  border-color:#214fc0!important;
}
#startCustom span[aria-hidden="true"]{transition:none!important;transform:none!important}

/* ============================================================
   v1.0.7 — Hero product showcase slider
   Real worksheet previews replace decorative hero artwork.
   ============================================================ */
@media screen {
  .hero-product-showcase{
    position:relative!important;
    min-height:470px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:28px 42px 46px!important;
    overflow:hidden!important;
  }
  .hero-product-showcase::before{display:none!important}
  .hero-product-slider{
    position:relative;
    width:min(388px,100%);
    height:432px;
    margin:auto;
  }
  .hero-product-slide{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    opacity:0;
    visibility:hidden;
    transform:translateX(18px) scale(.985);
    transition:opacity .42s ease,transform .42s ease,visibility 0s linear .42s;
    pointer-events:none;
  }
  .hero-product-slide.is-active{
    opacity:1;
    visibility:visible;
    transform:translateX(0) scale(1);
    transition-delay:0s;
    pointer-events:auto;
  }
  .hero-worksheet-card{
    position:relative;
    width:344px;
    height:418px;
    padding:16px 18px 18px;
    overflow:hidden;
    border:1px solid #d9e5ef;
    border-radius:22px;
    background:#fff;
    box-shadow:0 26px 54px rgba(32,63,96,.17);
    color:#173a66;
  }
  .hero-worksheet-photo{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  }
  .hero-worksheet-photo::after{
    content:"";
    position:absolute;
    inset:10px;
    border-radius:16px;
    border:1px solid #edf2f8;
    pointer-events:none;
  }
  .hero-worksheet-photo-image{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    display:block;
    filter:drop-shadow(0 8px 18px rgba(37,61,92,.08));
  }
  .hero-tilt-left{transform:rotate(-2.8deg)}
  .hero-tilt-right{transform:rotate(2.5deg)}
  .hero-tilt-soft-left{transform:rotate(-1.6deg)}
  .hero-tilt-soft-right{transform:rotate(1.8deg)}
  .hero-sheet-strip{
    height:27px;
    margin:-5px -7px 14px;
    padding:0 8px 7px;
    border-bottom:1.5px solid #1a2942;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:4px;
  }
  .hero-sheet-strip-alphabet span{
    flex:1 1 0;
    text-align:center;
    font-size:5px;
    line-height:1;
    font-weight:900;
    color:#243856;
  }
  .hero-sheet-title{
    text-align:center;
    font-size:16px;
    font-weight:950;
    letter-spacing:.015em;
    color:#183b68;
  }
  .hero-sheet-subtitle{
    margin-top:5px;
    text-align:center;
    color:#607a97;
    font-size:7.5px;
    line-height:1.35;
  }
  .hero-crossword-clues{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    margin:16px 4px 13px;
  }
  .hero-crossword-clues span{
    height:48px;
    display:grid;
    place-items:center;
    border:1px solid #e6edf4;
    border-radius:11px;
    background:#fbfdff;
  }
  .hero-crossword-clues img{width:39px;height:39px;object-fit:contain}
  .hero-crossword-grid{
    width:170px;
    height:150px;
    margin:8px auto 0;
    display:grid;
    grid-template-columns:repeat(6,25px);
    grid-auto-rows:25px;
  }
  .hero-crossword-grid i{
    display:block;
    border:1.25px solid #243650;
    background:#fff;
  }
  .hero-crossword-grid i:nth-child(1),
  .hero-crossword-grid i:nth-child(2),
  .hero-crossword-grid i:nth-child(5),
  .hero-crossword-grid i:nth-child(6),
  .hero-crossword-grid i:nth-child(7),
  .hero-crossword-grid i:nth-child(12),
  .hero-crossword-grid i:nth-child(13),
  .hero-crossword-grid i:nth-child(18),
  .hero-crossword-grid i:nth-child(25),
  .hero-crossword-grid i:nth-child(30){visibility:hidden}

  .hero-sheet-route-strip,
  .hero-sheet-path-strip{
    justify-content:center;
    gap:8px;
  }
  .hero-sheet-route-strip img,
  .hero-sheet-path-strip img{width:19px;height:19px;object-fit:contain;flex:0 0 19px}
  .hero-paw-row{
    flex:1 1 auto;
    color:#9aaec6;
    font-size:7px;
    font-weight:950;
    letter-spacing:4px;
    text-align:center;
    white-space:nowrap;
  }
  .hero-maze-preview{
    position:relative;
    height:226px;
    margin-top:14px;
  }
  .hero-maze-preview svg{
    position:absolute;
    inset:6px 25px 4px;
    width:calc(100% - 50px);
    height:calc(100% - 10px);
  }
  .hero-maze-preview svg path{
    fill:none;
    stroke:#1d2e47;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .hero-maze-start,.hero-maze-goal{
    position:absolute;
    width:35px;
    height:35px;
    object-fit:contain;
    z-index:2;
  }
  .hero-maze-start{left:-2px;bottom:32px}
  .hero-maze-goal{right:-2px;top:30px}

  .hero-sheet-path-strip svg{
    flex:1 1 auto;
    min-width:0;
    height:17px;
    overflow:visible;
  }
  .hero-sheet-path-strip path{fill:none;stroke-linecap:round;stroke-width:2}
  .hero-sheet-path-strip .hp-a{stroke:#6d92d8}
  .hero-sheet-path-strip .hp-b{stroke:#d7a11f}
  .hero-sheet-path-strip .hp-c{stroke:#bfd2ea;stroke-dasharray:3 4}
  .hero-path-preview{
    position:relative;
    height:224px;
    margin-top:14px;
  }
  .hero-path-preview>svg{
    position:absolute;
    left:28px;
    right:28px;
    top:10px;
    width:calc(100% - 56px);
    height:190px;
  }
  .hero-path-preview .road{fill:none;stroke-linecap:round;stroke-linejoin:round}
  .hero-path-preview .road.edge{stroke:#26323f;stroke-width:6}
  .hero-path-preview .road.axis{stroke:#fff;stroke-width:3.8;stroke-dasharray:4 4}
  .hero-path-start,.hero-path-goal{
    position:absolute;
    width:34px;
    height:34px;
    object-fit:contain;
    z-index:2;
  }
  .hero-path-start{left:-3px;top:95px}
  .hero-path-goal{right:-3px;top:52px}

  .hero-picturewords-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px 16px;
    margin:22px 12px 0;
  }
  .hero-picturewords-grid>div{
    min-height:108px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid #e6edf4;
    border-radius:14px;
    background:#fbfdff;
  }
  .hero-picturewords-grid img{width:48px;height:48px;object-fit:contain}
  .hero-picturewords-grid span{display:flex;justify-content:center;gap:3px}
  .hero-picturewords-grid i{
    width:13px;
    height:15px;
    border:1px dashed #a9bed3;
    border-radius:3px;
    background:#fff;
  }

  .hero-slider-dots{
    position:absolute;
    left:50%;
    bottom:15px;
    z-index:8;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    transform:translateX(-50%);
  }
  .hero-slider-dot{
    width:8px!important;
    height:8px!important;
    min-width:8px!important;
    min-height:8px!important;
    padding:0!important;
    border:0!important;
    border-radius:999px!important;
    background:#b8c8d8!important;
    box-shadow:none!important;
    transform:none!important;
    transition:width .18s ease,background .18s ease!important;
  }
  .hero-slider-dot:hover,
  .hero-slider-dot:focus-visible{background:#7f9fc8!important;transform:none!important}
  .hero-slider-dot.is-active{
    width:22px!important;
    background:#2f6cf6!important;
  }

  @media(max-width:1050px){
    .hero-product-showcase{padding-left:24px!important;padding-right:24px!important}
    .hero-product-slider{width:344px;height:406px}
    .hero-worksheet-card{width:316px;height:386px}
  }
  @media(max-width:820px){
    .hero-product-showcase{min-height:390px!important;padding:20px 24px 42px!important}
    .hero-product-slider{width:316px;height:360px}
    .hero-worksheet-card{width:286px;height:332px;transform:scale(.92);transform-origin:center}
  }
  @media(max-width:620px){
    .hero-product-showcase{display:none!important}
  }
  @media(prefers-reduced-motion:reduce){
    .hero-product-slide{transition:none!important}
    .hero-slider-dot{transition:none!important}
  }
}

/* ============================================================
   v1.0.10 — Mobile release polish
   Keeps the approved desktop unchanged and tightens the home
   experience for phones (roughly 320–620px).
   ============================================================ */
@media screen and (max-width:620px){
  /* 1) Keep the real worksheet HERO slider visible on phones. */
  .home-hero-pro{
    grid-template-columns:1fr!important;
  }
  .hero-product-showcase{
    display:flex!important;
    min-height:334px!important;
    padding:8px 12px 42px!important;
  }
  .hero-product-slider{
    width:min(300px,calc(100vw - 48px))!important;
    height:292px!important;
  }
  .hero-worksheet-card{
    width:min(272px,calc(100vw - 70px))!important;
    height:278px!important;
    padding:11px!important;
    border-radius:18px!important;
    transform:scale(.96)!important;
    transform-origin:center!important;
  }
  .hero-worksheet-photo-image{
    object-fit:contain!important;
  }

  /* Slider indicators keep tiny visual dots but gain real touch targets. */
  .hero-slider-dots{
    bottom:5px!important;
    gap:0!important;
  }
  .hero-slider-dot,
  .hero-slider-dot.is-active{
    position:relative!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    background:transparent!important;
    border:0!important;
    padding:0!important;
  }
  .hero-slider-dot::after{
    content:"";
    position:absolute;
    left:50%;top:50%;
    width:8px;height:8px;
    border-radius:999px;
    background:#b8c8d8;
    transform:translate(-50%,-50%);
    transition:width .18s ease,background .18s ease;
  }
  .hero-slider-dot.is-active::after{
    width:22px;
    background:#2f6cf6;
  }
  .hero-slider-dot:hover::after,
  .hero-slider-dot:focus-visible::after{background:#7f9fc8}

  /* 2) Main exercise cards become compact horizontal mobile cards. */
  .home-create-board{
    padding:16px!important;
    border-radius:22px!important;
  }
  .home-create-board h2{
    font-size:30px!important;
    letter-spacing:-.7px!important;
  }
  .home-create-board .section-helper{
    font-size:14px!important;
  }
  .module-grid-v1{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .module-card-v1{
    display:grid!important;
    grid-template-columns:92px minmax(0,1fr)!important;
    align-items:center!important;
    min-height:104px!important;
    padding:10px 12px!important;
    gap:12px!important;
    border-radius:19px!important;
    text-align:left!important;
  }
  .module-card-v1:hover{transform:none!important}
  .module-v1-visual{
    width:92px!important;
    height:82px!important;
    min-height:82px!important;
    padding:6px!important;
    border-radius:15px!important;
  }
  .module-v1-visual .module-scene{
    transform:scale(.72)!important;
    transform-origin:center!important;
    width:128%!important;
    height:128%!important;
  }
  .module-v1-copy{
    align-items:flex-start!important;
    justify-content:center!important;
    min-height:0!important;
    gap:4px!important;
    text-align:left!important;
  }
  .module-v1-copy b{
    font-size:17px!important;
    line-height:1.15!important;
  }
  .module-v1-copy small{
    min-height:0!important;
    max-width:none!important;
    font-size:12px!important;
    line-height:1.35!important;
  }
  .module-v1-age{
    margin-top:3px!important;
    min-width:0!important;
    padding:5px 9px!important;
    font-size:11px!important;
  }
  .module-card-v1 .module-select-state{
    top:7px!important;
    right:7px!important;
    padding:5px 7px!important;
    font-size:9px!important;
  }

  /* Keep the audience introduction compact instead of four tall rows. */
  .audience-strip{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .audience-strip>div{
    min-height:94px!important;
    padding:11px!important;
    border-radius:15px!important;
  }
  .audience-strip>div::before{
    min-height:20px!important;
    padding:4px 7px!important;
    font-size:9px!important;
  }
  .audience-strip>div>.audience-icon{
    width:36px!important;height:36px!important;
    border-radius:11px!important;
    font-size:16px!important;
  }
  .audience-strip b{font-size:12px!important}
  .audience-strip small{
    font-size:11px!important;
    line-height:1.3!important;
    max-width:none!important;
  }

  /* 3) Difficulty / variant always stays three compact choices in one row. */
  .quick-start-v1{
    padding:14px!important;
    border-radius:20px!important;
  }
  .quick-start-v1 .quick-preset-grid,
  .quick-start-v1 .quick-maze-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .quick-start-v1 .quick-preset,
  .quick-start-v1 .quick-maze-card{
    height:72px!important;
    min-height:72px!important;
    padding:8px 4px!important;
    border-radius:14px!important;
  }
  .quick-start-v1 .quick-preset-copy,
  .quick-start-v1 .quick-maze-card>span{gap:3px!important}
  .quick-start-v1 .quick-preset-copy b,
  .quick-start-v1 .quick-maze-card b{
    font-size:13px!important;
  }
  .quick-start-v1 .quick-preset-copy small,
  .quick-start-v1 .quick-maze-card small{
    font-size:9.5px!important;
    line-height:1.2!important;
  }
  .quick-start-v1 .quick-preset-block,
  .quick-start-v1 .quick-maze-modes{
    min-height:100px!important;
  }

  /* Picture Words keeps its three task modes compact too. */
  .quick-start-v1 .quick-pw-mode-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .quick-start-v1 .quick-pw-mode{
    min-height:92px!important;
    padding:8px 5px!important;
    gap:5px!important;
    border-radius:14px!important;
  }
  .quick-start-v1 .quick-pw-mode-visual{
    width:38px!important;
    height:34px!important;
    min-width:38px!important;
  }
  .quick-start-v1 .quick-pw-mode-copy b{
    font-size:11.5px!important;
    line-height:1.12!important;
  }
  .quick-start-v1 .quick-pw-mode-copy small{display:none!important}

  /* 4) Mobile typography/touch targets should not collapse too small. */
  .section-eyebrow,
  .quick-step-label,
  .quick-maze-label,
  .quick-pw-modes-label{font-size:11px!important}
  .hero-eyebrow{font-size:11px!important}

  /* 5) Stable paired actions for common phone widths. */
  .quick-start-actions-v1{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    justify-content:stretch!important;
    flex-wrap:nowrap!important;
  }
  .quick-primary-button,
  .quick-secondary-button{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:48px!important;
    padding:10px 9px!important;
    border-radius:14px!important;
    font-size:12.5px!important;
    white-space:normal!important;
  }
}

@media screen and (max-width:350px){
  .quick-start-actions-v1{grid-template-columns:1fr!important}
  .hero-product-slider{width:min(286px,calc(100vw - 34px))!important}
  .hero-worksheet-card{width:min(260px,calc(100vw - 56px))!important}
  .audience-strip{grid-template-columns:1fr!important}
}

/* ============================================================
   v1.0.11 — True mobile A4 preview
   Keep the actual desktop/A4 worksheet composition and scale the whole sheet
   uniformly on narrow screens instead of responsively recomposing its inside.
   ============================================================ */
@media screen and (max-width:620px){
  .result-panel .worksheet-wrap.mobile-sheet-preview-wrap{
    position:relative!important;
    min-height:0!important;
    overflow:hidden!important;
    padding:8px!important;
    background:linear-gradient(145deg,#eef6fb,#e7f1f8)!important;
  }

  .worksheet.mobile-sheet-preview{
    max-width:none!important;
    flex:none!important;
    transform-origin:top left!important;
    box-shadow:0 18px 38px rgba(49,79,109,.13)!important;
  }
  .worksheet.mobile-sheet-preview.orientation-portrait{
    width:900px!important;
    min-width:900px!important;
    max-width:none!important;
    aspect-ratio:210 / 297!important;
  }
  .worksheet.mobile-sheet-preview.orientation-landscape{
    width:1180px!important;
    min-width:1180px!important;
    max-width:none!important;
    aspect-ratio:297 / 210!important;
    display:grid!important;
    grid-template-columns:minmax(260px,.38fr) minmax(0,.62fr)!important;
    grid-template-areas:
      "alphabet alphabet"
      "head head"
      "clues crossword"!important;
    column-gap:24px!important;
    align-content:start!important;
  }

  /* Do not let viewport media queries change the visual language inside A4. */
  .worksheet.mobile-sheet-preview .alphabet-strip{
    font-size:12px!important;
    gap:4px!important;
  }

  /* Maze keeps its desktop marker lanes and marker sizes; the whole page scales. */
  .worksheet.mobile-sheet-preview.exercise-maze .maze-board-shell{
    grid-template-columns:64px minmax(0,1fr) 64px!important;
    width:min(100%,920px)!important;
    padding:0!important;
  }
  .worksheet.mobile-sheet-preview.orientation-landscape.exercise-maze .maze-board-shell{
    grid-template-columns:68px minmax(0,1fr) 68px!important;
    width:min(100%,980px)!important;
  }
  .worksheet.mobile-sheet-preview.exercise-maze .maze-marker-lane .maze-marker{
    width:52px!important;
    max-height:52px!important;
  }
  .worksheet.mobile-sheet-preview.exercise-maze .maze-marker-group{
    width:52px!important;
    height:52px!important;
  }
  .worksheet.mobile-sheet-preview.exercise-maze .maze-marker-group .maze-marker{
    width:52px!important;
    height:52px!important;
  }
  .worksheet.mobile-sheet-preview.exercise-maze .maze-marker-label{
    bottom:calc(100% + 6px)!important;
    font-size:10px!important;
  }
  .worksheet.mobile-sheet-preview.exercise-maze .maze-walls{stroke-width:5!important}
  .worksheet.mobile-sheet-preview.exercise-maze .maze-solution-route{stroke-width:11!important}

  /* Choose Path also keeps desktop geometry; only the complete A4 page scales. */
  .worksheet.mobile-sheet-preview .choose-path-flow-horizontal .choose-path-work{
    grid-template-columns:clamp(54px,7.5%,82px) minmax(0,1fr) clamp(54px,7.5%,82px)!important;
    gap:clamp(8px,1vw,16px)!important;
  }
  .worksheet.mobile-sheet-preview .choose-path-flow-horizontal .choose-path-marker img{
    width:min(84px,88%)!important;
    max-height:96px!important;
  }
  .worksheet.mobile-sheet-preview .choose-path-flow-horizontal .choose-path-marker b{
    font-size:11px!important;
    top:calc(50% + 46px)!important;
  }
  .worksheet.mobile-sheet-preview .choose-path-flow-vertical .choose-path-board{
    width:min(100%,620px)!important;
  }
  .worksheet.mobile-sheet-preview .choose-path-flow-vertical .choose-path-marker img{
    width:80px!important;
    max-height:84px!important;
  }
}


/* ============================================================
   v1.0.12 — Mobile print isolation + compact full-width toolbar
   ============================================================ */
@media print{
  /* The mobile screen preview wrapper can carry an inline scaled height.
     In WYSIWYG printing it is not printable content at all; removing the
     whole wrapper prevents it from reserving a blank first/second page. */
  body.print-wysiwyg .result-panel .worksheet-wrap{
    display:none!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  body.print-wysiwyg #printBothPages{
    display:block!important;
    margin:0!important;
    padding:0!important;
  }
}

@media screen and (max-width:620px){
  /* Result toolbar: two deliberate rows, each spanning the full phone width. */
  .pro-commandbar{
    gap:7px!important;
  }

  .pro-commandbar .workspace-left{
    display:grid!important;
    grid-template-columns:42px minmax(0,1.45fr) minmax(0,.72fr) minmax(0,.98fr)!important;
    gap:6px!important;
    width:100%!important;
    overflow:visible!important;
    padding:0!important;
    align-items:stretch!important;
  }
  .pro-commandbar .workspace-left > #backHome,
  .pro-commandbar .workspace-left > #openWordsDrawer,
  .pro-commandbar .workspace-left > #openConfig,
  .pro-commandbar .workspace-left > #layoutMenu{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
  }
  .pro-commandbar .workspace-left > button,
  .pro-commandbar .workspace-left > details{
    flex:none!important;
  }
  .pro-commandbar .workspace-left button,
  .pro-commandbar .workspace-left summary{
    min-height:42px!important;
    padding-left:8px!important;
    padding-right:8px!important;
    justify-content:center!important;
    white-space:nowrap!important;
  }
  .pro-commandbar #openWordsDrawer span,
  .pro-commandbar #openConfig span,
  .pro-commandbar #layoutMenu summary span{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .pro-commandbar #layoutMenu .chev{
    flex:0 0 auto!important;
    overflow:visible!important;
  }

  /* The overflow menu next to Save is intentionally removed on phones. */
  .pro-commandbar #projectMenu{
    display:none!important;
  }

  .pro-commandbar .workspace-right{
    display:grid!important;
    grid-template-columns:minmax(0,1.16fr) minmax(70px,.78fr) minmax(0,1.08fr) minmax(0,1.02fr)!important;
    gap:6px!important;
    width:100%!important;
    align-items:stretch!important;
    overflow:visible!important;
    padding-top:7px!important;
  }
  .pro-commandbar .workspace-right > #saveProject{
    width:100%!important;
    min-width:0!important;
    padding:0 8px!important;
    justify-content:center!important;
    white-space:nowrap!important;
  }
  .pro-commandbar .workspace-right > #saveProject span{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .pro-commandbar .command-print{
    display:contents!important;
  }
  .pro-commandbar .command-print #quickPrintMode,
  .pro-commandbar .command-print #printAppearanceChip,
  .pro-commandbar .command-print #print{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:42px!important;
    margin:0!important;
    padding-left:7px!important;
    padding-right:7px!important;
    font-size:10.5px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }
  .pro-commandbar .command-print #quickPrintMode{
    text-overflow:ellipsis!important;
  }
  .pro-commandbar .command-print #printAppearanceChip{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .pro-commandbar .command-print #print{
    justify-content:center!important;
  }
  .pro-commandbar .command-print #print .ui-icon,
  .pro-commandbar #saveProject .ui-icon{
    width:14px!important;
    height:14px!important;
    flex:0 0 14px!important;
  }
}

@media screen and (max-width:385px){
  .pro-commandbar .workspace-left{
    grid-template-columns:40px minmax(0,1.35fr) minmax(0,.7fr) minmax(0,.9fr)!important;
  }
  .pro-commandbar .workspace-right{
    grid-template-columns:minmax(0,1.08fr) minmax(64px,.72fr) minmax(0,.98fr) minmax(0,.94fr)!important;
  }
  .pro-commandbar .workspace-left button,
  .pro-commandbar .workspace-left summary,
  .pro-commandbar .workspace-right button,
  .pro-commandbar .workspace-right select{
    font-size:9.8px!important;
  }
  .pro-commandbar .workspace-left .ui-icon{
    width:13px!important;
    height:13px!important;
  }
}

/* ============================================================
   v1.0.13 — TRUE desktop worksheet composition on mobile
   Mobile may scale the finished A4 page, but MUST NOT reflow/recompose
   any worksheet internals. These overrides neutralize older viewport
   media rules for the on-screen A4 preview only.
   ============================================================ */
@media screen and (max-width:620px){
  /* Core sheet typography/spacing = desktop contract. */
  .worksheet.mobile-sheet-preview .alphabet-strip{
    font-size:12px!important;
    gap:4px!important;
  }
  .worksheet.mobile-sheet-preview .print-head h2{font-size:32px!important}
  .worksheet.mobile-sheet-preview .print-head p{font-size:16px!important}
  .worksheet.mobile-sheet-preview .clue-sections{gap:14px!important}
  .worksheet.mobile-sheet-preview .clue-group h3{font-size:18px!important}
  .worksheet.mobile-sheet-preview .worksheet-footer-meta{font-size:13px!important}

  /* Landscape crossword restores the real desktop two-column A4 composition. */
  .worksheet.mobile-sheet-preview.orientation-landscape:not(.exercise-maze):not(.exercise-choose-path):not(.exercise-picture-words){
    display:grid!important;
    grid-template-columns:minmax(260px,.38fr) minmax(0,.62fr)!important;
    grid-template-areas:
      "alphabet alphabet"
      "head head"
      "clues crossword"!important;
    column-gap:24px!important;
    align-content:start!important;
  }

  /* ---------------- Maze: exact desktop screen geometry ---------------- */
  .worksheet.mobile-sheet-preview.exercise-maze .maze-work{
    gap:26px!important;
    justify-items:center!important;
  }
  .worksheet.mobile-sheet-preview.exercise-maze .maze-board-shell{
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr) 64px!important;
    align-items:stretch!important;
    width:min(100%,920px)!important;
    padding:0!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
  }
  .worksheet.mobile-sheet-preview.orientation-landscape.exercise-maze{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "alphabet"
      "head"
      "crossword"!important;
    column-gap:0!important;
    justify-items:stretch!important;
  }
  .worksheet.mobile-sheet-preview.orientation-landscape.exercise-maze .crossword-area{
    grid-area:crossword!important;
    width:100%!important;
    margin-top:22px!important;
    justify-self:stretch!important;
    justify-content:center!important;
  }
  .worksheet.mobile-sheet-preview.orientation-landscape.exercise-maze .maze-board-shell{
    width:min(100%,980px)!important;
    grid-template-columns:68px minmax(0,1fr) 68px!important;
    padding:0!important;
  }
  .worksheet.mobile-sheet-preview.exercise-maze .maze-marker-lane .maze-marker{
    width:52px!important;
    max-height:52px!important;
  }
  .worksheet.mobile-sheet-preview.exercise-maze .maze-marker-group{
    width:52px!important;
    height:52px!important;
  }
  .worksheet.mobile-sheet-preview.exercise-maze .maze-marker-group .maze-marker{
    width:52px!important;
    height:52px!important;
    max-height:none!important;
  }
  .worksheet.mobile-sheet-preview.exercise-maze .maze-marker-label{
    bottom:calc(100% + 6px)!important;
    font-size:10px!important;
  }
  .worksheet.mobile-sheet-preview.exercise-maze .maze-walls{stroke-width:3.2!important}
  .worksheet.mobile-sheet-preview.exercise-maze .maze-solution-route{
    stroke-width:7!important;
    opacity:.66!important;
  }

  /* ------------- Choose Path: exact desktop portrait/landscape ---------- */
  .worksheet.mobile-sheet-preview.orientation-landscape.exercise-choose-path{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:
      "alphabet"
      "head"
      "crossword"!important;
    column-gap:0!important;
    justify-items:stretch!important;
  }
  .worksheet.mobile-sheet-preview.orientation-landscape.exercise-choose-path .crossword-area{
    grid-area:crossword!important;
    width:100%!important;
    margin-top:16px!important;
    justify-self:stretch!important;
    justify-content:center!important;
  }
  .worksheet.mobile-sheet-preview.orientation-landscape.exercise-choose-path .choose-path-work{
    width:min(100%,1040px)!important;
    margin:0 auto!important;
    grid-template-columns:clamp(44px,5.8%,66px) minmax(0,1fr) clamp(44px,5.8%,66px)!important;
    padding-top:4px!important;
    padding-bottom:8px!important;
    gap:4px!important;
    align-content:center!important;
  }
  .worksheet.mobile-sheet-preview.orientation-landscape.exercise-choose-path .choose-path-board{
    width:100%!important;
    max-width:100%!important;
    aspect-ratio:112 / 72!important;
  }
  .worksheet.mobile-sheet-preview.orientation-landscape.exercise-choose-path .choose-path-marker img{
    width:min(56px,78%)!important;
    max-height:64px!important;
  }
  .worksheet.mobile-sheet-preview.orientation-landscape.exercise-choose-path .choose-path-marker b{
    top:calc(50% + 34px)!important;
    font-size:10px!important;
  }
  .worksheet.mobile-sheet-preview.orientation-portrait.exercise-choose-path .crossword-area{
    margin-top:14px!important;
  }
  .worksheet.mobile-sheet-preview.orientation-portrait.exercise-choose-path .choose-path-work{
    grid-template-columns:1fr!important;
    grid-template-rows:auto 1fr auto!important;
    gap:8px!important;
    padding-top:4px!important;
    padding-bottom:14px!important;
  }
  .worksheet.mobile-sheet-preview.orientation-portrait.exercise-choose-path .choose-path-board{
    width:min(100%,146mm)!important;
    max-width:100%!important;
    aspect-ratio:72 / 112!important;
  }
  .worksheet.mobile-sheet-preview.orientation-portrait.exercise-choose-path .choose-path-marker img{
    width:min(80px,34vw)!important;
    max-height:84px!important;
  }
  .worksheet.mobile-sheet-preview.orientation-portrait.exercise-choose-path .choose-path-marker b{
    font-size:11px!important;
  }

  /* ---------------- Picture Words: exact desktop grids ------------------ */
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-write-grid,
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-choice-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-write-grid{gap:12px 28px!important}
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-choice-grid{gap:10px 22px!important}
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-write-item{
    min-height:118px!important;
    grid-template-columns:26px minmax(58px,calc(var(--picSize) * .92)) minmax(0,1fr)!important;
    gap:8px 8px!important;
    padding:10px 4px 12px 0!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-choice-item{
    min-height:128px!important;
    grid-template-columns:26px minmax(70px,calc(var(--picSize) + 12px)) minmax(0,1fr)!important;
    gap:8px 10px!important;
    padding:10px 6px 11px 0!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-picture img{
    width:calc(var(--picSize) * 1.06)!important;
    height:calc(var(--picSize) * 1.06)!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-write-item .pw-picture img{
    width:calc(var(--picSize) * .92)!important;
    height:calc(var(--picSize) * .92)!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-letter-box{
    width:clamp(20px,calc(var(--cell) * .50),34px)!important;
    height:clamp(25px,calc(var(--cell) * .58),40px)!important;
    font-size:clamp(12px,calc(var(--cell) * .26),18px)!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-match-grid{
    grid-template-columns:minmax(0,1fr) 1px minmax(0,1.08fr)!important;
    gap:22px!important;
    align-items:start!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-match-divider{
    width:1px!important;
    height:100%!important;
    min-height:420px!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-match-picture{
    min-height:76px!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    gap:12px!important;
    padding:5px 8px!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-match-picture img{
    width:var(--picSize)!important;
    height:var(--picSize)!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-match-word{
    min-height:76px!important;
    grid-template-columns:28px minmax(0,1fr) auto!important;
    gap:10px!important;
    padding:5px 8px!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-match-line,
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-match-answer{
    grid-column:auto!important;
    justify-self:end!important;
  }
  .worksheet.mobile-sheet-preview.orientation-landscape.exercise-picture-words{
    display:grid!important;
    grid-template-columns:minmax(260px,.38fr) minmax(0,.62fr)!important;
    grid-template-areas:
      "alphabet alphabet"
      "head head"
      "crossword crossword"!important;
    column-gap:24px!important;
    align-content:start!important;
  }

  /* Mobile toolbar buttons share one height; Save must not look smaller. */
  .pro-commandbar .workspace-right > #saveProject,
  .pro-commandbar .command-print #quickPrintMode,
  .pro-commandbar .command-print #printAppearanceChip,
  .pro-commandbar .command-print #print{
    min-height:42px!important;
    height:42px!important;
    align-self:stretch!important;
    box-sizing:border-box!important;
  }
}

/* ============================================================
   v1.0.15 — Exact Picture Words desktop contract on mobile
   The previous canonical override accidentally restored an obsolete
   three-column match-row definition. The live desktop contract is two
   columns: word | answer line. Also restore the latest desktop image/row
   sizing from v5.36.2 rather than older base values.
   ============================================================ */
@media screen and (max-width:620px){
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-picture img{
    width:min(calc(var(--picSize) * .88),60px)!important;
    height:min(calc(var(--picSize) * .88),60px)!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-write-item .pw-picture img{
    width:min(calc(var(--picSize) * .88),60px)!important;
    height:min(calc(var(--picSize) * .88),60px)!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-write-item.is-compact .pw-picture img{
    width:min(calc(var(--picSize) * .80),56px)!important;
    height:min(calc(var(--picSize) * .80),56px)!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-write-item.is-tight .pw-picture img{
    width:min(calc(var(--picSize) * .74),52px)!important;
    height:min(calc(var(--picSize) * .74),52px)!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-match-picture,
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-match-word{
    height:100%!important;
    min-height:0!important;
    box-sizing:border-box!important;
    align-self:stretch!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-match-picture{
    grid-template-columns:28px minmax(0,1fr)!important;
    gap:12px!important;
    padding:5px 8px!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-match-picture img{
    width:min(calc(var(--picSize) * .80),54px)!important;
    height:min(calc(var(--picSize) * .80),54px)!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-match-word{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
    padding:5px 8px!important;
  }
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-match-line,
  .worksheet.mobile-sheet-preview.exercise-picture-words .pw-match-answer{
    grid-column:auto!important;
    justify-self:end!important;
  }
}

/* ============================================================
   v1.0.16 — Saved sheets / My Sheets final polish
   Type color is semantic, never based on row position.
   ============================================================ */
.project-row:nth-child(3n+1),
.project-row:nth-child(3n+2),
.project-row:nth-child(3n){box-shadow:none!important}

.library-project-card.type-crossword,
.project-row-rich.type-crossword{--library-accent:#5f8ff4;--library-soft:#eef5ff;--library-ink:#3567bd}
.library-project-card.type-maze,
.project-row-rich.type-maze{--library-accent:#79bd98;--library-soft:#eefaf3;--library-ink:#3f855e}
.library-project-card.type-path,
.project-row-rich.type-path{--library-accent:#e0ad3f;--library-soft:#fff7df;--library-ink:#9a7312}
.library-project-card.type-words,
.project-row-rich.type-words{--library-accent:#e8897f;--library-soft:#fff1ef;--library-ink:#b85d59}
.library-project-card.type-generic,
.project-row-rich.type-generic{--library-accent:#9aabc0;--library-soft:#f4f7fa;--library-ink:#60758a}

.library-project-card[class*="type-"],
.project-row-rich[class*="type-"]{
  border-left:4px solid var(--library-accent)!important;
}
.library-project-card[class*="type-"] .project-thumb,
.project-row-rich[class*="type-"] .project-thumb{
  background:var(--library-soft)!important;
  border-color:color-mix(in srgb,var(--library-accent) 24%,#dfe8f1)!important;
}
.library-project-card[class*="type-"] .library-open-arrow{
  background:var(--library-soft)!important;
  color:var(--library-ink)!important;
}

.library-type-badge.crossword{background:#edf5ff;color:#3567bd}
.library-type-badge.maze{background:#ebfaf3;color:#25835a}
.library-type-badge.path{background:#fff6dd;color:#9a7312}
.library-type-badge.words{background:#fff0ef;color:#b85d59}

.project-row-type{
  width:max-content;
  max-width:100%;
  margin-bottom:5px;
  min-height:22px!important;
  padding:0 7px!important;
  font-size:9px!important;
}
.project-row-type i{min-width:14px!important;height:14px!important;font-size:8px!important}
.project-row-rich .project-copy b{font-size:14px;color:#1f4168}
.project-row-rich .project-copy small{margin-top:3px;color:#73879c;font-size:10px;line-height:1.35}
.project-row-rich .project-copy em{margin-top:4px}

.project-thumb-path{
  display:grid!important;
  grid-template-columns:20px minmax(0,1fr) 20px!important;
  align-items:center!important;
  gap:3px!important;
  padding:5px!important;
}
.project-thumb-path .path-thumb-icon{display:grid;place-items:center;min-width:0}
.project-thumb-path .path-thumb-icon img{width:19px;height:19px;object-fit:contain}
.project-thumb-path svg{width:100%;height:32px;overflow:visible}
.project-thumb-path svg path{
  fill:none;
  stroke:#91701e;
  stroke-width:1.25;
  stroke-linecap:round;
  opacity:.85;
}
.project-thumb-path svg path:nth-child(2){stroke:#b88c25;opacity:.7}
.project-thumb-path svg path:nth-child(3){stroke:#d3ad52;opacity:.65}

/* Modal rows use the same semantic color system as the home cards. */
.project-row-rich{
  min-height:88px;
  align-items:center;
  padding-left:12px!important;
}
.project-row-rich.type-crossword:hover{border-color:#bad0fb!important;background:#f8fbff!important}
.project-row-rich.type-maze:hover{border-color:#bce0cb!important;background:#f8fdf9!important}
.project-row-rich.type-path:hover{border-color:#ecd494!important;background:#fffdf7!important}
.project-row-rich.type-words:hover{border-color:#f0c4bf!important;background:#fffaf9!important}

@media(max-width:720px){
  .project-row-type{margin-bottom:4px}
  .project-row-rich{min-height:0}
}

/* ============================================================
   v1.0.17 — Mobile saved-sheet card breathing room
   Keep thumbnails and copy visually separated without changing desktop.
   ============================================================ */
@media screen and (max-width:720px){
  .project-row-rich{
    grid-template-columns:60px minmax(0,1fr)!important;
    column-gap:14px!important;
    row-gap:10px!important;
    padding:12px!important;
  }
  .project-row-rich .project-thumb{
    width:58px!important;
    height:54px!important;
    align-self:center!important;
  }
  .project-row-rich .project-copy{
    min-width:0!important;
    align-self:center!important;
    padding-left:1px!important;
  }
  .project-row-rich .project-actions{
    margin-top:2px!important;
  }
}

/* ============================================================
   v1.1.0-dev5 — Connect Dots master drawings
   ============================================================ */
@media screen{
  .module-grid-v1{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .module-dots-v1 .module-v1-visual,
  .quick-summary-connect-dots{background:linear-gradient(180deg,#f8f3ff 0%,#f1e9ff 100%)!important}
  .module-scene-dots svg{width:118px;height:82px;overflow:visible}
  .module-scene-dots svg>path{fill:none;stroke:#b9a8d8;stroke-width:2.2;stroke-dasharray:4 5;stroke-linecap:round;opacity:.75}
  .module-scene-dots svg circle{fill:#7c5cc4;stroke:#fff;stroke-width:1.4}
  .quick-summary-connect-dots .module-scene-dots svg{width:104px;height:72px}

  body[data-exercise-type="connect-dots"] #configPanel .word-config-only{display:none!important}
  body[data-exercise-type="connect-dots"] #configPanel .creator-basics{grid-template-columns:1fr!important}
  body[data-exercise-type="connect-dots"] #configPanel .title-box{grid-column:1!important}
  body[data-exercise-type="connect-dots"] #firstLetterSetting,
  body[data-exercise-type="connect-dots"] #firstLetterQuick{display:none!important}

  /* In result mode, “Картинка” owns game content. “Лист” owns page/print settings. */
  body.mode-result.drawer-open.dots-content-drawer #configPanel .setup-basics-section{
    display:block!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body[data-exercise-type="connect-dots"].drawer-open:not(.dots-content-drawer) #connectDotsConfigSection{display:none!important}
  body.dots-content-drawer #configPanel .setup-basics-section>.setup-section-head,
  body.dots-content-drawer #configPanel .config-basics-main,
  body.dots-content-drawer #configPanel .quick-create-row,
  body.dots-content-drawer #configPanel #advancedConfig,
  body.dots-content-drawer #configPanel .asset-note{display:none!important}
  body.dots-content-drawer #connectDotsConfigSection{display:block!important;margin:0!important;border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important}

  .connect-dots-config-section{
    margin-top:16px;padding:18px;border:1px solid #ded5ef;border-radius:18px;
    background:linear-gradient(180deg,#fdfbff,#f8f4ff)
  }
  .connect-dots-option-block{margin-top:16px}
  .connect-dots-option-label{display:block;margin-bottom:8px;font-size:10px;font-weight:900;letter-spacing:.08em;color:#765aa8}
  .connect-dots-count-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .connect-dots-count-card{
    min-height:74px;padding:12px 14px;border:1.5px solid #ddd5ea;border-radius:15px;background:#fff;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;text-align:left;color:#31455f
  }
  .connect-dots-count-card b{font-size:12px;color:#2f4160}.connect-dots-count-card small{font-size:9.7px;line-height:1.35;color:#8290a2}
  .connect-dots-count-card:hover{border-color:#ad96db;background:#fcfaff}
  .connect-dots-count-card.is-selected{border-color:#7c5cc4;box-shadow:0 0 0 3px rgba(124,92,196,.12);background:#fbf8ff}
  .connect-dots-picture-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-end;margin-bottom:9px}
  .connect-dots-picture-head .connect-dots-option-label{margin:0}.connect-dots-picture-head small{font-size:10px;color:#8290a2;text-align:right}
  .connect-dots-category-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
  .connect-dots-category-pills button{padding:7px 10px;border:1px solid #ded6eb;border-radius:999px;background:#fff;color:#65748a;font-size:10px;font-weight:800}
  .connect-dots-category-pills button:hover{border-color:#b9a7dd;color:#7358aa}
  .connect-dots-category-pills button.is-selected{background:#ede5fb;border-color:#a88bd7;color:#6748a5}
  .connect-dots-picture-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .connect-dots-picture-card{
    min-height:82px;padding:9px 9px;border:1.5px solid #ddd5ea;border-radius:15px;background:#fff;
    display:flex;align-items:center;gap:8px;text-align:left;color:#31455f;min-width:0
  }
  .connect-dots-picture-card:hover{border-color:#ad96db;background:#fcfaff}
  .connect-dots-picture-card.is-selected{border-color:#7c5cc4;box-shadow:0 0 0 3px rgba(124,92,196,.12);background:#fbf8ff}
  .connect-dots-picture-card>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
  .connect-dots-picture-card b{font-size:11.5px;color:#2f4160;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .connect-dots-picture-card small{font-size:9px;color:#8290a2;line-height:1.2}
  .dots-card-icon,.dots-card-preview{
    width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;background:#f1eaff;color:#7455bc;font-size:17px;font-weight:900;overflow:hidden
  }
  .dots-card-preview svg{width:32px;height:32px;overflow:visible}.dots-card-preview polyline,.dots-card-preview path{fill:none;stroke:#7455bc;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
  .connect-dots-picture-card-auto{grid-column:span 2}

  .worksheet.exercise-connect-dots .clue-sections{display:none!important}
  .worksheet.exercise-connect-dots .crossword-area{width:100%;margin-top:7px!important;align-items:stretch!important;justify-content:center!important}
  .connect-dots-sheet{width:100%;display:flex;justify-content:center;align-items:flex-start}
  .connect-dots-work{width:min(100%,700px);display:grid;align-items:start;justify-items:center;gap:4px}
  .connect-dots-work--single{grid-template-columns:1fr}
  .connect-dots-work--double{grid-template-columns:1fr;max-width:620px;gap:0}
  .connect-dots-figure{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;min-width:0}
  .connect-dots-work--single .connect-dots-figure{max-width:650px}
  .connect-dots-work--double .connect-dots-figure{max-width:340px}
  .connect-dots-svg{display:block;width:100%;height:auto;overflow:visible}
  .connect-dots-visible-stroke{fill:none;stroke:#18212c;stroke-width:.48;stroke-linecap:round;stroke-linejoin:round}
  .connect-dots-details{fill:none;stroke:#18212c;stroke-width:.38;stroke-linecap:round;stroke-linejoin:round}
  .connect-dots-details circle{fill:none;stroke:#18212c;stroke-width:.38}
  .connect-dots-solution{fill:none;stroke:#6c4eb5;stroke-width:.42;stroke-linecap:round;stroke-linejoin:round;opacity:.82}
  .connect-dot circle{fill:#111827;stroke:#fff;stroke-width:.16}
  .connect-dot text{font-family:Arial,Helvetica,sans-serif;font-size:1.65px;font-weight:700;fill:#111827;paint-order:stroke;stroke:#fff;stroke-width:.28px;stroke-linejoin:round}
  .connect-dots-work.is-solution .connect-dots-points{opacity:.42}
  .connect-dots-caption{font-size:9px;font-weight:800;color:#718096;letter-spacing:.02em}

  .worksheet.orientation-landscape.exercise-connect-dots{
    grid-template-areas:"alphabet" "head" "crossword"!important;
    grid-template-columns:minmax(0,1fr)!important
  }
  .worksheet.orientation-landscape.exercise-connect-dots .alphabet-strip{grid-area:alphabet!important}
  .worksheet.orientation-landscape.exercise-connect-dots .print-head{grid-area:head!important}
  .worksheet.orientation-landscape.exercise-connect-dots .crossword-area{grid-area:crossword!important;width:100%!important}
  .worksheet.orientation-landscape.exercise-connect-dots .connect-dots-work--double{max-width:1080px;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .worksheet.orientation-landscape.exercise-connect-dots .connect-dots-work--double .connect-dots-figure{max-width:510px}
  .worksheet.orientation-landscape.exercise-connect-dots .connect-dots-work--single{max-width:700px}

}

.library-type-badge.dots{background:#f1eaff!important;color:#6f50b7!important}
.library-project-card.type-dots,
.project-row-rich.type-dots{--library-accent:#9a7bd4;--library-soft:#f5f0ff;--library-ink:#6f50b7}
.project-row-rich.type-dots:hover{border-color:#d2c1f0!important;background:#fcfaff!important}
.project-thumb-dots{display:grid!important;place-items:center!important;background:#f8f4ff!important}
.project-thumb-dots svg{width:62px;height:48px}.project-thumb-dots circle{fill:#7c5cc4}

@media screen and (max-width:1200px) and (min-width:1051px){.module-grid-v1{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media screen and (max-width:1050px){.connect-dots-picture-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media screen and (max-width:700px){
  .connect-dots-picture-grid{grid-template-columns:1fr 1fr}.connect-dots-picture-card-auto{grid-column:1/-1}
  .connect-dots-picture-head{display:block}.connect-dots-picture-head small{display:block;margin-top:4px;text-align:left}
  .connect-dots-count-grid{grid-template-columns:1fr 1fr}.connect-dots-count-card{padding:10px;min-height:78px}
  .connect-dots-work{width:100%}.connect-dots-svg{width:100%;max-height:none}
}

@media print{
  .connect-dots-visible-stroke{fill:none!important;stroke:#18212c!important;stroke-width:.48!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  .worksheet.exercise-connect-dots .crossword-area{margin-top:2mm!important;width:100%!important}
  .connect-dots-work{width:100%!important;gap:1mm!important}
  .connect-dots-work--single{max-width:168mm!important}.connect-dots-work--double{max-width:155mm!important}
  .connect-dots-svg{width:100%!important;max-height:210mm!important}
  .connect-dots-caption{font-size:7pt!important}.connect-dot text{font-size:1.65px!important}
}

/* ============================================================
   v1.1.0-dev4 — Connect Dots drawer aligned with v1 UI
   ============================================================ */
@media screen{
  body.dots-content-drawer #connectDotsConfigSection,
  .connect-dots-config-section{
    margin:0!important;
    padding:18px 20px 20px!important;
    border:1px solid #e3ebf2!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 3px 10px rgba(59,101,145,.035)!important;
  }
  .connect-dots-config-section .setup-section-head{
    margin-bottom:14px!important;
  }
  .connect-dots-config-section .setup-section-head h3{
    color:#294763!important;
  }
  .connect-dots-config-section .setup-section-head>small{
    color:#8496a8!important;
  }
  .connect-dots-config-section .section-eyebrow,
  .connect-dots-option-label{
    color:#5474b8!important;
  }
  .connect-dots-option-block{
    margin-top:14px!important;
  }
  .connect-dots-picture-block{
    padding-top:14px;
    border-top:1px solid #edf2f6;
  }
  .connect-dots-difficulty-grid{
    gap:8px!important;
    margin-top:8px!important;
  }
  .connect-dots-difficulty-grid .maze-difficulty-card{
    min-height:64px!important;
    padding:10px 11px!important;
    border-color:#e1e8ee!important;
    border-radius:13px!important;
    background:#fff!important;
  }
  .connect-dots-difficulty-grid .maze-difficulty-card:hover{
    border-color:#b9c8d8!important;
    background:#fbfdff!important;
  }
  .connect-dots-difficulty-grid .maze-difficulty-card.is-selected{
    border-color:#9b86cf!important;
    background:#f8f5ff!important;
    box-shadow:0 0 0 2px rgba(124,92,196,.07)!important;
  }
  .connect-dots-picture-head{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin-bottom:8px!important;
  }
  .connect-dots-picture-head small{
    color:#8496a8!important;
    font-size:9.5px!important;
    line-height:1.35!important;
  }
  .connect-dots-category-pills{
    gap:6px!important;
    margin-bottom:9px!important;
  }
  .connect-dots-category-pills button{
    padding:6px 9px!important;
    border:1px solid #e0e7ee!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#64758a!important;
    font-size:9.5px!important;
    font-weight:750!important;
  }
  .connect-dots-category-pills button:hover{
    border-color:#b8c7d6!important;
    background:#fbfdff!important;
    color:#385778!important;
  }
  .connect-dots-category-pills button.is-selected{
    border-color:#a895d4!important;
    background:#f5f1fc!important;
    color:#684da5!important;
    box-shadow:none!important;
  }
  .connect-dots-picture-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    max-height:360px!important;
    overflow:auto!important;
    padding:2px 4px 2px 2px!important;
  }
  .connect-dots-picture-card{
    min-height:54px!important;
    padding:7px 9px!important;
    border:1px solid #e3ebf2!important;
    border-radius:12px!important;
    background:#fff!important;
    gap:8px!important;
    box-shadow:none!important;
  }
  .connect-dots-picture-card:hover{
    border-color:#b7c9db!important;
    background:#fbfdff!important;
  }
  .connect-dots-picture-card.is-selected{
    border-color:#9b86cf!important;
    background:#f8f5ff!important;
    box-shadow:0 0 0 1px rgba(124,92,196,.06)!important;
  }
  .connect-dots-picture-card b{
    font-size:10.5px!important;
    color:#314b68!important;
  }
  .connect-dots-picture-card small{
    font-size:8.5px!important;
    color:#8a99a9!important;
  }
  .dots-card-icon,.dots-card-preview{
    width:30px!important;
    height:30px!important;
    flex:0 0 30px!important;
    border-radius:9px!important;
    background:#f5f7fa!important;
    color:#6a7d91!important;
    font-size:14px!important;
  }
  .dots-card-preview svg{
    width:26px!important;
    height:26px!important;
  }
  .dots-card-preview polyline,
  .dots-card-preview path{
    stroke:#6a7d91!important;
    stroke-width:2.5!important;
  }
  .connect-dots-picture-card.is-selected .dots-card-icon,
  .connect-dots-picture-card.is-selected .dots-card-preview{
    background:#eee8fa!important;
    color:#7455bc!important;
  }
  .connect-dots-picture-card.is-selected .dots-card-preview polyline,
  .connect-dots-picture-card.is-selected .dots-card-preview path{
    stroke:#7455bc!important;
  }
  .connect-dots-picture-card-auto{
    grid-column:1/-1!important;
    min-height:50px!important;
  }
  #connectDotsConfigNote{
    margin:10px 0 0!important;
    color:#7e8fa1!important;
    font-size:9.5px!important;
  }
}

@media screen and (max-width:520px){
  .connect-dots-picture-grid{grid-template-columns:1fr!important;max-height:330px!important}
  .connect-dots-picture-card-auto{grid-column:auto!important}
  .connect-dots-picture-head{display:block!important}
  .connect-dots-picture-head small{display:block!important;margin-top:4px!important;text-align:left!important}
}

/* Connect dots raster image library integration */
.connect-dots-picker-loading{padding:14px 12px;border:1px dashed #cdbfe7;border-radius:14px;background:#faf7ff;color:#6d5a8f;font-size:11px;font-weight:700;text-align:center}
.dots-card-thumb{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:14px;background:#fff;border:1px solid #ece6f6;overflow:hidden;flex:0 0 72px}
.dots-card-thumb img{display:block;max-width:100%;max-height:100%;object-fit:contain;background:#fff}
.dots-card-icon-auto{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:14px;background:linear-gradient(180deg,#f3edff 0%,#ebe1ff 100%);border:1px solid #d8c9f7;color:#6f4fb7;font-size:28px;font-weight:900;flex:0 0 72px}
.connect-dots-bg-image{image-rendering:auto}
.connect-dots-picture-card{align-items:center}
.connect-dots-picture-card small{word-break:break-word}
.connect-dots-picture-card .dots-card-preview{display:none}
.connect-dots-work.is-solution .connect-dots-bg-image{opacity:.78}
@media print{
  .connect-dots-bg-image{opacity:1!important}
}


/* ============================================================
   v1.1.0-dev11 — Connect Dots production polish
   Neutral UI, category library, lazy thumbnails, editor-only quality badge.
   ============================================================ */
@media screen{
  .connect-dots-config-section .section-eyebrow,
  .connect-dots-option-label{color:#667d91!important}
  .connect-dots-config-section .setup-section-head h3{color:#294966!important}
  .connect-dots-config-section .setup-section-head>small{color:#7f91a3!important;max-width:520px}

  .connect-dots-difficulty-grid .maze-difficulty-card.is-selected{
    border-color:#75ae88!important;
    background:#f1faf4!important;
    box-shadow:0 0 0 2px rgba(92,155,113,.08)!important
  }
  .connect-dots-difficulty-grid .maze-difficulty-card:hover{
    border-color:#a9cdb6!important;
    background:#fbfefc!important
  }
  .connect-dots-difficulty-note{
    margin:8px 2px 0!important;color:#718497;font-size:9.5px;line-height:1.4
  }

  .connect-dots-category-pills button{
    border-color:#dfe7e2!important;border-radius:10px!important;color:#66788b!important;background:#fff!important
  }
  .connect-dots-category-pills button:hover{
    border-color:#a9cdb6!important;background:#fbfefc!important;color:#36516c!important
  }
  .connect-dots-category-pills button.is-selected{
    border-color:#75ae88!important;background:#f1faf4!important;color:#365c43!important;box-shadow:none!important
  }

  .connect-dots-picture-card{border-color:#e1e8ee!important;background:#fff!important}
  .connect-dots-picture-card:hover{border-color:#b9c8d8!important;background:#fbfdff!important}
  .connect-dots-picture-card.is-selected{
    border-color:#75ae88!important;background:#f1faf4!important;box-shadow:0 0 0 1px rgba(92,155,113,.07)!important
  }
  .dots-card-thumb,
  .dots-card-icon-auto{
    width:46px!important;height:46px!important;flex:0 0 46px!important;border-radius:10px!important;
    background:#f7f9fb!important;border:1px solid #e4ebf1!important
  }
  .dots-card-thumb img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
  .dots-card-icon-auto{color:#64788b!important;font-size:20px!important;background:#f5f8fa!important}
  .connect-dots-picture-card.is-selected .dots-card-icon-auto{background:#eaf5ed!important;color:#4f775b!important}
  .connect-dots-picture-card{content-visibility:auto;contain-intrinsic-size:64px}
  .connect-dots-picker-loading{
    grid-column:1/-1;padding:14px 12px;border:1px dashed #cfd9e1;border-radius:12px;background:#f8fafc;
    color:#718497;font-size:10px;font-weight:750;text-align:center
  }
  .dots-quality-badge{
    display:inline-flex;align-items:center;align-self:flex-start;margin-top:3px;padding:2px 6px;border-radius:999px;
    font-style:normal;font-size:7.5px;font-weight:900;letter-spacing:.04em
  }
  .dots-quality-badge.is-pass{background:#e7f6ec;color:#39734b}
  .dots-quality-badge.is-review{background:#fff3d9;color:#8a6418}
  .connect-dots-quality-debug{
    display:inline-flex;margin-left:7px;padding:2px 7px;border-radius:999px;font-size:9px;font-weight:900;vertical-align:1px
  }
  .connect-dots-quality-debug.is-pass{background:#e7f6ec;color:#39734b}
  .connect-dots-quality-debug.is-review{background:#fff3d9;color:#8a6418}
}

.connect-dots-erase{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}
.connect-dots-solution{stroke:#566b80!important;opacity:.9!important}
.connect-dots-work.is-solution .connect-dots-bg-image{opacity:1!important}

@media print{
  .connect-dots-erase{fill:none!important;stroke:#fff!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  .connect-dots-quality-debug,.dots-quality-badge{display:none!important}
}


/* ============================================================
   v1.1.0-dev16 — Connect Dots neutral controls + exact next-image cycle
   Match the established crossword/category-chip UI. No game-specific
   accent color inside the configuration drawer.
   ============================================================ */
@media screen{
  .connect-dots-difficulty-grid .maze-difficulty-card,
  .connect-dots-picture-card{
    background:#fff!important;
    border-color:#dbe3ea!important;
    box-shadow:none!important;
  }
  .connect-dots-difficulty-grid .maze-difficulty-card:hover,
  .connect-dots-picture-card:hover{
    background:#fbfcfd!important;
    border-color:#aebdca!important;
  }
  .connect-dots-difficulty-grid .maze-difficulty-card.is-selected,
  .connect-dots-picture-card.is-selected{
    background:#fff!important;
    border-color:#71869a!important;
    box-shadow:0 0 0 1px rgba(71,85,105,.08)!important;
  }
  .connect-dots-difficulty-grid .maze-difficulty-card.is-selected b,
  .connect-dots-picture-card.is-selected b{color:#2f4356!important}

  .connect-dots-category-pills{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    margin:0 0 10px!important;
    padding:0!important;
    overflow:visible!important;
  }
  .connect-dots-category-pills button{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    height:32px!important;
    min-height:32px!important;
    padding:0 11px!important;
    border:1px solid #d8e0e7!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#5f7183!important;
    box-shadow:none!important;
    font-size:10px!important;
    font-weight:750!important;
    white-space:nowrap!important;
  }
  .connect-dots-category-pills button:hover{
    background:#fff!important;
    border-color:#9eafbd!important;
    color:#33495d!important;
  }
  .connect-dots-category-pills button.is-selected{
    background:#fff!important;
    border-color:#64788b!important;
    color:#2f4356!important;
    box-shadow:inset 0 0 0 1px #64788b!important;
  }
  .dots-card-icon-auto,
  .connect-dots-picture-card.is-selected .dots-card-icon-auto{
    background:#f6f8fa!important;
    border-color:#dfe6ec!important;
    color:#647688!important;
  }
}


/* ============================================================
   v1.1.0-dev11 — Connect Dots final category layout
   Four neutral category chips per row on desktop/tablet.
   ============================================================ */
@media screen and (min-width:521px){
  .connect-dots-category-pills{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
  }
  .connect-dots-category-pills button{
    width:100%!important;
    justify-content:center!important;
    text-align:center!important;
  }
}
@media screen and (max-width:520px){
  .connect-dots-category-pills{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
  }
  .connect-dots-category-pills button{
    width:100%!important;
    justify-content:center!important;
    text-align:center!important;
  }
}

/* ============================================================
   v1.2.0-dev1f — Mirror Draw / Дорисувай огледално
   ============================================================ */
@media screen and (min-width:1201px){
  .module-grid-v1{grid-template-columns:repeat(6,minmax(0,1fr))!important}
}

.module-mirror-v1 .module-v1-visual,
.quick-summary-mirror-draw{
  background:linear-gradient(180deg,#f1fbfa 0%,#e5f6f4 100%)!important;
}
.module-scene-mirror svg{width:118px;height:82px;overflow:visible}
.module-scene-mirror .mirror-preview-left{fill:none;stroke:#247d78;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.module-scene-mirror .mirror-preview-axis{fill:none;stroke:#9bb8b5;stroke-width:1.7;stroke-dasharray:4 4}
.module-scene-mirror .mirror-preview-hint{fill:none;stroke:#8ebfbb;stroke-width:2.2;stroke-dasharray:4 5;opacity:.72}
.quick-summary-mirror-draw .module-scene-mirror svg{width:104px;height:72px}

@media screen{
  body[data-exercise-type="mirror-draw"] #configPanel .word-config-only{display:none!important}
  body[data-exercise-type="mirror-draw"] #configPanel .creator-basics{grid-template-columns:1fr!important}
  body[data-exercise-type="mirror-draw"] #configPanel .title-box{grid-column:1!important}
  body[data-exercise-type="mirror-draw"] #firstLetterSetting,
  body[data-exercise-type="mirror-draw"] #firstLetterQuick{display:none!important}

  .mirror-draw-config-section{
    margin:0!important;padding:18px 20px 20px!important;border:1px solid #dfeceb!important;border-radius:16px!important;
    background:#fff!important;box-shadow:0 3px 10px rgba(54,111,107,.035)!important
  }
  .mirror-draw-config-section .setup-section-head{margin-bottom:14px!important}
  .mirror-draw-config-section .setup-section-head h3{color:#294763!important}
  .mirror-draw-config-section .setup-section-head>small{color:#8496a8!important;max-width:520px}
  .mirror-draw-config-section .section-eyebrow,.mirror-draw-option-label{color:#607b89!important}
  .mirror-draw-option-block{margin-top:14px!important}
  .mirror-draw-picture-block{padding-top:14px;border-top:1px solid #edf2f3}
  .mirror-draw-option-label{display:block;font-size:9.5px;font-weight:900;letter-spacing:.08em;margin-bottom:8px}
  .mirror-draw-difficulty-grid{gap:8px!important;margin-top:8px!important}
  .mirror-draw-difficulty-grid .maze-difficulty-card{min-height:64px!important;padding:10px 11px!important;border-color:#e1e8ee!important;border-radius:13px!important;background:#fff!important}
  .mirror-draw-difficulty-grid .maze-difficulty-card:hover{border-color:#a9ccc9!important;background:#fbfefd!important}
  .mirror-draw-difficulty-grid .maze-difficulty-card.is-selected{border-color:#66aaa5!important;background:#eff9f8!important;box-shadow:0 0 0 2px rgba(57,145,137,.08)!important}
  .mirror-draw-picture-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:8px}
  .mirror-draw-picture-head .mirror-draw-option-label{margin:0}
  .mirror-draw-picture-head small{color:#8496a8;font-size:9.5px;line-height:1.35;text-align:right}
  .mirror-draw-picture-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .mirror-draw-picture-card{min-width:0;min-height:86px;padding:8px 9px;border:1px solid #e1e8ee;border-radius:12px;background:#fff;display:flex;align-items:center;gap:9px;text-align:left;color:#314b68}
  .mirror-draw-picture-card:hover{border-color:#a9ccc9;background:#fbfefd}
  .mirror-draw-picture-card.is-selected{border-color:#66aaa5;background:#eff9f8;box-shadow:0 0 0 1px rgba(57,145,137,.07)}
  .mirror-draw-picture-card>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
  .mirror-draw-picture-card b{font-size:10.5px;color:#314b68;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mirror-draw-picture-card small{font-size:8.5px;color:#8a99a9;line-height:1.2}
  .mirror-card-thumb,.mirror-card-auto{width:54px;height:54px;flex:0 0 54px;border-radius:10px;border:1px solid #e4ebed;background:#fff;display:grid;place-items:center;overflow:hidden}
  .mirror-card-thumb img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
  .mirror-card-auto{font-size:24px;font-weight:900;color:#607b89;background:#f5f9f9}
  .mirror-draw-picture-card.is-selected .mirror-card-auto{background:#e5f4f2;color:#357e78}

  body.mode-result.drawer-open.mirror-content-drawer #configPanel .setup-basics-section{display:block!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
  body[data-exercise-type="mirror-draw"].drawer-open:not(.mirror-content-drawer) #mirrorDrawConfigSection{display:none!important}
  body.mirror-content-drawer #configPanel .setup-basics-section>.setup-section-head,
  body.mirror-content-drawer #configPanel .config-basics-main,
  body.mirror-content-drawer #configPanel .quick-create-row,
  body.mirror-content-drawer #configPanel #advancedConfig,
  body.mirror-content-drawer #configPanel .asset-note{display:none!important}
  body.mirror-content-drawer #mirrorDrawConfigSection{display:block!important}
}

@media screen and (max-width:700px){
  .mirror-draw-picture-grid{grid-template-columns:1fr 1fr}
  .mirror-draw-picture-card-auto{grid-column:1/-1}
  .mirror-draw-picture-head{display:block}.mirror-draw-picture-head small{display:block;margin-top:4px;text-align:left}
}
@media screen and (max-width:460px){.mirror-draw-picture-grid{grid-template-columns:1fr}.mirror-draw-picture-card-auto{grid-column:auto}}

/* Worksheet strip */
.strip-mirror-draw{display:none;justify-content:center;min-height:12px!important;height:12px;overflow:visible}
.strip-mirror-mini{display:block;width:100%;height:12px;overflow:visible}
.strip-mirror-axis{fill:none;stroke:#8aa5a3;stroke-width:1.25;stroke-dasharray:2.15 2.15}
.strip-mirror-wing,.strip-mirror-detail{fill:none;stroke-linecap:round;stroke-linejoin:round}
.strip-mirror-original .strip-mirror-wing{stroke:#17212b;stroke-width:1.75}
.strip-mirror-original .strip-mirror-detail{stroke:#41505d;stroke-width:1.15;opacity:.9}
.strip-mirror-original .strip-mirror-dot{fill:#41505d;opacity:.9}
.strip-mirror-copy .strip-mirror-wing{stroke:#6f9f9a;stroke-width:1.7;stroke-dasharray:4.1 3.3}
.strip-mirror-copy .strip-mirror-detail{stroke:#9bb7b4;stroke-width:1.1;stroke-dasharray:3 3.4}
.strip-mirror-copy .strip-mirror-dot{fill:none;stroke:#7ca8a4;stroke-width:1;stroke-dasharray:1.5 1.4}
.strip-mirror-body ellipse,.strip-mirror-body circle{fill:#fff;stroke:#17212b;stroke-width:1.35}
.strip-mirror-body path{fill:none;stroke:#17212b;stroke-width:1.05;stroke-linecap:round}
.strip-mirror-pencil{opacity:.9}
body[data-exercise-type="mirror-draw"] .strip-alphabet{display:none!important}
body[data-exercise-type="mirror-draw"] .strip-mirror-draw{display:flex!important}

/* Worksheet content */
.worksheet.exercise-mirror-draw .clue-sections{display:none!important}
.worksheet.exercise-mirror-draw .crossword-area{width:100%;margin-top:8px!important;align-items:flex-start!important;justify-content:center!important;min-height:0!important}
.mirror-draw-sheet{width:100%;display:flex;align-items:flex-start;justify-content:center}
.mirror-draw-work{width:min(100%,730px);display:flex;align-items:flex-start;justify-content:center;position:relative}
.mirror-draw-rendered{display:block;width:100%;height:auto;object-fit:contain;background:#fff}
.mirror-draw-source{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
.worksheet.orientation-landscape.exercise-mirror-draw{grid-template-areas:"alphabet" "head" "crossword"!important;grid-template-columns:minmax(0,1fr)!important}
.worksheet.orientation-landscape.exercise-mirror-draw .alphabet-strip{grid-area:alphabet!important}
.worksheet.orientation-landscape.exercise-mirror-draw .print-head{grid-area:head!important}
.worksheet.orientation-landscape.exercise-mirror-draw .crossword-area{grid-area:crossword!important;width:100%!important}
.worksheet.orientation-landscape.exercise-mirror-draw .mirror-draw-work{width:min(100%,600px)}

.library-type-badge.mirror{background:#e7f6f4!important;color:#287a75!important}
.library-project-card.type-mirror,.project-row-rich.type-mirror{--library-accent:#60aaa4;--library-soft:#eef9f8;--library-ink:#287a75}
.project-row-rich.type-mirror:hover{border-color:#b9dfdc!important;background:#fbfefd!important}
.project-thumb-mirror{display:grid!important;place-items:center!important;background:#f3fbfa!important;position:relative!important;overflow:hidden!important}
.project-thumb-mirror>span{width:58px;height:48px;overflow:hidden;display:block;position:relative}
.project-thumb-mirror img{width:58px;height:48px;object-fit:contain;display:block;clip-path:inset(0 50% 0 0);filter:grayscale(1)}
.project-thumb-mirror>i{position:absolute;left:50%;top:8px;bottom:8px;border-left:1px dashed #7ea9a6}

@media print{
  .strip-mirror-draw{height:3.2mm!important;min-height:3.2mm!important}
  .strip-mirror-mini{height:3.2mm!important}
  .worksheet.exercise-mirror-draw .crossword-area{margin-top:2mm!important;width:100%!important}
  .mirror-draw-work{width:172mm!important;max-width:100%!important}
  .worksheet.orientation-landscape.exercise-mirror-draw .mirror-draw-work{width:142mm!important}
  .mirror-draw-rendered{width:100%!important;height:auto!important}
}

/* ============================================================
   v1.2.0-dev1f — Full-sheet fit for image-first worksheets
   Connect Dots + Mirror Draw now use the largest safe A4 task area.
   ============================================================ */
.worksheet.exercise-connect-dots .connect-dots-work--single,
.worksheet.exercise-mirror-draw .mirror-draw-work{
  width:var(--single-artwork-fit-width,100%)!important;
  max-width:none!important;
}
.worksheet.exercise-connect-dots .connect-dots-work--single .connect-dots-figure{
  width:100%!important;
  max-width:none!important;
}
.worksheet.orientation-landscape.exercise-connect-dots .connect-dots-work--single,
.worksheet.orientation-landscape.exercise-mirror-draw .mirror-draw-work{
  width:var(--single-artwork-fit-width,100%)!important;
  max-width:none!important;
}

@media print{
  .worksheet.exercise-connect-dots .connect-dots-work--single,
  .worksheet.exercise-mirror-draw .mirror-draw-work,
  .worksheet.orientation-landscape.exercise-connect-dots .connect-dots-work--single,
  .worksheet.orientation-landscape.exercise-mirror-draw .mirror-draw-work{
    width:var(--single-artwork-fit-width,100%)!important;
    max-width:none!important;
  }
  .worksheet.exercise-connect-dots .connect-dots-work--single .connect-dots-figure{
    width:100%!important;
    max-width:none!important;
  }
}

/* ============================================================
   v1.2.0-dev1f — Monochrome-only print controls
   Connect Dots + Mirror Draw are black-and-white activities, so
   the color/economy appearance chooser is intentionally omitted.
   ============================================================ */
body[data-exercise-type="connect-dots"] #printAppearanceChip,
body[data-exercise-type="mirror-draw"] #printAppearanceChip{
  display:none!important;
}


/* ============================================================
   v1.3.0-dev3 — Mirror Draw header refresh
   Same compact 12px / 3.2mm strip footprint as Connect Dots,
   with a full-width butterfly mirror cue and shared pencil icon.
   ============================================================ */

/* ============================================================
   v1.3.0-dev3 — Result UI simplification
   Editing stays in the top command bar; save is the only right-side
   action. Printing lives beside the worksheet preview and all print
   choices live inside the print dialog.
   ============================================================ */
.pro-commandbar .workspace-right{
  margin-left:auto!important;
  flex:0 0 auto!important;
  width:auto!important;
  justify-content:flex-end!important;
  padding-top:0!important;
  border-top:0!important;
  overflow:visible!important;
}
.pro-commandbar #projectMenu{display:none!important}
.pro-commandbar #saveProject{
  margin-left:auto!important;
  white-space:nowrap!important;
}

.result-panel .viewerbar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:4px 5px 13px!important;
  border-bottom:1px solid #edf2f6!important;
}
.result-panel .viewer-heading{
  min-width:0!important;
  display:flex!important;
  align-items:baseline!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
.result-panel .viewer-heading>b{
  flex:0 0 auto!important;
  margin:0!important;
  color:#284764!important;
  font-size:16px!important;
  line-height:1.25!important;
}
.result-panel #summary{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
}
.result-panel #summary small{
  width:auto!important;
  margin:0!important;
  color:#6f8193!important;
  font-size:11px!important;
  line-height:1.35!important;
}
.result-panel #summary b{color:#455f79!important}
.viewer-print-button{
  flex:0 0 auto!important;
  min-height:40px!important;
  padding:0 15px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:1px solid #f0c543!important;
  border-radius:11px!important;
  background:#ffd45e!important;
  color:#5c470e!important;
  font-weight:900!important;
  box-shadow:0 5px 12px rgba(218,167,30,.12)!important;
}
.viewer-print-button:hover{background:#ffce48!important;border-color:#eebf38!important}
.viewer-print-button .ui-icon{width:16px!important;height:16px!important;fill:none;stroke:currentColor;stroke-width:1.8}

.project-save-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:10px 0 16px;
}
.project-save-actions[hidden]{display:none!important}
.project-save-actions button{
  min-height:40px;
  border:1px solid #dce6ef;
  border-radius:11px;
  background:#fff;
  color:#49647e;
  font-weight:800;
}
.project-save-actions button:hover{background:#f6faff;border-color:#bdd0e0}

.print-style-dialog{width:min(620px,100%)!important}
.print-modal-section{
  margin-top:16px;
  padding:16px;
  border:1px solid #e2eaf2;
  border-radius:16px;
  background:#fbfdff;
}
.print-modal-section[hidden]{display:none!important}
.print-content-section label,
.print-section-heading{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;color:#294763}
.print-content-section label>b,
.print-section-heading>b{font-size:13px;font-weight:900}
.print-content-section label>small,
.print-section-heading>small{color:#7e90a2;font-size:11px;line-height:1.35}
.print-content-select{
  width:100%;
  min-height:44px;
  padding:0 12px;
  border:1px solid #ccd9e5;
  border-radius:11px;
  background:#fff;
  color:#294763;
  font-size:14px;
  font-weight:800;
}
.print-monochrome-note{
  margin-top:14px;
  padding:11px 13px;
  border:1px solid #dce9e5;
  border-radius:12px;
  background:#f4fbf8;
  color:#4e7468;
  font-size:12px;
  line-height:1.4;
}
.print-monochrome-note[hidden]{display:none!important}

@media screen and (max-width:720px){
  .pro-commandbar{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
  }
  .pro-commandbar .workspace-left{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    padding-bottom:1px!important;
  }
  .pro-commandbar .workspace-right{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    margin-left:auto!important;
    overflow:visible!important;
    flex-wrap:nowrap!important;
    padding:0!important;
    border:0!important;
  }
  .pro-commandbar .workspace-right>#saveProject{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:44px!important;
  }
  .result-panel .viewerbar{
    gap:9px!important;
    padding:4px 3px 10px!important;
  }
  .result-panel .viewer-heading{
    flex:1 1 auto!important;
    gap:4px 8px!important;
  }
  .result-panel .viewer-heading>b{font-size:14px!important}
  .result-panel #summary small{font-size:9.5px!important}
  .viewer-print-button{
    min-height:38px!important;
    padding:0 11px!important;
    border-radius:10px!important;
    font-size:12px!important;
  }
  .project-save-actions{grid-template-columns:1fr!important}
  .print-modal-section{padding:13px!important}
}

@media screen and (max-width:430px){
  .pro-commandbar #saveProject span{display:none!important}
  .pro-commandbar #saveProject{padding:0 11px!important}
  .result-panel .viewer-heading{display:block!important}
  .result-panel .viewer-heading>b{display:block!important;margin-bottom:2px!important}
  .result-panel #summary{display:block!important}
  .viewer-print-button span{display:none!important}
  .viewer-print-button{width:40px!important;padding:0!important}
}

/* ============================================================
   v1.3.0-dev3 — Result preview header polish + print isolation
   - Keep the human-facing preview reassurance copy.
   - Center exercise metadata between title and Print.
   - Mirror Draw shows separate difficulty/task chips with icons.
   - Never print result-screen chrome; print only frozen worksheet pages.
   ============================================================ */
.result-panel .viewerbar{
  display:grid!important;
  grid-template-columns:minmax(240px,1fr) auto minmax(120px,1fr)!important;
  align-items:center!important;
  gap:18px!important;
  padding:5px 5px 13px!important;
}
.result-panel .viewer-heading{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:3px!important;
  flex-wrap:nowrap!important;
}
.result-panel .viewer-heading>b{
  margin:0!important;
  font-size:16px!important;
  line-height:1.2!important;
}
.result-panel .viewer-heading .viewer-copy{
  display:block!important;
  width:auto!important;
  margin:0!important;
  color:#8799aa!important;
  font-size:10px!important;
  line-height:1.35!important;
}
.result-panel #summary.viewer-summary{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  justify-self:center!important;
  text-align:center!important;
}
.result-panel #summary.viewer-summary small{
  margin:0!important;
  color:#6f8193!important;
  font-size:11px!important;
  line-height:1.35!important;
}
.result-panel .viewer-print-button{
  justify-self:end!important;
}
@media screen and (max-width:720px){
  .result-panel .viewerbar{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px 10px!important;
    padding:4px 3px 10px!important;
  }
  .result-panel .viewer-heading{
    grid-column:1!important;
    grid-row:1!important;
  }
  .result-panel .viewer-heading>b{font-size:14px!important}
  .result-panel .viewer-heading .viewer-copy{font-size:9.5px!important}
  .result-panel #summary.viewer-summary{
    grid-column:1 / -1!important;
    grid-row:2!important;
    justify-self:center!important;
    width:100%!important;
  }
  .result-panel #summary.viewer-summary small{font-size:9.5px!important}
  .result-panel .viewer-print-button{
    grid-column:2!important;
    grid-row:1!important;
  }
}

@media screen and (max-width:430px){
  .result-panel .viewer-heading{display:flex!important}
  .result-panel .viewer-heading>b{display:block!important;margin:0!important}
  .result-panel #summary.viewer-summary{display:flex!important}
}

@media print{
  /* The result-screen header, status and preview wrapper are UI only. The
     WYSIWYG pages in #printBothPages are the sole printable content. */
  body.print-wysiwyg .result-panel{
    margin:0!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
    background:#fff!important;
  }
  body.print-wysiwyg .result-panel > *:not(#printBothPages){
    display:none!important;
  }
  body.print-wysiwyg .result-panel > #printBothPages{
    display:block!important;
  }
}

/* ============================================================
   v1.3.0-dev3 — Mobile result toolbar: 2 controls per row
   The simplified result toolbar has exactly four primary controls:
   Content, Sheet, Variants, Save. On phones they form a stable 2×2 grid.
   ============================================================ */
@media screen and (max-width:620px){
  body.mode-result .pro-commandbar{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    align-items:stretch!important;
  }
  body.mode-result .pro-commandbar .workspace-left,
  body.mode-result .pro-commandbar .workspace-right{
    display:contents!important;
  }
  body.mode-result .pro-commandbar #openWordsDrawer,
  body.mode-result .pro-commandbar #openConfig,
  body.mode-result .pro-commandbar #layoutMenu,
  body.mode-result .pro-commandbar #saveProject{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    justify-self:stretch!important;
  }
  body.mode-result .pro-commandbar #openWordsDrawer,
  body.mode-result .pro-commandbar #openConfig,
  body.mode-result .pro-commandbar #saveProject,
  body.mode-result .pro-commandbar #layoutMenu>summary{
    min-height:44px!important;
    padding:0 10px!important;
    justify-content:center!important;
    white-space:nowrap!important;
  }
  body.mode-result .pro-commandbar #openWordsDrawer span,
  body.mode-result .pro-commandbar #openConfig span,
  body.mode-result .pro-commandbar #saveProject span,
  body.mode-result .pro-commandbar #layoutMenu>summary span:not(.chev){
    display:inline!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.mode-result .pro-commandbar #saveProject span{
    display:inline!important;
  }
  body.mode-result .pro-commandbar #layoutMenu>summary{
    width:100%!important;
    box-sizing:border-box!important;
  }
  body.mode-result .pro-commandbar #projectMenu{
    display:none!important;
  }
}


/* ============================================================
   v1.3.0-dev3 — Mobile home exercise grid
   Two clear exercise cards per row on phones.
   ============================================================ */
@media screen and (max-width:620px){
  .home-create-board .module-grid-v1{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .home-create-board .module-card-v1{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    min-width:0!important;
    min-height:164px!important;
    padding:9px!important;
    gap:8px!important;
    border-radius:18px!important;
    text-align:center!important;
  }
  .home-create-board .module-v1-visual{
    width:100%!important;
    height:96px!important;
    min-height:96px!important;
    padding:7px!important;
    border-radius:14px!important;
  }
  .home-create-board .module-v1-visual .module-scene{
    width:100%!important;
    height:100%!important;
    transform:scale(.82)!important;
    transform-origin:center!important;
  }
  .home-create-board .module-v1-copy{
    display:flex!important;
    min-width:0!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    padding:0 2px 2px!important;
  }
  .home-create-board .module-v1-copy b{
    display:block!important;
    width:100%!important;
    font-size:14px!important;
    line-height:1.18!important;
    letter-spacing:-.15px!important;
    text-align:center!important;
    white-space:normal!important;
    overflow:visible!important;
  }
  .home-create-board .module-v1-copy small,
  .home-create-board .module-v1-age{
    display:none!important;
  }
  .home-create-board .module-card-v1 .module-select-state{
    top:7px!important;
    right:7px!important;
    padding:4px 6px!important;
    font-size:8px!important;
  }
}


/* ============================================================
   v1.3.0-dev3 — Home cards + mobile drawer close polish
   Remove the legacy decorative circles from game cards and keep
   all drawer close X icons perfectly centered on phones.
   ============================================================ */
@media screen {
  .home-create-board .exercise-card::after{
    content:none!important;
    display:none!important;
  }
}

@media screen and (max-width:620px){
  .drawer-close-button{
    display:grid!important;
    place-items:center!important;
    justify-content:center!important;
  }
  .drawer-close-button .ui-icon{
    display:block!important;
    margin:0!important;
  }
}

/* ============================================================
   v1.3.0-dev3 — Three independent language games
   The former “Картинки и думи” modes are now first-class games.
   ============================================================ */
@media screen and (min-width:1201px){
  .home-create-board .module-grid-v1{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

/* Separate, stable semantic identities. */
.module-writeword-v1{border-color:#efc8c2!important}
.module-matchword-v1{border-color:#efd3ab!important}
.module-choiceword-v1{border-color:#ebc6da!important}
.module-writeword-v1 .module-v1-visual,
.quick-summary-write-word{
  background:linear-gradient(180deg,#fff7f4 0%,#ffebe6 100%)!important;
}
.module-matchword-v1 .module-v1-visual,
.quick-summary-match-picture-word{
  background:linear-gradient(180deg,#fffaf1 0%,#ffefd8 100%)!important;
}
.module-choiceword-v1 .module-v1-visual,
.quick-summary-choose-word{
  background:linear-gradient(180deg,#fff6fa 0%,#fde9f3 100%)!important;
}
.module-writeword-v1:hover{border-color:#e7aaa0!important}
.module-matchword-v1:hover{border-color:#e3b66f!important}
.module-choiceword-v1:hover{border-color:#de9bbb!important}
.module-writeword-v1 .module-v1-age{background:#fff0ed!important;color:#b85d59!important}
.module-matchword-v1 .module-v1-age{background:#fff4e3!important;color:#986426!important}
.module-choiceword-v1 .module-v1-age{background:#fdebf4!important;color:#a6507d!important}

/* “Напиши думата” — one picture plus writing boxes. */
.module-scene-writeword{
  width:100%;height:100%;
  display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;
  gap:12px!important;padding:12px!important;
}
.module-scene-writeword>img{width:58px;height:58px;object-fit:contain}
.module-scene-writeword .module-v1-letter-boxes{width:auto!important;gap:5px!important}
.module-scene-writeword .module-v1-letter-boxes i{
  width:25px;height:21px;border:1.6px solid #dda69d!important;
  border-radius:6px!important;background:#fff!important;
}

/* “Свържи картинка и дума” — a deliberately literal mini task. */
.module-scene-matchword{
  width:100%;height:100%;
  display:grid!important;grid-template-columns:auto 38px auto!important;
  align-items:center!important;justify-content:center!important;
  gap:8px!important;padding:12px!important;
}
.module-match-picture{
  width:60px;height:60px;display:grid;place-items:center;
  border-radius:16px;background:#fff;border:1px solid #efd7b8;
  box-shadow:0 5px 12px rgba(124,88,43,.05);
}
.module-match-picture img{width:46px;height:46px;object-fit:contain}
.module-match-line{position:relative;width:38px;height:2px;border-radius:999px;background:#dfa04f}
.module-match-line::after{
  content:"";position:absolute;right:-1px;top:-3px;
  border-left:6px solid #dfa04f;border-top:4px solid transparent;border-bottom:4px solid transparent;
}
.module-match-word{
  padding:8px 9px;border-radius:999px;background:#fff;border:1px solid #ecd1ac;
  color:#8c5d24;font-size:12px;font-weight:950;letter-spacing:.03em;
}

/* “Открий правилната дума” — picture plus answer choices. */
.module-scene-choiceword{
  width:100%;height:100%;
  display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;
  gap:11px!important;padding:12px!important;
}
.module-scene-choiceword>img{width:58px;height:58px;object-fit:contain}
.module-choice-options{display:flex;align-items:center;justify-content:center;gap:5px}
.module-choice-options i{
  width:28px;height:9px;border:1.4px solid #caa0b7;border-radius:999px;background:#fff;
}
.module-choice-options i.is-correct{border-color:#d675a6;background:#f8cfe3}

/* Compact versions in Quick Start. */
.quick-summary-write-word .module-scene-writeword,
.quick-summary-match-picture-word .module-scene-matchword,
.quick-summary-choose-word .module-scene-choiceword{padding:7px!important}
.quick-summary-write-word .module-scene-writeword>img,
.quick-summary-choose-word .module-scene-choiceword>img{width:42px;height:42px}
.quick-summary-write-word .module-scene-writeword .module-v1-letter-boxes i{width:18px;height:15px}
.quick-summary-match-picture-word .module-match-picture{width:43px;height:43px;border-radius:11px}
.quick-summary-match-picture-word .module-match-picture img{width:32px;height:32px}
.quick-summary-match-picture-word .module-match-line{width:25px}
.quick-summary-match-picture-word .module-match-word{font-size:9px;padding:5px 6px}
.quick-summary-choose-word .module-choice-options i{width:19px;height:6px}

/* The old three-mode pickers exist only for v1.2 saved-sheet migration. */
.legacy-picture-words-modes,
#quickPictureWordsModes,
#pictureWordsModeSection,
#wordsPictureWordsModeBlock{
  display:none!important;
}

/* Saved Sheets — the three games remain visually distinct outside Home too. */
.library-project-card.type-writeword,
.project-row-rich.type-writeword{--library-accent:#e8897f;--library-soft:#fff1ef;--library-ink:#b85d59}
.library-project-card.type-matchword,
.project-row-rich.type-matchword{--library-accent:#e2a152;--library-soft:#fff6e8;--library-ink:#986426}
.library-project-card.type-choiceword,
.project-row-rich.type-choiceword{--library-accent:#d875a6;--library-soft:#fff0f7;--library-ink:#a6507d}
.library-type-badge.writeword{background:#fff0ed!important;color:#b85d59!important}
.library-type-badge.matchword{background:#fff4e3!important;color:#986426!important}
.library-type-badge.choiceword{background:#fdebf4!important;color:#a6507d!important}
.project-row-rich.type-writeword:hover{border-color:#efc6c0!important;background:#fffafa!important}
.project-row-rich.type-matchword:hover{border-color:#efd3aa!important;background:#fffcf7!important}
.project-row-rich.type-choiceword:hover{border-color:#ecc1d6!important;background:#fff9fc!important}

@media screen and (max-width:620px){
  /* Preserve the approved two-games-per-row mobile contract. */
  .home-create-board .module-grid-v1{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .module-scene-matchword{grid-template-columns:auto 24px auto!important;gap:5px!important}
  .module-match-picture{width:45px;height:45px;border-radius:12px}
  .module-match-picture img{width:34px;height:34px}
  .module-match-line{width:24px}
  .module-match-word{font-size:9px;padding:5px 6px}
  .module-scene-writeword>img,.module-scene-choiceword>img{width:44px;height:44px}
  .module-scene-writeword .module-v1-letter-boxes i{width:19px;height:16px}
  .module-choice-options i{width:21px;height:7px}
}


/* ============================================================
   v1.3.0-dev3 — Unified word difficulty + semantic age badges
   ============================================================ */
/* The age chip now repeats the visual identity of its game instead of
   falling back to the crossword blue. */
.module-crossword-v1 .module-v1-age{background:linear-gradient(180deg,#f2f7ff 0%,#e8f0ff 100%)!important;color:#49698d!important}
.module-maze-v1 .module-v1-age{background:linear-gradient(180deg,#f2fbf5 0%,#e6f7ec 100%)!important;color:#3e7a59!important}
.module-path-v1 .module-v1-age{background:linear-gradient(180deg,#fffaf0 0%,#fff2cf 100%)!important;color:#9a6d1d!important}
.module-writeword-v1 .module-v1-age{background:linear-gradient(180deg,#fff7f4 0%,#ffebe6 100%)!important;color:#b85d59!important}
.module-matchword-v1 .module-v1-age{background:linear-gradient(180deg,#fffaf1 0%,#ffefd8 100%)!important;color:#986426!important}
.module-choiceword-v1 .module-v1-age{background:linear-gradient(180deg,#fff6fa 0%,#fde9f3 100%)!important;color:#a6507d!important}
.module-dots-v1 .module-v1-age{background:linear-gradient(180deg,#f8f3ff 0%,#f1e9ff 100%)!important;color:#7055a8!important}
.module-mirror-v1 .module-v1-age{background:linear-gradient(180deg,#f1fbfa 0%,#e5f6f4 100%)!important;color:#247d78!important}

/* “Открий правилната дума” keeps answer count as an independent mechanic.
   Difficulty/word complexity is shared with the other word games. */
.choice-word-option-count{display:none!important}
body[data-exercise-type="choose-word"] .choice-word-option-count{display:block!important}

/* ============================================================
   v1.4.0-dev4 — Game 9: Missing Letters
   A first-class word game with its own identity and A4 layout.
   ============================================================ */

/* The mechanical "how many letters are hidden" setting belongs only to
   Missing Letters. Word complexity remains a separate shared setting. */
.missing-letters-level{display:none!important}
body[data-exercise-type="missing-letters"] .missing-letters-level{display:block!important}

/* Home / Quick Start identity — indigo, distinct from Dots purple. */
.module-missingletters-v1{border-color:#c9cdf2!important}
.module-missingletters-v1 .module-v1-visual,
.quick-summary-missing-letters{
  background:linear-gradient(180deg,#f7f8ff 0%,#eceeff 100%)!important;
}
.module-missingletters-v1:hover{border-color:#9da6e4!important}
.module-missingletters-v1 .module-v1-age{
  background:linear-gradient(180deg,#f6f7ff 0%,#e9ecff 100%)!important;
  color:#555fa5!important;
}
.module-scene-missingletters{
  width:100%;height:100%;display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;gap:10px!important;padding:12px!important;
}
.module-scene-missingletters>img{width:58px;height:58px;object-fit:contain}
.module-missing-word{display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.module-missing-word i{
  min-width:21px;height:24px;padding:0 3px;display:grid;place-items:center;
  border:1.4px solid #aab1df;border-radius:6px;background:#fff;color:#515a8d;
  font-style:normal;font-size:11px;font-weight:950;line-height:1;
}
.module-missing-word i.is-gap{
  color:transparent;background:#f3f4ff;border:1.7px dashed #747fc2;
  box-shadow:inset 0 -2px 0 #747fc2;
}
.quick-summary-missing-letters .module-scene-missingletters{padding:7px!important;gap:6px!important}
.quick-summary-missing-letters .module-scene-missingletters>img{width:42px;height:42px}
.quick-summary-missing-letters .module-missing-word{gap:3px}
.quick-summary-missing-letters .module-missing-word i{min-width:16px;height:18px;padding:0 2px;font-size:8px;border-radius:4px}

/* Worksheet composition. Keep two columns at all viewport widths: on mobile
   the canonical A4 sheet is scaled as a whole instead of being reflowed. */
.missing-letters-sheet{width:100%;max-width:100%;color:#172033}
.missing-letters-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 28px;width:100%;
}
.ml-item{
  position:relative;min-width:0;min-height:118px;
  display:grid;grid-template-columns:26px minmax(58px,calc(var(--picSize) * .90)) minmax(0,1fr);
  align-items:center;gap:8px 8px;padding:10px 4px 12px 0;
  border-bottom:1px solid #d9e1e8;break-inside:avoid;page-break-inside:avoid;
}
.ml-item-number{
  width:25px;height:25px;border:1.7px solid #172033;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:900;line-height:1;background:#fff;flex:0 0 auto;
}
.ml-picture{display:grid;place-items:center;min-width:0}
.ml-picture img{width:calc(var(--picSize) * .90);height:calc(var(--picSize) * .90);max-width:100%;object-fit:contain;display:block}
.ml-item.is-compact .ml-picture img{width:calc(var(--picSize) * .82);height:calc(var(--picSize) * .82)}
.ml-item.is-tight .ml-picture img{width:calc(var(--picSize) * .74);height:calc(var(--picSize) * .74)}
.ml-word{
  display:flex;align-items:center;justify-content:flex-start;gap:3px;row-gap:6px;
  flex-wrap:wrap;min-width:0;align-content:center;
}
.ml-letter{
  width:clamp(22px,calc(var(--cell) * .52),35px);height:clamp(28px,calc(var(--cell) * .62),41px);
  display:grid;place-items:center;border:1.6px solid #9aa6b2;border-radius:4px;background:#fff;
  font-style:normal;font-weight:950;font-size:clamp(13px,calc(var(--cell) * .27),19px);line-height:1;
  color:#172033;
}
.ml-letter.is-missing{
  color:transparent;border:1.9px dashed #5965a5;background:#f8f8ff;
  box-shadow:inset 0 -2px 0 #5965a5;
}
.ml-letter.is-solution-missing{
  color:#29337c;border:2px solid #5965a5;background:#eef0ff;
  box-shadow:none;
}
.ml-word-space{width:7px;height:1px;flex:0 0 7px}
.ml-symbol{font-weight:900;font-size:clamp(13px,calc(var(--cell) * .25),18px);padding:0 1px}
.ml-item.is-compact .ml-word{gap:2px;row-gap:5px}
.ml-item.is-compact .ml-letter{width:clamp(19px,calc(var(--cell) * .46),31px);height:clamp(25px,calc(var(--cell) * .55),37px);font-size:clamp(11px,calc(var(--cell) * .23),16px)}
.ml-item.is-tight .ml-word{gap:2px;row-gap:4px}
.ml-item.is-tight .ml-letter{width:clamp(17px,calc(var(--cell) * .41),27px);height:clamp(23px,calc(var(--cell) * .49),33px);font-size:clamp(10px,calc(var(--cell) * .21),15px)}

.worksheet.orientation-landscape.exercise-missing-letters .missing-letters-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px;
}

/* Saved Sheets identity. */
.library-project-card.type-missingletters,
.project-row-rich.type-missingletters{--library-accent:#737dc5;--library-soft:#f1f2ff;--library-ink:#555fa5}
.library-type-badge.missingletters{background:#eceeff!important;color:#555fa5!important}
.project-row-rich.type-missingletters:hover{border-color:#c8cdf1!important;background:#fafaff!important}
.pw-thumb-missing{display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important}
.pw-thumb-missing-word{display:flex;align-items:center;justify-content:center;gap:2px}
.pw-thumb-missing-word i{
  width:10px;height:13px;display:grid;place-items:center;border:1px solid #9aa3d7;border-radius:2px;
  background:#fff;font-size:7px;font-style:normal;font-weight:950;color:#555fa5;
}
.pw-thumb-missing-word i.is-gap{color:transparent;border-style:dashed;background:#f1f2ff}

@media screen and (max-width:620px){
  .module-scene-missingletters>img{width:44px;height:44px}
  .module-missing-word i{min-width:17px;height:19px;padding:0 2px;font-size:9px}
}

@media print{
  .worksheet.exercise-missing-letters .crossword-area{margin-top:3mm!important}
  .missing-letters-grid{gap:2.2mm 5.8mm!important}
  .ml-item{
    min-height:24mm!important;padding:1.5mm .8mm 2mm 0!important;
    border-bottom:.35mm solid #8b949e!important;
    grid-template-columns:5.7mm minmax(13mm,calc(var(--picSize) * .86)) minmax(0,1fr)!important;
    gap:2mm!important;
  }
  .ml-item-number{width:5.7mm;height:5.7mm;font-size:2.8mm;border-width:.45mm}
  .ml-picture img{width:calc(var(--picSize) * .86)!important;height:calc(var(--picSize) * .86)!important}
  .ml-item.is-compact .ml-picture img{width:calc(var(--picSize) * .78)!important;height:calc(var(--picSize) * .78)!important}
  .ml-item.is-tight .ml-picture img{width:calc(var(--picSize) * .70)!important;height:calc(var(--picSize) * .70)!important}
  .ml-letter{border-width:.42mm;border-radius:1mm}
  .ml-letter.is-missing{border-width:.5mm;box-shadow:inset 0 -.55mm 0 #5965a5}
  .ml-letter.is-solution-missing{border-width:.55mm;box-shadow:none}
}

/* Nine finished games are balanced as a 3 × 3 desktop grid. */
@media screen and (min-width:1201px){
  .home-create-board .module-grid-v1{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
.pw-thumb-missing-word i.gap{color:transparent;border-style:dashed;background:#f1f2ff}


/* ============================================================
   v1.4.0-dev4 — Missing Letters drawer refinement
   - neutral settings cards
   - 4 controls on one row on desktop
   ============================================================ */
body[data-exercise-type="missing-letters"] #wordsDrawer .words-compose-panel{
  background:#ffffff!important;
}
body[data-exercise-type="missing-letters"] #wordsDrawer .words-basics{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:start!important;
}
body[data-exercise-type="missing-letters"] #wordsDrawer .words-basics .basic-box{
  background:#ffffff!important;
  border:1px solid #dbe3ee!important;
  box-shadow:none!important;
  padding:10px!important;
}
body[data-exercise-type="missing-letters"] #wordsDrawer .words-basics .basic-box label{
  color:#52657d!important;
}
body[data-exercise-type="missing-letters"] #wordsDrawer .words-basics .basic-box select,
body[data-exercise-type="missing-letters"] #wordsDrawer .words-basics .basic-box input[type=text]{
  min-height:38px!important;
  border-color:#cfd8e3!important;
  background:#ffffff!important;
}
body[data-exercise-type="missing-letters"] #wordsDrawer .words-basics .basic-box .field-helper{
  color:#7a8799!important;
}

@media (max-width: 1040px){
  body[data-exercise-type="missing-letters"] #wordsDrawer .words-basics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width: 620px){
  body[data-exercise-type="missing-letters"] #wordsDrawer .words-basics{
    grid-template-columns:1fr!important;
  }
}


/* ============================================================
   v1.4.0-dev4 — neutral word-game drawer settings
   - remove tinted setting cards across word-game drawers
   - use centered 2x2 layout for the content settings area
   ============================================================ */
.words-compose-panel{
  background:#ffffff!important;
}
.words-basics{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(240px,320px))!important;
  justify-content:center!important;
  gap:10px!important;
  align-items:start!important;
}
.words-basics .basic-box{
  background:#ffffff!important;
  border:1px solid #dbe3ee!important;
  box-shadow:none!important;
  padding:10px!important;
}
.words-basics .basic-box label{
  color:#52657d!important;
}
.words-basics .basic-box select,
.words-basics .basic-box input[type=text]{
  min-height:38px!important;
  border-color:#cfd8e3!important;
  background:#ffffff!important;
}
.words-basics .basic-box .field-helper,
.words-basics .basic-box small{
  color:#7a8799!important;
}

body[data-exercise-type="crossword"] #wordsDrawer .words-basics > .basic-box:nth-child(3),
body[data-exercise-type="write-word"] #wordsDrawer .words-basics > .basic-box:nth-child(3),
body[data-exercise-type="match-picture-word"] #wordsDrawer .words-basics > .basic-box:nth-child(3),
body[data-exercise-type="word-search"] #wordsDrawer .words-basics > .basic-box:nth-child(3){
  grid-column:1 / span 2;
  width:min(320px,100%);
  justify-self:center;
}

@media (max-width: 900px){
  .words-basics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body[data-exercise-type="crossword"] #wordsDrawer .words-basics > .basic-box:nth-child(3),
  body[data-exercise-type="write-word"] #wordsDrawer .words-basics > .basic-box:nth-child(3),
  body[data-exercise-type="match-picture-word"] #wordsDrawer .words-basics > .basic-box:nth-child(3){
    width:min(100%,320px);
  }
}

@media (max-width: 620px){
  .words-basics{
    grid-template-columns:1fr!important;
  }
  body[data-exercise-type="crossword"] #wordsDrawer .words-basics > .basic-box:nth-child(3),
  body[data-exercise-type="write-word"] #wordsDrawer .words-basics > .basic-box:nth-child(3),
  body[data-exercise-type="match-picture-word"] #wordsDrawer .words-basics > .basic-box:nth-child(3){
    grid-column:auto;
    width:100%;
    justify-self:stretch;
  }
}


/* Strong override layer to beat earlier word-game color treatments */
#wordsDrawer .words-compose-panel{
  background:#ffffff!important;
}
#wordsDrawer .words-basics{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(240px,320px))!important;
  justify-content:center!important;
  gap:10px!important;
  align-items:start!important;
}
#wordsDrawer .words-basics .basic-box,
#wordsDrawer .words-basics .basic-box:nth-child(n){
  background:#ffffff!important;
  border:1px solid #dbe3ee!important;
  box-shadow:none!important;
  padding:10px!important;
}
#wordsDrawer .words-basics .basic-box label{
  color:#52657d!important;
}
#wordsDrawer .words-basics .basic-box select,
#wordsDrawer .words-basics .basic-box input[type=text]{
  min-height:38px!important;
  border-color:#cfd8e3!important;
  background:#ffffff!important;
}
#wordsDrawer .words-basics .basic-box .field-helper,
#wordsDrawer .words-basics .basic-box small{
  color:#7a8799!important;
}
body[data-exercise-type="missing-letters"] #wordsDrawer .words-basics,
body[data-exercise-type="choose-word"] #wordsDrawer .words-basics,
body[data-exercise-type="crossword"] #wordsDrawer .words-basics,
body[data-exercise-type="write-word"] #wordsDrawer .words-basics,
body[data-exercise-type="match-picture-word"] #wordsDrawer .words-basics,
body[data-exercise-type="word-search"] #wordsDrawer .words-basics{
  grid-template-columns:repeat(2,minmax(240px,320px))!important;
}
@media (max-width: 900px){
  #wordsDrawer .words-basics,
  body[data-exercise-type="missing-letters"] #wordsDrawer .words-basics,
  body[data-exercise-type="choose-word"] #wordsDrawer .words-basics,
  body[data-exercise-type="crossword"] #wordsDrawer .words-basics,
  body[data-exercise-type="write-word"] #wordsDrawer .words-basics,
  body[data-exercise-type="match-picture-word"] #wordsDrawer .words-basics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width: 620px){
  #wordsDrawer .words-basics,
  body[data-exercise-type="missing-letters"] #wordsDrawer .words-basics,
  body[data-exercise-type="choose-word"] #wordsDrawer .words-basics,
  body[data-exercise-type="crossword"] #wordsDrawer .words-basics,
  body[data-exercise-type="write-word"] #wordsDrawer .words-basics,
  body[data-exercise-type="match-picture-word"] #wordsDrawer .words-basics{
    grid-template-columns:1fr!important;
  }
}

/* ============================================================
   v1.4.0-dev4 — word drawer layout polish
   3 visible controls = one row; 4 visible controls = centered 2x2.
   ============================================================ */
body[data-exercise-type="crossword"] #wordsDrawer .words-basics,
body[data-exercise-type="write-word"] #wordsDrawer .words-basics,
body[data-exercise-type="match-picture-word"] #wordsDrawer .words-basics{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  justify-content:stretch!important;
}
body[data-exercise-type="crossword"] #wordsDrawer .words-basics > .basic-box:nth-child(3),
body[data-exercise-type="write-word"] #wordsDrawer .words-basics > .basic-box:nth-child(3),
body[data-exercise-type="match-picture-word"] #wordsDrawer .words-basics > .basic-box:nth-child(3){
  grid-column:auto!important;
  width:auto!important;
  justify-self:stretch!important;
}
body[data-exercise-type="choose-word"] #wordsDrawer .words-basics,
body[data-exercise-type="missing-letters"] #wordsDrawer .words-basics{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  justify-content:center!important;
}

@media (max-width: 760px){
  body[data-exercise-type="crossword"] #wordsDrawer .words-basics,
  body[data-exercise-type="write-word"] #wordsDrawer .words-basics,
  body[data-exercise-type="match-picture-word"] #wordsDrawer .words-basics,
  body[data-exercise-type="word-search"] #wordsDrawer .words-basics,
  body[data-exercise-type="choose-word"] #wordsDrawer .words-basics,
  body[data-exercise-type="missing-letters"] #wordsDrawer .words-basics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width: 620px){
  body[data-exercise-type="crossword"] #wordsDrawer .words-basics,
  body[data-exercise-type="write-word"] #wordsDrawer .words-basics,
  body[data-exercise-type="match-picture-word"] #wordsDrawer .words-basics,
  body[data-exercise-type="word-search"] #wordsDrawer .words-basics,
  body[data-exercise-type="choose-word"] #wordsDrawer .words-basics,
  body[data-exercise-type="missing-letters"] #wordsDrawer .words-basics{
    grid-template-columns:1fr!important;
  }
}

/* v1.4.0-dev5 — Secret Word / Какво си мисля? */
.module-v1-visual-secretword{background:linear-gradient(180deg,#f7fbff 0%,#eef6ff 100%)}
.module-scene-secretword{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%}
.module-scene-secretword>img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(52,84,128,.12))}
.module-secretword-boxes{display:flex;gap:6px;align-items:center}
.module-secretword-boxes i{display:grid;place-items:center;width:22px;height:22px;border-radius:8px;border:2px solid rgba(89,123,183,.26);background:#fff;color:#36518a;font-style:normal;font-weight:800;font-size:13px;box-shadow:0 8px 16px rgba(66,99,145,.08)}

.worksheet.exercise-secret-word{--sheet-accent:#4e74b8}
.secret-word-sheet{display:flex;flex-direction:column;gap:22px;padding-top:8px}
.secret-word-board{display:flex;flex-direction:column;gap:24px;padding:14px 0 4px;border:none;border-radius:0;background:transparent}
.secret-word-instruction{text-align:center;font-weight:700;font-size:15px;line-height:1.55;color:#2b4777;margin-top:4px}
.secret-word-clues{display:grid;grid-template-columns:repeat(var(--sw-cols,5),minmax(0,1fr));gap:16px;align-items:stretch}
.secret-word-sheet.sw-count-4 .secret-word-clues{--sw-cols:4}
.secret-word-sheet.sw-count-5 .secret-word-clues{--sw-cols:5}
.secret-word-sheet.sw-count-6 .secret-word-clues{--sw-cols:6}
.sw-clue-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 10px 14px;border-radius:20px;border:1px solid rgba(78,116,184,.18);background:#fff;box-shadow:0 10px 24px rgba(80,108,156,.08)}
.sw-clue-number{position:absolute;top:8px;left:8px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#eef4ff;color:#3d5d9f;font-size:12px;font-weight:800}
.sw-clue-picture{display:grid;place-items:center;width:100%;min-height:92px;padding-top:10px}
.sw-clue-picture img{max-width:74px;max-height:74px;object-fit:contain}
.sw-clue-caption{font-size:12px;font-weight:700;letter-spacing:.02em;color:#7084a9;text-transform:uppercase}
.sw-letter-box{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;border:2px dashed rgba(78,116,184,.35);background:#f9fbff;font-size:24px;font-weight:900;color:#35528d}
.secret-word-board.is-solution .sw-letter-box{border-style:solid;background:#eef5ff}
.sw-answer-zone{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 10px 6px;border-radius:22px;background:linear-gradient(180deg,#f4f8ff 0%,#edf3fd 100%)}
.sw-answer-label{font-weight:900;letter-spacing:.08em;color:#3e5e9f}
.sw-answer-row{position:relative;z-index:2;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.sw-answer-cell{display:grid;grid-template-rows:auto 1fr;align-items:center;justify-items:center;width:52px;height:60px;padding:5px 0 6px;border-radius:16px;border:2px solid rgba(78,116,184,.24);background:#fff;box-shadow:0 8px 18px rgba(66,99,145,.08)}
.sw-answer-cell small{font-size:11px;font-weight:700;color:#7a8dad}
.sw-answer-cell b{font-size:28px;line-height:1;color:#35528d}
.secret-word-board.is-task .sw-answer-cell b{opacity:0}

.project-thumb-secretword{display:flex;align-items:center;justify-content:center;gap:10px}
.project-thumb-secretword .pw-thumb-pics img{width:28px;height:28px;object-fit:contain}
.secret-thumb-word{display:flex;gap:4px}
.secret-thumb-word i{display:grid;place-items:center;width:16px;height:18px;border-radius:6px;background:#fff;border:1px solid rgba(90,120,170,.22);font-style:normal;font-size:10px;font-weight:800;color:#4a67a0}

@media (max-width:980px){
  .secret-word-clues{grid-template-columns:repeat(3,minmax(0,1fr))}
  .secret-word-sheet.sw-count-4 .secret-word-clues{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media print{
  .secret-word-board{padding:2.6mm 0 .8mm;border-radius:0;gap:5.2mm;box-shadow:none}
  .secret-word-instruction{font-size:10.5pt}
  .secret-word-clues{gap:3.8mm}
  .sw-clue-card{padding:3.8mm 2.8mm 3.1mm;border-radius:5mm;box-shadow:none}
  .sw-clue-number{top:2.4mm;left:2.4mm;font-size:8.5pt;min-width:7mm;height:7mm}
  .sw-clue-picture{min-height:24mm}
  .sw-clue-picture img{max-width:18mm;max-height:18mm}
  .sw-clue-caption{font-size:7.5pt}
  .sw-letter-box{width:11mm;height:11mm;border-radius:3.5mm;font-size:16pt}
  .sw-answer-zone{gap:2.2mm;padding:3.2mm 2.6mm 1.6mm;border-radius:5mm}
  .sw-answer-label{font-size:10pt}
  .sw-answer-row{gap:2.4mm}
  .sw-answer-cell{width:12mm;height:14mm;border-radius:4mm;box-shadow:none}
  .sw-answer-cell small{font-size:7pt}
  .sw-answer-cell b{font-size:17pt}
}

/* v1.4.0-dev6 — Secret Word polish */
body[data-exercise-type="secret-word"] #wordsDrawer .words-basics{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  max-width:none!important;
  justify-content:stretch!important;
}
body[data-exercise-type="secret-word"] #wordsDrawer .words-basics .basic-box{
  width:auto!important;
  justify-self:stretch!important;
}

.sw-thinker-scene{display:grid;grid-template-columns:130px minmax(0,1fr);gap:22px;align-items:center;margin-bottom:4px}
.sw-thinker-character{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:124px}
.sw-thinker-character img{width:94px;height:94px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(66,86,120,.12))}
.sw-thinker-character span{font-size:13px;font-weight:800;color:#657895}
.sw-thought-bubble{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:146px;padding:36px 34px 26px;background:transparent;border:none}







.sw-cloud-svg{position:absolute;inset:-6px -8px -8px -14px;width:calc(100% + 28px);height:calc(100% + 18px);overflow:visible;z-index:0;pointer-events:none}
.sw-cloud-svg path{fill:#fff;stroke:rgba(78,116,184,.22);stroke-width:3}
.sw-thought-tail{position:absolute;z-index:1;display:block;border-radius:50%;background:#fff;border:2px solid rgba(78,116,184,.22);pointer-events:none}
.sw-thought-tail-mid{left:-54px;top:45%;width:14px;height:14px}
.sw-thought-tail-far{left:-30px;top:37%;width:22px;height:22px}
.sw-thought-title{position:relative;z-index:2;font-size:16px;font-weight:900;color:#35528d;text-align:center}
.secret-word-sheet.sw-count-6 .secret-word-clues{grid-template-columns:repeat(3,minmax(0,1fr))}
.secret-word-sheet.sw-count-7 .secret-word-clues,
.secret-word-sheet.sw-count-8 .secret-word-clues{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:620px){
  body[data-exercise-type="secret-word"] #wordsDrawer .words-basics{grid-template-columns:1fr!important}
  .sw-thinker-scene{grid-template-columns:86px minmax(0,1fr);gap:12px}
  .sw-thinker-character img{width:68px;height:68px}
  .sw-thought-bubble{padding:26px 16px 18px;min-height:118px}
  .sw-thought-tail-mid{left:-33px;top:45%;width:11px;height:11px}
  .sw-thought-tail-far{left:-17px;top:38%;width:17px;height:17px}
}

@media print{
  .sw-thinker-scene{grid-template-columns:29mm minmax(0,1fr);gap:4.8mm}
  .sw-thinker-character{min-height:25mm}
  .sw-thinker-character img{width:23mm;height:23mm;filter:none}
  .sw-thinker-character span{font-size:8pt}
  .sw-thought-bubble{min-height:33mm;padding:7.8mm 6.8mm 5.6mm;background:transparent}
  .sw-thought-tail-mid{left:-13.8mm;top:45%;width:3.6mm;height:3.6mm}
  .sw-thought-tail-far{left:-7.8mm;top:37%;width:5.2mm;height:5.2mm}

  .sw-thought-title{font-size:10.5pt}
  .secret-word-sheet.sw-count-6 .secret-word-clues{grid-template-columns:repeat(3,minmax(0,1fr))}
  .secret-word-sheet.sw-count-7 .secret-word-clues,
  .secret-word-sheet.sw-count-8 .secret-word-clues{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Ten finished games: balanced 5 × 2 grid on wide desktop. */
@media screen and (min-width:1201px){
  .home-create-board .module-grid-v1{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
.project-row-rich.type-secretword{--library-accent:#4e74b8;--library-soft:#edf4ff;--library-ink:#3f5f98}
.library-type-badge.secretword{background:#edf4ff!important;color:#3f5f98!important}
.project-row-rich.type-secretword:hover{border-color:#bfd0ed!important;background:#fafcff!important}

@media (max-width:620px){

}

@media print{
  .sw-cloud-svg{inset:-1.5mm -2mm -2mm -3mm;width:calc(100% + 6mm);height:calc(100% + 4mm)}
  .sw-cloud-svg path{stroke-width:1.2}
}

/* ============================================================
   v1.4.0-dev23 — Word Search / Намерете думите
   ============================================================ */
.module-v1-visual-wordsearch{background:linear-gradient(180deg,#fbfbff 0%,#f1f4ff 100%)}
.module-scene-wordsearch{display:flex;align-items:center;justify-content:center;gap:13px;width:100%;height:100%}
.module-wordsearch-grid{display:grid;grid-template-columns:repeat(3,18px);grid-template-rows:repeat(3,18px);gap:2px;padding:5px;border:2px solid rgba(82,101,151,.22);border-radius:10px;background:#fff;box-shadow:0 7px 16px rgba(66,83,128,.08)}
.module-wordsearch-grid i{display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:900;color:#455985;border:1px solid rgba(82,101,151,.14);border-radius:4px}
.module-scene-wordsearch>img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(70,84,121,.12))}

.worksheet.exercise-word-search{--sheet-accent:#566fa8}
.word-search-sheet{display:flex;flex-direction:column;align-items:center;width:100%}
.word-search-board{display:flex;flex-direction:column;align-items:center;gap:19px;width:100%;padding:2px 0 4px}
.ws-instruction{text-align:center;font-size:15px;font-weight:800;color:#43577f}
.ws-targets{display:grid;row-gap:17px;column-gap:16px;width:min(100%,660px);justify-content:center}
.ws-count-5 .ws-targets{grid-template-columns:repeat(5,minmax(0,1fr))}
.ws-count-6 .ws-targets{grid-template-columns:repeat(3,minmax(0,1fr))}
.ws-count-7 .ws-targets,.ws-count-8 .ws-targets{grid-template-columns:repeat(4,minmax(0,1fr))}
.ws-target{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:9px;min-width:0;padding:5px 6px;border:0;border-radius:0;background:transparent;box-shadow:none}
.ws-target img{width:36px;height:36px;object-fit:contain;flex:0 0 auto}
.ws-target b{font-size:13px;line-height:1.1;color:#34486e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-target-number{position:absolute;top:4px;left:4px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#edf2ff;color:#50679b;font-size:9px;font-weight:900}
.ws-grid-wrap{position:relative;width:min(100%,470px);aspect-ratio:1/1;margin-top:2px}
.ws-size-8 .ws-grid-wrap{width:min(100%,420px)}
.ws-size-10 .ws-grid-wrap{width:min(100%,455px)}
.ws-size-12 .ws-grid-wrap{width:min(100%,480px)}
.ws-grid{display:grid;grid-template-columns:repeat(var(--ws-size),1fr);grid-template-rows:repeat(var(--ws-size),1fr);width:100%;height:100%;border:2px solid #506184;background:#fff}
.ws-cell{display:grid;place-items:center;border-right:1px solid rgba(80,97,132,.25);border-bottom:1px solid rgba(80,97,132,.25);font-size:clamp(15px,2.2vw,23px);font-weight:900;line-height:1;color:#25344f;user-select:none}
.ws-size-12 .ws-cell{font-size:18px}
.ws-solution-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ws-solution-overlay line{stroke:rgba(92,124,194,.26);stroke-width:.58;stroke-linecap:round}

.project-thumb-wordsearch{display:grid!important;place-items:center!important}
.project-thumb-wordsearch>span{display:grid!important;grid-template-columns:repeat(4,10px)!important;gap:1px!important;width:auto!important}
.project-thumb-wordsearch i{display:grid;place-items:center;width:10px;height:10px;border:1px solid rgba(80,99,140,.18);font-size:6px;font-style:normal;font-weight:800;color:#53698f;background:#fff}
.project-row-rich.type-wordsearch{--library-accent:#566fa8;--library-soft:#eef2fb;--library-ink:#425b8d}
.library-type-badge.wordsearch{background:#eef2fb!important;color:#425b8d!important}

@media (max-width:760px){
  .ws-count-5 .ws-targets,.ws-count-7 .ws-targets,.ws-count-8 .ws-targets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ws-count-6 .ws-targets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ws-target b{font-size:12px}
}

@media print{
  .word-search-board{gap:4mm;padding:0}
  .ws-instruction{font-size:10.5pt}
  .ws-targets{row-gap:3.8mm;column-gap:3mm;width:100%}
  .ws-count-5 .ws-targets{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ws-count-6 .ws-targets{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ws-count-7 .ws-targets,.ws-count-8 .ws-targets{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ws-target{gap:1.8mm;padding:1.1mm 1.1mm;border:0;border-radius:0;background:transparent;box-shadow:none}
  .ws-target img{width:9mm;height:9mm}
  .ws-target b{font-size:8.5pt}
  .ws-target-number{top:1mm;left:1mm;width:4mm;height:4mm;font-size:6.5pt}
  .ws-size-8 .ws-grid-wrap{width:116mm}
  .ws-size-10 .ws-grid-wrap{width:124mm}
  .ws-size-12 .ws-grid-wrap{width:130mm}
  .ws-grid{border-width:.5mm}
  .ws-cell{font-size:12.5pt;border-right-width:.25mm;border-bottom-width:.25mm}
  .ws-size-12 .ws-cell{font-size:10.5pt}
  .ws-solution-overlay line{stroke-width:.6}
}


/* Word Search uses the whole A4 width in landscape as one centered activity.
   The generic crossword landscape layout reserves a left clues column, which
   would otherwise shift this single-block exercise to the right. */
.worksheet.orientation-landscape.exercise-word-search{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:
    "alphabet"
    "head"
    "crossword"!important;
  column-gap:0!important;
}
.worksheet.orientation-landscape.exercise-word-search .alphabet-strip{grid-area:alphabet!important}
.worksheet.orientation-landscape.exercise-word-search .print-head{grid-area:head!important}
.worksheet.orientation-landscape.exercise-word-search .clue-sections{display:none!important}
.worksheet.orientation-landscape.exercise-word-search .crossword-area{
  grid-area:crossword!important;
  width:100%!important;
  margin-top:14px!important;
  justify-content:center!important;
  justify-self:stretch!important;
}

@media print{
  .worksheet.orientation-landscape.exercise-word-search{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:
      "alphabet"
      "head"
      "crossword"!important;
    column-gap:0!important;
  }
  .worksheet.orientation-landscape.exercise-word-search .crossword-area{
    width:100%!important;
    margin-top:3mm!important;
    justify-content:center!important;
  }
}

/* Eleven finished games: avoid a single orphan card on wide desktop. */
@media screen and (min-width:1201px){
  .home-create-board .module-grid-v1{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* Word Search drawer: exactly three visible controls on desktop. */
body[data-exercise-type="word-search"] #wordsDrawer .words-basics{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  justify-content:stretch!important;
}
body[data-exercise-type="word-search"] #wordsDrawer .words-basics > .basic-box:nth-child(3){
  grid-column:auto!important;width:auto!important;justify-self:stretch!important;
}
@media (max-width:760px){body[data-exercise-type="word-search"] #wordsDrawer .words-basics{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:620px){body[data-exercise-type="word-search"] #wordsDrawer .words-basics{grid-template-columns:1fr!important}}

/* v1.4.0-dev23 — Word Search portrait top breathing room */
.worksheet.orientation-portrait.exercise-word-search .print-head{
  margin-top:12px;
}
@media print{
  .worksheet.orientation-portrait.exercise-word-search .print-head{
    margin-top:2.6mm;
  }
}

/* Color by Number */
.module-colorbynumber-v1 .module-v1-visual{background:linear-gradient(180deg,#fffaf0,#ffffff);}
.module-scene-colorbynumber svg{width:100%;height:100%;stroke:#51688f;stroke-width:2.5;fill:#ffffff;stroke-linejoin:round;stroke-linecap:round;overflow:visible;}
.module-scene-colorbynumber text{font-size:14px;font-weight:800;fill:#51688f;stroke:none;}
.color-number-config-section{display:grid;gap:14px;}
.color-number-theme-pills{display:flex;flex-wrap:wrap;gap:10px;}
.color-number-theme-pills .connect-dots-category-pill{cursor:pointer;}
.color-by-number-sheet{display:block;}
.cbn-sheet{display:grid;gap:14px;align-items:start;}
.cbn-artboard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:10px;box-shadow:var(--shadow-soft);}
.cbn-art-svg{display:block;width:100%;height:auto;aspect-ratio:4/3;}
.cbn-legend-board{border:1px solid var(--line);border-radius:18px;background:var(--paper-soft);padding:14px 16px;display:grid;gap:10px;}
.cbn-legend-title{font-weight:800;letter-spacing:.02em;color:var(--ink);}
.cbn-legend-subtitle{font-size:13px;color:var(--muted);}
.cbn-legend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 12px;}
.cbn-legend-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(69,93,134,.12);border-radius:14px;background:#fff;}
.cbn-legend-chip{width:20px;height:20px;border-radius:7px;border:1px solid rgba(58,80,127,.2);flex:0 0 20px;}
.cbn-legend-item b{min-width:20px;text-align:center;color:#38507f;}
.worksheet.exercise-color-by-number .worksheet-body{gap:14px;}
.worksheet.exercise-color-by-number .puzzle{padding-top:0;}
.worksheet.exercise-color-by-number .worksheet-top{margin-bottom:10px;}
@media (min-width: 900px){
  .cbn-sheet{grid-template-columns:minmax(0,1fr) 280px;}
  .cbn-legend-board{align-self:stretch;}
}
@media print{
  .cbn-artboard,.cbn-legend-board{box-shadow:none;}
  .cbn-artboard{border:1px solid #dfe5f0;}
  .cbn-legend-board{background:#fff;}
}
@media screen{
  body[data-exercise-type="color-by-number"] #configPanel .word-config-only,
  body[data-exercise-type="color-by-number"] #configPanel .pack-section,
  body[data-exercise-type="color-by-number"] #configPanel #selectedPreviewWrap,
  body[data-exercise-type="color-by-number"] #configPanel .selected-toolbar,
  body[data-exercise-type="color-by-number"] #configPanel .cards,
  body[data-exercise-type="color-by-number"] #configPanel .pills,
  body[data-exercise-type="color-by-number"] #configPanel .setup-selection-compact,
  body[data-exercise-type="color-by-number"] #configPanel .selected-preview-mini{display:none!important}
  body[data-exercise-type="color-by-number"] #configPanel .creator-basics{grid-template-columns:1fr!important}
  body[data-exercise-type="color-by-number"] #configPanel .title-box{grid-column:1!important}
  body[data-exercise-type="color-by-number"] #firstLetterSetting,
  body[data-exercise-type="color-by-number"] #firstLetterQuick{display:none!important}
  .color-number-config-section{
    margin:0!important;padding:18px 20px 20px!important;border:1px solid #e5e8f4!important;border-radius:16px!important;
    background:#fff!important;box-shadow:0 3px 10px rgba(54,74,111,.035)!important
  }
  .color-number-config-section .setup-section-head{margin-bottom:14px!important}
  .color-number-config-section .setup-section-head h3{color:#294763!important}
  .color-number-config-section .setup-section-head>small{color:#8496a8!important;max-width:720px}
.color-number-theme-pills,.color-number-picture-pills{display:flex;flex-wrap:wrap;gap:10px}
.color-number-theme-pills .connect-dots-category-pill,.color-number-picture-pills .connect-dots-category-pill{cursor:pointer}
}

/* Color by Number refinements — dev25 */
body[data-exercise-type="color-by-number"] .strip-alphabet{display:none!important}
body[data-exercise-type="color-by-number"] #openWordsDrawer,
body[data-exercise-type="color-by-number"] #wordsDrawer,
body[data-exercise-type="color-by-number"] #wordsDrawerBackdrop{display:none!important}
body[data-exercise-type="color-by-number"] #configPanel #pictureWordsModeSection,
body[data-exercise-type="color-by-number"] #configPanel .setup-selection-panel,
body[data-exercise-type="color-by-number"] #configPanel .selected-panel,
body[data-exercise-type="color-by-number"] #configPanel .selection-card-block{display:none!important}
body[data-exercise-type="color-by-number"] #configPanel .setup-basics-section .setup-section-head small{max-width:520px}
body[data-exercise-type="color-by-number"] #configPanel .setup-basics-section{padding-bottom:0}
body[data-exercise-type="color-by-number"] #printAppearanceChip{display:none!important}

.cbn-sheet{display:grid;gap:20px;align-items:start;width:min(100%,900px);margin:0 auto}
.cbn-sheet.orientation-portrait{grid-template-columns:1fr}
.cbn-sheet.orientation-portrait .cbn-legend-board{order:1}
.cbn-sheet.orientation-portrait .cbn-artboard{order:2}
.cbn-sheet.orientation-landscape{grid-template-columns:280px minmax(0,1fr)}
.cbn-artboard{background:#fff;border:1px solid #dfe5f0;border-radius:24px;padding:14px 16px 10px;box-shadow:none}
.cbn-art-svg{display:block;width:100%;height:auto;aspect-ratio:4/3;max-height:600px;margin:0 auto}
.cbn-art-svg .cbn-number text{font-family:inherit}
.cbn-legend-board{border:1px solid #dfe5f0;border-radius:18px;background:#fff;padding:14px 16px;display:grid;gap:10px}
.cbn-legend-title{font-weight:800;letter-spacing:.02em;color:#183761}
.cbn-legend-subtitle{font-size:13px;color:#72829b}
.cbn-sheet.orientation-portrait .cbn-legend-grid{display:grid;grid-template-columns:repeat(var(--cbn-legend-cols,5),minmax(0,1fr));gap:10px}
.cbn-sheet.orientation-landscape .cbn-legend-grid{display:grid;grid-template-columns:1fr;gap:9px}
.cbn-legend-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(69,93,134,.12);border-radius:12px;background:#fff}
.cbn-legend-chip{width:18px;height:18px;border-radius:6px;border:1px solid rgba(58,80,127,.16);flex:0 0 18px}
.cbn-legend-item b{min-width:18px;text-align:center;color:#29476a;font-weight:800}
.worksheet.exercise-color-by-number .worksheet-body{gap:16px}
.worksheet.exercise-color-by-number .worksheet-top{margin-bottom:12px}
.worksheet.exercise-color-by-number .worksheet-instruction{margin-bottom:18px}
@media screen and (max-width:900px){
  .cbn-sheet.orientation-landscape{grid-template-columns:1fr}
}
@media print{
  body[data-exercise-type="color-by-number"] .worksheet.exercise-color-by-number .worksheet-top{margin-bottom:6mm}
  body[data-exercise-type="color-by-number"] .cbn-sheet.orientation-landscape{grid-template-columns:72mm 1fr;gap:5mm}
  body[data-exercise-type="color-by-number"] .cbn-sheet.orientation-portrait{gap:4.5mm}
  body[data-exercise-type="color-by-number"] .cbn-sheet.orientation-portrait .cbn-legend-grid{grid-template-columns:repeat(var(--cbn-legend-cols,5),1fr);gap:2.5mm}
  body[data-exercise-type="color-by-number"] .cbn-sheet.orientation-portrait .cbn-legend-board{padding:3mm 3.5mm}
  body[data-exercise-type="color-by-number"] .cbn-sheet.orientation-landscape .cbn-legend-board{padding:3mm 3.5mm}
  body[data-exercise-type="color-by-number"] .cbn-legend-item{padding:2.5mm 2.5mm;border-radius:3mm}
  body[data-exercise-type="color-by-number"] .cbn-artboard{padding:2.4mm;border-radius:4mm}
}

/* v1.4.0-dev32 — Color by Number region-based production renderer */
.color-number-production-block{gap:10px}
.color-number-production-note{display:block;color:#7b8da4;line-height:1.45}
.cbn-artboard{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden}
.cbn-art-img{display:block;width:auto;height:auto;max-width:100%;max-height:620px;object-fit:contain;margin:0 auto}
.cbn-sheet.orientation-portrait .cbn-art-img{max-height:620px}
.cbn-sheet.orientation-landscape .cbn-art-img{max-height:510px}
@media screen and (max-width:900px){.cbn-art-img{max-height:none}}
@media print{
  body[data-exercise-type="color-by-number"] .cbn-art-img{width:auto!important;height:auto!important;max-width:100%!important;max-height:185mm!important;object-fit:contain!important}
  body[data-exercise-type="color-by-number"] .cbn-sheet.orientation-landscape .cbn-art-img{max-height:125mm!important}
}

/* v1.4.0-dev35 — Color by Number worksheet polish + picture drawer */
body[data-exercise-type="color-by-number"] #openWordsDrawer{display:inline-flex!important}

/* The worksheet itself should read like a clean printable page, not a stack of UI cards. */
body[data-exercise-type="color-by-number"] .cbn-artboard,
body[data-exercise-type="color-by-number"] .cbn-legend-board,
body[data-exercise-type="color-by-number"] .cbn-legend-item,
body[data-exercise-type="color-by-number"] .cbn-legend-chip{
  border:0!important;
  box-shadow:none!important;
}
body[data-exercise-type="color-by-number"] .cbn-artboard{
  border-radius:0!important;
  padding:0!important;
  background:transparent!important;
}
body[data-exercise-type="color-by-number"] .cbn-legend-board{
  border-radius:0!important;
  padding:0 2px 4px!important;
  background:transparent!important;
}
body[data-exercise-type="color-by-number"] .cbn-legend-item{
  border-radius:0!important;
  padding:7px 5px!important;
  background:transparent!important;
}
body[data-exercise-type="color-by-number"] .cbn-legend-chip{border-radius:5px!important}

.color-number-picture-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.color-number-picture-card{min-width:0;min-height:92px;padding:9px 10px;border:1px solid #e1e8ee;border-radius:13px;background:#fff;display:flex;align-items:center;gap:10px;text-align:left;color:#314b68;cursor:pointer}
.color-number-picture-card:hover{border-color:#9db8df;background:#fbfdff}
.color-number-picture-card.is-selected{border-color:#5e91d9;background:#eef5ff;box-shadow:0 0 0 2px rgba(74,128,203,.08)}
.color-number-picture-card>span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.color-number-picture-card b{font-size:11px;color:#27476d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.color-number-picture-card small{font-size:9px;line-height:1.3;color:#8191a5}
.color-number-card-thumb,.color-number-card-auto{width:62px;height:62px;flex:0 0 62px;border-radius:10px;background:#fff;display:grid;place-items:center;overflow:hidden}
.color-number-card-thumb img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.color-number-card-auto{grid-template-columns:repeat(3,1fr);gap:2px;padding:9px;background:#f2f6fd;color:#426b9f}
.color-number-card-auto b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#fff;font-size:9px;overflow:visible}
.color-number-production-note{display:block;margin-top:9px;color:#8292a7;font-size:9.5px;line-height:1.35}

body.mode-result.drawer-open.color-content-drawer #configPanel .setup-basics-section{display:block!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
body[data-exercise-type="color-by-number"].drawer-open:not(.color-content-drawer) #colorByNumberConfigSection{display:none!important}
body.color-content-drawer #configPanel .setup-basics-section>.setup-section-head,
body.color-content-drawer #configPanel .config-basics-main,
body.color-content-drawer #configPanel .quick-create-row,
body.color-content-drawer #configPanel #advancedConfig,
body.color-content-drawer #configPanel .asset-note{display:none!important}
body.color-content-drawer #colorByNumberConfigSection{display:block!important;margin:0!important;border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important}
body.color-content-drawer #configPanel .config-scroll-body{padding-top:18px!important}
body.color-content-drawer #configPanel #applySettings{display:flex!important}

@media screen and (max-width:620px){
  .color-number-picture-grid{grid-template-columns:1fr}
}

@media print{
  body[data-exercise-type="color-by-number"] .cbn-artboard,
  body[data-exercise-type="color-by-number"] .cbn-legend-board,
  body[data-exercise-type="color-by-number"] .cbn-legend-item,
  body[data-exercise-type="color-by-number"] .cbn-legend-chip{border:0!important;box-shadow:none!important;background:transparent!important}
}

/* v1.4.0-dev42 — semantic validation + landscape maximize */
.cbn-sheet.orientation-landscape{
  width:100%!important;
  max-width:none!important;
  grid-template-columns:minmax(188px,228px) minmax(0,1fr)!important;
  gap:18px!important;
  align-items:start!important;
}
.cbn-sheet.orientation-landscape .cbn-legend-board{
  align-self:start!important;
  min-width:0;
  padding:12px 14px!important;
}
.cbn-sheet.orientation-landscape .cbn-legend-title{margin-bottom:4px}
.cbn-sheet.orientation-landscape .cbn-legend-subtitle{display:none}
.cbn-sheet.orientation-landscape .cbn-legend-grid{
  grid-template-columns:repeat(var(--cbn-landscape-cols,1),minmax(0,1fr))!important;
  gap:8px!important;
}
.cbn-sheet.orientation-landscape .cbn-legend-item{
  padding:8px 10px!important;
  gap:9px!important;
  min-width:0;
  align-items:center;
}
.cbn-sheet.orientation-landscape .cbn-legend-item span:last-child{
  min-width:0;
  overflow-wrap:normal;
  word-break:normal;
  font-size:12.5px;
  line-height:1.2;
}
.cbn-sheet.orientation-landscape .cbn-artboard{
  width:100%;
  height:100%;
  min-height:0;
  justify-content:center;
  align-items:center;
  padding:10px 12px!important;
}
.cbn-sheet.orientation-landscape .cbn-art-img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%!important;
  max-height:760px!important;
  object-fit:contain!important;
}
@media screen and (max-width:900px){
  .cbn-sheet.orientation-landscape{grid-template-columns:1fr!important}
  .cbn-sheet.orientation-landscape .cbn-legend-subtitle{display:block}
  .cbn-sheet.orientation-landscape .cbn-legend-grid{grid-template-columns:repeat(var(--cbn-legend-cols,4),minmax(0,1fr))!important}
}
@media print{
  body[data-exercise-type="color-by-number"] .cbn-sheet.orientation-landscape{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:49mm minmax(0,1fr)!important;
    gap:3.6mm!important;
    align-items:start!important;
  }
  body[data-exercise-type="color-by-number"] .cbn-sheet.orientation-landscape .cbn-legend-board{
    padding:2.4mm 2.8mm!important;
  }
  body[data-exercise-type="color-by-number"] .cbn-sheet.orientation-landscape .cbn-legend-title{margin-bottom:0.8mm}
  body[data-exercise-type="color-by-number"] .cbn-sheet.orientation-landscape .cbn-legend-grid{
    grid-template-columns:repeat(var(--cbn-landscape-cols,1),minmax(0,1fr))!important;
    gap:1.3mm!important;
  }
  body[data-exercise-type="color-by-number"] .cbn-sheet.orientation-landscape .cbn-legend-item{
    padding:1.8mm 1.8mm!important;
    gap:1.7mm!important;
  }
  body[data-exercise-type="color-by-number"] .cbn-sheet.orientation-landscape .cbn-artboard{
    padding:1.8mm!important;
  }
  body[data-exercise-type="color-by-number"] .cbn-sheet.orientation-landscape .cbn-art-img{
    width:100%!important;
    height:auto!important;
    max-height:176mm!important;
  }
}

/* v1.4.0-dev80 — CBN landscape: override the *worksheet* crossword grid.
   The shared worksheet HTML retains `clue-sections` and `crossword-area` for
   compatibility with all games. Color by Number has no clues, so it must own
   the entire content row, then lay out its legend and artwork side-by-side. */
.worksheet.orientation-landscape.exercise-color-by-number{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:"alphabet" "head" "color-art"!important;
  grid-template-rows:auto auto minmax(0,1fr)!important;
  column-gap:0!important;
  row-gap:0!important;
  align-content:start!important;
}
.worksheet.orientation-landscape.exercise-color-by-number .alphabet-strip{
  grid-area:alphabet!important;
}
.worksheet.orientation-landscape.exercise-color-by-number .print-head{
  grid-area:head!important;
}
.worksheet.orientation-landscape.exercise-color-by-number .clue-sections{
  display:none!important;
}
.worksheet.orientation-landscape.exercise-color-by-number .crossword-area{
  grid-area:color-art!important;
  display:flex!important;
  justify-content:center!important;
  align-items:flex-start!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:6px 0 0!important;
  overflow:hidden!important;
}
.worksheet.orientation-landscape.exercise-color-by-number .color-by-number-sheet{
  width:100%!important;
  min-width:0!important;
}
/* A dedicated left-side legend + flexible right-side art board. */
.worksheet.orientation-landscape.exercise-color-by-number .cbn-sheet.orientation-landscape{
  display:grid!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  grid-template-columns:minmax(174px,210px) minmax(0,1fr)!important;
  gap:14px!important;
  align-items:start!important;
  justify-items:stretch!important;
}
.worksheet.orientation-landscape.exercise-color-by-number .cbn-legend-board{
  order:1!important;
  display:grid!important;
  width:100%!important;
  min-width:0!important;
  align-self:start!important;
  padding:10px 8px!important;
  gap:9px!important;
}
.worksheet.orientation-landscape.exercise-color-by-number .cbn-legend-title{
  text-align:left!important;
  margin:0!important;
}
.worksheet.orientation-landscape.exercise-color-by-number .cbn-legend-subtitle{
  display:none!important;
}
.worksheet.orientation-landscape.exercise-color-by-number .cbn-legend-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:8px!important;
}
.worksheet.orientation-landscape.exercise-color-by-number .cbn-legend-item{
  justify-content:flex-start!important;
  padding:6px 7px!important;
  gap:8px!important;
}
.worksheet.orientation-landscape.exercise-color-by-number .cbn-artboard{
  order:2!important;
  display:flex!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:2px 4px!important;
  align-items:flex-start!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.worksheet.orientation-landscape.exercise-color-by-number .cbn-art-img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:520px!important;
  object-fit:contain!important;
  margin:0 auto!important;
}
@media print{
  body[data-exercise-type="color-by-number"] .worksheet.orientation-landscape.exercise-color-by-number{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"alphabet" "head" "color-art"!important;
    grid-template-rows:auto auto minmax(0,1fr)!important;
    column-gap:0!important;
    row-gap:0!important;
    align-content:start!important;
  }
  body[data-exercise-type="color-by-number"] .worksheet.orientation-landscape.exercise-color-by-number .crossword-area{
    grid-area:color-art!important;
    width:100%!important;
    margin:1mm 0 0!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body[data-exercise-type="color-by-number"] .worksheet.orientation-landscape.exercise-color-by-number .cbn-sheet.orientation-landscape{
    display:grid!important;
    grid-template-columns:48mm minmax(0,1fr)!important;
    gap:4mm!important;
    width:100%!important;
    align-items:start!important;
  }
  body[data-exercise-type="color-by-number"] .worksheet.orientation-landscape.exercise-color-by-number .cbn-legend-board{
    padding:2mm 1mm!important;
    gap:2mm!important;
  }
  body[data-exercise-type="color-by-number"] .worksheet.orientation-landscape.exercise-color-by-number .cbn-legend-title{
    text-align:left!important;
    margin-bottom:1mm!important;
  }
  body[data-exercise-type="color-by-number"] .worksheet.orientation-landscape.exercise-color-by-number .cbn-legend-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:1.4mm!important;
  }
  body[data-exercise-type="color-by-number"] .worksheet.orientation-landscape.exercise-color-by-number .cbn-legend-item{
    padding:1.1mm 0.8mm!important;
    gap:1.6mm!important;
    justify-content:flex-start!important;
  }
  body[data-exercise-type="color-by-number"] .worksheet.orientation-landscape.exercise-color-by-number .cbn-artboard{
    padding:0!important;
    width:100%!important;
    margin:0!important;
    align-items:flex-start!important;
    justify-content:center!important;
  }
  body[data-exercise-type="color-by-number"] .worksheet.orientation-landscape.exercise-color-by-number .cbn-art-img{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:143mm!important;
    object-fit:contain!important;
    margin:0 auto!important;
  }
}

/* v1.4.0-dev82 — Color-by-Number worksheet strip and difficulty library filter */
.strip-color-by-number{
  display:none;
  justify-content:center;
  align-items:center;
  width:100%;
  height:13px;
  min-height:13px;
  overflow:visible;
}
.strip-color-by-number-mini{
  display:block;
  width:100%;
  height:13px;
  overflow:visible;
}
body[data-exercise-type="color-by-number"] .strip-color-by-number{
  display:flex!important;
}
/* CBN difficulty uses the same three-card pattern as Mirror Draw / Connect Dots. */
.color-number-difficulty-grid{gap:8px!important;margin-top:8px!important}
.color-number-difficulty-grid .maze-difficulty-card{
  min-height:64px!important;padding:10px 11px!important;border:1px solid #e1e8ee!important;
  border-radius:13px!important;background:#fff!important;
}
.color-number-difficulty-grid .maze-difficulty-card:hover{border-color:#a9c2eb!important;background:#fbfdff!important}
.color-number-difficulty-grid .maze-difficulty-card.is-selected{
  border-color:#5e91d9!important;background:#eef5ff!important;
  box-shadow:0 0 0 2px rgba(74,128,203,.08)!important;
}
.color-number-difficulty-grid .maze-difficulty-card:focus-visible,
.color-number-picture-card:focus-visible{outline:2px solid #426fea;outline-offset:2px}
.color-number-production-block{padding-top:14px;border-top:1px solid #edf2f3}
@media screen and (max-width:480px){
  .color-number-difficulty-grid{grid-template-columns:1fr!important}
}
.color-number-filter-empty{
  grid-column:1/-1;
  padding:20px 15px;
  background:#f7faff;
  border:1px dashed #c8d9ee;
  border-radius:12px;
  color:#5c718e;
  font-size:12px;
}
@media print{
  .strip-color-by-number,
  .strip-color-by-number-mini{
    height:3.2mm!important;
    min-height:3.2mm!important;
  }
}


/* ============================================================
   v1.4.0-dev92-brand1 — Official zadachki.bg brand integration
   Header and device identity only; print worksheets unchanged.
   ============================================================ */
:root{
  --zadachki-navy:#0B2F6B;
  --zadachki-blue:#0D5DB8;
  --zadachki-yellow:#FFC928;
  --zadachki-orange:#FF8A00;
}
@media screen{
  .product-header .brand-lockup{
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    line-height:1!important;
    background:transparent!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
    flex:0 0 auto;
  }
  .product-header .brand-logo{
    display:block;
    width:213px;
    height:auto;
    max-width:100%;
    object-fit:contain;
    flex:0 1 auto;
  }
  .product-header .brand-lockup:hover .brand-logo{filter:brightness(1.035)}
  .product-header .brand-lockup:focus-visible{
    outline:3px solid var(--zadachki-blue)!important;
    outline-offset:5px!important;
    border-radius:8px;
  }
  .brand-visually-hidden{
    position:absolute!important;
    width:1px!important;height:1px!important;
    padding:0!important;margin:-1px!important;
    overflow:hidden!important;clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;border:0!important;
  }
}
@media screen and (max-width:720px){
  .product-header .brand-logo{width:175px;max-width:min(175px,100%)}
  .product-header .brand-lockup{grid-column:1/-1!important;max-width:100%}
}
@media screen and (max-width:380px){
  .product-header .brand-logo{width:157px;max-width:min(157px,100%)}
}
/* ============================================================
   zadachki.bg · home1 · screen-only home and library refresh
   Brand palette from official logo; original A4 / engines untouched.
   ============================================================ */
@media screen {
  body.mode-home{background:#f7f9fd!important}
  #homeScreen{max-width:1320px!important;margin:18px auto 70px!important;padding:0 24px!important}
  #homeScreen .home-pro{gap:24px!important}
  #homeScreen .home-hero-pro{
    border-color:#dfe9f3!important;
    border-radius:29px!important;
    box-shadow:0 22px 64px rgba(11,47,107,.055)!important;
  }
  #homeScreen .hero-copy{
    background:radial-gradient(circle at 93% 7%,rgba(255,201,40,.11),transparent 38%),linear-gradient(140deg,#fff 8%,#f6f9ff 100%)!important;
  }
  #homeScreen .hero-copy h1{color:#0b2f6b!important;letter-spacing:-1.8px!important}
  #homeScreen .hero-copy h1 span{color:#0d5db8!important}
  #homeScreen .hero-eyebrow{background:#fff5d4!important;color:#80520c!important;border-color:#ffe6a0!important}
  #homeScreen .hero-primary,#homeScreen .quick-primary-button{
    background:linear-gradient(105deg,#0b418a,#0d5db8)!important;
    color:white!important;box-shadow:0 12px 24px rgba(13,93,184,.16)!important;
  }
  #homeScreen .hero-primary:hover,#homeScreen .quick-primary-button:hover{filter:brightness(1.07)}
  #homeScreen .hero-trust span::before{background:#ffc928!important}
  #homeScreen .audience-strip>div{background:#fff!important;border-color:#e3eaf3!important;box-shadow:none!important}
  #homeScreen .audience-strip>div>.audience-icon{background:#f0f5ff!important;color:#0d5db8!important}
  #homeScreen .audience-strip>div:nth-child(2)>.audience-icon{background:#fff4d4!important;color:#94620e!important}
  #homeScreen .audience-strip>div:nth-child(3)>.audience-icon{background:#eaf8f2!important;color:#347c59!important}
  #homeScreen .audience-strip>div:nth-child(4)>.audience-icon{background:#fff1e7!important;color:#ab5917!important}
  #homeScreen .home-create-board{
    padding:34px!important;
    border:1px solid #e1e8f3!important;
    border-radius:28px!important;
    background:#fff!important;
    box-shadow:0 15px 54px rgba(31,57,98,.045)!important;
  }
  #homeScreen .home-create-board .create-board-head{margin-bottom:27px!important}
  #homeScreen .home-create-board .section-eyebrow{color:#0d5db8!important;font-size:12px!important;letter-spacing:.055em!important}
  #homeScreen .home-create-board h2{font-size:clamp(29px,3.1vw,43px)!important;line-height:1.07!important;color:#0b2f6b!important;letter-spacing:-1.1px!important}
  #homeScreen .home-create-board .section-helper{max-width:770px!important;color:#677b92!important;font-size:15px!important;line-height:1.55!important}
  .exercise-category-list{display:grid;gap:31px}
  .exercise-category{position:relative;min-width:0;--category-ink:#0d5db8;--category-soft:#ecf4ff}
  .exercise-category--reading{--category-ink:#c86c39;--category-soft:#fff0e5}
  .exercise-category--puzzles{--category-ink:#4b68b4;--category-soft:#eef2ff}
  .exercise-category--logic{--category-ink:#247c64;--category-soft:#e6f7ef}
  .exercise-category--creative{--category-ink:#997322;--category-soft:#fff5d9}
  .exercise-category-head{display:flex;align-items:center;gap:13px;margin:0 0 14px!important;min-width:0}
  .exercise-category-symbol{
    display:grid;place-items:center;flex:0 0 auto;width:45px;height:45px;border-radius:15px;
    background:var(--category-soft);color:var(--category-ink);font-weight:950;font-size:15px;
    font-variant-numeric:tabular-nums
  }
  .exercise-category-copy{min-width:0;flex:1}
  .exercise-category-head h3{font-size:19px;line-height:1.25;letter-spacing:-.35px;color:#193a67;margin:0 0 2px;font-weight:900}
  .exercise-category-head p{margin:0;font-size:12.5px;line-height:1.45;color:#71839a}
  .exercise-category-count{
    flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.03em;
    border:1px solid #e3eaf3;border-radius:999px;padding:7px 11px;
    color:#7a899c;background:#fff
  }
  #homeScreen .home-create-board .module-grid-v1{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px!important;margin:0!important;
  }
  /* Accent tokens for the complete card, not only the old age chip. */
  .module-crossword-v1{--game-accent:#4375ca;--game-soft:#e9f1ff;--game-ink:#38629b;--game-stroke:#cfdef8}
  .module-maze-v1{--game-accent:#47a074;--game-soft:#e8f8ed;--game-ink:#347a52;--game-stroke:#c6ead4}
  .module-path-v1{--game-accent:#d39a2e;--game-soft:#fff3d5;--game-ink:#956515;--game-stroke:#f5ddaa}
  .module-writeword-v1{--game-accent:#d47d66;--game-soft:#fff0e9;--game-ink:#ae5e4e;--game-stroke:#f5d4cb}
  .module-matchword-v1{--game-accent:#bf8b43;--game-soft:#fff2df;--game-ink:#8b611d;--game-stroke:#f2dfbd}
  .module-choiceword-v1{--game-accent:#be729b;--game-soft:#fff0f6;--game-ink:#944b73;--game-stroke:#f2d5e3}
  .module-missingletters-v1{--game-accent:#767bcb;--game-soft:#edf0ff;--game-ink:#535b9e;--game-stroke:#d7dafa}
  .module-secretword-v1{--game-accent:#5078b8;--game-soft:#eaf3ff;--game-ink:#3e669e;--game-stroke:#d4e4fa}
  .module-wordsearch-v1{--game-accent:#6c7ab1;--game-soft:#eff2fe;--game-ink:#505f98;--game-stroke:#d9e0f7}
  .module-dots-v1{--game-accent:#9b75c9;--game-soft:#f4edff;--game-ink:#70559e;--game-stroke:#e4d5f5}
  .module-mirror-v1{--game-accent:#3d9a92;--game-soft:#e6f7f5;--game-ink:#247c75;--game-stroke:#c7e9e5}
  .module-colorbynumber-v1{--game-accent:#d6a039;--game-soft:#fff1d4;--game-ink:#9b6822;--game-stroke:#f3ddab}
  #homeScreen .home-create-board .module-card-v1{
    min-width:0!important;min-height:262px!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    gap:13px!important;padding:13px!important;
    text-align:left!important;border-radius:19px!important;
    border:1px solid #e3eaf4!important;background:#fff!important;
    box-shadow:0 2px 4px rgba(18,46,88,.012)!important;
    transition:border-color .18s,box-shadow .18s,transform .18s!important;
  }
  #homeScreen .home-create-board .module-card-v1:hover{
    transform:translateY(-2px)!important;border-color:var(--game-accent)!important;
    box-shadow:0 13px 28px rgba(30,61,101,.08)!important;
  }
  #homeScreen .home-create-board .module-card-v1.is-selected{
    border:2px solid var(--game-accent)!important;
    padding:12px!important;
    box-shadow:0 0 0 3px var(--game-soft)!important;
  }
  #homeScreen .home-create-board .module-card-v1:focus-visible{outline:3px solid var(--game-accent)!important;outline-offset:3px!important}
  #homeScreen .home-create-board .module-v1-visual{
    width:100%!important;height:128px!important;min-height:128px!important;
    border:1px solid var(--game-stroke)!important;border-radius:15px!important;
    background:linear-gradient(145deg,var(--game-soft),#fff)!important;
    padding:9px!important;
  }
  #homeScreen .home-create-board .module-v1-visual .module-scene{
    width:100%!important;height:100%!important;
    transform:none!important;transform-origin:center!important;
  }
  #homeScreen .home-create-board .module-v1-copy{
    display:flex!important;flex:1;min-width:0;flex-direction:column!important;align-items:flex-start!important;
    justify-content:flex-start!important;text-align:left!important;gap:5px!important;padding:0 5px 2px!important;
  }
  #homeScreen .home-create-board .module-v1-copy b{
    width:100%;font-size:17px!important;line-height:1.22!important;
    color:#193a67!important;letter-spacing:-.3px!important;
  }
  #homeScreen .home-create-board .module-v1-copy small{
    display:block!important;font-size:12px!important;line-height:1.38!important;
    color:#71849a!important;min-height:0!important;max-width:none!important;
  }
  #homeScreen .home-create-board .module-card-v1 .module-v1-age{
    display:inline-flex!important;align-self:flex-start!important;
    min-width:0!important;margin-top:auto!important;padding:6px 10px!important;
    border-radius:999px!important;background:var(--game-soft)!important;color:var(--game-ink)!important;
    font-size:11px!important;line-height:1.3!important;font-weight:900!important;
  }
  #homeScreen .home-create-board .module-card-v1 .module-select-state{
    background:var(--game-accent)!important;color:#fff!important;
    top:21px!important;right:21px!important;font-size:10px!important;z-index:2;
  }
  #homeScreen .quick-start-v1{
    margin-top:29px!important;
    border:1px solid #dae6f6!important;border-radius:22px!important;
    background:linear-gradient(120deg,#f4f8ff,#fff 60%,#fffcf3)!important;
    box-shadow:none!important;
  }
  #homeScreen .home-library-v532a{
    border:1px solid #dfe8f3!important;border-radius:26px!important;
    background:linear-gradient(170deg,#fff 75%,#f9fbff)!important;
    box-shadow:0 12px 38px rgba(31,57,98,.045)!important;
  }
  #homeExercisesSection,#homeSavedSection{scroll-margin-top:22px}
  #homeScreen .text-action:focus-visible,#homeScreen .new-project-home:focus-visible{outline:3px solid #0d5db8!important;outline-offset:3px!important}

  /* Worksheet-level exercise picker. */
  body.exercise-chooser-open{overflow:hidden}
  .exercise-chooser-modal{
    position:fixed;inset:0;z-index:151;display:none;align-items:center;justify-content:center;
    padding:16px;background:rgba(11,36,78,.43);backdrop-filter:blur(4px)
  }
  .exercise-chooser-modal.open{display:flex}
  .exercise-chooser-dialog{
    width:min(790px,100%);max-height:min(790px,91dvh);overflow:auto;overscroll-behavior:contain;
    padding:26px;border:1px solid #e0e8f4;border-radius:25px;background:#fff;
    box-shadow:0 28px 90px rgba(12,36,78,.22)
  }
  .exercise-chooser-header{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;margin-bottom:20px}
  .exercise-chooser-header h3{font-size:27px;letter-spacing:-.7px;color:#0b2f6b;margin:4px 0 5px}
  .exercise-chooser-header p{color:#74859b;font-size:13px;margin:0}
  #closeExerciseChooser{
    display:grid;place-items:center;flex:0 0 auto;width:39px;height:39px;
    background:#f1f5fb;color:#54728f;border:1px solid #e1e8f2;border-radius:13px;font-size:17px;
  }
  #closeExerciseChooser:hover{background:#e7effc!important}
  .exercise-chooser-list{display:grid;gap:20px}
  .exercise-chooser-group h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#637b9b;margin:0 0 10px}
  .exercise-chooser-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .exercise-chooser-option{
    min-width:0;display:flex;align-items:center;gap:11px;text-align:left;
    padding:8px 11px;background:#fff;border:1px solid #e3eaf4;border-radius:15px;
    transition:border-color .16s,background .16s;
  }
  .exercise-chooser-option:hover{background:#f8fbff!important;border-color:#b7d0ec!important}
  .exercise-chooser-icon{display:grid;place-items:center;flex:0 0 auto;width:64px;height:56px;overflow:hidden;border-radius:10px;background:#f4f8ff}
  .exercise-chooser-option .module-v1-visual{
    display:grid!important;place-items:center!important;flex:none;width:64px!important;height:56px!important;
    min-height:0!important;padding:0!important;border:0!important;border-radius:10px!important;
  }
  .exercise-chooser-option .module-scene{width:100%!important;height:100%!important;transform:scale(.6)!important;transform-origin:center!important}
  .exercise-chooser-details{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
  .exercise-chooser-details b{font-size:13px;line-height:1.25;color:#183963}
  .exercise-chooser-details small{font-size:11px;color:#7285a0}
  .exercise-chooser-arrow{color:#0d5db8;font-size:17px}
  #closeExerciseChooser:focus-visible,.exercise-chooser-option:focus-visible{outline:3px solid #0d5db8!important;outline-offset:2px!important}
}
@media screen and (min-width:1450px){
  #homeScreen .home-create-board .module-grid-v1{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media screen and (min-width:800px) and (max-width:1100px){
  #homeScreen .home-create-board .module-grid-v1{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media screen and (min-width:621px) and (max-width:799px){
  #homeScreen .home-create-board{padding:23px!important}
  #homeScreen .home-create-board .module-grid-v1{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media screen and (max-width:620px){
  #homeScreen{margin:10px auto 40px!important;padding:0 12px!important}
  #homeScreen .home-pro{gap:15px!important}
  #homeScreen .home-hero-pro{border-radius:22px!important}
  #homeScreen .hero-copy{padding:27px 22px!important}
  #homeScreen .hero-copy h1{font-size:clamp(31px,7.5vw,40px)!important;letter-spacing:-1.15px!important;line-height:1.07!important}
  #homeScreen .home-create-board{padding:17px 13px!important;border-radius:21px!important}
  #homeScreen .home-create-board .create-board-head{margin-bottom:24px!important}
  #homeScreen .home-create-board h2{font-size:28px!important}
  #homeScreen .home-create-board .section-helper{font-size:13px!important}
  .exercise-category-list{gap:26px}
  .exercise-category-head{gap:8px;margin-bottom:12px!important;align-items:center}
  .exercise-category-symbol{width:35px;height:35px;border-radius:11px;font-size:11px}
  .exercise-category-head h3{font-size:15px;letter-spacing:-.2px}
  .exercise-category-head p{font-size:11px;line-height:1.28}
  .exercise-category-count{display:none}
  #homeScreen .home-create-board .module-grid-v1{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  #homeScreen .home-create-board .module-card-v1{
    min-height:215px!important;display:flex!important;flex-direction:column!important;
    gap:7px!important;padding:8px!important;border-radius:15px!important;text-align:left!important
  }
  #homeScreen .home-create-board .module-card-v1.is-selected{padding:7px!important}
  #homeScreen .home-create-board .module-v1-visual{
    width:100%!important;height:96px!important;min-height:96px!important;border-radius:11px!important;padding:4px!important
  }
  #homeScreen .home-create-board .module-v1-visual .module-scene{
    transform:scale(.88)!important;transform-origin:center!important
  }
  #homeScreen .home-create-board .module-v1-copy{
    align-items:flex-start!important;justify-content:flex-start!important;
    gap:5px!important;padding:1px 2px 2px!important;text-align:left!important
  }
  #homeScreen .home-create-board .module-v1-copy b{
    text-align:left!important;font-size:12.5px!important;line-height:1.23!important
  }
  #homeScreen .home-create-board .module-v1-copy small{display:none!important}
  #homeScreen .home-create-board .module-card-v1 .module-v1-age{
    display:inline-flex!important;margin-top:auto!important;padding:5px 7px!important;font-size:10px!important
  }
  #homeScreen .home-create-board .module-card-v1 .module-select-state{top:12px!important;right:12px!important;font-size:8px!important;padding:5px!important}
  #homeScreen .quick-start-v1{margin-top:20px!important;padding:15px!important}
  .exercise-chooser-dialog{padding:17px 13px;border-radius:20px;max-height:91dvh}
  .exercise-chooser-header{gap:11px}
  .exercise-chooser-header h3{font-size:23px}
  .exercise-chooser-grid{grid-template-columns:1fr}
  .exercise-chooser-icon{width:53px;height:47px}
  .exercise-chooser-option .module-v1-visual{width:53px!important;height:47px!important}
}
@media screen and (max-width:350px){
  #homeScreen .home-create-board .module-v1-visual{height:82px!important;min-height:82px!important}
  #homeScreen .home-create-board .module-card-v1{min-height:203px!important}
}
@media screen and (prefers-reduced-motion:reduce){
  #homeScreen .module-card-v1,.exercise-chooser-option{transition:none!important}
  #homeScreen .module-card-v1:hover{transform:none!important}
}
@media print{#exerciseChooserModal{display:none!important}}

/* home1 finishing: consistent original illustrations in the exercise picker. */
@media screen{
  .exercise-chooser-icon img{display:block!important;width:38px!important;height:38px!important;max-width:100%!important;object-fit:contain!important;position:static!important;filter:none!important}
}
@media screen and (max-width:620px){.exercise-chooser-icon img{width:33px!important;height:33px!important}}
@media screen and (min-width:1250px){
  #homeScreen .exercise-category--reading .module-grid-v1{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* =====================================================================
   HOME2 VISUAL REFRESH — modern header, cleaner category strips,
   more abstract worksheet-style exercise cards, centered mobile logo.
   ===================================================================== */

body.mode-home{
  background:
    radial-gradient(circle at top right,rgba(255,201,71,.12),transparent 28%),
    radial-gradient(circle at bottom left,rgba(67,117,202,.08),transparent 24%),
    #f5f8fc;
}
body.mode-home .product-header{
  max-width:1320px;
  margin:16px auto 0;
  padding:14px 18px;
  border:1px solid #dbe6f1;
  border-radius:28px;
  background:rgba(255,255,255,.86);
  box-shadow:0 16px 40px rgba(34,67,107,.08);
  backdrop-filter:blur(14px);
}
body.mode-home .legacy-steps{display:none!important}
body.mode-home .brand-lockup{flex:0 0 auto}
body.mode-home .brand-logo{
  display:block;
  width:210px;
  height:auto;
}
body.mode-home .top-nav{
  padding:6px;
  border:1px solid #e1eaf4;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(247,250,255,.94),rgba(241,246,252,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 18px rgba(70,99,132,.06);
  gap:5px;
}
body.mode-home .top-nav button{
  min-height:42px;
  padding:0 18px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:900;
  color:#5f748c;
  letter-spacing:-.01em;
}
body.mode-home .top-nav button:hover,
body.mode-home .top-nav button:focus-visible{
  background:#edf4ff!important;
  color:#1b5bc9!important;
  box-shadow:0 7px 18px rgba(66,111,202,.12);
}
body.mode-home #navHome{
  background:#edf4ff!important;
  color:#1c57ca!important;
  box-shadow:0 8px 18px rgba(66,111,202,.11);
}
body.mode-home .header-actions{min-width:138px}
body.mode-home .header-free-note{
  padding:9px 13px;
  border-color:#dce8de;
  background:linear-gradient(180deg,#f7fffa,#effaf3);
  color:#3a7f5d;
  font-size:10.5px;
}
body.mode-home #homeScreen{margin-top:18px}
body.mode-home .home-card,.home-continue-card{border-radius:26px!important}
body.mode-home .section-eyebrow{letter-spacing:.12em}

/* Categories */
.exercise-category-list{gap:28px!important}
.exercise-category{
  padding-top:4px;
  border-top:1px solid rgba(215,226,239,.9);
}
.exercise-category:first-child{border-top:0;padding-top:0}
.exercise-category-head{
  gap:12px!important;
  align-items:flex-start!important;
  margin:0 0 16px!important;
}
.exercise-category-symbol{display:none!important}
.exercise-category-copy h3{
  font-size:28px;
  line-height:1.03;
  letter-spacing:-1px;
}
.exercise-category-copy p{font-size:13px!important;max-width:760px}
.exercise-category-count{
  margin-left:auto;
  border-color:#d7e3ef!important;
  background:#fff!important;
  color:#6f8296!important;
  box-shadow:0 6px 14px rgba(68,92,118,.04);
}

/* Card layout */
#homeScreen .home-create-board .module-grid-v1{
  gap:16px!important;
}
.module-card-v1{
  min-height:278px!important;
  padding:16px 16px 15px!important;
  gap:12px!important;
  text-align:left!important;
  overflow:hidden;
  border-color:var(--game-stroke)!important;
  box-shadow:0 10px 24px rgba(56,87,119,.055)!important;
}
.module-card-v1::before{
  content:"";
  position:absolute;
  top:-32px;
  right:-26px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:var(--game-soft);
  opacity:.95;
}
.module-card-v1::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:57px;
  height:1px;
  background:linear-gradient(90deg,transparent,#ecf1f7 12%,#ecf1f7 88%,transparent);
}
.module-card-v1:hover{
  border-color:var(--game-accent)!important;
  box-shadow:0 16px 34px rgba(56,87,119,.1)!important;
}
.module-card-v1.is-selected{
  border-color:var(--game-accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--game-accent) 12%, transparent),0 18px 34px rgba(47,87,144,.12)!important;
}
.module-card-v1 .module-select-state{
  top:12px!important;
  right:12px!important;
  background:var(--game-accent)!important;
  box-shadow:0 9px 20px color-mix(in srgb,var(--game-accent) 28%, transparent)!important;
}
.module-v1-visual{
  height:148px!important;
  padding:12px;
  border-radius:24px!important;
  border:1px solid color-mix(in srgb,var(--game-stroke) 90%, #fff 10%)!important;
  background:linear-gradient(180deg,#ffffff 0%,color-mix(in srgb,var(--game-soft) 60%, #fff 40%) 100%)!important;
  place-items:stretch!important;
}
.module-scene{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(227,235,243,.92);
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.92)),
    radial-gradient(circle at top right,var(--game-soft) 0,transparent 50%);
  box-shadow:0 12px 26px rgba(73,99,134,.06), inset 0 1px 0 rgba(255,255,255,.98);
}
.module-scene::before{
  content:"";
  position:absolute;
  left:16px;
  top:14px;
  width:34px;
  height:4px;
  border-radius:999px;
  background:var(--game-accent);
  opacity:.4;
  box-shadow:0 10px 0 rgba(199,212,228,.8),0 20px 0 rgba(199,212,228,.55);
}
.module-v1-visual img{display:none!important}
.module-v1-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px}
.module-v1-copy b{font-size:17px!important;line-height:1.15;color:#173a66}
.module-v1-copy small{font-size:12px!important;line-height:1.45;color:#7388a0}
.module-v1-age{
  align-self:flex-start;
  margin-top:8px;
  padding:7px 11px!important;
  border-radius:999px!important;
  background:var(--game-soft)!important;
  border:1px solid var(--game-stroke)!important;
  color:var(--game-ink)!important;
  box-shadow:none!important;
}

/* Abstract worksheet previews instead of illustration-like thumbnails */
.module-scene-matchword{justify-content:flex-start;gap:14px}
.module-match-picture{
  position:relative;
  flex:0 0 48px;
  width:48px;
  height:48px;
  border-radius:15px;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--game-soft) 78%, #fff 22%));
  border:1px solid var(--game-stroke);
  box-shadow:0 6px 14px rgba(63,95,131,.06);
}
.module-match-picture::before{
  content:"";
  position:absolute;
  inset:13px;
  border-radius:11px;
  border:2px solid color-mix(in srgb,var(--game-accent) 55%, #fff 45%);
}
.module-match-line{width:42px!important;height:2px!important;border-radius:999px!important;background:var(--game-accent)!important;opacity:.75}
.module-match-word{
  padding:10px 14px!important;
  border-radius:999px!important;
  border:1px solid var(--game-stroke)!important;
  background:#fff!important;
  color:var(--game-ink)!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:.03em!important;
}

.module-scene-choiceword,
.module-scene-writeword,
.module-scene-missingletters,
.module-scene-secretword{
  justify-content:flex-start;
}
.module-scene-choiceword::after,
.module-scene-writeword::after,
.module-scene-missingletters::after,
.module-scene-secretword::after{
  content:"";
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:14px;
  margin-right:8px;
  background:
    radial-gradient(circle at 50% 50%,var(--game-accent) 0 6px,transparent 7px),
    linear-gradient(180deg,#fff,color-mix(in srgb,var(--game-soft) 75%, #fff 25%));
  border:1px solid var(--game-stroke);
  box-shadow:0 6px 14px rgba(63,95,131,.06);
}
.module-choice-options{display:flex!important;gap:9px!important;margin-left:0!important}
.module-choice-options i,
.module-v1-letter-boxes i,
.module-missing-word i,
.module-secretword-boxes i{
  width:30px!important;
  height:22px!important;
  border-radius:8px!important;
  border:1px solid var(--game-stroke)!important;
  background:#fff!important;
  box-shadow:0 4px 10px rgba(71,100,135,.05);
}
.module-choice-options i.is-correct{background:color-mix(in srgb,var(--game-soft) 80%, #fff 20%)!important;border-color:var(--game-accent)!important}
.module-v1-letter-boxes,
.module-missing-word,
.module-secretword-boxes{display:flex!important;gap:7px!important;flex-wrap:nowrap}
.module-missing-word i,
.module-secretword-boxes i{display:grid!important;place-items:center;font-style:normal!important;font-weight:900!important;color:var(--game-ink)!important}
.module-missing-word i.is-gap,
.module-secretword-boxes i:empty,
.module-v1-letter-boxes i:empty{background:transparent!important;border-style:dashed!important;border-color:color-mix(in srgb,var(--game-accent) 38%, #d6e1ef 62%)!important}

.module-scene-crossword{justify-content:flex-start;gap:14px}
.module-scene-sheet{
  flex:0 0 62px;
  width:62px;
  height:62px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--game-stroke);
  display:grid;
  place-items:center;
  box-shadow:0 10px 22px rgba(63,95,131,.06);
}
.mini-crossword-shape{width:34px;height:34px}
.mini-crossword-shape i{border-color:var(--game-ink)!important}
.module-scene-icon{display:none!important}

.module-scene-wordsearch{justify-content:flex-start}
.module-wordsearch-grid{
  display:grid!important;
  grid-template-columns:repeat(3,18px)!important;
  gap:4px!important;
  padding:8px!important;
  border-radius:12px!important;
  border:1px solid var(--game-stroke)!important;
  background:#fff!important;
  box-shadow:0 8px 18px rgba(63,95,131,.05);
}
.module-wordsearch-grid i{
  width:18px!important;
  height:18px!important;
  border-radius:5px!important;
  display:grid!important;
  place-items:center!important;
  background:color-mix(in srgb,var(--game-soft) 75%, #fff 25%);
  color:var(--game-ink)!important;
  font-style:normal!important;
  font-size:10px!important;
  font-weight:900!important;
}

.module-scene-maze,
.module-scene-path,
.module-scene-dots,
.module-scene-mirror,
.module-scene-colorbynumber{justify-content:center}
.module-scene-svg,
.module-scene-dots svg,
.module-scene-mirror svg,
.module-scene-colorbynumber svg{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important}
.module-scene-maze svg path,
.module-scene-path svg path,
.module-scene-dots svg path,
.module-scene-mirror svg path,
.module-scene-colorbynumber svg path,
.module-scene-colorbynumber svg circle{
  stroke:var(--game-ink)!important;
}
.module-scene-maze .maze-route{stroke:var(--game-accent)!important}
.module-scene-path .path-route-good{stroke:var(--game-accent)!important}
.module-scene-path .path-route-bad{stroke:#cfd8e4!important}
.module-scene-dots svg g circle{fill:#fff!important;stroke:var(--game-accent)!important;stroke-width:2px!important}
.module-scene-mirror .mirror-preview-axis{stroke-dasharray:4 4;stroke:var(--game-accent)!important;opacity:.8}
.module-scene-mirror .mirror-preview-hint{stroke:color-mix(in srgb,var(--game-accent) 42%, #fff 58%)!important;stroke-dasharray:5 4}
.module-scene-colorbynumber svg text{fill:var(--game-ink)!important;font-weight:900!important}

/* medium screens */
@media(max-width:1140px){
  #homeScreen .home-create-board .module-grid-v1{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .exercise-category-copy h3{font-size:24px}
}

/* mobile header + cards */
@media(max-width:760px){
  body.mode-home .product-header{
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    gap:12px!important;
    padding:16px 16px 14px!important;
    border-radius:24px!important;
  }
  body.mode-home .brand-lockup{
    width:100%;
    justify-content:center!important;
  }
  body.mode-home .brand-logo{
    width:min(220px,68vw)!important;
    margin:0 auto;
  }
  body.mode-home .top-nav{
    width:100%;
    justify-content:center!important;
    flex-wrap:wrap;
    padding:6px!important;
  }
  body.mode-home .top-nav button{
    flex:1 1 calc(33.333% - 6px);
    min-width:0;
    padding:0 12px;
    font-size:12px;
  }
  body.mode-home .header-actions{display:none!important}
  .exercise-category-head{
    flex-wrap:wrap;
    gap:8px 10px!important;
  }
  .exercise-category-count{margin-left:0}
  .exercise-category-copy h3{font-size:22px}
}

@media(max-width:640px){
  #homeScreen .home-create-board .module-grid-v1{grid-template-columns:1fr!important}
  .module-card-v1{min-height:252px!important}
  .module-v1-visual{height:138px!important}
  .module-v1-copy b{font-size:18px!important}
}

@media(max-width:420px){
  body.mode-home .top-nav{gap:4px!important}
  body.mode-home .top-nav button{font-size:11.5px!important;min-height:40px!important}
}

/* =====================================================================
   HOME3 ARTWORK SYSTEM — custom generated visuals for home and saved sheets
   ===================================================================== */

/* Home game cards: replace the old pseudo icons with unified artwork assets */
#homeScreen .module-card-v1 .module-v1-visual{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,color-mix(in srgb,var(--game-soft) 62%, #fff 38%) 100%)!important;
}
#homeScreen .module-card-v1 .module-v1-visual > *{opacity:0!important}
#homeScreen .module-card-v1 .module-v1-visual::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:18px;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  box-shadow:0 10px 24px rgba(75,101,136,.07);
}
#homeScreen .module-matchword-v1 .module-v1-visual::after{background-image:url('../assets/homecards/match-picture-word.png')}
#homeScreen .module-choiceword-v1 .module-v1-visual::after{background-image:url('../assets/homecards/choose-word.png')}
#homeScreen .module-writeword-v1 .module-v1-visual::after{background-image:url('../assets/homecards/write-word.png')}
#homeScreen .module-missingletters-v1 .module-v1-visual::after{background-image:url('../assets/homecards/missing-letters.png')}
#homeScreen .module-crossword-v1 .module-v1-visual::after{background-image:url('../assets/homecards/crossword.png')}
#homeScreen .module-secretword-v1 .module-v1-visual::after{background-image:url('../assets/homecards/secret-word.png')}
#homeScreen .module-wordsearch-v1 .module-v1-visual::after{background-image:url('../assets/homecards/word-search.png')}
#homeScreen .module-maze-v1 .module-v1-visual::after{background-image:url('../assets/homecards/maze.png')}
#homeScreen .module-path-v1 .module-v1-visual::after{background-image:url('../assets/homecards/choose-path.png')}
#homeScreen .module-dots-v1 .module-v1-visual::after{background-image:url('../assets/homecards/connect-dots.png')}
#homeScreen .module-mirror-v1 .module-v1-visual::after{background-image:url('../assets/homecards/mirror-draw.png')}
#homeScreen .module-colorbynumber-v1 .module-v1-visual::after{background-image:url('../assets/homecards/color-by-number.png')}

/* Saved sheets section refresh */
#homeScreen .home-library-v532a{
  position:relative;
  overflow:hidden;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 110% 120%,rgba(67,117,202,.08),transparent 24%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
}
#homeScreen .home-library-v532a .home-card-head{
  align-items:flex-end!important;
  gap:16px!important;
}
#homeScreen .home-library-v532a .text-action{
  min-height:40px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  border:1px solid #d8e4f0!important;
  background:#fff!important;
  color:#2f67c8!important;
  font-weight:900!important;
}
#homeScreen .home-library-v532a .home-recent-grid{
  grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr)!important;
  gap:14px!important;
}
#homeScreen .home-library-v532a .recent-project-card{
  min-height:128px!important;
  padding:18px!important;
  border-radius:22px!important;
  border:1px solid #d9e6f3!important;
  background:linear-gradient(180deg,#ffffff,#fbfdff)!important;
  box-shadow:0 10px 24px rgba(56,87,119,.05)!important;
  display:flex!important;
  flex-direction:column!important;
  gap:13px!important;
}
#homeScreen .home-library-v532a .recent-project-card:hover{
  transform:translateY(-2px)!important;
  border-color:#bfd3e9!important;
  box-shadow:0 16px 34px rgba(56,87,119,.1)!important;
}
#homeScreen .home-library-v532a .library-project-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
#homeScreen .home-library-v532a .library-project-top em{font-style:normal;color:#8ea0b2;font-size:11px;font-weight:800}
#homeScreen .home-library-v532a .library-project-main{
  display:grid!important;
  grid-template-columns:108px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
}
#homeScreen .home-library-v532a .recent-copy{display:flex;flex-direction:column;gap:5px;min-width:0;text-align:left}
#homeScreen .home-library-v532a .recent-copy b{font-size:15px!important;color:#1c3f6d;margin:0!important}
#homeScreen .home-library-v532a .recent-copy small{font-size:11px!important;line-height:1.45;color:#758aa0}
#homeScreen .home-library-v532a .library-open-arrow{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:#eef4ff;color:#4d76ca;font-size:16px;font-weight:900;
}
#homeScreen .home-library-v532a .library-type-badge{
  gap:6px!important;
  padding:6px 10px!important;
  font-size:10px!important;
  font-weight:900!important;
  border-radius:999px!important;
}
#homeScreen .home-library-v532a .library-type-badge i{display:none!important}

.project-thumb-illustrated{
  width:108px!important;
  height:86px!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:18px!important;
  border:1px solid rgba(214,226,239,.95)!important;
  background:#fff!important;
  box-shadow:0 10px 22px rgba(74,100,133,.08)!important;
}
.project-thumb-illustrated img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}

#homeScreen .home-library-v532a .home-library-empty{
  min-height:124px;
  padding:18px 20px;
  border-radius:22px;
  border:1px dashed #c8d8e7;
  background:linear-gradient(180deg,#fcfdff,#f7fbff);
}
#homeScreen .home-library-v532a .new-project-home{
  margin-top:14px!important;
  min-height:72px!important;
  border:1.5px dashed #c5d8ea!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#fbfdff,#f6fbff)!important;
  padding:0 18px!important;
}
#homeScreen .home-library-v532a .new-project-home>span:first-child{
  width:38px!important;height:38px!important;border-radius:50%!important;background:#eef4ff!important;color:#3f76da!important;font-size:21px!important;
}

/* Responsive library cards */
@media(max-width:940px){
  #homeScreen .home-library-v532a .home-recent-grid{grid-template-columns:1fr!important}
}
@media(max-width:640px){
  #homeScreen .home-library-v532a .recent-project-card{min-height:unset!important;padding:15px!important}
  #homeScreen .home-library-v532a .library-project-main{grid-template-columns:92px minmax(0,1fr) auto!important;gap:11px!important}
  .project-thumb-illustrated{width:92px!important;height:74px!important;border-radius:16px!important}
}

/* saved sheets compatibility markers retained for regression checks.
.library-project-card.type-crossword
.library-project-card.type-maze
.library-project-card.type-path
.library-project-card.type-writeword
.library-project-card.type-matchword
.library-project-card.type-choiceword
.project-thumb-path
.project-row-type
border-left:4px solid var(--library-accent)!important
*/

/* =====================================================================
   HOME4 — original user-provided Bulgarian game illustrations (12 tiles)
   Show the complete cropped images; never cut off the text or puzzles.
   ===================================================================== */
@media screen{
  #homeScreen .home-create-board .module-card-v1 .module-v1-visual{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1.30;
    padding:0!important;
    border-radius:17px!important;
    background:#fff!important;
  }
  #homeScreen .home-create-board .module-card-v1 .module-v1-visual > *{
    display:none!important;
  }
  #homeScreen .home-create-board .module-card-v1 .module-v1-visual::after{
    inset:0!important;
    border-radius:15px!important;
    background-size:contain!important;
    background-position:center!important;
    box-shadow:none!important;
  }
  #homeScreen .home-create-board .module-card-v1{
    gap:11px!important;
  }
  /* Saved-sheet thumbnails must not clip important illustration details. */
  .project-thumb-illustrated img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
  }
}
@media screen and (max-width:640px){
  /* Keep the established two-per-row mobile gallery. */
  #homeScreen .home-create-board .module-grid-v1{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  #homeScreen .home-create-board .module-card-v1{
    min-width:0!important;
    min-height:218px!important;
    padding:8px!important;
    gap:7px!important;
    border-radius:16px!important;
  }
  #homeScreen .home-create-board .module-v1-copy b{
    font-size:12.5px!important;
    line-height:1.24!important;
    overflow-wrap:anywhere;
  }
  #homeScreen .home-create-board .module-v1-copy small{display:none!important}
  #homeScreen .home-create-board .module-card-v1 .module-v1-age{
    margin-top:auto!important;
  }
}
@media screen and (max-width:360px){
  #homeScreen .home-create-board .module-card-v1{padding:6px!important}
  #homeScreen .home-create-board .module-v1-copy b{font-size:11.5px!important}
}

/* =======================================================================
   HOME5 — clearer category separation, selected game and variant layout,
   and an even two-column saved-sheets gallery.
   All overrides are scoped to the HOME view; A4 worksheets are untouched.
   ======================================================================= */
@media screen {
  #homeScreen .home-create-board .exercise-category-list {
    gap:44px!important; /* 16px more between the four game categories */
  }
  #homeScreen .home-create-board .exercise-category:not(:first-child){
    padding-top:14px!important;
  }

  /* Selected-game quick settings: TWO tiers, never five items in one row. */
  #homeScreen .quick-start-v1 {
    margin-top:30px!important;
    padding:24px!important;
    border:1px solid #d8e4f2!important;
    border-radius:26px!important;
    background:linear-gradient(130deg,#f3f7ff 0%,#fffdf6 100%)!important;
  }
  #homeScreen .quick-start-shell-v1 {
    display:grid!important;
    grid-template-columns:minmax(240px,300px) minmax(0,1fr)!important;
    grid-template-areas:"selected variants" "actions actions";
    align-items:stretch!important;
    column-gap:22px!important;
    row-gap:18px!important;
  }
  #homeScreen .quick-summary-card {
    grid-area:selected;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    min-width:0!important;
    min-height:0!important;
    padding:13px!important;
    border:1px solid #dce7f5!important;
    border-radius:21px!important;
    background:#fff!important;
  }
  #homeScreen .quick-summary-visual {
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    flex:0 0 auto!important;
    aspect-ratio:1.30;
    padding:0!important;
    border:1px solid #e3eaf4!important;
    border-radius:16px!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  #homeScreen .quick-summary-art {
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    filter:none!important;
  }
  #homeScreen .quick-summary-copy {width:100%;min-width:0;text-align:left}
  #homeScreen .quick-summary-copy h3 {
    margin:0 0 6px!important;
    font-size:19px!important;
    line-height:1.2!important;
  }
  #homeScreen .quick-summary-copy small {
    font-size:12px!important;
    line-height:1.45!important;
    color:#71849b!important;
  }
  #homeScreen .quick-start-center-v1 {
    grid-area:variants;
    min-width:0!important;
    justify-content:center!important;
    gap:12px!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-modes,
  #homeScreen .quick-start-v1 .quick-preset-block {
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-width:0!important;
    min-height:0!important;
    gap:6px!important;
    padding:0!important;
    margin:0!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-modes[hidden],
  #homeScreen .quick-start-v1 .quick-preset-block[hidden],
  #homeScreen .quick-start-v1 .quick-pw-modes[hidden]{display:none!important}
  #homeScreen .quick-start-v1 .quick-maze-grid,
  #homeScreen .quick-start-v1 .quick-preset-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
    width:100%!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-card,
  #homeScreen .quick-start-v1 .quick-preset {
    min-width:0!important;
    min-height:136px!important;
    padding:18px 12px!important;
    border-radius:19px!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-card b,
  #homeScreen .quick-start-v1 .quick-preset b {
    font-size:16px!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-card small,
  #homeScreen .quick-start-v1 .quick-preset small {
    font-size:11px!important;
    max-width:160px;
    text-wrap:pretty;
    line-height:1.4!important;
  }
  #homeScreen .quick-start-actions-v1 {
    grid-area:actions;
    display:flex!important;
    width:100%!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:11px!important;
    padding-top:17px!important;
    border-top:1px solid #e0e9f5!important;
  }
  #homeScreen .quick-start-actions-v1 > button {
    width:auto!important;
    min-width:155px!important;
    min-height:50px!important;
    padding:12px 19px!important;
    border-radius:14px!important;
    font-size:13px!important;
    white-space:nowrap!important;
  }
  #homeScreen .quick-start-actions-v1 .quick-primary-button{min-width:175px!important}

  /* Each saved sheet takes exactly one of two equal desktop columns. */
  #homeScreen .home-library-v532a .home-recent-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
    width:100%!important;
    align-items:stretch!important;
  }
  #homeScreen .home-library-v532a .recent-project-card {
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
}
@media screen and (max-width:1000px){
  #homeScreen .quick-start-shell-v1{
    grid-template-columns:minmax(200px,250px) minmax(0,1fr)!important;
    column-gap:16px!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-card,
  #homeScreen .quick-start-v1 .quick-preset{min-height:116px!important;padding:12px 8px!important}
}
@media screen and (max-width:760px){
  #homeScreen .quick-start-shell-v1{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"selected" "variants" "actions";
    gap:16px!important;
  }
  #homeScreen .quick-summary-card {
    display:grid!important;
    grid-template-columns:minmax(96px,126px) minmax(0,1fr)!important;
    gap:14px!important;
    align-items:center!important;
  }
  #homeScreen .quick-summary-visual{align-self:center}
  #homeScreen .quick-start-v1 .quick-maze-grid,
  #homeScreen .quick-start-v1 .quick-preset-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-card,
  #homeScreen .quick-start-v1 .quick-preset{
    min-height:104px!important;
    padding:12px 6px!important;
    border-radius:14px!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-card b,
  #homeScreen .quick-start-v1 .quick-preset b{font-size:13px!important}
  #homeScreen .quick-start-v1 .quick-maze-card small,
  #homeScreen .quick-start-v1 .quick-preset small{font-size:10px!important}
  #homeScreen .quick-start-actions-v1{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #homeScreen .quick-start-actions-v1 > button{
    min-width:0!important;
    width:100%!important;
    padding:11px 8px!important;
    white-space:normal!important;
  }
  #homeScreen .quick-start-actions-v1 .quick-primary-button{min-width:0!important}
  #homeScreen .home-library-v532a .home-recent-grid{
    grid-template-columns:1fr!important;
  }
}
@media screen and (max-width:390px){
  #homeScreen .quick-start-v1{padding:14px!important}
  #homeScreen .quick-summary-card{grid-template-columns:105px minmax(0,1fr)!important;gap:10px!important}
  #homeScreen .quick-summary-copy h3{font-size:15px!important}
  #homeScreen .quick-summary-copy small{font-size:10px!important}
  #homeScreen .quick-start-v1 .quick-maze-card small,
  #homeScreen .quick-start-v1 .quick-preset small{font-size:9.5px!important}
}

/* =============================================================
   HOME6 — compact quick choices, clean My Sheets library modal.
   Layout changes only; worksheet print and generator logic untouched.
   ============================================================= */
@media screen {
  /* Respect the hidden state of distinct save / library modes.
     `.save-row { display:flex }` previously overrode [hidden]. */
  #projectModal #projectSaveRow[hidden],
  #projectModal #projectSaveActions[hidden],
  #projectModal #projectIoRow[hidden],
  #projectModal #projectList[hidden] { display:none!important; }

  #projectModal[data-mode="library"] .project-dialog{
    width:min(860px,calc(100vw - 36px))!important;
    padding:24px!important;
  }
  #projectModal[data-mode="library"] .project-dialog-head{
    margin-bottom:12px!important;
    padding-bottom:16px!important;
    align-items:flex-start!important;
  }
  #projectModal[data-mode="library"] .project-dialog-head h3{
    margin:4px 0 5px!important;
  }
  #projectModal[data-mode="library"] .project-dialog-head small{
    display:block;
    max-width:530px;
    line-height:1.45;
  }
  #projectModal[data-mode="library"] .project-io-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 14px!important;
    padding:0!important;
    border:0!important;
  }
  #projectModal[data-mode="library"] .project-io-row > button{
    font-size:11px!important;
    min-height:35px!important;
    padding:6px 12px!important;
    border-radius:10px!important;
  }
  #projectModal[data-mode="library"] .project-list{
    display:grid!important;
    gap:12px!important;
    max-height:min(55vh,580px);
    overflow-y:auto;
    padding:2px 4px 4px 2px;
  }
  #projectModal[data-mode="library"] .project-row-rich{
    display:grid!important;
    grid-template-columns:88px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:15px!important;
    row-gap:10px!important;
    align-items:center!important;
    min-width:0!important;
    min-height:0!important;
    padding:14px 15px!important;
    border-radius:18px!important;
    background:#fff!important;
  }
  #projectModal[data-mode="library"] .project-row-rich .project-thumb-illustrated{
    grid-column:1!important;
    grid-row:1 / span 2!important;
    display:block!important;
    width:88px!important;
    height:88px!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border-radius:14px!important;
    align-self:center!important;
    overflow:hidden!important;
  }
  #projectModal[data-mode="library"] .project-row-rich .project-thumb-illustrated img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  #projectModal[data-mode="library"] .project-row-rich .project-copy{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
    width:100%!important;
    padding:0!important;
    align-self:end!important;
    text-align:left!important;
  }
  #projectModal[data-mode="library"] .project-row-rich .project-copy b{
    display:block;
    max-width:100%;
    font-size:15px!important;
    margin:4px 0 2px!important;
    line-height:1.3!important;
  }
  #projectModal[data-mode="library"] .project-row-rich .project-copy small{
    overflow-wrap:anywhere;
    line-height:1.4!important;
    font-size:11px!important;
  }
  #projectModal[data-mode="library"] .project-row-rich .project-copy em{
    font-size:10px!important;
  }
  #projectModal[data-mode="library"] .project-row-rich .project-actions{
    grid-column:2!important;
    grid-row:2!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    min-width:0!important;
    width:100%!important;
    margin:0!important;
    align-items:center!important;
    justify-content:flex-start!important;
    align-self:start!important;
  }
  #projectModal[data-mode="library"] .project-row-rich .project-actions button{
    width:auto!important;
    min-height:32px!important;
    padding:5px 11px!important;
    font-size:11px!important;
    border-radius:10px!important;
    white-space:nowrap;
  }
  #projectModal[data-mode="library"] .project-row-rich .project-actions [data-load]{
    border-color:#cfe0ff!important;
    color:#1c58bc!important;
    background:#edf4ff!important;
  }

  /* Lighter two-column quick selection: short selected-game summary
     on the left; difficulty and actions share the right column. */
  #homeScreen .quick-start-v1{
    padding:17px 19px!important;
    margin-top:25px!important;
    border-radius:22px!important;
  }
  #homeScreen .quick-start-shell-v1{
    display:grid!important;
    grid-template-columns:minmax(215px,295px) minmax(0,1fr)!important;
    grid-template-areas:"selected variants" "selected actions"!important;
    column-gap:20px!important;
    row-gap:9px!important;
    align-items:start!important;
  }
  #homeScreen .quick-summary-card{
    grid-area:selected;
    display:grid!important;
    grid-template-columns:88px minmax(0,1fr)!important;
    align-items:center!important;
    justify-items:stretch!important;
    gap:11px!important;
    padding:10px!important;
    align-self:start!important;
    border-radius:16px!important;
  }
  #homeScreen .quick-summary-visual{
    grid-column:1;
    width:88px!important;
    height:76px!important;
    aspect-ratio:auto!important;
    flex:none!important;
    border-radius:12px!important;
  }
  #homeScreen .quick-summary-art{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  #homeScreen .quick-summary-copy{
    grid-column:2;
    min-width:0!important;
  }
  #homeScreen .quick-summary-copy h3{
    font-size:15px!important;
    line-height:1.2!important;
    margin:0 0 5px!important;
    overflow-wrap:anywhere;
  }
  #homeScreen .quick-summary-copy small{
    font-size:10.5px!important;
    line-height:1.45!important;
    overflow-wrap:anywhere;
  }
  #homeScreen .quick-start-center-v1{
    grid-area:variants;
    align-self:start!important;
    justify-content:flex-start!important;
    gap:7px!important;
    min-width:0!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-modes,
  #homeScreen .quick-start-v1 .quick-preset-block{
    justify-content:flex-start!important;
    gap:6px!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-grid,
  #homeScreen .quick-start-v1 .quick-preset-grid{
    gap:9px!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-card,
  #homeScreen .quick-start-v1 .quick-preset{
    min-height:83px!important;
    padding:10px 8px!important;
    border-radius:13px!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-card b,
  #homeScreen .quick-start-v1 .quick-preset b{
    font-size:13px!important;
    line-height:1.2!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-card small,
  #homeScreen .quick-start-v1 .quick-preset small{
    font-size:10px!important;
    line-height:1.35!important;
    max-width:170px;
  }
  #homeScreen .quick-start-actions-v1{
    grid-area:actions;
    display:flex!important;
    justify-content:flex-end!important;
    align-self:start!important;
    align-items:center!important;
    width:100%!important;
    gap:9px!important;
    padding:2px 0 0!important;
    border-top:0!important;
  }
  #homeScreen .quick-start-actions-v1 > button{
    width:auto!important;
    min-width:120px!important;
    min-height:41px!important;
    padding:9px 14px!important;
    border-radius:11px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
  #homeScreen .quick-start-actions-v1 .quick-primary-button{
    min-width:140px!important;
  }
  #homeScreen .quick-start-actions-v1 .quick-primary-button span{
    font-size:14px!important;
  }
}
@media screen and (max-width:760px){
  #homeScreen .quick-start-v1{padding:14px!important}
  #homeScreen .quick-start-shell-v1{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"selected" "variants" "actions"!important;
    gap:11px!important;
  }
  #homeScreen .quick-summary-card{
    grid-template-columns:80px minmax(0,1fr)!important;
    gap:11px!important;
    min-height:0!important;
  }
  #homeScreen .quick-summary-visual{width:80px!important;height:68px!important}
  #homeScreen .quick-start-actions-v1{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    justify-content:stretch!important;
  }
  #homeScreen .quick-start-actions-v1 > button,
  #homeScreen .quick-start-actions-v1 .quick-primary-button{
    width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    padding:9px 6px!important;
  }
  #projectModal[data-mode="library"] .project-dialog{
    width:calc(100vw - 20px)!important;
    padding:18px 14px!important;
    max-height:calc(100dvh - 20px)!important;
  }
  #projectModal[data-mode="library"] .project-row-rich{
    grid-template-columns:70px minmax(0,1fr)!important;
    column-gap:11px!important;
    padding:12px!important;
  }
  #projectModal[data-mode="library"] .project-row-rich .project-thumb-illustrated{
    width:70px!important;
    height:70px!important;
  }
}
@media screen and (max-width:440px){
  #homeScreen .quick-start-v1 .quick-maze-grid,
  #homeScreen .quick-start-v1 .quick-preset-grid{gap:6px!important}
  #homeScreen .quick-start-v1 .quick-maze-card,
  #homeScreen .quick-start-v1 .quick-preset{
    min-height:78px!important;
    padding:7px 3px!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-card b,
  #homeScreen .quick-start-v1 .quick-preset b{font-size:12px!important}
  #homeScreen .quick-start-v1 .quick-maze-card small,
  #homeScreen .quick-start-v1 .quick-preset small{font-size:9px!important}
  #projectModal[data-mode="library"] .project-row-rich .project-actions{
    grid-column:1 / -1!important;
    grid-row:3!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #projectModal[data-mode="library"] .project-row-rich .project-actions button{
    width:100%!important;
    min-width:0!important;
  }
  #projectModal[data-mode="library"] .project-row-rich .project-thumb-illustrated{
    grid-row:1!important;
  }
}

/* =====================================================================
   HOME7 — full-height selected artwork + balanced quick difficulty chooser.
   CSS-only, scoped to screen/home. Keep the quick panel's overall height.
   ===================================================================== */
@media screen and (min-width:861px){
  #homeScreen .quick-start-v1{
    padding:17px 19px!important;
    min-height:212px!important;
  }
  #homeScreen .quick-start-shell-v1{
    display:grid!important;
    grid-template-columns:minmax(320px,410px) minmax(0,1fr)!important;
    grid-template-areas:"selected variants" "selected actions"!important;
    grid-template-rows:116px 48px!important;
    column-gap:19px!important;
    row-gap:12px!important;
    align-items:stretch!important;
    min-height:176px!important;
  }
  #homeScreen .quick-summary-card{
    grid-area:selected!important;
    display:grid!important;
    grid-template-columns:minmax(0,54%) minmax(0,1fr)!important;
    align-items:stretch!important;
    align-self:stretch!important;
    height:100%!important;
    min-height:0!important;
    padding:8px!important;
    gap:12px!important;
    border-radius:17px!important;
  }
  #homeScreen .quick-summary-visual{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    align-self:stretch!important;
    border-radius:12px!important;
    padding:0!important;
  }
  #homeScreen .quick-summary-art{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  #homeScreen .quick-summary-copy{
    min-width:0!important;
    align-self:center!important;
    text-align:left!important;
  }
  #homeScreen .quick-summary-copy h3{
    font-size:15px!important;
    line-height:1.25!important;
  }
  #homeScreen .quick-summary-copy small{
    font-size:10.5px!important;
    line-height:1.45!important;
  }
  #homeScreen .quick-start-center-v1{
    grid-area:variants!important;
    align-self:center!important;
    justify-content:center!important;
    min-width:0!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-grid,
  #homeScreen .quick-start-v1 .quick-preset-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-card,
  #homeScreen .quick-start-v1 .quick-preset{
    min-height:64px!important;
    height:64px!important;
    padding:7px 8px!important;
    border-radius:12px!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-card b,
  #homeScreen .quick-start-v1 .quick-preset b{
    font-size:12.5px!important;
    line-height:1.2!important;
  }
  #homeScreen .quick-start-v1 .quick-maze-card small,
  #homeScreen .quick-start-v1 .quick-preset small{
    font-size:9.5px!important;
    line-height:1.25!important;
    max-width:none!important;
  }
  #homeScreen .quick-start-actions-v1{
    grid-area:actions!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    justify-content:stretch!important;
    align-items:stretch!important;
    align-self:stretch!important;
    width:100%!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
  }
  #homeScreen .quick-start-actions-v1 > button,
  #homeScreen .quick-start-actions-v1 .quick-primary-button{
    box-sizing:border-box!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:7px!important;
    min-width:0!important;
    width:100%!important;
    min-height:44px!important;
    height:44px!important;
    padding:8px 12px!important;
    border-radius:11px!important;
    font-size:12px!important;
    white-space:normal!important;
  }
}
@media screen and (min-width:861px) and (max-width:1100px){
  #homeScreen .quick-start-shell-v1{grid-template-columns:minmax(290px,330px) minmax(0,1fr)!important;column-gap:14px!important}
  #homeScreen .quick-summary-card{grid-template-columns:minmax(0,52%) minmax(0,1fr)!important;gap:9px!important}
}
@media screen and (max-width:860px){
  #homeScreen .quick-start-v1{padding:14px!important}
  #homeScreen .quick-start-shell-v1{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"selected" "variants" "actions"!important;
    grid-template-rows:auto auto auto!important;
    gap:12px!important;
    min-height:0!important;
  }
  #homeScreen .quick-summary-card{
    grid-area:selected!important;
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:stretch!important;
    padding:8px!important;
    min-height:105px!important;
  }
  #homeScreen .quick-summary-visual{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    align-self:stretch!important;
  }
  #homeScreen .quick-summary-art{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  #homeScreen .quick-summary-copy{align-self:center!important}
  #homeScreen .quick-start-center-v1{grid-area:variants!important}
  #homeScreen .quick-start-v1 .quick-maze-card,
  #homeScreen .quick-start-v1 .quick-preset{
    min-height:67px!important;
    height:auto!important;
    padding:8px 6px!important;
  }
  #homeScreen .quick-start-actions-v1{
    grid-area:actions!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    justify-content:stretch!important;
    padding:0!important;
    border:0!important;
    width:100%!important;
  }
  #homeScreen .quick-start-actions-v1 > button,
  #homeScreen .quick-start-actions-v1 .quick-primary-button{
    min-width:0!important;
    width:100%!important;
    min-height:43px!important;
    padding:9px 7px!important;
    white-space:normal!important;
  }
}
@media screen and (max-width:390px){
  #homeScreen .quick-summary-card{grid-template-columns:92px minmax(0,1fr)!important;gap:9px!important}
  #homeScreen .quick-start-v1 .quick-maze-card,
  #homeScreen .quick-start-v1 .quick-preset{min-height:68px!important;padding:7px 4px!important}
}

/* =====================================================================
   HOME8 / Zadachki: restrained editorial navigation and unified audiences
   Only home header and the four-value strip, no print or exercise changes.
   ===================================================================== */
@media screen {
  /* Keep the existing brand and centered-logo mobile arrangement. */
  body.mode-home .product-header{
    min-height:82px!important;
    padding:12px 28px!important;
    border:1px solid #dfebf5!important;
    border-radius:23px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 10px 32px rgba(31,65,110,.045)!important;
    backdrop-filter:none!important;
    gap:24px!important;
  }
  body.mode-home .top-nav{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:12px!important;
    margin-left:auto!important;
    width:auto!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.mode-home .top-nav button,
  body.mode-home #navHome{
    position:relative!important;
    flex:0 0 auto!important;
    min-height:50px!important;
    padding:0 12px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#62788f!important;
    box-shadow:none!important;
    font-size:13px!important;
    font-weight:800!important;
    letter-spacing:0!important;
    transform:none!important;
    transition:color .18s ease!important;
  }
  body.mode-home #navHome{color:#113968!important}
  body.mode-home .top-nav button::after{
    content:"";
    position:absolute;
    bottom:5px;
    left:12px;
    right:12px;
    height:3px;
    background:#ffc928;
    border-radius:6px;
    opacity:0;
    transform:scaleX(.35);
    transform-origin:center;
    transition:opacity .18s ease,transform .18s ease;
  }
  body.mode-home .top-nav #navHome::after,
  body.mode-home .top-nav button:hover::after,
  body.mode-home .top-nav button:focus-visible::after{
    opacity:1;
    transform:scaleX(1);
  }
  body.mode-home .top-nav button:hover,
  body.mode-home .top-nav button:focus-visible{
    color:#0d5db8!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
  }
  body.mode-home .top-nav button:focus-visible{
    outline:2px solid #7baaff!important;
    outline-offset:0!important;
    border-radius:5px!important;
  }

  /* One clean values bar instead of four labelled promo cards. */
  #homeScreen .audience-strip{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:0!important;
    padding:5px 10px!important;
    overflow:hidden!important;
    border:1px solid #e0eaf4!important;
    border-radius:22px!important;
    background:#fff!important;
    box-shadow:0 12px 34px rgba(32,66,106,.045)!important;
  }
  #homeScreen .audience-strip > div{
    position:relative!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:13px!important;
    min-height:94px!important;
    min-width:0!important;
    padding:14px 15px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    transform:none!important;
  }
  #homeScreen .audience-strip > div:not(:last-child){
    border-right:1px solid #e9eff6!important;
  }
  #homeScreen .audience-strip > div::before,
  #homeScreen .audience-strip > div::after{
    content:none!important;
    display:none!important;
  }
  #homeScreen .audience-strip > div > .audience-icon{
    display:grid!important;
    place-items:center!important;
    flex:0 0 47px!important;
    width:47px!important;
    height:47px!important;
    min-width:47px!important;
    border:1px solid transparent!important;
    border-radius:15px!important;
    box-shadow:none!important;
    transform:none!important;
  }
  #homeScreen .audience-strip > div:nth-child(1) > .audience-icon{
    background:#edf4ff!important;color:#3d73ba!important;border-color:#e2ecfa!important;
  }
  #homeScreen .audience-strip > div:nth-child(2) > .audience-icon{
    background:#fff5df!important;color:#b47b17!important;border-color:#faebc9!important;
  }
  #homeScreen .audience-strip > div:nth-child(3) > .audience-icon{
    background:#eaf8f2!important;color:#358e70!important;border-color:#d9efe5!important;
  }
  #homeScreen .audience-strip > div:nth-child(4) > .audience-icon{
    background:#fff0e9!important;color:#bd7244!important;border-color:#f8e4d6!important;
  }
  #homeScreen .audience-strip .audience-icon svg{
    display:block;
    width:23px;
    height:23px;
  }
  #homeScreen .audience-strip > div > span:last-child{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    min-width:0!important;
    flex:1 1 auto!important;
  }
  #homeScreen .audience-strip b{
    display:block!important;
    margin:0 0 4px!important;
    font-size:13.5px!important;
    line-height:1.25!important;
    font-weight:850!important;
    letter-spacing:-.2px!important;
    color:#1e426a!important;
  }
  #homeScreen .audience-strip small{
    display:block!important;
    margin:0!important;
    max-width:none!important;
    font-size:11px!important;
    line-height:1.42!important;
    font-weight:550!important;
    color:#7d91a6!important;
  }
}
@media screen and (max-width:1030px){
  #homeScreen .audience-strip{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    padding:7px 10px!important;
  }
  #homeScreen .audience-strip > div{
    min-height:88px!important;
    padding:12px 16px!important;
  }
  #homeScreen .audience-strip > div:nth-child(2){border-right:0!important}
  #homeScreen .audience-strip > div:nth-child(-n+2){border-bottom:1px solid #e9eff6!important}
}
@media screen and (max-width:760px){
  body.mode-home .product-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    justify-items:center!important;
    min-height:0!important;
    gap:3px!important;
    padding:12px 12px 10px!important;
  }
  body.mode-home .product-header .brand-lockup{
    width:100%!important;
    justify-content:center!important;
  }
  body.mode-home .top-nav{
    display:flex!important;
    width:100%!important;
    justify-content:center!important;
    margin:0!important;
    gap:clamp(2px,2vw,16px)!important;
    flex-wrap:nowrap!important;
  }
  body.mode-home .top-nav button,
  body.mode-home #navHome{
    flex:0 1 auto!important;
    min-width:0!important;
    padding:0 clamp(5px,2.5vw,12px)!important;
    min-height:43px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
}
@media screen and (max-width:560px){
  #homeScreen .audience-strip{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    padding:4px 7px!important;
    border-radius:19px!important;
  }
  #homeScreen .audience-strip > div{
    align-items:center!important;
    gap:8px!important;
    min-height:92px!important;
    padding:10px 7px!important;
  }
  #homeScreen .audience-strip > div > .audience-icon{
    flex:0 0 36px!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    border-radius:11px!important;
  }
  #homeScreen .audience-strip .audience-icon svg{width:19px;height:19px}
  #homeScreen .audience-strip b{font-size:11.5px!important;line-height:1.2!important}
  #homeScreen .audience-strip small{font-size:10px!important;line-height:1.3!important}
}
@media screen and (max-width:360px){
  body.mode-home .top-nav button,
  body.mode-home #navHome{
    font-size:11px!important;
    padding:0 6px!important;
  }
  #homeScreen .audience-strip{grid-template-columns:1fr!important;padding:3px 12px!important}
  #homeScreen .audience-strip > div{
    min-height:62px!important;
    padding:9px 4px!important;
    border-right:0!important;
    border-bottom:1px solid #e9eff6!important;
  }
  #homeScreen .audience-strip > div:last-child{border-bottom:0!important}
}
@media (prefers-reduced-motion:reduce){
  body.mode-home .top-nav button::after{transition:none!important}
}


/* =====================================================================
   HOME9 — persistent full site header (screen only).
   The measured header height is shared with anchor scrolling and the result
   toolbar so sticky surfaces never cover the destination or each other.
   ===================================================================== */
@media screen {
  .product-header {
    position:sticky!important;
    top:8px!important;
    z-index:80!important;
    isolation:isolate;
    background:rgba(255,255,255,.98)!important;
  }
  #homeExercisesSection,
  #homeSavedSection {
    scroll-margin-top:calc(var(--zadachki-header-height, 100px) + 24px)!important;
  }
  body.mode-result .pro-commandbar {
    top:calc(var(--zadachki-header-height, 100px) + 18px)!important;
  }
}
@media screen and (max-width:760px) {
  .product-header {top:0!important}
  #homeExercisesSection,
  #homeSavedSection {
    scroll-margin-top:calc(var(--zadachki-header-height, 132px) + 14px)!important;
  }
  body.mode-result .pro-commandbar {
    top:calc(var(--zadachki-header-height, 132px) + 8px)!important;
  }
}
/* Older mobile rules use overflow-x:hidden on html/body. That silently makes
   the body a vertical scroll container and breaks sticky positioning. 'clip'
   prevents sideways overflow without creating a new scroll container. */
@media screen and (max-width:760px) {
  html, body {overflow-x:clip!important}
}


/* =============================================================
   HOME10 — active nav scroll-spy and improved worksheet chooser
   ============================================================= */
@media screen {
  /* Only the current section has the underline. The old Home selector is
     intentionally neutralised once scroll-spy removes aria-current. */
  body.mode-home .top-nav #navHome:not([aria-current="location"])::after{
    opacity:0!important;transform:scaleX(.35)!important;
  }
  body.mode-home .top-nav #navHome:not([aria-current="location"]){
    color:#62788f!important;
  }
  body.mode-home .top-nav button[aria-current="location"]{
    color:#113968!important;
  }
  body.mode-home .top-nav button[aria-current="location"]::after{
    opacity:1!important;transform:scaleX(1)!important;
  }
  /* A taller and wider picker on desktop, while allowing short displays
     to scroll rather than clipping the final row. */
  .exercise-chooser-dialog{
    width:min(990px,100%)!important;
    max-height:calc(100dvh - 26px)!important;
    padding:23px 26px!important;
  }
  .exercise-chooser-header{margin-bottom:13px!important}
  .exercise-chooser-header h3{font-size:25px!important}
  .exercise-chooser-list{gap:12px!important}
  .exercise-chooser-group h4{margin:0 0 6px!important;font-size:11px!important}
  .exercise-chooser-grid{gap:7px 10px!important}
  .exercise-chooser-option{min-height:60px!important;padding:5px 9px!important;gap:11px!important}
  .exercise-chooser-icon{
    width:56px!important;height:52px!important;flex:0 0 56px!important;
    border-radius:11px!important;border:1px solid #e5edf7!important;
    background:#fff!important;
  }
  .exercise-chooser-icon img{
    display:block!important;width:100%!important;height:100%!important;
    object-fit:contain!important;position:static!important;filter:none!important;
  }
}
@media screen and (max-width:620px){
  .exercise-chooser-dialog{width:100%!important;padding:16px 13px!important;max-height:calc(100dvh - 18px)!important}
  .exercise-chooser-icon{width:52px!important;height:50px!important;flex-basis:52px!important}
  .exercise-chooser-option{min-height:60px!important}
}

/* ================================================================
   CONFIG1 — unified "Настрой сам" appearance (screen only).
   All selectors are scoped to mode-config: result drawers/print untouched.
   ================================================================ */
@media screen {
  /* Hidden game sections must stay hidden even when their own CSS uses grid. */
  body.mode-config #configPanel [hidden] {display:none!important;}
  body.mode-config #configPanel {
    border:1px solid #dce8f4!important;
    background:#fff!important;
    border-radius:28px!important;
    box-shadow:0 24px 58px rgba(28,61,100,.065)!important;
  }
  body.mode-config #configPanel .setup-head-v532{
    padding:22px 30px!important;
    border-bottom:1px solid #e5edf5!important;
    background:linear-gradient(108deg,#fff 0%,#fff 68%,#f8fbff 100%)!important;
    align-items:center!important;
    gap:18px!important;
  }
  body.mode-config #configPanel .setup-game-identity{
    min-width:0;display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:19px;
  }
  body.mode-config #configPanel .setup-game-cover{
    display:block;width:92px;height:92px;object-fit:cover;border-radius:21px;
    background:#f6faff;border:1px solid #dce9f5;
    box-shadow:0 8px 18px rgba(46,80,123,.065);
  }
  body.mode-config #configPanel .setup-game-identity-copy{min-width:0}
  body.mode-config #configPanel .setup-game-eyebrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
  body.mode-config #configPanel .setup-head-v532 .config-kicker{
    display:inline-block!important;margin:0!important;color:#426ba8!important;font-size:10px!important;
  }
  body.mode-config #configPanel .setup-game-age{
    color:#5c7190;background:#f1f6fd;border:1px solid #e0eaf5;
    border-radius:999px;padding:4px 9px;font-size:10px;font-weight:800;
  }
  body.mode-config #configPanel .setup-head-v532 h2{
    font-size:29px!important;line-height:1.08!important;letter-spacing:-.9px!important;color:#11396c!important;
  }
  body.mode-config #configPanel .setup-head-v532 p{
    font-size:12px!important;line-height:1.48!important;color:#71869d!important;margin-top:7px!important;
  }
  body.mode-config #configPanel .config-actions-top button{
    border-radius:12px!important;min-height:41px!important;background:#fff!important;
    border-color:#d9e6f3!important;color:#37618d!important;font-weight:800!important;
  }
  body.mode-config #configPanel .setup-flow-v532{
    padding:22px 30px 100px!important;
    background:linear-gradient(180deg,#f9fbfe,#f5f8fd)!important;
  }
  body.mode-config #configPanel .setup-basics-section,
  body.mode-config #configPanel .setup-selection-v532{
    width:100%;max-width:1180px!important;padding:23px 25px!important;margin:0 auto 16px!important;
    border-radius:22px!important;background:#fff!important;
    border:1px solid #e0eaf4!important;
    box-shadow:0 7px 20px rgba(30,68,113,.035)!important;
  }
  body.mode-config #configPanel .setup-basics-section>.setup-section-head{
    flex-direction:row!important;align-items:end!important;justify-content:space-between!important;
    gap:14px!important;margin:0 0 20px!important;
  }
  body.mode-config #configPanel .setup-basics-section>.setup-section-head h3{
    font-size:21px!important;color:#133d70!important;letter-spacing:-.6px!important;
  }
  body.mode-config #configPanel .setup-basics-section>.setup-section-head>small{
    max-width:370px;font-size:11px!important;line-height:1.5;color:#8296ab!important;text-align:right;
  }
  /* Word-games: title on top, then two equally readable settings columns. */
  body.mode-config #configPanel .config-basics-main{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:15px 18px!important;margin:0!important;
  }
  body.mode-config #configPanel .config-basics-main .title-box{
    grid-column:1 / -1!important;
  }
  body.mode-config #configPanel .config-basics-main .basic-box{
    padding:0!important;margin:0!important;background:transparent!important;
  }
  body.mode-config #configPanel .config-basics-main .basic-box label{
    margin-bottom:7px!important;font-size:10px!important;color:#58708e!important;
  }
  body.mode-config #configPanel .config-basics-main .basic-box select,
  body.mode-config #configPanel .config-basics-main .basic-box input[type="text"]{
    height:45px!important;min-height:45px!important;
    border:1px solid #d8e5f2!important;border-radius:12px!important;
    background:#fafdff!important;color:#244369!important;
    box-shadow:0 1px 2px rgba(35,72,120,.02)!important;
  }
  body.mode-config #configPanel .field-helper{
    display:block;line-height:1.5!important;color:#8395a9!important;font-size:10px!important;
    margin-top:6px!important;
  }
  body.mode-config #configPanel .setup-choice-actions{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    margin-top:19px!important;padding-top:18px!important;
    border-top:1px solid #edf1f6!important;
  }
  body.mode-config #configPanel .setup-choice-actions button{
    min-height:44px!important;border-radius:12px!important;
  }
  body.mode-config #configPanel .setup-choice-actions #autoPick{
    background:#f0f6ff!important;color:#145ac7!important;
    border:1px solid #bfd6ff!important;box-shadow:none!important;
  }
  body.mode-config #configPanel .setup-choice-actions #autoPick:hover{
    background:#e5f0ff!important;
  }
  body.mode-config #configPanel .setup-choice-actions #manualPickerToggle{
    background:#fff!important;border:1px solid #d4e3f2!important;
  }
  body.mode-config #configPanel .setup-selection-v532 .selection-head{
    margin-bottom:13px!important;
  }
  body.mode-config #configPanel .setup-selection-v532 .selection-head>div:first-child b{
    font-size:18px!important;
  }
  body.mode-config #configPanel .setup-selection-v532 .selected-words{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
  body.mode-config #configPanel .selected-chip{
    min-height:66px!important;border-color:#e1ebf5!important;
    background:#fbfdff!important;
  }
  /* One visual surface for specialized games rather than panel-in-panel. */
  body.mode-config #configPanel #mazeConfigSection:not([hidden]),
  body.mode-config #configPanel #choosePathConfigSection:not([hidden]),
  body.mode-config #configPanel #connectDotsConfigSection:not([hidden]),
  body.mode-config #configPanel #mirrorDrawConfigSection:not([hidden]),
  body.mode-config #configPanel #colorByNumberConfigSection:not([hidden]){
    border:0!important;box-shadow:none!important;background:transparent!important;
    margin:16px 0 0!important;padding:17px 0 0!important;
    border-top:1px solid #edf1f6!important;border-radius:0!important;
  }
  body.mode-config #configPanel .maze-difficulty-card{
    border-radius:13px!important;min-height:72px!important;
  }
  body.mode-config #configPanel .maze-difficulty-card.is-selected{
    border-color:#4d85df!important;box-shadow:0 0 0 2px rgba(75,125,222,.10)!important;
  }
  body.mode-config #configPanel .connect-dots-option-block,
  body.mode-config #configPanel .mirror-draw-option-block{
    border-radius:16px!important;
  }
  body.mode-config #configPanel .config-footer{
    border-top:1px solid #e5edf5!important;background:rgba(255,255,255,.97)!important;
    padding:13px 30px!important;
    backdrop-filter:blur(12px);
  }
  body.mode-config #configPanel .config-footer-actions{
    display:flex!important;justify-content:flex-end!important;max-width:1180px!important;
  }
  body.mode-config #configPanel .config-footer-actions #gen{
    width:min(100%,340px)!important;flex:0 0 auto!important;
    background:#1458bb!important;border-color:#1458bb!important;
    border-radius:12px!important;min-height:48px!important;
    box-shadow:0 8px 22px rgba(27,91,190,.12)!important;
  }
}
@media screen and (max-width:800px){
  body.mode-config #configPanel .setup-head-v532{padding:19px 19px!important}
  body.mode-config #configPanel .setup-flow-v532{padding:16px 18px 100px!important}
  body.mode-config #configPanel .setup-basics-section,
  body.mode-config #configPanel .setup-selection-v532{padding:19px!important;border-radius:19px!important}
  body.mode-config #configPanel .setup-game-identity{grid-template-columns:74px minmax(0,1fr);gap:13px}
  body.mode-config #configPanel .setup-game-cover{width:74px;height:74px;border-radius:16px}
  body.mode-config #configPanel .setup-head-v532 h2{font-size:24px!important}
  body.mode-config #configPanel .setup-selection-v532 .selected-words{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media screen and (max-width:580px){
  body.mode-config #configPanel .setup-head-v532{padding:15px 14px!important;gap:8px!important}
  body.mode-config #configPanel .setup-game-identity{grid-template-columns:62px minmax(0,1fr);gap:11px}
  body.mode-config #configPanel .setup-game-cover{width:62px;height:62px;border-radius:14px}
  body.mode-config #configPanel .setup-head-v532 h2{font-size:20px!important;line-height:1.15!important}
  body.mode-config #configPanel .setup-head-v532 p{font-size:11px!important}
  body.mode-config #configPanel .setup-game-eyebrow{gap:6px}
  body.mode-config #configPanel .setup-head-v532 .config-kicker{font-size:8.5px!important}
  body.mode-config #configPanel .setup-game-age{font-size:9px;padding:3px 7px}
  body.mode-config #configPanel .config-actions-top button{font-size:10px!important;padding:0 9px!important;min-height:36px!important}
  body.mode-config #configPanel .setup-flow-v532{padding:13px 11px 90px!important}
  body.mode-config #configPanel .setup-basics-section,
  body.mode-config #configPanel .setup-selection-v532{padding:16px!important;border-radius:18px!important}
  body.mode-config #configPanel .setup-basics-section>.setup-section-head{
    flex-direction:column!important;align-items:flex-start!important;gap:5px!important;
  }
  body.mode-config #configPanel .setup-basics-section>.setup-section-head>small{text-align:left;font-size:10px!important}
  body.mode-config #configPanel .setup-basics-section>.setup-section-head h3{font-size:19px!important}
  body.mode-config #configPanel .config-basics-main{grid-template-columns:1fr!important;gap:12px!important}
  body.mode-config #configPanel .config-basics-main .title-box{grid-column:auto!important}
  body.mode-config #configPanel .setup-choice-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body.mode-config #configPanel .setup-choice-actions button{font-size:11px!important;padding:4px 7px!important}
  body.mode-config #configPanel .setup-selection-v532 .selected-words{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.mode-config #configPanel .config-footer{padding:11px 13px calc(11px + env(safe-area-inset-bottom))!important}
  body.mode-config #configPanel .config-footer-actions #gen{width:100%!important}
}
@media screen and (max-width:355px){
  body.mode-config #configPanel .setup-game-identity{grid-template-columns:52px minmax(0,1fr);gap:8px}
  body.mode-config #configPanel .setup-game-cover{width:52px;height:52px}
  body.mode-config #configPanel .setup-head-v532 h2{font-size:18px!important}
}

/* CONFIG1 mobile refinement — full-width game identity and two-column settings. */
@media screen and (max-width:580px){
  body.mode-config #configPanel .setup-head-v532{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
  }
  body.mode-config #configPanel .setup-game-identity{width:100%;min-width:0}
  body.mode-config #configPanel .config-actions-top{
    grid-column:1!important;display:flex!important;align-items:center!important;
    justify-content:flex-end!important;width:100%;
  }
  body.mode-config #configPanel .config-head .drawer-only{display:none!important}
  body.mode-config #configPanel .setup-game-eyebrow{margin-bottom:4px!important}
  body.mode-config #configPanel .setup-head-v532 p{max-width:100%!important}
  body.mode-config #configPanel .config-basics-main{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px 10px!important;
  }
  body.mode-config #configPanel .config-basics-main .title-box{
    grid-column:1 / -1!important;
  }
  body.mode-config:not([data-exercise-type="choose-word"]):not([data-exercise-type="missing-letters"]) #configPanel .config-basics-main>.basic-box:nth-child(4){
    grid-column:1 / -1!important;
  }
  body.mode-config #configPanel .config-basics-main .basic-box select,
  body.mode-config #configPanel .config-basics-main .basic-box input[type="text"]{
    min-width:0!important;width:100%!important;padding:0 8px!important;
    font-size:12px!important;
  }
  body.mode-config #configPanel .config-basics-main .basic-box label{
    font-size:9px!important;letter-spacing:0!important;
  }
  body.mode-config #configPanel .config-basics-main .field-helper{font-size:9px!important}
}
@media screen and (max-width:355px){
  body.mode-config #configPanel .config-basics-main{
    grid-template-columns:1fr!important;
  }
  body.mode-config #configPanel .config-basics-main .title-box{grid-column:auto!important}
  body.mode-config #configPanel .config-basics-main>.basic-box:nth-child(4){grid-column:auto!important}
}
@media screen {
  body.mode-config #configPanel .config-basics-main > .basic-box.title-box:nth-child(1){
    grid-column:1 / -1!important;
  }
}
@media screen and (max-width:355px){
  body.mode-config #configPanel .config-basics-main > .basic-box.title-box:nth-child(1){grid-column:auto!important}
}
/* No word-only actions or selection cards in geometric/creative games. */
@media screen {
  body.mode-config:is([data-exercise-type="maze"],[data-exercise-type="choose-path"],[data-exercise-type="connect-dots"],[data-exercise-type="mirror-draw"],[data-exercise-type="color-by-number"]) #configPanel .word-config-only {
    display:none!important;
  }
}

/* ==============================================================
   CONFIG2 — consistent site navigation + wider, calmer config layout
   Screen-only overrides keep print/result drawers untouched.
   ============================================================== */
@media screen {
  /* The HOME8 editorial header also belongs on the config and result pages. */
  body:not(.mode-home) .product-header{
    min-height:82px!important;
    padding:12px 28px!important;
    border:1px solid #dfebf5!important;
    border-radius:23px!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 10px 32px rgba(31,65,110,.045)!important;
    backdrop-filter:none!important;
    gap:24px!important;
  }
  body:not(.mode-home) .top-nav{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:12px!important;
    margin-left:auto!important;
    width:auto!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body:not(.mode-home) .top-nav button{
    position:relative!important;
    flex:0 0 auto!important;
    min-height:50px!important;
    padding:0 12px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#62788f!important;
    box-shadow:none!important;
    font-size:13px!important;
    font-weight:800!important;
    letter-spacing:0!important;
    transform:none!important;
    transition:color .18s ease!important;
  }
  body:not(.mode-home) .top-nav button::after{
    content:"";position:absolute;bottom:5px;left:12px;right:12px;
    height:3px;background:#ffc928;border-radius:6px;
    opacity:0;transform:scaleX(.35);transform-origin:center;
    transition:opacity .18s ease,transform .18s ease;
  }
  body:not(.mode-home) .top-nav button:hover,
  body:not(.mode-home) .top-nav button:focus-visible{
    color:#0d5db8!important;background:transparent!important;
    border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;
  }
  body:not(.mode-home) .top-nav button:hover::after,
  body:not(.mode-home) .top-nav button:focus-visible::after,
  body:not(.mode-home) .top-nav #navExercises::after{
    opacity:1!important;transform:scaleX(1)!important;
  }
  body:not(.mode-home) .top-nav #navExercises{color:#113968!important;}
  body:not(.mode-home) .top-nav button:focus-visible{
    outline:2px solid #7baaff!important;outline-offset:0!important;border-radius:5px!important;
  }
  /* With the extra Back control gone, the game identity fills the header. */
  body.mode-config #configPanel .config-actions-top{display:none!important;}
  body.mode-config #configPanel .setup-game-identity{width:100%;}
  /* Wider cards align with the game's identity/header content. */
  body.mode-config #configPanel .setup-basics-section,
  body.mode-config #configPanel .setup-selection-v532{
    max-width:none!important;
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  /* Title across top, all relevant standard controls on the next line. */
  body.mode-config #configPanel .config-basics-main{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:15px 18px!important;
  }
  body.mode-config #configPanel .config-basics-main .title-box{
    grid-column:1/-1!important;
  }
  /* Two language games have one additional setting: keep all four together. */
  body.mode-config[data-exercise-type="choose-word"] #configPanel .config-basics-main,
  body.mode-config[data-exercise-type="missing-letters"] #configPanel .config-basics-main{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  /* Fill the footer's usable content width with one clear primary action. */
  body.mode-config #configPanel .config-footer-actions{
    width:100%!important;max-width:none!important;
    display:flex!important;justify-content:center!important;
  }
  body.mode-config #configPanel .config-footer-actions #gen{
    width:100%!important;max-width:none!important;
    flex:1 1 100%!important;
  }
}
@media screen and (max-width:960px){
  body.mode-config #configPanel .config-basics-main,
  body.mode-config[data-exercise-type="choose-word"] #configPanel .config-basics-main,
  body.mode-config[data-exercise-type="missing-letters"] #configPanel .config-basics-main{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:13px!important;
  }
  body.mode-config #configPanel .config-basics-main .title-box{grid-column:1/-1!important;}
  body.mode-config #configPanel .config-basics-main>.basic-box:nth-child(4){grid-column:auto!important;}
}
@media screen and (max-width:760px){
  body:not(.mode-home) .product-header{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    justify-items:center!important;min-height:0!important;gap:3px!important;
    padding:12px 12px 10px!important;
  }
  body:not(.mode-home) .product-header .brand-lockup{
    width:100%!important;justify-content:center!important;
  }
  body:not(.mode-home) .top-nav{
    display:flex!important;width:100%!important;justify-content:center!important;
    margin:0!important;gap:clamp(2px,2vw,16px)!important;flex-wrap:nowrap!important;
  }
  body:not(.mode-home) .top-nav button{
    flex:0 1 auto!important;min-width:0!important;
    padding:0 clamp(5px,2.5vw,12px)!important;
    min-height:43px!important;font-size:12px!important;white-space:nowrap!important;
  }
}
@media screen and (max-width:355px){
  body.mode-config #configPanel .config-basics-main,
  body.mode-config[data-exercise-type="choose-word"] #configPanel .config-basics-main,
  body.mode-config[data-exercise-type="missing-letters"] #configPanel .config-basics-main{
    grid-template-columns:1fr!important;
  }
  body.mode-config #configPanel .config-basics-main .title-box{grid-column:1/-1!important;}
}
/* In non-home modes, the old default Home underline must never remain active. */
@media screen {
  body:not(.mode-home) .top-nav #navHome::after,
  body:not(.mode-home) .top-nav #navProjects:not(:hover):not(:focus-visible)::after {
    opacity:0!important;transform:scaleX(.35)!important;
  }
  body:not(.mode-home) .top-nav #navHome:hover::after,
  body:not(.mode-home) .top-nav #navHome:focus-visible::after{
    opacity:1!important;transform:scaleX(1)!important;
  }
}

/* =====================================================================
   RESULT1 — unified finished worksheet experience (screen-only).
   This restyles the UI chrome only; the .worksheet and print pages remain
   untouched.  Keep all original controls wired to their existing handlers.
   ===================================================================== */
@media screen {
  body.mode-result #resultStage{--result-ink:#173b67;--result-line:#dce8f5}
  body.mode-result .result-hero-strip{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:16px!important;
    min-height:110px!important;
    margin:12px 0 0!important;
    padding:15px 20px!important;
    border:1px solid var(--result-line)!important;
    border-radius:24px 24px 0 0!important;
    box-shadow:0 12px 32px rgba(44,79,118,.05)!important;
    background:linear-gradient(110deg,#fff,#f7fbff)!important;
  }
  body.mode-result .result-hero-art{
    width:88px; height:84px;flex:0 0 88px;
    border-radius:18px;overflow:hidden;
    border:1px solid #e1e9f4;background:#fff;
    box-shadow:0 8px 21px rgba(52,84,120,.09);
  }
  body.mode-result .result-hero-art img{width:100%;height:100%;object-fit:contain;display:block}
  body.mode-result .result-stage-eyebrow{
    display:block;font-size:10px;line-height:1.2;letter-spacing:.105em;
    color:#587fb9;font-weight:900;
  }
  body.mode-result .result-hero-copy{min-width:0;flex:1}
  body.mode-result .result-hero-copy h2{
    font-size:24px!important;letter-spacing:-.6px!important;
    color:var(--result-ink)!important;margin:5px 0!important;
  }
  body.mode-result .result-hero-copy p{font-size:12px!important;line-height:1.45!important;color:#74869b!important}
  body.mode-result .pro-commandbar{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:12px!important;
    margin:0 0 14px!important;
    padding:11px 18px!important;
    border:1px solid var(--result-line)!important;
    border-top:0!important;
    border-radius:0 0 22px 22px!important;
    background:rgba(255,255,255,.97)!important;
    box-shadow:0 12px 32px rgba(44,79,118,.07)!important;
    backdrop-filter:blur(15px)!important;
  }
  body.mode-result .pro-commandbar .workspace-left,
  body.mode-result .pro-commandbar .workspace-right{
    display:flex!important;align-items:center!important;flex-wrap:wrap!important;
    gap:8px!important;min-width:0;
  }
  body.mode-result .pro-commandbar .workspace-left{flex:1 1 auto!important;overflow:visible!important;padding:0!important}
  body.mode-result .pro-commandbar .workspace-right{
    flex:0 0 auto!important;margin-left:auto!important;
    width:auto!important;padding:0!important;border:0!important;
    justify-content:flex-end!important;overflow:visible!important;
  }
  body.mode-result .pro-commandbar button,
  body.mode-result .pro-commandbar #layoutMenu>summary{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    min-height:42px!important;padding:0 13px!important;
    border-radius:12px!important;box-sizing:border-box!important;
    color:#385a80!important;border:1px solid #d8e5f3!important;
    background:#fff!important;font-size:12px!important;font-weight:850!important;
    white-space:nowrap!important;box-shadow:none!important;
  }
  body.mode-result .pro-commandbar button:hover,
  body.mode-result .pro-commandbar #layoutMenu>summary:hover{
    border-color:#a7c4e9!important;background:#f5f9ff!important;
  }
  body.mode-result .pro-commandbar .result-new-variant{
    background:#edf4ff!important;color:#265fc1!important;border-color:#ccddfa!important;
  }
  body.mode-result .pro-commandbar .result-solution-button[aria-pressed="true"]{
    background:#e7f8f0!important;border-color:#9fdfbf!important;color:#24734e!important;
  }
  body.mode-result .pro-commandbar #saveProject{
    margin:0!important;color:#315f9b!important;background:#f4f7ff!important;
    border-color:#dce6fb!important;
  }
  body.mode-result .pro-commandbar .result-print-action{
    color:#143e76!important;background:#ffcf54!important;border-color:#edb83d!important;
    padding:0 22px!important;font-size:13px!important;
  }
  body.mode-result .result-panel.viewer{
    margin-top:0!important;
    padding:16px!important;
    border-radius:24px!important;
  }
  body.mode-result .result-panel .viewerbar{
    grid-template-columns:minmax(0,1fr) auto!important;
    display:grid!important;gap:10px!important;
    padding:4px 4px 13px!important;
  }
  body.mode-result .result-panel .viewer-heading>b{font-size:14px!important}
  body.mode-result .result-panel .viewer-heading .viewer-copy{font-size:10px!important}
  body.mode-result .result-panel #summary.viewer-summary{
    grid-column:2!important;justify-self:end!important;
    text-align:right!important;
  }
  body.mode-result .result-panel .viewer-print-button{display:none!important}
  body.mode-result .result-panel .worksheet-wrap{margin-top:10px!important}
}
@media screen and (max-width:1040px){
  body.mode-result .pro-commandbar{align-items:stretch!important;flex-wrap:wrap!important}
  body.mode-result .pro-commandbar .workspace-left,
  body.mode-result .pro-commandbar .workspace-right{justify-content:stretch!important}
  body.mode-result .pro-commandbar .workspace-right{margin-left:0!important}
}
@media screen and (max-width:620px){
  body.mode-result .result-hero-strip{
    padding:12px!important;gap:11px!important;min-height:92px!important;
    border-radius:19px 19px 0 0!important;
  }
  body.mode-result .result-hero-art{width:68px;height:68px;flex-basis:68px;border-radius:14px}
  body.mode-result .result-stage-eyebrow{font-size:9px}
  body.mode-result .result-hero-copy h2{font-size:18px!important;line-height:1.15!important}
  body.mode-result .result-hero-copy p{font-size:10px!important;line-height:1.4!important}
  body.mode-result .pro-commandbar{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    padding:10px!important;gap:7px!important;margin-bottom:10px!important;
    border-radius:0 0 18px 18px!important;
  }
  body.mode-result .pro-commandbar .workspace-left,
  body.mode-result .pro-commandbar .workspace-right{display:contents!important}
  body.mode-result .pro-commandbar #openWordsDrawer,
  body.mode-result .pro-commandbar #openConfig,
  body.mode-result .pro-commandbar #again,
  body.mode-result .pro-commandbar #resultSolutionButton,
  body.mode-result .pro-commandbar #layoutMenu,
  body.mode-result .pro-commandbar #saveProject,
  body.mode-result .pro-commandbar #resultPrintAction{
    min-width:0!important;width:100%!important;max-width:none!important;margin:0!important;
  }
  body.mode-result .pro-commandbar #layoutMenu>summary{
    width:100%!important;
  }
  body.mode-result .pro-commandbar button,
  body.mode-result .pro-commandbar #layoutMenu>summary{
    min-height:42px!important;padding:6px 7px!important;
    font-size:11.2px!important;white-space:normal!important;
  }
  body.mode-result .pro-commandbar #resultPrintAction{
    grid-column:1 / -1!important;
  }
  body.mode-result .pro-commandbar #saveProject span,
  body.mode-result .pro-commandbar #resultPrintAction span,
  body.mode-result .pro-commandbar #resultSolutionButton span{display:inline!important}
  body.mode-result .result-panel.viewer{padding:9px!important}
  body.mode-result .result-panel .viewerbar{
    grid-template-columns:1fr!important;padding:3px 2px 11px!important;
  }
  body.mode-result .result-panel #summary.viewer-summary{
    grid-column:1!important;grid-row:2!important;
    width:100%!important;justify-self:start!important;justify-content:flex-start!important;
    text-align:left!important;
  }
}


/* ===============================================================
   RESULT2 — clear print hover + compact sheet-settings drawer
   Screen UI only; printable worksheet layout remains untouched.
   =============================================================== */
@media screen {
  /* A saturated, legible gold hover instead of the pale global hover. */
  body.mode-result .pro-commandbar #resultPrintAction:hover:not(:disabled),
  body.mode-result .pro-commandbar #resultPrintAction:focus-visible {
    background:#f2b52f!important;
    border-color:#d79b20!important;
    color:#143e76!important;
    box-shadow:0 5px 16px rgba(198,143,30,.21)!important;
    filter:none!important;
  }
  /* The configuration cover belongs on the full "Настрой сам" page,
     but not inside the result-stage settings drawer. */
  body.mode-result.drawer-open #configPanel .config-head .setup-game-cover {
    display:none!important;
  }
  body.mode-result.drawer-open #configPanel .config-head .setup-game-identity {
    display:block!important;
    min-width:0!important;
    width:auto!important;
    max-width:100%!important;
  }
  body.mode-result.drawer-open #configPanel .config-head .setup-game-identity-copy {
    min-width:0!important;
  }
  body.mode-result.drawer-open #configPanel .config-head .setup-game-eyebrow {
    display:none!important;
  }
  body.mode-result.drawer-open #configPanel .config-head {
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:12px!important;
  }
  body.mode-result.drawer-open #configPanel .config-head .config-actions-top {
    flex:0 0 auto!important;
    margin-left:auto!important;
  }
}

/* ============================================================
   RESULT3 — unified plain application background and clean
   content-editor drawer. Presentation only; print is unchanged.
   ============================================================ */
@media screen {
  /* Remove decorative background blobs/gradients consistently from
     Home, Customize and Result without touching card or A4 artwork. */
  body,
  body.mode-home,
  body.mode-config,
  body.mode-result {
    background:#f7f9fd!important;
    background-image:none!important;
  }
  body::before,
  body::after {
    content:none!important;
    background:none!important;
  }

  /* Match the clean white settings-drawer header: no golden orb,
     no light-blue decorative gradient, no decorative star. */
  #wordsDrawer .words-drawer-head {
    background:#fff!important;
    background-image:none!important;
    border-bottom:1px solid #deebf5!important;
  }
  #wordsDrawer .words-drawer-head::before,
  #wordsDrawer .words-drawer-head::after {
    content:none!important;
  }
  #wordsDrawer .words-drawer-head .drawer-kicker {
    display:none!important;
  }
}


/* ===========================================================
   RESULT4 — equalize the two result-stage drawers
   Presentation only; keep the existing update/warning behavior.
   =========================================================== */
@media screen {
  /* Match the comfortable separation of the picture/word editor cards.
     advancedConfig is a DETAILS element with block layout in the drawer. */
  body.mode-result.drawer-open #configPanel #advancedConfig > .settings-section + .settings-section {
    margin-top:14px!important;
  }

  /* Hidden notices must stay hidden, even if .drawer-only is display:inline-flex.
     When there really are pending content changes, preserve the warning. */
  body.mode-result #configPanel .config-footer #regenHint[hidden] {
    display:none!important;
  }
  body.mode-result #configPanel .config-footer #regenHint:not([hidden]) {
    display:block!important;
    margin:8px 0 0!important;
    padding:8px 10px!important;
    font-size:11px!important;
    line-height:1.4!important;
    border-radius:9px!important;
  }

  /* Match the footer height, explanatory line and action widths from
     "Картинки и думи" without changing button functionality. */
  body.mode-result #configPanel .config-footer {
    padding:16px 24px!important;
    background:#fff!important;
    backdrop-filter:none!important;
  }
  body.mode-result #configPanel .settings-footer-note {
    display:block!important;
    margin:0 0 7px!important;
    padding:0!important;
    color:#667085!important;
    font-size:11px!important;
    font-weight:400!important;
    line-height:1.2!important;
  }
  body.mode-result #configPanel .config-footer-actions {
    display:grid!important;
    grid-template-columns:104px minmax(0,1fr)!important;
    gap:8px!important;
    width:100%!important;
    max-width:none!important;
    margin:0 0 7px!important;
  }
  body.mode-result #configPanel .config-footer-actions #cancelSettingsFooter,
  body.mode-result #configPanel .config-footer-actions #applySettings {
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
  }
  /* Give the settings drawer the same clean white heading as the word editor. */
  body.mode-result #configPanel .config-head {
    background:#fff!important;
    background-image:none!important;
  }
}
@media screen and (max-width:620px) {
  body.mode-result #configPanel .config-footer {
    padding:9px 10px calc(9px + env(safe-area-inset-bottom))!important;
  }
  body.mode-result #configPanel .config-footer-actions {
    grid-template-columns:104px minmax(0,1fr)!important;
  }
}

/* The settings drawer scrolls in its middle zone; a second scrollbar
   gutter on the outer shell needlessly narrows its header and footer. */
@media screen {
  body.mode-result #configPanel {
    scrollbar-gutter:auto!important;
  }
}

@media screen and (max-width:620px) {
  /* Same comfortable touch-target height as the words drawer. */
  body.mode-result #configPanel .config-footer-actions #cancelSettingsFooter,
  body.mode-result #configPanel .config-footer-actions #applySettings {
    min-height:48px!important;
    height:48px!important;
  }
}


/* RESULT5 — Hidden sections are exclusive to their exercise.
   Legacy per-game styling must never override the HTML hidden state.
   Applies in both the configurator and all result drawers. */
@media screen {
  #configPanel [hidden] { display:none!important; }
  #configPanel #mazeConfigSection[hidden],
  #configPanel #choosePathConfigSection[hidden],
  #configPanel #connectDotsConfigSection[hidden],
  #configPanel #mirrorDrawConfigSection[hidden],
  #configPanel #colorByNumberConfigSection[hidden],
  #configPanel #pictureWordsModeSection[hidden] { display:none!important; }
}

/* v1.4.0-maint1 — saved worksheet safety and library backup */
.project-io-row{align-items:center}
#projectIoRow #libraryActionStatus{flex:1 1 100%;font-size:12px;color:#45627f;min-height:1em}
.library-delete-dialog{z-index:205!important}
.library-delete-dialog .new-project-box{width:min(440px,calc(100vw - 32px))}
.library-delete-dialog .delete-project-danger{background:#b72d3a!important;color:#fff!important;border-color:#b72d3a!important}
.library-delete-dialog .delete-project-danger:hover{background:#942431!important}
@media(max-width:640px){#projectIoRow button{flex:1 1 calc(50% - 8px)}}
/* Optional touch-friendly magnification for screen preview, never for A4 print. */
.mobile-sheet-zoom-control{display:none!important}
@media screen and (max-width:620px){
  body.mode-result .mobile-sheet-zoom-control{display:inline-flex!important;align-items:center;justify-content:center;padding:7px 11px;border-radius:10px;border:1px solid #c6d9ef;background:#fff;color:#1d5289;font-weight:800;font-size:12px;min-height:36px}
  body.mode-result .result-panel .worksheet-wrap.mobile-sheet-preview-wrap.zoomed-mobile-sheet{
    position:relative!important;overflow:auto!important;overscroll-behavior:contain;touch-action:pan-x pan-y;
    min-height:0!important;max-width:100%;scrollbar-width:thin
  }
  body.mode-result .worksheet-wrap.zoomed-mobile-sheet .worksheet.mobile-sheet-preview{position:absolute!important;margin:0!important}
  .sheet-zoom-spacer{display:block;pointer-events:none}
}
@media print{.mobile-sheet-zoom-control,.sheet-zoom-spacer{display:none!important}}

#projectIoRow #libraryActionStatus:empty{display:none!important}

/* Accessibility: consistent keyboard focus without affecting mouse/touch states. */
:where(button, a[href], input, select, textarea, summary, [tabindex="0"]):focus-visible {
  outline: 3px solid #2369d9;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
@media print {
  :where(button, a[href], input, select, textarea, summary, [tabindex="0"]):focus-visible { outline: none !important; }
}

/* QUALITY PHASE C — only screen feedback; A4 print rules are untouched. */
@media screen {
  #generationProgress[hidden] { display:none!important; }
  .generation-progress { padding:8px 3px; color:#38516f; font-size:13px; }
  #gen[aria-busy="true"], #again[aria-busy="true"] {cursor:progress; opacity:.72; }
  .quality-missing-path { display:block; overflow-wrap:anywhere; margin-top:6px; }
  img.quality-asset-missing {outline:2px dashed #cb5858;outline-offset:2px;}
}

/* PRINT RESULT1 — exact A4 page geometry for the existing WYSIWYG snapshot.
   The print renderer already freezes the full on-screen sheet with its own
   internal margins. The previous 283/196 mm containers clipped the final
   14 mm when the browser's extra @page margins were removed. */
@media print {
  body.print-wysiwyg #printBothPages .wysiwyg-print-page-portrait {
    height:297mm!important;
  }
  body.print-wysiwyg #printBothPages .wysiwyg-print-page-landscape {
    height:210mm!important;
  }
}

/* ZOOM RESULT1 — fitted mobile sheet should never retain panning scroll offsets.
   The zoomed state remains scrollable; this only affects the non-zoomed preview. */
@media screen and (max-width:620px){
  body.mode-result .result-panel .worksheet-wrap.mobile-sheet-preview-wrap:not(.zoomed-mobile-sheet){
    overflow:clip!important;
  }
}