:root { --ink:#1d1b26; --muted:#5b5868; --line:#e4e1ea; --bg:#faf8f4; --card:#fff; --accent:#2f6f5e; --accent2:#e8f2ee; --warn:#9a5b00; --bad:#a3262a; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Atkinson Hyperlegible", system-ui, sans-serif; color:var(--ink); background:var(--bg); line-height:1.5; }
@font-face { font-family:"Atkinson Hyperlegible"; src:url(../fonts/AtkinsonHyperlegible-Regular.ttf); font-weight:400; }
@font-face { font-family:"Atkinson Hyperlegible"; src:url(../fonts/AtkinsonHyperlegible-Bold.ttf); font-weight:700; }
a { color:var(--accent); }
header.top { display:flex; align-items:center; justify-content:space-between; padding:14px 28px; border-bottom:1px solid var(--line); background:#fff; }
.brand { font-weight:700; font-size:20px; text-decoration:none; color:var(--ink); letter-spacing:.2px; }
.brand span { color:var(--accent); }
nav a { margin-left:18px; text-decoration:none; color:var(--muted); font-weight:700; }
nav a.cta { background:var(--accent); color:#fff; padding:8px 14px; border-radius:8px; }
.hero { max-width:1100px; margin:0 auto; padding:34px 28px 10px; }
.hero h1 { font-size:34px; margin:0 0 6px; line-height:1.15; }
.hero p { color:var(--muted); margin:0; font-size:17px; max-width:760px; }
main.tool { max-width:1180px; margin:0 auto; padding:18px 28px 40px; display:grid; grid-template-columns: 360px 1fr; gap:22px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; }
label { display:block; font-weight:700; font-size:14px; margin:12px 0 4px; }
label small { font-weight:400; color:var(--muted); }
input[type=text], textarea, select, input[type=number] { width:100%; padding:9px 10px; border:1px solid #cfcbd8; border-radius:8px; font:inherit; font-size:15px; background:#fff; }
textarea { min-height:150px; resize:vertical; }
.row { display:flex; gap:10px; } .row > * { flex:1; }
button { font:inherit; font-weight:700; border-radius:8px; border:1px solid var(--accent); padding:9px 14px; cursor:pointer; background:#fff; color:var(--accent); }
button.primary { background:var(--accent); color:#fff; }
button:disabled { opacity:.5; cursor:not-allowed; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.chip { font-size:13px; padding:4px 9px; border-radius:999px; border:1px solid var(--line); background:var(--accent2); color:var(--accent); cursor:pointer; font-weight:700; }
.warnings { margin-top:12px; font-size:13px; color:var(--warn); padding-left:18px; }
.preview { display:flex; flex-direction:column; align-items:center; }
.sheet { background:#fff; width:100%; max-width:720px; aspect-ratio: 8.5 / 11; box-shadow:0 2px 14px rgba(0,0,0,.08); border:1px solid var(--line); padding:5% 6%; display:flex; flex-direction:column; }
.sheet h2 { text-align:center; margin:0 0 10px; font-size:26px; }
.sheet svg { width:100%; height:auto; }
.wordlist { columns:4; column-gap:16px; font-size:14px; margin-top:12px; }
.wordlist div { break-inside:avoid; }
.secret { font-size:12.5px; font-weight:700; margin-top:10px; color:#333; }
.toggle { margin:10px 0; display:flex; gap:8px; align-items:center; font-size:14px; color:var(--muted); }
section.info { max-width:1100px; margin:0 auto; padding:10px 28px 40px; }
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:16px; }
.price { font-size:30px; font-weight:700; } .price small { font-size:14px; color:var(--muted); font-weight:400; }
.card ul { padding-left:18px; margin:8px 0 0; } .card li { margin:3px 0; }
.card.pro { border:2px solid var(--accent); }
details { background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:8px 0; }
summary { font-weight:700; cursor:pointer; }
footer { text-align:center; color:var(--muted); font-size:13px; padding:20px; border-top:1px solid var(--line); }
.badge { display:inline-block; font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; background:#fff3d6; color:var(--warn); border:1px solid #f0d9a0; }
.checks { list-style:none; padding:0; margin:10px 0 0; font-size:14px; }
.checks li { padding:4px 0 4px 26px; position:relative; }
.checks li::before { position:absolute; left:0; font-weight:700; }
.checks li.ok::before { content:"✓"; color:var(--accent); }
.checks li.bad::before { content:"✗"; color:var(--bad); }
.checks li.warn::before { content:"!"; color:var(--warn); }
.status { font-size:14px; margin-top:10px; }
.pages { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; width:100%; margin-top:12px; }
.pages canvas, .pages img { width:100%; border:1px solid var(--line); background:#fff; }
.modal { position:fixed; inset:0; background:rgba(20,20,30,.45); display:none; align-items:center; justify-content:center; }
.modal.open { display:flex; }
.modal .panel { max-width:460px; }
@media (max-width: 900px) { main.tool { grid-template-columns: 1fr; } }
@media print {
  header.top, .hero, .panel.controls, section.info, footer, .toggle, .noprint { display:none !important; }
  main.tool { display:block; padding:0; }
  .sheet { box-shadow:none; border:none; max-width:none; aspect-ratio:auto; height:100vh; page-break-after:always; padding:0.5in; }
}
@media (max-width: 640px) {
  header.top { padding:12px 16px; }
  nav a:not(.cta) { display:none; }
  .hero { padding:22px 16px 6px; } .hero h1 { font-size:27px; }
  main.tool { padding:14px 16px 30px; }
  .wordlist { columns:3; font-size:12px; }
}