:root{
  --bg: #f9fafb;
  --panel: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --ring: rgba(0,0,0,.08);
  --accent: #2563eb;
  --accent-contrast: #ffffff;
}

body.dark{
  --bg: #0f1116;
  --panel: #1a1c23;
  --text: #f9fafb;
  --muted: #9ca3af;
  --ring: rgba(255,255,255,.1);
  --accent: #60a5fa;
  --accent-contrast: #0f1116;
}

/* Base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  font-size:15px;
  letter-spacing:-0.2px;
  line-height:1.6;
}

/* Background pattern */
.bg-pattern{
  position:fixed; inset:0; z-index:-2;
  pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg width='128' height='128' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='12' y='28' font-size='16' font-family='ui-monospace,SFMono-Regular,Menlo,monospace' fill='%23111827'%3Eroot:%3C/text%3E%3Ctext x='12' y='92' font-size='16' font-family='ui-monospace,SFMono-Regular,Menlo,monospace' fill='%23111827'%3E@%3C/text%3E%3C/svg%3E");
  background-size:128px 128px;
}
body.dark .bg-pattern{filter:invert(1);opacity:.08;}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:24px}
.app{display:flex;gap:24px;min-height:100dvh;padding:24px;}

/* Sidebar */
.sidebar-wrap{position:sticky;top:24px;height:calc(100dvh - 48px);}
.sidebar{
  width:260px;display:flex;flex-direction:column;gap:12px;
  background:rgba(255,255,255,0.85);
  border:1px solid var(--ring);
  border-radius:24px;
  padding:16px;
  backdrop-filter:blur(10px) saturate(120%);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:transform .25s ease,box-shadow .25s ease;
}
body.dark .sidebar{background:rgba(26,28,35,0.85);}
.sidebar:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.12);}

.brand{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:12px;border-bottom:1px solid var(--ring);
}
.brand-id{display:flex;align-items:center;gap:10px}
.brand-logo{
  width:36px;height:36px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#6366f1,#a855f7);
  color:#fff;box-shadow:0 6px 16px rgba(99,102,241,.35);
}
.brand small{color:var(--muted);display:block;margin-top:2px}

/* Nav */
.nav{list-style:none;margin:8px 0 0 0;padding:0;display:grid;gap:6px;}
.nav a{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--text);
  padding:10px 12px;border-radius:16px;
  border:1px solid transparent;
  transition:all .25s ease;
}
.nav a:hover{background:rgba(0,0,0,.04);border-color:var(--ring);transform:translateX(3px);}
body.dark .nav a:hover{background:rgba(255,255,255,.06);}
.nav a.active{
  background:var(--accent);
  color:var(--accent-contrast);
}

/* Buttons */
.btn,.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:16px;padding:10px 14px;cursor:pointer;
  font-weight:500;text-decoration:none;
  transition:all .25s ease;
}
.btn{background:var(--accent);color:var(--accent-contrast);border:none;}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--ring);}
.btn-ghost:hover{background:rgba(0,0,0,.04);}
body.dark .btn-ghost:hover{background:rgba(255,255,255,.06);}

/* Card */
.card{
  background:color-mix(in oklab, var(--panel) 90%, transparent);
  border:1px solid var(--ring);
  border-radius:24px;padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  transition:transform .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08);}
.loader-card{display:flex;align-items:center;gap:10px;}

/* Grid */
.grid{display:grid;gap:16px;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:900px){.grid-2{grid-template-columns:1fr;}}

/* Header */
.header h1{margin-bottom:4px;font-size:1.8rem;}
.header p{color:var(--muted);}
.badge{
  font:12px ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:4px 8px;border-radius:12px;
  background:rgba(0,0,0,.06);
}
body.dark .badge{background:rgba(255,255,255,.08);}

/* Sidebar info blocks */
.side-info{display:grid;gap:10px;margin-top:auto;}
.side-info .block{border:1px solid var(--ring);border-radius:18px;padding:12px;}
.side-info .title{font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.muted{color:var(--muted);font-size:13px;}

/* Loader overlay */
.loader{
  position:fixed;inset:0;display:grid;place-items:center;
  background:color-mix(in oklab,var(--panel) 80%,transparent);
  backdrop-filter:blur(4px);
  z-index:9999;transition:opacity .25s ease;
}
.loader.hidden{opacity:0;pointer-events:none;}
.spinner{
  width:20px;height:20px;border-radius:999px;
  border:2px solid color-mix(in oklab,var(--muted) 60%,transparent);
  border-top-color:transparent;
  animation:spin 1.3s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* Footer */
footer{
  text-align:center;
  padding:20px 0;
  font-size:13px;
  color:var(--muted);
  border-top:1px solid var(--ring);
  margin-top:20px;
}