:root{
  --bg-900:#040615;
  --bg-850:#070a1f;
  --bg-gradient:radial-gradient(120% 120% at 20% 0%,rgba(108,92,231,.30) 0%,rgba(108,92,231,0) 45%),radial-gradient(120% 120% at 110% 10%,rgba(79,209,197,.20) 0%,rgba(79,209,197,0) 55%),linear-gradient(145deg,#040615 0%,#0a1026 38%,#101735 70%,#101a42 100%);
  --surface-glass:rgba(18,23,45,.72);
  --surface-raised:rgba(20,26,52,.82);
  --surface-soft:rgba(24,32,62,.68);
  --border-soft:rgba(126,138,181,.18);
  --border-strong:rgba(138,150,197,.28);
  --shadow-lg:0 40px 80px rgba(4,6,21,.65);
  --shadow-md:0 22px 46px rgba(8,12,35,.46);
  --shadow-sm:0 12px 28px rgba(10,16,38,.34);
  --brand:#7b6dff;
  --brand-strong:#9b8cff;
  --brand-muted:rgba(123,109,255,.16);
  --brand-border:rgba(123,109,255,.35);
  --success:#38e3b0;
  --danger:#ff7b92;
  --warning:#ffca63;
  --text-strong:#f5f7ff;
  --text-medium:#c8d0ef;
  --text-subtle:rgba(200,208,239,.72);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --radius-xs:9px;
  --container-max:1120px;
}

*{box-sizing:border-box;font-family:"Inter","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
html,body{margin:0;padding:0;background:var(--bg-gradient);color:var(--text-strong)}
a{color:inherit;text-decoration:none}
a:hover{opacity:.85}

body.dashboard-root{min-height:100vh;background:var(--bg-gradient);color:var(--text-strong)}
body.container{min-height:100vh;padding:32px 18px}
body.dashboard-root::before,
body.dashboard-root::after{
  content:'';
  position:fixed;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(0);
  opacity:.45;
  z-index:-2;
  pointer-events:none;
  transition:transform 15s ease;
}
body.dashboard-root::before{
  top:-120px;
  left:-120px;
  background:radial-gradient(circle at center,rgba(123,109,255,.48) 0%,rgba(123,109,255,0) 70%);
  animation:float-slow 26s ease-in-out infinite;
}
body.dashboard-root::after{
  bottom:-140px;
  right:-140px;
  background:radial-gradient(circle at center,rgba(79,209,197,.4) 0%,rgba(79,209,197,0) 72%);
  animation:float-slow 32s ease-in-out infinite reverse;
}

.dash-shell{max-width:var(--container-max);margin:32px auto 80px;padding:0 28px}
.dash-shell>:first-child{margin-top:0}

/* Navigation */
.nav{display:flex;align-items:center;gap:14px;margin:0 auto 32px;padding:12px 18px;border-radius:var(--radius-lg);background:var(--surface-glass);backdrop-filter:blur(20px);border:1px solid var(--border-soft);box-shadow:var(--shadow-sm);max-width:var(--container-max)}
.nav a{position:relative;padding:10px 18px;border-radius:var(--radius-sm);font-weight:600;letter-spacing:.01em;color:var(--text-subtle);transition:color .2s ease,background .2s ease,box-shadow .2s ease}
.nav a:hover{color:var(--text-strong);background:rgba(136,128,255,.12)}
.nav a.active{color:var(--text-strong);background:var(--brand-muted);box-shadow:0 14px 30px rgba(123,109,255,.35)}
.nav a.active::after{content:'';position:absolute;left:16px;right:16px;bottom:8px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--brand-strong),rgba(123,109,255,.35))}
.nav a.right{margin-left:auto;color:#ffb3c2}
.nav a.right:hover{background:rgba(255,123,146,.16)}

/* Page header / hero */
.page-header{position:relative;display:flex;flex-wrap:wrap;gap:32px;margin:0 auto 36px;padding:36px;border-radius:var(--radius-xl);background:var(--surface-raised);border:1px solid var(--border-soft);box-shadow:var(--shadow-lg);overflow:hidden;isolation:isolate}
.page-header::before{content:'';position:absolute;top:-140px;right:-160px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle at center,rgba(123,109,255,.45) 0%,rgba(123,109,255,0) 70%);opacity:.9;z-index:-1}
.page-header::after{content:'';position:absolute;bottom:-160px;left:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle at center,rgba(79,209,197,.35) 0%,rgba(79,209,197,0) 70%);opacity:.85;z-index:-1}
.page-header__content{flex:1;min-width:260px;max-width:680px}
.page-header__kicker{display:inline-flex;gap:8px;align-items:center;padding:6px 16px;border-radius:999px;background:rgba(123,109,255,.16);color:var(--text-medium);font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.page-header__text{max-width:660px;display:flex;flex-direction:column;gap:12px}
.page-header h1{margin:0;font-size:38px;line-height:1.2;font-weight:800;letter-spacing:.01em}
.page-header p{margin:14px 0 0;font-size:16px;line-height:1.65;color:var(--text-subtle);max-width:560px}
.page-header__meta{margin-top:18px;display:flex;flex-direction:column;gap:16px}
.header-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

.header-button{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:999px;font-weight:600;letter-spacing:.01em;background:linear-gradient(135deg,#9b8cff 0%,#7b6dff 60%,#6a5cff 100%);color:#0d0b23;border:1px solid transparent;box-shadow:0 26px 44px rgba(123,109,255,.45);transition:transform .25s ease,box-shadow .25s ease,opacity .2s ease}
.header-button:hover{transform:translateY(-3px);box-shadow:0 30px 52px rgba(123,109,255,.55)}
.header-button.secondary{background:rgba(123,109,255,.12);color:var(--text-strong);border-color:var(--brand-border);box-shadow:0 20px 38px rgba(14,19,42,.48)}
.header-button.secondary:hover{background:rgba(123,109,255,.2)}
.header-button.ghost{background:transparent;color:var(--text-medium);border:1px solid rgba(153,164,210,.32);box-shadow:none}
.header-button.ghost:hover{color:var(--text-strong);background:rgba(153,164,210,.14)}

.page-header--dashboard{align-items:flex-start;justify-content:space-between}
.page-header__stats{display:grid;gap:18px;min-width:260px}
.metric-card,.metric-tile{padding:18px 20px;border-radius:var(--radius-lg);background:var(--surface-soft);border:1px solid var(--border-strong);box-shadow:var(--shadow-sm)}
.metric-tile span{display:block}
.metric-tile__label{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-subtle)}
.metric-tile__value{margin-top:6px;font-size:34px;font-weight:800;color:var(--text-strong)}
.metric-tile__hint{margin-top:10px;font-size:13px;color:var(--text-medium)}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.stat-card{position:relative;padding:18px 20px;border-radius:var(--radius-md);background:rgba(12,18,38,.78);border:1px solid rgba(153,164,210,.14);box-shadow:0 18px 30px rgba(8,12,32,.36);overflow:hidden}
.stat-card::after{content:'';position:absolute;inset:-60px auto auto -50px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at center,rgba(123,109,255,.26) 0%,rgba(123,109,255,0) 70%);opacity:.6;pointer-events:none;transform:rotate(12deg)}
.stat-card__label{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-subtle)}
.stat-card__value{margin-top:10px;font-size:30px;font-weight:700;color:var(--text-strong)}
.stat-card__hint{margin-top:10px;font-size:13px;color:var(--text-medium)}
.stat-card__trend{margin-top:12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(123,109,255,.8);display:inline-flex;align-items:center;gap:6px}
.stat-card--positive::after{background:radial-gradient(circle at center,rgba(56,227,176,.24) 0%,rgba(56,227,176,0) 70%)}
.stat-card--positive .stat-card__trend{color:var(--success)}
.stat-card--danger::after{background:radial-gradient(circle at center,rgba(255,123,146,.28) 0%,rgba(255,123,146,0) 70%)}
.stat-card--danger .stat-card__trend{color:var(--danger)}

/* Cards & panels */
.card{background:var(--surface-raised);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:30px;margin:32px auto;box-shadow:var(--shadow-md);width:100%;max-width:var(--container-max)}
.card h2{margin:0 0 18px;font-size:24px;font-weight:700;letter-spacing:.015em}
.card h3{margin:24px 0 14px;font-size:19px;font-weight:600}
.card:not(:first-of-type){margin-top:22px}
.panel-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:42px}
.panel-card{background:var(--surface-raised);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:28px 30px;box-shadow:var(--shadow-sm)}
.panel-card h3{margin:0 0 20px;font-size:20px;font-weight:700;letter-spacing:.02em}

.empty-state{padding:22px;border-radius:var(--radius-md);background:rgba(123,109,255,.08);border:1px dashed rgba(123,109,255,.35);color:var(--text-medium)}

.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:rgba(123,109,255,.18);color:var(--text-medium);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.badge-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:999px;background:rgba(56,227,176,.16);color:var(--success);font-weight:600;font-size:13px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--radius-xs);background:rgba(153,164,210,.14);color:var(--text-medium);font-size:13px}
.site-link{color:var(--text-strong);font-weight:600}
.site-link:hover{color:var(--brand-strong)}

/* Tables */
.table{width:100%;border-collapse:collapse;margin-top:16px}
.table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.2em;color:var(--text-subtle);padding-bottom:12px;border-bottom:1px solid rgba(153,164,210,.22);text-align:left}
.table tbody td{padding:16px 0;border-bottom:1px solid rgba(153,164,210,.16);font-size:15px;color:var(--text-strong)}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:rgba(123,109,255,.08)}

/* Forms */
label{display:block;margin:14px 0;font-size:15px;color:var(--text-medium)}
input,select,textarea{width:100%;padding:13px 14px;border-radius:var(--radius-sm);border:1px solid rgba(126,138,181,.28);background:rgba(10,15,32,.78);color:var(--text-strong);font-size:15px;transition:border .2s ease,box-shadow .2s ease,background .2s ease}
input::placeholder,textarea::placeholder{color:rgba(200,208,239,.4)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-strong);box-shadow:0 0 0 3px rgba(123,109,255,.24);background:rgba(14,20,40,.92)}
textarea{min-height:120px;resize:vertical}
fieldset{border:1px solid rgba(126,138,181,.26);border-radius:var(--radius-md);padding:20px;margin:18px 0;background:rgba(18,24,46,.62)}
legend{padding:0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:var(--text-subtle)}

button{display:inline-flex;justify-content:center;align-items:center;gap:8px;background:linear-gradient(135deg,#9b8cff 0%,#7b6dff 58%,#6a5cff 100%);border:none;padding:13px 26px;border-radius:999px;color:#0d0b23;font-weight:700;letter-spacing:.01em;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,opacity .2s ease}
button:hover{transform:translateY(-3px);box-shadow:0 28px 48px rgba(123,109,255,.45)}
button.secondary{background:rgba(123,109,255,.14);color:var(--text-strong);box-shadow:0 20px 36px rgba(14,20,42,.48)}
button.secondary:hover{background:rgba(123,109,255,.22)}
button.danger{background:linear-gradient(135deg,#ff9ab0 0%,#ff7b92 70%,#ff5f7c 100%);color:#1f0711;box-shadow:0 24px 42px rgba(255,123,146,.45)}
button.danger:hover{box-shadow:0 28px 52px rgba(255,123,146,.55)}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid[data-cols="1"]{grid-template-columns:1fr}
.inline-form{display:flex;gap:10px;align-items:center}
.inline-form input[type=text]{flex:1;min-width:160px}

.alert{padding:16px 18px;border-radius:var(--radius-md);margin:18px 0;background:rgba(123,109,255,.08);border:1px solid rgba(123,109,255,.28);color:var(--text-subtle)}
.alert-ok{background:rgba(56,227,176,.12);border-color:rgba(56,227,176,.32);color:var(--success)}
.alert-err{background:rgba(255,123,146,.12);border-color:rgba(255,123,146,.36);color:#ffc6d1}

.preview{border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:20px;background:rgba(10,16,34,.74);box-shadow:0 14px 32px rgba(9,14,32,.42)}

.form-check-row{display:flex;align-items:center;gap:10px;padding:6px 0;color:var(--text-medium);font-size:14px}
.form-check-row input{margin:0}

.form-actions{grid-column:1/-1;display:flex;gap:14px;flex-wrap:wrap}
.form-actions button{min-width:140px}

.link-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:rgba(153,164,210,.14);color:var(--text-strong);font-size:13px;font-weight:600;letter-spacing:.02em;transition:background .2s ease,box-shadow .2s ease,opacity .2s ease}
.link-pill:hover{background:rgba(153,164,210,.22);box-shadow:0 10px 22px rgba(12,18,38,.35)}
.link-pill--primary{background:rgba(123,109,255,.18);color:var(--text-strong)}
.link-pill--primary:hover{background:rgba(123,109,255,.26);box-shadow:0 12px 26px rgba(123,109,255,.32)}
.link-pill--danger{background:rgba(255,123,146,.18);color:#ffd5de}
.link-pill--danger:hover{background:rgba(255,123,146,.28);box-shadow:0 12px 26px rgba(255,123,146,.28)}

.floating-grid{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;opacity:.28;z-index:-1}
.floating-grid::before{content:'';position:absolute;inset:-150px;width:140%;height:140%;background-image:linear-gradient(rgba(123,109,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(123,109,255,.06) 1px,transparent 1px);background-size:48px 48px;transform:rotate(5deg);animation:drift-grid 40s linear infinite}

/* Responsive */
@media (max-width:1080px){
  .dash-shell{padding:0 20px}
}
@media (max-width:960px){
  .nav{flex-wrap:wrap;justify-content:center}
  .page-header{padding:28px}
  .page-header--dashboard{flex-direction:column;gap:32px}
  .page-header__stats{width:100%;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .grid{grid-template-columns:1fr}
  .grid[data-cols="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  body.container{padding:26px 16px}
  .dash-shell{padding:0 16px;margin:24px auto 64px}
  .page-header h1{font-size:30px}
  .page-header__kicker{font-size:12px}
  .header-actions{flex-direction:column;align-items:stretch}
  .table thead{display:none}
  .table tbody td{display:block;padding:10px 0;border-bottom:1px solid rgba(153,164,210,.1)}
  .grid[data-cols="3"]{grid-template-columns:1fr}
}

@keyframes float-slow{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(40px,30px,0) scale(1.05)}
}
@keyframes drift-grid{
  0%{transform:rotate(5deg) translate3d(0,0,0)}
  100%{transform:rotate(5deg) translate3d(-160px,-120px,0)}
}