/* #379: self-hosted from Google Fonts (OFL, licences in /fonts). One variable file per family and subset; unicode-range keeps downloads to the subsets a page uses. */
@font-face { font-family: 'Fira Code'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/fira-code-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Fira Code'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/fira-code-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Code'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/fira-code-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Fira Code'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/fira-code-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Fira Code'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/fira-code-symbols2.woff2) format('woff2'); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; }
@font-face { font-family: 'Fira Code'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/fira-code-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fira Code'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/fira-code-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/manrope-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/manrope-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/manrope-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/manrope-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/manrope-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/manrope-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/plus-jakarta-sans-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/plus-jakarta-sans-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Light theme (default) ── */
:root {
  --c-bg: 247 248 251;
  --c-bg-raised: 255 255 255;
  --c-bg-inset: 240 241 246;
  --c-panel: 255 255 255;
  --c-panel-hover: 244 245 249;
  --c-panel-active: 236 237 243;
  --c-stroke: 223 225 232;
  --c-stroke-dim: 235 237 243;
  --c-stroke-bright: 205 208 218;
  --c-text: 61 64 85;
  --c-text-secondary: 101 105 125;
  --c-text-dim: var(--c-text-secondary); /* #229: one tier; size and weight carry the hierarchy */
  --c-text-heading: 26 28 46;
  --c-accent: 97 103 154;
  --c-accent-dim: 91 98 154;
  --c-accent-bright: 84 90 140;
  --c-positive: 16 114 52;
  --c-negative: 201 35 35;
  --c-warning: 154 74 10;
  --c-info: 29 78 216; /* #305: blue-700, so Paid text keeps 4.5:1 on its fill, hovered rows included */
  --c-gold: 125 102 8;

  --accent-surface: rgba(106,113,169,0.08);
  --positive-surface: rgba(22,163,74,0.08);
  --negative-surface: rgba(220,38,38,0.08);
  --warning-surface: rgba(154,74,10,0.12);
  --info-surface: rgba(29,78,216,0.08);
  --gold-surface: rgba(125,102,8,0.07);

  --shadow-card: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-glow: 0 0 20px rgba(106,113,169,0.12);
  --shadow-glow-sm: 0 0 10px rgba(106,113,169,0.08);
}

/* ── Dark theme ── */
html.dark {
  --c-bg: 15 16 25;
  --c-bg-raised: 23 25 36;
  --c-bg-inset: 11 12 19;
  --c-panel: 30 32 48;
  --c-panel-hover: 38 40 56;
  --c-panel-active: 46 48 66;
  --c-stroke: 46 48 72;
  --c-stroke-dim: 35 37 56;
  --c-stroke-bright: 61 64 96;
  --c-text: 200 202 216;
  --c-text-secondary: 151 153 170;
  --c-text-dim: var(--c-text-secondary);
  --c-text-heading: 237 238 245;
  --c-accent: 143 150 197;
  --c-accent-dim: 106 113 169;
  --c-accent-bright: 154 160 204;
  --c-positive: 74 222 128;
  --c-negative: 248 113 113;
  --c-warning: 251 146 60;
  --c-info: 96 165 250;
  --c-gold: 226 204 140;

  --accent-surface: rgba(129,136,190,0.12);
  --positive-surface: rgba(74,222,128,0.12);
  --negative-surface: rgba(248,113,113,0.12);
  --warning-surface: rgba(251,146,60,0.12);
  --info-surface: rgba(96,165,250,0.12);
  --gold-surface: rgba(226,204,140,0.08);

  --shadow-card: 0 2px 8px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.35), 0 4px 8px rgba(0,0,0,0.25);
  --shadow-glow: 0 0 24px rgba(129,136,190,0.15);
  --shadow-glow-sm: 0 0 12px rgba(129,136,190,0.10);
}

main :where(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-top: 4rem; } /* #337: keep a focused control clear of the 3.5rem sticky header; on html, scroll-padding made Chromium jump to the top when a header control took focus */

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, rgb(var(--c-accent)) 50%, transparent 95%);
  z-index: 9999;
  opacity: 0.5;
}

html.dark body {
  background-image:
    radial-gradient(ellipse at 15% 50%, rgba(106,113,169,0.04) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(106,113,169,0.025) 0%, transparent 45%);
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--c-accent) / 0.15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-accent) / 0.3); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
main { animation: fadeUp 0.35s ease-out; }

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

::selection {
  background: rgb(var(--c-accent) / 0.25);
  color: rgb(var(--c-text-heading));
}

/* #148: a read-only field must not look editable. The input type selector outranks the Tailwind utilities. */
/* #264: the disabled select matches, without its dropdown arrow; dark mode drops the inset well, which read as editable. */
:is(input, select).is-readonly { background-color: rgb(var(--c-bg-inset)); border-color: rgb(var(--c-stroke-dim)); color: rgb(var(--c-text-secondary)); cursor: default; opacity: 1; }
select.is-readonly { background-image: none; }
html.dark :is(input, select).is-readonly { background-color: transparent; }
input.is-readonly:focus { box-shadow: none; border-color: rgb(var(--c-stroke-bright)); outline: 2px solid rgb(var(--c-text-secondary)); outline-offset: 2px; }
/* #174: dark-theme fills are light, so their labels are dark (white would be under 3:1). */
html.dark .text-white:is(.bg-accent, .bg-positive, .bg-negative) { color: rgb(var(--c-bg-inset)); }
/* #302: a link, button or summary with no focus style of its own takes the house accent ring, not the browser default. */
:where(a, button, summary):focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; }
.overflow-hidden > summary:focus-visible { outline-offset: -2px; } /* #302: an overflow-hidden card would clip it, so it is drawn inset (as #171) */
details.rounded-xl > summary:focus-visible { border-radius: 18px; } /* #302: the ring follows the card; a slotted summary cannot inherit it. 18px = rounded-xl */
/* #309: transition-all also animated the focus ring in; keep every transition but the outline, and none under reduced motion. */
.transition-all { transition-property: color, background-color, border-color, box-shadow, transform, opacity, filter; }
@media (prefers-reduced-motion: reduce) { .transition-all { transition: none; } }
/* #171: a focusable scroll region sits inside an overflow-hidden card, so its ring is drawn inset. */
[role="region"][tabindex="0"]:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: -2px; }
[role="region"] :focus-visible { scroll-margin-inline: 8px; } /* #312: room for the 2px ring when admin.js scrolls a control into view */
/* #318: portal.js/admin.js set data-scroll on a region whose table is wider than it; the hint stays pinned while the table scrolls. */
[role="region"][data-scroll]::before { content: "More columns \2192"; content: "More columns \2192" / ""; /* #336: the first is a fallback for browsers without alt text */ display: block; position: sticky; left: 0; padding: 0.5rem 1.25rem 0; text-align: right; font-size: 0.75rem; line-height: 1rem; color: rgb(var(--c-text-secondary)); }
[role="region"][data-scroll="end"]::before { visibility: hidden; } /* kept in flow so the table does not jump */

#profile-payout-email { min-width: 0; overflow-wrap: anywhere; }
.order-id { width: 9ch; }
.order-id[open] { width: 44ch; } /* #210: a full id, refund ids included, wraps over two lines */
.order-id-note .order-id[open] { width: auto; } /* #269: outside a table the open id wraps to its box */
#conv-tbody .order-id-note .order-id[open] { width: 44ch; } /* #329: the portal refund note opens like the table ids; payout notes keep #269 */
.order-id-note .order-id summary { padding-block: 0.25rem; margin-block: -0.25rem; } /* #287: a 24 px target that stays off the lines around it */
.order-id summary { display: block; padding-block: 0.75rem; margin-block: -0.75rem; list-style: none; cursor: pointer; white-space: nowrap; text-decoration: underline dotted; text-underline-offset: 3px; }
.order-id summary::-webkit-details-marker { display: none; }
.order-id summary:hover { color: rgb(var(--c-text)); }
.order-id summary:focus-visible { outline: 2px solid rgb(var(--c-text-secondary)); outline-offset: -2px; } /* #210: inset, so a scroll region's edge cannot clip it */
.order-id > span { display: block; white-space: normal; overflow-wrap: anywhere; user-select: all; }