/*
 * V YI SOCIETY — LIQUID PRISM SYSTEM
 * The visual layer is intentionally independent from the Flask/Jinja logic.
 */

:root {
    color-scheme: light;
    --page-bg: #edf4f7;
    --page-bg-deep: #dbe9ef;
    --surface: rgba(248, 253, 255, 0.68);
    --surface-strong: rgba(255, 255, 255, 0.84);
    --surface-soft: rgba(240, 249, 252, 0.48);
    --panel-opaque: #f5fbfd;
    --ink: #102c39;
    --ink-strong: #061e29;
    --muted: #5c7280;
    --line: rgba(64, 104, 119, 0.18);
    --line-bright: rgba(255, 255, 255, 0.92);
    --primary: #087d91;
    --primary-rgb: 8, 125, 145;
    --secondary: #d8597d;
    --secondary-rgb: 216, 89, 125;
    --signal: #80e1ca;
    --signal-rgb: 128, 225, 202;
    --warning: #d48a26;
    --danger: #cf365e;
    --success: #17896b;
    --shadow: 0 28px 80px rgba(41, 76, 90, 0.12), 0 8px 24px rgba(48, 94, 109, 0.08);
    --shadow-hover: 0 36px 100px rgba(27, 89, 108, 0.18), 0 12px 32px rgba(48, 94, 109, 0.12);
    --prism-a: rgba(0, 191, 255, 0.46);
    --prism-b: rgba(255, 82, 145, 0.40);
    --prism-c: rgba(128, 255, 210, 0.46);
    --nav-bg: rgba(238, 249, 252, 0.64);
    --footer-bg: rgba(217, 235, 241, 0.64);
    --radius-xl: 30px;
    --radius-lg: 22px;
    --radius-md: 14px;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-liquid: cubic-bezier(.22, 1.35, .36, 1);
    --font-display: "Arial Narrow", "Microsoft YaHei UI", "PingFang SC", sans-serif;
    --font-body: Inter, "Segoe UI Variable", "Microsoft YaHei UI", "PingFang SC", sans-serif;
}

html[data-theme="dark"],
body.dark-mode {
    color-scheme: dark;
    --page-bg: #04050b;
    --page-bg-deep: #080b17;
    --surface: rgba(11, 15, 31, 0.66);
    --surface-strong: rgba(15, 20, 41, 0.88);
    --surface-soft: rgba(16, 20, 39, 0.48);
    --panel-opaque: #0c1122;
    --ink: #e9f7ff;
    --ink-strong: #ffffff;
    --muted: #8fa6bd;
    --line: rgba(137, 169, 255, 0.17);
    --line-bright: rgba(183, 237, 255, 0.34);
    --primary: #36e4ff;
    --primary-rgb: 54, 228, 255;
    --secondary: #ff3aa7;
    --secondary-rgb: 255, 58, 167;
    --signal: #a5ff68;
    --signal-rgb: 165, 255, 104;
    --warning: #ffc857;
    --danger: #ff5277;
    --success: #44efbb;
    --shadow: 0 32px 100px rgba(0, 0, 0, 0.54), 0 0 50px rgba(45, 37, 173, 0.10);
    --shadow-hover: 0 40px 120px rgba(0, 0, 0, 0.65), 0 0 60px rgba(0, 225, 255, 0.13);
    --prism-a: rgba(0, 238, 255, 0.82);
    --prism-b: rgba(255, 24, 170, 0.72);
    --prism-c: rgba(178, 255, 66, 0.56);
    --nav-bg: rgba(5, 7, 17, 0.70);
    --footer-bg: rgba(6, 8, 19, 0.78);
}

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

html {
    min-height: 100%;
    background: var(--page-bg);
    /* Native scrolling stays on the compositor thread on long documents. */
    scroll-behavior: auto;
    scrollbar-color: rgba(var(--primary-rgb), .55) transparent;
    scrollbar-width: thin;
}

body {
    position: relative;
    width: 100%;
    min-width: 0;
    isolation: isolate;
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0;
    background:
        radial-gradient(ellipse at 15% 8%, rgba(var(--primary-rgb), .12), transparent 42%),
        radial-gradient(ellipse at 86% 32%, rgba(var(--secondary-rgb), .10), transparent 38%),
        linear-gradient(145deg, var(--page-bg), var(--page-bg-deep)) !important;
    color: var(--ink) !important;
    font-family: var(--font-body) !important;
    line-height: 1.68;
    transition: color .65s var(--ease-out), background .85s var(--ease-out);
}

body::before {
    content: "";
    position: fixed;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    opacity: .30;
    background-image:
        linear-gradient(rgba(var(--primary-rgb), .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-rgb), .055) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, black, transparent 75%);
}

body.dark-mode::before {
    opacity: .55;
    background-size: 88px 88px;
    background-image:
        linear-gradient(rgba(75, 219, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 58, 167, .045) 1px, transparent 1px);
}

#fluid-field {
    position: fixed;
    z-index: -3;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .92;
    transition: opacity .6s ease, filter .8s ease;
}

body.dark-mode #fluid-field {
    opacity: 1;
    filter: saturate(1.18) contrast(1.06);
}

html[data-motion-quality="high"] #fluid-field,
html[data-motion-quality="xhigh"] #fluid-field,
html[data-motion-quality="xhigh+"] #fluid-field,
html[data-motion-quality="xhigh-pro"] #fluid-field,
html[data-motion-quality="xhigh-plus"] #fluid-field,
html[data-motion-quality="xhigh-max"] #fluid-field { opacity: 1; }
html[data-motion-quality="medium"] #fluid-field { opacity: .84; }
html[data-motion-quality="low"] #fluid-field,
html[data-motion-quality="minimal"] #fluid-field { opacity: .58; }

html[data-motion-quality="xhigh"] #fluid-field { filter: saturate(1.08) contrast(1.02); }
html[data-motion-quality="xhigh+"] #fluid-field { filter: saturate(1.14) contrast(1.035); }
html[data-motion-quality="xhigh-pro"] #fluid-field { filter: saturate(1.22) contrast(1.05); }
html[data-motion-quality="xhigh-plus"] #fluid-field { filter: saturate(1.3) contrast(1.065); }
html[data-motion-quality="xhigh-max"] #fluid-field { filter: saturate(1.4) contrast(1.08); }

body.long-page #fluid-field { opacity: .56; }
body.long-page .atmosphere { opacity: .42; }

.atmosphere {
    position: fixed;
    z-index: -2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.atmosphere::before,
.atmosphere::after {
    content: "";
    position: absolute;
    width: min(70vw, 900px);
    aspect-ratio: 1.8;
    border-radius: 50%;
    filter: blur(64px);
    opacity: .11;
    /* Static atmospheric light is cached by the compositor. Canvas supplies motion. */
    animation: none;
}

.atmosphere::before {
    left: -18vw;
    top: 5vh;
    background: linear-gradient(110deg, var(--prism-a), transparent 48%, var(--prism-c));
}

.atmosphere::after {
    right: -22vw;
    top: 40vh;
    background: linear-gradient(110deg, var(--prism-b), transparent 55%, var(--prism-a));
}

body.dark-mode .atmosphere::before,
body.dark-mode .atmosphere::after {
    opacity: .14;
    filter: blur(72px);
}

@keyframes atmosphereDrift {
    to { transform: translate3d(16vw, 8vh, 0) rotate(8deg) scale(1.15); }
}

html[data-motion-quality="high"] .atmosphere::before,
html[data-motion-quality="high"] .atmosphere::after,
html[data-motion-quality="xhigh"] .atmosphere::before,
html[data-motion-quality="xhigh"] .atmosphere::after,
html[data-motion-quality="xhigh+"] .atmosphere::before,
html[data-motion-quality="xhigh+"] .atmosphere::after,
html[data-motion-quality="xhigh-pro"] .atmosphere::before,
html[data-motion-quality="xhigh-pro"] .atmosphere::after,
html[data-motion-quality="xhigh-plus"] .atmosphere::before,
html[data-motion-quality="xhigh-plus"] .atmosphere::after,
html[data-motion-quality="xhigh-max"] .atmosphere::before,
html[data-motion-quality="xhigh-max"] .atmosphere::after {
    animation: atmosphereDrift 22s ease-in-out infinite alternate;
}

html[data-motion-quality="xhigh"] .atmosphere::before,
html[data-motion-quality="xhigh"] .atmosphere::after { animation-duration: 20s; opacity: .13; }
html[data-motion-quality="xhigh+"] .atmosphere::before,
html[data-motion-quality="xhigh+"] .atmosphere::after { animation-duration: 17s; opacity: .145; }
html[data-motion-quality="xhigh-pro"] .atmosphere::before,
html[data-motion-quality="xhigh-pro"] .atmosphere::after { animation-duration: 14s; opacity: .16; filter: blur(58px) saturate(1.16); }
html[data-motion-quality="xhigh-plus"] .atmosphere::before,
html[data-motion-quality="xhigh-plus"] .atmosphere::after { animation-duration: 11s; opacity: .175; filter: blur(54px) saturate(1.24); }
html[data-motion-quality="xhigh-max"] .atmosphere::before,
html[data-motion-quality="xhigh-max"] .atmosphere::after { animation-duration: 8.5s; opacity: .2; filter: blur(48px) saturate(1.34); }

.cursor-aura {
    position: fixed;
    z-index: 900;
    left: 0;
    top: 0;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle, rgba(var(--primary-rgb), .11), rgba(var(--secondary-rgb), .035) 42%, transparent 72%);
    transform: translate3d(calc(var(--pointer-x, -400px) - 50%), calc(var(--pointer-y, -400px) - 50%), 0);
    transition: opacity .4s ease;
}

body.pointer-active .cursor-aura { opacity: 1; }
body.dark-mode .cursor-aura { opacity: .42; }
body.modal-open .cursor-aura { opacity: 0 !important; }

.cursor-aura::before,
.cursor-aura::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(var(--primary-rgb), .24);
    border-radius: 47% 53% 62% 38% / 42% 58% 42% 58%;
    opacity: 0;
}

.cursor-aura::after { inset: 42px; border-color: rgba(var(--secondary-rgb), .22); animation-direction: reverse; }

@keyframes cursorPrismOrbit {
    0% { border-radius: 47% 53% 62% 38% / 42% 58% 42% 58%; transform: rotate(0deg) scale(1.02); }
    50% { border-radius: 62% 38% 44% 56% / 58% 38% 62% 42%; transform: rotate(180deg) scale(1.08); }
    100% { border-radius: 47% 53% 62% 38% / 42% 58% 42% 58%; transform: rotate(360deg) scale(1.02); }
}

html[data-motion-quality="xhigh-pro"] .cursor-aura::before,
html[data-motion-quality="xhigh-pro"] .cursor-aura::after { opacity: .46; animation: cursorPrismOrbit 9s linear infinite; }
html[data-motion-quality="xhigh-plus"] .cursor-aura::before,
html[data-motion-quality="xhigh-plus"] .cursor-aura::after { opacity: .6; animation: cursorPrismOrbit 6.8s linear infinite; }
html[data-motion-quality="xhigh-max"] .cursor-aura::before,
html[data-motion-quality="xhigh-max"] .cursor-aura::after { opacity: .78; animation: cursorPrismOrbit 4.8s linear infinite; box-shadow: 0 0 24px rgba(var(--primary-rgb), .12); }
.cursor-aura::after { animation-direction: reverse !important; }

/* Navigation — an optical rail rather than a conventional bar. */
.navbar.site-nav,
body.dark-mode .navbar.site-nav {
    position: sticky;
    z-index: 1040;
    top: 12px;
    width: min(1320px, calc(100% - 28px));
    min-height: 68px;
    margin: 12px auto 0;
    padding: 0;
    border: 1px solid var(--line-bright) !important;
    border-radius: 22px;
    background: var(--nav-bg) !important;
    color: var(--ink) !important;
    box-shadow: 0 18px 50px rgba(25, 62, 77, .11), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(var(--primary-rgb), .10) !important;
    backdrop-filter: blur(22px) saturate(1.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    transition: opacity .32s ease, transform .45s var(--ease-out), background .65s ease, border-color .65s ease, box-shadow .65s ease;
}

body.dark-mode .navbar.site-nav {
    box-shadow: 0 22px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(28,220,255,.05) !important;
}

.site-nav.nav-scrolled { box-shadow: 0 22px 64px rgba(25, 62, 77, .16), inset 0 1px 0 rgba(255,255,255,.38) !important; }
.site-nav.header-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-100% - 28px));
}
.site-nav > .container { max-width: 1280px; padding: 8px 16px; }

.site-nav .navbar-brand,
body.dark-mode .site-nav .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-strong) !important;
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.brand-logo-frame {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), .34);
    border-radius: 12px;
    background: #36a9f4;
    box-shadow: 0 7px 18px rgba(38, 150, 220, .18), inset 0 1px 0 rgba(255,255,255,.4);
}

.brand-logo-frame picture,
.brand-logo-frame img {
    display: block;
    width: 100%;
    height: 100%;
}

.brand-logo-frame img { object-fit: cover; }

.site-nav .nav-link,
body.dark-mode .site-nav .nav-link,
.site-nav #darkModeToggle,
body.dark-mode .site-nav #darkModeToggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    margin: 0 1px;
    padding: .55rem .72rem !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: var(--muted) !important;
    box-shadow: none !important;
    font-size: .91rem;
    font-weight: 580;
    letter-spacing: .035em;
    transition: color .3s ease, background .3s ease, transform .25s var(--ease-liquid) !important;
}

.site-nav .nav-link::after {
    content: "";
    position: absolute;
    right: 20%;
    bottom: 3px;
    left: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), transparent);
    transform: scaleX(0);
    transition: transform .35s var(--ease-out);
}

.site-nav .nav-link:hover,
.site-nav .nav-link.active,
body.dark-mode .site-nav .nav-link:hover,
body.dark-mode .site-nav .nav-link.active {
    background: rgba(var(--primary-rgb), .08) !important;
    color: var(--ink-strong) !important;
}

.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after { transform: scaleX(1); }
.site-nav .nav-link i { color: var(--primary); font-size: .86em; }

#darkModeToggle {
    width: 42px;
    justify-content: center;
    margin: 0 !important;
    border: 1px solid var(--line) !important;
}

#darkModeToggle i { color: var(--primary) !important; transition: transform .6s var(--ease-liquid), color .4s ease; }
#darkModeToggle:hover i { transform: rotate(24deg) scale(1.18); color: var(--secondary) !important; }

.dropdown-menu,
body.dark-mode .dropdown-menu {
    margin-top: 12px !important;
    padding: 8px;
    border: 1px solid var(--line-bright) !important;
    border-radius: 18px;
    background: var(--surface-strong) !important;
    box-shadow: var(--shadow) !important;
    backdrop-filter: blur(24px) saturate(1.4);
}

.dropdown-item,
body.dark-mode .dropdown-item {
    padding: .65rem .8rem;
    border-radius: 11px;
    color: var(--ink) !important;
}

.dropdown-item:hover,
body.dark-mode .dropdown-item:hover { background: rgba(var(--primary-rgb), .10) !important; color: var(--ink-strong) !important; }

/* Page composition */
.site-main {
    position: relative;
    min-width: 0;
    z-index: auto;
    width: min(1240px, calc(100% - 32px));
    max-width: none !important;
    margin: clamp(34px, 6vw, 84px) auto 0 !important;
    padding: 0 0 clamp(50px, 7vw, 100px) !important;
}

.site-main > .row { --bs-gutter-x: clamp(1.1rem, 2.2vw, 2rem); --bs-gutter-y: 1.2rem; }

h1, h2, h3, h4, h5, h6 {
    color: var(--ink-strong);
    font-family: var(--font-display);
    font-weight: 760;
    line-height: 1.15;
    letter-spacing: -.025em;
}

h1 { font-size: clamp(2.5rem, 6vw, 6.4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 3.6rem); }
h3 { font-size: clamp(1.35rem, 2vw, 2rem); }

p, li, td, th, label, small { color: inherit; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--secondary); }
.text-muted, body.dark-mode .text-muted { color: var(--muted) !important; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--primary);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    box-shadow: 0 0 12px var(--primary);
}

/* Holographic crystal surfaces. */
.card,
body.dark-mode .card,
.modal-content,
body.dark-mode .modal-content,
.admin-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line-bright) !important;
    border-radius: var(--radius-xl) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.25), transparent 28%),
        linear-gradient(115deg, rgba(var(--primary-rgb), .035), rgba(var(--secondary-rgb), .025)),
        var(--surface) !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(var(--secondary-rgb), .08) !important;
    /* Repeated backdrop filters on long lists create a GPU layer per card. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    transition: transform .55s var(--ease-out), box-shadow .55s ease, border-color .55s ease, background .65s ease !important;
}

.card::before,
.modal-content::before,
.admin-card::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(112deg, transparent 14%, rgba(255,255,255,.34) 31%, transparent 46%),
        radial-gradient(circle at var(--shine-x, 15%) var(--shine-y, 5%), rgba(var(--primary-rgb), .24), transparent 34%);
    opacity: .24;
    transition: opacity .4s ease;
}

.card::after,
.modal-content::after,
.admin-card::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: conic-gradient(from 145deg at 50% 50%, transparent 0 12%, var(--prism-a) 16%, transparent 24% 48%, var(--prism-b) 54%, transparent 63% 82%, var(--prism-c) 90%, transparent 97%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .64;
}

.card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--primary-rgb), .35) !important;
    box-shadow: var(--shadow-hover), 1px 0 0 rgba(var(--primary-rgb), .18), -1px 0 0 rgba(var(--secondary-rgb), .15) !important;
}

.card:hover::before { opacity: .42; }
.card.is-lit::before { opacity: .58; }
html[data-motion-quality="high"] .card.is-lit::before { opacity: .82; }
html[data-motion-quality="xhigh"] .card.is-lit::before,
html[data-motion-quality="xhigh+"] .card.is-lit::before { opacity: .9; }
html[data-motion-quality="xhigh-pro"] .card.is-lit::before,
html[data-motion-quality="xhigh-plus"] .card.is-lit::before,
html[data-motion-quality="xhigh-max"] .card.is-lit::before { opacity: 1; }

@keyframes prismEdgeShift {
    50% { filter: hue-rotate(22deg) saturate(1.4); opacity: .92; }
}

html[data-motion-quality="xhigh-pro"] .card.is-lit::after { animation: prismEdgeShift 5.5s ease-in-out infinite; }
html[data-motion-quality="xhigh-plus"] .card.is-lit::after { animation: prismEdgeShift 3.8s ease-in-out infinite; }
html[data-motion-quality="xhigh-max"] .card.is-lit::after { animation: prismEdgeShift 2.6s ease-in-out infinite; }

html[data-motion-quality="xhigh"] .card.is-lit,
html[data-motion-quality="xhigh+"] .card.is-lit,
html[data-motion-quality="xhigh-pro"] .card.is-lit,
html[data-motion-quality="xhigh-plus"] .card.is-lit,
html[data-motion-quality="xhigh-max"] .card.is-lit {
    transform: perspective(1100px) translateY(-6px) rotateX(var(--card-tilt-x, 0deg)) rotateY(var(--card-tilt-y, 0deg));
    transform-style: preserve-3d;
}

html[data-motion-quality="xhigh-pro"] .card.is-lit { box-shadow: var(--shadow-hover), 8px 5px 34px rgba(var(--primary-rgb), .11), -7px -4px 30px rgba(var(--secondary-rgb), .08) !important; }
html[data-motion-quality="xhigh-plus"] .card.is-lit { box-shadow: var(--shadow-hover), 12px 7px 42px rgba(var(--primary-rgb), .15), -10px -6px 38px rgba(var(--secondary-rgb), .11) !important; }
html[data-motion-quality="xhigh-max"] .card.is-lit { box-shadow: var(--shadow-hover), 15px 9px 52px rgba(var(--primary-rgb), .2), -13px -8px 48px rgba(var(--secondary-rgb), .15), 0 0 34px rgba(var(--signal-rgb), .08) !important; }
.card-body, body.dark-mode .card-body { position: relative; z-index: 4; padding: clamp(1.25rem, 2.5vw, 2rem); color: var(--ink) !important; background: transparent !important; }

.card-header,
body.dark-mode .card-header {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .65rem 1rem;
    min-height: 68px;
    padding: 1rem clamp(1.25rem, 2.5vw, 2rem);
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: rgba(var(--primary-rgb), .035) !important;
    color: var(--ink-strong) !important;
}

.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { margin: 0; }
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6,
.list-group-item h1, .list-group-item h2, .list-group-item h3, .list-group-item h4, .list-group-item h5, .list-group-item h6 {
    min-width: 0;
    overflow-wrap: anywhere;
}
.card-header > .d-flex,
.list-group-item .d-flex { min-width: 0; gap: .5rem 1rem; }
.card-header > .d-flex { width: 100%; }
.list-group-item .d-flex > div:first-child { min-width: 0; }
.card-footer, body.dark-mode .card-footer { position: relative; z-index: 4; border-color: var(--line) !important; background: transparent !important; color: var(--ink) !important; }

.market-page-title,
.market-item-title,
.market-detail-title,
.market-title-link,
body.dark-mode .market-page-title,
body.dark-mode .market-item-title,
body.dark-mode .market-detail-title,
body.dark-mode .market-title-link {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    color: var(--ink-strong) !important;
    -webkit-text-fill-color: currentColor;
}

.market-title-link { display: inline; overflow-wrap: anywhere; }

/* Home hero */
.home-stage {
    --orb-shift-x: 0px;
    --orb-shift-y: 0px;
    --copy-shift-x: 0px;
    --copy-shift-y: 0px;
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: min(680px, calc(100vh - 150px));
    display: grid;
    align-items: center;
    margin-bottom: clamp(28px, 5vw, 64px);
    padding: clamp(42px, 8vw, 100px) clamp(24px, 6vw, 82px);
    overflow: hidden;
    border: 1px solid var(--line-bright);
    border-radius: clamp(30px, 5vw, 58px);
    background:
        radial-gradient(circle at 80% 22%, rgba(var(--secondary-rgb), .16), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(var(--signal-rgb), .14), transparent 35%),
        linear-gradient(132deg, rgba(255,255,255,.16), rgba(var(--primary-rgb), .035) 50%, rgba(var(--secondary-rgb), .04)),
        var(--surface-soft);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.52);
    backdrop-filter: none;
}

.home-stage::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: clamp(350px, 52vw, 760px);
    aspect-ratio: 1;
    right: clamp(-250px, -12vw, -80px);
    top: 50%;
    border-radius: 50%;
    pointer-events: none;
    background:
        repeating-radial-gradient(circle, transparent 0 44px, rgba(var(--primary-rgb), .13) 45px 46px, transparent 47px 76px),
        conic-gradient(from 20deg, transparent, rgba(var(--secondary-rgb), .10), transparent 28%, rgba(var(--signal-rgb), .09), transparent 62%);
    mask-image: radial-gradient(circle, transparent 0 18%, #000 46%, transparent 73%);
    transform: translate3d(var(--orb-shift-x), calc(-50% + var(--orb-shift-y)), 0) rotate(-8deg) scale(.96);
    opacity: .72;
    transition: transform .7s var(--ease-out);
}

.home-stage::before {
    content: "";
    position: absolute;
    width: clamp(280px, 42vw, 620px);
    aspect-ratio: 1;
    right: clamp(-180px, -8vw, -40px);
    top: 50%;
    border: 1px solid rgba(var(--primary-rgb), .22);
    border-radius: 48% 52% 63% 37% / 56% 38% 62% 44%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), transparent 8%),
        conic-gradient(from 40deg, rgba(var(--primary-rgb), .38), rgba(var(--secondary-rgb), .18), rgba(var(--signal-rgb), .28), rgba(var(--primary-rgb), .38));
    box-shadow: inset 26px -30px 70px rgba(var(--secondary-rgb), .12), inset -30px 20px 90px rgba(255,255,255,.28), 0 0 100px rgba(var(--primary-rgb), .15);
    filter: blur(.2px);
    transform: translate3d(var(--orb-shift-x), calc(-50% + var(--orb-shift-y)), 0) rotate(-12deg);
    transition: transform .7s var(--ease-out), border-radius .7s var(--ease-out);
    animation: none;
    mix-blend-mode: multiply;
}

body.dark-mode .home-stage::before {
    border-color: rgba(var(--primary-rgb), .45);
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.8), transparent 5%),
        conic-gradient(from 40deg, rgba(var(--primary-rgb), .54), rgba(var(--secondary-rgb), .42), rgba(var(--signal-rgb), .28), rgba(var(--primary-rgb), .54));
    box-shadow: inset 26px -30px 80px rgba(255,20,170,.24), inset -30px 20px 90px rgba(36,228,255,.26), 0 0 140px rgba(var(--primary-rgb), .22);
    mix-blend-mode: screen;
    opacity: .75;
}

@keyframes liquidOrb {
    0% { border-radius: 48% 52% 63% 37% / 56% 38% 62% 44%; transform: translate3d(var(--orb-shift-x, 0px), calc(-50% + var(--orb-shift-y, 0px)), 0) rotate(-12deg) scale(.97); }
    50% { border-radius: 62% 38% 43% 57% / 38% 61% 39% 62%; }
    100% { border-radius: 39% 61% 55% 45% / 66% 42% 58% 34%; transform: translate3d(var(--orb-shift-x, 0px), calc(-50% + var(--orb-shift-y, 0px)), 0) rotate(9deg) scale(1.04); }
}

@keyframes authLiquidOrb {
    0% { border-radius: 58% 42% 32% 68% / 42% 55% 45% 58%; transform: rotate(-12deg) scale(.97); }
    50% { border-radius: 42% 58% 61% 39% / 58% 39% 61% 42%; transform: rotate(-1deg) scale(1.01); }
    100% { border-radius: 64% 36% 48% 52% / 38% 62% 44% 56%; transform: rotate(10deg) scale(1.04); }
}

html[data-motion-quality="high"] .home-stage::before,
html[data-motion-quality="high"] .auth-art::before {
    animation: liquidOrb 14s ease-in-out infinite alternate;
}

html[data-motion-quality="xhigh"] .home-stage::before,
html[data-motion-quality="xhigh"] .auth-art::before { animation: liquidOrb 12s ease-in-out infinite alternate; }
html[data-motion-quality="xhigh+"] .home-stage::before,
html[data-motion-quality="xhigh+"] .auth-art::before { animation: liquidOrb 10.5s ease-in-out infinite alternate; }
html[data-motion-quality="xhigh-pro"] .home-stage::before,
html[data-motion-quality="xhigh-pro"] .auth-art::before { animation: liquidOrb 9.2s ease-in-out infinite alternate; }
html[data-motion-quality="xhigh-plus"] .home-stage::before,
html[data-motion-quality="xhigh-plus"] .auth-art::before { animation: liquidOrb 8.2s ease-in-out infinite alternate; }
html[data-motion-quality="xhigh-max"] .home-stage::before,
html[data-motion-quality="xhigh-max"] .auth-art::before { animation: liquidOrb 7.2s ease-in-out infinite alternate; }

html[data-motion-quality="high"] .auth-art::before,
html[data-motion-quality="xhigh"] .auth-art::before,
html[data-motion-quality="xhigh+"] .auth-art::before,
html[data-motion-quality="xhigh-pro"] .auth-art::before,
html[data-motion-quality="xhigh-plus"] .auth-art::before,
html[data-motion-quality="xhigh-max"] .auth-art::before { animation-name: authLiquidOrb; }

@keyframes spectralPulse {
    50% { opacity: .94; filter: saturate(1.24) hue-rotate(10deg); }
}

html[data-motion-quality="xhigh-pro"] .home-stage::after,
html[data-motion-quality="xhigh-plus"] .home-stage::after,
html[data-motion-quality="xhigh-max"] .home-stage::after {
    animation: spectralPulse 8s ease-in-out infinite;
}

html[data-motion-quality="xhigh-pro"] .home-stage::after { animation-duration: 7s; opacity: .78; }
html[data-motion-quality="xhigh-plus"] .home-stage::after { animation-duration: 5.5s; opacity: .86; filter: saturate(1.16); }
html[data-motion-quality="xhigh-max"] .home-stage::after { animation-duration: 4.2s; opacity: .96; filter: saturate(1.28) contrast(1.05); }
html[data-motion-quality="xhigh-plus"] .home-stage::before { box-shadow: inset 30px -34px 80px rgba(var(--secondary-rgb), .18), inset -34px 24px 100px rgba(255,255,255,.34), 0 0 130px rgba(var(--primary-rgb), .2); }
html[data-motion-quality="xhigh-max"] .home-stage::before { box-shadow: inset 34px -38px 92px rgba(var(--secondary-rgb), .24), inset -38px 28px 112px rgba(255,255,255,.4), 0 0 165px rgba(var(--primary-rgb), .26), 0 0 70px rgba(var(--signal-rgb), .12); }

@keyframes spectralTextFlow {
    50% { background-position: 100% 50%; filter: saturate(1.28) brightness(1.06); }
}

html[data-motion-quality="xhigh-pro"] .home-stage h1 .accent,
html[data-motion-quality="xhigh-plus"] .home-stage h1 .accent,
html[data-motion-quality="xhigh-max"] .home-stage h1 .accent { background-size: 220% 100%; animation: spectralTextFlow 7s ease-in-out infinite; }
html[data-motion-quality="xhigh-plus"] .home-stage h1 .accent { animation-duration: 5.4s; }
html[data-motion-quality="xhigh-max"] .home-stage h1 .accent { animation-duration: 4.2s; }

html[data-motion-quality="medium"] .home-stage::before {
    animation: liquidOrb 26s ease-in-out infinite alternate;
}

.home-stage__content {
    position: relative;
    z-index: 4;
    max-width: 780px;
    pointer-events: none;
    transform: translate3d(var(--copy-shift-x), var(--copy-shift-y), 0);
    transition: transform .7s var(--ease-out);
}
.home-stage h1 { max-width: 720px; margin: 0 0 22px; text-wrap: balance; }
.home-stage h1 .accent { color: transparent; background: linear-gradient(105deg, var(--primary), var(--secondary) 58%, var(--signal)); background-clip: text; -webkit-background-clip: text; }
.home-stage__lead { max-width: 620px; margin: 0 0 30px; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.23rem); }
.home-stage__actions { display: flex; flex-wrap: wrap; gap: 12px; pointer-events: auto; }
.home-stage__meta { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 46px; color: var(--muted); font-size: .82rem; letter-spacing: .06em; }
.home-stage__meta span { display: inline-flex; align-items: center; gap: 8px; }
.home-stage__meta span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px var(--signal); }

.section-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: clamp(40px, 7vw, 86px) 0 24px; }
.section-intro h2 { margin: 0; }
.section-intro p { max-width: 480px; margin: 0; color: var(--muted); }

/* Lists, forms, tables */
.list-group { gap: 9px; }
.list-group-item,
body.dark-mode .list-group-item {
    position: relative;
    z-index: 4;
    margin: 0 !important;
    padding: 1rem 1.1rem;
    overflow: hidden;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-md) !important;
    background: rgba(var(--primary-rgb), .025) !important;
    color: var(--ink) !important;
    transition: transform .35s var(--ease-out), border-color .35s ease, background .35s ease !important;
}

.post-content,
.reply-content {
    overflow-wrap: anywhere;
    text-rendering: auto;
}

.post-content pre,
.reply-content pre,
.post-content table,
.reply-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.reply-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 180px;
}

.job-description,
.job-requirements,
.job-seek-description,
.job-seek-skills,
.job-seek-experience {
    overflow-wrap: anywhere;
    text-rendering: auto;
}

.list-group-item:hover,
body.dark-mode .list-group-item:hover {
    z-index: 5;
    border-color: rgba(var(--primary-rgb), .38) !important;
    background: rgba(var(--primary-rgb), .07) !important;
    color: var(--ink-strong) !important;
    transform: translateX(6px);
}

.form-control, .form-select,
body.dark-mode .form-control, body.dark-mode .form-select,
body.dark-mode input, body.dark-mode textarea, body.dark-mode select {
    min-height: 48px;
    padding: .72rem .95rem;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-md) !important;
    background: rgba(var(--primary-rgb), .035) !important;
    color: var(--ink) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease !important;
}

textarea.form-control, textarea { min-height: 120px; }
.form-control::placeholder, textarea::placeholder, body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: var(--muted) !important; opacity: .72; }
.form-label, body.dark-mode .form-label { color: var(--ink) !important; font-size: .86rem; font-weight: 650; letter-spacing: .035em; }

.form-control:focus, .form-select:focus,
body.dark-mode .form-control:focus, body.dark-mode .form-select:focus,
body.dark-mode input:focus, body.dark-mode textarea:focus, body.dark-mode select:focus {
    border-color: var(--primary) !important;
    background: rgba(var(--primary-rgb), .055) !important;
    color: var(--ink) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .12), 0 0 30px rgba(var(--primary-rgb), .08) !important;
}

/* Native selects, refined into one high-contrast control across every tool/page. */
select,
.form-select,
.promo-tool select,
.booth-tool select,
body.dark-mode select,
body.dark-mode .form-select {
    min-height: 46px;
    padding: .68rem 2.8rem .68rem 1rem !important;
    border: 1px solid rgba(var(--primary-rgb), .30) !important;
    border-radius: 13px !important;
    appearance: none;
    -webkit-appearance: none;
    color: var(--ink-strong) !important;
    background-color: var(--panel-opaque) !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--primary) 50%),
        linear-gradient(135deg, var(--primary) 50%, transparent 50%),
        linear-gradient(90deg, transparent, rgba(var(--primary-rgb), .10)) !important;
    background-position:
        calc(100% - 19px) 50%,
        calc(100% - 14px) 50%,
        calc(100% - 42px) 0 !important;
    background-size: 5px 5px, 5px 5px, 42px 100% !important;
    background-repeat: no-repeat !important;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 650;
    letter-spacing: .015em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 22px rgba(var(--primary-rgb), .055) !important;
    cursor: pointer;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease, transform .25s var(--ease-out) !important;
}

select:hover,
.form-select:hover,
.promo-tool select:hover,
.booth-tool select:hover {
    border-color: rgba(var(--primary-rgb), .58) !important;
    background-color: var(--surface-strong) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 28px rgba(var(--primary-rgb), .10) !important;
}

select:focus,
.form-select:focus,
.promo-tool select:focus,
.booth-tool select:focus {
    border-color: var(--primary) !important;
    color: var(--ink-strong) !important;
    background-color: var(--panel-opaque) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .14), 0 14px 36px rgba(var(--primary-rgb), .11) !important;
    outline: none;
}

select option,
.form-select option {
    background: var(--panel-opaque);
    color: var(--ink-strong);
    font-weight: 600;
}

select:disabled,
.form-select:disabled {
    opacity: .58;
    cursor: not-allowed;
    filter: saturate(.6);
}

.form-check-input { border-color: var(--line); background-color: rgba(var(--primary-rgb), .04); }
.form-check-input:checked { border-color: var(--primary); background-color: var(--primary); }

.table,
body.dark-mode .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(var(--primary-rgb), .035); --bs-table-hover-bg: rgba(var(--primary-rgb), .07); color: var(--ink) !important; }
.table > :not(caption) > * > * { padding: .9rem .8rem; border-color: var(--line) !important; color: inherit; }
.table thead th, body.dark-mode .table thead th { background: rgba(var(--primary-rgb), .06) !important; color: var(--ink-strong) !important; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }

/* Magnetic liquid controls */
.btn,
.site-nav .nav-link,
.magnetic {
    --mag-x: 0px;
    --mag-y: 0px;
    --press-scale: 1;
    transform: translate3d(var(--mag-x), var(--mag-y), 0) scale(var(--press-scale));
}

.btn,
body.dark-mode .btn {
    position: relative;
    isolation: isolate;
    min-height: 42px;
    padding: .65rem 1.05rem;
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), .30) !important;
    border-radius: 999px !important;
    background: rgba(var(--primary-rgb), .07) !important;
    color: var(--ink-strong) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 24px rgba(var(--primary-rgb), .07) !important;
    font-weight: 680;
    letter-spacing: .025em;
    transition: transform .26s var(--ease-liquid), color .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

.btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(100deg, var(--primary), var(--secondary));
    opacity: 0;
    transform: scaleX(.35);
    transition: transform .42s var(--ease-out), opacity .32s ease;
}

.btn:hover,
body.dark-mode .btn:hover {
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 14px 36px rgba(var(--primary-rgb), .2), 0 0 0 1px rgba(var(--secondary-rgb), .15) !important;
}
.btn:hover::before { opacity: 1; transform: scaleX(1); }
.btn:active { --press-scale: .92; border-radius: 42% 58% 55% 45% / 58% 45% 55% 42% !important; }
.btn-primary, body.dark-mode .btn-primary { border-color: transparent !important; background: linear-gradient(108deg, var(--primary), color-mix(in srgb, var(--primary) 58%, var(--secondary))) !important; color: #fff !important; }
.btn-primary::before { background: linear-gradient(108deg, var(--secondary), var(--primary)); }
.btn-success, body.dark-mode .btn-success { border-color: rgba(var(--signal-rgb), .4) !important; background: rgba(var(--signal-rgb), .12) !important; color: var(--success) !important; }
.btn-danger, body.dark-mode .btn-danger { border-color: rgba(255,70,110,.36) !important; background: rgba(255,70,110,.10) !important; color: var(--danger) !important; }
.btn-warning, body.dark-mode .btn-warning { border-color: rgba(255,190,70,.38) !important; background: rgba(255,190,70,.10) !important; color: var(--warning) !important; }
.btn-secondary, body.dark-mode .btn-secondary { border-color: var(--line) !important; background: rgba(100,120,145,.10) !important; color: var(--ink) !important; }

.liquid-ripple {
    position: absolute;
    z-index: -1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255,255,255,.55);
    transform: translate(-50%, -50%) scale(0);
    animation: liquidRipple .7s var(--ease-out) forwards;
}

@keyframes liquidRipple { to { opacity: 0; transform: translate(-50%, -50%) scale(18); } }

@keyframes prismRipple {
    to { opacity: 0; transform: translate(-50%, -50%) scale(var(--prism-ripple-scale, 22)) rotate(75deg); }
}

html[data-motion-quality="xhigh"] .liquid-ripple,
html[data-motion-quality="xhigh+"] .liquid-ripple,
html[data-motion-quality="xhigh-pro"] .liquid-ripple,
html[data-motion-quality="xhigh-plus"] .liquid-ripple,
html[data-motion-quality="xhigh-max"] .liquid-ripple {
    --prism-ripple-scale: 20;
    border: 1px solid rgba(255,255,255,.48);
    background: conic-gradient(from 30deg, rgba(var(--primary-rgb), .72), rgba(var(--secondary-rgb), .66), rgba(var(--signal-rgb), .58), rgba(var(--primary-rgb), .72));
    box-shadow: 0 0 16px rgba(var(--primary-rgb), .24);
    animation: prismRipple .82s var(--ease-out) forwards;
}
html[data-motion-quality="xhigh+"] .liquid-ripple { --prism-ripple-scale: 23; }
html[data-motion-quality="xhigh-pro"] .liquid-ripple { --prism-ripple-scale: 26; animation-duration: .9s; }
html[data-motion-quality="xhigh-plus"] .liquid-ripple { --prism-ripple-scale: 30; animation-duration: .98s; }
html[data-motion-quality="xhigh-max"] .liquid-ripple { --prism-ripple-scale: 34; animation-duration: 1.05s; box-shadow: 0 0 24px rgba(var(--primary-rgb), .3), 0 0 16px rgba(var(--secondary-rgb), .2); }

.badge,
body.dark-mode .badge {
    border: 1px solid rgba(var(--primary-rgb), .20);
    border-radius: 999px;
    background: rgba(var(--primary-rgb), .11) !important;
    color: var(--primary) !important;
    font-weight: 700;
    letter-spacing: .03em;
}
.badge.bg-success { background: rgba(var(--signal-rgb), .13) !important; color: var(--success) !important; }
.badge.bg-danger { background: rgba(255,75,115,.15) !important; color: var(--danger) !important; }
.badge.bg-warning { background: rgba(255,190,70,.15) !important; color: var(--warning) !important; }

.alert,
body.dark-mode .alert {
    position: relative;
    z-index: 5;
    border: 1px solid var(--line-bright) !important;
    border-radius: 16px !important;
    background: var(--surface-strong) !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.nav-tabs { gap: 7px; border-color: var(--line); }
.nav-tabs .nav-link { border: 1px solid transparent; border-radius: 12px 12px 0 0; color: var(--muted); }
.nav-tabs .nav-link.active { border-color: var(--line); border-bottom-color: transparent; background: rgba(var(--primary-rgb), .07); color: var(--primary); }

.pagination { gap: 6px; }
.page-link, body.dark-mode .page-link { border: 1px solid var(--line) !important; border-radius: 10px !important; background: var(--surface) !important; color: var(--ink) !important; }
.page-item.active .page-link { border-color: var(--primary) !important; background: var(--primary) !important; color: #fff !important; }

.modal { z-index: 1060; }
.modal-backdrop { z-index: 1055; }
.modal-backdrop.show { opacity: .68; backdrop-filter: none; }
.modal-dialog { position: relative; z-index: 1; }
.modal-content,
body.dark-mode .modal-content {
    isolation: isolate;
    transform: none;
    overflow: hidden;
    background: var(--panel-opaque) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.modal-open .modal-dialog,
body.modal-open .modal-content {
    transform: none !important;
}
.modal-content::before { z-index: 0; opacity: .18; }
.modal-content::after { z-index: 1; opacity: .48; }
.modal-content > form,
.modal-content > .modal-header,
.modal-content > .modal-body,
.modal-content > .modal-footer {
    position: relative;
    z-index: 3;
}
.modal-content > form {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}
.modal-content > form > .modal-body,
.modal-content > form > .modal-footer {
    position: relative;
    z-index: 3;
}
.modal-content > form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.modal-content > form > .modal-footer,
.modal-content > .modal-header,
.modal-content > .modal-footer { flex: 0 0 auto; }
.modal-header, .modal-footer, body.dark-mode .modal-header, body.dark-mode .modal-footer { border-color: var(--line) !important; background: rgba(var(--primary-rgb), .025) !important; color: var(--ink) !important; }
.modal-body, body.dark-mode .modal-body { background: transparent !important; color: var(--ink) !important; }
.btn-close { filter: none; opacity: .6; }
body.dark-mode .btn-close { filter: invert(1); }

/* Footer */
footer.site-footer,
body.dark-mode footer.site-footer {
    position: relative;
    min-width: 0;
    z-index: 2;
    width: min(1320px, calc(100% - 28px));
    margin: 0 auto 14px !important;
    padding: clamp(34px, 5vw, 64px) 0 24px !important;
    overflow: hidden;
    border: 1px solid var(--line-bright);
    border-radius: 34px;
    background: var(--footer-bg) !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow);
    backdrop-filter: none;
}

.site-footer::before {
    content: "VYI·CLUB";
    position: absolute;
    right: -1vw;
    bottom: -4vw;
    color: rgba(var(--primary-rgb), .055);
    font-family: var(--font-display);
    font-size: clamp(5rem, 14vw, 13rem);
    font-weight: 900;
    letter-spacing: -.08em;
    white-space: nowrap;
    pointer-events: none;
}

.site-footer .container { position: relative; z-index: 1; }
.site-footer h5 { color: var(--ink-strong) !important; text-transform: uppercase; letter-spacing: .08em; }
.site-footer a, body.dark-mode .site-footer a { color: var(--muted) !important; }
.site-footer a:hover, body.dark-mode .site-footer a:hover { color: var(--primary) !important; text-decoration: none; }
.site-footer hr { border-color: var(--line); opacity: 1; }

/* Single-layer mask reveal: constant DOM size and compositor-only properties. */
.title-reveal {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(14px);
    transition: opacity .35s ease, clip-path .58s var(--ease-out), transform .58s var(--ease-out);
}
.title-reveal.is-revealed { opacity: 1; clip-path: inset(0); transform: none; }
body.long-page .title-reveal { opacity: 1; clip-path: none; transform: none; transition: none; }

/* Theme transition fallback */
.theme-bloom {
    position: fixed;
    z-index: 99999;
    width: 18px;
    height: 18px;
    left: var(--bloom-x, 50vw);
    top: var(--bloom-y, 30px);
    border-radius: 50%;
    pointer-events: none;
    background: var(--bloom-color, #050712);
    transform: translate(-50%, -50%) scale(0);
    animation: themeBloom .72s var(--ease-out) forwards;
    mix-blend-mode: normal;
}

.back-to-top {
    position: fixed;
    z-index: 1050;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    display: grid;
    width: 48px;
    height: 48px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--line-bright);
    border-radius: 50%;
    background: var(--surface-strong);
    color: var(--ink-strong);
    box-shadow: 0 16px 42px rgba(23, 72, 90, .18), inset 0 1px 0 rgba(255,255,255,.38);
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px) scale(.86);
    transition: opacity .28s ease, transform .38s var(--ease-liquid), color .25s ease, background .25s ease;
    backdrop-filter: blur(12px) saturate(1.25);
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.back-to-top:hover {
    border-color: rgba(var(--primary-rgb), .5);
    background: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}

.back-to-top:focus-visible {
    outline: 3px solid rgba(var(--primary-rgb), .28);
    outline-offset: 3px;
}
@keyframes themeBloom { 52% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(var(--bloom-scale, 150)); } }

::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 9999; }
::view-transition-old(root) { z-index: 1; }

/* Authentication portal */
body.auth-page {
    display: grid !important;
    min-height: 100vh;
    padding: clamp(18px, 4vw, 54px);
    place-items: center;
}

.auth-shell {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(340px, 440px);
    width: min(1050px, 100%);
    min-height: min(720px, calc(100vh - 50px));
    overflow: hidden;
    border: 1px solid var(--line-bright);
    border-radius: clamp(28px, 4vw, 48px);
    background: var(--surface);
    box-shadow: var(--shadow-hover);
    backdrop-filter: blur(24px) saturate(1.35);
}

.auth-art {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(34px, 6vw, 72px);
    overflow: hidden;
    background: linear-gradient(145deg, rgba(var(--primary-rgb), .16), rgba(var(--secondary-rgb), .08));
}

.auth-art::before {
    content: "";
    position: absolute;
    width: min(55vw, 560px);
    aspect-ratio: 1;
    right: -28%;
    bottom: -16%;
    border: 1px solid rgba(var(--primary-rgb), .34);
    border-radius: 58% 42% 32% 68% / 42% 55% 45% 58%;
    background: conic-gradient(from 30deg, rgba(var(--primary-rgb), .45), rgba(var(--secondary-rgb), .28), rgba(var(--signal-rgb), .34), rgba(var(--primary-rgb), .45));
    box-shadow: inset 30px -20px 80px rgba(255,255,255,.20), 0 0 120px rgba(var(--primary-rgb), .16);
    animation: none;
    mix-blend-mode: screen;
}

.auth-mark { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; color: var(--ink-strong); font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.auth-art__copy { position: relative; z-index: 1; max-width: 510px; }
.auth-art__copy h1 { margin: 0 0 22px; font-size: clamp(2.5rem, 5vw, 5rem); }
.auth-art__copy p { max-width: 430px; color: var(--muted); font-size: 1.05rem; }

.login-card, .register-card {
    align-self: center;
    width: 100% !important;
    max-width: none !important;
    padding: clamp(32px, 5vw, 54px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ink);
}

.login-header, .register-header { margin-bottom: 32px !important; text-align: left !important; }
.login-header h2, .register-header h2 { margin-bottom: 8px !important; color: var(--ink-strong) !important; font-size: 2rem; }
.login-header p, .register-header p { color: var(--muted) !important; }
.auth-home { display: inline-flex; margin-top: 20px; color: var(--muted); font-size: .86rem; }
.auth-theme { position: fixed; z-index: 20; right: 24px; top: 24px; width: 44px; height: 44px; padding: 0 !important; }

/* Tool pages keep their dense editor ergonomics while inheriting the atmosphere. */
.booth-tool, .promo-tool { position: relative; z-index: 3; }
.booth-tool .card, .promo-tool .panel, .promo-tool details, .promo-tool .section-card, .promo-tool .product-editor,
body.dark-mode .booth-tool .card, body.dark-mode .promo-tool .panel, body.dark-mode .promo-tool details, body.dark-mode .promo-tool .section-card, body.dark-mode .promo-tool .product-editor {
    border-color: var(--line) !important;
    background: var(--surface-strong) !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow);
}

/* Music controls */
.home-orb-control {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: clamp(-180px, -8vw, -40px);
    width: clamp(280px, 42vw, 620px);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    transform: translateY(-50%);
    cursor: pointer;
}

.home-orb-control:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .42); outline-offset: -8px; }

.music-dock {
    position: fixed;
    z-index: 1040;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(82px, calc(76px + env(safe-area-inset-bottom)));
    width: 58px;
    height: 58px;
    color: var(--ink);
    transition: width .45s var(--ease-out), height .45s var(--ease-out), opacity .25s ease, transform .35s var(--ease-out), visibility .25s;
}

.music-dock.is-expanded {
    width: min(380px, calc(100vw - 28px));
    height: min(var(--music-expanded-height, 410px), 480px, calc(100dvh - 110px));
}

.music-dock.is-empty.is-expanded { height: 250px; }

.music-dock.is-orb-visible {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(.92);
}

.music-dock__wave {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    display: flex;
    width: 58px;
    height: 58px;
    padding: 0 12px;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid var(--line-bright);
    border-radius: 50%;
    background: var(--surface-strong);
    box-shadow: 0 18px 52px rgba(20, 69, 86, .22), inset 0 1px 0 rgba(255,255,255,.46);
    color: var(--primary);
    cursor: pointer;
    backdrop-filter: blur(18px) saturate(1.5);
    transform-origin: right bottom;
    transition: opacity .2s ease, transform .3s var(--ease-liquid), visibility .2s, border-color .25s ease, box-shadow .25s ease;
}

.music-dock__wave::before {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(var(--primary-rgb), .24);
    border-radius: inherit;
    opacity: .7;
    animation: musicWaveHalo 2.2s ease-out infinite;
}

.music-dock.is-paused .music-dock__wave::before,
.music-dock.is-empty .music-dock__wave::before { animation: none; opacity: .28; }

.music-dock.is-expanded .music-dock__wave {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: scale(.68) rotate(12deg);
}

.music-dock__wave span {
    width: 3px;
    height: 8px;
    border-radius: 3px;
    background: currentColor;
    box-shadow: 0 0 9px rgba(var(--primary-rgb), .36);
    transform-origin: center;
    animation: musicWave .9s ease-in-out infinite alternate;
}

.music-dock__wave span:nth-child(2), .music-dock__wave span:nth-child(6) { animation-delay: -.55s; }
.music-dock__wave span:nth-child(3), .music-dock__wave span:nth-child(5) { animation-delay: -.26s; }
.music-dock__wave span:nth-child(4) { animation-delay: -.72s; }
.music-dock.is-paused .music-dock__wave span { animation: none; opacity: .58; }
.music-dock.is-paused .music-dock__wave span:nth-child(1),
.music-dock.is-paused .music-dock__wave span:nth-child(7) { transform: scaleY(.45); }
.music-dock.is-paused .music-dock__wave span:nth-child(2),
.music-dock.is-paused .music-dock__wave span:nth-child(6) { transform: scaleY(.8); }
.music-dock.is-paused .music-dock__wave span:nth-child(3),
.music-dock.is-paused .music-dock__wave span:nth-child(5) { transform: scaleY(1.1); }
.music-dock.is-paused .music-dock__wave span:nth-child(4) { transform: scaleY(.65); }
.music-dock.is-empty .music-dock__wave { color: var(--muted); }

@keyframes musicWave {
    from { transform: scaleY(.5); opacity: .64; }
    to { transform: scaleY(2.5); opacity: 1; }
}

@keyframes musicWaveHalo {
    0% { opacity: .55; transform: scale(.88); }
    72%, 100% { opacity: 0; transform: scale(1.18); }
}

.music-dock__panel {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--line-bright);
    border-radius: 20px 20px 29px 20px;
    background:
        radial-gradient(circle at 8% 4%, rgba(var(--primary-rgb), .14), transparent 36%),
        radial-gradient(circle at 96% 88%, rgba(var(--secondary-rgb), .1), transparent 34%),
        var(--panel-opaque);
    box-shadow: 0 32px 100px rgba(14, 50, 66, .34), inset 0 1px 0 rgba(255,255,255,.45);
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(.88);
    transform-origin: right bottom;
    transition: opacity .25s ease, transform .4s var(--ease-liquid);
}

.music-dock__panel::before {
    content: "";
    position: absolute;
    inset: 0 18px auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), var(--signal), transparent);
    opacity: .72;
}

.music-dock.is-expanded .music-dock__panel {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.music-dock__now { display: grid; grid-template-columns: 46px minmax(0, 1fr) 36px; gap: 11px; align-items: center; }
.music-dock__signal { position: relative; display: grid; width: 46px; height: 46px; place-items: center; overflow: hidden; border: 1px solid rgba(var(--primary-rgb), .22); border-radius: 12px; background: conic-gradient(from 30deg, rgba(var(--primary-rgb), .2), rgba(var(--secondary-rgb), .12), rgba(var(--signal-rgb), .18), rgba(var(--primary-rgb), .2)); color: var(--primary); }
.music-dock__signal::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.48); border-radius: 42% 58% 61% 39%; animation: musicSignalSpin 4.8s linear infinite; }
.music-dock.is-paused .music-dock__signal::before { animation-play-state: paused; }
.music-dock__signal i { position: relative; z-index: 1; }
@keyframes musicSignalSpin { to { transform: rotate(1turn); } }
.music-dock__now strong, .music-dock__now small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-dock__now strong { color: var(--ink-strong); font-size: .92rem; }
.music-dock__now small { margin-top: 2px; color: var(--muted); font-size: .73rem; }
.music-dock__close { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(var(--primary-rgb), .04); color: var(--muted); transition: color .2s ease, background .2s ease, transform .25s var(--ease-liquid); }
.music-dock__close:hover { background: rgba(var(--secondary-rgb), .11); color: var(--ink-strong); transform: rotate(90deg); }
.music-dock__timeline { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 8px; margin: 16px 0 14px; align-items: center; color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; }
.music-dock__timeline span:last-child { text-align: right; }
.music-dock__timeline input { --seek-progress: 0%; width: 100%; height: 18px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: var(--primary); cursor: pointer; appearance: none; }
.music-dock__timeline input::-webkit-slider-runnable-track { height: 4px; border-radius: 8px; background: linear-gradient(90deg, var(--primary) 0 var(--seek-progress), rgba(var(--primary-rgb), .13) var(--seek-progress) 100%); }
.music-dock__timeline input::-webkit-slider-thumb { width: 13px; height: 13px; margin-top: -4.5px; border: 2px solid var(--panel-opaque); border-radius: 50%; background: var(--secondary); box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), .13); appearance: none; }
.music-dock__timeline input::-moz-range-track { height: 4px; border-radius: 8px; background: rgba(var(--primary-rgb), .13); }
.music-dock__timeline input::-moz-range-progress { height: 4px; border-radius: 8px; background: var(--primary); }
.music-dock__timeline input::-moz-range-thumb { width: 13px; height: 13px; border: 2px solid var(--panel-opaque); border-radius: 50%; background: var(--secondary); }
.music-dock__controls { display: grid; grid-template-columns: 38px 44px 38px minmax(110px, 1fr); gap: 8px; align-items: center; }
.music-dock__controls button { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(var(--primary-rgb), .05); color: var(--ink); transition: transform .24s var(--ease-liquid), color .2s ease, border-color .2s ease, background .2s ease; }
.music-dock__controls button:hover { border-color: rgba(var(--primary-rgb), .45); background: rgba(var(--primary-rgb), .12); color: var(--primary); transform: translateY(-2px); }
.music-dock__controls .music-dock__play { width: 44px; height: 44px; border-color: transparent; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary), var(--secondary) 38%)); color: #fff; box-shadow: 0 8px 24px rgba(var(--primary-rgb), .24); }
.music-dock__controls select { min-width: 0; height: 38px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 10px; background-color: rgba(var(--primary-rgb), .05); color: var(--ink); font-size: .78rem; }
.music-dock__list { display: grid; min-height: 0; align-content: start; gap: 5px; margin-top: 14px; overflow-y: auto; overscroll-behavior: contain; }
.music-dock__track { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; width: 100%; padding: 9px 10px; align-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--muted); text-align: left; }
.music-dock__track span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-dock__track:hover, .music-dock__track.is-current { background: linear-gradient(90deg, rgba(var(--primary-rgb), .12), rgba(var(--secondary-rgb), .045)); color: var(--ink-strong); }
.music-dock__track.is-current i { color: var(--primary); }

/* Messages */
.messages-page { max-width: 1440px; margin-inline: auto; }
.messages-layout { align-items: stretch; }
.message-sidebar,
.message-panel { min-height: 560px; }
.message-sidebar__body { max-height: 500px; padding: 10px !important; overflow-y: auto; overscroll-behavior: contain; }
.message-conversation-list { gap: 5px; }
.message-conversation,
body.dark-mode .message-conversation {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
    min-height: 66px;
    padding: 10px !important;
    align-items: center;
    overflow: hidden;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: var(--ink) !important;
    transform: none !important;
    transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.message-conversation:hover,
body.dark-mode .message-conversation:hover {
    border-color: rgba(var(--primary-rgb), .22) !important;
    background: rgba(var(--primary-rgb), .065) !important;
    color: var(--ink-strong) !important;
    box-shadow: inset 3px 0 0 rgba(var(--primary-rgb), .5) !important;
}
.message-conversation.active,
.message-conversation.active:hover,
body.dark-mode .message-conversation.active,
body.dark-mode .message-conversation.active:hover {
    border-color: rgba(var(--primary-rgb), .34) !important;
    background: linear-gradient(105deg, rgba(var(--primary-rgb), .16), rgba(var(--secondary-rgb), .065)) !important;
    color: var(--ink-strong) !important;
    box-shadow: inset 3px 0 0 var(--primary), 0 8px 24px rgba(var(--primary-rgb), .08) !important;
}
.message-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(var(--primary-rgb), .24);
    border-radius: 50%;
    background: var(--surface-strong);
    box-shadow: 0 5px 14px rgba(var(--primary-rgb), .10);
    object-fit: cover;
}
.message-avatar--small { width: 34px; height: 34px; flex-basis: 34px; }
.message-conversation__content,
.message-conversation__topline,
.message-conversation__bottomline { min-width: 0; }
.message-conversation__content { display: grid; gap: 4px; }
.message-conversation__topline,
.message-conversation__bottomline { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.message-conversation__name { overflow: hidden; color: inherit; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.message-conversation__time { flex: 0 0 auto; color: var(--muted); font-size: .64rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.message-conversation__preview { min-width: 0; overflow: hidden; color: var(--muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.message-conversation__unread { flex: 0 0 auto; min-width: 20px; }
.message-conversation.active .message-conversation__preview,
.message-conversation.active .message-conversation__time { color: color-mix(in srgb, var(--ink) 72%, var(--primary)); }
.message-panel { display: flex; flex-direction: column; overflow: hidden; }
.message-panel__header { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.message-contact { display: flex; min-width: 0; gap: 11px; align-items: center; }
.message-contact__identity { min-width: 0; }
.message-contact__identity h6,
.message-contact__identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-thread { display: flex; height: 430px; min-height: 320px; flex: 1 1 auto; flex-direction: column; gap: 14px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.message-row { display: flex; gap: 9px; align-items: flex-end; }
.message-row--outgoing { justify-content: flex-end; }
.message-bubble { display: inline-block; max-width: min(72%, 620px); padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; background: var(--surface-strong); color: var(--ink); box-shadow: 0 8px 24px rgba(20, 48, 62, .055); overflow-wrap: anywhere; }
.message-bubble--outgoing { border-color: rgba(var(--primary-rgb), .32); border-radius: 14px 14px 4px 14px; background: linear-gradient(135deg, rgba(var(--primary-rgb), .88), rgba(var(--primary-rgb), .68)); color: #fff; }
.message-bubble p { margin: 0 0 4px; white-space: pre-wrap; }
.message-bubble small { display: block; color: var(--muted); font-size: .7rem; font-variant-numeric: tabular-nums; text-align: right; }
.message-bubble--outgoing small { color: rgba(255,255,255,.72); }
.message-bubble--outgoing .fa-check-double { color: color-mix(in srgb, var(--signal) 76%, white); }
.message-composer { padding: 14px !important; }
.message-composer textarea { min-height: 48px; max-height: 144px; resize: none; }
.message-composer .input-group { align-items: flex-end; gap: 8px; }
.message-composer .input-group > .form-control { border-radius: 14px !important; }
.message-composer .btn { flex: 0 0 auto; }
.message-empty-state { display: grid; min-height: 240px; place-content: center; justify-items: center; color: var(--muted); text-align: center; }
.message-empty-state i { margin-bottom: 14px; color: rgba(var(--primary-rgb), .46); font-size: 2.5rem; }
.message-empty-state h4 { color: var(--ink-strong); }
.message-empty-state p { margin: 0; }
.message-empty-state--compact { min-height: 180px; }
.message-empty-state--compact i { font-size: 1.8rem; }

/* Rich text and threaded replies */
.rich-editor-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--primary-rgb), .035); }
.rich-editor-toolbar .btn { min-width: 38px; margin: 0 !important; }
.rich-editor-toolbar__size { width: 104px; min-height: 38px !important; padding: 5px 28px 5px 9px !important; }
.rich-editor-toolbar__color { position: relative; display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; color: var(--editor-color, var(--secondary)); cursor: pointer; }
.rich-editor-toolbar__color input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.rich-editor-toolbar__hint { flex: 1 1 200px; line-height: 1.45; }
.post-content, .reply-content { line-height: 1.8; }
.post-content > :last-child, .reply-content > :last-child { margin-bottom: 0; }
.post-content img, .reply-content img { height: auto; max-width: 100%; border-radius: 10px; }
.post-content a, .reply-content a { overflow-wrap: anywhere; }
.post-content .custom-block, .reply-content .custom-block { padding: 12px 14px; border-left: 3px solid var(--primary); background: rgba(var(--primary-rgb), .055); }

.reply-item { position: relative; margin: 0 0 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--primary-rgb), .025); content-visibility: auto; contain-intrinsic-size: auto 180px; }
.reply-item--nested { margin-top: 10px; border-left: 2px solid rgba(var(--primary-rgb), .4); background: rgba(var(--primary-rgb), .045); }
.reply-item__header { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.reply-item__author { display: flex; min-width: 0; gap: 10px; align-items: center; }
.reply-item__author > div { display: grid; min-width: 0; }
.reply-item__author strong, .reply-item__author small { overflow-wrap: anywhere; }
.reply-item__avatar { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 10px; background: linear-gradient(145deg, rgba(var(--primary-rgb), .2), rgba(var(--secondary-rgb), .14)); color: var(--ink-strong); font-weight: 800; }
.reply-item__tools { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.reply-item__tools .btn, .reply-actions .btn { min-height: 34px; }
.reply-content { margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-soft); color: var(--ink); }
.reply-actions { display: flex; gap: 8px; }
.reply-children { margin: 12px 0 0 clamp(8px, calc(var(--reply-depth) * 7px), 28px); }

@media (min-width: 1600px) {
    .site-main { max-width: 1480px !important; }
    .home-stage__content { max-width: 850px; }
}

@media (max-height: 620px) and (orientation: landscape) {
    .music-dock.is-expanded { height: calc(100dvh - 24px); bottom: 12px; }
    .music-dock__list { max-height: none; }
    .home-stage { min-height: 440px; }
}

/* Responsive & accessibility */
@media (max-width: 991.98px) {
    .navbar.site-nav { top: 8px; width: calc(100% - 16px); margin-top: 8px; }
    .site-nav .navbar-toggler {
        display: grid;
        width: 44px;
        height: 44px;
        padding: 0;
        place-items: center;
        border: 1px solid var(--line) !important;
        border-radius: 13px;
        background: rgba(var(--primary-rgb), .06) !important;
        box-shadow: none !important;
    }
    .site-nav .navbar-toggler-icon,
    body.dark-mode .site-nav .navbar-toggler-icon {
        width: 22px;
        height: 16px;
        border: 0 !important;
        background-color: transparent !important;
        background-image:
            linear-gradient(var(--ink-strong), var(--ink-strong)),
            linear-gradient(var(--ink-strong), var(--ink-strong)),
            linear-gradient(var(--ink-strong), var(--ink-strong)) !important;
        background-position: center top, center, center bottom !important;
        background-repeat: no-repeat !important;
        background-size: 100% 2px !important;
        filter: none !important;
    }
    .site-nav .navbar-collapse,
    body.dark-mode .site-nav .navbar-collapse {
        max-height: calc(100dvh - 96px);
        margin-top: 8px;
        padding: 10px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--panel-opaque) !important;
        box-shadow: var(--shadow);
    }
    .site-nav .navbar-nav.align-items-center { align-items: stretch !important; }
    .site-nav .nav-link { padding: .7rem .9rem !important; }
    .site-nav .dropdown-menu {
        position: static !important;
        width: 100%;
        margin-top: 4px !important;
        transform: none !important;
    }
    .home-stage { min-height: auto; }
    .home-stage::before { right: -36%; opacity: .5; }
    .home-orb-control { right: -36%; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-art { min-height: 260px; }
    .auth-art__copy h1 { font-size: clamp(2.3rem, 9vw, 4.2rem); }
}

@media (max-width: 767.98px) {
    .site-main { width: calc(100% - 16px); max-width: calc(100% - 16px) !important; margin-top: 28px !important; padding-right: 0 !important; padding-left: 0 !important; }
    .site-main > .container-fluid { padding-right: 0; padding-left: 0; }
    .site-main .row { margin-right: 0; margin-left: 0; }
    .site-nav > .container { padding: 7px 10px; }
    .site-nav .navbar-brand { gap: 8px; font-size: 1.04rem; letter-spacing: .08em; }
    .brand-logo-frame { width: 36px; height: 36px; border-radius: 10px; }
    .home-stage { padding: 38px 18px; border-radius: 24px; }
    .home-stage__content { min-width: 0; z-index: 4; }
    .home-stage .eyebrow { max-width: 100%; font-size: .63rem; letter-spacing: .12em; overflow-wrap: anywhere; }
    .home-stage h1 { font-size: 2.45rem; line-height: 1.12; }
    .home-stage::before { width: 320px; right: -215px; top: 24%; opacity: .34; }
    .home-orb-control { width: 320px; height: auto; right: -215px; top: 24%; aspect-ratio: 1; transform: translateY(-50%); }
    .home-stage__lead { font-size: .98rem; line-height: 1.72; }
    .home-stage__actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .home-stage__actions .btn { width: 100%; }
    .home-stage__meta { gap: 10px 16px; margin-top: 34px; }
    .section-intro { display: block; }
    .section-intro p { margin-top: 12px; }
    .section-intro h2 { font-size: 2rem; }
    .card, .modal-content { border-radius: 22px !important; }
    .card-header { flex-wrap: wrap; gap: 10px; min-height: 60px; padding: .9rem 1rem; }
    .card-header > * { min-width: 0; }
    .card-body { padding: 1rem; }
    .list-group-item { min-width: 0; padding: .9rem; }
    .list-group-item h1, .list-group-item h2, .list-group-item h3, .list-group-item h4, .list-group-item h5, .list-group-item h6,
    .list-group-item p, .list-group-item small { min-width: 0; overflow-wrap: anywhere; }
    .table-responsive { max-width: 100%; border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-responsive > .table { min-width: 640px; margin-bottom: 0; }
    .modal-dialog { width: calc(100% - 16px); max-width: none; margin: 8px auto; }
    .modal-content { max-height: calc(100dvh - 16px); }
    .modal-body { overflow-y: auto; }
    .post-content, .reply-content, .job-description, .job-requirements, .job-seek-description { font-size: .98rem; line-height: 1.76; }
    .post-content pre, .reply-content pre { max-width: 100%; overflow-x: auto; }
    .post-content img, .reply-content img { max-height: 70vh; object-fit: contain; }
    .btn { min-height: 44px; }
    .back-to-top { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 44px; height: 44px; backdrop-filter: none; }
    .music-dock { right: 14px; bottom: calc(70px + env(safe-area-inset-bottom)); width: 52px; height: 52px; }
    .music-dock.is-expanded { width: min(370px, calc(100vw - 20px)); height: min(var(--music-expanded-height, 410px), 480px, calc(100dvh - 92px)); }
    .music-dock.is-empty.is-expanded { height: 244px; }
    .music-dock__wave { width: 52px; height: 52px; padding: 0 10px; }
    .music-dock__panel { width: 100%; max-height: 100%; padding: 16px 14px; border-radius: 18px; }
    .music-dock__list { max-height: none; }
    .message-sidebar, .message-panel { min-height: 0; }
    .message-sidebar__body { max-height: 430px; }
    .message-thread { height: min(56vh, 520px); }
    .rich-editor-toolbar__hint { flex-basis: 100%; }
    .reply-item { padding: 11px; }
    .reply-item__header { flex-direction: column; }
    .reply-item__tools { width: 100%; justify-content: flex-start; }
    .reply-item__tools .btn { min-width: 38px; }
    .reply-content { margin: 10px 0; padding: 11px; }
    .reply-children { margin-left: 5px; padding-left: 7px; border-left: 1px solid rgba(var(--primary-rgb), .24); }
    .market-page-title, .market-item-title, .market-detail-title, .market-title-link { max-width: 100%; overflow-wrap: anywhere; }
    footer.site-footer { width: calc(100% - 16px); border-radius: 24px; text-align: left !important; }
    .auth-page { padding: 10px; }
    .auth-shell { min-height: calc(100vh - 20px); border-radius: 26px; }
    .auth-art { min-height: 220px; padding: 34px 26px; }
    .auth-art__copy p { display: none; }
    .login-card, .register-card { padding: 34px 26px !important; }
    .verification-row { flex-wrap: wrap; }
    .verification-row .btn { width: 100%; }
    .site-main > .d-flex.justify-content-between,
    .site-main > .container > .d-flex.justify-content-between,
    .card-header .d-flex.justify-content-between,
    .card-footer .d-flex.justify-content-between,
    .list-group-item .d-flex.justify-content-between {
        flex-wrap: wrap;
        align-items: flex-start !important;
    }
    .site-main h1 { font-size: 2.2rem; }
}

@media (max-width: 479.98px) {
    .site-nav .navbar-brand small { display: none; }
    .home-stage h1 { font-size: 2.08rem; }
    .home-stage { padding: 32px 16px; }
    .home-stage__meta { display: grid; grid-template-columns: 1fr 1fr; }
    .section-intro h2 { font-size: 1.75rem; }
    .auth-art { min-height: 178px; padding: 28px 22px; }
    .auth-art__copy h1 { font-size: 2.15rem; }
    .login-card, .register-card { padding: 30px 20px !important; }
    .modal-footer { flex-wrap: wrap; }
    .modal-footer .btn { flex: 1 1 120px; }
    .music-dock__controls { grid-template-columns: 36px 42px 36px minmax(96px, 1fr); gap: 6px; }
    .music-dock__now { grid-template-columns: 38px minmax(0, 1fr) 34px; gap: 8px; }
    .music-dock__signal { width: 38px; height: 38px; }
    .message-panel__header { align-items: flex-start; }
    .message-panel__header .btn span { display: none; }
    .message-panel__header .btn { width: 42px; min-width: 42px; padding-inline: 0; }
    .message-conversation__time { display: none; }
    .message-bubble { max-width: calc(100% - 48px); }
    .message-composer .btn span { display: none; }
    .message-composer .btn { width: 46px; padding-inline: 0; }
    .reply-item__avatar { width: 32px; height: 32px; flex-basis: 32px; }
}

@media (pointer: coarse) {
    .cursor-aura { display: none; }
    .card:hover { transform: none; }
}

body.long-page .card:hover { transform: none; }

html[data-motion-quality="xhigh-pro"] body.long-page .card.is-lit,
html[data-motion-quality="xhigh-plus"] body.long-page .card.is-lit,
html[data-motion-quality="xhigh-max"] body.long-page .card.is-lit {
    transform: perspective(1100px) translateY(-6px) rotateX(var(--card-tilt-x, 0deg)) rotateY(var(--card-tilt-y, 0deg));
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    #fluid-field { opacity: .32; }
    .cursor-aura { display: none; }
    .title-reveal { opacity: 1; clip-path: none; transform: none; }
}

@supports not (backdrop-filter: blur(10px)) {
    .card, .navbar.site-nav, footer.site-footer, .auth-shell { background: var(--surface-strong) !important; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: linear-gradient(var(--primary), var(--secondary)) padding-box; }

::selection { background: rgba(var(--secondary-rgb), .28); color: var(--ink-strong); }