:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#101828;
  --muted:#475467;
  --line:rgba(16,24,40,.12);
  --accent:#175cd3;
  --accent2:#7a5af8;
  --shadow: 0 8px 20px rgba(16,24,40,.08);
  --sidebar:#0b1220;
  --sidebarText:#e7ecff;
  --sidebarMuted: rgba(231,236,255,.72);
  --sidebarLine: rgba(231,236,255,.14);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.app{min-height:100vh; display:grid; grid-template-columns: 300px 1fr;}
@media (max-width: 980px){ .app{grid-template-columns: 1fr;} }

.sidebar{
  position:sticky; top:0; height:100vh; overflow:auto;
  background:var(--sidebar); color:var(--sidebarText); border-right:1px solid var(--sidebarLine);
  padding:16px 14px;
}
@media (max-width: 980px){ .sidebar{position:relative;height:auto;} }

.brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.brand__name{margin:0;font-size:16px;letter-spacing:.01em}
.brand__hint{color:var(--sidebarMuted);font-size:12px}
.pill{
  display:inline-block;border:1px solid var(--line); border-radius:999px;
  padding:4px 10px;color:var(--muted);font-size:12px;background:rgba(16,24,40,.02)
}
.sidebar .pill{border-color: var(--sidebarLine); color: var(--sidebarMuted); background: rgba(231,236,255,.06)}
.sidebar__meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

.nav{display:grid;gap:8px;margin-top:14px}
.tab{
  display:flex; gap:10px; align-items:center;
  border:1px solid var(--sidebarLine);
  background:transparent;
  border-radius:12px;
  padding:10px 10px;
  color:var(--sidebarMuted);
  font-size:13px;
}
.tab:hover{border-color: rgba(231,236,255,.28); text-decoration:none; color: var(--sidebarText)}
.tab[aria-current="page"]{background: rgba(231,236,255,.08); color: var(--sidebarText); border-color: rgba(231,236,255,.22)}
.tab__dot{width:8px;height:8px;border-radius:999px;background:rgba(231,236,255,.35)}
.tab[aria-current="page"] .tab__dot{background: var(--accent2)}

.main{min-width:0}
header{position:sticky;top:0;background:rgba(246,247,251,.86);backdrop-filter: blur(10px);border-bottom:1px solid var(--line); z-index: 10;}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px}
.topbar__title{margin:0;font-size:16px}
.topbar__hint{color:var(--muted);font-size:12px}
.wrap{padding:16px 18px}

.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:var(--shadow)}
.cards{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width: 980px){ .cards{grid-template-columns: repeat(2, minmax(0, 1fr));} }
@media (min-width: 1400px){ .cards{grid-template-columns: repeat(3, minmax(0, 1fr));} }
.item-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 6px 16px rgba(16,24,40,.06)}
.item-title{margin:0;font-size:14px}
.item-meta{margin-top:6px;color:var(--muted);font-size:12px}
.item-body{margin-top:8px;color:var(--text);font-size:13px;white-space:pre-wrap}
.item-actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.pre{margin:0;white-space:pre-wrap;word-break:break-word;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:var(--text)}

.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(23,92,211,.35);background:linear-gradient(180deg, rgba(23,92,211,.12), rgba(23,92,211,.06)); color:var(--text);border-radius:12px;padding:8px 10px;font-size:13px;cursor:pointer}
.btn:hover{filter:brightness(.98)}
.field{display:grid;gap:6px}
input,button{font:inherit}
input{padding:10px;border:1px solid var(--line);border-radius:10px}

.center{max-width:560px;margin:40px auto;padding:0 18px}
.small{color:var(--muted);font-size:13px}