: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.icon{display:flex; align-items:center; gap:.45rem;}
.btn.icon .icon{font-size:1.1rem; line-height:1;}
.btn.icon .label{line-height:1;}
.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}
.dot{display:inline-block; width:10px; height:10px; border-radius:999px; background:var(--accent); box-shadow:0 0 20px rgba(108,123,255,.2); flex-shrink:0}
.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}
.settings-body{gap:16px;}
.settings-section{display:grid; gap:12px;}
.settings-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.settings-summary{display:grid; gap:4px;}
.settings-value{font-weight:700;}
.settings-role{margin-top:auto; font-size:.9rem; color:var(--muted); border-top:1px solid rgba(255,255,255,.08); padding-top:12px;}
.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)}
.card.color-style{transition:background .6s ease, color .3s ease, border-color .3s ease}
.split-wrap{display:grid; gap:12px; margin-top:12px}
.split-wrap.split-count-3{grid-template-columns:repeat(auto-fit, minmax(180px, 1fr))}
.split-item{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:10px; transition:background .3s ease, border-color .3s ease}
.card.color-style .split-item{border-color:rgba(0,0,0,.18)}
.split-item-label{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700}
.split-item .canvaswrap{width:100%; max-width:220px; margin:0 auto}
.split-item .canvaswrap canvas{width:100% !important}
.split-note{font-size:.78rem; color:var(--muted)}
.split-color-preview{position:relative; border-radius:12px; height:140px; display:flex; align-items:flex-end; justify-content:space-between; padding:10px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(135deg,#6c7bff 0%,#6c7bff 100%); overflow:hidden}
.split-color-preview.light{color:#05070b}
.split-color-preview.dark{color:#f7f8ff}
.split-color-chips{display:flex; gap:6px}
.split-color-chip{font-size:.75rem; font-weight:600; padding:4px 8px; border-radius:999px; background:rgba(0,0,0,.35); color:#f7f8ff}
.split-color-preview.light .split-color-chip{background:rgba(255,255,255,.68); color:#05070b}