:root{
  --bg:#080808;--bg-2:#0d0d0d;--panel:#101010;--panel-2:#141414;--panel-3:#181818;
  --border:rgba(255,255,255,.08);--border-h:rgba(255,255,255,.22);--border-on:rgba(255,255,255,.4);
  --text:#f4f4f4;--muted:#a4a4a4;--dim:#666;
  --fd:'Geist',system-ui,sans-serif;--fb:'Inter',system-ui,sans-serif;--fm:'Geist Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);--top-h:78px;
  /* liquid glass */
  --glass-bg:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 48%, rgba(255,255,255,.04));
  --glass-border:rgba(255,255,255,.14);
  --glass-blur:blur(20px) saturate(160%);
  --glass-shine:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.3);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--fb);-webkit-font-smoothing:antialiased;overflow:hidden}
::selection{background:rgba(255,255,255,.16)}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#1e1e1e;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#2a2a2a}

.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* liquid glass surface */
.glass{
  position:relative;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shine), 0 10px 30px rgba(0,0,0,.4);
  overflow:hidden;
}
.glass::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,.12), transparent 55%);
}

/* top bar - floating cornered glass box */
.top{
  position:relative;z-index:3;margin:16px 16px 0;height:calc(var(--top-h) - 16px);
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;
  border-radius:16px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shine), 0 8px 26px rgba(0,0,0,.45);
}
.top::before{
  content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:radial-gradient(140% 90% at 10% -10%, rgba(255,255,255,.14), transparent 50%);
}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--fd);font-weight:600;letter-spacing:-.02em;font-size:1.02rem;position:relative;z-index:1}
.brand-pfp{width:24px;height:24px;border-radius:7px;object-fit:cover;filter:grayscale(1);transition:filter .3s var(--ease)}
.brand:hover .brand-pfp{filter:grayscale(0)}
.top-right{display:flex;align-items:center;gap:16px;position:relative;z-index:1}
.top-tag{font-family:var(--fm);font-size:.74rem;color:var(--text);padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.back{font-family:var(--fm);font-size:.74rem;color:var(--muted);transition:color .2s}
.back:hover{color:#fff}

/* layout */
.layout{position:relative;z-index:1;height:calc(100vh - var(--top-h));display:grid;grid-template-columns:236px 1fr 340px}

/* left rail */
.rail{border-right:1px solid var(--border);overflow-y:auto;padding:20px 18px}
.rail-group{margin-bottom:18px}
.rail-group:not(:first-child){padding-top:18px;border-top:1px solid var(--border)}
.type-list{display:flex;flex-direction:column;gap:4px}
.type-btn{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;border:1px solid transparent;background:none;color:var(--muted);font-family:var(--fb);font-size:.88rem;cursor:pointer;text-align:left;transition:all .18s var(--ease)}
.type-btn:hover{background:var(--panel-2);color:var(--text)}
.type-btn.active{background:var(--panel-2);border-color:var(--border-h);color:var(--text)}
.type-btn .ti{width:16px;height:16px;flex-shrink:0;opacity:.7}
.type-btn.active .ti{opacity:1}

.rail-sub{font-family:var(--fm);font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;color:var(--dim);margin-bottom:10px}
.font-list{display:flex;flex-direction:column;gap:5px}
.font-btn{padding:8px 11px;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--muted);font-size:.84rem;cursor:pointer;text-align:left;transition:all .18s var(--ease)}
.font-btn:hover{border-color:var(--border-h);color:var(--text)}
.font-btn.active{border-color:var(--border-on);color:var(--text);background:var(--panel-2)}
.style-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.style-btn{padding:9px 8px;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--muted);font-family:var(--fm);font-size:.7rem;cursor:pointer;text-align:center;transition:all .18s var(--ease);text-transform:lowercase;letter-spacing:.02em}
.style-btn:hover{border-color:var(--border-h);color:var(--text)}
.style-btn.active{border-color:var(--border-on);color:var(--text);background:var(--panel-2)}

/* stage */
.stage-wrap{display:flex;flex-direction:column;overflow:hidden}
.stage{flex:1;display:grid;place-items:center;overflow:auto;padding:40px;
  background:
    linear-gradient(var(--stage-grid,rgba(255,255,255,.022)) 1px,transparent 1px),
    linear-gradient(90deg,var(--stage-grid,rgba(255,255,255,.022)) 1px,transparent 1px);
  background-size:26px 26px;background-color:var(--stage-bg,#0b0b0b);transition:background-color .25s var(--ease)}
.preview-mount{display:grid;place-items:center;min-width:120px}
.stage-bar{flex-shrink:0;height:54px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.bg-swatches{display:flex;gap:7px}
.bg-sw{width:24px;height:24px;border-radius:7px;border:1px solid var(--border);cursor:pointer;transition:transform .15s,border-color .2s}
.bg-sw:hover{transform:scale(1.1);border-color:var(--border-h)}
.bg-sw.active{border-color:var(--border-on)}
.stage-meta{font-family:var(--fm);font-size:.72rem;color:var(--dim)}

/* panel */
.panel{border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 0}
.panel-head .eyebrow{margin-bottom:0}
.reset{font-family:var(--fm);font-size:.7rem;color:var(--dim);background:none;border:none;cursor:pointer;transition:color .2s}
.reset:hover{color:var(--text)}
.fields{flex:1;overflow-y:auto;padding:18px 20px}

/* field controls */
.field{margin-bottom:16px}
.field:last-child{margin-bottom:4px}
.field-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;gap:10px}
.field-row label{font-size:.82rem;color:var(--muted)}
.field-row .val{font-family:var(--fm);font-size:.72rem;color:var(--text)}
.fgroup-label{font-family:var(--fm);font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin:22px 0 12px;padding-top:16px;border-top:1px solid var(--border)}
.fgroup-label:first-child{margin-top:0;padding-top:0;border-top:none}

input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:#272727;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;cursor:pointer;transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18)}
input[type=text],input[type=number]{width:100%;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:9px 11px;color:var(--text);font-family:var(--fb);font-size:.85rem;outline:none;transition:border-color .2s}
input[type=text]:focus,input[type=number]:focus{border-color:var(--border-h)}
.color-row{display:flex;align-items:center;gap:9px}
.color-row input[type=color]{width:34px;height:34px;flex-shrink:0;border:none;border-radius:8px;background:none;cursor:pointer;padding:0}
.color-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.color-row input[type=color]::-webkit-color-swatch{border:1px solid var(--border);border-radius:8px}
.color-row .hex{flex:1;font-family:var(--fm);text-transform:uppercase;font-size:.82rem}
.seg{display:flex;gap:4px;background:var(--panel-2);border:1px solid var(--border);border-radius:9px;padding:4px}
.seg button{flex:1;padding:7px 4px;border-radius:6px;border:none;background:none;color:var(--muted);font-family:var(--fm);font-size:.72rem;cursor:pointer;transition:all .15s}
.seg button:hover{color:var(--text)}
.seg button.active{background:var(--panel-3);color:var(--text)}
.switch{position:relative;width:42px;height:24px;border-radius:999px;background:var(--panel-3);border:1px solid var(--border);cursor:pointer;transition:background .2s,border-color .2s;flex-shrink:0}
.switch.on{background:var(--text);border-color:var(--text)}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .2s var(--ease),background .2s}
.switch.on::after{transform:translateX(18px);background:#080808}

/* code */
.code-block{flex-shrink:0;border-top:1px solid var(--border);background:#0a0a0a}
.code-tabs{display:flex;align-items:center;gap:4px;padding:10px 12px 0}
.code-tab{padding:6px 11px;border-radius:7px 7px 0 0;border:none;background:none;color:var(--dim);font-family:var(--fm);font-size:.72rem;cursor:pointer;transition:color .18s}
.code-tab:hover{color:var(--muted)}
.code-tab.active{color:var(--text);background:#101010}
.copy{margin-left:auto;padding:7px 14px;border-radius:8px;color:var(--text);font-family:var(--fm);font-size:.72rem;cursor:pointer;transition:all .18s;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.copy:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.copy.done{background:#e9e9ec;color:#080808;border-color:#e9e9ec}
.code{padding:12px 16px 16px;font-family:var(--fm);font-size:.7rem;line-height:1.6;color:var(--muted);white-space:pre;overflow:auto;max-height:200px;background:#101010}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(18px);background:#fff;color:#080808;padding:10px 18px;border-radius:10px;font-size:.85rem;font-weight:500;opacity:0;transition:all .3s var(--ease);pointer-events:none;z-index:60}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:1080px){
  .layout{grid-template-columns:200px 1fr 300px}
}
@media(max-width:860px){
  body{overflow:auto}
  .layout{grid-template-columns:1fr;height:auto}
  .rail,.panel{border:none;border-bottom:1px solid var(--border)}
  .stage{min-height:300px}
}