/* ===== MAIN ===== */
main{padding:72px 20px 80px;max-width:1200px;margin:0 auto}

/* ===== TOOLBAR ===== */
.tb{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.tb-l,.tb-r{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pills{display:flex;gap:4px;flex-wrap:wrap}

/* ===== GRID ===== */
.grid{display:grid;grid-template-columns:1fr 360px;gap:20px;min-height:500px}
@media(max-width:900px){.grid{grid-template-columns:1fr;min-height:auto}}

/* ===== PREVIEW ===== */
.pv{background:var(--sf);border:1.5px solid var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);position:relative}
.pv-in{padding:44px 36px;min-height:500px;display:flex;flex-direction:column;justify-content:center}
.pv-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:16px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:20px;width:fit-content}
.pv-h1{font-size:clamp(30px,4.5vw,48px);line-height:1.06;letter-spacing:-.04em;font-weight:800;margin-bottom:14px}
.pv-p{font-size:clamp(14px,1.8vw,17px);line-height:1.55;font-weight:400;opacity:.65;max-width:480px;margin-bottom:28px}
.pv-btns{display:flex;gap:10px;flex-wrap:wrap}
.pv-cta{padding:12px 28px;border-radius:var(--rs);font-size:13px;font-weight:700;border:none;cursor:default}
.pv-cta2{padding:12px 28px;border-radius:var(--rs);font-size:13px;font-weight:600;border:2px solid;background:transparent;cursor:default}
.pv-cards{display:flex;gap:10px;margin-top:24px}
.pv-minicard{flex:1;padding:14px;border-radius:10px;font-size:11px;font-weight:600;opacity:.8}

/* ===== DEMO TABS (for demo preview) ===== */
.demo-tabs{display:flex;gap:2px;padding:8px 8px 0;background:rgba(0,0,0,.03);border-bottom:1px solid var(--bd)}
.demo-tab{padding:8px 16px;font-size:11px;font-weight:700;background:none;border:none;border-bottom:2px solid transparent;color:var(--t3);cursor:pointer;font-family:inherit;transition:.2s}
.demo-tab:hover{color:var(--t1)}
.demo-tab.active{color:var(--t1);border-bottom-color:var(--ac)}
.demo-section{display:none}
.demo-section.active{display:block}

/* ===== SIDEBAR ===== */
.sb{display:flex;flex-direction:column;gap:14px}
.sc{background:var(--sf);border:1.5px solid var(--bd);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.sc h3{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:12px}

/* ===== FONT INFO ===== */
.fi{padding:8px 0;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:flex-start}
.fi:last-child{border:none}
.fi-role{font-size:10px;color:var(--t3);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.fi-name{font-size:13px;font-weight:800}
.fi-sample{font-size:18px;margin-top:2px}
.fi-r{text-align:right}
.fi-cat{font-size:9px;padding:2px 7px;border-radius:8px;background:#f0f0f0;font-weight:700;color:var(--t2)}
.fi-copy{margin-top:4px;padding:2px 7px;font-size:9px;font-weight:800;background:transparent;border:1px solid var(--bd);border-radius:5px;color:var(--t2);cursor:pointer;font-family:inherit;transition:.15s}
.fi-copy:hover{background:var(--t1);color:#fff;border-color:var(--t1)}

/* ===== PALETTE ===== */
.pal{display:flex;gap:5px;margin-bottom:10px}
.sw{flex:1;aspect-ratio:1;border-radius:8px;cursor:pointer;position:relative;transition:all .2s cubic-bezier(.22,1,.36,1);border:2px solid transparent}
.sw:hover{transform:scale(1.1);border-color:var(--t1)}
.sw .tt{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:800;white-space:nowrap;opacity:0;transition:.15s;pointer-events:none}
.sw:hover .tt{opacity:1}
.sw .lk{position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;opacity:0;transition:.15s;cursor:pointer;border:none;padding:0}
.sw:hover .lk{opacity:1}
.sw.locked .lk{opacity:1;background:var(--ac)}
.lk svg{width:8px;height:8px;fill:#fff}

/* ===== CODE BOX ===== */
.code{background:#111;border-radius:var(--rs);padding:12px;font-family:'JetBrains Mono',monospace;font-size:10px;color:#7defa1;line-height:1.7;position:relative;overflow-x:auto;max-height:180px;white-space:pre}
.code .cp{position:absolute;top:6px;right:6px;padding:3px 8px;font-size:9px;font-weight:800;background:rgba(255,255,255,.1);border:none;border-radius:5px;color:#fff;cursor:pointer;font-family:inherit;transition:.15s}
.code .cp:hover{background:rgba(255,255,255,.2)}

/* ===== HISTORY ===== */
.hist{margin-top:20px;padding:16px;background:var(--sf);border:1.5px solid var(--bd);border-radius:var(--r)}
.hist h3{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:10px}
.hg{display:flex;gap:8px;flex-wrap:wrap;min-height:40px}
.ht{width:50px;height:50px;border-radius:var(--rs);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:.15s;position:relative}
.ht:hover{border-color:var(--ac);transform:scale(1.06)}
.ht-in{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.ht-in div{width:100%;height:100%}
.ht-x{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;background:var(--ac);color:#fff;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;opacity:0;transition:.15s;cursor:pointer;border:none;line-height:1}
.ht:hover .ht-x{opacity:1}
.empty{font-size:12px;color:var(--t3)}

/* ===== A11Y BADGE ===== */
.a11y{display:flex;gap:6px;align-items:center;padding:8px 12px;border-radius:var(--rs);font-size:11px;font-weight:700;margin-top:8px}
.a11y-pass{background:#00B87C15;color:#00B87C}
.a11y-warn{background:#FF8C0015;color:#FF8C00}
.a11y-fail{background:#FF3D0015;color:#FF3D00}

/* ===== HINT BAR ===== */
.hint{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:99;display:flex;align-items:center;gap:8px;padding:9px 18px;background:var(--sf);border:1.5px solid var(--bd);border-radius:30px;box-shadow:var(--shl);font-size:12px;font-weight:600;color:var(--t2);animation:hintBounce 2s ease infinite}
.hint kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;background:#f0f0f0;border:1px solid #ddd;border-radius:5px;font-size:10px;font-weight:800;color:var(--t1);font-family:inherit;box-shadow:0 1px 0 #ccc}

/* ===== STATS ===== */
.stats{display:flex;gap:20px;justify-content:center;padding:28px 0;margin-top:32px}
.st{text-align:center}
.st-n{font-size:24px;font-weight:800;letter-spacing:-.02em}
.st-l{font-size:10px;color:var(--t3);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:1px}

/* ===== RESPONSIVE ===== */
@media(max-width:600px){
  main{padding:66px 14px 80px}
  .tb{flex-direction:column;align-items:stretch}
  .pv-in{padding:28px 20px}
  .pv-h1{font-size:26px}
  .stats{gap:14px}
  .st-n{font-size:20px}
  .pv-cards{flex-direction:column}
}