/* =====================================================================
   SPACE THEME (2026-10-18) — minimalist space look for the whole site,
   after the user's references in /new-space-ui (dark space, sparse
   stars, a glowing planet horizon, wide techno headings, thin outline
   buttons). Palette: black / cream / orange (the same cream #fff3e4 and
   orange #ff4b2b as before).

   Loaded LAST on every page (after soft.css) EXCEPT profile.html, which
   also serves /account*: the user asked for My Profile to stay as it is.
   It also keeps three things exactly as they were, by the user's request:
     · the header (gnav.js .bh, incl. the phone app bar and ⋮ sheet),
     · the phone tab bar (bottom-nav.js .ms-bottomnav) and the arcade's
       own top bar (.ar-nav),
     · the site footer (gnav.js footer.cz-foot).
   How: the space tokens are set on the ROOT (so every alias the pages
   compute there, like --hard or --shadow-card, follows), then block 2
   puts the old token values back on those three. Never set the space
   tokens on <body> children instead: aliases are resolved at :root.

   Dark is the default now (the pre-paint script on every page treats a
   missing chamali_theme as dark); light mode is a cream "daylight"
   version of the same layout. Headings use Chakra Petch (Thai + Latin,
   loaded by each page's <head>), body text keeps Inter/SukhumvitSet.
   Motion stays under ~450ms and only moves transform/opacity.
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  --sp-display: "Chakra Petch", "SukhumvitSet", "Inter", var(--font-body, sans-serif);
  --sp-black: #0b0908;
  --sp-cream: #fff3e4;
  --sp-orange: #ff4b2b;
  --sp-ease: cubic-bezier(.2, .8, .2, 1);
  --sp-stars-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='%23fff3e4'%3E%3Ccircle cx='175' cy='196' r='1.02' opacity='0.58'/%3E%3Ccircle cx='103' cy='185' r='0.83' opacity='0.63'/%3E%3Ccircle cx='42' cy='218' r='0.41' opacity='0.64'/%3E%3Ccircle cx='0' cy='75' r='0.94' opacity='0.74'/%3E%3Ccircle cx='44' cy='191' r='0.76' opacity='0.91'/%3E%3Ccircle cx='112' cy='251' r='0.6' opacity='0.85'/%3E%3Ccircle cx='201' cy='38' r='1.13' opacity='0.39'/%3E%3Ccircle cx='195' cy='72' r='0.69' opacity='0.43'/%3E%3Ccircle cx='92' cy='252' r='0.78' opacity='0.54'/%3E%3Ccircle cx='291' cy='317' r='1.17' opacity='0.42'/%3E%3Ccircle cx='224' cy='149' r='0.47' opacity='0.66'/%3E%3Ccircle cx='219' cy='19' r='1.14' opacity='0.58'/%3E%3Ccircle cx='123' cy='286' r='1.19' opacity='0.82'/%3E%3Ccircle cx='130' cy='83' r='0.74' opacity='0.71'/%3E%3Ccircle cx='67' cy='203' r='0.73' opacity='0.3'/%3E%3Ccircle cx='107' cy='233' r='1.03' opacity='0.75'/%3E%3Ccircle cx='142' cy='124' r='0.79' opacity='0.92'/%3E%3Ccircle cx='315' cy='35' r='0.92' opacity='0.66'/%3E%3Ccircle cx='250' cy='54' r='1.16' opacity='0.85'/%3E%3Ccircle cx='39' cy='131' r='1.07' opacity='0.65'/%3E%3Ccircle cx='285' cy='136' r='0.48' opacity='0.82'/%3E%3Ccircle cx='149' cy='44' r='0.95' opacity='0.63'/%3E%3C/g%3E%3C/svg%3E");          /* the "window onto space" tiles are dark in both themes */
}
:root:root:root:not([data-theme="dark"]) {
  --bg: #fff3e4;
  --dot: transparent;
  --surface: #fff8ef;
  --surface-soft: #fbeddc;
  --fill: #f8e8d6;
  --text: #0b0908;
  --muted: #76675b;
  --edge: rgba(11, 9, 8, 0.14);
  --line: rgba(11, 9, 8, 0.08);
  --line-strong: rgba(11, 9, 8, 0.2);
  --accent: #ff4b2b;
  --accent-hover: #ec3717;
  --accent-2: #ff9a1f;
  --accent-soft: rgba(255, 75, 43, 0.12);
  --accent-line: rgba(255, 75, 43, 0.4);
  --t0: #fbe3d3; --t1: #f8eadb; --t2: #f8eadb; --t3: #f8eadb; --t4: #f8eadb; --t5: #f8eadb;
  --ink-sh: transparent;
  --hard: none;
  --hard-sm: none;
  --glass-rgb: 255, 243, 228;
  --radius-xs: 8px; --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;
  --ab-edge: rgba(11, 9, 8, 0.14);
  --ab-hard: none;
  --sp-star: 0.2;
  --sp-glow: rgba(255, 75, 43, 0.1);
  color-scheme: light;
}
:root:root:root[data-theme="dark"] {
  --bg: #0b0908;
  --dot: transparent;
  --surface: #12100e;
  --surface-soft: #1a1613;
  --fill: #1a1613;
  --text: #fff3e4;
  --muted: #a39484;
  --edge: rgba(255, 243, 228, 0.14);
  --line: rgba(255, 243, 228, 0.08);
  --line-strong: rgba(255, 243, 228, 0.18);
  --accent: #ff4b2b;
  --accent-hover: #ff6645;
  --accent-2: #ff9a1f;
  --accent-soft: rgba(255, 75, 43, 0.14);
  --accent-line: rgba(255, 75, 43, 0.45);
  --t0: #24140e; --t1: #191512; --t2: #191512; --t3: #191512; --t4: #191512; --t5: #191512;
  --ink-sh: transparent;
  --hard: none;
  --hard-sm: none;
  --glass-rgb: 11, 9, 8;
  --radius-xs: 8px; --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;
  --ab-edge: rgba(255, 243, 228, 0.14);
  --ab-hard: none;
  --sp-star: 0.85;
  --sp-glow: rgba(255, 75, 43, 0.16);
  color-scheme: dark;
}
/* About Mali (about-mali.html) has its own palette names; --ink is its TEXT
   colour there. Its dark --ink lost to ui-kit's html[data-theme][lang] one
   (black text on dark), so both themes are set here, in the space palette. */
:root:root:root:has(.wordmark .th) {
  --paper: var(--bg); --cream: var(--surface-soft); --card: var(--surface);
  --ink: #0b0908; --ink2: #76675b; --line: rgba(11, 9, 8, 0.12);
  --gold: #ff9a1f; --gold-d: #ff4b2b; --gold-soft: rgba(255, 75, 43, 0.1);
  --green: #ff4b2b; --green-d: #ec3717; --green-soft: rgba(255, 75, 43, 0.1);
  --sky: #ff9a1f; --sky-d: #ff4b2b; --sky-soft: rgba(255, 154, 31, 0.12);
  --shadow: none; --shadow-sm: none;
}
:root:root:root[data-theme="dark"]:has(.wordmark .th) {
  --ink: #fff3e4; --ink2: #a39484; --line: rgba(255, 243, 228, 0.12);
  --gold-soft: rgba(255, 75, 43, 0.14); --green-soft: rgba(255, 75, 43, 0.14); --sky-soft: rgba(255, 154, 31, 0.14);
}
:root:root:root body :is(.chip, .badge, .about-tools a) { border-width: 1px !important; box-shadow: none !important; }
:root:root:root[data-theme="dark"] body .chip { border-color: var(--accent-line); color: var(--accent-2); }

/* one accent for every app (MaliBills was gold, MaliTrip blue) */
:root:root:root [data-app], :root:root:root .ev-page {
  --app: var(--accent); --app-2: var(--accent-2); --app-ink: #fff; --app-soft: var(--accent-soft);
}

/* ---------- 2. KEEP: header, phone tab bar, arcade bar, site footer ----------
   The values ui-kit.css (desktop) and soft.css (phones) gave them. */
:root:root:root :is(.bh, .bh-overlay, body > .bh-drop, .ms-bottomnav, .ar-nav, footer.cz-foot) {
  --bg: #fff3e4; --dot: rgba(43, 26, 18, 0.07); --ink: #2b1a12;
  --surface: #fffaf2; --surface-soft: #ffe8cf;
  --text: #2b1a12; --muted: #8b6b5a; --edge: #2b1a12;
  --line: rgba(43, 26, 18, 0.14); --line-strong: rgba(43, 26, 18, 0.32);
  --accent: #ff4b2b; --accent-hover: #ec3717; --accent-2: #ff9a1f; --accent-soft: rgba(255, 75, 43, 0.14);
  --t0: #ffd9c2; --t1: #ffd3de; --t2: #d3f3dc; --t3: #d4e8ff; --t4: #e7dcff; --t5: #fff0b3;
  --ink-sh: initial;
  --hard: 0 4px 0 #2b1a12; --hard-sm: 0 3px 0 #2b1a12;
  --glass-rgb: 255, 250, 242;
  --radius-xs: 10px; --radius-sm: 12px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 24px;
}
:root:root:root[data-theme="dark"] :is(.bh, .bh-overlay, body > .bh-drop, .ms-bottomnav, .ar-nav, footer.cz-foot) {
  --bg: #17110d; --dot: rgba(255, 230, 205, 0.05); --ink: #000;
  --surface: #221913; --surface-soft: #2e2219;
  --text: #fbeee0; --muted: #b9a08e; --edge: rgba(255, 228, 200, 0.5);
  --line: rgba(255, 228, 200, 0.14); --line-strong: rgba(255, 228, 200, 0.32);
  --accent: #ff6645; --accent-hover: #ff7b5e; --accent-2: #ffab3d; --accent-soft: rgba(255, 102, 69, 0.2);
  --t0: #4a2d20; --t1: #4a2434; --t2: #1f3d2b; --t3: #1f3347; --t4: #33294d; --t5: #463c18;
  --hard: 0 4px 0 #000; --hard-sm: 0 3px 0 #000;
  --glass-rgb: 34, 25, 19;
}
@media (max-width: 700px) {
  :root:root:root :is(.bh, .bh-overlay, body > .bh-drop, .ms-bottomnav, .ar-nav, footer.cz-foot) {
    --surface: #fffcf8; --surface-soft: #fbeee0; --fill: #f8eadb;
    --edge: rgba(43, 26, 18, 0.09); --ink-sh: transparent;
    --hard: 0 1px 2px rgba(43, 26, 18, 0.04), 0 12px 28px -16px rgba(43, 26, 18, 0.3);
    --hard-sm: 0 1px 2px rgba(43, 26, 18, 0.04), 0 6px 16px -10px rgba(43, 26, 18, 0.26);
    --radius-md: 18px; --radius-lg: 22px; --radius-xl: 26px;
  }
  :root:root:root[data-theme="dark"] :is(.bh, .bh-overlay, body > .bh-drop, .ms-bottomnav, .ar-nav, footer.cz-foot) {
    --surface: #241a14; --surface-soft: #2e2219; --fill: #2e231b;
    --edge: rgba(255, 228, 200, 0.08);
    --hard: 0 1px 0 rgba(255, 228, 200, 0.04) inset, 0 14px 30px -16px rgba(0, 0, 0, 0.85);
    --hard-sm: 0 1px 0 rgba(255, 228, 200, 0.04) inset, 0 8px 18px -10px rgba(0, 0, 0, 0.8);
  }
  /* the phone app bar's scrolled backdrop is the page behind it, not the bar */
  html body .bh.bh-scrolled::before { background: color-mix(in srgb, var(--sp-cream) 90%, transparent); }
  html[data-theme="dark"] body .bh.bh-scrolled::before { background: color-mix(in srgb, var(--sp-black) 86%, transparent); }
}

/* ---------- 3. THE SKY: plain black (or cream), sparse stars, an orange haze ---------- */
:root:root:root body, :root:root:root[lang] body, :root:root:root body.lang-th, :root:root:root body.game-page {
  background: var(--bg) !important;
  background-attachment: scroll !important;
}
:root:root:root:not([data-theme="dark"]) { --sp-stars-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='%232b1a12'%3E%3Ccircle cx='175' cy='196' r='1.02' opacity='0.58'/%3E%3Ccircle cx='103' cy='185' r='0.83' opacity='0.63'/%3E%3Ccircle cx='42' cy='218' r='0.41' opacity='0.64'/%3E%3Ccircle cx='0' cy='75' r='0.94' opacity='0.74'/%3E%3Ccircle cx='44' cy='191' r='0.76' opacity='0.91'/%3E%3Ccircle cx='112' cy='251' r='0.6' opacity='0.85'/%3E%3Ccircle cx='201' cy='38' r='1.13' opacity='0.39'/%3E%3Ccircle cx='195' cy='72' r='0.69' opacity='0.43'/%3E%3Ccircle cx='92' cy='252' r='0.78' opacity='0.54'/%3E%3Ccircle cx='291' cy='317' r='1.17' opacity='0.42'/%3E%3Ccircle cx='224' cy='149' r='0.47' opacity='0.66'/%3E%3Ccircle cx='219' cy='19' r='1.14' opacity='0.58'/%3E%3Ccircle cx='123' cy='286' r='1.19' opacity='0.82'/%3E%3Ccircle cx='130' cy='83' r='0.74' opacity='0.71'/%3E%3Ccircle cx='67' cy='203' r='0.73' opacity='0.3'/%3E%3Ccircle cx='107' cy='233' r='1.03' opacity='0.75'/%3E%3Ccircle cx='142' cy='124' r='0.79' opacity='0.92'/%3E%3Ccircle cx='315' cy='35' r='0.92' opacity='0.66'/%3E%3Ccircle cx='250' cy='54' r='1.16' opacity='0.85'/%3E%3Ccircle cx='39' cy='131' r='1.07' opacity='0.65'/%3E%3Ccircle cx='285' cy='136' r='0.48' opacity='0.82'/%3E%3Ccircle cx='149' cy='44' r='0.95' opacity='0.63'/%3E%3C/g%3E%3C/svg%3E"); --sp-stars-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cg fill='%232b1a12'%3E%3Ccircle cx='80' cy='91' r='0.77' opacity='0.77'/%3E%3Ccircle cx='583' cy='621' r='1.12' opacity='0.84'/%3E%3Ccircle cx='236' cy='637' r='0.98' opacity='0.37'/%3E%3Ccircle cx='37' cy='501' r='0.87' opacity='0.78'/%3E%3Ccircle cx='408' cy='504' r='1.18' opacity='0.94'/%3E%3Ccircle cx='370' cy='242' r='0.42' opacity='0.9'/%3E%3Ccircle cx='23' cy='89' r='0.56' opacity='0.86'/%3E%3Ccircle cx='245' cy='142' r='0.88' opacity='0.34'/%3E%3Ccircle cx='496' cy='283' r='0.9' opacity='0.59'/%3E%3Ccircle cx='227' cy='1' r='1.16' opacity='0.94'/%3E%3Ccircle cx='465' cy='580' r='0.59' opacity='0.82'/%3E%3Ccircle cx='275' cy='90' r='0.46' opacity='0.51'/%3E%3Ccircle cx='18' cy='509' r='0.63' opacity='0.81'/%3E%3Ccircle cx='160' cy='428' r='1.03' opacity='0.67'/%3E%3Cpath transform='translate(395 390) scale(0.8)' opacity='.85' d='M0-7 1.1-1.1 7 0 1.1 1.1 0 7-1.1 1.1-7 0-1.1-1.1z'/%3E%3Cpath transform='translate(82 29) scale(1.14)' opacity='.85' d='M0-7 1.1-1.1 7 0 1.1 1.1 0 7-1.1 1.1-7 0-1.1-1.1z'/%3E%3C/g%3E%3C/svg%3E"); }
:root:root:root[data-theme="dark"] { --sp-stars-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='%23fff3e4'%3E%3Ccircle cx='175' cy='196' r='1.02' opacity='0.58'/%3E%3Ccircle cx='103' cy='185' r='0.83' opacity='0.63'/%3E%3Ccircle cx='42' cy='218' r='0.41' opacity='0.64'/%3E%3Ccircle cx='0' cy='75' r='0.94' opacity='0.74'/%3E%3Ccircle cx='44' cy='191' r='0.76' opacity='0.91'/%3E%3Ccircle cx='112' cy='251' r='0.6' opacity='0.85'/%3E%3Ccircle cx='201' cy='38' r='1.13' opacity='0.39'/%3E%3Ccircle cx='195' cy='72' r='0.69' opacity='0.43'/%3E%3Ccircle cx='92' cy='252' r='0.78' opacity='0.54'/%3E%3Ccircle cx='291' cy='317' r='1.17' opacity='0.42'/%3E%3Ccircle cx='224' cy='149' r='0.47' opacity='0.66'/%3E%3Ccircle cx='219' cy='19' r='1.14' opacity='0.58'/%3E%3Ccircle cx='123' cy='286' r='1.19' opacity='0.82'/%3E%3Ccircle cx='130' cy='83' r='0.74' opacity='0.71'/%3E%3Ccircle cx='67' cy='203' r='0.73' opacity='0.3'/%3E%3Ccircle cx='107' cy='233' r='1.03' opacity='0.75'/%3E%3Ccircle cx='142' cy='124' r='0.79' opacity='0.92'/%3E%3Ccircle cx='315' cy='35' r='0.92' opacity='0.66'/%3E%3Ccircle cx='250' cy='54' r='1.16' opacity='0.85'/%3E%3Ccircle cx='39' cy='131' r='1.07' opacity='0.65'/%3E%3Ccircle cx='285' cy='136' r='0.48' opacity='0.82'/%3E%3Ccircle cx='149' cy='44' r='0.95' opacity='0.63'/%3E%3C/g%3E%3C/svg%3E"); --sp-stars-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cg fill='%23fff3e4'%3E%3Ccircle cx='80' cy='91' r='0.77' opacity='0.77'/%3E%3Ccircle cx='583' cy='621' r='1.12' opacity='0.84'/%3E%3Ccircle cx='236' cy='637' r='0.98' opacity='0.37'/%3E%3Ccircle cx='37' cy='501' r='0.87' opacity='0.78'/%3E%3Ccircle cx='408' cy='504' r='1.18' opacity='0.94'/%3E%3Ccircle cx='370' cy='242' r='0.42' opacity='0.9'/%3E%3Ccircle cx='23' cy='89' r='0.56' opacity='0.86'/%3E%3Ccircle cx='245' cy='142' r='0.88' opacity='0.34'/%3E%3Ccircle cx='496' cy='283' r='0.9' opacity='0.59'/%3E%3Ccircle cx='227' cy='1' r='1.16' opacity='0.94'/%3E%3Ccircle cx='465' cy='580' r='0.59' opacity='0.82'/%3E%3Ccircle cx='275' cy='90' r='0.46' opacity='0.51'/%3E%3Ccircle cx='18' cy='509' r='0.63' opacity='0.81'/%3E%3Ccircle cx='160' cy='428' r='1.03' opacity='0.67'/%3E%3Cpath transform='translate(395 390) scale(0.8)' opacity='.85' d='M0-7 1.1-1.1 7 0 1.1 1.1 0 7-1.1 1.1-7 0-1.1-1.1z'/%3E%3Cpath transform='translate(82 29) scale(1.14)' opacity='.85' d='M0-7 1.1-1.1 7 0 1.1 1.1 0 7-1.1 1.1-7 0-1.1-1.1z'/%3E%3C/g%3E%3C/svg%3E"); }
body::before, body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
body::before {
  background:
    radial-gradient(70% 55% at 88% -12%, var(--sp-glow), transparent 62%),
    radial-gradient(55% 45% at -8% 108%, color-mix(in srgb, var(--sp-glow) 55%, transparent), transparent 60%);
}
body::after {
  background: var(--sp-stars-a) 0 0 / 320px 320px, var(--sp-stars-b) 120px 60px / 640px 640px;
  opacity: var(--sp-star);
  animation: spTwinkle 7s ease-in-out infinite alternate;
}
@keyframes spTwinkle { to { opacity: calc(var(--sp-star) * 0.55); } }

/* stickers keep their ink outline readable on the black sky */
html[data-theme="dark"] body img:is([src*="/arcade-icons/"], [src*="/ui-icons/"], [src*="/quest-icons/"], [src*="/characters/"], [src*="/tool-icons/"]):not(.bh img):not(.ms-bottomnav img):not(.cz-foot img):not(.hm-logo img):not(.ar-nav img) {
  filter: drop-shadow(0 0 .6px rgba(255, 240, 225, .9));
}

/* ---------- 4. TYPE: wide techno headings ---------- */
:root:root:root body :is(h1, h2):not(.bh *):not(.cz-foot *):not(.ar-nav *),
:root:root:root body :is(.hm-word, .hm-h2, .app-head h1, .hero-title, .gcard h2, .tc-big .tc-head h2, .wordmark) {
  font-family: var(--sp-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}
:root:root:root[lang="en"] body :is(h1, h2):not(.bh *):not(.cz-foot *):not(.ar-nav *) { letter-spacing: 0.02em !important; }
/* eyebrows and small labels: tracked capitals in the same face, orange */
:root:root:root body :is(.hm-eyebrow, .hm-tool-name, .gcard .sub, .eyebrow, .np-eyebrow, .app-head .app-pill) {
  font-family: var(--sp-display) !important; font-weight: 600 !important;
  letter-spacing: 0.22em !important; text-transform: uppercase;
}
:root:root:root[lang="th"] body :is(.hm-eyebrow, .hm-tool-name, .gcard .sub, .eyebrow, .np-eyebrow, .app-head .app-pill) { letter-spacing: 0.04em !important; }

/* ---------- 5. BOXES: hairline, flat, no hard shadow ---------- */
:root:root:root body :is(
  .how-card, .site-card, .mali-today-card, .preview-card, .auth-card, .np-card, .social-card,
  .card, .feature-card, .home-feature-card, .highlight-card, .roadmap-card, .restaurant-card,
  .login-card, .login-preview-card, .preview-panel, .login-preview-panel, .summary-card,
  .share-modal, .bill-guide-modal, .pay-card, .pay-sheet, .app-card, .panel, .history-card,
  .empty-state, .activity-card, .home-clean-hero, .login-helper-card, .place-modal-card,
  .suggestion-card, .acc-card, .np-stat, .cc-card, .gcard, .tc-big, .hm-today-card, .mb-chat,
  .ev-map, .hm-about-img, .seo-howto
):not(.bh *):not(.cz-foot *) {
  border-width: 1px !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}
:root:root:root body :is(.gcard, .card, .panel, .np-card, .acc-card):not(.bh *):hover { box-shadow: none !important; }

/* ---------- 6. BUTTONS: an orange pill, or a thin outline ---------- */
:root:root:root body :is(.btn, .btn-primary, .hero-btn.primary, .ap-btn, .np-btn.primary, .login-submit, .dashboard-primary-btn):not(.bh *):not(.cz-foot *):not(.ghost) {
  border: 1px solid var(--accent) !important; border-radius: 999px !important;
  background: var(--accent) !important; color: #fff !important;
  box-shadow: 0 10px 28px -14px rgba(255, 75, 43, .7) !important;
  font-family: var(--sp-display); font-weight: 600 !important; letter-spacing: .04em;
  transition: background 200ms var(--sp-ease), box-shadow 200ms var(--sp-ease), transform 160ms var(--sp-ease);
}
:root:root:root body :is(.btn, .btn-primary, .hero-btn.primary, .ap-btn, .np-btn.primary, .login-submit, .dashboard-primary-btn):not(.bh *):not(.cz-foot *):not(.ghost):hover {
  background: var(--accent-hover) !important; box-shadow: 0 12px 34px -12px rgba(255, 75, 43, .85) !important;
}
:root:root:root body :is(.btn-secondary, .hero-btn.secondary, .btn.ghost, .ap-btn.ghost, .np-btn:not(.primary), .secondary-btn, .login-secondary, .dashboard-secondary-btn, .ar-modal .btn.ghost):not(.bh *):not(.cz-foot *) {
  border: 1px solid var(--line-strong) !important; border-radius: 999px !important;
  background: transparent !important; color: var(--text) !important; box-shadow: none !important;
  font-family: var(--sp-display); font-weight: 600 !important; letter-spacing: .04em;
  transition: border-color 200ms var(--sp-ease), background 200ms var(--sp-ease);
}
:root:root:root body :is(.btn-secondary, .hero-btn.secondary, .btn.ghost, .ap-btn.ghost, .np-btn:not(.primary), .secondary-btn, .login-secondary, .dashboard-secondary-btn):not(.bh *):not(.cz-foot *):hover {
  border-color: var(--text) !important; background: color-mix(in srgb, var(--text) 5%, transparent) !important;
}
:root:root:root body :is(.btn, .btn-primary, .btn-secondary, .hero-btn, .ap-btn, .np-btn):not(.bh *):active { transform: scale(.97) !important; }

/* ---------- 7. FIELDS: quiet until focused ---------- */
:root:root:root body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]), select, textarea):not(.bh *):not(.cz-foot *) {
  background-color: var(--fill) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  border-radius: 12px;
  color: var(--text);
}
:root:root:root body :is(input, select, textarea):not(.bh *):not(.cz-foot *):focus {
  border-color: var(--accent) !important; background-color: var(--surface) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important; outline: none;
}
:root:root:root body input:is([type="checkbox"], [type="radio"], [type="range"]) { accent-color: var(--accent); }

/* ---------- 8. SMALL SHARED BITS ---------- */
:root:root:root body .uk-toast { border: 1px solid var(--line-strong); background: var(--surface-soft); color: var(--text); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .7); }
:root:root:root body .chip { border-width: 1px; }
:root:root:root body .segtabs { border-width: 1px; border-color: var(--line-strong); box-shadow: none; }
:root:root:root body .tab-pill { border: 0; }
:root:root:root body ::selection { background: var(--accent); color: #fff; }
/* the arcade game screens stay as they are; their cards and boards go flat */
:root:root:root body :is(.gicon, .panel-ic, .hero-tile) { border-width: 1px; border-color: var(--line-strong); box-shadow: none; }

/* ---------- 8b. APP SHELL (planner, bill split, MERPY on phones) ---------- */
:root:root:root body :is(.pl-trip, .planner-tabbar) { border-width: 1px; border-color: var(--line-strong); box-shadow: none; }
:root:root:root body .pl-trip:hover { transform: none; box-shadow: none; border-color: var(--text); }
:root:root:root body .pl-trip-ic { border-width: 1px; border-color: var(--line); background: var(--surface-soft); }
:root:root:root body .pl-add {
  border: 1px solid var(--accent); border-radius: 999px; box-shadow: 0 10px 28px -14px rgba(255, 75, 43, .7);
  font-family: var(--sp-display); font-weight: 600; letter-spacing: .04em;
}
:root:root:root body .pl-add.ghost { background: transparent; border-color: var(--line-strong); box-shadow: none; }
:root:root:root body .planner-tab:hover { transform: none; }
:root:root:root body .planner-tab.active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }

/* the bill split's "how do you want to start?" choices: windows onto space */
:root:root:root body .bl-choose { border-width: 1px; border-color: var(--line-strong); box-shadow: none; }
:root:root:root body .bl-choose .eyebrow { background: transparent; border: 1px solid var(--accent-line); color: var(--accent); }
:root:root:root body .bl-grid button.bl-choice { border: 1px solid var(--line-strong); box-shadow: none; transition: border-color 220ms var(--sp-ease); }
:root:root:root body .bl-grid button.bl-choice:hover { transform: none; box-shadow: none; background: var(--surface); border-color: var(--accent); }
:root:root:root body .bl-grid button.bl-choice:active { transform: scale(.98); box-shadow: none; }
:root:root:root body .bl-choice-art, :root:root:root body .bl-choice:nth-child(2) .bl-choice-art {
  border: 1px solid color-mix(in srgb, var(--sp-cream) 12%, transparent);
  background: radial-gradient(120% 70% at 50% 135%, rgba(255, 75, 43, .45), transparent 55%), var(--sp-stars-dark, none), var(--sp-black);
}
:root:root:root body .bl-choice i { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
:root:root:root body .bl-choice:hover i { background: var(--accent); color: #fff; }

/* ---------- 9. INNER-PAGE HEAD (.app-head) ---------- */
:root:root:root body .app-head { border-bottom: 1px solid var(--line-strong); position: relative; }
:root:root:root body .app-head .app-pill {
  background: transparent !important; color: var(--accent) !important; border: 1px solid var(--accent-line) !important;
  font-size: 11.5px !important; padding: 5px 12px 5px 6px;
}
:root:root:root body .app-head h1 { font-size: clamp(30px, 4.6vw, 60px) !important; }
:root:root:root body .app-head h1 { text-transform: uppercase; letter-spacing: .03em !important; }
:root:root:root body .app-head h1 .acc { color: var(--accent); -webkit-text-stroke: 0; }
:root:root:root body .app-head p { font-weight: 500; }

/* ---------- 10. SEO CONTENT BLOCK ---------- */
:root:root:root body .seo-faq details, :root:root:root body .seo-howto { background: transparent; border: 1px solid var(--line-strong) !important; border-radius: 16px; box-shadow: none !important; }
:root:root:root body .seo-links a { background: transparent; border: 1px solid var(--line-strong); box-shadow: none; border-radius: 999px; }
:root:root:root body .seo-links a:hover { border-color: var(--accent); color: var(--accent); }

/* =====================================================================
   11. HOMEPAGE + APP LANDINGS (home.css): the hero is a planet horizon
   ===================================================================== */
:root:root:root body .hm, :root:root:root body footer.hm-foot {
  --hm-dark: var(--surface); --hm-dark-2: var(--surface-soft);
  --hm-on-dark: var(--text); --hm-on-dark-muted: var(--muted);
  --hm-pixel: var(--sp-display);
}
.hm-eyebrow { color: var(--accent) !important; display: inline-flex !important; align-items: center; gap: 12px; }
.hm-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
:root:root:root .hm .hm-h2 { text-transform: uppercase; line-height: 1.06; }
:root:root:root[lang="th"] .hm .hm-h2 { line-height: 1.3; }

/* pill: a thin outline with an orange ring arrow */
:root:root:root .hm-pill {
  border: 1px solid var(--line-strong); background: transparent; box-shadow: none;
  font-family: var(--sp-display); font-weight: 600; letter-spacing: .14em; padding: 6px 6px 6px 20px;
  transition: border-color 200ms var(--sp-ease), background 200ms var(--sp-ease);
}
:root:root:root[lang="th"] .hm-pill { letter-spacing: .02em; }
:root:root:root .hm-pill i { background: transparent; color: var(--accent); border: 1px solid var(--accent); transition: transform 300ms var(--sp-ease), background 200ms var(--sp-ease), color 200ms var(--sp-ease); }
:root:root:root .hm-pill:hover { border-color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); }
:root:root:root .hm-pill:hover i { background: var(--accent); color: #fff; }
:root:root:root .hm-pill:active { transform: scale(.98); }

@media (min-width: 701px) {
  /* hero: wordmark, line, buttons, centred over a planet's rim */
  :root:root:root .hm .hm-hero {
    --pw: max(1180px, 118vw);                                /* planet width */
    --pt: calc(100% - clamp(120px, 15vw, 210px));            /* where its rim crosses the hero */
    position: relative; isolation: isolate; overflow: hidden;
    min-height: min(calc(100svh - 76px), 940px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: clamp(36px, 6vh, 80px) 0 clamp(170px, 21vw, 290px) !important; text-align: center;
  }
  :root:root:root .hm .hm-hero::before {                   /* the planet */
    content: ""; position: absolute; z-index: -1; left: 50%; top: var(--pt); width: var(--pw); aspect-ratio: 1;
    transform: translateX(-50%); border-radius: 50%; pointer-events: none;
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 120, 60, .26), transparent 14%),
      radial-gradient(circle at 50% 2%, #2a150c 0, #120b08 20%, var(--sp-black) 42%);
    box-shadow:
      0 -1px 0 rgba(255, 196, 140, .9),
      0 -10px 34px -4px rgba(255, 75, 43, .6),
      0 -50px 130px -24px rgba(255, 75, 43, .42),
      inset 0 22px 40px -22px rgba(255, 150, 90, .7);
  }
  :root:root:root .hm .hm-hero::after {                    /* two orbits round it */
    content: ""; position: absolute; z-index: -2; inset: auto; left: 50%; top: calc(var(--pt) - 170px);
    width: calc(var(--pw) + 340px); height: auto; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
    outline: 1px solid color-mix(in srgb, var(--text) 5%, transparent); outline-offset: 150px;
    background: none;   /* the landings' app-colour wash used this pseudo */
  }
  :root:root:root .hm .hm-word {
    position: relative; z-index: 1;
    font-size: clamp(60px, 12.4vw, 214px) !important; line-height: .9; letter-spacing: .06em !important;
    color: var(--text); margin: 0; padding-left: .06em;   /* the tracking trails the last letter */
    text-shadow: 0 0 .32em color-mix(in srgb, var(--accent) 38%, transparent), 0 0 .05em color-mix(in srgb, var(--accent) 50%, transparent);
  }
  :root:root:root .hm[data-app] .hm-word, :root:root:root [data-app] .hm .hm-word { font-size: clamp(48px, 9.4vw, 170px) !important; }
  :root:root:root .hm .hm-word .z { color: var(--accent); -webkit-text-stroke: 0; text-shadow: 0 0 .3em rgba(255, 75, 43, .55); }
  :root:root:root .hm .hm-stage { display: block; position: static; width: min(760px, 100% - 40px); margin: clamp(16px, 2.4vw, 30px) auto 0; }
  :root:root:root .hm .hm-side.l { position: static; }
  :root:root:root .hm .hm-side.r, :root:root:root .hm .hm-badge { display: none; }
  :root:root:root .hm .hm-side.l { display: grid; justify-items: center; gap: 26px; padding: 0; }
  :root:root:root .hm .hm-side.l > p { max-width: 52ch; margin: 0 auto; font-size: 16px; font-weight: 500; color: var(--muted); text-align: center; }
  :root:root:root .hm .hm-side.l > div { justify-content: center; }
  :root:root:root .hm-home .hm-intro { justify-items: center; gap: 18px; }
  :root:root:root .hm-home .hm-h1 {
    max-width: 30ch; font-size: clamp(17px, 1.7vw, 23px) !important; font-weight: 500 !important; line-height: 1.45;
    color: var(--text); text-transform: none;
  }
  :root:root:root[lang="en"] .hm-home .hm-h1 { text-transform: uppercase; letter-spacing: .34em !important; font-size: clamp(13px, 1.15vw, 16px) !important; max-width: 46ch; }
  :root:root:root .hm-home .hm-h1-brand { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  :root:root:root .hm-home .hm-intro > p { max-width: 50ch; font-size: 15.5px; font-weight: 500; line-height: 1.65; color: var(--muted); }
  /* the CTA: a glassy outline pill, like the reference's "See events ↗" */
  :root:root:root .hm-home .hm-hero-go {
    display: inline-flex; align-items: center; gap: 14px; margin-top: 8px; padding: 12px 14px 12px 26px;
    border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; color: var(--text);
    background: color-mix(in srgb, var(--text) 4%, transparent);
    font: 600 15px/1 var(--sp-display); letter-spacing: .06em;
    transition: border-color 200ms var(--sp-ease), background 200ms var(--sp-ease);
  }
  :root:root:root .hm-home .hm-hero-go i { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); transition: transform 300ms var(--sp-ease); }
  :root:root:root .hm-home .hm-hero-go:hover { border-color: var(--text); }
  :root:root:root .hm-home .hm-hero-go:hover i { transform: translateY(3px); }
  /* Mali floats in orbit beside the wordmark, like the reference's astronaut */
  :root:root:root .hm-home .hm-hero-mali {
    display: block; position: absolute; z-index: 2; width: clamp(110px, 11vw, 170px); height: auto;
    right: clamp(20px, 10vw, 210px); top: 13%;
    filter: drop-shadow(0 0 22px rgba(255, 120, 60, .28));
    animation: spFloat 6s ease-in-out infinite;
  }
  @keyframes spFloat { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(3deg); } }

  /* the logo band: hairlines, no paper */
  :root:root:root .hm .hm-band { background: transparent; border-color: var(--line); }
  :root:root:root .hm .hm-band .hm-marquee::before { background: linear-gradient(90deg, var(--bg), transparent); }
  :root:root:root .hm .hm-band .hm-marquee::after { background: linear-gradient(270deg, var(--bg), transparent); }
  :root:root:root .hm .hm-logo { font-family: var(--sp-display); font-weight: 600; letter-spacing: .04em; }
}

/* tools / worlds: no band; each card's art is a small window onto space */
:root:root:root .hm .hm-worlds { background: transparent !important; color: var(--text); }
:root:root:root .hm .hm-worlds .hm-h2 { color: var(--text); }
:root:root:root .hm .hm-tools-sub { color: var(--muted); }
:root:root:root .hm .hm-chips button { border: 1px solid var(--line-strong); color: var(--muted); font-family: var(--sp-display); font-weight: 600; letter-spacing: .04em; }
:root:root:root .hm .hm-chips button:hover { color: var(--text); border-color: var(--text); }
:root:root:root .hm .hm-chips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
:root:root:root .hm .hm-card { color: var(--text); }
:root:root:root .hm .hm-card-art {
  clip-path: none; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--sp-cream) 12%, transparent);
  background: var(--sp-stars-dark, none), radial-gradient(120% 90% at 50% 120%, #2a150c, var(--sp-black) 62%);
  background-color: var(--sp-black);
  transition: border-color 260ms var(--sp-ease);
}
:root:root:root .hm .hm-card-art::after { display: none; }
:root:root:root .hm .hm-card-art .glow { inset: auto -20% -70% -20%; height: 90%; border-radius: 50%; background: radial-gradient(circle at 50% 0%, rgba(255, 75, 43, .38), transparent 60%) !important; }
:root:root:root .hm .hm-card-art .num { font-family: var(--sp-display); font-weight: 600; font-size: 13px; letter-spacing: .2em; color: var(--accent); left: 16px; top: 14px; }
:root:root:root .hm .hm-card:hover .hm-card-art { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
:root:root:root .hm .hm-card-meta b, :root:root:root .hm .hm-tool h3 { color: var(--text); }
:root:root:root .hm .hm-card-meta small, :root:root:root .hm .hm-tool p { color: var(--muted); }
:root:root:root .hm .hm-tool h3 { font-family: var(--sp-display); font-weight: 600; letter-spacing: .01em; }

/* about: a round porthole with Mali inside, and an orbit ring */
:root:root:root .hm .hm-about-img {
  aspect-ratio: 1; width: min(100%, 460px); justify-self: center; border-radius: 50%; overflow: visible;
  border: 1px solid color-mix(in srgb, var(--sp-cream) 14%, transparent) !important;
  background: var(--sp-stars-dark, none), radial-gradient(circle at 50% 115%, #3a1a0c, #140c08 42%, var(--sp-black) 66%) !important;
  background-color: var(--sp-black) !important;
  outline: 1px solid var(--line); outline-offset: 22px;
}
:root:root:root .hm .hm-about-img img:not(.hm-tag img) { width: 66%; }
:root:root:root .hm .hm-about-img .hm-tag { left: 50%; bottom: -16px; transform: translateX(-50%); white-space: nowrap; background: var(--bg); color: var(--text); border: 1px solid var(--line-strong); font-family: var(--sp-display); font-weight: 600; }
:root:root:root .hm .mb-steps b { background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 50%; box-shadow: none; font-family: var(--sp-display); font-weight: 600; }
:root:root:root .hm .mb-chat p { border-width: 1px; border-color: var(--line); }
:root:root:root .hm .mb-chat .bot { background: var(--surface-soft); }

/* FAQ: hairline cards; the open one is ringed in orange */
:root:root:root .hm .hm-q { background: transparent !important; color: var(--text); outline: 1px solid var(--line-strong) !important; outline-offset: -1px; }
:root:root:root .hm .hm-q + .hm-q::before { display: none; }
:root:root:root .hm .hm-q.on { outline-color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 5%, transparent) !important; }
:root:root:root .hm .hm-q h3 { font-family: var(--sp-display); font-weight: 600; }
:root:root:root .hm .hm-q p { color: var(--muted); }
:root:root:root .hm .hm-q .go { background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 50%; }
:root:root:root .hm .hm-q.on .go { background: var(--accent); color: #fff; }
/* round arrow buttons, like the reference's slider arrows */
:root:root:root .hm .hm-arrows button, :root:root:root .hm .hm-arrows button:last-child {
  width: 52px; height: 52px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font-weight: 400;
  transition: border-color 200ms var(--sp-ease), background 200ms var(--sp-ease);
}
:root:root:root .hm .hm-arrows button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
:root:root:root .hm .hm-row span, :root:root:root .hm .hm-strip, :root:root:root .hm .hm-row { border-color: var(--line-strong); }

/* ---------- Today card ---------- */
:root:root:root body .tc-big { background: transparent !important; border-radius: 22px; }
:root:root:root body .tc-big .tc-head h2 { text-transform: uppercase; letter-spacing: .04em !important; }
:root:root:root body .tc-big .tc-head small { font-family: var(--sp-display); font-weight: 500; letter-spacing: .06em; }
:root:root:root body .tc-big .tc-chip { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 16px; }
:root:root:root body .tc-big .tc-chip:hover { border-color: var(--line-strong) !important; transform: none; }
:root:root:root body .tc-big .tc-chip.empty { background: transparent !important; border-style: dashed !important; }
:root:root:root body .tc-big .tc-num { font-family: var(--sp-display); }
:root:root:root body .tc-mine { border-top: 1px solid var(--line); }
:root:root:root body .tc-mine .mali-today-chip { background: transparent; border: 1px solid var(--line) !important; }

/* =====================================================================
   12. PHONES (≤700px): the app home in the same sky
   ===================================================================== */
@media (max-width: 700px) {
  /* the hero card is always a little window onto space, in both themes */
  :root:root:root body :is(.ap-hero, .hm-home .hm-side.l, .landing .intro-top, .hero:has(> .wordmark)) {
    background:
      radial-gradient(circle at 92% 132%, transparent 39%, rgba(255, 196, 140, .9) 39.4%, rgba(255, 75, 43, .55) 41%, transparent 50%),
      radial-gradient(circle at 92% 132%, #2a150c 0, #120b08 30%, transparent 39.5%),
      radial-gradient(90% 70% at 100% 100%, rgba(255, 75, 43, .35), transparent 62%),
      var(--sp-stars-dark, none),
      var(--sp-black) !important;
    color: var(--sp-cream) !important;
    border: 1px solid rgba(255, 243, 228, .12) !important;
    box-shadow: 0 24px 40px -26px rgba(255, 75, 43, .55) !important;
    border-radius: 24px !important;
  }
  :root:root:root body :is(.ap-hero, .hm-home .hm-side.l, .landing .intro-top, .hero:has(> .wordmark))::before,
  :root:root:root body .ap-hero::after { display: none !important; }
  :root:root:root body .ap-hero-t small, :root:root:root body .hm-home .hm-h1-brand {
    font-family: var(--sp-display); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--accent) !important; opacity: 1;
  }
  :root:root:root body .ap-hero-t b, :root:root:root body .hm-home .hm-h1 {
    font-family: var(--sp-display) !important; font-weight: 600 !important; color: var(--sp-cream) !important; letter-spacing: .01em !important;
  }
  :root:root:root body .ap-hero-p, :root:root:root body .hm-home .hm-side.l p { color: rgba(255, 243, 228, .72) !important; opacity: 1; }
  :root:root:root body :is(.ap-hero-btn, .hm-home .hm-hero-go) {
    background: rgba(255, 243, 228, .06) !important; color: var(--sp-cream) !important;
    border: 1px solid rgba(255, 243, 228, .28); box-shadow: none !important;
    font-family: var(--sp-display); font-weight: 600; letter-spacing: .04em;
  }
  :root:root:root body :is(.ap-hero-btn, .hm-home .hm-hero-go) i { background: transparent !important; color: var(--accent) !important; border: 1px solid var(--accent); }
  :root:root:root body :is(.ap-hero img, .hm-home .hm-hero-mali) { filter: drop-shadow(0 0 16px rgba(255, 120, 60, .3)); }

  /* section heads */
  :root:root:root body .ap-head h2, :root:root:root body .hm-home .hm-tools .hm-h2 { font-size: 17px !important; text-transform: uppercase; letter-spacing: .08em !important; }
  :root:root:root[lang="th"] body .ap-head h2, :root:root:root[lang="th"] body .hm-home .hm-tools .hm-h2 { letter-spacing: .02em !important; }
  :root:root:root body .ap-head > a { color: var(--accent) !important; text-decoration: none; font-family: var(--sp-display); font-weight: 600; }

  /* boxes: hairline, flat */
  :root:root:root body :is(.ap-card, .ap-join, .ap-list a, .ap-meet, .hm-today-card, .hm-home .hm-tool) {
    background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: none !important; border-radius: 20px;
  }
  :root:root:root body :is(.ap-card, .ap-list a, .ap-meet, .hm-home .hm-tool):active { transform: scale(.98); box-shadow: none !important; }
  :root:root:root body :is(.ap-card-art, .ap-li-ic, .ap-join-ic, .ap-quick span) { background: var(--surface-soft) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
  :root:root:root body .ap-card::after, :root:root:root body :is(.ap-list i, .ap-meet i) {
    background: transparent !important; color: var(--text) !important; border: 1px solid var(--line-strong) !important; border-radius: 50%;
  }
  :root:root:root body .ap-btn.ghost { background: transparent !important; }
  :root:root:root body .hm-home .hm-tool .hm-card-art {
    border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
    background: radial-gradient(120% 90% at 50% 130%, #2a150c, var(--sp-black) 62%), var(--sp-black) !important;
  }
  :root:root:root body .hm-home .hm-tool .hm-card-art .glow { display: block !important; }
:root:root:root body .tc-big { padding: 16px 12px 12px; }
  /* About Mali's hero card */
  :root:root:root body .hero:has(> .wordmark) :is(.wordmark, .tagline) { color: var(--sp-cream); }
  :root:root:root body .hero:has(> .wordmark) .wordmark .th { color: var(--accent); }
  :root:root:root body .hero:has(> .wordmark) :is(.pron, .essence, .eyebrow) { color: rgba(255, 243, 228, .7) !important; }
  :root:root:root body .hero:has(> .wordmark) .badge { background: rgba(255, 243, 228, .06); color: var(--sp-cream); border: 1px solid rgba(255, 243, 228, .22) !important; }
  /* MERPY's logged-out landing card */
  :root:root:root body .landing .intro-top .hero-title { color: var(--sp-cream); }
  :root:root:root body .landing .intro-top .hero-title span { color: var(--accent); }
  :root:root:root body .landing .intro-top .tagline { color: rgba(255, 243, 228, .72); }
  :root:root:root body .landing .intro-top .jump { background: rgba(255, 243, 228, .06) !important; color: var(--sp-cream) !important; border: 1px solid rgba(255, 243, 228, .28) !important; box-shadow: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  :root:root:root .hm-home .hm-hero-mali { animation: none; }
}

/* =====================================================================
   13. ALL TOOLS, compact (2026-10-18): one slim row per tool, its own
       sticker (images/tool-icons/<id>.svg) in a small space window, the
       task and one line of description. Four across on a wide screen.
   ===================================================================== */
@media (min-width: 701px) {
  :root:root:root body .hm-home > .hm-tools { padding-block: clamp(44px, 5vw, 72px) !important; }
  :root:root:root body .hm-home .hm-tools .hm-h2 { font-size: clamp(26px, 2.8vw, 38px) !important; }
  :root:root:root body .hm-home .hm-tools-sub { margin: 10px auto 26px !important; font-size: 14px; }
}
:root:root:root body .hm-home .hm-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)) !important; gap: 10px !important;
  max-width: 1180px; margin-inline: auto;
}
:root:root:root body .hm-home .hm-tool {
  display: grid !important; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px;
  padding: 10px 14px 10px 10px !important; border: 1px solid var(--line) !important; border-radius: 16px !important;
  background: color-mix(in srgb, var(--surface) 72%, transparent) !important; box-shadow: none !important; overflow: visible;
  transition: border-color 200ms var(--sp-ease), transform 200ms var(--sp-ease);
}
:root:root:root body .hm-home .hm-tool:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important; transform: translateY(-2px); }
:root:root:root body .hm-home .hm-tool .hm-card-art {
  width: 56px; aspect-ratio: 1; border-radius: 14px !important; clip-path: none;
  border: 1px solid color-mix(in srgb, var(--sp-cream) 12%, transparent) !important;
  background: radial-gradient(120% 90% at 50% 135%, #3a1c0e, var(--sp-black) 66%) !important;
}
:root:root:root body .hm-home .hm-tool .hm-card-art :is(.num, .glow), :root:root:root body .hm-home .hm-tool .hm-card-art::after { display: none !important; }
:root:root:root body .hm-home .hm-tool .hm-card-art img {
  width: 66% !important; height: auto !important; max-height: none !important;
  filter: drop-shadow(0 0 .6px rgba(255, 240, 225, .9)) !important;
}
:root:root:root body .hm-home .hm-tool:hover .hm-card-art img { transform: translateY(-2px) scale(1.08); }
:root:root:root body .hm-home .hm-tool .hm-card-meta { padding: 0 !important; gap: 2px; text-align: left; }
:root:root:root body .hm-home .hm-tool-name { font-size: 10px !important; }
:root:root:root body .hm-home .hm-tool h3 { font-size: 15.5px !important; line-height: 1.3; margin: 0; }
:root:root:root body .hm-home .hm-tool p {
  font-size: 12.5px !important; line-height: 1.45; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
/* light theme: a soft tile instead of the black window */
:root:root:root:not([data-theme="dark"]) body .hm-home .hm-tool .hm-card-art {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)) !important; border-color: var(--line) !important;
}
:root:root:root:not([data-theme="dark"]) body .hm-home .hm-tool .hm-card-art img { filter: none !important; }
@media (max-width: 700px) {
  :root:root:root body .hm-home .hm-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  :root:root:root body .hm-home .hm-tool { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 8px 12px 8px 8px !important; }
  :root:root:root body .hm-home .hm-tool .hm-card-art { width: 48px; border-radius: 12px !important; }
}

/* =====================================================================
   13b. APP LANDING TOOLS, the same compact rows (2026-10-18): the
        MaliBills #tools and MaliTrip #features grids (a.hm-card with
        <b>/<small>), and on phones their .ap-cards. Chips and View all
        stay (home.js 2b), so [hidden] must still win over display:grid.
   ===================================================================== */
@media (min-width: 701px) {
  :root:root:root body .hm[data-app] > .hm-worlds { padding-block: clamp(44px, 5vw, 72px) !important; }
  :root:root:root body .hm[data-app] .hm-worlds .hm-h2 { font-size: clamp(26px, 2.8vw, 38px) !important; }
  :root:root:root body .hm[data-app] .hm-worlds .hm-chips { margin-bottom: 22px; }
  :root:root:root body .hm[data-app] .hm-worlds .hm-viewall { margin-top: 26px; }
}
:root:root:root body .hm[data-app] .hm-worlds .hm-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)) !important; gap: 10px !important;
  max-width: 1180px; margin-inline: auto;
}
:root:root:root body :is(.hm[data-app] .hm-worlds .hm-card, .hm[data-app] .ap-card) {
  display: grid !important; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px;
  padding: 10px 14px 10px 10px !important; border: 1px solid var(--line) !important; border-radius: 16px !important;
  background: color-mix(in srgb, var(--surface) 72%, transparent) !important; box-shadow: none !important; overflow: visible;
  transition: border-color 200ms var(--sp-ease), transform 200ms var(--sp-ease);
}
:root:root:root body .hm[data-app] .hm-worlds .hm-card[hidden] { display: none !important; }
:root:root:root body .hm[data-app] .hm-worlds .hm-card:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important; transform: translateY(-2px); }
:root:root:root body :is(.hm[data-app] .hm-worlds .hm-card, .hm[data-app] .ap-card) :is(.hm-card-art, .ap-card-art) {
  width: 56px; height: auto; aspect-ratio: 1; display: grid; place-items: center; border-radius: 14px !important; clip-path: none;
  border: 1px solid color-mix(in srgb, var(--sp-cream) 12%, transparent) !important;
  background: radial-gradient(120% 90% at 50% 135%, #3a1c0e, var(--sp-black) 66%) !important;
}
:root:root:root body :is(.hm[data-app] .hm-worlds .hm-card, .hm[data-app] .ap-card) :is(.num, .glow),
:root:root:root body .hm[data-app] .hm-worlds .hm-card-art::after { display: none !important; }
:root:root:root body :is(.hm[data-app] .hm-worlds .hm-card, .hm[data-app] .ap-card) :is(.hm-card-art, .ap-card-art) img {
  width: 66% !important; height: auto !important; max-height: none !important;
  filter: drop-shadow(0 0 .6px rgba(255, 240, 225, .9)) !important;
}
:root:root:root body .hm[data-app] .hm-worlds .hm-card:hover .hm-card-art img { transform: translateY(-2px) scale(1.08); }
:root:root:root body :is(.hm[data-app] .hm-worlds .hm-card-meta, .hm[data-app] .ap-card-meta) {
  display: grid !important; gap: 2px; padding: 0 !important; text-align: left; min-width: 0;
}
:root:root:root body :is(.hm[data-app] .hm-worlds .hm-card-meta, .hm[data-app] .ap-card-meta) b {
  font-family: var(--sp-display); font-weight: 600; font-size: 15.5px !important; line-height: 1.3;
  letter-spacing: .01em !important; text-transform: none !important;
}
:root:root:root body :is(.hm[data-app] .hm-worlds .hm-card-meta, .hm[data-app] .ap-card-meta) small {
  font-size: 12.5px !important; line-height: 1.45; text-align: left !important;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
/* light theme: a soft tile instead of the black window */
:root:root:root:not([data-theme="dark"]) body :is(.hm[data-app] .hm-worlds .hm-card, .hm[data-app] .ap-card) :is(.hm-card-art, .ap-card-art) {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)) !important; border-color: var(--line) !important;
}
:root:root:root:not([data-theme="dark"]) body :is(.hm[data-app] .hm-worlds .hm-card, .hm[data-app] .ap-card) :is(.hm-card-art, .ap-card-art) img { filter: none !important; }
@media (max-width: 700px) {
  :root:root:root body :is(.hm[data-app] .hm-worlds .hm-grid, .hm[data-app] .ap-cards) { grid-template-columns: 1fr !important; gap: 8px !important; }
  :root:root:root body :is(.hm[data-app] .hm-worlds .hm-card, .hm[data-app] .ap-card) {
    grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 8px 40px 8px 8px !important; position: relative;
  }
  :root:root:root body :is(.hm[data-app] .hm-worlds .hm-card, .hm[data-app] .ap-card) :is(.hm-card-art, .ap-card-art) { width: 48px; border-radius: 12px !important; }
  /* the → chip sits at the row's middle, not its top corner */
  :root:root:root body .hm[data-app] .ap-card::after { top: 50% !important; transform: translateY(-50%); }
}

/* =====================================================================
   14. HERO ANIMATIONS (2026-10-18), built by /hero-fx.js: a layer behind
       the hero of the homepage (space), MaliBills (money) and MaliTrip
       (travel). Only transform/opacity move; .hx-off pauses it off screen.
   ===================================================================== */
:root:root:root body .hx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
:root:root:root body .hx.hx-off * { animation-play-state: paused !important; }
:root:root:root body .hx img {
  position: absolute; left: 0; top: 0; margin: 0; z-index: auto; flex: none; max-width: none; height: auto !important;
  translate: -50% -50%; filter: drop-shadow(0 0 .6px rgba(255, 240, 225, .9)) !important; will-change: transform;
}
@media (min-width: 701px) { :root:root:root body .hx-ph { display: none; } }
@media (max-width: 700px) {
  :root:root:root body .hm-hero > .hx:not(.hx-ph) { display: none; }
  :root:root:root body :is(.ap-hero, .hm-home .hm-side.l) { position: relative; overflow: hidden; isolation: isolate; }
}

/* ---- home: shooting stars + the tools in orbit ---- */
:root:root:root body .hx-shoot {
  position: absolute; width: 130px; height: 2px; border-radius: 2px; opacity: 0; color: var(--accent);
  background: linear-gradient(90deg, currentColor, transparent); transform-origin: 0 50%;
  animation: hxShoot var(--du, 10s) linear var(--dl, 0s) infinite; will-change: transform, opacity;
}
:root:root:root[data-theme="dark"] body .hx-shoot { color: var(--sp-cream); }
@keyframes hxShoot {
  0% { opacity: 0; transform: rotate(-28deg) translateX(0); }
  1.5% { opacity: 1; }
  9% { opacity: 0; transform: rotate(-28deg) translateX(-460px); }
  100% { opacity: 0; transform: rotate(-28deg) translateX(-460px); }
}
:root:root:root body .hx-ph .hx-shoot { width: 70px; }
:root:root:root body .hx-orbit {
  position: absolute; left: 50%; top: calc(var(--pt) + var(--pw) / 2); width: 0; height: 0;
  --r: calc(var(--pw) / 2 + 170px);
  animation: hxSpin 150s linear infinite;
}
:root:root:root body .hx-arm { position: absolute; left: 0; top: 0; transform: rotate(var(--a)); }
:root:root:root body .hx .hx-sat { width: 46px; animation: hxSat 150s linear infinite; }
@keyframes hxSpin { to { transform: rotate(360deg); } }
@keyframes hxSat {
  from { transform: translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); }
  to { transform: translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a) - 360deg)); }
}
:root:root:root body .hx .hx-spark { animation: hxTwinkle 2.8s ease-in-out var(--dl, 0s) infinite; }

/* ---- bills: coins and notes rise off the planet, ฿ twinkles ---- */
:root:root:root body .hx-rise {
  position: absolute; width: 0; height: 0; opacity: 0;
  animation: hxRise var(--du, 10s) linear var(--dl, 0s) infinite; will-change: transform, opacity;
}
@keyframes hxRise {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 1; }
  70% { opacity: .9; }
  100% { opacity: 0; transform: translateY(calc(-1 * var(--h, 300px))); }
}
:root:root:root body .hx .hx-coin { animation: hxFlip 1.9s ease-in-out infinite; }
@keyframes hxFlip { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.18); } }
:root:root:root body .hx .hx-note { animation: hxSway 3.2s ease-in-out infinite alternate; }
@keyframes hxSway { from { transform: rotate(-14deg) translateX(-8px); } to { transform: rotate(12deg) translateX(8px); } }
:root:root:root body .hx-baht {
  position: absolute; translate: -50% -50%; font: 700 1em/1 var(--sp-display); color: var(--accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: hxTwinkle 3.4s ease-in-out var(--dl, 0s) infinite;
}
@keyframes hxTwinkle { 0%, 100% { opacity: .12; transform: scale(.8); } 50% { opacity: .8; transform: scale(1.06); } }

/* ---- trip: a plane on an arc, drifting clouds, flags popping on the rim ---- */
:root:root:root body .hx-fly { position: absolute; left: 0; top: 60%; width: 100%; height: 0; animation: hxFlyX 18s linear -4s infinite; }
:root:root:root body .hx-fly-y { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: hxFlyY 18s linear -4s infinite; }
:root:root:root body .hx .hx-plane { width: 56px; transform: rotate(48deg); }
:root:root:root body .hx-trail {
  position: absolute; left: -238px; top: -1px; width: 210px; height: 0;
  border-top: 2px dashed color-mix(in srgb, var(--text) 45%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000);
}
@keyframes hxFlyX { 0% { transform: translateX(-8%); } 72%, 100% { transform: translateX(110%); } }
@keyframes hxFlyY {
  0% { transform: translateY(0) rotate(-16deg); animation-timing-function: cubic-bezier(.25, .6, .45, 1); }
  36% { transform: translateY(-34vh) rotate(0deg); animation-timing-function: cubic-bezier(.55, 0, .75, .4); }
  72%, 100% { transform: translateY(0) rotate(16deg); }
}
:root:root:root body .hx-ph .hx-fly { top: 78%; animation-duration: 11s; }
:root:root:root body .hx-ph .hx-fly-y { animation-name: hxFlyYs; animation-duration: 11s; }
:root:root:root body .hx-ph .hx-plane { width: 30px; }
:root:root:root body .hx-ph .hx-trail { left: -118px; width: 100px; }
@keyframes hxFlyYs {
  0% { transform: translateY(0) rotate(-16deg); animation-timing-function: cubic-bezier(.25, .6, .45, 1); }
  36% { transform: translateY(-100px) rotate(0deg); animation-timing-function: cubic-bezier(.55, 0, .75, .4); }
  72%, 100% { transform: translateY(0) rotate(16deg); }
}
:root:root:root body .hx .hx-cloud {
  translate: 0 0; opacity: var(--o, .7);
  animation: hxDrift var(--du, 100s) linear var(--dl, 0s) infinite;
}
@keyframes hxDrift { from { transform: translateX(-160px); } to { transform: translateX(calc(100vw + 40px)); } }
:root:root:root body .hx-pin { position: absolute; width: 0; height: 0; }
:root:root:root body .hx-pin img {
  width: 34px; translate: -30% -100%; transform-origin: 30% 100%; opacity: 0;
  animation: hxPop 6.6s cubic-bezier(.34, 1.5, .5, 1) var(--dl, 0s) infinite;
}
:root:root:root body .hx-pin::after {
  content: ""; position: absolute; left: -16px; top: -6px; width: 32px; height: 12px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; animation: hxPing 6.6s ease-out var(--dl, 0s) infinite;
}
@keyframes hxPop { 0% { opacity: 0; transform: scale(0); } 8% { opacity: 1; transform: scale(1); } 70% { opacity: 1; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes hxPing { 0%, 4% { opacity: 0; transform: scale(.2); } 8% { opacity: .9; } 30%, 100% { opacity: 0; transform: scale(2); } }

/* ---- trip: a rocket lifting off the rim (2026-10-18, v184) ---- */
:root:root:root body .hx-launch { position: absolute; width: 0; height: 0; }
:root:root:root body .hx-rkt {
  position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0;
  animation: hxLaunch var(--du, 13s) linear var(--dl, 0s) infinite; will-change: transform, opacity;
}
:root:root:root body .hx .hx-rocket { width: 48px; translate: -50% -100%; }
:root:root:root body .hx-flame {
  position: absolute; left: -7px; top: -6px; width: 14px; height: 30px; transform-origin: 50% 0;
  border-radius: 50% 50% 50% 50% / 28% 28% 72% 72%;
  background: radial-gradient(ellipse at 50% 18%, #fff3c4 0, #ffb02e 38%, #ff4b2b 70%, transparent 72%);
  filter: drop-shadow(0 0 8px rgba(255, 120, 40, .85));
  animation: hxFlame .14s ease-in-out infinite alternate;
}
:root:root:root body .hx-flame::after {                    /* the exhaust streak below it */
  content: ""; position: absolute; left: 50%; top: 22px; width: 4px; height: 130px; translate: -50% 0; border-radius: 4px;
  background: linear-gradient(color-mix(in srgb, var(--accent) 70%, transparent), transparent);
}
@keyframes hxFlame { from { transform: scaleY(.75) scaleX(.9); } to { transform: scaleY(1.15) scaleX(1.05); } }
@keyframes hxLaunch {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  5% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  9% { transform: translate(-1px, 0) rotate(0deg); }
  13% { transform: translate(1px, 0) rotate(0deg); }
  17% { transform: translate(0, -4px) rotate(0deg); animation-timing-function: cubic-bezier(.55, 0, .9, .55); }
  56% { opacity: 1; }
  62% { opacity: 0; transform: translate(var(--dx, 60px), calc(-1 * var(--h, 480px))) rotate(var(--rt, 8deg)); }
  100% { opacity: 0; transform: translate(var(--dx, 60px), calc(-1 * var(--h, 480px))) rotate(var(--rt, 8deg)); }
}
:root:root:root body .hx-ph .hx-rocket { width: 26px; }
:root:root:root body .hx-ph .hx-flame { left: -4px; top: -4px; width: 8px; height: 17px; }
:root:root:root body .hx-ph .hx-flame::after { top: 13px; width: 3px; height: 60px; }

@media (prefers-reduced-motion: reduce) { :root:root:root body .hx { display: none; } }

/* =====================================================================
   15. LANDING FIXES (2026-10-18, v184)
   ===================================================================== */
/* MaliTrip's style.css sets overflow-x: hidden on html AND body, which
   makes body its own scroll box: the sticky header then scrolled away with
   the page instead of hiding/fading like the homepage's. clip cuts the
   sideways overflow the same way without making a scroll box. */
:root:root:root, :root:root:root body { overflow-x: clip !important; }
/* the hero's lone button (MaliTrip's Start planning) sits in the middle;
   home.css pins .hm-side > .hm-pill to the start */
@media (min-width: 701px) {
  :root:root:root .hm .hm-side.l > .hm-pill { justify-self: center; }
}