:root{

  --bg:#eef5fb;

  --grid:rgba(59,130,246,.10);

  --nav:#0f1d3a;

  --nav2:#0e7490;

  --card:#ffffff;

  --ink:#0f172a;

  --muted:#64748b;

  --line:#d7e3f0;

  --blue:#2563eb;

  --cyan:#06b6d4;

  --green:#059669;

  --red:#dc2626;

  --orange:#f97316;

  --shadow:0 18px 50px rgba(15,23,42,.10);

  --radius:22px;

}

*{box-sizing:border-box}

html,body{height:100%}

body{

  margin:0;

  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  color:var(--ink);

  background:

    linear-gradient(90deg,var(--grid) 1px,transparent 1px),

    linear-gradient(var(--grid) 1px,transparent 1px),

    var(--bg);

  background-size:40px 40px;

}

a{color:inherit}

button,input,select,textarea{font:inherit}

button{cursor:pointer}

.shell{display:flex;min-height:100vh}

.sidebar{

  position:fixed;inset:0 auto 0 0;width:286px;

  background:linear-gradient(180deg,#0f172a,#143c5f 70%,#0e7490);

  color:#fff;padding:24px 18px;overflow:auto;z-index:20;

  box-shadow:10px 0 30px rgba(15,23,42,.18);

}

.brand{display:flex;gap:12px;align-items:center;margin-bottom:28px}

.logo{

  width:48px;height:48px;border-radius:16px;display:grid;place-items:center;

  background:linear-gradient(135deg,#2563eb,#06b6d4);font-size:24px;font-weight:900;

}

.brand h1{font-size:21px;line-height:1;margin:0}

.brand span{font-size:12px;color:#cbd5e1}

.nav{display:grid;gap:9px}

.nav a{

  display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:15px;

  text-decoration:none;font-weight:850;color:#eef6ff;border:1px solid transparent;

}

.nav a:hover,.nav a.active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}

.nav .active{box-shadow:inset 0 0 0 1px rgba(251,191,36,.45)}

.nav-note{

  margin-top:28px;padding:15px;border-radius:18px;background:rgba(255,255,255,.12);

  border:1px solid rgba(255,255,255,.18);font-size:12px;color:#dbeafe;

}

.main{margin-left:286px;width:calc(100% - 286px);min-height:100vh}

.topbar{

  position:sticky;top:0;z-index:10;display:flex;justify-content:flex-end;gap:10px;

  padding:14px 18px;background:rgba(238,245,251,.78);backdrop-filter:blur(10px);

  border-bottom:1px solid rgba(148,163,184,.20);

}

.userpill{

  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);

  border-radius:999px;padding:8px 12px;box-shadow:0 8px 24px rgba(15,23,42,.08)

}

.status-dot{width:10px;height:10px;border-radius:50%;background:#22c55e}

.btn{

  border:0;border-radius:14px;padding:11px 14px;font-weight:900;

  background:#eaf2ff;color:#10203f;border:1px solid #cfe0f5;

}

.btn.primary{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;border:0}

.btn.green{background:linear-gradient(135deg,#059669,#10b981);color:#fff;border:0}

.btn.red{background:#fee2e2;color:#991b1b;border-color:#fecaca}

.btn.dark{background:#0f172a;color:#fff;border:0}

.btn.small{padding:8px 10px;border-radius:11px;font-size:13px}

.content{padding:26px;max-width:1680px;margin:0 auto}

.hero{

  border-radius:var(--radius);background:linear-gradient(135deg,#0f172a,#1d4ed8,#06b6d4);

  color:#fff;padding:28px;margin-bottom:24px;box-shadow:var(--shadow);

}

.hero .eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#93c5fd;font-weight:950}

.hero h2{font-size:32px;margin:8px 0 6px}

.hero p{margin:0;color:#dbeafe}

.grid{display:grid;gap:16px}

.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.card{

  background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:var(--radius);

  padding:20px;box-shadow:var(--shadow);backdrop-filter:blur(4px);

}

.kpi b{display:block;font-size:32px}

.kpi span{color:var(--muted);font-weight:700}

.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px}

.section-title h3{margin:0;font-size:22px}

.table-wrap{overflow:auto;border-radius:18px;border:1px solid var(--line);background:#fff}

table{width:100%;border-collapse:collapse;min-width:760px}

th,td{padding:12px 14px;border-bottom:1px solid #edf2f7;text-align:left;vertical-align:top}

th{font-size:12px;text-transform:uppercase;color:#475569;background:#f8fafc}

tr:hover td{background:#f8fbff}

.badge{

  display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;

  font-size:12px;font-weight:900;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;

}

.badge.green{background:#ecfdf5;color:#047857;border-color:#bbf7d0}

.badge.red{background:#fef2f2;color:#b91c1c;border-color:#fecaca}

.badge.orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}

.badge.dark{background:#0f172a;color:#fff;border-color:#0f172a}

.form{display:grid;gap:14px}

.form.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.form.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

label{display:grid;gap:7px;font-weight:850;color:#24324a}

input,select,textarea{

  width:100%;border:1px solid #cfe0f5;background:#fff;border-radius:14px;padding:12px 13px;outline:none;color:#0f172a;

}

textarea{min-height:110px;resize:vertical}

.full{grid-column:1/-1}

.actions{display:flex;gap:10px;flex-wrap:wrap}

.empty{padding:26px;color:var(--muted);text-align:center}

.login-page{

  min-height:100vh;display:grid;place-items:center;padding:30px;

  background:radial-gradient(circle at top left,#c7d8ec,transparent 30%),linear-gradient(135deg,#10203f,#1d4ed8);

}

.login-card{

  width:min(420px,94vw);background:rgba(255,255,255,.90);border:1px solid rgba(255,255,255,.45);

  border-radius:24px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.25);

}

.login-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}

.login-head h1{margin:0;font-size:28px}

.notice{border-radius:16px;padding:13px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;font-weight:750}

.toast-host{position:fixed;right:18px;bottom:18px;z-index:1000;display:grid;gap:8px;max-width:440px}

.toast{padding:12px 14px;border-radius:14px;color:#fff;font-weight:850;box-shadow:var(--shadow);background:#0f172a}

.toast.success{background:#047857}.toast.error{background:#b91c1c}.toast.info{background:#1d4ed8}

.modal-back{position:fixed;inset:0;z-index:100;background:rgba(15,23,42,.60);display:grid;place-items:center;padding:20px}

.modal{width:min(760px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:24px;padding:22px;box-shadow:0 30px 90px rgba(0,0,0,.3)}

.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}

.modal-head h3{margin:0;font-size:24px}

@media(max-width:980px){

  .sidebar{position:relative;width:100%;inset:auto}

  .shell{display:block}.main{margin-left:0;width:100%}

  .grid.cols-4,.grid.cols-3,.grid.cols-2,.form.cols-2,.form.cols-3{grid-template-columns:1fr}

  .content{padding:16px}

}