:root {
  --bg: #f2f4fa;
  --panel: #ffffff;
  --panel-soft: #f7f8fc;
  --ink: #182037;
  --muted: #69738a;
  --line: #dfe4ee;
  --accent: #6f55d9;
  --accent-strong: #5238bd;
  --accent-soft: #eeeaff;
  --danger: #b9384f;
  --shadow: 0 18px 50px rgba(31, 41, 68, .11);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1420;
  --panel: #171e2c;
  --panel-soft: #1d2637;
  --ink: #f0f3f8;
  --muted: #adb8cb;
  --line: #354158;
  --accent: #9b88ff;
  --accent-strong: #c2b7ff;
  --accent-soft: #302958;
  --danger: #ff8da0;
  --shadow: 0 18px 50px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 7% 8%, rgba(111,85,217,.11), transparent 26%),
    radial-gradient(circle at 94% 4%, rgba(36,187,181,.08), transparent 23%),
    var(--bg);
  color: var(--ink);
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
}

.app-shell { width: min(1540px, calc(100% - 24px)); margin: 0 auto; padding: 20px 0 38px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.brand-lockup { display:flex; align-items:center; gap:14px; min-width:0; }
.tool-badge {
  width:54px;
  height:54px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:linear-gradient(145deg,#8b72f1,#5840c4);
  box-shadow:0 9px 22px rgba(91,75,219,.28);
  font-size:1.7rem;
}
.eyebrow { margin:0 0 2px; color:var(--accent); font-family:"Fredoka",sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
h1,h2 { font-family:"Fredoka",sans-serif; }
h1 { margin:0; font-size:clamp(1.55rem,3vw,2.25rem); line-height:1; }
h2 { margin:0; font-size:1.28rem; }
.top-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.icon-button {
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:var(--ink);
  display:grid;
  place-items:center;
  font-size:1rem;
}
.icon-button:hover,.soft-button:hover { border-color:var(--accent); }

.workspace { display:grid; grid-template-columns:minmax(300px,350px) minmax(0,1fr); gap:18px; align-items:start; }
.panel { min-width:0; border:1px solid var(--line); border-radius:22px; background:var(--panel); box-shadow:var(--shadow); }
.setup-panel {
  position:sticky;
  top:14px;
  max-height:calc(100vh - 28px);
  max-height:calc(100dvh - 28px);
  padding:20px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.preview-panel { padding:20px; overflow:hidden; }
.panel-heading,.preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
.count-pill,.page-summary { padding:7px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent-strong); font-size:.78rem; font-weight:900; white-space:nowrap; }
.field-label { display:block; margin:0 0 6px; color:var(--ink); font-size:.8rem; font-weight:900; }
textarea,select,input[type="number"] {
  width:100%;
  min-width:0;
  border:1px solid var(--line);
  border-radius:12px;
  outline:none;
  background:var(--panel-soft);
  color:var(--ink);
  font:inherit;
}
textarea { min-height:205px; padding:12px; resize:vertical; line-height:1.45; }
select,input[type="number"] { min-height:42px; padding:0 10px; }
input[type="number"] { padding-right:4px; }
textarea:focus,select:focus,input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(111,85,217,.14); }
.helper,.print-tip { margin:7px 0 0; color:var(--muted); font-size:.74rem; line-height:1.42; }
.format-row { margin-top:14px; }
.compact-actions { display:grid; grid-template-columns:1fr 1fr auto; gap:7px; margin-top:11px; }
.soft-button {
  min-height:39px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--panel);
  color:var(--ink);
  font-size:.75rem;
  font-weight:900;
}
.danger-quiet { color:var(--danger); }
.print-setup { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.section-heading { margin-bottom:13px; }
.two-up { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }
.print-button {
  width:100%;
  min-height:52px;
  margin-top:18px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#7357de,#4f39b8);
  color:#fff;
  box-shadow:0 11px 24px rgba(91,75,219,.25);
  font-size:.94rem;
  font-weight:900;
}
.print-button:hover { filter:brightness(1.06); transform:translateY(-1px); }

.preview-toolbar { margin-bottom:13px; }
.theme-picker { display:grid; grid-template-columns:repeat(10,minmax(72px,1fr)); gap:7px; }
.theme-card {
  min-width:0;
  min-height:82px;
  padding:5px 5px 7px;
  border:2px solid transparent;
  border-radius:12px;
  background:var(--panel-soft);
  color:var(--ink);
  text-align:center;
  overflow:hidden;
}
.theme-card:hover { border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.theme-card[aria-checked="true"] { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px rgba(111,85,217,.09); }
.theme-thumb { position:relative; height:48px; margin-bottom:4px; border-radius:8px; overflow:hidden; background:var(--thumb-bg,#edf1ff); }
.theme-thumb img { width:100%; height:100%; object-fit:contain; object-position:center; }
.theme-card span { display:block; overflow:hidden; }
.theme-name { font-size:.63rem; font-weight:900; line-height:1.05; text-wrap:balance; }
.preview-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:20px 0 10px; }
.preview-heading span { color:var(--muted); font-size:.74rem; }
.sheet-stage {
  min-height:500px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(45deg,rgba(116,126,151,.045) 25%,transparent 25%,transparent 75%,rgba(116,126,151,.045) 75%),
    linear-gradient(45deg,rgba(116,126,151,.045) 25%,transparent 25%,transparent 75%,rgba(116,126,151,.045) 75%),
    var(--panel-soft);
  background-position:0 0,10px 10px;
  background-size:20px 20px;
  overflow:auto;
}
.empty-state { min-height:450px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); text-align:center; }
.empty-state[hidden] { display:none !important; }
.empty-state > span { font-size:3.2rem; filter:grayscale(.2); }
.empty-state strong { margin-top:10px; color:var(--ink); font-family:"Fredoka",sans-serif; font-size:1.2rem; }
.empty-state p { max-width:390px; margin:6px 0 0; font-size:.85rem; }

.screen-sheet {
  width:min(100%,794px);
  aspect-ratio:210 / 297;
  container-type:inline-size;
  margin:0 auto 22px;
  padding:var(--screen-pad-top) var(--screen-pad-x);
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  grid-template-rows:repeat(var(--rows),minmax(0,1fr));
  column-gap:var(--screen-gap-x);
  row-gap:var(--screen-gap-y);
  background:#fff;
  box-shadow:0 10px 30px rgba(23,32,51,.16);
  overflow:hidden;
}
.screen-sheet:last-child { margin-bottom:0; }
.label-slot {
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:1px solid var(--label-border);
  border-radius:var(--label-radius);
  background:var(--label-bg);
  color:var(--label-ink);
  print-color-adjust:exact;
  -webkit-print-color-adjust:exact;
}
.label-slot.blank { visibility:hidden; }
.label-slot::before { content:""; position:absolute; inset:0; z-index:0; background:var(--label-overlay); }
.label-slot::after {
  content:"";
  position:absolute;
  z-index:1;
  inset:4%;
  border:1px solid color-mix(in srgb,var(--label-border) 72%,transparent);
  border-radius:calc(var(--label-radius) * .72);
  pointer-events:none;
}
.label-name {
  position:absolute;
  z-index:4;
  left:var(--name-zone-left);
  top:50%;
  width:var(--name-zone-width);
  max-height:78%;
  padding:0 2%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  font-family:var(--label-font);
  font-size:calc(var(--screen-name-size) * var(--name-scale,1));
  font-weight:900;
  line-height:1;
  text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.72);
}
.label-name-text { display:block; width:100%; max-width:100%; hyphens:none; -webkit-hyphens:none; }
.label-name.single-name .label-name-text { white-space:nowrap; word-break:keep-all; overflow-wrap:normal; }
.label-name.multi-name .label-name-text { white-space:normal; word-break:normal; overflow-wrap:normal; text-wrap:balance; }
.label-frame {
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  border:1px solid transparent;
  border-image-source:var(--frame-image);
  border-image-slice:72 90;
  border-image-width:var(--frame-border-y) var(--frame-border-x);
  border-image-repeat:stretch round;
  pointer-events:none;
}
.label-main-art { position:absolute; z-index:3; top:3%; right:1.5%; width:var(--main-art-width); height:94%; object-fit:contain; object-position:center; pointer-events:none; }

.label-slot[data-label-theme="woodland"] { --label-bg:#eef6e8; --label-ink:#244a31; --label-border:#9ac287; --label-overlay:linear-gradient(115deg,#f7fff3 0 58%,rgba(210,235,194,.45) 79%); --label-font:"Fredoka",sans-serif; --label-radius:10px; }
.label-slot[data-label-theme="treats"] { --label-bg:#fff0ea; --label-ink:#8c2f3b; --label-border:#f4a274; --label-overlay:linear-gradient(115deg,#fff8f3 0 58%,rgba(255,187,160,.42) 80%); --label-font:"Fredoka",sans-serif; --label-radius:13px; }
.label-slot[data-label-theme="space"] { --label-bg:#111e58; --label-ink:#fff4a8; --label-border:#667ce5; --label-overlay:radial-gradient(circle at 12% 20%,rgba(255,255,255,.23) 0 1px,transparent 1.5px),linear-gradient(115deg,#172766 0 58%,#24125a 100%); --label-font:"Bungee",sans-serif; --label-radius:8px; }
.label-slot[data-label-theme="space"] .label-name { text-shadow:0 2px 0 #172766,0 0 8px rgba(45,220,255,.55); }
.label-slot[data-label-theme="ocean"] { --label-bg:#dff8fb; --label-ink:#0b6380; --label-border:#6bc7d7; --label-overlay:linear-gradient(115deg,#effdff 0 58%,rgba(84,202,222,.34) 100%); --label-font:"Fredoka",sans-serif; --label-radius:18px; }
.label-slot[data-label-theme="dino"] { --label-bg:#f3f4d8; --label-ink:#3e5f24; --label-border:#91ad50; --label-overlay:linear-gradient(115deg,#fbfce9 0 58%,rgba(143,180,79,.35) 100%); --label-font:"Bungee",sans-serif; --label-radius:7px; }
.label-slot[data-label-theme="sports"] { --label-bg:#e9f2ff; --label-ink:#163e7d; --label-border:#6698df; --label-overlay:linear-gradient(115deg,#f7fbff 0 58%,rgba(63,124,209,.3) 100%); --label-font:"Bungee",sans-serif; --label-radius:5px; }
.label-slot[data-label-theme="celebration"] { --label-bg:#fff3d4; --label-ink:#8a326d; --label-border:#e28abc; --label-overlay:linear-gradient(115deg,#fffaf0 0 58%,rgba(255,174,210,.34) 100%); --label-font:"Fredoka",sans-serif; --label-radius:16px; }
.label-slot[data-label-theme="science"] { --label-bg:#eaf6ff; --label-ink:#174d73; --label-border:#78acd0; --label-overlay:linear-gradient(115deg,#f7fcff 0 58%,rgba(67,172,221,.28) 100%); --label-font:"Nunito",sans-serif; --label-radius:8px; }
.label-slot[data-label-theme="garden"] { --label-bg:#fff0f4; --label-ink:#763953; --label-border:#e594ad; --label-overlay:linear-gradient(115deg,#fff9fb 0 58%,rgba(255,176,198,.35) 100%); --label-font:"Fredoka",sans-serif; --label-radius:18px; }
.label-slot[data-label-theme="robots"] { --label-bg:#edf2f5; --label-ink:#1f5068; --label-border:#6c9bb0; --label-overlay:linear-gradient(115deg,#f9fcfd 0 58%,rgba(83,163,195,.3) 100%); --label-font:"Bungee",sans-serif; --label-radius:6px; }
.label-slot[data-label-theme="maths"] { --label-bg:#edf5ff; --label-ink:#174d86; --label-border:#72a7dc; --label-overlay:linear-gradient(115deg,#f8fbff 0 58%,rgba(88,157,222,.27) 100%); --label-font:"Bungee",sans-serif; --label-radius:8px; }
.label-slot[data-label-theme="digital"] { --label-bg:#eaf7ff; --label-ink:#11516f; --label-border:#58a7ce; --label-overlay:linear-gradient(115deg,#f8fdff 0 58%,rgba(61,178,224,.25) 100%); --label-font:"Bungee",sans-serif; --label-radius:7px; }
.label-slot[data-label-theme="construction"] { --label-bg:#fff4d8; --label-ink:#65430c; --label-border:#d9a328; --label-overlay:linear-gradient(115deg,#fffbef 0 58%,rgba(244,182,47,.28) 100%); --label-font:"Bungee",sans-serif; --label-radius:6px; }
.label-slot[data-label-theme="music"] { --label-bg:#f5edff; --label-ink:#5d2e82; --label-border:#a97ad1; --label-overlay:linear-gradient(115deg,#fcf9ff 0 58%,rgba(172,111,220,.25) 100%); --label-font:"Fredoka",sans-serif; --label-radius:14px; }
.label-slot[data-label-theme="art"] { --label-bg:#fff3e6; --label-ink:#8a3c33; --label-border:#ed906e; --label-overlay:linear-gradient(115deg,#fffaf5 0 58%,rgba(246,134,100,.27) 100%); --label-font:"Fredoka",sans-serif; --label-radius:15px; }
.label-slot[data-label-theme="literature"] { --label-bg:#f8f0e7; --label-ink:#5b3825; --label-border:#b68a67; --label-overlay:linear-gradient(115deg,#fffaf4 0 58%,rgba(184,137,96,.25) 100%); --label-font:"Nunito",sans-serif; --label-radius:8px; }
.label-slot[data-label-theme="geography"] { --label-bg:#ecf7e8; --label-ink:#285d39; --label-border:#7db47b; --label-overlay:linear-gradient(115deg,#f8fff5 0 58%,rgba(101,180,110,.25) 100%); --label-font:"Fredoka",sans-serif; --label-radius:11px; }
.label-slot[data-label-theme="ancient"] { --label-bg:#f8ecd2; --label-ink:#684a1f; --label-border:#c19a55; --label-overlay:linear-gradient(115deg,#fff9ec 0 58%,rgba(193,151,76,.27) 100%); --label-font:"Nunito",sans-serif; --label-radius:5px; }
.label-slot[data-label-theme="surf"] { --label-bg:#e7fbfc; --label-ink:#09647a; --label-border:#51b8c7; --label-overlay:linear-gradient(115deg,#f7ffff 0 58%,rgba(54,193,211,.26) 100%); --label-font:"Fredoka",sans-serif; --label-radius:18px; }
.label-slot[data-label-theme="workshop"] { --label-bg:#f0f3f4; --label-ink:#374b53; --label-border:#8799a0; --label-overlay:linear-gradient(115deg,#fbfcfc 0 58%,rgba(113,139,149,.25) 100%); --label-font:"Bungee",sans-serif; --label-radius:6px; }

.print-only { display:none; }
.toast { position:fixed; left:50%; bottom:24px; z-index:20; transform:translate(-50%,18px); padding:10px 15px; border-radius:999px; background:#172033; color:#fff; box-shadow:0 10px 28px rgba(0,0,0,.25); font-size:.82rem; font-weight:800; opacity:0; pointer-events:none; transition:.2s ease; }
.toast.show { transform:translate(-50%,0); opacity:1; }

@media (max-width:1180px) {
  .theme-picker { grid-template-columns:repeat(5,minmax(88px,1fr)); }
}
@media (max-width:850px) {
  .workspace { grid-template-columns:1fr; }
  .setup-panel {
    position:static;
    max-height:none;
    overflow-y:visible;
    scrollbar-gutter:auto;
  }
  .theme-picker { grid-template-columns:repeat(5,minmax(88px,1fr)); }
}
@media (max-width:650px) {
  .app-shell { width:min(100% - 16px,1540px); padding-top:12px; }
  .topbar { align-items:flex-start; }
  .tool-badge { width:46px; height:46px; border-radius:14px; }
  .site-link { display:none; }
  .panel { border-radius:18px; }
  .setup-panel,.preview-panel { padding:15px; }
  .theme-picker { grid-template-columns:repeat(3,minmax(88px,1fr)); }
  .preview-heading { align-items:flex-start; flex-direction:column; gap:3px; }
  .sheet-stage { padding:8px; min-height:380px; }
  .empty-state { min-height:350px; }
  .label-slot { border-radius:3px !important; }
}

@media print {
  @page { size:A4 portrait; margin:0; }
  html,body { width:210mm; min-width:210mm; margin:0 !important; padding:0 !important; background:#fff !important; }
  .no-print { display:none !important; }
  .print-only { display:block !important; }
  #printOutput { width:210mm; }
  .print-sheet {
    width:210mm;
    height:297mm;
    margin:0;
    padding:var(--page-pad-top) var(--page-pad-x);
    display:grid;
    grid-template-columns:repeat(var(--cols),var(--label-w));
    grid-template-rows:repeat(var(--rows),var(--label-h));
    column-gap:var(--gap-x);
    row-gap:var(--gap-y);
    align-content:start;
    justify-content:start;
    overflow:hidden;
    break-after:page;
    page-break-after:always;
    background:#fff;
  }
  .print-sheet:last-child { break-after:auto; page-break-after:auto; }
  .print-sheet .label-slot { border-width:.25mm; }
  .print-sheet .label-name { font-size:calc(var(--print-name-size) * var(--name-scale,1)); }
}

@media (prefers-reduced-motion:reduce) {
  .toast,.print-button { transition:none; }
}