:root {
  --stone-50:#fafaf9; --stone-100:#f5f5f4; --stone-200:#e7e5e4; --stone-300:#d6d3d1;
  --stone-400:#a8a29e; --stone-500:#78716c; --stone-600:#57534e; --stone-700:#44403c;
  --stone-900:#1c1917; --amber-50:#fffbeb; --amber-400:#fbbf24; --amber-500:#f59e0b;
  --amber-600:#d97706; --amber-700:#b45309;
  --emerald-100:#d1fae5; --emerald-700:#047857; --emerald-200:#a7f3d0;
  --red-100:#fee2e2; --red-200:#fecaca; --red-600:#dc2626; --red-700:#b91c1c;
  --sky-100:#e0f2fe; --sky-700:#075985; --orange-100:#ffedd5; --orange-700:#9a3412;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--stone-100); color:var(--stone-900);
  display:flex; justify-content:center;
}
#app { width:100%; max-width:440px; min-height:100vh; background:var(--stone-50);
  box-shadow:0 0 40px rgba(0,0,0,.06); position:relative; padding-bottom:96px; }
header {
  position:sticky; top:0; z-index:10; padding:22px 20px 14px;
  background:rgba(250,250,249,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--stone-200);
  display:flex; align-items:center; gap:10px;
}
.logo { width:36px;height:36px;border-radius:10px;background:var(--stone-900);display:flex;align-items:center;justify-content:center; }
.logo svg{ color:var(--amber-400); }
header h1 { font-size:18px; margin:0; line-height:1; letter-spacing:-.02em; }
header p { font-size:11px; color:var(--stone-500); margin:3px 0 0; line-height:1; }
.body { padding:16px 20px; }
.muted { font-size:11px; font-weight:600; color:var(--stone-400); text-transform:uppercase; letter-spacing:.06em; }

.card { background:#fff; border:1px solid var(--stone-200); border-radius:16px; padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04); width:100%; text-align:left; }
button.card:active { transform:scale(.99); }
.row { display:flex; align-items:center; gap:10px; }
.between { display:flex; align-items:center; justify-content:space-between; }
.iconbox { width:40px;height:40px;border-radius:12px;background:var(--stone-100);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.km { font-family:ui-monospace,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; font-weight:700; letter-spacing:-.02em; }
.kmbig { font-size:30px; }
.unit { font-size:10px; color:var(--stone-400); letter-spacing:.12em; }

.chip { flex:1; border-radius:12px; border:1px solid; padding:8px 10px; }
.chip .lbl { font-size:11px; font-weight:600; opacity:.8; display:flex; align-items:center; gap:4px; }
.chip .val { font-weight:600; font-size:14px; margin-top:2px; }
.chip .dt { font-size:10px; opacity:.7; }
.ok { background:var(--emerald-100); color:var(--emerald-700); border-color:var(--emerald-200); }
.warn { background:var(--amber-50); color:var(--amber-700); border-color:#fde68a; }
.bad { background:var(--red-100); color:var(--red-700); border-color:var(--red-200); }
.neutral { background:var(--stone-100); color:var(--stone-500); border-color:var(--stone-200); }

.badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; }
.badge.man { background:var(--sky-100); color:var(--sky-700); }
.badge.rep { background:var(--orange-100); color:var(--orange-700); }
.tag { font-size:11px; background:var(--stone-100); color:var(--stone-700); padding:2px 8px; border-radius:6px; }

.hero { background:var(--stone-900); color:#fff; border-radius:16px; padding:20px; }
.hero .sub { color:var(--amber-400); font-size:12px; font-weight:500; }
.hero .alias { font-size:24px; font-weight:700; letter-spacing:-.02em; }
.hero .plate { color:var(--stone-400); font-size:14px; }

.btn { display:flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer;
  border-radius:16px; padding:14px; font-size:15px; font-weight:600; font-family:inherit; width:100%; }
.btn:active { transform:scale(.98); }
.btn-dark { background:var(--stone-900); color:#fff; }
.btn-dark svg, .btn-light svg { color:var(--amber-400); }
.btn-light { background:#fff; color:var(--stone-700); border:1px solid var(--stone-200); box-shadow:0 1px 2px rgba(0,0,0,.04); }
.btn-ghost { background:var(--stone-300); color:var(--stone-500); }
.fab { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); width:calc(100% - 40px); max-width:400px;
  box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:20; }

.link { display:flex; align-items:center; gap:4px; font-size:14px; color:var(--stone-500);
  background:none; border:none; cursor:pointer; padding:0; font-family:inherit; }
.tlink { color:var(--amber-600); font-size:12px; font-weight:600; background:none;border:none;cursor:pointer;font-family:inherit; }

input,textarea,select { font-family:inherit; }
.in { width:100%; border:2px solid var(--stone-200); border-radius:16px; padding:14px 16px; font-size:17px; outline:none; }
.in:focus { border-color:var(--amber-400); }
.in-sm { border:1px solid var(--stone-300); border-radius:10px; padding:6px 8px; font-size:14px; }

.opt { width:100%; text-align:left; display:flex; align-items:center; gap:12px; padding:16px;
  border-radius:16px; border:2px solid var(--stone-200); background:#fff; cursor:pointer; font-family:inherit; font-size:15px; }
.opt.sel { border-color:var(--amber-400); background:var(--amber-50); }
.opt:active { transform:scale(.99); }

.check { width:20px;height:20px;border-radius:6px;border:1px solid var(--stone-300);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.check.on { background:var(--amber-400); border-color:var(--amber-400); color:#fff; }

.progress { display:flex; gap:6px; margin-bottom:20px; }
.progress > div { height:6px; flex:1; border-radius:999px; background:var(--stone-200); }
.progress > div.fill { background:var(--amber-400); }

.dash { display:flex; align-items:center; justify-content:center; gap:8px; border:2px dashed var(--stone-300);
  border-radius:16px; padding:24px 16px; font-size:14px; font-weight:600; color:var(--stone-600); cursor:pointer; }
.dash-sm { display:inline-flex; align-items:center; gap:6px; border:1px dashed var(--stone-300); border-radius:10px;
  padding:6px 10px; font-size:12px; color:var(--stone-500); cursor:pointer; }
.attach { display:inline-flex; align-items:center; gap:6px; background:var(--amber-50); border:1px solid #fde68a;
  color:var(--amber-700); padding:6px 10px; border-radius:10px; font-size:12px; text-decoration:none; max-width:100%; }
.attach span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xbtn { width:28px;height:28px;border-radius:10px;border:1px solid var(--stone-200);background:#fff;color:var(--stone-400);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0; }

.spin { animation:spin 1s linear infinite; color:var(--amber-500); }
@keyframes spin { to { transform:rotate(360deg); } }
.center-col { display:flex; flex-direction:column; align-items:center; gap:12px; padding:60px 0; color:var(--stone-500); }
.err { color:var(--red-600); font-size:14px; margin-top:6px; }
.empty { text-align:center; color:var(--stone-400); font-size:14px; padding:32px; border:1px dashed var(--stone-300); border-radius:16px; }
.mt2{margin-top:8px;} .mt3{margin-top:12px;} .mt4{margin-top:16px;} .mt5{margin-top:20px;}
.mb2{margin-bottom:8px;} .mb4{margin-bottom:16px;}
h2.title { font-size:20px; font-weight:700; letter-spacing:-.02em; margin:0 0 16px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.flexcol { display:flex; flex-direction:column; gap:8px; }
.notice { background:var(--amber-50); border:1px solid #fde68a; color:var(--amber-700); font-size:12px;
  padding:10px 12px; border-radius:12px; }