/* ============================================================
   PRISM THEME: the store's own colour, cut clean.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   A light-first storefront in the manner of a good product site:
   a cool off-white ground, white cards that sit on soft shadows,
   generous space, crisp type and one strong accent. The accent is
   the store's own: every accent here reads the kernel's brand scale
   (--theme-*, from tbl_settings.theme_color), never a fixed hue.
   Bricolage Grotesque sets the headings, Geist the text and Geist
   Mono every figure that ticks or adds up.

   The only ornament is the prism: a triangle with a line of light
   refracting through it. It is the emblem, the corner mark on a
   phone, the small dividers and the dark/light switch.

   After hours the ground goes to deep ink, cards are raised navy and
   the accent glows a step lighter.

   Steps of the brand scale, chosen so they read for any stock colour:
   by day a fill is step 700 under white letters and accent text is
   800; after hours a fill is 400 under ink letters and accent text is
   300. --theme-600 is pointed at 700 so plugin buttons drawn in it with
   white letters stay legible on light brand colours too.
   ============================================================ */

:root {
  --font-display: 'Bricolage Grotesque', 'Geist', 'Segoe UI', system-ui, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-ui:      'Geist', 'Segoe UI', system-ui, -apple-system, 'Noto Sans', sans-serif;
  --font-num:     'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --paper:        #f4f5f7;
  --paper-2:      #ffffff;
  --paper-3:      #eef0f3;
  --ink:          #11131c;
  --ink-2:        #2b2f3c;
  --ink-soft:     #5a6072;
  --rule:         #e3e5ea;
  --rule-soft:    #eceef2;
  --radius:       22px;
  --radius-md:    16px;
  --radius-sm:    12px;
  --shadow:       0 1px 2px rgba(16, 18, 28, .04), 0 8px 24px rgba(16, 18, 28, .06);
  --shadow-md:    0 2px 4px rgba(16, 18, 28, .05), 0 18px 44px rgba(16, 18, 28, .1);
  --shadow-lift:  0 2px 6px rgba(16, 18, 28, .06), 0 22px 50px rgba(16, 18, 28, .13);

  /* The brand scale, as Prism uses it */
  --theme-600:     var(--theme-700);
  --theme-600-rgb: var(--theme-700-rgb);
  --theme-600-ink: #ffffff;
  --psm-accent:       var(--theme-700);
  --psm-accent-rgb:   var(--theme-700-rgb);
  --psm-on-accent:    #ffffff;
  --psm-accent-text:  var(--theme-800);
  --psm-accent-soft:  rgba(var(--theme-700-rgb), .1);
  --psm-accent-line:  rgba(var(--theme-700-rgb), .28);
  --psm-accent-glow:  rgba(var(--theme-500-rgb), .22);
  --psm-mark:         var(--theme-600);
  /* The ink panel (the box tile, the featured plan): near-black by day */
  --psm-panel:     #11131c;
  --psm-panel-2:   #1b1e2a;
  --psm-on-panel:  #f4f5f7;
  --psm-on-panel-soft: #b9bdcb;
  --psm-panel-accent: var(--theme-300);

  /* Neutral support colours: none of them competes with the accent */
  --psm-good:      #0f7a4b; --psm-good-soft: rgba(15, 122, 75, .1);
  --psm-warn:      #8a5a00; --psm-warn-soft: rgba(176, 116, 0, .12);
  --psm-bad:       #c0362c; --psm-bad-soft: rgba(192, 54, 44, .1);
  --psm-info:      #33507a; --psm-info-soft: rgba(51, 80, 122, .1);
  --psm-live:      #e5484d;
  --psm-focus:     var(--theme-700);
  --psm-glass:     rgba(255, 255, 255, .72);
  --psm-glass-line: rgba(255, 255, 255, .6);

  --px-good: #0f7a4b;
  --px-warn: #8a5a00;
  --px-crit: #c0362c;
  --px-info: #33507a;

  --notify-accent: var(--psm-accent);
  --nav-accent:    var(--psm-accent);
  --hdr-strip-bg:  #f4f5f7;
  --hdr-strip-rule: #e3e5ea;
  --text-primary:  var(--ink);

  /* Primary press: the accent, slightly lifted; secondary: a white card */
  --btn-bg:       var(--psm-accent);
  --btn-bg-hover: var(--psm-accent);
  --btn-ink:      #ffffff;
  --btn-edge:     transparent;
  --btn-face:     linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%);
  --btn-shadow:   0 1px 2px rgba(16, 18, 28, .12), 0 6px 16px -6px rgba(var(--theme-700-rgb), .55);
  --btn-shadow-hover: 0 2px 4px rgba(16, 18, 28, .12), 0 12px 24px -8px rgba(var(--theme-700-rgb), .6);
  --btn-shadow-down:  inset 0 2px 4px rgba(0, 0, 0, .2), 0 1px 2px rgba(16, 18, 28, .1);

  --psm-card: var(--paper-2);
  --psm-hair: var(--rule);

  /* The ground: off-white with the faintest cool lift at the top */
  --page-bg:
    radial-gradient(1400px 520px at 50% -260px, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%) no-repeat,
    #f4f5f7;

  /* The prism: a triangle, and the line of light through it, as masks */
  --psm-prism: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2 22.4 21H1.6Z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 2.2 15.2 21' stroke='%23000' stroke-width='1.6' opacity='.6'/%3E%3C/svg%3E");
  --psm-prism-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 23 21.5H1Z'/%3E%3C/svg%3E");
  /* The divider: a short hairline with a little prism set in it */
  --psm-rule-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 6h13M27 6h13' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M20 1.5 25 10.5H15Z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* After hours: deep ink, raised navy, the accent a step brighter */
html.dark {
  --paper:        #0d0f17;
  --paper-2:      #161925;
  --paper-3:      #1f2331;
  --ink:          #eef0f6;
  --ink-2:        #d3d7e2;
  --ink-soft:     #a2a8ba;
  --rule:         #272b3a;
  --rule-soft:    #1f2331;
  --shadow:       0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-md:    0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 48px rgba(0, 0, 0, .45);
  --shadow-lift:  0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 56px rgba(0, 0, 0, .55);

  --theme-600:     var(--theme-700);
  --theme-600-rgb: var(--theme-700-rgb);
  --theme-600-ink: #ffffff;
  --psm-accent:       var(--theme-400);
  --psm-accent-rgb:   var(--theme-400-rgb);
  --psm-on-accent:    #0d0f17;
  --psm-accent-text:  var(--theme-300);
  --psm-accent-soft:  rgba(var(--theme-400-rgb), .16);
  --psm-accent-line:  rgba(var(--theme-400-rgb), .36);
  --psm-accent-glow:  rgba(var(--theme-400-rgb), .3);
  --psm-mark:         var(--theme-400);
  --psm-panel:     #eef0f6;
  --psm-panel-2:   #dfe2ec;
  --psm-on-panel:  #0d0f17;
  --psm-on-panel-soft: #3d4252;
  --psm-panel-accent: var(--theme-800);

  --psm-good:      #5fd6a0; --psm-good-soft: rgba(95, 214, 160, .14);
  --psm-warn:      #f2c46b; --psm-warn-soft: rgba(242, 196, 107, .14);
  --psm-bad:       #ff8f84; --psm-bad-soft: rgba(255, 143, 132, .14);
  --psm-info:      #9db8ea; --psm-info-soft: rgba(157, 184, 234, .14);
  --psm-live:      #ff6b6f;
  --psm-focus:     var(--theme-300);
  --psm-glass:     rgba(22, 25, 37, .72);
  --psm-glass-line: rgba(255, 255, 255, .08);

  --px-good: #5fd6a0;
  --px-warn: #f2c46b;
  --px-crit: #ff8f84;
  --px-info: #9db8ea;

  --hdr-strip-bg:  #0d0f17;
  --hdr-strip-rule: #1f2331;

  --btn-bg:       var(--psm-accent);
  --btn-bg-hover: var(--theme-300);
  --btn-ink:      #0d0f17;
  --btn-face:     linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
  --btn-shadow:   0 0 0 1px rgba(255, 255, 255, .06) inset, 0 8px 24px -10px rgba(var(--theme-400-rgb), .6);
  --btn-shadow-hover: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 12px 30px -8px rgba(var(--theme-400-rgb), .7);
  --btn-shadow-down:  inset 0 2px 4px rgba(0, 0, 0, .35);

  --page-bg:
    radial-gradient(1200px 520px at 50% -240px, rgba(var(--theme-400-rgb), .1), rgba(var(--theme-400-rgb), 0) 70%) no-repeat,
    #0d0f17;
}

/* Colours the theme's drawings read (includes/art.php), with the day set
   as fallback inside each drawing */
:root {
  --psm-a-paper: #ffffff; --psm-a-line: #11131c; --psm-a-soft: #eef0f3; --psm-a-mid: #c9cdd8;
  --psm-a-glass: rgba(var(--theme-500-rgb), .12); --psm-a-beam: #ffffff;
  --psm-a-a3: var(--theme-300); --psm-a-a5: var(--theme-500); --psm-a-a7: var(--theme-700);
}
html.dark {
  --psm-a-paper: #161925; --psm-a-line: #eef0f6; --psm-a-soft: #1f2331; --psm-a-mid: #3a3f52;
  --psm-a-glass: rgba(var(--theme-400-rgb), .16); --psm-a-beam: #eef0f6;
  --psm-a-a3: var(--theme-200); --psm-a-a5: var(--theme-300); --psm-a-a7: var(--theme-400);
}

/* ── Game palette ──
   The earn arena hands these to each HTML5 board: the white card and
   the off-white well by day, raised navy at night; tiles climb from the
   palest neutral through the accent's own steps to ink. */
:root {
  --game-bg:        #eef0f3;
  --game-surface:   #e3e5ea;
  --game-surface-2: #ffffff;
  --game-ink:       #11131c;
  --game-muted:     #5a6072;
  --game-accent:    var(--theme-700);
  --game-accent-ink:#ffffff;
  --game-good:      #0f7a4b;
  --game-bad:       #c0362c;
  --game-tile-1:    #ffffff;
  --game-tile-2:    #eef0f3;
  --game-tile-3:    var(--theme-100);
  --game-tile-4:    var(--theme-200);
  --game-tile-5:    var(--theme-400);
  --game-tile-6:    var(--theme-600);
  --game-tile-7:    var(--theme-800);
  --game-tile-8:    #11131c;
  --game-radius:    12px;
  --game-font:      'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  --game-font-css:  "/assets/themes/prism/assets/fonts/fonts.css";
  --game-arena-screen: #eef0f3;
  --game-arena-coins:  #8a5a00;
  --game-arena-win:    #0f7a4b;
  --game-arena-danger: #c0362c;
  --game-pattern:   none;
}
html.dark {
  --game-bg:        #161925;
  --game-surface:   #0d0f17;
  --game-surface-2: #1f2331;
  --game-ink:       #eef0f6;
  --game-muted:     #a2a8ba;
  --game-accent:    var(--theme-400);
  --game-accent-ink:#0d0f17;
  --game-good:      #5fd6a0;
  --game-bad:       #ff8f84;
  --game-tile-1:    #1f2331;
  --game-tile-2:    #272b3a;
  --game-tile-3:    var(--theme-800);
  --game-tile-4:    var(--theme-700);
  --game-tile-5:    var(--theme-500);
  --game-tile-6:    var(--theme-400);
  --game-tile-7:    var(--theme-300);
  --game-tile-8:    #eef0f6;
  --game-arena-screen: #161925;
  --game-arena-coins:  #f2c46b;
  --game-arena-win:    #5fd6a0;
  --game-arena-danger: #ff8f84;
}

/* Bricolage covers Latin and Vietnamese and Geist adds Cyrillic, so
   Russian headings are set in Geist rather than mixing faces mid-word;
   Greek takes the system sans for both. Arabic, Urdu, Bengali and
   Chinese take a system face their script reads well in, with the line
   height their marks need. */
html:is(:lang(ar), :lang(ur)) {
  --font-display: 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', Tahoma, system-ui, sans-serif;
  --font-ui: 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', Tahoma, system-ui, sans-serif;
}
html:lang(bn) {
  --font-display: 'Noto Sans Bengali', 'Vrinda', 'Nirmala UI', system-ui, sans-serif;
  --font-ui: 'Noto Sans Bengali', 'Vrinda', 'Nirmala UI', system-ui, sans-serif;
}
html:lang(zh) {
  --font-display: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', system-ui, sans-serif;
  --font-ui: 'Geist', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
}
html:lang(ru) { --font-display: 'Geist', 'Segoe UI', system-ui, 'Noto Sans', sans-serif; }
html:lang(el) {
  --font-display: 'Segoe UI', system-ui, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-ui: 'Segoe UI', system-ui, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
}
html:is(:lang(ar), :lang(ur), :lang(bn)) body { line-height: 1.65; }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) :is(.font-display, h1.display, h2.display, h3.display) { letter-spacing: 0; font-weight: 800; }

/* ── Base ── */
html body {
  font-family: var(--font-ui);
  background: var(--page-bg);
  color: var(--ink);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html .font-sans { font-family: var(--font-ui); }
html .font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
html body :is(h1, h2).font-display { letter-spacing: -0.03em; }
.display-italic { font-style: normal; font-family: var(--font-display); font-weight: 700; color: var(--psm-accent-text); }
/* Figures that tick, count or add up are set in the mono face */
html .font-display.tabular-nums, html .font-display[class*="tabular"], html .tabular-nums, html .font-mono { font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
::selection { background: rgba(var(--theme-500-rgb), .22); color: inherit; }
html.dark ::selection { background: rgba(var(--theme-400-rgb), .32); color: #ffffff; }
:focus-visible { outline-color: var(--psm-focus); }

.text-gradient-theme { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--psm-accent-text); }

.ed-eyebrow {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ed-eyebrow-tight { font-size: 9px !important; letter-spacing: 0 !important; white-space: nowrap !important; }

/* The eyebrow: a soft accent pill with a little prism before the word */
html .section-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--psm-accent-text);
  background: var(--psm-accent-soft);
  border-radius: 999px;
  margin-bottom: 1rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0; width: 12px; height: 12px;
  background: currentColor;
  -webkit-mask: var(--psm-prism) center / contain no-repeat; mask: var(--psm-prism) center / contain no-repeat;
}
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) .section-eyebrow { letter-spacing: 0; font-size: 12.5px; }

/* View all: a quiet link in the accent with its arrow; on hover or focus
   the arrow steps on and an underline draws in */
html body .btn-view-all {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px;
  padding: .55rem .2rem;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--psm-accent-text); white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 0 1.5px no-repeat;
  border: 0; border-radius: 0; box-shadow: none;
  transition: gap .25s ease, background-size .3s ease;
}
html body .btn-view-all svg { width: 14px; height: 14px; }
[dir="rtl"] body .btn-view-all { background-position: 100% calc(100% - 9px); }
html body .btn-view-all:hover, html body .btn-view-all:focus-visible { gap: .65rem; background-size: 100% 1.5px; }
html body .btn-view-all:focus-visible { outline: 2px solid var(--psm-focus); outline-offset: 3px; border-radius: 4px; }
html[dir="rtl"] body .btn-view-all svg { transform: scaleX(-1); }

.ed-rule { background-color: var(--rule); }
.ed-rule-soft { background-color: var(--rule-soft); }
.ed-grain::before { content: none; }

.ed-folio { font-family: var(--font-num); font-weight: 500; color: var(--ink-soft); }

[dir="rtl"] .psm-flip-rtl { transform: scaleX(-1); }

/* ── Header ── */
#desktopHeader .hdr-search {
  background: var(--paper-3);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
#desktopHeader .hdr-search:focus-within { background: var(--paper-2); border-color: var(--psm-accent-line); box-shadow: 0 0 0 4px var(--psm-accent-soft); }
.ed-search { background: transparent; border: none; }

/* The top strip: a quiet utility row on the ground */
.hdr-strip { background: var(--hdr-strip-bg) !important; }
.hdr-strip, .hdr-strip .ed-status { color: var(--ink-soft); }
.hdr-strip a:hover, .hdr-strip button:hover { color: var(--ink); }
html body .hdr-strip .psm-strip-dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; vertical-align: middle; }

/* The main bar's links, beside the logo */
.psm-mainnav { display: none; align-items: center; gap: .25rem; margin-inline-end: 1rem; }
@media (min-width: 1280px) { .psm-mainnav { display: flex; } }
.psm-navlink {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 40px; padding: 0 .8rem; border-radius: 10px;
  font: 500 15px/1 var(--font-ui); color: var(--ink-soft); text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
.psm-navlink:hover { color: var(--ink); background: var(--paper-3); }
.psm-navlink.active { color: var(--ink); }
.psm-navlink.active::after { content: ''; display: none; }

.ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ed-subnav-inner { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 0.6rem 2rem; }
@media (min-width: 1280px) { .ed-subnav-inner { padding-left: 2.5rem; padding-right: 2.5rem; } }
.ed-subnav-eyebrow {
  flex-shrink: 0; padding-inline-end: 1.25rem; border-inline-end: 1px solid var(--rule);
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.ed-subnav-items { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.ed-subnav-item {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .95rem; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.ed-subnav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.ed-subnav-item:hover { color: var(--ink); background: var(--paper-3); }
.ed-subnav-item.active { background: var(--ink); color: var(--paper-2); }
.ed-subnav-item:focus-visible { outline: 2px solid var(--psm-focus); outline-offset: 2px; }

/* ── Links and buttons ── */
.ed-link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: 14px; color: var(--psm-accent-text);
  background: linear-gradient(currentColor, currentColor) left 100% / 0 1.5px no-repeat;
  padding-bottom: 3px;
  transition: gap .25s ease, background-size .3s ease;
}
.ed-link-arrow:hover, .ed-link-arrow:focus-visible { gap: 0.7rem; background-size: 100% 1.5px; }
[dir="rtl"] .ed-link-arrow { background-position: right 100%; }

html .ed-btn-primary, html .ed-plan-cta, html .drawer-login {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px;
  padding: .8rem 1.5rem;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; letter-spacing: 0;
  text-decoration: none;
  color: var(--btn-ink);
  background: var(--btn-face), var(--btn-bg);
  border: 0;
  border-radius: 14px;
  box-shadow: var(--btn-shadow);
  transform: translateY(0);
  transition: background-color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2, .8, .3, 1);
}
html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover,
html .ed-btn-primary:focus-visible, html .ed-plan-cta:focus-visible {
  background-color: var(--btn-bg-hover); color: var(--btn-ink); box-shadow: var(--btn-shadow-hover); transform: translateY(-1px);
}
/* A press settles the button flat against the page */
html .ed-btn-primary:active, html .ed-plan-cta:active, html .drawer-login:active { transform: translateY(1px) scale(.99); box-shadow: var(--btn-shadow-down); }
html.dark .ed-plan-cta, html.dark .ed-plan-cta:hover, html.dark button.ed-plan-cta { color: var(--btn-ink); }
/* The featured plan sits on the ink panel; its button is the panel's
   reverse */
html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta { background: var(--psm-on-panel); color: var(--psm-panel); box-shadow: none; }
.ed-btn-primary:focus-visible, .ed-btn-secondary:focus-visible, .ed-plan-cta:focus-visible { outline: 2px solid var(--psm-focus); outline-offset: 3px; }

.ed-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px;
  padding: .75rem 1.35rem;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; letter-spacing: 0;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 18, 28, .04);
  transition: box-shadow .25s ease, transform .25s cubic-bezier(.2, .8, .3, 1), border-color .2s ease;
}
.ed-btn-secondary:hover, .ed-btn-secondary:focus-visible { transform: translateY(-1px); color: var(--ink); border-color: #cfd3dc; box-shadow: var(--shadow); }
.ed-btn-secondary:active { transform: translateY(1px); box-shadow: none; }
html.dark .ed-btn-secondary { background: var(--paper-2); border-color: var(--rule); }
html.dark .ed-btn-secondary:hover, html.dark .ed-btn-secondary:focus-visible { border-color: #3a3f52; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: var(--btn-ink); }
@media (prefers-reduced-motion: reduce) {
  html .ed-btn-primary, html .ed-btn-secondary, html .ed-plan-cta, html body .btn-view-all { transition: none; }
  html .ed-btn-primary:hover, html .ed-btn-secondary:hover, html .ed-btn-primary:active { transform: none; }
}

/* ── Cards: white on the ground, a hairline and a soft shadow. On hover
   or focus a card lifts a little and its shadow deepens. ── */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--psm-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease, border-color .3s ease;
}
html .ed-plan:hover, html .shop-card:hover, html .shop-card:focus-within {
  transform: translateY(-3px); box-shadow: var(--shadow-lift);
}
html.dark .ed-plan:hover, html.dark .shop-card:hover, html.dark .shop-card:focus-within { border-color: #343a4e; }
html .ed-plan-featured {
  background: var(--psm-panel) !important;
  color: var(--psm-on-panel);
  border-color: var(--psm-panel);
}
html .ed-plan-featured::before { content: ''; position: absolute; top: 18px; inset-inline-end: 18px; width: 22px; height: 22px; background: var(--psm-panel-accent); -webkit-mask: var(--psm-prism) center / contain no-repeat; mask: var(--psm-prism) center / contain no-repeat; pointer-events: none; }
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: color-mix(in srgb, var(--psm-on-panel) 18%, transparent); }
@media (prefers-reduced-motion: reduce) { html .ed-plan:hover, html .shop-card:hover, html .shop-card:focus-within { transform: none; } }

/* ── Status text ── */
.ed-status { font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-soft); }
.ed-topnav-link { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: var(--ink); }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.2rem 1.5rem .5rem;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
html body #sideMenu .drawer-section-label { color: var(--ink-soft) !important; }
html body #sideMenu span.rounded-full.text-white[style*="--theme-600"] { background: var(--psm-accent) !important; color: var(--psm-on-accent) !important; }
.drawer-nav-row {
  display: flex; align-items: center; gap: .9rem;
  min-height: 48px;
  margin: 0 .75rem; padding: .7rem .85rem;
  border-radius: 12px;
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.drawer-nav-row:hover { background: var(--paper-3); color: var(--ink); }
.drawer-logout, .drawer-login { margin: 1rem 1.5rem 1.25rem; padding: 0.85rem 1rem; }
.drawer-logout {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px;
  border: 1px solid var(--rule); border-radius: 14px;
  font-weight: 600; color: var(--psm-bad);
}
.drawer-logout:hover { background: var(--psm-bad-soft); }

.mobile-glass-header {
  background: rgba(244, 245, 247, 0.86);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(13, 15, 23, 0.86); }

.ed-avatar-ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--psm-accent); }

[x-cloak] { display: none !important; }

.ed-dropdown {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
  padding: .35rem;
}
.ed-dropdown-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .9rem;
  border-radius: 12px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.ed-dropdown-item:hover { background: var(--paper-3); color: var(--ink); }
.ed-section-cap {
  padding: .7rem .9rem .35rem;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.ed-mobile-link.active { color: var(--psm-accent-text); }

/* ── Dark/light toggle: the beam ──
   A white beam crosses from the start edge to a prism that settles in
   the middle of the screen; out of the prism the light fans into the
   accent's spectrum, the fan opening until its bands fill the screen.
   The mode changes under the full fan, then the fan sweeps on and closes
   away past the far edge, leaving the other mode behind it. prism.js
   sets every colour on the overlay when it starts, so nothing on the
   cover changes at the flip. */
.px-fx--psm-beam { overflow: hidden; pointer-events: none; }
.px-fx--psm-beam .psm-fx-fan {
  position: absolute; inset: 0;
  background: var(--fx-bands);
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  will-change: clip-path;
}
.px-fx--psm-beam .psm-fx-beam {
  position: absolute; top: 50%; height: 3px; margin-top: -1.5px;
  left: 0; width: 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--fx-beam) 35%);
  box-shadow: 0 0 16px 1px var(--fx-beam-glow);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.px-fx--psm-beam.is-rtl .psm-fx-beam { left: auto; right: 0; transform-origin: 100% 50%; background: linear-gradient(270deg, rgba(255, 255, 255, 0), var(--fx-beam) 35%); }
.px-fx--psm-beam .psm-fx-prism {
  position: absolute; left: 50%; top: 50%; width: 92px; height: 80px; margin: -48px 0 0 -46px;
  opacity: 0;
}
.px-fx--psm-beam .psm-fx-prism svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ── Footer ── */
.psm-footer {
  background: var(--paper-2) !important;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
}
html.dark .psm-footer { background: #0a0c13 !important; }
.psm-footer a:hover { color: var(--psm-accent-text); }
html .psm-footer .ed-footer-heading {
  font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
html.dark #desktopFooter li { color: var(--ink-2) !important; }
/* header.css greys every footer h4 after dark with an ID rule */
html.dark #desktopFooter .ed-footer-heading { color: var(--ink) !important; }
html .psm-footer .ed-footer-link { color: var(--ink-soft); background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat; transition: background-size .3s ease, color .2s ease; }
html .psm-footer .ed-footer-link:hover, html .psm-footer .ed-footer-link:focus-visible { background-size: 100% 1px; color: var(--ink); }
[dir="rtl"] .psm-footer .ed-footer-link { background-position: right 100%; }

/* The floating nav: frosted glass, the page you are on an ink pill
   (white at night) */
html .ed-floating-nav {
  position: relative;
  background: var(--psm-glass);
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--rule);
  border-radius: 20px;
  box-shadow: 0 1px 0 var(--psm-glass-line) inset, 0 16px 40px -14px rgba(16, 18, 28, .28);
}
html.dark .ed-floating-nav { box-shadow: 0 1px 0 var(--psm-glass-line) inset, 0 20px 44px -16px rgba(0, 0, 0, .8); }
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .95rem; font-weight: 500; color: var(--ink-2); border-radius: 14px; }
html .ed-floating-nav .ed-floating-link:hover { background: var(--paper-3); color: var(--ink); }
html body .ed-floating-nav a.ed-floating-link.active { background: var(--ink); color: var(--paper-2) !important; }
html body .ed-floating-nav a.ed-floating-link.active > span { color: var(--paper-2) !important; }

/* The newsletter: a sunk card with the prism mark in its corner */
html body .psm-footer .ed-newsletter {
  position: relative; overflow: hidden;
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
html body .psm-footer .ed-newsletter::before { content: '' !important; display: block !important; position: absolute; top: 20px; inset-inline-end: 20px; width: 26px; height: 26px; opacity: 1; border: 0; background: var(--psm-mark); -webkit-mask: var(--psm-prism) center / contain no-repeat; mask: var(--psm-prism) center / contain no-repeat; }
html body .psm-footer .ed-newsletter::after { content: none !important; }
html body .psm-footer .ed-newsletter h4 { color: var(--ink) !important; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; padding-inline-end: 36px; }
html body .psm-footer .ed-newsletter p:not(#newsletter-msg) { color: var(--ink-soft) !important; opacity: 1; }
html body .psm-footer .ed-newsletter-input, html.dark body .psm-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) { background: var(--paper-2) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; border-radius: 12px; font-family: var(--font-ui); min-height: 48px; }
html body .psm-footer .ed-newsletter-input::placeholder { color: var(--ink-soft); }
html body .psm-footer .ed-newsletter-input:focus { border-color: var(--psm-accent-line) !important; box-shadow: 0 0 0 4px var(--psm-accent-soft); }
html body .psm-footer .ed-newsletter-btn { background: var(--psm-accent); color: var(--psm-on-accent); border: 0; border-radius: 12px; min-height: 48px; font-family: var(--font-ui); font-weight: 600; box-shadow: var(--btn-shadow); transition: transform .2s ease, box-shadow .2s ease; }
html body .psm-footer .ed-newsletter-btn:hover { transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); }
html body .psm-footer .ed-newsletter-btn:active { transform: translateY(1px); box-shadow: var(--btn-shadow-down); }
html body .psm-footer .ed-newsletter-age, html body .psm-footer .ed-newsletter label { color: var(--ink-soft) !important; }

/* Logo plate: the light-mode logo on a white card wherever it sits on
   something dark and there is no dark logo */
.psm-logoplate {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .7rem 1.1rem;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

/* Long titles and descriptions show in full; a card grows instead of
   clipping them. */
html [class*="line-clamp-"] { -webkit-line-clamp: unset; }
html body .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* .text-fit (assets/css/header.css) shrinks a title to one line with JS,
   measured before the display face loads; under this theme it wraps. */
html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* ── Dark-mode greys from assets/css/header.css ──
   header.css forces a neutral near-black palette onto Tailwind's light
   utilities with !important; these follow Prism's navy instead. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(13, 15, 23, 0.88) !important; border-bottom-color: var(--rule) !important; }
html.dark #desktopFooter { background: #0a0c13 !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(22, 25, 37, 0.94) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark #langSheet { background: var(--paper-2) !important; border-top-color: var(--rule) !important; }
html.dark .premium-profile-header { background: var(--paper-2) !important; }
html.dark .premium-dropdown,
html.dark #mobileExploreSheet .bg-white,
html.dark #logoutModal .bg-white,
html.dark .bg-white,
html.dark [x-data] .bg-white,
html.dark .bg-white.shadow-xl,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .odd\:bg-white:nth-child(odd) { background-color: var(--paper-2) !important; }
html.dark .bg-gray-50,
html.dark .even\:bg-gray-50:nth-child(even) { background-color: var(--paper) !important; }
html.dark .bg-gray-100,
html.dark #mobileExploreSheet .bg-gray-100,
html.dark thead { background-color: var(--paper-3) !important; }
html.dark .from-white, html.dark .from-gray-50 { --tw-gradient-from: var(--paper) !important; }
html.dark .to-white, html.dark .to-gray-50 { --tw-gradient-to: var(--paper) !important; }
html.dark .via-white, html.dark .via-gray-50 { --tw-gradient-via: var(--paper-2) !important; }
html.dark .from-gray-100 { --tw-gradient-from: var(--paper-2) !important; }
html.dark .to-gray-100 { --tw-gradient-to: var(--paper-2) !important; }
html.dark .search-input,
html.dark select:not(.no-dark) { background-color: var(--paper-2) !important; }
html.dark .gradient-bg { background: linear-gradient(-45deg, #1f2331, #0d0f17, #161925, #07080d) !important; }
html.dark [class*="dark:bg-[#121218]"], html.dark [class*="dark:bg-[#0"] { background-color: var(--paper-2) !important; }

/* header.css fills every dark-mode field with #0d1117; here fields sit a
   step below the card. Same selector shape so it outranks it. */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.no-dark),
html.dark textarea:not(.no-dark),
html.dark select:not(.no-dark) {
  background-color: #0d0f17 !important;
  border-color: #2e3344 !important;
  color: #eef0f6 !important;
}
html.dark { color-scheme: dark; }
html { accent-color: var(--psm-accent); }

/* Inverted panels: shared markup paints some panels with background
   var(--ink) and letters them in var(--paper), which only works while ink
   is dark. At night those panels take the darkest ink. */
html.dark [style*="background: var(--ink)"],
html.dark [style*="background:var(--ink)"],
html.dark [style*="background-color: var(--ink)"],
html.dark [style*="background-color:var(--ink)"] {
  --ink: #07080d;
  --paper: #eef0f6;
  border-color: #272b3a;
}

html header.safe-top-header[style] { background: rgba(244, 245, 247, .9) !important; }
html.dark header.safe-top-header[style] { background: rgba(13, 15, 23, .92) !important; }
/* The winners page's tab bar, near-black in assets/css/pages/winners.css */
html.dark .wn-tab-bar { background: rgba(13, 15, 23, .92); }

/* ── Login / register / forgot-password brand panel: light falls through
   a large prism in its corner, the rest of the panel quiet ── */
:root {
  --brand-gradient: linear-gradient(180deg, #ffffff, #f4f5f7);
  --brand-glow-1: rgba(var(--theme-500-rgb), 0.12);
  --brand-glow-2: rgba(var(--theme-300-rgb), 0.1);
}
html.dark {
  --brand-gradient: linear-gradient(180deg, #161925, #0d0f17);
  --brand-glow-1: rgba(var(--theme-400-rgb), 0.16);
  --brand-glow-2: rgba(var(--theme-300-rgb), 0.08);
}
html body .brand-panel {
  position: relative;
  background:
    radial-gradient(70% 60% at 100% 0%, var(--brand-glow-1), transparent 70%),
    var(--brand-gradient) !important;
  color: var(--ink);
}
/* assets/css/pages/login.css draws ::after as a round glow; here it is
   the prism with its beam */
html .brand-panel::after {
  content: ''; position: absolute;
  top: auto !important; bottom: 28px !important; right: 7% !important; left: auto !important;
  width: 200px !important; height: 160px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background: var(--art-refraction) center / contain no-repeat !important;
  box-shadow: none !important;
}
[dir="rtl"] .brand-panel::after { right: auto !important; left: 7% !important; transform: scaleX(-1) !important; }
html .brand-panel::before { content: none !important; }
html body .brand-panel .text-purple-200,
html body .brand-panel [class*="text-purple-200"],
html body .brand-panel .text-white\/80, html body .brand-panel .text-white\/70 { color: var(--ink-soft) !important; }
html body .brand-panel .text-white, html body .brand-panel h1, html body .brand-panel h2 { color: var(--ink) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 800 !important; letter-spacing: -.03em; }

/* ── Wallet balance card: frosted glass over the accent, the prism set
   large and faint in its corner, a refracted line crossing it
   (components/wallet/hero-balance.php) ── */
html body .wallet-hero {
  --wallet-hero-ink: #ffffff;
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(var(--theme-300-rgb), .45), rgba(var(--theme-300-rgb), 0) 60%),
    linear-gradient(135deg, var(--theme-700), var(--theme-900));
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 24px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 24px 50px -24px rgba(var(--theme-700-rgb), .7);
  color: #ffffff;
  margin: 10px 0 18px;
}
/* After dark the kernel turns --theme-900 into its palest step, so the
   deep end of the card comes from the rgb form, which it leaves alone */
html.dark body .wallet-hero {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(var(--theme-400-rgb), .32), rgba(var(--theme-400-rgb), 0) 60%),
    linear-gradient(135deg, var(--theme-700), rgb(var(--theme-900-rgb)));
}
html.dark body .wallet-hero { box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 0 0 1px rgba(255, 255, 255, .06), 0 28px 60px -24px rgba(var(--theme-400-rgb), .45); }
/* The kernel gives ::before a fixed 2px height; the sizes here replace it */
html body .wallet-hero::before {
  content: ''; position: absolute; z-index: 0; inset: auto -24px -34px auto; width: 230px; height: 206px;
  pointer-events: none; background: rgba(255, 255, 255, .12);
  -webkit-mask: var(--psm-prism-solid) center / contain no-repeat; mask: var(--psm-prism-solid) center / contain no-repeat;
}
html body .wallet-hero::after {
  content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .12) 52.4%, rgba(255, 255, 255, 0) 60%);
}
[dir="rtl"] body .wallet-hero::before { inset: auto auto -34px -24px; }
html body .wallet-hero > * { position: relative; z-index: 1; }
html body .wallet-hero .wallet-ref { color: rgba(255, 255, 255, .88) !important; letter-spacing: .12em; font-family: var(--font-num); font-size: .72rem; font-weight: 600; }
html body .wallet-hero span[style*="color:rgba(255,255,255"] { color: rgba(255, 255, 255, .88) !important; }
html body .wallet-hero [style*="color:#fff"], html body .wallet-hero [style*="color: #fff"], html body .wallet-hero .text-white { color: #ffffff !important; }
html body .wallet-hero .h-px { background: rgba(255, 255, 255, .28) !important; }
html body .wallet-hero .bg-emerald-400 { background: #7ef0b8 !important; }
html body .wallet-balance-num {
  font-family: var(--font-num); font-weight: 600; letter-spacing: -.03em;
  color: #ffffff; overflow-wrap: normal; font-variant-numeric: tabular-nums;
}
html body .wallet-hero-btn-primary { background: #ffffff; color: #11131c; border: 0; font-family: var(--font-ui); font-weight: 600; border-radius: 12px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); transition: transform .2s ease, box-shadow .2s ease; }
html body .wallet-hero-btn-primary:hover { background: #ffffff; color: #11131c; transform: translateY(-1px); }
html body .wallet-hero-btn-primary:active { transform: translateY(1px); box-shadow: none; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 600; border-radius: 12px; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #ffffff; }
html body .wallet-hero-btn-secondary:active { transform: translateY(1px); box-shadow: none; }

/* ── Box card (styled by assets/css/pages/home.css) ── */
html .ed-card-mystery {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
}
html .ed-card-mystery:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
html .ed-card-mystery::before { content: none; }
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: a white card on a deeper shadow ── */
html body .pd-buybox {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
html body .pd-buybox .font-display.text-4xl { color: var(--ink); overflow-wrap: normal; font-family: var(--font-num); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pd-title { font-family: var(--font-display); font-weight: 800 !important; letter-spacing: -.03em; }

/* The box page's own spin button is ink on paper and dynamic-theme's
   ".dark button" turns its label the colour of its fill */
html.dark button.spin-btn:not(:disabled) { color: var(--btn-ink); }

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) follow the store's own colour */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--psm-accent); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--psm-accent); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600, html .text-blue-600, html .text-blue-500 { color: var(--psm-accent-text); }
html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white {
  background: var(--btn-face), var(--btn-bg) !important; color: var(--btn-ink) !important; border-radius: 12px; box-shadow: var(--btn-shadow);
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100, html .bg-blue-50 { background-color: var(--psm-accent-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50, html.dark .bg-blue-50 { background-color: var(--psm-accent-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200, html .border-blue-200 { border-color: var(--psm-accent-line); }
html.dark .border-violet-200 { border-color: var(--psm-accent-line) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: var(--psm-accent-line); }
html .focus\:border-purple-400:focus { border-color: var(--psm-accent); }

/* The kernel's accent utilities, at the steps Prism reads them at */
html body .text-theme-500, html body .text-theme-600, html body .text-theme-700 { color: var(--psm-accent-text) !important; }
html body .hover\:text-theme-600:hover, html body .hover\:text-theme-700:hover { color: var(--psm-accent-text) !important; }
html body .bg-theme-50, html body .bg-theme-100 { background-color: var(--psm-accent-soft) !important; }

/* Shared buttons drawn in the accent with white lettering (Place Order,
   Buy Now bars) are Prism's primary press */
html .bg-theme-600.text-white, html .bg-theme-500.text-white,
html .bg-blue-600.text-white, html .bg-blue-500.text-white {
  background: var(--btn-face), var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow) !important;
}
html .bg-theme-600.text-white:hover, html .bg-theme-500.text-white:hover { background: var(--btn-face), var(--btn-bg-hover) !important; }
html .bg-theme-600.text-white [class*="border-white"] { border-color: color-mix(in srgb, var(--btn-ink) 35%, transparent); border-top-color: var(--btn-ink); }

/* ── Winners page cards ── */
html .wnc { border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--rule); box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease; }
html .wnc:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }

/* ── Cart and checkout: the order total on a card of its own ──
   Picked out by what the panels contain, so no copies of their markup
   (or their Alpine hooks) live in the theme. */
html [id^="cart-row-"] { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 18px !important; }
html .rounded-2xl:has(> div > div > #summary-total),
html section.rounded-2xl:has([x-text="totalDisplay()"]) {
  position: relative;
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
}
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: clamp(1.25rem, 5vw, 1.65rem);
  letter-spacing: -.02em;
  color: var(--ink);
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}

/* The status strip holds one line, never wrapping inside its 32px. */
.hdr-strip .ed-status, .hdr-strip .ed-status * { white-space: nowrap; }
.hdr-strip .ed-status { font-size: 12px; letter-spacing: .02em; }
/* Small phones: the dark-mode switch and the App chip in the header drop
   their words and keep their icons. */
@media (max-width: 419px) {
  html .hdr-strip .dark-mode-toggle span { display: none; }
  html .mobile-glass-header .pwa-chip__label { display: none; }
  html .mobile-glass-header .pwa-chip { padding: 0 .6rem; }
}

/* The hero's phone emblem is sized by components/home/hero.css, which
   arrives after this sheet; until it does it waits out of sight. */
.psm-hero__emblem { display: none; }

/* ── Small pieces ── */
/* The tones banners and categories are mapped to (psm_tone_for()): the
   accent at three depths, then two neutrals */
:root { --psm-t1: var(--theme-700); --psm-t2: var(--theme-900); --psm-t3: var(--theme-500); --psm-t4: #2b2f3c; --psm-t5: #5a6072; }
html.dark { --psm-t1: var(--theme-800); --psm-t2: var(--theme-700); --psm-t3: var(--theme-600); --psm-t4: #272b3a; --psm-t5: #3a3f52; }
.psm-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; flex-shrink: 0; }

/* A tier's colour on anything that carries data-rarity or .psm-r--*:
   neutral, then the accent rising in depth, ink for the rarest */
.psm-r--common, [data-rarity="common"]       { --r: #9aa0b0;           --r-deep: #6b7184;          --r-ink: var(--ink-2);         --r-soft: rgba(154, 160, 176, .16); }
.psm-r--uncommon, [data-rarity="uncommon"]   { --r: var(--theme-300);  --r-deep: var(--theme-500); --r-ink: var(--theme-800);    --r-soft: rgba(var(--theme-300-rgb), .2); }
.psm-r--rare, [data-rarity="rare"]           { --r: var(--theme-500);  --r-deep: var(--theme-700); --r-ink: var(--theme-800);    --r-soft: rgba(var(--theme-500-rgb), .16); }
.psm-r--epic, [data-rarity="epic"]           { --r: var(--theme-700);  --r-deep: var(--theme-900); --r-ink: var(--theme-800);    --r-soft: rgba(var(--theme-700-rgb), .14); }
.psm-r--legendary, [data-rarity="legendary"] { --r: #11131c;           --r-deep: #000000;          --r-ink: #11131c;              --r-soft: rgba(17, 19, 28, .1); }
html.dark :is(.psm-r--uncommon, [data-rarity="uncommon"], .psm-r--rare, [data-rarity="rare"], .psm-r--epic, [data-rarity="epic"]) { --r-ink: var(--theme-300); }
html.dark :is(.psm-r--epic, [data-rarity="epic"]) { --r-deep: rgb(var(--theme-900-rgb)); }
html.dark :is(.psm-r--legendary, [data-rarity="legendary"]) { --r: #eef0f6; --r-deep: #c9cdd8; --r-ink: #eef0f6; --r-soft: rgba(238, 240, 246, .12); }

/* A label: a small pill, the word in the accent on a wash of it */
.psm-label {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem;
  font: 600 11.5px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
  color: var(--psm-accent-text);
  background: var(--psm-accent-soft);
  border-radius: 999px;
}
.psm-label--ink { color: var(--psm-on-panel); background: var(--psm-panel); }
.psm-label--red { color: var(--psm-bad); background: var(--psm-bad-soft); }
.psm-label--green { color: var(--psm-good); background: var(--psm-good-soft); }
.psm-label--yellow { color: var(--psm-warn); background: var(--psm-warn-soft); }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) .psm-label { letter-spacing: 0; font-size: 12px; }

/* A tag: a soft rectangle, for counts and states */
.psm-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .65rem;
  font: 600 12px/1.25 var(--font-ui);
  color: var(--t, var(--ink-2));
  background: var(--c, var(--paper-3));
  border-radius: 8px;
}
.psm-tag--red { --c: var(--psm-bad-soft); --t: var(--psm-bad); }
.psm-tag--green { --c: var(--psm-good-soft); --t: var(--psm-good); }
.psm-tag--yellow { --c: var(--psm-warn-soft); --t: var(--psm-warn); }
.psm-tag--blue { --c: var(--psm-accent-soft); --t: var(--psm-accent-text); }
.psm-tag--ink { --c: var(--psm-panel); --t: var(--psm-on-panel); }

/* A stamp: a ring round the word */
.psm-stamp {
  display: inline-block;
  padding: .3rem .8rem;
  font: 600 11.5px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--psm-accent-text);
  border: 1.5px solid currentColor;
  border-radius: 999px;
}

/* A note: a sunk panel for small print */
.psm-note {
  position: relative;
  background: var(--paper-3);
  color: var(--ink-2);
  border-radius: 14px;
}

/* A sheet for dialogs and panels: the white card, raised */
.psm-sheet {
  position: relative; overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 24px;
  box-shadow: 0 30px 80px -30px rgba(16, 18, 28, .45);
}
html.dark .psm-sheet { box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 30px 80px -24px rgba(0, 0, 0, .9); }

/* The ink panel: near-black by day, near-white at night */
.psm-ink-panel {
  position: relative;
  color: var(--psm-on-panel);
  background: var(--psm-panel);
  border-radius: var(--radius);
}

.psm-balance, .psm-icon-btn { border: 1px solid var(--rule); color: var(--ink); background: var(--paper-2); transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease; }
.psm-balance:hover, .psm-icon-btn:hover { border-color: #cfd3dc; box-shadow: var(--shadow); }
html.dark .psm-balance:hover, html.dark .psm-icon-btn:hover { border-color: #3a3f52; }
.psm-balance:active, .psm-icon-btn:active { transform: translateY(1px); box-shadow: none; }
.psm-balance [data-raw] { font-family: var(--font-num); font-weight: 600; }
html body [style*="background:#16a34a"] { background: var(--psm-good) !important; }
/* The floating nav pill is printed inside the footer; it floats over the
   page and keeps the page's own colours. */
html body .psm-footer .ed-floating-nav { --ink: #11131c; --ink-2: #2b2f3c; --paper-2: #ffffff; --paper-3: #eef0f3; }
html.dark body .psm-footer .ed-floating-nav { --ink: #eef0f6; --ink-2: #d3d7e2; --paper-2: #0d0f17; --paper-3: #1f2331; }
/* The phone menu button: a white square with a hairline */
html body .menu-btn, html.dark body .menu-btn { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 12px !important; }
html body .menu-btn:hover, html.dark body .menu-btn:hover { background: var(--paper-3) !important; transform: none; }
html body .menu-btn:active { transform: translateY(1px); }

/* ── Micro-interactions shared by the whole store ──
   A tag or label rises into place once, the first time it comes into
   view (.psm-rise-in); the page's one big countdown slides a figure up
   when it changes (.psm-tick); in the last ten seconds the figures turn
   the live red (.psm-final, prism.js); whatever buys, bids or adds to the
   cart sends a ring of the accent out from the button and splits it into
   a few short rays (.psm-ring, .psm-ray). */
@media (prefers-reduced-motion: no-preference) {
  .psm-rise-in { animation: psm-rise-in .5s cubic-bezier(.2, .8, .3, 1) both; }
  .psm-tick { animation: psm-tick .32s cubic-bezier(.2, .8, .3, 1); }
}
@keyframes psm-rise-in { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes psm-tick { 0% { transform: translateY(.22em); opacity: .35; } 100% { transform: none; opacity: 1; } }
.psm-final { color: var(--psm-live) !important; }
.psm-ring {
  position: fixed; z-index: 2147482000; pointer-events: none;
  border-radius: 16px;
  box-shadow: 0 0 0 2px var(--psm-accent);
  animation: psm-ring .6s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes psm-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
.psm-ray {
  position: fixed; z-index: 2147482000; pointer-events: none;
  width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 2px;
  background: var(--ray, var(--psm-accent));
  opacity: 0;
  animation: psm-ray .55s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes psm-ray { 0% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r0, 20px)) scaleX(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r1, 46px)) scaleX(1); } }

/* ── Drawings behind words ──
   Pages that carry words over a drawing keep it on a layer of its own,
   clear of the copy: at both sides of centred copy, nowhere at phone
   width. */
:root {
  --psm-mask-c: linear-gradient(90deg, #000 0, #000 9%, transparent 20%, transparent 80%, #000 91%, #000 100%);
}
@media (max-width: 1023px) {
  :root { --psm-mask-c: linear-gradient(transparent, transparent); }
}
.psm-wn, html body .psm-lit, html body .psm-err, body.psm-404, html body .brand-panel, .ga-marquee { isolation: isolate; }

/* Phones: a home section's title takes the whole row and its "Browse"
   link drops below it. Squeezed beside the link, a two-word title was
   cut short or broke mid-word. Headings break only between words. */
@media (max-width: 639px) {
  html body .reveal.flex-row.justify-between:has(> .btn-view-all) { flex-wrap: wrap; }
  html body .reveal.flex-row.justify-between:has(> .btn-view-all) > .min-w-0 { flex: 1 1 100%; }
  html body .reveal.flex-row:has(> .btn-view-all) h2.text-fit { font-size: clamp(1.4rem, 7vw, 1.9rem); }
  html body :is(h1, h2, h3):is(.text-fit, .truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
}

/* Phones: a ticket's two dates stack rather than run into each other; the
   bids page's four tiles go two by two (a long German label was cut
   off); a lot page's browse link drops under its heading (its German
   label pushed the page wider). */
@media (max-width: 639px) {
  html body .grid.grid-cols-2.rtl-text-right:has(> div > .whitespace-nowrap) { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  html body .grid.grid-cols-4:has(> div > p.text-3xl.font-extrabold) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
}

/* A product's ground: a soft well for thumbnails, the prize in a dialog,
   the icon of a notice */
:root {
  --psm-face: linear-gradient(180deg, #f7f8fa, #eef0f3);
  --psm-face-ring: inset 0 0 0 1px rgba(16, 18, 28, .05);
  --psm-gauge: var(--psm-accent);
  --psm-well: radial-gradient(80% 70% at 50% 35%, #ffffff, rgba(255, 255, 255, 0) 80%), #eef0f3;
}
html.dark {
  --psm-face: linear-gradient(180deg, #1f2331, #191c29);
  --psm-face-ring: inset 0 0 0 1px rgba(255, 255, 255, .05);
  --psm-well: radial-gradient(80% 70% at 50% 35%, rgba(var(--theme-400-rgb), .12), rgba(var(--theme-400-rgb), 0) 80%), #1b1e2b;
}
/* Phones: a long single word in a big section title ("funktioniert's")
   gets a size that fits the row instead of breaking */
@media (max-width: 639px) {
  html body h2.text-fit.text-4xl { font-size: clamp(1.4rem, 6.8vw, 2.2rem); }
  html body h1.text-fit.text-4xl { font-size: clamp(1.55rem, 7.4vw, 2.2rem); overflow-wrap: normal !important; }
}

/* "Live": a red dot with a slow halo */
.psm-live { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--psm-live); flex-shrink: 0; }
.psm-live--accent { background: var(--psm-accent); }
@media (prefers-reduced-motion: no-preference) {
  .psm-live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: psm-halo 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
}
@keyframes psm-halo { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* A divider: a short hairline with the prism set in it */
.psm-divider { display: block; width: 40px; height: 12px; margin-inline: auto; background: var(--ink-soft); opacity: .6; -webkit-mask: var(--psm-rule-mark) center / contain no-repeat; mask: var(--psm-rule-mark) center / contain no-repeat; }
.psm-colophon { font-family: var(--font-ui); letter-spacing: .01em; }

/* Names other themes' shared markup reaches for */
:root {
  --gold: var(--theme-800); --gold-2: var(--theme-600); --gold-soft: rgba(var(--theme-500-rgb), .16); --gold-ink: #11131c;
  --felt: #11131c; --felt-2: #1b1e2a; --on-felt: #f4f5f7; --on-felt-soft: rgba(244, 245, 247, .78);
  --peacock: var(--theme-700); --peacock-soft: rgba(var(--theme-700-rgb), .1);
  --red: #c0362c; --red-soft: rgba(192, 54, 44, .1);
  --rose: #33507a; --rose-soft: rgba(51, 80, 122, .1);
  --night: #0d0f17; --night-2: #161925; --night-3: #1f2331; --on-night: #eef0f6; --on-night-soft: rgba(238, 240, 246, .78);
  --btn-side: transparent;
}
html.dark {
  --gold: var(--theme-300); --gold-2: var(--theme-400); --gold-soft: rgba(var(--theme-400-rgb), .16); --gold-ink: #eef0f6;
  --peacock: var(--theme-300); --peacock-soft: rgba(var(--theme-400-rgb), .16);
  --red: #ff8f84; --red-soft: rgba(255, 143, 132, .14);
  --rose: #9db8ea; --rose-soft: rgba(157, 184, 234, .14);
}

/* The loader mark: a prism outline with a bead of light running round
   it and the beam leaving its far side; for the page loader and the app
   splash */
.psm-spinner { position: relative; display: block; width: 64px; height: 56px; }
.psm-spinner svg { display: block; width: 100%; height: 100%; overflow: visible; }
.psm-spinner__edge { fill: none; stroke: var(--rule); stroke-width: 3; stroke-linejoin: round; }
.psm-spinner__run { fill: none; stroke: var(--psm-accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 22 88; }
.psm-spinner__beam { stroke: var(--psm-accent); stroke-width: 2; stroke-linecap: round; opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .psm-spinner__run { animation: psm-run 1.1s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .psm-spinner__run { stroke-dasharray: none; }
}
@keyframes psm-run { to { stroke-dashoffset: -110; } }

/* Status tones and picked cards */
html body :is(.px-tone--good, .px-tone--warn, .px-tone--crit, .px-tone--info) { border-radius: 8px; }
html body .px-pick-card:has(:checked) { border-color: var(--psm-accent) !important; background: color-mix(in srgb, var(--psm-accent) 5%, var(--paper-2)); box-shadow: 0 0 0 3px var(--psm-accent-soft); }
html body .px-pick-card:hover { border-color: var(--psm-accent-line) !important; }
/* Seller Centre's tones follow the store's (its own rule loads later) */
html body :is(.sc-page, .sc-panel) { --sc-good: var(--px-good); --sc-warn: var(--px-warn); --sc-crit: var(--px-crit); --sc-info: var(--px-info); --sc-accent: var(--psm-accent); }
/* Review stars: a warm amber that reads on white and on navy */
:root { --px-star: #b26b00; }
html.dark { --px-star: #f2c46b; }

/* The ended draw's replay: a white pill, and the banner over the machine
   in ink with the accent label */
html body .lot-replay-btn { background: var(--paper-2); border-color: var(--rule); font-family: var(--font-ui); box-shadow: var(--shadow); }
html body .lot-replay-chip { background: rgba(13, 15, 23, .9); border-color: rgba(255, 255, 255, .12); font-family: var(--font-ui); }
html body .lot-replay-chip b, html body .lot-replay-chip button:focus-visible { color: var(--theme-300); outline-color: var(--theme-300); }

/* Above the footer: the prism set in a hairline */
.psm-footer-mark { display: flex; justify-content: center; padding: 56px 0 0; }
.psm-footer-mark .psm-divider { width: 64px; height: 18px; }
.psm-footer-about { margin: 0; max-width: 38ch; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.psm-live--good { background: var(--psm-good); }

/* Changing language, the scene (prism.js): a white card on a soft shadow,
   an ink strip across its top with the prism on it. A beam of white light
   crosses to the prism and fans out of it into the accent's spectrum (the
   brand scale's own steps); the old name splits into those colours and is
   gone, and the new one draws itself together out of them in Bricolage
   Grotesque, its code chip rising under it in Geist Mono. After the
   reload a glint runs across the card, the spectrum flares and the chip
   lights. Card and chip read the theme's tokens, so it is white by day and
   raised navy after hours; the strip stays ink so the light reads. It is
   the same on both pages, so the reload never shows. */
.psm-lang-stage { background: color-mix(in srgb, #0d0f17 42%, transparent); }
.psm-lang-scene {
  position: relative; overflow: hidden; width: min(480px, 100%); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 14px 14px 22px;
  border-radius: var(--radius); background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule); box-shadow: var(--shadow-lift); font-family: var(--font-ui);
}
.psm-lang-optic {
  --psm-lang-at: 34%;
  position: relative; width: 100%; height: 76px; overflow: hidden; border-radius: calc(var(--radius) - 8px);
  background: radial-gradient(ellipse 60% 90% at var(--psm-lang-at) 50%, #1d2130, #11131c 70%);
}
html.dark .psm-lang-optic { background: radial-gradient(ellipse 60% 90% at var(--psm-lang-at) 50%, #151826, #07080d 70%); box-shadow: inset 0 0 0 1px var(--rule); }
.psm-lang-beam {
  position: absolute; left: 0; top: 50%; width: var(--psm-lang-at); height: 3px; margin-top: -1.5px; border-radius: 3px;
  background: #ffffff; box-shadow: 0 0 10px 1px rgba(255, 255, 255, .7); transform-origin: left center;
}
.psm-lang-fan {
  position: absolute; left: var(--psm-lang-at); right: 0; top: 0; bottom: 0; display: flex; flex-direction: column;
  clip-path: polygon(0 47%, 100% 4%, 100% 96%, 0 53%);
}
.psm-lang-fan i { flex: 1; }
.psm-lang-fan i:nth-child(1) { background: var(--theme-200); }
.psm-lang-fan i:nth-child(2) { background: var(--theme-300); }
.psm-lang-fan i:nth-child(3) { background: var(--theme-400); }
.psm-lang-fan i:nth-child(4) { background: var(--theme-500); }
.psm-lang-fan i:nth-child(5) { background: var(--theme-700); }
.psm-lang-fan i:nth-child(6) { background: var(--theme-800); }
.psm-lang-fan i:nth-child(7) { background: var(--theme-900); }
.psm-lang-prism {
  position: absolute; left: var(--psm-lang-at); top: 50%; width: 54px; height: 47px; margin: -25px 0 0 -27px; overflow: visible;
  fill: rgba(255, 255, 255, .16); stroke: #ffffff; stroke-width: 3; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .45));
}
.psm-lang-prism .psm-lang-edge { fill: none; stroke-width: 2; opacity: .6; }
.psm-lang-words { display: grid; place-items: center; width: 100%; min-height: 56px; padding: 0 6px; box-sizing: border-box; }
.psm-lang-old, .psm-lang-new { grid-area: 1 / 1; max-width: 100%; text-align: center; overflow-wrap: anywhere; font: 700 clamp(26px, 7.6vw, 42px)/1.1 var(--font-display); letter-spacing: -.02em; }
.psm-lang-old { color: var(--ink-soft); opacity: 0; }
.psm-lang-new { color: var(--ink); }
.psm-lang-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: var(--psm-accent-soft); color: var(--psm-accent-text); border: 1px solid var(--psm-accent-line);
  font: 600 12px/1 var(--font-num); letter-spacing: .14em;
}
.psm-lang-chip img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.psm-lang-glint {
  position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--theme-200) 40%, rgba(255, 255, 255, .5)), transparent);
  transform: translateX(-110%);
}

/* Out: the beam reaches the prism and fans out; the old name splits into
   the spectrum and the new one draws together out of it. */
.px-lang-stage-out .psm-lang-scene { animation: psm-lang-up .32s cubic-bezier(.2, .8, .3, 1.05) both; }
.px-lang-stage-out .psm-lang-beam { animation: psm-lang-beam .2s cubic-bezier(.3, 0, .2, 1) .26s both; }
.px-lang-stage-out .psm-lang-prism { animation: psm-lang-prism .2s cubic-bezier(.2, .8, .3, 1.3) .34s both; }
.px-lang-stage-out .psm-lang-fan { animation: psm-lang-fan .34s cubic-bezier(.3, .6, .3, 1) .44s both; }
.px-lang-stage-out .psm-lang-old { animation: psm-lang-split .34s ease-in .48s both; }
.px-lang-stage-out .psm-lang-new { animation: psm-lang-join .36s cubic-bezier(.2, .7, .3, 1) .64s both; }
.px-lang-stage-out .psm-lang-chip { animation: psm-lang-rise .26s cubic-bezier(.2, .8, .3, 1) .86s both; }
/* In: it starts where out ended; a glint runs across, the spectrum flares
   and the chip lights. */
.px-lang-stage-in .psm-lang-glint { animation: psm-lang-glint .56s cubic-bezier(.4, 0, .3, 1) .08s both; }
.px-lang-stage-in .psm-lang-fan { animation: psm-lang-flare .5s ease-in-out .2s both; }
.px-lang-stage-in .psm-lang-chip { animation: psm-lang-light .6s ease-out .3s both; }
.px-lang-stage-in .psm-lang-scene { animation: psm-lang-away .26s ease-in .98s both; }
@keyframes psm-lang-up { from { transform: translateY(32px) scale(.97); opacity: 0; } }
@keyframes psm-lang-away { to { transform: translateY(20px) scale(.98); opacity: 0; } }
@keyframes psm-lang-beam { from { transform: scaleX(0); } }
@keyframes psm-lang-prism { from { transform: scale(.6); opacity: 0; } }
@keyframes psm-lang-fan { from { clip-path: polygon(0 47%, 0 47%, 0 53%, 0 53%); } 55% { clip-path: polygon(0 47%, 100% 40%, 100% 60%, 0 53%); } }
@keyframes psm-lang-split {
  from { opacity: 1; text-shadow: none; filter: none; }
  60%  { opacity: .8; color: transparent; text-shadow: -6px 0 var(--theme-300), 0 0 var(--theme-500), 6px 0 var(--theme-800); }
  to   { opacity: 0; color: transparent; text-shadow: -16px -4px var(--theme-300), 0 0 var(--theme-500), 16px 4px var(--theme-800); filter: blur(3px); }
}
@keyframes psm-lang-join {
  from { opacity: 0; color: transparent; text-shadow: -16px 4px var(--theme-300), 0 0 var(--theme-500), 16px -4px var(--theme-800); filter: blur(3px); }
  45%  { opacity: 1; color: transparent; text-shadow: -5px 0 var(--theme-300), 0 0 var(--theme-500), 5px 0 var(--theme-800); filter: none; }
  to   { opacity: 1; text-shadow: none; filter: none; }
}
@keyframes psm-lang-rise { from { transform: translateY(8px); opacity: 0; } }
@keyframes psm-lang-glint { from { transform: translateX(-110%); opacity: 0; } 15%, 80% { opacity: 1; } to { transform: translateX(280%); opacity: 0; } }
@keyframes psm-lang-flare { 45% { filter: brightness(1.25) saturate(1.2); transform: scaleY(1.08); } }
@keyframes psm-lang-light { 35% { box-shadow: 0 0 0 6px var(--psm-accent-glow); } to { box-shadow: 0 0 0 12px transparent; } }
@media (max-width: 460px) {
  .psm-lang-scene { padding: 10px 10px 18px; gap: 14px; }
  .psm-lang-optic { height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .px-lang-stage-out :is(.psm-lang-scene, .psm-lang-beam, .psm-lang-prism, .psm-lang-fan, .psm-lang-old, .psm-lang-new, .psm-lang-chip),
  .px-lang-stage-in :is(.psm-lang-scene, .psm-lang-glint, .psm-lang-fan, .psm-lang-chip) { animation: none !important; }
}


/* Windows (wallet, sign-out and the plugins' windows) sit on their own panel,
   so the secondary text, accent links and buttons in them take the deeper
   shades below to read at 4.5:1 there; the page around keeps its own. */
html:not(.dark) [role="dialog"] {
  --ink-soft: #545a6b;
  --theme-500: var(--theme-700);
}
html.dark [role="dialog"] {
  --ink-soft: #a9afc0;
  --theme-500: var(--theme-300);
}
/* rev 868fe5109c9f2a2b */