:root {
  --ink: #10223e;
  --muted: #708097;
  --line: #e4eaf2;
  --surface: rgba(255,255,255,.92);
  --canvas: #f3f6fb;
  --navy: #10213d;
  --blue: #3569e8;
  --green: #16a477;
  --red: #e05e69;
  --gold: #e1a53a;
}

html { scroll-behavior: smooth; }
body { background: radial-gradient(circle at 75% 0%, #e8efff 0, transparent 32%), var(--canvas); -webkit-font-smoothing: antialiased; }
button, a, input, select { transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
button:active { transform: translateY(1px) scale(.99); }

.sidebar { background: linear-gradient(180deg,#10213d 0%,#142844 100%); box-shadow: 14px 0 45px rgba(28,48,83,.08); }
.brand-mark { border-radius: 11px; background: linear-gradient(135deg,#4277ef,#2859d8); box-shadow: 0 8px 20px rgba(52,103,229,.32); }
.nav-link { border-radius: 12px; }
.nav-link.active { background: rgba(105,142,217,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }

.main-content { max-width: 1680px; }
.topbar { height: 112px; }
.top-actions { gap: 14px; }
.user-chip { line-height: 1.2; }
.avatar, .icon-button, .primary-button, .secondary-button, .filter-button { border-radius: 12px; }
.avatar { cursor: pointer; }
.icon-button:hover, .secondary-button:hover, .filter-button:hover { border-color: #c5d2e6; box-shadow: 0 7px 20px rgba(24,44,78,.08); }
.primary-button { padding: 12px 17px; background: linear-gradient(135deg,#376ce9,#2859d6); box-shadow: 0 9px 22px rgba(44,94,220,.24); }
.primary-button:hover { background: linear-gradient(135deg,#2f64e3,#224fc8); box-shadow: 0 12px 28px rgba(44,94,220,.31); transform: translateY(-1px); }

.metric-grid { gap: 18px; }
.metric-card, .panel { border-color: rgba(211,221,235,.86); border-radius: 18px; box-shadow: 0 12px 38px rgba(35,55,88,.055); }
.metric-card { position: relative; overflow: hidden; padding: 22px; border-top: 0; }
.metric-card::after { content:""; position:absolute; width:80px; height:80px; right:-22px; top:-25px; border-radius:50%; background:currentColor; opacity:.055; }
.metric-card:hover { transform: translateY(-3px); box-shadow: 0 17px 45px rgba(35,55,88,.09); }
.metric-card strong { font-size: 27px; }
.accent-green { color: var(--green); box-shadow: inset 0 3px var(--green), 0 12px 38px rgba(35,55,88,.055); }
.accent-red { color: var(--red); box-shadow: inset 0 3px var(--red), 0 12px 38px rgba(35,55,88,.055); }
.accent-blue { color: var(--blue); box-shadow: inset 0 3px var(--blue), 0 12px 38px rgba(35,55,88,.055); }
.accent-gold { color: var(--gold); box-shadow: inset 0 3px var(--gold), 0 12px 38px rgba(35,55,88,.055); }
.metric-card p, .metric-card small { color: var(--muted); }
.metric-card strong { color: var(--ink); }

.panel-heading { padding: 23px 24px 19px; }
th { padding: 13px 24px; background: #f8fafd; }
td { padding: 17px 24px; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: #f8faff; }
.count-pill, .type-tag { border-radius: 999px; }
.search { min-height: 46px; border-radius: 13px; box-shadow: 0 8px 22px rgba(35,55,88,.045); }
.search:focus-within { border-color: #7da2f6; box-shadow: 0 0 0 4px rgba(53,105,232,.11); }

dialog { width: min(540px, calc(100% - 28px)); border-radius: 20px; overflow: hidden; box-shadow: 0 28px 95px rgba(14,31,60,.32); }
dialog[open] { animation: modalIn .2s ease-out; }
dialog::backdrop { background: rgba(10,24,46,.52); backdrop-filter: blur(5px); }
.modal-card { width: 100%; padding: 30px; display: grid; gap: 19px; }
.modal-heading { margin-bottom: 2px; }
.modal-heading h2 { font-size: 23px; }
.close-button { display: grid; place-items: center; border-radius: 10px; color: #66758b; }
.close-button:hover { background: #e8edf5; color: #1b2e4b; }
.modal-card > label { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; }
.modal-card label input, .modal-card label select { display: block; width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid #d8e0eb; border-radius: 12px; background: #fbfcfe; }
.modal-card label input:focus, .modal-card label select:focus { background: #fff; border-color: #7299f3; outline: 0; box-shadow: 0 0 0 4px rgba(53,105,232,.11); }
.two-columns { gap: 15px; }
.modal-actions { padding-top: 5px; }
.toast { border-radius: 13px; box-shadow: 0 15px 45px rgba(17,34,61,.24); }

.auth-card { border-radius: 24px; padding: 38px; box-shadow: 0 34px 100px rgba(0,0,0,.28); }
.auth-form label input { min-height: 48px; border-radius: 12px; background: #f9fbfd; }

@keyframes modalIn { from { opacity:0; transform:translateY(12px) scale(.98) } to { opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media (max-width: 700px) {
  .user-chip { display:none; }
  .hero-row { flex-direction:column; }
  .hero-row .primary-button { align-self:flex-start; }
  .modal-card { padding: 23px; }
  .two-columns { grid-template-columns:1fr; }
}