:root { --bg:#0b1220; --panel:#121a2b; --line:#243047; --text:#e8eefc; --muted:#93a0b8; --accent:#5b9dff; --ok:#3dd68c; --sans:ui-sans-serif,system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
* { box-sizing:border-box; } body { margin:0; font-family:var(--sans); background:radial-gradient(1000px 500px at 10% -10%,#172554 0%,transparent 50%),var(--bg); color:var(--text); min-height:100vh; }
a { color:var(--accent); text-decoration:none; } .layout { display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
@media (max-width:860px){ .layout{grid-template-columns:1fr;} .sidebar{position:sticky;top:0;z-index:5;} }
.sidebar { border-right:1px solid var(--line); background:rgba(18,26,43,.92); backdrop-filter:blur(8px); padding:1rem; }
.brand { font-weight:700; letter-spacing:.02em; margin-bottom:.25rem; } .brand small { display:block; color:var(--muted); font-weight:500; font-size:.78rem; margin-top:.2rem; }
.search { width:100%; margin:1rem 0; padding:.65rem .75rem; border-radius:10px; border:1px solid var(--line); background:#0d1526; color:var(--text); }
.nav { display:flex; flex-direction:column; gap:.25rem; max-height:70vh; overflow:auto; }
.nav button { text-align:left; border:0; background:transparent; color:var(--muted); padding:.55rem .65rem; border-radius:8px; cursor:pointer; font:inherit; }
.nav button:hover,.nav button.active { background:#1a2740; color:var(--text); }
.main { padding:1.25rem 1.4rem 2rem; } .panel { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem; }
h1 { font-size:1.35rem; margin:0 0 .35rem; } .desc { color:var(--muted); margin:0 0 1rem; font-size:.95rem; }
textarea,input,select { width:100%; border:1px solid var(--line); background:#0d1526; color:var(--text); border-radius:10px; padding:.7rem .8rem; font:inherit; }
textarea { min-height:140px; font-family:var(--mono); font-size:.9rem; resize:vertical; }
.row { display:flex; flex-wrap:wrap; gap:.6rem; margin:.75rem 0; }
button.act { border:0; border-radius:10px; background:var(--accent); color:#041018; font-weight:700; padding:.55rem .9rem; cursor:pointer; }
button.ghost { border:1px solid var(--line); background:transparent; color:var(--text); border-radius:10px; padding:.55rem .9rem; cursor:pointer; }
.out { margin-top:.8rem; white-space:pre-wrap; word-break:break-word; font-family:var(--mono); font-size:.88rem; background:#0d1526; border:1px solid var(--line); border-radius:10px; padding:.8rem; min-height:3rem; }
.muted { color:var(--muted); font-size:.85rem; }