/* ══════════════════════════════════════════════════════════════════════
   ConnectAndBuy — Design Tokens v3  ·  Premium Ink · Royal Purple · Gold
   Three themes: [data-theme="default"] · [data-theme="dark"] · adaptive
   Adaptive = no explicit choice → follows prefers-color-scheme.
   Every component reads tokens. No component hardcodes a colour.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ ACCENT — the brand colour is a choice (2026-09-23) ══════════════
   Every violet in the product reads from these. Royal Violet is the house
   default and its values are exactly the ones shipped before; the other
   palettes were tuned so white text on a button and accent text on a
   surface pass WCAG AA in both Pearl and Midnight. */
:root,html[data-accent="violet"]{--acc-1:#6D3DF5;--acc-2:#4C24B8;--acc-hover:#5A2FD1;--acc-soft:#EEE9FF;--acc-hi:#7D52FF;--acc-hi2:#8F69FF;--acc-glow:#8E6BFF;--acc-ink1:#1A1040;--acc-ink2:#171040;--acc-rgb:109,61,245;--acc-hi-rgb:125,82,255;--acc-deep-rgb:76,36,184;--acc-x-1a1240:#1A1240;--acc-x-1a1440:#1A1440;--acc-x-1e1650:#1E1650;--acc-x-221a4d:#221A4D;--acc-x-231856:#231856;--acc-x-2c1d66:#2C1D66;--acc-x-2e1a78:#2E1A78;--acc-x-3a1b8e:#3A1B8E;--acc-x-4c3a9e:#4C3A9E;--acc-x-5d4bc0:#5D4BC0;--acc-x-8b63ff:#8B63FF;--acc-x-8b66ff:#8B66FF;--acc-x-9f7bff:#9F7BFF;--acc-x-aeb5f6:#AEB5F6;--acc-x-b49cff:#B49CFF;--acc-x-c9b4ff:#C9B4FF;--acc-x-c9b8ff:#C9B8FF;--acc-x-cfd3fc:#CFD3FC;--acc-x-d6c9fe:#D6C9FE;--acc-x-dfe2fb:#DFE2FB;--acc-x-e0dff0:#E0DFF0;--acc-x-e9e2ff:#E9E2FF;--acc-x-e9e7f4:#E9E7F4;--acc-x-f1ebff:#F1EBFF;--acc-x-f1edfe:#F1EDFE;--acc-x-f1effb:#F1EFFB;--acc-x-f4f0ff:#F4F0FF;--acc-x-f6f5fb:#F6F5FB;--acc-x-faf9fe:#FAF9FE;--acc-x-rgb-9f7bff:159,123,255;--acc-x-rgb-b49cff:180,156,255;--acc-x-rgb-4146d8:65,70,216}
html[data-accent="sapphire"]{--acc-1:#1F5BD8;--acc-2:#123C9C;--acc-hover:#194CB8;--acc-soft:#E6EEFD;--acc-hi:#2765EE;--acc-hi2:#3670EF;--acc-glow:#6E9BFF;--acc-ink1:#0E1A3D;--acc-ink2:#0C1736;--acc-rgb:31,91,216;--acc-hi-rgb:39,101,238;--acc-deep-rgb:18,60,156;--acc-x-1a1240:#0F1B2A;--acc-x-1a1440:#101C29;--acc-x-1e1650:#122032;--acc-x-221a4d:#162234;--acc-x-231856:#152439;--acc-x-2c1d66:#1A2A46;--acc-x-2e1a78:#182D51;--acc-x-3a1b8e:#1C3366;--acc-x-4c3a9e:#324C71;--acc-x-5d4bc0:#3D608D;--acc-x-8b63ff:#447BEE;--acc-x-8b66ff:#437DEE;--acc-x-9f7bff:#6390F1;--acc-x-aeb5f6:#A6BAE1;--acc-x-b49cff:#85ABF4;--acc-x-c9b4ff:#A7BFF7;--acc-x-c9b8ff:#A7C3F7;--acc-x-cfd3fc:#CBD6EE;--acc-x-d6c9fe:#BED1F8;--acc-x-dfe2fb:#DCE4F3;--acc-x-e0dff0:#D8E1EA;--acc-x-e9e2ff:#DBE6FC;--acc-x-e9e7f4:#E3E9F0;--acc-x-f1ebff:#E7EEFD;--acc-x-f1edfe:#E9F0FC;--acc-x-f1effb:#ECF1F8;--acc-x-f4f0ff:#EDF3FD;--acc-x-f6f5fb:#F3F6F9;--acc-x-faf9fe:#F7F9FD;--acc-x-rgb-9f7bff:99,144,241;--acc-x-rgb-b49cff:133,171,244;--acc-x-rgb-4146d8:39,96,132}
html[data-accent="ocean"]{--acc-1:#0B7285;--acc-2:#07505E;--acc-hover:#095F6E;--acc-soft:#E1F3F6;--acc-hi:#117A8C;--acc-hi2:#128296;--acc-glow:#4CC6DA;--acc-ink1:#082A31;--acc-ink2:#07242B;--acc-rgb:11,114,133;--acc-hi-rgb:17,122,140;--acc-deep-rgb:7,80,94;--acc-x-1a1240:#091D1E;--acc-x-1a1440:#0A1E1F;--acc-x-1e1650:#0B2324;--acc-x-221a4d:#0E2527;--acc-x-231856:#0C2629;--acc-x-2c1d66:#102F32;--acc-x-2e1a78:#0E3237;--acc-x-3a1b8e:#0F3B43;--acc-x-4c3a9e:#225255;--acc-x-5d4bc0:#28676A;--acc-x-8b63ff:#058DA5;--acc-x-8b66ff:#058EA4;--acc-x-9f7bff:#06A0BE;--acc-x-aeb5f6:#79C5D2;--acc-x-b49cff:#07BCD8;--acc-x-c9b4ff:#17D1F8;--acc-x-c9b8ff:#08D4F4;--acc-x-cfd3fc:#B2DDE5;--acc-x-d6c9fe:#5EE2F7;--acc-x-dfe2fb:#CCE9EE;--acc-x-e0dff0:#CCE6E4;--acc-x-e9e2ff:#ACF1FC;--acc-x-e9e7f4:#DAECED;--acc-x-f1ebff:#CFF5FE;--acc-x-f1edfe:#D1F6FB;--acc-x-f1effb:#DFF5F6;--acc-x-f4f0ff:#D8F8FE;--acc-x-f6f5fb:#EFF7F8;--acc-x-faf9fe:#F2FBFC;--acc-x-rgb-9f7bff:6,160,190;--acc-x-rgb-b49cff:7,188,216;--acc-x-rgb-4146d8:24,102,91}
html[data-accent="emerald"]{--acc-1:#0A7A55;--acc-2:#06573C;--acc-hover:#086847;--acc-soft:#E2F4EC;--acc-hi:#0F7F5B;--acc-hi2:#108761;--acc-glow:#42C99A;--acc-ink1:#0A2A20;--acc-ink2:#08241B;--acc-rgb:10,122,85;--acc-hi-rgb:15,127,91;--acc-deep-rgb:6,87,60;--acc-x-1a1240:#091D15;--acc-x-1a1440:#0A1E15;--acc-x-1e1650:#0B2519;--acc-x-221a4d:#0E271C;--acc-x-231856:#0C281D;--acc-x-2c1d66:#0F3024;--acc-x-2e1a78:#0D3426;--acc-x-3a1b8e:#0D3E2E;--acc-x-4c3a9e:#21553F;--acc-x-5d4bc0:#286A4D;--acc-x-8b63ff:#049263;--acc-x-8b66ff:#059462;--acc-x-9f7bff:#05A773;--acc-x-aeb5f6:#65CCA9;--acc-x-b49cff:#06C381;--acc-x-c9b4ff:#07D998;--acc-x-c9b8ff:#07DD92;--acc-x-cfd3fc:#A6E1CE;--acc-x-d6c9fe:#0CED9F;--acc-x-dfe2fb:#C5ECDF;--acc-x-e0dff0:#CDE6D9;--acc-x-e9e2ff:#89FBD3;--acc-x-e9e7f4:#DAEDE4;--acc-x-f1ebff:#B1FDE7;--acc-x-f1edfe:#C8FAE8;--acc-x-f1effb:#DDF6EB;--acc-x-f4f0ff:#C9FDEC;--acc-x-f6f5fb:#EFF8F4;--acc-x-faf9fe:#F2FCF8;--acc-x-rgb-9f7bff:5,167,115;--acc-x-rgb-b49cff:6,195,129;--acc-x-rgb-4146d8:24,104,55}
html[data-accent="gold"]{--acc-1:#8A6512;--acc-2:#5E440A;--acc-hover:#76560F;--acc-soft:#F7F0DE;--acc-hi:#8D6912;--acc-hi2:#977113;--acc-glow:#E2B64A;--acc-ink1:#2A2110;--acc-ink2:#231B0D;--acc-rgb:138,101,18;--acc-hi-rgb:141,105,18;--acc-deep-rgb:94,68,10;--acc-x-1a1240:#21190C;--acc-x-1a1440:#23190D;--acc-x-1e1650:#291D0E;--acc-x-221a4d:#2B2011;--acc-x-231856:#2C2110;--acc-x-2c1d66:#352813;--acc-x-2e1a78:#3A2C11;--acc-x-3a1b8e:#423412;--acc-x-4c3a9e:#5C4828;--acc-x-5d4bc0:#765931;--acc-x-8b63ff:#A8770D;--acc-x-8b66ff:#AB780E;--acc-x-9f7bff:#BD890F;--acc-x-aeb5f6:#D2B678;--acc-x-b49cff:#E39E12;--acc-x-c9b4ff:#EEB72F;--acc-x-c9b8ff:#F1BA4A;--acc-x-cfd3fc:#E5D5B0;--acc-x-d6c9fe:#F2CC7B;--acc-x-dfe2fb:#EDE3CA;--acc-x-e0dff0:#E9DFD6;--acc-x-e9e2ff:#F9E3B7;--acc-x-e9e7f4:#EEE8DE;--acc-x-f1ebff:#FBEDC9;--acc-x-f1edfe:#FAEED7;--acc-x-f1effb:#F7F0E5;--acc-x-f4f0ff:#FCF2D9;--acc-x-f6f5fb:#F9F6F1;--acc-x-faf9fe:#FCFAF4;--acc-x-rgb-9f7bff:189,137,15;--acc-x-rgb-b49cff:227,158,18;--acc-x-rgb-4146d8:135,76,38}
html[data-accent="copper"]{--acc-1:#B04A1C;--acc-2:#7F3212;--acc-hover:#983F18;--acc-soft:#FBEDE5;--acc-hi:#B7501D;--acc-hi2:#C5561F;--acc-glow:#F08A55;--acc-ink1:#33180C;--acc-ink2:#2B140A;--acc-rgb:176,74,28;--acc-hi-rgb:183,80,29;--acc-deep-rgb:127,50,18;--acc-x-1a1240:#28150F;--acc-x-1a1440:#2A1511;--acc-x-1e1650:#331913;--acc-x-221a4d:#331C16;--acc-x-231856:#371C14;--acc-x-2c1d66:#402319;--acc-x-2e1a78:#482417;--acc-x-3a1b8e:#542B18;--acc-x-4c3a9e:#6D3F32;--acc-x-5d4bc0:#8B4D3E;--acc-x-8b63ff:#DD5418;--acc-x-8b66ff:#E05318;--acc-x-9f7bff:#E96E34;--acc-x-aeb5f6:#DEB09B;--acc-x-b49cff:#EF956F;--acc-x-c9b4ff:#F3B090;--acc-x-c9b8ff:#F4B399;--acc-x-cfd3fc:#EBD1C4;--acc-x-d6c9fe:#F5C7B3;--acc-x-dfe2fb:#F2DFD7;--acc-x-e0dff0:#ECDEDC;--acc-x-e9e2ff:#FBE1D6;--acc-x-e9e7f4:#F0E6E4;--acc-x-f1ebff:#FCEBE1;--acc-x-f1edfe:#FBECE7;--acc-x-f1effb:#F8EFEC;--acc-x-f4f0ff:#FDEFE9;--acc-x-f6f5fb:#F9F5F3;--acc-x-faf9fe:#FDF8F7;--acc-x-rgb-9f7bff:233,110,52;--acc-x-rgb-b49cff:239,149,111;--acc-x-rgb-4146d8:163,52,50}
html[data-accent="garnet"]{--acc-1:#B3244C;--acc-2:#7E1634;--acc-hover:#9B1F42;--acc-soft:#FBE8EE;--acc-hi:#CF2E5C;--acc-hi2:#D43E69;--acc-glow:#F07396;--acc-ink1:#34101C;--acc-ink2:#2C0D18;--acc-rgb:179,36,76;--acc-hi-rgb:207,46,92;--acc-deep-rgb:126,22,52;--acc-x-1a1240:#2B121B;--acc-x-1a1440:#2C131D;--acc-x-1e1650:#351522;--acc-x-221a4d:#361925;--acc-x-231856:#3A1825;--acc-x-2c1d66:#471D2B;--acc-x-2e1a78:#4E1C2D;--acc-x-3a1b8e:#5F2031;--acc-x-4c3a9e:#73394E;--acc-x-5d4bc0:#914563;--acc-x-8b63ff:#E34471;--acc-x-8b66ff:#E34776;--acc-x-9f7bff:#E8688A;--acc-x-aeb5f6:#E3ABBA;--acc-x-b49cff:#EE8FAB;--acc-x-c9b4ff:#F3ACBF;--acc-x-c9b8ff:#F3B0C4;--acc-x-cfd3fc:#EECED7;--acc-x-d6c9fe:#F5C4D2;--acc-x-dfe2fb:#F4DDE4;--acc-x-e0dff0:#EBDCE3;--acc-x-e9e2ff:#FAE0E8;--acc-x-e9e7f4:#F0E6EA;--acc-x-f1ebff:#FCE9EE;--acc-x-f1edfe:#FBECF0;--acc-x-f1effb:#F8EDF2;--acc-x-f4f0ff:#FDEEF2;--acc-x-f6f5fb:#FAF5F6;--acc-x-faf9fe:#FDF8FA;--acc-x-rgb-9f7bff:232,104,138;--acc-x-rgb-b49cff:238,143,171;--acc-x-rgb-4146d8:153,53,110}
html[data-accent="graphite"]{--acc-1:#27303F;--acc-2:#11161F;--acc-hover:#1C232F;--acc-soft:#ECEEF2;--acc-hi:#62708A;--acc-hi2:#697893;--acc-glow:#AEB8C8;--acc-ink1:#161A22;--acc-ink2:#12151C;--acc-rgb:39,48,63;--acc-hi-rgb:98,112,138;--acc-deep-rgb:17,22,31;--acc-x-1a1240:#171B1F;--acc-x-1a1440:#181B1F;--acc-x-1e1650:#1C2125;--acc-x-221a4d:#1E2227;--acc-x-231856:#1F2429;--acc-x-2c1d66:#262B32;--acc-x-2e1a78:#282E37;--acc-x-3a1b8e:#2E3643;--acc-x-4c3a9e:#434B56;--acc-x-5d4bc0:#545F6C;--acc-x-8b63ff:#6A82A8;--acc-x-8b66ff:#6B83A8;--acc-x-9f7bff:#8093B4;--acc-x-aeb5f6:#B0BBCB;--acc-x-b49cff:#9CADC5;--acc-x-c9b4ff:#B5C0D4;--acc-x-c9b8ff:#B7C3D5;--acc-x-cfd3fc:#CFD6E1;--acc-x-d6c9fe:#C8D1DE;--acc-x-dfe2fb:#E0E4EA;--acc-x-e0dff0:#DDE1E3;--acc-x-e9e2ff:#E2E7EE;--acc-x-e9e7f4:#E6E9EB;--acc-x-f1ebff:#EBEEF3;--acc-x-f1edfe:#EDF0F4;--acc-x-f1effb:#EEF1F3;--acc-x-f4f0ff:#F0F2F6;--acc-x-f6f5fb:#F5F6F7;--acc-x-faf9fe:#F9F9FB;--acc-x-rgb-9f7bff:128,147,180;--acc-x-rgb-b49cff:156,173,197;--acc-x-rgb-4146d8:74,94,105}
:root{
  /* ── brand ramp (theme-independent) · royal purple ──────────── */
  --indigo-50:var(--acc-x-f4f0ff);  --indigo-100:var(--acc-soft); --indigo-200:var(--acc-x-d6c9fe);
  --indigo-300:var(--acc-x-b49cff); --indigo-400:var(--acc-x-8b66ff); --indigo-500:var(--acc-1);
  --indigo-600:var(--acc-hover); --indigo-700:var(--acc-2); --indigo-800:var(--acc-x-3a1b8e);
  --violet-400:var(--acc-x-9f7bff); --violet-500:var(--acc-hi); --violet-600:var(--acc-1);
  --aqua-300:#63DEEA;   --aqua-400:#20C7D9;  --aqua-500:#1BAEBE; --aqua-600:#14828F;
  --amber-400:#FFB556;  --amber-500:#FF9F1C; --amber-600:#DB8104;
  --gold-400:#F1C96A;   --gold-500:#D9A441;  --gold-600:#B8862E;
  --green-500:#00C98B;  --green-600:#00A874;
  --red-400:#FF7A88;    --red-500:#FF4D5D;   --red-600:#E1293A;
  --grad-gold:linear-gradient(135deg,#D9A441,#F1C96A);

  /* ── typography ─────────────────────────────────────────────── */
  --font:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --fs-display:40px; --fs-h1:34px; --fs-h2:23px;  --fs-h3:17px;
  --fs-body:14.5px;  --fs-sm:13px; --fs-xs:11.5px; --fs-micro:10px;
  --lh-tight:1.15;   --lh-snug:1.35; --lh-body:1.6;
  --tr-display:-.03em; --tr-head:-.022em; --tr-label:.1em;

  /* ── spacing · radius · elevation ───────────────────────────── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;
  --r-xs:6px; --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-pill:999px;

  /* ── motion · 150–220ms, no bounce ──────────────────────────── */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.3,1.08,.45,1);
  --t-fast:140ms; --t-base:200ms; --t-slow:300ms;

  /* ── z ──────────────────────────────────────────────────────── */
  --z-sticky:60; --z-drop:70; --z-sheet:80; --z-modal:90; --z-toast:100;
}

/* ══════════════ DEFAULT — Premium Pearl ═══════════════════════ */
:root, [data-theme="default"]{
  --bg:#F7F7FB;            --bg-2:var(--acc-x-f1effb);         --canvas:#F2F2F8;
  --surface:#FFFFFF;       --surface-2:var(--acc-x-faf9fe);    --surface-3:var(--acc-x-f1edfe);
  --surface-glass:rgba(255,255,255,.74);
  --line:#E6E6F2;          --line-2:#EFEFF7;       --line-strong:#D5D5E8;

  --ink:#0B1020;           --ink-2:#333A54;        --muted:#5E6883;   --faint:#8A93AC;
  --on-primary:#FFFFFF;

  --primary:var(--acc-1);       --primary-hover:var(--acc-hover); --primary-soft:var(--acc-soft);
  --primary-ring:rgba(var(--acc-rgb),.30);
  --violet:var(--acc-hi);        --violet-soft:var(--acc-x-f1ebff);
  --aqua:#14828F;          --aqua-soft:#E1F7FA;
  --success:#00A874;       --success-soft:#E1F8F0;
  --warn:#C77607;          --warn-soft:#FFF3E2;
  --danger:#E1293A;        --danger-soft:#FFE9EB;
  --gold:#B8862E;          --gold-soft:#FBF3DF;

  --shadow-sm:0 1px 2px rgba(11,16,32,.05);
  --shadow-md:0 4px 12px -2px rgba(11,16,32,.08), 0 2px 4px -2px rgba(11,16,32,.05);
  --shadow-lg:0 14px 34px -12px rgba(11,16,32,.16), 0 4px 10px -4px rgba(11,16,32,.06);
  --shadow-xl:0 26px 60px -20px rgba(11,16,32,.24);
  --shadow-primary:0 8px 22px -8px rgba(var(--acc-rgb),.45);

  --glow-ai:radial-gradient(60% 120% at 50% 0%,rgba(var(--acc-rgb),.10),transparent 72%);
  --grad-brand:linear-gradient(135deg,var(--acc-1) 0%,var(--acc-2) 100%);
  --grad-brand-soft:linear-gradient(135deg,rgba(var(--acc-rgb),.10),rgba(var(--acc-deep-rgb),.07) 100%);
  --blur:14px;
  --map-land:#E2E1EF; --map-road:#C7CDE4; --map-water:#C9D9F0;
  color-scheme:light;
}

/* ══════════════ DARK — Premium Ink (flagship) ═════════════════ */
[data-theme="dark"]{
  --bg:#0B1020;            --bg-2:#10182B;         --canvas:#0B1020;
  --surface:#151F33;       --surface-2:#1B2740;    --surface-3:#223052;
  --surface-glass:rgba(21,31,51,.72);
  --line:#293650;          --line-2:rgba(41,54,80,.55); --line-strong:#31405F;

  --ink:#FFFFFF;           --ink-2:#D5DCEA;        --muted:#A8B2C5;   --faint:#68758B;
  --on-primary:#FFFFFF;

  --primary:var(--acc-hi);       --primary-hover:var(--acc-hi2); --primary-soft:rgba(var(--acc-rgb),.16);
  --primary-ring:rgba(var(--acc-hi-rgb),.38);
  --violet:var(--acc-x-9f7bff);        --violet-soft:rgba(var(--acc-x-rgb-9f7bff),.15);
  --aqua:#20C7D9;          --aqua-soft:rgba(32,199,217,.14);
  --success:#00C98B;       --success-soft:rgba(0,201,139,.15);
  --warn:#FF9F1C;          --warn-soft:rgba(255,159,28,.14);
  --danger:#FF4D5D;        --danger-soft:rgba(255,77,93,.15);
  --gold:#D9A441;          --gold-soft:rgba(217,164,65,.15);

  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 4px 10px rgba(0,0,0,.22), 0 12px 35px rgba(0,0,0,.18);
  --shadow-lg:0 8px 18px rgba(0,0,0,.30), 0 28px 70px rgba(0,0,0,.34);
  --shadow-xl:0 30px 80px -22px rgba(0,0,0,.62);
  --shadow-primary:0 8px 24px -8px rgba(var(--acc-rgb),.55);

  --glow-ai:radial-gradient(60% 130% at 50% 0%,rgba(var(--acc-rgb),.22),transparent 70%);
  --grad-brand:linear-gradient(135deg,var(--acc-1) 0%,var(--acc-2) 100%);
  --grad-brand-soft:linear-gradient(135deg,rgba(var(--acc-rgb),.16),rgba(var(--acc-deep-rgb),.12) 100%);
  --blur:18px;
  --map-land:#232F4D; --map-road:#2E3C6B; --map-water:#0C1930;
  color-scheme:dark;
}

/* ══════════════ ADAPTIVE — follows the OS ═════════════════════ */
@media (prefers-color-scheme:dark){
  [data-theme="adaptive"]{
    --bg:#0B1020; --bg-2:#10182B; --canvas:#0B1020;
    --surface:#151F33; --surface-2:#1B2740; --surface-3:#223052;
    --surface-glass:rgba(21,31,51,.72);
    --line:#293650; --line-2:rgba(41,54,80,.55); --line-strong:#31405F;
    --ink:#FFFFFF; --ink-2:#D5DCEA; --muted:#A8B2C5; --faint:#68758B;
    --primary:var(--acc-hi); --primary-hover:var(--acc-hi2); --primary-soft:rgba(var(--acc-rgb),.16);
    --primary-ring:rgba(var(--acc-hi-rgb),.38);
    --violet:var(--acc-x-9f7bff); --violet-soft:rgba(var(--acc-x-rgb-9f7bff),.15);
    --aqua:#20C7D9;   --aqua-soft:rgba(32,199,217,.14);
    --success:#00C98B; --success-soft:rgba(0,201,139,.15);
    --warn:#FF9F1C;   --warn-soft:rgba(255,159,28,.14);
    --danger:#FF4D5D; --danger-soft:rgba(255,77,93,.15);
    --gold:#D9A441;   --gold-soft:rgba(217,164,65,.15);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow-md:0 4px 10px rgba(0,0,0,.22), 0 12px 35px rgba(0,0,0,.18);
    --shadow-lg:0 8px 18px rgba(0,0,0,.30), 0 28px 70px rgba(0,0,0,.34);
    --shadow-xl:0 30px 80px -22px rgba(0,0,0,.62);
    --shadow-primary:0 8px 24px -8px rgba(var(--acc-rgb),.55);
    --glow-ai:radial-gradient(60% 130% at 50% 0%,rgba(var(--acc-rgb),.22),transparent 70%);
    --grad-brand:linear-gradient(135deg,var(--acc-1) 0%,var(--acc-2) 100%);
    --grad-brand-soft:linear-gradient(135deg,rgba(var(--acc-rgb),.16),rgba(var(--acc-deep-rgb),.12) 100%);
    --blur:18px; --map-land:#232F4D; --map-road:#2E3C6B; --map-water:#0C1930;
    color-scheme:dark;
  }
}

/* ── theme transition: short, and never on first paint ─────────── */
.theming, .theming *{
  transition:background-color 180ms var(--ease-out), color 180ms var(--ease-out),
             border-color 180ms var(--ease-out) !important;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* ══════════════════════════════════════════════════════════════════════
   ConnectAndBuy — Core component layer v2.  Token-driven; no hex here.
   ══════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r-xs)}
::selection{background:var(--primary-soft)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── type ─────────────────────────────────────────────────────── */
.t-display{font-size:var(--fs-display);font-weight:800;letter-spacing:var(--tr-display);line-height:var(--lh-tight)}
.t-h1{font-size:var(--fs-h1);font-weight:750;letter-spacing:var(--tr-head);line-height:1.16}
.t-h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:var(--tr-head);line-height:1.25}
.t-h3{font-size:var(--fs-h3);font-weight:650;letter-spacing:-.016em}
.t-sm{font-size:var(--fs-sm)} .t-xs{font-size:var(--fs-xs)}
.t-label{font-size:var(--fs-micro);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--faint)}
.t-mut{color:var(--muted)} .t-faint{color:var(--faint)}
.t-num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.t-price{font-size:18px;font-weight:750;letter-spacing:-.028em;font-variant-numeric:tabular-nums}

/* ── surfaces ─────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),border-color var(--t-base)}
.card-2{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md)}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.glass{background:var(--surface-glass);backdrop-filter:blur(var(--blur)) saturate(1.5);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.5);border:1px solid var(--line)}
.tint{background:var(--surface-3)}

/* ── buttons ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:40px;padding:0 18px;
  border-radius:var(--r-pill);font-size:var(--fs-body);font-weight:650;letter-spacing:-.01em;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease-out),background var(--t-fast),box-shadow var(--t-fast),opacity var(--t-fast)}
.btn:active{transform:scale(.97)}
.btn-pri{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-primary)}
.btn-pri:hover{background:var(--primary-hover)}
.btn-ai{background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-primary)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{border-color:var(--line-strong);background:var(--surface-2)}
.btn-quiet{color:var(--muted)} .btn-quiet:hover{color:var(--ink);background:var(--surface-2)}
.btn-sm{height:32px;padding:0 13px;font-size:var(--fs-sm)}
.btn-lg{height:48px;padding:0 24px;font-size:16px}
.btn-icon{width:38px;height:38px;padding:0;border-radius:var(--r-pill)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ── chips ────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);color:var(--muted);
  font-size:var(--fs-sm);font-weight:600;white-space:nowrap;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.chip:hover{border-color:var(--line-strong);color:var(--ink)}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"],.chip.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.chip-ai{background:var(--grad-brand-soft);border-color:transparent;color:var(--ink)}
.chip-sm{height:24px;padding:0 9px;font-size:var(--fs-xs)}
.chip-x{opacity:.55;font-size:14.5px;line-height:1;margin-left:1px}
.chip-x:hover{opacity:1}

/* ── badges ───────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;height:21px;padding:0 8px;border-radius:var(--r-xs);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em}
.b-ok{background:var(--success-soft);color:var(--success)}
.b-warn{background:var(--warn-soft);color:var(--warn)}
.b-bad{background:var(--danger-soft);color:var(--danger)}
.b-pri{background:var(--primary-soft);color:var(--primary)}
.b-aqua{background:var(--aqua-soft);color:var(--aqua)}
.b-neutral{background:var(--surface-3);color:var(--muted)}

/* ── inputs ───────────────────────────────────────────────────── */
.field{display:flex;align-items:center;gap:var(--s2);height:42px;padding:0 14px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)}
.field input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:var(--fs-body);color:var(--ink)}
.field input::placeholder{color:var(--faint)}
.switch{width:38px;height:22px;border-radius:var(--r-pill);background:var(--line-strong);position:relative;
  flex:0 0 auto;transition:background var(--t-base) var(--ease-out);cursor:pointer}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--t-base) var(--ease-spring)}
.switch[aria-checked="true"]{background:var(--primary)}
.switch[aria-checked="true"]::after{transform:translateX(16px)}

/* ── segmented control (theme selector, view modes) ───────────── */
.seg{display:inline-flex;gap:3px;padding:3px;border-radius:var(--r-md);background:var(--surface-3)}
.seg button{height:32px;padding:0 14px;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;
  color:var(--muted);transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.seg button:hover{color:var(--ink)}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}

/* ── AI surfaces ──────────────────────────────────────────────── */
.ai-ring{position:relative}
.ai-ring::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:var(--grad-brand);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.85}
.ai-glow{position:relative}
.ai-glow::after{content:"";position:absolute;inset:-30% -10% auto;height:150%;background:var(--glow-ai);
  pointer-events:none;z-index:-1}
.ai-dot{width:6px;height:6px;border-radius:50%;background:var(--grad-brand);flex:0 0 auto}
@keyframes cabPulse{0%,100%{opacity:.35;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}
.ai-think span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--primary);margin-right:4px;
  animation:cabPulse 1.05s infinite var(--ease-out)}
.ai-think span:nth-child(2){animation-delay:.16s;background:var(--violet)}
.ai-think span:nth-child(3){animation-delay:.32s;background:var(--aqua)}
.grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── skeleton ─────────────────────────────────────────────────── */
@keyframes cabShim{100%{background-position:200% 0}}
.skel{background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-3) 40%,var(--surface-2) 80%);
  background-size:200% 100%;animation:cabShim 1.3s infinite linear;border-radius:var(--r-sm)}

/* ── sheets / modals ──────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(6,10,22,.5);backdrop-filter:blur(3px);z-index:var(--z-sheet);
  opacity:0;pointer-events:none;transition:opacity var(--t-base) var(--ease-out)}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sheet);background:var(--surface);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;border-top:1px solid var(--line);box-shadow:var(--shadow-xl);
  transform:translateY(100%);transition:transform var(--t-slow) var(--ease-out);max-height:88%;display:flex;flex-direction:column}
.sheet.on{transform:translateY(0)}
.sheet-grab{width:38px;height:4px;border-radius:2px;background:var(--line-strong);margin:10px auto 2px;flex:0 0 auto}
.modal{position:fixed;z-index:var(--z-modal);inset:0;display:grid;place-items:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity var(--t-base) var(--ease-out)}
.modal.on{opacity:1;pointer-events:auto}
.modal-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-xl);width:min(1080px,100%);max-height:88vh;display:flex;flex-direction:column;
  transform:translateY(12px) scale(.985);transition:transform var(--t-slow) var(--ease-out)}
.modal.on .modal-box{transform:none}

/* ── toast ────────────────────────────────────────────────────── */
.toastwrap{position:fixed;z-index:var(--z-toast);bottom:24px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);font-size:var(--fs-sm);
  font-weight:600;animation:cabToast 260ms var(--ease-spring)}
@keyframes cabToast{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}

/* ── listing card ─────────────────────────────────────────────── */
.lcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  cursor:pointer;transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base),border-color var(--t-base)}
.lcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.lcard-img{position:relative;overflow:hidden;background:var(--surface-3)}
.lcard-img>.ph{transition:transform 520ms var(--ease-out)}
.lcard:hover .lcard-img>.ph{transform:scale(1.045)}
.lcard-acts{position:absolute;right:8px;bottom:8px;display:flex;gap:6px;opacity:0;transform:translateY(5px);
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
.lcard:hover .lcard-acts{opacity:1;transform:none}
.fab{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-glass);backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.fab:hover{background:var(--surface)}
.fab.on svg{fill:var(--danger);stroke:var(--danger)}
@keyframes cabPop{0%{transform:scale(1)}42%{transform:scale(1.28)}100%{transform:scale(1)}}
.fab.pop{animation:cabPop 340ms var(--ease-spring)}

/* ── score ring ───────────────────────────────────────────────── */
.ring{transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset 900ms var(--ease-out)}

/* ── nav ──────────────────────────────────────────────────────── */
.navlink{position:relative;padding:8px 0;font-size:var(--fs-sm);font-weight:550;color:var(--muted);
  transition:color var(--t-fast)}
.navlink:hover{color:var(--ink)}
.navlink[aria-current="true"]{color:var(--ink);font-weight:650}
.navind{position:absolute;height:2px;border-radius:2px;background:var(--primary);bottom:0;
  transition:left var(--t-base) var(--ease-out),width var(--t-base) var(--ease-out)}

/* ── util ─────────────────────────────────────────────────────── */
.row{display:flex;align-items:center} .col{display:flex;flex-direction:column}
.g1{gap:4px}.g2{gap:8px}.g3{gap:12px}.g4{gap:16px}.g5{gap:20px}.g6{gap:24px}
.f1{flex:1;min-width:0} .wrap{flex-wrap:wrap}
.hide{display:none!important}
.ph{width:100%;height:100%;display:block}
.scroll-x{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.scroll-x::-webkit-scrollbar{display:none}
.scroll-y{overflow-y:auto;scrollbar-width:thin}
.scroll-y::-webkit-scrollbar{width:8px}
.scroll-y::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}
/* ══════════ desktop app shell ══════════ */
.app{min-height:100vh;background:var(--bg)}
.shell{max-width:1560px;margin:0 auto;padding:0 28px}

/* top bar — morphing */
#topbar{position:sticky;top:0;z-index:var(--z-sticky);background:var(--surface-glass);
  backdrop-filter:blur(var(--blur)) saturate(1.6);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  border-bottom:1px solid var(--line);transition:box-shadow var(--t-base) var(--ease-out)}
#topbar.stuck{box-shadow:var(--shadow-md)}
.tb-row1{display:flex;align-items:center;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.bmark{width:30px;height:30px;border-radius:9px;background:var(--grad-brand);display:grid;place-items:center;
  color:#fff;font-size:16px;font-weight:800;box-shadow:var(--shadow-primary)}
.bword{font-size:17px;font-weight:750;letter-spacing:-.035em;color:var(--ink)}
.bword i{font-style:normal;color:var(--aqua)}

/* mode tabs */
.modes{display:flex;gap:2px;position:relative}
.mode{padding:7px 14px;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;color:var(--muted);
  display:flex;align-items:center;gap:7px;transition:color var(--t-fast),background var(--t-fast)}
.mode:hover{color:var(--ink);background:var(--surface-2)}
.mode[aria-selected="true"]{color:var(--ink);background:var(--surface-3)}
.mode[aria-selected="true"] svg{color:var(--primary)}

/* the search — morphs between compact and full */
.searchwrap{position:relative;flex:1;max-width:900px;min-width:280px}
#search{display:flex;align-items:center;gap:11px;height:58px;padding:0 8px 0 20px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);cursor:text;
  transition:height var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),
             border-color var(--t-base),transform var(--t-base) var(--ease-out)}
#search:hover{box-shadow:var(--shadow-md)}
#search.compact{height:42px;padding-left:16px}
#search.focused{box-shadow:var(--shadow-lg),0 0 0 4px var(--primary-ring);border-color:var(--primary)}
#search input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:16px;font-weight:500;color:var(--ink)}
#search.compact input{font-size:15px}
#search input::placeholder{color:var(--faint);font-weight:450}
.s-scope{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--muted);
  flex:0 0 auto;transition:border-color var(--t-fast)}
.s-scope:hover{border-color:var(--line-strong);color:var(--ink)}
.s-go{width:42px;height:42px;border-radius:50%;background:var(--grad-brand);display:grid;place-items:center;
  color:#fff;flex:0 0 auto;box-shadow:var(--shadow-primary);transition:transform var(--t-fast) var(--ease-spring)}
#search.compact .s-go{width:32px;height:32px}
.s-go:hover{transform:scale(1.07)}
.kbd{display:inline-flex;align-items:center;gap:2px;height:22px;padding:0 7px;border-radius:5px;
  background:var(--surface-3);border:1px solid var(--line);font-size:12.5px;font-weight:650;color:var(--faint);
  flex:0 0 auto;font-family:ui-monospace,monospace}

/* search dropdown */
#sdrop{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:var(--z-drop);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);
  padding:8px;opacity:0;transform:translateY(-6px) scale(.99);pointer-events:none;
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);
  max-height:min(560px,70vh);overflow:auto}
#sdrop.on{opacity:1;transform:none;pointer-events:auto}
.sd-sec{padding:10px 12px 4px}
.sd-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;
  transition:background var(--t-fast)}
.sd-item:hover,.sd-item.cursor{background:var(--surface-3)}
.sd-ic{width:30px;height:30px;border-radius:var(--r-sm);background:var(--surface-3);display:grid;place-items:center;
  color:var(--muted);flex:0 0 auto}
.sd-item.ai .sd-ic{background:var(--grad-brand-soft);color:var(--primary)}

/* vertical category rail */
.rail{position:sticky;top:104px;align-self:start;width:236px;flex:0 0 auto}
.railcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.railitem{display:flex;align-items:center;gap:11px;padding:9px 12px;cursor:pointer;position:relative;
  transition:background var(--t-fast)}
.railitem:hover{background:var(--surface-3)}
.railitem.on{background:var(--primary-soft)}
.railitem.on .ri-ic{background:var(--grad-brand);color:#fff}
.railitem.on .ri-n{color:var(--ink);font-weight:650}
.ri-ic{width:32px;height:32px;border-radius:var(--r-sm);background:var(--surface-3);display:grid;place-items:center;
  color:var(--muted);flex:0 0 auto;transition:background var(--t-fast),color var(--t-fast)}
.ri-n{font-size:14.5px;font-weight:550;color:var(--ink-2);flex:1;min-width:0}
.ri-c{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
/* flyout */
.flyout{position:absolute;left:calc(100% + 10px);top:0;width:520px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);padding:16px;
  opacity:0;pointer-events:none;transform:translateX(-6px);z-index:var(--z-drop);
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
.railitem:hover .flyout{opacity:1;pointer-events:auto;transform:none}

/* smart actions */
.smart{display:flex;gap:12px;flex-wrap:wrap}
.sa{display:flex;align-items:center;gap:11px;padding:13px 16px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);cursor:pointer;flex:1;min-width:210px;
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base),border-color var(--t-base)}
.sa:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.sa-ic{width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center;flex:0 0 auto}

/* results */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ph-g{width:100%;height:100%}

/* map */
.mapcanvas{position:relative;background:var(--map-land);border-radius:var(--r-lg);overflow:hidden}
.mroad{position:absolute;background:var(--map-road);opacity:.7}
.mwater{position:absolute;background:var(--map-water)}
.mpin{position:absolute;transform:translate(-50%,-100%);cursor:pointer;z-index:2;
  transition:transform var(--t-base) var(--ease-spring)}
.mpin:hover,.mpin.on{transform:translate(-50%,-100%) scale(1.1);z-index:5}
.mpin-b{padding:5px 10px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-md);font-size:13.5px;font-weight:700;white-space:nowrap;color:var(--ink)}
.mpin.on .mpin-b{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.mheat{position:absolute;border-radius:50%;pointer-events:none}

/* AI dock */
#aidock{position:fixed;top:0;right:0;bottom:0;width:400px;z-index:var(--z-sheet);background:var(--surface);
  border-left:1px solid var(--line);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform var(--t-slow) var(--ease-out)}
#aidock.on{transform:none}
.aimsg{padding:12px 14px;border-radius:var(--r-lg);font-size:15px;line-height:1.6}
.aimsg.me{background:var(--primary);color:var(--on-primary);align-self:flex-end;max-width:82%;
  border-bottom-right-radius:var(--r-xs)}
.aimsg.bot{background:var(--surface-3);color:var(--ink);align-self:flex-start;max-width:94%;
  border-bottom-left-radius:var(--r-xs)}
.actpill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-xs);
  background:var(--surface);border:1px dashed var(--primary);color:var(--primary);
  font-size:12.5px;font-weight:700;font-family:ui-monospace,monospace;letter-spacing:.02em}

/* palette */
#palette .modal-box{width:min(660px,100%);max-height:70vh}

/* compare tray */
#tray{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);z-index:var(--z-toast);
  display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-xl);
  transition:transform var(--t-slow) var(--ease-spring)}
#tray.on{transform:translate(-50%,0)}
.traythumb{width:38px;height:38px;border-radius:var(--r-sm);overflow:hidden;position:relative;flex:0 0 auto}

/* AI dock open: page stays fully visible and keeps working */
body.aiopen .app{padding-right:400px;transition:padding var(--t-slow) var(--ease-out)}
body.aiopen #aifab{opacity:0;pointer-events:none;transform:translateY(10px)}
body.aiopen .modes{display:none}
body.aiopen .searchslot{max-width:520px}
body.aiopen .tb-row1{gap:12px}
.tb-row1{min-width:0}
#aifab{position:fixed;right:22px;bottom:22px;z-index:70;height:50px;width:50px;padding:0;border-radius:25px;
  overflow:hidden;justify-content:flex-start;gap:0;
  transition:width var(--t-base) var(--ease-out),opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
#aifab>span:first-child{width:50px;display:grid;place-items:center;flex:0 0 auto}
.fablabel{opacity:0;white-space:nowrap;padding-right:20px;transition:opacity var(--t-fast) var(--ease-out)}
#aifab:hover{width:186px} #aifab:hover .fablabel{opacity:1}
#aifab:focus-visible{width:186px} #aifab:focus-visible .fablabel{opacity:1}
.app{transition:padding var(--t-slow) var(--ease-out)}
@media(max-width:1240px){ body.aiopen .app{padding-right:0} }

/* views */
.view{display:none} .view.on{display:block;animation:vIn 300ms var(--ease-out)}
@keyframes vIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* niche */
.nrow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:11px 0;
  border-top:1px solid var(--line-2)}
.meterbar{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.meterbar>i{display:block;height:100%;border-radius:3px;transition:width 900ms var(--ease-out)}
.whybar{display:flex;align-items:center;gap:10px;padding:6px 0}
.factorpill{width:44px;text-align:right;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}

@media(max-width:1380px){ .grid-4{grid-template-columns:repeat(3,1fr)} }
@media(max-width:1180px){
  .rail{display:none} .grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}
  .modes{display:none} .searchwrap{min-width:200px}
  #v-listing>div[style*="grid-template-columns:1fr 390px"]{grid-template-columns:1fr!important}
  #ndwrap>div[style*="1.3fr 1fr"],#ndwrap>div[style*="1fr 1fr"],#createwrap>div[style*="1fr 360px"]{grid-template-columns:1fr!important}
  #resmap>div{grid-template-columns:1fr!important}
}
@media(max-width:980px){ .shell{padding:0 16px} .grid-4,.grid-3,.grid-2{grid-template-columns:1fr} }


#statepick{position:fixed;left:18px;bottom:18px;z-index:94;max-width:270px}
#statetoggle{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:19px;
  background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow-lg);
  font-size:13.5px;font-weight:650;color:var(--ink)}
#statetoggle:hover{border-color:var(--primary);color:var(--primary)}
#statelist{display:none;margin-top:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-xl);padding:8px;max-height:60vh;overflow:auto}
#statepick.open #statelist{display:block}
#statelist button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:var(--r-sm);
  font-size:13.5px;color:var(--ink-2);font-weight:550}
#statelist button:hover{background:var(--surface-3);color:var(--primary)}
#statelist .t-label{padding:8px 10px 4px}

.gprompt{position:fixed;right:22px;top:84px;width:340px;z-index:93;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);padding:17px 18px;
  transform:translateY(-16px) scale(.97);opacity:0;transition:all var(--t-slow) var(--ease-spring)}
.gprompt.on{transform:none;opacity:1}

/* ══════════ header · hamburger · flying search ══════════ */
.hamb{width:38px;height:38px;border-radius:11px;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;flex:0 0 auto;border:1px solid var(--line);background:var(--surface);
  transition:all var(--t-fast)}
.hamb:hover{border-color:var(--primary);background:var(--primary-soft)}
.hamb i{display:block;width:15px;height:1.8px;border-radius:1px;background:var(--ink-2);transition:all var(--t-base) var(--ease-out)}
.hamb[aria-expanded="true"] i:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.hamb[aria-expanded="true"] i:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}
body:not(.home) .hamb{display:flex}

/* the slot only reserves space — the bar itself is fixed and animates between slots */
.searchslot{flex:1;min-width:0;height:52px}
.searchslot.hero{flex:none;width:100%;max-width:760px;height:62px;margin-top:22px}

.searchwrap{position:fixed;z-index:calc(var(--z-sticky) + 2);
  transition:left .46s var(--ease-spring), top .46s var(--ease-spring),
             width .46s var(--ease-spring), height .34s var(--ease-out);
  will-change:left,top,width}
.searchwrap.settling #search{box-shadow:0 0 0 4px var(--primary-ring), var(--shadow-lg)}
.searchwrap #search{transition:height var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),
  border-radius var(--t-base) var(--ease-out),background var(--t-base)}
.searchwrap.docked #search{height:52px;border-radius:26px}
.searchwrap:not(.docked) #search{height:62px;border-radius:31px;box-shadow:var(--shadow-lg)}
.searchwrap:not(.docked) #sinput{font-size:16.5px}
@media (prefers-reduced-motion:reduce){ .searchwrap{transition:none} }

/* hero banner */
.herobanner{padding:44px 44px 40px}

/* hero: type on the left, live inventory as the anchor on the right */
.herobanner{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:center}
.heroaside{display:flex;flex-direction:column;gap:10px}
.hcard{display:flex;gap:11px;align-items:center;padding:9px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-align:left;
  transition:background var(--t-fast),transform var(--t-fast)}
.hcard:hover{background:rgba(255,255,255,.13);transform:translateX(-3px)}
.hcard .ph{border-radius:9px}
@media(max-width:1240px){ .herobanner{grid-template-columns:1fr} .heroaside{display:none} }

.herobanner .t-mut{color:var(--band-ink-mut)}
.herobg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 130% at 12% -20%,color-mix(in srgb,var(--primary) 15%,transparent),transparent 62%),
             radial-gradient(60% 120% at 96% 120%,color-mix(in srgb,var(--aqua) 14%,transparent),transparent 60%),
             var(--grad-brand-soft)}
.heroinner{position:relative;z-index:1}

/* the category drawer, consistent on every page */
#navdrawer{position:fixed;left:0;top:0;bottom:0;width:300px;z-index:var(--z-modal);background:var(--surface);
  border-right:1px solid var(--line);box-shadow:var(--shadow-xl);transform:translateX(-101%);
  transition:transform var(--t-slow) var(--ease-out);display:flex;flex-direction:column}
#navdrawer.on{transform:none}
#navdrawer .ndhead{padding:16px 18px 12px;display:flex;align-items:center;gap:10px;flex:0 0 auto}
#navdrawer .ndlist{overflow:auto;padding:0 10px 18px;flex:1}
.ndrow{display:flex;align-items:center;gap:12px;width:100%;padding:13px 10px;text-align:left;
  border-radius:var(--r-md);transition:background var(--t-fast),color var(--t-fast);position:relative}
.ndrow + .ndrow::before{content:"";position:absolute;left:10px;right:10px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 18%,var(--line-strong) 82%,transparent)}
.ndrow:hover{background:var(--surface-3);color:var(--primary)}
.ndsec{padding:16px 12px 7px;position:relative}
.ndsec::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:1px;
  background:linear-gradient(90deg,var(--line-strong),transparent)}
/* ══════════════ desktop communications ══════════════ */
:root,[data-theme="default"]{--call-a:var(--acc-x-1e1650);--call-b:var(--acc-x-2c1d66);--call-c:#0F4C5C;--call-ink:#fff;--call-dim:rgba(255,255,255,.68)}
[data-theme="dark"]{--call-a:#0B1020;--call-b:var(--acc-ink2);--call-c:#093038;--call-ink:#FFFFFF;--call-dim:rgba(255,255,255,.6)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-theme="adaptive"],[data-theme="adaptive"]{--call-a:#0B1020;--call-b:var(--acc-ink2);--call-c:#093038;--call-ink:#FFFFFF;--call-dim:rgba(255,255,255,.6)}}
#callwin{position:fixed;right:22px;bottom:22px;width:372px;z-index:95;display:none;
  border-radius:var(--r-2xl);overflow:hidden;box-shadow:0 34px 80px -22px rgba(0,0,0,.6);
  background:linear-gradient(168deg,var(--call-a) 0%,var(--call-b) 52%,var(--call-c) 100%);
  color:var(--call-ink);animation:callin .34s var(--ease-spring)}
#callwin.on{display:block}
#callwin.incoming{width:392px;animation:callin .34s var(--ease-spring)}
@keyframes callin{from{transform:translateY(28px) scale(.96);opacity:0}to{transform:none;opacity:1}}
#callwin::before{content:"";position:absolute;left:-20%;top:-30%;width:150%;height:90%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(var(--acc-hi-rgb),.32),transparent 70%);pointer-events:none}
#callwin .cwin{position:relative;z-index:2;padding:18px 20px 20px}
.cavatar{width:74px;height:74px;border-radius:26px;display:grid;place-items:center;color:#fff;
  font-size:27px;font-weight:750;background:var(--grad-brand);box-shadow:0 14px 34px -12px rgba(0,0,0,.55);position:relative}
.cavatar.pulse::after{content:"";position:absolute;inset:-8px;border-radius:34px;
  border:2px solid rgba(255,255,255,.34);animation:cpulse 1.9s var(--ease-out) infinite}
@keyframes cpulse{0%{transform:scale(.94);opacity:.9}100%{transform:scale(1.2);opacity:0}}
.cbtn{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.16);transition:all var(--t-fast)}
.cbtn:hover{background:rgba(255,255,255,.26)}
.cbtn.on{background:#fff;color:var(--acc-x-231856);border-color:#fff}
.cbtn.end{background:var(--danger);border-color:transparent}
.cbtn.ans{background:var(--success);border-color:transparent}
.cbtn.sm{width:42px;height:42px}
.cbtn:disabled{opacity:.4;cursor:not-allowed}
.clabel{font-size:12px;color:var(--call-dim);text-align:center;margin-top:6px;font-weight:600}
.cctx{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg)}
.cqa{height:30px;padding:0 11px;border-radius:15px;background:rgba(255,255,255,.13);color:#fff;
  border:1px solid rgba(255,255,255,.15);font-size:12.5px;font-weight:600;display:inline-flex;
  align-items:center;gap:5px;flex:0 0 auto;white-space:nowrap}
.cqa:hover{background:rgba(255,255,255,.24)}
.qdot{display:inline-flex;gap:2px;align-items:flex-end;height:10px}
.qdot i{width:3px;border-radius:1px;background:currentColor;display:block}
.qdot i:nth-child(1){height:4px}.qdot i:nth-child(2){height:7px}.qdot i:nth-child(3){height:10px}
.qdot.q2 i:nth-child(3){opacity:.3}
.qdot.q1 i:nth-child(2),.qdot.q1 i:nth-child(3){opacity:.3}
#callpill{position:fixed;right:22px;bottom:22px;z-index:95;height:52px;border-radius:26px;
  display:none;align-items:center;gap:11px;padding:0 10px 0 16px;color:#fff;cursor:pointer;
  background:linear-gradient(112deg,var(--acc-hover),#14828F);box-shadow:0 18px 40px -14px rgba(0,0,0,.55);
  animation:callin .3s var(--ease-spring)}
#callpill.on{display:flex}
.livedot{width:8px;height:8px;border-radius:50%;background:#63DEEA;animation:live 1.5s ease-in-out infinite;flex:0 0 auto}
@keyframes live{0%,100%{opacity:1}50%{opacity:.25}}
.sw{width:40px;height:24px;border-radius:12px;background:var(--line-strong);position:relative;flex:0 0 auto;transition:background var(--t-base)}
.sw.on{background:var(--primary)}
.sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:left var(--t-base) var(--ease-spring)}
.sw.on i{left:19px}


/* ══════════════════════════════════════════════════════════════════════
   ConnectAndBuy — visual overhaul
   The page was one continuous ground with faintly-bordered white cards on
   it, so nothing had edges. Three changes fix that:
     1. the page is a stack of BANDS — ink blocks against paper blocks
     2. elevation is declared ONCE — shadow on paper, hairline on ink
     3. contrast and type run at full strength instead of half
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1 · grounds ─────────────────────────────────────────────────── */
:root,[data-theme="default"]{
  --bg:#F2F2F8;                 /* deeper paper so white actually lifts off it */
  --bg-2:#E8E7F3;
  --surface:#FFFFFF;
  --surface-2:var(--acc-x-faf9fe);
  --surface-3:#EFEFF7;
  --line:var(--acc-x-e0dff0);
  --line-2:#ECEBF5;
  --line-strong:#CBCBE0;
  --ink:#0B1020;
  --ink-2:#293650;
  --muted:#5C6478;
  --faint:#8A93AC;
  --shadow-sm:0 1px 2px rgba(11,16,32,.06);
  --shadow-md:0 6px 16px -6px rgba(11,16,32,.14), 0 2px 5px -3px rgba(11,16,32,.08);
  --shadow-lg:0 18px 40px -18px rgba(11,16,32,.26), 0 6px 14px -8px rgba(11,16,32,.12);
  --shadow-xl:0 34px 70px -28px rgba(11,16,32,.34);
}
[data-theme="dark"]{
  --bg:#0B1020; --bg-2:#10182B;
  --surface:#151F33; --surface-2:#1B2740; --surface-3:#223052;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.055); --line-strong:rgba(255,255,255,.18);
  --ink:var(--acc-x-faf9fe); --ink-2:#D5D5E8; --muted:#A0A6BC; --faint:#6E7690;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow-md:0 6px 18px -6px rgba(0,0,0,.62);
  --shadow-lg:0 20px 44px -18px rgba(0,0,0,.72);
  --shadow-xl:0 36px 76px -28px rgba(0,0,0,.8);
}
@media (prefers-color-scheme:dark){[data-theme="adaptive"]{
  --bg:#0B1020; --bg-2:#10182B;
  --surface:#151F33; --surface-2:#1B2740; --surface-3:#223052;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.055); --line-strong:rgba(255,255,255,.18);
  --ink:var(--acc-x-faf9fe); --ink-2:#D5D5E8; --muted:#A0A6BC; --faint:#6E7690;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow-md:0 6px 18px -6px rgba(0,0,0,.62);
  --shadow-lg:0 20px 44px -18px rgba(0,0,0,.72);
  --shadow-xl:0 36px 76px -28px rgba(0,0,0,.8);
}}

/* the ink band is the same deep midnight in every theme — that is the point */
:root{
  --band-ink:#0B1020;
  --band-ink-2:#10182B;
  --band-ink-line:rgba(255,255,255,.10);
  --band-ink-ink:#FFFFFF;
  --band-ink-mut:#9AA1B9;
  --r-card:14px;
  --r-band:26px;
}

/* ── 2 · elevation, declared once ────────────────────────────────── */
.card{
  background:var(--surface);
  border:0;
  border-radius:var(--r-card);
  box-shadow:var(--shadow-md);
  transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.card:hover{ box-shadow:var(--shadow-lg) }
.card-2{ background:var(--surface-2); border:0; border-radius:12px; box-shadow:none }
.card-hover:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg) }
/* on an ink band the shadow disappears, so a hairline carries the edge instead */
.band-ink .card, .band-ink .card-2{
  background:var(--band-ink-2); border:1px solid var(--band-ink-line); box-shadow:none; color:var(--band-ink-ink);
}

/* ── 3 · the bands ───────────────────────────────────────────────── */
.band{ position:relative; border-radius:var(--r-band); overflow:hidden }
.band-ink{
  background:linear-gradient(168deg,var(--band-ink) 0%,var(--band-ink-2) 58%,#0B1930 100%);
  color:var(--band-ink-ink);
}
.band-ink::before{
  content:""; position:absolute; left:-10%; top:-45%; width:75%; height:150%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(var(--acc-hi-rgb),.30),transparent 68%);
}
.band-ink::after{
  content:""; position:absolute; right:-14%; bottom:-55%; width:70%; height:150%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(32,199,217,.20),transparent 66%);
}
.band-ink > *{ position:relative; z-index:1 }
.band-ink .t-mut,.band-ink .t-faint{ color:var(--band-ink-mut) }
.band-ink .t-label{ color:var(--aqua) }
.band-ink .t-h1,.band-ink .t-h2,.band-ink .t-h3,.band-ink .t-display{ color:var(--band-ink-ink) }
.band-ink .btn-ghost{ background:rgba(255,255,255,.09); color:#fff; border:1px solid rgba(255,255,255,.16) }
.band-ink .btn-ghost:hover{ background:rgba(255,255,255,.16) }
.band-ink .chip{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:var(--acc-x-e0dff0) }

/* ── 4 · type at full strength ───────────────────────────────────── */
.t-display{ font-size:clamp(34px,4.2vw,58px); line-height:1.02; letter-spacing:-.035em; font-weight:800 }
.t-h1{ font-size:clamp(26px,2.6vw,36px); line-height:1.08; letter-spacing:-.03em; font-weight:780 }
.t-h2{ font-size:23px; line-height:1.16; letter-spacing:-.025em; font-weight:750 }
.t-h3{ font-size:16.5px; letter-spacing:-.015em; font-weight:700 }
.t-label{ font-size:12.5px; letter-spacing:.15em; text-transform:uppercase; font-weight:750; color:var(--muted) }
.t-price{ letter-spacing:-.03em; font-weight:800 }

/* ── 5 · the vertical rail — faded separators between every item ─── */
.railcard{ background:var(--surface); border:0; border-radius:var(--r-card); box-shadow:var(--shadow-md); overflow:visible }
.railitem{ position:relative }
.railitem + .railitem::before,
#raillist .railitem + .railitem::before{
  content:""; position:absolute; left:13px; right:13px; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--line-strong) 16%,var(--line-strong) 84%,transparent);
}
.railitem.on::before, .railitem:hover::before{ opacity:.5 }
.railitem.on{ background:var(--primary-soft) }

/* ── 6 · cards carry their image, badge and price ────────────────── */
.lcard{ border:0; box-shadow:var(--shadow-md); border-radius:var(--r-card); overflow:hidden }
.lcard:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px) }
.ph{ position:relative }

/* ── 7 · controls ────────────────────────────────────────────────── */
.btn{ border-radius:11px; font-weight:650; letter-spacing:-.005em }
.btn-lg{ border-radius:13px }
.btn-pri{ box-shadow:0 8px 20px -8px rgba(var(--acc-rgb),.55) }
.btn-pri:hover{ box-shadow:0 12px 26px -10px rgba(var(--acc-rgb),.65) }
.btn-icon{ border-radius:11px }
.chip{ border-radius:999px }
.badge{ border-radius:7px; font-weight:700; letter-spacing:.01em }

/* ── 8 · the surfaces we did not draw ────────────────────────────── */
::selection{ background:color-mix(in srgb,var(--primary) 28%,transparent); color:var(--ink) }
:root{ caret-color:var(--primary) }
*{ scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent }
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:6px; border:3px solid transparent; background-clip:content-box }
*::-webkit-scrollbar-thumb:hover{ background:var(--muted); background-clip:content-box }
*::-webkit-scrollbar-track{ background:transparent }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:6px }
.t-num,.t-price{ font-variant-numeric:tabular-nums }


/* ── contrast floor: text and placeholders ≥4.5:1, on-tint text darkened ── */
:root,[data-theme="default"]{
  --faint:#666E85;                 /* was #8A93AC — 2.95:1 on white, below floor */
  --success-ink:#00795A; --warn-ink:#9A6403; --danger-ink:#C21D2E; --primary-ink:var(--acc-hover);
}
[data-theme="dark"]{
  --on-primary:#0B1020;            /* white on the lighter dark-mode indigo was 3.2:1 */
  --faint:#7E86A0;
  --success-ink:#57F2C4; --warn-ink:#FFC77E; --danger-ink:#FFA6AF; --primary-ink:var(--acc-x-d6c9fe);
}
@media (prefers-color-scheme:dark){[data-theme="adaptive"]{
  --on-primary:#0B1020; --faint:#7E86A0;
  --success-ink:#57F2C4; --warn-ink:#FFC77E; --danger-ink:#FFA6AF; --primary-ink:var(--acc-x-d6c9fe);
}}
input::placeholder,textarea::placeholder{ color:var(--muted); opacity:1 }
.badge.b-ok{ color:var(--success-ink) }
.badge.b-warn{ color:var(--warn-ink) }
.badge.b-danger,.badge.b-bad{ color:var(--danger-ink) }
.badge.b-pri{ color:var(--primary-ink) }
.band-ink .badge.b-ok{ color:#57F2C4 } .band-ink .badge.b-warn{ color:#FFC77E }


/* accent text on light was 4.19:1 and success 3.90:1 — both below the floor.
   NOTE: any :root token change must re-declare the dark values after it, or the
   light value wins in dark mode on equal specificity. */
:root,[data-theme="default"]{ --primary:var(--acc-1); --primary-hover:var(--acc-hover); --success:#008A61; }
[data-theme="dark"]{ --primary:var(--acc-hi); --primary-hover:var(--acc-hi2); --success:#00C98B; }
@media (prefers-color-scheme:dark){[data-theme="adaptive"]{
  --primary:var(--acc-hi); --primary-hover:var(--acc-hi2); --success:#00C98B; }}


/* Prototype marker. Listing cards carry the stamp inside their placeholder
   image; sections whose whole content is prototype carry it in the heading,
   so no fabricated row can read as live demand. */
.protochip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:11px;
  background:var(--surface-3);color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;flex:0 0 auto}
.protochip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--muted);opacity:.7}

/* the same marker on an ink band, where the paper tokens do not read */
.protochip.on-ink{background:rgba(255,255,255,.10);color:var(--band-ink-mut)}
.protochip.on-ink::before{background:var(--band-ink-mut)}

/* ── real photographs ───────────────────────────────────────────────
   The placeholder block draws a tinted panel and stamps PROTOTYPE on it.
   A real listing replaces that block entirely, so the stamp can never
   appear over a photograph a seller actually uploaded.
   ─────────────────────────────────────────────────────────────────── */
.ph-real{position:relative;overflow:hidden;background:var(--surface-3)}
.ph-real img{width:100%;height:100%;object-fit:cover;display:block}

/* ── honest empty state ─────────────────────────────────────────── */
.emptystate{text-align:center;padding:44px 24px;border:1px dashed var(--line-strong);
  border-radius:var(--r-lg);color:var(--muted)}
.emptystate .t-h3{color:var(--ink);margin-bottom:6px}
.emptystate p{margin:0 auto;max-width:44ch;font-size:15px;line-height:1.6}
.emptystate .btn{margin-top:16px}

/* ── real forms ─────────────────────────────────────────────────────
   The prototype had no inputs to speak of: every flow ended in a toast.
   These are the controls behind the flows that now reach the database.
   ─────────────────────────────────────────────────────────────────── */
.field select,.field textarea{flex:1;min-width:0;background:none;border:0;outline:0;
  font:inherit;font-size:var(--fs-body);color:var(--ink);resize:vertical}
.field select{appearance:none;cursor:pointer;padding-right:18px}
.field.tall{height:auto;min-height:96px;padding:11px 14px;align-items:flex-start}
.field.tall textarea{min-height:74px;line-height:1.55}
.formrow{display:flex;flex-direction:column;gap:6px}
.formlabel{font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.formhint{font-size:13px;color:var(--faint);line-height:1.5}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.formgrid{grid-template-columns:1fr}}
.formerr{font-size:13.5px;color:var(--danger);line-height:1.5}
.formstack{display:flex;flex-direction:column;gap:14px}
.photostrip{display:flex;gap:9px;flex-wrap:wrap}
.photoslot{width:74px;height:74px;border-radius:11px;overflow:hidden;position:relative;
  border:1px solid var(--line);background:var(--surface-3)}
.photoslot img{width:100%;height:100%;object-fit:cover;display:block}
.photoslot button{position:absolute;right:3px;top:3px;width:19px;height:19px;border-radius:50%;
  background:rgba(8,13,26,.72);color:#fff;font-size:13.5px;line-height:1;display:grid;place-items:center}
.photoadd{width:74px;height:74px;border-radius:11px;border:1px dashed var(--line-strong);
  display:grid;place-items:center;color:var(--muted);background:none;cursor:pointer}
.photoadd:hover{border-color:var(--primary);color:var(--primary)}

/* the account and posting surfaces reuse the modal shell */
#cabmodal .modal-box{width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column}
#cabmodal .modalhead{display:flex;align-items:center;gap:10px;padding:17px 20px;
  border-bottom:1px solid var(--line);flex:0 0 auto}
#cabmodal .modalbody{padding:18px 20px 20px;overflow:auto}
.linky{color:var(--primary);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.linky:hover{color:var(--primary-hover)}

/* the timestamp inside a message bubble */
.msgwhen{display:block;margin-top:5px;font-size:12px;opacity:.62;letter-spacing:.02em}
#th-msgs{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto}
#ib-body,#th-body,#cs-body{display:block}

/* a real listing: content leads, the contact panel stays in reach */
.rl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,380px);gap:38px;align-items:start}
.rl-side{position:sticky;top:88px}
@media(max-width:1080px){.rl-grid{grid-template-columns:1fr}.rl-side{position:static}}

/* ── seller dashboard ───────────────────────────────────────────── */
.sd-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.sd-kpi{border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:var(--surface)}
.sd-k{font-size:12px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.sd-v{font-size:24px;font-weight:750;margin-top:4px;line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sd-d{font-size:12.5px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:6px}
.sd-d span{color:var(--faint)}
.sd-up{color:var(--success)} .sd-down{color:var(--danger)} .sd-flat{color:var(--faint);font-weight:500}
.sd-spark{height:38px;margin-top:8px}

.sd-standing{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:14px}
.sd-stat{border:1px solid var(--line);border-radius:10px;padding:11px 12px;display:flex;
  flex-direction:column;gap:2px}
.sd-stat.warn{border-color:color-mix(in srgb,var(--warn) 42%,transparent);background:var(--warn-soft)}
.sd-stat-v{font-size:20px;font-weight:750;font-variant-numeric:tabular-nums}
.sd-stat-l{font-size:12.5px;color:var(--muted)}

.sd-adv{border-left:2px solid var(--primary);padding:8px 0 8px 12px;margin-bottom:10px}
.sd-adv-t{font-size:14px;font-weight:640;line-height:1.35}
.sd-adv-b{font-size:13px;color:var(--muted);line-height:1.55;margin-top:3px}

.sd-list{display:flex;flex-direction:column}
.sd-row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;width:100%;text-align:left;
  padding:10px 0;border-bottom:1px solid var(--line-2);align-items:center}
.sd-row:last-child{border-bottom:0}
.sd-row:hover{opacity:.75}
.sd-row-t{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-row-m{font-size:12.5px;color:var(--faint);grid-column:1}
.sd-row-c{grid-row:1 / span 2;font-size:17px;font-weight:750;color:var(--primary);
  font-variant-numeric:tabular-nums;min-width:26px;text-align:right}
@media(max-width:560px){ .sd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ── demand side ────────────────────────────────────────────────── */
.rq-head{padding-bottom:14px;border-bottom:1px solid var(--line-2);margin-bottom:14px}
.rq-compare{padding:13px 14px;border-left:2px solid var(--primary)}

.rq-offer{border:1px solid var(--line);border-radius:11px;padding:13px 14px;margin-bottom:10px;
  transition:border-color 160ms ease}
.rq-offer.on{border-color:color-mix(in srgb,var(--success) 55%,transparent);background:var(--success-soft)}
.rq-offer.off{opacity:.55}

.rq-match{border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin-bottom:10px}
.rq-thumb{width:52px;height:44px;border-radius:9px;overflow:hidden;flex:0 0 auto;background:var(--surface-3);display:block}
.rq-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rq-score{font-size:18px;font-weight:750;color:var(--primary);font-variant-numeric:tabular-nums;
  flex:0 0 auto;min-width:30px;text-align:right}
.rq-why{font-size:12.5px;color:var(--primary);font-weight:640;margin-top:9px;text-decoration:underline;
  text-underline-offset:2px}
.rq-signals{margin-top:9px;display:flex;flex-direction:column;gap:5px}
.rq-sig{display:grid;grid-template-columns:minmax(96px,1.1fr) 2fr auto;gap:9px;align-items:center;font-size:12.5px;
  color:var(--muted)}
.rq-sigbar{height:5px;border-radius:3px;background:var(--line-2);overflow:hidden}
.rq-sigbar i{display:block;height:100%;border-radius:3px;background:var(--primary);
  transition:width 480ms cubic-bezier(.4,0,.2,1)}
.rq-sigv{font-variant-numeric:tabular-nums;color:var(--faint);min-width:38px;text-align:right}

.rq-board{border:1px solid var(--line);border-radius:11px;padding:13px 14px;margin-bottom:10px;
  background:var(--surface);display:block}
button.rq-board:hover{border-color:var(--line-strong)}

/* display:flex beats the hidden attribute, so say so explicitly */
.rq-signals[hidden]{display:none}

/* ── orders ─────────────────────────────────────────────────────── */
.ord-item{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
.ord-modes{display:flex;flex-direction:column;gap:8px}
.ord-mode{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:11px;
  border:1.5px solid var(--line);cursor:pointer;transition:border-color 150ms ease,background 150ms ease}
.ord-mode:hover{border-color:var(--line-strong)}
.ord-mode:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.ord-mode.off{opacity:.6;cursor:not-allowed}
.ord-mode input{margin-top:3px;flex:0 0 auto;accent-color:var(--primary)}
.ord-mode-b{display:flex;flex-direction:column;gap:3px}
.ord-mode-t{font-size:14px;font-weight:650}
.ord-mode-d{font-size:12.5px;color:var(--muted);line-height:1.5}

.ord-head{padding-bottom:14px;border-bottom:1px solid var(--line-2);margin-bottom:14px}
.ord-escrow{padding:13px 14px;border-left:2px solid var(--success);margin-bottom:14px}
.ord-acts{display:flex;gap:9px;flex-wrap:wrap}
.ord-acts .btn{flex:1;min-width:132px}

.ord-timeline{display:flex;flex-direction:column;gap:2px}
.ord-tl{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line-2)}
.ord-tl:last-child{border-bottom:0}
.ord-tl-dot{width:7px;height:7px;border-radius:50%;background:var(--primary);flex:0 0 auto;margin-top:6px}

.ord-row{display:flex;align-items:center;gap:11px;width:100%;padding:11px 0;
  border-bottom:1px solid var(--line-2)}
.ord-row:last-child{border-bottom:0}
.ord-row:hover{opacity:.75}

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD

   The first version painted every card with --bg, which is the PAGE
   GROUND, not a surface. Cards were literally the same colour as the
   thing behind them, so nothing had an edge and the whole screen read
   as one flat sheet.

   This follows the rule the rest of the site already uses: elevation
   is declared once — a card is --surface lifted off --bg by a shadow,
   and carries no border. A hairline is only for ink bands, where a
   shadow cannot be seen.
   ══════════════════════════════════════════════════════════════════ */

#v-dash { max-width: 1180px; margin: 0 auto; }
.anchor { display: block; height: 1px; scroll-margin-top: 90px; }

.dash-load, .dash-none {
  padding: 26px 4px; color: var(--muted); font-size:15px; line-height: 1.6;
}
.dash-none { padding: 22px 18px; }

/* ── head ─────────────────────────────────────────────────────────── */
.dash-top {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
  justify-content: space-between; margin-bottom: 20px;
}
.dash-h1 {
  font-size: clamp(25px, 2.6vw, 33px); font-weight: 780;
  letter-spacing: -.03em; line-height: 1.1; margin: 0;
}
.dash-sub { font-size:15px; color: var(--muted); margin: 6px 0 0; line-height: 1.55; }
.dash-sub b { color: var(--ink-2); font-weight: 620; }

.dash-ranges { display: flex; flex-wrap: wrap; gap: 6px; }
.rng {
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  font: inherit; font-size:13.5px; font-weight: 620; color: var(--muted);
  padding: 7px 13px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: color .14s, border-color .14s, background .14s;
}
.rng:hover { border-color: var(--primary); color: var(--ink); }
.rng.on {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: var(--shadow-primary);
}
.rng:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── section divider — the page has two halves and should say so ──── */
.dsec {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin: 34px 0 14px; padding-bottom: 9px;
  border-bottom: 2px solid var(--ink);
}
.dsec:first-of-type { margin-top: 26px; }
.dsec-t { font-size:18px; font-weight: 750; letter-spacing: -.022em; color: var(--ink); }
.dsec-b {
  font-size:12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--primary-soft); color: var(--primary);
  padding: 3px 9px; border-radius: 999px;
}
.dsec-n { flex: 1 1 100%; font-size:14.5px; color: var(--muted); margin: 2px 0 0; }

/* ── standing strip ───────────────────────────────────────────────── */
.dash-standing {
  display: flex; flex-wrap: wrap; gap: 11px; align-items: stretch; margin-bottom: 4px;
}
.ds {
  flex: 1 1 158px; min-width: 0; padding: 13px 16px;
  background: var(--surface); border-radius: 14px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 2px;
}
.ds-k {
  font-size:12.5px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--faint);
}
.ds-v {
  font-size:20px; font-weight: 750; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.25;
}
.ds-n { font-size:13px; color: var(--faint); line-height: 1.45; }

/* The one tile on the strip that is a job rather than a fact. */
.ds-alert {
  flex: 1 1 158px; border: 0; cursor: pointer; font: inherit;
  background: var(--grad-brand); color: #fff; border-radius: 14px;
  padding: 13px 16px; font-size:15px; font-weight: 650; text-align: left;
  box-shadow: var(--shadow-primary);
  display: flex; align-items: center; gap: 8px;
  transition: transform .14s var(--ease-out), filter .14s;
}
.ds-alert b { font-size:21px; font-weight: 780; font-variant-numeric: tabular-nums; }
.ds-alert span { margin-left: auto; font-size:18px; opacity: .85; }
.ds-alert:hover { filter: brightness(1.07); transform: translateY(-2px); }

/* ── KPI cards ────────────────────────────────────────────────────── */
.dash-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin: 14px 0;
}
.dk {
  background: var(--surface); border-radius: 16px;
  padding: 15px 17px 10px; min-width: 0;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-md);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.dk:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.dk-k {
  font-size:12.5px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--faint);
}
.dk-v {
  font-size:32px; font-weight: 780; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; color: var(--ink);
  line-height: 1.12; margin-top: 4px;
}
.dk-d { font-size:13px; color: var(--faint); margin-top: 2px; min-height: 17px; }
.dk-flat { font-style: italic; }
.dk-delta { font-weight: 700; }
.dk-delta.up { color: var(--success); }
.dk-delta.down { color: var(--danger); }
.dk-delta.flat { color: var(--faint); }
.dk-spark { height: 42px; margin-top: 8px; }

/* ── panels ───────────────────────────────────────────────────────── */
.dash-g21 { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
            gap: 13px; margin-bottom: 13px; align-items: start; }
.dash-g2  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 13px; margin-bottom: 13px; align-items: start; }

.dpanel {
  background: var(--surface); border-radius: 16px;
  overflow: hidden; margin-bottom: 13px; min-width: 0;
  box-shadow: var(--shadow-md);
}
.dp-h {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 15px 18px 12px;
  border-bottom: 1px solid var(--line-2);
}
.dp-t { font-size:15.5px; font-weight: 720; color: var(--ink); letter-spacing: -.012em; }
.dp-s { font-size:13px; color: var(--faint); }
.dp-b { padding: 17px 18px; }
.dpanel.flush .dp-b { padding: 0; }
.dchart { height: 220px; }

/* ── start-selling prompt ─────────────────────────────────────────── */
.dstart {
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-md);
  padding: 26px 24px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 8px; margin-bottom: 13px;
}
.dstart b { font-size:16.5px; font-weight: 700; }
.dstart span { font-size:15px; color: var(--muted); line-height: 1.6; max-width: 58ch; }
.dstart .btn { margin-top: 8px; }

/* ── advice ───────────────────────────────────────────────────────── */
.dadv {
  padding: 13px 18px; border-bottom: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 2px;
  border-left: 3px solid transparent;
}
.dadv:last-child { border-bottom: 0; }
.dadv b { font-size:14.5px; font-weight: 680; color: var(--ink); }
.dadv span { font-size:14px; color: var(--muted); line-height: 1.55; }
.dadv.urgent { border-left-color: var(--primary); background: var(--primary-soft); }
.dadv.warn   { border-left-color: var(--warn); }
.dadv.info   { border-left-color: var(--aqua); }
.dadv.ok     { border-left-color: var(--success); }

/* ── leads ────────────────────────────────────────────────────────── */
.dstages {
  display: flex; gap: 7px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid var(--line-2);
}
.dstage {
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  font: inherit; font-size:13.5px; font-weight: 640; color: var(--muted);
  padding: 6px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: all .14s;
}
.dstage:hover { border-color: var(--primary); color: var(--ink); }
.dstage span {
  font-variant-numeric: tabular-nums; font-weight: 740;
  background: var(--surface-3); border-radius: 999px; padding: 0 7px; font-size:12.5px;
}
.dstage.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.dstage.on span { background: rgba(255,255,255,.22); color: #fff; }

.dleads { display: flex; flex-direction: column; }
.dlead {
  display: flex; gap: 13px; align-items: center; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--line-2);
  border-left: 3px solid transparent;
}
.dlead:last-child { border-bottom: 0; }
/* Not replied to yet is the only state that is somebody's problem. */
.dlead.hot { background: var(--primary-soft); border-left-color: var(--primary); }
.dl-main { flex: 1 1 260px; min-width: 0; }
.dl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dl-who { font-size:15px; font-weight: 700; color: var(--ink); }
.dl-badge {
  font-size:12px; font-weight: 740; padding: 2px 7px; border-radius: 5px;
  background: var(--surface-3); color: var(--muted); letter-spacing: .03em;
}
.dl-badge.tT2, .dl-badge.tT3 { background: var(--success-soft); color: var(--success); }
.dl-src { font-size:13px; color: var(--faint); }
.dl-val { font-size:13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.dl-item { font-size:14px; color: var(--muted); margin-top: 3px;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-why { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.dl-why span {
  font-size:12.5px; color: var(--muted); background: var(--surface-3);
  padding: 3px 8px; border-radius: 999px;
}
.dl-act { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.dl-stage {
  font: inherit; font-size:13.5px; font-weight: 620; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px;
  background: var(--surface); cursor: pointer; min-height: 36px;
}

/* ── tables ───────────────────────────────────────────────────────── */
.dtable-wrap { overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size:14px; min-width: 580px; }
.dtable th {
  text-align: left; font-size:12.5px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--faint); padding: 11px 16px;
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
  background: var(--surface-2);
}
.dtable td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable tbody tr:hover { background: var(--surface-2); }
.dtable .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtable td b { font-weight: 660; color: var(--ink); display: block; }
.dt-sub { font-size:12.5px; color: var(--faint); display: block; margin-top: 2px; }
.dt-thin { color: var(--faint); font-style: italic; font-size:12.5px; }
.dtable td.n.bad { color: var(--danger); font-weight: 740; }
.dt-state {
  font-size:12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-3); color: var(--muted); white-space: nowrap;
}
.dt-state.sactive { background: var(--success-soft); color: var(--success); }
.dt-state.spaused { background: var(--warn-soft); color: var(--warn); }

/* ── buyer rows ───────────────────────────────────────────────────── */
.dash-waiting { display: flex; flex-direction: column; gap: 9px; margin: 14px 0; }
.dw {
  border: 0; background: var(--surface); color: var(--ink);
  border-left: 3px solid var(--primary); border-radius: 13px;
  padding: 14px 17px; cursor: pointer; font: inherit;
  font-size:15px; font-weight: 640; text-align: left;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  transition: transform .14s var(--ease-out), box-shadow .14s;
}
.dw:hover { transform: translateX(3px); box-shadow: var(--shadow-lg); }
.dw span { color: var(--primary); font-weight: 780; font-size:17px; }

.drow {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--line-2); background: transparent;
  padding: 13px 18px; cursor: pointer; font: inherit;
  transition: background .13s;
}
.drow:last-child { border-bottom: 0; }
.drow:hover { background: var(--surface-2); }
.dr-t { font-size:14.5px; font-weight: 640; color: var(--ink);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-m { font-size:13px; color: var(--faint); display: flex; align-items: center; gap: 7px; }
.dr-gone { font-size:12.5px; color: var(--danger); font-weight: 640; }
.dr-state {
  font-size:12px; font-weight: 720; padding: 2px 7px; border-radius: 5px;
  background: var(--surface-3); color: var(--muted); text-transform: uppercase;
  letter-spacing: .03em;
}
.dr-state.scompleted { background: var(--success-soft); color: var(--success); }
.dr-state.sdisputed  { background: var(--danger-soft); color: var(--danger); }
.dr-state.sdelivered { background: var(--primary-soft); color: var(--primary); }

.dash-privacy {
  font-size:13px; color: var(--faint); line-height: 1.65;
  padding: 6px 2px 8px; max-width: 64ch;
}

/* ── narrow ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-g21, .dash-g2 { grid-template-columns: minmax(0, 1fr); }
  .dk-v { font-size:27px; }
  .dash-ranges { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
  .dl-act { width: 100%; }
  .dl-act .btn, .dl-stage { flex: 1 1 auto; }
}
@media (max-width: 540px) {
  .dash-kpis { grid-template-columns: minmax(0, 1fr); }
  .dash-top { align-items: flex-start; }
}

/* The mobile shell floats its tab bar over the scroller, so the last
   panel needs clearance the container cannot give it. */
.dash-mob { padding-top: 12px; padding-bottom: 108px; }

/* ── reporting (SCR-C-19) ─────────────────────────────────────────── */
.rep-lede { font-size:14.5px; color: var(--muted); line-height: 1.6; margin: 0 0 4px; }
.rep-list { display: flex; flex-direction: column; gap: 8px; }
.rep-opt {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  padding: 12px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1.5px solid transparent;
  transition: border-color .14s, background .14s;
}
.rep-opt:hover { border-color: var(--line-strong); }
.rep-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.rep-opt input {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 17px; height: 17px; margin: 2px 0 0; border-radius: 50%;
  border: 1.6px solid var(--line-strong); background: var(--surface);
  transition: border-color .14s, box-shadow .14s;
}
.rep-opt input:checked {
  border-color: var(--primary); border-width: 5px;
}
.rep-opt input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rep-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rep-body b { font-size:15px; font-weight: 660; color: var(--ink); }
.rep-body span { font-size:13.5px; color: var(--muted); line-height: 1.5; }
.rep-foot { font-size:13px; color: var(--faint); line-height: 1.6; margin: 2px 0 0; }

/* the entry point itself — quiet until wanted */
.reportbtn {
  font: inherit; font-size:13.5px; font-weight: 600; color: var(--faint);
  background: none; border: 0; cursor: pointer; padding: 6px 2px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .14s;
}
.reportbtn:hover { color: var(--danger); }
.reportbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/* ══════════════════════════════════════════════════════════════════
   SCR-S-02 · the listing wizard
   ══════════════════════════════════════════════════════════════════ */

/* ── progress ─────────────────────────────────────────────────────── */
.wz-rail {
  display: flex; align-items: center; gap: 0; margin: 0 0 18px;
}
.wz-dot {
  flex: 1; position: relative; border: 0; background: none; cursor: pointer;
  padding: 0; height: 26px; display: flex; align-items: center; justify-content: center;
}
.wz-dot[disabled] { cursor: default; }
.wz-dot::before {
  content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 2px;
  background: var(--line); z-index: 0;
}
.wz-dot:first-child::before { left: 50%; }
.wz-dot:last-child::before  { right: 50%; }
.wz-dot.done::before, .wz-dot.on::before { background: var(--primary); }
.wz-dot.on:last-child::before { background: var(--line); }
.wz-dot span {
  position: relative; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size:12.5px; font-weight: 720; font-variant-numeric: tabular-nums;
  background: var(--surface); border: 2px solid var(--line); color: var(--faint);
  transition: all .16s var(--ease-out);
}
.wz-dot.done span { background: var(--primary); border-color: var(--primary); color: #fff; }
.wz-dot.on span {
  background: var(--surface); border-color: var(--primary); color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.wz-dot:not([disabled]):hover span { border-color: var(--primary); }

/* ── head ─────────────────────────────────────────────────────────── */
.wz-head { margin-bottom: 16px; }
.wz-t { font-size:20px; font-weight: 750; letter-spacing: -.024em; margin: 0; }
.wz-s { font-size:14.5px; color: var(--muted); margin: 5px 0 0; line-height: 1.55; }
.wz-note {
  font-size:14px; color: var(--muted); background: var(--surface-2);
  padding: 10px 13px; border-radius: 10px; margin: 0 0 14px; line-height: 1.55;
}
.wz-none { font-size:15px; color: var(--muted); padding: 20px 2px; line-height: 1.6; }
.wz-body { min-height: 180px; }

/* ── foot ─────────────────────────────────────────────────────────── */
.wz-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2);
}
.wz-foot .btn { min-width: 116px; }

/* ── category picker ──────────────────────────────────────────────── */
.wz-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.wz-cat {
  border: 1.5px solid var(--line); background: var(--surface);
  border-radius: 12px; padding: 15px 13px; cursor: pointer; font: inherit;
  text-align: left; transition: all .14s var(--ease-out);
}
.wz-cat b { font-size:15px; font-weight: 620; color: var(--ink); }
.wz-cat:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.wz-cat.on { border-color: var(--primary); background: var(--primary-soft); }
.wz-cat.on b { color: var(--primary); }

/* ── attribute fields ─────────────────────────────────────────────── */
.wz-unit { font-weight: 500; color: var(--faint); font-size:12.5px; }
.wz-req { color: var(--primary); font-weight: 800; margin-left: 3px; }
.formrow.is-req .formlabel { color: var(--ink); }
.wz-check {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 9px 14px; border-radius: 10px; background: var(--surface-2);
  border: 1.5px solid transparent; transition: all .14s;
}
.wz-check:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.wz-check input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.wz-check span { font-size:15px; font-weight: 600; }
.wz-naira { color: var(--faint); font-weight: 650; flex: 0 0 auto; }

/* ── preview ──────────────────────────────────────────────────────── */
.wz-prev { display: flex; flex-direction: column; gap: 14px; }
.wz-prevcard {
  display: flex; gap: 13px; align-items: stretch;
  background: var(--surface); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-md);
}
.wz-previmg { width: 118px; flex: 0 0 auto; background: var(--surface-3); }
.wz-previmg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wz-previmg.empty {
  display: grid; place-items: center; font-size:12.5px; color: var(--faint);
  text-align: center; padding: 8px; min-height: 96px;
}
.wz-prevbody { padding: 13px 15px 13px 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; justify-content: center; }
.wz-prevt { font-size:16px; font-weight: 660; color: var(--ink); line-height: 1.35; }
.wz-prevp { font-size:17px; font-weight: 780; letter-spacing: -.02em; color: var(--ink); }
.wz-prevm { font-size:13px; color: var(--faint); }

.wz-specs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line-2); border-radius: 12px; overflow: hidden;
}
.wz-spec {
  background: var(--surface); padding: 10px 13px;
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.wz-spec span { font-size:12.5px; text-transform: uppercase; letter-spacing: .05em;
                font-weight: 700; color: var(--faint); }
.wz-spec b { font-size:14.5px; font-weight: 640; color: var(--ink);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── quality, while it can still be acted on ──────────────────────── */
.wz-quality { background: var(--surface); border-radius: 14px; padding: 15px 17px; box-shadow: var(--shadow-md); }
.wq-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.wq-n {
  width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
  display: grid; place-items: center;
  font-size:20px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--surface-3); color: var(--muted);
}
.wq-n.poor      { background: var(--danger-soft);  color: var(--danger); }
.wq-n.fair      { background: var(--warn-soft);    color: var(--warn); }
.wq-n.good      { background: var(--success-soft); color: var(--success); }
.wq-n.excellent { background: var(--grad-brand);   color: #fff; }
.wq-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wq-l b { font-size:15px; font-weight: 700; }
.wq-l span { font-size:13.5px; color: var(--muted); line-height: 1.5; }

.wq-bars { display: flex; flex-direction: column; gap: 9px; }
.wq-row { display: grid; grid-template-columns: 84px 54px 1fr; gap: 10px; align-items: center; }
.wq-k { font-size:13.5px; font-weight: 620; color: var(--ink-2); }
.wq-bar { height: 5px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.wq-bar i { display: block; height: 100%; border-radius: 3px; background: var(--primary);
            transition: width .4s var(--ease-out); }
.wq-hint { font-size:13px; color: var(--muted); line-height: 1.45; }
.wq-ok { font-size:13.5px; color: var(--success); font-weight: 700; }

@media (max-width: 620px) {
  .wz-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wz-specs { grid-template-columns: minmax(0, 1fr); }
  .wq-row { grid-template-columns: 74px 40px 1fr; gap: 8px; }
  .wz-dot span { width: 21px; height: 21px; font-size:12px; }
  .wz-foot .btn { min-width: 0; flex: 1; }
}

/* A flex item defaults to min-width:auto, so a .field at flex:1 refuses to
   shrink below its content and overflows the column it sits in. The sidebar's
   price row did exactly that, spilling ~158px over the results. */
.row > .field { min-width: 0; }

/* ── §9.2 facets ──────────────────────────────────────────────────── */
.fct-live { display: block; }
.fct-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 0 4px;
}
.fct-title {
  font-size:12.5px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--faint);
}
.fct-live .fct-b { padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.fct-live .fct-b:last-child { border-bottom: 0; }
.fct { margin: 0 0 14px; }
.fct-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fct-toggle {
  font: inherit; font-size:14.5px; font-weight: 640; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 8px 14px; border-radius: 999px; box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .14s, background .14s;
}
.fct-toggle:hover { border-color: var(--primary); }
.fct-toggle.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.fct-n {
  background: var(--primary); color: #fff; border-radius: 999px;
  font-size:12.5px; font-weight: 750; padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.fct-toggle.on .fct-n { background: rgba(255,255,255,.25); }
.fct-clear {
  font: inherit; font-size:14px; font-weight: 600; color: var(--muted);
  background: none; border: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.fct-clear:hover { color: var(--danger); }
.fct-hint { font-size:13.5px; color: var(--faint); }

.fct-panel {
  margin-top: 11px; background: var(--surface); border-radius: 14px;
  box-shadow: var(--shadow-md); padding: 16px 18px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 20px;
}
.fct-b { min-width: 0; }
.fct-k {
  display: block; font-size:12.5px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--faint); margin-bottom: 8px;
}
.fct-k em { font-style: normal; text-transform: none; letter-spacing: 0; }
.fct-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.fct-o {
  font: inherit; font-size:14px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  padding: 6px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .13s;
}
.fct-o em {
  font-style: normal; font-size:12.5px; font-weight: 720; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.fct-o:hover { border-color: var(--primary); }
.fct-o.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.fct-o.on em { color: rgba(255,255,255,.75); }

.fct-range { display: flex; align-items: center; gap: 8px; }
.fct-range input {
  font: inherit; font-size:14.5px; width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px;
  background: var(--surface-2); color: var(--ink);
}
.fct-range input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.fct-range span { font-size:13.5px; color: var(--faint); flex: 0 0 auto; }

@media (max-width: 620px) {
  .fct-panel { grid-template-columns: minmax(0, 1fr); padding: 14px 15px; }
}

/* ══════════════════════════════════════════════════════════════════
   §15.4 trust · §15.5 reviews · SM-02 verification
   ══════════════════════════════════════════════════════════════════ */

/* ── the badge ────────────────────────────────────────────────────── */
.tchip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size:12.5px; font-weight: 750; letter-spacing: .03em;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-3); color: var(--muted);
}
.tchip em {
  font-style: normal; font-weight: 620; font-size:13px; letter-spacing: 0;
}
.tchip.tT1 { background: var(--primary-soft); color: var(--primary); }
.tchip.tT2 { background: var(--aqua-soft);    color: var(--aqua); }
.tchip.tT3 { background: var(--success-soft); color: var(--success); }
.tchip.tT4 { background: var(--grad-brand);   color: #fff; }

.trate { display: inline-flex; align-items: center; gap: 7px; font-size:14px; color: var(--muted); }
.trate b { font-size:16px; font-weight: 780; color: var(--ink); font-variant-numeric: tabular-nums; }
.trate em { font-style: normal; font-size:13px; color: var(--faint); }
.trate.none { font-style: italic; color: var(--faint); font-size:13.5px; }
.tstars i { font-style: normal; color: var(--line-strong); font-size:14.5px; }
.tstars i.on { color: var(--warn); }

/* ── review form (SCR-C-18) ───────────────────────────────────────── */
.rv { display: flex; flex-direction: column; gap: 16px; }
.rv-lede { font-size:14.5px; color: var(--muted); line-height: 1.6; margin: 0; }
.rv-lede b { color: var(--ink); font-weight: 650; }
.rv-no { font-size:15px; color: var(--muted); line-height: 1.6; padding: 14px 0; }

.rv-dims { display: flex; flex-direction: column; gap: 2px; }
.rv-dim {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line-2);
}
.rv-dim:last-child { border-bottom: 0; }
.rv-k { font-size:15px; font-weight: 620; color: var(--ink); }
.rv-stars { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.rv-star {
  font: inherit; font-size:25px; line-height: 1; cursor: pointer;
  background: none; border: 0; padding: 0 2px; color: var(--line-strong);
  transition: color .12s, transform .12s;
}
.rv-star:hover { transform: scale(1.12); }
.rv-star.on { color: var(--warn); }
.rv-star:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 5px; }

/* ── verification (SM-02) ─────────────────────────────────────────── */
.vf { display: flex; flex-direction: column; gap: 16px; }
.vf-now {
  background: var(--surface-2); border-radius: 14px; padding: 15px 17px;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-start;
}
.vf-next { font-size:15px; color: var(--ink-2); line-height: 1.55; font-weight: 550; }

.vf-list { display: flex; flex-direction: column; gap: 1px;
           background: var(--line-2); border-radius: 13px; overflow: hidden; }
.vf-row {
  background: var(--surface); padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.vf-row.done { background: color-mix(in srgb, var(--success) 5%, var(--surface)); }
.vf-b { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vf-b b { font-size:15px; font-weight: 660; color: var(--ink); }
.vf-b > span { font-size:13.5px; color: var(--muted); line-height: 1.5; }
.vf-more { color: var(--warn) !important; font-weight: 600; }
.vf-no   { color: var(--danger) !important; font-weight: 600; }
.vf-tick {
  font-size:13px; font-weight: 700; color: var(--success);
  background: var(--success-soft); padding: 5px 11px; border-radius: 999px; flex: 0 0 auto;
}
.vf-wait {
  font-size:13px; font-weight: 700; color: var(--warn);
  background: var(--warn-soft); padding: 5px 11px; border-radius: 999px; flex: 0 0 auto;
}
.vf-foot { font-size:13px; color: var(--faint); line-height: 1.6; margin: 0; }

/* ══════════════════════════════════════════════════════════════════
   SCR-C-20 · notification centre
   ══════════════════════════════════════════════════════════════════ */
.nt { display: flex; flex-direction: column; gap: 14px; }
.nt-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nt-count { font-size:14px; font-weight: 650; color: var(--muted); }
.nt-all {
  font: inherit; font-size:14px; font-weight: 600; color: var(--primary);
  background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.nt-none { font-size:15px; color: var(--muted); line-height: 1.6; padding: 22px 2px; }

.nt-list { display: flex; flex-direction: column; gap: 1px;
           background: var(--line-2); border-radius: 13px; overflow: hidden; }
.nt-row {
  background: var(--surface); border: 0; width: 100%; text-align: left; font: inherit;
  padding: 13px 15px; display: flex; gap: 12px; align-items: flex-start;
  transition: background .13s;
}
button.nt-row { cursor: pointer; }
button.nt-row:hover { background: var(--surface-2); }
.nt-row.unread { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.nt-ic {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center; font-size:15.5px;
  background: var(--surface-3); color: var(--muted);
}
.nt-ic.cmoney  { background: var(--success-soft); color: var(--success); font-weight: 750; }
.nt-ic.csafety { background: var(--danger-soft);  color: var(--danger); }
.nt-ic.ctrust  { background: var(--warn-soft);    color: var(--warn); }
.nt-ic.cmessages { background: var(--primary-soft); color: var(--primary); }
.nt-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-b b { font-size:15px; font-weight: 640; color: var(--ink); line-height: 1.4; }
.nt-b > span { font-size:14px; color: var(--muted); line-height: 1.5; }
.nt-b em { font-style: normal; font-size:12.5px; color: var(--faint); }
.nt-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  flex: 0 0 auto; margin-top: 10px;
}

.nt-prefs { border-top: 1px solid var(--line-2); padding-top: 12px; }
.nt-prefs summary {
  font-size:14.5px; font-weight: 640; color: var(--ink-2); cursor: pointer;
  list-style: none; padding: 4px 0;
}
.nt-prefs summary::-webkit-details-marker { display: none; }
.nt-prefs summary::before { content: '▸ '; color: var(--faint); }
.nt-prefs[open] summary::before { content: '▾ '; }
.nt-cats { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.nt-cat {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  padding: 9px 11px; border-radius: 10px; transition: background .13s;
}
.nt-cat:hover { background: var(--surface-2); }
.nt-cat.locked { cursor: default; opacity: .8; }
.nt-cat input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--primary); flex: 0 0 auto; }
.nt-cat span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nt-cat b { font-size:14.5px; font-weight: 600; color: var(--ink); }
.nt-cat em { font-style: normal; font-size:13px; color: var(--faint); line-height: 1.45; }
.nt-foot { font-size:13px; color: var(--faint); line-height: 1.6; margin: 10px 0 0; }

/* the bell's count */
.bell-n {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff;
  font-size:12px; font-weight: 780; font-style: normal;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--surface);
}
[onclick*="openNotifications"] { position: relative; }

/* ══════════════════════════════════════════════════════════════════
   Appendix T · the call screen
   Calm rather than dramatic — a ringing phone is stressful enough.
   ══════════════════════════════════════════════════════════════════ */
.cl {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 22px;
  background: rgba(6,10,22,.62); backdrop-filter: blur(6px);
  animation: clIn .22s var(--ease-out);
}
@keyframes clIn { from { opacity: 0 } to { opacity: 1 } }

.cl-box {
  background: linear-gradient(168deg, var(--acc-x-1e1650) 0%, var(--acc-x-2c1d66) 52%, #0F4C5C 100%);
  color: #fff; border-radius: 26px; padding: 34px 28px 26px;
  width: min(360px, 100%); text-align: center;
  box-shadow: 0 34px 80px -22px rgba(0,0,0,.65);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.cl-av {
  width: 88px; height: 88px; border-radius: 30px; margin-bottom: 8px;
  display: grid; place-items: center; font-size:34px; font-weight: 780;
  background: rgba(255,255,255,.16); position: relative;
}
.cl-av.ring::after {
  content: ''; position: absolute; inset: -10px; border-radius: 40px;
  border: 2px solid rgba(255,255,255,.34); animation: clPulse 1.9s var(--ease-out) infinite;
}
@keyframes clPulse { 0% { transform: scale(.94); opacity: .9 } 100% { transform: scale(1.22); opacity: 0 } }

.cl-who { font-size:20px; font-weight: 720; letter-spacing: -.02em; }
.cl-about { font-size:14px; color: rgba(255,255,255,.7); }
.cl-state { font-size:14.5px; color: rgba(255,255,255,.82); margin-top: 2px; }
.cl-timer {
  font-size:22px; font-weight: 760; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; min-height: 26px;
}

.cl-acts { display: flex; gap: 11px; margin-top: 16px; width: 100%; }
.cl-b {
  flex: 1; font: inherit; font-size:15.5px; font-weight: 660; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.13);
  color: #fff; padding: 13px 10px; border-radius: 999px;
  transition: background .14s, transform .12s;
}
.cl-b:hover { background: rgba(255,255,255,.22); }
.cl-b:active { transform: scale(.97); }
.cl-b.on { background: #fff; color: var(--acc-x-231856); }
.cl-b.end     { background: var(--danger, #E1293A); border-color: transparent; }
.cl-b.decline { background: var(--danger, #E1293A); border-color: transparent; }
.cl-b.answer  { background: var(--success, #00A874); border-color: transparent; }

.cl-note {
  font-size:12.5px; color: rgba(255,255,255,.62); line-height: 1.5;
  margin: 14px 0 0; max-width: 30ch;
}
@media (prefers-reduced-motion: reduce) {
  .cl, .cl-av.ring::after { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   CONNECT LIVE · the meetup panel

   Operate-mode surface: somebody is holding a phone in one hand, in
   traffic, possibly nervous. So the status sentence is the largest
   thing on screen, "Stop sharing" is always in the same place and
   never behind a confirm, and nothing pulses red at anyone.

   Risk colour deliberately tops out at amber, not red. Red reads as
   "something has happened to you", and nothing has — we are telling
   somebody a meeting point moved, not that they are in danger.
   ══════════════════════════════════════════════════════════════════ */

.livewrap{position:fixed;inset:0;z-index:1400;display:none;pointer-events:none}
.livewrap.on{display:block}
.livescrim{position:absolute;inset:0;background:rgba(8,13,26,.46);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .22s var(--ease-out,ease);pointer-events:auto}
.livewrap.on .livescrim{opacity:1}

.livepanel{position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow-xl);
  display:flex;flex-direction:column;pointer-events:auto;
  transform:translateX(18px);opacity:0;transition:transform .26s var(--ease-out,ease),opacity .2s ease}
.livewrap.on .livepanel{transform:none;opacity:1}

@media (max-width:900px){
  .livepanel{right:0;left:0;top:auto;width:auto;max-height:94vh;
    border-radius:var(--r-xl,22px) var(--r-xl,22px) 0 0;
    transform:translateY(24px);
    padding-bottom:env(safe-area-inset-bottom)}
}
@media (prefers-reduced-motion:reduce){
  .livescrim,.livepanel{transition:none}
}

.livehead{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 14px;
  border-bottom:1px solid var(--line)}
.livehead h3{margin:0;font-size:20px;line-height:1.28;font-weight:650;flex:1;min-width:0;text-wrap:balance}
.livehead .x{flex:none;width:36px;height:36px;border-radius:var(--r-pill,999px);border:0;
  background:var(--bg-2,#F2F2F8);color:var(--muted);cursor:pointer;font-size:18px;line-height:1}
.livehead .x:hover{color:var(--ink)}
.livesub{margin:4px 0 0;font-size:14.5px;color:var(--muted)}

.livebody{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 8px;
  display:flex;flex-direction:column;gap:14px}

/* the status sentence — the one thing that must read from arm's length */
.livestatus{display:flex;gap:11px;align-items:flex-start}
.livedot{flex:none;width:10px;height:10px;border-radius:50%;margin-top:7px;
  background:var(--aqua,#20C7D9);box-shadow:0 0 0 0 rgba(32,199,217,.5);animation:livepulse 2.6s infinite}
.livedot.off{background:var(--muted);animation:none;box-shadow:none}
@keyframes livepulse{70%{box-shadow:0 0 0 10px rgba(32,199,217,0)}100%{box-shadow:0 0 0 0 rgba(32,199,217,0)}}
@media (prefers-reduced-motion:reduce){.livedot{animation:none}}
.livestatus p{margin:0;font-size:18px;line-height:1.36;font-weight:600;text-wrap:pretty}
.livestatus small{display:block;font-weight:400;font-size:14.5px;color:var(--muted);margin-top:3px}

/* map — centred on the agreed public place, never on a person */
.livemap{position:relative;height:196px;border-radius:var(--r-card,14px);overflow:hidden;
  background:var(--map-land,#EAE9F4);border:1px solid var(--line)}
.livemap .tiles{position:absolute;inset:0}
.livemap .tiles img{position:absolute;width:256px;height:256px;image-rendering:auto;
  opacity:0;transition:opacity .3s ease}
.livemap .tiles img.in{opacity:1}
.livemap .pin{position:absolute;transform:translate(-50%,-50%);pointer-events:none}
.livemap .pin b{display:block;width:14px;height:14px;border-radius:50%;
  border:2.5px solid var(--surface);box-shadow:0 2px 6px rgba(11,16,32,.35)}
.livemap .pin.meet b{width:16px;height:16px;background:var(--primary,#6D3DF5)}
.livemap .pin.me b{background:var(--aqua,#20C7D9)}
.livemap .pin.them b{background:var(--amber-600,#DB8104)}
.livemap .pin i{display:block;font-style:normal;font-size:12.5px;font-weight:650;
  margin-top:4px;padding:2px 6px;border-radius:var(--r-pill,999px);white-space:nowrap;
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);transform:translateX(-50%);
  margin-left:7px}
.livemap .attrib{position:absolute;right:5px;bottom:4px;font-size:12px;color:var(--muted);
  background:rgba(255,255,255,.72);border-radius:4px;padding:1px 4px}
.livemap .none{position:absolute;inset:0;display:grid;place-items:center;
  font-size:14.5px;color:var(--muted);text-align:center;padding:20px}

/* two trips, side by side */
.livetrips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.livetrip{background:var(--bg-2,#F2F2F8);border-radius:var(--r-md,12px);padding:11px 12px}
.livetrip .k{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  margin:0 0 3px}
.livetrip .v{font-size:16px;font-weight:600;margin:0;font-variant-numeric:tabular-nums}
.livetrip .n{font-size:13.5px;color:var(--muted);margin:2px 0 0}

/* safety — calm by construction */
.livesafe{border:1px solid var(--line);border-radius:var(--r-card,14px);padding:13px 14px}
.livesafe .lvl{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:650;
  padding:4px 10px;border-radius:var(--r-pill,999px);margin-bottom:10px}
.livesafe .lvl.low{background:var(--good-soft,rgba(24,184,106,.12));color:var(--green-600,#00A874)}
.livesafe .lvl.moderate{background:rgba(245,185,76,.16);color:var(--amber-600,#DB8104)}
.livesafe .lvl.elevated{background:rgba(217,148,43,.18);color:var(--amber-600,#DB8104)}
.livesafe .lvl.high{background:var(--danger-soft,#FFE9EB);color:var(--danger-ink,#C21D2E)}
.livesafe ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.livesafe li{font-size:15px;line-height:1.5}
.livesafe li em{display:block;font-style:normal;color:var(--muted);font-size:14px;margin-top:2px}

/* rendezvous options */
.liveopts{display:flex;flex-direction:column;gap:10px}
.liveopt{width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card,14px);padding:13px 14px;cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease}
.liveopt:hover{border-color:var(--primary,#6D3DF5);box-shadow:var(--shadow-sm)}
.liveopt:focus-visible{outline:2px solid var(--primary,#6D3DF5);outline-offset:2px}
.liveopt .nm{font-size:16px;font-weight:640;margin:0;color:var(--ink)}
.liveopt .wy{font-size:14px;color:var(--primary-ink,#5A2FD1);margin:2px 0 7px;font-weight:550}
.liveopt .fc{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 7px;padding:0;list-style:none}
.liveopt .fc li{font-size:13px;color:var(--muted);background:var(--bg-2,#F2F2F8);
  padding:2px 8px;border-radius:var(--r-pill,999px)}
.liveopt .tr{font-size:13.5px;color:var(--muted);margin:0;font-variant-numeric:tabular-nums}

.livecaveat{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0;
  padding:10px 12px;background:var(--bg-2,#F2F2F8);border-radius:var(--r-md,12px)}

/* the six-digit code */
.livecode{text-align:center;padding:6px 0 2px}
.livecode b{display:block;font-size:38px;letter-spacing:.16em;font-weight:680;
  font-variant-numeric:tabular-nums;margin-bottom:6px}
.livecode p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
.livecodein{width:100%;font-size:26px;letter-spacing:.2em;text-align:center;padding:12px;
  border:1px solid var(--line-strong,#D5D5E8);border-radius:var(--r-md,12px);
  background:var(--surface);color:var(--ink);font-variant-numeric:tabular-nums}

/* timeline */
.livelog{border-top:1px solid var(--line);padding-top:12px}
.livelog summary{font-size:14.5px;color:var(--muted);cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:6px;min-height:32px}
.livelog summary::-webkit-details-marker{display:none}
.livelog ol{margin:10px 0 0;padding:0 0 0 16px;list-style:none;display:flex;
  flex-direction:column;gap:9px;border-left:1.5px solid var(--line)}
.livelog li{font-size:14px;color:var(--ink-2,#333A54);position:relative;line-height:1.45}
.livelog li::before{content:'';position:absolute;left:-20.5px;top:6px;width:7px;height:7px;
  border-radius:50%;background:var(--line-strong,#D5D5E8)}
.livelog time{display:block;color:var(--muted);font-size:13px;margin-top:1px}

/* actions — stop is always here, always first to the thumb */
.livefoot{border-top:1px solid var(--line);padding:12px 18px calc(14px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:9px;background:var(--surface)}
.liverow{display:flex;gap:9px}
.liverow > *{flex:1}
.livebtn{min-height:46px;border-radius:var(--r-md,12px);border:1px solid var(--line-strong,#D5D5E8);
  background:var(--surface);color:var(--ink);font-size:16px;font-weight:600;cursor:pointer;
  padding:0 14px;transition:background .15s ease,border-color .15s ease}
.livebtn:hover{background:var(--bg-2,#F2F2F8)}
.livebtn:focus-visible{outline:2px solid var(--primary,#6D3DF5);outline-offset:2px}
.livebtn.pri{background:var(--primary,#6D3DF5);border-color:transparent;color:var(--on-primary,#fff);
  box-shadow:var(--shadow-primary)}
.livebtn.pri:hover{background:var(--primary-hover,#5A2FD1)}
.livebtn.stop{border-color:var(--danger,#E1293A);color:var(--danger-ink,#C21D2E);background:transparent}
.livebtn.stop:hover{background:var(--danger-soft,#FFE9EB)}
.livebtn[disabled]{opacity:.5;cursor:not-allowed}
.liveclock{font-size:13.5px;color:var(--muted);text-align:center;margin:0;
  font-variant-numeric:tabular-nums}
.liveclock b{color:var(--ink);font-weight:600}

/* the invitation card that appears in a conversation */
.liveinvite{border:1px solid var(--line);border-left:3px solid var(--aqua,#20C7D9);
  border-radius:var(--r-md,12px);padding:13px 14px;margin:10px 0;background:var(--surface)}
.liveinvite p{margin:0 0 10px;font-size:15px;line-height:1.5}
.liveinvite .liverow{margin:0}

/* the data note — people pay for megabytes here and should be told */
.livenote{font-size:13px;color:var(--muted);text-align:center;margin:0;line-height:1.5}

.livelog summary .chev{width:0;height:0;border-left:5px solid var(--muted);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .16s var(--ease-out,ease);flex:none}
.livelog[open] summary .chev{transform:rotate(90deg)}

.liveblock{margin:2px 0 8px;text-align:center}
.liveblock button{background:none;border:0;color:var(--muted);font-size:14px;
  cursor:pointer;padding:8px 12px;min-height:36px;border-radius:var(--r-md,12px)}
.liveblock button:hover{color:var(--danger-ink,#C21D2E);background:var(--danger-soft,#FFE9EB)}
.liveblock button:focus-visible{outline:2px solid var(--primary,#6D3DF5);outline-offset:2px}

/* ══════════════════════════════════════════════════════════════════
   MONETISATION · promote, plans, credits, urgency

   The design job here is unusual: this is the one surface where the
   platform is selling to its own users, and the way to make that
   trustworthy is to make the honest sentence the loudest thing on
   the card. So every promotion shows its real effect in body text —
   not in a tooltip, not in grey 11px under the price — and the
   advisor's "do not spend anything" verdict gets the same visual
   weight as a recommendation to buy.

   Urgency uses amber. Red is reserved for things that have gone
   wrong, and a seller who needs to sell before they travel has not
   done anything wrong.
   ══════════════════════════════════════════════════════════════════ */

.mkstack{display:flex;flex-direction:column;gap:14px}

/* what the numbers actually are */
.mkstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:9px}
.mkstat{background:var(--surface);border-radius:var(--r-md,12px);padding:12px 13px;
  box-shadow:var(--shadow-sm)}
.mkstat .k{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  margin:0 0 4px;white-space:nowrap}
.mkstat .v{font-size:21px;font-weight:660;margin:0;font-variant-numeric:tabular-nums;line-height:1.1}
.mkstat .d{font-size:13px;margin:3px 0 0;color:var(--muted)}
.mkstat .d.up{color:var(--green-600,#00A874)}
.mkstat .d.down{color:var(--amber-600,#DB8104)}

/* the advisor. A refusal to sell gets the same weight as a pitch. */
.mkadvice{border-radius:var(--r-card,14px);padding:15px 16px;background:var(--surface);
  box-shadow:var(--shadow-md);border-left:3px solid var(--primary,#6D3DF5)}
.mkadvice.dont{border-left-color:var(--amber-600,#DB8104)}
.mkadvice.wait{border-left-color:var(--muted)}
.mkadvice h4{margin:0 0 8px;font-size:17px;font-weight:640;line-height:1.3;text-wrap:balance}
.mkadvice ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.mkadvice li{font-size:15px;line-height:1.55;color:var(--ink-2,#333A54)}

/* the promotion catalogue */
.mkopts{display:flex;flex-direction:column;gap:10px}
.mkopt{display:flex;gap:13px;align-items:flex-start;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card,14px);
  padding:14px;transition:border-color .16s ease,box-shadow .16s ease}
.mkopt:hover{border-color:var(--primary,#6D3DF5);box-shadow:var(--shadow-sm)}
.mkopt:focus-visible{outline:2px solid var(--primary,#6D3DF5);outline-offset:2px}
.mkopt[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.mkopt .body{flex:1;min-width:0}
.mkopt .nm{margin:0;font-size:16px;font-weight:640;color:var(--ink)}
.mkopt .bl{margin:2px 0 6px;font-size:14.5px;color:var(--ink-2,#333A54)}
.mkopt .ef{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.mkopt .cost{flex:none;text-align:right}
.mkopt .cost b{display:block;font-size:17px;font-weight:660;font-variant-numeric:tabular-nums}
.mkopt .cost span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.mkopt.rec{border-color:var(--primary,#6D3DF5);box-shadow:var(--shadow-sm)}

.mkwallet{display:flex;align-items:baseline;gap:8px;padding:11px 14px;border-radius:var(--r-md,12px);
  background:var(--bg-2,#F2F2F8)}
.mkwallet b{font-size:20px;font-weight:670;font-variant-numeric:tabular-nums}
.mkwallet span{font-size:14px;color:var(--muted)}

.mkrunning{display:flex;flex-direction:column;gap:8px}
.mkrun{display:flex;gap:10px;align-items:center;padding:11px 13px;border-radius:var(--r-md,12px);
  background:var(--primary-soft,#EEE9FF)}
.mkrun .f{flex:1;min-width:0}
.mkrun .nm{margin:0;font-size:15px;font-weight:620;color:var(--primary-ink,#5A2FD1)}
.mkrun .til{margin:1px 0 0;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mkrun button{background:none;border:0;color:var(--muted);font-size:14px;cursor:pointer;
  padding:8px 10px;min-height:36px;border-radius:8px}
.mkrun button:hover{color:var(--danger-ink,#C21D2E);background:var(--danger-soft,#FFE9EB)}

/* urgency */
.mkurgent{border:1px solid var(--line);border-radius:var(--r-card,14px);padding:14px}
.mkurgent h4{margin:0 0 4px;font-size:16px;font-weight:640}
.mkurgent p.n{margin:0 0 11px;font-size:14px;color:var(--muted);line-height:1.55}
.mkurgent .row{display:flex;gap:9px;flex-wrap:wrap}
.mkurgent select,.mkurgent input{flex:1;min-width:0;min-height:44px;padding:0 12px;
  border:1px solid var(--line-strong,#D5D5E8);border-radius:var(--r-md,12px);
  background:var(--surface);color:var(--ink);font-size:16px}

/* the badges a buyer sees */
.urg{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:660;
  letter-spacing:.02em;padding:3px 9px;border-radius:var(--r-pill,999px);
  background:rgba(245,185,76,.18);color:var(--amber-600,#DB8104);white-space:nowrap}
.urg.flash{background:var(--aqua-soft,#E1F7FA);color:var(--aqua-600,#14828F)}
.urg time{font-variant-numeric:tabular-nums;font-weight:600}
.urg-was{font-size:13.5px;color:var(--muted);text-decoration:line-through;margin-left:6px;
  font-variant-numeric:tabular-nums}

/* Paid placement is labelled, quietly but never absently. */
.promoted{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  padding:2px 7px;border-radius:var(--r-pill,999px);border:1px solid var(--line);white-space:nowrap}

/* plans */
.mkplans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px}
.mkplan{background:var(--surface);border-radius:var(--r-card,14px);padding:18px;
  box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:11px}
.mkplan.on{box-shadow:var(--shadow-lg);outline:2px solid var(--primary,#6D3DF5);outline-offset:-2px}
.mkplan .nm{margin:0;font-size:18px;font-weight:660}
.mkplan .pr{margin:0;font-size:24px;font-weight:680;font-variant-numeric:tabular-nums;line-height:1.1}
.mkplan .pr small{font-size:14.5px;font-weight:400;color:var(--muted)}
.mkplan .bl{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
.mkplan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;flex:1}
.mkplan li{font-size:14.5px;line-height:1.5;padding-left:19px;position:relative;color:var(--ink-2,#333A54)}
.mkplan li::before{content:'';position:absolute;left:2px;top:7px;width:8px;height:5px;
  border-left:2px solid var(--green-600,#00A874);border-bottom:2px solid var(--green-600,#00A874);
  transform:rotate(-45deg)}
.mknote{font-size:14px;line-height:1.6;color:var(--muted);margin:0;padding:12px 14px;
  border-radius:var(--r-md,12px);background:var(--bg-2,#F2F2F8)}

/* the credits statement */
.mkledger{display:flex;flex-direction:column;gap:0}
.mkline{display:flex;gap:12px;align-items:baseline;padding:11px 2px;border-top:1px solid var(--line)}
.mkline:first-child{border-top:0}
.mkline .r{flex:1;min-width:0;font-size:15px}
.mkline .w{font-size:13px;color:var(--muted);display:block;margin-top:2px}
.mkline .d{font-size:15.5px;font-weight:640;font-variant-numeric:tabular-nums;white-space:nowrap}
.mkline .d.pos{color:var(--green-600,#00A874)}

/* ══════════════════════════════════════════════════════════════════
   DEAL ROOM · offers and counteroffers

   Two people arguing about a number. The design job is to make the
   number on the table unmissable, make whose move it is obvious
   without reading, and make the history feel like a record rather
   than a chat — because that is what it is, and what it is for.

   There is nothing here that manufactures pressure. No "3 others
   viewing", no red countdown, no urgency the situation does not
   already have. The deadline is shown plainly because both sides
   agreed to it.
   ══════════════════════════════════════════════════════════════════ */

.dealroom{display:flex;flex-direction:column;gap:15px}

/* Measured, not assumed: this modal's body computes to white, so the
   emphasis block is TINTED to separate from it. The dashboard lesson was
   the same principle with the opposite implementation — cards there sit on
   the page's grey ground and must be --surface. Contrast is against the
   ground you are actually on, and the only way to know it is to measure. */
.dealtop{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  padding:17px 18px;border-radius:var(--r-card,14px);background:var(--bg-2,#F2F2F8)}
.dealtop .amt{flex:1;min-width:150px}
.dealtop .k{margin:0 0 3px;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.dealtop .v{margin:0;font-size:30px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.dealtop .ask{margin:4px 0 0;font-size:14px;color:var(--muted)}
.dealtop .ask s{opacity:.75}

.dealturn{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:640;
  padding:6px 12px;border-radius:var(--r-pill,999px);white-space:nowrap}
.dealturn.you{background:var(--primary,#6D3DF5);color:var(--on-primary,#fff)}
.dealturn.them{background:var(--surface);color:var(--muted);box-shadow:var(--shadow-sm)}
.dealturn.done{background:var(--good-soft,rgba(24,184,106,.12));color:var(--green-600,#00A874)}
.dealturn.gone{background:var(--surface);color:var(--muted);box-shadow:var(--shadow-sm)}

.dealline{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2,#333A54)}
.dealclock{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;margin:0}

/* the record — a ledger, not a chat */
.dealhist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.dealhist li{display:flex;gap:13px;padding:12px 0;border-top:1px solid var(--line)}
.dealhist li:first-child{border-top:0}
.dealhist .side{flex:0 0 62px;font-size:13px;color:var(--muted);padding-top:3px}
.dealhist .body{flex:1;min-width:0}
.dealhist .amt{margin:0;font-size:17px;font-weight:640;font-variant-numeric:tabular-nums}
.dealhist .amt small{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-left:8px}
.dealhist .note{margin:4px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2,#333A54)}
.dealhist time{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.dealhist li.mine .amt{color:var(--primary-ink,#5A2FD1)}
.dealhist li.accepted .amt{color:var(--green-600,#00A874)}
.dealhist li.expired .amt,.dealhist li.declined .amt,.dealhist li.withdrawn .amt{color:var(--muted)}

.dealform{display:flex;flex-direction:column;gap:10px;padding:16px 17px;
  border:1px solid var(--line);border-radius:var(--r-card,14px)}
.dealform label{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:5px}
.dealform input,.dealform textarea{width:100%;min-height:46px;padding:11px 13px;font-size:16px;
  border:1px solid var(--line-strong,#D5D5E8);border-radius:var(--r-md,12px);
  background:var(--surface);color:var(--ink);font-family:inherit}
.dealform input{font-variant-numeric:tabular-nums;font-size:20px;font-weight:600}
.dealform textarea{min-height:74px;resize:vertical;line-height:1.55;font-size:15.5px}
.dealrow{display:flex;gap:9px}
.dealrow > *{flex:1}

.dealbtn{min-height:46px;border-radius:var(--r-md,12px);border:1px solid var(--line-strong,#D5D5E8);
  background:var(--surface);color:var(--ink);font-size:16px;font-weight:600;cursor:pointer;padding:0 14px}
.dealbtn:hover{background:var(--bg-2,#F2F2F8)}
.dealbtn:focus-visible{outline:2px solid var(--primary,#6D3DF5);outline-offset:2px}
.dealbtn.pri{background:var(--primary,#6D3DF5);border-color:transparent;color:var(--on-primary,#fff);
  box-shadow:var(--shadow-primary)}
.dealbtn.pri:hover{background:var(--primary-hover,#5A2FD1)}
.dealbtn.no{border-color:var(--danger,#E1293A);color:var(--danger-ink,#C21D2E);background:transparent}
.dealbtn.no:hover{background:var(--danger-soft,#FFE9EB)}
.dealbtn[disabled]{opacity:.5;cursor:not-allowed}

.dealnote{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted);
  padding:11px 13px;border-radius:var(--r-md,12px);background:var(--bg-2,#F2F2F8)}

/* the list of open negotiations */
.deallist{display:flex;flex-direction:column;gap:10px}
.dealcard{display:flex;gap:13px;align-items:center;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card,14px);
  padding:15px;transition:border-color .16s ease,box-shadow .16s ease}
.dealcard:hover{border-color:var(--primary,#6D3DF5);box-shadow:var(--shadow-sm)}
.dealcard:focus-visible{outline:2px solid var(--primary,#6D3DF5);outline-offset:2px}
.dealcard .t{flex:1;min-width:0}
.dealcard .t b{display:block;font-size:16px;font-weight:620;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.dealcard .t span{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.dealcard .n{flex:none;font-size:17px;font-weight:660;font-variant-numeric:tabular-nums}

/* Urgent, both sides */
.urgsec{margin:2px 0 0;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:650}
.urg.now{background:rgba(217,148,43,.2);color:var(--amber-600,#DB8104)}

/* ══════════════════════════════════════════════════════════════════
   TYPE SCALE AND DEPTH
   ------------------------------------------------------------------
   The site was set at 14px body with supporting text at 12.5, 11 and
   9.5 — and a measurement of the rendered home page found 214 separate
   elements drawn at 9 to 11 pixels. That is not a stylistic preference,
   it is text most people cannot read comfortably, and it was the
   default for almost everything that was not a heading.

   Every size moves up one step. The RATIOS are kept, so the hierarchy
   that was there still reads as hierarchy — this is a scale change,
   not a redesign, and nothing needs relaying out.

     display  44 → 48      body   14   → 15.5
     h1       30 → 33      small  12.5 → 13.5
     h2       21 → 23      xs     11   → 12.5
     h3       16 → 18      micro  9.5  → 11

   Micro at 11px is still small. It is used for uppercase labels with
   wide tracking, where 11 reads like 13 does in sentence case, and
   lifting it further would have it competing with the content it
   labels.

   DEPTH. The palette is almost entirely flat: one surface colour, one
   hairline border, no elevation. That reads as unfinished rather than
   as calm, and it gives the eye nothing to order the page by. What is
   added here is deliberately quiet — a real shadow ramp, a barely-there
   gradient on raised surfaces so they catch light from one direction,
   and a lift on hover for things that are actually clickable. No new
   hues: the identity is unchanged.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --fs-display: 48px;
  --fs-h1: 33px;
  --fs-h2: 23px;
  --fs-h3: 18px;
  --fs-body: 15.5px;
  --fs-sm: 13.5px;
  --fs-xs: 12.5px;
  --fs-micro: 12px;

  /* An elevation ramp rather than one shadow used everywhere. Each step
     is a larger, softer, more transparent shadow plus a tight contact
     shadow — the contact shadow is what stops a card looking like it is
     floating rather than resting. */
  --e1: 0 1px 2px rgba(11,16,32,.06), 0 1px 1px rgba(11,16,32,.04);
  --e2: 0 2px 4px rgba(11,16,32,.05), 0 6px 14px -6px rgba(11,16,32,.14);
  --e3: 0 3px 6px rgba(11,16,32,.06), 0 14px 30px -12px rgba(11,16,32,.20);
  --e4: 0 6px 12px rgba(11,16,32,.07), 0 28px 56px -20px rgba(11,16,32,.28);
}

body { font-size: var(--fs-body); }

/* The price is the number people came for; it was the same size as a
   heading three. */
.t-price { font-size:20px; }

/* ── depth ──────────────────────────────────────────────────────── */

.card,
.panel {
  box-shadow: var(--e2);
  /* A gradient of barely two per cent, which is enough for the eye to
     read a light source and not enough to notice as a gradient. */
  background-image: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
}

.card:hover {
  box-shadow: var(--e3);
}

/* Only things that actually go somewhere lift. A card that rises under
   the pointer and then does nothing is a promise the interface breaks. */
.card-hover,
a.card,
button.card {
  transition: box-shadow .16s ease, transform .16s ease;
}
.card-hover:hover,
a.card:hover,
button.card:hover {
  box-shadow: var(--e3);
  transform: translateY(-2px);
}

.btn-pri {
  box-shadow: 0 1px 2px rgba(11,16,32,.10), 0 6px 16px -8px var(--primary, #5A2FD1);
}
.btn-pri:hover {
  box-shadow: 0 2px 4px rgba(11,16,32,.12), 0 10px 22px -8px var(--primary, #5A2FD1);
}

/* The header is the one element that is always over content, so it is
   the one element that genuinely needs to say it is above it. */
header {
  box-shadow: 0 1px 0 var(--line-2, #E0DFF0), 0 6px 20px -18px rgba(11,16,32,.5);
}

/* Inputs read as inset rather than as another flat rectangle. */
.fld input,
.fld select,
.fld textarea,
input[type="text"],
input[type="search"],
input[type="number"] {
  box-shadow: inset 0 1px 2px rgba(11,16,32,.05);
}

/* Dark mode inverts where the light comes from: a white overlay on a
   dark surface reads as lit, and the same shadows need to be heavier to
   register at all. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --e1: 0 1px 2px rgba(0,0,0,.45);
    --e2: 0 2px 4px rgba(0,0,0,.4), 0 6px 14px -6px rgba(0,0,0,.55);
    --e3: 0 3px 6px rgba(0,0,0,.45), 0 14px 30px -12px rgba(0,0,0,.6);
    --e4: 0 6px 12px rgba(0,0,0,.5), 0 28px 56px -20px rgba(0,0,0,.7);
  }
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .panel {
    background-image: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0));
  }
}
:root[data-theme="dark"] {
  --e1: 0 1px 2px rgba(0,0,0,.45);
  --e2: 0 2px 4px rgba(0,0,0,.4), 0 6px 14px -6px rgba(0,0,0,.55);
  --e3: 0 3px 6px rgba(0,0,0,.45), 0 14px 30px -12px rgba(0,0,0,.6);
  --e4: 0 6px 12px rgba(0,0,0,.5), 0 28px 56px -20px rgba(0,0,0,.7);
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel {
  background-image: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0));
}

@media (prefers-reduced-motion: reduce) {
  .card-hover, a.card, button.card { transition: none; }
  .card-hover:hover, a.card:hover, button.card:hover { transform: none; }
}

/* The approximate figure is deliberately quieter than the asking price: it is
   a courtesy, not a quote. */
.t-approx{margin-left:7px;font-size:.72em;font-weight:600;opacity:.55;white-space:nowrap;
  font-variant-numeric:tabular-nums}