/* MotorFlip — light, Shopify-admin-inspired. One stylesheet for the app and the sign-in pages. */
:root {
  --bg:#f1f1f1; --sidebar:#ebebeb; --surface:#fff; --surface-2:#f7f7f7; --surface-3:#f3f3f3; --hover:#f7f7f7;
  --border:#e3e3e3; --border-2:#ebebeb; --border-strong:#cccccc;
  --text:#303030; --muted:#616161; --faint:#8a8a8a;
  --primary:#303030; --primary-top:#3b3b3b; --primary-hover:#1a1a1a; --on-primary:#fff; --link:#005bd3; --focus:#005bd3;
  --tint:rgba(0,0,0,.05); --nav-hover:rgba(255,255,255,.6); --me-bg:rgba(255,255,255,.55); --avatar-bg:#d4e3ff; --avatar-text:#0a3e8c;
  --success:#29845a; --success-bg:#cdfee1; --success-text:#0c5132;
  --warning-bg:#ffef9d; --warning-text:#4f4700; --warning-strong:#b98900;
  --critical:#c70a24; --critical-bg:#fee9e8; --critical-text:#8e0b21;
  --info-bg:#eaf4ff; --info-text:#00527c;
  --chart-1:#2c6ecb; --chart-2:#e3a008; --dim:#c9c9c9;
  --radius:12px; --radius-sm:8px;
  --card-shadow:0 1px 0 rgba(26,26,26,.07), 0 0 0 1px rgba(26,26,26,.06);
  --pop-shadow:0 8px 24px rgba(26,26,26,.14), 0 0 0 1px rgba(26,26,26,.06);
  --btn-shadow:inset 0 -1px 0 rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.1), 0 1px 0 rgba(0,0,0,.05);
  --font:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme:light;
}

/* Appearance (Settings → Appearance, public/js/theme.js sets these attributes on <html>).
   MotorFlip brand: navy #0B1220, mint #2EE58A, green #0EA360 (from the logo). The default accent. */
:root { --brand-navy:#0B1220; --brand-mint:#2EE58A; --brand-green:#0EA360; --brand-mint-bg:#dcfbec; }
:root[data-accent="motorflip"] { --primary:#0B1220; --primary-top:#1c2639; --primary-hover:#000; --on-primary:#fff; }
:root[data-theme="dark"][data-accent="motorflip"] { --primary:#2EE58A; --primary-top:#52eba0; --primary-hover:#5ff0a9; --on-primary:#0B1220; }
:root[data-accent="blue"]   { --primary:#005bd3; --primary-top:#2a76e0; --primary-hover:#004299; --on-primary:#fff; }
:root[data-accent="green"]  { --primary:#008060; --primary-top:#14936f; --primary-hover:#006e52; --on-primary:#fff; }
:root[data-accent="purple"] { --primary:#6e3fd9; --primary-top:#8057e0; --primary-hover:#5a2fc0; --on-primary:#fff; }
:root[data-accent="orange"] { --primary:#c4510a; --primary-top:#d46420; --primary-hover:#a84405; --on-primary:#fff; }
:root[data-theme="dark"] {
  --brand-mint-bg:#123d29;
  --bg:#1a1a1a; --sidebar:#141414; --surface:#262626; --surface-2:#2d2d2d; --surface-3:#353535; --hover:#2f2f2f;
  --border:#3a3a3a; --border-2:#323232; --border-strong:#4d4d4d;
  --text:#e9e9e9; --muted:#acacac; --faint:#808080; --link:#7cb2ff; --focus:#7cb2ff;
  --success:#4cc38a; --success-bg:#12351f; --success-text:#93e2b8;
  --warning-bg:#3b3212; --warning-text:#f2da86; --warning-strong:#e2b43c;
  --critical:#ff6b6b; --critical-bg:#3f1719; --critical-text:#ffb4b4;
  --info-bg:#14304a; --info-text:#a6d0ff;
  --chart-1:#5c9cff; --chart-2:#f0b429; --dim:#5a5a5a;
  --tint:rgba(255,255,255,.07); --nav-hover:rgba(255,255,255,.06); --me-bg:rgba(255,255,255,.05); --avatar-bg:#24426e; --avatar-text:#cfe1ff;
  --card-shadow:0 0 0 1px rgba(255,255,255,.07); --pop-shadow:0 8px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  --btn-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 1px 0 rgba(0,0,0,.3);
  color-scheme:dark;
}
:root[data-theme="dark"][data-accent="graphite"] { --primary:#e3e3e3; --primary-top:#f2f2f2; --primary-hover:#fff; --on-primary:#1a1a1a; }
:root[data-theme="dark"] select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%23acacac' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root[data-density="compact"] body { font-size:12.5px; }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; background:var(--bg); }
body { margin:0; font:13px/1.5 var(--font); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; }
h1, h2, h3 { margin:0; line-height:1.3; color:var(--text); }
h1 { font-size:20px; font-weight:700; letter-spacing:-.01em; }
h2 { font-size:14px; font-weight:650; }
h3 { font-size:12px; font-weight:650; color:var(--muted); margin:18px 0 8px; }
h2 small { font-size:12px; font-weight:500; color:var(--faint); margin-left:4px; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.sub { color:var(--muted); margin:2px 0 0; }
.hint { color:var(--muted); font-size:12.5px; margin:10px 0 0; }
.fine { color:var(--faint); font-size:12px; margin:0; }
.err { color:var(--critical); white-space:pre-wrap; }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
.scroll { overflow-x:auto; }
:focus-visible { outline:2px solid var(--focus); outline-offset:1px; border-radius:4px; }

/* ── Buttons & links ─────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:32px; padding:0 12px; border:0; border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); font:inherit; font-weight:600; cursor:pointer; white-space:nowrap; box-shadow:var(--btn-shadow);
  text-decoration:none !important; transition:background .12s; }
.btn:hover:not(:disabled) { background:var(--hover); }
.btn:active:not(:disabled) { background:var(--surface-3); box-shadow:inset 0 1px 2px rgba(0,0,0,.15); }
.btn.primary { background:linear-gradient(var(--primary-top), var(--primary)); color:var(--on-primary); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.2); }
.btn.primary:hover:not(:disabled) { background:var(--primary-hover); }
.btn.danger { background:var(--critical); color:#fff; box-shadow:inset 0 -1px 0 rgba(0,0,0,.25); }
.btn.sm { height:28px; padding:0 10px; font-size:12.5px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.busy::before { content:''; width:12px; height:12px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.icon-btn { display:inline-grid; place-items:center; width:30px; height:30px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--muted); cursor:pointer; }
.icon-btn:hover { background:var(--tint); color:var(--text); }
.icon-btn svg { width:18px; height:18px; }
.link, .linkbtn { color:var(--link); font-weight:550; font-size:13px; background:none; border:0; padding:0; cursor:pointer; font-family:inherit; }
.linkbtn:hover { text-decoration:underline; }

/* ── Form fields ─────────────────────────────────────────────────────────── */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url], input[type=time], input[type=date], input[type=datetime-local], select {
  height:32px; padding:0 10px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface);
  color:var(--text); font:inherit; width:100%; min-width:0; }
input::placeholder { color:var(--faint); }
input:focus, select:focus { outline:none; border-color:var(--focus); box-shadow:0 0 0 1px var(--focus); }
select { appearance:none; padding-right:28px; background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%23616161' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 6px center / 16px; }
.field { display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--text); font-weight:500; }
.field > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.field.compact { min-width:240px; }
.affix { display:flex; align-items:center; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); height:32px; }
.affix:focus-within { border-color:var(--focus); box-shadow:0 0 0 1px var(--focus); }
.affix i { font-style:normal; color:var(--faint); padding:0 2px 0 10px; } .affix i:last-child { padding:0 10px 0 2px; }
.affix input { border:0; box-shadow:none !important; height:30px; padding-left:4px; background:transparent; }
.check { display:flex; align-items:center; gap:8px; font-size:13px; grid-column:1 / -1; }
.check input { width:16px; height:16px; accent-color:var(--primary); }
.form-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; margin-top:12px; }
.form-grid.two { grid-template-columns:1fr 1fr; }
label.stack { display:flex; flex-direction:column; gap:4px; margin:12px 0; font-size:13px; font-weight:500; }

/* ── App shell: sidebar + main ───────────────────────────────────────────── */
.shell { display:grid; grid-template-columns:240px minmax(0, 1fr); min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:12px; padding:14px 10px; background:var(--sidebar); border-right:1px solid var(--border); }
.logo { display:flex; align-items:center; gap:9px; padding:4px 8px 10px; font-weight:700; font-size:15px; color:var(--text); text-decoration:none !important; }
.logo-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--primary); color:var(--on-primary); font-size:12px; letter-spacing:-.02em; }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav a, .nav-btn { display:flex; align-items:center; gap:10px; height:32px; padding:0 8px; border-radius:var(--radius-sm); color:var(--text);
  font-weight:550; text-decoration:none !important; border:0; background:none; font-family:inherit; font-size:13px; cursor:pointer; width:100%; }
.nav a svg, .nav-btn svg { color:var(--muted); width:18px; height:18px; }
.nav a:hover, .nav-btn:hover { background:var(--nav-hover); }
.nav a.on { background:var(--surface); box-shadow:var(--card-shadow); font-weight:650; }
.nav a.on svg { color:var(--text); }
.nav-count { margin-left:auto; font-size:11.5px; font-weight:600; color:var(--muted); }
.sidebar-foot { margin-top:auto; display:flex; flex-direction:column; gap:6px; }
.me { display:flex; align-items:center; gap:8px; padding:8px; border-radius:var(--radius-sm); background:var(--me-bg); }
.me-text { display:flex; flex-direction:column; min-width:0; flex:1; }
.me-text b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--avatar-bg); color:var(--avatar-text); font-weight:700; font-size:12px; flex:none; }
.avatar.sm { width:28px; height:28px; font-size:11.5px; }
.badge { align-self:flex-start; font-size:11px; font-weight:600; padding:0 6px; border-radius:6px; background:var(--surface-3); color:var(--muted); }
.main { min-width:0; display:flex; flex-direction:column; }
.mobile-bar { display:none; }
.page { width:100%; max-width:1180px; margin:0 auto; padding:24px 28px 64px; }

/* ── Page layout ─────────────────────────────────────────────────────────── */
.page-header { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.back { display:inline-flex; align-items:center; gap:2px; margin:-6px 0 10px -4px; color:var(--muted); font-weight:550; text-decoration:none !important; }
.back:hover { color:var(--text); }
.back svg { width:16px; height:16px; }
.layout-2 { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:16px; align-items:start; }
.layout-even { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; align-items:start; }
.layout-3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; align-items:start; }
.col-main, .col-side { display:flex; flex-direction:column; gap:16px; min-width:0; }
.card { background:var(--surface); border-radius:var(--radius); box-shadow:var(--card-shadow); padding:16px; margin-bottom:16px; }
.col-main > .card, .col-side > .card, .layout-even > .card, .layout-3 > .card { margin-bottom:0; }
.layout-even, .layout-3, .layout-2 { margin-bottom:16px; }
.card.flush { padding:0; overflow:hidden; }
.card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.card.flush > .card-header { padding:14px 16px 10px; margin:0; }
.card-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--border-2); }
.card > .btn:last-child { margin-top:12px; }
.notice { background:var(--warning-bg); color:var(--warning-text); border-radius:var(--radius-sm); padding:10px 12px; font-size:13px; margin:0 0 12px; }
.notice.inset { margin:0 16px 12px; }

/* ── Metrics ─────────────────────────────────────────────────────────────── */
.metrics { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin-bottom:16px; }
.kpi, a.metric { display:block; background:var(--surface); border-radius:var(--radius); box-shadow:var(--card-shadow); padding:14px 16px; color:var(--text); text-decoration:none !important; }
a.metric:hover { background:var(--hover); }
.kpi span, a.metric span { display:block; font-size:12.5px; color:var(--muted); font-weight:550; }
.kpi b, a.metric b { display:block; font-size:22px; font-weight:700; letter-spacing:-.01em; margin-top:4px; font-variant-numeric:tabular-nums; }
.kpi small, a.metric small { display:block; color:var(--faint); font-size:12px; margin-top:2px; }
.kpi.good b, a.metric.good b { color:var(--success); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.pill { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:550; padding:1px 8px; border-radius:var(--radius-sm); background:var(--surface-3); color:var(--muted); white-space:nowrap; }
.pill.deal-p, .pill.conf-high { background:var(--success-bg); color:var(--success-text); }
.pill.project-p, .pill.conf-mid { background:var(--warning-bg); color:var(--warning-text); }
.pill.conf-low { background:var(--critical-bg); color:var(--critical-text); }
.pill.info { background:var(--info-bg); color:var(--info-text); }

/* ── Index tables ────────────────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.index-table th { background:var(--surface-2); color:var(--muted); font-size:12px; font-weight:550; text-align:right; padding:8px 12px; border-bottom:1px solid var(--border-2); white-space:nowrap; }
.index-table td { padding:10px 12px; border-bottom:1px solid var(--border-2); text-align:right; white-space:nowrap; }
.index-table th:first-child, .index-table td:first-child { text-align:left; padding-left:16px; }
.index-table th:last-child, .index-table td:last-child { padding-right:16px; }
.index-table tr:last-child td { border-bottom:0; }
.index-table td.l, .index-table th.l { text-align:left; }
.index-table tr.row-link { cursor:pointer; }
.index-table tr.row-link:hover td { background:var(--hover); }
.index-table td.wrap { white-space:normal; min-width:240px; }
.index-table td.nowrap { white-space:nowrap; }
.car-cell { display:flex; flex-direction:column; min-width:220px; max-width:420px; white-space:normal; }
.car-cell b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.car-cell small { color:var(--muted); font-size:12px; }
.num-strong { font-weight:650; }
.pos-text { color:var(--success); font-weight:650; }
.table-foot { display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; padding:10px; border-top:1px solid var(--border-2); text-align:center; }
.table-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid var(--border-2); }
.table-toolbar input[type=search] { max-width:340px; }
.table-toolbar select { width:auto; }
table.kv th { width:220px; text-align:left; background:none; font-size:13px; color:var(--muted); border-bottom:1px solid var(--border-2); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tabs { display:flex; gap:4px; flex-wrap:wrap; }
.tabs button { border:0; background:transparent; color:var(--muted); font:inherit; font-weight:600; height:30px; padding:0 10px; border-radius:var(--radius-sm); cursor:pointer; }
.tabs button:hover { background:var(--tint); color:var(--text); }
.tabs button.on { background:var(--surface-3); color:var(--text); }
.tabs .count { font-size:12px; color:var(--faint); margin-left:3px; font-weight:550; }
.page-tabs { margin-bottom:14px; }
.tabs-row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 12px; border-bottom:1px solid var(--border-2); }
.sort { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12.5px; font-weight:500; }
.sort select { width:auto; height:28px; }
.filterbar { display:grid; grid-template-columns:repeat(4, minmax(120px, 170px)) 1fr; align-items:end; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border-2); }
.filter-note { color:var(--faint); font-size:12px; justify-self:end; align-self:center; }
.kind-hint { color:var(--muted); font-size:12.5px; margin:0; padding:10px 16px 8px; }

/* ── Home ────────────────────────────────────────────────────────────────── */
.list .list-row { display:flex; align-items:center; gap:12px; padding:11px 16px; border-top:1px solid var(--border-2); color:var(--text); text-decoration:none !important; }
.list .list-row:hover { background:var(--hover); }
.list-row .grow { flex:1; min-width:0; }
.list-row .grow b { display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-row .grow small { color:var(--muted); font-size:12px; }
.list-row .right { text-align:right; white-space:nowrap; }
.list-row .right small { display:block; color:var(--muted); font-size:12px; }
.list-empty { padding:14px 16px; color:var(--muted); border-top:1px solid var(--border-2); }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chips span { padding:3px 10px; border-radius:999px; background:var(--surface-3); font-size:12.5px; font-weight:500; }
.stat-rows div { display:flex; justify-content:space-between; gap:8px; padding:5px 0; }
.stat-rows div span { color:var(--muted); }
.stat-rows div b { font-weight:600; }
.setup { border:1px solid var(--border); }
.setup-progress { font-size:12px; color:var(--muted); font-weight:550; white-space:nowrap; }
.setup-steps { list-style:none; padding:0; margin:4px 0 0; display:flex; flex-direction:column; gap:2px; }
.setup-steps li { display:flex; align-items:flex-start; gap:12px; padding:10px; border-radius:var(--radius-sm); }
.setup-steps li.current { background:var(--surface-2); }
.setup-steps .tick { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; border:1.5px dashed var(--border-strong); flex:none; margin-top:1px; }
.setup-steps li.done .tick { background:var(--primary); border:0; color:var(--on-primary); }
.setup-steps .tick svg { width:14px; height:14px; stroke-width:2.4; }
.setup-steps b { display:block; font-weight:600; }
.setup-steps li.done b { color:var(--muted); font-weight:550; }
.setup-steps p { margin:2px 0 8px; color:var(--muted); }

/* ── Deal page ───────────────────────────────────────────────────────────── */
.deal-title { display:flex; flex-direction:column; gap:6px; }
.deal-title .badges { display:flex; gap:6px; flex-wrap:wrap; }
.price-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.price-grid div span { display:block; font-size:12.5px; color:var(--muted); font-weight:550; }
.price-grid div b { display:block; font-size:19px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums; }
.price-grid div small { display:block; color:var(--faint); font-size:12px; }
.price-grid .profit b { color:var(--success); }
.gauge { position:relative; height:8px; margin:16px 0 4px; border-radius:4px; background:var(--surface-3); overflow:hidden; }
.gauge i { position:absolute; inset:0 auto 0 0; border-radius:4px; background:var(--success); }
.gauge.project i { background:var(--warning-strong); }
.gauge-labels { display:flex; justify-content:space-between; font-size:12px; color:var(--faint); }
.adtext { white-space:pre-wrap; color:var(--muted); max-height:340px; overflow:auto; margin:6px 0 0; }
.defect-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.kv-list div { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--border-2); }
.kv-list div:last-child { border-bottom:0; }
.kv-list span { color:var(--muted); } .kv-list b { font-weight:550; text-align:right; }

/* ── Effects / comparables / estimate ────────────────────────────────────── */
.effects { list-style:none; padding:0; margin:8px 0 0; }
.effects li { display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--border-2); }
.effects li:last-child { border-bottom:0; }
.effects .pos { color:var(--success); font-weight:600; } .effects .neg { color:var(--critical); font-weight:600; } .effects .zero { color:var(--faint); }
a.src { font-size:11px; color:var(--faint); margin-left:4px; }
.hb-row { display:flex; justify-content:space-between; gap:8px; padding:4px 0; }
.hb-row b.big { font-size:18px; } .hb-row small { color:var(--muted); font-weight:500; }
.comp-list { list-style:none; padding:0; margin:8px 0 0; }
.comp-list li { display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--border-2); }
.comp-list li > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.est-result { margin-top:16px; padding-top:14px; border-top:1px solid var(--border-2); }
.est-price { font-size:28px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.est-range { position:relative; height:8px; border-radius:4px; background:var(--surface-3); margin:10px 0 4px; }
.est-range i { position:absolute; top:0; bottom:0; background:var(--avatar-bg); border-radius:4px; }
.est-range b { position:absolute; top:-3px; width:3px; height:14px; background:var(--chart-1); border-radius:2px; transform:translateX(-50%); }
.est-range-labels { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.haggle-result { padding:4px 0; }
.prices-grid { display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:16px; align-items:start; }
.prices-main { min-width:0; }
.estimator { position:sticky; top:16px; margin-bottom:0; }
.options-box { grid-column:1 / -1; border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px 10px; margin:0; }
.options-box legend { font-size:12.5px; color:var(--muted); font-weight:550; padding:0 4px; }
#esOptions { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
#esOptions label { display:flex; gap:6px; align-items:center; font-size:12.5px; }
#esOptions input { accent-color:var(--primary); }
ul.sources { margin:8px 0 0; padding-left:18px; font-size:12.5px; color:var(--muted); }
ul.sources li { margin:3px 0; }
.routing { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }

/* ── Charts / lists ──────────────────────────────────────────────────────── */
canvas { width:100%; height:300px; display:block; margin-top:10px; }
.legend { display:flex; gap:14px; font-size:12px; color:var(--muted); margin-top:8px; flex-wrap:wrap; }
.legend i { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.legend i.line { width:14px; height:2px; border-radius:0; background:var(--text); }
.toplist { margin-top:10px; display:flex; flex-direction:column; gap:4px; }
.toprow { position:relative; display:flex; justify-content:space-between; gap:8px; padding:5px 10px; border-radius:6px; overflow:hidden; font-size:12.5px; }
.toprow span { position:relative; z-index:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.toprow b { position:relative; z-index:1; font-weight:600; font-variant-numeric:tabular-nums; }
.toprow i { position:absolute; inset:0 auto 0 0; background:var(--surface-3); }
.bars { display:flex; align-items:stretch; gap:6px; height:180px; margin-top:12px; }
.barcol { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.barstack { position:relative; flex:1; width:100%; background:var(--surface-2); border-radius:4px; }
.barstack i { position:absolute; bottom:0; border-radius:3px 3px 0 0; }
.barstack i.v { left:15%; right:15%; background:var(--chart-1); opacity:.3; }
.barstack i.u { left:32%; right:32%; background:var(--success); }
.barcol span { font-size:11px; color:var(--faint); }
.live-list { margin-top:10px; display:flex; flex-direction:column; gap:10px; max-height:220px; overflow:auto; }
.live-row { display:flex; gap:10px; align-items:flex-start; } .live-row .dot { margin:6px 0 0; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--success); margin-left:6px; box-shadow:0 0 0 3px var(--success-bg); }
.who { display:flex; align-items:center; gap:10px; }
.muted-row td { opacity:.55; }
.menu { position:relative; display:inline-block; }
.menu summary { list-style:none; } .menu summary::-webkit-details-marker { display:none; }
.menu-list { position:absolute; right:0; top:calc(100% + 4px); z-index:20; min-width:200px; padding:6px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--pop-shadow); display:flex; flex-direction:column; }
.menu-list button { text-align:left; border:0; background:none; color:var(--text); font:inherit; padding:7px 10px; border-radius:6px; cursor:pointer; }
.menu-list button:hover { background:var(--hover); }
.danger-text { color:var(--critical) !important; }

/* ── Data page ───────────────────────────────────────────────────────────── */
.presets { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.presets button { display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:12px 14px; text-align:left; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); font:inherit; }
.presets button:hover { background:var(--hover); }
.presets button.on { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.presets b { font-size:13.5px; } .presets span { color:var(--muted); font-size:12.5px; }
.presets em { font-style:normal; color:var(--text); font-size:12px; font-weight:600; margin-top:4px; }
.advanced { margin-top:14px; border-top:1px solid var(--border-2); }
.advanced summary { cursor:pointer; padding:12px 0 2px; font-weight:600; color:var(--text); list-style:none; }
.advanced summary::before { content:'›'; display:inline-block; width:14px; transition:transform .15s; color:var(--muted); }
.advanced[open] summary::before { transform:rotate(90deg); }
.dropzone { position:relative; display:grid; place-items:center; margin-top:12px; padding:22px; border:1px dashed var(--border-strong); border-radius:var(--radius-sm);
  color:var(--muted); cursor:pointer; text-align:center; background:var(--surface-2); }
.dropzone:hover, .dropzone.over { border-color:var(--focus); background:var(--info-bg); }
.dropzone input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.dropzone b { color:var(--link); }

/* ── Empty states / toast ────────────────────────────────────────────────── */
.empty-state { text-align:center; padding:48px 24px; }
.empty-state h2 { font-size:15px; margin:10px 0 4px; }
.empty-state p { color:var(--muted); margin:0 auto 16px; max-width:420px; }
.empty-icon { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:12px; background:var(--surface-3); color:var(--muted); }
.empty-icon svg { width:24px; height:24px; }
.view > .empty-state, #marketIndex > .empty-state { background:var(--surface); border-radius:var(--radius); box-shadow:var(--card-shadow); margin-bottom:16px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60; max-width:min(560px, calc(100vw - 32px));
  padding:10px 16px; border-radius:var(--radius-sm); background:#1a1a1a; color:#fff; box-shadow:var(--pop-shadow); font-size:13px; font-weight:500; }
.toast.error { background:var(--critical); }

/* ── Scrape progress strip ───────────────────────────────────────────────── */
.job-strip { position:sticky; top:0; z-index:15; background:var(--surface); border-bottom:1px solid var(--border); padding:10px 28px; }
.job-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.steps { display:flex; gap:4px; list-style:none; padding:0; margin:0; counter-reset:step; }
.steps li { font-size:12px; color:var(--faint); padding:1px 8px; border-radius:6px; counter-increment:step; font-weight:550; }
.steps li::before { content:counter(step) '  '; }
.steps li.now { color:var(--info-text); background:var(--info-bg); }
.steps li.done { color:var(--success-text); } .steps li.done::before { content:'✓  '; }
.steps li.skip { text-decoration:line-through; opacity:.6; }
.job-eta { margin-left:auto; color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.bar { height:4px; border-radius:2px; background:var(--surface-3); overflow:hidden; margin-top:8px; }
.bar i { display:block; height:100%; width:0; background:var(--chart-1); transition:width 1s linear; }
.bar.failed i { background:var(--critical); } .bar.done i { background:var(--success); }
.job-status { font-size:12.5px; color:var(--muted); margin-top:4px; }

/* ── Dialogs ─────────────────────────────────────────────────────────────── */
dialog { width:min(620px, calc(100vw - 32px)); border:0; border-radius:var(--radius); background:var(--surface); color:var(--text); padding:20px; box-shadow:var(--pop-shadow); }
dialog::backdrop { background:rgba(0,0,0,.35); }
.small-dialog { width:min(440px, calc(100vw - 32px)); }
.small-dialog h2 { font-size:15px; }
.dialog-head { display:flex; justify-content:space-between; align-items:center; }
.dialog-head h2 { font-size:15px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.invite-new, .invite-link { display:flex; gap:8px; margin-top:12px; }
.invite-link input { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }

/* ── Sign-in / register ─────────────────────────────────────────────────── */
.auth-page { min-height:100vh; display:grid; place-items:center; padding:24px 16px; background:var(--bg); }
.auth-card { width:100%; max-width:400px; background:var(--surface); border-radius:var(--radius); padding:28px; box-shadow:var(--card-shadow); }
.auth-card h1 { display:flex; align-items:center; gap:10px; font-size:18px; }
.auth-card h1::before { content:'cf'; display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--primary); color:var(--on-primary); font-size:12px; }
.auth-sub { color:var(--muted); margin:10px 0 14px; }
.auth-card .run { width:100%; height:36px; margin-top:6px; border:0; border-radius:var(--radius-sm); background:linear-gradient(var(--primary-top), var(--primary)); color:var(--on-primary); font:inherit; font-weight:600; cursor:pointer; }
.auth-card .run:disabled { opacity:.6; }
.auth-card .err { font-size:13px; }
.auth-card .fine { margin-top:14px; }

/* ── Small screens ───────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .prices-grid, .layout-2 { grid-template-columns:minmax(0, 1fr); }
  .estimator { position:static; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns:minmax(0, 1fr); }
  .sidebar { position:fixed; inset:0 auto 0 0; width:260px; z-index:40; transform:translateX(-100%); transition:transform .2s; box-shadow:var(--pop-shadow); }
  .sidebar.open { transform:none; }
  .mobile-bar { display:flex; align-items:center; gap:6px; height:52px; padding:0 10px; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30; }
  .mobile-bar .logo { padding:0; }
  .page { padding:18px 14px 48px; }
  .job-strip { padding:10px 14px; top:52px; }
  .layout-even, .layout-3, .presets, .price-grid { grid-template-columns:minmax(0, 1fr); }
  .filterbar { grid-template-columns:1fr 1fr; }
  .filter-note { grid-column:1 / -1; justify-self:start; }
  .field.compact { min-width:0; width:100%; }
}
.btn.ghost { background:transparent; box-shadow:none; }
.btn.ghost:hover:not(:disabled) { background:var(--tint); }
.prices-main .metrics { grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .metrics, .prices-main .metrics { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .kpi b, a.metric b { font-size:19px; }
}
@media (max-width: 900px) {
  /* Phone: car + profit only; the rest is on the deal page */
  #dealTable th:nth-child(2), #dealTable td:nth-child(2), #dealTable th:nth-child(3), #dealTable td:nth-child(3),
  #dealTable th:nth-child(4), #dealTable td:nth-child(4), #dealTable th:nth-child(6), #dealTable td:nth-child(6) { display:none; }
  .car-cell { min-width:0; max-width:calc(100vw - 150px); }
  #dealTable td:nth-child(5) { vertical-align:top; }
}

/* ── Listing breakdown, adjustments, notes ───────────────────────────────── */
.waterfall { list-style:none; padding:0; margin:10px 0 0; }
.waterfall li { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:8px 0; border-bottom:1px solid var(--border-2); }
.waterfall li > span:first-child { display:flex; flex-direction:column; min-width:0; }
.waterfall li small { color:var(--muted); font-size:12px; }
.waterfall li > span:last-child { text-align:right; white-space:nowrap; font-weight:600; display:flex; flex-direction:column; align-items:flex-end; }
.waterfall li > span:last-child small { font-weight:500; color:var(--faint); }
.waterfall .pos { color:var(--success); } .waterfall .neg { color:var(--critical); } .waterfall .zero { color:var(--faint); font-weight:500; }
.waterfall .wf-start, .waterfall .wf-total { background:var(--surface-2); padding:8px 10px; border-radius:var(--radius-sm); border-bottom:0; }
.waterfall .wf-total { margin-top:6px; }
textarea { width:100%; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); font:inherit; color:var(--text); resize:vertical; background:var(--surface); }
textarea:focus { outline:none; border-color:var(--focus); box-shadow:0 0 0 1px var(--focus); }
.admin-adjust { border:1px solid var(--avatar-bg); }
.adjust-banner { background:var(--info-bg); color:var(--info-text); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:12px; }
.adjust-banner .adjust-note { margin-top:4px; font-style:italic; }
.cost-row { display:grid; grid-template-columns:minmax(0, 1fr) 140px 30px; gap:8px; align-items:center; margin-bottom:8px; }
.pinned-check { align-self:end; height:32px; grid-column:auto; }
.preview { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; padding:10px 12px; background:var(--surface-2); border-radius:var(--radius-sm); }
.preview span:first-child { color:var(--muted); }
ul.history { list-style:none; padding:0; margin:8px 0 0; }
ul.history li { padding:8px 0; border-bottom:1px solid var(--border-2); }
.index-table input[type=number] { width:96px; height:28px; }
.index-table select { width:auto; height:28px; }
.index-table td .changed { color:var(--info-text); font-weight:600; }
.index-table td.changed { color:var(--info-text); font-weight:650; }
.index-table td.changed::after { content:' · changed'; font-weight:500; font-size:12px; color:var(--muted); }
.banner-card { padding:0; } .banner-card .adjust-banner { margin:0; border-radius:var(--radius); }

/* ── Storage ─────────────────────────────────────────────────────────────── */
.lifecycle { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin-top:6px; }
.lifecycle div { padding:10px 12px; border-radius:var(--radius-sm); background:var(--surface-2); }
.lifecycle span { display:block; font-size:12px; color:var(--muted); font-weight:550; }
.lifecycle b { display:block; font-size:18px; font-weight:700; margin-top:2px; }
.lifecycle small { color:var(--faint); font-size:12px; }
.bars.short { height:110px; }
@media (max-width: 900px) { .lifecycle { grid-template-columns:1fr 1fr; } }

/* ── Compact density ─────────────────────────────────────────────────────── */
:root[data-density="compact"] .page { padding:16px 20px 48px; }
:root[data-density="compact"] .card { padding:12px; margin-bottom:12px; }
:root[data-density="compact"] .card.flush { padding:0; }
:root[data-density="compact"] .card.flush > .card-header { padding:10px 12px 8px; }
:root[data-density="compact"] .index-table td { padding:6px 10px; }
:root[data-density="compact"] .index-table th { padding:6px 10px; }
:root[data-density="compact"] .list .list-row { padding:7px 12px; }
:root[data-density="compact"] .layout-2, :root[data-density="compact"] .col-main, :root[data-density="compact"] .col-side, :root[data-density="compact"] .dash { gap:12px; }
:root[data-density="compact"] .kpi, :root[data-density="compact"] a.metric { padding:10px 12px; }
:root[data-density="compact"] .kpi b, :root[data-density="compact"] a.metric b { font-size:19px; }

/* ── Dashboard (Home) ────────────────────────────────────────────────────── */
.dash { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:16px; align-items:start; }
.widget { position:relative; grid-column:span 6; min-width:0; }
.widget[data-size="S"] { grid-column:span 4; } .widget[data-size="W"] { grid-column:span 8; } .widget[data-size="L"] { grid-column:1 / -1; }
.widget > .card, .widget > .metrics { margin:0; }
.widget .metrics { grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); }
.widget-empty { color:var(--muted); padding:2px 0; }
.dash-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:-6px 0 14px; padding:10px 12px; border-radius:var(--radius); background:var(--info-bg); color:var(--info-text); }
.dash-toolbar .grow { flex:1; min-width:200px; }
.dash.editing .widget { outline:1.5px dashed var(--border-strong); outline-offset:3px; border-radius:var(--radius); }
.dash.editing .widget:hover { outline-color:var(--focus); }
.widget-tools { display:none; position:absolute; top:-12px; right:8px; z-index:5; gap:2px; padding:2px; border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--pop-shadow); }
.dash.editing .widget-tools { display:flex; }
.widget-tools button { display:grid; place-items:center; min-width:26px; height:26px; padding:0 6px; border:0; border-radius:6px; background:none; color:var(--muted); font:inherit; font-size:11.5px; font-weight:650; cursor:pointer; }
.widget-tools button:hover { background:var(--tint); color:var(--text); }
.widget-tools button.on { background:var(--surface-3); color:var(--text); }
.widget-tools svg { width:15px; height:15px; }
.widget-tools .handle { cursor:grab; }
.widget.dragging { opacity:.35; }
.widget.drop-target { outline:2px solid var(--focus) !important; }
.widget-label { display:none; position:absolute; top:-11px; left:12px; z-index:4; padding:0 6px; border-radius:6px; background:var(--surface); color:var(--muted); font-size:11.5px; font-weight:600; box-shadow:var(--card-shadow); }
.dash.editing .widget-label { display:block; }
.dash.editing .widget a, .dash.editing .widget .btn { pointer-events:none; }
.widget-hidden-note { padding:14px 16px; color:var(--faint); background:var(--surface-2); border-radius:var(--radius); }
.catalog { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:12px; max-height:60vh; overflow:auto; }
.catalog button { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; text-align:left; cursor:pointer; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); font:inherit; }
.catalog button:hover { background:var(--hover); border-color:var(--border-strong); }
.catalog b { font-weight:600; } .catalog span { color:var(--muted); font-size:12.5px; }
.goal { margin-top:10px; }
.goal + .goal { margin-top:14px; }
.goal-head { display:flex; justify-content:space-between; gap:8px; font-size:12.5px; }
.goal-head span { color:var(--muted); font-weight:550; } .goal-head b { font-variant-numeric:tabular-nums; }
.goal .gauge { margin:6px 0 0; }
.memo { white-space:pre-wrap; margin:4px 0 0; }

/* ── Stars and hides ─────────────────────────────────────────────────────── */
.mark-btn { display:inline-grid; place-items:center; width:26px; height:26px; border:0; border-radius:6px; background:none; color:var(--faint); cursor:pointer; vertical-align:middle; }
.mark-btn:hover { background:var(--tint); color:var(--text); }
.mark-btn svg { width:16px; height:16px; }
.mark-btn.on { color:var(--warning-strong); } .mark-btn.on svg { fill:currentColor; }
.car-with-star { display:flex; align-items:flex-start; gap:6px; }
.car-with-star .mark-btn { margin:-3px 0 0 -6px; flex:none; }
.row-actions { opacity:0; transition:opacity .1s; }
tr:hover .row-actions, .row-actions:focus-within { opacity:1; }
@media (hover:none) { .row-actions { opacity:1; } }

/* ── Settings (account) ──────────────────────────────────────────────────── */
.settings-grid { display:grid; grid-template-columns:220px minmax(0, 1fr); gap:24px; align-items:start; }
.settings-nav { position:sticky; top:16px; display:flex; flex-direction:column; gap:2px; }
.settings-nav a { display:block; padding:7px 10px; border-radius:var(--radius-sm); color:var(--text); font-weight:550; text-decoration:none !important; }
.settings-nav a:hover { background:var(--tint); }
.settings-nav a.on { background:var(--surface); box-shadow:var(--card-shadow); }
.settings-body { display:flex; flex-direction:column; gap:16px; min-width:0; }
.settings-body > .card { margin:0; }
.form-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:12px; }
.form-row .field input { max-width:none; }
.ok-text { color:var(--success); font-weight:550; }
.status-line { display:flex; align-items:center; gap:8px; margin-top:8px; }
.qr { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.qr svg { width:180px; height:180px; border-radius:8px; background:#fff; padding:6px; stroke-width:1; stroke-linecap:butt; stroke-linejoin:miter; }   /* not the icon style: QR modules are exact 1-unit strokes */
.secret { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; letter-spacing:.06em; word-break:break-all; background:var(--surface-2); padding:6px 8px; border-radius:6px; }
.codes { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 16px; margin:12px 0; padding:12px 14px; border-radius:var(--radius-sm); background:var(--surface-2);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; }
.choice-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.choice-row button { display:flex; align-items:center; gap:8px; height:34px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); font:inherit; font-weight:550; cursor:pointer; }
.choice-row button:hover { background:var(--hover); }
.choice-row button.on { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.swatch { width:14px; height:14px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.danger-zone { border:1px solid var(--critical-bg); }
.session-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border-2); }
.session-row:first-of-type { border-top:0; }
.session-row .grow { flex:1; min-width:0; } .session-row small { display:block; color:var(--muted); }
.code-input { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.2em; font-size:16px !important; text-align:center; }
.sidebar-settings { margin-top:2px; }

@media (max-width: 1080px) {
  .widget[data-size="S"] { grid-column:span 6; } .widget[data-size="M"], .widget[data-size="W"] { grid-column:1 / -1; }
}
@media (max-width: 900px) {
  .dash { gap:12px; } .widget, .widget[data-size] { grid-column:1 / -1; }
  .settings-grid { grid-template-columns:minmax(0, 1fr); gap:12px; }
  .settings-nav { position:static; flex-direction:row; overflow-x:auto; }
  .settings-nav a { white-space:nowrap; }
  .form-row, .catalog { grid-template-columns:minmax(0, 1fr); }
  .widget-tools { top:-14px; }
}
.me { cursor:pointer; } .me:hover { background:var(--nav-hover); }
.widget[data-size="S"] .widget-label { max-width:30%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Plans ───────────────────────────────────────────────────────────────── */
.me-badges { display:flex; gap:4px; }
.plan-badge.pro { background:var(--success-bg); color:var(--success-text); }
.lock-pill { background:var(--info-bg); color:var(--info-text); }
.upgrade-strip { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 16px 0; padding:10px 12px; border-radius:var(--radius-sm); background:var(--info-bg); color:var(--info-text); }
.upgrade-strip .btn { flex:none; }
.plans { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:12px; }
.plan { border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
.plan.current { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.plan h3 { margin:0; color:var(--text); font-size:14px; }
.plan .price { font-size:24px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.plan .price small { font-size:13px; font-weight:500; color:var(--muted); }
.plan ul { margin:4px 0 8px; padding-left:18px; color:var(--muted); } .plan li { margin:3px 0; }
.plan .btn { margin-top:auto; }
.seg { display:inline-flex; padding:2px; border-radius:var(--radius-sm); background:var(--surface-3); }
.seg button { border:0; background:none; color:var(--muted); font:inherit; font-weight:600; padding:4px 12px; border-radius:6px; cursor:pointer; }
.seg button.on { background:var(--surface); color:var(--text); box-shadow:var(--card-shadow); }
@media (max-width: 900px) { .plans { grid-template-columns:minmax(0, 1fr); } .upgrade-strip { flex-direction:column; align-items:flex-start; } }

/* ── Public site: landing, legal pages ───────────────────────────────────── */
body.site { background:var(--surface); font-size:14px; }
.site-wrap { width:100%; max-width:1120px; margin:0 auto; padding:0 24px; }
.site-wrap.narrow { max-width:760px; }
.center { text-align:center; }
.site-banner { padding:10px 24px; text-align:center; font-size:13px; background:var(--info-bg); color:var(--info-text); }
.site-banner.warning { background:var(--warning-bg); color:var(--warning-text); }
.site-header { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border-2); }
.site-nav { display:flex; align-items:center; gap:24px; height:60px; }
.site-nav .logo { padding:0; }
.site-links { display:flex; gap:22px; margin-right:auto; }
.site-links a { color:var(--muted); font-weight:550; text-decoration:none; } .site-links a:hover { color:var(--text); }
.btn.lg { height:42px; padding:0 18px; font-size:14px; }
.hero { padding:72px 0 64px; background:linear-gradient(180deg, var(--bg), var(--surface)); }
.hero-grid { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:48px; align-items:center; }
.eyebrow { color:var(--muted); font-weight:600; font-size:13px; margin:0 0 10px; }
.hero h1 { font-size:44px; line-height:1.1; letter-spacing:-.03em; margin:0 0 16px; }
.lead { font-size:17px; color:var(--muted); margin:0 0 24px; max-width:560px; }
.hero .actions { margin-bottom:12px; }
.mock { background:var(--surface); border-radius:16px; box-shadow:var(--pop-shadow); padding:20px; display:flex; flex-direction:column; gap:4px; }
.mock-head { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.mock-tag { margin-left:auto; font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; }
.mock-title { font-size:15px; } .mock-sub { color:var(--muted); font-size:12.5px; }
.mock-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:14px; }
.mock-grid span { display:block; font-size:12px; color:var(--muted); } .mock-grid b { font-size:18px; font-variant-numeric:tabular-nums; }
.mock-grid .profit b { color:var(--success); }
.mock-list { list-style:none; padding:0; margin:8px 0 0; font-size:12.5px; }
.mock-list li { display:flex; justify-content:space-between; padding:5px 0; border-top:1px solid var(--border-2); }
.mock-list .pos { color:var(--success); } .mock-list .neg { color:var(--critical); }
.site-section { padding:72px 0; } .site-section.alt { background:var(--bg); }
.section-title { font-size:28px; letter-spacing:-.02em; text-align:center; margin:0 0 8px; }
.section-sub { text-align:center; color:var(--muted); margin:0 0 28px; }
.steps-3, .feature-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin-top:32px; }
.steps-3 > div, .feature-grid > div { background:var(--surface); border-radius:var(--radius); box-shadow:var(--card-shadow); padding:20px; }
.steps-3 h3, .feature-grid h3 { color:var(--text); font-size:15px; margin:10px 0 6px; } .feature-grid h3 { margin-top:0; }
.steps-3 p, .feature-grid p { color:var(--muted); margin:0; }
.step-n { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--primary); color:var(--on-primary); font-weight:700; font-size:13px; }
.site-plans { max-width:760px; margin:0 auto 12px; }
.plan.featured { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.faq { border-bottom:1px solid var(--border); padding:4px 0; }
.faq summary { cursor:pointer; list-style:none; padding:14px 0; font-weight:600; font-size:15px; display:flex; justify-content:space-between; }
.faq summary::after { content:'+'; color:var(--muted); font-weight:400; font-size:18px; } .faq[open] summary::after { content:'−'; }
.faq p { margin:0 0 16px; color:var(--muted); }
.cta-strip h2 { font-size:26px; margin-bottom:18px; letter-spacing:-.02em; }
.site-footer { border-top:1px solid var(--border-2); padding:28px 0 36px; background:var(--surface); }
.footer-grid { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:12px; }
.footer-grid nav { display:flex; gap:20px; flex-wrap:wrap; } .footer-grid nav a { color:var(--muted); }
.legal { padding:40px 24px 64px; }
.legal h1 { font-size:28px; margin-bottom:4px; } .legal h2 { font-size:17px; margin:28px 0 8px; }
.legal p, .legal li { color:var(--text); line-height:1.65; } .legal ul { padding-left:20px; } .legal li { margin:6px 0; }

/* ── Auth pages additions ────────────────────────────────────────────────── */
.auth-card.wide { max-width:440px; }
.auth-card.center { text-align:center; }
.auth-home { display:inline-flex; align-items:center; gap:10px; font-size:18px; font-weight:700; color:var(--text); text-decoration:none !important; }
.auth-home::before { content:'cf'; display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--primary); color:var(--on-primary); font-size:12px; }
.auth-title { font-size:17px; margin-top:16px; }
.auth-card .notice { margin-top:12px; }
h1.plain { font-size:19px; } h1.plain::before { content:none !important; }
.big-code { font-size:56px; font-weight:700; letter-spacing:-.04em; color:var(--faint); margin:0; line-height:1; }
.center-actions { justify-content:center; margin-top:16px; }
.terms { align-items:flex-start; margin:4px 0 12px; font-size:12.5px; } .terms input { margin-top:2px; }
.hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

@media (max-width: 900px) {
  .hero { padding:40px 0; } .hero-grid { grid-template-columns:minmax(0, 1fr); gap:32px; }
  .hero h1 { font-size:32px; } .lead { font-size:15.5px; }
  .site-links { display:none; } .site-nav { justify-content:space-between; gap:12px; }
  .site-nav .actions .btn.ghost { display:none; }
  .steps-3, .feature-grid { grid-template-columns:minmax(0, 1fr); }
  .site-section { padding:48px 0; } .site-wrap { padding:0 16px; }
}
.app-strip { display:flex; align-items:center; justify-content:center; gap:10px; padding:8px 28px; font-size:13px; background:var(--info-bg); color:var(--info-text); border-bottom:1px solid var(--border); }
.app-strip.warning { background:var(--warning-bg); color:var(--warning-text); }
.app-strip a { color:inherit; text-decoration:underline; font-weight:600; }
.app-strip .icon-btn { color:inherit; width:24px; height:24px; margin-left:auto; } .app-strip span { flex:1; text-align:center; }
#maintStrip { background:var(--critical-bg); color:var(--critical-text); }
.auth-card.center h1 { justify-content:center; }

/* ── My MotorFlip ──────────────────────────────────────────────────────────── */
.me-head { display:flex; align-items:center; gap:14px; }
.avatar.xl { width:52px; height:52px; font-size:20px; }
.neg-text { color:var(--critical); font-weight:650; }
.me-bars { height:200px; }
.me-bars .barstack i { left:22%; right:22%; }
.me-bars .barstack i.r { background:var(--success); }
.me-bars .barstack i.e { background:var(--chart-1); opacity:.45; border-radius:3px 3px 0 0; }
#mePurchases .car-cell { min-width:160px; max-width:260px; }
#mePurchases td.l { white-space:normal; min-width:120px; }

/* ── Brand: the MotorFlip.nl wordmark (light and dark versions) ──────────── */
.brand { display:inline-flex; align-items:center; text-decoration:none !important; }
.brand img { height:26px; width:auto; display:block; }
.brand .brand-dark { display:none; }
:root[data-theme="dark"] .brand .brand-light { display:none; }
:root[data-theme="dark"] .brand .brand-dark { display:block; }
.sidebar .brand { padding:6px 8px 12px; }
.mobile-bar .brand img { height:22px; }
.site-nav .brand img { height:28px; }
.site-footer .brand img { height:24px; }
.auth-home.brand::before { content:none; }
.auth-home.brand img { height:30px; }
.auth-card.center .auth-home { justify-content:center; margin-bottom:18px; }
/* Landing touches in the brand colours */
.hero { background:radial-gradient(1100px 420px at 85% 10%, var(--brand-mint-bg), transparent 60%), linear-gradient(180deg, var(--bg), var(--surface)); }
.eyebrow { display:inline-block; padding:3px 10px; border-radius:999px; background:var(--brand-mint-bg); color:var(--success-text); }
.step-n { background:var(--brand-mint); color:var(--brand-navy); }
.plan.featured { border-color:var(--brand-green); box-shadow:0 0 0 1px var(--brand-green); }

/* ── Automatic scraping ──────────────────────────────────────────────────── */
.sched-row { display:flex; align-items:flex-start; gap:12px; padding:12px 16px; border-top:1px solid var(--border-2); }
.sched-row .grow { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sched-row small { color:var(--muted); font-size:12px; }
.sched-last { margin-top:4px; font-size:12.5px; }
.sched-top { list-style:none; margin:6px 0 0; padding:0; font-size:12.5px; }
.sched-top li { display:flex; justify-content:space-between; gap:8px; padding:3px 0; border-top:1px dashed var(--border-2); }
.sched-top li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.switch { position:relative; display:inline-block; width:34px; height:20px; flex:none; margin-top:2px; cursor:pointer; }
.switch input { opacity:0; width:0; height:0; position:absolute; }
.switch i { position:absolute; inset:0; border-radius:999px; background:var(--border-strong); transition:background .15s; }
.switch i::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s; }
.switch input:checked + i { background:var(--success); }
.switch input:checked + i::after { transform:translateX(14px); }
.switch input:focus-visible + i { outline:2px solid var(--focus); outline-offset:2px; }
#sdDays button { height:30px; padding:0 10px; }
.new-pill { background:var(--brand-mint-bg); color:var(--success-text); font-size:11px; padding:0 6px; margin-right:2px; }
@media (max-width: 900px) { .sched-row { flex-wrap:wrap; } .sched-row .actions { width:100%; padding-left:46px; } }

/* ── Deals filters (public/js/filters.js) ────────────────────────────────── */
.tabs-tools { display:flex; align-items:center; gap:8px; }
.refine { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 16px; border-bottom:1px solid var(--border-2); }
.search-box { display:flex; align-items:center; gap:6px; flex:1 1 220px; max-width:320px; height:32px; padding:0 10px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); }
.search-box:focus-within { border-color:var(--focus); box-shadow:0 0 0 1px var(--focus); }
.search-box svg { width:16px; height:16px; color:var(--faint); }
.search-box input { border:0; height:30px; padding:0; background:transparent; box-shadow:none !important; }
.refine-pills { display:flex; gap:6px; flex-wrap:wrap; }
.fbtn { display:inline-flex; align-items:center; gap:4px; height:30px; padding:0 8px 0 10px; border:1px dashed var(--border-strong); border-radius:999px;
  background:var(--surface); color:var(--text); font:inherit; font-size:12.5px; font-weight:550; cursor:pointer; white-space:nowrap; list-style:none; }
.fbtn::-webkit-details-marker { display:none; }
.fbtn:hover { background:var(--hover); }
.fbtn svg { width:14px; height:14px; color:var(--muted); }
.fbtn.on { border-style:solid; border-color:var(--primary); background:var(--surface-2); }
.fbtn b { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--primary); color:var(--on-primary); font-size:11px; }
.fbtn.more { border-style:solid; }
.active-chips { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px 16px 0; }
.fchip { display:inline-flex; align-items:center; gap:2px; padding:2px 4px 2px 10px; border-radius:999px; background:var(--surface-3); font-size:12.5px; font-weight:500; max-width:100%; }
.fchip button { display:grid; place-items:center; width:20px; height:20px; border:0; border-radius:50%; background:none; color:var(--muted); cursor:pointer; }
.fchip button:hover { background:var(--tint); color:var(--text); }
.fchip button svg { width:12px; height:12px; }
.fpop { position:absolute; z-index:50; width:280px; max-width:calc(100vw - 16px); padding:10px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--pop-shadow); }
.fpop-head { display:flex; justify-content:space-between; align-items:center; padding:2px 4px 8px; }
.fsearch { margin-bottom:6px; }
.flist { max-height:280px; overflow:auto; display:flex; flex-direction:column; }
.fopt { display:flex; align-items:center; gap:8px; padding:6px 6px; border-radius:6px; cursor:pointer; font-size:13px; }
.fopt:hover { background:var(--hover); }
.fopt input { width:16px; height:16px; accent-color:var(--primary); flex:none; }
.fopt span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fopt small { color:var(--faint); font-variant-numeric:tabular-nums; }
.frange { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fpresets { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.fpresets button { height:26px; padding:0 9px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text); font:inherit; font-size:12px; cursor:pointer; }
.fpresets button:hover { background:var(--hover); }
.views .menu-list { min-width:240px; }
.view-item { display:flex; align-items:center; border-radius:6px; }
.view-item.on { background:var(--surface-3); }
.view-item > button:first-child { flex:1; }
.views hr { border:0; border-top:1px solid var(--border-2); margin:6px 0; }
.views .menu-list button:disabled { color:var(--faint); cursor:not-allowed; }
dialog.drawer { margin:0 0 0 auto; height:100vh; max-height:100vh; width:min(400px, 100vw); border-radius:0; padding:0; display:none; flex-direction:column; }
dialog.drawer[open] { display:flex; }
.drawer-head, .drawer-foot { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--border-2); }
.drawer-foot { border-bottom:0; border-top:1px solid var(--border-2); margin-top:auto; }
.drawer-body { overflow:auto; padding:6px 18px 18px; flex:1; }
.drawer-body section { padding:12px 0; border-bottom:1px solid var(--border-2); }
.drawer-body section:last-child { border-bottom:0; }
.drawer-body h3 { margin:0 0 8px; color:var(--text); font-size:13px; }
.drawer-body .flist { max-height:none; }
@media (max-width: 900px) {
  .search-box { max-width:none; flex-basis:100%; }
  .refine-pills { flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; margin:0 -16px; padding:0 16px; scrollbar-width:none; }
  .tabs-tools { width:100%; justify-content:space-between; }
}
.waterfall .wf-start small + small { margin-top:2px; }
.waterfall .wf-start b small { display:block; font-size:11.5px; font-weight:500; color:var(--faint); text-align:right; }
.waterfall .wf-anchor { border-bottom:1px dashed var(--border-strong); }
.notice.info-notice { background:var(--info-bg); color:var(--info-text); }

/* ── Notifications ───────────────────────────────────────────────────────── */
.bell-count { background:var(--critical); color:#fff; border-radius:999px; padding:0 6px; font-size:11px; line-height:18px; min-width:18px; text-align:center; }
.inbox { padding-top:0; }
.inbox-item { display:flex; gap:10px; padding:12px 4px; border-bottom:1px solid var(--border-2); color:var(--text); text-decoration:none !important; border-radius:6px; }
.inbox-item:hover { background:var(--hover); }
.inbox-item.unread b::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--brand-green); margin-right:6px; vertical-align:middle; }
.inbox-item .grow { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.inbox-item small { color:var(--muted); }
.inbox-item ul { margin:4px 0; padding-left:16px; font-size:12.5px; color:var(--muted); }
.inbox-icon { font-size:18px; line-height:1.2; }
.channel { padding:14px 0; border-top:1px solid var(--border-2); }
.channel:first-of-type { margin-top:10px; }
.channel .actions { margin-top:8px; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; cursor:pointer; }
.switch-row > span:first-child { display:flex; flex-direction:column; }
.switch-row small { color:var(--muted); font-size:12px; }
.card > .switch-row + .switch-row { border-top:1px solid var(--border-2); }
.howto { border-top:1px solid var(--border-2); padding:10px 0; }
.howto summary { cursor:pointer; list-style:none; }
.howto summary::-webkit-details-marker { display:none; }
.howto summary::before { content:'›'; display:inline-block; width:14px; color:var(--muted); transition:transform .15s; }
.howto[open] summary::before { transform:rotate(90deg); }
.howto ol { margin:8px 0 6px; padding-left:22px; } .howto li { margin:5px 0; }
.feed-row { display:flex; gap:6px; margin-top:8px; }
.feed-row input { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
#alKinds button { height:32px; }
.inbox-item li[data-go] { cursor:pointer; } .inbox-item li[data-go]:hover { color:var(--text); text-decoration:underline; }
.hot-pill { background:#ffe8d9; color:#8a3a00; }
:root[data-theme="dark"] .hot-pill { background:#4a2a12; color:#ffc9a3; }
.funnel-step { margin-top:12px; }
.funnel-head { display:flex; justify-content:space-between; gap:8px; font-size:12.5px; }
.funnel-head span { color:var(--muted); font-weight:550; } .funnel-head small { color:var(--faint); font-weight:500; }
.funnel-step .gauge { margin:5px 0 0; }

/* ── Confidence card ─────────────────────────────────────────────────────── */
.conf-parts { display:flex; flex-direction:column; gap:14px; margin-top:6px; }
.conf-head { display:flex; justify-content:space-between; gap:8px; font-size:13px; }
.conf-head span { font-weight:600; } .conf-head b { font-variant-numeric:tabular-nums; }
.conf-parts .gauge { margin:6px 0 4px; }
.conf-parts small { color:var(--muted); font-size:12.5px; display:block; }
.conf-big { font-size:13px; padding:3px 10px; }
.conf-range { margin-top:14px; padding-top:12px; border-top:1px solid var(--border-2); }

.info-btn { display:inline-grid; place-items:center; width:16px; height:16px; margin-left:4px; padding:0; border:1px solid var(--border-strong); border-radius:50%;
  background:var(--surface); color:var(--muted); font:inherit; font-size:10.5px; font-weight:700; line-height:1; cursor:pointer; vertical-align:middle; }
.info-btn:hover { color:var(--text); border-color:var(--text); }
.conf-meaning { margin:4px 0 14px; padding:10px 12px; border-radius:var(--radius-sm); font-size:13px; }
.conf-meaning.conf-high { background:var(--success-bg); color:var(--success-text); }
.conf-meaning.conf-mid { background:var(--warning-bg); color:var(--warning-text); }
.conf-meaning.conf-low { background:var(--critical-bg); color:var(--critical-text); }
.conf-meaning .fine { color:inherit; opacity:.8; }
.conf-level { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--border-2); }
.conf-level .pill { flex:none; min-width:100px; justify-content:center; }
.conf-level small { display:block; color:var(--muted); }
.conf-info-list { margin:4px 0 0; padding-left:18px; color:var(--muted); font-size:12.5px; } .conf-info-list li { margin:6px 0; } .conf-info-list b { color:var(--text); }

/* ── Polish: loading, motion, toasts ─────────────────────────────────────── */
.skel { display:block; height:12px; margin:4px 0; border-radius:6px; background:linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 40%, var(--surface-3) 80%);
  background-size:300% 100%; animation:shimmer 1.4s ease-in-out infinite; }
.skel-text.sm { height:9px; } .skel-title { height:14px; } .skel-num { height:22px; margin:8px 0; } .skel-h1 { height:22px; margin:8px 0; }
.skel-pill { height:18px; border-radius:999px; }
#homeLine .skel { display:inline-block; vertical-align:middle; }
.skel-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border-2); }
.skel-row:first-of-type { border-top:0; } .skel-row .grow { flex:1; }
.skel-card .card-header { margin-bottom:4px; }
.skel-tr td { padding-top:14px; padding-bottom:14px; }
@keyframes shimmer { 0% { background-position:100% 0; } 100% { background-position:0 0; } }

.top-progress { position:fixed; inset:0 0 auto 0; height:2px; z-index:100; pointer-events:none; }
.top-progress i { display:block; height:100%; width:0; background:var(--brand-green); box-shadow:0 0 8px var(--brand-mint); opacity:0; }
.top-progress.run i { opacity:1; width:85%; transition:width 8s cubic-bezier(.1,.6,.2,1), opacity .1s; }
.top-progress.done i { width:100%; opacity:0; transition:width .2s ease-out, opacity .3s .15s; }

.view:not([hidden]) { animation:viewIn .18s ease-out; }
@keyframes viewIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
dialog[open] { animation:dialogIn .16s ease-out; }
@keyframes dialogIn { from { opacity:0; transform:translateY(6px) scale(.985); } to { opacity:1; transform:none; } }
dialog.drawer[open] { animation:drawerIn .2s ease-out; }
@keyframes drawerIn { from { transform:translateX(24px); opacity:0; } to { transform:none; opacity:1; } }

.toast { display:flex; align-items:center; gap:10px; cursor:pointer; opacity:0; transform:translate(-50%, 8px); transition:opacity .18s, transform .18s; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
.toast-icon { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--brand-mint); color:var(--brand-navy); font-size:12px; font-weight:800; flex:none; }
.toast.error .toast-icon { background:#fff; color:var(--critical); }

.btn { transition:background .12s, transform .06s; } .btn:active:not(:disabled) { transform:translateY(1px); }
.row-link td { transition:background .1s; }
kbd { display:inline-block; min-width:22px; padding:1px 6px; border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:5px;
  background:var(--surface-2); font:600 12px ui-monospace, SFMono-Regular, Menlo, monospace; text-align:center; }
.shortcuts th { width:120px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .skel { animation:none; }
}