@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');

/* ── Theme Variables ─────────────────────────────────────────────────────── */
#acv-app {
  /* Dark mode (default) */
  --bg:       #0d0d0d;
  --surf:     #161616;
  --surf2:    #1e1e1e;
  --bord:     #252525;
  --bord2:    #1a1a1a;
  --text:     #e2e2e2;
  --text2:    #aaa;
  --muted:    #666;
  --gold:     #C8A96A;
  --golddim:  rgba(200,169,106,.18);
  --blue:     #1a5276;
  --green:    #2d6e35;
  --red:      #8b2020;
  --inp-bg:   #1a1a1a;
  --inp-bord: #2a2a2a;
  --r:        5px;
  --font:     'Source Sans 3','Segoe UI',sans-serif;
  --mono:     'JetBrains Mono','Fira Mono',monospace;
  --shadow:   0 2px 12px rgba(0,0,0,.5);
}

/* ── Light mode overrides ──────────────────────────────────────────────────── */
#acv-app.light-mode {
  --bg:       #f4f6f8;
  --surf:     #ffffff;
  --surf2:    #f0f2f5;
  --bord:     #d8dde3;
  --bord2:    #e8edf2;
  --text:     #1a1a2e;
  --text2:    #555;
  --muted:    #888;
  --gold:     #8B6914;
  --golddim:  rgba(139,105,20,.12);
  --inp-bg:   #ffffff;
  --inp-bord: #c8d0da;
  --shadow:   0 2px 12px rgba(0,0,0,.1);
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}
#acv-app {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--bord);
  border-radius: 8px;
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  transition: background .25s, color .25s;
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.acv-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  background: var(--surf);
  border-bottom: 1px solid var(--bord);
  flex-wrap: wrap;
  gap: 10px;
}
.acv-brand {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--gold);
  display: block;
}
.acv-subtitle { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.acv-topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Live ACV badge ──────────────────────────────────────────────────────── */
.acv-live-val {
  background: var(--surf2);
  border: 1px solid var(--golddim);
  border-radius: var(--r);
  padding: 4px 12px;
  text-align: center;
  margin-right: 4px;
}
.acv-live-label  { display: block; font-size: 8px; color: var(--gold); letter-spacing: .12em; font-family: var(--mono); }
.acv-live-amount { display: block; font-size: 19px; font-weight: 800; color: var(--gold); font-family: 'Playfair Display',serif; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.acv-btn { padding:7px 13px; border:none; border-radius:var(--r); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.05em; cursor:pointer; transition:opacity .15s,transform .1s; white-space:nowrap; }
.acv-btn:hover  { opacity:.85; }
.acv-btn:active { transform:scale(.97); }
.acv-gold  { background:var(--gold); color:#000; }
.acv-dark  { background:var(--surf2); color:var(--text); border:1px solid var(--bord); }
.acv-ghost { background:transparent; color:var(--muted); border:1px solid var(--bord); }

/* ── Status bar ──────────────────────────────────────────────────────────── */
.acv-status { padding:8px 20px; font-size:12px; font-family:var(--mono); border-bottom:1px solid; }
.acv-status.ok  { background:#0a1f0a; border-color:#2a6e2a; color:#5c5; }
.acv-status.err { background:#1f0a0a; border-color:#6e2a2a; color:#e66; }
#acv-app.light-mode .acv-status.ok  { background:#e8f5e9; border-color:#4caf50; color:#1b5e20; }
#acv-app.light-mode .acv-status.err { background:#fdecea; border-color:#ef5350; color:#b71c1c; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.acv-tabs { display:flex; background:var(--surf); border-bottom:1px solid var(--bord); overflow-x:auto; padding-left:4px; }
.acv-tab  { padding:10px 16px; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; background:transparent; border:none; border-bottom:2px solid transparent; color:var(--muted); cursor:pointer; white-space:nowrap; transition:color .15s,border-color .15s; }
.acv-tab.active, .acv-tab:hover { color:var(--gold); }
.acv-tab.active { border-bottom-color:var(--gold); }
.acv-badge { display:inline-block; background:var(--gold); color:#000; font-size:9px; border-radius:9px; padding:1px 5px; margin-left:4px; vertical-align:middle; }

/* ── Panels ──────────────────────────────────────────────────────────────── */
.acv-panel { display:none; padding:20px; }
.acv-panel.active { display:block; }

/* ── Section titles ──────────────────────────────────────────────────────── */
.acv-section-title {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--bord);
  padding-bottom: 5px;
  margin: 16px 0 10px;
}

/* ── Fields ──────────────────────────────────────────────────────────────── */
.acv-row  { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:4px; }
.acv-field { display:flex; flex-direction:column; }
.acv-half { flex:0 0 calc(50% - 7px); min-width:150px; }
.acv-third { flex:0 0 calc(33.33% - 9px); min-width:130px; }
.acv-full { flex:0 0 100%; }
.acv-lbl  { font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.acv-inp  { background:var(--inp-bg); border:1px solid var(--inp-bord); border-radius:var(--r); color:var(--text); padding:8px 10px; font-size:13px; font-family:var(--font); width:100%; transition:border-color .15s; outline:none; }
.acv-inp:focus { border-color:var(--gold); }
.acv-textarea  { min-height:80px; resize:vertical; line-height:1.5; width:100%; }
.acv-calc-display { background:var(--surf2); border:1px solid var(--bord); border-radius:var(--r); padding:7px 10px; font-size:13px; color:var(--gold); font-family:var(--mono); font-weight:700; }

/* ── VIN row ─────────────────────────────────────────────────────────────── */
.acv-vin-row { display:flex; gap:10px; align-items:flex-end; margin-bottom:8px; }
.acv-vin-inp { font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; }

/* ── VIN result card ────────────────────────────────────────────────────── */
.vin-card { background:var(--surf); border:1px solid var(--bord); border-radius:6px; margin-bottom:12px; overflow:hidden; }
.vin-card-hdr { display:flex; align-items:center; justify-content:space-between; padding:9px 14px; background:var(--surf2); cursor:pointer; border-bottom:1px solid var(--bord); user-select:none; }
.vin-card-hdr-title { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text2); }
.vin-card-hdr span  { color:var(--muted); font-size:12px; }
.vin-card-body { padding:12px 14px; }
.data-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; }
.dcl { font-size:10px; color:var(--muted); font-family:var(--mono); }
.dcv { font-size:12px; color:var(--text); font-weight:600; padding-bottom:4px; border-bottom:1px solid var(--bord2); }
@media(max-width:500px){.data-grid{grid-template-columns:1fr;}}

/* ── Photo upload zone ───────────────────────────────────────────────────── */
.acv-photo-zone {
  border:2px dashed var(--bord);
  border-radius:6px;
  background:var(--surf2);
  min-height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  cursor:pointer;
  transition:border-color .2s, background .2s;
  position:relative;
  overflow:hidden;
}
.acv-photo-zone:hover, .acv-photo-zone.drag-over { border-color:var(--gold); background:var(--surf); }
.photo-placeholder {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--muted);
  pointer-events:none;
}
.photo-placeholder-icon { font-size:36px; }
.photo-placeholder-text { font-size:13px; font-weight:600; }
.photo-placeholder-hint { font-size:11px; color:var(--bord); }
.photo-preview-wrap {
  display:none;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:12px;
  width:100%;
}
#photo-preview { max-width:100%; max-height:260px; border-radius:4px; object-fit:contain; box-shadow:var(--shadow); }

/* ── Comparables table ───────────────────────────────────────────────────── */
.acv-table-wrap { overflow-x:auto; }
.acv-table { width:100%; border-collapse:collapse; font-size:12px; }
.acv-table th { background:var(--surf2); font-family:var(--mono); font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); padding:8px 10px; text-align:left; border-bottom:1px solid var(--bord); }
.acv-table td { padding:4px 6px; border-bottom:1px solid var(--bord2); }
.acv-table tr:nth-child(even) td { background:var(--surf2); }
.acv-table td .acv-inp { padding:5px 8px; font-size:12px; }
.comp-num { color:var(--muted); font-family:var(--mono); font-size:11px; padding:6px 10px; text-align:center; }
.acv-stats-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.acv-stat { background:var(--surf2); border:1px solid var(--bord); border-radius:var(--r); padding:8px 12px; text-align:center; min-width:90px; }
.acv-stat-l { font-size:9px; color:var(--muted); font-family:var(--mono); text-transform:uppercase; letter-spacing:.07em; display:block; }
.acv-stat-v { font-size:13px; font-weight:700; color:var(--text); display:block; margin-top:2px; }

/* ── Condition rows ──────────────────────────────────────────────────────── */
.acv-cond-row { display:flex; align-items:flex-start; gap:10px; padding:9px 12px; background:var(--surf2); border:1px solid var(--bord); border-radius:var(--r); margin-bottom:7px; }
.acv-cond-name { flex:0 0 110px; font-family:var(--mono); font-size:11px; font-weight:700; color:var(--text2); padding-top:4px; }
.acv-grade-btns { display:flex; gap:5px; margin-bottom:4px; align-items:center; }
.acv-g { width:30px; height:26px; border:none; border-radius:4px; cursor:pointer; font-weight:800; font-size:12px; background:var(--surf); color:var(--muted); transition:all .15s; }
.acv-g.s5{background:#2d6e35;color:#fff;} .acv-g.s4{background:#4a7a2e;color:#fff;}
.acv-g.s3{background:#8a6e18;color:#fff;} .acv-g.s2{background:#8a4018;color:#fff;}
.acv-g.s1{background:#7a1818;color:#fff;}
.acv-grade-lbl { font-size:10px; font-weight:700; margin-left:6px; }
.acv-cond-desc { font-size:10px; color:var(--muted); line-height:1.4; }

/* ── Calc breakdown ──────────────────────────────────────────────────────── */
#calc-breakdown { background:var(--surf2); border:1px solid var(--bord); border-radius:6px; padding:0; overflow:hidden; margin-top:10px; }
.calc-row { display:flex; justify-content:space-between; padding:7px 14px; border-bottom:1px solid var(--bord2); font-size:12px; }
.calc-row:last-child { border-bottom:none; }
.calc-row.hdr { background:var(--surf); font-family:var(--mono); font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.calc-row.total { background:var(--surf); border-top:2px solid var(--gold); font-weight:800; font-size:14px; color:var(--gold); }
.calc-row.sub { font-size:11px; color:var(--text2); }
.pos { color:#4a7a2e; } #acv-app.light-mode .pos { color:#1b5e20; }
.neg { color:#8a4018; } #acv-app.light-mode .neg { color:#b71c1c; }

/* ── Custom adj rows ─────────────────────────────────────────────────────── */
.cadj-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }

/* ── Summary box ─────────────────────────────────────────────────────────── */
.acv-summary-box { background:var(--surf2); border:1px solid var(--golddim); border-radius:7px; padding:20px 22px; margin-top:16px; }
.acv-sum-lbl { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
.acv-sum-val { font-family:'Playfair Display',serif; font-size:34px; font-weight:700; color:var(--gold); }
.acv-sum-note { font-size:11px; color:var(--muted); margin-top:4px; }

/* ── Files ───────────────────────────────────────────────────────────────── */
.acv-file-row { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--surf2); border:1px solid var(--bord); border-radius:var(--r); margin-bottom:7px; }
.acv-file-row:hover { border-color:var(--bord2); }
.acv-file-num  { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--text); }
.acv-file-meta { font-size:10px; color:var(--muted); margin-top:2px; }
.acv-file-btn  { background:var(--surf); color:var(--gold); border:1px solid var(--golddim); border-radius:4px; padding:5px 12px; font-size:11px; font-family:var(--mono); cursor:pointer; }
.acv-no-files  { color:var(--muted); font-family:var(--mono); font-size:12px; padding:20px 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:640px){
  .acv-half,.acv-third { flex:0 0 100%; }
  .acv-topbar { flex-direction:column; align-items:flex-start; }
  .acv-vin-row { flex-direction:column; align-items:stretch; }
  .acv-vin-row button { margin-top:0!important; width:100%; }
  .acv-topbar-right { width:100%; justify-content:flex-start; }
}