:root{
  --navy:#0b1f3a;
  --navy-2:#123861;
  --blue:#2563eb;
  --blue-soft:#eaf2ff;
  --red:#d92d20;
  --red-soft:#fff0ef;
  --green:#067647;
  --green-soft:#ecfdf3;
  --amber:#b54708;
  --amber-soft:#fffaeb;
  --purple:#6941c6;
  --purple-soft:#f4f3ff;
  --ink:#101828;
  --text:#344054;
  --muted:#667085;
  --line:#e4e7ec;
  --line-2:#d0d5dd;
  --surface:#ffffff;
  --bg:#f5f7fb;
  --shadow:0 10px 35px rgba(16,24,40,.06);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.muted{color:var(--muted)}
.helper{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--blue);text-transform:uppercase}
.eyebrow.light{color:#b9d2ff}

/* AUTH */
.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);background:#fff}
.auth-visual{position:relative;overflow:hidden;background:linear-gradient(145deg,#07172d 0%,#0f3157 55%,#174779 100%);display:flex;align-items:flex-end;padding:64px;color:white}
.auth-visual:before,.auth-visual:after{content:"";position:absolute;border-radius:999px;filter:blur(0);opacity:.55}
.auth-visual:before{width:420px;height:420px;background:radial-gradient(circle,#2f69c5 0%,rgba(47,105,197,0) 70%);right:-90px;top:-100px}
.auth-visual:after{width:500px;height:500px;background:radial-gradient(circle,rgba(217,45,32,.25) 0%,rgba(217,45,32,0) 70%);left:-180px;bottom:-220px}
.auth-visual-inner{position:relative;z-index:1;max-width:620px}
.auth-visual h1{font-size:56px;line-height:1.05;margin:14px 0 20px;letter-spacing:-.04em}
.auth-visual p{max-width:560px;color:#d5e2f2;font-size:17px;line-height:1.7}
.auth-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.auth-points span{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);padding:9px 12px;border-radius:999px;color:#e7eef8;font-weight:600;font-size:12px}
.auth-panel{display:grid;place-items:center;padding:40px;background:#fbfcfe}
.auth-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px;padding:30px}
.auth-card h2{font-size:28px;margin:8px 0 8px;letter-spacing:-.03em}
.segmented{display:flex;background:#f2f4f7;border-radius:12px;padding:4px;margin:24px 0 20px}
.segment{flex:1;border:0;background:transparent;padding:10px 12px;border-radius:9px;color:var(--muted);font-weight:700}
.segment.active{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(16,24,40,.08)}
.stack{display:grid;gap:14px}
.field{display:grid;gap:7px;color:var(--text);font-weight:600;font-size:13px}
.field input,.field select,.field textarea,.month-control input{width:100%;border:1px solid var(--line-2);background:#fff;border-radius:11px;padding:11px 12px;color:var(--ink);outline:none;transition:.2s}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus,.month-control input:focus{border-color:#84adff;box-shadow:0 0 0 4px rgba(37,99,235,.08)}
.inline-message{margin-top:14px;padding:11px 12px;border-radius:10px;background:var(--amber-soft);color:var(--amber);font-size:13px}

/* BUTTONS */
.btn{border:0;border-radius:11px;padding:10px 14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.18s}
.btn.primary{background:var(--navy);color:white}.btn.primary:hover{background:var(--navy-2);transform:translateY(-1px)}
.btn.secondary{background:#fff;color:var(--text);border:1px solid var(--line-2)}.btn.secondary:hover{background:#f9fafb}
.btn.danger{background:var(--red-soft);color:var(--red)}
.btn.wide{width:100%;padding:12px 15px}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text);display:grid;place-items:center;font-weight:800}

/* APP */
.app-shell{min-height:100vh;display:grid;grid-template-columns:260px minmax(0,1fr)}
.sidebar{background:linear-gradient(180deg,#091a31 0%,#0d2747 100%);color:white;padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:50}
.sidebar-brand{display:flex;align-items:center;justify-content:space-between;padding:4px 10px 22px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-copy{display:grid;gap:4px}.brand-copy strong{font-size:15px;letter-spacing:.04em}.brand-copy span{font-size:11px;color:#9fb3cd}
.nav-menu{padding-top:16px;display:grid;gap:4px;overflow:auto}
.nav-label{font-size:10px;letter-spacing:.13em;font-weight:800;color:#6f89aa;padding:15px 12px 6px}
.nav-item{width:100%;border:0;background:transparent;color:#aebfd4;padding:11px 12px;border-radius:11px;text-align:left;display:flex;align-items:center;gap:11px;font-weight:600;transition:.18s}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-item.active{background:linear-gradient(90deg,rgba(57,122,219,.25),rgba(57,122,219,.08));color:white;box-shadow:inset 3px 0 0 #6ea2ff}
.nav-icon{width:20px;text-align:center;color:#91b7f3}
.sidebar-profile{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding:16px 8px 0;display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:9px}
.avatar{width:38px;height:38px;border-radius:12px;background:#1b4a7e;display:grid;place-items:center;font-weight:800}
.profile-copy{min-width:0;display:grid;gap:3px}.profile-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-copy span{font-size:11px;color:#8fa8c7;text-transform:capitalize}
.sidebar-profile .icon-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08);color:white}
.main-shell{min-width:0;padding:0 28px 38px}
.topbar{min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);margin-bottom:24px;background:rgba(245,247,251,.88);backdrop-filter:blur(12px);position:sticky;top:0;z-index:30}
.topbar-left{display:flex;align-items:center;gap:12px}.breadcrumb{font-size:11px;color:var(--muted);margin-bottom:4px}.breadcrumb span{color:var(--blue);font-weight:700}.topbar h1{font-size:25px;margin:0;letter-spacing:-.025em}
.topbar-actions{display:flex;align-items:center;gap:10px}.month-control{display:grid;grid-template-columns:auto 135px;align-items:center;gap:8px;border:1px solid var(--line);background:white;border-radius:12px;padding:4px 4px 4px 11px}.month-control span{font-size:11px;font-weight:700;color:var(--muted)}.month-control input{border:0;padding:7px 8px;box-shadow:none!important}
.page{display:none}.page.active{display:block}
.pending-banner{padding:13px 15px;background:var(--amber-soft);border:1px solid #fedf89;border-radius:12px;color:var(--amber);font-weight:600;margin-bottom:18px}

/* DASHBOARD */
.hero-panel{background:linear-gradient(135deg,#0b1f3a 0%,#123861 65%,#174b80 100%);border-radius:22px;color:white;padding:25px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,.5fr);gap:22px;position:relative;overflow:hidden;box-shadow:0 16px 45px rgba(11,31,58,.14)}
.hero-panel:after{content:"";position:absolute;width:310px;height:310px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.09),rgba(255,255,255,0) 68%);right:-100px;top:-120px}
.hero-copy{position:relative;z-index:1}.hero-copy h2{margin:8px 0 10px;font-size:28px;letter-spacing:-.03em}.hero-copy p{margin:0;color:#c8d6e7;max-width:700px;line-height:1.6}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.hero-tags span{font-size:11px;font-weight:700;padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#dbe6f3}
.score-box{position:relative;z-index:1;display:flex;justify-content:flex-end;align-items:center}.score-ring{--score:0;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#6ea2ff calc(var(--score)*1%),rgba(255,255,255,.12) 0);position:relative}.score-ring:after{content:"";position:absolute;inset:11px;border-radius:50%;background:#0f3157}.score-content{position:relative;z-index:2;text-align:center}.score-content strong{font-size:32px;display:block}.score-content span{font-size:10px;color:#b9cbe0;text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin:24px 0 12px}.section-head h3{margin:0;font-size:17px;letter-spacing:-.02em}.section-head p{margin:3px 0 0;color:var(--muted);font-size:12px}.section-head .meta{font-size:11px;color:var(--muted);font-weight:700}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.metric-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;min-width:0;box-shadow:0 4px 18px rgba(16,24,40,.025)}
.metric-card .top{display:flex;align-items:center;justify-content:space-between;gap:8px}.metric-card .label{color:var(--muted);font-size:11px;font-weight:700}.metric-card .icon{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;font-size:14px}.metric-card .value{font-size:26px;font-weight:800;letter-spacing:-.035em;margin-top:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric-card .foot{display:flex;justify-content:space-between;gap:8px;margin-top:9px;font-size:10px;color:var(--muted)}
.icon.blue{background:var(--blue-soft);color:var(--blue)}.icon.green{background:var(--green-soft);color:var(--green)}.icon.purple{background:var(--purple-soft);color:var(--purple)}.icon.red{background:var(--red-soft);color:var(--red)}.icon.amber{background:var(--amber-soft);color:var(--amber)}
.layout-2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:14px}.layout-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 4px 18px rgba(16,24,40,.025)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.card-head h3{margin:0;font-size:15px}.card-head span{font-size:11px;color:var(--muted)}
.chart-wrap{position:relative;height:285px}.chart-wrap.small{height:235px}
.empty{border:1px dashed var(--line-2);border-radius:13px;padding:26px;text-align:center;color:var(--muted);background:#fcfcfd}.empty strong{display:block;color:var(--text);margin-bottom:5px}
.business-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.business-card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:15px}.business-card .business-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.business-card .name{font-weight:800;text-transform:capitalize}.business-card .pill{font-size:10px;padding:5px 7px;border-radius:999px;background:#f2f4f7;color:var(--muted);font-weight:700}.business-card .main-number{font-size:23px;font-weight:800}.business-card .subline{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.business-card .mini{background:#f8fafc;border-radius:10px;padding:9px}.business-card .mini span{display:block;font-size:9px;color:var(--muted);margin-bottom:4px}.business-card .mini strong{font-size:12px}

/* TABLES / FORMS */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:13px}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{padding:11px 12px;border-bottom:1px solid var(--line);font-size:12px;text-align:left;vertical-align:middle}.table th{background:#f9fafb;color:#475467;font-size:10px;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0}.table tr:last-child td{border-bottom:0}.table tbody tr:hover{background:#fcfcfd}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:800}.badge.green{background:var(--green-soft);color:var(--green)}.badge.amber{background:var(--amber-soft);color:var(--amber)}.badge.red{background:var(--red-soft);color:var(--red)}.badge.blue{background:var(--blue-soft);color:var(--blue)}.badge.gray{background:#f2f4f7;color:#475467}
.progress{height:7px;border-radius:999px;background:#eef2f6;overflow:hidden}.progress span{height:100%;display:block;background:linear-gradient(90deg,#2f6fd0,#6ea2ff);border-radius:inherit}.progress-row{display:grid;grid-template-columns:175px 1fr 45px;align-items:center;gap:10px;margin:12px 0}.progress-row label{font-size:11px;color:var(--text);font-weight:600}.progress-row strong{text-align:right;font-size:11px}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}.form-section{border-top:1px solid var(--line);padding-top:16px;margin-top:18px}.form-section:first-of-type{border-top:0;padding-top:0}.form-section h4{margin:0 0 3px;font-size:13px}.form-section p{margin:0 0 12px;font-size:11px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.switch{display:inline-flex;align-items:center;gap:8px}.switch input{appearance:none;width:36px;height:20px;border-radius:999px;background:#d0d5dd;position:relative;transition:.2s}.switch input:after{content:"";width:16px;height:16px;border-radius:50%;background:white;position:absolute;top:2px;left:2px;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.15)}.switch input:checked{background:var(--blue)}.switch input:checked:after{left:18px}
.role-select{min-width:160px;border:1px solid var(--line-2);border-radius:9px;padding:7px 8px;background:white}

.toast{position:fixed;right:22px;bottom:22px;z-index:200;min-width:250px;max-width:420px;padding:12px 14px;border-radius:12px;background:#101828;color:white;box-shadow:0 14px 35px rgba(16,24,40,.2);opacity:0;transform:translateY(12px);pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:translateY(0)}.toast.error{background:#7a271a}.toast.success{background:#085d3a}
.mobile-only{display:none}

@media(max-width:1180px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.business-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.layout-2{grid-template-columns:1fr}.layout-3{grid-template-columns:1fr 1fr}.hero-panel{grid-template-columns:1fr auto}}
@media(max-width:900px){.auth-shell{grid-template-columns:1fr}.auth-visual{display:none}.auth-panel{min-height:100vh}.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-280px;width:260px;transition:.25s}.sidebar.open{left:0;box-shadow:20px 0 50px rgba(0,0,0,.25)}.main-shell{padding:0 18px 30px}.mobile-only{display:grid}.topbar{min-height:78px}.form-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.main-shell{padding:0 12px 24px}.topbar{align-items:flex-start;padding:14px 0;position:relative}.topbar-actions{width:100%;align-items:stretch}.month-control{flex:1}.topbar{flex-direction:column;gap:12px}.metric-grid,.business-grid,.layout-3,.form-grid,.form-grid.two{grid-template-columns:1fr}.hero-panel{grid-template-columns:1fr;padding:20px}.score-box{justify-content:flex-start}.score-ring{width:122px;height:122px}.score-content strong{font-size:27px}.hero-copy h2{font-size:24px}.auth-card{padding:24px}.progress-row{grid-template-columns:130px 1fr 40px}}

/* ADMIN REVISION */
.edit-kpi-table input,.edit-kpi-table select{width:100%;min-width:110px;border:1px solid var(--line-2);border-radius:9px;padding:8px 9px;background:#fff;color:var(--ink)}
.report-hero .download-icon{width:120px;height:120px;border-radius:28px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;font-size:52px;color:#dbe8ff;box-shadow:inset 0 0 40px rgba(255,255,255,.04)}
.report-card{display:flex;flex-direction:column;min-height:250px}.report-card h3{margin:14px 0 8px}.report-card p{color:var(--muted);line-height:1.6;flex:1}.report-icon{width:44px;height:44px;border-radius:13px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-weight:800;font-size:20px}
@media(max-width:640px){.report-hero .download-icon{width:90px;height:90px;font-size:38px}}

/* ROLE-SPECIFIC KPI REVISION */
.role-kpi-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}.role-kpi-tab{border:1px solid var(--line-2);background:#fff;color:var(--muted);padding:10px 14px;border-radius:10px;font-weight:750;cursor:pointer}.role-kpi-tab.active{background:var(--navy);border-color:var(--navy);color:#fff}.compact-hero{min-height:210px}.team-score-card .big-score{font-size:42px;font-weight:850;color:var(--navy);margin:8px 0}.competency-mini-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.mini-comp{padding:14px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe}.mini-comp span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}.mini-comp strong{font-size:20px;color:var(--navy)}.employee-hero{background:linear-gradient(135deg,#17365d 0%,#254f86 60%,#406fa8 100%)}.employee-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.notice.soft{margin-top:14px;background:#f5f8ff;color:#344054;border:1px solid #dbe6ff}.edit-kpi-table td:nth-child(2){min-width:180px}
@media(max-width:900px){.competency-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.employee-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.competency-mini-grid,.employee-metrics{grid-template-columns:1fr}.role-kpi-tabs{display:grid;grid-template-columns:1fr 1fr}}

/* ROLE-SPECIFIC DAILY REPORTS */
.role-form-banner{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px;padding:22px 24px;border-radius:18px;background:linear-gradient(135deg,#17365d 0%,#254f84 100%);color:#fff;box-shadow:0 14px 34px rgba(23,54,93,.15)}
.role-form-banner h2{margin:4px 0 8px;font-size:24px}.role-form-banner p{margin:0;color:#dbe8f7;max-width:860px;line-height:1.55}.role-form-banner .eyebrow{color:#bcd4f3;font-size:11px;font-weight:800;letter-spacing:.12em}.role-form-banner .badge{flex:0 0 auto;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.16)}
@media(max-width:720px){.role-form-banner{align-items:flex-start;flex-direction:column}.role-form-banner h2{font-size:21px}}

/* FULL SYNC V3 */
.verification-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.verify-pane{min-height:120px}
.audit-box{padding:4px}
.audit-box h3{margin:0}
.notice.soft{background:#f5f8ff;border:1px solid #dbe6ff;color:#344054;padding:12px 14px;border-radius:12px;margin:10px 0}
.role-form-banner + .form-card{margin-top:14px}
.table .btn{white-space:nowrap}
@media(max-width:760px){.verification-tabs .role-kpi-tab{flex:1 1 45%}}

.btn.danger{background:#fff1f2;border:1px solid #fecdd3;color:#be123c}
.btn.danger:hover{background:#ffe4e6}


/* =========================================================
   TANABANG GROUP MODERN BRAND THEME V9
   Official palette: navy / royal blue / red / neutral grey
   ========================================================= */
:root{
  --navy:#071f3f;
  --navy-2:#0b315f;
  --navy-3:#103f78;
  --blue:#1457c8;
  --blue-2:#2563eb;
  --blue-soft:#edf4ff;
  --red:#e31e24;
  --red-2:#c9151a;
  --red-soft:#fff1f2;
  --green:#138a54;
  --green-soft:#ecfdf3;
  --amber:#d97706;
  --amber-soft:#fff7ed;
  --purple:#6941c6;
  --purple-soft:#f4f3ff;
  --ink:#0b1730;
  --text:#344054;
  --muted:#78849a;
  --line:#e7ebf2;
  --line-2:#d7dde7;
  --surface:#ffffff;
  --bg:#f5f7fb;
  --shadow:0 10px 30px rgba(7,31,63,.065);
  --shadow-lg:0 24px 65px rgba(7,31,63,.11);
  --radius:18px;
}
body{
  background:
    radial-gradient(circle at 92% 4%,rgba(20,87,200,.05),transparent 26%),
    linear-gradient(180deg,#f9fbfe 0%,#f5f7fb 100%);
  color:var(--ink);
}

/* Login */
.auth-shell{background:#f6f8fc}
.auth-visual{
  background:
    linear-gradient(150deg,rgba(4,24,52,.98),rgba(7,43,84,.98)),
    radial-gradient(circle at 80% 15%,rgba(37,99,235,.28),transparent 36%);
  padding:72px;
}
.auth-visual:before{background:radial-gradient(circle,rgba(31,99,214,.34) 0%,rgba(31,99,214,0) 70%)}
.auth-visual:after{background:radial-gradient(circle,rgba(227,30,36,.20) 0%,rgba(227,30,36,0) 70%)}
.auth-brand-card{display:inline-flex;align-items:center;background:#fff;border-radius:18px;padding:12px 18px;margin-bottom:28px;box-shadow:0 18px 50px rgba(0,0,0,.14)}
.auth-logo{width:290px;max-width:62vw;height:auto;display:block}
.auth-visual h1{font-size:58px;font-weight:800;letter-spacing:-.055em;max-width:720px}
.auth-visual p{font-size:16px;color:#ced9e7}
.auth-points span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13)}
.auth-panel{background:linear-gradient(180deg,#fbfcff,#f5f8fc)}
.auth-card{border:1px solid #e9edf4;border-radius:26px;padding:34px;box-shadow:var(--shadow-lg)}
.login-brand{display:flex;justify-content:flex-start;margin-bottom:26px}
.login-brand img{width:220px;max-width:100%;height:auto;display:block}
.auth-card h2{color:var(--navy);font-size:30px}
.eyebrow{color:var(--red);letter-spacing:.15em}
.eyebrow.light{color:#bcd0ed}

/* Shell / sidebar */
.app-shell{grid-template-columns:276px minmax(0,1fr)}
.sidebar{
  background:
    radial-gradient(circle at 25% -5%,rgba(35,98,190,.32),transparent 25%),
    linear-gradient(180deg,#061a35 0%,#08264a 56%,#071e3b 100%);
  padding:18px 14px 18px;
  box-shadow:10px 0 34px rgba(5,24,51,.08);
}
.sidebar-brand{display:block;padding:4px 8px 18px;border-bottom:1px solid rgba(255,255,255,.085)}
.sidebar-logo-wrap{background:#fff;border-radius:14px;padding:10px 12px;margin-bottom:12px;box-shadow:0 8px 25px rgba(0,0,0,.12)}
.sidebar-logo{width:100%;height:auto;display:block}
.brand-copy{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px}
.brand-copy strong{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff}.brand-copy span{font-size:10px;color:#89a3c1}
.nav-menu{gap:3px;padding:12px 2px 0}
.nav-label{font-size:9px;color:#6986aa;padding:17px 10px 7px;letter-spacing:.16em}
.nav-item{padding:11px 12px;border-radius:10px;color:#b8c7da;font-size:13px}
.nav-item:hover{background:rgba(255,255,255,.065);color:#fff;transform:translateX(1px)}
.nav-item.active{
  background:linear-gradient(100deg,#123f7d 0%,#1659b9 100%);
  color:#fff;
  box-shadow:0 9px 22px rgba(0,48,115,.35),inset 0 0 0 1px rgba(255,255,255,.08);
}
.nav-item.active:after{content:"";margin-left:auto;width:5px;height:5px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(227,30,36,.12)}
.nav-icon{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;color:#a9c8ff;font-size:15px}
.nav-item.active .nav-icon{color:#fff}
.sidebar-profile{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:11px;margin-top:auto}
.avatar{background:linear-gradient(145deg,#f7faff,#dce8fa);color:var(--navy);border-radius:50%;border:2px solid rgba(255,255,255,.34)}

/* Main topbar */
.main-shell{padding:0 32px 40px;max-width:1800px;width:100%;margin:0 auto}
.topbar{
  min-height:92px;
  background:rgba(249,251,254,.92);
  border-bottom:1px solid rgba(215,221,231,.8);
  margin-bottom:26px;
}
.breadcrumb{font-size:10px;letter-spacing:.035em;text-transform:uppercase;color:#8491a6}
.breadcrumb span{color:var(--red)}
.topbar h1{font-size:28px;font-weight:800;color:var(--navy);letter-spacing:-.04em;position:relative;display:inline-block}
.topbar h1:after{content:"";display:block;width:34px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--red),#ff6b70);margin-top:7px}
.month-control{border-color:#e3e8f0;border-radius:12px;box-shadow:0 4px 15px rgba(7,31,63,.035)}
.icon-btn{border-color:#e1e6ee;box-shadow:0 4px 12px rgba(7,31,63,.035)}
.btn{border-radius:10px;font-weight:700;letter-spacing:-.005em}
.btn.primary{background:linear-gradient(135deg,var(--navy-2),var(--blue));box-shadow:0 8px 20px rgba(20,87,200,.18)}
.btn.primary:hover{background:linear-gradient(135deg,var(--navy-3),#1e62d6)}
.btn.secondary{border-color:#e0e5ed;color:var(--navy);box-shadow:0 3px 10px rgba(7,31,63,.025)}

/* Core cards */
.card,.metric-card,.business-card,.form-card{
  border:1px solid rgba(224,230,239,.95);
  box-shadow:var(--shadow);
  border-radius:16px;
}
.card{padding:20px}
.metric-card{padding:18px;position:relative;overflow:hidden;transition:.2s ease}
.metric-card:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(7,31,63,.085)}
.metric-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--blue),#6ba0ff)}
.metric-card:nth-child(5n+2):before{background:linear-gradient(180deg,var(--red),#ff7f83)}
.metric-card .icon{width:38px;height:38px;border-radius:12px;font-size:16px}
.metric-card .label{font-size:11px;color:#68768c;text-transform:none}
.metric-card .value{color:var(--navy);font-size:29px;margin-top:15px}
.metric-card .foot{font-size:10px}

/* Hero -> clean executive card */
.hero-panel,.employee-hero,.role-form-banner{
  background:
    radial-gradient(circle at 90% 15%,rgba(20,87,200,.08),transparent 27%),
    linear-gradient(135deg,#ffffff 0%,#fbfdff 100%);
  color:var(--ink);
  border:1px solid #e2e8f1;
  box-shadow:var(--shadow);
}
.hero-panel{border-radius:18px;padding:24px 26px}
.hero-panel:before{content:"";position:absolute;left:0;top:23px;bottom:23px;width:4px;border-radius:0 6px 6px 0;background:linear-gradient(180deg,var(--red),#ff666b)}
.hero-panel:after{background:radial-gradient(circle,rgba(20,87,200,.07),rgba(20,87,200,0) 68%)}
.hero-copy h2{color:var(--navy);font-size:27px}
.hero-copy p,.role-form-banner p{color:#66758a}
.hero-tags span{background:#f3f7fd;border-color:#e2e9f4;color:#315178}
.hero-panel .eyebrow.light,.role-form-banner .eyebrow{color:var(--red)}
.score-ring{background:conic-gradient(var(--blue) calc(var(--score)*1%),#e8edf4 0)}
.score-ring:after{background:#fff;box-shadow:inset 0 0 0 1px #e6ebf2}
.score-content strong{color:var(--navy)}
.score-content span{color:#77859a}
.role-form-banner .badge{background:#f1f5fb;color:var(--navy);border-color:#e0e7f1}

/* Section heads */
.section-head{margin:27px 0 12px}
.section-head h3{font-size:17px;color:var(--navy);font-weight:800}
.section-head h3:after{content:"";display:block;width:26px;height:2px;background:var(--red);border-radius:99px;margin-top:6px}
.section-head p{color:#7b8799}

/* Business cards */
.business-card{padding:17px;transition:.2s ease}
.business-card:hover{transform:translateY(-2px);box-shadow:0 15px 30px rgba(7,31,63,.07)}
.business-card .name{color:var(--navy)}
.business-card .pill{background:#eef4fc;color:#416287}
.business-card .main-number{color:var(--navy)}
.business-card .mini{background:#f7f9fc;border:1px solid #edf0f5}

/* Table */
.table-wrap{border-color:#e5eaf1;border-radius:13px;background:#fff}
.table th{background:#f6f8fb;color:#5d6b80;font-size:9px;letter-spacing:.07em;padding:12px}
.table td{padding:12px;color:#334155}
.table tbody tr{transition:.15s}
.table tbody tr:hover{background:#f9fbfe}
.table strong{color:var(--navy)}
.badge{border-radius:999px;padding:5px 9px}
.badge.blue{background:#edf4ff;color:#1852ad}.badge.red{background:#fff1f2;color:#bf1720}.badge.green{background:#ecfdf3;color:#087443}.badge.amber{background:#fff7ed;color:#b65300}.badge.gray{background:#f0f3f7;color:#5e6a7c}

/* Forms */
.form-card{padding:22px}
.field{color:#475569}
.field input,.field select,.field textarea,.month-control input{border-color:#dce2eb;border-radius:10px;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus,.month-control input:focus{border-color:#6f9ee9;box-shadow:0 0 0 4px rgba(20,87,200,.085)}
.form-section h4{color:var(--navy)}
.role-kpi-tab{border-color:#e0e5ed;color:#5e6c81;border-radius:999px;padding:9px 14px;background:#fff}
.role-kpi-tab.active{background:linear-gradient(135deg,var(--navy-2),var(--blue));border-color:transparent;box-shadow:0 6px 14px rgba(20,87,200,.18)}
.edit-kpi-table input,.edit-kpi-table select{border-color:#dbe2ec!important;border-radius:9px!important}

/* Progress / charts */
.progress{height:8px;background:#edf1f6}
.progress span{background:linear-gradient(90deg,#0d4ca7,#2f73df)}
.chart-wrap{height:300px}

/* Report cards / states */
.report-card{border-top:3px solid var(--navy-2)}
.report-card:nth-child(2){border-top-color:var(--blue)}
.report-card:nth-child(3){border-top-color:var(--red)}
.report-icon{background:#eef4fd;color:var(--navy-2)}
.empty{background:#fafbfd;border-color:#dfe5ee}
.notice.soft{background:#f5f8fd!important;border-color:#dee8f6!important;color:#42526a!important}
.pending-banner{background:#fff8e8;border-color:#fde3aa}
.toast{border-radius:11px;box-shadow:0 20px 45px rgba(7,31,63,.25)}

/* Director destructive action */
.btn.danger{background:#fff3f4!important;border:1px solid #ffd3d6!important;color:#ba151c!important;box-shadow:none!important}
.btn.danger:hover{background:#ffe8ea!important}

/* Mobile refinements */
@media(max-width:1180px){.app-shell{grid-template-columns:250px minmax(0,1fr)}}
@media(max-width:900px){
  .sidebar{width:272px;left:-292px}.sidebar.open{left:0}
  .main-shell{padding:0 18px 30px}
  .auth-logo{width:250px}
}
@media(max-width:640px){
  .main-shell{padding:0 12px 24px}
  .topbar h1{font-size:24px}
  .auth-card{border-radius:20px}
  .login-brand img{width:190px}
  .hero-panel{padding:20px}
}

/* REPORT CLARITY + HISTORY V9 */
.notice.soft{border-left:3px solid var(--blue);background:linear-gradient(90deg,#f4f8ff,#fff)}
#dashboardHistoryPreview{margin-top:20px}
#page-history .hero-panel{margin-bottom:18px}
.table td{vertical-align:middle}
.field input[type="datetime-local"]{font-variant-numeric:tabular-nums}
@media(max-width:760px){
  #dashboardHistoryPreview .section-head{align-items:flex-start}
}

/* V10 EDIT MODE */
.edit-mode-notice{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff8e8;border:1px solid #f3d58a;border-left:4px solid #d79a11;
  padding:14px 16px;border-radius:14px;margin-bottom:18px
}
.edit-mode-notice div{display:flex;flex-direction:column;gap:3px}
.edit-mode-notice strong{color:#7a5100}
.edit-mode-notice span{font-size:12px;color:#795f29}
@media(max-width:720px){.edit-mode-notice{align-items:flex-start;flex-direction:column}}

.user-action-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn.danger{background:#fff1f2;border:1px solid #fecdd3;color:#be123c}
.btn.danger:hover{background:#ffe4e6;border-color:#fda4af}

/* V13 DIRECTOR ANALYTICS */
.director-kpi-people{display:grid;gap:16px}
.director-kpi-person-card{overflow:hidden}
.director-score-chip{min-width:84px;padding:9px 13px;border-radius:14px;text-align:center;background:#f2f4f7;border:1px solid var(--line)}
.director-score-chip small{display:block;font-size:10px;letter-spacing:.08em;color:var(--muted);font-weight:800}
.director-score-chip strong{display:block;font-size:24px;line-height:1.05}
.director-score-chip.good{background:#ecfdf3;border-color:#abefc6;color:#067647}
.director-score-chip.warn{background:#fffaeb;border-color:#fedf89;color:#b54708}
.director-score-chip.danger{background:#fef3f2;border-color:#fecdca;color:#b42318}
.director-score-chip.pending{background:#f9fafb;color:#667085}
.director-weak-list{display:grid;gap:8px;margin:14px 0}
.director-weak-item{display:grid;grid-template-columns:max-content 1fr;gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe}
.director-weak-item div{display:flex;flex-direction:column;gap:3px}
.director-weak-item span:not(.badge){font-size:12px;color:var(--muted)}
.director-person-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.director-kpi-detail{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.director-kpi-detail-table{min-width:1450px}
.director-kpi-issue{display:block;max-width:330px;line-height:1.45;color:#475467}
.director-report-summary{margin:16px 0}
.report-detail-card{margin-top:0}
.report-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.report-detail-field{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe;min-width:0}
.report-detail-field span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;margin-bottom:5px}
.report-detail-field strong{display:block;font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.report-detail-field a{color:var(--blue);text-decoration:none}
.report-detail-field a:hover{text-decoration:underline}
.empty.small{padding:12px;min-height:auto}
@media(max-width:1100px){.report-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .report-detail-grid{grid-template-columns:1fr}
  .director-weak-item{grid-template-columns:1fr}
  .director-kpi-summary{grid-template-columns:1fr 1fr}
}


/* =========================================================
   V14 — UI ALIGNMENT / SYMMETRY REFINEMENT
   Pure visual refinement. No business logic changed.
   ========================================================= */

/* Global rhythm */
body{overflow-x:hidden}
.page.active{
  width:100%;
  max-width:1480px;
  margin:0 auto;
}
.main-shell{
  padding:0 30px 44px;
  min-width:0;
}
.section-head{
  min-height:48px;
  align-items:center;
  margin:26px 0 12px;
}
.section-head > div{min-width:0}
.card,.metric-card,.business-card,.form-card{
  box-sizing:border-box;
}

/* Login — balanced, centered and symmetric */
.auth-shell{
  grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr);
  min-height:100svh;
}
.auth-visual{
  align-items:center;
  justify-content:center;
  padding:56px clamp(44px,5vw,82px);
}
.auth-visual-inner{
  width:100%;
  max-width:650px;
}
.auth-brand-card{
  margin-bottom:24px;
  padding:10px 16px;
  border-radius:16px;
}
.auth-logo{width:255px}
.auth-visual h1{
  font-size:clamp(42px,4vw,54px);
  line-height:1.06;
  margin:16px 0 18px;
}
.auth-visual p{
  max-width:590px;
  font-size:15px;
  line-height:1.65;
}
.auth-points{margin-top:24px}
.auth-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px clamp(30px,5vw,70px);
}
.auth-card{
  width:min(440px,100%);
  padding:38px;
  border-radius:24px;
}
.login-brand{
  justify-content:center;
  margin-bottom:24px;
}
.login-brand img{width:205px}
.auth-card .eyebrow{text-align:center}
.auth-card h2{text-align:center;margin-top:10px}
.auth-card > .muted{text-align:center;line-height:1.55}
.auth-form{margin-top:24px}
.auth-form .field{gap:8px}
.auth-form .btn{min-height:46px;margin-top:4px}

/* Sidebar — cleaner proportions */
.app-shell{
  grid-template-columns:268px minmax(0,1fr);
  align-items:start;
}
.sidebar{
  width:268px;
  padding:16px 14px;
}
.sidebar-brand{
  padding:4px 6px 16px;
}
.sidebar-logo-wrap{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:9px 12px;
  margin-bottom:10px;
}
.sidebar-logo{
  width:auto;
  max-width:100%;
  max-height:58px;
  object-fit:contain;
}
.brand-copy{
  min-height:28px;
  padding:0 5px;
}
.nav-menu{
  padding-top:10px;
}
.nav-label{
  padding:15px 10px 6px;
}
.nav-item{
  min-height:44px;
  padding:10px 11px;
  gap:10px;
}
.nav-icon{
  flex:0 0 22px;
}
.sidebar-profile{
  grid-template-columns:40px minmax(0,1fr) 38px;
  min-height:64px;
}

/* Topbar — aligned to content grid */
.topbar{
  min-height:86px;
  margin:0 auto 24px;
  padding:0 2px;
  gap:18px;
}
.topbar-left{min-width:0}
.topbar h1{
  font-size:26px;
  line-height:1.15;
}
.topbar-actions{
  flex:0 0 auto;
  gap:9px;
}
.month-control{
  min-height:42px;
}

/* Hero — balanced executive header */
.hero-panel{
  min-height:184px;
  grid-template-columns:minmax(0,1fr) 180px;
  align-items:center;
  padding:25px 28px;
  gap:28px;
}
.hero-copy{
  align-self:center;
}
.hero-copy h2{
  font-size:27px;
  line-height:1.15;
  margin:7px 0 9px;
}
.hero-copy p{
  max-width:760px;
}
.score-box{
  justify-content:center;
}
.score-ring{
  width:140px;
  height:140px;
}

/* Dashboard grids — equal columns and equal card heights */
.metric-grid,
.layout-4{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.layout-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.layout-2{
  grid-template-columns:minmax(0,1.45fr) minmax(330px,.75fr);
  gap:14px;
  align-items:stretch;
}
.metric-grid > *,
.layout-4 > *,
.layout-3 > *,
.layout-2 > *{
  min-width:0;
}
.metric-card{
  min-height:132px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px 19px;
}
.metric-card .top{min-height:38px}
.metric-card .value{
  margin-top:10px;
  font-size:27px;
}
.metric-card .foot{
  min-height:20px;
  align-items:flex-end;
}
.card{
  height:100%;
}
.layout-2 > .card,
.layout-3 > .card,
.layout-4 > .card{
  min-height:100%;
}

/* Business cards */
.business-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.business-card{
  min-height:166px;
  height:100%;
  display:flex;
  flex-direction:column;
}
.business-card .subline{margin-top:auto}

/* Forms and tables — consistent width and spacing */
.form-card{padding:22px 24px}
.form-grid{
  gap:14px;
}
.table-wrap{
  width:100%;
}
.table th,.table td{
  line-height:1.4;
}
.card-head{
  min-height:44px;
  align-items:center;
}

/* Director pages were using layout-4 without a base definition */
.director-kpi-summary,
.director-report-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.director-kpi-person-card{
  height:auto;
}

/* History preview should visually line up with dashboard */
#dashboardHistoryPreview{
  width:100%;
  margin-top:22px;
}

/* Desktop wide screens */
@media(min-width:1500px){
  .main-shell{padding-left:36px;padding-right:36px}
  .page.active{max-width:1540px}
}

/* Tablet */
@media(max-width:1180px){
  .app-shell{grid-template-columns:250px minmax(0,1fr)}
  .sidebar{width:250px}
  .metric-grid,.layout-4,.business-grid,.director-kpi-summary,.director-report-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .layout-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mobile / compact */
@media(max-width:900px){
  .app-shell{display:block}
  .sidebar{width:272px}
  .main-shell{padding:0 18px 32px}
  .page.active{max-width:none}
  .topbar{
    min-height:78px;
    align-items:center;
  }
  .hero-panel{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .score-box{justify-content:flex-start}
  .auth-shell{grid-template-columns:1fr}
  .auth-visual{display:none}
  .auth-panel{min-height:100svh;padding:26px 18px}
  .auth-card{padding:30px 26px}
}
@media(max-width:640px){
  .main-shell{padding:0 12px 26px}
  .metric-grid,.layout-4,.layout-3,.business-grid,.director-kpi-summary,.director-report-summary{
    grid-template-columns:1fr;
  }
  .layout-2{grid-template-columns:1fr}
  .topbar{
    gap:10px;
  }
  .topbar h1{font-size:22px}
  .section-head{
    align-items:flex-start;
    min-height:0;
  }
  .hero-panel{padding:20px}
  .metric-card{min-height:118px}
  .auth-card{padding:28px 22px}
}


/* =========================================================
   V15 EXECUTIVE UI — HIGH VISUAL HIERARCHY / SYMMETRY
   ========================================================= */

:root{
  --premium-navy:#08213e;
  --premium-navy-2:#0e355f;
  --premium-blue:#1d63d8;
  --premium-bg:#f3f6fb;
}

/* Overall shell */
body{background:var(--premium-bg)}
.main-shell{padding:0 32px 48px}
.page.active{max-width:1500px}
.topbar{
  min-height:82px;
  border-bottom:0;
  margin-bottom:18px;
  background:rgba(243,246,251,.94);
}
.topbar:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,#dde5ef 12%,#dde5ef 88%,transparent);
}
.topbar h1{font-size:23px}
.breadcrumb{letter-spacing:.01em}

/* Sidebar refinement */
.sidebar{
  background:linear-gradient(180deg,#06192e 0%,#08213e 52%,#0a2a4d 100%);
  padding:18px 14px 16px;
  box-shadow:12px 0 34px rgba(8,33,62,.07);
}
.sidebar-brand{
  display:block;
  padding:0 4px 18px;
}
.sidebar-logo-wrap{
  height:70px;
  background:white;
  border-radius:16px;
  padding:8px 15px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.sidebar-logo{max-height:52px}
.brand-copy{
  padding:12px 9px 0;
  grid-template-columns:auto 1fr;
  gap:3px 8px;
  align-items:center;
}
.brand-copy strong{
  font-size:12px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.brand-copy span{
  font-size:10px;
  letter-spacing:.05em;
}
.nav-menu{gap:3px;padding-top:7px}
.nav-label{
  font-size:9px;
  padding:17px 11px 6px;
  color:#6f8eaf;
}
.nav-item{
  min-height:43px;
  border-radius:10px;
  color:#b9c8da;
  padding:10px 11px;
}
.nav-item.active{
  background:linear-gradient(90deg,#1d63d8,#174c8d);
  box-shadow:0 8px 20px rgba(29,99,216,.24);
  color:white;
}
.nav-item.active .nav-icon{color:white}
.nav-item:hover{transform:translateX(2px)}
.sidebar-profile{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  border-radius:14px;
  padding:10px;
  margin-top:14px;
}

/* New dashboard */
.premium-dashboard{
  --dash-gap:16px;
  padding-bottom:6px;
}
.premium-loading{
  min-height:420px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:14px;
  color:var(--muted);
}
.premium-loading-bar{
  width:180px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,#dfe7f1,#1d63d8,#dfe7f1);
  background-size:200% 100%;
  animation:premiumLoad 1.25s linear infinite;
}
@keyframes premiumLoad{to{background-position:-200% 0}}

.premium-welcome{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) 230px;
  align-items:stretch;
  gap:18px;
  min-height:210px;
  padding:30px 32px;
  border-radius:24px;
  background:
    radial-gradient(circle at 90% 5%,rgba(75,135,218,.38),transparent 28%),
    linear-gradient(135deg,#071a31 0%,#0b2c50 56%,#124b80 100%);
  color:#fff;
  box-shadow:0 18px 50px rgba(8,33,62,.15);
}
.premium-welcome:before{
  content:"";
  position:absolute;
  inset:auto -60px -120px auto;
  width:330px;height:330px;border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  box-shadow:0 0 0 42px rgba(255,255,255,.02),0 0 0 88px rgba(255,255,255,.018);
}
.premium-welcome-copy{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  max-width:820px;
}
.premium-kicker{
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#a9c8f4;
  font-weight:800;
  margin-bottom:11px;
}
.premium-welcome h2{
  margin:0;
  font-size:clamp(27px,2.5vw,38px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.premium-welcome p{
  max-width:760px;
  margin:12px 0 0;
  color:#cbd9e9;
  font-size:13px;
  line-height:1.65;
}
.premium-hero-actions{
  display:flex;gap:9px;flex-wrap:wrap;margin-top:22px;
}
.premium-action{
  min-height:38px;
  padding:9px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
  color:#eaf2ff;
  font-weight:700;
  font-size:11px;
}
.premium-action.primary{
  background:white;
  border-color:white;
  color:#0b2c50;
}
.premium-action:hover{transform:translateY(-1px)}

.premium-score-panel{
  position:relative;z-index:2;
  align-self:center;
  min-height:152px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  border-radius:20px;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.premium-score-label{
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#b6cce5;font-weight:800;
}
.premium-score-number{
  font-size:48px;line-height:1;font-weight:800;letter-spacing:-.05em;margin:8px 0 6px;
}
.premium-score-caption{font-size:11px;color:#d7e3f0}
.premium-score-track{
  height:6px;background:rgba(255,255,255,.13);border-radius:99px;margin-top:14px;overflow:hidden;
}
.premium-score-track span{
  display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#79aef6,#fff);
}

.premium-section-title{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;margin:29px 0 12px;
}
.premium-section-title>div{
  display:flex;align-items:center;gap:11px;min-width:0;
}
.premium-section-title>div>span{
  width:31px;height:31px;border-radius:10px;
  display:grid;place-items:center;
  background:#e8eff8;color:#34587f;
  font-size:10px;font-weight:800;
  flex:0 0 31px;
}
.premium-section-title h3{
  margin:0;font-size:16px;letter-spacing:-.018em;color:#172b43;
}
.premium-section-title p{
  margin:3px 0 0;font-size:11px;color:#7b899a;
}
.premium-section-title small{
  color:#8795a6;font-size:10px;font-weight:700;
}
.premium-link{
  border:0;background:transparent;color:#245ea7;font-size:11px;font-weight:800;padding:7px 0;
}

.premium-primary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--dash-gap);
}
.premium-stat{
  position:relative;
  min-width:0;
  min-height:152px;
  background:#fff;
  border:1px solid #e1e8f0;
  border-radius:18px;
  padding:18px 19px;
  box-shadow:0 7px 24px rgba(31,52,77,.045);
  overflow:hidden;
}
.premium-stat:after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#1d63d8;
}
.premium-stat.purple:after{background:#7451c8}
.premium-stat.amber:after{background:#d38318}
.premium-stat.green:after{background:#168058}
.premium-stat-head{
  display:flex;align-items:center;gap:9px;
  color:#66778a;font-size:11px;font-weight:700;
}
.premium-stat-icon{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:#edf4ff;color:#1d63d8;font-weight:800;
}
.premium-stat.purple .premium-stat-icon{background:#f2effc;color:#7451c8}
.premium-stat.amber .premium-stat-icon{background:#fff5e8;color:#bd6c06}
.premium-stat.green .premium-stat-icon{background:#ecf8f2;color:#087c51}
.premium-stat-value{
  margin:15px 0 7px;
  font-size:28px;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.035em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#172b43;
}
.premium-stat-foot{
  min-height:19px;font-size:10px;color:#8591a0;display:flex;align-items:center;gap:6px;
}

.premium-secondary-grid{
  margin-top:12px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
}
.premium-mini{
  min-height:80px;
  border-radius:14px;
  border:1px solid #e5ebf2;
  background:rgba(255,255,255,.74);
  padding:13px 15px;
}
.premium-mini>div{display:flex;justify-content:space-between;align-items:center;gap:10px}
.premium-mini span{font-size:10px;color:#78879a;font-weight:700}
.premium-mini strong{font-size:17px;color:#17314e}
.premium-mini small{display:block;margin-top:7px;font-size:9.5px;color:#929dab}

.premium-team-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:var(--dash-gap)!important;
}
.premium-team-grid .team-score-card{
  position:relative;
  min-height:148px;
  padding:17px 18px;
  border-radius:17px;
  box-shadow:none;
}
.premium-team-grid .team-score-card .eyebrow{font-size:9px}
.premium-team-grid .team-score-card h3{
  min-height:34px;margin:8px 0 9px;font-size:13px;line-height:1.3;
}
.premium-team-grid .big-score{font-size:29px}
.premium-team-grid .team-score-card p{font-size:10px;line-height:1.45}

.premium-business-grid-wrap{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--dash-gap);
}
.premium-business{
  min-width:0;
  min-height:204px;
  background:#fff;
  border:1px solid #e1e8f0;
  border-radius:18px;
  padding:17px;
  box-shadow:0 7px 24px rgba(31,52,77,.04);
}
.premium-business:before{
  content:"";display:block;height:3px;border-radius:99px;background:#1d63d8;margin:-17px -17px 15px;
}
.premium-business.cyan:before{background:#1c94a8}
.premium-business.green:before{background:#13815d}
.premium-business.purple:before{background:#7653c8}
.premium-business-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.premium-business-brand{display:flex;align-items:center;gap:9px;min-width:0}
.business-mark{
  flex:0 0 34px;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;background:#edf4ff;color:#1c5fb5;font-size:9px;font-weight:900;
}
.premium-business-brand div{min-width:0}
.premium-business-brand strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.premium-business-brand small{display:block;font-size:9px;color:#929dac;margin-top:2px}
.business-status{font-size:8px;font-weight:800;color:#07835d;background:#e9f8f1;border-radius:99px;padding:4px 6px}
.premium-business-reach{display:flex;align-items:baseline;gap:7px;margin:18px 0 13px}
.premium-business-reach strong{font-size:25px;letter-spacing:-.035em}
.premium-business-reach span{font-size:9px;color:#8b98a8}
.premium-business-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.premium-business-grid>div{background:#f7f9fc;border-radius:10px;padding:8px 9px;min-width:0}
.premium-business-grid span{display:block;font-size:8.5px;color:#8a96a6;margin-bottom:4px}
.premium-business-grid strong{display:block;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.premium-analytics-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(360px,.75fr);
  gap:var(--dash-gap);
  align-items:stretch;
}
.premium-panel{
  min-width:0;
  background:#fff;
  border:1px solid #e1e8f0;
  border-radius:19px;
  padding:19px;
  box-shadow:0 7px 24px rgba(31,52,77,.04);
}
.premium-panel-head{
  min-height:42px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  margin-bottom:9px;
}
.premium-panel-head span:first-child{
  font-size:8.5px;letter-spacing:.12em;color:#8a98a8;font-weight:800;
}
.premium-panel-head h3{margin:3px 0 0;font-size:14px;color:#18314e}
.premium-chip{font-size:8px!important;letter-spacing:0!important;background:#edf7f2;color:#07835d!important;border-radius:99px;padding:5px 7px}
.premium-chart-panel .chart-wrap{height:300px}
.premium-kpi-panel{overflow:hidden}
.premium-progress-list .progress-row{
  display:grid;
  grid-template-columns:minmax(115px,1fr) minmax(80px,1.15fr) 62px;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-bottom:1px solid #eff2f6;
}
.premium-progress-list .progress-row:last-child{border-bottom:0}
.premium-progress-list .progress-row label{font-size:9.5px;line-height:1.25;color:#5d6f82}
.premium-progress-list .progress-row strong{font-size:9.5px;text-align:right;color:#2d4662}
.premium-progress-list .progress{height:5px}
.premium-table-panel{padding:0;overflow:hidden}
.premium-table-panel>.table-wrap{border:0;border-radius:0}
.premium-table-panel .table th{padding-top:13px;padding-bottom:13px;background:#f7f9fc}
.premium-table-panel .table td{padding-top:12px;padding-bottom:12px}

/* History becomes a lower-priority section visually */
#dashboardHistoryPreview{
  margin-top:29px;
}
#dashboardHistoryPreview .section-head{
  margin:0 0 11px;
}
#dashboardHistoryPreview .card{
  box-shadow:none;
  border-color:#e1e8f0;
}

/* Better generic panels outside dashboard too */
.form-card,.card{
  border-color:#e1e7ef;
}
.table-wrap{border-color:#e1e7ef}
.table th{background:#f7f9fc}

/* Login polished */
.auth-panel{background:#f5f7fb}
.auth-card{
  border:1px solid #e3e9f0;
  box-shadow:0 24px 60px rgba(14,38,68,.10);
}
.login-brand img{max-height:76px;object-fit:contain}
.auth-form .btn.primary{
  background:linear-gradient(90deg,#08213e,#174c80);
  min-height:48px;
}

/* Responsive */
@media(max-width:1280px){
  .premium-primary-grid,.premium-secondary-grid,.premium-team-grid,.premium-business-grid-wrap{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:1050px){
  .premium-welcome{grid-template-columns:minmax(0,1fr) 190px}
  .premium-analytics-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .main-shell{padding-left:13px;padding-right:13px}
  .premium-welcome{
    grid-template-columns:1fr;
    padding:23px 20px;
  }
  .premium-score-panel{min-height:124px}
  .premium-score-number{font-size:39px}
  .premium-primary-grid,.premium-secondary-grid,.premium-team-grid,.premium-business-grid-wrap{
    grid-template-columns:1fr!important;
  }
  .premium-section-title{align-items:flex-start}
  .premium-section-title small{display:none}
}