
:root{
  --bg:#071016;--panel:#0d1820;--panel2:#101f29;--line:rgba(76,230,255,.18);
  --cyan:#4ce6ff;--green:#67f6a0;--amber:#ffbf4c;--ink:#e9f5f8;--muted:#89a4ad;
  --paper:#f6f0df;--paper2:#fffdf5;--inkpaper:#222;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 0,#142832 0,#071016 52%,#03070a 100%);color:var(--ink);font:14px "IBM Plex Mono",monospace}
button,input,select,textarea{font:inherit}
button{border:1px solid var(--line);background:#12232d;color:var(--ink);border-radius:7px;padding:8px 11px;cursor:pointer}
button:hover{border-color:var(--cyan);color:var(--cyan);background:#15313d}
button.primary{border-color:var(--cyan);color:var(--cyan);background:linear-gradient(135deg,rgba(76,230,255,.16),rgba(76,230,255,.04))}
button.danger{border-color:rgba(255,100,100,.4);color:#ff9d9d}
.topbar{height:58px;display:flex;align-items:center;gap:9px;padding:0 12px;border-bottom:1px solid var(--line);background:rgba(5,12,17,.94);backdrop-filter:blur(14px);position:relative;z-index:20}
.brand{display:flex;align-items:center;gap:8px;color:var(--cyan);text-decoration:none;font:700 .78rem Orbitron,sans-serif;white-space:nowrap}
.brand img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.spacer{flex:1}
.status{font-size:.68rem;color:var(--muted)}
.toolstrip{display:flex;gap:6px;flex-wrap:wrap;padding:8px;border-bottom:1px solid var(--line);background:rgba(9,20,27,.94);position:relative;z-index:15}
.toolstrip label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.67rem}
.workspace{position:absolute;top:58px;bottom:0;left:0;right:0;overflow:auto}
.toolstrip~.workspace{top:105px}
.empty{min-height:100%;display:grid;place-items:center;padding:30px;text-align:center;color:var(--muted)}
.card{width:min(900px,94vw);padding:24px;border:1px solid var(--line);border-radius:14px;background:rgba(13,24,32,.88);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.card h1{margin:0 0 10px;font:800 1.35rem Orbitron,sans-serif;color:var(--cyan)}
.card p{line-height:1.7}
.file-label{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid var(--cyan);border-radius:7px;color:var(--cyan);cursor:pointer}
.hidden{display:none!important}
select,input[type=text],input[type=number]{background:#0a171e;border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:7px}
.range{accent-color:var(--cyan)}
.notice{font-size:.68rem;color:var(--muted);line-height:1.5}
@media(max-width:760px){
  .topbar{height:auto;min-height:58px;flex-wrap:wrap;padding:7px}
  .brand{font-size:.66rem}.brand img{width:29px;height:29px}
  .status{display:none}
  .toolstrip{max-height:118px;overflow:auto}
  .workspace,.toolstrip~.workspace{top:125px}
}
