/* =========================================================================
   AD ON WHEELZ — DESIGN SYSTEM
   ========================================================================= */

:root{
  --bg:#F5F6FA; --surface:#FFFFFF; --surface-2:#FAFBFD; --surface-hover:#F1F2F8;
  --border:#E6E8F0; --border-soft:#EEF0F6;
  --text:#171A2B; --text-muted:#6B7089; --text-faint:#9497AC;
  --primary:#7A2AB8; --primary-dark:#5C1F8F; --primary-soft:#F5ECFB; --primary-soft-2:#EAD9F5;
  --success:#12B76A; --success-soft:#E7F9EF;
  --warning:#F79009; --warning-soft:#FFF4E5;
  --danger:#F04438; --danger-soft:#FEECEB;
  --info:#4C6EF5; --info-soft:#ECF0FF;
  --gray-soft:#F0F1F5; --gray-text:#5B5F76;
  /* Real Ad On Wheelz brand palette, sampled from the client's vector logo */
  --brand-navy:#1D0F42; --brand-purple-deep:#4C1D8D; --brand-purple:#7A2AB8;
  --brand-magenta:#D91F72; --brand-coral:#F35538; --brand-orange:#FE8E10;
  --brand-gradient:linear-gradient(135deg,#FE8E10 0%,#F35538 30%,#D91F72 58%,#7A2AB8 82%,#1D0F42 100%);
  --brand-gradient-soft:linear-gradient(135deg,#FEEFDD 0%,#FBDDE9 55%,#EDDBF6 100%);
  --radius-sm:8px; --radius:12px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(23,26,43,0.05);
  --shadow:0 2px 10px rgba(23,26,43,0.06), 0 1px 2px rgba(23,26,43,0.04);
  --shadow-lg:0 12px 32px rgba(23,26,43,0.12);
  --sidebar-w:250px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12131C; --surface:#191A26; --surface-2:#15161F; --surface-hover:#20212E;
    --border:#2A2C3C; --border-soft:#232433;
    --text:#EDEEF5; --text-muted:#9B9EB5; --text-faint:#6E7189;
    --primary:#B876E8; --primary-dark:#9B4FD6; --primary-soft:#2C2140; --primary-soft-2:#3B2A54;
    --success:#2ECC8F; --success-soft:#12301F;
    --warning:#F7A93B; --warning-soft:#3A2A0E;
    --danger:#F66A5F; --danger-soft:#3A1917;
    --info:#7C93FF; --info-soft:#1C2140;
    --gray-soft:#20212E; --gray-text:#A7AAC0;
    --brand-purple:#B876E8; --brand-gradient-soft:linear-gradient(135deg,#3A2A20 0%,#3A2030 55%,#2C2140 100%);
    --shadow:0 2px 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-lg:0 12px 32px rgba(0,0,0,0.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#12131C; --surface:#191A26; --surface-2:#15161F; --surface-hover:#20212E;
  --border:#2A2C3C; --border-soft:#232433;
  --text:#EDEEF5; --text-muted:#9B9EB5; --text-faint:#6E7189;
  --primary:#B876E8; --primary-dark:#9B4FD6; --primary-soft:#2C2140; --primary-soft-2:#3B2A54;
  --success:#2ECC8F; --success-soft:#12301F;
  --warning:#F7A93B; --warning-soft:#3A2A0E;
  --danger:#F66A5F; --danger-soft:#3A1917;
  --info:#7C93FF; --info-soft:#1C2140;
  --gray-soft:#20212E; --gray-text:#A7AAC0;
  --brand-purple:#B876E8; --brand-gradient-soft:linear-gradient(135deg,#3A2A20 0%,#3A2030 55%,#2C2140 100%);
  --shadow:0 2px 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg:0 12px 32px rgba(0,0,0,0.5);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--text);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4,h5{margin:0; font-weight:650; letter-spacing:-0.01em; font-family:"Sora","Manrope",-apple-system,sans-serif; text-wrap:balance;}
.stat-value,.brand-name,.auth-hero-stats b{font-family:"Sora","Manrope",-apple-system,sans-serif;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
.icon{width:18px;height:18px;flex:none;}
.rot180{transform:rotate(180deg);}
.muted{color:var(--text-muted); font-weight:400;}

/* ---------------- App shell ---------------- */
#app{min-height:100vh;}
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:var(--sidebar-w); flex:none; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; height:100vh; position:sticky; top:0; overflow-y:auto;
}
.brand{display:flex; align-items:center; gap:10px; padding:20px 20px 16px;}
.brand-mark{width:34px; height:34px; border-radius:10px; background:var(--brand-gradient); display:flex; align-items:center; justify-content:center; color:#fff; flex:none; box-shadow:0 2px 8px rgba(122,42,184,.35);}
.brand-mark .icon{width:19px;height:19px;}
.brand-name{font-size:16.5px; font-weight:780; letter-spacing:-0.02em; color:var(--brand-navy, var(--text));}
.brand-name em{font-style:normal; font-weight:800; background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;}
.brand-lg .brand-mark{width:52px;height:52px;border-radius:14px;}
.brand-lg .brand-name{font-size:25px;}
.brand-tagline{font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-top:2px;}
:root:not([data-theme="dark"]) .brand-name{color:var(--brand-navy);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand-name{color:var(--text);} }
:root[data-theme="dark"] .brand-name{color:var(--text);}

.nav{flex:1; padding:4px 12px; display:flex; flex-direction:column; gap:2px;}
.nav-link{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-sm);
  color:var(--gray-text); font-weight:560; font-size:13.5px; transition:background .12s,color .12s;
}
.nav-link:hover{background:var(--surface-hover); color:var(--text);}
.nav-link.active{background:var(--primary-soft); color:var(--primary-dark);}
.nav-group{margin-top:2px;}
.nav-group-label{display:flex; align-items:center; gap:10px; padding:9px 12px 3px; color:var(--text-faint); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.06em;}
.nav-group-label .icon{width:15px;height:15px;}
.nav-children{display:flex; flex-direction:column; gap:1px; margin-left:14px; padding-left:14px; border-left:1px solid var(--border-soft);}
.nav-child{padding:7px 10px; font-size:13.5px; font-weight:520; border-radius:var(--radius-sm); color:var(--gray-text);}
.nav-child:hover{background:var(--surface-hover); color:var(--text);}
.nav-child.active{background:var(--primary-soft); color:var(--primary-dark); font-weight:640;}
.sidebar-foot{padding:14px 20px; border-top:1px solid var(--border-soft);}
.env-tag{font-size:11px; font-weight:650; color:var(--text-faint); background:var(--gray-soft); display:inline-block; padding:4px 9px; border-radius:99px;}

.main-col{flex:1; display:flex; flex-direction:column; min-width:0;}
.topbar{
  height:64px; flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:20;
}
.topbar-title{font-size:16px; font-weight:650;}
.topbar-right{display:flex; align-items:center; gap:12px;}
.topbar-wallet{display:flex; align-items:center; gap:7px; background:var(--gray-soft); padding:8px 14px; border-radius:99px; font-weight:700; font-size:13.5px; position:relative;}
.topbar-wallet.low{background:var(--danger-soft); color:var(--danger);}
.topbar-wallet .dot{width:8px;height:8px;border-radius:99px;background:var(--danger); position:absolute; top:4px; right:6px; box-shadow:0 0 0 2px var(--surface);}
.icon-btn{width:36px; height:36px; border-radius:99px; border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--gray-text); transition:background .12s;}
.icon-btn:hover{background:var(--surface-hover);}
.user-chip{display:flex; align-items:center; gap:9px; padding-left:8px; border-left:1px solid var(--border); margin-left:2px;}
.avatar{width:34px; height:34px; border-radius:99px; background:linear-gradient(135deg,var(--primary),#9B8CFF); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;}
.user-name{font-size:13px; font-weight:650; line-height:1.25;}
.user-role{font-size:11.5px; color:var(--text-faint);}
.page-content{padding:26px 28px 60px; flex:1;}

/* ---------------- Buttons ---------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 16px; border-radius:var(--radius-sm); border:1px solid transparent; font-weight:640; font-size:13.5px; cursor:pointer; transition:filter .12s, background .12s, transform .05s; white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn .icon{width:16px;height:16px;}
.btn-primary{background:var(--primary); color:#fff; box-shadow:0 1px 2px rgba(108,92,231,.3);}
.btn-primary:hover{background:var(--primary-dark);}
.btn-secondary{background:var(--surface); color:var(--text); border-color:var(--border);}
.btn-secondary:hover{background:var(--surface-hover);}
.btn-ghost{background:transparent; color:var(--gray-text); border-color:transparent;}
.btn-ghost:hover{background:var(--surface-hover); color:var(--text);}
.btn-danger{background:var(--danger-soft); color:var(--danger);}
.btn-danger:hover{filter:brightness(0.96);}
.btn-success{background:var(--success-soft); color:var(--success);}
.btn-warn{background:var(--warning-soft); color:var(--warning);}
.btn-sm{padding:6px 12px; font-size:12.5px;}
.btn-lg{padding:12px 20px; font-size:14.5px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.45; cursor:not-allowed;}

/* ---------------- Stat cards ---------------- */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px;}
.stat-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;}
.stat-card::before{content:"";position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--primary); opacity:0;}
.stat-card.accent-green::before{background:var(--success); opacity:1;}
.stat-card.accent-amber::before{background:var(--warning); opacity:1;}
.stat-card.accent-red::before{background:var(--danger); opacity:1;}
.stat-card.accent-primary::before{background:var(--primary); opacity:1;}
.stat-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.stat-label{font-size:12.5px; font-weight:640; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em;}
.stat-icon{width:30px; height:30px; border-radius:9px; background:var(--primary-soft); color:var(--primary-dark); display:flex; align-items:center; justify-content:center;}
.stat-icon .icon{width:16px;height:16px;}
.stat-value{font-size:26px; font-weight:750; letter-spacing:-0.02em;}
.stat-sub{font-size:12.5px; color:var(--text-faint); margin-top:6px; display:flex; align-items:center; gap:6px;}
.stat-trend{font-weight:700;}
.stat-trend.up{color:var(--success);}
.stat-trend.down{color:var(--danger);}

/* ---------------- Panels / grid layout ---------------- */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); margin-bottom:18px;}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border-soft); gap:12px; flex-wrap:wrap;}
.panel-head h3{font-size:14.5px; font-weight:680;}
.panel-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.panel-body{padding:20px;}
.panel-body.pad-0{padding:0;}
.grid-2{display:grid; grid-template-columns:2fr 1fr; gap:18px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.grid-2-even{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.page-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap;}
.page-head h1{font-size:21px;}
.page-head p{color:var(--text-muted); font-size:13.5px; margin-top:4px;}
.page-head-actions{display:flex; gap:10px; flex-wrap:wrap;}
.section-label{font-size:12px; font-weight:700; text-transform:uppercase; color:var(--text-faint); letter-spacing:.05em; margin:0 0 10px;}

/* ---------------- Badges ---------------- */
.badge{display:inline-flex; align-items:center; padding:3px 10px; border-radius:99px; font-size:11.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;}
.badge-green{background:var(--success-soft); color:var(--success);}
.badge-amber{background:var(--warning-soft); color:var(--warning);}
.badge-red{background:var(--danger-soft); color:var(--danger);}
.badge-gray{background:var(--gray-soft); color:var(--gray-text);}
.badge-blue{background:var(--info-soft); color:var(--info);}

/* ---------------- Tables ---------------- */
.table-wrap{overflow-x:auto;}
.data-table{width:100%; border-collapse:collapse; font-size:13px;}
.data-table th{text-align:left; padding:10px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); border-bottom:1px solid var(--border); white-space:nowrap; background:var(--surface-2);}
.data-table td{padding:12px 14px; border-bottom:1px solid var(--border-soft); vertical-align:middle;}
.data-table tbody tr:hover{background:var(--surface-hover);}
.data-table tbody tr:last-child td{border-bottom:none;}
.table-empty{text-align:center; color:var(--text-faint); padding:34px 12px !important;}
.table-pagination{display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:12px 16px; font-size:12.5px; color:var(--text-muted);}
.btn-page{width:28px; height:28px; border-radius:7px; border:1px solid var(--border); background:var(--surface); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--gray-text);}
.btn-page:disabled{opacity:.35; cursor:not-allowed;}
.btn-page .icon{width:14px;height:14px;}
.cell-strong{font-weight:650;}
.cell-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; color:var(--gray-text);}
.cell-sub{font-size:11.5px; color:var(--text-faint);}

/* ---------------- Toolbar / filters ---------------- */
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:14px 20px; border-bottom:1px solid var(--border-soft);}
.search-box{position:relative; flex:1; min-width:180px; max-width:280px;}
.search-box .icon{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px;height:15px; color:var(--text-faint);}
.search-box input{width:100%; padding:8px 12px 8px 32px;}

/* ---------------- Forms ---------------- */
.input,select.input,textarea.input{
  width:100%; padding:9px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  font-size:13.5px; font-family:inherit; transition:border-color .12s, box-shadow .12s;
}
.input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); background:var(--surface);}
textarea.input{resize:vertical; min-height:70px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field>span{font-size:12.5px; font-weight:640; color:var(--gray-text);}
.field .hint{font-size:11.5px; color:var(--text-faint); font-weight:400;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
.static-value{padding:9px 12px; border-radius:var(--radius-sm); background:var(--gray-soft); font-size:13.5px; font-weight:600;}
.checkbox-row{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:550;}
.chip-select{display:flex; flex-wrap:wrap; gap:8px;}
.chip{padding:7px 14px; border-radius:99px; border:1px solid var(--border); background:var(--surface); font-size:13px; font-weight:600; cursor:pointer; color:var(--gray-text);}
.chip.active{background:var(--primary-soft); border-color:var(--primary); color:var(--primary-dark);}
.chip:hover{border-color:var(--primary);}

/* ---------------- Charts ---------------- */
.chart-svg{width:100%; height:auto; display:block;}
.chart-grid{stroke:var(--border-soft); stroke-width:1;}
.chart-axis-label{font-size:9.5px; fill:var(--text-faint); font-family:inherit;}
.chart-legend{display:flex; flex-wrap:wrap; gap:14px; margin-top:12px;}
.legend-item{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--gray-text); font-weight:560;}
.legend-item i{width:9px;height:9px;border-radius:3px; display:inline-block;}
.legend-item b{color:var(--text);}
.chart-title-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}

/* ---------------- Progress ---------------- */
.progress-track{height:8px; border-radius:99px; background:var(--gray-soft); overflow:hidden;}
.progress-fill{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--primary),#9B8CFF);}
.progress-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; font-size:12.5px;}

/* ---------------- Alert / banner ---------------- */
.banner{display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:var(--radius); margin-bottom:18px; border:1px solid; }
.banner-warn{background:var(--warning-soft); border-color:#F7B76A55; color:#94590A;}
.banner-info{background:var(--info-soft); border-color:#4C6EF555; color:#2F4BD4;}
.banner .icon{flex:none;}
.banner-body{flex:1;}
.banner-title{font-weight:700; font-size:13.5px;}
.banner-sub{font-size:12.5px; opacity:.85; margin-top:2px;}

/* ---------------- Empty state ---------------- */
.empty-state{text-align:center; padding:50px 20px; color:var(--text-muted);}
.empty-icon{width:44px;height:44px; margin:0 auto 14px; color:var(--text-faint);}
.empty-state h4{font-size:15px; margin-bottom:6px; color:var(--text);}
.empty-state p{font-size:13px; margin-bottom:16px;}

/* ---------------- Modal ---------------- */
.modal-backdrop{position:fixed; inset:0; background:rgba(15,16,26,0.5); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; backdrop-filter:blur(2px);}
.modal{background:var(--surface); border-radius:var(--radius-lg); width:100%; max-width:520px; max-height:88vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); border:1px solid var(--border);}
.modal.modal-lg{max-width:760px;}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border-soft);}
.modal-body{padding:22px; overflow-y:auto;}
.modal-foot{padding:16px 22px; border-top:1px solid var(--border-soft); display:flex; justify-content:flex-end; gap:10px;}

/* ---------------- Report preview (in-app fallback for file exports) ---------------- */
.preview-note{font-size:12.5px; color:var(--text-muted); background:var(--primary-soft); border:1px solid var(--border-soft); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:16px;}
.report-title{font-size:16px; margin-bottom:4px; color:var(--text);}
.report-meta{font-size:12.5px; color:var(--text-muted); line-height:1.6; margin-bottom:14px;}
.report-section{font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin:18px 0 8px;}
.report-kv-table, .report-data-table{width:100%; border-collapse:collapse; font-size:13px; margin-bottom:4px;}
.report-kv-table td{padding:6px 4px; border-bottom:1px solid var(--border-soft);}
.report-kv-table td:first-child{color:var(--text-muted);}
.report-kv-table td:last-child{text-align:right; font-weight:600; color:var(--text);}
.report-data-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); padding:6px 4px; border-bottom:1px solid var(--border);}
.report-data-table td{padding:6px 4px; border-bottom:1px solid var(--border-soft); color:var(--text);}
.report-footnote{font-size:11px; color:var(--text-muted); font-style:italic; margin-top:14px;}
.preview-copy-block{margin-top:16px;}
.preview-copy-label{display:block; font-size:12px; color:var(--text-muted); margin-bottom:6px;}
.file-preview-textarea{width:100%; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; padding:10px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg); color:var(--text); resize:vertical;}

/* ---------------- Live Fleet Map ---------------- */
.fleet-map-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:18px; align-items:start;}
@media (max-width:900px){.fleet-map-layout{grid-template-columns:1fr;}}
.fleet-map-wrap{border-radius:var(--radius); overflow:hidden; border:1px solid var(--border-soft);}
.fleet-map-svg{width:100%; height:auto; display:block;}
.map-zone-label{font-size:11px; fill:#8B79B0; font-weight:600; letter-spacing:.02em; paint-order:stroke; stroke:#F7F3FF; stroke-width:4px; stroke-linejoin:round;}
.cab-marker text{pointer-events:none; user-select:none;}
.map-legend{display:flex; flex-direction:column; gap:2px;}
.map-legend-row{display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--border-soft);}
.map-legend-row:last-child{border-bottom:none;}
.map-legend-dot{width:10px; height:10px; border-radius:50%; flex:none;}
.map-legend-info{flex:1; min-width:0;}
.map-legend-status{font-size:11.5px; color:var(--text-muted); text-align:right; display:flex; align-items:center; gap:6px;}
.live-dot{width:7px; height:7px; border-radius:50%; background:#12B76A; flex:none; animation:liveDotPulse 1.8s ease-in-out infinite;}
@keyframes liveDotPulse{0%,100%{opacity:1; box-shadow:0 0 0 0 #12B76A55;}50%{opacity:.55; box-shadow:0 0 0 4px #12B76A00;}}

/* ---------------- Toast ---------------- */
.toast-stack{position:fixed; bottom:22px; right:22px; display:flex; flex-direction:column; gap:10px; z-index:200;}
.toast{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lg); border-radius:var(--radius-sm); padding:12px 16px; font-size:13px; font-weight:560; min-width:220px; animation:toast-in .18s ease;}
.toast .icon{width:17px;height:17px;}
.toast-success .icon{color:var(--success);}
.toast-warn .icon{color:var(--warning);}
.toast-info .icon{color:var(--info);}
@keyframes toast-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* ---------------- Wizard ---------------- */
.wizard-steps{display:flex; align-items:center; margin-bottom:26px; gap:0;}
.wizard-step{display:flex; align-items:center; gap:9px; color:var(--text-faint); font-size:12.5px; font-weight:650;}
.wizard-step .num{width:26px; height:26px; border-radius:99px; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:12px; flex:none;}
.wizard-step.done .num{background:var(--success); border-color:var(--success); color:#fff;}
.wizard-step.active .num{border-color:var(--primary); color:var(--primary); background:var(--primary-soft);}
.wizard-step.active{color:var(--text);}
.wizard-connector{flex:1; height:2px; background:var(--border); margin:0 10px; min-width:16px;}
.wizard-connector.done{background:var(--success);}
.wizard-foot{display:flex; justify-content:space-between; margin-top:22px; padding-top:18px; border-top:1px solid var(--border-soft);}
.creative-drop{border:1.5px dashed var(--border); border-radius:var(--radius); padding:26px; text-align:center; color:var(--text-muted); cursor:pointer; background:var(--surface-2);}
.creative-drop:hover{border-color:var(--primary);}
.creative-preview{display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2);}
.creative-preview .thumb{width:64px;height:64px;border-radius:10px;background:var(--primary-soft); display:flex;align-items:center;justify-content:center; color:var(--primary-dark); flex:none;}
.review-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-soft); font-size:13.5px;}
.review-row:last-child{border-bottom:none;}
.review-row span:first-child{color:var(--text-muted);}
.review-row span:last-child{font-weight:640;}

/* ---------------- Verification pipeline ---------------- */
.pipeline{display:flex; align-items:stretch; gap:0; overflow-x:auto; padding:4px 2px 14px;}
.pipeline-node{flex:1; min-width:130px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:14px; text-align:center; position:relative;}
.pipeline-node .pn-icon{width:34px;height:34px; border-radius:9px; background:var(--primary-soft); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; margin:0 auto 8px;}
.pipeline-node .pn-title{font-size:12px; font-weight:700;}
.pipeline-node .pn-sub{font-size:10.5px; color:var(--text-faint); margin-top:3px;}
.pipeline-arrow{flex:none; width:26px; display:flex; align-items:center; justify-content:center; color:var(--text-faint);}
.check-list{display:flex; flex-direction:column; gap:9px;}
.check-item{display:flex; align-items:center; gap:10px; font-size:13px; padding:8px 12px; border-radius:var(--radius-sm); background:var(--surface-2);}
.check-item .ci-dot{width:20px;height:20px;border-radius:99px; display:flex; align-items:center; justify-content:center; flex:none;}
.check-item.pass .ci-dot{background:var(--success-soft); color:var(--success);}
.check-item.fail .ci-dot{background:var(--danger-soft); color:var(--danger);}
.check-item .ci-dot .icon{width:12px;height:12px;}

/* ---------------- Auth page ---------------- */
.auth-page{display:flex; min-height:100vh;}
.auth-panel{width:460px; flex:none; padding:44px 44px; display:flex; flex-direction:column; background:var(--surface); overflow-y:auto;}
.auth-sub{color:var(--text-muted); font-size:13px; margin:8px 0 26px;}
.role-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px;}
.role-card{border:1.5px solid var(--border); background:var(--surface); border-radius:var(--radius); padding:14px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:6px;}
.role-card:hover{border-color:var(--primary);}
.role-card.active{border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 3px var(--primary-soft-2);}
.role-card-icon{color:var(--primary-dark);}
.role-card-title{font-weight:680; font-size:13.5px;}
.role-card-desc{font-size:11.5px; color:var(--text-faint); line-height:1.35;}
.auth-form{margin-top:4px;}
.auth-footnote{font-size:11.5px; color:var(--text-faint); margin-top:18px; line-height:1.5;}
.auth-hero{flex:1; background:radial-gradient(circle at 15% 15%, #FE8E10 0%, #F35538 26%, #D91F72 52%, #7A2AB8 76%, #1D0F42 100%); display:flex; align-items:center; justify-content:center; padding:60px; position:relative; overflow:hidden;}
.auth-hero::before{content:""; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,0.09) 1px,transparent 1px); background-size:26px 26px;}
.auth-hero-inner{max-width:520px; color:#fff; position:relative;}
.auth-hero-inner h1{font-size:34px; line-height:1.2; letter-spacing:-0.02em; margin-bottom:16px;}
.auth-hero-inner p{font-size:15px; opacity:.86; line-height:1.6;}
.auth-hero-stats{display:flex; gap:34px; margin-top:38px;}
.auth-hero-stats b{display:block; font-size:24px; font-weight:750;}
.auth-hero-stats span{font-size:12px; opacity:.75;}

/* ---------------- Misc ---------------- */
.detail-header{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:20px; flex-wrap:wrap;}
.detail-title-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.detail-meta{display:flex; gap:18px; flex-wrap:wrap; margin-top:10px; font-size:12.5px; color:var(--text-muted);}
.detail-meta b{color:var(--text); font-weight:640;}
.tab-row{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:20px;}
.tab-btn{padding:10px 16px; font-size:13px; font-weight:620; color:var(--text-muted); border-bottom:2px solid transparent; cursor:pointer; background:none; border-left:none; border-right:none; border-top:none;}
.tab-btn.active{color:var(--primary-dark); border-bottom-color:var(--primary);}
.kv-list{display:flex; flex-direction:column; gap:0;}
.kv-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border-soft); font-size:13px;}
.kv-row:last-child{border-bottom:none;}
.kv-row span:first-child{color:var(--text-muted);}
.kv-row span:last-child{font-weight:620; text-align:right;}

/* ---------------- Rate card / package tiers (real pricing, wizard step) ---------------- */
.tier-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px;}
.tier-card{border:1.5px solid var(--border); border-radius:var(--radius); padding:14px; cursor:pointer; background:var(--surface); position:relative;}
.tier-card:hover{border-color:var(--brand-magenta, var(--primary));}
.tier-card.active{border-color:var(--brand-magenta, var(--primary)); background:var(--brand-gradient-soft); box-shadow:0 0 0 3px var(--primary-soft-2);}
.tier-card .tier-name{font-size:11px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-purple, var(--primary));}
.tier-card .tier-price{font-size:19px; font-weight:780; margin-top:4px; font-family:"Sora","Manrope",-apple-system,sans-serif;}
.tier-card .tier-price small{font-size:11px; font-weight:600; color:var(--text-muted);}
.tier-card .tier-desc{font-size:11.5px; color:var(--text-muted); margin-top:6px; line-height:1.4;}
.tier-card .tier-best{font-size:9.5px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--brand-gradient); padding:2px 7px; border-radius:99px; position:absolute; top:10px; right:10px;}
.rate-card-ref{font-size:11.5px; color:var(--text-muted); border-top:1px dashed var(--border); margin-top:14px; padding-top:10px;}

@media (max-width: 1080px){
  .tier-grid{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .grid-2, .grid-3, .grid-2-even{grid-template-columns:1fr;}
  .field-row, .field-row-3{grid-template-columns:1fr;}
}
@media (max-width: 760px){
  .sidebar{position:fixed; left:-260px; z-index:50; transition:left .18s; box-shadow:var(--shadow-lg);}
  .stat-grid{grid-template-columns:1fr;}
  .role-grid{grid-template-columns:1fr;}
  .auth-hero{display:none;}
  .auth-panel{width:100%;}
  .page-content{padding:18px;}
}