/* ============================================================================
   BMW Key Reference theme, applied to Moto.
   Look-and-feel ONLY. No markup, data or behaviour is changed by this file:
   it is loaded last on every Moto surface and only repaints what is already
   there. Colours, fonts, radii and surfaces are taken from the BMW Key
   Reference app (bmw-reference/template.html + its Worker shell).

   Loaded last so it wins order; !important is used deliberately because the
   pages it themes use hard-coded colours in several places.
   ========================================================================== */

@font-face{font-family:"Bebas Neue";src:url(/fonts/bebas-neue.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Rubik";src:url(/fonts/rubik-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --navy-0:#0a1226; --navy-1:#101c38; --navy-2:#16264c; --navy-3:#1c2f5e;
  --card:#16294f; --card-2:#1c315c; --card-3:#233a6b;
  --line:#2b4276; --line-2:#3a5490;
  --txt:#eef3ff; --muted:#a9bce6; --dim:#8093c2;
  --accent:#6fb1ff; --accent-2:#8ea2ff; --green:#5de3a4; --warn:#ffc86b; --danger:#ff8a8a; --gold:#ffcf5c;
  --c-shell:#000; --c-line:#2e2e2e; --c-inner:#1c2f5e; --c-tile:#233a6b; --c-tile-line:#2b4276;
  --c-head:#9bf3c1; --c-label:#a9bce6; --c-value:#eef3ff;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---------------------------------------------------------------- global -- */
html,body{
  background:radial-gradient(1100px 700px at 12% -12%,#16264c,transparent 60%),
             radial-gradient(900px 600px at 96% 0%,rgba(111,177,255,.13),transparent 55%),
             linear-gradient(180deg,#101c38,#0a1226) fixed !important;
  color:var(--txt) !important;
}
body{font-family:var(--sans) !important;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}

/* Display type: Bebas Neue on headings, like BMW. */
h1,h2,h3,.moto-title,.nav-title,.logo,.hero,.blankhead,.grp-title,.plan .amt,.cfoot+.cmeta{
  font-family:"Bebas Neue",var(--sans) !important;font-weight:400 !important;
  text-transform:uppercase;letter-spacing:.6px;
}
/* Small uppercase labels: Bebas, muted — BMW's .fld>span / details.cat summary. */
.field label,.f .fl,.coltoggles .lbl,.filters label,.notesref>summary,.chipdd .clab,
.blankchip .clab,.buytitle,.ff .ffl,.vlab,label{
  font-family:"Bebas Neue",var(--sans) !important;font-weight:400 !important;
  text-transform:uppercase;letter-spacing:.6px;color:var(--c-label) !important;
}
/* Values: Rubik 700, like BMW's .fld .val. */
.f .fv,.row-title,.chipwrap,.val,.ls .tv,.blx .tv,.ff .ffv,.blankhead,.vrow select,.vrow input,#vin{
  font-family:"Rubik",var(--sans) !important;font-weight:700 !important;
}

/* --------------------------------------------------------- app: chrome --- */
.navbar{background:color-mix(in srgb,var(--navy-1) 88%,transparent) !important;border-bottom:1px solid var(--line) !important}
.nav-back{color:var(--txt) !important}
.nav-title{color:var(--txt) !important;font-size:19px}
.moto-title{color:var(--c-head) !important;text-shadow:none !important}
.nav-back{background:var(--card) !important;border:1px solid var(--line) !important;border-radius:0 !important;
  color:var(--txt) !important;width:44px !important;height:44px !important;font-size:22px !important}
.nav-btn,.clear,.tog,.chip,.soft{background:var(--c-tile) !important;color:var(--txt) !important;border:1px solid var(--c-tile-line) !important}
.nav-btn{border-radius:0 !important}
.tog.on{background:var(--accent) !important;color:#06101c !important}
.tog.off{opacity:.45}
.statusbar{color:var(--c-label) !important}
.statusbar strong{color:var(--txt) !important}
.chip{color:var(--c-label) !important}

/* controls: navy tile, light text, square (BMW app style) */
select,.clear,#vin,.vrow select,.vrow input,.notesref textarea,#blankSearch{
  background:var(--c-tile) !important;color:var(--c-value) !important;
  border:1px solid var(--c-tile-line) !important;border-radius:0 !important;
}
select{border-radius:0 !important}
#blankSearch::placeholder{color:var(--c-label) !important}
#vin::placeholder{color:var(--c-label) !important}

/* list rows / value boxes */
.row{background:var(--c-inner) !important;color:var(--c-value) !important;border:1px solid var(--c-tile-line) !important;border-radius:0 !important}
.row:active{background:var(--c-tile) !important}
.row-title{color:var(--c-value) !important}
.row-sub{color:var(--c-label) !important}
.chev{color:var(--dim) !important}
/* BMW card system: one black container per field list, navy inner, hairline rows */
.fields{background:var(--c-shell) !important;border:1px solid var(--c-line) !important;border-radius:0 !important;
  padding:8px !important;margin:0 0 14px !important;display:block !important;gap:0 !important}
.fields>.f,.fields>.ff,.fields>.blankhint,.fields>.blanksum,.fields>.chipdd{
  background:var(--c-inner) !important;border:0 !important;border-bottom:1px solid rgba(169,188,230,.20) !important;
  border-radius:0 !important;margin:0 !important}
.fields>.f{display:block !important;padding:9px 12px !important}
.fields>*:last-child{border-bottom:0 !important}
.f .fv{background:transparent !important;color:var(--c-value) !important;border:0 !important;border-radius:0 !important;
  padding:2px 0 0 !important;font-size:14px !important;line-height:1.35 !important}
.f .fv.na{background:transparent !important;color:var(--c-label) !important}
.f .fl{color:var(--c-label) !important;margin:0 !important;font-size:12.5px !important}
.fields>.chipdd .chipwrap{background:var(--c-inner) !important;border-radius:0 !important}
.fields>.chipdd>summary{border-bottom:0 !important;padding:9px 12px !important}
.fields>.blankhint{padding:9px 12px !important;color:var(--c-label) !important}
.fields>.ff>summary{padding:9px 12px !important}
.idle,.empty{color:var(--c-label) !important}
.idle .big{color:var(--txt) !important}
.idle svg{fill:var(--accent) !important}
.blankhint,.blanksum{color:var(--c-label) !important}
.blankref,.notesref{border-top:1px solid var(--c-tile-line) !important}
.notescount{color:var(--c-label) !important}
.notecard{background:var(--c-inner) !important}
.notetext{color:var(--c-value) !important}
.notewhen{color:var(--dim) !important}
.notedel{background:var(--c-tile) !important;color:var(--txt) !important}
.notemsg,.noteempty{color:var(--c-label) !important}
.notemsg.err{color:var(--danger) !important}
.searchfield .sicon{fill:var(--c-label) !important}

/* ------------------------------------------------- app: BMW card system -- */
/* black shell + navy inner, mint heading — BMW's .group / .lsx .cc */
.ff,.chipdd,.blankchip,.buybox,.verifybox,.vidlinks,.imgdd,.blx,.lsx .cc,.lsx .cnote,.vbadge{
  background:var(--c-shell) !important;border:1px solid var(--c-line) !important;border-radius:0 !important;
}
.ff .ffl,.blankchip .clab,.chipwrap .clab,.lishifacts .r span,.buytitle,.vlab{color:var(--c-head) !important}
.ff>summary{border-bottom:0}
.ff[open]>summary,.chipdd[open]>summary,.verifybox[open]>summary{border-bottom:1px solid var(--c-line) !important}
.ff .ffv{color:var(--c-value) !important}
.ff .fbody .fv,.chipdd .chipwrap,.blankchip .cin,.lishiPanel .f .fv,.f .fv{background:var(--c-inner) !important}
.chipwrap .crow{background:var(--c-tile) !important}
.chipwrap,.chipwrap b,.blankchip,.blankchip b{color:var(--c-value) !important}
.chipwrap .cpart{color:var(--c-label) !important}
.chipwrap .cnote,.blankchip .cnote{color:var(--gold) !important}
.ff.naField{border-style:dashed}
.ff.naField .ffv{color:var(--c-label) !important}
.vbadge{border-color:#2f8a5c !important;background:#123a28 !important;color:#d7f7e4 !important}
.vbadge .vnote{color:#a9dcbd !important}
.verifybox>summary,.chipdd>summary{color:var(--c-label) !important}
.vrow select,.vrow input,#vin{background:var(--navy-2) !important;color:var(--c-value) !important}
.vmsg{color:var(--c-label) !important}
.vmsg.vok{color:var(--green) !important}
.vmsg.verr{color:var(--danger) !important}
.vfile{color:var(--c-label) !important}
.vlink{color:var(--accent) !important}
.vreward{color:var(--gold) !important}
.vreward.ready{color:var(--green) !important}
.vhint{color:var(--c-label) !important}
.vinmsg{background:var(--c-tile) !important;border:1px solid var(--c-tile-line) !important;color:var(--c-value) !important}
.vinmsg.err{color:var(--danger) !important;border-color:#8a3a3a !important}
.blankchip.akl{color:var(--c-label) !important}

/* ------------------------------------------------------- app: buttons ---- */
.notesave,.buybtn,.vbtn,.rwsbtn,#list .row{
  background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important;
  color:#06101c !important;border-radius:0 !important;box-shadow:none !important;
  font-family:"Rubik",var(--sans) !important;font-weight:700 !important;
}
#list .row:active{transform:none !important;box-shadow:none !important}
.vbtn.vdel{background:#8a3a3a !important;color:#ffe9e4 !important}
.vbtn.vkeep,.rwsbtn.rwkeep{background:var(--c-tile) !important;color:var(--txt) !important}
.buyhint{color:var(--c-label) !important}

/* image strips keep white behind the owner's product shots */
.imgwrap,.blankimg,.imgdd .imgwrap{background:var(--navy-2) !important;border-radius:0 !important}
.imgwrap img,.blankimg img{background:#fff !important;border-radius:0 !important}
.imgdd>summary{background:transparent !important;color:var(--txt) !important}

/* ------------------------------- worker chart card (Lishi / blanks / etc) - */
.lsx .cc h4{color:var(--c-head) !important}
.lsx .cin{background:var(--c-inner) !important;border-radius:0 !important}
.lsx table{color:var(--c-value) !important}
.lsx th,.lsx td{color:var(--c-value) !important}
.lsx th{border-bottom:1px solid rgba(255,255,255,.28) !important}
.lsx tr:nth-child(even) td{background:rgba(255,255,255,.07) !important}
.lsx .cfoot{color:var(--c-label) !important;border-top:1px solid rgba(255,255,255,.2) !important}
.lsx .cnote .cin{color:var(--c-value) !important}
.blx>h4{color:var(--c-head) !important}
.blx .cin{background:var(--c-inner) !important}
.blx .tile{background:var(--c-tile) !important}
.blx .tl{color:var(--c-label) !important}
.blx .tv{color:var(--c-value) !important}
.lishifacts .r{background:var(--c-tile) !important}
.lishifacts .r span{color:var(--c-label) !important}
.lishifacts .r b{color:var(--c-value) !important}
.selbox{background:var(--c-line) !important}
.vidlinks .vhead{color:var(--c-head) !important}
.vidlinks .vhead span{color:var(--c-label) !important}
.vidlinks a{background:var(--c-shell) !important;border:1px solid var(--c-line) !important;color:var(--txt) !important}
.vidlinks a:hover,.vidlinks a:focus{background:#181818 !important;border-color:var(--accent) !important}
.vidlinks .vch{color:var(--c-label) !important}
.blankchip{color:var(--c-value) !important}

/* the Lishi card's deliberate pale-yellow inner becomes BMW's navy inner */
#lishiWrap .lsx .cin{background:var(--c-inner) !important}
#lishiWrap .lishifacts .r{background:var(--c-tile) !important}
#lishiWrap .lishifacts .r span{color:var(--c-label) !important}
#lishiWrap .lsx .cc,#lishiWrap .lsx .cnote{background:var(--c-shell) !important;border-color:var(--c-line) !important}
#lishiWrap .field select{background:var(--c-tile) !important;color:var(--c-value) !important}

/* member bars injected above/below the app */
#motobar{background:var(--c-shell) !important;color:var(--c-label) !important;border-bottom:1px solid var(--c-line)}
#motobar a{color:var(--c-head) !important}
#motobar .mbmail{color:var(--c-label) !important}
#motobar .mbsep{color:var(--c-tile-line) !important}
#rwbar{background:var(--c-shell) !important;border-top:1px solid var(--c-line) !important;color:var(--c-label) !important}

/* ------------------------------------------------------ public landing ---- */
.bar{background:color-mix(in srgb,var(--navy-1) 92%,transparent) !important;border-bottom:1px solid var(--line) !important}
.logo{color:var(--txt) !important;font-size:22px !important;letter-spacing:.6px}
.logo small{color:var(--c-label) !important;font-family:var(--sans) !important;letter-spacing:.2px;text-transform:none}
.bar a.login{color:var(--c-label) !important}
.kicker{background:transparent !important;color:var(--c-head) !important;border:1px solid var(--c-tile-line);border-radius:999px;
  font-family:"Rubik",var(--sans) !important;font-weight:700 !important;letter-spacing:1.1px}
.hero p.lead{color:var(--txt) !important}
h1{font-size:clamp(26px,7vw,40px) !important;color:var(--txt) !important}
h2{font-family:"Bebas Neue",var(--sans) !important;font-weight:400 !important;text-transform:uppercase;
  letter-spacing:.6px;font-size:clamp(21px,5vw,28px) !important;color:var(--txt) !important}
h3{font-family:"Rubik",var(--sans) !important;font-weight:700 !important}
.btn{background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important;color:#06101c !important;
  border-radius:14px !important;box-shadow:none !important;font-family:"Rubik",var(--sans) !important;font-weight:700 !important;font-size:16px !important}
.btn:active{transform:none !important}
.btn.ghost{background:transparent !important;border:1px solid var(--accent) !important;color:var(--accent) !important;box-shadow:none !important}
.trust{color:var(--c-label) !important}
.card{background:var(--card) !important;border:1px solid var(--line) !important;border-radius:16px !important}
.tick li{color:var(--txt) !important}
.tick li:before{color:var(--green) !important}
.stat{background:var(--card-3) !important;border:1px solid var(--line) !important;border-radius:12px !important}
.stat b{color:var(--txt) !important}
.stat span{color:var(--c-label) !important}
.feat img{border:1px solid var(--line) !important;background:var(--navy-0) !important;border-radius:14px !important}
.feat .shot{background:transparent !important}
.feat .num{background:var(--accent) !important;color:#06101c !important}
.feat p{color:var(--txt) !important}
.step .n{background:var(--accent) !important;color:#06101c !important}
.plan{background:var(--card) !important;border:1px solid var(--line) !important;border-radius:16px !important}
.plan.best{border-color:var(--accent) !important;box-shadow:0 12px 30px rgba(0,0,0,.35) !important}
.plan .tag{background:var(--accent) !important;color:#06101c !important}
.plan .amt{font-family:"Bebas Neue",var(--sans) !important;font-weight:400 !important;color:var(--c-head) !important;letter-spacing:1px}
.plan .amt small{color:var(--c-label) !important}
.plan .what{color:var(--txt) !important}
details.faq{background:var(--card-3) !important;border:1px solid var(--line) !important;border-radius:12px !important}
details.faq summary{color:var(--txt) !important}
details.faq summary:after{color:var(--accent) !important}
details.faq .a{color:var(--txt) !important}
.ctabar{background:color-mix(in srgb,var(--navy-1) 96%,transparent) !important;border-top:1px solid var(--line) !important}
.ctabar .price{color:var(--c-label) !important}
.ctabar .price b{color:var(--txt) !important}
footer{color:var(--c-label) !important}
footer a{color:var(--c-label) !important}
.fineprint{color:var(--dim) !important}

/* ------------------------------------------------- member / auth pages --- */
.wrap{max-width:440px}
.card{background:var(--card) !important;border:1px solid var(--line) !important;border-radius:16px !important}
.logo{font-family:"Bebas Neue",var(--sans) !important;font-weight:400 !important;font-size:42px !important;
  letter-spacing:1.8px !important;text-transform:uppercase;color:var(--txt) !important}
.sub{color:var(--c-label) !important}
label{color:var(--dim) !important;font-size:11px !important}
input,select,textarea{background:var(--navy-0) !important;color:var(--txt) !important;border:1px solid var(--line) !important;border-radius:12px !important}
button{background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important;color:#06101c !important;
  border-radius:14px !important;font-family:"Rubik",var(--sans) !important;font-weight:700 !important}
.msg{border-radius:10px !important}
.err{background:#3a1b1b !important;border:1px solid #8a3a3a !important}
.ok{background:#123a28 !important;border:1px solid #2f8a5c !important}
.note{color:var(--c-label) !important}
.kicker{color:var(--c-head) !important}
.hero{font-family:"Bebas Neue",var(--sans) !important;font-weight:400 !important;color:var(--txt) !important}
.lead{font-family:"Rubik",var(--sans) !important;font-weight:700 !important;color:var(--txt) !important}
.autelline{color:#ec1c24 !important}
.price{font-family:"Bebas Neue",var(--sans) !important;font-weight:400 !important;color:var(--c-head) !important;letter-spacing:1px}

/* --------------------------------------------------------- admin console - */
#adm th{color:var(--c-label) !important}
#adm th,#adm td{border-bottom:1px solid rgba(255,255,255,.18) !important}
#adm button{background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important;color:#06101c !important;box-shadow:none !important;border-radius:10px !important}
#adm button.danger{background:linear-gradient(135deg,#f3a894,#c0503a) !important;color:#3a0f08 !important;box-shadow:none !important}
#adm details.grp{background:var(--card) !important;border:1px solid var(--line) !important;border-radius:14px !important}
#adm details.grp>summary{color:var(--txt) !important}
#adm details.grp>summary::before{color:var(--accent) !important}
#adm details.grp>summary b{color:var(--c-head) !important}
#adm .hint{color:var(--c-label) !important}