:root{--bg:#ffffff;--panel:#ffffff;--line:#9ca3af;--line-strong:#4b5563;--text:#111827;--muted:#6b7280;--accent:#f5b942}
.car-note-tool{background:var(--bg);padding:22px;border-radius:12px;border:2px solid var(--line-strong);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.car-note-tool .wrap{max-width:1100px;margin:auto}
.car-note-tool .title{margin-top:0}
.car-note-tool .grid{display:grid;gap:16px;grid-template-columns:1.1fr 1fr}
.car-note-tool .card{background:var(--panel);border:1.5px solid var(--line-strong);border-radius:12px;padding:14px}
.car-note-tool .h2{margin:.2rem 0 .6rem;font-size:22px}
.car-note-tool .row{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;align-items:center;margin:8px 0}
.car-note-tool .row.full{grid-template-columns:1fr}
.car-note-tool label{color:var(--muted);font-weight:600}
.car-note-tool input[type=number], .car-note-tool select{width:100%;padding:10px;border-radius:10px;border:1.5px solid var(--line-strong);background:#fff;color:var(--text)}
.car-note-tool input[type=range]{width:100%}
.car-note-tool .btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.car-note-tool button{padding:9px 12px;border-radius:10px;border:1.5px solid var(--line-strong);background:#111827;color:#fff;cursor:pointer}
.car-note-tool button.primary{background:var(--accent);color:#1b1b1b;border-color:#c4932f;font-weight:800}
.car-note-tool hr{border:none;border-top:1px solid var(--line);margin:10px 0}
.car-note-tool .note{font-size:12px;color:var(--muted)}
.car-note-tool .top{margin:-6px 0 12px}
.car-note-tool .bottom{margin-top:10px}
:root{
  --otd:#2563eb; --otd-bg:#dbeafe; --otd-text:#1e3a8a;
  --fin:#7c3aed; --fin-bg:#ede9fe; --fin-text:#4c1d95;
  --mon:#16a34a; --mon-bg:#dcfce7; --mon-text:#14532d;
  --bi:#0ea5a4;  --bi-bg:#ccfbf1;  --bi-text:#134e4a;
  --need:#f59e0b; --need-bg:#fef3c7; --need-text:#7c2d12;
  --needb:#ef4444; --needb-bg:#fee2e2; --needb-text:#7f1d1d;
}
.car-note-tool .kpi{position:relative;background:#fafafa;border:1.5px solid var(--line-strong);border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:0 1px 0 rgba(17,24,39,.05), 0 0 0 3px rgba(17,24,39,.02) inset}
.car-note-tool .kpi h3{margin:.2rem 0 .2rem;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.car-note-tool .big{font-weight:900;font-size:28px;margin:6px 0;display:inline-block;padding:6px 12px;border-radius:10px}
.car-note-tool .kpi--otd .big{background:var(--otd-bg);color:var(--otd-text);box-shadow:0 0 0 2px var(--otd) inset}
.car-note-tool .kpi--fin .big{background:var(--fin-bg);color:var(--fin-text);box-shadow:0 0 0 2px var(--fin) inset}
.car-note-tool .kpi--mon .big{background:var(--mon-bg);color:var(--mon-text);box-shadow:0 0 0 2px var(--mon) inset}
.car-note-tool .kpi--bi .big{background:var(--bi-bg);color:var(--bi-text);box-shadow:0 0 0 2px var(--bi) inset}
.car-note-tool .kpi--need .big{background:var(--need-bg);color:var(--need-text);box-shadow:0 0 0 2px var(--need) inset}
.car-note-tool .kpi--needb .big{background:var(--needb-bg);color:var(--needb-text);box-shadow:0 0 0 2px var(--needb) inset}
.car-note-tool .kpi .sub{font-size:12px;color:var(--muted);margin-top:2px}
.car-note-tool .table-card{margin-top:16px}
.car-note-tool .tablewrap{max-height:420px;overflow:auto;border:2px solid var(--line-strong);border-radius:12px}
.car-note-tool table{width:100%;border-collapse:separate;border-spacing:0}
.car-note-tool thead th{position:sticky;top:0;background:#111827;color:#f9fafb;border-bottom:2px solid var(--line-strong);font-size:13px;text-align:right;padding:10px}
.car-note-tool thead th:first-child,.car-note-tool tbody td:first-child{text-align:center}
.car-note-tool tbody td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:right;font-variant-numeric:tabular-nums}
.car-note-tool tbody tr:nth-child(2n){background:#fbfbfb}
@media (max-width:900px){.car-note-tool .grid{grid-template-columns:1fr}}