:root {
  color-scheme: dark;
  --bg:#080b0f;
  --panel:#111722;
  --panel2:#151d2a;
  --line:rgba(230,205,136,.14);
  --text:#f1ead7;
  --muted:rgba(241,234,215,.55);
  --gold:#d8b960;
  --bad:#ef5c5c;
  --ok:#4fd18b;
  --blue:#7fb4e8;
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 20% 0%,rgba(216,185,96,.08),transparent 32%),linear-gradient(135deg,#070a0e,#0d1119 58%,#140d0b); color:var(--text); font:14px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
button,input,textarea,select { font:inherit; }
button { border:1px solid var(--line); background:rgba(216,185,96,.08); color:var(--text); border-radius:6px; padding:9px 12px; cursor:pointer; }
button:hover { border-color:rgba(216,185,96,.42); background:rgba(216,185,96,.14); }
button.danger { color:#ffd8d8; border-color:rgba(239,92,92,.34); background:rgba(239,92,92,.08); }
button.ok { color:#d9ffe9; border-color:rgba(79,209,139,.34); background:rgba(79,209,139,.08); }
input,textarea,select { width:100%; border:1px solid rgba(255,255,255,.09); background:rgba(0,0,0,.24); color:var(--text); border-radius:6px; padding:10px 11px; outline:none; }
textarea { min-height:120px; resize:vertical; }
input:focus,textarea:focus,select:focus { border-color:rgba(216,185,96,.48); box-shadow:0 0 0 3px rgba(216,185,96,.1); }
.hidden { display:none !important; }
.k { color:var(--gold); font:800 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; }
.login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(420px,100%); display:grid; gap:12px; border:1px solid var(--line); background:rgba(13,18,25,.9); padding:28px; box-shadow:0 28px 100px rgba(0,0,0,.55); }
.login-card h1 { margin:0 0 8px; font-size:28px; }
.login-card button { height:44px; font-weight:900; }
.error { min-height:18px; color:#ffaaaa; font-size:12px; }
.app { min-height:100vh; display:grid; grid-template-columns:220px minmax(0,1fr); }
.side { border-right:1px solid var(--line); background:linear-gradient(180deg,rgba(14,20,29,.98),rgba(8,11,16,.98)); padding:18px 12px; display:flex; flex-direction:column; gap:7px; }
.brand { padding:8px 10px 20px; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:10px; }
.brand .t { margin-top:7px; font-size:22px; font-weight:950; }
.nav { width:100%; text-align:left; border-color:transparent; background:transparent; color:rgba(241,234,215,.68); }
.nav.active { border-color:var(--line); background:rgba(216,185,96,.12); color:#fff; font-weight:900; }
.nav.ghost { margin-top:auto; color:rgba(241,234,215,.45); }
.main { min-width:0; padding:24px; }
.top { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.top h2 { margin:5px 0 0; font-size:28px; }
.overview { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.chip { border:1px solid var(--line); border-radius:6px; padding:8px 10px; background:rgba(255,255,255,.035); color:var(--muted); font-size:12px; }
.chip strong { color:#fff; margin-left:6px; }
.content { display:grid; gap:14px; }
.panel { border:1px solid var(--line); background:rgba(15,21,30,.78); border-radius:8px; overflow:hidden; box-shadow:0 22px 70px rgba(0,0,0,.28); }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025); }
.panel-head h3 { margin:0; font-size:16px; }
.panel-body { padding:16px; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); vertical-align:top; }
th { color:rgba(241,234,215,.46); font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
td { color:rgba(241,234,215,.78); font-size:13px; }
tr:hover td { background:rgba(255,255,255,.025); }
.row-actions { display:flex; flex-wrap:wrap; gap:8px; }
.pill { display:inline-flex; align-items:center; padding:3px 7px; border:1px solid rgba(255,255,255,.1); border-radius:999px; color:var(--muted); font-size:11px; }
.pill.ok { color:#c8ffe0; border-color:rgba(79,209,139,.32); }
.pill.bad { color:#ffd5d5; border-color:rgba(239,92,92,.32); }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.field { display:grid; gap:6px; }
.field label { color:var(--muted); font-size:12px; }
.field.full { grid-column:1/-1; }
.detail { display:grid; grid-template-columns:280px minmax(0,1fr); gap:14px; }
.list { display:grid; gap:8px; max-height:380px; overflow:auto; }
.item { border:1px solid rgba(255,255,255,.08); border-radius:6px; padding:10px 12px; background:rgba(255,255,255,.028); }
.item .meta { color:rgba(241,234,215,.4); font-size:11px; margin-bottom:6px; }
.item .title { font-weight:900; margin-bottom:4px; }
.empty { color:rgba(241,234,215,.35); padding:28px; text-align:center; }
@media (max-width:900px) {
  .app { grid-template-columns:1fr; }
  .side { position:sticky; top:0; z-index:2; flex-direction:row; overflow:auto; border-right:none; border-bottom:1px solid var(--line); }
  .brand { display:none; }
  .nav { width:auto; white-space:nowrap; }
  .main { padding:16px; }
  .top,.detail { display:grid; grid-template-columns:1fr; }
  .grid,.form-grid { grid-template-columns:1fr; }
}