:root{
  --bg:#f5f5f7; --panel:#ffffff; --panel2:#fafafa; --ink:#1d1d1f; --muted:#6e6e73; --line:#e5e5ea;
  --brand:#0071e3; --brand-dark:#0066cc;
  --green:#248a3d; --green-bg:#f0faf2; --red:#e30000; --amber:#c77700;
  --radius:16px; --shadow:0 2px 12px rgba(0,0,0,.05);
}
*{box-sizing:border-box; margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); font-size:15.5px; -webkit-font-smoothing:antialiased;}

/* ---- ambient background art ---- */
.bg-art{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.bg-art .blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.bg-art .b1{width:560px; height:560px; top:-180px; right:-120px; background:radial-gradient(circle, #bcd7ff, transparent 65%)}
.bg-art .b2{width:520px; height:520px; bottom:-200px; left:-140px; background:radial-gradient(circle, #e3d5ff, transparent 65%)}
.bg-art .b3{width:420px; height:420px; top:38%; left:44%; background:radial-gradient(circle, #ffe0ec, transparent 65%); opacity:.35}
.bg-grid{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(29,29,31,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(29,29,31,.028) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(700px circle at var(--mx,50%) var(--my,30%), #000 0%, transparent 75%);
  mask-image:radial-gradient(700px circle at var(--mx,50%) var(--my,30%), #000 0%, transparent 75%)}
.spotlight{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%), rgba(0,113,227,.07), transparent 70%)}
button{font:inherit; cursor:pointer}
input,select,textarea{font:inherit}

.app{display:flex; min-height:100vh}
.sidebar{width:230px; background:rgba(255,255,255,.85); backdrop-filter:blur(10px); border-right:1px solid var(--line); padding:24px 14px; flex-shrink:0; display:flex; flex-direction:column; gap:4px}
.logo{font-weight:700; font-size:20px; padding:6px 12px 22px; letter-spacing:-.3px}
.logo span{color:var(--muted); font-weight:500}
.navbtn{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; color:var(--muted); padding:12px 14px; border-radius:12px; font-size:15px; font-weight:500}
.navbtn:hover{background:#f0f0f2; color:var(--ink)}
.navbtn.active{background:#e8e8ed; color:var(--ink); font-weight:600}
.navbtn .ic{font-size:17px}
.sidebar .foot{margin-top:auto; font-size:12.5px; color:#a1a1a6; padding:10px 14px}
.main{flex:1; padding:32px 36px 120px; max-width:1340px}
.pagehead{display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:12px; flex-wrap:wrap}
h1{font-size:28px; font-weight:700; letter-spacing:-.4px}
h2{font-size:13px; margin-bottom:12px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:var(--muted)}
.sub{color:var(--muted); font-size:14px; margin-top:4px}

.btn{background:var(--brand); color:#fff; border:0; border-radius:12px; padding:12px 22px; font-weight:600; font-size:15px}
.btn:hover{background:var(--brand-dark)}
.btn.ghost{background:#fff; color:var(--ink); border:1px solid #d2d2d7}
.btn.ghost:hover{background:#f5f5f7}
.btn.white{background:var(--ink); color:#fff}
.btn.white:hover{background:#000}
.btn.sm{padding:7px 12px; font-size:13px; border-radius:9px}
.btn.green{background:var(--green)}
.btn.green:hover{background:#1e7534}
.btn:disabled{opacity:.4; cursor:not-allowed}

.card{background:rgba(255,255,255,.82); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.08)}

/* search input */
.searchbar{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.85); border:1px solid #d2d2d7; border-radius:99px; padding:9px 16px; min-width:280px}
.searchbar input{border:0; outline:0; background:none; font-size:14.5px; flex:1; color:var(--ink)}
.searchbar .ic{color:var(--muted)}

/* dealer email thread */
.thread{display:flex; flex-direction:column; gap:10px; max-height:46vh; overflow:auto; padding:6px 2px}
.bubble{max-width:82%; padding:11px 14px; border-radius:16px; font-size:14px; line-height:1.45}
.bubble .when{font-size:11px; opacity:.65; margin-top:4px}
.bubble.out{align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:5px}
.bubble.in{align-self:flex-start; background:#f0f0f2; color:var(--ink); border-bottom-left-radius:5px}

/* Pipeline */
.board{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; align-items:start}
.col{background:#ececf0; border-radius:var(--radius); padding:10px; min-height:340px; border-top:4px solid var(--cc,#a1a1a6)}
.col h3{font-size:11.5px; text-transform:uppercase; letter-spacing:.7px; padding:6px 6px 12px; display:flex; justify-content:space-between; color:#515154}
.col h3 .cnt{background:var(--cc); color:#fff; border-radius:99px; padding:0 8px; font-size:11.5px; line-height:20px}
.col.dragover{outline:2.5px dashed var(--brand); outline-offset:-3px}
.dealcard{background:#fff; border:1px solid var(--line); border-radius:13px; padding:13px; margin-bottom:11px; cursor:grab; box-shadow:0 1px 4px rgba(0,0,0,.06)}
.dealcard.alert{border-color:var(--red); box-shadow:0 0 0 2px rgba(227,0,0,.25)}
.dealcard .veh{font-weight:600; font-size:14px}
.dealcard .cl{color:var(--muted); font-size:12.5px; margin:3px 0 7px}
.dealcard .pay{font-weight:700; color:var(--brand); font-size:16px}
.dealcard .meta{font-size:12px; color:var(--muted); margin-top:6px}
.dealcard .warn{font-size:12px; color:var(--red); font-weight:600; margin-top:5px}
.dealcard select{margin-top:8px; width:100%; border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:8px; padding:6px; font-size:12.5px}
.dealcard .row{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}

table{width:100%; border-collapse:collapse}
th{font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); text-align:left; padding:10px 12px; border-bottom:1px solid var(--line)}
td{padding:14px 12px; border-bottom:1px solid var(--line); font-size:15px}
tr.click:hover{background:#f5f5f7; cursor:pointer}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px}
.grid6{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:6px}
.field input,.field select,.field textarea{width:100%; border:1px solid #d2d2d7; background:#fff; color:var(--ink); border-radius:10px; padding:11px 13px; font-size:15px}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid rgba(0,113,227,.25); border-color:var(--brand)}
.field input::placeholder{color:#a1a1a6}

/* Quote desk */
.desk{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:start}
.radios{display:flex; gap:8px; flex-wrap:wrap}
.radios button{border:1px solid #d2d2d7; background:#fff; color:var(--muted); border-radius:99px; padding:9px 18px; font-size:14px; font-weight:500}
.radios button.active{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600}
.radios button:disabled{opacity:.35; cursor:not-allowed}
.tabs{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap}
.tab{border:1px solid #d2d2d7; background:#fff; color:var(--muted); border-radius:99px; padding:8px 16px; font-size:13.5px; font-weight:500}
.tab.active{background:var(--brand); color:#fff; border-color:var(--brand); font-weight:600}
.seg{display:inline-flex; border:1px solid #d2d2d7; border-radius:10px; overflow:hidden}
.seg button{border:0; background:#fff; color:var(--muted); padding:9px 16px; font-size:14px; font-weight:500}
.seg button.active{background:var(--ink); color:#fff; font-weight:600}
.statrow{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:16px}
.statbox{border-radius:14px; padding:16px; text-align:center; border:1px solid var(--line); background:#fff}
.statbox .lab{font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:600}
.statbox .val{font-size:28px; font-weight:700; margin-top:4px; letter-spacing:-.5px}
.stat-pay{background:#f0f7ff; border-color:#d6e8fb}  .stat-pay .val{color:var(--brand)}
.stat-do{background:#fafafa}
.stat-profit{background:var(--green-bg); border-color:#d3ecd9} .stat-profit .val{color:var(--green)}
.profitnote{font-size:11.5px; color:var(--green); margin-top:4px; font-weight:500}

/* Step bar */
.stepbar{position:fixed; left:230px; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(255,255,255,.85); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:14px 28px; z-index:30}
.steps{display:flex; align-items:center; gap:10px}
.step{background:none; border:0; color:var(--muted); font-weight:600; font-size:14px; padding:6px 4px}
.step.active{color:var(--ink); border-bottom:2px solid var(--brand)}
.step:disabled{opacity:.4; cursor:not-allowed}
.chev{color:#c7c7cc}
.stepactions{display:flex; gap:8px}

/* Lender table */
.lendertbl th{padding:10px 12px}
.lendertbl td{padding:10px 12px; font-size:14.5px}
.grouprow td{font-size:11px; letter-spacing:.8px; color:var(--muted); text-transform:uppercase; padding:12px; background:#fafafa; font-weight:600}

/* Worksheet charges table */
.chargetbl{width:100%}
.chargetbl th{font-size:11px}
.chargetbl td{padding:10px 8px; font-size:14px}
.chargetbl td:nth-child(2),.chargetbl td:nth-child(3),.chargetbl th:nth-child(2),.chargetbl th:nth-child(3){text-align:right}
.duerow td{border-top:2px solid var(--ink); color:var(--ink); font-size:15px}

/* Worksheet actions menu */
.wsmenu{position:fixed; right:28px; bottom:72px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:8px; z-index:35; box-shadow:0 12px 40px rgba(0,0,0,.15); display:flex; flex-direction:column; min-width:290px}
.wsmenu button{background:none; border:0; color:var(--ink); text-align:left; padding:11px 14px; border-radius:9px; font-size:14.5px; font-weight:500}
.wsmenu button:hover{background:#f5f5f7}

/* Rebate chips */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{display:inline-flex; align-items:center; gap:7px; background:#e8f1fb; color:#0066cc; border-radius:99px; padding:6px 12px; font-size:13px; font-weight:600}
.chip .x{background:none; border:0; color:#0066cc; opacity:.6; font-size:14px; padding:0; line-height:1}
.chip .x:hover{opacity:1}
.rebaterow{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #f0f0f2}
.rebaterow label{flex:1; display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:500; cursor:pointer}
.rebaterow input[type=checkbox]{width:18px; height:18px; accent-color:var(--brand)}
.rebaterow .amt{width:110px; border:1px solid #d2d2d7; border-radius:9px; padding:8px 10px; font-size:14px; text-align:right}
.ibtn{width:19px; height:19px; border-radius:50%; border:1px solid #c7c7cc; background:#fff; color:var(--muted); font-size:11.5px; font-weight:700; font-style:italic; font-family:Georgia,serif; line-height:1; padding:0; flex-shrink:0}
.ibtn:hover{background:var(--brand); color:#fff; border-color:var(--brand)}
.rebinfo{flex-basis:100%; background:#f5f9ff; border:1px solid #d6e8fb; border-radius:10px; padding:10px 13px; font-size:13px; color:#3a5875; line-height:1.5; margin-top:8px}

/* Docs list */
.doclist{list-style:none; padding:0}
.doclist li{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 0; border-bottom:1px solid #f0f0f2; font-size:14px}
.doclist a{color:var(--brand); text-decoration:none; font-weight:500}
.doclist a:hover{text-decoration:underline}
.doclist .rm{background:none;border:0;color:var(--muted);font-size:13px}

/* Client quote page (public) */
.quotewrap{max-width:660px; margin:0 auto; padding:20px}
body.quotepage{background:#f5f5f7; color:#1d1d1f}
.quotepage .qhead{text-align:center; padding:28px 0 20px}
.quotepage .qhead img{max-height:52px; margin-bottom:10px}
.quotepage .qhead .biz{font-size:24px; font-weight:700; letter-spacing:-.4px}
.quotepage .sub{color:#6e6e73}
.qopt{border:1px solid var(--line); border-radius:16px; background:#fff; padding:24px; margin-bottom:16px; position:relative; box-shadow:var(--shadow)}
.qopt.best{border-color:var(--brand)}
.qopt .tag{position:absolute; top:-11px; left:18px; background:var(--brand); color:#fff; font-size:11px; font-weight:700; padding:3px 12px; border-radius:99px}
.qpay{font-size:34px; font-weight:700; color:var(--ink); letter-spacing:-.5px}
.qpay small{font-size:15px; font-weight:500; color:var(--muted)}
.qrow{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid #f0f0f2; font-size:15px}
.qrow span:first-child{color:var(--muted)}
.accepted{background:var(--green-bg); border:1px solid #cde8d4; color:var(--green); padding:16px; border-radius:12px; text-align:center; font-weight:600}
.quotepage .pill{background:#e8f1fb; color:#0066cc}

.banner{background:#fff8e6; border:1px solid #f0dfae; color:#8a6400; padding:10px 16px; border-radius:10px; font-size:13.5px; margin-bottom:18px}
.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:#1d1d1f; color:#fff; padding:12px 22px; border-radius:99px; font-size:14px; font-weight:500; opacity:0; transition:opacity .25s; pointer-events:none; z-index:50; box-shadow:0 6px 24px rgba(0,0,0,.25)}
.toast.show{opacity:1}
.pill{display:inline-block; font-size:11px; font-weight:600; padding:3px 10px; border-radius:99px; background:#e8f1fb; color:#0066cc}
.pill.dealer{background:#f0f0f2; color:#515154}
.backlink{background:none;border:0;color:var(--brand);font-weight:600;padding:0;margin-bottom:16px;font-size:14px}
.modal-bg{position:fixed; inset:0; background:rgba(0,0,0,.3); display:none; align-items:center; justify-content:center; z-index:40}
.modal-bg.open{display:flex}
.modal{background:#fff; border-radius:18px; padding:28px; width:460px; max-width:92vw; max-height:88vh; overflow:auto; box-shadow:0 24px 60px rgba(0,0,0,.2)}

.activity{list-style:none; padding:0}
.activity li{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid #f0f0f2; font-size:13.5px}
.activity .dot{width:9px; height:9px; border-radius:99px; margin-top:5px; flex-shrink:0; background:var(--brand)}
.activity .dot.resp{background:var(--green)}
.activity .when{color:var(--muted); font-size:12px}
.addnote{display:flex; gap:8px; margin-top:12px}
.addnote input{flex:1; border:1px solid #d2d2d7; background:#fff; color:var(--ink); border-radius:10px; padding:9px 12px; font-size:14px}

.loginwrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg)}
.loginbox{background:#fff; border:1px solid var(--line); border-radius:20px; padding:36px; width:380px; box-shadow:0 20px 60px rgba(0,0,0,.08)}
.loginbox h1{margin-bottom:4px}
.err{color:var(--red); font-size:13px; margin-top:8px; min-height:16px}

@media(max-width:1000px){ .board{grid-template-columns:1fr 1fr} .desk{grid-template-columns:1fr} .grid3{grid-template-columns:1fr} .grid6{grid-template-columns:1fr 1fr} .main{padding:18px 18px 120px} .app{flex-direction:column} .sidebar{width:100%; flex-direction:row; align-items:center; padding:10px; gap:2px; border-right:0; border-bottom:1px solid var(--line)} .sidebar .btn.white{width:auto; margin:0 6px} .logo{padding:0 10px; font-size:17px} .sidebar .foot{display:none} .navbtn{padding:10px; font-size:13.5px} h1{font-size:22px} .statrow{grid-template-columns:1fr} .stepbar{left:0; padding:10px 14px; flex-wrap:wrap} }

/* ===== v15 design polish ===== */
.navbtn{position:relative; transition:background .15s ease, color .15s ease}
.navbtn .ic{display:inline-block; transition:transform .15s ease}
.navbtn:hover .ic{transform:scale(1.15)}
.navbtn.active::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--brand); animation:navPop .18s ease}
@keyframes navPop{from{transform:scaleY(0)} to{transform:scaleY(1)}}
.searchbtn{display:flex !important; align-items:center; justify-content:space-between; margin-bottom:10px}
.searchbtn kbd{background:#f0f0f2; border:1px solid #d2d2d7; border-radius:5px; padding:1px 6px; font-size:11px; color:var(--muted); font-family:inherit}
.main{animation:mainFade .16s ease}
@keyframes mainFade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:translateY(0)}}

/* command palette */
.palette-bg{position:fixed; inset:0; background:rgba(29,29,31,.35); backdrop-filter:blur(2px); display:none; align-items:flex-start; justify-content:center; padding-top:12vh; z-index:60}
.palette-bg.open{display:flex}
.palette{width:560px; max-width:92vw; max-height:64vh; background:rgba(255,255,255,.92); backdrop-filter:blur(20px); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.6); overflow:hidden; display:flex; flex-direction:column; animation:paletteIn .16s ease}
@keyframes paletteIn{from{opacity:0; transform:translateY(-8px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)}}
.palette-input{display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line)}
.palette-input .ic{color:var(--muted); font-size:16px}
.palette-input input{flex:1; border:0; outline:0; background:none; font-size:17px; color:var(--ink)}
.palette-results{overflow-y:auto; padding:8px}
.palette-item{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; cursor:pointer}
.palette-item .pi-ic{width:30px; height:30px; border-radius:9px; background:#f0f0f2; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0}
.palette-item .pi-body{flex:1; min-width:0}
.palette-item .pi-label{font-size:14.5px; font-weight:600; color:var(--ink)}
.palette-item .pi-sub{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.palette-item .pi-tag{font-size:11px; color:var(--muted); background:#f0f0f2; border-radius:6px; padding:2px 7px; flex-shrink:0}
.palette-item.sel{background:var(--brand)}
.palette-item.sel .pi-label,.palette-item.sel .pi-sub{color:#fff}
.palette-item.sel .pi-ic{background:rgba(255,255,255,.2)}
.palette-item.sel .pi-tag{background:rgba(255,255,255,.25); color:#fff}
.palette-empty{padding:30px; text-align:center; color:var(--muted); font-size:14px}
.palette-foot{display:flex; gap:14px; padding:10px 16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted)}
.palette-foot kbd{background:#f0f0f2; border:1px solid #d2d2d7; border-radius:5px; padding:1px 6px; font-family:inherit; font-size:11px; margin-right:4px}

/* toast stack */
.toastwrap{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:50; display:flex; flex-direction:column-reverse; gap:8px; align-items:center; pointer-events:none}
.toast-item{display:flex; align-items:center; gap:9px; background:#1d1d1f; color:#fff; padding:12px 18px; border-radius:14px; font-size:14px; font-weight:500; box-shadow:0 10px 30px rgba(0,0,0,.3); position:relative; overflow:hidden; animation:toastIn .22s cubic-bezier(.2,.9,.3,1); max-width:380px; pointer-events:auto; cursor:pointer}
.toast-item.out{animation:toastOut .18s ease forwards}
.toast-item .ti-ic{font-size:15px; flex-shrink:0}
.toast-item .ti-bar{position:absolute; left:0; bottom:0; height:2px; background:rgba(255,255,255,.5); animation:toastShrink 3.2s linear forwards}
.toast-item.success{background:#173d24}
.toast-item.success .ti-bar{background:#3ddc73}
.toast-item.error{background:#3d1717}
.toast-item.error .ti-bar{background:#ff6b6b}
@keyframes toastIn{from{opacity:0; transform:translateY(10px) scale(.95)} to{opacity:1; transform:translateY(0) scale(1)}}
@keyframes toastOut{to{opacity:0; transform:translateY(6px) scale(.95)}}
@keyframes toastShrink{from{width:100%} to{width:0%}}

/* confetti */
.confetti-piece{position:fixed; top:-12px; z-index:70; pointer-events:none; border-radius:2px; animation:confettiFall linear forwards}
@keyframes confettiFall{to{transform:translateY(110vh) rotate(600deg); opacity:.2}}

/* skeleton loading */
.skel{background:linear-gradient(90deg,#eceef1 25%,#f6f7f9 37%,#eceef1 63%); background-size:400% 100%; animation:skelShine 1.4s ease infinite}
@keyframes skelShine{0%{background-position:100% 50%} 100%{background-position:0 50%}}

@media(max-width:1000px){ .searchbtn{display:none !important} .palette{margin-top:0} }