:root{
  --bg:#f2f4f7;
  --panel:#ffffff;
  --panel-2:#f7f8fa;
  --text:#1c2430;
  --muted:#5a6472;
  --brand:#2a5bd7;
  --shadow: 0 10px 30px rgba(0,0,0,.12);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.08);
  --radius: 14px;
  --border: 1px solid rgba(0,0,0,.08);
  --focus: 0 0 0 3px rgba(42,91,215,.22);
}

html[data-theme="night"]{
  --bg:#0d1117;
  --panel:#111827;
  --panel-2:#0f172a;
  --text:#e5e7eb;
  --muted:#a7b0bf;
  --brand:#60a5fa;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.35);
  --border: 1px solid rgba(255,255,255,.08);
  --focus: 0 0 0 3px rgba(96,165,250,.25);
}

*{box-sizing:border-box}
body{
  margin:0;
  font: 14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% 10%, rgba(42,91,215,.12), transparent 60%),
              radial-gradient(1000px 700px at 90% 30%, rgba(90,200,250,.10), transparent 55%),
              var(--bg);
}

.app-shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{
  height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.25));
  border-bottom: var(--border);
  backdrop-filter: blur(10px);
}
html[data-theme="night"] .topbar{
  background: linear-gradient(180deg, rgba(17,24,39,.85), rgba(17,24,39,.55));
}
.brand{
  font-weight:700;
  letter-spacing:.3px;
  padding:10px 14px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.45));
  box-shadow: var(--shadow-inset), 0 10px 22px rgba(0,0,0,.08);
  border: var(--border);
}
.main{flex:1; padding: 22px; max-width: 1080px; width:100%; margin: 0 auto;}
.footer{padding:18px; text-align:center; color:var(--muted)}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
html[data-theme="night"] .card{
  background: linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.75));
}

.row{display:flex; gap:14px; flex-wrap:wrap}
.col{flex:1; min-width: 260px}

label{display:block; color:var(--muted); margin: 10px 0 6px}
input,select,textarea{
  width:100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: var(--border);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow-inset);
  outline:none;
}
input:focus,select:focus,textarea:focus{box-shadow: var(--shadow-inset), var(--focus)}

.btn{
  appearance:none;
  border: var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.55));
  box-shadow: var(--shadow-inset), 0 12px 20px rgba(0,0,0,.10);
  cursor:pointer;
  color: var(--text);
  font-weight:600;
}
html[data-theme="night"] .btn{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}
.btn-primary{
  border: 1px solid rgba(42,91,215,.35);
  background: linear-gradient(180deg, rgba(42,91,215,.95), rgba(42,91,215,.62));
  color: #fff;
}
.btn-ghost{background: transparent; box-shadow:none}
.btn:active{transform: translateY(1px)}

.hint{color:var(--muted); font-size: 12px}
.alert{
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: var(--border);
  background: var(--panel-2);
}
.alert-danger{border-color: rgba(220,38,38,.25); background: rgba(220,38,38,.08)}
.alert-success{border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.10)}
.table{width:100%; border-collapse: collapse; margin-top: 12px}
.table th,.table td{padding:10px 10px; border-bottom: var(--border); text-align:left}
.badge{display:inline-block; padding: 4px 10px; border-radius: 999px; border: var(--border); background: var(--panel-2); color:var(--muted); font-size: 12px}
.nav{display:flex; gap:10px; margin: 0 0 14px}
.nav a{color:var(--text); text-decoration:none; padding: 8px 12px; border-radius: 12px; border: var(--border); background: var(--panel); box-shadow: var(--shadow-inset)}