/* Thornton OS v10 Visual Refresh
   Presentation-only overrides. Functional module CSS remains unchanged. */

:root {
    --bg: #07111f;
    --panel: #0d1a2b;
    --panel-2: #122238;
    --line: rgba(148, 174, 207, .14);
    --text: #f4f8ff;
    --muted: #91a5bf;
    --blue: #2f8cff;
    --blue-bright: #65b0ff;
    --blue-soft: rgba(47, 140, 255, .13);
    --green: #42d992;
    --red: #ff6464;
    --orange: #ffb648;
    --purple: #9b84ff;
    --shadow: 0 20px 55px rgba(0, 0, 0, .24);
    --shadow-soft: 0 12px 32px rgba(0, 0, 0, .16);
    --radius: 18px;
}

html { background: #07111f; }
body {
    background:
        radial-gradient(circle at 83% -12%, rgba(47, 140, 255, .15), transparent 32%),
        radial-gradient(circle at 18% 110%, rgba(34, 99, 187, .11), transparent 30%),
        #07111f;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---------- App shell ---------- */
.os-shell { grid-template-columns: 264px minmax(0, 1fr); }
.os-sidebar {
    background:
        linear-gradient(180deg, rgba(10, 25, 43, .99), rgba(5, 14, 27, .99));
    border-right: 1px solid rgba(142, 176, 216, .12);
    box-shadow: 16px 0 42px rgba(0, 0, 0, .16);
    padding: 18px 14px 22px;
}
.os-brand {
    min-height: 72px;
    gap: 13px;
    padding: 5px 9px 20px;
    border-bottom-color: rgba(142, 176, 216, .12);
}
.os-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(145deg, #1268d4, #4ea3ff 70%, #7ec1ff);
    box-shadow: 0 10px 28px rgba(32, 132, 255, .30), inset 0 1px rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.14);
}
.os-brand-name {
    font-size: 15px;
    letter-spacing: .19em;
    color: #f7fbff;
}
.os-brand-version {
    color: #6f88a8;
    font-weight: 750;
    letter-spacing: .11em;
}
.os-navigation { padding-top: 14px; }
.nav-section + .nav-section { margin-top: 17px; }
.nav-heading {
    color: #58718f;
    margin: 0 11px 7px;
    font-size: 9px;
    letter-spacing: .18em;
}
.nav-link {
    position: relative;
    min-height: 43px;
    gap: 11px;
    margin: 2px 0;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #a9bad0;
    font-size: 13px;
    font-weight: 720;
}
.nav-link:hover {
    transform: none;
    background: rgba(255,255,255,.045);
    border-color: rgba(255,255,255,.055);
    color: #f5f9ff;
}
.nav-link.active {
    background: linear-gradient(135deg, rgba(47, 140, 255, .17), rgba(47, 140, 255, .08));
    border-color: rgba(76, 157, 255, .22);
    color: #fff;
    box-shadow: inset 3px 0 #46a0ff, 0 8px 24px rgba(0,0,0,.10);
}
.nav-icon {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    font-size: 15px;
    background: rgba(255,255,255,.025);
}
.nav-link.active .nav-icon { background: rgba(74, 160, 255, .13); color: #7fc0ff; }

.os-topbar {
    min-height: 82px;
    padding: 15px 28px;
    background: rgba(7, 17, 31, .76);
    border-bottom-color: rgba(142, 176, 216, .11);
    backdrop-filter: blur(22px) saturate(140%);
}
.os-topbar h1 {
    font-size: 23px;
    letter-spacing: -.025em;
    font-weight: 820;
}
.os-topbar p { color: #7d93ad; }
.topbar-status {
    padding: 8px 11px;
    border: 1px solid rgba(142,176,216,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
}
.status-dot { background: #43dc91; box-shadow: 0 0 0 5px rgba(67,220,145,.10), 0 0 16px rgba(67,220,145,.22); }
#currentTime { color: #bed0e5; }

.os-workspace {
    padding: 30px;
    background:
        radial-gradient(circle at 93% 0%, rgba(47,140,255,.075), transparent 28%),
        transparent;
}

/* ---------- Shared surfaces ---------- */
.page-intro { margin-bottom: 24px; }
.page-intro h2, .commission-title h2 { letter-spacing: -.035em; }
.badge {
    border: 1px solid rgba(71, 218, 151, .18);
    background: rgba(71, 218, 151, .085);
    color: #83efb9;
}
.kpi-card,
.panel,
.module-card,
.commission-panel,
.commission-kpi,
.history-card,
.podium-card,
.inventory-table-panel,
.equipment-panel {
    border-color: rgba(145, 177, 216, .12);
    background:
        linear-gradient(145deg, rgba(17, 34, 56, .96), rgba(9, 23, 40, .96));
    box-shadow: var(--shadow-soft);
}
.kpi-card, .commission-kpi, .history-card, .podium-card {
    position: relative;
    overflow: hidden;
}
.kpi-card::before, .commission-kpi::before, .history-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(104,176,255,.34), transparent);
    opacity: .7;
}
.kpi-card { border-radius: 17px; padding: 20px; }
.kpi-value { font-size: 32px; letter-spacing: -.04em; }
.kpi-note { color: #7189a6; }
.panel { border-radius: 18px; }
.module-card { border-radius: 14px; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.module-card:hover { transform: translateY(-2px); background: rgba(47,140,255,.055); }
.action-button {
    border-radius: 13px;
    background: rgba(255,255,255,.022);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.action-button:hover { transform: translateY(-2px); }
.primary-button, .commission-refresh, .inventory-refresh {
    background: linear-gradient(135deg, #1670df, #3593ff);
    border: 1px solid rgba(112,185,255,.25);
    box-shadow: 0 10px 24px rgba(19,112,223,.22);
}
.primary-button:hover, .commission-refresh:hover, .inventory-refresh:hover { filter: brightness(1.07); }

/* ---------- Mission Control dashboard ---------- */
.mission-hero {
    position: relative;
    overflow: hidden;
    min-height: 210px;
    padding: 34px 36px;
    border: 1px solid rgba(102,174,255,.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 78% 18%, rgba(96,175,255,.28), transparent 24%),
        linear-gradient(120deg, #081524 0%, #0b2b54 56%, #0b65bf 120%);
    box-shadow: 0 24px 60px rgba(0,0,0,.22);
}
.mission-hero::after {
    content: "THORNTON";
    position: absolute;
    right: 24px;
    bottom: -27px;
    font-size: clamp(70px, 9vw, 150px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.07em;
    color: rgba(255,255,255,.035);
    pointer-events: none;
}
.mission-hero > * { position: relative; z-index: 1; }
.mission-hero h2 {
    max-width: 720px;
    font-size: clamp(30px, 3.5vw, 46px);
    letter-spacing: -.045em;
}
.mission-hero p { color: #c9dbef; font-size: 14px; }
.mission-system {
    min-width: 235px;
    padding: 14px 16px;
    border-color: rgba(255,255,255,.14);
    background: rgba(4,17,32,.24);
    box-shadow: inset 0 1px rgba(255,255,255,.05);
    backdrop-filter: blur(10px);
}
.mission-kpis { gap: 14px; }
.mission-kpi {
    min-height: 154px;
    padding: 20px;
    border: 1px solid rgba(145,177,216,.12);
    border-top: 1px solid rgba(145,177,216,.12) !important;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(17,34,56,.97), rgba(9,23,40,.97));
    color: #f4f8ff;
    box-shadow: var(--shadow-soft);
}
.mission-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #2f8cff;
}
.mission-kpi.money::before { background: #42d992; }
.mission-kpi.leader::before { background: #ffb648; }
.mission-kpi:hover { box-shadow: 0 18px 38px rgba(0,0,0,.22); border-color: rgba(86,160,255,.26); }
.mission-kpi-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(47,140,255,.10);
}
.mission-kpi.money .mission-kpi-icon { background: rgba(66,217,146,.10); }
.mission-kpi.leader .mission-kpi-icon { background: rgba(255,182,72,.10); }
.mission-kpi-label, .mission-kpi small { color: #8097b3; }
.mission-kpi strong { color: #f8fbff; letter-spacing: -.04em; }
.mission-panel {
    border: 1px solid rgba(145,177,216,.12);
    background: linear-gradient(145deg, rgba(17,34,56,.96), rgba(9,23,40,.96));
    color: #edf5ff;
    box-shadow: var(--shadow-soft);
}
.mission-panel-head h3 { color: #f6f9ff; }
.mission-panel-head a { color: #69b7ff; }
.mission-refresh {
    border-color: rgba(145,177,216,.14);
    background: rgba(255,255,255,.035);
    color: #c9d8e9;
}
.mission-refresh:hover { background: rgba(47,140,255,.09); border-color: rgba(47,140,255,.25); }
.schedule-row, .snapshot-row, .activity-row { border-bottom-color: rgba(145,177,216,.10); }
.schedule-row { color: #eef5ff; }
.schedule-row:hover { background: rgba(47,140,255,.04); }
.schedule-row span, .snapshot-row small, .activity-row small, .activity-row time { color: #8197b1; }
.schedule-row time { color: #69b7ff; }
.schedule-row em {
    background: rgba(47,140,255,.10);
    border: 1px solid rgba(47,140,255,.15);
    color: #8fc6ff;
}
.mission-actions a {
    border-color: rgba(145,177,216,.11);
    background: rgba(255,255,255,.025);
    color: #edf5ff;
}
.mission-actions a:hover { border-color: rgba(47,140,255,.30); background: rgba(47,140,255,.07); }
.mission-actions small { color: #8197b1; }
.snapshot-rank { background: rgba(47,140,255,.12); color: #84c1ff; }
.snapshot-row em { color: #67dda3; }
.activity-row > span { background: rgba(47,140,255,.09); }
.mission-empty { color: #8297b0; }

/* ---------- Commission center ---------- */
.commission-hero {
    border-radius: 20px;
    border-color: rgba(92,164,255,.17);
    background:
        radial-gradient(circle at 88% 10%, rgba(47,140,255,.20), transparent 30%),
        linear-gradient(145deg, rgba(18,39,67,.98), rgba(7,20,36,.98));
}
.eyebrow { color: #72b9ff !important; }
.commission-field select,
.inventory-controls input,
.inventory-controls select,
.equipment-panel select {
    border-color: rgba(145,177,216,.13);
    background: rgba(5,17,31,.58);
    color: #eef5ff;
}
.commission-kpi.primary {
    border-color: rgba(47,140,255,.27);
    background: linear-gradient(145deg, rgba(25,72,130,.48), rgba(8,22,39,.97));
}
.commission-panel-header { border-bottom-color: rgba(145,177,216,.10); }
.commission-table th, .commission-table td { border-bottom-color: rgba(145,177,216,.085); }
.commission-table th { background: rgba(255,255,255,.018); color: #8298b3; }
.commission-table tbody tr:hover { background: rgba(47,140,255,.06); }
.commission-action {
    border-color: rgba(145,177,216,.11);
    background: rgba(255,255,255,.022);
}
.commission-action:hover { background: rgba(47,140,255,.065); }
.action-icon { background: rgba(47,140,255,.11); color: #78bdff; }

/* Leaderboard refinement */
.leaderboard-hero { gap: 16px; }
.leaderboard-hero .podium-card {
    min-height: 188px;
    border-radius: 19px;
    box-shadow: var(--shadow-soft);
}
.leaderboard-hero .podium-card.place-1 {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(0,0,0,.24), 0 0 0 1px rgba(255,203,68,.08);
}
.commission-table-wide {
    background: linear-gradient(180deg,#0b1c30,#091726);
}
.commission-table-wide th {
    background: #0d2744;
    color: #99aec7;
}
.commission-table-wide tbody tr { background: rgba(9,27,47,.88); }
.commission-table-wide tbody tr:nth-child(even) { background: rgba(13,34,58,.88); }
.commission-table-wide tbody tr:hover { background: rgba(37,91,147,.34); }

/* ---------- Inventory ---------- */
.equipment-panel { border-radius: 18px; }
.feature-check {
    border-color: rgba(145,177,216,.11);
    background: rgba(255,255,255,.022);
    color: #b8c8da !important;
}
.feature-check:hover { border-color: rgba(47,140,255,.30); background: rgba(47,140,255,.05); }
.feature-check:has(input:checked) { border-color: rgba(47,140,255,.45); background: rgba(47,140,255,.10); }
.inventory-alert { border-color: rgba(255,190,81,.23); background: rgba(255,190,81,.065); }
.inventory-table-heading { border-bottom-color: rgba(145,177,216,.10); }
.inventory-table th { background: #0b1a2c; color: #8198b4; border-bottom-color: rgba(145,177,216,.11); }
.inventory-table td { border-bottom-color: rgba(145,177,216,.075); }
.inventory-table tbody tr:hover { background: rgba(47,140,255,.055); }

/* ---------- Standalone delivery pages ---------- */
.sidebar {
    background: linear-gradient(180deg, #0a1a2d, #06101f) !important;
    box-shadow: 12px 0 38px rgba(0,0,0,.18) !important;
}
.brand { border-bottom-color: rgba(145,177,216,.12) !important; }
.brand-main { letter-spacing: -.04em !important; }
.brand-sub { color: #72b8ff !important; }
.nav-item { border-left: 3px solid transparent; }
.nav-item.active { background: rgba(47,140,255,.15) !important; border-left-color: #4aa0ff; }
.app {
    background:
        radial-gradient(circle at 95% 0%, rgba(47,140,255,.08), transparent 30%),
        #edf3f9;
}
.workspace {
    border: 1px solid #dce5ef;
    box-shadow: 0 18px 45px rgba(31,56,86,.10) !important;
}
.manager-table-wrap { box-shadow: 0 8px 22px rgba(24,50,80,.06); }
.manager-table thead { background: linear-gradient(180deg,#102b4a,#0b2038) !important; }
.small-button, .primary-button { box-shadow: 0 8px 18px rgba(0,87,184,.18); }
.delivery-card { box-shadow: 0 10px 26px rgba(24,50,80,.08) !important; }

/* ---------- Polish ---------- */
::selection { background: rgba(47,140,255,.35); color: white; }
* { scrollbar-width: thin; scrollbar-color: #35506d #07111f; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #07111f; }
::-webkit-scrollbar-thumb { background: #304b68; border: 2px solid #07111f; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #406487; }

button, a, input, select, textarea { transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #63adff;
    outline-offset: 2px;
}

@media (max-width: 1050px) {
    .os-workspace { padding: 24px; }
    .mission-hero { min-height: auto; }
}

@media (max-width: 760px) {
    .os-topbar { min-height: 70px; }
    .os-workspace { padding: 17px 13px; }
    .mission-hero { padding: 24px; border-radius: 20px; }
    .mission-hero::after { display: none; }
    .mission-kpis { gap: 12px; }
    .mission-panel { border-radius: 17px; }
    .topbar-status { padding: 8px; }
}


/* ===== v10.2 Leaderboard redesign ===== */
.leaderboard-page{gap:22px!important}
.leaderboard-banner{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:30px 32px;border:1px solid rgba(86,164,255,.22);border-radius:24px;background:radial-gradient(circle at 80% 0%,rgba(81,166,255,.28),transparent 30%),linear-gradient(120deg,#081828 0%,#0d3158 58%,#0e63b5 125%);box-shadow:0 24px 60px rgba(0,0,0,.24)}
.leaderboard-banner:after{content:'LEADERBOARD';position:absolute;right:22px;bottom:-18px;font-size:clamp(54px,8vw,112px);font-weight:950;letter-spacing:-.07em;color:rgba(255,255,255,.04);pointer-events:none}
.leaderboard-banner-copy,.leaderboard-controls{position:relative;z-index:1}
.leaderboard-banner-copy{max-width:720px}
.leaderboard-kicker{display:block;margin-bottom:7px;color:#7dc2ff;font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.leaderboard-banner h2{margin:0;font-size:clamp(32px,4vw,48px);line-height:1;letter-spacing:-.05em}
.leaderboard-banner p{max-width:680px;margin:12px 0 0;color:#c6daee;line-height:1.55;font-size:14px}
.leaderboard-controls{display:grid;grid-template-columns:120px 150px auto;gap:10px;align-items:end;padding:14px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(4,17,31,.24);backdrop-filter:blur(12px)}
.leaderboard-controls .commission-field label{color:#9db6d0}
.leaderboard-controls .commission-field select{height:44px;background:rgba(4,14,26,.62);border-color:rgba(255,255,255,.15)}
.leaderboard-controls .commission-refresh{height:44px;min-width:104px}
.leaderboard-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:2px 4px}
.leaderboard-section-heading h3{margin:0;font-size:24px;letter-spacing:-.03em}
.leaderboard-period-pill{padding:8px 12px;border-radius:999px;border:1px solid rgba(85,163,255,.20);background:rgba(47,140,255,.08);color:#94c9ff;font-size:12px;font-weight:800}
.leaderboard-hero{align-items:end;gap:16px!important;margin-bottom:4px}
.leaderboard-hero .podium-card{position:relative;min-height:218px!important;border-radius:22px!important;padding:28px 22px 24px!important;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.24)!important}
.leaderboard-hero .podium-card:before{content:'';position:absolute;inset:0 0 auto;height:4px;background:#4d92d9}
.leaderboard-hero .podium-card.place-1{order:2;min-height:252px!important;transform:translateY(-10px)!important;background:radial-gradient(circle at 50% -5%,rgba(255,203,55,.32),transparent 48%),linear-gradient(145deg,#43320c,#171a22 55%,#0b1625)!important;border-color:rgba(255,206,69,.42)!important}
.leaderboard-hero .podium-card.place-1:before{background:linear-gradient(90deg,#d8a713,#ffe071,#d8a713)}
.leaderboard-hero .podium-card.place-2{order:1;background:radial-gradient(circle at 50% -5%,rgba(210,224,241,.20),transparent 48%),linear-gradient(145deg,#263241,#111d2b)!important}
.leaderboard-hero .podium-card.place-2:before{background:linear-gradient(90deg,#8fa3b9,#e6eef6,#8fa3b9)}
.leaderboard-hero .podium-card.place-3{order:3;background:radial-gradient(circle at 50% -5%,rgba(211,123,63,.22),transparent 48%),linear-gradient(145deg,#3a251a,#111c29)!important}
.leaderboard-hero .podium-card.place-3:before{background:linear-gradient(90deg,#9f5f35,#e79a5e,#9f5f35)}
.leaderboard-hero .podium-rank{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 14px;border-radius:50%;font-size:18px!important;font-weight:950;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13)}
.leaderboard-hero .place-1 .podium-rank{width:72px;height:72px;background:rgba(255,210,68,.14);border-color:rgba(255,216,88,.30);color:#ffe47c}
.leaderboard-hero .podium-card h3{font-size:20px!important;letter-spacing:-.02em}
.leaderboard-hero .podium-card .units{margin-top:10px;font-size:30px!important;letter-spacing:-.04em}
.leaderboard-hero .podium-card .income{margin-top:9px!important;font-size:12px!important;line-height:1.5}
.leaderboard-ranking-panel{border-radius:20px!important;overflow:hidden}
.leaderboard-table-header{padding:20px 22px!important;background:rgba(255,255,255,.018)}
.leaderboard-table-header h3{font-size:20px!important}
.leaderboard-scroll-hint{color:#7189a5;font-size:11px}
.leaderboard-page .commission-table-wide th{height:47px;background:#0c2b4b!important;color:#a9bfd6!important;font-size:9px!important}
.leaderboard-page .commission-table-wide td{padding-top:15px!important;padding-bottom:15px!important}
.leaderboard-page .commission-table-wide tbody tr:nth-child(1){background:linear-gradient(90deg,rgba(255,203,55,.10),rgba(9,27,47,.88) 18%)!important}
.leaderboard-page .commission-table-wide tbody tr:nth-child(2){background:linear-gradient(90deg,rgba(204,217,232,.075),rgba(13,34,58,.88) 18%)!important}
.leaderboard-page .commission-table-wide tbody tr:nth-child(3){background:linear-gradient(90deg,rgba(211,123,63,.08),rgba(9,27,47,.88) 18%)!important}
.leaderboard-page .commission-table-wide .sticky-salesperson{min-width:190px!important}
@media(max-width:950px){.leaderboard-banner{align-items:stretch;flex-direction:column}.leaderboard-controls{grid-template-columns:1fr 1fr auto;width:100%}.leaderboard-hero{grid-template-columns:1fr!important}.leaderboard-hero .podium-card,.leaderboard-hero .podium-card.place-1{order:initial!important;min-height:190px!important;transform:none!important}}
@media(max-width:650px){.leaderboard-banner{padding:24px 20px}.leaderboard-banner:after{display:none}.leaderboard-controls{grid-template-columns:1fr}.leaderboard-section-heading{align-items:flex-start;flex-direction:column}.leaderboard-scroll-hint{display:none}}


/* ===== v10.3 Sales Race energy pass ===== */
.leaderboard-page{
  position:relative;
  isolation:isolate;
}
.leaderboard-page::before{
  content:"";
  position:fixed;
  inset:82px 0 0 264px;
  pointer-events:none;
  z-index:-1;
  opacity:.22;
  background-image:
    linear-gradient(rgba(67,145,230,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(67,145,230,.055) 1px,transparent 1px),
    radial-gradient(circle at 50% 0%,rgba(35,140,255,.18),transparent 36%);
  background-size:42px 42px,42px 42px,auto;
}

.leaderboard-banner{
  min-height:230px;
  border-color:rgba(80,176,255,.32)!important;
  background:
    radial-gradient(circle at 88% 15%,rgba(53,183,255,.38),transparent 24%),
    radial-gradient(circle at 60% 120%,rgba(50,115,255,.24),transparent 32%),
    linear-gradient(118deg,#06121f 0%,#0a2f57 52%,#0568c8 125%)!important;
  box-shadow:0 28px 70px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.06)!important;
}
.leaderboard-banner::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-150px;
  top:-210px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:0 0 0 55px rgba(255,255,255,.018),0 0 0 110px rgba(255,255,255,.012);
}
.leaderboard-banner h2{
  font-size:clamp(38px,5vw,62px)!important;
  text-shadow:0 7px 28px rgba(0,0,0,.24);
}
.leaderboard-banner p{
  font-size:15px!important;
  max-width:760px!important;
}
.leaderboard-kicker{
  color:#8bd1ff!important;
  text-shadow:0 0 18px rgba(74,176,255,.28);
}

/* Podium becomes the visual focus */
.leaderboard-hero{
  grid-template-columns:1fr 1.12fr 1fr!important;
  gap:18px!important;
  padding:8px 0 4px;
}
.leaderboard-hero .podium-card{
  min-height:228px!important;
  border-width:1px!important;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.leaderboard-hero .podium-card:hover{
  transform:translateY(-5px);
}
.leaderboard-hero .podium-card.place-1{
  min-height:278px!important;
  transform:translateY(-14px)!important;
  border-color:rgba(255,218,89,.58)!important;
  background:
    radial-gradient(circle at 50% -12%,rgba(255,225,111,.48),transparent 40%),
    radial-gradient(circle at 50% 100%,rgba(255,151,38,.13),transparent 45%),
    linear-gradient(155deg,#5a450e 0%,#201b12 46%,#091727 100%)!important;
  box-shadow:0 28px 70px rgba(0,0,0,.34),0 0 0 1px rgba(255,214,78,.12),0 0 44px rgba(255,184,44,.14)!important;
}
.leaderboard-hero .podium-card.place-1::after{
  content:"SOTM LEADER";
  position:absolute;
  top:17px;
  right:17px;
  padding:7px 10px;
  border:1px solid rgba(255,224,117,.28);
  border-radius:999px;
  background:rgba(255,201,62,.11);
  color:#ffe58a;
  font-size:9px;
  font-weight:950;
  letter-spacing:.14em;
  box-shadow:0 0 22px rgba(255,204,72,.08);
}
.leaderboard-hero .podium-card.place-1::before{
  height:5px!important;
  background:linear-gradient(90deg,#b88400,#fff0a2,#f1b727,#fff0a2,#b88400)!important;
  background-size:220% 100%!important;
  animation:leaderGoldSweep 5s linear infinite;
}
@keyframes leaderGoldSweep{to{background-position:220% 0}}
.leaderboard-hero .place-1 .podium-rank::before{
  content:"🏆";
  position:absolute;
  top:-28px;
  font-size:30px;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.25));
}
.leaderboard-hero .podium-rank{
  position:relative;
  margin-top:10px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 10px 26px rgba(0,0,0,.18);
}
.leaderboard-hero .place-2 .podium-rank::before{content:"🥈";position:absolute;top:-23px;font-size:23px}
.leaderboard-hero .place-3 .podium-rank::before{content:"🥉";position:absolute;top:-23px;font-size:23px}
.leaderboard-hero .podium-card h3{
  margin-top:15px!important;
  font-size:clamp(20px,2vw,27px)!important;
  text-transform:uppercase;
  letter-spacing:.01em!important;
}
.leaderboard-hero .place-1 h3{color:#fff7d6!important}
.leaderboard-hero .podium-card .units{
  font-size:clamp(26px,2.3vw,36px)!important;
  font-weight:950!important;
  text-shadow:0 4px 18px rgba(0,0,0,.20);
}
.leaderboard-hero .place-1 .units{color:#ffe077!important}
.leaderboard-hero .place-2 .units{color:#dfeaff!important}
.leaderboard-hero .place-3 .units{color:#ffab66!important}
.leaderboard-hero .podium-card .income{
  font-size:13px!important;
  color:#aebfd2!important;
}

/* Ranking panel feels like a scoreboard */
.leaderboard-ranking-panel{
  border-color:rgba(72,151,235,.20)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.24)!important;
}
.leaderboard-table-header{
  min-height:90px;
  background:
    linear-gradient(90deg,rgba(28,90,155,.24),rgba(255,255,255,.012))!important;
}
.leaderboard-table-header h3{
  font-size:26px!important;
  letter-spacing:-.035em;
}
.leaderboard-page .commission-table-wide th{
  background:linear-gradient(180deg,#0f3b68,#0b2d51)!important;
  color:#b9cde2!important;
  border-bottom-color:rgba(82,166,255,.24)!important;
}
.leaderboard-page .commission-table-wide td{
  font-size:14px!important;
}
.leaderboard-page .commission-table-wide tbody tr{
  transition:background .16s ease,transform .16s ease;
}
.leaderboard-page .commission-table-wide tbody tr:hover{
  background:linear-gradient(90deg,rgba(41,126,211,.24),rgba(13,34,58,.88))!important;
}
.leaderboard-page .rank-badge{
  width:34px!important;
  height:34px!important;
  font-size:13px!important;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px rgba(255,255,255,.05);
}
.leaderboard-page tbody tr:nth-child(1) .rank-badge{background:rgba(255,204,62,.16)!important;color:#ffe47b!important;border-color:rgba(255,218,106,.20)!important}
.leaderboard-page tbody tr:nth-child(2) .rank-badge{background:rgba(195,211,229,.13)!important;color:#eef6ff!important}
.leaderboard-page tbody tr:nth-child(3) .rank-badge{background:rgba(222,125,61,.15)!important;color:#ffb173!important}

/* Compact mobile competition board */
@media(max-width:650px){
  .leaderboard-page::before{display:none}
  .leaderboard-banner{
    min-height:auto!important;
    padding:22px 18px 18px!important;
    border-radius:20px!important;
  }
  .leaderboard-banner h2{font-size:34px!important}
  .leaderboard-banner p{font-size:13px!important;line-height:1.45!important}
  .leaderboard-controls{margin-top:4px!important}
  .leaderboard-section-heading{margin-top:2px}
  .leaderboard-hero{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .leaderboard-hero .podium-card,
  .leaderboard-hero .podium-card.place-1{
    transform:none!important;
    min-height:150px!important;
    padding:18px 12px 14px!important;
    border-radius:17px!important;
  }
  .leaderboard-hero .podium-card.place-1{
    grid-column:1/-1!important;
    min-height:190px!important;
    order:-1!important;
  }
  .leaderboard-hero .podium-card.place-2,.leaderboard-hero .podium-card.place-3{order:initial!important}
  .leaderboard-hero .podium-card.place-1::after{
    top:12px;right:12px;padding:5px 8px;font-size:8px
  }
  .leaderboard-hero .podium-rank{
    width:50px!important;height:50px!important;margin:2px auto 8px!important
  }
  .leaderboard-hero .place-1 .podium-rank{width:58px!important;height:58px!important}
  .leaderboard-hero .place-1 .podium-rank::before{top:-23px;font-size:24px}
  .leaderboard-hero .place-2 .podium-rank::before,.leaderboard-hero .place-3 .podium-rank::before{top:-18px;font-size:18px}
  .leaderboard-hero .podium-card h3{font-size:15px!important;margin:7px 0 3px!important}
  .leaderboard-hero .podium-card .units{font-size:21px!important;margin-top:4px!important}
  .leaderboard-hero .podium-card .income{font-size:10px!important;margin-top:5px!important}
  .leaderboard-ranking-panel{border-radius:17px!important}
  .leaderboard-table-header{min-height:74px;padding:16px!important}
  .leaderboard-table-header h3{font-size:22px!important}
}
@media(prefers-reduced-motion:reduce){.leaderboard-hero .podium-card.place-1::before{animation:none!important}}

/* ===== v10.4 Mission Control + Commission performance hub ===== */

/* Mission Control: dealership command center */
.mission-hero{
  min-height:245px!important;
  padding:38px 40px!important;
  border-color:rgba(84,172,255,.28)!important;
  background:
    radial-gradient(circle at 85% 15%,rgba(72,183,255,.34),transparent 25%),
    radial-gradient(circle at 62% 110%,rgba(48,111,255,.20),transparent 32%),
    linear-gradient(118deg,#06131f 0%,#0a3159 55%,#0866be 130%)!important;
  box-shadow:0 28px 70px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.06)!important;
}
.mission-hero::before{
  content:"";
  position:absolute;
  width:470px;
  height:470px;
  right:-170px;
  top:-230px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:0 0 0 64px rgba(255,255,255,.017),0 0 0 128px rgba(255,255,255,.010);
}
.mission-hero::after{
  content:"MISSION CONTROL"!important;
  right:28px!important;
  bottom:-18px!important;
  font-size:clamp(58px,8vw,128px)!important;
  color:rgba(255,255,255,.035)!important;
}
.mission-hero h2{
  font-size:clamp(36px,4.2vw,58px)!important;
  max-width:760px!important;
  text-shadow:0 8px 30px rgba(0,0,0,.24);
}
.mission-hero p{font-size:15px!important;line-height:1.5!important}
.mission-system{
  min-width:255px!important;
  padding:16px 18px!important;
  border-color:rgba(255,255,255,.16)!important;
  background:rgba(3,15,29,.30)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.05)!important;
}
.mission-system strong{font-size:15px!important}
.mission-status-dot{box-shadow:0 0 0 7px rgba(74,222,128,.12),0 0 24px rgba(74,222,128,.30)!important}

.mission-kpis{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:15px!important;
}
.mission-kpi{
  min-height:168px!important;
  padding:22px!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,rgba(18,38,64,.98),rgba(8,22,39,.98))!important;
  box-shadow:0 16px 40px rgba(0,0,0,.20)!important;
}
.mission-kpi::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-55px;
  bottom:-55px;
  border-radius:50%;
  background:rgba(65,155,255,.055);
}
.mission-kpi:hover{
  transform:translateY(-4px)!important;
  border-color:rgba(86,160,255,.34)!important;
  box-shadow:0 22px 48px rgba(0,0,0,.26)!important;
}
.mission-kpi-icon{
  width:44px!important;
  height:44px!important;
  border-radius:13px!important;
  font-size:23px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05);
}
.mission-kpi-label{margin-top:16px!important;font-size:10px!important;letter-spacing:.12em!important}
.mission-kpi strong{font-size:34px!important;text-shadow:0 4px 18px rgba(0,0,0,.16)}
.mission-kpi small{font-size:11px!important}
.mission-kpi.money{
  background:linear-gradient(145deg,rgba(14,56,48,.90),rgba(8,27,34,.98))!important;
  border-color:rgba(68,218,149,.15)!important;
}
.mission-kpi.money::before{width:4px!important;box-shadow:0 0 18px rgba(66,217,146,.22)}
.mission-kpi.leader{
  background:
    radial-gradient(circle at 90% 0%,rgba(255,194,66,.18),transparent 42%),
    linear-gradient(145deg,rgba(66,48,15,.90),rgba(14,25,37,.98))!important;
  border-color:rgba(255,194,66,.21)!important;
}
.mission-kpi.leader::before{width:4px!important;box-shadow:0 0 18px rgba(255,182,72,.22)}
.mission-kpi.leader strong{color:#ffe287!important}

.mission-layout{gap:20px!important}
.mission-panel{
  border-radius:20px!important;
  box-shadow:0 18px 44px rgba(0,0,0,.20)!important;
  overflow:hidden;
}
.mission-panel-head{
  margin:-23px -23px 18px!important;
  padding:19px 22px 17px!important;
  border-bottom:1px solid rgba(145,177,216,.10);
  background:linear-gradient(90deg,rgba(30,90,153,.18),rgba(255,255,255,.01));
}
.mission-panel-head h3{font-size:22px!important;letter-spacing:-.025em}
.mission-panel-head .eyebrow{margin:0 0 4px!important}
.mission-actions{gap:12px!important}
.mission-actions a{
  min-height:125px!important;
  padding:17px!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012))!important;
}
.mission-actions a:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.16)}
.mission-actions span{font-size:26px!important}
.mission-actions strong{font-size:15px!important}
.schedule-row{padding:15px 5px!important}
.schedule-row time{font-size:14px!important}
.snapshot-rank{border-radius:50%!important;background:rgba(47,140,255,.14)!important}
.snapshot-row:first-child .snapshot-rank{background:rgba(255,204,62,.16)!important;color:#ffe079!important}

/* Commission dashboard: performance hub */
#commissionDashboardPage{gap:20px!important}
#commissionDashboardPage .commission-hero{
  min-height:235px;
  align-items:flex-end!important;
  padding:34px 36px!important;
  border-radius:24px!important;
  border-color:rgba(83,169,255,.28)!important;
  background:
    radial-gradient(circle at 86% 5%,rgba(75,184,255,.34),transparent 27%),
    radial-gradient(circle at 62% 120%,rgba(47,109,255,.19),transparent 34%),
    linear-gradient(118deg,#06131f 0%,#0b315a 56%,#0768c7 132%)!important;
  box-shadow:0 28px 70px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.06)!important;
  overflow:hidden;
  position:relative;
}
#commissionDashboardPage .commission-hero::after{
  content:"PERFORMANCE";
  position:absolute;
  right:25px;
  bottom:-24px;
  font-size:clamp(62px,8vw,128px);
  font-weight:950;
  letter-spacing:-.07em;
  color:rgba(255,255,255,.035);
  pointer-events:none;
}
#commissionDashboardPage .commission-hero>div{position:relative;z-index:1}
#commissionDashboardPage .commission-hero h2{
  font-size:clamp(36px,4vw,56px)!important;
  letter-spacing:-.05em!important;
  text-shadow:0 8px 30px rgba(0,0,0,.22);
}
#commissionDashboardPage .commission-hero p{font-size:15px!important;color:#c8dcef!important}
#commissionDashboardPage .commission-filters{
  padding:14px!important;
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px;
  background:rgba(4,17,31,.24);
  backdrop-filter:blur(12px);
}
#commissionDashboardPage .commission-statusbar{
  padding:2px 6px 0!important;
}

#commissionDashboardPage .commission-kpis{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:14px!important;
}
#commissionDashboardPage .commission-kpi{
  min-height:155px;
  padding:20px!important;
  border-radius:19px!important;
  background:linear-gradient(145deg,rgba(18,38,64,.98),rgba(8,22,39,.98))!important;
  box-shadow:0 16px 40px rgba(0,0,0,.20)!important;
}
#commissionDashboardPage .commission-kpi::after{
  width:110px!important;height:110px!important;right:-48px!important;top:auto!important;bottom:-48px!important;
  background:rgba(65,155,255,.055)!important;
}
#commissionDashboardPage .commission-kpi.primary{
  background:linear-gradient(145deg,rgba(26,84,151,.72),rgba(9,29,52,.98))!important;
  border-color:rgba(79,165,255,.34)!important;
}
#commissionDashboardPage .commission-kpi:nth-child(2),
#commissionDashboardPage .commission-kpi:nth-child(3){
  border-color:rgba(69,218,149,.17)!important;
  background:linear-gradient(145deg,rgba(14,54,49,.82),rgba(8,25,36,.98))!important;
}
#commissionDashboardPage .commission-kpi:nth-child(4){
  border-color:rgba(93,194,255,.16)!important;
}
#commissionDashboardPage .commission-kpi:nth-child(5){
  border-color:rgba(255,194,66,.23)!important;
  background:
    radial-gradient(circle at 90% 0%,rgba(255,194,66,.17),transparent 44%),
    linear-gradient(145deg,rgba(62,46,15,.86),rgba(12,24,37,.98))!important;
}
#commissionDashboardPage .commission-kpi:nth-child(5) .value{color:#ffe287!important}
#commissionDashboardPage .commission-kpi .label{font-size:9px!important;letter-spacing:.13em!important}
#commissionDashboardPage .commission-kpi .value{font-size:30px!important;margin-top:13px!important}
#commissionDashboardPage .commission-kpi .note{margin-top:auto!important;padding-top:13px!important}

#commissionDashboardPage .commission-panel{
  border-radius:20px!important;
  box-shadow:0 20px 48px rgba(0,0,0,.20)!important;
}
#commissionDashboardPage .commission-panel-header{
  min-height:78px;
  padding:19px 21px!important;
  background:linear-gradient(90deg,rgba(30,90,153,.17),rgba(255,255,255,.01));
}
#commissionDashboardPage .commission-panel-header h3{font-size:20px!important;letter-spacing:-.025em}
#commissionDashboardPage .commission-layout{gap:20px!important}
#commissionDashboardPage .commission-analytics{gap:20px!important}
#commissionDashboardPage .mix-total strong{font-size:58px!important;text-shadow:0 5px 22px rgba(0,0,0,.20)}
#commissionDashboardPage .mix-stack{height:17px!important;box-shadow:inset 0 1px 4px rgba(0,0,0,.25)}
#commissionDashboardPage .sales-bar-track,#commissionDashboardPage .performance-track{height:11px!important}
#commissionDashboardPage .sales-bar-fill,#commissionDashboardPage .performance-fill{box-shadow:0 0 18px rgba(63,159,255,.18)}
#commissionDashboardPage .commission-actions{gap:14px!important}
#commissionDashboardPage .commission-action{
  min-height:92px;
  padding:18px!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.012))!important;
}
#commissionDashboardPage .commission-action:hover{transform:translateY(-3px)!important;box-shadow:0 14px 30px rgba(0,0,0,.17)}
#commissionDashboardPage .action-icon{width:44px!important;height:44px!important;border-radius:13px!important;font-size:20px!important}

@media(max-width:1280px){
  #commissionDashboardPage .commission-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .mission-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #commissionDashboardPage .commission-hero{align-items:stretch!important;flex-direction:column}
  #commissionDashboardPage .commission-filters{width:100%}
}
@media(max-width:650px){
  .mission-hero{min-height:auto!important;padding:25px 20px!important;border-radius:20px!important}
  .mission-hero h2{font-size:34px!important}
  .mission-system{width:100%!important;min-width:0!important}
  .mission-kpis{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .mission-kpi{min-height:138px!important;padding:16px!important;border-radius:16px!important}
  .mission-kpi strong{font-size:27px!important}
  .mission-kpi-icon{width:36px!important;height:36px!important;font-size:19px!important}
  .mission-kpi-label{margin-top:11px!important;font-size:9px!important}
  .mission-layout{gap:14px!important}
  .mission-panel{padding:17px!important;border-radius:17px!important}
  .mission-panel-head{margin:-17px -17px 14px!important;padding:15px 17px!important}
  .mission-actions a{min-height:100px!important;padding:13px!important}

  #commissionDashboardPage .commission-hero{min-height:auto;padding:24px 20px!important;border-radius:20px!important}
  #commissionDashboardPage .commission-hero h2{font-size:34px!important}
  #commissionDashboardPage .commission-filters{display:grid!important;grid-template-columns:1fr 1fr!important;padding:11px!important}
  #commissionDashboardPage .commission-refresh{grid-column:1/-1!important}
  #commissionDashboardPage .commission-kpis{grid-template-columns:1fr 1fr!important;gap:10px!important}
  #commissionDashboardPage .commission-kpi{min-height:132px!important;padding:16px!important;border-radius:16px!important}
  #commissionDashboardPage .commission-kpi .value{font-size:25px!important}
  #commissionDashboardPage .commission-kpi .value.compact{font-size:18px!important}
  #commissionDashboardPage .commission-panel{border-radius:17px!important}
  #commissionDashboardPage .commission-panel-header{min-height:68px;padding:15px 16px!important}
  #commissionDashboardPage .commission-action{min-height:80px!important;padding:14px!important;border-radius:15px!important}
}