/*!
 * Pelagos — LeaderOS theme · "Voxel Depth"
 * (c) Viasly. Licensed per domain; redistribution prohibited.
 * Surfaces are blocks: a face plus a solid ledge underneath that sinks when pressed.
 * Display: Parkinsans · Body: Readex Pro · Icons: Phosphor (bold/fill)
 */

/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
	--ss-accent: #2FD06B;
	--ss-on-accent: #141821;
	--ss-accent-hover: color-mix(in oklab, var(--ss-accent), white 12%);
	--ss-accent-press: color-mix(in oklab, var(--ss-accent), black 10%);
	--ss-accent-soft: color-mix(in oklab, var(--ss-accent) 16%, transparent);
	--ss-accent-ink: color-mix(in oklab, var(--ss-accent) 48%, #141821);
	--ss-accent-edge: color-mix(in oklab, var(--ss-accent) 62%, #04140A);

	--ss-ink: #141821;
	--ss-ink-2: #1F2430;
	--ss-bone: #F2F3F7;
	--ss-paper: #FFFFFF;
	--ss-sand: #E4E7EE;
	--ss-discord: #5865F2;
	--ss-live: #2FD06B;
	--ss-danger: #F0435B;
	--ss-warning: #FFB020;
	--ss-info: #2F8CFF;
	--ss-pink: #FF6FAE;

	--ss-t-grape: #7357F6;
	--ss-t-sky: #2A82F5;
	--ss-t-cherry: #F2405F;
	--ss-t-mint: #10A88A;
	--ss-t-sun: #FFB927;
	--ss-t-tangerine: #F2772E;
	--ss-t-leaf: #22A957;
	/* tone names the page stylesheets were written with */
	--ss-tone-navy: #3B6BF0;
	--ss-tone-plum: var(--ss-t-grape);
	--ss-tone-slate: #4C5568;
	--ss-tone-teal: var(--ss-t-mint);
	--ss-tone-rose: var(--ss-t-cherry);
	--ss-tone-forest: #23A455;

	--ss-display: "Parkinsans", "Readex Pro", "Segoe UI", system-ui, sans-serif;
	--ss-font: "Readex Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ss-display-lh: 1.06;

	--ss-r-xs: 6px;
	--ss-r-sm: 10px;
	--ss-r: 14px;
	--ss-r-lg: 20px;
	--ss-r-xl: 26px;
	--ss-notch: 0px;
	--ss-ease: cubic-bezier(.22, 1, .36, 1);
	--ss-spring: cubic-bezier(.34, 1.56, .64, 1);
	--ss-nav-h: 80px;
	--ss-edge: max(clamp(1rem, 2.5vw, 2rem), calc((100vw - 1320px) / 2)); /* container content edge */

	--ss-ledge: #D2D6DF;           /* bottom face of a block on light surfaces */
	--ss-depth: 5px;
	--ss-soft: 0 18px 36px -22px rgba(20, 24, 33, .42);
	--ss-shadow-card: 0 calc(var(--ss-depth) * .9) calc(var(--ss-depth) * 2.6) calc(var(--ss-depth) * -1.1) var(--ss-ledge), var(--ss-soft);
	--ss-shadow-lift: 0 calc(calc(var(--ss-depth) + 3px) * .9) calc(calc(var(--ss-depth) + 3px) * 2.6) calc(calc(var(--ss-depth) + 3px) * -1.1) var(--ss-ledge), 0 28px 46px -24px rgba(20, 24, 33, .5);
	--ss-shadow-float: 0 calc(6px * .9) calc(6px * 2.6) calc(6px * -1.1) var(--ss-ledge), 0 30px 60px -24px rgba(20, 24, 33, .5);

	--band-bg: #F1F2F5;
	--band-fg: var(--ss-ink);
	--band-muted: #5A6375;
	--band-line: rgba(20, 24, 33, .12);
	--band-card: #FFFFFF;
	--band-card-line: rgba(20, 24, 33, .08);
	--band-sunk: #E9EBF0;
	--band-input: #FFFFFF;

	--bs-body-font-family: var(--ss-font);
	--bs-body-font-size: 1rem;
	--bs-body-font-weight: 400;
	--bs-body-line-height: 1.6;
	--bs-body-bg: var(--band-bg);
	--bs-body-color: var(--ss-ink);
	--bs-emphasis-color: var(--ss-ink);
	--bs-heading-color: inherit;
	--bs-secondary-color: #5A6375;
	--bs-tertiary-color: #7A8294;
	--bs-secondary-bg: #E9EBF0;
	--bs-tertiary-bg: #FFFFFF;
	--bs-border-color: rgba(20, 24, 33, .12);
	--bs-border-color-translucent: rgba(20, 24, 33, .1);
	--bs-border-radius: var(--ss-r);
	--bs-border-radius-sm: var(--ss-r-sm);
	--bs-border-radius-lg: var(--ss-r-lg);
	--bs-border-radius-xl: var(--ss-r-lg);
	--bs-border-radius-pill: 999px;
	--bs-link-color: inherit;
	--bs-link-color-rgb: 20, 24, 33;
	--bs-link-hover-color: inherit;
	--bs-link-hover-color-rgb: 20, 24, 33;
	--bs-link-decoration: none;
	--bs-code-color: var(--ss-t-cherry);
	--bs-focus-ring-color: color-mix(in oklab, var(--ss-accent) 55%, transparent);
	--bs-success: var(--ss-live);
	--bs-danger: var(--ss-danger);
	--bs-warning: var(--ss-warning);
	--bs-info: var(--ss-info);
	--bs-box-shadow: none;
}

[data-bs-theme="dark"] {
	color-scheme: dark;
	--band-bg: #0E1015;
	--band-fg: #F2F3F7;
	--band-muted: #A1A8B8;
	--band-line: rgba(242, 243, 247, .12);
	--band-card: #181B23;
	--band-card-line: rgba(242, 243, 247, .07);
	--band-sunk: #12141A;
	--band-input: #12141A;
	--ss-ledge: #07080B;
	--ss-soft: 0 20px 40px -24px rgba(0, 0, 0, .85);
	--ss-accent-ink: color-mix(in oklab, var(--ss-accent) 76%, white);
	--bs-body-bg: #0E1015;
	--bs-body-color: #F2F3F7;
	--bs-emphasis-color: #F2F3F7;
	--bs-secondary-color: #A1A8B8;
	--bs-tertiary-color: #8790A2;
	--bs-secondary-bg: #12141A;
	--bs-tertiary-bg: #181B23;
	--bs-border-color: rgba(242, 243, 247, .12);
	--bs-border-color-translucent: rgba(242, 243, 247, .09);
	--bs-link-color-rgb: 242, 243, 247;
	--bs-link-hover-color-rgb: 242, 243, 247;
	--bs-code-color: var(--ss-pink);
}

.band { background: var(--band-bg); color: var(--band-fg); position: relative; }
.band-bone {
	--band-bg: #F1F2F5; --band-fg: var(--ss-ink); --band-muted: #5A6375; --band-line: rgba(20, 24, 33, .12);
	--band-card: #FFFFFF; --band-card-line: rgba(20, 24, 33, .08); --band-sunk: #E9EBF0; --band-input: #FFFFFF; --ss-ledge: #D2D6DF;
	--bs-body-color: var(--ss-ink); --bs-secondary-color: #5A6375; --bs-border-color: rgba(20, 24, 33, .12); --bs-link-color-rgb: 20, 24, 33;
}
.band-paper { --band-bg: #FFFFFF; --band-card: #FFFFFF; }
/* night surface: the colour of the scene's night sky */
.band-ink, .ss-night {
	--band-bg: #141936; --band-fg: #F2F3F7; --band-muted: #AEB4CF; --band-line: rgba(242, 243, 247, .14);
	--band-card: #1D2349; --band-card-line: rgba(242, 243, 247, .08); --band-sunk: #0F1330; --band-input: #0F1330; --ss-ledge: #090C21;
	--ss-accent-ink: color-mix(in oklab, var(--ss-accent) 78%, white);
	--bs-body-color: #F2F3F7; --bs-secondary-color: #AEB4CF; --bs-border-color: rgba(242, 243, 247, .14); --bs-link-color-rgb: 242, 243, 247;
	--ss-soft: 0 20px 40px -24px rgba(0, 0, 0, .8);
}
[data-bs-theme="dark"] .band-bone {
	--band-bg: #0E1015; --band-fg: #F2F3F7; --band-muted: #A1A8B8; --band-line: rgba(242, 243, 247, .12);
	--band-card: #181B23; --band-card-line: rgba(242, 243, 247, .07); --band-sunk: #12141A; --band-input: #12141A; --ss-ledge: #07080B;
	--ss-accent-ink: color-mix(in oklab, var(--ss-accent) 76%, white);
	--bs-body-color: #F2F3F7; --bs-secondary-color: #A1A8B8; --bs-border-color: rgba(242, 243, 247, .12); --bs-link-color-rgb: 242, 243, 247;
}
[data-bs-theme="dark"] .band-paper { --band-bg: #13161D; --band-card: #1B1F28; }
[data-bs-theme="dark"] .band-ink, [data-bs-theme="dark"] .ss-night { --band-bg: #11152E; --band-card: #191F40; --band-sunk: #0C1027; --band-input: #0C1027; }

/* =========================================================================
   2. BASE
   ========================================================================= */
html { scroll-padding-top: calc(var(--ss-nav-h) + 16px); text-decoration-skip-ink: none; } /* the thick accent underlines run straight through descenders (g, y, ş) instead of breaking around them */
body { font-family: var(--ss-font); background: var(--band-bg); color: var(--band-fg); overflow-x: hidden; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; }
.ss-main { flex: 1 0 auto; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color .15s var(--ss-ease); }
a:hover { color: inherit; }
p a:not(.btn), .ss-link { color: var(--band-fg); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
p a:not(.btn):hover, .ss-link:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid color-mix(in oklab, var(--ss-accent) 80%, var(--band-fg)); outline-offset: 2px; }
::selection { background: var(--ss-accent); color: var(--ss-on-accent); }
h1, h2, h3, h4, h5, h6 { color: inherit; font-family: var(--ss-display); font-weight: 700; letter-spacing: -.015em; line-height: 1.18; }
h1, .h1 { font-size: 2rem; } h2, .h2 { font-size: 1.6rem; } h3, .h3 { font-size: 1.3rem; } h4, .h4 { font-size: 1.1rem; } h5, .h5 { font-size: 1rem; } h6, .h6 { font-size: .9rem; }
hr { border-color: var(--band-line); opacity: 1; }
small, .small { font-size: .86rem; }
code { font-size: .88em; }
b, strong { font-weight: 650; }
.px, img[src*="minotar.net"], img[src*="cravatar.eu"], img[src*="mc-heads.net"], img[src*="/loaders/head.png"], img[src*="crafatar"], img[src*="/store/products/"], img[src*="/store/categories/"] { image-rendering: pixelated; }
.text-muted, .text-secondary, .text-body-secondary { color: var(--band-muted) !important; }
.text-primary { color: var(--ss-accent-ink) !important; }
.text-success { color: #17A350 !important; }
[data-bs-theme="dark"] .text-success, .band-ink .text-success { color: var(--ss-live) !important; }
.text-danger { color: var(--ss-danger) !important; }
.text-warning { color: #B9770F !important; }
[data-bs-theme="dark"] .text-warning, .band-ink .text-warning { color: var(--ss-warning) !important; }
.bg-body { background: var(--band-bg) !important; }
.bg-primary { background: var(--ss-accent) !important; color: var(--ss-on-accent) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--band-line) !important; }
.container, .container-lg, .container-xl, .container-xxl { --bs-gutter-x: clamp(2rem, 5vw, 4rem); max-width: calc(1320px + var(--bs-gutter-x)); }
.min-w-0 { min-width: 0; }
.visually-hidden-focusable:focus { position: fixed !important; z-index: 2000; top: 8px; left: 8px; background: var(--ss-accent); color: var(--ss-on-accent); padding: .5rem 1rem; border-radius: var(--ss-r-sm); }

/* =========================================================================
   3. TYPE
   ========================================================================= */
.ss-display-font { font-family: var(--ss-display); font-weight: 800; line-height: var(--ss-display-lh); letter-spacing: -.03em; }
.ss-title { font-family: var(--ss-display); font-weight: 800; font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.3rem); line-height: var(--ss-display-lh); letter-spacing: -.035em; margin: 0; }
.ss-title-sm { font-family: var(--ss-display); font-weight: 800; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); line-height: var(--ss-display-lh); letter-spacing: -.03em; margin: 0; }
.ss-title em, .ss-title-sm em { font-style: normal; color: var(--ss-accent-ink); }
.ss-lead { max-width: 38rem; color: var(--band-muted); font-size: 1.08rem; margin: .7rem 0 0; }
.ss-kicker { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--ss-display); font-weight: 700; font-size: .92rem; color: var(--band-muted); margin-bottom: .7rem; }
.ss-kicker::before { content: ""; width: .7rem; height: .7rem; border-radius: 3px; background: var(--ss-accent); box-shadow: none; }
.ss-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem 3rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 1.1rem + 1.2vw, 2.4rem); }
.ss-head--center { justify-content: center; text-align: center; }
.ss-head--center .ss-lead { margin-inline: auto; }
.ss-head-aside { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ss-link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--ss-display); font-weight: 700; font-size: 1rem; color: var(--band-fg); transition: gap .3s var(--ss-spring); }
.ss-link-arrow i { transition: transform .3s var(--ss-spring); }
.ss-link-arrow:hover { color: var(--band-fg); }
.ss-link-arrow:hover i { transform: translateX(4px); }
.ss-sec { padding-block: clamp(3.25rem, 2.4rem + 3vw, 5.5rem); }
.ss-sec-sm { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.ss-sec--sunk { background: var(--band-sunk); padding-top: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); }
.ss-sec--tight-top { padding-top: 0; }
.ss-stats + .ss-sec--tight-top { padding-top: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); }
.ss-price { font-family: var(--ss-display); font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.ss-price-old { color: var(--band-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.ss-num { font-variant-numeric: tabular-nums; }
.ss-shore { position: relative; }

/* =========================================================================
   4. BUTTONS — every button is a small block that sinks into its ledge
   ========================================================================= */
.btn {
	--bs-btn-font-family: var(--ss-display); --bs-btn-font-weight: 700; --bs-btn-font-size: .98rem; --bs-btn-padding-x: 1.1rem; --bs-btn-padding-y: .66rem;
	--bs-btn-border-width: 0; --bs-btn-border-radius: var(--ss-r-sm); --bs-btn-box-shadow: none; --bs-btn-focus-box-shadow: none;
	--bs-btn-color: var(--band-fg); --bs-btn-bg: var(--band-card); --bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--band-fg); --bs-btn-hover-bg: var(--band-card); --bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: var(--band-fg); --bs-btn-active-bg: var(--band-card); --bs-btn-active-border-color: transparent; --bs-btn-disabled-opacity: .55;
	--btn-edge: var(--ss-ledge); --btn-d: 4px;
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem; line-height: 1.25; letter-spacing: -.005em; position: relative;
	box-shadow: none;
	transition: transform .22s var(--ss-spring), box-shadow .22s var(--ss-spring), background-color .2s var(--ss-ease), color .2s var(--ss-ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: none; }
.btn:active, .btn.active:not(.btn-link) { transform: translateY(1px); box-shadow: none; transition-duration: .06s; }
.btn:disabled, .btn.disabled { transform: none; }
.btn:focus-visible { box-shadow: none; }
.btn i[class*="ph-"] { font-size: 1.2em; }
.btn-sm { --bs-btn-padding-x: .8rem; --bs-btn-padding-y: .44rem; --bs-btn-font-size: .87rem; --btn-d: 3px; --bs-btn-border-radius: 9px; }
.btn-lg { --bs-btn-padding-x: 1.45rem; --bs-btn-padding-y: .95rem; --bs-btn-font-size: 1.06rem; --btn-d: 5px; --bs-btn-border-radius: 14px; }
.btn-icon { --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; width: 42px; height: 42px; flex: none; }
.btn-sm.btn-icon { width: 34px; height: 34px; }
.btn-primary, .btn-accent, .btn-arena.btn-accent {
	--bs-btn-color: var(--ss-on-accent); --bs-btn-bg: var(--ss-accent); --bs-btn-hover-color: var(--ss-on-accent); --bs-btn-hover-bg: var(--ss-accent-hover);
	--bs-btn-active-color: var(--ss-on-accent); --bs-btn-active-bg: var(--ss-accent-press); --bs-btn-disabled-color: var(--ss-on-accent); --bs-btn-disabled-bg: var(--ss-accent);
	--btn-edge: var(--ss-accent-edge);
}
.btn-secondary, .btn-light, .btn-white, .btn-default, .btn-frame, .btn-arena:not(.btn-accent):not(.btn-ink):not(.btn-discord) {
	--bs-btn-color: var(--band-fg); --bs-btn-bg: var(--band-card); --bs-btn-hover-color: var(--band-fg); --bs-btn-hover-bg: var(--band-card);
	--bs-btn-active-color: var(--band-fg); --bs-btn-active-bg: var(--band-sunk); --bs-btn-disabled-color: var(--band-muted); --bs-btn-disabled-bg: var(--band-card);
	--btn-edge: var(--ss-ledge);
}
.ss-sec--sunk .btn-secondary, .band-paper .btn-secondary { --bs-btn-bg: var(--band-card); }
.btn-ink, .btn-dark { --bs-btn-color: #fff; --bs-btn-bg: var(--ss-ink); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #232A38; --bs-btn-active-color: #fff; --bs-btn-active-bg: #0C0F15; --btn-edge: #05070A; }
[data-bs-theme="dark"] .btn-ink, .band-ink .btn-ink, [data-bs-theme="dark"] .btn-dark { --bs-btn-bg: #F2F3F7; --bs-btn-color: #141821; --bs-btn-hover-bg: #fff; --bs-btn-hover-color: #141821; --bs-btn-active-bg: #DCDFE6; --bs-btn-active-color: #141821; --btn-edge: #8E95A6; }
.btn-night { --bs-btn-color: #fff; --bs-btn-bg: #2B3266; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #343C77; --bs-btn-active-color: #fff; --bs-btn-active-bg: #232957; --btn-edge: #161A3C; }
.btn-outline-primary { --bs-btn-color: var(--band-fg); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--ss-on-accent); --bs-btn-hover-bg: var(--ss-accent); --bs-btn-active-color: var(--ss-on-accent); --bs-btn-active-bg: var(--ss-accent-press); --btn-edge: var(--ss-accent-edge); box-shadow: none; }
.btn-outline-primary:hover { box-shadow: none; }
.btn-outline-secondary, .btn-outline-light, .btn-outline-dark { --bs-btn-color: var(--band-fg); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--band-fg); --bs-btn-hover-bg: var(--band-card); --bs-btn-active-color: var(--band-fg); --bs-btn-active-bg: var(--band-sunk); --btn-edge: transparent; box-shadow: none; }
.btn-outline-secondary:hover, .btn-outline-light:hover, .btn-outline-dark:hover { --btn-edge: var(--ss-ledge); box-shadow: none; }
.btn-ghost, .btn-transparent, .btn-link { --bs-btn-color: var(--band-fg); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--band-fg); --bs-btn-hover-bg: var(--band-sunk); --bs-btn-active-color: var(--band-fg); --bs-btn-active-bg: var(--band-sunk); --btn-edge: transparent; box-shadow: none; text-decoration: none; }
.btn-ghost:hover, .btn-transparent:hover, .btn-link:hover { transform: none; box-shadow: none; }
.btn-success { --bs-btn-color: #062311; --bs-btn-bg: var(--ss-live); --bs-btn-hover-color: #062311; --bs-btn-hover-bg: #52DD87; --bs-btn-active-color: #062311; --bs-btn-active-bg: #23B85C; --bs-btn-disabled-color: #062311; --bs-btn-disabled-bg: var(--ss-live); --btn-edge: #1C8A45; }
.btn-danger { --bs-btn-color: #fff; --bs-btn-bg: var(--ss-danger); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #F45D71; --bs-btn-active-color: #fff; --bs-btn-active-bg: #D63249; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--ss-danger); --btn-edge: #A8233A; }
.btn-outline-danger { --bs-btn-color: var(--ss-danger); --bs-btn-bg: transparent; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ss-danger); --btn-edge: #A8233A; box-shadow: none; }
.btn-outline-success { --bs-btn-color: #17A350; --bs-btn-bg: transparent; --bs-btn-hover-color: #062311; --bs-btn-hover-bg: var(--ss-live); --btn-edge: #1C8A45; box-shadow: none; }
.btn-warning { --bs-btn-color: #2A1C00; --bs-btn-bg: var(--ss-warning); --bs-btn-hover-color: #2A1C00; --bs-btn-hover-bg: #FFC04D; --bs-btn-active-bg: #E89C0C; --btn-edge: #B57A0C; }
.btn-info { --bs-btn-color: #fff; --bs-btn-bg: var(--ss-info); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #4E9DFF; --bs-btn-active-bg: #1F78E6; --btn-edge: #1C5FB8; }
.btn-discord { --bs-btn-color: #fff; --bs-btn-bg: var(--ss-discord); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6B76F5; --bs-btn-active-color: #fff; --bs-btn-active-bg: #4752C4; --btn-edge: #3A43A8; }
.btn-close { opacity: .6; box-shadow: none; }
[data-bs-theme="dark"] .btn-close, .band-ink .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.btn-arena { --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .92rem; --bs-btn-font-size: 1.04rem; --btn-d: 5px; --bs-btn-border-radius: 14px; white-space: nowrap; }
.btn-arena i[class*="ph-"] { font-size: 1.25em; }
.btn-ink.btn-arena { --bs-btn-color: #fff; --bs-btn-bg: var(--ss-ink); --btn-edge: #05070A; }
.ss-btn-orb { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -.3rem; border-radius: 50%; background: color-mix(in oklab, var(--bs-btn-color) 90%, transparent); color: var(--bs-btn-bg); transition: transform .35s var(--ss-spring); }
.ss-btn-orb i { font-size: .82rem !important; margin-left: 1px; }
.btn:hover .ss-btn-orb { transform: scale(1.14) rotate(-8deg); }

/* =========================================================================
   5. TOP BAR + HEADER
   ========================================================================= */
.ss-topbar { background: #141821; color: #C9CED9; font: 500 .84rem/1 var(--ss-font); position: relative; z-index: 1031; }
[data-bs-theme="dark"] .ss-topbar { background: #07080B; }
.ss-topbar-row { display: flex; align-items: center; gap: 1rem; min-height: 40px; }
.ss-topbar b { color: #fff; font-family: var(--ss-display); font-weight: 700; }
.ss-topbar-status { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.ss-topbar-ip { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .6rem; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .07); color: #E6E9F0; font: 600 .82rem/1 var(--ss-display); white-space: nowrap; transition: background-color .2s; }
.ss-topbar-ip:hover { background: rgba(255, 255, 255, .14); }
.ss-topbar-ip.is-copied { background: color-mix(in oklab, var(--ss-accent) 30%, transparent); }
.ss-topbar-ip-ico { opacity: .6; }
.ss-topbar i { font-size: 1rem; }
.ss-topbar-end { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.ss-topbar-link { display: inline-flex; align-items: center; gap: .4rem; color: #C9CED9; white-space: nowrap; }
.ss-topbar-link:hover { color: #fff; }
.ss-topbar-link b:empty { display: none; }
.ss-rotator { position: relative; flex: 1; min-width: 0; height: 40px; overflow: hidden; }
.ss-rotator a { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; color: #E6E9F0; opacity: 0; transform: translateY(100%); transition: transform .6s var(--ss-ease), opacity .6s var(--ss-ease); }
.ss-rotator a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-rotator a:hover span { text-decoration: underline; text-decoration-color: var(--ss-accent); text-underline-offset: 3px; }
.ss-rotator a.is-on { opacity: 1; transform: none; }
.ss-rotator a.is-out { opacity: 0; transform: translateY(-100%); }
.ss-rotator i { color: var(--ss-accent); flex: none; }

.ss-header { position: sticky; top: 0; z-index: 1030; background: var(--band-card); box-shadow: none; transition: box-shadow .3s var(--ss-ease); }
.ss-header.is-scrolled { box-shadow: none; }
.ss-header-row { display: flex; align-items: center; gap: 1.1rem; height: 76px; }
/* the bar never changes height on scroll: a shrinking sticky header changes the page height right at the top, and
   scroll anchoring then pulls the page a second time (the topbar ended up half hidden after scrolling back up) */

.ss-brand { display: inline-flex; align-items: center; gap: .7rem; flex: none; color: var(--band-fg); max-width: 100%; }
.ss-brand:hover { color: var(--band-fg); }
.ss-brand-logo { height: 46px; width: auto; max-width: 180px; object-fit: contain; transition: transform .5s var(--ss-spring); }
.ss-brand-mark { width: 40px; height: 40px; flex: none; transition: transform .5s var(--ss-spring); }
.ss-brand:hover .ss-brand-mark, .ss-brand:hover .ss-brand-logo { transform: rotate(-6deg) translateY(-2px); }
.ss-brand-mark .t, .ss-loader-mark .t { fill: color-mix(in oklab, var(--ss-accent) 78%, #fff); }
.ss-brand-mark .l, .ss-loader-mark .l { fill: var(--ss-accent); }
.ss-brand-mark .r, .ss-loader-mark .r { fill: var(--ss-accent-edge); }
.ss-brand-mark .g, .ss-loader-mark .g { fill: rgba(255, 255, 255, .55); }
.ss-brand-word { display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.ss-brand-word b { font: 800 1.32rem/1.05 var(--ss-display); letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-brand-word small { margin-top: 4px; font: 600 .78rem/1 var(--ss-font); color: var(--band-muted); white-space: nowrap; }
.ss-brand--light, .ss-brand--light:hover { color: #fff; }
.ss-brand--light .ss-brand-word small { color: #8E95A6; }

.ss-menu-wrap { position: relative; flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; align-items: center; }
.ss-menu { display: flex; align-items: center; gap: .1rem; margin: 0; padding: 0; list-style: none; min-width: 0; }
.ss-menu > li { position: relative; flex: none; }
.ss-menu-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; padding: .7rem .8rem; font: 700 1.02rem/1 var(--ss-display); letter-spacing: -.01em; color: color-mix(in oklab, var(--band-fg) 70%, transparent); white-space: nowrap; transition: color .2s; }
.ss-menu-link:hover, .ss-menu > li.active > .ss-menu-link, .ss-menu-link[aria-expanded="true"] { color: var(--band-fg); }
.ss-menu-link::after { display: none !important; } /* Bootstrap's dropdown caret; ours is an icon */
.ss-menu-ico { display: none; font-size: .95rem; opacity: .75; }
.ss-caret { font-size: .78em; transition: transform .3s var(--ss-spring); }
[aria-expanded="true"] > .ss-caret { transform: rotate(180deg); }
.ss-menu.is-compact > li > .ss-menu-link { padding: .7rem .55rem; font-size: .95rem; }
.ss-menu-ink { position: absolute; left: var(--l, 0); right: var(--r, 100%); bottom: 12px; height: 6px; border-radius: 4px; background: var(--ss-accent); box-shadow: none; opacity: 0; pointer-events: none; transition: left .34s var(--ss-ease), right .34s var(--ss-ease), opacity .2s, bottom .3s var(--ss-ease); }
.ss-menu-ink.is-ready { opacity: 1; }
.ss-menu-ink.go-right { transition: right .26s var(--ss-ease), left .34s .08s var(--ss-ease), opacity .2s, bottom .3s var(--ss-ease); }
.ss-menu-ink.go-left { transition: left .26s var(--ss-ease), right .34s .08s var(--ss-ease), opacity .2s, bottom .3s var(--ss-ease); }

/* dropdown panels (menu, user menu, footer switchers) */
.dropdown-menu { --bs-dropdown-bg: var(--band-card); --bs-dropdown-color: var(--band-fg); --bs-dropdown-border-color: transparent; --bs-dropdown-border-radius: 16px; --bs-dropdown-link-color: var(--band-fg); --bs-dropdown-link-hover-color: var(--band-fg); --bs-dropdown-link-hover-bg: var(--band-sunk); --bs-dropdown-link-active-color: var(--ss-on-accent); --bs-dropdown-link-active-bg: var(--ss-accent); --bs-dropdown-divider-bg: var(--band-line); --bs-dropdown-header-color: var(--band-muted); --bs-dropdown-padding-x: .45rem; --bs-dropdown-padding-y: .45rem; --bs-dropdown-item-padding-x: .75rem; --bs-dropdown-item-padding-y: .55rem; --bs-dropdown-item-border-radius: 10px; --bs-dropdown-font-size: .95rem; box-shadow: none; }
.dropdown-menu.show { animation: ss-pop .32s var(--ss-spring) both; }
.dropdown-item { display: flex; align-items: center; gap: .65rem; font-weight: 600; border-radius: var(--bs-dropdown-item-border-radius); }
.dropdown-item i[class*="ph-"] { font-size: 1.15rem; color: var(--band-muted); }
.dropdown-item:hover i[class*="ph-"] { color: var(--band-fg); }
.dropdown-header { font: 700 .78rem/1.2 var(--ss-display); }
.ss-drop { min-width: 240px; margin-top: 10px !important; }
.ss-menu .dropdown-menu { top: calc(100% + 2px); left: -.5rem; }
.ss-menu .dropdown-menu-end { left: auto; right: -.5rem; }
.ss-drop:not(.ss-drop--list):not(.ss-user-menu) { display: none; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: .15rem; min-width: 380px; padding: .5rem; }
.ss-drop:not(.ss-drop--list):not(.ss-user-menu).show { display: grid; }
.ss-drop:not(.ss-drop--list):not(.ss-user-menu):has(> li:only-child) { grid-template-columns: 1fr; min-width: 240px; }
.ss-drop-item { gap: .75rem; padding: .55rem; font-family: var(--ss-display); font-weight: 700; font-size: .97rem; white-space: normal; }
.ss-drop.show > li { animation: ss-rise .42s var(--ss-ease) both; animation-delay: calc(var(--i, 0) * 35ms + 40ms); }
.ss-drop-item .ss-ico { transition: transform .3s var(--ss-spring); }
.ss-drop-item:hover .ss-ico { transform: translateY(-2px) rotate(-6deg); }
.ss-drop-item:active { background: var(--band-sunk); color: var(--band-fg); }
/* individual translate/scale compose with Popper's inline transform, so positioned dropdowns do not jump */
@keyframes ss-pop { from { opacity: 0; translate: 0 -10px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes ss-rise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

.ss-actions { display: flex; align-items: center; gap: .45rem; margin-left: auto; flex: none; }
.ss-act { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--band-fg); font-size: 1.4rem; cursor: pointer; }
.ss-act::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--band-sunk); transform: scale(.5); opacity: 0; transition: transform .3s var(--ss-spring), opacity .2s; }
.ss-act:hover, .ss-act:focus-visible { color: var(--band-fg); }
.ss-act:hover::before, .ss-act:focus-visible::before, .ss-act[aria-expanded="true"]::before { transform: scale(1); opacity: 1; }
.ss-act > * { position: relative; }
.ss-act > i { transition: transform .25s var(--ss-spring); }
.ss-act:active > i { transform: scale(.86); }
.ss-act--boxed { border-radius: 12px; background: var(--band-sunk); }
.ss-act--sm { width: 36px; height: 36px; font-size: 1.15rem; }
[data-ss-theme-toggle]:hover > i { transform: rotate(-18deg); }
.ss-ico-sun { display: none; }
[data-bs-theme="dark"] .ss-ico-sun { display: inline; }
[data-bs-theme="dark"] .ss-ico-moon { display: none; }
.ss-badge { position: absolute; top: 2px; right: -1px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; background: var(--ss-accent); color: var(--ss-on-accent); font: 800 .72rem/1 var(--ss-display); box-shadow: none; }
.ss-badge[hidden] { display: none; }
.ss-badge.is-bump { animation: ss-bump .5s var(--ss-spring); }
@keyframes ss-bump { 40% { transform: scale(1.4); } }

.ss-user { display: flex; align-items: center; gap: .6rem; padding: 4px 8px 4px 4px; border-radius: 14px; color: var(--band-fg); transition: background-color .2s; }
.ss-user:hover, .ss-user[aria-expanded="true"] { background: var(--band-sunk); color: var(--band-fg); }
.ss-user-avatar { position: relative; display: block; flex: none; }
.ss-user-avatar .ss-avatar { width: 40px; height: 40px; border-radius: 10px; box-shadow: none; }
.ss-user-avatar::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--ss-live); box-shadow: none; }
.ss-user-text { display: flex; flex-direction: column; min-width: 0; max-width: 140px; line-height: 1.15; }
.ss-user-text b { font: 700 .95rem/1.15 var(--ss-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-user-text small { font: 600 .78rem/1.25 var(--ss-font); color: var(--band-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-user-menu { min-width: 270px; }
.ss-user-menu.show > .dropdown-item { animation: ss-rise .4s var(--ss-ease) both; animation-delay: calc(var(--i, 0) * 30ms + 60ms); }
.ss-balance { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .35rem; padding: .8rem .85rem; border-radius: 12px; background: var(--ss-accent); color: var(--ss-on-accent); box-shadow: none; transition: transform .25s var(--ss-spring); }
.ss-balance:hover { color: var(--ss-on-accent); transform: translateY(-1px); }
.ss-balance-label { display: block; font: 600 .78rem/1.2 var(--ss-font); opacity: .85; }
.ss-balance-value { display: block; font: 800 1.3rem/1.1 var(--ss-display); letter-spacing: -.02em; }
.ss-balance-add { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .65rem; border-radius: 9px; background: rgba(0, 0, 0, .12); font: 700 .82rem/1 var(--ss-display); }
.ss-guest { display: flex; align-items: center; gap: .6rem; }
/* account pair: one block shape, light "Giriş" + ink "Kayıt"; equal width so neither reads as the odd one out */
.ss-auth-btn { --bs-btn-padding-x: .95rem; --bs-btn-padding-y: .62rem; --bs-btn-font-size: .95rem; min-width: 118px; gap: .45rem; }
.ss-auth-btn i[class*="ph-"] { font-size: 1.12em; }
.ss-auth-btn--in { --bs-btn-color: var(--ss-ink); --bs-btn-bg: #EEF1F6; --bs-btn-hover-color: var(--ss-ink); --bs-btn-hover-bg: #F6F8FB; --bs-btn-active-color: var(--ss-ink); --bs-btn-active-bg: #E2E6EE; --btn-edge: #C9CFDB; }
.ss-auth-btn--up { --bs-btn-color: #fff; --bs-btn-bg: var(--ss-ink); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #262D3D; --bs-btn-active-color: #fff; --bs-btn-active-bg: #0C0F15; --btn-edge: #05070A; }
[data-bs-theme="dark"] .ss-auth-btn--in { --bs-btn-bg: #F2F3F7; --bs-btn-hover-bg: #FFFFFF; --bs-btn-active-bg: #DCDFE6; --btn-edge: #8E95A6; }
[data-bs-theme="dark"] .ss-auth-btn--up { --bs-btn-bg: #2A3142; --bs-btn-hover-bg: #343C50; --bs-btn-active-bg: #222837; --btn-edge: #05070A; box-shadow: none; }
[data-bs-theme="dark"] .ss-auth-btn--up:hover { box-shadow: none; }
.ss-sheet-guest .ss-auth-btn { min-width: 0; --bs-btn-padding-y: .78rem; }
.ss-nav-cta { margin-left: .3rem; --bs-btn-padding-x: 1.05rem; --bs-btn-padding-y: .74rem; }
.ss-burger { display: none; }

/* mobile sheet */
.ss-sheet { --bs-offcanvas-width: min(390px, 90vw); --bs-offcanvas-bg: var(--band-card); --bs-offcanvas-color: var(--band-fg); --bs-offcanvas-border-color: transparent; }
.ss-sheet .offcanvas-header { padding: 1rem 1.1rem; box-shadow: none; }
.ss-sheet .offcanvas-body { padding: 1.25rem 1.1rem 1.5rem; }
.ss-mnav { display: grid; gap: .3rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.ss-mnav > li > a { display: flex; align-items: center; gap: .85rem; padding: .6rem; border-radius: 14px; font: 700 1.08rem/1.2 var(--ss-display); color: var(--band-fg); }
.ss-mnav > li > a:hover, .ss-mnav > li.active > a { background: var(--band-sunk); color: var(--band-fg); }
.ss-mnav-text { flex: 1; min-width: 0; }
.ss-mnav-sub { margin: .2rem 0 .4rem 3.4rem; padding: 0; list-style: none; display: grid; gap: .1rem; }
.ss-mnav-sub a { display: block; padding: .45rem .6rem; border-radius: 10px; font-weight: 600; color: var(--band-muted); }
.ss-mnav-sub a:hover { background: var(--band-sunk); color: var(--band-fg); }
.ss-sheet.showing .ss-mnav > li, .ss-sheet.show .ss-mnav > li { animation: ss-slide .5s var(--ss-ease) both; animation-delay: calc(var(--i, 0) * 40ms + 80ms); }
@keyframes ss-slide { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.ss-sheet-user { display: flex; align-items: center; gap: .8rem; padding: .85rem; border-radius: 16px; background: var(--band-sunk); }
.ss-sheet-user .ss-avatar { border-radius: 10px; }
.ss-sheet-balance { color: var(--band-muted); font-size: .88rem; }
.ss-sheet-account { display: grid; gap: .1rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.ss-sheet-account a, .ss-sheet-account button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem .7rem; border: 0; border-radius: 10px; background: none; color: var(--band-fg); font-weight: 600; text-align: left; }
.ss-sheet-account a:hover, .ss-sheet-account button:hover { background: var(--band-sunk); }
.ss-sheet-account i { font-size: 1.15rem; color: var(--band-muted); }
.ss-sheet-account button { color: var(--ss-danger); }
.ss-sheet-account button i { color: var(--ss-danger); }
.ss-sheet-guest { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ss-sheet-foot { display: flex; align-items: center; gap: .6rem; margin-top: 1.5rem; }

@media (max-width: 1599.98px) { .ss-user-text { max-width: 110px; } }
@media (max-width: 1399.98px) { .ss-user-text, .ss-user > .ss-caret { display: none; } }
@media (max-width: 1199.98px) {
	.ss-menu-wrap { display: none; }
	.ss-burger { display: grid; }
	.ss-rotator { display: none; }
}
@media (max-width: 991.98px) { .ss-topbar-ip { display: none; } }
@media (max-width: 767.98px) {
	.ss-header-row { height: 66px; gap: .6rem; }
	.ss-hide-mobile { display: none !important; }
	.ss-nav-cta { display: none; }
	.ss-brand-logo { height: 38px; }
	.ss-brand-word b { font-size: 1.15rem; max-width: 190px; }
	.ss-brand-word small { display: none; }
}
@media (max-width: 991.98px) and (min-width: 768px) { .ss-hide-lg { display: none !important; } }
@media (max-width: 479.98px) { .ss-topbar-link span { display: none; } }

/* =========================================================================
   6. TONES, ICON BLOCKS, CHIPS, BADGES, AVATARS, META
   ========================================================================= */
.ss-tone-1, .ss-tone-grape { --tone: var(--ss-t-grape); --tone-fg: #fff; }
.ss-tone-2, .ss-tone-sky { --tone: var(--ss-t-sky); --tone-fg: #fff; }
.ss-tone-3, .ss-tone-cherry { --tone: var(--ss-t-cherry); --tone-fg: #fff; }
.ss-tone-4, .ss-tone-mint { --tone: var(--ss-t-mint); --tone-fg: #fff; }
.ss-tone-5, .ss-tone-tangerine { --tone: var(--ss-t-tangerine); --tone-fg: #fff; }
.ss-tone-6, .ss-tone-leaf { --tone: var(--ss-t-leaf); --tone-fg: #fff; }
.ss-tone-sun { --tone: var(--ss-t-sun); --tone-fg: #2A1C00; }
.ss-tone-accent { --tone: var(--ss-accent); --tone-fg: var(--ss-on-accent); }
.ss-tone-discord { --tone: var(--ss-discord); --tone-fg: #fff; }
[class*="ss-tone-"] { --tone-edge: color-mix(in oklab, var(--tone) 64%, #000); }

.ss-ico { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--tone, var(--band-sunk)); color: var(--tone-fg, var(--band-fg)); font-size: 1.15rem; box-shadow: none; }
.ss-ico i { line-height: 1; }
.ss-ico--lg { width: 52px; height: 52px; border-radius: 14px; font-size: 1.55rem; box-shadow: none; }
.ss-ico--sm { width: 30px; height: 30px; border-radius: 9px; font-size: .95rem; box-shadow: none; }

.ss-chip, .badge { --chip-bg: var(--band-sunk); --chip-fg: var(--band-fg); display: inline-flex; align-items: center; gap: .35rem; font-family: var(--ss-display); font-weight: 700; font-size: .78rem; letter-spacing: 0; line-height: 1.15; padding: .34rem .66rem; background: var(--chip-bg); color: var(--chip-fg); border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.ss-chip i, .badge i { font-size: 1.05em; }
.ss-chip--accent, .badge.bg-primary, .badge.text-bg-primary { --chip-bg: var(--ss-accent); --chip-fg: var(--ss-on-accent); background: var(--chip-bg) !important; color: var(--chip-fg) !important; box-shadow: none; }
.ss-chip--ink, .badge.bg-dark, .badge.text-bg-dark { --chip-bg: var(--ss-ink); --chip-fg: #fff; background: var(--chip-bg) !important; color: var(--chip-fg) !important; }
[data-bs-theme="dark"] .ss-chip--ink, .band-ink .ss-chip--ink { --chip-bg: #F2F3F7; --chip-fg: #141821; }
.ss-chip--info, .badge.bg-info, .badge.text-bg-info, .badge.bg-blue { --chip-bg: var(--ss-t-sky); --chip-fg: #fff; background: var(--chip-bg) !important; color: var(--chip-fg) !important; }
.ss-chip--pink { --chip-bg: var(--ss-pink); --chip-fg: #2C0A1B; }
.ss-chip--danger, .badge.bg-danger, .badge.text-bg-danger, .badge.bg-red { --chip-bg: var(--ss-danger); --chip-fg: #fff; background: var(--chip-bg) !important; color: var(--chip-fg) !important; }
.ss-chip--live, .badge.bg-success, .badge.text-bg-success, .badge.bg-green { --chip-bg: var(--ss-live); --chip-fg: #062311; background: var(--chip-bg) !important; color: var(--chip-fg) !important; }
.ss-chip--warning, .badge.bg-warning, .badge.text-bg-warning, .badge.bg-yellow, .badge.bg-orange { --chip-bg: var(--ss-t-sun); --chip-fg: #2A1C00; background: var(--chip-bg) !important; color: var(--chip-fg) !important; }
.ss-chip--light, .badge.bg-light, .badge.bg-secondary, .badge.text-bg-secondary { --chip-bg: var(--band-sunk); --chip-fg: var(--band-fg); background: var(--chip-bg) !important; color: var(--chip-fg) !important; }
.ss-chip--soft { --chip-bg: var(--ss-accent-soft); --chip-fg: var(--ss-accent-ink); }
.ss-chip--tone { --chip-bg: var(--tone); --chip-fg: var(--tone-fg); box-shadow: none; }
.ss-chip-row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
a.ss-chip, a.ss-chip:hover { text-decoration: none; }
a.ss-chip { transition: transform .25s var(--ss-spring), filter .2s; }
a.ss-chip:hover { filter: brightness(1.06); transform: translateY(-1px); }
[class*="role__"] { display: inline-flex; align-items: center; padding: .22rem .55rem; border-radius: 999px; font: 700 .74rem/1.2 var(--ss-display); background: color-mix(in srgb, var(--band-fg) 10%, transparent); color: var(--band-fg); }
.ss-meta { display: flex; align-items: center; gap: .55rem .9rem; flex-wrap: wrap; font-size: .88rem; color: var(--band-muted); font-weight: 500; }
.ss-meta i[class*="ph-"] { font-size: 1.05em; }
.ss-date { font-family: var(--ss-display); font-weight: 700; font-size: .84rem; color: var(--band-muted); }
.ss-avatar, .avatar { width: 40px; height: 40px; border-radius: 10px; flex: none; object-fit: cover; background: #8a8f9b; display: inline-block; vertical-align: middle; box-shadow: none; }
.ss-avatar--xs, .avatar-xs { width: 22px; height: 22px; border-radius: 6px; box-shadow: none; }
.ss-avatar--sm, .avatar-sm { width: 28px; height: 28px; border-radius: 8px; }
.ss-avatar--md, .avatar-md { width: 40px; height: 40px; }
.ss-avatar--lg, .avatar-lg { width: 56px; height: 56px; border-radius: 14px; box-shadow: none; }
.ss-avatar--xl, .avatar-xl { width: 88px; height: 88px; border-radius: 20px; box-shadow: none; }
.ss-live, .ss-live-dot { position: relative; display: inline-block; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--ss-live); color: var(--ss-live); }
.ss-live::after, .ss-live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: ss-ping 2.4s var(--ss-ease) infinite; }
@keyframes ss-ping { 0% { transform: scale(.4); opacity: .9; } 70%, 100% { transform: scale(1.4); opacity: 0; } }
@keyframes ss-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* =========================================================================
   7. PANELS / CARDS / LISTS — content blocks with a ledge
   ========================================================================= */
.ss-panel, .card { --bs-card-bg: var(--band-card); --bs-card-color: var(--band-fg); --bs-card-border-color: transparent; --bs-card-border-width: 0; --bs-card-border-radius: var(--ss-r-lg); --bs-card-inner-border-radius: var(--ss-r-lg); --bs-card-cap-bg: transparent; --bs-card-cap-padding-y: 1rem; --bs-card-cap-padding-x: 1.35rem; --bs-card-spacer-y: 1.35rem; --bs-card-spacer-x: 1.35rem; --bs-card-title-color: var(--band-fg); --bs-card-subtitle-color: var(--band-muted); position: relative; background: var(--band-card); color: var(--band-fg); border: 0; border-radius: var(--ss-r-lg); box-shadow: none; }
.ss-panel + .ss-panel, .card + .card { margin-top: 1.4rem; }
.ss-panel-head, .card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--band-card-line); background: transparent; }
.card-header:first-child { border-radius: var(--ss-r-lg) var(--ss-r-lg) 0 0; }
.ss-panel-title, .card-header .card-title { font-family: var(--ss-display); font-weight: 800; font-size: 1.22rem; line-height: 1.15; letter-spacing: -.02em; margin: 0; }
.card-title { font-family: var(--ss-display); font-weight: 700; font-size: 1.1rem; margin-bottom: .5rem; }
.ss-panel-sub { font-size: .86rem; color: var(--band-muted); font-weight: 600; }
.ss-panel-body, .card-body { padding: 1.35rem; }
.ss-panel-foot, .card-footer { padding: 1rem 1.35rem; border-top: 1px solid var(--band-card-line); background: transparent; }
.card-footer:last-child { border-radius: 0 0 var(--ss-r-lg) var(--ss-r-lg); }
.ss-panel--flush > .ss-panel-body, .card-body.p-0 { padding: 0 !important; }
.ss-panel--ink { --band-card: #1D2349; --band-fg: #F2F3F7; --band-muted: #AEB4CF; --band-card-line: rgba(242, 243, 247, .08); --band-line: rgba(242, 243, 247, .14); --band-sunk: #0F1330; --ss-ledge: #090C21; --ss-accent-ink: color-mix(in oklab, var(--ss-accent) 78%, white); }
.ss-panel--accent { box-shadow: none; }
a.ss-panel, a.card { transition: transform .3s var(--ss-spring), box-shadow .3s var(--ss-spring); }
a.ss-panel:hover, a.card:hover { transform: translateY(-3px); box-shadow: none; color: var(--band-fg); }
a.ss-panel:active, a.card:active { transform: translateY(2px); box-shadow: none; transition-duration: .08s; }
.card-img-top { border-radius: var(--ss-r-lg) var(--ss-r-lg) 0 0; }
.ss-aside { position: sticky; top: calc(var(--ss-nav-h) + 1.25rem); }
.ss-stack > * + * { margin-top: 1.4rem; }
.ss-list { list-style: none; margin: 0; padding: 0; }
.ss-list-item { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.35rem; border-top: 1px solid var(--band-card-line); position: relative; }
.ss-list-item:first-child { border-top: 0; }
a.ss-list-item:hover, .ss-list-item.is-link:hover { background: color-mix(in oklab, var(--band-sunk) 60%, transparent); color: var(--band-fg); }
.ss-list-main { flex: 1 1 auto; min-width: 0; }
.ss-list-title { display: block; font-family: var(--ss-display); font-weight: 700; color: var(--band-fg); line-height: 1.3; overflow-wrap: anywhere; }
a.ss-list-title:hover, .ss-list-item:hover .ss-list-title { color: var(--band-fg); text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.ss-list-meta { font-size: .85rem; color: var(--band-muted); display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin-top: .15rem; }
.ss-list-end { flex: none; display: flex; align-items: center; gap: .6rem; color: var(--band-muted); font-weight: 600; font-size: .9rem; }
.ss-list-pos { font-family: var(--ss-display); font-weight: 800; font-size: 1.15rem; width: 1.6rem; color: var(--band-muted); flex: none; }
.ss-list--plain .ss-list-item { padding-inline: 0; }
.ss-kv { display: grid; grid-template-columns: minmax(min(42%, 7rem), max-content) minmax(0, 1fr); column-gap: 1rem; margin: 0; }
.ss-kv dt, .ss-kv dd { margin: 0; padding: .75rem 0; border-top: 1px solid var(--band-card-line); }
.ss-kv dt { color: var(--band-muted); font-weight: 600; font-size: .9rem; padding-right: 1rem; }
.ss-kv dd { font-weight: 600; overflow-wrap: anywhere; }
.ss-kv dt:first-of-type, .ss-kv dd:first-of-type { border-top: 0; }
.ss-stat { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ss-stat-label { font-size: .86rem; font-weight: 600; color: var(--band-muted); display: inline-flex; align-items: center; gap: .45rem; }
.ss-stat-value { font-family: var(--ss-display); font-weight: 800; font-size: 2rem; line-height: 1.05; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.ss-stat-sub { font-size: .85rem; color: var(--band-muted); display: inline-flex; align-items: center; gap: .45rem; }
.ss-stat-sub a { color: var(--ss-discord); font-weight: 600; }
[data-bs-theme="dark"] .ss-stat-sub a { color: #8C96FF; }
.ss-amount { font-family: var(--ss-display); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* stat blocks: the home strip and every [ss-rail] stat row */
.ss-stats { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; margin-top: -72px; }
.ss-stats[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-stats[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-stats[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.ss-stat-block, .ss-rail-stat { display: flex; align-items: center; gap: 1rem; min-width: 0; padding: 1.15rem 1.25rem; border-radius: var(--ss-r-lg); background: var(--band-card); box-shadow: none; transition: transform .3s var(--ss-spring), box-shadow .3s var(--ss-spring); }
.ss-stat-block:hover { transform: translateY(-2px); box-shadow: none; } /* lift only: the grid layer (::before) is not part of the shared hover hit-area rule, so it never swaps */
/* home strip: each block carries its tone — a tinted corner glow, a voxel grid fading in from the right, a tone cap
   on top and the icon again as a big tilted watermark, so a two-block strip never reads as two empty white boxes */
.ss-stat-block { position: relative; overflow: hidden; isolation: isolate; gap: 1.15rem; padding: 1.35rem 1.5rem 1.3rem;
	background: var(--tone, var(--band-card)); }
.ss-stat-block::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 52%; z-index: -1; pointer-events: none;
	background-image: none;
	background-size: 16px 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 75%); mask-image: linear-gradient(90deg, transparent, #000 75%); }
.ss-stat-block::after { content: ""; position: absolute; top: 0; left: 1.5rem; width: 54px; height: 5px; border-radius: 0 0 5px 5px; background: var(--tone, var(--ss-accent)); }
.ss-stat-wm { position: absolute; right: -.3rem; bottom: -1.6rem; z-index: -1; font-size: 7.2rem; line-height: 1; color: var(--tone, var(--ss-accent)); opacity: .14; transform: rotate(-12deg); transition: transform .6s var(--ss-spring), opacity .3s; pointer-events: none; }
.ss-stat-block:hover .ss-stat-wm { transform: rotate(-5deg) scale(1.05); opacity: .2; }

.ss-stat-block .ss-stat-value { font-size: 2.15rem; margin: .1rem 0 .3rem; }
.ss-stat-block .ss-stat-sub { flex-wrap: wrap; gap: .4rem; font-weight: 500; }
.ss-stat-trend { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .5rem; border-radius: 999px; background: color-mix(in oklab, var(--ss-live) 17%, transparent); color: #128A43; font: 700 .8rem/1 var(--ss-display); font-variant-numeric: tabular-nums; }
[data-bs-theme="dark"] .ss-stat-trend { color: #5BE38E; }
.ss-stat-chip { display: inline-flex; align-items: center; padding: .22rem .52rem; border-radius: 7px; background: color-mix(in oklab, var(--tone, var(--ss-accent)) 15%, var(--band-sunk)); color: var(--band-fg); font: 700 .78rem/1 var(--ss-display); }
.ss-stat-sub a.ss-stat-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--band-fg); font-weight: 700; }
.ss-stat-sub a.ss-stat-link:hover { text-decoration: underline; text-decoration-color: var(--tone, var(--ss-accent)); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.ss-rail { padding-block: 1.5rem; }
.ss-rail-grid { display: grid; grid-template-columns: repeat(var(--rail-cols, 4), minmax(0, 1fr)); gap: 1rem; }
.ss-rail-stat > i[class*="ph-"] { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--ss-accent); color: var(--ss-on-accent); font-size: 1.45rem; box-shadow: none; }
.ss-rail-stat:nth-child(2) > i[class*="ph-"] { background: var(--ss-t-sky); color: #fff; box-shadow: none; }
.ss-rail-stat:nth-child(3) > i[class*="ph-"] { background: var(--ss-t-grape); color: #fff; box-shadow: none; }
.ss-rail-stat:nth-child(4) > i[class*="ph-"] { background: var(--ss-t-sun); color: #2A1C00; box-shadow: none; }
@media (max-width: 991.98px) {
	.ss-stats, .ss-stats[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-rail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
	.ss-stats { gap: .75rem; margin-top: -84px; }
	.ss-stats[data-count="3"] > :last-child:nth-child(odd), .ss-stats[data-count="1"] > * { grid-column: 1 / -1; }
	.ss-stat-block, .ss-rail-stat { flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1rem; }
	.ss-stat-block .ss-ico--lg { width: 42px; height: 42px; border-radius: 12px; font-size: 1.25rem; }
	.ss-stat-value { font-size: 1.6rem; }
}

/* =========================================================================
   8. TABLES / FORMS / ALERTS / PROGRESS
   ========================================================================= */
.table { --bs-table-bg: transparent; --bs-table-color: var(--band-fg); --bs-table-border-color: var(--band-card-line); --bs-table-striped-bg: color-mix(in oklab, var(--band-sunk) 50%, transparent); --bs-table-striped-color: var(--band-fg); --bs-table-hover-bg: color-mix(in oklab, var(--band-sunk) 70%, transparent); --bs-table-hover-color: var(--band-fg); --bs-table-active-bg: var(--band-sunk); --bs-table-active-color: var(--band-fg); margin: 0; font-size: .94rem; vertical-align: middle; }
.table > :not(caption) > * > * { padding: .85rem 1rem; border-bottom-color: var(--band-card-line); background-color: var(--bs-table-bg); color: var(--band-fg); }
.table > thead > tr > th, .table thead th { font-family: var(--ss-display); font-size: .84rem; font-weight: 700; letter-spacing: 0; color: var(--band-muted); background: var(--band-sunk); border-bottom: 0; white-space: nowrap; }
.table > thead > tr > th:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.table > thead > tr > th:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table a:not(.btn) { font-weight: 700; color: var(--band-fg); }
.table a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 3px; }
.ss-panel > .table-responsive > .table > thead > tr > th, .card > .table-responsive > .table > thead > tr > th { border-radius: 0; }
.form-label { font-family: var(--ss-display); font-weight: 700; font-size: .92rem; margin-bottom: .45rem; display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; color: var(--band-fg); }
.form-label-description { font-family: var(--ss-font); font-weight: 500; font-size: .85rem; }
.form-label-description a { text-decoration: underline; text-decoration-color: var(--ss-accent); text-underline-offset: 2px; }
.form-text { color: var(--band-muted); font-size: .84rem; }
.form-control, .form-select { background-color: var(--band-input); color: var(--band-fg); border: 2px solid var(--band-line); border-radius: 12px; padding: .66rem .9rem; font-size: .98rem; font-weight: 500; line-height: 1.4; box-shadow: none; transition: border-color .15s, box-shadow .2s, background-color .15s; }
.form-control::placeholder { color: var(--band-muted); opacity: .85; font-weight: 400; }
.form-control:hover, .form-select:hover { border-color: color-mix(in oklab, var(--band-fg) 30%, transparent); }
.form-control:focus, .form-select:focus { background-color: var(--band-input); color: var(--band-fg); border-color: var(--ss-accent); box-shadow: none; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--band-sunk); color: var(--band-muted); opacity: 1; }
.form-control-sm, .form-select-sm { padding: .44rem .7rem; font-size: .88rem; border-radius: 10px; }
.form-control-lg { padding: .85rem 1rem; font-size: 1.05rem; }
textarea.form-control { min-height: 130px; }
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237A8294' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m3 6 5 5 5-5'/%3e%3c/svg%3e"); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--ss-danger); }
.invalid-feedback { color: var(--ss-danger); font-size: .84rem; font-weight: 600; }
.form-check { min-height: 1.5rem; margin-bottom: .4rem; display: block; }
.form-check-input { width: 1.2rem; height: 1.2rem; margin-top: .16rem; background-color: var(--band-input); border: 2px solid var(--band-line); }
.form-check-input[type=checkbox] { border-radius: 6px; }
.form-check-input:checked { background-color: var(--ss-accent); border-color: var(--ss-accent-edge); }
.form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23141821' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.2' d='m5.5 10 3 3 6-6.5'/%3e%3c/svg%3e"); }
.form-check-input:focus { border-color: var(--ss-accent); box-shadow: none; }
.form-check-label { font-size: .96rem; cursor: pointer; }
.form-switch .form-check-input { width: 2.4rem; border-radius: 2rem; }
.input-group-text { background: var(--band-sunk); color: var(--band-muted); border: 2px solid var(--band-line); border-radius: 12px; font-weight: 600; font-size: .92rem; }
.input-group > .btn { --btn-d: 0px; transform: none; box-shadow: none; }
.input-group > .btn:active { transform: none; }
.input-group-flat .form-control { border-right: 0; }
.input-group-flat .input-group-text { background: var(--band-input); border-left: 0; background-clip: padding-box; }
.input-group-flat:focus-within .input-group-text, .input-group-flat:focus-within .form-control { border-color: var(--ss-accent); }
.input-group-flat:focus-within { box-shadow: none; border-radius: 12px; }
.input-group-flat .form-control:focus { box-shadow: none; }
.form-footer { margin-top: 1.5rem; }
.hr-text { display: flex; align-items: center; gap: .9rem; margin: 1.5rem 0; font-size: .85rem; font-weight: 600; color: var(--band-muted); }
.hr-text::before, .hr-text::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--band-line); }
.form-range::-webkit-slider-thumb { background: var(--ss-accent); }
.form-range::-moz-range-thumb { background: var(--ss-accent); }
.alert { --bs-alert-padding-x: 1.1rem; --bs-alert-padding-y: .9rem; --bs-alert-border-radius: var(--ss-r); --bs-alert-margin-bottom: 1.25rem; position: relative; padding-left: 3.1rem; border: 0; background: color-mix(in oklab, var(--alert-c, var(--ss-info)) 12%, var(--band-card)); color: var(--band-fg); font-weight: 500; box-shadow: none; }
.alert::before { font-family: "Phosphor-Bold"; position: absolute; left: 1rem; top: .78rem; font-size: 1.35rem; line-height: 1.2; color: var(--alert-c, var(--ss-info)); content: "\e2ce"; }
.alert-success { --alert-c: #1FB25A; } .alert-success::before { content: "\e184"; }
.alert-danger, .alert-error { --alert-c: var(--ss-danger); } .alert-danger::before, .alert-error::before { content: "\e4e2"; }
.alert-warning { --alert-c: #E89C0C; } .alert-warning::before { content: "\e4e0"; }
.alert-info, .alert-primary, .alert-secondary { --alert-c: var(--ss-info); }
.alert a:not(.btn) { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.alert br:last-child { display: none; }
.progress { --bs-progress-height: 14px; --bs-progress-bg: var(--band-sunk); --bs-progress-border-radius: 8px; --bs-progress-bar-bg: var(--ss-accent); --bs-progress-bar-color: var(--ss-on-accent); --bs-progress-font-size: .72rem; box-shadow: none; }
.progress-bar { font-family: var(--ss-display); font-weight: 800; border-radius: 8px; box-shadow: none; }
.progress-bar.bg-success { background-color: var(--ss-live) !important; color: #062311; }

/* =========================================================================
   9. TABS / PAGINATION / BREADCRUMB / MODAL / ACCORDION / LIST GROUP / TOOLTIP / TOAST
   ========================================================================= */
.nav-tabs { --bs-nav-tabs-border-color: var(--band-line); --bs-nav-tabs-border-width: 2px; --bs-nav-tabs-border-radius: 0; gap: .25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link { border: 0; border-bottom: 4px solid transparent; border-radius: 0; color: var(--band-muted); font-family: var(--ss-display); font-weight: 700; padding: .75rem .95rem; margin-bottom: -2px; white-space: nowrap; background: none; transition: color .2s, border-color .25s var(--ss-ease); }
.nav-tabs .nav-link:hover { color: var(--band-fg); border-bottom-color: var(--band-line); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--band-fg); background: none; border-bottom-color: var(--ss-accent); }
.nav-pills { --bs-nav-pills-border-radius: 10px; gap: .3rem; padding: 4px; border-radius: 14px; background: var(--band-sunk); width: fit-content; max-width: 100%; flex-wrap: wrap; }
.nav-pills .nav-link { color: var(--band-muted); font-family: var(--ss-display); font-weight: 700; padding: .5rem .9rem; background: transparent; border: 0; transition: color .2s, background-color .2s, box-shadow .25s var(--ss-spring); }
.nav-pills .nav-link:hover { color: var(--band-fg); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--band-card); color: var(--band-fg); box-shadow: none; }
.nav-pills .nav-link.btn-sm { padding: .38rem .7rem; font-size: .84rem; }
.pagination { --bs-pagination-color: var(--band-fg); --bs-pagination-bg: var(--band-card); --bs-pagination-border-width: 0; --bs-pagination-hover-color: var(--band-fg); --bs-pagination-hover-bg: var(--band-card); --bs-pagination-focus-color: var(--band-fg); --bs-pagination-focus-bg: var(--band-card); --bs-pagination-focus-box-shadow: none; --bs-pagination-active-color: var(--ss-on-accent); --bs-pagination-active-bg: var(--ss-accent); --bs-pagination-disabled-color: var(--band-muted); --bs-pagination-disabled-bg: transparent; --bs-pagination-padding-x: .9rem; --bs-pagination-padding-y: .5rem; --bs-pagination-border-radius: 11px; gap: .45rem; margin: 0; flex-wrap: wrap; font-family: var(--ss-display); font-weight: 800; font-size: 1rem; }
.pagination .page-link { border-radius: 11px !important; min-width: 2.8rem; text-align: center; box-shadow: none; transition: transform .22s var(--ss-spring), box-shadow .22s var(--ss-spring); }
.pagination .page-link:hover { transform: translateY(-2px); box-shadow: none; }
.pagination .page-item.active .page-link { box-shadow: none; }
.pagination .page-item.disabled .page-link { box-shadow: none; }
.ss-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; padding-top: 1.4rem; border-top: 2px solid var(--band-line); }
.ss-pager-count { color: var(--band-muted); font-weight: 600; font-size: .95rem; }
.breadcrumb { --bs-breadcrumb-divider: ""; --bs-breadcrumb-margin-bottom: 1rem; --bs-breadcrumb-item-padding-x: .3rem; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem 0; padding: .35rem .6rem; border-radius: 999px; background: color-mix(in oklab, var(--band-card) 88%, transparent); box-shadow: none; font-family: var(--ss-display); font-weight: 700; font-size: .84rem; }
.breadcrumb-item { display: inline-flex; align-items: center; color: var(--band-muted); }
.breadcrumb-item + .breadcrumb-item::before { content: "" !important; width: 6px; height: 6px; margin: 0 .45rem 0 .15rem; padding: 0; border-radius: 2px; background: var(--band-line); float: none; }
.breadcrumb a { color: var(--band-muted); }
.breadcrumb a:hover { color: var(--band-fg); }
.breadcrumb-item.active { color: var(--band-fg); }
.modal { --bs-modal-bg: var(--band-card); --bs-modal-color: var(--band-fg); --bs-modal-border-color: transparent; --bs-modal-border-width: 0; --bs-modal-border-radius: var(--ss-r-xl); --bs-modal-inner-border-radius: var(--ss-r-xl); --bs-modal-header-border-color: var(--band-card-line); --bs-modal-footer-border-color: var(--band-card-line); --bs-modal-box-shadow: none; --bs-modal-padding: 1.35rem; }
.modal-content { box-shadow: none; }
.modal.fade .modal-dialog { transform: translateY(24px) scale(.97); transition: transform .45s var(--ss-spring); }
.modal.show .modal-dialog { transform: none; }
.modal-title { font-family: var(--ss-display); font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; line-height: 1.15; }
.modal-backdrop { --bs-backdrop-bg: #070910; --bs-backdrop-opacity: .65; }
.accordion { --bs-accordion-bg: var(--band-card); --bs-accordion-color: var(--band-fg); --bs-accordion-border-color: var(--band-card-line); --bs-accordion-border-width: 0; --bs-accordion-border-radius: var(--ss-r-lg); --bs-accordion-inner-border-radius: var(--ss-r-lg); --bs-accordion-btn-color: var(--band-fg); --bs-accordion-btn-bg: var(--band-card); --bs-accordion-active-color: var(--band-fg); --bs-accordion-active-bg: var(--band-card); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-btn-padding-y: 1.1rem; --bs-accordion-btn-padding-x: 1.3rem; --bs-accordion-body-padding-x: 1.3rem; display: grid; gap: .7rem; }
.accordion-item { border-radius: var(--ss-r) !important; overflow: hidden; box-shadow: none; }
.accordion-button { font-family: var(--ss-display); font-weight: 700; font-size: 1.02rem; gap: .9rem; }
.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-button::after { width: 30px; height: 30px; flex: none; border-radius: 9px; background-color: var(--band-sunk); background-position: center; background-size: 14px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237A8294' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6' d='m3 6 5 5 5-5'/%3e%3c/svg%3e"); transition: transform .35s var(--ss-spring), background-color .2s; }
.accordion-button:not(.collapsed)::after { background-color: var(--ss-accent); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23141821' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6' d='m3 6 5 5 5-5'/%3e%3c/svg%3e"); }
.accordion-body { color: var(--band-muted); padding-top: 0; }
.list-group { --bs-list-group-bg: var(--band-card); --bs-list-group-color: var(--band-fg); --bs-list-group-border-color: var(--band-card-line); --bs-list-group-border-radius: var(--ss-r-lg); --bs-list-group-action-hover-bg: var(--band-sunk); --bs-list-group-action-hover-color: var(--band-fg); --bs-list-group-action-active-bg: var(--band-sunk); --bs-list-group-action-active-color: var(--band-fg); --bs-list-group-active-bg: var(--ss-accent); --bs-list-group-active-color: var(--ss-on-accent); --bs-list-group-active-border-color: var(--ss-accent); --bs-list-group-item-padding-y: .8rem; --bs-list-group-item-padding-x: 1.1rem; --bs-list-group-disabled-color: var(--band-muted); --bs-list-group-disabled-bg: var(--band-card); box-shadow: none; }
.list-group-item { display: flex; align-items: center; gap: .8rem; font-weight: 600; }
.list-group-flush { box-shadow: none; }
.tooltip { --bs-tooltip-bg: var(--ss-ink); --bs-tooltip-color: #F2F3F7; --bs-tooltip-font-size: .8rem; --bs-tooltip-border-radius: 9px; --bs-tooltip-padding-x: .6rem; --bs-tooltip-padding-y: .4rem; font-family: var(--ss-display); font-weight: 600; }
[data-bs-theme="dark"] .tooltip { --bs-tooltip-bg: #F2F3F7; --bs-tooltip-color: #141821; }
.popover { --bs-popover-bg: var(--band-card); --bs-popover-border-color: transparent; --bs-popover-header-bg: var(--band-sunk); --bs-popover-body-color: var(--band-fg); --bs-popover-border-radius: var(--ss-r); box-shadow: none; }
.ss-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; }
.ss-toast { --bs-toast-bg: var(--ss-ink); --bs-toast-color: #F2F3F7; --bs-toast-border-color: transparent; --bs-toast-border-width: 0; --bs-toast-border-radius: 16px; --bs-toast-max-width: 390px; box-shadow: none; }
.ss-toast.showing, .ss-toast.show { animation: ss-toast-in .5s var(--ss-spring) both; }
@keyframes ss-toast-in { from { opacity: 0; translate: 0 18px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
.ss-toast .toast-body { display: flex; align-items: center; gap: .8rem; font-family: var(--ss-display); font-weight: 700; padding: .9rem 1rem; }
.ss-toast .ph-check-circle { color: var(--ss-live); font-size: 1.6rem; }
.ss-toast small { display: block; color: #A9B0C0; font-family: var(--ss-font); font-weight: 500; }

/* =========================================================================
   10. SCENE LAYERS, HERO, PAGE HEAD, SERVER ADDRESS, SEASON
   ========================================================================= */
.ss-layer { position: absolute; top: -3%; left: -3%; width: 106%; max-width: none; height: 106%; object-fit: cover; object-position: 64% 100%; image-rendering: pixelated; transform: translate3d(calc(var(--px, 0) * var(--d, 0) * -26px), calc(var(--py, 0) * var(--d, 0) * -12px + var(--sy, 0) * (1 - var(--d, 0)) * 1px), 0); }
.ss-motion .ss-layer { will-change: transform; }
.ss-layer--photo { image-rendering: auto; top: -4%; left: -4%; width: 108%; height: 108%; object-position: 50% 50%; }

.ss-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(640px, 88vh, 860px); padding: 64px 0 150px; background: #A9C8E8; color: var(--ss-ink); }
[data-bs-theme="dark"] .ss-hero { background: #131A3E; color: #F2F3F7; }
.ss-hero-art { position: absolute; inset: 0; z-index: -2; }
.ss-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--tone, var(--band-card)); }
[data-bs-theme="dark"] .ss-hero::after { background: var(--tone, var(--band-card)); }
.ss-hero.is-image::after { --scrim-a: .78; --scrim-b: .45; }
.ss-hero--scrim-soft { --scrim-a: .35; --scrim-b: .08; }
.ss-hero--scrim-strong { --scrim-a: .82; --scrim-b: .5; }
.ss-hero-inner { position: relative; }
.ss-hero-copy { max-width: 660px; }
.ss-hero-logo { display: block; max-height: 120px; max-width: 320px; width: auto; margin-bottom: 1.2rem; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .25)); }
.ss-hero-title { margin: 1.1rem 0 1rem; font: 800 clamp(3.2rem, 1.9rem + 5vw, 6.6rem)/.94 var(--ss-display); letter-spacing: -.045em; color: inherit; text-wrap: balance; overflow-wrap: anywhere; }
.ss-hero-lead { max-width: 560px; margin: 0 0 1.6rem; font-size: 1.22rem; font-weight: 500; line-height: 1.5; color: color-mix(in oklab, currentColor 86%, transparent); text-wrap: pretty; }
.ss-hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.4rem; }
.ss-hero-card { position: absolute; right: calc(var(--bs-gutter-x) * .5); bottom: -96px; display: flex; align-items: center; gap: .9rem; width: min(360px, 40vw); padding: .7rem .9rem .7rem .7rem; border-radius: 18px; background: var(--band-card); color: var(--band-fg); box-shadow: none; transition: transform .3s var(--ss-spring), box-shadow .3s var(--ss-spring); }
.ss-hero-card:hover { color: var(--band-fg); transform: translateY(-3px); box-shadow: none; }
.ss-hero-card img { width: 84px; height: 60px; flex: none; border-radius: 12px; object-fit: cover; }
.ss-hero-card > span { display: flex; flex-direction: column; min-width: 0; }
.ss-hero-card small { font: 700 .78rem/1.2 var(--ss-display); color: var(--ss-accent-ink); }
.ss-hero-card b { font: 700 1rem/1.25 var(--ss-display); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ss-hero-card > i { margin-left: auto; font-size: 1.15rem; transition: transform .3s var(--ss-spring); }
.ss-hero-card:hover > i { transform: translateX(4px); }

/* word-by-word headline (pelagos.js wraps words while motion is on) */
.ss-word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .03em .14em; margin-bottom: -.14em; }
.ss-word > span { display: inline-block; }
.ss-motion .ss-word > span { transform: translateY(110%) rotate(4deg); transition: transform 1s var(--ss-ease); transition-delay: calc(var(--i) * 110ms + 140ms); }
.ss-motion .is-split .ss-word > span { transform: none; }

.ss-page-head { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 270px; padding-block: clamp(2.2rem, 1.6rem + 2vw, 3.4rem) clamp(2.2rem, 1.8rem + 1.6vw, 3rem); background: #A9C8E8; color: var(--ss-ink); }
.ss-page-head > .container { width: 100%; }
[data-bs-theme="dark"] .ss-page-head { background: #131A3E; color: #F2F3F7; }
.ss-page-head-art { position: absolute; inset: 0; z-index: -2; }
.ss-page-head .ss-layer { object-position: 66% 74%; }
.ss-page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--tone, var(--band-card)); }
[data-bs-theme="dark"] .ss-page-head::after { background: var(--tone, var(--band-card)); }
.ss-page-head.is-image::after { background: var(--tone, var(--band-card)); }
[data-bs-theme="dark"] .ss-page-head.is-image::after { background: var(--tone, var(--band-card)); }
.ss-page-head .ss-lead { color: color-mix(in oklab, currentColor 76%, transparent); }
.ss-page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; flex-wrap: wrap; }
.ss-page-title { font: 800 clamp(2.3rem, 1.5rem + 2.8vw, 3.9rem)/1.02 var(--ss-display); letter-spacing: -.04em; margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
.ss-page-head--compact { min-height: 220px; }
.ss-page-head--compact .ss-page-title { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem); max-width: 26ch; }
.ss-page-actions { display: flex; flex-wrap: wrap; gap: .6rem; min-width: 0; max-width: 100%; }
.ss-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1rem; margin-top: 1rem; color: color-mix(in oklab, currentColor 72%, transparent); font-weight: 600; font-size: .95rem; }
.ss-page-meta a:not(.ss-chip):not(.btn) { color: inherit; }
.ss-page-meta a:not(.ss-chip):not(.btn):hover { text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }

/* server address block */
.ss-ip { display: flex; align-items: center; gap: .9rem; width: 100%; max-width: 560px; padding: .7rem .7rem .7rem .75rem; border: 0; border-radius: 18px; background: var(--band-card); color: var(--band-fg); text-align: left; box-shadow: none; transition: transform .3s var(--ss-spring), box-shadow .3s var(--ss-spring); }
.ss-ip:hover { transform: translateY(-2px); box-shadow: none; }
.ss-ip:active { transform: translateY(1px); box-shadow: none; transition-duration: .07s; }
.ss-ip-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--ss-accent); color: var(--ss-on-accent); font-size: 1.55rem; box-shadow: none; }
.ss-ip-body { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.ss-ip-label { font: 500 .82rem/1.3 var(--ss-font); color: var(--band-muted); }
.ss-ip-addr { font: 800 1.32rem/1.2 var(--ss-display); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-ip-copy { display: inline-flex; align-items: center; gap: .45rem; flex: none; padding: .6rem .9rem; border-radius: 11px; background: var(--ss-ink); color: #fff; font: 700 .92rem/1 var(--ss-display); box-shadow: none; transition: background-color .2s; }
[data-bs-theme="dark"] .ss-ip-copy, .band-ink .ss-ip-copy { background: #F2F3F7; color: #141821; box-shadow: none; }
.ss-ip-copy i { font-size: 1.1rem; transition: transform .3s var(--ss-spring); }
.ss-ip.is-copied .ss-ip-copy { background: var(--ss-live); color: #062311; box-shadow: none; }
.ss-ip.is-copied .ss-ip-copy i, .ss-ip-mini.is-copied i, .ss-footer-ip.is-copied i { transform: scale(1.2); }
.ss-ip--compact { max-width: none; padding: .55rem; border-radius: 14px; }
.ss-ip--compact .ss-ip-icon { width: 42px; height: 42px; border-radius: 11px; font-size: 1.25rem; }
.ss-ip--compact .ss-ip-addr { font-size: 1.1rem; }
.ss-ip--compact .ss-ip-copy { padding: .55rem .65rem; }
.ss-ip-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin-top: .9rem; font-weight: 600; font-size: .95rem; color: color-mix(in oklab, currentColor 80%, transparent); }
.ss-ip-meta > span { display: inline-flex; align-items: center; gap: .5rem; }
.ss-ip-mini { display: inline-flex; align-items: stretch; max-width: 100%; margin-top: .9rem; padding: 0; border: 0; border-radius: 12px; background: var(--band-card); color: var(--band-fg); box-shadow: none; transition: transform .25s var(--ss-spring), box-shadow .25s var(--ss-spring); }
.ss-ip-mini:hover { transform: translateY(-2px); box-shadow: none; }
.ss-ip-mini:active { transform: translateY(1px); box-shadow: none; }
.ss-ip-mini > span { display: block; align-self: center; min-width: 0; padding: .6rem .85rem; font: 800 1rem/1.1 var(--ss-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-ip-mini b { border-radius: 0 12px 12px 0; display: inline-flex; align-items: center; gap: .35rem; padding: 0 .85rem; background: var(--ss-accent); color: var(--ss-on-accent); font: 700 .88rem/1 var(--ss-display); white-space: nowrap; }

/* season label + inline countdown */
.ss-season { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding: .45rem .7rem .45rem .75rem; border-radius: 999px; background: var(--band-card); color: var(--band-fg); box-shadow: none; font: 700 .9rem/1.2 var(--ss-display); }
.ss-season-when { color: var(--band-muted); font-weight: 600; }
.ss-cd { display: inline-flex; align-items: baseline; gap: .12rem; padding: .2rem .5rem; border-radius: 8px; background: var(--band-sunk); font: 800 .92rem/1.2 var(--ss-display); font-variant-numeric: tabular-nums; }
.ss-cd em { font-style: normal; font-weight: 600; color: var(--band-muted); margin: 0 .3rem 0 .1rem; }
.ss-cd span { color: var(--band-muted); }
.ss-cd b { display: inline-block; height: 1.2em; overflow: hidden; vertical-align: bottom; font-weight: 800; }
.ss-roll { display: block; animation: ss-roll .45s var(--ss-ease); }
@keyframes ss-roll { from { transform: translateY(-100%); opacity: .2; } to { transform: none; opacity: 1; } }
/* the large countdown (gaming night, store banners) */
.ss-countdown { display: flex; align-items: flex-start; gap: .5rem; }
.ss-countdown > div { display: flex; flex-direction: column; align-items: center; min-width: 3.6rem; padding: .55rem .5rem .45rem; border-radius: 14px; background: var(--band-card); color: var(--band-fg); box-shadow: none; }
.ss-countdown b { display: block; height: 1.15em; overflow: hidden; font: 800 2rem/1.15 var(--ss-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ss-countdown small { font: 600 .74rem/1.4 var(--ss-font); color: var(--band-muted); }
.ss-countdown .colon { align-self: center; font: 800 1.4rem/1 var(--ss-display); color: var(--band-muted); }

@media (max-width: 1199.98px) { .ss-hero-card { display: none; } }
@media (max-width: 767.98px) {
	.ss-hero { min-height: 0; padding: 44px 0 124px; }
	.ss-hero::after { background: var(--tone, var(--band-card)); }
	[data-bs-theme="dark"] .ss-hero::after { background: var(--tone, var(--band-card)); }
	.ss-hero-lead { font-size: 1.08rem; }
	.ss-page-head { min-height: 210px; }
	.ss-page-head::after { background: var(--tone, var(--band-card)); }
	[data-bs-theme="dark"] .ss-page-head::after { background: var(--tone, var(--band-card)); }
}
@media (max-width: 575.98px) {
	.ss-ip-addr { font-size: 1.1rem; }
	.ss-ip-icon { width: 46px; height: 46px; font-size: 1.35rem; }
	.ss-ip-copy [data-copy-label] { display: none; }
	.ss-hero-cta .btn { flex: 1 1 100%; }
	.ss-countdown > div { min-width: 3rem; }
	.ss-countdown b { font-size: 1.6rem; }
	.ss-ip-mini > span { padding: .55rem .65rem; font-size: .92rem; }
	.ss-ip-mini b { padding: 0 .65rem; }
}

/* =========================================================================
   11. HOME + SHARED CONTENT BLOCKS
   ========================================================================= */
/* promo carousel (LeaderOS Slider module) */
.ss-promo { border-radius: var(--ss-r-xl); overflow: hidden; background: #141936; box-shadow: none; }
.ss-promo .carousel-item { height: clamp(260px, 22vw, 340px); position: relative; color: #F2F3F7; }
.ss-promo .ss-promo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.ss-promo .carousel-item::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--tone, var(--band-card)); }
.ss-promo-body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 2rem 2.6rem; max-width: 40rem; }
.ss-promo-title { font: 800 clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem)/1.04 var(--ss-display); letter-spacing: -.035em; margin: 0 0 .7rem; text-wrap: balance; }
.ss-promo-text { color: #C8CDE0; margin-bottom: 1.25rem; max-width: 30rem; }
.ss-promo .carousel-indicators { justify-content: flex-end; margin: 0 8.4rem 2.1rem auto; left: auto; z-index: 3; }
.ss-promo.carousel .carousel-indicators [data-bs-target] { width: 26px; height: 8px; border: 0; border-radius: 4px; margin: 0 6px 0 0; background: #fff; opacity: .35; transition: width .4s var(--ss-spring), opacity .2s; }
.ss-promo.carousel .carousel-indicators [data-bs-target].active { width: 42px; background: var(--ss-accent); opacity: 1; }
.ss-promo .carousel-control-prev, .ss-promo .carousel-control-next { z-index: 3; width: 52px; opacity: 1; top: auto; bottom: 1rem; height: 44px; }
.ss-promo .carousel-control-prev { left: auto; right: 4.6rem; }
.ss-promo .carousel-control-next { right: 1.25rem; }
.ss-promo-ctl { width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); border-radius: 12px; font-size: 1.3rem; color: #fff; transition: background-color .2s, transform .25s var(--ss-spring); }
.ss-promo .carousel-control-prev:hover .ss-promo-ctl, .ss-promo .carousel-control-next:hover .ss-promo-ctl { background: var(--ss-accent); color: var(--ss-on-accent); transform: translateY(-2px); }

/* store category blocks on pedestals */
.ss-pedestal { display: block; width: 100%; height: auto; overflow: visible; }
.ss-pedestal .t { fill: color-mix(in oklab, var(--tone, var(--ss-accent)) 72%, #fff); }
.ss-pedestal .l { fill: color-mix(in oklab, var(--tone, var(--ss-accent)) 80%, #000); }
.ss-pedestal .r { fill: color-mix(in oklab, var(--tone, var(--ss-accent)) 62%, #000); }
.ss-cat-fx { position: absolute; inset: -40% 0 10%; z-index: -1; pointer-events: none; }
.ss-cat-fx::before, .ss-cat-fx::after { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 6px; color: rgba(255, 255, 255, .65);
	box-shadow: none;
	transition: transform 1.1s var(--ss-ease); }
.ss-cat-fx::after { color: rgba(255, 255, 255, .38); box-shadow: none; }
.ss-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 248px; gap: 1.25rem; }
.ss-cats[data-count="1"] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 300px; }
.ss-cats[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-cats[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-cats[data-count="4"] .ss-cat:nth-child(4) { grid-column: span 2; }
.ss-cat { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; padding: 1.25rem 1.25rem 1rem; border-radius: 22px; overflow: hidden;
	background: var(--tone, var(--band-card)); color: var(--tone-fg);
	box-shadow: none; transition: transform .35s var(--ss-spring), box-shadow .35s var(--ss-spring); }
.ss-cat:hover { color: var(--tone-fg); transform: scale(1.015); box-shadow: none; }
.ss-cat:active { transform: scale(1.015); box-shadow: none; transition-duration: .08s; }
.ss-cat-head { position: relative; z-index: 1; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; }
.ss-cat-name { font: 800 1.5rem/1.05 var(--ss-display); letter-spacing: -.03em; overflow-wrap: anywhere; text-wrap: balance; }
.ss-cat-desc { font-size: .9rem; font-weight: 500; line-height: 1.35; opacity: .88; }
.ss-cat-badge { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .3rem; padding: .28rem .62rem; border-radius: 999px; background: rgba(255, 255, 255, .22); font: 700 .78rem/1.2 var(--ss-display); }
.ss-cat-stage { position: relative; z-index: 0; grid-column: 2; grid-row: 1; align-self: center; width: 128px; margin: 0 -.25rem 0 .25rem; }
.ss-cat-stage::before { content: ""; position: absolute; inset: -45% 0 5%; z-index: -1; background: var(--tone, var(--band-card)); }
.ss-cat-stage img { position: absolute; left: 50%; bottom: 18%; width: 92%; max-width: none; image-rendering: pixelated; transform: translateX(-50%); transition: transform .55s var(--ss-spring), opacity .3s; }
.ss-cat-stage img.lazyload:not(.loaded), .ss-product-stage img.lazyload:not(.loaded), .ss-holo-stage img.lazyload:not(.loaded) { opacity: 0; }
.ss-cat:hover .ss-cat-stage img { transform: translateX(-50%) translateY(-7px) rotate(-5deg) scale(1.03); }
/* small tiles: the art sits lower on its plinth so the hover lift never crosses the top edge of the card */
.ss-cat:not(.ss-cat--xl) .ss-cat-stage { align-self: start; margin-top: 3.2rem; }
.ss-cat:not(.ss-cat--xl) .ss-cat-stage img { width: 84%; }
.ss-cat:hover .ss-cat-fx::before { transform: translateY(-7px); }
.ss-cat:hover .ss-cat-fx::after { transform: translateY(-12px); }
.ss-cat-foot { position: relative; z-index: 1; grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: .75rem; margin-top: .85rem; padding: .5rem .5rem .5rem .85rem; border-radius: 14px; background: rgba(0, 0, 0, .16); font: 600 .88rem/1.2 var(--ss-font); }
.ss-cat-foot > span:first-child { display: inline-flex; align-items: center; gap: .35rem; opacity: .92; }
.ss-cat-price { margin-left: auto; font-size: .82rem; text-align: right; opacity: .95; }
.ss-cat-price b { display: block; font: 800 1.12rem/1.05 var(--ss-display); letter-spacing: -.02em; }
.ss-cat-go { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: rgba(255, 255, 255, .94); color: var(--tone-edge); font-size: 1.05rem; box-shadow: none; transition: transform .35s var(--ss-spring); }
.ss-cat:hover .ss-cat-go { transform: translateX(3px); }
.ss-cat--xl { grid-column: span 2; grid-row: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 1.5rem; padding: 1.8rem 1.8rem 1.2rem; }
.ss-cat--xl .ss-cat-head { grid-column: 1 / -1; }
.ss-cat--xl .ss-cat-name { font-size: clamp(2.2rem, 1.6rem + 1.4vw, 3rem); }
.ss-cat-list { position: relative; z-index: 1; grid-column: 1; grid-row: 2; align-self: end; display: grid; gap: .5rem; min-width: 0; }
.ss-cat-list > span { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .5rem .8rem .5rem .6rem; border-radius: 12px; background: rgba(0, 0, 0, .17); font: 700 1rem/1.2 var(--ss-display); }
.ss-cat-list img { width: 30px; height: 30px; flex: none; object-fit: contain; image-rendering: pixelated; }
.ss-cat-list em { display: flex; align-items: baseline; gap: .45rem; margin-left: auto; font-style: normal; white-space: nowrap; }
.ss-cat-list s { font-size: .8em; font-weight: 600; opacity: .62; }
.ss-cat--xl .ss-cat-stage { grid-column: 2; grid-row: 2; align-self: end; justify-self: center; width: min(100%, 280px); margin: 0 0 .6rem; }
.ss-cat--xl .ss-cat-fx::before { box-shadow: none; }
.ss-cat--xl .ss-cat-fx::after { box-shadow: none; }
.ss-cat--xl .ss-cat-foot { grid-row: 3; }
.ss-cats[data-count="1"] .ss-cat--xl { grid-column: auto; grid-row: auto; }
/* admin category pictures shown as covers instead of standing on a pedestal */
.ss-cat-cover { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ss-ease), opacity .3s; }
.ss-cat-cover.lazyload:not(.loaded) { opacity: 0; }
.is-cover .ss-cat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tone, var(--band-card)); }
.is-cover .ss-cat { color: #fff; }
.is-cover .ss-cat:hover .ss-cat-cover { transform: scale(1.06); }

/* featured product: night showcase + collectible card */
.ss-feature { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; align-items: center; padding: 3rem 3.25rem; border-radius: 28px; color: #F2F3F7; background: #141936 url(../img/scene/night-sky.png) 50% 20% / cover; image-rendering: pixelated; box-shadow: none; }
.ss-feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tone, var(--band-card)); }
.ss-feature-title { margin: .9rem 0 .7rem; font: 800 clamp(2.2rem, 1.5rem + 2vw, 3.4rem)/1.02 var(--ss-display); letter-spacing: -.04em; color: #fff; text-wrap: balance; }
.ss-feature-details { color: rgba(242, 243, 247, .82); font-size: 1.02rem; }
.ss-feature-details p { margin: 0 0 .6rem; }
.ss-feature-details ul { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.4rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.ss-feature-details li { position: relative; padding-left: 1.7rem; font-weight: 500; color: rgba(242, 243, 247, .92); }
.ss-feature-details li::before { content: "\e184"; position: absolute; left: 0; top: .05rem; font-family: "Phosphor-Bold"; color: var(--ss-accent); font-size: 1.2rem; line-height: 1.2; }
.ss-feature-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 1.6rem; }
.ss-price-block { display: flex; flex-direction: column; line-height: 1.1; }
.ss-price-block .ss-price-old { color: rgba(242, 243, 247, .6); }
.ss-price-now { font: 800 2.7rem/1 var(--ss-display); letter-spacing: -.035em; }
.ss-price-save { margin-top: .35rem; color: var(--ss-accent); font: 700 .88rem/1.2 var(--ss-display); }
.ss-fine { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1.3rem; color: rgba(242, 243, 247, .7); font-size: .88rem; font-weight: 500; }
.ss-fine span { display: inline-flex; align-items: center; gap: .4rem; }
.ss-feature-card { position: relative; display: grid; place-items: center; min-height: 440px; }
.ss-feature-card::before { content: ""; position: absolute; width: 120%; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: var(--tone, var(--band-card)); }
.ss-holo { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; grid-area: 1 / 1; width: min(290px, 100%); aspect-ratio: 5 / 7; padding: 12px; border-radius: 22px; color: #fff; background: var(--tone, var(--band-card)); box-shadow: none; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .7s var(--ss-spring); }
.ss-holo:hover { color: #fff; }
.ss-holo.is-live { transition: transform .1s linear; }
.ss-holo--back { width: min(250px, 86%); opacity: .75; filter: saturate(.8); }
.ss-holo--back-1 { transform: translateX(-34%) rotate(-10deg) scale(.88); }
.ss-holo--back-2 { transform: translateX(34%) rotate(10deg) scale(.88); }
.ss-feature-card:hover .ss-holo--back-1 { transform: translateX(-40%) rotate(-13deg) scale(.88); }
.ss-feature-card:hover .ss-holo--back-2 { transform: translateX(40%) rotate(13deg) scale(.88); }
.ss-holo-inner { display: flex; flex-direction: column; height: 100%; padding: 14px; border: 2px solid rgba(255, 255, 255, .35); border-radius: 14px; background: var(--tone, var(--band-card)); }
.ss-holo-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font: 700 .78rem/1 var(--ss-display); }
.ss-holo-top span:first-child { padding: .32rem .6rem; border-radius: 999px; background: var(--ss-t-sun); color: #2A1C00; box-shadow: none; }
.ss-holo-top span:last-child { opacity: .85; }
.ss-holo-stage { position: relative; flex: 1; display: grid; place-items: end center; margin: .4rem 0 .6rem; }
.ss-holo-stage::before { content: ""; position: absolute; inset: 0 5% 10%; background: var(--tone, var(--band-card)); }
.ss-holo-stage .ss-pedestal { position: relative; width: 72%; }
.ss-holo-stage img { position: absolute; left: 50%; bottom: 16%; width: 70%; max-width: none; transform: translateX(-50%); image-rendering: pixelated; }
.ss-holo-name { font: 800 1.7rem/1.05 var(--ss-display); letter-spacing: -.03em; text-align: center; overflow-wrap: anywhere; }
.ss-holo-price { display: block; margin-top: .55rem; font: 800 1.25rem/1 var(--ss-display); text-align: center; }
.ss-holo-price s { margin-right: .4rem; font-size: .8rem; font-weight: 600; opacity: .6; }
.ss-holo-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; mix-blend-mode: soft-light; transition: opacity .4s;
	background: var(--tone, var(--band-card));
	background-size: 100% 100%, 240% 240%; background-position: 0 0, var(--mx) var(--my); }
.ss-holo:hover .ss-holo-shine, .ss-holo.is-live .ss-holo-shine { opacity: 1; }

/* news (home + blog) */
.ss-news-lead { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 460px; height: 100%; border-radius: var(--ss-r-xl); background: #141936; box-shadow: none; }
.ss-news-lead > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: transform .9s var(--ss-ease); }
.ss-news-lead:hover > img { transform: scale(1.05); }
.ss-news-flag { position: absolute; left: 1.1rem; top: 1.1rem; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; background: var(--ss-accent); color: var(--ss-on-accent); font: 700 .8rem/1.2 var(--ss-display); box-shadow: none; }
.ss-news-lead-body { width: 100%; padding: 1rem; }
.ss-news-box { padding: 1.2rem 1.35rem; border-radius: 18px; background: var(--band-card); color: var(--band-fg); box-shadow: none; }
.ss-news-box h3 { margin: .6rem 0 .45rem; font: 800 clamp(1.4rem, 1.1rem + .9vw, 1.9rem)/1.12 var(--ss-display); letter-spacing: -.03em; }
.ss-news-box h3 a:hover { text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.ss-news-box p { color: var(--band-muted); margin: 0 0 .8rem; }
.ss-news-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; transition: transform .35s var(--ss-spring), box-shadow .35s var(--ss-spring); }
.ss-news-card:hover { transform: scale(1.015); box-shadow: none; }
.ss-news-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: color-mix(in oklab, var(--band-sunk) 70%, #8B95A8); }
.ss-news-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: transform .8s var(--ss-ease), opacity .3s; }
.ss-news-card:hover .ss-news-thumb img { transform: scale(1.06); }
.ss-news-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 1.1rem 1.25rem 1.15rem; }
.ss-news-title { margin: .6rem 0 .4rem; font: 800 1.2rem/1.2 var(--ss-display); letter-spacing: -.025em; }
.ss-news-title a:hover { text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.ss-news-text { margin: 0 0 .9rem; color: var(--band-muted); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-news-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--band-card-line); color: var(--band-muted); font-size: .88rem; }
.ss-news-foot > span { display: inline-flex; align-items: center; gap: .35rem; }
.ss-news-who { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--band-fg); font-weight: 600; }
.ss-news-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.ss-news-row .ss-news-thumb { aspect-ratio: auto; height: 100%; min-height: 150px; }
.ss-news-row + .ss-news-row { margin-top: 0; }
/* category filter links (blog, home, store servers) */
.ss-filter { display: flex; flex-wrap: wrap; gap: .3rem; padding: 4px; border-radius: 14px; background: var(--band-card); box-shadow: none; }
.ss-sec--sunk .ss-filter { background: var(--band-card); }
.ss-filter a, .ss-filter button { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .85rem; border: 0; border-radius: 10px; background: none; color: var(--band-muted); font: 700 .9rem/1 var(--ss-display); white-space: nowrap; transition: color .2s, background-color .2s, box-shadow .25s var(--ss-spring); }
.ss-filter a:hover, .ss-filter button:hover { color: var(--band-fg); background: var(--band-sunk); }
.ss-filter a.active, .ss-filter button.active { background: var(--ss-accent); color: var(--ss-on-accent); box-shadow: none; }

/* game modes */
.ss-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.ss-modes[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.ss-modes[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-modes[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-mode { position: relative; isolation: isolate; display: block; min-height: 340px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 22px; color: #fff; background: var(--tone, #141936); box-shadow: none; transition: transform .35s var(--ss-spring), box-shadow .35s var(--ss-spring); }
.ss-modes[data-count="1"] .ss-mode, .ss-modes[data-count="2"] .ss-mode { aspect-ratio: 16 / 9; }
.ss-mode > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; image-rendering: pixelated; transition: transform 1s var(--ss-ease), opacity .3s; }
.ss-mode > img.lazyload:not(.loaded) { opacity: 0; }
.ss-mode::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tone, var(--band-card)); }
.ss-mode-body { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem; }
.ss-mode-name { margin: 0; font: 800 1.55rem/1.05 var(--ss-display); letter-spacing: -.03em; }
.ss-mode-text { margin: 0; color: rgba(255, 255, 255, .82); font-size: .9rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ss-mode-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .25rem; color: var(--ss-accent); font: 700 .92rem/1 var(--ss-display); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s var(--ss-spring); }
.ss-mode:hover { color: #fff; transform: scale(1.015); box-shadow: none; }
.ss-mode:hover > img { transform: scale(1.07); }
.ss-mode:hover .ss-mode-go, .ss-mode:focus-visible .ss-mode-go { opacity: 1; transform: none; }

/* podium (home donors, leaderboards) */
.ss-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .7rem; padding-top: 1.6rem; }
.ss-podium .p { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.ss-podium .p > a, .ss-podium .p > span:not(.amt):not(.block) { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; color: var(--band-fg); }
.ss-podium .head { display: block; width: 54px; height: 54px; border-radius: 12px; image-rendering: pixelated; box-shadow: none; }
.ss-podium .p1 .head { width: 66px; height: 66px; border-radius: 14px; }
.ss-podium-crown { position: absolute; left: 50%; top: -26px; color: var(--ss-t-sun); font-size: 1.7rem; transform: translateX(-50%) rotate(-8deg); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
.ss-podium .name { max-width: 100%; margin-top: .45rem; overflow: hidden; font: 700 .95rem/1.2 var(--ss-display); white-space: nowrap; text-overflow: ellipsis; }
.ss-podium .amt { margin-bottom: .6rem; color: var(--band-muted); font: 600 .84rem/1.3 var(--ss-font); }
.ss-podium .block { --face: #C9D1DC; display: grid; place-items: start center; width: 100%; height: 110px; padding-top: .55rem; border-radius: 12px 12px 8px 8px; background: var(--face); color: rgba(20, 24, 33, .42); font: 800 2.2rem/1 var(--ss-display); transform-origin: 50% 100%; box-shadow: none; }
.ss-podium .p1 .block { --face: #FFC93C; height: 148px; }
.ss-podium .p3 .block { --face: #E7A06A; height: 84px; }
.ss-motion [data-ss-reveal] .ss-podium .block { transform: scaleY(.04); transition: transform .9s var(--ss-spring); transition-delay: calc(var(--j, 0) * 130ms + 250ms); }
.ss-motion [data-ss-reveal] .ss-podium .p > a, .ss-motion [data-ss-reveal] .ss-podium .p > span:not(.block) { opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .6s var(--ss-spring); transition-delay: calc(var(--j, 0) * 130ms + 650ms); }
.ss-motion [data-ss-reveal].is-in .ss-podium .block, .ss-motion [data-ss-reveal].is-in .ss-podium .p > a, .ss-motion [data-ss-reveal].is-in .ss-podium .p > span:not(.block) { opacity: 1; transform: none; }
.ss-rank-list { margin-top: 1.2rem; }
.ss-rank-list .ss-list-item { margin-top: .4rem; padding: .55rem .8rem; border: 0; border-radius: 12px; background: var(--band-sunk); }
.ss-feed .ss-list-item { padding: .7rem 1.35rem; }
.ss-feed .ss-avatar { border-radius: 10px; }

/* Discord card */
.ss-discord { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 1.5rem; border-radius: var(--ss-r-lg); background: var(--ss-discord); color: #fff; box-shadow: none; }
.ss-discord .big-ico { position: absolute; right: -18px; top: -16px; z-index: -1; font-size: 7.5rem; opacity: .15; transform: rotate(-12deg); }
.ss-discord-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; font: 800 1.15rem/1.2 var(--ss-display); }
.ss-discord-count { font: 800 2.6rem/1 var(--ss-display); letter-spacing: -.04em; }
.ss-discord-sub { color: rgba(255, 255, 255, .82); margin-bottom: 1rem; font-weight: 500; }
.ss-discord-pitch { max-width: 24rem; margin: 0 0 1rem; color: rgba(255, 255, 255, .86); font-weight: 500; line-height: 1.55; }
.ss-discord.is-live .ss-discord-pitch { display: none; }
.ss-discord:not(.is-live) .big-ico { top: auto; bottom: 3.4rem; right: -14px; font-size: 10rem; opacity: .17; }
.ss-discord-avatars { display: flex; align-items: center; flex-wrap: wrap; margin: auto 0 .9rem; }
.ss-discord-avatars img { width: 36px; height: 36px; margin-right: -8px; border-radius: 50%; box-shadow: none; background: #4752C4; }
.ss-discord-avatars span { margin-left: 16px; font: 700 .9rem/1 var(--ss-display); }
.ss-discord-channels { display: grid; gap: .3rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.ss-discord-channels li { display: flex; align-items: center; gap: .45rem; padding: .45rem .65rem; border-radius: 10px; background: rgba(0, 0, 0, .16); font-weight: 600; font-size: .9rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ss-discord .btn-light { --bs-btn-color: var(--ss-discord); --bs-btn-bg: #fff; --bs-btn-hover-color: var(--ss-discord); --bs-btn-hover-bg: #fff; --btn-edge: #C3C8F5; }

/* join path */
.ss-quest { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding-top: .5rem; }
.ss-quest-path { position: absolute; left: 16.6%; right: 16.6%; top: 36px; width: 66.8%; height: 8px; overflow: visible; }
.ss-quest-path path { fill: none; stroke: var(--ss-ledge); stroke-width: 4; stroke-dasharray: 2 12; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ss-quest::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 38px; height: 4px; border-radius: 2px; background: var(--ss-accent); transform-origin: 0 50%; transition: transform 1.4s var(--ss-ease) .3s; }
.ss-motion .ss-quest:not(.is-in)::before { transform: scaleX(0); }
.ss-quest-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 0 .5rem; text-align: center; }
.ss-quest-num { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1rem; border-radius: 18px; background: var(--ss-accent); color: var(--ss-on-accent); font: 800 1.6rem/1 var(--ss-display); box-shadow: none; transition: background-color .4s, color .4s, box-shadow .4s, transform .5s var(--ss-spring); transition-delay: calc(var(--j, 0) * 450ms + 300ms); }
.ss-motion .ss-quest:not(.is-in) .ss-quest-num { background: var(--band-card); color: var(--band-fg); box-shadow: none; transform: translateY(4px); }
.ss-quest-step h3 { margin: 0 0 .35rem; font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; }
.ss-quest-step p { max-width: 30ch; margin: 0; color: var(--band-muted); }
.ss-join-more { margin-top: 2.6rem; }
.ss-help-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 1.35rem; padding: 1.75rem; border-radius: var(--ss-r-lg); background: #141936; color: #F2F3F7; box-shadow: none; }
/* the card keeps its own height (row is align-items-start): opening or closing a FAQ item never resizes it */
.ss-help-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tone, var(--band-card)); }
.ss-help-top { display: flex; align-items: flex-start; gap: 1rem; }
.ss-help-badge { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--ss-accent); color: var(--ss-on-accent); font-size: 1.6rem; box-shadow: none; }
.ss-help-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.ss-help-topic { display: flex; align-items: center; gap: .7rem; min-width: 0; padding: .7rem .8rem; border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #F2F3F7; transition: background-color .2s, transform .3s var(--ss-spring); }
.ss-help-topic:hover { background: rgba(255, 255, 255, .13); color: #fff; transform: translateY(-2px); }
.ss-help-topic img { width: 34px; height: 34px; flex: none; object-fit: contain; image-rendering: pixelated; }
.ss-help-topic b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font: 700 .92rem/1.2 var(--ss-display); }
.ss-help-topic small { display: block; margin-top: .15rem; color: #AEB4CF; font-size: .8rem; }
@media (max-width: 419.98px) { .ss-help-topics { grid-template-columns: minmax(0, 1fr); } }
.ss-help-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(../img/scene/night-sky.png) 0% 30% / cover; image-rendering: pixelated; opacity: .9; }
.ss-help-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.ss-help-actions .btn { flex: 1 1 auto; }
/* the bottom of the card: a slice of the footer's ground, the chest standing on the grass in a warm glow, a few sparks */
.ss-help-card h3 { margin: 0 0 .5rem; font: 800 1.5rem/1.1 var(--ss-display); letter-spacing: -.03em; }
.ss-help-card p { color: #C8CDE0; margin: 0; }

/* "How to play" mock game screens (play page) */
.ss-step { overflow: hidden; height: 100%; }
.ss-step-screen { position: relative; display: flex; flex-direction: column; gap: .5rem; min-height: 230px; padding: 2.4rem 1.4rem 1.4rem; background: var(--tone, var(--band-card)); image-rendering: pixelated; }
[data-bs-theme="dark"] .ss-step-screen { background-image: none; }
.ss-step-num { position: absolute; left: 1rem; top: 1rem; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ss-accent); color: var(--ss-on-accent); font: 800 1rem/1 var(--ss-display); box-shadow: none; }
.ss-mc-logo { align-self: center; margin: .2rem 0 .6rem; color: #fff; font: 800 1.9rem/1 var(--ss-display); letter-spacing: -.03em; text-shadow: 0 calc(3px * .9) calc(3px * 2.6) calc(3px * -1.1) rgba(0, 0, 0, .45); }
.ss-mc-btn { padding: .55rem .8rem; border-radius: 6px; background: #8F96A3; color: #fff; text-align: center; font: 700 .86rem/1.1 var(--ss-display); box-shadow: none; }
.ss-mc-btn.on { background: var(--ss-accent); color: var(--ss-on-accent); }
.ss-mc-btn.dim { opacity: .6; }
.ss-mc-row { display: flex; gap: .5rem; margin-top: auto; }
.ss-mc-row .ss-mc-btn { flex: 1; }
.ss-mc-field label { display: block; margin-bottom: .2rem; color: #E3E6EE; font: 600 .74rem/1.2 var(--ss-font); }
.ss-mc-field div { padding: .45rem .6rem; border-radius: 4px; background: #000; color: #fff; font: 600 .86rem/1.2 var(--ss-display); box-shadow: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-mc-server { display: flex; align-items: center; gap: .65rem; padding: .55rem; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; box-shadow: none; }
.ss-mc-server img { width: 40px; height: 40px; border-radius: 6px; object-fit: contain; background: rgba(255, 255, 255, .08); }
.ss-mc-server b { display: block; font: 700 .9rem/1.2 var(--ss-display); }
.ss-mc-server span { display: block; color: #BFC5D2; font-size: .78rem; }
.ss-mc-server .sig { display: inline-flex; align-items: flex-end; gap: 2px; margin-left: auto; }
.ss-mc-server .sig i { display: block; width: 4px; background: var(--ss-live); }
.ss-step-body { padding: 1.2rem 1.35rem 1.35rem; }
.ss-step-body h3 { margin: 0 0 .35rem; font-size: 1.2rem; font-weight: 800; }
.ss-step-body p { margin: 0; color: var(--band-muted); }

@media (max-width: 1199.98px) {
	.ss-feature { grid-template-columns: minmax(0, 1fr); padding: 2.4rem; }
	.ss-feature-card { order: -1; min-height: 380px; }
	.ss-cats { grid-auto-rows: 232px; }
	/* four columns leave ~180px tiles at 1024px (names broke letter by letter): use the two-column showcase here too */
	.ss-cats, .ss-cats[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-cats[data-count="3"] .ss-cat--xl, .ss-cats[data-count="2"] .ss-cat--xl { grid-column: span 2; grid-row: span 1; grid-template-rows: auto auto auto; }
	.ss-cats[data-count="4"] .ss-cat:nth-child(4) { grid-column: span 2; }
}
@media (max-width: 991.98px) {
	.ss-cats, .ss-cats[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-cats[data-count="3"] .ss-cat--xl, .ss-cats[data-count="2"] .ss-cat--xl { grid-column: span 2; grid-row: span 1; grid-template-rows: auto auto auto; }
	.ss-cats[data-count="4"] .ss-cat:nth-child(4) { grid-column: span 2; }
	.ss-modes, .ss-modes[data-count] { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 46%); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--bs-gutter-x) * -.5); padding: 0 calc(var(--bs-gutter-x) * .5) 14px; scrollbar-width: thin; }
	.ss-modes[data-count="1"] { grid-auto-columns: 100%; }
	.ss-mode { scroll-snap-align: start; aspect-ratio: 3 / 4; }
	.ss-mode-go { opacity: 1; transform: none; }
	.ss-news-lead { min-height: 400px; }
}
@media (max-width: 767.98px) {
	.ss-quest { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.ss-quest::before, .ss-quest-path { display: none; }
	.ss-quest-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: 1rem; border-radius: 18px; background: var(--band-card); text-align: left; box-shadow: none; }
	.ss-quest-num { grid-row: span 3; width: 56px; height: 56px; margin: 0; font-size: 1.4rem; }
	.ss-quest-step p { max-width: none; }
	.ss-ip-mini { justify-self: start; }
	.ss-news-row, .ss-news-compact { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
	.ss-news-compact .ss-news-thumb { aspect-ratio: auto; height: 100%; min-height: 100%; }
	.ss-news-compact .ss-news-body { padding: .85rem 1rem; }
	.ss-news-compact .ss-news-title { font-size: 1.02rem; margin: .35rem 0 0; }
	.ss-news-compact .ss-news-text, .ss-news-compact .ss-news-foot { display: none; }
	.ss-feature-details ul { grid-template-columns: minmax(0, 1fr); }
	.ss-promo .carousel-item { height: 360px; }
	.ss-promo-body { padding: 1.5rem 1.4rem 4.2rem; justify-content: flex-end; }
	.ss-promo .carousel-item::before { background: var(--tone, var(--band-card)); }
	.ss-promo .carousel-indicators { justify-content: flex-start; left: 0; right: auto; margin: 0 0 2.1rem 1.4rem; }
}
@media (max-width: 575.98px) {
	/* store blocks become compact rows that fit a phone screen */
	.ss-cats, .ss-cats[data-count] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: .8rem; }
	.ss-cat, .ss-cat--xl, .ss-cats[data-count] .ss-cat--xl, .ss-cats[data-count="4"] .ss-cat:nth-child(4) { grid-column: auto; grid-row: auto; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; column-gap: .85rem; min-height: 0; padding: .7rem .85rem .7rem .7rem; border-radius: 18px; }
	.ss-cat-stage, .ss-cat--xl .ss-cat-stage { grid-column: 1; grid-row: 1; width: 72px; margin: 0; align-self: center; justify-self: auto; }
	.ss-cat:not(.ss-cat--xl) .ss-cat-stage { margin-top: 0; align-self: center; }
	.ss-cat:not(.ss-cat--xl) .ss-cat-stage img { width: 70%; }
	.ss-cat-stage img { width: 70%; bottom: 22%; }
	.ss-cat-head, .ss-cat--xl .ss-cat-head { grid-column: 2; grid-row: 1; gap: .15rem; }
	.ss-cat-name, .ss-cat--xl .ss-cat-name { font-size: 1.15rem; }
	.ss-cat-desc { width: 100%; overflow: hidden; font-size: .82rem; white-space: nowrap; text-overflow: ellipsis; }
	.ss-cat-badge, .ss-cat-list, .ss-cat-fx, .ss-cat-foot > span:first-child, .ss-cat-go { display: none; }
	.ss-cat-foot, .ss-cat--xl .ss-cat-foot { grid-column: 3; grid-row: 1; margin: 0; padding: 0; background: none; }
	.ss-cat:hover .ss-cat-stage img { transform: translateX(-50%) translateY(-4px) rotate(-6deg); }
	.is-cover .ss-cat { grid-template-columns: minmax(0, 1fr) auto; min-height: 96px; }
	.ss-feature { padding: 1.6rem 1.25rem; border-radius: 22px; }
	.ss-feature-card { min-height: 340px; }
	.ss-holo { width: min(240px, 100%); }
	.ss-price-now { font-size: 2.2rem; }
	.ss-modes, .ss-modes[data-count] { grid-auto-columns: 78%; }
	.ss-podium { gap: .45rem; }
	.ss-podium .head { width: 44px; height: 44px; }
	.ss-podium .p1 .head { width: 54px; height: 54px; }
	.ss-news-lead { min-height: 360px; }
	.ss-news-lead-body { padding: .6rem; }
}

/* ---- community panels: fixed-width tab pair + quiet (empty) states --------------------------------------------- */
.ss-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: auto; flex-wrap: nowrap; }
.ss-seg .nav-item { display: flex; min-width: 0; }
.ss-seg .nav-link { flex: 1; display: inline-flex; justify-content: center; white-space: nowrap; padding-inline: 1.2rem !important; }
@media (max-width: 419.98px) { .ss-seg { width: 100%; } }
/* an empty board still shows its shape: a ghost podium / ghost feed rows behind one short line and one action */
.ss-quiet { display: flex; flex-direction: column; align-items: center; text-align: center; padding: .4rem .5rem .2rem; }
.ss-quiet-title { font: 800 1.12rem/1.2 var(--ss-display); letter-spacing: -.02em; margin: 1rem 0 .3rem; }
.ss-quiet-text { color: var(--band-muted); font-size: .93rem; margin: 0 0 1.05rem; max-width: 22rem; }
.ss-quiet .btn { margin-top: auto; }
.ss-ghost-podium { display: flex; align-items: flex-end; gap: 10px; height: 104px; padding-top: 1.4rem; }
.ss-ghost-podium .g { position: relative; width: 66px; border-radius: 10px 10px 4px 4px; box-shadow: none;
	background: var(--tone, var(--band-card)); }
.ss-ghost-podium .g1 { height: 80px; box-shadow: none;
	background: var(--tone, var(--band-card)); }
.ss-ghost-podium .g2 { height: 56px; }
.ss-ghost-podium .g3 { height: 40px; }
.ss-ghost-podium .g1 i { position: absolute; left: 50%; top: -1.55rem; margin-left: -.8rem; font-size: 1.6rem; color: var(--ss-t-sun); animation: ss-hop 3.2s var(--ss-ease) infinite; }
.ss-quiet--feed { position: relative; isolation: isolate; padding: 2rem 1.35rem 1.6rem; list-style: none; }
.ss-quiet--feed > .ss-ico { margin-top: .4rem; }
.ss-ghost-rows { position: absolute; inset: 0; z-index: -1; display: grid; align-content: start; pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 92%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 92%); }
.ss-ghost-rows span { position: relative; height: 68px; border-top: 1px solid var(--band-card-line); }
.ss-ghost-rows span:first-child { border-top: 0; }
.ss-ghost-rows span::before { content: ""; position: absolute; left: 1.35rem; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 10px; background: color-mix(in oklab, var(--band-fg) 8%, transparent); }
.ss-ghost-rows span::after { content: ""; position: absolute; left: calc(1.35rem + 54px); right: 34%; top: 50%; height: 10px; margin-top: -9px; border-radius: 6px; background: color-mix(in oklab, var(--band-fg) 8%, transparent); box-shadow: none; }
.ss-ghost-rows span:nth-child(2)::after { right: 46%; }
.ss-ghost-rows span:nth-child(3)::after { right: 40%; }
/* community panels side by side: heads carry only the title (the tab pair lives in the body), so the divider lines align */
.ss-community .ss-panel-head { min-height: 68px; flex-wrap: nowrap; }
.ss-community .ss-seg { margin: 0 auto .5rem; }
.ss-community .tab-content { flex: 1; display: flex; flex-direction: column; }
.ss-community .ss-panel-body, .ss-community .ss-feed { min-height: 300px; }
.ss-community .ss-panel { display: flex; flex-direction: column; }
.ss-community .ss-panel > .ss-panel-body, .ss-community .ss-panel > .ss-feed { flex: 1; display: flex; flex-direction: column; }
.ss-community .tab-content > .tab-pane.active { flex: 1; display: flex; flex-direction: column; }
.ss-quiet { flex: 1; justify-content: center; }
.ss-quiet--feed { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ss-quiet .btn { margin-top: 0; }
/* donors next to the purchase feed: a compact podium keeps both panels close in height, and the feed rows share
   whatever height is left instead of leaving an empty band under the last row */
.ss-community .ss-podium { padding-top: 1.3rem; }
.ss-community .ss-podium .head { width: 46px; height: 46px; border-radius: 11px; }
.ss-community .ss-podium .p1 .head { width: 56px; height: 56px; border-radius: 13px; }
.ss-community .ss-podium .block { height: 74px; font-size: 1.8rem; }
.ss-community .ss-podium .p1 .block { height: 102px; }
.ss-community .ss-podium .p3 .block { height: 56px; }
.ss-community .ss-rank-list { margin-top: .8rem; }
.ss-community .ss-rank-list .ss-list-item { padding: .45rem .8rem; }
.ss-community .ss-feed > .ss-list-item { flex: 1 1 auto; }

/* =========================================================================
   12. STORE — category tiles, product cards
   ========================================================================= */
.ss-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: .8rem; min-height: 200px; padding: 1.35rem 1.4rem; border-radius: 22px; color: var(--tone-fg, #fff);
	background: var(--tone, var(--band-card));
	box-shadow: none; transition: transform .35s var(--ss-spring), box-shadow .35s var(--ss-spring); }
.ss-tile:hover { color: var(--tone-fg, #fff); transform: scale(1.015); box-shadow: none; }
.ss-tile:active { transform: scale(1.015); box-shadow: none; transition-duration: .08s; }
.ss-tile::after { content: ""; position: absolute; right: -10%; bottom: -30%; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--tone, var(--band-card)); pointer-events: none; }
.ss-tile-name { position: relative; z-index: 1; display: block; font: 800 1.6rem/1.04 var(--ss-display); letter-spacing: -.03em; overflow-wrap: anywhere; text-wrap: balance; }
.ss-tile-desc { position: relative; z-index: 1; display: block; max-width: 34ch; font-size: .92rem; font-weight: 500; opacity: .88; }
.ss-tile-list { position: relative; z-index: 1; display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; max-width: 56%; }
.ss-tile-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; border-radius: 12px; background: rgba(0, 0, 0, .17); font: 700 .95rem/1.2 var(--ss-display); }
.ss-tile-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-tile-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; }
.ss-tile-from { display: inline-flex; align-items: center; padding: .42rem .7rem; border-radius: 10px; background: rgba(0, 0, 0, .18); font: 700 .88rem/1.1 var(--ss-display); }
.ss-tile-go { display: grid; place-items: center; width: 38px; height: 38px; flex: none; margin-left: auto; border-radius: 11px; background: rgba(255, 255, 255, .94); color: var(--tone-edge, #000); font-size: 1.1rem; box-shadow: none; transition: transform .35s var(--ss-spring); }
.ss-tile:hover .ss-tile-go { transform: rotate(45deg); }
.ss-tile-art { position: absolute; right: 1.1rem; bottom: 1.1rem; z-index: 0; width: 120px; height: 120px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .22)); transition: transform .55s var(--ss-spring), opacity .3s; }
.ss-tile-art.lazyload:not(.loaded) { opacity: 0; }
.ss-tile:hover .ss-tile-art { transform: translateY(-8px) rotate(-6deg) scale(1.05); }

.ss-product { display: flex; flex-direction: column; height: 100%; overflow: hidden; transition: transform .35s var(--ss-spring), box-shadow .35s var(--ss-spring); }
.ss-product:hover { transform: scale(1.015); box-shadow: none; }
.ss-product:active { transform: scale(1.015); box-shadow: none; transition-duration: .08s; }
.ss-product-media { position: relative; isolation: isolate; display: grid; place-items: end center; aspect-ratio: 4 / 3; overflow: hidden; margin: .6rem .6rem 0; border-radius: 16px; background: var(--tone, var(--band-card)); }
.ss-product-flags { position: absolute; left: .7rem; top: .7rem; z-index: 2; display: flex; flex-wrap: wrap; gap: .35rem; max-width: calc(100% - 1.4rem); }
.ss-product-stock { position: absolute; right: .7rem; bottom: .7rem; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem; border-radius: 999px; background: rgba(10, 12, 24, .62); color: #fff; font: 700 .75rem/1.2 var(--ss-display); }
.ss-product-stock i { color: var(--ss-t-sun); }
.ss-product-stage { position: relative; display: block; width: 58%; margin-bottom: 12%; }
.ss-product-stage .ss-pedestal { position: relative; }
.ss-product-stage img { position: absolute; left: 50%; bottom: 22%; width: 96%; max-width: none; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; transform: translateX(-50%); transition: transform .55s var(--ss-spring), opacity .3s; }
.ss-product-stage .ss-cat-fx { inset: -80% -10% 10%; }
.ss-product:hover .ss-product-stage img { transform: translateX(-50%) translateY(-10px) rotate(-6deg) scale(1.05); }
.ss-product:hover .ss-cat-fx::before { transform: translateY(-12px); }
.ss-product:hover .ss-cat-fx::after { transform: translateY(-22px); }
.ss-cover, .ss-product-media > img.ss-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; transition: transform .8s var(--ss-ease), opacity .3s; }
.ss-product:hover .ss-cover { transform: scale(1.05); }
.ss-product.is-out .ss-product-media { filter: grayscale(.85) brightness(.9); }
.ss-product-body { display: flex; flex-direction: column; flex: 1; gap: .3rem; padding: 1rem 1.15rem 1.15rem; }
.ss-product-cat { font: 700 .8rem/1.2 var(--ss-display); color: var(--band-muted); }
.ss-product-name { margin: 0 0 .5rem; font: 800 1.2rem/1.15 var(--ss-display); letter-spacing: -.025em; overflow-wrap: anywhere; }
.ss-product-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-top: auto; }
.ss-product-price { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.ss-product-price .ss-price { font-size: 1.45rem; }
.ss-product-foot .btn { position: static; flex: none; }
.ss-product-foot .stretched-link::after { z-index: 1; }
.ss-product-rank { position: absolute; left: 1.2rem; top: 1.2rem; z-index: 3; }
.ss-product--rank { flex-direction: row; align-items: stretch; }
.ss-product--rank .ss-product-media { width: 34%; flex: none; aspect-ratio: auto; margin: .5rem 0 .5rem .5rem; }
.ss-product--rank .ss-product-stage { width: 74%; margin-bottom: 14%; }
.ss-product--rank .ss-product-body { padding: .9rem 1rem; }
.ss-product--rank .ss-product-rank { position: static; align-self: flex-start; margin-bottom: .2rem; }
.ss-item-ico { width: 44px; height: 44px; flex: none; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .18)); }

@media (max-width: 575.98px) {
	.ss-product-name { font-size: 1.08rem; }
	.ss-product-price .ss-price { font-size: 1.3rem; }
	.ss-product-body { padding: .9rem; }
	.ss-product-foot { flex-direction: column; align-items: stretch; }
	.ss-product-foot .btn { width: 100%; }
	.ss-tile { min-height: 160px; padding: 1.1rem; }
	.ss-tile-name { font-size: 1.3rem; }
	.ss-tile-art { width: 84px; height: 84px; right: .8rem; bottom: .8rem; }
	.ss-tile-list { display: none; }
}

/* =========================================================================
   13. FOOTER — the page ends in a slice of terrain
   ========================================================================= */
.ss-footer { position: relative; margin-top: 32px; color: #B4BAC8; --band-card: #262A35; --band-fg: #F2F3F7; --band-muted: #9AA1B2; --band-line: rgba(242, 243, 247, .1); --band-sunk: #14161D; --ss-ledge: #0E1014; }
.ss-footer-ground { height: 54px; background:var(--p-sky); image-rendering: pixelated; }
.ss-footer-body { padding: 2.6rem 0 1.4rem; background:var(--p-sky); image-rendering: pixelated; }
[data-bs-theme="dark"] .ss-footer-body { background-color: #13151B; }
.ss-footer-main { padding-bottom: .5rem; }
.ss-footer h4 { margin: 0 0 1rem; color: #fff; font: 800 1rem/1.2 var(--ss-display); }
.ss-footer ul:not(.dropdown-menu) { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.ss-footer ul:not(.dropdown-menu) a { display: inline-flex; align-items: center; gap: 0; color: #B4BAC8; font-weight: 500; transition: color .2s, gap .25s var(--ss-ease); }
.ss-footer ul:not(.dropdown-menu) a::before { content: ""; width: 0; height: 3px; border-radius: 2px; background: var(--ss-accent); transition: width .25s var(--ss-ease); }
.ss-footer ul:not(.dropdown-menu) a:hover { gap: .45rem; color: #fff; }
.ss-footer ul:not(.dropdown-menu) a:hover::before { width: 10px; }
.ss-footer ul:not(.dropdown-menu) a i { margin-right: .4rem; color: #8E95A6; font-size: .9em; }
.ss-footer-about { max-width: 38ch; margin: 1rem 0 1.25rem; color: #9AA1B2; font-size: .95rem; }
.ss-footer-about.ck-content { color: #9AA1B2; font-size: .95rem; line-height: 1.6; }
.ss-footer-about.ck-content a { color: #E6E9F0; }
.ss-footer-ip { display: inline-flex; align-items: center; gap: .8rem; max-width: 100%; padding: .7rem .95rem; border: 0; border-radius: 14px; background: #2A2E38; color: #fff; text-align: left; box-shadow: none; transition: transform .25s var(--ss-spring), box-shadow .25s var(--ss-spring), background-color .2s; }
.ss-footer-ip:hover { transform: translateY(-2px); box-shadow: none; }
.ss-footer-ip:active { transform: translateY(1px); box-shadow: none; }
.ss-footer-ip.is-copied { background: color-mix(in oklab, var(--ss-accent) 35%, #2A2E38); }
.ss-footer-ip-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ss-footer-ip b { font: 800 1.05rem/1.2 var(--ss-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-footer-ip small { color: #9AA1B2; font-size: .8rem; }
.ss-footer-ip i { margin-left: .3rem; color: #9AA1B2; transition: transform .3s var(--ss-spring); }
.ss-socials { display: flex; flex-wrap: wrap; gap: .45rem; }
.ss-socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #2A2E38; color: #fff; font-size: 1.3rem; transition: transform .35s var(--ss-spring), background-color .2s, color .2s; }
.ss-socials a:hover { background: var(--ss-accent); color: var(--ss-on-accent); transform: translateY(-4px) rotate(-8deg); }
.ss-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2.4rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .08); color: #8E95A6; font-size: .88rem; }
.ss-switchers { display: flex; flex-wrap: wrap; gap: .4rem; }
.ss-switchers .btn { --bs-btn-color: #C9CED9; --bs-btn-bg: #262A35; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2E3340; --btn-edge: #0E1014; --bs-btn-font-weight: 600; }
.ss-switchers .dropdown-toggle::after { display: none; }
.ss-made { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-left: auto; }
.ss-made a { color: #B4BAC8; }
.ss-made a:hover { color: #fff; }
.ss-theme-badge { display: inline-flex; align-items: center; padding: .3rem .6rem; border-radius: 999px; background: #262A35; font: 700 .78rem/1.2 var(--ss-display); }
.ss-top { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; background: var(--ss-accent); color: var(--ss-on-accent); font-size: 1.2rem; box-shadow: none; transition: transform .25s var(--ss-spring), box-shadow .25s var(--ss-spring); }
.ss-top:hover { transform: translateY(-3px); box-shadow: none; }
.ss-top:active { transform: translateY(1px); box-shadow: none; }
@media (max-width: 767.98px) {
	.ss-footer-bottom { flex-direction: column; text-align: center; }
	.ss-made { justify-content: center; margin: 0; }
	.ss-footer-ground { height: 40px; background-size: 1334px 40px; }
}

/* =========================================================================
   14. ACCOUNT ASIDE, EMPTY, AUTH, ERROR
   ========================================================================= */
.ss-account-card { overflow: hidden; }
.ss-account-head { display: flex; align-items: center; gap: .9rem; padding: 1.2rem 1.25rem; background: #141936 url(../img/scene/night-sky.png) 70% 30% / cover; image-rendering: pixelated; color: #F2F3F7; }
.ss-account-name { font: 800 1.35rem/1.1 var(--ss-display); letter-spacing: -.03em; margin: 0 0 .4rem; overflow-wrap: anywhere; }
.ss-account-balance { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .75rem .75rem 0; padding: .8rem 1rem; border-radius: 14px; background: var(--ss-accent); color: var(--ss-on-accent); font-weight: 700; box-shadow: none; transition: transform .25s var(--ss-spring), box-shadow .25s var(--ss-spring); }
.ss-account-balance:hover { color: var(--ss-on-accent); transform: translateY(-2px); box-shadow: none; }
.ss-account-balance .ss-price { font-size: 1.4rem; }
.ss-account-nav { padding: .5rem; }
.ss-account-group { font: 700 .8rem/1.2 var(--ss-display); color: var(--band-muted); margin: .9rem .75rem .35rem; }
.ss-account-group:first-child { margin-top: .4rem; }
.sidebar-link { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .62rem .75rem; border: 0; border-radius: 12px; background: none; color: var(--band-fg); font: 700 .96rem/1.2 var(--ss-display); text-align: left; position: relative; transition: background-color .2s, transform .25s var(--ss-spring); }
.sidebar-link i { font-size: 1.15rem; width: 1.3rem; text-align: center; color: var(--band-muted); transition: color .2s, transform .3s var(--ss-spring); }
.sidebar-link:hover { background: var(--band-sunk); color: var(--band-fg); }
.sidebar-link:hover i { transform: translateX(2px); }
.sidebar-link.active { background: var(--ss-accent-soft); }
.sidebar-link.active i { color: var(--ss-accent-ink); }
.sidebar-link.active::before { content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 4px; border-radius: 4px; background: var(--ss-accent); }
.ss-empty { text-align: center; padding: 3rem 1.5rem; border-radius: var(--ss-r-lg); background: var(--band-card); box-shadow: none; }
.ss-empty-icon { width: 68px; height: 68px; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 20px; background: var(--ss-accent); color: var(--ss-on-accent); font-size: 2rem; box-shadow: none; animation: ss-hop 3.2s var(--ss-ease) infinite; }
@keyframes ss-hop { 0%, 82%, 100% { transform: none; } 88% { transform: translateY(-8px) rotate(-6deg); } 94% { transform: translateY(0) rotate(0); } }
.ss-empty-title { font: 800 1.5rem/1.15 var(--ss-display); letter-spacing: -.03em; margin: 0 0 .5rem; }
.ss-empty-text { color: var(--band-muted); margin: 0 auto; max-width: 30rem; }
.ss-empty .btn { margin-top: 1.25rem; }

.ss-auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.ss-auth-side { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: clamp(1.5rem, 4.5vh, 2.6rem) clamp(1.75rem, 3vw, 3.5rem) clamp(2rem, 7vh, 3.6rem); background: #A9C8E8; color: var(--ss-ink); }
[data-bs-theme="dark"] .ss-auth-side { background: #131A3E; color: #F2F3F7; }
.ss-auth-side-art { position: absolute; inset: 0; z-index: -2; }
.ss-auth-side-art .ss-layer { object-position: 82% 100%; }
.ss-auth-side::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tone, var(--band-card)); }
[data-bs-theme="dark"] .ss-auth-side::before, .ss-auth-side.is-image::before { background: var(--tone, var(--band-card)); }
.ss-auth-side.is-image { color: #fff; }
.ss-auth-brand { position: relative; color: inherit; }
.ss-auth-brand:hover { color: inherit; }
.ss-auth-pitch { font: 800 clamp(2rem, 1.2rem + 1.9vw, 3.2rem)/1.02 var(--ss-display); letter-spacing: -.04em; margin: clamp(1.6rem, 6vh, 3.4rem) 0 0; max-width: 15ch; text-wrap: balance; }
.ss-auth-side-top { position: relative; }
.ss-auth-lead { margin: 1rem 0 0; max-width: 30rem; font-size: 1.04rem; font-weight: 500; line-height: 1.5; color: #2B3344; }
[data-bs-theme="dark"] .ss-auth-lead, .ss-auth-side.is-image .ss-auth-lead { color: rgba(242, 243, 247, .82); }
.ss-auth-perks { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.35rem 0 0; padding: 0; list-style: none; }
.ss-auth-perks li, .ss-auth-perks a { display: inline-flex; align-items: center; gap: .4rem; }
.ss-auth-perks li { padding: .45rem .75rem; border-radius: 10px; background: rgba(255, 255, 255, .62); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font: 600 .88rem/1 var(--ss-font); color: var(--ss-ink); }
.ss-auth-perks li b { font-family: var(--ss-display); font-weight: 800; }
.ss-auth-perks a { color: inherit; }
.ss-auth-perks i { font-size: 1.05rem; color: var(--ss-accent-edge); }
[data-bs-theme="dark"] .ss-auth-perks li, .ss-auth-side.is-image .ss-auth-perks li { background: rgba(14, 18, 40, .55); box-shadow: none; color: #F2F3F7; }
[data-bs-theme="dark"] .ss-auth-perks i, .ss-auth-side.is-image .ss-auth-perks i { color: color-mix(in oklab, var(--ss-accent) 80%, #fff); }
.ss-auth-side-copy { position: relative; }
.ss-auth-side-copy .ss-ip { max-width: 30rem; }
@media (max-height: 700px) { .ss-auth-lead { display: none; } }
.ss-auth-main { display: flex; flex-direction: column; justify-content: center; padding: clamp(1rem, 4vh, 2.5rem) clamp(1.25rem, 5vw, 5rem); background: var(--band-bg); }
.ss-auth-box { width: 100%; max-width: 450px; margin: 0 auto; }
.ss-auth-box > .card, .ss-auth-box > .ss-panel { background: transparent; border: 0; box-shadow: none; }
.ss-auth-box > .card > .card-body, .ss-auth-box > .ss-panel > .ss-panel-body { padding: 0; }
.ss-auth-box .card + .card { margin-top: 1.25rem; }
.ss-auth-box h1, .ss-auth-box h2, .ss-auth-box .h2 { font: 800 clamp(1.85rem, .9rem + 2.4vh, 2.5rem)/1.02 var(--ss-display); letter-spacing: -.04em; text-align: left !important; margin-bottom: .6rem !important; }
.ss-auth-box .text-center:not(.btn):not(.d-flex):not(.ss-keep-center) { text-align: left !important; }
.ss-auth-box .btn-primary.w-100 { --bs-btn-padding-y: .9rem; }
.ss-auth-mobile-brand { display: none; margin-bottom: clamp(1rem, 3.5vh, 2rem); color: var(--band-fg); }
.ss-auth-foot { margin-top: clamp(1rem, 3.5vh, 2.5rem); font-size: .85rem; color: var(--band-muted); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 991.98px) { .ss-auth { grid-template-columns: minmax(0, 1fr); } .ss-auth-side { display: none; } .ss-auth-mobile-brand { display: inline-flex; } }

.ss-error { min-height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden; isolation: isolate; padding: 3rem 1.25rem; background: #131A3E; color: #F2F3F7; }
.ss-error-art { position: absolute; inset: 0; z-index: -2; }
.ss-error::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tone, var(--band-card)); }
.ss-error-box { max-width: 640px; }
.ss-error .ss-error-code { font: 800 clamp(6rem, 3rem + 12vw, 12rem)/.82 var(--ss-display); margin: 0 0 1rem; letter-spacing: -.06em; text-shadow: 0 calc(8px * .9) calc(8px * 2.6) calc(8px * -1.1) rgba(0, 0, 0, .3); }
.ss-error h1, .ss-error h2, .ss-error .empty-title { font: 800 2.2rem/1.05 var(--ss-display); letter-spacing: -.035em; }
.ss-error p, .ss-error .empty-subtitle { color: #C8CDE0; font-size: 1.05rem; }
.ss-error .empty-img img, .ss-error .empty-header { display: none; }

/* =========================================================================
   15. CONTENT / THIRD PARTY
   ========================================================================= */
.ck-content, .ss-prose { color: var(--band-fg); font-size: 1.04rem; line-height: 1.75; overflow-wrap: anywhere; }
.ck-content > * + *, .ss-prose > * + * { margin-top: 1em; }
.ck-content h1, .ck-content h2, .ck-content h3, .ss-prose h1, .ss-prose h2, .ss-prose h3 { margin-top: 1.6em; font-family: var(--ss-display); font-weight: 800; letter-spacing: -.025em; }
.ck-content h2, .ss-prose h2 { font-size: 1.8rem; line-height: 1.12; }
.ck-content a, .ss-prose a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.ck-content blockquote, .ss-prose blockquote { margin: 1.5em 0; padding: .9rem 1.2rem; border: 0; border-radius: 14px; background: var(--band-sunk); box-shadow: none; font-size: 1.08rem; font-weight: 500; font-style: normal; }
.ck-content img, .ss-prose img { border-radius: var(--ss-r); height: auto; }
.ck-content table, .ss-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ck-content td, .ck-content th, .ss-prose td, .ss-prose th { border: 1px solid var(--band-line); padding: .6rem .85rem; }
.ck-content code, .ss-prose code { background: var(--band-sunk); padding: .1rem .35rem; border-radius: 6px; }
.ck-content pre, .ss-prose pre { background: var(--band-sunk); border: 0; padding: 1rem; border-radius: var(--ss-r); overflow: auto; }
.ck-content ul, .ck-content ol, .ss-prose ul, .ss-prose ol { padding-left: 1.3em; }
.ck-content hr, .ss-prose hr { border: 0; height: 2px; border-radius: 2px; background: var(--band-line); }
.ss-prose-lite p { margin: 0 0 .6rem; }
.select2-container--bootstrap4 .select2-selection { background-color: var(--band-input) !important; border: 2px solid var(--band-line) !important; border-radius: 12px !important; color: var(--band-fg); min-height: calc(1.4em + 1.32rem + 4px) !important; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered { color: var(--band-fg) !important; line-height: calc(1.4em + 1.32rem) !important; padding-left: .9rem !important; }
.select2-container--bootstrap4.select2-container--focus .select2-selection, .select2-container--bootstrap4.select2-container--open .select2-selection { border-color: var(--ss-accent) !important; box-shadow: none; }
.select2-container--bootstrap4 .select2-dropdown { background: var(--band-card); border: 0 !important; color: var(--band-fg); border-radius: 14px !important; box-shadow: none; overflow: hidden; }
.select2-container--bootstrap4 .select2-results__option--highlighted, .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] { background: var(--ss-accent) !important; color: var(--ss-on-accent) !important; }
.select2-container--bootstrap4 .select2-results__option[aria-selected=true] { background: var(--band-sunk); color: var(--band-fg); }
.select2-search--dropdown .select2-search__field { background: var(--band-input); color: var(--band-fg); border: 2px solid var(--band-line) !important; border-radius: 10px; }
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice { background: var(--band-sunk); border: 0; color: var(--band-fg); border-radius: 999px; font-weight: 600; }
.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field { background: transparent !important; color: var(--band-fg); }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b { border-top-color: var(--band-muted) !important; }
.select2-container--bootstrap4.select2-container--open .select2-selection--single .select2-selection__arrow b { border-bottom-color: var(--band-muted) !important; }
.select2-container--bootstrap4 .select2-selection__placeholder { color: var(--band-muted) !important; }
.swal2-popup { background: var(--band-card) !important; color: var(--band-fg) !important; border-radius: var(--ss-r-xl) !important; font-family: var(--ss-font) !important; box-shadow: none; padding: 1.75rem !important; }
.swal2-title { color: var(--band-fg) !important; font-family: var(--ss-display) !important; font-weight: 800 !important; font-size: 1.7rem !important; letter-spacing: -.03em; line-height: 1.1 !important; }
.swal2-content, .swal2-html-container { color: var(--band-muted) !important; font-size: 1rem !important; }
.swal2-styled { border-radius: 12px !important; font-family: var(--ss-display) !important; font-weight: 700 !important; font-size: .98rem !important; padding: .75rem 1.3rem !important; box-shadow: none; transition: transform .2s var(--ss-spring) !important; }
.swal2-styled:hover { transform: translateY(-2px); }
.swal2-styled:active { transform: translateY(3px); }
.swal2-styled.swal2-confirm { --btn-edge: var(--ss-accent-edge); background: var(--ss-accent) !important; color: var(--ss-on-accent) !important; }
.swal2-styled.swal2-cancel { background: var(--band-sunk) !important; color: var(--band-fg) !important; }
.swal2-container.swal2-backdrop-show, .swal2-container.swal2-shown { background: rgba(7, 9, 16, .65) !important; }
.swal2-icon.swal2-success [class^=swal2-success-circular-line], .swal2-icon.swal2-success .swal2-success-fix { background: var(--band-card) !important; }
/* CKEditor 5 chrome follows the band tokens (light + dark) on every page that loads an editor */
body {
	--ck-font-face: var(--ss-font); --ck-border-radius: 10px;
	--ck-color-base-background: var(--band-input); --ck-color-base-foreground: var(--band-sunk); --ck-color-base-border: var(--band-line);
	--ck-color-base-text: var(--band-fg); --ck-color-text: var(--band-fg); --ck-color-focus-border: var(--ss-accent); --ck-color-focus-outer-shadow: var(--bs-focus-ring-color);
	--ck-focus-ring: 2px solid var(--ss-accent); --ck-inner-shadow: none; --ck-drop-shadow: var(--ss-shadow-float); --ck-color-shadow-drop: rgba(0, 0, 0, .25); --ck-color-shadow-inner: transparent;
	--ck-color-toolbar-background: var(--band-sunk); --ck-color-toolbar-border: var(--band-line);
	--ck-color-button-default-background: transparent; --ck-color-button-default-hover-background: color-mix(in oklab, var(--band-fg) 9%, transparent); --ck-color-button-default-active-background: color-mix(in oklab, var(--band-fg) 14%, transparent);
	--ck-color-button-on-background: var(--ss-accent-soft); --ck-color-button-on-hover-background: color-mix(in oklab, var(--ss-accent) 28%, transparent); --ck-color-button-on-active-background: color-mix(in oklab, var(--ss-accent) 34%, transparent); --ck-color-button-on-color: var(--band-fg);
	--ck-color-button-action-background: var(--ss-accent); --ck-color-button-action-hover-background: var(--ss-accent-hover); --ck-color-button-action-active-background: var(--ss-accent-press); --ck-color-button-action-text: var(--ss-on-accent);
	--ck-color-split-button-hover-background: color-mix(in oklab, var(--band-fg) 9%, transparent); --ck-color-split-button-hover-border: var(--band-line);
	--ck-color-dropdown-panel-background: var(--band-card); --ck-color-dropdown-panel-border: var(--band-line); --ck-color-panel-background: var(--band-card); --ck-color-panel-border: var(--band-line);
	--ck-color-input-background: var(--band-input); --ck-color-input-border: var(--band-line); --ck-color-input-text: var(--band-fg); --ck-color-labeled-field-label-background: var(--band-card);
	--ck-color-list-background: var(--band-card); --ck-color-list-button-hover-background: var(--band-sunk); --ck-color-list-button-on-background: var(--ss-accent); --ck-color-list-button-on-background-focus: var(--ss-accent); --ck-color-list-button-on-text: var(--ss-on-accent);
	--ck-color-tooltip-background: var(--ss-ink); --ck-color-tooltip-text: var(--ss-bone); --ck-color-engine-placeholder-text: var(--band-muted); --ck-color-link-default: var(--band-fg); --ck-color-code-block-label-background: var(--band-muted);
}
.ck.ck-editor { width: 100%; }
.ck.ck-editor__main > .ck-editor__editable { min-height: 220px; color: var(--band-fg); }
.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) { box-shadow: none; }
.ck.ck-content blockquote, .ck-content blockquote { border-left: 0; font-style: normal; }
.ck-content figure.table th, .ck-content table th { letter-spacing: normal; font-size: inherit; color: var(--band-fg); white-space: normal; background: var(--band-sunk); }
.ck-content figure.table td, .ck-content figure.table th { border-color: var(--band-line) !important; }

/* =========================================================================
   16. MEMBERS, LOADER, UTILITIES, SHARED REVIEW RULES
   ========================================================================= */
.ss-member-search { padding: 1.35rem; max-width: 760px; }
.ss-member-search .form-control { padding-left: 2.8rem; }
.ss-member-search-ico { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--band-muted); font-size: 1.2rem; pointer-events: none; }
.ss-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.ss-member { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; color: var(--band-fg); }
.ss-member:hover { color: var(--band-fg); }
.ss-member + .ss-member { margin-top: 0; }
.ss-member-name { display: block; font: 700 1rem/1.25 var(--ss-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-member-meta { display: block; font-size: .84rem; color: var(--band-muted); }
.ss-loader { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: var(--band-bg); transition: opacity .3s var(--ss-ease), visibility .3s; }
.ss-loader.is-done { opacity: 0; visibility: hidden; }
.ss-loader-mark { position: relative; display: block; width: 64px; height: 76px; }
.ss-loader-mark svg { display: block; width: 64px; height: 64px; animation: ss-block-hop .9s var(--ss-ease) infinite; }
.ss-loader-shadow { position: absolute; left: 50%; bottom: 0; width: 46px; height: 8px; border-radius: 50%; background: rgba(20, 24, 33, .18); transform: translateX(-50%); animation: ss-block-shadow .9s var(--ss-ease) infinite; }
@keyframes ss-block-hop { 0%, 100% { transform: translateY(0) scale(1.06, .94); } 40% { transform: translateY(-18px) rotate(-10deg) scale(.96, 1.04); } 70% { transform: translateY(0) rotate(0) scale(1); } }
@keyframes ss-block-shadow { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; } 40% { transform: translateX(-50%) scale(.6); opacity: .5; } }
.ss-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.no-underline, .no-underline:hover { text-decoration: none; }
.cursor-pointer { cursor: pointer; }
.fw-medium { font-weight: 560 !important; }
.hide-theme-dark { display: none !important; }
[data-bs-theme="light"] .hide-theme-dark { display: inline-flex !important; }
[data-bs-theme="light"] .hide-theme-light { display: none !important; }
.ss-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ss-accent); color: var(--ss-on-accent); font: 800 .72rem/1 var(--ss-display); display: grid; place-items: center; box-shadow: none; }
.ss-tebex-auth-row { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; }
.ss-tebex-auth { margin-bottom: 1rem; }
.ss-tebex-auth + .ss-tebex-auth { margin-top: 0; }
[x-cloak] { display: none !important; }
.ss-panel--ink { --ss-accent-ink: color-mix(in oklab, var(--ss-accent) 78%, white); }
.ss-panel[style*="display: none"] + .ss-panel, .card[style*="display: none"] + .card { margin-top: 0; }
.ss-head-aside { min-width: 0; max-width: 100%; }
.form-check-label a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.table-responsive { position: relative; }
.d-flex[class*="gap-"] > .ss-panel + .ss-panel, .d-grid > .ss-panel + .ss-panel { margin-top: 0; }
img.lazyload:not(.loaded)[src$="/loaders/server.png"], img.lazyload:not(.loaded)[src$="/loaders/store.png"], img.lazyload:not(.loaded)[src$="/loaders/news.png"] { opacity: 0; }
.ss-title, .ss-title-sm, .ss-page-title, .ss-tile-name, .ss-mode-name, .ss-feature-title, .ss-promo-title, .ss-news-box h3, .ss-step h3, .ss-panel-title, .ss-product-name, .ss-auth-pitch, .ss-empty-title { text-wrap: balance; }
.ss-lead, .ss-news-text, .ss-mode-text, .ss-tile-desc { text-wrap: pretty; }

/* =========================================================================
   17. MOTION (only while <html> has .ss-motion), SCROLLBAR, PRINT
   ========================================================================= */
/* ---- stable hover --------------------------------------------------------------------------------------------------
   A block that moves on hover moves its hit box: with the pointer on its edge the hover ends, the block falls back under
   the pointer and the two states flicker. Clipped cards grow from their bottom edge instead (the box only gets bigger);
   small blocks keep their lift and carry an invisible area over the ground they left while hovered or pressed, so the
   pointer stays on them and a press on the top edge still ends in a click. */
:is(.ss-cat, .ss-news-card, .ss-mode, .ss-tile, .ss-product, .ss-dl-card, .ss-pl-vote, .ss-pl-wheel-tile) { transform-origin: 50% 100%; }
:where(.btn, .ss-balance, a.ss-chip, .page-link, .ss-ip, .ss-ip-mini, .ss-footer-ip, .ss-socials a, .ss-top, .ss-account-balance, .swal2-styled, .ss-fm-role, a.ss-panel) { position: relative; }
:is(.btn, .ss-balance, a.ss-chip, .page-link, .ss-hero-card, .ss-ip, .ss-ip-mini, .ss-footer-ip, .ss-socials a, .ss-top, .ss-account-balance, .swal2-styled, .ss-fm-role, a.ss-panel):is(:hover, :active)::before { content: ""; position: absolute; inset: -8px 0 -10px; z-index: -1; }
.ss-motion [data-ss-reveal] { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .6s var(--ss-ease), transform .8s var(--ss-spring); transition-delay: calc(var(--i, 0) * 70ms); }
.ss-motion [data-ss-reveal].is-in { opacity: 1; transform: none; }
.ss-motion .ss-news-card[data-ss-reveal].is-in:hover { transform: scale(1.015); transition-delay: 0s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
:root { --ss-scroll: #B8BECB; }
[data-bs-theme="dark"] { --ss-scroll: #3A404D; }
::-webkit-scrollbar { width: 14px; height: 10px; }
::-webkit-scrollbar-track { background: var(--band-sunk); }
::-webkit-scrollbar-thumb { border: 3px solid var(--band-sunk); border-radius: 10px; background: var(--ss-scroll); box-shadow: none; }
::-webkit-scrollbar-thumb:hover { background: var(--ss-accent); }
::-webkit-scrollbar-corner { background: var(--band-sunk); }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-color: var(--ss-scroll) var(--band-sunk); } }
@media (prefers-reduced-motion: reduce) {
	html:not(.ss-force-motion) *, html:not(.ss-force-motion) *::before, html:not(.ss-force-motion) *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
	html:not(.ss-force-motion) .ss-layer { transform: none !important; }
}
html.ss-no-anim *, html.ss-no-anim *::before, html.ss-no-anim *::after { animation: none !important; transition: none !important; }
@media print { .ss-topbar, .ss-header, .ss-footer, .ss-loader, .ss-sheet { display: none !important; } body { background: #fff; color: #000; } }