/* ================= Sürücü Kursu Paneli — v2 ================= */
:root{
  --bg:#EDF0F6; --panel:#fff; --panel-2:#F7F9FC; --ink:#101828; --ink-soft:#667085; --line:#E1E6EF;
  --asphalt:#0B1324; --asphalt-2:#16213A; --navy:#0B1324; --navy-2:#1B2B4B;
  --amber:#FFC21A; --amber-dark:#E5A800; --amber-soft:#FFF4D1;
  --ok:#0E9F5B; --ok-bg:#E3F7EC; --warn:#B45309; --warn-bg:#FFF1DC;
  --danger:#E03B30; --danger-bg:#FDE9E7; --blue:#3558F0; --blue-bg:#E8EDFF;
  --radius:16px; --shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px -12px rgba(16,24,40,.14);
  --ease:cubic-bezier(.22,.9,.3,1);
  --head:'Outfit',system-ui,sans-serif; --body:'Manrope',system-ui,sans-serif;
}
[data-theme="dark"]{
  --bg:#080E1B; --panel:#101A2E; --panel-2:#0D1627; --ink:#E8EDF7; --ink-soft:#93A0B8; --line:#1E2B45;
  --navy:#E8EDF7; --navy-2:#C9D3E8; --amber-soft:#2A2208;
  --ok-bg:#0C2A1D; --warn-bg:#2D200B; --danger-bg:#321412; --blue-bg:#13204A; --blue:#8AA2FF;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.6);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@view-transition{navigation:auto}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--head);color:var(--navy);margin:0 0 4px;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.ic{flex:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.only-mobile{display:none}
.layout{display:flex;min-height:100vh}

/* ---------- Sidebar ---------- */
.sidebar{width:262px;background:var(--asphalt);color:rgba(255,255,255,.7);padding:22px 14px;flex:none;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;transition:width .3s var(--ease);overflow:hidden;z-index:60}
.sidebar .brand{display:flex;align-items:center;gap:12px;color:#fff;font-family:var(--head);font-weight:700;font-size:16.5px;padding:0 8px 22px;white-space:nowrap}
.brand-mark{width:38px;height:38px;border-radius:12px;background:var(--amber);color:var(--asphalt);display:grid;place-items:center;flex:none;animation:spin-in .9s var(--ease) both}
@keyframes spin-in{from{transform:rotate(-200deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
.sidebar nav{flex:1;overflow-y:auto;scrollbar-width:none;padding-right:2px}
.sidebar nav::-webkit-scrollbar{display:none}
.nav-group{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.38);padding:16px 12px 6px;white-space:nowrap}
.sidebar nav a{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;font-size:14px;font-weight:600;transition:background .2s,color .2s,transform .2s var(--ease);white-space:nowrap}
.sidebar nav a:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(3px)}
.sidebar nav a.active{background:rgba(255,194,26,.14);color:var(--amber)}
.sidebar nav a.active::before{content:"";position:absolute;left:-14px;top:50%;width:4px;height:22px;transform:translateY(-50%);border-radius:0 4px 4px 0;
  background:repeating-linear-gradient(180deg,var(--amber) 0 5px,transparent 5px 8px);background-size:100% 8px;animation:road 1s linear infinite}
@keyframes road{to{background-position:0 8px}}
.badge-count{margin-left:auto;background:var(--danger);color:#fff;font-size:11px;font-weight:800;padding:1px 7px;border-radius:99px;animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,59,48,.5)}50%{box-shadow:0 0 0 6px rgba(224,59,48,0)}}
.sidebar .foot{border-top:1px solid rgba(255,255,255,.1);padding-top:12px;font-size:13px}
.sidebar .foot a{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:10px;color:rgba(255,255,255,.55);white-space:nowrap}
.sidebar .foot a:hover{background:rgba(255,255,255,.07);color:#fff}
.side-mini .sidebar{width:78px}
.side-mini .nav-text,.side-mini .brand-name,.side-mini .nav-group,.side-mini .badge-count{display:none}
.side-mini .sidebar nav a,.side-mini .sidebar .foot a{justify-content:center}
.scrim{display:none}

/* ---------- Topbar ---------- */
.main{flex:1;min-width:0}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 28px;background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.topbar h1{font-size:20px;margin:0;margin-right:auto;white-space:nowrap}
.top-actions{display:flex;align-items:center;gap:10px}
.search-trigger{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);color:var(--ink-soft);font-size:13px;cursor:pointer;min-width:250px;transition:border-color .2s,box-shadow .2s}
.search-trigger:hover{border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}
.search-trigger kbd,.palette kbd{margin-left:auto;font:600 11px var(--body);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 6px;color:var(--ink-soft);background:var(--panel)}
.icon-btn{position:relative;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.2s var(--ease)}
.icon-btn:hover{border-color:var(--amber);transform:translateY(-1px)}
.dot-count{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;font:800 10.5px var(--body);min-width:18px;height:18px;border-radius:99px;display:grid;place-items:center;padding:0 5px;font-style:normal;border:2px solid var(--panel)}
.t-sun{display:none}[data-theme="dark"] .t-sun{display:block}[data-theme="dark"] .t-moon{display:none}
.who{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-soft);font-weight:600}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--amber);color:#0B1324;display:grid;place-items:center;font-weight:800;font-family:var(--head)}
.content{padding:26px 28px 70px;max-width:1500px}
.content > *{animation:rise .55s var(--ease) both}
.content > *:nth-child(2){animation-delay:.06s}.content > *:nth-child(3){animation-delay:.12s}
.content > *:nth-child(4){animation-delay:.18s}.content > *:nth-child(5){animation-delay:.24s}
.content > *:nth-child(n+6){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Cards ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card + .card{margin-top:20px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.card-head h3{font-size:17px;margin:0}
.grid-2{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:start}
.grid-2e{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.grid-2 > .card + .card,.grid-2e > .card + .card,.grid-3 > .card + .card{margin-top:0}
.stack{display:flex;flex-direction:column;gap:20px}.stack > .card + .card{margin-top:0}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}
.stat-card{padding:20px;position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s}
a.stat-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(16,24,40,.3)}
.stat-card .top{display:flex;justify-content:space-between;align-items:flex-start}
.stat-card .ico{width:40px;height:40px;border-radius:12px;background:var(--amber-soft);color:var(--amber-dark);display:grid;place-items:center}
.stat-card .ico.red{background:var(--danger-bg);color:var(--danger)}.stat-card .ico.green{background:var(--ok-bg);color:var(--ok)}.stat-card .ico.blue{background:var(--blue-bg);color:var(--blue)}
.stat-card .val{font-family:var(--head);font-size:28px;font-weight:700;color:var(--navy);margin-top:12px;line-height:1.1}
.stat-card .lbl{font-size:13px;color:var(--ink-soft);font-weight:600}
.stat-card .foot{font-size:12.5px;color:var(--ink-soft);margin-top:8px}
.muted{color:var(--ink-soft)}.small{font-size:12.5px}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:13.8px;vertical-align:middle}
th{color:var(--ink-soft);font-weight:700;font-size:12.5px;white-space:nowrap}
tbody tr{transition:background .15s}tbody tr:hover{background:var(--panel-2)}
tbody tr:last-child td{border-bottom:0}
.table-wrap{overflow-x:auto}
.who-cell{display:flex;align-items:center;gap:12px}
.avatar-img,.avatar-ini{width:38px;height:38px;border-radius:12px;object-fit:cover;flex:none}
.avatar-ini{display:grid;place-items:center;background:var(--blue-bg);color:var(--blue);font:700 14px var(--head)}
.avatar-img.xl,.avatar-ini.xl{width:84px;height:84px;border-radius:24px;font-size:28px}
.mini-bar{height:6px;border-radius:9px;background:var(--line);overflow:hidden;min-width:70px}
.mini-bar>span{display:block;height:100%;width:0;border-radius:9px;background:var(--amber);transition:width 1s var(--ease)}
.mini-bar.green>span{background:var(--ok)}.mini-bar.blue>span{background:var(--blue)}

/* ---------- Badges / chips ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.badge-ok{background:var(--ok-bg);color:var(--ok)}.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-danger{background:var(--danger-bg);color:var(--danger)}.badge-navy{background:var(--blue-bg);color:var(--blue)}
.badge-gray{background:var(--line);color:var(--ink-soft)}
.badge-live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 2s infinite}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 17px;border-radius:11px;border:1px solid transparent;font-weight:700;font-size:13.6px;cursor:pointer;transition:transform .18s var(--ease),background .18s,box-shadow .18s,border-color .18s;position:relative;overflow:hidden}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--asphalt);color:#fff}[data-theme="dark"] .btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{box-shadow:0 8px 18px -8px rgba(11,19,36,.6)}
.btn-amber{background:var(--amber);color:#0B1324}.btn-amber:hover{background:var(--amber-dark);box-shadow:0 8px 20px -8px rgba(255,194,26,.9)}
.btn-ghost{background:var(--panel);border-color:var(--line);color:var(--ink)}.btn-ghost:hover{border-color:var(--amber)}
.btn-green{background:var(--ok);color:#fff}.btn-wa{background:#25D366;color:#06210f}.btn-wa:hover{box-shadow:0 8px 18px -8px rgba(37,211,102,.9)}
.btn-danger{background:var(--danger-bg);color:var(--danger)}.btn-danger:hover{background:var(--danger);color:#fff}
.btn-sm{padding:7px 12px;font-size:12.6px;border-radius:9px}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:ripple .6s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
form.inline{display:inline}

/* ---------- Forms ---------- */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-row.one{grid-template-columns:1fr}.form-row.three{grid-template-columns:repeat(3,1fr)}.form-row.four{grid-template-columns:repeat(4,1fr)}
label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px}
input,select,textarea{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);font-family:inherit;font-size:14px;background:var(--panel-2);color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber);background:var(--panel);box-shadow:0 0 0 4px var(--amber-soft)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--amber-dark)}
input[type=file]{padding:9px;background:var(--panel)}
.help{font-size:12px;color:var(--ink-soft);margin-top:4px}
.check{display:flex;align-items:center;gap:10px;font-weight:600;font-size:13.5px;margin:0;cursor:pointer}
.alert{padding:14px 16px;border-radius:12px;font-size:13.8px;margin-bottom:18px;font-weight:600}
.alert-ok{background:var(--ok-bg);color:var(--ok)}.alert-err{background:var(--danger-bg);color:var(--danger)}.alert-warn{background:var(--warn-bg);color:var(--warn)}
.progress{height:9px;border-radius:99px;background:var(--line);overflow:hidden}
.progress>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),#FF9F1A);border-radius:99px;transition:width 1.1s var(--ease)}
.empty-state{text-align:center;padding:44px 20px;color:var(--ink-soft)}
.pill-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.pill-tabs a{padding:8px 15px;border-radius:99px;border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink-soft);transition:.2s var(--ease);background:var(--panel)}
.pill-tabs a:hover{border-color:var(--amber);color:var(--ink)}
.pill-tabs a.active{background:var(--asphalt);border-color:var(--asphalt);color:#fff}[data-theme="dark"] .pill-tabs a.active{background:var(--amber);border-color:var(--amber);color:#0B1324}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar input,.toolbar select{width:auto;min-width:200px}

/* ---------- Gauges ---------- */
.gauge-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:24px}
.gauge{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 14px 14px;text-align:center;position:relative;box-shadow:var(--shadow)}
.g-svg{width:100%;max-width:170px;display:block;margin:0 auto -6px;overflow:visible}
.g-track,.g-arc{fill:none;stroke-width:9;stroke-linecap:round}
.g-track{stroke:var(--line)}
.g-arc{stroke:var(--amber);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.4s var(--ease)}
.tone-green .g-arc{stroke:var(--ok)}.tone-blue .g-arc{stroke:var(--blue)}.tone-red .g-arc{stroke:var(--danger)}
.g-needle{transform-origin:60px 62px;transform:rotate(-90deg);transition:transform 1.5s cubic-bezier(.2,1.5,.35,1)}
.g-needle line{stroke:var(--navy);stroke-width:2.6;stroke-linecap:round}.g-needle circle{fill:var(--navy)}
.g-val{font:700 21px var(--head);color:var(--navy);margin-top:6px}
.g-lbl{font-size:13px;font-weight:700}.g-sub{font-size:12px;color:var(--ink-soft);min-height:18px}

/* ---------- Student hero ---------- */
.hero{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:22px;padding:22px;border-radius:20px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(120deg,#0B1324 0%,#16294D 60%,#1D3A73 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:14px;height:3px;opacity:.5;background:repeating-linear-gradient(90deg,var(--amber) 0 26px,transparent 26px 52px);background-size:52px 3px;animation:roadx 1.4s linear infinite}
@keyframes roadx{to{background-position:52px 0}}
.hero h2{color:#fff;font-size:26px;margin:0 0 6px}
.hero .meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.75)}
.hero .meta span{display:inline-flex;align-items:center;gap:6px}
.hero .info{flex:1;min-width:240px}
.hero .btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}.hero .btn-ghost:hover{background:rgba(255,255,255,.2)}
.hero .avatar-img.xl,.hero .avatar-ini.xl{border:3px solid rgba(255,255,255,.25)}
.hero .avatar-ini{background:var(--amber);color:#0B1324}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.tabs button{border:0;background:none;padding:12px 16px;font-weight:700;font-size:13.8px;color:var(--ink-soft);cursor:pointer;position:relative;white-space:nowrap;display:flex;gap:7px;align-items:center}
.tabs button .n{background:var(--line);border-radius:99px;font-size:11px;padding:0 7px;color:var(--ink-soft)}
.tabs button:hover{color:var(--ink)}
.tabs button.active{color:var(--navy)}
.tabs button::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--amber);transform:scaleX(0);transition:transform .3s var(--ease)}
.tabs button.active::after{transform:scaleX(1)}
.tab-panel{display:none}.tab-panel.active{display:block;animation:rise .4s var(--ease) both}

/* ---------- Info grid ---------- */
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 20px}
.kv .k{font-size:12px;color:var(--ink-soft);font-weight:600}.kv .v{font-weight:700;margin-top:1px}
.timeline{list-style:none;padding:0;margin:0;position:relative}
.timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:repeating-linear-gradient(180deg,var(--line) 0 6px,transparent 6px 10px)}
.timeline li{position:relative;padding:0 0 18px 38px}
.timeline .pt{position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;background:var(--line);display:grid;place-items:center;color:var(--ink-soft)}
.timeline li.done .pt{background:var(--ok);color:#fff}.timeline li.now .pt{background:var(--amber);color:#0B1324;box-shadow:0 0 0 5px var(--amber-soft)}
.timeline .t{font-weight:700}.timeline .d{font-size:12.5px;color:var(--ink-soft)}
.doc-list{display:flex;flex-direction:column;gap:10px}
.doc-item{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--panel-2);flex-wrap:wrap;transition:border-color .2s}
.doc-item.got{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:var(--ok-bg)}
.doc-item .nm{font-weight:700;flex:1;min-width:180px}
.doc-item input[type=file]{max-width:210px;padding:6px;font-size:12px}
.chk-big{width:22px;height:22px}

/* ---------- Wizard ---------- */
.wizard-steps{display:flex;gap:10px;margin-bottom:24px}
.w-step{flex:1;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:13px;border:1px solid var(--line);background:var(--panel);font-weight:700;font-size:13px;color:var(--ink-soft);transition:.3s var(--ease);cursor:pointer}
.w-step .num{width:26px;height:26px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-size:12px;flex:none;transition:.3s}
.w-step.active{border-color:var(--amber);color:var(--ink);box-shadow:0 0 0 4px var(--amber-soft)}.w-step.active .num{background:var(--amber);color:#0B1324}
.w-step.done .num{background:var(--ok);color:#fff}
.w-pane{display:none}.w-pane.active{display:block;animation:slidein .45s var(--ease) both}
@keyframes slidein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.fee-box{border:1px dashed var(--line);border-radius:14px;padding:14px;margin-bottom:12px;background:var(--panel-2)}
.fee-box .row{display:grid;grid-template-columns:1.4fr 1fr auto;gap:12px;align-items:end}
.preview-strip{padding:14px 16px;border-radius:13px;background:var(--amber-soft);font-weight:700;color:var(--navy);margin:0 0 18px}
.summary-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.summary-list div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:6px 0}

/* ---------- Calendar ---------- */
.week{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px}
.day{background:var(--panel);border:1px solid var(--line);border-radius:15px;min-height:260px;padding:10px;display:flex;flex-direction:column;gap:8px}
.day.today{border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}
.day-head{display:flex;justify-content:space-between;align-items:baseline;padding:2px 4px 8px;border-bottom:1px dashed var(--line)}
.day-head b{font-family:var(--head);font-size:15px}.day-head span{font-size:12px;color:var(--ink-soft)}
.lesson{border-radius:11px;padding:8px 10px;font-size:12.5px;border-left:4px solid var(--blue);background:var(--blue-bg);transition:transform .2s var(--ease)}
.lesson:hover{transform:translateX(3px)}
.lesson.dir{border-left-color:var(--amber-dark);background:var(--amber-soft)}
.lesson.done{border-left-color:var(--ok);background:var(--ok-bg)}.lesson.no_show,.lesson.cancelled{border-left-color:var(--danger);background:var(--danger-bg);opacity:.85}
.lesson .tm{font-weight:800;font-size:12px}.lesson .nm{font-weight:700;display:block}.lesson .sub{color:var(--ink-soft);font-size:11.5px}
.week-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- Dialog ---------- */
dialog{border:0;border-radius:20px;padding:0;width:min(560px,94vw);background:var(--panel);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(8,14,27,.55);backdrop-filter:blur(3px)}
dialog[open]{animation:pop .3s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.dlg-body{padding:24px}.dlg-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}

/* ---------- Dashboard extras ---------- */
.agenda{display:flex;flex-direction:column;gap:10px}
.agenda-item{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:13px;background:var(--panel-2);border:1px solid var(--line)}
.agenda-item .tm{font:800 14px var(--head);min-width:48px;color:var(--navy)}
.bars{display:flex;align-items:flex-end;gap:14px;height:170px;padding-top:10px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bar{width:100%;max-width:54px;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,var(--amber),#FF9F1A);height:0;transition:height 1.2s var(--ease)}
.bar-col .v{font-size:11.5px;font-weight:700}.bar-col .l{font-size:12px;color:var(--ink-soft)}
.quick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.quick a{display:flex;align-items:center;gap:10px;padding:12px;border-radius:13px;border:1px solid var(--line);font-weight:700;font-size:13px;transition:.2s var(--ease);background:var(--panel-2)}
.quick a:hover{border-color:var(--amber);transform:translateY(-2px);background:var(--amber-soft)}
.ribbon{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;margin-bottom:20px;font-weight:700;background:var(--danger-bg);color:var(--danger)}
.greeting h2{font-size:26px}.greeting{margin-bottom:22px}

/* ---------- Palette / toasts ---------- */
.palette{position:fixed;inset:0;z-index:200;background:rgba(8,14,27,.55);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:flex-start;padding-top:12vh}
.palette[hidden]{display:none}
.palette-box{width:min(620px,94vw);background:var(--panel);border-radius:20px;box-shadow:0 40px 90px -20px rgba(0,0,0,.6);overflow:hidden;animation:pop .25s var(--ease)}
.palette-input{display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.palette-input input{border:0;background:none;padding:18px 0;font-size:16px;box-shadow:none!important}
.palette-list{max-height:52vh;overflow-y:auto;padding:8px}
.p-group{font-size:11.5px;font-weight:700;color:var(--ink-soft);padding:8px 10px 4px}
.p-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer}
.p-item.sel,.p-item:hover{background:var(--amber-soft)}
.p-item small{color:var(--ink-soft);margin-left:auto}
.palette-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft)}
.palette-foot kbd{margin:0 3px 0 0}
.toasts{position:fixed;right:20px;bottom:20px;z-index:300;display:flex;flex-direction:column;gap:10px}
.toast{display:flex;align-items:center;gap:12px;min-width:260px;max-width:380px;padding:14px 16px;border-radius:14px;background:var(--asphalt);color:#fff;font-weight:600;font-size:13.8px;box-shadow:0 20px 40px -12px rgba(0,0,0,.5);animation:toastin .5s var(--ease) both;border-left:5px solid var(--ok)}
.toast.err{border-left-color:var(--danger)}.toast.warn{border-left-color:var(--amber)}
.toast.out{animation:toastout .35s ease forwards}
@keyframes toastin{from{opacity:0;transform:translateX(60px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateX(60px)}}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:400;width:100%;height:100%}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:var(--asphalt)}
.login-art{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:56px;color:#fff;background:radial-gradient(circle at 20% 10%,#25407C 0,transparent 55%),linear-gradient(160deg,#0B1324,#14284F)}
.login-art h2{color:#fff;font-size:42px;line-height:1.1;max-width:440px;margin-bottom:12px}
.login-art p{color:rgba(255,255,255,.7);max-width:400px;margin:0}
.road{position:absolute;left:-10%;right:-10%;top:34%;height:130px;background:#070D1B;transform:rotate(-8deg);box-shadow:0 0 0 6px rgba(255,255,255,.04)}
.road::before{content:"";position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;background:repeating-linear-gradient(90deg,var(--amber) 0 50px,transparent 50px 100px);background-size:100px 6px;animation:roadx2 1.1s linear infinite}
@keyframes roadx2{to{background-position:-100px 0}}
.car{position:absolute;top:34%;margin-top:22px;left:20%;color:var(--amber);transform:rotate(-8deg);animation:drive 7s ease-in-out infinite alternate}
@keyframes drive{from{transform:translate(-20px,8px) rotate(-8deg)}to{transform:translate(160px,-20px) rotate(-8deg)}}
.login-form-side{display:flex;align-items:center;justify-content:center;padding:30px;background:var(--bg)}
.login-card{width:min(400px,100%);animation:rise .7s var(--ease) both}
.login-card .brand{display:flex;align-items:center;gap:11px;font-family:var(--head);font-weight:700;font-size:19px;margin-bottom:6px}
.login-card .brand .brand-mark{animation:none}
.login-card p.sub{color:var(--ink-soft);margin:0 0 26px}
.login-card button[type=submit]{width:100%;justify-content:center;margin-top:6px;padding:13px}

/* ---------- Misc ---------- */
.copy-field{display:flex;gap:8px}.copy-field input{font-size:12.5px}
.tag-row{display:flex;gap:6px;flex-wrap:wrap}
.wa-row{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:var(--panel-2);flex-wrap:wrap}
.wa-row .msg{flex:1;min-width:260px}.wa-row textarea{font-size:13px;margin-top:6px}
.sticky-actions{position:sticky;bottom:0;background:var(--panel);padding-top:14px;margin-top:10px;border-top:1px solid var(--line)}

@media(max-width:1180px){.stat-grid{grid-template-columns:1fr 1fr}.gauge-row{grid-template-columns:repeat(3,1fr)}.grid-2,.grid-2e,.grid-3{grid-template-columns:1fr}.kv{grid-template-columns:1fr 1fr}.search-trigger{min-width:0}.search-trigger span,.search-trigger kbd{display:none}}
@media(max-width:860px){
  .only-mobile{display:grid}.only-desktop{display:none!important}
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .3s var(--ease);width:270px!important}
  .side-mobile-open .sidebar{transform:none}
  .side-mini .nav-text,.side-mini .brand-name,.side-mini .nav-group{display:initial}
  .side-mobile-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}
  .topbar{padding:12px 16px}.content{padding:18px 14px 60px}
  .form-row,.form-row.three,.form-row.four,.summary-list,.fee-box .row{grid-template-columns:1fr}
  .gauge-row{grid-template-columns:1fr 1fr}.login-wrap{grid-template-columns:1fr}.login-art{display:none}
  .wizard-steps .w-step span.t{display:none}
}
@media(max-width:520px){.stat-grid{grid-template-columns:1fr}.kv{grid-template-columns:1fr}.quick{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}