:root{
  --navy:#0E2142; --gold:#F5A623; --gold-ink:#9A6206; --gold-soft:#FFF3DC;
  --bg:#F8F6F1; --surface:#FFFDF9; --surface-2:#F1EDE4; --ink:#1A2438; --muted:#6B675E; --line:#E6E0D3;
  --ok:#1F7A4D; --ok-bg:#E3F4EA; --info:#1F5FAD; --info-bg:#E4EEFB; --warn:#9A6206; --warn-bg:#FFF1D6; --bad:#B42318; --bad-bg:#FDE8E6; --idle:#5B6880; --idle-bg:#EFEBE2;
  --t-cf:#6B3FA0; --t-cf-bg:#F0E8FA;
  --radius:12px;
  --display:'Space Grotesk','Segoe UI',system-ui,sans-serif; --body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) and (min-width:99999px){ :root{ color-scheme:dark;
  --bg:#0A1426; --surface:#111E36; --surface-2:#172844; --ink:#E8EDF6; --muted:#98A6BF; --line:#24375A; --gold-ink:#F7B94A; --gold-soft:#2A2412;
  --ok:#5CCB91; --ok-bg:#12301F; --info:#7FB2F0; --info-bg:#132B4A; --warn:#F7B94A; --warn-bg:#33270E; --bad:#F2877D; --bad-bg:#3A1714; --idle:#98A6BF; --idle-bg:#1C2A42;
  --t-cf:#C3A4EE; --t-cf-bg:#2A1D40; } }
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.5; -webkit-tap-highlight-color:transparent;}
h1,h2,h3{font-family:var(--display); margin:0; text-wrap:balance; letter-spacing:-.01em;}
button,input,select,textarea{font:inherit; color:inherit;}
button{cursor:pointer;}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums;}

/* top bar */
.topbar{background:var(--navy); color:#fff; position:sticky; top:0; z-index:20; padding-top:env(safe-area-inset-top,0px); box-shadow:0 1px 0 rgba(245,166,35,.35);}
.topbar-inner{max-width:1240px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px;}
.brand{height:30px; width:auto; display:block;}
.app-name{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#F7C36B; border-left:1px solid rgba(255,255,255,.25); padding-left:12px; white-space:nowrap;}
.tabs{display:flex; gap:4px; margin-left:auto;}
.tab{background:transparent; border:1px solid transparent; color:#C9D3E6; padding:7px 13px; border-radius:999px; font-size:.86rem; font-weight:500; white-space:nowrap;}
.tab:hover{color:#fff; border-color:rgba(255,255,255,.2);}
.tab[aria-current="page"]{background:var(--gold); color:#1A1204;}
.badge{display:inline-block; min-width:18px; padding:0 5px; margin-left:6px; border-radius:999px; background:var(--bad); color:#fff; font-family:var(--mono); font-size:.68rem; line-height:18px; text-align:center;}
.tab[aria-current="page"] .badge{background:#1A1204; color:var(--gold);}
.top-actions{display:flex; gap:8px; align-items:center;}
.top-actions .who{font-size:.78rem; color:#C9D3E6; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bottom-nav{display:none;}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:10px; padding:10px 16px; font-weight:600; border:1px solid transparent; font-size:.9rem; text-decoration:none; white-space:nowrap;}
.btn-primary{background:var(--gold); color:#1A1204;}
.btn-primary:hover{background:#FFB938;}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--gold);}
.topbar .btn-ghost{color:#fff; border-color:rgba(255,255,255,.3);}
.btn-sm{padding:6px 11px; font-size:.8rem; border-radius:8px;}
.btn-block{width:100%;}
.btn-danger{background:transparent; border-color:var(--bad); color:var(--bad);}
.btn-ok{background:var(--ok); color:#fff;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.link{color:var(--info); background:none; border:0; padding:0; text-decoration:underline; font:inherit;}

main{max-width:1240px; margin:0 auto; padding:20px 16px 90px;}
.placeholder{padding:48px 20px; text-align:center; color:var(--muted);}
.placeholder h2{color:var(--ink); margin-bottom:8px;}
.banner{border-radius:var(--radius); padding:12px 16px; font-size:.9rem; margin-bottom:16px; background:var(--warn-bg); color:var(--warn);}
.banner.info{background:var(--info-bg); color:var(--info);}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);}
.page-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px;}
.page-head h1{font-size:clamp(1.4rem,3vw,1.9rem);}
.page-head p{margin:6px 0 0; color:var(--muted); max-width:62ch;}
.eyebrow{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-ink); display:block; margin-bottom:6px;}
.sec-title{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:24px 0 12px; display:flex; align-items:center; gap:10px;}
.sec-title::after{content:""; flex:1; height:1px; background:var(--line);}

/* forms */
.form{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px 16px;}
.field{display:flex; flex-direction:column; gap:5px;}
.field.wide{grid-column:1 / -1;}
.field label,.field .lbl{font-size:.76rem; font-weight:600; color:var(--muted);}
.field input,.field select,.field textarea{border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:var(--surface); width:100%;}
.field textarea{min-height:80px; resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,166,35,.2);}
.checks{display:flex; flex-wrap:wrap; gap:6px;}
.checks label{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:5px 11px; font-size:.82rem; cursor:pointer; background:var(--surface-2); font-weight:500; color:var(--ink);}
.checks input{accent-color:var(--gold); margin:0;}
.form-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap;}

/* auth */
.auth-wrap{max-width:440px; margin:20px auto;}
.auth{padding:24px;}
.auth h1{font-size:1.5rem; margin-bottom:4px;}
.auth p.lead{color:var(--muted); margin:0 0 18px;}
.auth .form{grid-template-columns:1fr;}
.auth-switch{display:flex; gap:4px; background:var(--surface-2); border-radius:10px; padding:4px; margin-bottom:18px;}
.auth-switch button{flex:1; border:0; background:transparent; padding:8px; border-radius:8px; font-weight:600; color:var(--muted);}
.auth-switch button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.1);}
.err{color:var(--bad); font-size:.86rem; margin-top:10px;}

/* order builder */
.builder{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start;}
.products{display:flex; flex-direction:column; gap:14px;}
.product{padding:16px 18px;}
.product-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px;}
.product-head h3{font-size:1.08rem;}
.product-head .meta{font-family:var(--mono); font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em;}
.product-note{font-size:.85rem; color:var(--muted); margin:-4px 0 10px;}
.opt-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px;}
.opt{display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:10px; padding:8px 8px 8px 12px; background:var(--surface-2);}
.opt.has{border-color:var(--gold); background:var(--gold-soft);}
.opt .name{font-size:.9rem; font-weight:500; display:flex; align-items:center; gap:8px; min-width:0;}
.swatch{width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.25); flex:0 0 14px;}
.stepper{display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; background:var(--surface); overflow:hidden; flex:0 0 auto;}
.stepper button{width:36px; height:36px; border:0; background:transparent; font-size:1.15rem;}
.stepper button:hover{background:var(--surface-2);}
.stepper input{width:52px; height:36px; border:0; text-align:center; background:transparent; font-variant-numeric:tabular-nums; -moz-appearance:textfield;}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.summary{position:sticky; top:76px; padding:18px; display:flex; flex-direction:column; gap:14px;}
.summary h2{font-size:1.1rem;}
.sum-lines{display:flex; flex-direction:column; max-height:260px; overflow:auto;}
.sum-line{display:flex; justify-content:space-between; gap:10px; font-size:.88rem; padding:6px 0; border-bottom:1px dashed var(--line);}
.sum-line span:last-child{font-family:var(--mono); white-space:nowrap;}
.sum-empty{font-size:.88rem; color:var(--muted);}
.totals{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.total{background:var(--surface-2); border-radius:10px; padding:10px; text-align:center;}
.total b{display:block; font-family:var(--display); font-size:1.35rem; font-variant-numeric:tabular-nums;}
.total small{font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
.success{padding:28px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px;}
.success .po{font-family:var(--mono); font-size:1.4rem; color:var(--gold-ink); letter-spacing:.04em;}
.row-btns{display:flex; gap:8px; flex-wrap:wrap; justify-content:center;}

/* orders */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:8px;}
.kpis.five{grid-template-columns:repeat(5,1fr);}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; text-align:left; width:100%;}
.kpi b{display:block; font-family:var(--display); font-size:1.6rem; font-variant-numeric:tabular-nums; line-height:1.1;}
.kpi span{font-family:var(--mono); font-size:.64rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);}
.kpi.alert b{color:var(--bad);}
.kpi[aria-pressed="true"]{border-color:var(--gold); box-shadow:0 0 0 2px rgba(245,166,35,.25);}
.filters{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;}
.chip{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 12px; font-size:.82rem;}
.chip[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy);}
.chip.on{border-color:var(--gold); background:var(--gold-soft); color:var(--gold-ink); font-weight:600;}
.list-col{display:flex; flex-direction:column; gap:10px;}
.order{overflow:hidden;}
.order-row{display:grid; grid-template-columns:150px minmax(0,1fr) auto auto; gap:14px; align-items:center; padding:14px 16px; width:100%; background:transparent; border:0; text-align:left;}
.order-row:hover{background:var(--surface-2);}
.po-no{font-family:var(--mono); font-size:.85rem; font-weight:500;}
.po-date{font-size:.76rem; color:var(--muted);}
.strong{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sub{font-size:.8rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.units{font-family:var(--mono); font-size:.8rem; color:var(--muted); text-align:right; white-space:nowrap;}
.pill{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 10px; font-size:.75rem; font-weight:600; white-space:nowrap;}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor;}
.st-Submitted,.st-pending{background:var(--warn-bg); color:var(--warn);}
.st-Confirmed,.st-Dispatched{background:var(--info-bg); color:var(--info);}
.st-Delivered,.st-approved{background:var(--ok-bg); color:var(--ok);}
.st-Cancelled,.st-blocked{background:var(--bad-bg); color:var(--bad);}
.order-detail{border-top:1px solid var(--line); padding:16px; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:20px;}
.items-table{width:100%; border-collapse:collapse; font-size:.88rem;}
.items-table th{font-family:var(--mono); font-size:.64rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); text-align:left; padding:6px 8px; border-bottom:1px solid var(--line);}
.items-table td{padding:8px; border-bottom:1px solid var(--line);}
.items-table td:last-child,.items-table th:last-child{text-align:right; font-variant-numeric:tabular-nums;}
.kv{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:.86rem; margin:0;}
.kv dt{color:var(--muted);}
.kv dd{margin:0; word-break:break-word;}
.timeline{list-style:none; padding:0; margin:10px 0 0; font-size:.8rem; color:var(--muted); display:flex; flex-direction:column; gap:3px;}
.admin-box{display:flex; flex-direction:column; gap:10px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);}
.inline{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.empty{padding:32px 20px; text-align:center; color:var(--muted);}
.demand{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px;}
.demand .card{padding:14px 16px;}
.demand h3{font-size:1rem; margin-bottom:8px;}
.bar-row{display:grid; grid-template-columns:110px 1fr 44px; gap:8px; align-items:center; font-size:.82rem; padding:3px 0;}
.bar{height:8px; background:var(--surface-2); border-radius:4px; overflow:hidden;}
.bar i{display:block; height:100%; background:var(--gold); border-radius:4px;}
.bar-row span:last-child{text-align:right; font-family:var(--mono);}

/* dealers admin */
.user-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:14px 16px; align-items:center;}

/* partner book */
.layout{display:grid; grid-template-columns:370px minmax(0,1fr); gap:16px; align-items:start;}
.list-panel{position:sticky; top:72px; max-height:calc(100vh - 90px); display:flex; flex-direction:column;}
.list-tools{padding:12px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px;}
.search{width:100%; border:1px solid var(--line); border-radius:10px; padding:9px 12px; background:var(--surface-2);}
.search:focus{outline:none; border-color:var(--gold);}
.tool-row{display:flex; gap:6px;}
.tool-row select{flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:var(--surface); font-size:.82rem;}
.list{overflow:auto; flex:1;}
.list-count{font-family:var(--mono); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); padding:8px 14px; border-bottom:1px solid var(--line);}
.prow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; padding:11px 14px; border:0; border-bottom:1px solid var(--line); background:transparent; width:100%; text-align:left;}
.prow:hover{background:var(--surface-2);}
.prow[aria-current="true"]{background:var(--gold-soft); box-shadow:inset 3px 0 0 var(--gold);}
.prow .right{grid-row:1 / span 2; grid-column:2; display:flex; flex-direction:column; align-items:flex-end; gap:4px;}
.due{font-family:var(--mono); font-size:.68rem; color:var(--bad);}
.tag{display:inline-flex; align-items:center; border-radius:999px; padding:2px 9px; font-size:.7rem; font-weight:600; white-space:nowrap;}
.ty-cf{background:var(--t-cf-bg); color:var(--t-cf);}
.ty-dist{background:var(--info-bg); color:var(--info);}
.ty-dealer{background:var(--ok-bg); color:var(--ok);}
.ty-sub{background:var(--warn-bg); color:var(--warn);}
.st{display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600;}
.st::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor;}
.pst-Active{color:var(--ok);} .pst-Onboarding{color:var(--info);} .pst-On-hold{color:var(--warn);} .pst-Inactive{color:var(--idle);}
.detail{padding:20px;}
.d-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--line);}
.d-head h1{font-size:clamp(1.3rem,2.6vw,1.8rem);}
.d-meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px;}
.info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px 20px; margin:0;}
.info-grid dt{font-size:.74rem; color:var(--muted); font-weight:600;}
.info-grid dd{margin:2px 0 0; word-break:break-word;}
.contacts{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:8px;}
.contact-card{display:flex; justify-content:space-between; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--surface-2); flex-wrap:wrap;}
.contact-card .ph{font-family:var(--mono); font-size:.9rem;}
.chips{display:flex; gap:6px; flex-wrap:wrap;}
.notes-text{white-space:pre-wrap; background:var(--surface-2); border-radius:10px; padding:12px; font-size:.92rem;}
.log-add{display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:8px; align-items:start;}
.log-add select,.log-add textarea{border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:var(--surface); width:100%;}
.log-add textarea{min-height:42px; resize:vertical;}
.log{list-style:none; padding:0; margin:12px 0 0;}
.log li{display:grid; grid-template-columns:100px minmax(0,1fr); gap:10px; padding:10px 0; border-bottom:1px dashed var(--line); font-size:.9rem;}
.log .when{font-family:var(--mono); font-size:.72rem; color:var(--muted);}
.child{display:flex; justify-content:space-between; gap:8px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:transparent; width:100%; text-align:left; margin-bottom:6px;}
.child:hover{border-color:var(--gold);}
.state-strip{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px;}
.state-strip button{border:1px solid var(--line); border-radius:999px; padding:5px 12px; background:var(--surface); font-size:.8rem;}
.state-strip button b{font-family:var(--mono); font-weight:500; margin-left:6px; color:var(--muted);}
.state-strip button[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy);}
.back{display:none;}

/* catalogue */
.cat-item{padding:14px 16px; display:grid; grid-template-columns:160px minmax(0,1fr) minmax(0,1.6fr) 90px auto; gap:10px; align-items:end; margin-bottom:10px;}

.toast{position:fixed; left:50%; bottom:calc(80px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--navy); color:#fff; padding:10px 18px; border-radius:999px; font-size:.88rem; box-shadow:0 10px 30px rgba(0,0,0,.25); z-index:60; max-width:calc(100% - 32px); text-align:center;}
.install-bar{position:fixed; left:12px; right:12px; bottom:calc(76px + env(safe-area-inset-bottom,0px)); z-index:40; background:var(--surface); border:1px solid var(--gold); border-radius:12px; padding:10px 12px; display:flex; gap:10px; align-items:center; box-shadow:0 10px 30px rgba(0,0,0,.2); max-width:520px; margin:0 auto;}
.install-bar span{flex:1; font-size:.88rem; font-weight:500;}

@media (max-width:1000px){ .kpis.five{grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){
  .builder{grid-template-columns:1fr;} .summary{position:static;}
  .order-detail{grid-template-columns:1fr;}
  .kpis{grid-template-columns:repeat(2,1fr);}
  .cat-item{grid-template-columns:1fr 1fr;} .cat-item .wide{grid-column:1 / -1;}
  .layout{grid-template-columns:1fr;} .list-panel{position:static; max-height:none;}
  .layout.has-sel .list-panel{display:none;} .layout:not(.has-sel) .detail-panel{display:none;}
  .back{display:inline-flex; margin-bottom:12px;}
}
@media (max-width:760px){
  .tabs{display:none;}
  .top-actions{margin-left:auto;}
  .top-actions .who{display:none;}
  .bottom-nav{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--surface); border-top:1px solid var(--line); padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));}
  .bottom-nav button{flex:1; border:0; background:transparent; padding:6px 2px; border-radius:10px; font-size:.72rem; font-weight:600; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:2px;}
  .bottom-nav button .ic{font-size:1.15rem; line-height:1;}
  .bottom-nav button[aria-current="page"]{color:var(--ink); background:var(--gold-soft);}
  .bottom-nav .badge{margin:0; position:relative; top:-2px;}
}
@media (max-width:560px){
  main{padding-top:14px;}
  .order-row{grid-template-columns:1fr auto; gap:6px 12px;}
  .order-row .units{grid-column:1; text-align:left;}
  .opt-grid{grid-template-columns:1fr;}
  .kpis.five .kpi:last-child{grid-column:1 / -1;}
  .kpis.five{grid-template-columns:repeat(2,1fr);}
  .log-add{grid-template-columns:1fr;}
  .log li{grid-template-columns:1fr; gap:2px;}
  .app-name{display:none;}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;} }

/* ---------- KG business modules ---------- */
.tabs{overflow-x:auto; scrollbar-width:none; max-width:calc(100vw - 420px);}
.tabs::-webkit-scrollbar{display:none}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;}
.kg-row{display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; padding:11px 14px; border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left;}
.kg-row:last-child{border-bottom:0}
.kg-row:hover{background:var(--surface-2);}
.kpi b{overflow-wrap:anywhere;}
.ty-lost{background:var(--idle-bg); color:var(--idle);}
.st-Paid{background:var(--ok-bg); color:var(--ok);} .st-Due{background:var(--bad-bg); color:var(--bad);} .st-Partpaid{background:var(--warn-bg); color:var(--warn);}
.line-item{border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:10px; background:var(--surface-2);}
.stage-list{display:flex; flex-direction:column; gap:6px;}
.stage{display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); text-align:left; width:100%;}
.stage .tick{width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; font-size:.8rem; font-weight:700;}
.stage.done{background:var(--ok-bg); border-color:transparent;}
.stage.done .tick{background:var(--ok); border-color:var(--ok); color:#fff;}
.more-sheet{position:fixed; left:8px; right:8px; bottom:calc(68px + env(safe-area-inset-bottom,0px)); z-index:35; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:10px; box-shadow:0 -10px 40px rgba(0,0,0,.2);}
.more-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
.more-grid button{border:1px solid var(--line); background:var(--surface-2); border-radius:12px; padding:12px 6px; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.78rem; font-weight:600; position:relative;}
.more-grid button .ic{font-size:1.3rem;}
.more-grid button[aria-current="page"]{border-color:var(--gold); background:var(--gold-soft);}
.more-grid .badge{position:absolute; top:6px; right:6px;}
.offline-pill{display:none; position:fixed; top:calc(58px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); z-index:25; background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn); border-radius:999px; padding:4px 12px; font-size:.76rem; font-weight:600;}
body.offline .offline-pill{display:block;}
@media (max-width:900px){ .two-col{grid-template-columns:1fr;} }
@media (min-width:761px){ .more-sheet{display:none!important;} }
@media (max-width:560px){ .log-add[style]{grid-template-columns:1fr 1fr!important;} .log-add[style] > button{grid-column:1 / -1;} }

/* ---------- printable invoice ---------- */
#printArea{display:none;}
.inv{font-family:Arial,Helvetica,sans-serif; color:#000; font-size:11.5px; line-height:1.4; background:#fff;}
.inv-top{display:flex; justify-content:space-between; gap:12px; border-bottom:2px solid #0E2142; padding-bottom:8px;}
.inv-firm{font-size:20px; font-weight:700; color:#0E2142;}
.inv-logo{height:46px; background:#0E2142; padding:6px 10px; border-radius:6px;}
.inv-title{text-align:center; font-weight:700; letter-spacing:.15em; margin:8px 0; font-size:13px;}
.inv-meta{display:flex; justify-content:space-between; gap:12px; border:1px solid #999; padding:8px; margin-bottom:8px;}
.inv-table{width:100%; border-collapse:collapse; margin-bottom:8px;}
.inv-table th,.inv-table td{border:1px solid #999; padding:4px 6px; text-align:left; vertical-align:top;}
.inv-table th{background:#EEF2F8; font-size:10.5px;}
.inv-table td:nth-last-child(-n+4),.inv-table th:nth-last-child(-n+4){text-align:right;}
.inv-table.small td,.inv-table.small th{text-align:left!important; font-size:10.5px;}
.inv-bottom{display:grid; grid-template-columns:1.3fr 1fr; gap:12px;}
.inv-bottom p{margin:4px 0;}
.inv-totals div{display:flex; justify-content:space-between; padding:3px 6px; border-bottom:1px solid #ddd;}
.inv-totals .grand{font-weight:700; font-size:13px; background:#FFF3DC; border:1px solid #F5A623;}
.inv-foot{display:flex; justify-content:space-between; gap:20px; margin-top:14px; font-size:10.5px;}
.inv-sign{text-align:right; min-width:180px;}
@media print{
  @page{size:A4; margin:12mm;}
  body{background:#fff!important;}
  body > *:not(#printArea){display:none!important;}
  #printArea{display:block!important;}
}

.steps-mini{list-style:none;padding:0;margin:14px 0 18px;display:grid;gap:8px;text-align:left}
.steps-mini li{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--muted,#8b97ad)}
.steps-mini li::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid currentColor;flex:0 0 10px}
.steps-mini li.on{color:#f5a623;font-weight:600}.steps-mini li.on::before{background:#f5a623;border-color:#f5a623}
.vbadge{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;font-size:.72rem;font-weight:600;background:rgba(46,160,90,.15);color:#3ccf7a}

/* ---------- dealer showroom billing ---------- */
.muted{color:var(--muted);}
.ds-step{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:1.05rem; margin:22px 0 10px;}
.ds-step .n{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:#fff; font-size:.85rem; flex:0 0 28px;}
@media (prefers-color-scheme: dark) and (min-width:99999px){ .ds-step .n{background:var(--gold); color:#0E2142;} }
.lbl-sm{font-size:.76rem; font-weight:600; color:var(--muted); margin:12px 0 8px; text-transform:uppercase; letter-spacing:.04em;}
.lbl-sm:first-child{margin-top:0;}
.ds-chips{display:flex; flex-wrap:wrap; gap:8px;}
.ds-chip{display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:9px 15px; font:inherit; font-weight:600; font-size:.88rem; cursor:pointer;}
.ds-chip.sm{padding:6px 12px; font-size:.8rem;}
.ds-chip:hover{border-color:var(--gold);}
.ds-chip.on{background:var(--navy); border-color:var(--navy); color:#fff;}
@media (prefers-color-scheme: dark) and (min-width:99999px){ .ds-chip.on{background:var(--gold); border-color:var(--gold); color:#0E2142;} }
.sw{width:16px; height:16px; border-radius:50%; border:1px solid rgba(0,0,0,.25); display:inline-block;}
.ds-addrow{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);}
.ds-addrow > div:first-child{flex:1; min-width:160px;}
.ds-price{font-family:var(--display); font-size:1.6rem; font-weight:700;}
.ds-addrow .stepper input{width:54px; border:0; text-align:center; font:inherit; background:transparent; color:var(--ink);}
.ds-lines{margin-top:10px; padding:4px 14px;}
.ds-line{display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px dashed var(--line);}
.ds-line:last-child{border-bottom:0;}
.ds-amt{font-weight:700; font-variant-numeric:tabular-nums;}
.seg{display:inline-flex; background:var(--surface-2); border-radius:10px; padding:4px; gap:4px; flex-wrap:wrap;}
.seg button{border:0; background:transparent; padding:8px 14px; border-radius:8px; font:inherit; font-weight:600; color:var(--muted); cursor:pointer;}
.seg button.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12);}
.seg.big{display:flex;} .seg.big button{flex:1; padding:12px;}
.ds-in{border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:var(--surface); color:var(--ink); font:inherit; min-width:0;}
.ds-extra{display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:8px; margin-bottom:8px;}
@media (max-width:560px){ .ds-extra{grid-template-columns:1fr 1fr;} .ds-extra input:first-child{grid-column:1 / -1;} }
.ds-grand{display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding:12px 14px; border-radius:10px; background:var(--gold-soft); border:1px solid var(--gold); font-family:var(--display); font-weight:700; font-size:1.25rem;}
.ds-upi{display:flex; gap:14px; align-items:center; margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2);}
.ds-upi > div:first-child{background:#fff; border-radius:8px; padding:4px; min-width:120px; min-height:120px; display:grid; place-items:center;}
.ds-upi svg{width:140px; height:140px;}
.ds-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:14px 16px; align-items:center; font:inherit; color:inherit; cursor:pointer; width:100%;}
.ds-row:hover{border-color:var(--gold);}
.ds-paynow{display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px; margin-top:12px;}
@media (max-width:560px){ .ds-paynow{grid-template-columns:1fr 1fr;} }
.ds-pcard{padding:14px 16px; margin-bottom:12px;}
.ds-phead{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:flex-end;}
.ds-pmeta{display:flex; gap:10px; flex-wrap:wrap;}
.ds-pmeta label{display:flex; flex-direction:column; gap:4px; font-size:.74rem; font-weight:600; color:var(--muted);}
.ds-pmeta .ds-in{width:130px;}
.ds-opts{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; margin-top:12px;}
.ds-opt{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:6px 6px 6px 10px; background:var(--surface-2); font-size:.86rem; font-weight:500;}
.ds-opt span{flex:1;} .ds-opt .ds-in{width:110px; padding:7px 9px;}

/* ===== v6 theme: natural off-white ===== */
.topbar{background:#FBF9F4; color:var(--ink); box-shadow:0 1px 0 var(--line), 0 6px 18px rgba(40,32,15,.05);}
.brand{filter:brightness(0) invert(11%) sepia(38%) saturate(2300%) hue-rotate(205deg) brightness(94%);}
.app-name{color:var(--gold-ink); border-left-color:var(--line);}
.tab{color:#5A5650;}
.tab:hover{color:var(--navy); border-color:var(--line); background:#F3EFE6;}
.tab[aria-current="page"]{background:var(--navy); color:#fff;}
.tab[aria-current="page"] .badge{background:var(--gold); color:#1A1204;}
.top-actions .who{color:var(--muted);}
.topbar .btn-ghost{color:var(--navy); border-color:var(--line); background:#fff;}
.topbar .btn-ghost:hover{border-color:var(--gold);}
.card{box-shadow:0 1px 2px rgba(40,32,15,.04);}
input,select,textarea{background-color:#fff;}
.bottom-nav{background:#FBF9F4 !important;}
.bottom-nav button[aria-current="page"]{color:var(--navy) !important; background:#F1EADB !important;}
.more-sheet{background:var(--surface);}

/* ===== v7 on-screen bill preview ===== */
.inv-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; max-width:860px; margin:0 auto 14px;}
.inv-bar-mid{display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:1.05rem; margin-right:auto;}
.inv-wrap{padding-bottom:8px; overflow:hidden;}
.inv-paper{width:860px; max-width:none; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:4px; padding:36px 40px; box-shadow:0 2px 6px rgba(40,32,15,.06), 0 18px 40px rgba(40,32,15,.08);}
.inv-paper .inv{font-size:12.5px;}
@media (min-width:900px){ .inv-paper{width:auto; max-width:860px;} }
.inv-paper .inv-firm{font-size:22px;}
.inv-paper .inv-title{font-size:15px; margin:14px 0;}
@media (max-width:760px){
  .inv-bar .inline{width:100%;}
  .inv-bar .inline .btn{flex:1 1 auto;}
}

/* ===== v9 billing: KYC, catalogue, advance/final ===== */
.ds-ro{display:flex; align-items:center; gap:6px; min-height:44px; padding:10px 12px; border:1px dashed var(--line); border-radius:8px; background:var(--surface-2); font-weight:600; font-variant-numeric:tabular-nums;}
.ds-chip:disabled{opacity:.5; cursor:not-allowed; border-style:dashed;}
.soon{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:var(--gold-soft); color:var(--gold-ink); font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle;}
.ds-serial{margin-top:8px; max-width:280px; text-transform:uppercase; font-size:.86rem; padding:8px 10px;}
.small{font-size:.82rem;}
#appName[hidden]{display:none!important;}

/* ===== v11 order stock: product types + live tracking ===== */
.ds-chip .badge{margin-left:6px;}
.o-track{list-style:none; display:flex; padding:0 16px; margin:4px 0 12px;}
.o-track li{flex:1; position:relative; text-align:center; font-size:.74rem; font-weight:600; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:2px;}
.o-track li i{width:14px; height:14px; border-radius:50%; background:var(--surface); border:2px solid var(--line); position:relative; z-index:1;}
.o-track li::before{content:""; position:absolute; top:6px; left:-50%; width:100%; height:2px; background:var(--line);}
.o-track li:first-child::before{display:none;}
.o-track li.on{color:var(--ink);} .o-track li.on i{background:var(--ok); border-color:var(--ok);} .o-track li.on::before{background:var(--ok);}
.o-track li small{font-weight:500; color:var(--muted); font-size:.68rem;}
.o-track.stop{display:block; color:var(--bad); font-weight:700; font-size:.85rem; text-align:left;}
.o-note{margin:0 16px 14px; background:var(--info-bg); color:var(--info); border-radius:10px; padding:8px 12px; font-size:.86rem;}
.o-new{margin:0 16px 8px; background:var(--gold-soft); color:var(--gold-ink); border-radius:10px; padding:6px 12px; font-size:.8rem; font-weight:700;}

/* ===================== v12 polish: premium look ===================== */
:root{ --radius:16px; --shadow-sm:0 1px 2px rgba(40,32,15,.05), 0 2px 8px rgba(40,32,15,.04); --shadow-md:0 2px 6px rgba(14,33,66,.06), 0 12px 28px rgba(14,33,66,.08); }
body{background:radial-gradient(1200px 500px at 10% -10%, #FFF6E3 0%, rgba(255,246,227,0) 60%), radial-gradient(900px 500px at 110% 0%, #EEF2F8 0%, rgba(238,242,248,0) 55%), var(--bg); background-attachment:fixed;}
/* header */
.topbar{background:rgba(251,249,244,.86); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); box-shadow:0 1px 0 var(--line), 0 8px 24px rgba(14,33,66,.05);}
.topbar-inner{padding:10px 20px; min-height:68px;}
.brand{height:48px; filter:none !important;}
.tabs{gap:2px; background:rgba(14,33,66,.04); padding:4px; border-radius:999px;}
.tab{font-weight:600; padding:8px 15px; color:#4F5664;}
.tab:hover{background:#fff; border-color:transparent; color:var(--navy); box-shadow:var(--shadow-sm);}
.tab[aria-current="page"]{background:linear-gradient(180deg,#183166,#0E2142); color:#fff; box-shadow:0 4px 12px rgba(14,33,66,.25);}
.top-actions .who{font-weight:500;}
/* page heads */
main{padding-top:28px;}
.page-head{margin-bottom:22px;}
.page-head h1{font-size:clamp(1.6rem,3.4vw,2.3rem); letter-spacing:-.02em; color:var(--navy);}
.eyebrow{display:inline-flex; align-items:center; gap:6px; background:var(--gold-soft); color:var(--gold-ink); padding:4px 10px; border-radius:999px; font-weight:600; margin-bottom:10px;}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold);}
/* cards */
.card{border-radius:var(--radius); border-color:#EAE4D8; box-shadow:var(--shadow-sm); background:linear-gradient(180deg,#FFFEFB,#FFFCF6);}
.ds-row,.order,.kpi{transition:transform .15s ease, box-shadow .15s ease;}
.ds-row:hover,.order:hover{transform:translateY(-1px); box-shadow:var(--shadow-md);}
/* step headers */
.ds-step{font-size:1.12rem; color:var(--navy); margin:28px 0 12px;}
.ds-step .n{width:32px; height:32px; flex-basis:32px; background:linear-gradient(135deg,#F7B23B,#E39012); color:#1A1204; font-weight:800; box-shadow:0 4px 10px rgba(227,144,18,.3);}
/* chips */
.ds-chip{padding:10px 16px; border-width:1.5px; transition:all .15s ease;}
.ds-chip:not(:disabled):hover{border-color:var(--gold); transform:translateY(-1px);}
.ds-chip.on{background:linear-gradient(180deg,#183166,#0E2142); box-shadow:0 6px 14px rgba(14,33,66,.22);}
/* buttons */
.btn{border-radius:12px; transition:transform .12s ease, box-shadow .15s ease, background .15s ease;}
.btn-primary{background:linear-gradient(180deg,#FFB938,#F5A623); box-shadow:0 6px 16px rgba(245,166,35,.32); color:#1A1204;}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(245,166,35,.38);}
.btn-ok{background:linear-gradient(180deg,#25935C,#1F7A4D); box-shadow:0 6px 16px rgba(31,122,77,.28);}
.btn-ghost{background:#fff;}
/* KPIs */
.kpi{position:relative; overflow:hidden; padding:16px 18px; background:#fff;}
.kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,#F7B23B,#E39012);}
.kpis .kpi:nth-child(2)::before{background:linear-gradient(180deg,#2F6FD0,#1F5FAD);}
.kpis .kpi:nth-child(3)::before{background:linear-gradient(180deg,#25935C,#1F7A4D);}
.kpis .kpi:nth-child(4)::before{background:linear-gradient(180deg,#7A57C9,#6B3FA0);}
.kpi b{font-size:1.8rem; color:var(--navy);}
/* forms */
.field input,.field select,.field textarea,.ds-in{border-radius:10px; transition:border-color .15s, box-shadow .15s;}
/* order stock */
.opt{border-radius:12px;}
.opt.has{background:#FFF6E5; border-color:#F3C77A;}
.summary{border:1.5px solid #EAD9B8; background:linear-gradient(180deg,#FFFDF8,#FFF8EC);}
.summary h2{color:var(--navy);}
.total{border-radius:12px; background:#fff;}
/* pills */
.pill{font-weight:700; letter-spacing:.01em;}
/* bill paper */
.inv-paper{border-radius:10px;}
.inv-logo{height:54px; padding:8px 12px;}
/* profile footer links */
.foot-links{margin:18px 4px 0; font-size:.82rem; color:var(--muted);}
.foot-links a{color:var(--muted);}
/* mobile: floating bottom bar, bigger logo */
@media (max-width:760px){
  .brand{height:40px;}
  .topbar-inner{min-height:60px; padding:8px 14px;}
  .bottom-nav{left:10px !important; right:10px !important; bottom:calc(10px + env(safe-area-inset-bottom,0px)) !important; border:1px solid var(--line) !important; border-radius:20px; box-shadow:0 12px 30px rgba(14,33,66,.16); padding:6px !important; background:rgba(251,249,244,.95) !important; backdrop-filter:blur(10px);}
  .bottom-nav button[aria-current="page"]{background:linear-gradient(180deg,#183166,#0E2142) !important; color:#fff !important; border-radius:14px;}
  main{padding-bottom:120px;}
  .page-head h1{font-size:1.6rem;}
}
@media print{ body{background:#fff !important;} }

/* ===== v13 superadmin & dealer logins ===== */
.auth-logo{display:block; height:64px; margin:0 auto 14px;}
.auth{text-align:left;} .auth h1{color:var(--navy);}
.ph-in{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff;}
.ph-in span{padding:10px 12px; background:var(--surface-2); font-weight:700; color:var(--navy);}
.ph-in input{border:0 !important; flex:1; box-shadow:none !important; font-size:1.05rem; letter-spacing:.05em;}
.otp-in{font-size:1.6rem !important; letter-spacing:.5em; text-align:center; font-weight:800; color:var(--navy);}
.mono{font-family:var(--mono);}
.btn-wa{background:linear-gradient(180deg,#25C463,#1DA851); color:#fff; box-shadow:0 6px 14px rgba(29,168,81,.28);}
.cred-card{padding:18px; margin-bottom:16px; border:1.5px solid #B9E0C9; background:linear-gradient(180deg,#F4FBF7,#FFFFFF);}
.cred-ok{font-weight:700; color:var(--ok); margin-bottom:12px;}
.cred-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px;}
.cred-grid div{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px;}
.cred-grid span{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-family:var(--mono);}
.cred-grid b{font-size:1.02rem; color:var(--navy); word-break:break-all;}
.id-chip{display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); font-family:var(--mono); font-size:.72rem; color:var(--navy); vertical-align:middle;}
.field small{display:block; margin-top:4px; font-size:.76rem;}
.topbar-inner{gap:12px;}
.tabs{min-width:0; flex:0 1 auto; overflow-x:auto; scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{flex:0 0 auto;}
.auth-admin{border-top:4px solid var(--navy);}
.auth-admin .eyebrow{background:#E7ECF6; color:var(--navy);}
.auth-admin .eyebrow::before{background:var(--navy);}

/* ===================== v20: superadmin panel ===================== */
.small{font-size:.82rem;} .nowrap{white-space:nowrap;} .t-bad{color:var(--bad);} .t-ok{color:var(--ok);} .spacer{flex:1;}
.hq-head{margin-bottom:6px;}
.hq-back{background:none; border:0; color:var(--navy); font-weight:600; font-size:.9rem; padding:6px 0; margin-bottom:6px; cursor:pointer;}
.hq-back:hover{text-decoration:underline;}
.hq-ic{display:inline-block; margin-right:10px; font-size:.9em;}
.hq-hello{margin:6px 0 18px;} .hq-hello h1{font-size:clamp(1.6rem,3.6vw,2.4rem); color:var(--navy); margin:4px 0;} .hq-hello p{color:var(--muted); margin:6px 0 0; max-width:70ch;}
.hq-alerts{display:grid; gap:8px; margin-bottom:16px;}
.hq-alert{display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:1px solid var(--line); border-left:5px solid var(--gold); border-radius:12px; padding:12px 16px; background:#fff; font:inherit; font-weight:600; cursor:pointer;}
.hq-alert span:first-child{font-size:1.3rem;} .hq-alert .go{margin-left:auto; color:var(--muted); font-weight:500; font-size:.85rem;}
.hq-alert.bad{border-left-color:var(--bad); background:var(--bad-bg);} .hq-alert.warn{border-left-color:#E39012; background:var(--warn-bg);} .hq-alert.info{border-left-color:var(--info); background:var(--info-bg);} .hq-alert.idle{border-left-color:var(--idle);} .hq-alert.ok{border-left-color:var(--ok); background:var(--ok-bg); cursor:default;}
.hq-group{margin-top:6px;}
.hq-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px;}
.hq-tile{display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; font:inherit; color:var(--ink); background:#fff; border:1px solid #EAE4D8; border-radius:16px; padding:18px; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease, border-color .15s;}
.hq-tile:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--gold);}
.hq-tile-ic{font-size:1.9rem; line-height:1; margin-bottom:6px;}
.hq-tile-t{font-family:var(--display); font-weight:700; font-size:1.08rem; color:var(--navy);}
.hq-tile-d{color:var(--muted); font-size:.86rem; line-height:1.4;}
.hq-tile-c{margin-top:8px; font-size:.78rem; font-family:var(--mono); color:var(--muted);} .hq-tile-c .hot{color:#fff; background:var(--bad); padding:2px 8px; border-radius:999px; font-weight:600;}
.hq-subtabs{display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 16px; border-bottom:1px solid var(--line); padding-bottom:8px;}
.hq-subtabs button{border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 16px; font:inherit; font-weight:600; font-size:.88rem; cursor:pointer; color:var(--ink);}
.hq-subtabs button.on{background:var(--navy); border-color:var(--navy); color:#fff;}
.hq-tools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:12px 0;}
.hq-search{flex:1; min-width:220px; max-width:520px;}
.hq-card{padding:18px; margin-bottom:14px;}
.hq-cols{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start;}
.hq-table-card{overflow-x:auto; margin-bottom:14px;}
.hq-table{width:100%; border-collapse:collapse; font-size:.9rem;}
.hq-table th{text-align:left; font-family:var(--mono); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap;}
.hq-table td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
.hq-table tr:last-child td{border-bottom:0;}
.hq-table .r{text-align:right;} .hq-table tr.click{cursor:pointer;} .hq-table tr.click:hover td{background:var(--gold-soft);}
.hq-table tr.row-bad td{background:var(--bad-bg);} .hq-table tr.row-ok td{background:var(--ok-bg);}
.hq-num{width:84px; padding:7px 8px;}
.kpi.bad b{color:var(--bad);} .kpi.ok b{color:var(--ok);} .kpi.warn b{color:#B86E00;}
.hq-drow{display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; text-align:left; padding:14px 16px; font:inherit; color:inherit; cursor:pointer;}
.hq-drow:hover{border-color:var(--gold);}
.hq-drow-main{min-width:0;} .hq-drow-side{display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.hq-formgroup{font-weight:700; color:var(--navy); margin:16px 0 8px; font-size:.95rem;}
.hq-steps{display:flex; gap:8px; list-style:none; padding:0; margin:0 0 14px; flex-wrap:wrap; counter-reset:s;}
.hq-steps li{counter-increment:s; padding:6px 12px 6px 8px; border-radius:999px; background:var(--surface-2); color:var(--muted); font-size:.84rem; font-weight:600;}
.hq-steps li::before{content:counter(s); display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#fff; margin-right:6px; font-size:.75rem;}
.hq-steps li.on{background:var(--navy); color:#fff;} .hq-steps li.on::before{color:var(--navy);} .hq-steps li.done{background:var(--ok-bg); color:var(--ok);} .hq-steps li.done::before{content:"✓";}
.hq-progress{height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin:8px 0;}
.hq-progress i{display:block; height:100%; background:linear-gradient(90deg,#F7B23B,#E39012); transition:width .3s;}
.hq-kv{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:.9rem;} .hq-kv span{color:var(--muted);} .hq-kv b{text-align:right; font-weight:600;}
.hq-docs{display:grid; gap:8px;}
.hq-doc{display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px dashed var(--line); border-radius:12px; flex-wrap:wrap;}
.hq-doc.has{border-style:solid; background:#fff;}
.hq-doc-ic{font-size:1.4rem;} .hq-doc-t{flex:1; min-width:160px; display:flex; flex-direction:column;}
.hq-perms{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px;}
.hq-perm{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:#fff; cursor:pointer;}
.hq-perm input{margin-top:3px; width:18px; height:18px;} .hq-perm span{display:flex; flex-direction:column;} .hq-perm small{color:var(--muted);}
.hq-check{display:flex; align-items:center; gap:8px; margin:12px 0 0; font-weight:600;} .hq-check input{width:18px; height:18px;}
.hq-qgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px;}
.hq-q{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:6px 8px; background:#fff;}
.hq-q span{flex:1; font-size:.86rem;} .hq-q .ds-in{width:70px; padding:6px 8px;}
.hq-row-between{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.hq-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.hq-stockchip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--surface-2); font-size:.84rem;}
.hq-stockchip b{font-family:var(--mono);} .hq-stockchip.low{background:var(--bad-bg); color:var(--bad);} .hq-stockchip.zero{opacity:.55;}
.hq-bar{height:6px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin:4px 0 2px; min-width:70px;} .hq-bar i{display:block; height:100%; background:var(--ok);} .hq-bar.big{height:10px; margin:8px 0;}
.hq-near{display:grid; gap:8px; margin-bottom:12px;}
.hq-nearopt{display:flex; gap:10px; align-items:flex-start; border:1.5px solid var(--line); border-radius:12px; padding:10px 12px; background:#fff; cursor:pointer;}
.hq-nearopt.on{border-color:var(--gold); background:var(--gold-soft);} .hq-nearopt input{margin-top:4px; width:18px; height:18px;}
.hq-nearopt > span{display:flex; flex-direction:column;} .hq-nearopt small{color:var(--muted);}
.hq-why{display:flex; gap:4px; flex-wrap:wrap; margin-top:4px;} .hq-why i{font-style:normal; font-size:.72rem; background:var(--ok-bg); color:var(--ok); padding:2px 8px; border-radius:999px; font-weight:600;}
.hq-cust{padding:0; overflow:hidden;}
.hq-cust-row{display:flex; justify-content:space-between; gap:12px; width:100%; padding:14px 16px; background:none; border:0; font:inherit; color:inherit; cursor:pointer; align-items:center;}
.hq-cust-detail{padding:0 16px 14px; border-top:1px dashed var(--line);}
.hq-bill{padding:10px 0; border-bottom:1px dashed var(--line);}
.hq-bigsearch label{display:block; margin-bottom:8px;} .hq-bigsearch input{width:100%; font-size:1.15rem; padding:14px 16px;}
.hq-warr{display:flex; gap:0; overflow:hidden; margin-bottom:12px;}
.hq-warr-st{min-width:170px; padding:16px; font-weight:700; display:flex; flex-direction:column; gap:4px; justify-content:center;} .hq-warr-st small{font-weight:500;}
.hq-warr.ok .hq-warr-st{background:var(--ok-bg); color:var(--ok);} .hq-warr.bad .hq-warr-st{background:var(--bad-bg); color:var(--bad);}
.hq-warr-body{padding:14px 16px; display:grid; gap:4px; font-size:.92rem;}
details.hq-card summary{cursor:pointer;}
.rules-box{border:2px solid var(--bad); background:var(--bad-bg); padding:18px; margin-bottom:16px;} .rules-box h2{color:var(--bad); margin:0 0 6px;} .rules-box ol{line-height:1.8; padding-left:20px;}
/* file viewer / pop-up */
.viewer{position:fixed; inset:0; z-index:200; background:rgba(10,20,38,.55); display:grid; place-items:center; padding:16px;}
.viewer-card{background:#fff; border-radius:16px; width:min(920px,100%); max-height:92vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.3);}
.viewer-top{display:flex; gap:8px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line);}
.viewer-body{flex:1; overflow:auto; padding:16px; display:grid; place-items:center; gap:10px;}
.viewer-body img{max-width:100%; max-height:75vh; border-radius:8px;} .viewer-body iframe{width:100%; height:72vh; border:0;}
.dx-pop .viewer-card{width:min(560px,100%);}
/* dealer extras */
.dx-offers{display:grid; gap:8px; margin:-6px 0 16px;}
.dx-offer{display:flex; gap:12px; align-items:flex-start; padding:12px 16px; border-radius:12px; background:linear-gradient(90deg,#FFF3DC,#FFF9EE); border:1px solid #F3D9A4;} .dx-offer > span{font-size:1.4rem;}
.dx-offerprice{color:#B3261E; font-weight:700;}
.dx-target{display:flex; justify-content:space-between; gap:16px; padding:16px 18px; margin-bottom:14px; flex-wrap:wrap;}
.dx-target > div:first-child{flex:1; min-width:220px;} .dx-tnum{font-size:1.1rem;} .dx-tnum b{font-family:var(--display); font-size:2rem; color:var(--navy);}
.dx-tinc{display:flex; flex-direction:column; align-items:flex-end; gap:2px;} .dx-tinc b{font-family:var(--display); font-size:1.6rem; color:var(--ok);}
.dx-lead{padding:14px 16px;} .dx-lead.new{border-left:5px solid var(--gold);}
.dx-lead-top{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.dx-lead-act{display:grid; gap:8px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line);}
.dx-notice{padding:14px 16px;} .dx-notice p{white-space:pre-wrap; margin:6px 0;} .viewer .dx-notice{padding:0 0 12px; margin-bottom:12px; border-bottom:1px dashed var(--line);}
.dx-files{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px;}
.dx-file{display:flex; gap:12px; align-items:center; padding:14px; text-align:left; font:inherit; color:inherit; cursor:pointer;} .dx-file:hover{border-color:var(--gold);}
.dx-file-ic{font-size:1.8rem;} .dx-file span:last-child{display:flex; flex-direction:column;} .dx-file small{color:var(--muted);}
@media (max-width:820px){
  .hq-cols{grid-template-columns:1fr;}
  .hq-tiles{grid-template-columns:1fr 1fr; gap:10px;} .hq-tile{padding:14px;} .hq-tile-d{font-size:.8rem;}
  .hq-warr{flex-direction:column;} .hq-warr-st{min-width:0;}
  .hq-drow{flex-direction:column; align-items:flex-start;} .hq-drow-side{flex-direction:row; flex-wrap:wrap; align-items:center;}
  .hq-table{font-size:.84rem;} .hq-table th,.hq-table td{padding:8px;}
}
@media (max-width:420px){ .hq-tiles{grid-template-columns:1fr;} }
.hq-crumbs{display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:.9rem; margin-bottom:6px;} .hq-crumbs .hq-back{margin:0;}
.tabs.many{gap:0;} .tabs.many .tab{padding:7px 9px; font-size:.8rem;}
@media (max-width:1240px){ .tabs.many .tab{padding:6px 7px; font-size:.76rem;} .tabs.many ~ .top-actions .who{display:none;} }
/* ===================== v21: dealer app home ===================== */
.dx-quick{display:grid; grid-template-columns:2fr 1fr 1fr; gap:10px; margin-bottom:14px;}
.dx-qbtn{display:flex; align-items:center; justify-content:center; gap:10px; padding:18px 14px; border-radius:16px; border:1.5px solid #EAE4D8; background:#fff; font:inherit; font-weight:700; font-size:1.02rem; color:var(--navy); cursor:pointer; box-shadow:var(--shadow-sm);}
.dx-qbtn span{font-size:1.5rem;} .dx-qbtn:hover{border-color:var(--gold);}
.dx-qbtn.main{background:linear-gradient(180deg,#F7B23B,#E39012); border-color:#E39012; color:#1A1204; font-size:1.15rem;}
.hq-alert.ok2{border-left-color:#B3261E; background:linear-gradient(90deg,#FFF3DC,#FFF9EE);}
button.dx-target{width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;}
.dx-models{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin-bottom:6px;}
.dx-model{padding:14px 16px; display:flex; flex-direction:column; gap:2px;} .dx-model b{font-family:var(--display); font-size:2rem; color:var(--navy); line-height:1.1;}
.dx-model.low{border-color:var(--bad); background:var(--bad-bg);} .dx-model.low b{color:var(--bad);}
.dx-offercard{display:flex; gap:16px; align-items:center; padding:14px 16px; border-left:5px solid #E39012;} .dx-offercard.soon{border-left-color:var(--info); opacity:.9;}
.dx-offer-big{font-family:var(--display); font-weight:700; font-size:1.4rem; color:#B3261E; min-width:120px;}
.dx-paybox{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.link-row{display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px dashed var(--line); font:inherit; color:inherit; cursor:pointer; padding:10px 0;} .link-row:hover{background:var(--gold-soft);}
#app > .hq-back{margin-bottom:4px;}
@media (max-width:600px){ .dx-quick{grid-template-columns:1fr 1fr;} .dx-qbtn.main{grid-column:1/-1;} .dx-offercard{flex-direction:column; align-items:flex-start; gap:4px;} }
@media (max-width:600px){ .hq-alert .go{display:none;} .dx-tinc{align-items:flex-start;} }
/* ===================== v22 ===================== */
.hq-roles{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px;}
.hq-role{display:flex; flex-direction:column; gap:4px; text-align:left; font:inherit; color:inherit; background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; cursor:pointer;}
.hq-role small{color:var(--muted); line-height:1.35;} .hq-role:hover{border-color:var(--gold);} .hq-role.on{border-color:var(--navy); background:#EEF2F8; box-shadow:0 0 0 2px rgba(14,33,66,.15);}
.hq-pgroup{margin-bottom:12px;} .hq-pgroup-t{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:4px 0 6px;}
.hq-danger{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; padding:10px 12px; border:1px dashed var(--bad); border-radius:10px; background:var(--bad-bg); color:var(--bad); font-size:.86rem;}
.moq-note{margin:6px 0 10px; padding:8px 10px; border-radius:10px; font-size:.88rem; background:var(--surface-2);} .moq-note.short{background:var(--warn-bg); color:#8A5300;} .moq-note.ok{background:var(--ok-bg); color:var(--ok);}
.dx-moq{margin:-6px 0 14px;}

/* =====================================================================
   v23 · ROYAL THEME – deep navy, antique gold, ivory
   ===================================================================== */
:root{ --navy:#0B1A36; --navy-2:#13284F; --royal-gold:#C9A24B; --gold-hi:#E8CC85; --gold-lo:#A47E2C; --ivory:#FBF7EE; --ink:#16213A;
  --line:#E7DCC4; --surface:#FFFDF8; }
body{background:radial-gradient(1100px 520px at 0% -10%, #F7EBCF 0%, rgba(247,235,207,0) 60%), radial-gradient(900px 520px at 110% 0%, #E9EEF7 0%, rgba(233,238,247,0) 55%), var(--ivory) !important; background-attachment:fixed !important;}
h1,h2,h3,.page-head h1{font-family:var(--display);}
.page-head h1{color:var(--navy); font-weight:700;}
/* header */
.topbar{background:linear-gradient(90deg,#08142B 0%,#0E2142 55%,#14295A 100%) !important; backdrop-filter:none !important; border-bottom:2px solid var(--royal-gold); box-shadow:0 6px 22px rgba(8,20,43,.28) !important;}
.topbar .brand{height:34px; filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));}
.app-name{color:var(--gold-hi) !important; border-left-color:rgba(232,204,133,.35) !important;}
.tabs{background:rgba(255,255,255,.06) !important; border:1px solid rgba(232,204,133,.18) !important;}
.tab{color:#E7DDC3 !important;}
.tab:hover{color:#fff !important; border-color:rgba(232,204,133,.35) !important;}
.tab[aria-current="page"]{background:linear-gradient(180deg,var(--gold-hi),var(--royal-gold)) !important; color:#0B1A36 !important; box-shadow:0 4px 14px rgba(201,162,75,.35) !important;}
.tab .badge{background:#B3261E;}
.top-actions .who{color:#E7DDC3 !important;}
.top-actions .btn-ghost{background:transparent !important; color:var(--gold-hi) !important; border:1px solid rgba(232,204,133,.55) !important;}
/* buttons */
.btn-primary{background:linear-gradient(180deg,#EED58F 0%,#D2AC52 55%,#B8913A 100%) !important; color:#0B1A36 !important; border:1px solid #B08A36 !important; box-shadow:0 6px 16px rgba(176,138,54,.28) !important;}
.btn-primary:hover{filter:brightness(1.04);}
.btn-ghost{border-color:#DCCDA8 !important;} .btn-ghost:hover{border-color:var(--royal-gold) !important; background:#FFF8E8 !important;}
.btn-ok{background:linear-gradient(180deg,#24855A,#17643F) !important;}
.eyebrow{color:var(--gold-lo) !important; background:#F8EED6 !important; border:1px solid #EAD9AE;}
.sec-title{color:var(--gold-lo) !important; font-weight:600;} .sec-title::after{background:linear-gradient(90deg,#DCC48A,rgba(220,196,138,0)) !important;}
/* cards */
.card{border-color:#EADFC6 !important; background:linear-gradient(180deg,#FFFFFF,#FFFCF5) !important;}
.kpi{border-color:#EADFC6 !important;} .kpi::before{background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo)) !important;}
.kpi b{font-family:var(--display); color:var(--navy);}
.kpis.six{grid-template-columns:repeat(6,1fr);}
@media (max-width:1100px){ .kpis.six{grid-template-columns:repeat(3,1fr);} }
@media (max-width:600px){ .kpis.six{grid-template-columns:repeat(2,1fr);} }
/* hero */
.hq-hello{position:relative; overflow:hidden; background:linear-gradient(120deg,#0B1A36 0%,#13284F 60%,#1B3566 100%); color:#F4EBD3; border-radius:22px; padding:26px 28px; border:1px solid #3A4F7C; box-shadow:0 18px 40px rgba(11,26,54,.22);}
.hq-hello::after{content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%; border:1px solid rgba(232,204,133,.28); box-shadow:0 0 0 22px rgba(232,204,133,.06), 0 0 0 46px rgba(232,204,133,.04);}
.hq-hello h1{color:#fff !important; font-family:var(--display);}
.hq-hello p{color:#D9CFB5 !important;}
.hq-hello .eyebrow{background:rgba(232,204,133,.14) !important; color:var(--gold-hi) !important; border-color:rgba(232,204,133,.35) !important;}
/* tiles */
.hq-tile{background:linear-gradient(180deg,#FFFFFF,#FFFBF1) !important; border:1px solid #EADFC6 !important; border-top:3px solid var(--royal-gold) !important; border-radius:18px !important;}
.hq-tile:hover{box-shadow:0 14px 30px rgba(11,26,54,.12) !important; border-color:var(--royal-gold) !important;}
.hq-tile-ic{width:52px; height:52px; display:grid; place-items:center; border-radius:50%; font-size:1.55rem !important; background:radial-gradient(circle at 30% 30%,#FFFFFF,#F6EAC9); box-shadow:inset 0 0 0 2px #E2C987, 0 4px 10px rgba(164,126,44,.18);}
.hq-tile-t{font-family:var(--display); color:var(--navy) !important; font-size:1.12rem !important;}
/* notifications with close */
.hq-alert{padding:0 !important; gap:0 !important; align-items:stretch !important; background:#fff; border-radius:14px !important; overflow:hidden;}
.hq-alert.ok{padding:12px 16px !important; gap:12px !important; align-items:center !important;}
.hq-alert-main{display:flex; align-items:center; gap:12px; flex:1; padding:12px 14px 12px 16px; border:0; background:transparent; font:inherit; font-weight:600; text-align:left; cursor:pointer; color:inherit;}
.hq-alert-ic{font-size:1.3rem;}
.hq-alert-main .go{margin-left:auto; color:var(--muted); font-weight:500; font-size:.85rem; white-space:nowrap;}
.hq-alert-x{border:0; border-left:1px solid rgba(0,0,0,.07); background:transparent; width:44px; font-size:1rem; color:var(--muted); cursor:pointer;}
.hq-alert-x:hover{background:rgba(0,0,0,.05); color:var(--ink);}
.hq-alert-undo{justify-self:start; margin-top:2px;}
/* order flow */
.o-track7{padding:0 10px !important;} .o-track7 li{font-size:.68rem !important;}
.o-track li.on i{background:var(--royal-gold) !important; border-color:var(--royal-gold) !important;} .o-track li.on::before{background:var(--royal-gold) !important;}
.o-track li.now i{box-shadow:0 0 0 4px rgba(201,162,75,.25); background:var(--navy) !important; border-color:var(--navy) !important;} .o-track li.now span{color:var(--navy);}
.order.o-attn{border-left:4px solid var(--royal-gold) !important;}
.of-open{display:block; width:100%; text-align:right; background:none; border:0; border-top:1px dashed var(--line); padding:8px 16px; color:var(--gold-lo); font:inherit; font-weight:600; font-size:.85rem; cursor:pointer;}
.of-next{margin-top:12px; border:1px solid #E2CF9F; background:linear-gradient(180deg,#FFFBEF,#FFF6DF); border-radius:14px; padding:14px 16px;}
.of-next-t{font-family:var(--display); font-weight:700; color:var(--navy); font-size:1.05rem; margin-bottom:10px;}
.of-line{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed var(--line); font-size:.86rem;} .of-line span{color:var(--muted);} .of-line.ok b{color:var(--ok);} .of-line.warn b{color:#9A6206;}
.of-note{margin-top:10px;} .of-note summary{cursor:pointer; font-weight:600; color:var(--navy); font-size:.88rem;}
.of-pay{margin:6px 16px 12px; border-radius:14px; padding:14px 16px; border:1px solid #F0C9C4; background:linear-gradient(180deg,#FFF6F4,#FFEFEC);}
.of-pay.sent{border-color:#C9D9F2; background:#F1F6FE; font-size:.9rem;} .of-pay.ok{border-color:#BFE3CF; background:#EEF8F2; font-size:.9rem;} .of-pay.way{border-color:#E9D49F; background:#FFF8E6; font-size:.9rem;}
.of-pay-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap;}
.of-pay-amt{font-family:var(--display); font-weight:700; font-size:2rem; color:#9E1C14; line-height:1.1;}
.of-bank{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:6px; margin:8px 0;}
.of-bank div{background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px 10px; display:flex; flex-direction:column;} .of-bank span{font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em;}
.of-payform{margin-top:10px;}
.of-steps-help{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:-8px 0 16px; font-size:.8rem;} .of-steps-help span{background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px 10px;} .of-steps-help i{color:var(--gold-lo); font-style:normal;}
.st-Confirmed{background:#E8EEF9; color:#1F4C99;} .st-AtFactory{background:#EFE8FA; color:#5B3A9A;} .st-Invoiced{background:#FDE8E6; color:#A3231A;} .st-PaySubmitted{background:#E4EEFB; color:#1F5FAD;}
.st-Paid{background:#E3F4EA; color:#1F7A4D;} .st-Dispatched{background:#FFF1D6; color:#8A5A00;} .st-Delivered{background:#E3F4EA; color:#17643F;}
/* passwords */
.pw-chip{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin-top:6px; padding:6px 10px; border:1px dashed #DCC48A; border-radius:10px; background:#FFFBEF; font-size:.82rem; width:max-content; max-width:100%;}
.pw-eye{color:var(--gold-lo); font-weight:700; cursor:pointer; text-decoration:underline;}
/* roles & bottom nav */
.hq-role.on{border-color:var(--royal-gold) !important; background:#FFF6DF !important; box-shadow:0 0 0 2px rgba(201,162,75,.25) !important;}
@media (max-width:760px){
  .bottom-nav{background:linear-gradient(180deg,#0E2142,#08142B) !important; border-color:#2C3F66 !important;}
  .bottom-nav button{color:#D9CFB5 !important;}
  .bottom-nav button[aria-current="page"]{background:linear-gradient(180deg,var(--gold-hi),var(--royal-gold)) !important; color:#0B1A36 !important;}
  .hq-hello{padding:20px;}
}
/* login */
.auth-wrap{margin-top:40px !important;}
.auth{border-top:4px solid var(--royal-gold) !important; box-shadow:0 22px 50px rgba(11,26,54,.15) !important;}
.dx-qbtn.main{background:linear-gradient(180deg,#EED58F,#C9A24B) !important; border-color:#B08A36 !important; color:#0B1A36 !important;}
.dx-qbtn{border-color:#EADFC6 !important;}
.dx-target{border-top:3px solid var(--royal-gold) !important;}
/* v24.1 – menu hover: soft gold glow on navy, text stays readable */
.tab{transition:background .18s ease, color .18s ease, border-color .18s ease !important;}
.tab:not([aria-current="page"]):hover,.tab:not([aria-current="page"]):focus-visible{background:rgba(232,204,133,.14) !important; color:var(--gold-hi) !important; border-color:rgba(232,204,133,.45) !important; box-shadow:none !important;}
.tab[aria-current="page"]:hover{filter:brightness(1.05);}
/* v27 – language switch + help button */
.lang-sw{display:inline-flex; border:1px solid rgba(232,204,133,.55); border-radius:999px; overflow:hidden; margin-right:4px;}
.lang-sw button{border:0; background:transparent; color:#E7DDC3; font:inherit; font-weight:700; font-size:.78rem; padding:6px 11px; cursor:pointer;}
.lang-sw button.on{background:linear-gradient(180deg,var(--gold-hi),var(--royal-gold)); color:#0B1A36;}
.help-wa{position:fixed; right:16px; bottom:20px; z-index:40; display:inline-flex; align-items:center; gap:8px; background:#1FA855; color:#fff; text-decoration:none; font-weight:700; font-size:.9rem; padding:12px 16px; border-radius:999px; box-shadow:0 10px 26px rgba(16,90,48,.35); border:2px solid #fff;}
.help-wa:hover{background:#18924A;} .help-wa span:first-child{font-size:1.1rem;}
@media (max-width:760px){ .help-wa{bottom:calc(96px + env(safe-area-inset-bottom,0px)); right:12px; padding:10px 13px; font-size:.82rem;} }
@media print{ .help-wa{display:none !important;} }
main#app{padding-bottom:80px;}
/* ===================== v28: professional bill ===================== */
.bill{font-family:"IBM Plex Sans",Arial,Helvetica,sans-serif; color:#111827; font-size:12px; line-height:1.45; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
.bill .b-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding-bottom:12px; border-bottom:3px solid #0E2142;}
.bill .b-brand{display:flex; flex-direction:column; align-items:flex-start; gap:4px;}
.bill .b-logo{height:62px; width:auto; display:block; background:none !important; padding:0 !important; border-radius:0 !important;}
.bill .b-auth{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#9A6206; font-weight:700;}
.bill .b-firm{text-align:right; font-size:11.5px; color:#374151;}
.bill .b-firm-name{font-size:20px; font-weight:700; color:#0E2142; margin-bottom:2px;}
.bill .b-title{display:flex; justify-content:space-between; align-items:center; background:#0E2142; color:#fff; padding:7px 12px; margin:12px 0 10px; border-radius:4px;}
.bill .b-title span{font-weight:700; letter-spacing:.18em; font-size:14px;} .bill .b-title small{color:#E8CC85; font-size:10.5px; letter-spacing:.06em;}
.bill .b-meta{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #CBD2DC; border-radius:4px; margin-bottom:10px;}
.bill .b-meta div{padding:6px 10px; border-right:1px solid #CBD2DC; display:flex; flex-direction:column;} .bill .b-meta div:last-child{border-right:0;}
.bill .b-meta span{font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:#6B7280;} .bill .b-meta b{font-size:12px;}
.bill .b-parties{display:grid; grid-template-columns:1.3fr 1fr; gap:10px; margin-bottom:10px;}
.bill .b-box{border:1px solid #CBD2DC; border-radius:4px; padding:8px 10px; font-size:11.5px;}
.bill .b-box-t{font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:#9A6206; font-weight:700; margin-bottom:3px;}
.bill .b-cust{font-size:14px; font-weight:700; color:#0E2142;}
.bill .b-table{width:100%; border-collapse:collapse; margin-bottom:10px; font-size:11.5px;}
.bill .b-table th{background:#EEF2F8; color:#0E2142; font-size:10px; text-transform:uppercase; letter-spacing:.04em; border:1px solid #CBD2DC; padding:6px; text-align:right;}
.bill .b-table td{border:1px solid #CBD2DC; padding:6px; text-align:right; vertical-align:top;}
.bill .b-table th:nth-child(-n+2),.bill .b-table td:nth-child(-n+2){text-align:left;} .bill .b-table td:first-child,.bill .b-table th:first-child{text-align:center; width:26px;}
.bill .b-table small{color:#6B7280;} .bill .b-sn{font-size:10.5px; color:#374151; margin-top:2px;}
.bill .b-gst th,.bill .b-gst td{text-align:right; font-size:10.5px;} .bill .b-gst td:first-child{text-align:left;}
.bill .b-sum{display:grid; grid-template-columns:1.35fr 1fr; gap:12px; align-items:start;}
.bill .b-words{border:1px dashed #CBD2DC; border-radius:4px; padding:6px 10px; margin-bottom:8px; display:flex; flex-direction:column;} .bill .b-words span{font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:#6B7280;}
.bill .b-pay{font-size:11px; margin:4px 0;}
.bill .b-totals{border:1px solid #CBD2DC; border-radius:4px; overflow:hidden;}
.bill .b-totals div{display:flex; justify-content:space-between; padding:5px 10px; border-bottom:1px solid #E5E7EB; font-size:11.5px;}
.bill .b-totals .grand{background:#0E2142; color:#fff; font-size:15px; font-weight:700; padding:8px 10px;} .bill .b-totals .due{color:#B42318; font-weight:700;}
.bill .b-warranty{margin:10px 0; padding:7px 10px; border:1px solid #E2C987; background:#FFF8E6; border-radius:4px; font-size:11px;}
.bill .b-foot{display:grid; grid-template-columns:1.2fr 1fr; gap:14px; margin-top:12px; align-items:end;}
.bill .b-terms{font-size:10.5px; color:#374151;} .bill .b-terms ol{margin:4px 0 0; padding-left:16px;}
.bill .b-signs{display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:center; font-size:10.5px;}
.bill .b-line{border-top:1px solid #111; margin:34px 0 4px;} .bill .b-for{font-weight:700; font-size:10.5px; margin-bottom:-20px;}
.bill .b-bottom{margin-top:12px; padding-top:6px; border-top:1px solid #CBD2DC; text-align:center; font-size:9.5px; color:#6B7280;}
.ds-serial-hint{display:block; margin-top:4px; font-size:.78rem; color:#B42318; font-weight:600;} .ds-serial-hint.ok{color:var(--ok);}
#dsSerial.need{border-color:#B42318 !important; box-shadow:0 0 0 3px rgba(180,35,24,.15) !important;}
.hq-alert-txt{display:flex; flex-direction:column; gap:2px;} .hq-alert-time{font-weight:500; font-size:.74rem; color:var(--muted);}
.of-updated{font-size:.74rem; color:var(--muted); padding:0 16px 8px;}
.kpis.five{grid-template-columns:repeat(5,1fr);} @media (max-width:900px){ .kpis.five{grid-template-columns:repeat(2,1fr);} }
@media print{ .bill{font-size:11px;} @page{size:A4; margin:12mm;} }
/* v28 – field form (small button + simple big-input form) */
.ff-smallrow{display:flex; justify-content:flex-end; margin:-4px 0 10px;}
.ff-small{border:1px solid #DCC48A; background:#FFF8E6; color:#0B1A36; font:inherit; font-weight:700; font-size:.82rem; padding:7px 12px; border-radius:999px; cursor:pointer;}
.ff-small:hover{background:#FFEFC8;}
.ff{max-width:620px; margin:0 auto;}
.ff-top{display:flex; justify-content:space-between; align-items:center;} .ff-count{font-size:.85rem; color:var(--muted);}
.ff-h{font-size:1.6rem; margin:6px 0 2px; color:var(--navy);} .ff-sub{margin:0 0 12px;}
.ff-ok{background:var(--ok-bg); color:var(--ok); font-weight:700; padding:10px 14px; border-radius:12px; margin-bottom:10px;}
.ff-card{padding:16px; display:grid; gap:12px;}
.ff-l{display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:.86rem; color:var(--ink);}
.ff-l input,.ff-l textarea{border:1px solid var(--line); border-radius:10px; padding:12px; font:inherit; font-size:1rem; background:#fff; font-weight:400;}
.ff-l input:focus,.ff-l textarea:focus{outline:none; border-color:var(--royal-gold); box-shadow:0 0 0 3px rgba(201,162,75,.2);}
.ff-2{display:grid; grid-template-columns:2fr 1fr; gap:10px;}
.ff-row{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.ff-chip{border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:8px 13px; font:inherit; font-size:.86rem; font-weight:600; cursor:pointer; color:var(--ink);}
.ff-chip.on{background:var(--navy); border-color:var(--navy); color:#fff;}
.ff-save{padding:14px; font-size:1.05rem;}
.ff-list{display:grid; gap:6px;} .ff-item{background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:.88rem;}
@media (max-width:520px){ .ff-2{grid-template-columns:1fr;} }
/* v29 – dealer pay note */
.of-paynote{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#fff8e6;border:1px solid #f0d58a;font-size:.88rem;line-height:1.45}
/* v29: dealer bell + offers */
.dx-bell{position:relative; background:rgba(255,255,255,.08); border:1px solid rgba(245,166,35,.45); color:#fff; border-radius:999px; width:38px; height:38px; font-size:1.05rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:none;}
.dx-bell:hover{background:rgba(245,166,35,.22);}
.dx-bell b{position:absolute; top:-5px; right:-5px; background:#D93025; color:#fff; font-size:.66rem; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:inherit;}
.viewer .dx-notice.new{background:var(--gold-soft); border-radius:10px; padding:10px 12px; border-bottom:0;}
.dx-bell-item{display:flex; gap:10px; width:100%; text-align:left; background:#F7F8FB; border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:0 0 8px; cursor:pointer; font:inherit; color:inherit;}
.dx-bell-item span{display:flex; flex-direction:column; gap:2px;} .dx-bell-item small{color:var(--muted); font-size:.75rem;}
.dx-bell-item.bad{border-color:#F2B8B5; background:#FDF1F0;} .dx-bell-item:hover{border-color:var(--gold);}
.dx-pop .viewer-card{max-width:520px;}
/* v30: phones – WhatsApp help moves to the top bar, home shows only the quick buttons (rest is in the menu) */
.help-top{display:none;}
@media (max-width:760px){
  .help-wa{display:none !important;}
  .help-top{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#1FA855; color:#fff; text-decoration:none; font-size:1.05rem; flex:none; box-shadow:0 2px 8px rgba(16,90,48,.35);}
  .dx-more-tiles{display:none;}
  .top-actions{gap:6px;}
  .dx-bell{width:36px; height:36px;}
}
.nt-pick{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:4px 12px; max-height:260px; overflow:auto; border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:8px 0;}
.of-filt{margin:0 0 12px;}
.dx-bell-item.seen{opacity:.6; background:#fff;}
/* v31: bigger, clearer addresses on the bill */
.bill .b-firm{font-size:12.5px; line-height:1.5;} .bill .b-firm-name{font-size:22px;}
.bill .b-addr{font-size:12.5px; color:#1F2937; max-width:340px; margin-left:auto;} .bill .b-loc{font-size:13px; font-weight:600; color:#0E2142;}
.bill .b-box{font-size:12.5px; line-height:1.55;} .bill .b-cust{font-size:17px;}
.dx-cname{font-size:1.12rem; font-weight:700; color:var(--navy);} .dx-cline{font-size:.95rem; margin-top:2px; color:var(--ink,#1F2937);}
.hq-find{display:flex; align-items:center; gap:8px; background:var(--surface,#fff); border:1px solid var(--line); border-radius:14px; padding:6px 6px 6px 14px; margin:0 0 14px; box-shadow:0 2px 10px rgba(14,33,66,.06);}
.hq-find input{flex:1; border:0; outline:0; font:inherit; font-size:.95rem; background:transparent; min-width:0;}
.hq-sum tr.tot td{background:#F3F5F9; border-top:2px solid #0E2142;} .t-warn{color:#B45309;}
/* v32: last 15 notifications in a scroll */
.bell-hist{max-height:340px; overflow-y:auto; border:1px solid var(--line); border-radius:12px; padding:6px; background:#FAFBFD; -webkit-overflow-scrolling:touch;}
.bell-h{display:flex; gap:10px; width:100%; text-align:left; background:#fff; border:0; border-bottom:1px solid #EEF1F5; padding:9px 10px; font:inherit; color:inherit; cursor:pointer; border-radius:8px;}
.bell-h:last-child{border-bottom:0;} .bell-h:hover{background:var(--gold-soft);}
.bell-h > span:last-child{display:flex; flex-direction:column; gap:2px; min-width:0;} .bell-h b{font-weight:600; font-size:.9rem;}
.bell-h .bh-sub{font-size:.8rem; color:#4B5563; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} .bell-h small{color:var(--muted); font-size:.74rem;}
.send-card{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:#ECFDF3; border:2px solid #1FA855; border-radius:16px; padding:14px 16px; margin:0 0 14px;}
.send-card .btn-lg{font-size:1.02rem; padding:12px 18px;}
@media (max-width:760px){ .send-card .btn{width:100%; justify-content:center;} }

/* ===================== v33: smooth, premium motion layer ===================== */
:root{ --ease:cubic-bezier(.22,.61,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); }
html{scroll-behavior:smooth; -webkit-tap-highlight-color:transparent;}
::selection{background:rgba(201,162,75,.35); color:#0B1A36;}
/* every clickable thing glides */
.btn,.tab,.hq-tile,.dx-qbtn,.ds-chip,.hq-alert,.hq-alert-main,.dx-bell,.help-top,.help-wa,.bell-h,.dx-bell-item,.ff-chip,.hq-role,.order-row,.of-open,.more-grid button,.bottom-nav button,.seg button,.user-row,.card.order,.hq-cust,.dx-file,.kpi{
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease), color .2s var(--ease), opacity .2s var(--ease) !important;}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(11,26,54,.14);}
  .btn-primary:hover{box-shadow:0 10px 24px rgba(201,162,75,.38);}
  .hq-tile:hover,.dx-qbtn:hover{transform:translateY(-4px); box-shadow:0 18px 38px rgba(11,26,54,.14), 0 0 0 1px rgba(201,162,75,.55);}
  .hq-tile:hover .hq-tile-ic{transform:scale(1.08) rotate(-3deg);}
  .card.order:hover,.hq-cust:hover,.user-row:hover,.dx-file:hover{box-shadow:0 12px 28px rgba(11,26,54,.10); border-color:#E2D3AA;}
  .kpi:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(11,26,54,.09);}
  .hq-alert:hover{transform:translateX(3px);}
  .dx-bell:hover,.help-top:hover{transform:scale(1.08);}
  .help-wa:hover{transform:translateY(-2px) scale(1.03);}
  .hq-table tbody tr{transition:background-color .18s var(--ease);} .hq-table tbody tr:hover{background:#FFF8E6;}
}
.hq-tile-ic{display:inline-flex; transition:transform .35s var(--ease-spring);}
.btn:active,.hq-tile:active,.dx-qbtn:active,.tab:active,.bottom-nav button:active,.more-grid button:active,.ds-chip:active{transform:scale(.97) !important; transition-duration:.08s !important;}
/* keyboard users get a clear gold ring */
:focus-visible{outline:2px solid var(--royal-gold,#C9A24B) !important; outline-offset:2px; border-radius:10px;}
input,select,textarea{transition:border-color .2s var(--ease), box-shadow .2s var(--ease) !important;}
input:focus,select:focus,textarea:focus{border-color:var(--royal-gold,#C9A24B) !important; box-shadow:0 0 0 4px rgba(201,162,75,.18) !important; outline:none;}
/* pages, pop-ups and toasts fade in softly */
@keyframes tirlaIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@keyframes tirlaPop{from{opacity:0; transform:translateY(14px) scale(.97);} to{opacity:1; transform:none;}}
@keyframes tirlaFade{from{opacity:0;} to{opacity:1;}}
#app.page-in > *{animation:tirlaIn .38s var(--ease) both;}
#app.page-in > *:nth-child(2){animation-delay:.03s;} #app.page-in > *:nth-child(3){animation-delay:.06s;} #app.page-in > *:nth-child(4){animation-delay:.09s;} #app.page-in > *:nth-child(n+5){animation-delay:.12s;}
.viewer{animation:tirlaFade .2s ease both;} .viewer .viewer-card{animation:tirlaPop .32s var(--ease) both;}
.more-sheet:not([hidden]){animation:tirlaPop .25s var(--ease) both;}
#toast{transition:opacity .25s var(--ease), transform .25s var(--ease) !important;}
.dx-bell b{animation:tirlaPop .3s var(--ease-spring) both;}
/* slim gold scrollbars */
*{scrollbar-width:thin; scrollbar-color:#D9C48F transparent;}
::-webkit-scrollbar{width:10px; height:10px;} ::-webkit-scrollbar-thumb{background:#D9C48F; border-radius:10px; border:3px solid transparent; background-clip:padding-box;} ::-webkit-scrollbar-thumb:hover{background:#C9A24B; background-clip:padding-box; border:3px solid transparent;}
/* fashionable cursor: soft gold ring that glides after the mouse (computer only) */
.cur-ring,.cur-dot{position:fixed; left:0; top:0; pointer-events:none; z-index:9999; border-radius:50%; will-change:transform; opacity:0; transition:opacity .3s ease, width .28s var(--ease), height .28s var(--ease), margin .28s var(--ease), background-color .28s var(--ease), border-color .28s var(--ease);}
.cur-ring{width:34px; height:34px; margin:-17px 0 0 -17px; border:1.5px solid rgba(201,162,75,.75); background:rgba(232,204,133,.06);}
.cur-dot{width:6px; height:6px; margin:-3px 0 0 -3px; background:#C9A24B;}
.cur-on .cur-ring,.cur-on .cur-dot{opacity:1;}
.cur-hover .cur-ring{width:54px; height:54px; margin:-27px 0 0 -27px; background:rgba(232,204,133,.16); border-color:rgba(201,162,75,.95);}
.cur-down .cur-ring{width:26px; height:26px; margin:-13px 0 0 -13px; background:rgba(201,162,75,.28);}
.cur-text .cur-ring{opacity:0;}
@media (hover:none),(pointer:coarse){ .cur-ring,.cur-dot{display:none !important;} }
@media print{ .cur-ring,.cur-dot{display:none !important;} }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation:none !important; transition:none !important;} .cur-ring,.cur-dot{display:none !important;} }
/* v34: bulk WhatsApp to customers */
.bc-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start;}
.bc-side{position:sticky; top:90px;}
@media (max-width:980px){ .bc-grid{grid-template-columns:1fr;} .bc-side{position:static; order:-1;} }
.bc-src{margin-bottom:10px;}
.bc-filters{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; margin:6px 0 12px;}
.bc-filters label{display:flex; flex-direction:column; gap:4px; font-size:.78rem; font-weight:600; color:var(--muted);}
.bc-count{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#F3F7EF; border:1px solid #CFE6C4; border-radius:12px; padding:10px 14px; font-size:.95rem;}
.bc-count b{font-size:1.3rem; color:#15803D;}
.bc-list{max-height:280px; overflow:auto; border:1px solid var(--line); border-radius:12px; margin-top:10px; background:#fff;}
.bc-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 12px; border-bottom:1px solid #F0EDE6; font-size:.88rem;} .bc-row:last-child{border-bottom:0;}
.bc-tpls{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-bottom:12px;}
.bc-tpl{display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid #EAE4D8; border-radius:12px; padding:10px 12px; font:inherit; font-weight:600; font-size:.86rem; cursor:pointer; text-align:left; color:var(--ink);}
.bc-tpl span{font-size:1.2rem;} .bc-tpl.on{border-color:var(--royal-gold,#C9A24B); background:#FFF8E6; box-shadow:0 0 0 3px rgba(201,162,75,.18);}
.bc-text{width:100%; font-family:inherit; font-size:.93rem; line-height:1.5; resize:vertical; min-height:200px;}
.bc-tags{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0 10px;}
.bc-modes{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px;}
.bc-mode{display:flex; flex-direction:column; gap:4px; text-align:left; background:#fff; border:1.5px solid #EAE4D8; border-radius:14px; padding:12px 14px; font:inherit; cursor:pointer; color:var(--ink);}
.bc-mode small{color:var(--muted); font-size:.78rem; line-height:1.4;} .bc-mode.on{border-color:#1FA855; background:#F0FBF4; box-shadow:0 0 0 3px rgba(31,168,85,.15);}
.wa-phone{border-radius:22px; overflow:hidden; border:8px solid #0B1A36; box-shadow:0 18px 40px rgba(11,26,54,.25); background:#ECE5DD;}
.wa-top{background:#075E54; color:#fff; font-weight:700; padding:10px 14px; font-size:.9rem;}
.wa-chat{padding:14px 10px 18px; min-height:220px; background:#ECE5DD;}
.wa-bubble{position:relative; background:#DCF8C6; border-radius:10px 2px 10px 10px; padding:8px 10px 18px; font-size:.86rem; line-height:1.45; color:#111; box-shadow:0 1px 1px rgba(0,0,0,.12); white-space:normal; word-wrap:break-word;}
.wa-time{position:absolute; right:8px; bottom:3px; font-size:.66rem; color:#667;}
.bc-prog{height:12px; background:#EEF1F5; border-radius:8px; overflow:hidden; margin:4px 0 10px;} .bc-prog div{height:100%; background:linear-gradient(90deg,#1FA855,#5FD18B); transition:width .4s ease;}
.bc-now{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; background:#F0FBF4; border:1.5px solid #1FA855; border-radius:14px; padding:14px 16px; margin:10px 0;}
.bc-now-name{font-size:1.3rem; font-weight:700; color:var(--navy);}
.bc-steps li{margin-bottom:6px;} .bc-steps code{background:#F3F5F9; padding:2px 6px; border-radius:6px; font-size:.8rem;}
@media (max-width:760px){ .bc-now .btn{width:100%; justify-content:center;} }

/* show/hide password button (login boxes) */
.pwx-wrap{position:relative;display:block;width:100%}
.pwx-wrap input{width:100%;padding-right:68px}
.pwx-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:inherit;font:inherit;font-size:13px;font-weight:600;text-decoration:underline;padding:8px 10px;cursor:pointer;opacity:.8}
.pwx-eye:hover{opacity:1}
/* v37 extras */
.ff-photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ff-photo{position:relative}.ff-photo img{width:78px;height:78px;object-fit:cover;border-radius:8px;border:1px solid #e6e0d2}
.ff-photo button{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:0;background:#b3261e;color:#fff;font-size:13px;line-height:1;cursor:pointer}
.ff-th{width:54px;height:54px;object-fit:cover;border-radius:6px;border:1px solid #e6e0d2;margin:4px 4px 0 0;cursor:pointer}
.xv-over{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;display:flex;align-items:center;justify-content:center;padding:12px}
.xv-over img{max-width:100%;max-height:100%;border-radius:8px}
.x-row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.x-lim{width:120px}
.x-old{color:#b3261e;font-weight:700}.x-mid{color:#b26a00;font-weight:700}

.top-search{font-size:1.05rem;padding:6px 10px;line-height:1}

/* v44: full-detail field entries */
.ff-card{padding:14px;margin:10px 0}
.ff-card-h{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:8px}
.ff-kv{display:flex;gap:10px;justify-content:space-between;padding:5px 0;border-top:1px dashed #e6e0d2;font-size:.92rem}
.ff-kv span{color:#6b6b6b;flex:0 0 38%}.ff-kv b{font-weight:600;text-align:right;word-break:break-word}
.ff-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* v45: requirement (capacity / quantity) rows in the field form */
.ff-req{background:#fbf6ea;border:1px solid #eadfc4;border-radius:10px;padding:10px 12px;margin:8px 0}
.ff-req>b{display:block;margin-bottom:6px;font-size:.92rem}
.ff-mini{display:flex;flex-direction:column;gap:3px;font-size:.78rem;color:#6b6b6b;flex:1;min-width:90px}
.ff-mini .ds-in{width:100%}