:root{
  --bg1:#eef2ff; --bg2:#fdf2f8; --bg3:#ecfeff;
  --glass:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.7);
  --text:#0f172a; --muted:#475569;
  --primary:#6366f1; --primary-2:#ec4899; --accent:#06b6d4;
  --success:#10b981; --danger:#ef4444; --warning:#f59e0b;
  --shadow:0 10px 30px rgba(15,23,42,.12);
  --radius:18px;
}
[data-theme="dark"]{
  --bg1:#0b1020; --bg2:#1a0b2e; --bg3:#082032;
  --glass:rgba(18,22,40,.55);
  --glass-border:rgba(255,255,255,.12);
  --text:#f1f5f9; --muted:#cbd5e1;
  --shadow:0 10px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter','Segoe UI',system-ui,sans-serif;color:var(--text);min-height:100vh}
body{
  background:
    radial-gradient(1200px 600px at 10% 0%, var(--bg2), transparent 60%),
    radial-gradient(1000px 600px at 90% 20%, var(--bg3), transparent 60%),
    linear-gradient(135deg,var(--bg1),var(--bg2));
  background-attachment:fixed;
  min-height:100vh;
  display:flex;flex-direction:column;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Header ===== */
.app-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:14px;padding:12px 22px;
  background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--glass-border);
  box-shadow:var(--shadow);
}
.app-header .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
.app-header .brand img{height:34px;width:34px;object-fit:cover;border-radius:8px;box-shadow:var(--shadow)}
.app-header .spacer{flex:1}
.icon-btn{
  background:var(--glass);border:1px solid var(--glass-border);
  border-radius:50%;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;
  transition:.25s transform;color:var(--text)
}
.icon-btn:hover{transform:translateY(-2px) rotate(6deg)}

/* ===== Layout ===== */
.app-shell{display:flex;flex:1;min-height:0}
.sidebar{
  width:260px;flex-shrink:0;
  background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-right:1px solid var(--glass-border);
  padding:18px 12px;transition:width .35s ease;overflow:hidden;
}
.sidebar.collapsed{width:72px}
.sidebar .menu{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.sidebar .menu a{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  color:var(--text);font-weight:500;white-space:nowrap;
  transition:.25s;
}
.sidebar .menu a:hover{background:rgba(99,102,241,.15);transform:translateX(4px);text-decoration:none}
.sidebar .menu a.active{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff}
.sidebar.collapsed .menu a span.label{display:none}
.sidebar .role{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);padding:6px 12px}
.sidebar.collapsed .role{display:none}

.main{flex:1;padding:24px;min-width:0;animation:fadeUp .5s ease}
.page-title{font-size:26px;font-weight:800;margin:0 0 18px;background:linear-gradient(90deg,var(--primary),var(--primary-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== Cards ===== */
.glass{
  background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;animation:fadeUp .5s ease;
}
.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat{padding:18px;border-radius:var(--radius)}
.stat h3{margin:0;font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.stat .v{font-size:30px;font-weight:800;margin-top:6px}

/* ===== Forms ===== */
input,select,textarea{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--glass-border);
  background:var(--glass);color:var(--text);font:inherit;outline:none;transition:.25s;
}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.25)}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:10px 0 6px}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:none;cursor:pointer;
  border-radius:12px;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:var(--shadow);transition:.25s;
}
.btn:hover{transform:translateY(-2px);text-decoration:none;color:#fff}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--glass-border)}
.btn.success{background:linear-gradient(135deg,#10b981,#06b6d4)}
.btn.danger{background:linear-gradient(135deg,#ef4444,#f97316)}
.btn.warning{background:linear-gradient(135deg,#f59e0b,#ec4899)}

/* ===== Tables ===== */
.table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:14px}
.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--glass-border)}
.table th{background:rgba(99,102,241,.12);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.table tr{transition:.2s}
.table tbody tr:hover{background:rgba(99,102,241,.08)}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em}
.badge.green{background:rgba(16,185,129,.18);color:#10b981}
.badge.red{background:rgba(239,68,68,.18);color:#ef4444}
.badge.amber{background:rgba(245,158,11,.18);color:#b45309}

/* ===== Footer ===== */
.app-footer{
  position:sticky;bottom:0;
  text-align:center;padding:10px;font-size:12px;color:var(--muted);
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--glass-border);
}

/* ===== Animations ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes rise{0%{transform:translateY(110vh) rotate(0)}100%{transform:translateY(-15vh) rotate(360deg)}}
@keyframes fall{0%{transform:translateY(-15vh) rotate(0)}100%{transform:translateY(110vh) rotate(-360deg)}}

/* ===== Doodles ===== */
.doodles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.doodle{position:absolute;font-size:34px;opacity:.5;filter:drop-shadow(0 4px 12px rgba(99,102,241,.4))}

/* ===== Flash ===== */
.flash{padding:12px 16px;border-radius:12px;margin-bottom:14px;font-weight:600}
.flash.ok{background:rgba(16,185,129,.18);color:#065f46;border:1px solid #10b98155}
.flash.err{background:rgba(239,68,68,.18);color:#7f1d1d;border:1px solid #ef444455}

/* ===== Auth ===== */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth-card{max-width:420px;width:100%}
.auth-card h1{margin:0 0 6px;font-size:26px;background:linear-gradient(90deg,var(--primary),var(--primary-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-card p.sub{color:var(--muted);margin:0 0 18px}

/* mobile */
@media(max-width:780px){
  .sidebar{position:fixed;left:0;top:64px;bottom:48px;z-index:40;transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .sidebar.collapsed{width:260px}
}