:root { color-scheme: dark; --bg:#101214; --panel:#181b1f; --line:#30363d; --text:#f1f3f5; --muted:#929aa3; --accent:#e5b94e; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif; letter-spacing:0; }
.topbar { height:64px; display:flex; align-items:center; gap:16px; padding:0 24px; border-bottom:1px solid var(--line); background:#14171a; }
.topbar a { display:grid; width:32px; height:32px; place-items:center; border:1px solid var(--line); color:var(--muted); text-decoration:none; font-size:20px; }
.topbar strong { font-size:16px; }
.topbar span { margin-left:auto; color:var(--accent); font:600 13px Consolas,monospace; }
main { min-height:calc(100vh - 64px); display:grid; grid-template-columns:240px 1fr; }
aside { padding:18px; border-right:1px solid var(--line); background:#14171a; }
aside button { width:100%; padding:12px; border:1px solid var(--line); background:var(--panel); color:var(--text); text-align:left; }
aside button.active { border-left:3px solid var(--accent); }
.workspace { display:grid; place-items:center; padding:32px; }
.empty { width:min(460px,100%); padding:44px; border:1px solid var(--line); background:var(--panel); text-align:center; }
.empty > span { color:var(--accent); font:600 13px Consolas,monospace; }
h1 { margin:14px 0 8px; font-size:28px; } p,small { color:var(--muted); }
.empty button { display:block; width:160px; margin:28px auto 14px; padding:11px; border:1px solid var(--line); background:#22262b; color:#686f77; }
small { display:block; font-size:12px; }
@media (max-width:700px) { main { grid-template-columns:1fr; } aside { display:none; } .empty { padding:32px 22px; } }