:root{
  --bg:#0d1117;--panel:#161c27;--panel2:#1c2535;--panel3:#232f45;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.14);
  --accent:#f59e0b;--accent2:#6366f1;--accent3:#10b981;--accent4:#ef4444;
  --text:#e8edf8;--muted:#8b93a0;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:'JetBrains Mono',monospace;}
body{display:flex;flex-direction:column;}

/* HEADER */
/* (site header/nav/footer are provided by style-shared.css via BUILD partials) */

/* HERO */
.hero{padding:28px 16px 20px;text-align:center;background:linear-gradient(180deg,rgba(245,158,11,.07) 0%,transparent 100%);}
.hero-badge{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(245,158,11,.3);border-radius:999px;padding:4px 12px;margin-bottom:10px;}
.hero h1{font-family:'Fredoka',cursive;font-size:clamp(1.5rem,5vw,2.2rem);font-weight:700;color:white;margin-bottom:6px;}
.hero p{font-size:.8rem;color:var(--muted);max-width:460px;margin:0 auto;line-height:1.7;}

/* MAIN */
.main{max-width:1000px;margin:0 auto;padding:20px 14px 80px;width:100%;}

/* MOOD GRID */
.section-title{font-family:'Fredoka',cursive;font-size:1rem;font-weight:600;color:var(--text);margin-bottom:12px;}
.mood-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-bottom:24px;}
.mood-card{border-radius:12px;border:2px solid var(--border);cursor:pointer;overflow:hidden;transition:all .15s;user-select:none;}
.mood-card:hover{border-color:var(--border2);transform:translateY(-2px);}
.mood-card.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,158,11,.15);}
.mood-preview{height:48px;display:flex;}
.mood-preview div{flex:1;}
.mood-info{padding:7px 9px;background:var(--panel);}
.mood-name{font-family:'Fredoka',cursive;font-size:.8rem;font-weight:600;color:var(--text);}
.mood-desc{font-size:.5rem;color:var(--muted);margin-top:1px;}

/* PALETTE DISPLAY */
.palette-section{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:20px;}
.palette-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px;}
.palette-name{font-family:'Fredoka',cursive;font-size:1.1rem;font-weight:600;color:var(--accent);}
.palette-actions{display:flex;gap:6px;flex-wrap:wrap;}
.pal-btn{padding:6px 12px;border-radius:8px;border:1px solid var(--border2);background:transparent;cursor:pointer;font-size:.62rem;color:var(--muted);transition:all .12s;font-family:'JetBrains Mono',monospace;white-space:nowrap;}
.pal-btn:hover{background:var(--panel2);color:var(--text);}
.pal-btn.primary{background:var(--accent);color:#000;border-color:var(--accent);}
.pal-btn.primary:hover{filter:brightness(1.1);}
.harmony-mode-btn.on{background:rgba(245,158,11,.18);border-color:var(--accent);color:var(--accent);font-weight:700;}
.swatch-contrast{margin-top:2px;text-align:center;}
.cb{display:inline-block;font-size:.5rem;font-family:'JetBrains Mono',monospace;padding:1px 6px;border-radius:999px;white-space:nowrap;}
.cb.ok{background:rgba(16,185,129,.14);color:#10b981;}
.cb.warn{background:rgba(239,68,68,.14);color:#f87171;}

/* SWATCHES */
.swatches-row{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.swatch-wrap{display:flex;flex-direction:column;gap:5px;align-items:center;flex:1;min-width:80px;}
.swatch{width:100%;height:80px;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:all .15s;position:relative;}
.swatch:hover{transform:scale(1.04);}
.swatch.locked{border-color:white;}
.swatch .lock-icon{position:absolute;top:5px;right:6px;font-size:.7rem;opacity:0;}
.swatch:hover .lock-icon,.swatch.locked .lock-icon{opacity:1;}
.swatch-hex{font-size:.58rem;color:var(--muted);font-family:'JetBrains Mono',monospace;cursor:pointer;}
.swatch-hex:hover{color:var(--text);}
.swatch-name{font-size:.5rem;color:var(--muted);text-align:center;}
.swatch:focus-visible,.swatch-hex:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

/* PREVIEW SECTION */
.preview-section{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:20px;}
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.preview-card{border-radius:10px;overflow:hidden;border:1px solid var(--border);}
.preview-card-header{padding:10px 12px;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.preview-card-body{padding:10px 12px;}
.preview-ui-bar{height:8px;border-radius:4px;margin-bottom:6px;}
.preview-ui-btn{display:inline-block;padding:5px 12px;border-radius:6px;font-size:.6rem;font-family:'JetBrains Mono',monospace;margin-right:5px;margin-bottom:5px;}
.preview-char{width:40px;height:60px;margin:0 auto 6px;border-radius:6px;}
.preview-platform{height:10px;border-radius:4px;margin-bottom:4px;}
.preview-bg{padding:12px;border-radius:8px;display:flex;gap:8px;align-items:flex-end;position:relative;}

/* ADJUSTMENTS */
.adjust-section{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:20px;}
.adjust-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;}
.adj-row{display:flex;flex-direction:column;gap:4px;}
.adj-label{font-size:.52rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;}
.adj-label span{color:var(--accent);}
input[type=range].adj{width:100%;accent-color:var(--accent);height:4px;cursor:pointer;}

/* SAVED PALETTES */
.saved-section{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;}
.saved-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;}
.saved-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--panel2);border-radius:9px;border:1px solid var(--border);cursor:pointer;transition:background .12s;}
.saved-item:hover{background:var(--panel3);}
.saved-swatches{display:flex;gap:3px;flex-shrink:0;}
.saved-sw{width:18px;height:18px;border-radius:4px;}
.saved-name{font-size:.68rem;font-weight:700;flex:1;color:var(--text);}
.saved-meta{font-size:.52rem;color:var(--muted);}
.saved-del{width:20px;height:20px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:.7rem;flex-shrink:0;}
.saved-del:hover{color:var(--accent4);}
.empty-state{text-align:center;padding:20px;color:var(--muted);font-size:.72rem;}

/* EXPORT FORMATS */
.export-formats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:12px;}
.export-box{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:12px;}
.export-box-title{font-size:.55rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.export-code{font-size:.58rem;color:var(--text);line-height:1.8;word-break:break-all;font-family:'JetBrains Mono',monospace;}
.copy-btn{margin-top:6px;padding:4px 10px;border-radius:5px;border:1px solid var(--border2);background:transparent;color:var(--muted);cursor:pointer;font-size:.55rem;font-family:'JetBrains Mono',monospace;transition:all .12s;}
.copy-btn:hover{background:var(--panel3);color:var(--text);}

/* TOAST */
#toast{position:fixed;bottom:36px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--accent);color:var(--accent);padding:5px 14px;border-radius:7px;font-size:.7rem;z-index:900;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;}

::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px;}

@media(max-width:500px){
  .swatches-row{gap:6px;}
  .swatch{height:60px;}
  .export-formats{grid-template-columns:1fr;}
}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:50%;transform:translateX(-50%);top:8px;width:auto;height:auto;padding:10px 20px;background:#BC4749;color:white;font-weight:700;font-size:.9rem;border-radius:8px;z-index:9999;text-decoration:none;white-space:nowrap}
/* Welcome modal - dark-panel standard (matches story-editor/trading-card) */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:500;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--panel2);border:1px solid var(--border2);border-radius:16px;padding:20px;width:min(460px,94vw);max-height:82vh;overflow:auto;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.modal h3,.modal h2{font-family:'Fredoka',cursive;font-size:1.05rem;color:var(--accent);margin-bottom:10px;}
.modal-btns{display:flex;gap:8px;margin-top:12px;}
.m-ok{flex:1;padding:9px;border-radius:9px;border:none;cursor:pointer;font-family:'Fredoka',cursive;font-weight:700;background:var(--accent);color:#000;}
.m-cancel{flex:1;padding:9px;border-radius:9px;border:1px solid var(--border2);cursor:pointer;font-family:'Fredoka',cursive;background:rgba(255,255,255,.06);color:var(--text);}