/* ==========================================================================
   BUNKIO — System B  ·  Design tokens + component layer
   --------------------------------------------------------------------------
   A synthesis of Crasher's "refined" language (layered shadows, 135° accent
   gradients, frosted glass, hover lift) into one coherent system.
   Materials: matte plastic (surfaces), frosted glass (overlays/floating UI),
   pressed wells (inputs). Light + dark ("Night mode") via [data-theme].
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* Brand — "Bunkio Blue": slightly violet-leaning so it reads as a brand,
     not Bootstrap blue. Accent — "Sunrise": warmth for a sleep/stay product. */
  --brand-50:  #eef1ff;
  --brand-100: #dfe4ff;
  --brand-200: #c2cbff;
  --brand-300: #9dabff;
  --brand-400: #7385fb;
  --brand-500: #5265f0;
  --brand-600: #4152e0;  /* primary action */
  --brand-700: #3542bd;
  --brand-800: #2d3894;
  --brand-900: #273270;

  --sunrise-300: #ffc09a;
  --sunrise-400: #ff9d69;
  --sunrise-500: #ff7e47;
  --sunrise-600: #f2632b;

  /* Semantic */
  --ok-400: #34d399;  --ok-500: #10b981;  --ok-600: #059669;  --ok-50: #ecfdf5;
  --warn-300: #fcd34d; --warn-400: #fbbf24; --warn-500: #f59e0b; --warn-600: #d97706; --warn-50: #fffbeb;
  --danger-400: #f26d72; --danger-500: #e5484d; --danger-600: #ce3339; --danger-50: #fef2f2;
  --info-500: #0ea5e9; --info-50: #f0f9ff;

  /* Neutrals — blue-tinted greys ("ink") for cohesion with brand */
  --ink-900: #171d2e;
  --ink-800: #232b40;
  --ink-700: #333d57;
  --ink-600: #4b566f;
  --ink-500: #66718b;
  --ink-400: #8b95ac;
  --ink-300: #b6bdcd;
  --ink-200: #d8dce6;
  --ink-100: #eaecf2;
  --ink-50:  #f4f5f9;

  /* Surfaces (light) */
  --canvas: #f4f5f9;               /* page background */
  --surface: #ffffff;              /* card face */
  --surface-2: #fafbfd;            /* card face bottom of matte gradient */
  --surface-sunken: #eef0f5;       /* wells, pressed areas */
  --text: var(--ink-900);
  --text-2: var(--ink-600);
  --text-3: var(--ink-400);
  --line: rgba(23, 29, 46, 0.10);  /* hairline borders */
  --line-strong: rgba(23, 29, 46, 0.16);

  /* Materials */
  --matte: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  --matte-raised: linear-gradient(180deg, #ffffff 0%, #f5f6fa 100%);
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-strong-bg: rgba(255, 255, 255, 0.96); /* menus & option panels: frosted edge, no content bleed */
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur: saturate(1.5) blur(16px);
  --glass-blur-strong: saturate(1.3) blur(28px); /* overlays above vivid content (ribbons, photos) */
  --glass-dark-bg: rgba(23, 29, 46, 0.72);      /* dark glass on imagery */
  --highlight: inset 0 1px 0 rgba(255,255,255,0.85); /* top bevel light */

  /* Elevation — dual-layer, blue-tinted ambient shadows */
  --e1: 0 1px 2px rgba(23,32,66,0.06), 0 1px 3px rgba(23,32,66,0.08);
  --e2: 0 2px 4px rgba(23,32,66,0.05), 0 4px 12px rgba(23,32,66,0.08);
  --e3: 0 4px 8px rgba(23,32,66,0.06), 0 12px 24px rgba(23,32,66,0.10);
  --e4: 0 8px 16px rgba(23,32,66,0.08), 0 24px 48px rgba(23,32,66,0.14);
  --e-brand: 0 4px 14px rgba(65,82,224,0.35);
  --e-inset: inset 0 1px 3px rgba(23,32,66,0.08), inset 0 1px 2px rgba(23,32,66,0.06);

  /* Booking-state gradients (calendar bands, badges, checkout) */
  --state-pending: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --state-approved: linear-gradient(135deg, #34d399 0%, #059669 100%);
  --state-booked: linear-gradient(135deg, #5265f0 0%, #3542bd 100%);
  --state-blocked: linear-gradient(135deg, #8b95ac 0%, #66718b 100%);
  --state-partial: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);

  /* Space-type accents (listing tiles) */
  --type-room:  linear-gradient(135deg, #5265f0 0%, #3542bd 100%);
  --type-bed:   linear-gradient(135deg, #10b981 0%, #059669 100%);
  --type-couch: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --type-air:   linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  --type-tent:  linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
  --type-parking: linear-gradient(135deg, #64748b 0%, #334155 100%);
  --type-storage: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);

  /* Shape */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px;

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem;
  --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; --fs-4xl: 2.25rem; --fs-5xl: 3rem;

  /* Space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* Pinstripe finish — ink for the 135° hairline stripes (see §3).
     Brand-tinted and faint on purpose; apps re-tint it with their own brand. */
  --pinstripe-ink: rgba(65, 82, 224, 0.04);

  --speed: 0.22s;
  color-scheme: light;
}

/* ---------- Night mode --------------------------------------------------- */
[data-theme="dark"] {
  --canvas: #0f1322;
  --surface: #1a2033;
  --surface-2: #171c2e;
  --surface-sunken: #12172a;
  --text: #eef0f7;
  --text-2: #a3abc2;
  --text-3: #6c7590;
  --line: rgba(238, 240, 247, 0.09);
  --line-strong: rgba(238, 240, 247, 0.16);

  --matte: linear-gradient(180deg, #1d2338 0%, #171c2e 100%);
  --matte-raised: linear-gradient(180deg, #222944 0%, #1a2033 100%);
  --glass-bg: rgba(26, 32, 51, 0.66);
  --glass-strong-bg: rgba(29, 35, 56, 0.97);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-dark-bg: rgba(10, 13, 24, 0.72);
  --highlight: inset 0 1px 0 rgba(255,255,255,0.07);

  --e1: 0 1px 2px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.3);
  --e2: 0 2px 4px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.35);
  --e3: 0 4px 8px rgba(0,0,0,0.4), 0 12px 24px rgba(0,0,0,0.45);
  --e4: 0 8px 16px rgba(0,0,0,0.45), 0 24px 48px rgba(0,0,0,0.55);
  --e-inset: inset 0 1px 3px rgba(0,0,0,0.4), inset 0 1px 2px rgba(0,0,0,0.3);

  --brand-600: #5265f0; /* one step brighter on dark for contrast */
  --brand-700: #4152e0;
  --pinstripe-ink: rgba(125, 141, 255, 0.055); /* a touch stronger so it survives dark matte */
  color-scheme: dark;
}

/* ---------- 2. BASE ------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(82,101,240,0.07), transparent 60%),
    radial-gradient(900px 420px at -10% 8%, rgba(255,126,71,0.05), transparent 55%),
    var(--canvas);
  transition: background var(--speed), color var(--speed);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { margin: 0 0 var(--s-3); line-height: 1.2; letter-spacing: -0.015em; }
h1 { font-size: var(--fs-4xl); font-weight: 800; }
h2 { font-size: var(--fs-2xl); font-weight: 750; }
h3 { font-size: var(--fs-xl); font-weight: 700; }
h4 { font-size: var(--fs-base); font-weight: 650; }
p  { margin: 0 0 var(--s-3); }
a  { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted   { color: var(--text-2); }
.subtle  { color: var(--text-3); }
.small   { font-size: var(--fs-sm); }
.xsmall  { font-size: var(--fs-xs); }
.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--s-6); }
.section { margin: var(--s-16) 0; }
.eyebrow {
  display:inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--brand-600); margin-bottom: var(--s-2);
}

/* ---------- 3. MATERIALS -------------------------------------------------- */
/* Matte plastic card: soft top-lit gradient + bevel highlight + ambient shadow */
.card {
  background: var(--matte);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--e2), var(--highlight);
  transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
}
.card.pad   { padding: var(--s-6); }
.card.pad-l { padding: var(--s-8); }
.card.lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--e3), var(--highlight);
  border-color: var(--brand-200);
}
[data-theme="dark"] .card.lift:hover { border-color: var(--brand-800); }

/* Frosted glass: floating chrome — nav, overlays on imagery, sticky bars */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--e2);
}
.glass-dark {
  background: var(--glass-dark-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
}

/* Pressed well: inputs and sunken containers */
.well {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-inset);
}

/* Pinstripe — a surface FINISH, not a fourth material. Faint 135° brand-tinted
   hairline stripes laid over any material (usually matte). It marks a surface
   whose content is NOT settled fact: planned features (pair with the ◇ roadmap
   badge), AI-authored advice (pair with the AI speech alert / ✦ mark), and
   forecasts or projections. Rules: stripe ink stays ≤ ~5% opacity, always the
   app's brand hue, 9px/18px period at 135° (the reserved state/identity angle),
   and the badge that explains WHY the surface is striped is mandatory — the
   finish is a cue, never the whole message. */
.pinstripe { position: relative; }
.pinstripe::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 9px, var(--pinstripe-ink) 9px 18px);
}

/* Hero gradient panel */
.panel-brand {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-400) 100%);
  color: #fff; border-radius: var(--r-2xl);
  box-shadow: var(--e3), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ---------- 4. BUTTONS ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font: 600 var(--fs-sm)/1 var(--font);
  padding: 11px 18px; border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, opacity 0.15s;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.btn.lg { padding: 14px 24px; font-size: var(--fs-base); border-radius: var(--r-lg); }
.btn.sm { padding: 7px 12px; font-size: var(--fs-xs); }

.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-600) 100%);
  box-shadow: var(--e-brand), inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--brand-400) 0%, var(--brand-600) 100%); box-shadow: 0 6px 18px rgba(65,82,224,0.42), inset 0 1px 0 rgba(255,255,255,0.28); }
.btn-primary:disabled { opacity: 0.5; box-shadow: none; cursor: not-allowed; transform: none; }

.btn-accent {
  color: #fff;
  background: linear-gradient(180deg, var(--sunrise-400) 0%, var(--sunrise-600) 100%);
  box-shadow: 0 4px 14px rgba(242,99,43,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-accent:hover { filter: brightness(1.05); }

.btn-secondary {
  color: var(--text);
  background: var(--matte-raised);
  border-color: var(--line-strong);
  box-shadow: var(--e1), var(--highlight);
}
.btn-secondary:hover { border-color: var(--brand-300); color: var(--brand-600); }

.btn-ghost { color: var(--text-2); background: transparent; }
.btn-ghost:hover { background: var(--surface-sunken); color: var(--text); }

.btn-danger {
  color: #fff;
  background: linear-gradient(180deg, var(--danger-400) 0%, var(--danger-600) 100%);
  box-shadow: 0 4px 14px rgba(229,72,77,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Outcome button — emerald, for actions whose result is a state (Approve, Confirm, Publish).
   Keeps brand-primary reserved for the single main action of a surface. */
.btn-ok {
  color: #fff;
  background: linear-gradient(180deg, var(--ok-400) 0%, var(--ok-600) 100%);
  box-shadow: 0 4px 14px rgba(16,185,129,0.3), inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn-ok:hover { filter: brightness(1.05); }
.btn.loading { pointer-events: none; opacity: 0.75; }
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: spin 0.7s linear infinite; display: inline-block;
}
.spinner.dark { border-color: rgba(0,0,0,0.15); border-top-color: var(--brand-600); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Icon button (favorite, close…) — glass circle */
.icon-btn {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--glass-border); cursor: pointer;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--e1); transition: transform 0.15s, box-shadow 0.15s; color: var(--text);
  font-size: 16px;
}
.icon-btn:hover { transform: scale(1.08); box-shadow: var(--e2); }

/* ---------- 5. FORMS ------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-4); }
.label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.label .req { color: var(--danger-500); }
.hint  { font-size: var(--fs-xs); color: var(--text-3); }

.input, .select, .textarea {
  font: 400 var(--fs-sm)/1.4 var(--font);
  color: var(--text);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--e-inset);
  padding: 11px 14px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  width: 100%;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand-400); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(82,101,240,0.18), var(--e-inset);
}
.textarea { min-height: 96px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }

/* Validation states */
.field.error .input, .field.error .select, .field.error .textarea {
  border-color: var(--danger-500); box-shadow: 0 0 0 3px rgba(229,72,77,0.14), var(--e-inset);
}
.field.error .msg { color: var(--danger-500); font-size: var(--fs-xs); font-weight: 500; display: flex; gap: 5px; align-items: center; }
.field.success .input { border-color: var(--ok-500); box-shadow: 0 0 0 3px rgba(16,185,129,0.14), var(--e-inset); }
.field.success .msg { color: var(--ok-600); font-size: var(--fs-xs); font-weight: 500; }
.field.disabled { opacity: 0.55; pointer-events: none; }

/* Custom dropdown — trigger reads as a pressed well; the option list is a floating
   glass-strong panel with small-radius edges (never the OS-native rectangle). */
.dd { position: relative; min-width: 180px; }
.dd-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: 550 var(--fs-sm)/1.3 var(--font); color: var(--text); text-align: left;
  background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--e-inset); padding: 11px 14px; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.dd-btn::after { content: '▾'; color: var(--text-3); font-size: 11px; transition: transform 0.18s; }
.dd-btn:hover { border-color: var(--brand-300); }
.dd.open .dd-btn { border-color: var(--brand-400); background: var(--surface); box-shadow: 0 0 0 3px rgba(82,101,240,0.18), var(--e-inset); }
.dd.open .dd-btn::after { transform: rotate(180deg); }
.dd-panel {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; z-index: 80;
  padding: 5px; border-radius: var(--r-md);
  background: var(--glass-strong-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--e4), var(--highlight);
  display: none;
}
.dd.open .dd-panel { display: block; animation: pop 0.16s ease; }
.dd-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer;
  font: 550 var(--fs-sm)/1.3 var(--font); color: var(--text); white-space: nowrap;
  transition: background 0.12s;
}
.dd-opt:hover { background: var(--surface-sunken); }
.dd-opt.sel { color: var(--brand-600); background: var(--brand-50); font-weight: 700; }
.dd-opt.sel::after { content: '✓'; font-size: 12px; }
[data-theme="dark"] .dd-opt.sel { background: rgba(82,101,240,0.16); color: #b7c2ff; }
.dd-group {
  padding: 9px 11px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
}
.dd-group:not(:first-child) { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 10px; }
.dd-opt .sub { font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; }

/* Toggle switch — matte pill with plastic knob */
.switch { position: relative; width: 46px; height: 26px; display: inline-block; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0; border-radius: var(--r-pill);
  background: var(--surface-sunken); border: 1px solid var(--line); box-shadow: var(--e-inset);
  transition: background 0.2s, border-color 0.2s;
}
.switch .knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #e8eaf2 100%);
  box-shadow: 0 1px 3px rgba(23,32,66,0.3), inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.2s;
}
.switch input:checked ~ .track { background: linear-gradient(180deg, var(--brand-500), var(--brand-600)); border-color: var(--brand-600); }
.switch input:checked ~ .knob { transform: translateX(20px); }

/* Checkbox / radio */
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: var(--fs-sm); }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-600); }

/* Stepper (guests +/-) */
.stepper { display: inline-flex; align-items: center; gap: var(--s-3); }
.stepper button {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--matte-raised); box-shadow: var(--e1), var(--highlight);
  font-size: 16px; font-weight: 600; color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.stepper button:hover { border-color: var(--brand-400); color: var(--brand-600); }
.stepper .val { min-width: 20px; text-align: center; font-weight: 650; }

/* ---------- 6. BADGES / CHIPS / STATUS ------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 var(--fs-xs)/1 var(--font);
  padding: 5px 10px; border-radius: var(--r-pill); color: #fff;
  box-shadow: 0 2px 8px rgba(23,32,66,0.18), inset 0 1px 0 rgba(255,255,255,0.25);
}
.badge.room  { background: var(--type-room); }
.badge.bed   { background: var(--type-bed); }
.badge.couch { background: var(--type-couch); }
.badge.air   { background: var(--type-air); }
.badge.tent  { background: var(--type-tent); }
.badge.parking { background: var(--type-parking); }
.badge.storage { background: var(--type-storage); }
.badge.featured { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: #3b2c07; box-shadow: 0 2px 8px rgba(245,158,11,0.4), inset 0 1px 0 rgba(255,255,255,0.4); }

.status {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 var(--fs-xs)/1 var(--font);
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.status .dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,0.35) inset; }
.status.pending  { color: #92400e; background: var(--warn-50);  border-color: #fde68a; } .status.pending .dot { background: var(--warn-500); }
.status.approved { color: #065f46; background: var(--ok-50);    border-color: #a7f3d0; } .status.approved .dot { background: var(--ok-500); }
.status.booked   { color: var(--brand-800); background: var(--brand-50); border-color: var(--brand-200); } .status.booked .dot { background: var(--brand-500); }
.status.cancelled{ color: #7f1d1d; background: var(--danger-50); border-color: #fecaca; } .status.cancelled .dot { background: var(--danger-500); }
.status.draft    { color: var(--ink-600); background: var(--ink-50); border-color: var(--ink-200); } .status.draft .dot { background: var(--ink-400); }
[data-theme="dark"] .status.pending  { background: rgba(245,158,11,0.13); color: #fcd34d; border-color: rgba(245,158,11,0.3); }
[data-theme="dark"] .status.approved { background: rgba(16,185,129,0.13); color: #6ee7b7; border-color: rgba(16,185,129,0.3); }
[data-theme="dark"] .status.booked   { background: rgba(82,101,240,0.16); color: #b7c2ff; border-color: rgba(82,101,240,0.35); }
[data-theme="dark"] .status.cancelled{ background: rgba(229,72,77,0.14); color: #fca5a5; border-color: rgba(229,72,77,0.3); }
[data-theme="dark"] .status.draft    { background: rgba(139,149,172,0.14); color: #b6bdcd; border-color: rgba(139,149,172,0.3); }

/* Filter chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 var(--fs-xs)/1 var(--font); color: var(--text-2);
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--matte-raised); border: 1px solid var(--line-strong);
  box-shadow: var(--e1), var(--highlight); cursor: pointer;
  transition: all 0.15s;
}
.chip:hover { border-color: var(--brand-300); color: var(--brand-600); }
.chip.on {
  color: #fff; background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
  border-color: var(--brand-600); box-shadow: 0 2px 10px rgba(65,82,224,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ---------- 7. ALERTS / TOASTS / EMPTY / SKELETON ------------------------- */
.alert {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--r-lg); font-size: var(--fs-sm);
  border: 1px solid; box-shadow: var(--e1);
}
.alert .ico { font-size: 18px; line-height: 1.2; }
.alert.info    { background: var(--info-50);   border-color: #bae6fd; color: #075985; }
.alert.success { background: var(--ok-50);     border-color: #a7f3d0; color: #065f46; }
.alert.warning { background: var(--warn-50);   border-color: #fde68a; color: #92400e; }
.alert.error   { background: var(--danger-50); border-color: #fecaca; color: #7f1d1d; }
[data-theme="dark"] .alert.info    { background: rgba(14,165,233,0.12); border-color: rgba(14,165,233,0.3); color: #7dd3fc; }
[data-theme="dark"] .alert.success { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.3); color: #6ee7b7; }
[data-theme="dark"] .alert.warning { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #fcd34d; }
[data-theme="dark"] .alert.error   { background: rgba(229,72,77,0.12);  border-color: rgba(229,72,77,0.3);  color: #fca5a5; }

/* AI alert — brand-tinted variant for messages the system itself is speaking.
   Usually combined with .speech (tail) and .pinstripe (AI-authored finish). */
.alert.ai { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-800); }
[data-theme="dark"] .alert.ai { background: rgba(82,101,240,0.13); border-color: rgba(82,101,240,0.34); color: #b7c2ff; }

/* Speech alert — an alert that TALKS. A triangular tail breaks the bottom
   border near (not at) the right corner, pointing at the speaker below-right.
   ::before draws the tail outline (inherits the alert's border color);
   ::after fills it and overlaps the box border by 1px to "break" it — the fill
   color is set per variant because border-triangles can't inherit backgrounds.
   Compose with .speech-group / .speech-who to seat the speaker (AI mark, logo,
   avatar) under the tail, and .backmark for a faint logo behind the message.
   ⚠ Never combine .speech and .pinstripe on the SAME element — both draw with
   ::after and the tail loses. Stripe the containing surface instead. */
.alert.speech { position: relative; }
.alert.speech::before, .alert.speech::after {
  content: ''; position: absolute; width: 0; height: 0; pointer-events: none;
  border-style: solid; border-color: transparent;
}
.alert.speech::before { right: 32px; bottom: -12px; border-width: 12px 12px 0; border-top-color: inherit; }
.alert.speech::after  { right: 33.5px; bottom: -9.5px; border-width: 10.5px 10.5px 0; }
.alert.info.speech::after    { border-top-color: var(--info-50); }
.alert.success.speech::after { border-top-color: var(--ok-50); }
.alert.warning.speech::after { border-top-color: var(--warn-50); }
.alert.error.speech::after   { border-top-color: var(--danger-50); }
.alert.ai.speech::after      { border-top-color: var(--brand-50); }
[data-theme="dark"] .alert.info.speech::after    { border-top-color: rgba(14,165,233,0.12); }
[data-theme="dark"] .alert.success.speech::after { border-top-color: rgba(16,185,129,0.12); }
[data-theme="dark"] .alert.warning.speech::after { border-top-color: rgba(245,158,11,0.12); }
[data-theme="dark"] .alert.error.speech::after   { border-top-color: rgba(229,72,77,0.12); }
[data-theme="dark"] .alert.ai.speech::after      { border-top-color: rgba(82,101,240,0.13); }

/* Faint logo behind the message — "the system is talking to you" */
.alert .backmark {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%) rotate(-8deg);
  font-size: 46px; line-height: 1; opacity: 0.09; pointer-events: none; user-select: none;
}

/* Speaker seat: bubble on top, identity chip below-right, under the tail */
.speech-group { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.speech-group .alert { align-self: stretch; }
.speech-who {
  display: flex; align-items: center; gap: 8px; margin-right: 26px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-3);
}

.empty {
  text-align: center; padding: var(--s-12) var(--s-6);
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-xl);
  background: var(--surface-sunken);
}
.empty .art {
  width: 64px; height: 64px; margin: 0 auto var(--s-4); border-radius: var(--r-xl);
  background: var(--matte-raised); box-shadow: var(--e2), var(--highlight);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}

.skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--ink-100) 50%, var(--surface-sunken) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1d2338 25%, #262d47 50%, #1d2338 75%); background-size: 200% 100%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- 8. NAV -------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 var(--s-6);
  height: 64px; display: flex; align-items: center; gap: var(--s-6);
}
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: var(--fs-lg); color: var(--text); text-decoration: none; letter-spacing: -0.02em; }
.logo:hover { text-decoration: none; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  box-shadow: 0 3px 8px rgba(65,82,224,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 800;
}
.nav-links { display: flex; gap: var(--s-1); margin-right: auto; }
.nav-links a {
  padding: 8px 14px; border-radius: var(--r-md); color: var(--text-2);
  font-weight: 600; font-size: var(--fs-sm); text-decoration: none; transition: all 0.15s;
}
.nav-links a:hover { color: var(--text); background: var(--surface-sunken); }
.nav-links a.active { color: var(--brand-600); background: var(--brand-50); }
[data-theme="dark"] .nav-links a.active { background: rgba(82,101,240,0.16); color: #b7c2ff; }

/* Small screens: logo + controls stay on row one; links become a swipeable strip below.
   (The real mobile nav is the bottom tab bar — see mobile.html — this keeps the desktop
   mocks readable on a phone in the meantime.) */
@media (max-width: 760px) {
  .nav-inner { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; row-gap: 6px; }
  .nav-links {
    order: 3; width: 100%; margin: 0; overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; flex: none; }
  .mode-pill { margin-left: auto; }
}

/* Mode pill — the host/guest context switcher */
.mode-pill {
  display: inline-flex; padding: 3px; border-radius: var(--r-pill);
  background: var(--surface-sunken); border: 1px solid var(--line); box-shadow: var(--e-inset);
}
.mode-pill button {
  border: 0; cursor: pointer; padding: 6px 14px; border-radius: var(--r-pill);
  font: 600 var(--fs-xs)/1.2 var(--font); color: var(--text-2); background: transparent;
  transition: all 0.18s;
}
.mode-pill button.on {
  color: var(--text); background: var(--matte-raised);
  box-shadow: var(--e1), var(--highlight);
}

.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-700) 100%);
  border: 2px solid var(--surface); box-shadow: var(--e1);
  color: #fff; font-weight: 700; font-size: var(--fs-sm);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

/* Dropdown menu — glass-strong + deep blur: frosted look, nothing legible bleeds through.
   Menus must NOT be descendants of another backdrop-filter element (e.g. inside .nav) —
   nested blur contexts cause Chromium's white-edge repaint flicker. Portal them to <body>. */
.menu {
  min-width: 260px; padding: var(--s-2);
  background: var(--glass-strong-bg); -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--e4);
}
.menu a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--r-md); color: var(--text); font-size: var(--fs-sm); font-weight: 550;
  text-decoration: none;
}
.menu a:hover { background: var(--surface-sunken); text-decoration: none; }
.menu a.danger { color: var(--danger-500); }
.menu a.danger:hover { background: var(--danger-50); }
[data-theme="dark"] .menu a.danger:hover { background: rgba(229,72,77,0.12); }
.menu .sep { height: 1px; background: var(--line); margin: var(--s-2) var(--s-2); }
.menu .head { padding: 10px 12px 6px; }

/* ---------- 9. LISTING TILE ----------------------------------------------- */
.tile {
  background: var(--matte); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--e2), var(--highlight); overflow: hidden;
  transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
  display: flex; flex-direction: column;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--e3), var(--highlight); border-color: var(--brand-200); }
[data-theme="dark"] .tile:hover { border-color: var(--brand-800); }
.tile .photo { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.tile .photo .img { position: absolute; inset: 0; transition: transform 0.4s; }
.tile:hover .photo .img { transform: scale(1.045); }
.tile .photo .tl { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.tile .photo .tr { position: absolute; top: 10px; right: 10px; }
.tile .photo .br {
  position: absolute; bottom: 10px; right: 10px;
  padding: 7px 12px; border-radius: var(--r-md);
  background: var(--glass-dark-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-weight: 700; font-size: var(--fs-sm);
}
.tile .photo .br .per { font-weight: 400; font-size: var(--fs-xs); opacity: 0.8; }
.tile .body { padding: var(--s-4); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tile .row1 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.tile .name { font-weight: 700; font-size: var(--fs-base); }
.tile .rate { display: inline-flex; gap: 4px; align-items: baseline; font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }
.tile .rate .n { color: var(--text-3); font-weight: 500; font-size: var(--fs-xs); }
.tile .loc { color: var(--text-2); font-size: var(--fs-sm); }
.tile .meta { color: var(--text-3); font-size: var(--fs-xs); margin-top: 2px; display: flex; gap: 8px; align-items: center; }

/* ---------- 10. SEARCH BAR ------------------------------------------------ */
.search-shell {
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-2xl);
  box-shadow: var(--e3); padding: var(--s-2);
}
.search-bar { display: flex; align-items: stretch; }
.search-seg {
  flex: 1; padding: 10px 18px; border-radius: var(--r-xl); cursor: pointer;
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  transition: background 0.15s, box-shadow 0.15s;
}
.search-seg:hover { background: rgba(255,255,255,0.55); }
[data-theme="dark"] .search-seg:hover { background: rgba(255,255,255,0.06); }
.search-seg.active { background: var(--surface); box-shadow: var(--e2); }
.search-seg .k { font-size: var(--fs-xs); font-weight: 700; color: var(--text); }
.search-seg .v { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-seg .v.set { color: var(--text); font-weight: 550; }
.search-div { width: 1px; background: var(--line); margin: 10px 2px; }
.search-go {
  align-self: center; margin-left: var(--s-2);
  width: 52px; height: 52px; border-radius: var(--r-xl); border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  box-shadow: var(--e-brand), inset 0 1px 0 rgba(255,255,255,0.3);
  color: #fff; font-size: 19px; display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.search-go:hover { transform: scale(1.05); }

/* Advanced filter drawer that expands below the bar */
.filters {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.35s ease;
  margin: 0 var(--s-2);
}
.filters.open { max-height: 460px; opacity: 1; margin: var(--s-3) var(--s-2) var(--s-2); }
.filters-inner { border-top: 1px solid var(--line); padding-top: var(--s-4); display: grid; gap: var(--s-4); }

/* ---------- 10b. STICKY FILTER TILES ---------------------------------------
   "Sticky tiles" — quick-filter widgets pinned to a board on Explore. One tap
   runs a saved, need-based search ("nearby campsites", "safe van parking").
   Skeuomorphic: each sticky is a small matte tile wearing a themed scene
   (135° space-type gradients, a drawn street map, a night sky), a big glyph,
   and a frosted label chip — the same glass vocabulary as listing-tile price
   chips. Sizes: full (2×2), half (2×1 strip), quarter (1×1). The board is a
   dense-flow grid; stickies drag to rearrange. User-created stickies wear a
   piece of translucent .tape (they're *stuck on*, not printed). */
.sticky-board {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  grid-auto-rows: 62px; grid-auto-flow: dense;
}
.sticky {
  position: relative; overflow: hidden; display: block;
  grid-column: span 2; grid-row: span 2;          /* full, the default */
  border-radius: var(--r-lg); border: 1px solid rgba(0,0,0,0.08);
  box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,0.28);
  color: #fff; text-decoration: none; cursor: grab;
  transition: transform var(--speed), box-shadow var(--speed), filter var(--speed);
}
.sticky:hover { transform: translateY(-3px); box-shadow: var(--e3), inset 0 1px 0 rgba(255,255,255,0.28); text-decoration: none; filter: brightness(1.04); }
.sticky:active { cursor: grabbing; }
.sticky.dragging { opacity: 0.45; transform: scale(0.96); }
.sticky.s-half { grid-row: span 1; }
.sticky.s-q    { grid-column: span 1; grid-row: span 1; }
.sticky.s-v    { grid-column: span 1; grid-row: span 2; }   /* vertical: 1×2 tab */

/* Stacks: two halves (or two quarters, .q) sharing one footprint — keeps the
   board packed in tidy 2-row blocks whatever the viewport gives auto-fill.
   Children keep their .s-half / .s-q styling; the stack owns the grid spans. */
.sticky-stack { grid-column: span 2; grid-row: span 2; display: grid; grid-template-rows: 1fr 1fr; gap: var(--s-3); min-width: 0; }
.sticky-stack.q { grid-column: span 1; }
.sticky-stack > .sticky { grid-column: auto; grid-row: auto; }

/* Active sticky — the filter is LIVE: brand halo + lit ring. Full/half tiles
   act as presets (one at a time); quarter modifiers may glow in multiples. */
.sticky.on {
  box-shadow: 0 0 0 2px var(--brand-400), 0 0 18px 3px rgba(82,101,240,0.5),
              var(--e2), inset 0 1px 0 rgba(255,255,255,0.35);
}
.sticky.on:hover { box-shadow: 0 0 0 2px var(--brand-400), 0 0 22px 4px rgba(82,101,240,0.6), var(--e3), inset 0 1px 0 rgba(255,255,255,0.35); }
[data-theme="dark"] .sticky.on { box-shadow: 0 0 0 2px var(--brand-500), 0 0 20px 4px rgba(115,133,251,0.55), var(--e2), inset 0 1px 0 rgba(255,255,255,0.35); }

.sticky .glyph {
  position: absolute; inset: 0 0 16px; display: flex; align-items: center; justify-content: center;
  font-size: 38px; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.3));
}
.sticky .lbl {
  position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); z-index: 2;
  padding: 5px 9px; border-radius: var(--r-md);
  background: var(--glass-dark-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.16);
  font: 700 11px/1.25 var(--font); color: #fff;
}
.sticky .n {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  font: 800 10px/1 var(--font); color: #fff;
  padding: 3px 7px; border-radius: var(--r-pill);
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
/* half strip: glyph rides left, label sits beside it */
.sticky.s-half .glyph { inset: 0; justify-content: flex-start; padding-left: 12px; font-size: 26px; }
.sticky.s-half .lbl { left: 50px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); max-width: calc(100% - 62px); }
.sticky.s-half:has(.put) .lbl { max-width: calc(100% - 130px); }
.sticky.s-half .put { top: 50%; transform: translateY(-50%); }
.sticky.s-half .put:hover { transform: translateY(-50%) scale(1.08); }
/* quarter: everything smaller */
.sticky.s-q .glyph { inset: 0 0 18px; font-size: 22px; }
.sticky.s-q .lbl { left: 4px; right: 4px; bottom: 4px; max-width: none; padding: 3px 5px; border-radius: var(--r-sm); font-size: 9px; text-align: center; }
.sticky.s-q .n { top: 4px; right: 4px; }

/* Scenes — themed to what the sticky filters */
.sticky.t-tent  { background: var(--type-tent); }
.sticky.t-couch { background: var(--type-couch); }
.sticky.t-room  { background: var(--type-room); }
.sticky.t-air   { background: var(--type-air); }
.sticky.t-park  { background: var(--type-parking); }
.sticky.t-store { background: var(--type-storage); }
.sticky.t-sun   { background: linear-gradient(135deg, var(--sunrise-400), var(--sunrise-600)); }
/* street map: white road grid + a diagonal avenue over park green */
.sticky.t-map { background:
  linear-gradient(45deg, transparent 46%, rgba(255,255,255,0.85) 46% 52%, transparent 52%),
  repeating-linear-gradient(0deg, transparent 0 21px, rgba(255,255,255,0.75) 21px 24px),
  repeating-linear-gradient(90deg, transparent 0 25px, rgba(255,255,255,0.75) 25px 28px),
  linear-gradient(160deg, #cde4c0 0%, #aecfa4 100%); }
[data-theme="dark"] .sticky.t-map { background:
  linear-gradient(45deg, transparent 46%, rgba(255,255,255,0.14) 46% 52%, transparent 52%),
  repeating-linear-gradient(0deg, transparent 0 21px, rgba(255,255,255,0.10) 21px 24px),
  repeating-linear-gradient(90deg, transparent 0 25px, rgba(255,255,255,0.10) 25px 28px),
  linear-gradient(160deg, #263349 0%, #1a2334 100%); }
/* night sky: stars over deep navy */
.sticky.t-night { background:
  radial-gradient(1.5px 1.5px at 22% 28%, rgba(255,255,255,0.85), transparent 60%),
  radial-gradient(1px 1px at 68% 18%, rgba(255,255,255,0.6), transparent 60%),
  radial-gradient(1.5px 1.5px at 84% 55%, rgba(255,255,255,0.5), transparent 60%),
  radial-gradient(1px 1px at 42% 62%, rgba(255,255,255,0.45), transparent 60%),
  linear-gradient(160deg, #35426e 0%, #171d2e 100%); }

/* user-created: a strip of translucent washi tape across the top edge */
.sticky .tape {
  position: absolute; top: -5px; left: 50%; z-index: 3;
  width: 46px; height: 15px; transform: translateX(-50%) rotate(-4deg);
  background: rgba(255,255,255,0.4);
  border-left: 1px dashed rgba(255,255,255,0.6); border-right: 1px dashed rgba(255,255,255,0.6);
  box-shadow: 0 1px 2px rgba(0,0,0,0.14);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  pointer-events: none;
}
.sticky.s-q .tape { width: 34px; height: 12px; }

/* the (+) tile — a pressed well inviting a new sticky; links to the library */
.sticky.add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: var(--surface-sunken); border: 1.5px dashed var(--line-strong);
  box-shadow: var(--e-inset); color: var(--text-3); cursor: pointer;
  font: 700 var(--fs-xs)/1.2 var(--font);
}
.sticky.add:hover { transform: none; filter: none; border-color: var(--brand-400); color: var(--brand-600); box-shadow: var(--e-inset); }
.sticky.add .plus {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--matte-raised); border: 1px solid var(--line-strong);
  box-shadow: var(--e1), var(--highlight); font-size: 17px; color: var(--brand-600);
}
.sticky.add.s-q .plus { width: 26px; height: 26px; font-size: 14px; }

/* Minimize tab — a small plastic button seated in a section's corner that
   collapses it to its header strip (state is the page's to persist). The
   chevron rotates; the pressed .collapsed parent hides its own body. */
.mini-btn {
  position: absolute; right: 10px; bottom: 10px; z-index: 5;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  background: var(--matte-raised); border: 1px solid var(--line-strong);
  box-shadow: var(--e2), var(--highlight);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); font-size: 11px; line-height: 1; padding: 0;
  transition: transform 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.mini-btn:hover { color: var(--brand-600); border-color: var(--brand-300); transform: scale(1.12); }
.mini-btn:active { transform: translateY(1px); box-shadow: var(--e1), var(--highlight); }
.mini-btn .chev { transition: transform 0.2s; }
.collapsed .mini-btn .chev { transform: rotate(180deg); }

/* library affordances: an add/added pill where the count chip normally sits */
.sticky .put { position: absolute; top: 7px; right: 7px; z-index: 3;
  font: 800 10px/1 var(--font); color: var(--brand-700);
  padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,0.6); box-shadow: var(--e1);
  transition: transform 0.15s;
}
.sticky .put:hover { transform: scale(1.08); }
.sticky .put.did { color: var(--ok-600); }

/* ---------- 11. MODAL ------------------------------------------------------ */
.overlay {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: var(--s-6);
  background: rgba(15, 19, 34, 0.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.overlay.open { display: flex; }
.modal {
  width: 100%; max-width: 480px; max-height: 86vh; overflow: auto;
  background: var(--matte); border: 1px solid var(--line);
  border-radius: var(--r-2xl); box-shadow: var(--e4), var(--highlight);
  animation: pop 0.22s ease;
}
@keyframes pop { from { transform: translateY(10px) scale(0.98); opacity: 0; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-5) var(--s-6) 0;
}
.modal-body { padding: var(--s-4) var(--s-6); }
.modal-foot {
  display: flex; justify-content: flex-end; gap: var(--s-3);
  padding: var(--s-4) var(--s-6) var(--s-6);
  position: sticky; bottom: 0;
  background: linear-gradient(180deg, transparent, var(--surface-2) 30%);
}

/* ---------- 12. CALENDAR (booking bands) ----------------------------------- */
.cal { --cell: 74px; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0 6px; margin-bottom: var(--s-2); }
.cal-head div { text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; overflow: hidden; }
.cal-cell {
  position: relative; height: var(--cell); border-radius: var(--r-md);
  background: var(--surface-sunken); border: 1px solid var(--line);
  box-shadow: var(--e-inset); padding: 6px 8px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-3);
}
.cal-cell.other { opacity: 0.38; }
.cal-cell.today { border-color: var(--brand-400); box-shadow: 0 0 0 2px rgba(82,101,240,0.22), var(--e-inset); color: var(--brand-600); }

/* Band: a booking range drawn over the day cells. Rounded at range ends,
   square joins in the middle so multi-day stays read as one continuous piece. */
.band {
  /* -4px overhang each side bridges the 6px grid gap (with subpixel slack) so multi-day bands read as one piece */
  position: absolute; left: -4px; right: -4px; bottom: 6px; height: 30px;
  display: flex; align-items: center; gap: 6px; padding: 0 8px;
  color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden;
  box-shadow: 0 3px 8px rgba(23,32,66,0.28), inset 0 1px 0 rgba(255,255,255,0.28);
  cursor: pointer; transition: filter 0.15s, transform 0.15s;
}
.band:hover { filter: brightness(1.07); }
.band.start { border-radius: var(--r-pill) 0 0 var(--r-pill); left: 6px; }
.band.end   { border-radius: 0 var(--r-pill) var(--r-pill) 0; right: 6px; }
.band.solo  { border-radius: var(--r-pill); left: 6px; right: 6px; }
.band.mid   { box-shadow: 0 3px 8px rgba(23,32,66,0.28); } /* no bevel seam between cells */
.band.pending  { background: var(--state-pending); color: #4a2e05; }
.band.approved { background: var(--state-approved); }
.band.booked   { background: var(--state-booked); }
.band.blocked  { background: var(--state-blocked); }
/* Stretched-gradient bands: the gradient sweeps once across the WHOLE stay instead of
   restarting per day. Segments use horizontal gradients + background-size/position set
   per segment (size: N*100%, position: i/(N-1)*100%). */
.band.h.booked   { background: linear-gradient(90deg, #6d7ef7 0%, #4152e0 55%, #303c9c 100%); }
.band.h.approved { background: linear-gradient(90deg, #3fdba2 0%, #10b981 55%, #047857 100%); }
.band.h.pending  { background: linear-gradient(90deg, #fcd34d 0%, #f59e0b 60%, #d97706 100%); }
.band.h.blocked  { background: linear-gradient(90deg, #98a2b8 0%, #66718b 100%); }

.band .thumb {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 1.5px solid rgba(255,255,255,0.75); box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  background-size: cover; background-position: center;
}

/* Mini availability calendar (booking widget) — same band vocabulary at picker scale */
.mini-cal { user-select: none; }
.mini-cal .mc-head { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.mini-cal .mc-head div { text-align: center; font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; }
.mini-cal .mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 0; }
.mini-cal .d {
  position: relative; height: 34px; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); cursor: pointer; z-index: 1;
}
.mini-cal .d:hover::before {
  content: ''; position: absolute; inset: 2px 3px; border-radius: var(--r-sm);
  border: 1px solid var(--brand-300); z-index: -1;
}
.mini-cal .d.other { opacity: 0.32; }
.mini-cal .d.off {
  color: var(--text-3); opacity: 0.55; cursor: not-allowed; text-decoration: line-through;
  text-decoration-color: var(--danger-400); text-decoration-thickness: 1.5px;
}
.mini-cal .d.off:hover::before { display: none; }
.mini-cal .d.today { color: var(--brand-600); font-weight: 800; }
/* selected range = a small brand band behind the day numbers */
.mini-cal .d.sel { color: #fff; }
.mini-cal .d.sel::after {
  content: ''; position: absolute; inset: 3px -2px; z-index: -1;
  background: var(--state-booked); box-shadow: 0 2px 6px rgba(65,82,224,0.35), inset 0 1px 0 rgba(255,255,255,0.28);
}
.mini-cal .d.sel.first::after { border-radius: var(--r-pill) 0 0 var(--r-pill); inset: 3px -2px 3px 3px; }
.mini-cal .d.sel.last::after  { border-radius: 0 var(--r-pill) var(--r-pill) 0; inset: 3px 3px 3px -2px; }
.mini-cal .d.sel.first.last::after { border-radius: var(--r-pill); inset: 3px; }

/* Multi-unit month view: taller cells, slim stacked bands (one lane per unit) */
.cal.multi { --cell: 104px; }
.band.slim { height: 22px; font-size: 10px; gap: 4px; padding: 0 7px; }
.band.slim .thumb { width: 15px; height: 15px; border-width: 1px; }
.band.lane1 { bottom: 6px; }
.band.lane2 { bottom: 32px; }
.band.lane3 { bottom: 58px; }
.more-chip {
  position: absolute; top: 5px; right: 6px;
  font-size: 9.5px; font-weight: 800; color: var(--brand-600);
  background: var(--brand-50); border: 1px solid var(--brand-200);
  border-radius: var(--r-pill); padding: 1px 6px; cursor: pointer;
}
[data-theme="dark"] .more-chip { background: rgba(82,101,240,0.16); color: #b7c2ff; border-color: rgba(82,101,240,0.35); }

/* Resource timeline ("by unit"): one row per bookable unit, days across.
   Each stay is ONE continuous piece — no week wrapping, so bands are fully rounded. */
.tl-head, .tl-row-days { display: grid; grid-template-columns: repeat(14, 1fr); }
.tl { display: grid; grid-template-columns: 210px 1fr; row-gap: 8px; align-items: center; }
.tl .tl-unit { display: flex; gap: 10px; align-items: center; padding-right: var(--s-4); }
.tl .tl-unit .uic {
  width: 34px; height: 34px; border-radius: var(--r-sm); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  color: #fff; box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.3);
}
.tl .tl-unit .un { font-size: var(--fs-xs); font-weight: 700; line-height: 1.25; }
.tl .tl-unit .ut { font-size: 10px; color: var(--text-3); font-weight: 600; }
.tl .tl-lane { position: relative; height: 42px; }
.tl .tl-days { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(14, 1fr); gap: 0; }
.tl .tl-days i {
  border-radius: 0; background: var(--surface-sunken);
  border: 1px solid var(--line); border-left-width: 0; box-shadow: var(--e-inset);
}
.tl .tl-days i:first-child { border-left-width: 1px; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.tl .tl-days i:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.tl .tl-days i.we { background: var(--ink-100); }
[data-theme="dark"] .tl .tl-days i.we { background: #121728; }
.tl-band {
  position: absolute; top: 6px; height: 30px; border-radius: var(--r-pill);
  display: flex; align-items: center; gap: 6px; padding: 0 9px;
  color: #fff; font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden;
  box-shadow: 0 3px 8px rgba(23,32,66,0.28), inset 0 1px 0 rgba(255,255,255,0.28);
  cursor: pointer;
}
.tl-band:hover { filter: brightness(1.07); z-index: 2; }
.tl-band.pending  { background: linear-gradient(90deg, #fcd34d, #f59e0b); color: #4a2e05; }
.tl-band.approved { background: linear-gradient(90deg, #3fdba2, #059669); }
.tl-band.booked   { background: linear-gradient(90deg, #6d7ef7, #3542bd); }
.tl-band.blocked  { background: linear-gradient(90deg, #98a2b8, #66718b); }
.tl-band.partial  { background: linear-gradient(90deg, #fde68a, #fbbf24); color: #6b4a04; }
.tl-band .thumb {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 1.5px solid rgba(255,255,255,0.75); box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.tl-head { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; }
.tl-head div { text-align: center; padding-bottom: 4px; }
.tl-head div.today, .tl-head div .dn { display:block; }
.tl-head div.today { color: var(--brand-600); }

/* Calendar legend */
.legend { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.legend .li { display: inline-flex; gap: 8px; align-items: center; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.legend .sw { width: 26px; height: 14px; border-radius: var(--r-pill); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 3px rgba(23,32,66,0.2); }

/* ---------- 13. TABS / UTILS ----------------------------------------------- */
.tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-lg); background: var(--surface-sunken); border: 1px solid var(--line); box-shadow: var(--e-inset); }
.tabs button {
  border: 0; cursor: pointer; padding: 8px 16px; border-radius: var(--r-md);
  font: 600 var(--fs-sm)/1.2 var(--font); color: var(--text-2); background: transparent; transition: all 0.18s;
}
.tabs button.on { color: var(--text); background: var(--matte-raised); box-shadow: var(--e1), var(--highlight); }

/* Pagination — two sanctioned forms; pick by surface, never mix on one list:
   · .pages — the numbered pager, for CONSOLE / DATA surfaces (tables, queues,
     positional search results). A pressed-well track (same material story as
     .tabs); the current page is a raised matte chip carrying the brand hue.
     Window to ≤7 slots: ‹ 1 … n−1 [n] n+1 … last ›. Prev/next stay rendered at
     the track's edges and DISABLE at the ends (never hide — the track keeps its
     width). Compact form: swap the numbers for one .pg-label ("Page 3 of 49")
     in drawers, cards, and mobile.
   · .load-more — GUEST BROWSE surfaces (feeds, tile grids): the list flows and
     position is meaningless, so one secondary button + a progress readout.
   The vocabulary maps 1:1 to the shared PagedResult contract
   (Clixion.Common.Pagination): pageNumber → .pg.on · totalPages → last slot ·
   hasPrevious/hasNextPage → the nav buttons' disabled state ·
   firstRowOnPage–lastRowOnPage of totalCount → the "Showing X–Y of Z" summary ·
   pageSize → the "N / page" .dd picker (options end at 100 — the contract cap). */
.pages { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-sunken); border: 1px solid var(--line); box-shadow: var(--e-inset); }
.pages .pg {
  min-width: 30px; height: 30px; padding: 0 9px; border: 0; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 var(--fs-xs)/1 var(--font); font-variant-numeric: tabular-nums;
  color: var(--text-2); background: transparent; cursor: pointer;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.pages .pg:hover { color: var(--text); background: var(--matte-raised); }
.pages .pg.on { color: var(--brand-600); background: var(--matte-raised); box-shadow: var(--e1), var(--highlight); cursor: default; }
.pages .pg.gap { pointer-events: none; color: var(--text-3); min-width: 22px; padding: 0 2px; letter-spacing: 1px; }
.pages .pg:disabled { opacity: 0.38; cursor: not-allowed; color: var(--text-3); background: transparent; }
.pages .pg-label { padding: 0 12px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-theme="dark"] .pages .pg.on { color: var(--brand-300); }

.load-more { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-8) 0 var(--s-2); }
.load-more .lm-track { width: 190px; height: 4px; border-radius: var(--r-pill); background: var(--surface-sunken); border: 1px solid var(--line); box-shadow: var(--e-inset); overflow: hidden; }
.load-more .lm-track i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--brand-400), var(--brand-600)); }
.load-more .lm-count { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }

.grid { display: grid; gap: var(--s-6); }
.grid > * { min-width: 0; } /* grid children must be able to shrink below content width */
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid.c3, .grid.c4 { grid-template-columns: repeat(2, 1fr); } .grid.c2 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .grid.c3, .grid.c4 { grid-template-columns: 1fr; } }
.row { display: flex; gap: var(--s-3); align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }

/* Amenity item */
.amen { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-lg); transition: background 0.15s; }
.amen:hover { background: var(--surface-sunken); }
.amen .ic {
  width: 40px; height: 40px; border-radius: var(--r-md); flex: none;
  background: var(--matte-raised); border: 1px solid var(--line);
  box-shadow: var(--e1), var(--highlight);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.amen .t { font-size: var(--fs-sm); font-weight: 600; }
.amen .d { font-size: var(--fs-xs); color: var(--text-3); }

/* ---------- 14. CAMPAIGNS ---------------------------------------------------
   A campaign supplies a constrained "theme slot": two accent colors, a gradient,
   and hero art. Components read var(--camp-*) with Bunkio-blue fallbacks, so an
   unthemed context still renders correctly and campaigns can't break the system. */
.promo-ribbon {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 14px 10px 16px; border-radius: var(--r-lg);
  color: #fff; text-decoration: none;
  background: var(--camp-grad, linear-gradient(90deg, var(--brand-500), var(--brand-700)));
  box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,0.28);
  transition: transform 0.15s, box-shadow 0.15s;
}
.promo-ribbon:hover { transform: translateY(-1px); box-shadow: var(--e3), inset 0 1px 0 rgba(255,255,255,0.28); text-decoration: none; }
.promo-ribbon .art { font-size: 20px; }
.promo-ribbon .txt { flex: 1; font-size: var(--fs-sm); font-weight: 600; color: #fff; }
.promo-ribbon .txt b { font-weight: 800; }
.promo-ribbon .cta {
  font-size: var(--fs-xs); font-weight: 800; color: var(--camp-ink, var(--brand-700));
  background: rgba(255,255,255,0.92); padding: 6px 12px; border-radius: var(--r-pill);
  box-shadow: var(--e1); white-space: nowrap;
}
.promo-ribbon .x {
  width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: rgba(255,255,255,0.2); color: #fff; font-size: 12px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: transform 0.15s, background 0.15s;
}
.promo-ribbon .x:hover { background: rgba(255,255,255,0.32); transform: scale(1.1); }

.badge.partner {
  background: var(--camp-grad, var(--state-booked));
  box-shadow: 0 2px 8px rgba(23,32,66,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* Banner cards for the specials hub */
.banner-card {
  position: relative; border-radius: var(--r-xl); overflow: hidden; cursor: pointer;
  color: #fff; display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform var(--speed), box-shadow var(--speed);
  min-height: 190px; padding: var(--s-5);
}
.banner-card:hover { transform: translateY(-4px); box-shadow: var(--e3); }
.banner-card.lg { min-height: 250px; }
.banner-card .k {
  align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.3); margin-bottom: auto;
}
.banner-card h3, .banner-card h4 { color: #fff; margin: 0 0 2px; text-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.banner-card .sub { font-size: var(--fs-xs); color: rgba(255,255,255,0.85); font-weight: 550; }
.banner-card .foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); }
.banner-card .go {
  font-size: var(--fs-xs); font-weight: 800; padding: 7px 13px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.92); color: var(--camp-ink, var(--brand-700)); box-shadow: var(--e1); white-space: nowrap;
}
.banner-card.ended { filter: saturate(0.25); }
.banner-card.ended::after {
  content: ''; position: absolute; inset: 0; background: rgba(23,29,46,0.35);
}
.banner-card.ended .over { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; }

/* ---------- Repaint-flicker mitigation -------------------------------------
   Chromium re-rasterizes backdrop-filter regions when overlapping content
   changes (hover transitions, menus opening), which blinks white edges at
   rounded corners. Promoting each glass surface to its own compositor layer
   and isolating its stacking context stops the flicker. */
.nav, .search-shell, .glass, .menu, .dd-panel, .tabbar {
  transform: translateZ(0);
  isolation: isolate;
}
.search-shell .search-seg { backface-visibility: hidden; } /* stabilizes hover-tint edges */

/* Theme toggle (fixed) */
.theme-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r-pill); border: 1px solid var(--glass-border);
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--e3); cursor: pointer; font: 600 var(--fs-sm)/1 var(--font); color: var(--text);
  display: inline-flex; gap: 8px; align-items: center;
}
.theme-toggle:hover { box-shadow: var(--e4); }

/* Demo helpers for the design-system page */
.swatch { border-radius: var(--r-lg); height: 64px; box-shadow: var(--e1), var(--highlight); border: 1px solid var(--line); }
.swatch-label { font-size: var(--fs-xs); margin-top: 6px; }
.swatch-label b { display: block; font-size: var(--fs-xs); }
.tok { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 11.5px; color: var(--text-3); }

/* ---------- Prototype nav dropdowns — grouped page directory -----------------
   Panels are SOLID surface, never backdrop-filter: they render inside the
   frosted nav, and nested blur causes the white-edge repaint flicker. */
.nav-dd { position: relative; }
.nav-dd > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-md); border: 0; cursor: pointer;
  background: transparent; color: var(--text-2);
  font: 600 var(--fs-sm)/1.2 var(--font); white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-dd > button::after { content: '▾'; font-size: 9px; color: var(--text-3); transition: transform 0.15s; }
.nav-dd:hover > button, .nav-dd.open > button { color: var(--text); background: var(--surface-sunken); }
.nav-dd.open > button::after { transform: rotate(180deg); }
.nav-dd > button.here { color: var(--brand-600); background: var(--brand-50); }
[data-theme="dark"] .nav-dd > button.here { background: rgba(82,101,240,0.16); color: #b7c2ff; }
.nav-dd-panel { position: absolute; top: 100%; left: 0; padding-top: 8px; display: none; z-index: 80; }
.nav-dd:hover .nav-dd-panel, .nav-dd.open .nav-dd-panel { display: block; }
.nav-dd-inner {
  min-width: 218px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--e4), var(--highlight);
}
.nav-dd-inner a {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px;
  border-radius: var(--r-sm); color: var(--text);
  font: 550 var(--fs-sm)/1.3 var(--font); white-space: nowrap;
}
.nav-dd-inner a:hover { background: var(--surface-sunken); text-decoration: none; }
.nav-dd-inner a.sel { color: var(--brand-600); background: var(--brand-50); font-weight: 700; }
.nav-dd-inner a.sel::after { content: '✓'; margin-left: auto; font-size: 11px; }
[data-theme="dark"] .nav-dd-inner a.sel { background: rgba(82,101,240,0.16); color: #b7c2ff; }
@media (max-width: 760px) {
  .nav-dd { position: static; }
  .nav-dd:hover .nav-dd-panel { display: none; }   /* no hover-open on touch layouts */
  .nav-dd.open .nav-dd-panel { display: block; position: fixed; left: 12px; right: 12px; top: 104px; }
  .nav-dd-inner { min-width: 0; }
}