/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.20_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.20_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../node_modules/.pnpm/@fontsource-variable+manrope@5.2.8/node_modules/@fontsource-variable/manrope/index.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* manrope-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/_next/static/media/manrope-cyrillic-ext-wght-normal.d1990364.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* manrope-cyrillic-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/_next/static/media/manrope-cyrillic-wght-normal.2ffcac4f.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* manrope-greek-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/_next/static/media/manrope-greek-wght-normal.6b69666c.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* manrope-vietnamese-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/_next/static/media/manrope-vietnamese-wght-normal.383b32a0.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* manrope-latin-ext-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/_next/static/media/manrope-latin-ext-wght-normal.f5cc7610.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* manrope-latin-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/_next/static/media/manrope-latin-wght-normal.fedf4c92.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.20_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.20_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../node_modules/.pnpm/@fontsource-variable+cinzel@5.2.8/node_modules/@fontsource-variable/cinzel/index.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cinzel-latin-ext-wght-normal */
@font-face {
  font-family: 'Cinzel Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/_next/static/media/cinzel-latin-ext-wght-normal.b890c8dd.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* cinzel-latin-wght-normal */
@font-face {
  font-family: 'Cinzel Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/_next/static/media/cinzel-latin-wght-normal.38770623.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.20_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.20_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../node_modules/.pnpm/@fontsource-variable+rubik@5.2.8/node_modules/@fontsource-variable/rubik/index.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* rubik-arabic-wght-normal */
@font-face {
  font-family: 'Rubik Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(/_next/static/media/rubik-arabic-wght-normal.de77a7a8.woff2) format('woff2-variations');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* rubik-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Rubik Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(/_next/static/media/rubik-cyrillic-ext-wght-normal.7fef92f1.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* rubik-cyrillic-wght-normal */
@font-face {
  font-family: 'Rubik Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(/_next/static/media/rubik-cyrillic-wght-normal.061205ea.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* rubik-hebrew-wght-normal */
@font-face {
  font-family: 'Rubik Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(/_next/static/media/rubik-hebrew-wght-normal.ca737b43.woff2) format('woff2-variations');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}

/* rubik-latin-ext-wght-normal */
@font-face {
  font-family: 'Rubik Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(/_next/static/media/rubik-latin-ext-wght-normal.86979194.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* rubik-latin-wght-normal */
@font-face {
  font-family: 'Rubik Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(/_next/static/media/rubik-latin-wght-normal.7b9378a5.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.20_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.20_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   TVDE — Luxury design system

   Themeable: every surface reads from the tokens below, so a theme
   is just an override block (see "Themes" further down). The
   `--gold-*` names are historical — read them as "accent". Anything
   new MUST use tokens (never a literal accent colour) or it will
   stay gold in every theme.

   --accent-rgb / --accent-bright-rgb are bare channels so alpha
   variants can be composed: rgba(var(--accent-rgb), 0.3).
   --metal-* drive the bevelled "solid gold" surfaces (CTA, slider
   knob); --metal-ink is the text printed on them.
   ============================================================ */

:root {
  --bg-0: #060607;
  --bg-1: #0d0d10;
  --bg-2: #16161a;
  --bg-3: #1e1e24;

  --accent-rgb: 212, 175, 55;
  --accent-bright-rgb: 244, 220, 133;

  --gold: #d4af37;
  --gold-bright: #f4dc85;
  --gold-deep: #8e6f1f;
  --gold-grad: linear-gradient(
    120deg,
    var(--metal-deep) 0%,
    var(--metal-mid) 30%,
    var(--metal-hi) 50%,
    var(--metal-mid) 70%,
    var(--metal-deep) 100%
  );
  --gold-hairline: rgba(var(--accent-rgb), 0.28);
  --gold-faint: rgba(var(--accent-rgb), 0.1);

  --metal-hi: #f6e27a;
  --metal-mid: #d4af37;
  --metal-deep: #8e6f1f;
  --metal-edge: rgba(88, 64, 12, 0.6);
  --metal-ink: #17130a;
  --metal-emboss: rgba(255, 246, 200, 0.45);

  --ink: #f2f0e9;
  --ink-muted: #a3a094;
  --ink-faint: #6d6b62;
  --star-off: #45412f;

  --ok: #4ade80;
  --ok-dim: rgba(74, 222, 128, 0.12);
  --warn: #fbbf24;
  --danger: #f87171;
  --danger-dim: rgba(248, 113, 113, 0.12);

  --glass: rgba(13, 13, 16, 0.82);
  --glass-border: 1px solid var(--gold-hairline);
  --shadow-panel: 0 24px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.4);
  --vignette: 6, 6, 7;
  --radius: 18px;
  --radius-sm: 12px;

  --font-display: 'Cinzel Variable', 'Times New Roman', serif;
  --font-ui: 'Manrope Variable', system-ui, -apple-system, sans-serif;

  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

/* ---------------- Themes ----------------
   Only tokens here. `data-theme` is set before first paint by the
   bootstrap script in layout.tsx (lib/theme.tsx owns the list and
   the matching map/3D colours). */

/* Redford — measured from the reference board (design-refs/redford-dashboard):
   pure-black canvas, neutral #1c1c1c charcoal cards (the red lives in glows
   and signals, never in surfaces), #e3312e signal red, green for positives,
   amber→yellow gradient as the highlight accent, rounded techy numerals. */
:root[data-theme='redford'] {
  --bg-0: #000000;
  --bg-1: #131313;
  --bg-2: #1c1c1c;
  --bg-3: #262626;

  --accent-rgb: 227, 49, 46;
  --accent-bright-rgb: 255, 106, 92;

  --gold: #e3312e;
  --gold-bright: #ff6a5c;
  --gold-deep: #8a1512;

  --metal-hi: #ff6257;
  --metal-mid: #d92b28;
  --metal-deep: #8a1210;
  --metal-edge: rgba(60, 6, 6, 0.7);
  /* The reference prints WHITE on its red buttons, embossed downward. */
  --metal-ink: #fff2f1;
  --metal-emboss: rgba(80, 6, 6, 0.45);

  --ink: #f5f2f2;
  --ink-muted: #8f8a8a;
  --ink-faint: #5c5757;
  --star-off: #3a2b2a;

  --ok: #46d16b;
  --glass: rgba(14, 13, 13, 0.9);
  --vignette: 0, 0, 0;

  --font-display: 'Rubik Variable', var(--font-ui);

  --radius: 5px;
  --radius-sm: 3px;
  --ease-lux: cubic-bezier(0.3, 0, 0.12, 1);
}

/* Redford Claro — the reference's DNA translated to daylight: white paper
   surfaces, the same signal red (deepened a touch for contrast), amber
   highlight, green positives. */
:root[data-theme='redford-light'] {
  --bg-0: #efeded;
  --bg-1: #ffffff;
  --bg-2: #f7f5f5;
  --bg-3: #eceaea;

  --accent-rgb: 214, 36, 44;
  --accent-bright-rgb: 227, 49, 46;

  --gold: #d6242c;
  --gold-bright: #b71a22;
  --gold-deep: #e3312e;

  --metal-hi: #ff6257;
  --metal-mid: #d92b28;
  --metal-deep: #9d1215;
  --metal-edge: rgba(120, 14, 14, 0.45);
  --metal-ink: #fff2f1;
  --metal-emboss: rgba(80, 6, 6, 0.4);

  --ink: #1d1516;
  --ink-muted: #7d7274;
  --ink-faint: #a89e9f;
  --star-off: #d9cccd;

  --ok: #1f9d4e;
  --glass: rgba(255, 255, 255, 0.92);
  --glass-border: 1px solid rgba(var(--accent-rgb), 0.28);
  --shadow-panel: 0 20px 50px rgba(120, 20, 24, 0.14), 0 0 0 1px rgba(120, 20, 24, 0.05);
  --vignette: 239, 237, 237;

  --font-display: 'Rubik Variable', var(--font-ui);

  --radius: 5px;
  --radius-sm: 3px;
  --ease-lux: cubic-bezier(0.3, 0, 0.12, 1);

  color-scheme: light;
}


/* Heaven — clouds and weightlessness, iOS-clean. System font, frosted
   materials, Apple system colours. Dark = night above the clouds. */
:root[data-theme='heaven'] {
  --bg-0: #0b1020;
  --bg-1: #141b31;
  --bg-2: #1c2440;
  --bg-3: #26304f;

  --accent-rgb: 10, 132, 255;
  --accent-bright-rgb: 124, 192, 255;

  --gold: #0a84ff;
  --gold-bright: #7cc0ff;
  --gold-deep: #0060cc;

  --metal-hi: #4da3ff;
  --metal-mid: #0a84ff;
  --metal-deep: #0060cc;
  --metal-edge: transparent;
  --metal-ink: #ffffff;
  --metal-emboss: transparent;

  --ink: #f2f4f8;
  --ink-muted: #98a0b3;
  --ink-faint: #5f6880;
  --star-off: #3a445f;

  --ok: #30d158;
  --warn: #ff9f0a;
  --danger: #ff453a;
  --danger-dim: rgba(255, 69, 58, 0.14);

  --glass: rgba(20, 27, 49, 0.72);
  --glass-border: 1px solid rgba(255, 255, 255, 0.09);
  --shadow-panel: 0 18px 60px rgba(2, 6, 18, 0.6);
  --vignette: 11, 16, 32;
  --radius: 24px;
  --radius-sm: 14px;

  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;

  --ease-lux: cubic-bezier(0.32, 0.72, 0, 1);
}

:root[data-theme='heaven-light'] {
  --bg-0: #eaf2fb;
  --bg-1: #ffffff;
  --bg-2: #f2f6fb;
  --bg-3: #e5edf8;

  --accent-rgb: 0, 122, 255;
  --accent-bright-rgb: 102, 179, 255;

  --gold: #007aff;
  --gold-bright: #0a6ae0;
  --gold-deep: #66b3ff;

  --metal-hi: #4da3ff;
  --metal-mid: #007aff;
  --metal-deep: #0a6ae0;
  --metal-edge: transparent;
  --metal-ink: #ffffff;
  --metal-emboss: transparent;

  --ink: #1c1c1e;
  --ink-muted: #8e8e93;
  --ink-faint: #c0c4cc;
  --star-off: #d5d9e0;

  --ok: #34c759;
  --warn: #ff9500;
  --danger: #ff3b30;
  --danger-dim: rgba(255, 59, 48, 0.12);

  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: 1px solid rgba(255, 255, 255, 0.65);
  --shadow-panel: 0 14px 50px rgba(31, 60, 110, 0.16);
  --vignette: 234, 242, 251;
  --radius: 24px;
  --radius-sm: 14px;

  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;

  --ease-lux: cubic-bezier(0.32, 0.72, 0, 1);

  color-scheme: light;
}

/* The one light theme: parchment and deep gold. */
:root[data-theme='ivory'] {
  --bg-0: #efe9dc;
  --bg-1: #fbf8f1;
  --bg-2: #f4f0e6;
  --bg-3: #e9e3d5;

  --accent-rgb: 161, 121, 31;
  --accent-bright-rgb: 201, 162, 39;

  --gold: #a1791f;
  --gold-bright: #8a6614;
  --gold-deep: #c9a227;

  --metal-hi: #f0dc9a;
  --metal-mid: #c9a227;
  --metal-deep: #8a6614;
  --metal-edge: rgba(102, 74, 12, 0.5);
  --metal-ink: #21190a;
  --metal-emboss: rgba(255, 250, 224, 0.65);

  --ink: #1e1a12;
  --ink-muted: #6a6252;
  --ink-faint: #948b78;
  --star-off: #cdc4ad;

  --glass: rgba(251, 248, 241, 0.88);
  --glass-border: 1px solid rgba(var(--accent-rgb), 0.35);
  --shadow-panel: 0 20px 50px rgba(90, 72, 30, 0.18), 0 0 0 1px rgba(120, 96, 40, 0.08);
  --vignette: 240, 234, 220;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  font-family: var(--font-ui);
  background: var(--bg-0);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* App chrome is never selectable — text fields are the only exception.
   Applied per-element with !important so no third-party stylesheet (maplibre,
   etc.) can re-enable selection anywhere; a selectstart guard in
   NoTextSelect.tsx backs this up for engines with user-select quirks. */
html {
  -webkit-touch-callout: none;
  /* No blue tap-flash on touch devices (buttons, tabs, links). */
  -webkit-tap-highlight-color: transparent;
}

*:not(input):not(textarea):not([contenteditable='true']) {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
       user-select: none !important;
}

input,
textarea,
[contenteditable='true'] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
       user-select: text !important;
  /* Text fields keep the native long-press edit menu (paste, select…). */
  -webkit-touch-callout: default;
}

/* Focus rings are for keyboard navigation only — never on click/tap. */
:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background: rgba(var(--accent-rgb), 0.35);
  color: #fff;
}

/* Thin gold-tinted scrollbars everywhere. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.35) transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.3);
  border-radius: 999px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}

:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.6);
  outline-offset: 2px;
}

main {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg-0);
}

/* Selector must outrank maplibre's own `.maplibregl-map { position: relative }`,
   which loads after this file and would collapse the map to zero height. */
main > .map-container {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  background: var(--bg-0);
}

/* Night-mode cartography: invert the grayscale positron canvas into warm
   charcoal. Only the canvas is filtered — HTML markers keep true colors;
   the route line pre-compensates for this filter (see MapView). */
.map-container .maplibregl-canvas {
  filter: invert(1) sepia(0.15) brightness(0.85) contrast(1.05);
}

/* Light theme reads the map as printed cartography — no inversion. The route
   colour follows suit in lib/theme.tsx (drawn true, not pre-compensated). */
:root[data-theme='ivory'] .map-container .maplibregl-canvas,
:root[data-theme='redford-light'] .map-container .maplibregl-canvas,
:root[data-theme='heaven-light'] .map-container .maplibregl-canvas {
  filter: saturate(0.85) brightness(1.02);
}

/* Vignette that seats the map into the surrounding chrome. */
.map-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(var(--vignette), 0.55) 100%),
    linear-gradient(180deg, rgba(var(--vignette), 0.5) 0%, transparent 14%),
    linear-gradient(0deg, rgba(var(--vignette), 0.6) 0%, transparent 18%);
}

/* Maplibre chrome, restyled to the theme. */
.maplibregl-ctrl-group {
  background: var(--glass) !important;
  border: var(--glass-border);
  border-radius: 10px !important;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}
.maplibregl-ctrl-group button {
  background: transparent !important;
}
.maplibregl-ctrl-group button + button {
  border-top: 1px solid rgba(var(--accent-rgb), 0.15) !important;
}
.maplibregl-ctrl button .maplibregl-ctrl-icon {
  filter: invert(0.85) sepia(0.3) saturate(2);
}
:root[data-theme='ivory'] .maplibregl-ctrl button .maplibregl-ctrl-icon,
:root[data-theme='redford-light'] .maplibregl-ctrl button .maplibregl-ctrl-icon,
:root[data-theme='heaven-light'] .maplibregl-ctrl button .maplibregl-ctrl-icon {
  filter: none;
}
/* The attribution banner is hidden app-wide (Filipe: "very ugly").
   NOTE: restore some form of OSM attribution before a public launch —
   ODbL requires it. */
.maplibregl-ctrl-attrib {
  display: none !important;
}
.maplibregl-ctrl-attrib a,
.maplibregl-ctrl-attrib-button {
  color: var(--ink-faint) !important;
}

/* Cartographer's mark over the night map. */
.compass-rose {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  color: var(--gold);
  opacity: 0.42;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

@media (max-width: 768px) {
  .compass-rose {
    top: 14px;
    right: 14px;
    opacity: 0.3;
  }
}

/* Three.js ambient backdrop (login screens). */
.luxe-scene {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 70% 15%, rgba(var(--accent-rgb), 0.09), transparent 60%),
    radial-gradient(100% 80% at 20% 100%, rgba(var(--accent-rgb), 0.06), transparent 55%),
    var(--bg-0);
}
.luxe-scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------------- The floating panel ---------------- */

.panel {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 400px;
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  border: var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(var(--accent-bright-rgb), 0.08);
  padding: 0;
  z-index: 10;
}

/* Certificate-style inner hairline frame with a gold clasp at its crown —
   pure decoration, floats above the content without catching the pointer. */
.panel::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(var(--accent-rgb), 0.13);
  border-radius: calc(var(--radius) - 6px);
  pointer-events: none;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='2.4' y='2.4' width='5.2' height='5.2' fill='%23d4af37' fill-opacity='0.9' transform='rotate(45 5 5)'/%3E%3Crect x='0.9' y='0.9' width='8.2' height='8.2' fill='none' stroke='%23d4af37' stroke-opacity='0.45' transform='rotate(45 5 5)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 11px 11px;
  background-position: center top -5.5px;
}

/* Sign-in crest above the wordmark. */
.crest {
  display: flex;
  justify-content: center;
  margin: 4px 0 12px;
  color: var(--gold);
  opacity: 0.9;
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.25));
}

/* Faint crest watermark at the foot of the panel, like marked stationery.
   Masked (not a coloured data-URI) so it takes the theme's accent. */
.panel::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: 216px;
  height: 112px;
  background-color: var(--gold);
  --crest-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 50' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M59.3 39.9 80 32.4M57.2 36.3 74 22.1M54 33.6 65 14.6M50.1 32.2l3.8-21.7M45.9 32.2l-3.8-21.7M42 33.6 31 14.6M38.8 36.3 22 22.1M36.7 39.9 16 32.4'/%3E%3Cpath d='M10 44a38 38 0 0 1 76 0'/%3E%3Cpath d='M4 44h88'/%3E%3Crect x='44.4' y='40.4' width='7.2' height='7.2' transform='rotate(45 48 44)' fill='%23000' stroke='none'/%3E%3Crect x='41' y='37' width='14' height='14' transform='rotate(45 48 44)'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--crest-mark);
  mask-image: var(--crest-mark);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* The frame's clasp is the one ornament that must stay a coloured data-URI
   (the element also draws the frame border, so it cannot be masked). */
:root[data-theme='ivory'] .panel::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='2.4' y='2.4' width='5.2' height='5.2' fill='%23a1791f' transform='rotate(45 5 5)'/%3E%3C/svg%3E");
}

/* Scrollable content region; the grip stays pinned outside it. */
.panel-body {
  position: relative;
  z-index: 1;
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px 22px 8px;
}

/* Drag-to-resize handle (order places it: desktop bottom, mobile top). */
.panel-grip {
  flex: none;
  order: 99;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  touch-action: none;
}

.panel-grip::before {
  content: '';
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(var(--accent-rgb), 0.25),
    rgba(var(--accent-rgb), 0.6),
    rgba(var(--accent-rgb), 0.25)
  );
  transition: width 0.25s var(--ease-lux), filter 0.25s;
}

.panel-grip:hover::before,
.panel.resizing .panel-grip::before {
  width: 68px;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.5));
}

.panel.resizing {
  transition: none;
}

.panel header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-align: left;
  background: var(--gold-grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gold-sheen 7s linear infinite;
}

@keyframes gold-sheen {
  to {
    background-position: 200% center;
  }
}

.tagline {
  margin: 4px 0 18px;
  color: var(--ink-muted);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Ornamental divider under the header: hairlines meeting a lozenge.
   Painted as a solid accent shaped by a mask, so it follows any theme
   (colours inside a data-URI could not). */
.panel header {
  position: relative;
  padding-bottom: 2px;
}
.panel header::after {
  content: '';
  display: block;
  height: 9px;
  margin: 4px 0 12px;
  background-color: rgba(var(--accent-rgb), 0.6);
  --lozenge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Crect x='2.2' y='2.2' width='4.6' height='4.6' fill='%23000' transform='rotate(45 4.5 4.5)'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--lozenge), linear-gradient(90deg, transparent, #000),
    linear-gradient(90deg, #000, transparent);
  mask-image: var(--lozenge), linear-gradient(90deg, transparent, #000),
    linear-gradient(90deg, #000, transparent);
  -webkit-mask-size: 9px 9px, calc(50% - 12px) 1px, calc(50% - 12px) 1px;
  mask-size: 9px 9px, calc(50% - 12px) 1px, calc(50% - 12px) 1px;
  -webkit-mask-position: center, left center, right center;
  mask-position: center, left center, right center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ---------------- Search ---------------- */

.search-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.searchbox {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  transition: border-color 0.3s var(--ease-lux), box-shadow 0.3s var(--ease-lux);
}

.searchbox:focus-within {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 3px var(--gold-faint), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.searchbox-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}

.searchbox input {
  flex: 1 1;
  border: none;
  background: transparent;
  padding: 14px 11px;
  font-size: 15px;
  font-family: var(--font-ui);
  color: var(--ink);
  outline: none;
  min-width: 0;
}

.searchbox input::placeholder {
  color: var(--ink-faint);
}

.searchbox-clear {
  border: none;
  background: transparent;
  font-size: 20px;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.2s;
}
.searchbox-clear:hover {
  color: var(--gold);
}

.searchbox-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: rgba(22, 22, 26, 0.97);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  border: var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
  z-index: 30;
  max-height: 280px;
  overflow-y: auto;
}

.searchbox-results button {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2px;
  text-align: left;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font-ui);
  color: var(--ink);
  transition: background 0.2s;
}

.searchbox-results button:hover {
  background: var(--gold-faint);
}

.searchbox-results button span {
  color: var(--ink-muted);
  font-size: 12px;
}

/* ---------------- Copy ---------------- */

.hint {
  color: var(--ink-muted);
  font-size: 13px;
  margin: 14px 2px 0;
  line-height: 1.5;
}

.error {
  color: var(--danger);
  font-size: 13px;
  margin: 14px 2px 0;
}

.estimate {
  margin-top: 16px;
}

.trip-summary {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 12px;
}

/* ---------------- Ride classes ---------------- */

.ride-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ride-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font-ui);
  color: var(--ink);
  text-align: left;
  transition:
    transform 0.35s var(--ease-lux),
    border-color 0.35s var(--ease-lux),
    box-shadow 0.35s var(--ease-lux),
    background 0.35s var(--ease-lux);
}

.ride-option:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.ride-option.selected {
  border-color: var(--gold);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(var(--accent-rgb), 0.16), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 12px 34px rgba(0, 0, 0, 0.5);
}

/* Gilded spine on the chosen class, like a bookmark in a menu. */
.ride-option.selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--metal-hi), var(--metal-deep));
}

.ride-info > strong {
  font-family: var(--font-display);
  font-size: 14.5px;
  letter-spacing: 0.03em;
}

.ride-info > strong small {
  font-family: var(--font-ui);
  letter-spacing: 0;
}

.ride-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.ride-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ride-info small {
  color: var(--ink-muted);
  font-weight: 400;
}

.ride-info > span {
  color: var(--ink-muted);
  font-size: 12px;
}

.ride-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.03em;
  color: var(--gold-bright);
}

.ride-eta {
  display: block;
  font-size: 12px;
  color: var(--gold);
  font-weight: 600;
}

.ride-option.unavailable {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

/* ---------------- Buttons ---------------- */

/* Solid gold bar: bevelled metal gradient, engraved lettering. */
.cta {
  position: relative;
  width: 100%;
  margin-top: 14px;
  border: 1px solid var(--metal-edge);
  background: linear-gradient(
    180deg,
    var(--metal-hi) 0%,
    color-mix(in srgb, var(--metal-hi) 55%, var(--metal-mid)) 18%,
    var(--metal-mid) 42%,
    color-mix(in srgb, var(--metal-mid) 65%, var(--metal-deep)) 62%,
    color-mix(in srgb, var(--metal-mid) 75%, var(--metal-hi)) 82%,
    var(--metal-deep) 100%
  );
  color: var(--metal-ink);
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-ui);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 0 var(--metal-emboss);
  padding: 15px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 8px 26px rgba(var(--accent-rgb), 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 3px rgba(70, 48, 6, 0.35);
  transition:
    filter 0.3s var(--ease-lux),
    transform 0.25s var(--ease-lux),
    box-shadow 0.35s var(--ease-lux);
}

.cta:hover:not(:disabled) {
  filter: brightness(1.07) saturate(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 12px 34px rgba(var(--accent-rgb), 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 3px rgba(70, 48, 6, 0.3);
}

.cta:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

/* Engraved hairline just inside the bar's edge, like a struck coin rim. */
.cta::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: calc(var(--radius-sm) - 3px);
  border: 1px solid color-mix(in srgb, var(--metal-edge) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.cta.ghost::before,
.cta.danger::before {
  display: none;
}

/* Light sweep across the gold on hover. */
.cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s var(--ease-lux);
  pointer-events: none;
}

.cta:hover:not(:disabled)::after {
  left: 125%;
}

.cta.ghost {
  background: transparent;
  color: var(--gold-bright);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  box-shadow: none;
  text-shadow: none;
  font-weight: 700;
}

.cta.ghost:hover:not(:disabled) {
  background: var(--gold-faint);
  border-color: var(--gold);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.12);
}

.cta.ghost::after {
  display: none;
}

.cta.danger {
  background: linear-gradient(180deg, rgba(153, 27, 27, 0.9), rgba(107, 15, 15, 0.9));
  color: #ffe4e4;
  border: 1px solid rgba(248, 113, 113, 0.35);
  box-shadow: 0 6px 22px rgba(153, 27, 27, 0.3);
  text-shadow: none;
}

.cta.danger:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(185, 28, 28, 0.95), rgba(127, 18, 18, 0.95));
}

.cta.danger::after {
  display: none;
}

.cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

a.cta {
  display: block;
  text-align: center;
  text-decoration: none;
}

/* ---------------- Slide to act ---------------- */

.slide-act {
  position: relative;
  margin-top: 14px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(var(--accent-rgb), 0.05)), var(--bg-2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  touch-action: none;
  transition: border-color 0.45s var(--ease-lux), box-shadow 0.45s var(--ease-lux);
}

.slide-act-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.04));
  pointer-events: none;
}

/* Red layer that fades in over the gold when the variant flips — gradients
   can't transition, opacity can. */
.slide-act-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(248, 113, 113, 0.2), rgba(248, 113, 113, 0.04));
  opacity: 0;
  transition: opacity 0.45s var(--ease-lux);
}

.slide-act.danger .slide-act-fill::before {
  opacity: 1;
}

/* Shimmering hint, like light passing over an engraving. */
.slide-act-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 46px;
  padding-right: 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--ink-muted) 42%,
    rgb(var(--accent-bright-rgb)) 50%,
    var(--ink-muted) 58%
  );
  background-size: 220% auto;
  background-position: 50% center;
  -webkit-background-clip: text;
  background-clip: text;
  animation: slide-hint 3s linear infinite;
  pointer-events: none;
}

@keyframes slide-hint {
  from {
    background-position: 160% center;
  }
  to {
    background-position: -60% center;
  }
}

.slide-act-knob {
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  width: 52px;
  padding: 0;
  border: 1px solid var(--metal-edge);
  border-radius: calc(var(--radius-sm) - 4px);
  background: linear-gradient(180deg, var(--metal-hi), var(--metal-mid) 45%, var(--metal-deep));
  color: var(--metal-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
  box-shadow:
    0 4px 14px rgba(var(--accent-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 3px rgba(70, 48, 6, 0.35);
  transition: border-color 0.45s var(--ease-lux), color 0.45s var(--ease-lux),
    box-shadow 0.45s var(--ease-lux);
}

/* Crimson plate that fades over the gold one on the danger variant. */
.slide-act-knob::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #f3a5a5, #cc3333 45%, #7a1515);
  opacity: 0;
  transition: opacity 0.45s var(--ease-lux);
}

.slide-act.danger .slide-act-knob::before {
  opacity: 1;
}

.slide-act-knob svg {
  position: relative;
  z-index: 1;
}

.slide-act.dragging .slide-act-knob {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.slide-act.complete {
  border-color: rgba(var(--accent-rgb), 0.7);
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.4),
    0 0 26px rgba(var(--accent-rgb), 0.35);
}

.slide-act.morphing .slide-act-knob {
  pointer-events: none;
}

.slide-act.disabled {
  opacity: 0.45;
}

.slide-act.disabled .slide-act-knob {
  cursor: not-allowed;
}

.slide-act.danger {
  border-color: rgba(248, 113, 113, 0.35);
}

.slide-act.danger .slide-act-knob {
  border-color: rgba(90, 10, 10, 0.7);
  color: #2a0505;
  box-shadow:
    0 4px 14px rgba(185, 28, 28, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 3px rgba(60, 5, 5, 0.4);
}

.linklike {
  border: none;
  background: none;
  color: var(--gold);
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  font-family: var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-text-decoration-color: rgba(var(--accent-rgb), 0.4);
          text-decoration-color: rgba(var(--accent-rgb), 0.4);
  transition: color 0.2s, -webkit-text-decoration-color 0.2s;
  transition: color 0.2s, text-decoration-color 0.2s;
  transition: color 0.2s, text-decoration-color 0.2s, -webkit-text-decoration-color 0.2s;
}

.linklike:hover {
  color: var(--gold-bright);
  -webkit-text-decoration-color: var(--gold-bright);
          text-decoration-color: var(--gold-bright);
}

.linklike.block {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  text-align: center;
}

.btn-row {
  display: flex;
  gap: 8px;
}

/* ---------------- Notices ---------------- */

.requested {
  margin-top: 14px;
  background: var(--ok-dim);
  border: 1px solid rgba(74, 222, 128, 0.25);
  color: #bbf7d0;
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 14px;
}

.surge {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fde68a;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  margin: 0 0 10px;
}

.promo-applied {
  background: var(--ok-dim);
  border: 1px solid rgba(74, 222, 128, 0.22);
  color: #a7f3d0;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  margin: 0 0 10px;
}

.struck {
  display: block;
  text-decoration: line-through;
  color: var(--ink-faint);
  font-weight: 400;
  font-size: 12px;
}

/* ---------------- Safety ---------------- */

.safety {
  margin-top: 10px;
}

.safety-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: var(--bg-1);
  border-radius: var(--radius-sm);
}

.pin-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background:
    repeating-radial-gradient(circle at 25% 25%, rgba(var(--accent-rgb), 0.05) 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at 75% 75%, rgba(var(--accent-rgb), 0.05) 0 1px, transparent 1px 7px),
    radial-gradient(140% 140% at 50% 0%, rgba(var(--accent-rgb), 0.14), transparent 70%),
    var(--bg-2);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  margin: 12px 0;
}

.pin-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.pin-value {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.sos-box {
  background: var(--danger-dim);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: var(--radius-sm);
  padding: 10px;
}

.sos-box .cta {
  display: block;
  text-align: center;
  text-decoration: none;
}

/* ---------------- Fields ---------------- */

textarea.field {
  font-family: var(--font-ui);
  resize: vertical;
}

.field-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.field {
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: var(--bg-2);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 13px;
  font-size: 15px;
  font-family: var(--font-ui);
  outline: none;
  width: 100%;
  transition: border-color 0.3s var(--ease-lux), box-shadow 0.3s var(--ease-lux);
}

.field::placeholder {
  color: var(--ink-faint);
}

.field:focus {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 3px var(--gold-faint);
}

select.field option {
  background: var(--bg-2);
  color: var(--ink);
}

.field-label {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 6px;
}

input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--gold);
}

.stop-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

/* ---------------- Tabs ---------------- */

.tabs {
  position: relative;
  display: flex;
  gap: 4px;
  margin: 2px 0 14px;
  padding: 4px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(var(--accent-rgb), 0.04)), var(--bg-1);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 999px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* The gold plate that slides under the active tab (positioned from JS —
   width/height/x/y all measured from the active button, so the bar works
   horizontal or as a vertical sidebar). transform-only motion → compositor
   thread → no stutter while the new tab's content mounts. */
.tab-ink {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: 999px;
  background: var(--gold-grad);
  background-size: 200% auto;
  box-shadow:
    0 4px 18px rgba(var(--accent-rgb), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  pointer-events: none;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}

.tab-ink.no-anim {
  transition: none;
}

.tab {
  position: relative;
  z-index: 1;
  flex: 1 1;
  border: none;
  background: none;
  padding: 10px 4px;
  font-size: 13px;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.35s var(--ease-lux), transform 0.2s var(--ease-lux);
}

.tab:hover {
  color: var(--ink);
}

.tab:active {
  transform: scale(0.96);
}

.tab.active {
  color: var(--metal-ink);
  font-weight: 800;
}

.section-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin: 20px 0 8px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.section-title::before {
  content: '';
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: 0.75;
}

.section-title::after {
  content: '';
  flex: 1 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-hairline), transparent);
}

/* ---------------- Lists / history ---------------- */

.trip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
  width: 100%;
  text-align: left;
  color: var(--ink);
}

.trip-row.as-button {
  border: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 0.2s;
}

.trip-row.as-button:hover {
  background: rgba(var(--accent-rgb), 0.05);
}

.trip-row-main {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.trip-row-main strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-row-main span {
  font-size: 12px;
  color: var(--ink-muted);
}

/* ---------------- Receipt ---------------- */

.receipt {
  margin-top: 10px;
  padding: 14px;
  background: var(--bg-1);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: var(--radius-sm);
}

.receipt-wrap {
  padding: 8px 0 14px;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 3px 0;
  color: var(--ink-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.receipt-row.total {
  border-top: 1px solid rgba(var(--accent-rgb), 0.25);
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 700;
  color: var(--gold-bright);
  font-size: 14px;
}

/* ---------------- Chips ---------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  background: var(--bg-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease-lux);
}

.chip svg {
  color: var(--gold);
}

.chip:hover {
  background: var(--gold-faint);
  border-color: rgba(var(--accent-rgb), 0.5);
  transform: translateY(-1px);
}

/* ---------------- Chat ---------------- */

.chat {
  margin-top: 12px;
}

.chat-toggle {
  width: 100%;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  background: var(--bg-2);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 11px;
  font-size: 14px;
  font-family: var(--font-ui);
  cursor: pointer;
  position: relative;
  transition: border-color 0.25s, background 0.25s;
}

.chat-toggle:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
}

.chat-badge {
  background: var(--gold-grad);
  color: var(--metal-ink);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 800;
  margin-left: 6px;
}

.chat-list {
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bubble {
  align-self: flex-start;
  background: var(--bg-3);
  color: var(--ink);
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: 14px 14px 14px 4px;
  padding: 8px 12px;
  font-size: 13px;
  max-width: 85%;
  word-break: break-word;
}

.bubble.mine {
  align-self: flex-end;
  background: linear-gradient(135deg, color-mix(in srgb, var(--metal-mid) 80%, var(--metal-deep)), var(--metal-deep));
  border: none;
  color: var(--metal-ink);
  font-weight: 600;
  border-radius: 14px 14px 4px 14px;
}

.chat-input {
  display: flex;
  gap: 6px;
}

.chat-input input {
  flex: 1 1;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  background: var(--bg-2);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-ui);
  outline: none;
  min-width: 0;
  transition: border-color 0.25s;
}

.chat-input input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.chat-input .cta {
  width: auto;
  margin: 0;
  padding: 10px 14px;
  font-size: 14px;
}

/* ---------------- Stats ---------------- */

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin: 10px 0;
}

/* Guilloché: two offset engine-turned circle fields interfere like an
   engraved watch dial. Used on every "money" surface. */
.stat {
  background:
    repeating-radial-gradient(circle at 28% 18%, rgba(var(--accent-rgb), 0.05) 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at 72% 82%, rgba(var(--accent-rgb), 0.05) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: var(--radius-sm);
  padding: 14px;
  position: relative;
  overflow: hidden;
}

.stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-bright-rgb), 0.35), transparent);
}

.stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.stat-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* ---------------- Documents ---------------- */

.doc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
  font-size: 13px;
}

.doc-status {
  margin-left: auto;
  font-size: 12px;
}

.doc-status.ok {
  color: var(--ok);
}

.doc-status.bad {
  color: var(--danger);
}

/* ---------------- Map markers ---------------- */

.car-marker {
  line-height: 0;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.55)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
  cursor: default;
}

/* ---------------- Trip progress ---------------- */

.stage {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 13px 0;
}

.stage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  flex-shrink: 0;
  transition: background 0.4s, box-shadow 0.4s;
}

.stage-dot.done {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
}

.stage-dot.active {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.2), 0 0 14px rgba(var(--accent-rgb), 0.55);
  animation: stage-pulse 2s var(--ease-lux) infinite;
}

@keyframes stage-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.2), 0 0 14px rgba(var(--accent-rgb), 0.5);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0.08), 0 0 20px rgba(var(--accent-rgb), 0.7);
  }
}

.stage-label {
  font-size: 13px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

.stage-label.current {
  color: var(--ink);
  font-weight: 700;
}

.eta-big {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--gold-grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gold-sheen 7s linear infinite;
  margin: 4px 0 0;
}

/* ---------------- Driver card ---------------- */

.driver-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background:
    repeating-radial-gradient(circle at 20% 30%, rgba(var(--accent-rgb), 0.04) 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at 85% 75%, rgba(var(--accent-rgb), 0.04) 0 1px, transparent 1px 7px),
    radial-gradient(120% 200% at 100% 0%, rgba(var(--accent-rgb), 0.08), transparent 55%),
    var(--bg-1);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: var(--radius-sm);
  margin-top: 12px;
}

/* Watch-bezel ring: metal, dark channel, outer gold ring. */
.driver-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gold-grad);
  color: var(--metal-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 800;
  font-family: var(--font-display);
  flex-shrink: 0;
  box-shadow:
    0 0 0 2px var(--bg-1),
    0 0 0 3px rgba(var(--accent-rgb), 0.55),
    0 4px 16px rgba(var(--accent-rgb), 0.35);
}

/* Engraved metal plaque. */
.plate {
  display: inline-block;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-1));
  color: var(--gold-bright);
  border-radius: 6px;
  padding: 3px 9px;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}

/* ---------------- Rating ---------------- */

.stars {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  justify-content: center;
}

.star {
  line-height: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--star-off);
  padding: 0;
  transition: transform 0.25s var(--ease-lux), color 0.25s, filter 0.25s;
}

.star:hover {
  transform: scale(1.15);
  color: var(--gold-deep);
}

.star.on {
  color: var(--gold);
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.6));
}

/* ---------------- Dev box ---------------- */

.dev-box {
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px dashed rgba(var(--accent-rgb), 0.45);
  border-radius: var(--radius-sm);
  background: var(--gold-faint);
}

.dev-note {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--ink-muted);
}

/* ---------------- Key-value ---------------- */

.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
}

.kv span {
  color: var(--ink-muted);
  flex-shrink: 0;
}

.kv strong {
  text-align: right;
}

/* The offer is an invitation — it breathes a soft gold glow. */
.offer-card {
  margin-top: 14px;
  border: 1px solid var(--gold);
  background:
    repeating-radial-gradient(circle at 22% 20%, rgba(var(--accent-rgb), 0.045) 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at 80% 85%, rgba(var(--accent-rgb), 0.045) 0 1px, transparent 1px 7px),
    radial-gradient(140% 180% at 50% 0%, rgba(var(--accent-rgb), 0.12), transparent 60%),
    var(--bg-1);
  border-radius: var(--radius-sm);
  padding: 14px;
  animation: offer-glow 3.2s var(--ease-lux) infinite;
}

@keyframes offer-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(var(--accent-rgb), 0.22),
      0 14px 40px rgba(0, 0, 0, 0.5),
      0 0 22px rgba(var(--accent-rgb), 0.12);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(var(--accent-rgb), 0.45),
      0 14px 40px rgba(0, 0, 0, 0.5),
      0 0 40px rgba(var(--accent-rgb), 0.3);
  }
}

/* ---------------- Header / language ---------------- */

.header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.lang-switch {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.lang-btn {
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  background: transparent;
  color: var(--ink-muted);
  font-size: 11px;
  font-family: var(--font-ui);
  padding: 3px 7px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.lang-btn:hover {
  color: var(--ink);
  border-color: rgba(var(--accent-rgb), 0.45);
}

.lang-btn.active {
  background: var(--gold-grad);
  border-color: transparent;
  color: var(--metal-ink);
  font-weight: 700;
}

/* ---------------- Commission split ---------------- */

.split-box {
  background: var(--bg-1);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 10px;
  padding: 12px;
  margin: 8px 0;
}

.split-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 3px 0;
  color: var(--ink-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.split-row.total {
  border-top: 1px solid rgba(var(--accent-rgb), 0.25);
  margin-top: 4px;
  padding-top: 6px;
  color: var(--gold-bright);
  font-weight: 700;
}

.plain-list {
  margin: 4px 0 10px;
  padding-left: 18px;
  font-size: 13px;
  color: var(--ink-muted);
}

.plain-list li {
  margin: 3px 0;
}

/* Keeps child margins inside SmoothHeight regardless of overflow toggling —
   without it, content jumps a few px when a height tween ends. */
.smooth-inner {
  display: flow-root;
}

/* ---------------- Theme picker ---------------- */

/* One column: the theme names are long enough that two would ellipsise. */
.theme-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin: 10px 0 4px;
}

.theme-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  color: var(--ink);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s var(--ease-lux), transform 0.3s var(--ease-lux),
    box-shadow 0.3s var(--ease-lux);
}

.theme-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.theme-card.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 8px 22px rgba(0, 0, 0, 0.35);
}

.theme-swatch {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.theme-swatch-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.theme-card-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.theme-card-text strong {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-card-text span {
  font-size: 11px;
  color: var(--ink-muted);
}

/* Light/dark mode switch under the family cards. */
.mode-switch {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.mode-btn {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  background: var(--bg-2);
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.3s var(--ease-lux), background 0.3s var(--ease-lux),
    border-color 0.3s var(--ease-lux), box-shadow 0.3s var(--ease-lux);
}

.mode-btn:hover {
  color: var(--ink);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.mode-btn.active {
  background: var(--gold-grad);
  color: var(--metal-ink);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.25);
}

/* ---------------- Light-theme corrections ---------------- */

/* Engraving and glow read as grime on parchment — soften both. */
:root[data-theme='ivory'] .stat,
:root[data-theme='ivory'] .driver-card,
:root[data-theme='ivory'] .pin-box,
:root[data-theme='ivory'] .offer-card {
  background-image: none;
}

:root[data-theme='ivory'] .ride-option,
:root[data-theme='ivory'] .stat,
:root[data-theme='ivory'] .theme-card {
  background: var(--bg-1);
}

:root[data-theme='ivory'] .searchbox,
:root[data-theme='ivory'] .field,
:root[data-theme='ivory'] .chat-input input,
:root[data-theme='ivory'] .chat-toggle,
:root[data-theme='ivory'] .chip,
:root[data-theme='ivory'] .plate {
  background: #fffdf7;
}

:root[data-theme='ivory'] .tabs,
:root[data-theme='ivory'] .slide-act {
  background: #efe9db;
  box-shadow: inset 0 1px 3px rgba(120, 96, 40, 0.16);
}

:root[data-theme='ivory'] .bubble {
  background: #efe9db;
}

:root[data-theme='ivory'] .panel::after {
  opacity: 0.08;
}

:root[data-theme='ivory'] .luxe-scene,
:root[data-theme='redford-light'] .luxe-scene {
  background:
    radial-gradient(90% 70% at 70% 15%, rgba(var(--accent-rgb), 0.16), transparent 60%),
    radial-gradient(100% 80% at 20% 100%, rgba(var(--accent-rgb), 0.1), transparent 55%),
    var(--bg-0);
}

:root[data-theme='ivory'] .car-marker {
  filter: drop-shadow(0 1px 3px rgba(90, 72, 30, 0.5));
}

/* ---------------- Skeleton shimmer ---------------- */

/* Skeleton metrics deliberately mirror the loaded layout (section-title,
   stat-grid, trip-row) so content doesn't shift when real data lands. */
.skeleton {
  padding: 0 0 8px;
}

.skeleton-bar {
  height: 13px;
  border-radius: 6px;
  background: linear-gradient(
    100deg,
    rgba(var(--accent-rgb), 0.07) 30%,
    rgba(var(--accent-rgb), 0.18) 50%,
    rgba(var(--accent-rgb), 0.07) 70%
  );
  background-size: 220% 100%;
  animation: shimmer 1.6s linear infinite;
}

.skeleton-bar.thin {
  height: 9px;
  opacity: 0.7;
}

/* Mirrors .section-title: margin 20px 0 8px, ~14px line box. */
.skeleton-title {
  width: 38%;
  height: 14px;
  margin: 20px 0 8px;
}

/* Mirrors .trip-row: 11px vertical padding + row border. */
.skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.05);
}

.skeleton-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(
    100deg,
    rgba(var(--accent-rgb), 0.07) 30%,
    rgba(var(--accent-rgb), 0.18) 50%,
    rgba(var(--accent-rgb), 0.07) 70%
  );
  background-size: 220% 100%;
  animation: shimmer 1.6s linear infinite;
}

.skeleton-lines {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Mirrors .stat-grid: same gap and vertical margins. */
.skeleton-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin: 10px 0;
}

.skeleton-stat {
  height: 64px;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    100deg,
    rgba(var(--accent-rgb), 0.06) 30%,
    rgba(var(--accent-rgb), 0.14) 50%,
    rgba(var(--accent-rgb), 0.06) 70%
  );
  background-size: 220% 100%;
  animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -100% 0;
  }
}

/* ---------------- Mobile: bottom sheet ---------------- */

@media (max-width: 768px) {
  .panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 68dvh;
    border-radius: 22px 22px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.7);
  }

  /* The grip becomes the sheet's grab-handle, pinned to the top. */
  .panel-grip {
    order: -1;
    height: 26px;
  }

  /* The grab-handle occupies the frame's crown — drop the clasp there. */
  .panel::before {
    background-image: none;
  }

  .panel-body {
    padding: 2px 22px 22px;
  }

  .panel header h1 {
    font-size: 24px;
  }

  .eta-big {
    font-size: 28px;
  }
}

/* ---------------- Ops console ---------------- */

main.admin {
  height: auto;
  min-height: 100dvh;
  overflow: auto;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(var(--accent-rgb), 0.07), transparent 70%),
    var(--bg-0);
  padding: 24px 12px;
}

.admin-panel {
  max-width: 860px;
  margin: 0 auto;
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px);
          backdrop-filter: blur(22px);
  border: var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(var(--accent-bright-rgb), 0.08);
  padding: 24px;
}

main.admin .stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.admin-panel h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--gold-grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gold-sheen 7s linear infinite;
}



/* ============================================================
   REDLINE — the racing frontend. Aggressive and fast: hard
   chamfered angles (clip-path, no soft radii), skewed menu
   items, racing stripes, checkered-flag and hazard motifs,
   carbon-fibre weave, italic condensed type, snap motion.
   `[data-theme^='redford']` covers dark ("Redline") and light
   ("Redline Claro"). The luxury themes share none of this.
   ============================================================ */

/* No luxury ornament survives here. */
:root[data-theme^='redford'] .crest,
:root[data-theme^='redford'] .compass-rose,
:root[data-theme^='redford'] .panel::before,
:root[data-theme^='redford'] .panel::after,
:root[data-theme^='redford'] .panel header::after {
  display: none;
}

/* ---- App frame ---- */

.rf-app {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 110px),
    var(--bg-0);
}

.rf-app .luxe-scene {
  z-index: 0;
}

/* Angular header: red wedge carrying the logo, speed stripes trailing. */
.rf-topbar {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 9px 14px 9px 18px;
  background:
    linear-gradient(105deg, #e3312e 0 208px, #7d1013 208px 218px, transparent 218px),
    linear-gradient(105deg, transparent 0 224px, #ad1a1c 224px 229px, transparent 229px),
    #0b0b0b;
  border-bottom: 2px solid var(--gold);
}

:root[data-theme='redford-light'] .rf-topbar {
  background:
    linear-gradient(105deg, #d6242c 0 208px, #8c1216 208px 218px, transparent 218px),
    linear-gradient(105deg, transparent 0 224px, #b41d22 224px 229px, transparent 229px),
    #17090a;
}

.rf-logo {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #ffffff;
  transform: skewX(-4deg);
}

.rf-sub {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
}

.rf-topbar .lang-btn {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  transform: skewX(-8deg);
}

.rf-topbar .lang-btn.active {
  background: #ffffff;
  border-color: #ffffff;
  color: #b01c1f;
  font-weight: 800;
}

/* ---- Body regions ---- */

.rf-body {
  position: relative;
  z-index: 1;
  flex: 1 1;
  min-height: 0;
  display: grid;
  grid-template:
    'side side' auto
    'content map' 1fr
    / minmax(360px, 460px) 1fr;
  grid-gap: 0 14px;
  gap: 0 14px;
  padding: 0 14px 14px;
}

/* Slanted menu strip — racing-game navigation. */
.rf-side {
  grid-area: side;
  padding: 12px 4px 12px 0;
}

.rf-side .tabs {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0 12px;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  max-width: 640px;
}

.rf-side .tab {
  flex: 1 1;
  border-radius: 0;
  padding: 11px 8px;
  /* Translucent tiles: the ink slides UNDER the buttons (DOM order), so an
     opaque background would swallow it. */
  background: color-mix(in srgb, var(--bg-2) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  text-transform: uppercase;
  font-style: italic;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  transform: skewX(-10deg);
  transition-duration: 0.15s;
}

.rf-side .tab-ink {
  border-radius: 0;
  transform-origin: center;
  transition: transform 0.24s cubic-bezier(0.3, 0, 0.1, 1);
}

.rf-side .tab.active {
  background: transparent;
  border-color: transparent;
}

/* The ink must skew like the buttons it slides under. */
.rf-side .tab-ink {
  -webkit-clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
          clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.rf-content {
  grid-area: content;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 2px 8px 0;
}

/* Seam handle: mobile-only, styled as a skewed red bar. */
.rf-grip {
  display: none;
}

/* Content blocks: chamfered panels with a racing stripe. */
.rf-content .smooth-inner > *:not(p) {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.01) 0 2px, transparent 2px 5px),
    var(--bg-1);
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  border-radius: 0;
  -webkit-clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  padding: 16px;
  margin: 0 0 10px;
}

.rf-content .smooth-inner > p {
  margin: 6px 8px 10px;
}

/* Map: telemetry viewport with HUD corner brackets. */
.rf-maptile {
  grid-area: map;
  position: relative;
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 0;
  overflow: hidden;
}

.rf-maptile .map-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-0);
}

.rf-maptile::before,
.rf-maptile::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  z-index: 5;
  pointer-events: none;
}

.rf-maptile::before {
  top: 8px;
  left: 8px;
  border-top: 3px solid var(--gold);
  border-left: 3px solid var(--gold);
}

.rf-maptile::after {
  bottom: 8px;
  right: 8px;
  border-bottom: 3px solid var(--gold);
  border-right: 3px solid var(--gold);
}

/* ---- Mobile: edge-to-edge cockpit ---- */

@media (max-width: 768px) {
  .rf-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  /* Map up top, cut on a slant — the seam line is the racing signature.
     Height is user-draggable via the seam grip (--rf-map). */
  .rf-maptile {
    order: -1;
    flex: none;
    height: var(--rf-map, 34dvh);
    border: none;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 26px));
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 26px));
  }

  .rf-grip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: 22px;
    margin-top: -8px;
    position: relative;
    z-index: 6;
    touch-action: none;
    cursor: ns-resize;
  }

  .rf-grip::before {
    content: '';
    width: 54px;
    height: 5px;
    background: var(--gold);
    transform: skewX(-24deg);
    transition: width 0.15s;
  }

  .rf-grip:active::before {
    width: 78px;
  }

  .rf-maptile::after {
    display: none;
  }

  .rf-maptile::before {
    top: auto;
    left: -4%;
    bottom: 8px;
    width: 108%;
    height: 3px;
    border: none;
    background: linear-gradient(90deg, var(--gold), rgba(var(--accent-rgb), 0.25));
    transform: rotate(-3.5deg);
    transform-origin: left bottom;
  }

  .rf-content {
    flex: 1 1;
    padding: 0 0 96px;
  }

  /* Sections run edge-to-edge, like the map above them. */
  .rf-content .smooth-inner > *:not(p) {
    border-left: none;
    border-right: none;
    margin: 0 0 8px;
  }

  .rf-content .smooth-inner > p {
    margin: 6px 16px 10px;
  }

  /* Bottom strip nav: slanted segments. */
  .rf-side {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 8px 16px 10px;
    background: color-mix(in srgb, var(--bg-0) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 2px solid var(--gold);
  }

  .rf-side .tabs {
    max-width: none;
    padding: 0 6px;
  }

  .rf-side .tab {
    /* Proportional segments: long Portuguese labels take the room they
       need (the ink measures each button, so unequal widths are fine). */
    flex: 1 1 auto;
    padding: 11px 5px;
    font-size: 9.5px;
    letter-spacing: 0.02em;
    min-width: 0;
    overflow: hidden;
  }
}

/* ---- Components in racing trim ---- */

/* Headings: italic caps with a red slash. */
:root[data-theme^='redford'] .section-title,
:root[data-theme^='redford'] .trip-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 18px 0 10px;
}

:root[data-theme^='redford'] .section-title::before,
:root[data-theme^='redford'] .trip-summary::before {
  content: '';
  width: 14px;
  height: 4px;
  flex-shrink: 0;
  background: var(--gold);
  transform: skewX(-25deg);
  opacity: 1;
}

:root[data-theme^='redford'] .section-title::after {
  content: '';
  flex: 1 1;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
}

/* Numerals: flat signal red, italic, heavy. */
:root[data-theme^='redford'] .stat-value,
:root[data-theme^='redford'] .eta-big,
:root[data-theme^='redford'] .panel header h1 {
  background: none;
  -webkit-text-fill-color: var(--gold);
  color: var(--gold);
  animation: none;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0;
}

:root[data-theme^='redford'] .eta-big {
  font-size: 38px;
}

/* Telemetry tiles: label up top, value below, stripe on the left. */
:root[data-theme^='redford'] .stat {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 2px;
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 0;
  -webkit-clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

:root[data-theme^='redford'] .stat::before {
  display: none;
}

:root[data-theme^='redford'] .stat-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-muted);
}

:root[data-theme^='redford'] .stat-value {
  font-size: 25px;
}

/* Buttons: chamfered parallelograms, caps italic, hard shadows. */
:root[data-theme^='redford'] .cta {
  border: none;
  border-radius: 0;
  -webkit-clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
          clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  background: linear-gradient(180deg, #ff4a42 0%, #d92b28 48%, #b01c1f 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(80, 6, 6, 0.5);
  text-transform: uppercase;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.09em;
  padding: 14px 22px;
  box-shadow: none;
  transition: filter 0.15s, transform 0.15s;
}

:root[data-theme^='redford'] .cta::before,
:root[data-theme^='redford'] .cta::after {
  display: none;
}

:root[data-theme^='redford'] .cta:hover:not(:disabled) {
  filter: brightness(1.12);
  transform: none;
  box-shadow: none;
}

:root[data-theme^='redford'] .cta:active:not(:disabled) {
  transform: translateX(2px);
}

:root[data-theme^='redford'] .cta.ghost {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--gold);
  border: none;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.55);
  text-shadow: none;
}

:root[data-theme^='redford'] .cta.danger {
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.35) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #6d1013, #430a0c);
  color: #ffb1ad;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.4);
  text-shadow: none;
}

/* Slide-to-act: launch control. Hazard-striped track, chevron knob. */
:root[data-theme^='redford'] .slide-act {
  border-radius: 0;
  -webkit-clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
          clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background:
    repeating-linear-gradient(135deg, rgba(var(--accent-rgb), 0.05) 0 14px, transparent 14px 28px),
    var(--bg-2);
  box-shadow: none;
  transition: border-color 0.2s;
}

:root[data-theme^='redford'] .slide-act-fill {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.06));
}

:root[data-theme^='redford'] .slide-act-fill::before {
  display: none;
}

:root[data-theme^='redford'] .slide-act-label {
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.12em;
}

:root[data-theme^='redford'] .slide-act-knob {
  border: none;
  border-radius: 0;
  -webkit-clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
          clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  background: linear-gradient(180deg, #ff4a42, #b01c1f);
  color: #ffffff;
  box-shadow: none;
  transition: none;
}

:root[data-theme^='redford'] .slide-act-knob::before {
  display: none;
}

:root[data-theme^='redford'] .slide-act.danger .slide-act-knob {
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, #8a1215, #5a0c0e);
  color: #ffc9c6;
}

/* Inputs: hard rectangles with a stripe. */
:root[data-theme^='redford'] .searchbox,
:root[data-theme^='redford'] .field,
:root[data-theme^='redford'] .chat-input input {
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: var(--bg-2);
}

:root[data-theme^='redford'] .searchbox:focus-within,
:root[data-theme^='redford'] .field:focus {
  border-color: var(--gold);
  box-shadow: none;
}

:root[data-theme^='redford'] .searchbox-results {
  border-radius: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
}

/* Chips + toggles go angular. */
:root[data-theme^='redford'] .chip,
:root[data-theme^='redford'] .chat-toggle,
:root[data-theme^='redford'] .mode-btn,
:root[data-theme^='redford'] .theme-card,
:root[data-theme^='redford'] .lang-btn {
  border-radius: 0;
}

:root[data-theme^='redford'] .chip {
  -webkit-clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
          clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  border: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

:root[data-theme^='redford'] .mode-btn {
  -webkit-clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
          clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  border: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);
  text-transform: uppercase;
  font-style: italic;
}

:root[data-theme^='redford'] .mode-btn.active {
  background: linear-gradient(180deg, #ff4a42, #b01c1f);
  color: #fff;
  box-shadow: none;
}

:root[data-theme^='redford'] .theme-swatch {
  border-radius: 0;
  -webkit-clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
          clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
}

/* Fare classes: the car-select screen. Selected = red with checkered floor. */
:root[data-theme^='redford'] .ride-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  gap: 8px;
}

:root[data-theme^='redford'] .ride-option {
  position: relative;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 14px 6px 16px;
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  background: var(--bg-2);
  -webkit-clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: transform 0.15s, border-color 0.15s;
}

:root[data-theme^='redford'] .ride-option .ride-info {
  align-items: center;
  gap: 2px;
}

:root[data-theme^='redford'] .ride-info > strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

:root[data-theme^='redford'] .ride-info > strong small {
  display: block;
  font-style: normal;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}

:root[data-theme^='redford'] .ride-eta {
  font-size: 10px;
  font-weight: 700;
}

:root[data-theme^='redford'] .ride-price {
  font-style: italic;
  font-size: 16px;
}

:root[data-theme^='redford'] .ride-option.selected {
  background: linear-gradient(180deg, #e3312e 0%, #a81a1d 100%);
  border-color: #ff6a5c;
  box-shadow: none;
}

:root[data-theme^='redford'] .ride-option.selected .ride-icon,
:root[data-theme^='redford'] .ride-option.selected .ride-price,
:root[data-theme^='redford'] .ride-option.selected .ride-info > strong {
  color: #ffffff;
}

:root[data-theme^='redford'] .ride-option.selected .ride-info small,
:root[data-theme^='redford'] .ride-option.selected .ride-info > span,
:root[data-theme^='redford'] .ride-option.selected .ride-eta {
  color: rgba(255, 255, 255, 0.85);
}

:root[data-theme^='redford'] .ride-option.selected::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  height: 7px;
  border-radius: 0;
  background: repeating-conic-gradient(#ffffff 0 25%, #101010 0 50%);
  background-size: 10px 10px;
}

/* Trip progress: speed chevrons. */
:root[data-theme^='redford'] .stage-dot {
  width: 22px;
  height: 9px;
  border-radius: 0;
  transform: skewX(-24deg);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

:root[data-theme^='redford'] .stage-label {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Driver card: race-entry plate. */
:root[data-theme^='redford'] .driver-card {
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  background: var(--bg-2);
  -webkit-clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

:root[data-theme^='redford'] .driver-avatar {
  border-radius: 0;
  -webkit-clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
          clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  background: linear-gradient(180deg, #ff4a42, #b01c1f);
  color: #ffffff;
  font-style: italic;
  box-shadow: none;
}

:root[data-theme^='redford'] .plate {
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  background: #ffffff;
  color: #101010;
  font-weight: 800;
  letter-spacing: 0.14em;
}

/* PIN: pit-board with hazard frame. */
:root[data-theme^='redford'] .pin-box {
  border-radius: 0;
  background: var(--bg-2);
  border: 6px solid transparent;
  border-image: repeating-linear-gradient(45deg, #f7c948 0 12px, #141414 12px 24px) 6;
}

:root[data-theme^='redford'] .pin-label {
  color: var(--ink-muted);
  text-transform: uppercase;
  font-weight: 800;
}

:root[data-theme^='redford'] .pin-value {
  background: none;
  -webkit-text-fill-color: var(--gold);
  color: var(--gold);
  font-style: italic;
  font-weight: 900;
  animation: none;
}

/* Offer: pit-wall board, urgent. */
:root[data-theme^='redford'] .offer-card {
  border-radius: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  background:
    repeating-linear-gradient(135deg, rgba(var(--accent-rgb), 0.07) 0 12px, transparent 12px 24px) top / 100% 8px no-repeat,
    var(--bg-2);
  -webkit-clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  animation: offer-glow 1.8s var(--ease-lux) infinite;
}

/* Telemetry rows. */
:root[data-theme^='redford'] .kv span {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  font-weight: 700;
}

:root[data-theme^='redford'] .kv,
:root[data-theme^='redford'] .trip-row,
:root[data-theme^='redford'] .doc-row {
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

/* Receipt totals in signal red. */
:root[data-theme^='redford'] .receipt {
  border-radius: 0;
}

/* Share page fallback (still panel-based): angular trim. */
:root[data-theme^='redford'] .panel {
  border-radius: var(--radius);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg-1);
}

/* Light cockpit corrections. */
:root[data-theme='redford-light'] .rf-app {
  background:
    repeating-linear-gradient(115deg, rgba(0, 0, 0, 0.014) 0 1px, transparent 1px 110px),
    var(--bg-0);
}

@media (max-width: 768px) {
  :root[data-theme='redford-light'] .rf-side {
    background: color-mix(in srgb, #ffffff 90%, transparent);
  }
}

:root[data-theme='redford-light'] .rf-content .smooth-inner > *:not(p) {
  background: var(--bg-1);
}

:root[data-theme='redford-light'] .plate {
  background: #101010;
  color: #ffffff;
}


/* ============================================================
   HEAVEN — the clouds frontend trim. Same sheet-over-map shell
   as the luxury themes (it is the iOS-Maps pattern), stripped
   of every ornament and rebuilt with Apple's material language:
   frosted glass, segmented control, grouped lists, iMessage
   bubbles, soft depth, system type.
   ============================================================ */

/* No ornament in the sky. */
:root[data-theme^='heaven'] .crest,
:root[data-theme^='heaven'] .compass-rose,
:root[data-theme^='heaven'] .panel::before,
:root[data-theme^='heaven'] .panel::after,
:root[data-theme^='heaven'] .panel header::after {
  display: none;
}

/* Frosted sheet. */
:root[data-theme^='heaven'] .panel {
  backdrop-filter: blur(32px) saturate(1.8);
  -webkit-backdrop-filter: blur(32px) saturate(1.8);
}

/* iOS grabber instead of the gold bar. */
:root[data-theme^='heaven'] .panel-grip::before {
  width: 36px;
  height: 5px;
  background: rgba(127, 138, 160, 0.42);
  filter: none;
}

:root[data-theme^='heaven'] .panel-grip:hover::before,
:root[data-theme^='heaven'] .panel.resizing .panel-grip::before {
  width: 48px;
  filter: none;
}

/* Large-title header, no wordmark theatrics. */
:root[data-theme^='heaven'] .panel header h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-indent: 0;
  background: none;
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
  animation: none;
}

:root[data-theme^='heaven'] .tagline {
  margin: 2px 0 14px;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
}

:root[data-theme^='heaven'] .lang-btn {
  border: none;
  background: rgba(118, 118, 128, 0.16);
  border-radius: 7px;
}

:root[data-theme^='heaven'] .lang-btn.active {
  background: var(--gold);
  color: #ffffff;
  font-weight: 700;
}

/* Segmented control. */
:root[data-theme^='heaven'] .tabs {
  background: rgba(118, 118, 128, 0.14);
  border: none;
  box-shadow: none;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

:root[data-theme^='heaven'] .tab {
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 8px 4px;
}

:root[data-theme='heaven-light'] .tab-ink {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(20, 40, 80, 0.16), 0 0 1px rgba(20, 40, 80, 0.12);
  border-radius: 8px;
}

:root[data-theme='heaven'] .tab-ink {
  background: #636a80;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

:root[data-theme='heaven-light'] .tab.active {
  color: var(--ink);
}

:root[data-theme='heaven'] .tab.active {
  color: #ffffff;
}

/* Grouped-list section headers. */
:root[data-theme^='heaven'] .section-title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  gap: 0;
  margin: 20px 2px 8px;
}

:root[data-theme^='heaven'] .section-title::before,
:root[data-theme^='heaven'] .section-title::after {
  display: none;
}

:root[data-theme^='heaven'] .trip-summary {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}

/* Filled iOS buttons — flat colour, no metal, no engraving. */
:root[data-theme^='heaven'] .cta {
  background: var(--gold);
  border: none;
  border-radius: var(--radius-sm);
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: none;
  box-shadow: none;
  padding: 14px 16px;
  transition: opacity 0.15s, transform 0.15s;
}

:root[data-theme^='heaven'] .cta::before,
:root[data-theme^='heaven'] .cta::after {
  display: none;
}

:root[data-theme^='heaven'] .cta:hover:not(:disabled) {
  filter: none;
  transform: none;
  opacity: 0.85;
  box-shadow: none;
}

:root[data-theme^='heaven'] .cta.ghost {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--gold);
  border: none;
  box-shadow: none;
}

:root[data-theme^='heaven'] .cta.danger {
  background: var(--danger);
  color: #ffffff;
  border: none;
  box-shadow: none;
}

/* Inset fields. */
:root[data-theme^='heaven'] .searchbox,
:root[data-theme^='heaven'] .field,
:root[data-theme^='heaven'] .chat-input input,
:root[data-theme^='heaven'] .chat-toggle {
  background: rgba(118, 118, 128, 0.12);
  border: none;
  border-radius: 12px;
}

:root[data-theme^='heaven'] .searchbox:focus-within,
:root[data-theme^='heaven'] .field:focus,
:root[data-theme^='heaven'] .chat-input input:focus {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3);
  border: none;
}

:root[data-theme^='heaven'] .searchbox-results {
  border-radius: 14px;
  border: none;
  box-shadow: 0 16px 48px rgba(15, 30, 60, 0.22);
}

/* Cards float on soft depth — no texture, no engraving. */
:root[data-theme^='heaven'] .stat,
:root[data-theme^='heaven'] .driver-card,
:root[data-theme^='heaven'] .offer-card,
:root[data-theme^='heaven'] .pin-box,
:root[data-theme^='heaven'] .receipt,
:root[data-theme^='heaven'] .split-box,
:root[data-theme^='heaven'] .safety-body {
  background: var(--bg-1);
  background-image: none;
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(15, 30, 60, 0.1);
  -webkit-clip-path: none;
          clip-path: none;
}

:root[data-theme='heaven'] .stat,
:root[data-theme='heaven'] .driver-card,
:root[data-theme='heaven'] .offer-card,
:root[data-theme='heaven'] .pin-box,
:root[data-theme='heaven'] .receipt,
:root[data-theme='heaven'] .split-box,
:root[data-theme='heaven'] .safety-body {
  background: var(--bg-2);
  box-shadow: none;
}

:root[data-theme^='heaven'] .stat::before {
  display: none;
}

:root[data-theme^='heaven'] .stat-value {
  background: none;
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
  animation: none;
  font-weight: 700;
  letter-spacing: -0.02em;
}

:root[data-theme^='heaven'] .stat-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

:root[data-theme^='heaven'] .eta-big {
  background: none;
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
  animation: none;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 34px;
}

/* Ride classes: grouped rows, tinted selection, no spine. */
:root[data-theme^='heaven'] .ride-option {
  border: none;
  border-radius: 14px;
  background: var(--bg-2);
  -webkit-clip-path: none;
          clip-path: none;
}

:root[data-theme='heaven'] .ride-option {
  background: var(--bg-3);
}

:root[data-theme^='heaven'] .ride-option.selected {
  background: rgba(var(--accent-rgb), 0.14);
  border: none;
  box-shadow: inset 0 0 0 1.5px var(--gold);
}

:root[data-theme^='heaven'] .ride-option.selected::before {
  display: none;
}

:root[data-theme^='heaven'] .ride-info > strong {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}

:root[data-theme^='heaven'] .ride-price {
  font-family: var(--font-ui);
  font-style: normal;
  color: var(--ink);
  font-weight: 700;
}

/* Slide control in iOS trim. */
:root[data-theme^='heaven'] .slide-act {
  border: none;
  border-radius: 16px;
  background: rgba(118, 118, 128, 0.14);
  box-shadow: none;
  -webkit-clip-path: none;
          clip-path: none;
}

:root[data-theme^='heaven'] .slide-act-fill {
  background: rgba(var(--accent-rgb), 0.2);
}

:root[data-theme^='heaven'] .slide-act-fill::before {
  display: none;
}

:root[data-theme^='heaven'] .slide-act-label {
  text-transform: none;
  font-style: normal;
  letter-spacing: 0;
  font-size: 15px;
  font-weight: 600;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: var(--ink-muted);
  color: var(--ink-muted);
  animation: none;
}

:root[data-theme^='heaven'] .slide-act-knob {
  border: none;
  border-radius: 12px;
  background: var(--gold);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.4);
  -webkit-clip-path: none;
          clip-path: none;
}

:root[data-theme^='heaven'] .slide-act-knob::before {
  display: none;
}

:root[data-theme^='heaven'] .slide-act.danger .slide-act-knob {
  background: var(--danger);
  color: #ffffff;
}

/* Hairline separators. */
:root[data-theme^='heaven'] .trip-row,
:root[data-theme^='heaven'] .kv,
:root[data-theme^='heaven'] .doc-row {
  border-bottom: 0.5px solid rgba(127, 138, 160, 0.28);
}

/* Chips: tinted pills. */
:root[data-theme^='heaven'] .chip {
  border: none;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--gold);
  -webkit-clip-path: none;
          clip-path: none;
  box-shadow: none;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

/* iMessage chat. */
:root[data-theme^='heaven'] .bubble {
  background: rgba(118, 118, 128, 0.16);
  border: none;
  border-radius: 18px 18px 18px 5px;
  color: var(--ink);
}

:root[data-theme^='heaven'] .bubble.mine {
  background: var(--gold);
  color: #ffffff;
  border-radius: 18px 18px 5px 18px;
  font-weight: 500;
}

/* Progress dots, driver identity, plate, stars, PIN. */
:root[data-theme^='heaven'] .stage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: none;
  border: none;
  background: rgba(127, 138, 160, 0.35);
}

:root[data-theme^='heaven'] .stage-dot.done,
:root[data-theme^='heaven'] .stage-dot.active {
  background: var(--gold);
}

:root[data-theme^='heaven'] .stage-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
}

:root[data-theme^='heaven'] .driver-avatar {
  border: none;
  border-radius: 50%;
  -webkit-clip-path: none;
          clip-path: none;
  background: var(--gold);
  color: #ffffff;
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 700;
  box-shadow: none;
}

:root[data-theme^='heaven'] .plate {
  border: none;
  border-radius: 8px;
  background: rgba(118, 118, 128, 0.16);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.08em;
  box-shadow: none;
}

:root[data-theme^='heaven'] .star.on {
  color: #ffcc00;
  filter: none;
}

:root[data-theme^='heaven'] .pin-value {
  background: none;
  -webkit-text-fill-color: var(--gold);
  color: var(--gold);
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.3em;
  animation: none;
}

:root[data-theme^='heaven'] .pin-label {
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0;
}

:root[data-theme^='heaven'] .offer-card {
  box-shadow: 0 0 0 1.5px rgba(var(--accent-rgb), 0.5), 0 8px 30px rgba(15, 30, 60, 0.14);
  animation: none;
}

/* Sky above the clouds behind the sign-in. */
:root[data-theme='heaven-light'] .luxe-scene {
  background:
    radial-gradient(80% 50% at 20% 100%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(70% 45% at 75% 85%, rgba(255, 255, 255, 0.75), transparent 65%),
    radial-gradient(90% 60% at 50% 115%, rgba(255, 255, 255, 0.85), transparent 70%),
    linear-gradient(180deg, #aecdf2 0%, #cfe3fb 45%, #eef5fd 100%);
}

:root[data-theme='heaven'] .luxe-scene {
  background:
    radial-gradient(80% 50% at 25% 105%, rgba(147, 197, 253, 0.16), transparent 62%),
    radial-gradient(70% 45% at 75% 90%, rgba(147, 197, 253, 0.1), transparent 65%),
    linear-gradient(180deg, #060a18 0%, #0b1020 55%, #131c36 100%);
}

/* Mode/theme pickers pick up the material automatically via tokens; the
   swatch keeps its circle here. */
:root[data-theme^='heaven'] .theme-card {
  border: none;
  border-radius: 14px;
  background: rgba(118, 118, 128, 0.1);
}

:root[data-theme^='heaven'] .theme-card.active {
  box-shadow: inset 0 0 0 1.5px var(--gold);
}

:root[data-theme^='heaven'] .theme-swatch {
  -webkit-clip-path: none;
          clip-path: none;
  border-radius: 50%;
}

:root[data-theme^='heaven'] .mode-btn {
  border: none;
  border-radius: 999px;
  background: rgba(118, 118, 128, 0.14);
  -webkit-clip-path: none;
          clip-path: none;
  box-shadow: none;
  text-transform: none;
  font-style: normal;
  font-weight: 600;
}

:root[data-theme^='heaven'] .mode-btn.active {
  background: var(--gold);
  color: #ffffff;
}

/* ---------------- Motion hygiene ---------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}