:root{ --bg:#0b0c10; --card:#111218; --text:#e8e9ee; --muted:#aeb2c1; --accent:#6c7bff; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:#0b0c10; color:var(--text);}
header{position:sticky; top:0; z-index:10; background:linear-gradient(180deg, rgba(17,18,24,.92), rgba(17,18,24,.66)); border-bottom:1px solid rgba(255,255,255,.06);}
.topbar{display:flex; gap:.75rem; align-items:center; padding:.8rem .9rem; flex-wrap:wrap;}
.brand{font-weight:800}
.spacer{flex:1}
.btn{border:1px solid rgba(255,255,255,.14); background:#191b26; color:var(--text); padding:.55rem .8rem; border-radius:12px; cursor:pointer; font-weight:600;}
.btn.primary{background:var(--accent); color:#0b0c10; border-color:transparent}
.controls{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
select, input{background:#171925; color:var(--text); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.45rem .6rem;}
.grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); padding:14px;}
.card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:14px; position:relative; overflow:hidden}
.title{font-weight:800; margin:38px 0 8px; display:flex; align-items:center; gap:.5rem}
.subtitle{color:var(--muted); font-size:.9rem; margin:.2rem 0 .6rem}
.pill{font-size:.75rem; padding:.2rem .45rem; border:1px solid rgba(255,255,255,.14); border-radius:999px; color:var(--muted)}
.actions{position:absolute; top:10px; right:10px; display:flex; gap:6px; align-items:center}
.action-btn{width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#191b26; border:1px solid rgba(255,255,255,.14); cursor:pointer; font-size:16px; line-height:1;}
.canvaswrap{margin-left:auto;margin-right:auto; display:grid; place-items:center; width:min(72vw, 260px); height:min(72vw, 260px); margin:6px auto 8px; position:relative}
.big{font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:.5px; font-size:clamp(30px, 8vw, 46px); text-align:center; margin:8px 0 2px}
.flip{display:inline-block; padding:.28rem .5rem; border-radius:12px; background:#10121a; border:1px solid rgba(255,255,255,.08); transition:transform .2s}
.progressbar{width:100%; height:10px; background:#0f1016; border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.progressbar > div{height:100%; width:0%}
.footer-row{display:flex; justify-content:space-between; align-items:center; margin-top:.5rem; gap:.5rem; flex-wrap:wrap}
.fab{position:fixed; right:14px; bottom:16px; z-index:15; background:var(--accent); color:#0b0c10; border:none; border-radius:999px; width:56px; height:56px; display:grid; place-items:center; font-size:24px; box-shadow:0 14px 28px rgba(108,123,255,.3); cursor:pointer}
dialog{width:min(980px,96vw); border:none; border-radius:16px; background:#121420; color:var(--text); padding:0}
dialog::backdrop{background:rgba(0,0,0,.6)}
.dialog-header{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); gap:8px; flex-wrap:wrap}
.dialog-body{padding:12px 14px; display:grid; gap:10px; overflow-x:hidden}
.field{display:grid; gap:6px; min-width:0}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.note{font-size:.85rem; color:var(--muted)}
.invisible{display:none !important}
.template-menu{position:fixed; right:82px; bottom:76px; background:#151726; border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:6px; width:min(320px, 94vw); display:none; z-index:50}
.template-menu.open{display:block}
.template-item{display:flex; flex-direction:column; gap:4px; padding:8px; border-radius:10px; cursor:pointer}
.template-item:hover{background:#1a1d2a}
.badge{font-size:.72rem; padding:.1rem .35rem; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:var(--muted)}