:root{
  --bg:#0b1220;
  --bg-soft:#111827;
  --panel:#ffffff;
  --panel-soft:#f8fafc;
  --border:#e5e7eb;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#2563eb;
  --primary-2:#1d4ed8;
  --green:#059669;
  --red:#dc2626;
  --orange:#d97706;
  --shadow:0 20px 45px rgba(15,23,42,.08);
  --radius:22px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:Inter,Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#eef4ff 0%,#f6f9ff 55%,#f8fafc 100%);color:var(--text)}
a{text-decoration:none;color:inherit} img{max-width:100%}

.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:
radial-gradient(circle at top left,#3b82f6 0%,transparent 28%),
radial-gradient(circle at bottom right,#0f766e 0%,transparent 22%),
linear-gradient(135deg,#0f172a,#1d4ed8)}
.auth-card{width:100%;max-width:460px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-radius:28px;padding:30px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.auth-brand{font-weight:800;font-size:30px;margin:0 0 6px}
.auth-sub{color:var(--muted);margin:0 0 20px}

.input,.textarea,select{
  width:100%;padding:14px 15px;border:1px solid #d6dbe3;border-radius:16px;background:#fff;
  font-size:14px;outline:none;transition:.2s;
}
.input:focus,.textarea:focus,select:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(59,130,246,.12)}
.textarea{min-height:120px;resize:vertical}
.label{display:block;font-size:13px;font-weight:700;color:#334155;margin-bottom:8px}
.help{display:block;color:var(--muted);font-size:12px;margin-top:6px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:16px;padding:12px 16px;cursor:pointer;font-weight:700;font-size:14px;transition:.2s
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff}
.btn-dark{background:#0f172a;color:#fff}
.btn-light{background:#eef2ff;color:#1e3a8a}
.btn-green{background:linear-gradient(135deg,#059669,#047857);color:#fff}
.btn-red{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff}
.btn-orange{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}
.btn-soft{background:#f8fafc;color:#334155;border:1px solid var(--border)}

.admin-shell{display:grid;grid-template-columns:290px 1fr;min-height:100vh}
.sidebar{
  background:linear-gradient(180deg,#0f172a 0%,#111827 100%);
  color:#e5e7eb;padding:22px;position:sticky;top:0;height:100vh;overflow:auto
}
.brand-box{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.brand-logo{
  width:46px;height:46px;border-radius:16px;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800
}
.brand-title{font-size:22px;font-weight:800}
.brand-sub{font-size:12px;color:#94a3b8}

.side-section{margin-top:18px}
.side-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#64748b;margin:0 0 8px 6px}
.side-link{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;color:#dbe4f0;margin-bottom:6px
}
.side-link:hover,.side-link.active{background:rgba(255,255,255,.08)}
.side-footer{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);color:#94a3b8;font-size:12px}

.main{padding:24px}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:rgba(255,255,255,.8);backdrop-filter:blur(12px);padding:18px 22px;border:1px solid rgba(255,255,255,.6);
  border-radius:24px;box-shadow:var(--shadow);margin-bottom:22px
}
.top-title{font-size:26px;font-weight:800;margin:0}
.top-sub{color:var(--muted);margin:4px 0 0;font-size:14px}

.container-grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.admin-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{
  background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.8);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow)
}
.card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.title{font-size:30px;font-weight:800;margin:0}
.subtitle{color:var(--muted);margin:6px 0 0}

.kpi{
  background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid #edf2f7;border-radius:24px;padding:22px;box-shadow:var(--shadow)
}
.kpi-label{color:#64748b;font-size:13px}
.kpi strong{display:block;font-size:30px;margin-top:10px}
.kpi .delta{display:inline-flex;margin-top:12px;font-size:12px;padding:6px 10px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-weight:700}

.mini-stat{
  background:#0f172a;color:#fff;border-radius:22px;padding:24px;min-height:170px;
  display:flex;flex-direction:column;justify-content:space-between
}
.mini-stat h3{margin:0;font-size:16px;color:#bfdbfe}
.mini-stat strong{font-size:44px;line-height:1}
.mini-stat p{margin:0;color:#cbd5e1}

.actions{display:flex;gap:10px;flex-wrap:wrap}
.alert{padding:14px 16px;border-radius:16px;margin-bottom:16px;font-size:14px}
.alert-success{background:#dcfce7;color:#166534}
.alert-error{background:#fee2e2;color:#991b1b}
.alert-info{background:#dbeafe;color:#1d4ed8}

.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:14px;border-bottom:1px solid #edf2f7;text-align:left;font-size:14px;vertical-align:top}
th{background:#f8fafc;color:#475569}
code.inline{background:#eef2ff;color:#312e81;padding:4px 8px;border-radius:10px}

.badge{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:800}
.badge-green{background:#dcfce7;color:#166534}
.badge-red{background:#fee2e2;color:#991b1b}
.badge-blue{background:#dbeafe;color:#1d4ed8}
.badge-orange{background:#ffedd5;color:#9a3412}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:900px){.form-grid,.form-grid-4{grid-template-columns:1fr}}
.section-title{font-size:18px;font-weight:800;margin:0 0 14px}
.section-divider{height:1px;background:#edf2f7;margin:20px 0}

.portal-shell{min-height:100vh;background:linear-gradient(180deg,#eff6ff 0%,#f8fafc 100%)}
.portal-top{background:#0f172a;color:#fff;padding:20px 0}
.portal-wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.portal-top-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.portal-brand{font-weight:800;font-size:24px}
.portal-main{padding:24px 0}
.portal-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:900px){.portal-cards{grid-template-columns:1fr}}
.portal-card{background:#fff;border-radius:24px;padding:24px;border:1px solid #eef2f7;box-shadow:var(--shadow)}
.portal-stat{font-size:34px;font-weight:800}

.hero-banner{
  background:linear-gradient(135deg,#0f172a 0%,#1d4ed8 60%,#0ea5e9 100%);
  color:#fff;border-radius:28px;padding:28px;position:relative;overflow:hidden
}
.hero-banner:after{
  content:'';position:absolute;right:-30px;top:-30px;width:180px;height:180px;background:rgba(255,255,255,.08);
  border-radius:32px;transform:rotate(15deg)
}
.hero-banner h1{margin:0 0 6px;font-size:32px}
.hero-banner p{margin:0;color:#dbeafe;max-width:760px}

.quick-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.quick-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.quick-links{grid-template-columns:1fr}}
.quick-link{
  background:#fff;border-radius:22px;padding:18px;border:1px solid #eef2f7;box-shadow:var(--shadow)
}
.quick-link strong{display:block;font-size:15px;margin-bottom:8px}
.quick-link span{color:var(--muted);font-size:13px}


.login-screen{background:linear-gradient(135deg,#0f172a 0%,#1d4ed8 52%,#0ea5e9 100%)}
.login-shell{width:min(100%,1100px);padding:28px;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.login-top-strip{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:12px 0}
.auth-card-modern{margin-left:auto;max-width:440px;width:100%;border:1px solid rgba(255,255,255,.55);box-shadow:0 30px 70px rgba(2,6,23,.32)}
.auth-headline{font-size:32px;font-weight:800;margin:0 0 8px}
.auth-note{margin-top:16px;padding-top:14px;border-top:1px solid #e5e7eb}
.login-btn{width:100%;margin-top:18px}
.brand-logo-svg{display:block;height:54px;width:auto}
.brand-logo-mec{height:52px}
.portal-top-branded{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px}
.portal-center-meta{text-align:center}
.portal-brand-sub{color:#cbd5e1;font-size:14px;margin-top:4px}
.portal-nav-row{display:flex;justify-content:center;margin-top:16px}
@media(max-width:900px){.login-shell{grid-template-columns:1fr}.login-top-strip{padding:0 0 10px}.auth-card-modern{margin:0 auto}.portal-top-branded{grid-template-columns:1fr}.brand-visual-left,.brand-visual-right,.portal-center-meta{display:flex;justify-content:center}.portal-center-meta{flex-direction:column}.portal-nav-row{justify-content:stretch}.portal-nav-row .actions{width:100%;justify-content:center}}