/* ============================================================
   klot.net - stylesheet
   ============================================================ */

/* ============================================================
   1. RESET & VARIABLES
   ============================================================ */

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

html { max-width: 100vw; overflow-x: hidden; }

:root {
    /* --- Palette: Light mode (existing blue-gray identity) --- */
    --bg:               #d9e5f4;
    --bg2:              #ffffff;
    --bg3:              #edf1f7;
    --text:             #3d5872;
    --muted:            #a0a0a7;
    --pink:             #ff4c80;
    --pink-lt:          #ff80a5;
    --teal:             #7a9999;
    --border:           #c5d5ea;
    --row-alt:          #eef3fb;
    --header-bg:        rgba(255,255,255,0.9);
    --radius:           5px;
    --radius-lg:        12px;
    --radius-xl:        20px;
    --content-max:      980px;
    --shell-max:        calc(var(--content-max) + (var(--page-gutter) * 2));
    --page-gutter:      clamp(0.95rem, 2.5vw, 1.75rem);
    --page-top-space:   clamp(0.6rem, 1.5vw, 1.2rem);
    --title-gap:        clamp(1rem, 2vw, 1.5rem);
    --frame-span:       min(var(--content-max), calc(100vw - (var(--page-gutter) * 2)));
    --panel-bg:         rgba(77,98,121,0.1);
    --panel-edge:       rgba(77,98,121,0.18);
    --panel-glow:       rgba(255,255,255,0.3);
    --surface:          rgba(255,255,255,0.7);
    --surface-strong:   rgba(255,255,255,0.84);
    --surface-border:   rgba(197,213,234,0.94);
    --shadow-soft:      0 16px 34px rgba(17,27,42,0.09);
    --shadow-raised:    0 18px 36px rgba(17,27,42,0.16);
    --shadow-float:     0 24px 48px rgba(17,27,42,0.18);
    --outer-top-fade:   rgba(255,255,255,0.05);
    --outer-bottom-fade: rgba(17,27,42,0.12);
    --gutter-stripe:    rgba(77,98,121,0.06);
    --frame-accent-1:   rgba(255,76,128,0.35);
    --frame-accent-2:   rgba(122,153,153,0.30);
    --content-glow:     rgba(255,255,255,0.25);
    --nav-pill-x:       clamp(0.3rem, 0.9vw, 0.55rem);
    --nav-pill-y:       0.22rem;
    --nav-logo-height:  clamp(2.15rem, 4vw, 2.5rem);
    --nav-icon-height:  24px;
    --user-icon-size:   2.8rem;
    --footer-text:      #6a7d8f;
    --pill-text:        #6a7d8f;
}

:root.dark {
    /* --- Palette: Dark mode (darker blue-teal identity) --- */
    --bg:               #0f1923;
    --bg2:              #162030;
    --bg3:              #1a2740;
    --text:             #7ab5cc;
    --muted:            #8090a0;
    --footer-text:      #8090a0;
    --pill-text:        #8090a0;
    --pink:             #cc3d67;
    --pink-lt:          #993355;
    --teal:             #4d8080;
    --border:           #1e3048;
    --row-alt:          #121e30;
    --header-bg:        rgba(12,18,28,0.94);
    --panel-bg:         rgba(10,16,26,0.45);
    --panel-edge:       rgba(122,181,204,0.12);
    --panel-glow:       rgba(255,255,255,0.04);
    --surface:          rgba(18,28,42,0.78);
    --surface-strong:   rgba(22,34,50,0.9);
    --surface-border:   rgba(30,48,72,0.95);
    --shadow-soft:      0 18px 38px rgba(5,10,18,0.34);
    --shadow-raised:    0 20px 40px rgba(5,10,18,0.44);
    --shadow-float:     0 26px 52px rgba(5,10,18,0.5);
    --outer-top-fade:   rgba(255,255,255,0.04);
    --outer-bottom-fade: rgba(0,0,0,0.18);
    --gutter-stripe:    rgba(122,181,204,0.04);
    --frame-accent-1:   rgba(204,61,103,0.30);
    --frame-accent-2:   rgba(77,128,128,0.25);
    --content-glow:     rgba(122,181,204,0.06);
}

/* ============================================================
   2. LAYOUT (body, header, main, footer)
   ============================================================ */

body {
    font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--pink); }

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

body::before {
    background:
        /* Accent lines framing the content area */
        linear-gradient(90deg,
            transparent 0,
            transparent calc(50% - (var(--frame-span) / 2) - 2px),
            var(--frame-accent-1) calc(50% - (var(--frame-span) / 2) - 2px),
            var(--frame-accent-1) calc(50% - (var(--frame-span) / 2)),
            transparent calc(50% - (var(--frame-span) / 2)),
            transparent calc(50% + (var(--frame-span) / 2)),
            var(--frame-accent-2) calc(50% + (var(--frame-span) / 2)),
            var(--frame-accent-2) calc(50% + (var(--frame-span) / 2) + 2px),
            transparent calc(50% + (var(--frame-span) / 2) + 2px),
            transparent 100%),
        /* Radial glow behind content area */
        radial-gradient(ellipse 60% 50% at 50% 45%,
            var(--content-glow) 0%,
            transparent 70%),
        /* Content area solid fill (covers stripes) */
        linear-gradient(90deg,
            transparent 0,
            transparent calc(50% - (var(--frame-span) / 2)),
            var(--bg) calc(50% - (var(--frame-span) / 2)),
            var(--bg) calc(50% + (var(--frame-span) / 2)),
            transparent calc(50% + (var(--frame-span) / 2)),
            transparent 100%),
        /* Original panel edge markers */
        linear-gradient(90deg,
            var(--panel-bg) 0,
            var(--panel-bg) calc(50% - (var(--frame-span) / 2) - 1px),
            var(--panel-edge) calc(50% - (var(--frame-span) / 2)),
            transparent calc(50% - (var(--frame-span) / 2) + 1px),
            transparent calc(50% + (var(--frame-span) / 2) - 1px),
            var(--panel-edge) calc(50% + (var(--frame-span) / 2)),
            var(--panel-bg) calc(50% + (var(--frame-span) / 2) + 1px),
            var(--panel-bg) 100%),
        /* Top and bottom fade */
        linear-gradient(180deg, var(--outer-top-fade), transparent 24%),
        linear-gradient(180deg, transparent, var(--outer-bottom-fade)),
        /* Diagonal stripe pattern in the gutters */
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            transparent 10px,
            var(--gutter-stripe) 10px,
            var(--gutter-stripe) 12px
        );
}

body::after {
    opacity: 0.18;
    background:
        radial-gradient(circle at 20% 20%, var(--panel-glow) 0, transparent 0.8px) 0 0 / 14px 14px,
        radial-gradient(circle at 72% 64%, rgba(255,255,255,0.16) 0, transparent 0.7px) 0 0 / 18px 18px;
    -webkit-mask:
        linear-gradient(90deg,
            #000 0,
            #000 calc(50% - (var(--frame-span) / 2)),
            transparent calc(50% - (var(--frame-span) / 2) + 1px),
            transparent calc(50% + (var(--frame-span) / 2) - 1px),
            #000 calc(50% + (var(--frame-span) / 2)),
            #000 100%);
    mask:
        linear-gradient(90deg,
            #000 0,
            #000 calc(50% - (var(--frame-span) / 2)),
            transparent calc(50% - (var(--frame-span) / 2) + 1px),
            transparent calc(50% + (var(--frame-span) / 2) - 1px),
            #000 calc(50% + (var(--frame-span) / 2)),
            #000 100%);
}

.site-header {
    background: var(--header-bg);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 22px rgba(17,27,42,0.18);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header-inner {
    width: min(100%, var(--shell-max));
    margin: 0 auto;
    padding: 0.62rem var(--page-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.header-logo img {
    height: var(--nav-logo-height);
    display: block;
}

.site-main {
    flex: 1;
    width: 100%;
    margin: 0 auto;
    padding: var(--page-top-space) var(--page-gutter) 2rem;
}

/* ============================================================
   2b. ENTRANCE ANIMATIONS
   ============================================================ */

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes glow-pulse {
    0%, 100% { filter: drop-shadow(0 0 0px transparent); }
    50%      { filter: drop-shadow(0 0 8px var(--pink)); }
}

.fade-in {
    animation: fade-in-up 0.45s ease both;
}

.fade-in-delay-1 { animation-delay: 0.06s; }
.fade-in-delay-2 { animation-delay: 0.12s; }
.fade-in-delay-3 { animation-delay: 0.18s; }
.fade-in-delay-4 { animation-delay: 0.24s; }
.fade-in-delay-5 { animation-delay: 0.30s; }

.site-footer {
    text-align: center;
    padding: 1rem 0 1.4rem;
    font-size: 0.83rem;
    color: var(--footer-text);
    border-top: 1px solid var(--surface-border);
    background: var(--bg);
}

.site-footer-inner {
    width: min(100%, var(--shell-max));
    margin: 0 auto;
    padding: 0 var(--page-gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.site-footer-inner p {
    font-family: "JetBrains Mono", monospace;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-since {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted);
    background: var(--bg2);
    border: 1px solid var(--surface-border);
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius);
    letter-spacing: 0.06em;
}

.footer-nav {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
}

.footer-nav a {
    color: var(--footer-text);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.15s, color 0.15s;
}

.footer-nav a:hover {
    opacity: 1;
    color: var(--pink);
}

.footer-sep {
    opacity: 0.4;
    user-select: none;
}

.footer-login-req {
    color: var(--footer-text);
    opacity: 0.35;
    cursor: default;
    font-size: inherit;
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */

.legal-page {
    width: min(100%, var(--content-max));
    margin: 0 auto;
}

.legal-page-inner {
    max-width: 42rem;
    padding: 1.5rem var(--page-gutter) 2.5rem;
}

.legal-page-inner h1 {
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.legal-updated {
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 0;
    margin-bottom: 1.8rem;
}

.legal-page-inner h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 1.6rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(122,153,153,0.35);
}

.legal-page-inner h3 {
    font-size: 0.92rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--text) 90%, var(--muted) 10%);
    margin-top: 1.1rem;
    margin-bottom: 0.35rem;
}

.legal-page-inner p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text);
    margin: 0 0 0.6rem;
}

.legal-page-inner ul {
    margin: 0.3rem 0 0.8rem 1.3rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text);
}

.legal-page-inner li {
    margin-bottom: 0.25rem;
}

.legal-page-inner a {
    color: var(--pink);
    text-decoration: none;
}

.legal-page-inner a:hover {
    text-decoration: underline;
}

.legal-page-inner strong {
    font-weight: 600;
}

/* Legal dark mode */
:root.dark .legal-page-inner h2 {
    border-bottom-color: var(--panel-edge);
}

:root.dark .legal-page-inner a {
    color: var(--pink-lt);
}

.page-heading {
    width: min(100%, var(--content-max));
    margin: 0 auto var(--title-gap);
    padding-bottom: 0.55rem;
    font-family: "JetBrains Mono", monospace;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--surface-border);
}

.content-width {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
}

/* ============================================================
   3. NAVIGATION
   ============================================================ */

.main-nav {
    display: flex;
    gap: 0.1rem;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: var(--nav-pill-y) var(--nav-pill-x);
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    position: relative;
}

.nav-link img,
.nav-icon {
    height: var(--nav-icon-height);
    width: auto;
    max-width: 100%;
    display: block;
}

.nav-link:hover {
    background: var(--panel-bg);
    border-color: var(--surface-border);
    color: var(--pink);
}

.nav-link.active {
    background: color-mix(in srgb, var(--pink) 10%, var(--bg2) 90%);
    border-color: var(--pink);
    color: var(--pink);
}

:root.dark .header-logo img {
    filter: brightness(0) invert(1) opacity(0.85);
}

:root.dark .nav-link:hover { background: var(--panel-bg); }
:root.dark .nav-link.active { background: color-mix(in srgb, var(--pink) 18%, var(--bg2) 82%); color: var(--text); }

/* Nav tooltips */
.nav-tooltip {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    background: rgba(17,27,42,0.9);
    color: #f7f8fb;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: var(--shadow-raised);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 5;
}

.nav-tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: rgba(17,27,42,0.9);
}

:root.dark .nav-tooltip {
    background: var(--bg2);
    color: var(--text);
}

:root.dark .nav-tooltip::after {
    border-bottom-color: var(--bg2);
}

.nav-link:hover .nav-tooltip,
.user-pill:hover .nav-tooltip,
.user-menu-button:hover .nav-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   4. USER MENU
   ============================================================ */

.user-menu {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    position: relative;
    flex-shrink: 0;
}

.user-menu-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--user-icon-size);
    height: var(--user-icon-size);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), transparent 60%),
        linear-gradient(180deg, rgba(77,98,121,0.22), rgba(122,153,153,0.16));
    color: var(--text);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.user-menu-button:hover,
.user-menu-button[aria-expanded="true"] {
    transform: translateY(-1px);
    border-color: rgba(255,76,128,0.3);
   box-shadow: 0 16px 28px rgba(17,27,42,0.18);
 }

 .user-menu-button.has-notifications { animation: glow-pulse 2s ease-in-out infinite; }

 .user-menu-icon {
    width: 1.82rem;
    height: 1.82rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.user-menu-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-menu-panel {
    position: absolute;
    top: calc(100% + 0.7rem);
    right: 0;
    width: min(21rem, calc(100vw - (var(--page-gutter) * 2)));
    padding: 0.8rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px;
    background:
        linear-gradient(180deg, #FFFFFF, #EBF1FA);
    box-shadow: var(--shadow-float);
    backdrop-filter: blur(18px);
    z-index: 110;
    transform-origin: top right;
    animation: user-menu-in 0.2s ease;
}

.user-menu-panel-header {
    padding: 0.2rem 0.15rem 0.7rem;
}

.user-menu-panel-header p {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.user-menu-panel-header span {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.user-menu-link {
    width: 100%;
    padding: 0.78rem 0.95rem;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.user-menu-link:hover {
    background: rgba(255,76,128,0.1);
    color: var(--pink);
    transform: translateX(2px);
}

.user-menu-divider {
    height: 1px;
    margin: 0.65rem 0;
    background: linear-gradient(90deg, transparent, rgba(77,98,121,0.28), transparent);
}

/* Badge in header dropdown */
.user-menu-badge { display: inline-block; min-width: 1.2rem; height: 1.2rem; line-height: 1.2rem; text-align: center; border-radius: 999px; background: var(--pink); color: #fff; font-size: 0.7rem; margin-left: 0.3rem; font-weight: 600; vertical-align: middle; }
.user-menu-badge[hidden] { display: none; }

/* Highlight messages/notifications links when there are unread */
.user-menu-link--messages.has-unread,
.user-menu-link--notifications.has-unread { color: var(--pink); }

.user-menu-link--disabled {
    color: var(--muted);
    cursor: default;
    pointer-events: none;
}
.user-menu-link--disabled:hover {
    background: transparent;
    color: var(--muted);
    transform: none;
}

/* User pill */
.user-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 76, 128, 0.08);
    border: 1px solid rgba(255, 76, 128, 0.2);
    color: var(--pink);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    max-width: 12rem;
    overflow: visible;
}

/* Logged-in button state */
.user-menu-button--logged-in {
    border-color: rgba(255, 76, 128, 0.35);
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7), transparent 60%),
        linear-gradient(180deg, rgba(255, 76, 128, 0.12), rgba(122, 153, 153, 0.1));
}

.user-menu-button--logged-in:hover,
.user-menu-button--logged-in[aria-expanded="true"] {
    border-color: rgba(255, 76, 128, 0.5);
}

:root.dark .user-pill {
    background: color-mix(in srgb, var(--pink) 12%, var(--bg2) 88%);
    border-color: color-mix(in srgb, var(--pink) 25%, var(--bg2) 75%);
}

.dark-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    width: 100%;
    padding: 0.78rem 0.95rem;
    border-radius: 14px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    transition: background 0.18s ease;
}

.dark-toggle:hover {
    background: rgba(122,153,153,0.1);
}

.dark-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.dark-toggle-track {
    position: relative;
    width: 42px;
    height: 23px;
    background: var(--border);
    border-radius: 12px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.dark-toggle input:checked ~ .dark-toggle-track { background: var(--pink); }

.dark-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.dark-toggle input:checked ~ .dark-toggle-track .dark-toggle-thumb { transform: translateX(19px); }

.dark-toggle-copy {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.dark-toggle-copy strong {
    font-size: 0.96rem;
    font-weight: 600;
}

.dark-toggle-copy small {
    font-size: 0.78rem;
    color: var(--muted);
}

/* User menu dark mode */
:root.dark .user-menu-panel {
    background: var(--bg2);
    border-color: var(--panel-edge);
}

:root.dark .user-menu-button {
    background:
        radial-gradient(circle at 30% 30%, rgba(122,181,204,0.22), transparent 55%),
        linear-gradient(180deg, var(--bg2), var(--bg));
    border-color: var(--panel-edge);
}

  :root.dark .user-menu-link:hover,
:root.dark .dark-toggle:hover {
    background: var(--panel-bg);
}

/* ============================================================
   5. MODALS
   ============================================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8,14,24,0.58);
    backdrop-filter: blur(8px);
    z-index: 190;
}

.site-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.2rem;
    z-index: 200;
}

.site-modal-card {
    position: relative;
    width: min(32rem, 100%);
    padding: 1.4rem 1.3rem 1.25rem;
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.95), rgba(236,242,250,0.96));
    box-shadow: var(--shadow-float);
    animation: modal-in 0.22s ease;
}

.site-modal-eyebrow {
    margin-bottom: 0.22rem;
    color: var(--pink);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.site-modal-card h2 {
    margin-bottom: 1rem;
    font-size: clamp(1.45rem, 4vw, 1.9rem);
    line-height: 1.1;
}

.site-modal-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 50%;
    background: rgba(77,98,121,0.08);
    color: var(--text);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.site-modal-close:hover {
    background: rgba(255,76,128,0.12);
    color: var(--pink);
    transform: rotate(90deg);
}

:root.dark .site-modal-card {
    background: var(--bg2);
    border-color: var(--panel-edge);
}

:root.dark .site-modal-close {
    background: var(--panel-bg);
}

 .confirm-modal-body {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ============================================================
   5b. TOAST NOTIFICATIONS
   ============================================================ */

.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    max-width: 360px;
    width: calc(100vw - 2rem);
}

.toast {
    pointer-events: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-raised);
    border: 1px solid var(--surface-border);
    background: var(--surface-strong);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.25s ease, transform 0.25s ease;
    overflow: hidden;
}

.toast-visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.toast-dismissing {
    opacity: 0 !important;
    transform: translateX(100%) !important;
}

.toast-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.75rem 0.9rem;
    gap: 0.6rem;
}

.toast-message {
    flex: 1;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text);
    word-break: break-word;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0.1rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.toast-close:hover {
    opacity: 1;
}

/* Toast type accents */
.toast-error {
    border-left: 3px solid var(--pink);
}

.toast-success {
    border-left: 3px solid var(--teal);
}

.toast-info {
    border-left: 3px solid var(--text);
}

/* Dark mode adjustments */
:root.dark .toast {
    background: var(--bg2);
    border-color: var(--border);
}

/* ============================================================
   6. FORMS
   ============================================================ */

.site-form {
    display: grid;
    gap: 0.6rem;
}

.form-field {
    display: grid;
    gap: 0.25rem;
}

.field-hint {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.4;
}

.form-field span {
    font-size: 0.82rem;
    font-weight: 600;
}

.form-field input {
        width: 100%;
        box-sizing: border-box;
        padding: 0.55rem 0.75rem;
        border: 1px solid var(--surface-border);
        border-radius: var(--radius);
        background: var(--bg2);
        color: var(--text);
        font: inherit;
        line-height: 1.4;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

  .form-field input:focus,
        .form-field > select:focus,
        .form-field textarea:focus {
            outline: none;
            border-color: var(--pink);
            box-shadow: 0 0 0 3px rgba(255,76,128,0.12);
        }

.form-field > select {
        width: 100%;
        box-sizing: border-box;
        height: 2.6rem;
        padding: 0.55rem 28px 0.55rem 0.75rem;
        border: 1px solid var(--surface-border);
        border-radius: var(--radius);
        background-color: var(--surface-strong);
        color: var(--text);
        font-size: 0.9rem;
        line-height: 1.4;
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

.form-field textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    background: var(--bg2);
    color: var(--text);
    font: inherit;
    resize: vertical;
}

.form-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.1rem;
}

.time-select-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.time-select {
        width: auto;
        min-width: 4ch;
        height: 2.6rem;
        padding: 0.55rem 28px 0.55rem 0.75rem;
        border: 1px solid var(--surface-border);
        border-radius: var(--radius);
        background-color: var(--surface-strong);
        color: var(--text);
        font-size: 0.9rem;
        line-height: 1.4;
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }



.time-select:focus {
    outline: none;
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(255,76,128,0.12);
}

.time-separator {
    font-weight: bold;
    color: var(--muted);
}

/* ============================================================
   7. BUTTONS
   ============================================================ */

/* Modal form buttons */
.button-primary,
.button-secondary {
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.button-primary {
    background: linear-gradient(180deg, var(--pink), var(--pink-lt));
    color: #fff;
    border-color: var(--pink);
    box-shadow: 0 14px 24px rgba(255,76,128,0.22);
}

.button-primary:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--pink) 85%, #000 15%), color-mix(in srgb, var(--pink-lt) 85%, #000 15%));
    border-color: color-mix(in srgb, var(--pink) 85%, #000 15%);
    transform: translateY(-1px);
}

.button-secondary {
    background: transparent;
    border-color: var(--surface-border);
    color: var(--text);
}

.button-secondary:hover {
    border-color: var(--pink);
    color: var(--pink);
    transform: translateY(-1px);
}

/* Gallery/event buttons */
.btn {
    display: inline-block;
    padding: 0.45rem 1.2rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    background: var(--bg2);
    color: var(--text);
}

.btn:active { transform: translateY(0); }

.btn-primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--text) 92%, #fff 8%), var(--text));
    color: #fff;
    border-color: color-mix(in srgb, var(--text) 88%, #233447 12%);
    box-shadow: 0 10px 18px rgba(17,27,42,0.18);
}

.btn-primary:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 90%, #fff 10%), var(--teal));
    color: #fff;
    border-color: color-mix(in srgb, var(--teal) 86%, #203246 14%);
    box-shadow: 0 14px 24px rgba(17,27,42,0.2);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--text);
    border-color: var(--surface-border);
}

.btn-outline:hover {
    border-color: var(--pink);
    color: var(--pink);
    transform: translateY(-1px);
}

.btn-download {
    background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 88%, #fff 12%), var(--teal));
    color: #fff;
    border-color: color-mix(in srgb, var(--teal) 84%, #203246 16%);
    box-shadow: 0 10px 18px rgba(17,27,42,0.16);
}

.btn-download:hover {
    background: linear-gradient(180deg, #6d8f8f, #628585);
    color: #fff;
    border-color: #547474;
    box-shadow: 0 14px 24px rgba(17,27,42,0.18);
    transform: translateY(-1px);
}

/* Focus styles */
.user-menu-button:focus-visible,
.user-menu-link:focus-visible,
.site-modal-close:focus-visible,
.button-primary:focus-visible,
.button-secondary:focus-visible,
.form-field input:focus-visible,
.form-field textarea:focus-visible {
    outline: 2px solid rgba(255,76,128,0.45);
    outline-offset: 2px;
}

body.modal-open { overflow: hidden; }

/* ============================================================
   8. HOME PAGE
   ============================================================ */

.home-landing {
    width: min(100%, var(--content-max));
    margin: 0 auto;
}

.home-top-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1rem;
    row-gap: 1.2rem;
    align-items: stretch;
}

.home-hero-shell {
    grid-column: span 2;
    position: relative;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-xl);
    background: var(--bg2);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    align-self: start;
    height: clamp(14rem, 36vh, 22rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-hero {
    position: relative;
    width: 100%;
    height: 100%;
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 3rem) clamp(1rem, 3vw, 1.8rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
}

.home-panel-label {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    font-family: "JetBrains Mono", monospace;
}

.home-hero-octopus {
    width: min(100%, 220px);
    height: auto;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12));
    transition: filter 0.3s ease;
}

.home-hero-shell:hover .home-hero-octopus {
    filter: drop-shadow(0 8px 16px rgba(255,76,128,0.25));
}

.home-tagline {
    max-width: 28rem;
    font-size: clamp(0.85rem, 1.5vw, 1.05rem);
    line-height: 1.65;
    color: var(--muted);
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
}


.home-panel {
    min-height: 100%;
    padding: 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--surface-border);
    background: var(--bg2);
    box-shadow: var(--shadow-soft);
}

.home-panel-feature {
    min-height: auto;
    height: clamp(14rem, 36vh, 22rem);
    display: flex;
    flex-direction: column;
}

/* row-gap handles uniform spacing between all rows */

.home-panel-news {
    grid-column: span 3;
}

.home-panel-head {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.95rem;
    flex-shrink: 0;
}

.home-panel h2 {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.home-link-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.home-link-card,
.home-feature-link {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding: 0.8rem 0.9rem;
    border-radius: var(--radius);
    border: 1px solid var(--surface-border);
    background: var(--bg3);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.home-link-card:hover,
.home-feature-link:hover {
    color: var(--text);
    transform: translateY(-2px);
    border-color: var(--pink);
    box-shadow: var(--shadow-raised);
}

.home-link-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
}

.home-link-divider {
    color: var(--pink);
    padding: 0 0.35rem;
}

.home-link-meta {
    font-size: 0.83rem;
    color: var(--muted);
    line-height: 1.5;
}

.home-panel-feature .home-feature-link {
    padding: 0;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.home-feature-image-wrap {
    flex: 1;
    min-height: 0;
    width: 100%;
    background: color-mix(in srgb, var(--row-alt) 82%, rgba(255,255,255,0.18) 18%);
}

.home-feature-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-feature-copy {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    padding: 0.9rem;
}

.home-empty {
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--text) 72%, var(--muted) 28%);
}

/* News items */
.news-item {
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg3);
    font-size: 0.9rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.news-temporary {
    border-color: var(--pink);
    background: color-mix(in srgb, var(--pink) 6%, var(--bg3) 94%);
}

.news-icon {
    color: var(--pink);
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.news-general {
    border-color: var(--border);
}

#home-news-load-more button {
    margin-top: 8px;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg2);
    color: var(--text);
    cursor: pointer;
    font-size: 0.85rem;
}

#home-news-load-more button:hover {
    background: var(--bg3);
}

.news-text {
    flex: 1;
    color: var(--text);
    white-space: pre-wrap;
}

.news-date {
    flex-shrink: 0;
    margin-left: 0.5rem;
    color: var(--muted);
    font-size: 0.75rem;
}

.news-collapsible,
.news-collapsed {
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.news-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 0.75rem;
    cursor: pointer;
    gap: 0.35rem;
}

.news-toggle::before {
    content: "\25B6";
    font-size: 0.6rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.news-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

.news-toggle:hover {
    color: var(--text);
}

.news-body {
    padding: 0.35rem 0.75rem 0.65rem;
}

/* Home page dark mode - uses CSS variables, minimal overrides */
:root.dark .home-hero-shell {
    border-color: var(--surface-border);
    background: var(--bg2);
}

:root.dark .home-panel {
    border-color: var(--surface-border);
    background: var(--bg2);
}

:root.dark .home-link-card,
:root.dark .home-feature-link {
    border-color: var(--surface-border);
    background: var(--bg3);
}

:root.dark .news-item {
    background: var(--bg3);
    border-color: var(--surface-border);
}

:root.dark .news-temporary {
    border-color: var(--pink);
    background: color-mix(in srgb, var(--pink) 6%, var(--bg3) 94%);
}

/* ============================================================
   10. PICTURES — Accordion
   ============================================================ */

.accordion {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.accordion-item {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--surface-border);
    background: var(--bg3);
    box-shadow: var(--shadow-soft);
}

.accordion-trigger {
    position: relative;
    width: 100%;
    background: transparent;
    color: var(--muted);
    border: none;
    padding: 0.9rem 1.15rem;
    text-align: left;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s ease, color 0.15s ease;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.accordion-trigger::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--panel-edge);
    transition: background 0.15s ease;
}

.accordion-trigger:hover {
    background: var(--panel-bg);
    color: var(--text);
}

.accordion-trigger.open {
    background: var(--panel-bg);
    color: var(--text);
    box-shadow: inset 3px 0 0 var(--pink);
}

.accordion-trigger.open::before {
    background: var(--pink);
}

.accordion-arrow {
    display: inline-block;
    transition: transform 0.2s ease, color 0.2s ease;
    font-style: normal;
    color: var(--muted);
}

.accordion-trigger.open .accordion-arrow {
    transform: rotate(90deg);
    color: var(--pink);
}

.accordion-content {
    display: none;
    padding: 0 1rem 1rem;
    background: var(--row-alt);
}

.accordion-content.open { display: block; }

/* Accordion dark mode - uses CSS variables */
:root.dark .accordion-item {
    border-color: var(--surface-border);
    background: var(--bg2);
}

:root.dark .accordion-trigger {
    color: var(--muted);
}

:root.dark .accordion-trigger::before {
    background: var(--panel-edge);
}

:root.dark .accordion-trigger:hover {
    background: var(--panel-bg);
}

:root.dark .accordion-trigger.open {
    color: var(--text);
    box-shadow: inset 3px 0 0 var(--pink);
}

:root.dark .accordion-trigger.open::before {
    background: var(--pink);
}

:root.dark .accordion-content {
    background: var(--row-alt);
}

/* ============================================================
   11. PICTURES — Events
   ============================================================ */

.event-list {
    width: 100%;
    margin-top: 0;
    display: grid;
    gap: 0.8rem;
    border: none;
    background: transparent;
    box-shadow: none;
}

.event-row {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--surface-border) 88%, rgba(255,76,128,0.12) 12%);
    border-radius: var(--radius);
    cursor: pointer;
    overflow: hidden;
    transition: background 0.14s ease, box-shadow 0.14s ease;
    background: var(--bg3);
}

.event-row:last-child { border-bottom: none; }
.event-row:nth-child(odd) { background: var(--bg3); }
.event-row:nth-child(even) { background: var(--row-alt); }
.event-row:hover { background: var(--panel-bg); }

.event-row.open {
    background: var(--panel-bg);
    box-shadow: inset 3px 0 0 var(--pink);
}

.event-summary {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.18rem 0.85rem;
    align-items: start;
    padding: 1rem 3.2rem 1rem 1.15rem;
    user-select: none;
}

.event-summary::after {
    content: "\25B6";
    position: absolute;
    right: 1.05rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.78rem;
    color: var(--muted);
    transition: transform 0.2s ease, color 0.2s ease;
}

.event-row.open .event-summary::after {
    transform: translateY(-50%) rotate(90deg);
    color: var(--pink);
}

.ev-name {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0.18rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}

.ev-venue {
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin-top: 0.18rem;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ev-date,
.ev-loc,
.ev-count {
    font-size: 0.82rem;
    color: var(--muted);
}

.ev-date {
    grid-column: 1;
    grid-row: 2;
    font-weight: 600;
    white-space: nowrap;
}

.ev-loc {
    grid-column: 2;
    grid-row: 2;
}

.ev-count {
    grid-column: 3;
    grid-row: 2;
    color: var(--muted);
    margin-left: auto;
    white-space: nowrap;
}

.event-detail {
    display: none;
    padding: 0 1rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 84%, rgba(255,76,128,0.12) 16%);
    background: #dde3ed;
}

.event-detail.open { display: block; }

.event-detail-inner {
    margin-top: 0.95rem;
    padding: 0.95rem 1rem 1rem;
    border: 1px solid color-mix(in srgb, var(--surface-border) 82%, rgba(255,76,128,0.18) 18%);
    border-radius: calc(var(--radius) + 1px);
    background: #e4e9f3;
    box-shadow: 0 10px 22px rgba(17,27,42,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
}

.event-intro {
    display: grid;
    gap: 0.7rem;
}

.event-info-block {
    display: grid;
    gap: 0.55rem;
}

.event-info-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.event-info-toggle::after {
    content: "\25B6";
    font-size: 0.7rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.event-info-toggle[aria-expanded="true"]::after {
    transform: rotate(90deg);
    color: var(--pink);
}

.event-info-toggle:hover {
    color: var(--text);
}

.ev-meta {
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 0;
}

.ev-meta p { margin-bottom: 0; }

.ev-info {
    font-size: 0.88rem;
    line-height: 1.7;
    margin: 0;
    white-space: pre-wrap;
}

.gallery-buttons {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

.gallery-buttons .btn {
    min-width: 0;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gallery-buttons .btn-primary {
    border-color: color-mix(in srgb, var(--text) 88%, #233447 12%);
}

.gallery-buttons .btn-primary:hover {
    border-color: color-mix(in srgb, var(--teal) 86%, #203246 14%);
}

.gallery-buttons .btn-outline {
    border-color: color-mix(in srgb, var(--surface-border) 82%, rgba(255,76,128,0.12) 18%);
    color: var(--text);
}

.gallery-buttons .btn-outline:hover {
    border-color: color-mix(in srgb, var(--surface-border) 72%, rgba(255,76,128,0.24) 28%);
    color: var(--text);
}

.gallery-area { margin-top: 1rem; }

/* Events dark mode - uses CSS variables */
:root.dark .event-row {
    border-color: var(--surface-border);
}

:root.dark .event-row:nth-child(odd) {
    background: var(--bg2);
}

:root.dark .event-row:nth-child(even) {
    background: var(--row-alt);
}

:root.dark .event-row:hover {
    background: var(--panel-bg);
}

:root.dark .event-row.open {
    background: var(--panel-bg);
}

:root.dark .ev-date,
:root.dark .ev-loc,
:root.dark .ev-count,
:root.dark .ev-venue,
:root.dark .ev-meta,
:root.dark .event-info-toggle {
    color: var(--muted);
}

:root.dark .event-detail {
    background: var(--bg3);
    border-top-color: var(--panel-edge);
}

:root.dark .event-detail-inner {
    border-color: color-mix(in srgb, var(--surface-border) 78%, var(--pink) 22%);
    background:
        linear-gradient(180deg, rgba(20,28,43,0.92), rgba(14,21,34,0.94)),
        linear-gradient(135deg, rgba(204,61,103,0.08), rgba(77,128,128,0.06));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 10px 24px rgba(5,10,18,0.18);
}

:root.dark .ev-info { color: var(--text); }

:root.dark .ev-meta strong { color: var(--text); }

:root.dark .event-info-toggle:hover { color: var(--text); }

:root.dark .gallery-buttons .btn-primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--text) 92%, #fff 8%), var(--text));
    border-color: color-mix(in srgb, var(--text) 88%, var(--bg) 12%);
    color: #fff;
}

:root.dark .gallery-buttons .btn-primary:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 90%, #fff 10%), var(--teal));
}

:root.dark .gallery-buttons .btn-outline {
    background: var(--bg2);
    border-color: var(--surface-border);
    color: var(--text);
}

:root.dark .gallery-buttons .btn-outline:hover {
    background: var(--panel-bg);
    border-color: var(--pink);
    color: var(--pink);
}

/* ============================================================
   12. PICTURES — Gallery
   ============================================================ */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.4rem;
    padding: 0.35rem 0.15rem 0.6rem;
}

.photo-card,
.video-card {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-soft);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    position: relative;
    z-index: 1;
}

.photo-card {
    background: var(--surface-strong);
}

.photo-card:hover,
.video-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: color-mix(in srgb, var(--surface-border) 72%, rgba(255,76,128,0.26) 28%);
    box-shadow: var(--shadow-float);
    z-index: 2;
}

.photo-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    image-rendering: auto;
}

.photo-comments-icon {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    width: 1.7rem;
    height: 1.7rem;
    border: none;
    border-radius: 999px;
    background: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    font-size: 0.88rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.photo-comments-icon:hover {
    background: rgba(0,0,0,0.72);
    color: rgba(255,255,255,0.95);
}

/* Photo like button */
.photo-like-btn {
    position: absolute;
    left: 0.4rem;
    bottom: 0.4rem;
    height: 1.7rem;
    padding: 0 0.45rem;
    border: none;
    border-radius: 999px;
    background: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.15s, color 0.15s;
}

.photo-like-btn:hover {
    background: rgba(0,0,0,0.72);
    color: rgba(255,255,255,0.95);
}

.photo-like-btn.liked {
    color: #ff4d6d;
}

.photo-like-btn.liked:hover {
    color: #ff758f;
}

.photo-like-icon {
    flex-shrink: 0;
}

.photo-like-count {
    min-width: 0.5rem;
}

.photo-like-count-guest {
    position: absolute;
    left: 0.4rem;
    bottom: 0.4rem;
    height: 1.7rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.8);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    pointer-events: none;
}

.video-card {
    background: #000;
    display: grid;
    place-items: center;
    width: 100%;
    height: 200px;
}

.video-player {
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #000;
}

.photo-comments { padding: 0.45rem 0.7rem; font-size: 0.8rem; }
.photo-comment { border-top: 1px solid var(--border); padding: 0.3rem 0; }
.photo-comment:first-child { border-top: none; }

.photo-comment-header {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.comment-author { font-weight: 600; }
.comment-date { color: var(--muted); font-size: 0.75rem; }
.comment-text { margin-top: 0.1rem; color: #000; word-break: break-word; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }

:root.dark .comment-text { color: var(--text); }

/* ============================================================
   13. PICTURES — Slideshow (modal card)
   ============================================================ */

#ssOverlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.2rem;
    z-index: 200;
}

.site-modal-card.slideshow {
    position: relative;
    width: min(86vw, 900px);
    max-height: 90vh;
    padding: 1.2rem;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(12,18,28,0.97), rgba(8,12,20,0.98));
    box-shadow: var(--shadow-float);
    animation: modal-in 0.22s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.site-modal-card.slideshow .site-modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 10;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}

.site-modal-card.slideshow .site-modal-close:hover {
    background: rgba(255,76,128,0.2);
    color: var(--pink);
    transform: rotate(90deg);
}

:root.dark .site-modal-card.slideshow {
    background: var(--bg2);
    border-color: var(--panel-edge);
}

:root.dark .site-modal-card.slideshow .site-modal-close {
    background: var(--panel-bg);
}

.ss-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 1.8rem;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    border-radius: var(--radius);
    transition: background 0.15s;
    line-height: 1;
    z-index: 520;
}

.ss-nav:hover { background: rgba(255,255,255,0.25); }
.ss-prev { left: 1.5rem; }
.ss-next { right: 1.5rem; }

.ss-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.ss-img-wrap {
    width: 100%;
    height: 58vh;
    max-height: 58vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    touch-action: none;
}

.ss-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 3px;
    display: block;
    transition: transform 0.2s ease;
    user-select: none;
}

.ss-img.zoomed { cursor: grab; }

.ss-video {
    width: 640px;
    max-height: 100%;
    display: none;
    border-radius: 3px;
    background: #000;
}

.ss-img.dragging {
    cursor: grabbing;
    transition: none;
}

.ss-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 560px;
    margin-top: 0.5rem;
    padding: 0 0.25rem;
}

.ss-counter {
    color: rgba(255,255,255,0.65);
    font-size: 0.85rem;
}

.ss-zoom-controls { display: flex; gap: 0.4rem; }

.ss-zoom-btn {
    background: rgba(255,255,255,0.12);
    border: none;
    color: rgba(255,255,255,0.8);
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.ss-zoom-btn:hover { background: rgba(255,255,255,0.25); }
.ss-zoom-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.ss-zoom-btn:disabled:hover { background: rgba(255,255,255,0.12); }

/* Slideshow like button */
.ss-like-btn {
    background: rgba(255,255,255,0.12);
    border: none;
    color: rgba(255,255,255,0.8);
    height: 36px;
    padding: 0 0.6rem;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}

.ss-like-btn:hover { background: rgba(255,255,255,0.25); }
.ss-like-btn.liked { color: #ff4d6d; }
.ss-like-btn.liked:hover { color: #ff758f; }

.ss-like-count {
    min-width: 0.5rem;
}

.ss-comments {
    color: rgba(255,255,255,0.9);
    max-width: 560px;
    width: 100%;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    max-height: 12vh;
    overflow-y: auto;
}

.ss-comment { border-top: 1px solid rgba(255,255,255,0.1); padding: 0.28rem 0; }
.ss-comment:first-child { border-top: none; }

.ss-comment-text-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.1rem;
}

/* Slideshow comment form */
.ss-comment-form {
    max-width: 560px;
    width: 100%;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.ss-comment-form textarea {
    width: 100%;
    color: #fff;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius);
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

.ss-comment-form textarea:focus {
    border-color: rgba(255,255,255,0.4);
}

.ss-comment-form textarea::placeholder {
    color: rgba(255,255,255,0.35);
}

.ss-comment-form-actions {
    margin-top: 0.35rem;
    text-align: right;
}

.ss-comment-submit {
    padding: 0.3rem 1rem;
    font-size: 0.78rem;
}

.ss-comment-feedback {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.8);
}

.ss-comment-feedback-error {
    color: #ff8a9e;
}

/* ============================================================
   14. FILTER BAR — Unified pill-style filter links
   ============================================================ */

.filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}

.filter-bar span { color: var(--muted); }

.filter-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6.25rem;
    padding: var(--nav-pill-y) calc(var(--nav-pill-x) + 0.05rem);
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    background: rgba(255,255,255,0.12);
    transition: color 0.15s, opacity 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.filter-link:hover {
    color: var(--text);
    opacity: 1;
    background: rgba(255,255,255,0.22);
    border-color: rgba(122,153,153,0.34);
}

.filter-link.active {
    color: var(--text);
    font-weight: 600;
    background: rgba(255,76,128,0.14);
    border-color: rgba(255,76,128,0.34);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

:root.dark .filter-link {
    background: var(--panel-bg);
    border-color: var(--panel-edge);
    color: var(--muted);
}

:root.dark .filter-link:hover {
    background: var(--panel-bg);
    border-color: var(--panel-edge);
}

:root.dark .filter-link.active {
    background: var(--bg2);
    border-color: var(--pink);
    color: var(--pink);
}

.set-list {
    width: 100%;
    display: grid;
    gap: 1rem;
}

.set-row {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--surface-border) 88%, var(--year-accent-strong) 12%);
    border-radius: calc(var(--radius) + 1px);
    cursor: pointer;
    overflow: hidden;
    scroll-margin-top: calc(var(--nav-logo-height) + 3.75rem);
    background: #e7eef7;
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.42);
    transition: background 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.set-row:nth-child(odd) { background: #edf3fa; }
.set-row:nth-child(even) { background: #dfe8f3; }

.set-row:hover {
    background: #d6e0ed;
    box-shadow: var(--shadow-raised), inset 0 1px 0 rgba(255,255,255,0.44);
    transform: translateY(-1px);
}

.set-row.open {
    border-color: color-mix(in srgb, var(--surface-border) 78%, rgba(255,76,128,0.22) 22%);
    background: #d4deea;
    box-shadow: var(--shadow-raised), inset 3px 0 0 rgba(255,76,128,0.42);
}

.set-summary {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem 1rem;
    align-items: start;
    padding: 1rem 3.2rem 1rem 1.15rem;
    user-select: none;
}

.set-summary::after {
    content: "\25B6";
    position: absolute;
    right: 1.05rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.78rem;
    color: var(--muted);
    transition: transform 0.2s ease, color 0.2s ease;
}

.set-row.open .set-summary::after {
    transform: translateY(-50%) rotate(90deg);
    color: var(--pink);
}

.set-archive-id {
    padding-top: 0.18rem;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.set-summary-main {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.set-line1 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.55rem;
}

.set-artist {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}

.set-divider {
    color: var(--muted);
    font-size: 0.9rem;
}

.set-name {
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.35;
    color: var(--text);
}

.set-line2,
.set-line3 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.set-line2 {
    font-weight: 600;
    letter-spacing: 0.03em;
}

.set-line3 {
    align-items: center;
    gap: 0.45rem 0.8rem;
    margin-top: 0.15rem;
    color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%);
}

.set-line3-genres {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 0.1rem;
}

.set-meta-label,
.set-detail-meta-label {
    color: color-mix(in srgb, var(--muted) 84%, var(--text) 16%);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.set-detail-meta-value { color: var(--muted); }

.set-genre-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.set-genre-pills-summary {
    flex-wrap: nowrap;
}

.set-genre-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--surface-border) 80%, var(--year-accent-strong) 20%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-strong) 88%, rgba(255,255,255,0.12) 12%);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.set-summary-actions {
    display: inline-flex;
    align-items: center;
    align-self: start;
    gap: 0.4rem;
}

.set-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.2rem;
    padding: 0.38rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--surface-border) 82%, var(--year-accent-strong) 18%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-strong) 90%, rgba(255,255,255,0.08) 10%);
    color: var(--muted);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
    transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.set-link-btn:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--surface-border) 72%, rgba(255,76,128,0.24) 28%);
    background: color-mix(in srgb, var(--surface) 80%, var(--year-accent) 20%);
    box-shadow: 0 8px 16px rgba(17,27,42,0.1), inset 0 1px 0 rgba(255,255,255,0.26);
    transform: translateY(-1px);
}

/* Audio set like button */
.set-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 2.5rem;
    padding: 0.38rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--surface-border) 82%, var(--year-accent-strong) 18%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-strong) 90%, rgba(255,255,255,0.08) 10%);
    color: var(--muted);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
    transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.set-like-btn:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--surface-border) 72%, rgba(255,76,128,0.24) 28%);
    background: color-mix(in srgb, var(--surface) 80%, var(--year-accent) 20%);
    box-shadow: 0 8px 16px rgba(17,27,42,0.1), inset 0 1px 0 rgba(255,255,255,0.26);
    transform: translateY(-1px);
}

.set-like-btn.liked {
    color: #ff4d6d;
    border-color: color-mix(in srgb, var(--surface-border) 60%, rgba(255,77,109,0.4) 40%);
}

.set-like-btn.liked:hover {
    color: #ff758f;
}

.set-like-icon {
    flex-shrink: 0;
}

.set-like-btn.liked .set-like-icon {
    fill: #ff4d6d;
}

.set-like-count {
    min-width: 0.5rem;
}

.set-like-count-guest {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.38rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-strong) 90%, rgba(255,255,255,0.08) 10%);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
    pointer-events: none;
}

.set-label-link { color: var(--teal); }
.set-label-link:hover { color: var(--pink); }

.set-detail {
    display: none;
    padding: 0 1rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 84%, var(--year-accent-strong) 16%);
    background: #cfd8e5;
}

.set-detail.open { display: block; }

.set-detail-inner {
    margin-top: 0.95rem;
    display: grid;
    gap: 0.95rem;
}

.set-section {
    padding: 0.95rem 1rem 1rem;
    border: 1px solid color-mix(in srgb, var(--surface-border) 82%, rgba(255,76,128,0.18) 18%);
    border-radius: calc(var(--radius) + 1px);
    background: #e2e7ef;
    box-shadow: 0 10px 22px rgba(17,27,42,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
}

.set-section-label {
    margin-bottom: 0.7rem;
    color: color-mix(in srgb, var(--muted) 82%, var(--text) 18%);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.set-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.8rem 1rem;
}

.set-detail-meta-item {
    display: grid;
    gap: 0.35rem;
    align-content: start;
}

.set-detail-meta-value,
.set-info,
.set-label-link {
    color: var(--text);
}

.set-label-link:hover {
    color: var(--pink);
}

.set-info {
    font-size: 0.88rem;
    line-height: 1.7;
    margin: 0;
    padding-top: 0.8rem;
    white-space: pre-line;
}

.set-info-block {
    padding-top: 0.9rem;
}

.set-info-toggle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    list-style: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.set-info-toggle::-webkit-details-marker {
    display: none;
}

.set-info-toggle::after {
    content: "\25BE";
    font-size: 0.74rem;
    color: var(--pink);
    transition: transform 0.2s ease;
}

.set-info-block:not([open]) .set-info-toggle::after {
    transform: rotate(-90deg);
}

/* ============================================================
   14b. MUSIC — Comments
   ============================================================ */

.set-section-comments {
    display: grid;
    gap: 0.7rem;
}

.audio-comment-list {
    display: grid;
    gap: 0.55rem;
}

.audio-comment-empty {
    font-size: 0.85rem;
    color: var(--muted);
    font-style: italic;
}

.audio-comment {
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius);
    border: 1px solid var(--surface-border);
    background: var(--surface);
    display: grid;
    gap: 0.2rem;
}

.audio-comment-header {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.audio-comment-author {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
}

.audio-comment-date {
    font-size: 0.74rem;
    color: var(--muted);
}

.audio-comment-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text);
    word-break: break-word;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.comment-report-btn {
    background: none;
    border: none;
    color: #e74c3c;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.18s ease;
}

.comment-report-btn:hover {
    color: #c0392b;
}

.audio-comment-form {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.3rem;
}

.audio-comment-form textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    background: var(--surface-strong);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    resize: vertical;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.audio-comment-form textarea:focus {
    border-color: rgba(255,76,128,0.35);
    box-shadow: 0 0 0 3px rgba(255,76,128,0.08);
}

.audio-comment-form textarea::placeholder {
    color: var(--muted);
}

.audio-comment-form-actions {
    display: flex;
    justify-content: flex-end;
}

.audio-comment-feedback {
    font-size: 0.8rem;
    color: var(--pink);
    margin-top: 0.1rem;
}

/* Comments dark mode */
:root.dark .audio-comment {
    border-color: var(--surface-border);
    background: var(--panel-bg);
}

:root.dark .audio-comment-text {
    color: var(--text);
}

:root.dark .audio-comment-form textarea {
    background: var(--bg2);
    border-color: var(--surface-border);
}

:root.dark .audio-comment-form textarea:focus {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 8%, var(--bg2) 92%);
}

/* ============================================================
   15. MUSIC — Audio Player
   ============================================================ */

.audio-player {
    --audio-control-play-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='39' fill='%23edf1f5'/%3E%3Cpath fill='%234d6279' d='M31 24c0-2.2 2.4-3.6 4.3-2.4l21 13c1.8 1.1 1.8 3.7 0 4.8l-21 13c-1.9 1.2-4.3-.2-4.3-2.4V24Z'/%3E%3C/svg%3E");
    --audio-control-pause-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='39' fill='%23edf1f5'/%3E%3Crect x='25' y='22' width='10' height='36' rx='2.5' fill='%234d6279'/%3E%3Crect x='45' y='22' width='10' height='36' rx='2.5' fill='%234d6279'/%3E%3C/svg%3E");
    --audio-control-download-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='39' fill='%23edf1f5'/%3E%3Cpath fill='%234d6279' d='M37 20a3 3 0 0 1 6 0v21.76l7.88-7.88a3 3 0 1 1 4.24 4.24l-13 13a3 3 0 0 1-4.24 0l-13-13a3 3 0 1 1 4.24-4.24L37 41.76V20Zm-13 34a3 3 0 0 1 3-3h26a3 3 0 1 1 0 6H27a3 3 0 0 1-3-3Z'/%3E%3C/svg%3E");
    display: grid;
    gap: 0.9rem;
    width: 100%;
    padding: 0.95rem 1rem 1rem;
    border: 1px solid var(--surface-border);
    border-radius: calc(var(--radius) + 2px);
    background: #d9dee6;
    box-shadow: 0 10px 22px rgba(17,27,42,0.06), inset 0 1px 0 rgba(255,255,255,0.45);
}

.audio-player__media {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.audio-player__wave {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 104px;
    padding: 0.7rem 0.9rem;
    border-radius: calc(var(--radius) + 1px);
    border: 1px solid rgba(77,98,121,0.14);
    background: #f4f6f8;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

.audio-player__wave:focus-visible {
    box-shadow: 0 0 0 3px rgba(255,76,128,0.22);
    border-color: rgba(255,76,128,0.55);
}

.audio-player__waveform,
.audio-player__wave-progress {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.audio-player__waveform {
    --waveform-image: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    padding: 0.8rem 0.95rem;
}

.audio-player__waveform span {
    flex: 1 1 auto;
    align-self: center;
    min-width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(77,98,121,0.38), rgba(77,98,121,0.78));
    opacity: 0.95;
}

.audio-player__waveform.has-image {
    background:
        var(--waveform-image) center / 100% 100% no-repeat,
        linear-gradient(180deg, rgba(77,98,121,0.12), rgba(77,98,121,0.2));
}

.audio-player__waveform.has-image span { display: none; }

.audio-player__wave-progress {
    width: 0;
    background:
        linear-gradient(180deg, rgba(255,76,128,0.16), rgba(255,76,128,0.32)),
        linear-gradient(90deg, rgba(255,76,128,0.65), rgba(122,153,153,0.72));
    mix-blend-mode: multiply;
}

.audio-player__wave-scrubber {
    position: absolute;
    top: 0.45rem;
    bottom: 0.45rem;
    left: 0;
    width: 2px;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 0 0 1px rgba(77,98,121,0.16);
    transform: translateX(-1px);
    pointer-events: none;
}

.audio-player__controls {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.audio-player__play,
.audio-player__download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    flex: 0 0 auto;
    transition: transform 160ms ease, filter 160ms ease;
}

.audio-player__play:hover,
.audio-player__download:hover {
    filter: brightness(1.03) saturate(1.04);
    transform: translateY(-1px);
}

.audio-player__play:focus-visible,
.audio-player__download:focus-visible {
    outline: none;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255,76,128,0.22);
}

.audio-player__control-icon {
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--audio-control-play-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 8px 18px rgba(77,98,121,0.15));
}

.audio-player__play[data-state="pause"] .audio-player__control-icon {
    background-image: var(--audio-control-pause-icon);
}

.audio-player__control-icon--download {
    background-image: var(--audio-control-download-icon);
}

.audio-player__timing {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.audio-player__time-sep { color: var(--muted); }

.audio-player__volume {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-left: auto;
    color: color-mix(in srgb, var(--muted) 84%, var(--text) 16%);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.audio-player__volume input {
    width: 108px;
    accent-color: var(--pink);
}

.audio-player.is-playing .audio-player__wave { border-color: rgba(255,76,128,0.28); }

/* Music dark mode */
:root.dark .set-row {
    border-color: var(--surface-border);
}

:root.dark .set-row:nth-child(odd) { background: var(--bg2); }
:root.dark .set-row:nth-child(even) { background: var(--row-alt); }
:root.dark .set-row:hover { background: var(--panel-bg); }

:root.dark .set-row.open {
    border-color: color-mix(in srgb, var(--surface-border) 76%, var(--pink) 24%);
    background: var(--panel-bg);
}

:root.dark .set-detail {
    background: var(--bg3);
    border-top-color: var(--panel-edge);
}

:root.dark .set-link-btn {
    background: var(--panel-bg);
    border-color: var(--panel-edge);
}

:root.dark .set-link-btn:hover {
    background: var(--panel-bg);
    border-color: var(--pink);
}

:root.dark .set-genre-pill {
    background: var(--panel-bg);
    border-color: var(--panel-edge);
    color: var(--text);
}

:root.dark .set-section {
    background: var(--bg2);
    border-color: var(--panel-edge);
}

:root.dark .set-section-label,
:root.dark .set-detail-meta-label,
:root.dark .set-meta-label,
:root.dark .set-info-toggle,
:root.dark .audio-player__volume {
    color: var(--muted);
}

:root.dark .set-detail-meta-value,
:root.dark .set-info,
:root.dark .set-label-link {
    color: var(--text);
}

:root.dark .set-label-link:hover { color: var(--pink); }

:root.dark .audio-player {
    --audio-control-play-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='39' fill='%231a2740'/%3E%3Cpath fill='%237ab5cc' d='M31 24c0-2.2 2.4-3.6 4.3-2.4l21 13c1.8 1.1 1.8 3.7 0 4.8l-21 13c-1.9 1.2-4.3-.2-4.3-2.4V24Z'/%3E%3C/svg%3E");
    --audio-control-pause-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='39' fill='%231a2740'/%3E%3Crect x='25' y='22' width='10' height='36' rx='2.5' fill='%237ab5cc'/%3E%3Crect x='45' y='22' width='10' height='36' rx='2.5' fill='%237ab5cc'/%3E%3C/svg%3E");
    --audio-control-download-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='39' fill='%231a2740'/%3E%3Cpath fill='%237ab5cc' d='M37 20a3 3 0 0 1 6 0v21.76l7.88-7.88a3 3 0 1 1 4.24 4.24l-13 13a3 3 0 0 1-4.24 0l-13-13a3 3 0 1 1 4.24-4.24L37 41.76V20Zm-13 34a3 3 0 0 1 3-3h26a3 3 0 1 1 0 6H27a3 3 0 0 1-3-3Z'/%3E%3C/svg%3E");
    background: var(--bg2);
    border-color: var(--surface-border);
}

:root.dark .audio-player__wave {
    border-color: var(--panel-edge);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
        linear-gradient(180deg, rgba(122,181,204,0.05), rgba(122,181,204,0.12));
}

:root.dark .audio-player__waveform span {
    background: linear-gradient(180deg, rgba(122,181,204,0.46), rgba(122,181,204,0.9));
}

:root.dark .audio-player__wave-progress {
    background:
        linear-gradient(180deg, rgba(204,61,103,0.22), rgba(204,61,103,0.42)),
        linear-gradient(90deg, rgba(204,61,103,0.78), rgba(77,128,128,0.84));
}

:root.dark .audio-player__wave-scrubber {
    background: rgba(255,255,255,0.88);
    box-shadow: 0 0 0 1px var(--panel-edge);
}

:root.dark .audio-player__control-icon {
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.34));
}

/* ============================================================
   16. SHARED — Utilities
   ============================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[hidden] {
    display: none !important;
}

.loading {
    text-align: center;
    padding: 1.5rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.error-msg {
    background: #fff0f4;
    border: 1px solid var(--pink-lt);
    color: var(--pink);
    padding: 0.7rem 1rem;
    border-radius: var(--radius);
    margin: 0.75rem 0;
    font-size: 0.9rem;
}

:root.dark .error-msg { background: color-mix(in srgb, var(--pink) 12%, var(--bg2) 88%); }

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--text);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 0.4rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes user-menu-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================
   17. RESPONSIVE (max-width: 768px)
   ============================================================ */

@media (max-width: 768px) {
    :root {
        --page-gutter: 0.8rem;
        --page-top-space: 1rem;
        --title-gap: 0.9rem;
        --nav-logo-height: 2.05rem;
        --nav-icon-height: 24px;
        --nav-pill-x: 0.3rem;
        --nav-pill-y: 0.22rem;
    }

    body::before,
    body::after {
        display: none;
    }

    .site-header-inner {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.7rem;
    }

    .header-logo {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .main-nav {
        flex: 1 1 auto;
        max-width: calc(100% - 3.5rem);
        flex-wrap: nowrap;
        gap: 0.18rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .nav-link {
        flex: 0 1 auto;
    }

    .nav-tooltip {
        display: none;
    }

    .user-menu {
        width: auto;
        flex-shrink: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: relative;
        z-index: 120;
    }

    .user-menu-button {
        touch-action: manipulation;
        position: relative;
        z-index: 130;
        pointer-events: auto;
    }

    .user-pill {
        max-width: 8rem;
        font-size: 0.75rem;
        padding: 0.25rem 0.55rem;
    }

    .user-menu-panel {
        position: fixed;
        top: 4.5rem;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        transform-origin: top center;
        width: min(21rem, calc(100vw - 2rem));
        max-height: calc(100vh - 5.5rem);
        overflow-y: auto;
    }

    .nav-tooltip {
        display: none;
    }

    .form-actions {
        flex-direction: column;
    }

    .button-primary,
    .button-secondary {
        width: 100%;
    }

    .site-main { padding-bottom: 1.4rem; overflow-x: hidden; }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }

    .photo-img,
    .video-card {
        height: 150px;
    }

    .ss-prev { left: 0.5rem; }
    .ss-next { right: 0.5rem; }
.ss-img-wrap { width: 95vw; height: 60vh; }

    .site-main,
    .home-landing,
    .home-top-row {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .home-landing { gap: 1rem; }

    .home-top-row { grid-template-columns: 1fr; }

    .home-hero-shell {
        grid-column: 1 / -1;
        border-radius: 22px;
        height: auto;
    }

    .home-panel-feature {
        height: auto;
    }

    .home-panel-news {
        grid-column: 1 / -1;
    }

    .home-hero-shell::before {
        inset: 0.75rem;
        border-radius: 16px;
    }

    .home-hero {
        min-height: 0;
        padding: 1.6rem 1rem 1.35rem;
        gap: 0.7rem;
    }

    .home-hero-octopus { max-width: 220px; }

    .home-top-row > :nth-child(n+3) { margin-top: 0; }

    .home-panel {
        padding: 0.9rem;
        border-radius: 18px;
    }

    .home-link-card,
    .home-feature-link {
        padding: 0.8rem;
    }

    .home-panel-feature .home-feature-link { padding: 0; }

    .event-summary {
        grid-template-columns: minmax(0, 1fr);
        padding-right: 2.7rem;
    }

    .ev-date,
    .ev-loc,
    .ev-count {
        grid-column: 1;
        grid-row: auto;
    }

    .ev-count { margin-left: 0; }

    .event-summary,
    .set-summary,
    .event-detail,
    .set-detail {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .audio-player { padding: 0.8rem; }
    .audio-player__wave { min-height: 88px; padding: 0.55rem 0.7rem; }
    .audio-player__controls { gap: 0.7rem; }
    .audio-player__play,
    .audio-player__download {
        width: 46px;
        height: 46px;
    }

    .audio-player__volume {
        margin-left: 0;
    }

    .audio-player__volume {
        width: 100%;
        justify-content: space-between;
    }

    .audio-player__volume input {
        width: min(180px, 100%);
        flex: 1 1 auto;
    }

    .set-summary {
        grid-template-columns: 1fr;
        padding-top: 0.95rem;
        padding-right: 2.8rem;
        gap: 0.7rem;
    }

    .set-archive-id { padding-top: 0; }

    .set-summary-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .set-line3-genres { padding-right: 0.4rem; }

    .set-detail-meta { grid-template-columns: 1fr; }
}

/* ============================================================
   16. AUTH — Form feedback & User menu
   ============================================================ */

.form-feedback {
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

.form-feedback-error {
    background: rgba(255, 76, 128, 0.1);
    color: #cc3d67;
    border: 1px solid rgba(255, 76, 128, 0.2);
}

.form-feedback-success {
    background: rgba(122, 153, 153, 0.1);
    color: #4d8080;
    border: 1px solid rgba(122, 153, 153, 0.2);
}

:root.dark .form-feedback-error {
    background: color-mix(in srgb, var(--pink) 12%, var(--bg2) 88%);
    color: var(--pink-lt);
    border-color: color-mix(in srgb, var(--pink) 25%, var(--bg2) 75%);
}

:root.dark .form-feedback-success {
    background: color-mix(in srgb, var(--teal) 12%, var(--bg2) 88%);
    color: var(--teal);
    border-color: color-mix(in srgb, var(--teal) 25%, var(--bg2) 75%);
}

.user-menu-user-info {
    padding: 0.78rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.user-menu-username {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.user-menu-unverified {
    font-size: 0.75rem;
    color: var(--muted);
    font-style: italic;
}

/* Auth reset page card */
.auth-reset-card {
    max-width: 32rem;
    margin: 3rem auto;
    padding: 1.4rem 1.3rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(236, 242, 250, 0.96));
    box-shadow: var(--shadow-float);
}

.auth-reset-card h2 {
    margin-bottom: 1rem;
    font-size: clamp(1.45rem, 4vw, 1.9rem);
    line-height: 1.1;
}

:root.dark .auth-reset-card {
    background: var(--bg2);
    border-color: var(--panel-edge);
}

/* ============================================================
    17. SETTINGS PAGE
    ============================================================ */

.settings-tabs {
    display: flex;
    gap: 0.1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.settings-tab {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
    background: rgba(255,255,255,0.12);
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.settings-tab:hover {
    color: var(--text);
    background: rgba(255,255,255,0.22);
    border-color: rgba(122,153,153,0.34);
}

.settings-tab.active {
    color: var(--text);
    font-weight: 600;
    background: rgba(255,76,128,0.14);
    border-color: rgba(255,76,128,0.34);
}

.settings-tab-panel {
    display: none;
}

.settings-tab-panel.active {
    display: block;
}

.settings-page {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.settings-section {
    padding: 0.9rem 1rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--surface-border) 88%, rgba(255,76,128,0.12) 12%);
    border-radius: calc(var(--radius) + 2px);
    background: var(--surface-strong);
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.42);
    margin-bottom: 0.8rem;
}

.settings-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.2rem;
    letter-spacing: 0.02em;
}

.settings-section-desc {
    font-size: 0.82rem;
    color: color-mix(in srgb, var(--text) 75%, var(--muted) 25%);
    margin-bottom: 0.7rem;
    line-height: 1.5;
}

.settings-section-desc strong {
    color: var(--text);
    font-weight: 600;
}

/* Unverified email notice */
.settings-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    border-radius: calc(var(--radius) + 2px);
    margin-bottom: 0.8rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.settings-notice-unverified {
    background: rgba(255, 180, 50, 0.1);
    border: 1px solid rgba(255, 180, 50, 0.25);
    color: #8a6d30;
}

.settings-notice-icon {
    font-size: 1.1rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.settings-notice strong {
    display: block;
    margin-bottom: 0.15rem;
}

.settings-notice p {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.85;
}

.settings-notice .button-secondary {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.78rem;
    padding: 0.4rem 0.7rem;
}

/* Danger zone */
.settings-section-danger {
    border-color: rgba(255, 76, 128, 0.2);
    background: rgba(255, 240, 244, 0.3);
}

.settings-section-danger .settings-section-title {
    color: var(--pink);
}

.settings-section-danger .settings-section-desc {
    color: color-mix(in srgb, var(--pink) 70%, var(--muted) 30%);
}

/* Danger button */
.button-danger {
    background: linear-gradient(180deg, var(--pink), var(--pink-lt));
    color: #fff;
    box-shadow: 0 14px 24px rgba(255, 76, 128, 0.22);
}

.button-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(255, 76, 128, 0.28);
}

/* Collapsible sections */
.settings-section-collapsible .settings-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.9rem 1rem 0.85rem;
    border: none;
    background: var(--surface-strong);
    border-radius: calc(var(--radius) + 2px);
    cursor: pointer;
    text-align: left;
}

.settings-section-collapsible .settings-section-toggle::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--muted);
    border-bottom: none;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.settings-section-collapsible .settings-section-toggle[aria-expanded="false"]::before {
    transform: rotate(-90deg);
}

.settings-section-collapsible .settings-section-toggle .settings-section-title {
    margin-bottom: 0;
}

.settings-section-collapsible .settings-section-toggle .settings-section-desc {
    margin-bottom: 0;
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
}

.settings-section-body {
    padding: 0 1rem 0.85rem;
}

/* Settings dark mode */
:root.dark .settings-section {
    border-color: var(--surface-border);
    background: var(--bg2);
}

:root.dark .settings-section-title {
    color: var(--text);
}

:root.dark .settings-section-desc {
    color: var(--muted);
}

:root.dark .settings-section-desc strong {
    color: var(--text);
}

:root.dark .settings-notice-unverified {
    background: color-mix(in srgb, #ffb432 8%, var(--bg2) 92%);
    border-color: color-mix(in srgb, #ffb432 20%, var(--bg2) 80%);
    color: #d4b86a;
}

:root.dark .settings-section-danger {
    background: color-mix(in srgb, var(--pink) 6%, var(--bg2) 94%);
    border-color: color-mix(in srgb, var(--pink) 25%, var(--bg2) 75%);
}

:root.dark .settings-section-danger .settings-section-title {
    color: var(--pink-lt);
}

:root.dark .settings-section-danger .settings-section-desc {
    color: var(--muted);
}

:root.dark .settings-section-collapsible .settings-section-toggle {
    background: var(--bg2);
}

/* Login history table */
.login-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.login-history-table thead th {
    text-align: left;
    padding: 0.45rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}

.login-history-table tbody td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid rgba(197,213,234,0.4);
    vertical-align: middle;
}

.login-history-table tbody tr:last-child td {
    border-bottom: none;
}

.login-history-table tbody tr:nth-child(even) {
    background: rgba(0,0,0,0.02);
}

.login-success {
    color: #4d8080;
    font-weight: 600;
}

.login-failure {
    color: var(--pink);
    font-weight: 600;
}

.login-history-empty {
    font-size: 0.85rem;
    color: var(--muted);
    font-style: italic;
}

:root.dark .login-history-table thead th {
    border-bottom-color: var(--surface-border);
}

:root.dark .login-history-table tbody td {
    border-bottom-color: var(--panel-edge);
}

:root.dark .login-history-table tbody tr:nth-child(even) {
    background: var(--panel-bg);
}

:root.dark .settings-tab {
    background: var(--panel-bg);
    color: var(--text);
}

:root.dark .settings-tab:hover {
    background: var(--panel-bg);
    border-color: var(--panel-edge);
}

:root.dark .settings-tab.active {
    background: var(--bg2);
    border-color: var(--pink);
    color: var(--pink);
}

/* TOTP / 2FA */
.totp-setup-steps {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.totp-steps-list {
    padding-left: 1.2rem;
    font-size: 0.82rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--text) 80%, var(--muted) 20%);
}

.totp-steps-list li {
    margin-bottom: 0.25rem;
}

.totp-qr-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255,255,255,0.5);
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid var(--surface-border);
}

.totp-qr-container {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.totp-qr-container img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.totp-qr-container table {
    border-collapse: collapse;
}

.totp-qr-container table td {
    padding: 0;
}

.totp-secret-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
}

.totp-secret-hint {
    font-weight: 400;
    font-style: italic;
    opacity: 0.7;
}

.totp-secret-box {
    font-family: monospace;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 0.4rem 0.8rem;
    background: rgba(0,0,0,0.04);
    border-radius: var(--radius);
    cursor: pointer;
    user-select: all;
    word-break: break-all;
    text-align: center;
    max-width: 100%;
}

.totp-secret-box:hover {
    background: rgba(0,0,0,0.08);
}

.totp-enabled-notice {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    background: rgba(122,153,153,0.1);
    border: 1px solid rgba(122,153,153,0.2);
    border-radius: calc(var(--radius) + 2px);
    font-size: 0.85rem;
}

.totp-status-icon {
    font-size: 1.1rem;
    color: #4d8080;
    flex-shrink: 0;
}

.totp-enabled-notice strong {
    display: block;
    margin-bottom: 0.1rem;
}

.totp-enabled-notice p {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.85;
}

/* Recovery codes dialog */
.recovery-codes-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8,14,24,0.58);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    z-index: 200;
}

.recovery-codes-dialog {
    width: min(36rem, 100%);
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.2rem;
    background: var(--surface-strong);
    border: 1px solid var(--surface-border);
    border-radius: 20px;
    box-shadow: var(--shadow-float);
}

.recovery-codes-dialog h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.recovery-codes-warning {
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

.recovery-codes-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.recovery-code-item {
    font-family: monospace;
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
    background: rgba(0,0,0,0.04);
    border-radius: var(--radius);
    user-select: all;
    word-break: break-all;
}

:root.dark .totp-qr-area {
    background: rgba(255,255,255,0.03);
    border-color: rgba(122,181,204,0.15);
}

:root.dark .totp-secret-box {
    background: rgba(255,255,255,0.06);
}

:root.dark .totp-secret-box:hover {
    background: rgba(255,255,255,0.1);
}

:root.dark .totp-enabled-notice {
    background: rgba(77,128,128,0.1);
    border-color: rgba(77,128,128,0.2);
}

:root.dark .totp-status-icon {
    color: #7acccc;
}

:root.dark .recovery-codes-dialog {
    background: #162338;
    border-color: rgba(122,181,204,0.18);
}

:root.dark .recovery-code-item {
    background: rgba(255,255,255,0.06);
}

/* ============================================================
    17. MY COMMENTS
    ============================================================ */

.my-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.my-comment-item {
    padding: 0.8rem 0.9rem;
    background: var(--surface-weak);
    border: 1px solid var(--surface-border);
    border-radius: calc(var(--radius) + 2px);
}

.my-comment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.my-comment-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--muted);
}

.my-comment-target {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-comment-target:hover {
    color: var(--pink);
    text-decoration: underline;
}

.my-comment-date {
    font-size: 0.75rem;
    color: var(--muted);
    flex-shrink: 0;
}

.my-comment-delete {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s, background 0.15s;
}

.my-comment-delete:hover {
    opacity: 1;
    background: rgba(255,76,128,0.1);
    color: var(--pink);
}

.my-comment-text {
    font-size: 0.85rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--text) 85%, var(--muted) 15%);
    word-break: break-word;
}

.my-comments-empty {
    font-size: 0.85rem;
    color: var(--muted);
    font-style: italic;
}

:root.dark .my-comment-item {
    background: rgba(255,255,255,0.03);
}

:root.dark .my-comment-target {
    color: #c8d8e8;
}

:root.dark .my-comment-target:hover {
    color: var(--pink);
}

/* Activity filters */
.activity-filters {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}

.activity-filter-btn {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--surface-border);
    border-radius: 999px;
    background: var(--surface-strong);
    color: var(--muted);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.activity-filter-btn:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--surface-border) 72%, rgba(255,76,128,0.24) 28%);
}

.activity-filter-btn.active {
    color: var(--text);
    border-color: var(--year-accent-strong);
    background: color-mix(in srgb, var(--surface) 80%, var(--year-accent) 20%);
}

/* ============================================================
    17b. MY LIKES
    ============================================================ */

.my-likes-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.my-like-item {
    padding: 0.8rem 0.9rem;
    background: var(--surface-weak);
    border: 1px solid var(--surface-border);
    border-radius: calc(var(--radius) + 2px);
}

.my-like-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.my-like-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--muted);
}

.my-like-target {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-like-target:hover {
    color: var(--pink);
    text-decoration: underline;
}

.my-like-date {
    font-size: 0.75rem;
    color: var(--muted);
    flex-shrink: 0;
}

.my-like-delete {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s, background 0.15s;
}

.my-like-delete:hover {
    opacity: 1;
    background: rgba(255,76,128,0.1);
    color: var(--pink);
}

.my-likes-empty {
    font-size: 0.85rem;
    color: var(--muted);
    font-style: italic;
}

:root.dark .my-like-item {
    background: rgba(255,255,255,0.03);
}

:root.dark .my-like-target {
    color: #c8d8e8;
}

:root.dark .my-like-target:hover {
    color: var(--pink);
}

/* ============================================================
    18. RESPONSIVE
    ============================================================ */

@media (max-width: 640px) {
    .event-summary,
    .set-summary {
        grid-template-columns: 1fr auto;
    }

    .ev-date,
    .ev-loc,
    .ev-count {
        grid-column: 1;
        grid-row: auto;
    }

    .ev-count { margin-left: 0; }

    .event-summary,
    .set-summary,
    .event-detail,
    .set-detail {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .audio-player { padding: 0.8rem; }
    .audio-player__wave { min-height: 88px; padding: 0.55rem 0.7rem; }
    .audio-player__controls { gap: 0.7rem; }
    .audio-player__play,
    .audio-player__download {
        width: 46px;
        height: 46px;
    }

    .audio-player__volume {
        margin-left: 0;
    }

    .audio-player__volume {
        width: 100%;
        justify-content: space-between;
    }

    .audio-player__volume input {
        width: min(180px, 100%);
        flex: 1 1 auto;
    }

    .set-summary {
        grid-template-columns: 1fr;
        padding-top: 0.95rem;
        padding-right: 2.8rem;
        gap: 0.7rem;
    }

    .set-archive-id { padding-top: 0; }

    .set-summary-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .set-line3-genres { padding-right: 0.4rem; }

    .set-detail-meta { grid-template-columns: 1fr; }

    .settings-notice {
        flex-direction: column;
        gap: 0.6rem;
    }

    .settings-notice .button-secondary {
        margin-left: 0;
        width: 100%;
    }

    .settings-section-collapsible .settings-section-toggle .settings-section-desc {
        display: none;
    }}

/* ============================================================
   20. EVENT FORM PAGES
   ============================================================ */

.event-form-section {
    padding: var(--page-top-space) 0 3rem;
}

.event-form-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

.event-form-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--text);
}

.event-form-status {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.event-form-notice {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--text);
}

.event-form-notice ul {
    margin: 0;
    padding-left: 1.2rem;
}

.event-form-notice li {
    margin-bottom: 0.3rem;
}

.event-form-notice li:last-child {
    margin-bottom: 0;
}

.event-form-fieldset {
        border: 1px solid var(--surface-border);
        border-radius: var(--radius);
        padding: 1.2rem 1rem 1rem;
        margin-bottom: 1.5rem;
        background: var(--surface);
    }

.event-form-fieldset legend {
        font-size: 0.9rem;
        font-weight: 600;
        padding: 0 0.5rem;
        color: var(--text);
    }

    .event-form-fieldset .form-field,
    .event-form-fieldset .form-row {
        margin-bottom: 1.2rem;
    }

    .event-form-fieldset .form-field:last-child,
    .event-form-fieldset .form-row:last-child {
        margin-bottom: 0;
    }

.form-required {
    color: var(--pink);
    font-weight: 700;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 0.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

.form-field-half {
    min-width: 0;
}

.form-field-half input,
    .form-field-half select {
        width: 100%;
        box-sizing: border-box;
        height: 2.6rem;
        padding: 0.55rem 28px 0.55rem 0.75rem;
        border: 1px solid var(--surface-border);
        border-radius: var(--radius);
        background-color: var(--bg2);
        color: var(--text);
        font: inherit;
        line-height: 1.4;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .form-field-half select {
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca3af' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
    }

    .form-field-half select:focus {
        outline: none;
        border-color: var(--pink);
        box-shadow: 0 0 0 3px rgba(255,76,128,0.12);
    }

    :root.dark .form-field-half input,
    :root.dark .form-field-half select {
        background-color: var(--bg2);
    }

    /* Hide number input spinners */
    .form-field-half input[type="number"]::-webkit-inner-spin-button,
    .form-field-half input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .form-field-half input[type="number"] {
        appearance: textfield;
        -moz-appearance: textfield;
        height: 2.6rem !important;
        min-height: 2.6rem;
        max-height: 2.6rem;
    }

    :root.dark .form-field-half select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4dae3' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    }

   :root.dark .form-field input,
        :root.dark .form-field textarea {
            background-color: rgba(24,36,56,0.78);
        }


 /* Genre grid */
.genre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.4rem 0.6rem;
}

.form-checkbox-label,
.form-radio-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.form-checkbox-label input,
.form-radio-label input {
    width: auto;
    accent-color: var(--pink);
}

/* Radio group */
.form-radio-group {
    display: flex;
    gap: 1.2rem;
}

/* Private link box */
.private-link-box {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px dashed var(--pink);
    border-radius: 14px;
    background: rgba(255, 76, 128, 0.06);
}

.private-link-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pink);
    margin-bottom: 0.5rem;
}

.private-link-url {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.private-link-input {
    flex: 1;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--surface-border);
    border-radius: 14px;
    background: rgba(255,255,255,0.78);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    min-width: 0;
}

:root.dark .private-link-input {
    background: rgba(24,36,56,0.78);
}

.private-link-copy,
.private-link-reset {
    white-space: nowrap;
    font-size: 0.82rem;
    padding: 0.55rem 1rem;
}

.event-direct-link {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(255,76,128,0.05);
    border: 1px solid rgba(255,76,128,0.15);
    border-radius: 14px;
}

.event-direct-link-label {
    display: block;
    font-size: 0.8rem;
    color: var(--pink);
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.event-direct-link-url {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.event-direct-link-input {
    flex: 1;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    background: rgba(255,255,255,0.6);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-family: inherit;
}

:root.dark .event-direct-link-input {
    background: rgba(24,36,56,0.78);
}

/* Link rows */
.link-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

.link-row input {
        width: 100%;
        box-sizing: border-box;
        height: 2.6rem;
        padding: 0.55rem 0.75rem;
        border: 1px solid var(--surface-border);
        border-radius: var(--radius);
        background: rgba(255,255,255,0.78);
        color: var(--text);
        font: inherit;
        line-height: 1.4;
    }

    :root.dark .link-row input {
        background-color: rgba(24,36,56,0.78);
    }

.remove-link-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255,76,128,0.1);
    color: var(--pink);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.remove-link-btn:hover {
    background: rgba(255,76,128,0.2);
}

.link-type-select {
        width: 100%;
        min-width: 110px;
        box-sizing: border-box;
        height: 2.6rem;
        padding: 0.55rem 28px 0.55rem 0.75rem;
        border: 1px solid var(--surface-border);
        border-radius: var(--radius);
        background-color: var(--surface-strong);
        color: var(--text);
        font-size: 0.9rem;
        line-height: 1.4;
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

.link-type-select:focus {
        outline: none;
        border-color: var(--pink);
        box-shadow: 0 0 0 3px rgba(255,76,128,0.12);
    }

 /* New venue form */
.new-venue-form {
    padding: 0.8rem;
    border: 1px dashed var(--surface-border);
    border-radius: var(--radius);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.add-venue-btn {
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
    margin-top: 0.3rem;
}

#new-venue-feedback {
    margin-top: 0.8rem;
}

#create-venue-btn {
    margin-top: 0.8rem;
    width: 100%;
}

/* Current image preview */
.current-image {
    margin-bottom: 0.8rem;
    text-align: center;
}

.current-image-preview {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--radius);
    object-fit: contain;
}

.current-image-label {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.3rem;
}

/* Event form actions */
.event-form-actions {
    margin-top: 1.2rem;
}

/* Danger zone */
.danger-zone {
    border: 1px solid rgba(255,76,128,0.3);
    border-radius: var(--radius);
    padding: 1.2rem 1rem;
    margin-top: 1.5rem;
    background: rgba(255,76,128,0.04);
}

:root.dark .danger-zone {
    background: rgba(255,76,128,0.06);
    border-color: rgba(255,76,128,0.2);
}

.danger-zone h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pink);
    margin-bottom: 0.4rem;
}

.danger-zone p {
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 0.8rem;
}

/* Responsive */
@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .genre-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .link-row {
        grid-template-columns: 1fr;
    }

    .form-radio-group {
        flex-direction: column;
        gap: 0.5rem;
    }

    .private-link-url {
        flex-direction: column;
        align-items: stretch;
    }

    .private-link-input {
        font-size: 0.78rem;
    }

    .event-form-actions {
        flex-direction: column;
    }

    .event-form-actions .button-primary,
    .event-form-actions .button-secondary {
        width: 100%;
    }
}

/* ============================================================
   16. CALENDAR — Nav icon
   ============================================================ */

.nav-calendar-icon {
    width: var(--nav-icon-height);
    height: var(--nav-icon-height);
}

/* ============================================================
   17. CALENDAR — Filter bar
   ============================================================ */

.calendar-filters {
    margin-bottom: 1.5rem;
}

.calendar-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.form-field-inline {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 140px;
}

.form-field-inline span {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    height: 1.2em;
    line-height: 1.2;
}

.form-field-inline select,
.form-field-inline input[type="date"],
.form-field-inline input[type="text"] {
    padding: 0.42rem 0.6rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    background: var(--surface-strong);
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    width: 100%;
    box-sizing: border-box;
}

.form-field-inline select:focus,
.form-field-inline input[type="date"]:focus,
.form-field-inline input[type="text"]:focus {
    border-color: rgba(255,76,128,0.35);
    box-shadow: 0 0 0 3px rgba(255,76,128,0.08);
    outline: none;
}

.calendar-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

/* ============================================================
   18. CALENDAR — Genre pills
   ============================================================ */

.calendar-genre-filters {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex-basis: 100%;
}

.calendar-genre-toggle {
    padding: 0.2rem 0.4rem;
    border: none;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s ease;
}

.calendar-genre-toggle:hover {
    color: var(--text);
}

.calendar-genre-label {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.calendar-genre-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.calendar-genre-pill {
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--surface-border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--pill-text);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s ease;
}

.calendar-genre-pill:hover {
    border-color: rgba(255,76,128,0.3);
    color: var(--text);
    background: rgba(255,76,128,0.08);
}

.calendar-genre-pill.active {
    border-color: rgba(255,76,128,0.4);
    background: rgba(255,76,128,0.14);
    color: var(--pink);
}

/* ============================================================
   19. CALENDAR — Event cards
   ============================================================ */

#calendar-events-grid {
    display: grid;
    gap: 0.9rem;
}

.calendar-event-card {
    display: flex;
    border: 1px solid color-mix(in srgb, var(--surface-border) 88%, rgba(255,76,128,0.12) 12%);
    border-radius: calc(var(--radius) + 1px);
    overflow: hidden;
    background: #e8edf5;
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.42);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.calendar-event-card:hover {
    box-shadow: var(--shadow-raised), inset 0 1px 0 rgba(255,255,255,0.44);
    border-color: color-mix(in srgb, var(--surface-border) 78%, rgba(255,76,128,0.22) 22%);
}

.calendar-event-image {
    width: 140px;
    min-height: 120px;
    flex-shrink: 0;
    overflow: hidden;
}

.calendar-event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.calendar-event-body {
    flex: 1;
    min-width: 0;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}

.calendar-event-header {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.calendar-event-name {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    margin: 0;
    cursor: pointer;
    width: fit-content;
}

.calendar-event-status {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 1;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.calendar-detail-header .calendar-event-status {
    position: static;
}

.calendar-status-upcoming {
    color: var(--teal);
    background: rgba(122,153,153,0.12);
}

.calendar-status-past {
    color: var(--muted);
    background: rgba(160,160,167,0.12);
}

.calendar-status-draft {
    color: #cc9933;
    background: rgba(204,153,51,0.12);
}

.calendar-status-published {
    color: var(--teal);
    background: rgba(122,153,153,0.12);
}

.calendar-status-pending {
    color: #ffc107;
    background: rgba(255,193,7,0.12);
}

.calendar-visibility-public {
    color: var(--teal);
    background: rgba(122,153,153,0.12);
}

.calendar-visibility-private {
    color: #cc6633;
    background: rgba(204,102,51,0.12);
}

.calendar-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
    font-size: 0.84rem;
    color: var(--muted);
}

.calendar-event-date,
.calendar-event-date-end {
    font-weight: 600;
}

.calendar-event-location,
.calendar-event-venue {
    color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%);
}

.calendar-event-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.calendar-genre-tag {
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--surface-border);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
    background: var(--surface);
}

.calendar-event-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.calendar-event-attendees {
    font-size: 0.8rem;
    color: var(--muted);
}

.calendar-event-btn.calendar-btn-view {
    padding: 0.32rem 0.85rem;
    border: 1px solid var(--surface-border);
    border-radius: 999px;
    background: var(--surface-strong);
    color: var(--text);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
    transition: all 0.15s ease;
}

.calendar-event-btn.calendar-btn-view:hover {
    border-color: rgba(255,76,128,0.3);
    box-shadow: 0 4px 10px rgba(17,27,42,0.08);
    transform: translateY(-1px);
}

/* ============================================================
   20. CALENDAR — Modal
   ============================================================ */

.calendar-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8,14,24,0.62);
    backdrop-filter: blur(8px);
    z-index: 190;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1rem 1rem;
    overflow-y: auto;
}

.calendar-modal {
    position: relative;
    width: min(48rem, 100%);
    padding: 1.5rem;
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(236,242,250,0.97));
    box-shadow: var(--shadow-float);
    animation: modal-in 0.22s ease;
    margin-bottom: 2rem;
}

.calendar-modal-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: rgba(77,98,121,0.08);
    color: var(--text);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    transition: all 0.15s ease;
}

.calendar-modal-close:hover {
    background: rgba(255,76,128,0.12);
    color: var(--pink);
    transform: rotate(90deg);
}

/* ============================================================
   21. CALENDAR — Event detail
   ============================================================ */

.calendar-event-detail {
    display: flex;
    gap: 1rem;
}

.calendar-detail-image {
    width: 200px;
    flex-shrink: 0;
    border-radius: var(--radius);
    overflow: hidden;
}

.calendar-detail-image {
    position: relative;
    cursor: zoom-in;
}

.calendar-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.2s ease;
}

.calendar-detail-image:hover img {
    filter: brightness(0.8);
}

/* Image lightbox */
.calendar-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: zoom-out;
}

.calendar-image-lightbox-img {
    max-width: 95%;
    max-height: 95vh;
    object-fit: contain;
    border-radius: var(--radius);
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    cursor: default;
}

.calendar-detail-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.calendar-detail-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.calendar-detail-name {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    margin: 0;
}

.calendar-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.88rem;
    color: var(--muted);
}

.calendar-detail-dates {
    font-weight: 600;
}

.calendar-detail-location,
.calendar-detail-age,
.calendar-detail-cost {
    color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%);
}

.calendar-detail-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.calendar-detail-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    background: var(--surface);
}

.calendar-detail-section h3 {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

.calendar-detail-lineup,
.calendar-detail-info {
    font-size: 0.88rem;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--text);
}

.calendar-detail-links {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.calendar-detail-links a {
    color: var(--pink);
    text-decoration: underline;
    font-size: 0.88rem;
}

.calendar-detail-links a:hover {
    color: var(--pink-lt);
}

.calendar-detail-link-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
}

.calendar-detail-link-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    background: rgba(255,76,128,0.1);
    color: var(--pink);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.calendar-detail-link-text {
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================================
   22. CALENDAR — Event Admin
   ============================================================ */

.calendar-detail-admin {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 0.3rem;
}

.calendar-detail-admin span {
    font-weight: 600;
}

.calendar-detail-admin a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.calendar-detail-admin a:hover {
    color: var(--pink-lt);
}

/* ============================================================
   23. CALENDAR — Attendance
   ============================================================ */

.calendar-detail-attendance {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-top: 0.4rem;
}

.calendar-attendee-count {
    font-size: 0.88rem;
    color: var(--muted);
    font-weight: 600;
}

.calendar-btn-rsvp {
    padding: 0.38rem 1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    background: linear-gradient(180deg, var(--pink), var(--pink-lt));
    color: #fff;
    box-shadow: 0 6px 14px rgba(255,76,128,0.2);
}

.calendar-btn-rsvp:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(255,76,128,0.28);
}

.calendar-btn-rsvp-active {
    background: rgba(77,98,121,0.08);
    border-color: rgba(77,98,121,0.14);
    color: var(--text);
    box-shadow: none;
}

.calendar-btn-rsvp-active:hover {
    background: rgba(77,98,121,0.14);
    transform: none;
}

.calendar-attendance-privacy {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.3rem;
    display: block;
}

.calendar-attendance-privacy-link {
    color: var(--teal);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.15s ease;
}

.calendar-attendance-privacy-link:hover {
    text-decoration-color: var(--teal);
}

/* ============================================================
   23. CALENDAR — Share
   ============================================================ */

.calendar-detail-share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.3rem;
}

.calendar-btn-share {
    padding: 0.32rem 0.85rem;
    border: 1px solid var(--surface-border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.calendar-btn-share:hover {
    border-color: rgba(122,153,153,0.4);
    color: var(--text);
    background: var(--surface-strong);
}

.calendar-share-feedback {
    font-size: 0.78rem;
    color: var(--teal);
    font-weight: 600;
    animation: fade-in 0.2s ease;
}

/* Report button — red warning icon, bottom-right of modal */
.calendar-report-btn {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: #e74c3c;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.18s ease, transform 0.15s ease;
}

.calendar-report-btn:hover {
    color: #c0392b;
    transform: scale(1.15);
}

/* ============================================================
   24. CALENDAR — Attendees list
   ============================================================ */

.calendar-modal-attendees {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--surface-border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.calendar-modal-attendees h3 {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

.calendar-attendee-total {
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 0.2rem;
}

.calendar-attendee-item {
    font-size: 0.88rem;
    color: var(--text);
    padding: 0.2rem 0;
}

.calendar-attendee-item a {
    color: var(--accent);
    text-decoration: none;
}

.calendar-attendee-item a:hover {
    color: var(--pink-lt);
}

/* ============================================================
   25. CALENDAR — Pagination
   ============================================================ */

.calendar-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.2rem;
    padding-top: 0.8rem;
}

.calendar-pagination-info {
    font-size: 0.8rem;
    color: var(--muted);
}

/* ============================================================
   26. CALENDAR — Empty & Loading
   ============================================================ */

.calendar-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.spinner {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--surface-border);
    border-top-color: var(--pink);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes modal-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   27. CALENDAR — Secret event
   ============================================================ */

.calendar-secret-event {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ============================================================
   28. CALENDAR — Dark mode
   ============================================================ */

:root.dark .calendar-event-card {
    border-color: var(--surface-border);
    background: var(--bg2);
    box-shadow: var(--shadow-soft), inset 0 1px 0 var(--panel-glow);
}

:root.dark .calendar-event-card:hover {
    box-shadow: var(--shadow-raised), inset 0 1px 0 var(--panel-glow);
    border-color: var(--panel-edge);
}

:root.dark .calendar-event-name {
    color: var(--text);
}

:root.dark .calendar-event-meta {
    color: var(--muted);
}

:root.dark .calendar-genre-tag {
    border-color: var(--panel-edge);
    background: var(--panel-bg);
    color: var(--text);
}

:root.dark .calendar-event-btn.calendar-btn-view {
    border-color: var(--panel-edge);
    background: var(--panel-bg);
    color: var(--text);
}

:root.dark .calendar-event-btn.calendar-btn-view:hover {
    border-color: var(--pink);
    color: var(--pink);
}

:root.dark .calendar-modal {
    background: var(--bg2);
    border-color: var(--panel-edge);
}

:root.dark .calendar-modal-close {
    background: var(--panel-bg);
}

:root.dark .calendar-modal-close:hover {
    background: color-mix(in srgb, var(--pink) 14%, var(--bg2) 86%);
    color: var(--pink-lt);
}

:root.dark .calendar-detail-name {
    color: var(--text);
}

:root.dark .calendar-detail-meta {
    color: var(--muted);
}

:root.dark .calendar-detail-lineup,
:root.dark .calendar-detail-info {
    color: var(--text);
}

:root.dark .calendar-detail-section {
    border-color: var(--panel-edge);
    background: var(--panel-bg);
}

:root.dark .calendar-detail-links a {
    color: var(--pink-lt);
}

:root.dark .calendar-btn-rsvp-active {
    background: var(--panel-bg);
    border-color: var(--panel-edge);
}

:root.dark .calendar-btn-share {
    border-color: var(--panel-edge);
    background: var(--panel-bg);
    color: var(--text);
}

:root.dark .calendar-btn-share:hover {
    color: var(--pink);
}

:root.dark .calendar-genre-pill {
    border-color: var(--panel-edge);
    background: var(--panel-bg);
    color: var(--text);
}

:root.dark .calendar-genre-pill:hover {
    border-color: var(--pink);
    background: color-mix(in srgb, var(--pink) 8%, var(--bg2) 92%);
    color: var(--pink-lt);
}

:root.dark .calendar-genre-pill.active {
    border-color: var(--pink);
    background: color-mix(in srgb, var(--pink) 14%, var(--bg2) 86%);
    color: var(--pink-lt);
}

:root.dark .form-field-inline select,
:root.dark .form-field-inline input[type="date"],
:root.dark .form-field-inline input[type="text"] {
    background: var(--bg2);
    border-color: var(--panel-edge);
    color: var(--text);
}

:root.dark .calendar-pagination-info,
:root.dark .calendar-empty,
:root.dark .loading,
:root.dark .calendar-attendee-count,
:root.dark .calendar-attendee-item {
    color: var(--muted);
}

:root.dark .spinner {
    border-color: var(--panel-edge);
    border-top-color: var(--pink-lt);
}

/* ============================================================
   28. MY EVENTS LIST
   ============================================================ */

.my-events-create {
    display: inline-block;
    margin-bottom: 1rem;
}

.my-events-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.my-event-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 0.3rem 0.8rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--surface-border) 88%, rgba(255,76,128,0.12) 12%);
    border-radius: calc(var(--radius) + 2px);
    background: var(--surface-strong);
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.42);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.my-event-item:hover {
    border-color: color-mix(in srgb, var(--surface-border) 72%, rgba(255,76,128,0.24) 28%);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
    transform: translateY(-1px);
}

.my-event-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.my-event-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.15s ease;
}

.my-event-name:hover {
    color: var(--pink);
}

.my-event-status {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.my-event-pills {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.my-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
    font-size: 0.84rem;
    color: var(--muted);
}

.my-event-date {
    font-weight: 500;
}

.my-event-date-sep {
    opacity: 0.5;
}

.my-event-timestamps {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    font-size: 0.78rem;
    color: var(--muted);
    opacity: 0.7;
    margin-top: 0.1rem;
}

.my-event-timestamp::before {
    content: '\B7';
    margin-right: 0.35rem;
    opacity: 0.5;
}

.my-event-timestamp:first-child::before {
    content: none;
}

.my-event-actions {
    grid-column: 2;
    grid-row: 4;
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0.2rem;
}

.my-event-private-link {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
    padding: 0.5rem 0.6rem;
    border: 1px dashed var(--pink);
    border-radius: 10px;
    background: rgba(255, 76, 128, 0.06);
}

.my-event-private-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pink);
    white-space: nowrap;
}

.my-event-private-input {
    flex: 1;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: rgba(255,255,255,0.78);
    color: var(--text);
    font: inherit;
    font-size: 0.78rem;
    min-width: 0;
}

:root.dark .my-event-private-input {
    background: var(--bg2);
}

.button-secondary-sm {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
    white-space: nowrap;
}

.my-event-location::before {
    content: '\2022';
    margin-right: 0.3rem;
}

.my-event-edit {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--teal);
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(122,153,153,0.2);
    background: rgba(122,153,153,0.08);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.my-event-edit:hover {
    background: rgba(122,153,153,0.16);
    border-color: rgba(122,153,153,0.35);
    color: var(--text);
}

.my-event-clone {
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: #d4a017;
    background: rgba(212,160,23,0.08);
    border: 1px solid rgba(212,160,23,0.18);
    border-radius: 999px;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.my-event-clone:hover {
    background: rgba(212,160,23,0.18);
    border-color: rgba(212,160,23,0.35);
    color: #fff;
}

.my-event-delete {
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--pink);
    background: rgba(255,76,128,0.08);
    border: 1px solid rgba(255,76,128,0.18);
    border-radius: 999px;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.my-event-delete:hover {
    background: rgba(255,76,128,0.18);
    border-color: rgba(255,76,128,0.35);
    color: #fff;
}

.my-events-empty {
    font-size: 0.9rem;
    color: var(--muted);
    text-align: center;
    padding: 1.5rem 0;
}

.my-events-empty + .button-primary {
    display: block;
    margin: 0.5rem auto 0;
}

:root.dark .my-event-item {
    box-shadow: var(--shadow-soft), inset 0 1px 0 var(--panel-glow);
}

:root.dark .my-event-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 var(--panel-glow);
}

:root.dark .my-event-edit {
    background: var(--panel-bg);
    border-color: var(--panel-edge);
}

:root.dark .my-event-edit:hover {
    background: var(--panel-bg);
    border-color: var(--text);
}

:root.dark .my-event-delete {
    background: color-mix(in srgb, var(--pink) 10%, var(--bg2) 90%);
}

:root.dark .my-event-delete:hover {
    background: color-mix(in srgb, var(--pink) 22%, var(--bg2) 78%);
}

:root.dark .my-event-clone {
    background: color-mix(in srgb, #d4a017 10%, var(--bg2) 90%);
}

:root.dark .my-event-clone:hover {
    background: color-mix(in srgb, #d4a017 22%, var(--bg2) 78%);
}

.my-attendance-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 1.2rem 0 0.5rem;
}

.my-attendance-section-title:first-child {
    margin-top: 0;
}

/* ============================================================
    29. VENUE EDIT
    ============================================================ */

.venue-edit-trigger {
    display: inline-block;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.82em;
    padding: 0.1em 0.2em;
    margin-left: 0.15em;
    transition: color 0.15s ease;
    vertical-align: middle;
}

.venue-edit-trigger:hover {
    color: var(--pink);
}

.venue-edit-trigger-manage {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.82rem;
}

.venue-edit-container {
    margin-top: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.venue-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--surface-border);
}

.venue-edit-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s ease;
}

.venue-edit-close:hover {
    color: var(--pink);
}

.venue-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.venue-edit-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.venue-edit-field span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
}

.venue-edit-field input {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    transition: border-color 0.15s ease;
}

.venue-edit-field select {
    width: 100%;
    box-sizing: border-box;
    height: 2.6rem;
    padding: 0.55rem 28px 0.55rem 0.75rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    background-color: var(--surface-strong);
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.venue-edit-field input:focus,
.venue-edit-field select:focus {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(255,76,128,0.12);
    outline: none;
}

.venue-edit-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.venue-edit-note {
    font-size: 0.75rem;
    color: var(--muted);
    font-style: italic;
    margin-top: 0.1rem;
}

.venue-edit-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.venue-edit-feedback {
    font-size: 0.85rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    margin-top: 0.3rem;
}

.venue-edit-success {
    background: rgba(76,175,80,0.1);
    color: #2e7d32;
    border: 1px solid rgba(76,175,80,0.2);
}

.venue-edit-error {
    background: rgba(244,67,54,0.1);
    color: #c62828;
    border: 1px solid rgba(244,67,54,0.2);
}

.venue-edit-history {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--surface-border);
}

.venue-edit-history h4 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.4rem;
}

.venue-change-item {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--muted);
    padding: 0.25rem 0;
}

.venue-change-who {
    font-weight: 600;
    color: var(--text);
}

.venue-change-date {
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--muted) 70%, transparent 30%);
}

.venue-change-reason {
    font-size: 0.78rem;
    color: var(--muted);
}

/* ============================================================
    30. RESPONSIVE
    ============================================================ */

@media (max-width: 640px) {
    .calendar-filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .calendar-filter-actions {
        justify-content: stretch;
    }

    .calendar-filter-actions .button-primary,
    .calendar-filter-actions .button-secondary {
        flex: 1;
    }

    .calendar-event-card {
        flex-direction: column;
    }

    .calendar-event-image {
        width: 100%;
        height: 160px;
        min-height: 0;
    }

    .calendar-event-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .calendar-event-detail {
        flex-direction: column;
    }

    .calendar-detail-image {
        width: 100%;
        height: 180px;
    }

    .calendar-modal {
        padding: 1rem;
        margin-top: 1rem;
    }

    .calendar-genre-filters {
        flex-basis: auto;
    }

    .my-event-item {
        grid-template-columns: 1fr;
    }

    .my-event-timestamps {
        flex-direction: column;
        gap: 0.15rem;
    }

    .my-event-timestamp::before {
        content: none;
    }

    .my-event-private-link {
        flex-direction: column;
        align-items: stretch;
    }

    .my-event-private-input {
        font-size: 0.72rem;
    }

    .my-event-actions {
        grid-column: 1;
        grid-row: auto;
        justify-content: flex-start;
    }

    .venue-edit-row {
        grid-template-columns: 1fr;
    }

    .venue-edit-actions {
        flex-direction: column;
    }

    .venue-edit-actions .button-primary,
    .venue-edit-actions .button-secondary {
        width: 100%;
    }
}

/* ============================================================
   Admin Portal
   ============================================================ */

.admin-tabs {
    display: flex; gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 24px; overflow-x: auto;
}
.admin-tab {
    padding: 10px 16px; background: none; border: none;
    border-bottom: 2px solid transparent;
    color: var(--text); font-size: 0.9rem; cursor: pointer;
    white-space: nowrap; transition: border-color 0.2s, color 0.2s;
}
.admin-tab:hover { color: var(--pink); }
.admin-tab.active { border-bottom-color: var(--pink); color: var(--pink); font-weight: 600; }
.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block; }

/* Admin stat cards */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px; margin-bottom: 24px;
}
.admin-stat-card {
    padding: 16px; border-radius: 8px;
    background: var(--card-bg, var(--bg2));
    border: 1px solid var(--border);
}
.admin-stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--pink); }
.admin-stat-card .stat-label { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }

/* Admin stat groups */
.admin-stat-group { margin-bottom: 24px; }
.admin-stat-group h3 { font-size: 1rem; font-weight: 600; margin: 0 0 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* Admin tables */
.admin-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.admin-table th, .admin-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.admin-table th { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.admin-table tr:hover td { background: var(--hover-bg, rgba(0,0,0,0.03)); }

/* Admin notices */
.admin-notice { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.admin-notice-warning { background: #fff3cd; border: 1px solid #ffc107; color: #856404; }
.admin-notice-danger { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
.admin-notice-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.dark .admin-notice-warning { background: #3d3400; border-color: #665200; color: #ffd54f; }
.dark .admin-notice-danger { background: #3d0000; border-color: #660000; color: #ff6b6b; }
.dark .admin-notice-success { background: #003d00; border-color: #006600; color: #6bff6b; }

/* Admin action buttons */
.admin-action-btn {
    padding: 8px 14px; border-radius: 4px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); cursor: pointer; font-size: 0.85rem;
}
.admin-action-btn.danger { border-color: #dc3545; color: #dc3545; }
.admin-action-btn.danger:hover { background: #dc3545; color: #fff; }
.admin-action-btn.primary { border-color: var(--pink); color: var(--pink); }
.admin-action-btn.primary:hover { background: var(--pink); color: #fff; }

/* Admin badge */
.admin-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 0.75rem; font-weight: 600; background: var(--pink); color: #fff;
}

/* Admin action buttons - active state */
.admin-action-btn.active {
    background: var(--pink);
    color: #fff;
    border-color: var(--pink);
}

/* Admin tables — horizontal scroll when columns exceed container */
.admin-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

/* ============================================================
   Chat
   ============================================================ */

.chat-shell {
    display: flex;
    flex-direction: column;
    max-width: 720px;
    margin: 0 auto;
    height: calc(100vh - 200px);
    min-height: 400px;
}

.chat-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg2);
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
}

.chat-info {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--muted);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1.45;
    word-wrap: break-word;
}

.chat-message:hover {
    background: var(--row-alt);
}

.chat-action-content {
    flex: 1 1 auto;
    min-width: 0;
    font-style: italic;
}

.chat-action .chat-user {
    color: var(--teal);
}

.chat-target {
    color: var(--pink);
    font-weight: 600;
}

.chat-time {
    color: var(--muted);
    font-size: 0.8rem;
    flex-shrink: 0;
    min-width: 42px;
    user-select: none;
}

.chat-user {
    font-weight: 600;
    color: var(--pink);
    flex-shrink: 0;
}

.chat-admin {
    color: var(--pink);
}

.chat-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
}

.chat-emoji {
    height: 1.3em;
    vertical-align: middle;
    margin: 0 1px;
}

.chat-mention {
    color: var(--teal);
    font-weight: 600;
    cursor: default;
}

.chat-del-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    padding: 6px;
    opacity: 0.4;
    transition: opacity 0.15s, color 0.15s;
}

.chat-del-btn:hover {
    opacity: 1;
    color: #dc3545;
}

.chat-message-deleted {
    opacity: 0.5;
}

.chat-deleted-text {
    font-style: italic;
    color: var(--muted);
}

/* Chat input area */
.chat-input-area {
    position: relative;
    padding: 10px 12px;
    border-top: 1px solid var(--surface-border);
}

.chat-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.chat-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    background: var(--bg2);
    color: var(--text);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    resize: none;
    transition: border-color 0.15s;
    max-height: 150px;
}

.chat-input:focus {
    border-color: var(--pink);
}

.chat-btn {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    font-size: 1.1rem;
}

.chat-btn:hover {
    background: var(--row-alt);
    border-color: var(--pink);
    color: var(--pink);
}

.chat-btn.send {
    background: var(--pink);
    border-color: var(--pink);
    color: #fff;
}

.chat-btn.send:hover {
    background: var(--pink-lt);
    border-color: var(--pink-lt);
    color: #fff;
}

/* Emoji picker */
.emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 8px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    box-shadow: var(--shadow-soft);
    z-index: 100;
    max-height: 240px;
    overflow-y: auto;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
    gap: 4px;
}

.emoji-btn {
    width: 100%;
    aspect-ratio: 1;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: background 0.1s;
}

.emoji-btn:hover {
    background: var(--row-alt);
}

.emoji-btn img {
    height: 1.3em;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Mention autocomplete */
.mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    max-height: 180px;
    overflow-y: auto;
    z-index: 101;
}

.mention-item {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text);
}

.mention-item:hover,
.mention-active {
    background: var(--row-alt);
    color: var(--pink);
}

/* Command autocomplete */
.command-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    max-height: 180px;
    overflow-y: auto;
    z-index: 101;
}

.command-item {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text);
}

.command-item:hover,
.command-active {
    background: var(--row-alt);
    color: var(--pink);
}

.command-item strong {
    color: var(--pink);
}

.command-item:hover strong,
.command-active strong {
    color: var(--pink);
}

/* Chat nav icon */
.nav-chat-icon {
    height: var(--nav-icon-height);
    width: auto;
}

/* Responsive chat */
@media (max-width: 768px) {
    .chat-shell {
        height: calc(100vh - 160px);
        min-height: 350px;
    }

    .chat-messages {
        padding: 8px 10px;
    }

    .emoji-grid {
        grid-template-columns: repeat(auto-fill, minmax(29px, 1fr));
    }
}

/* Chat message editing */
.chat-edited-label {
    color: #888;
    font-size: 0.75em;
    font-style: italic;
    margin-left: 4px;
}

.chat-input.editing {
    border-color: #e91e8b;
    box-shadow: 0 0 0 2px rgba(233, 30, 139, 0.15);
}

.chat-edit-indicator {
    display: none;
    font-size: 0.75em;
    color: #e91e8b;
    margin-bottom: 4px;
    padding-left: 2px;
}

.chat-edit-indicator.visible {
    display: block;
}

/* ============================================================
   17. CAPTCHA — Progressive bot protection
   ============================================================ */

/* Honeypot field — invisible to humans, visible to bots */
#captcha_honey {
    visibility: hidden;
    position: absolute;
    pointer-events: none;
    height: 0;
    width: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.captcha-challenge {
    padding: 0.75rem 0;
    text-align: center;
}

.captcha-instruction {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-color);
}

.captcha-grid {
    display: grid;
    grid-template-columns: repeat(3, 60px);
    gap: 8px;
    justify-content: center;
}

.captcha-tile {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border: 3px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.1s ease;
    outline: none;
}

.captcha-tile:hover {
    transform: scale(1.05);
}

.captcha-tile:focus-visible {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color);
}

.captcha-tile-selected {
    border-color: var(--accent-color) !important;
    transform: scale(1.08);
    box-shadow: 0 0 0 2px var(--accent-color);
}

/* Admin table sortable headers */
.admin-table th[data-sort] {
    cursor: pointer;
    user-select: none;
    position: relative;
}
.admin-table th[data-sort]:hover {
    background: rgba(255, 255, 255, 0.05);
}
.admin-table th .sort-arrow {
    font-size: 0.7em;
    margin-left: 4px;
    opacity: 0.6;
}

/* ============================================================
   BUG REPORT MODAL
   ============================================================ */

.bug-report-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bug-report-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.bug-report-dialog {
    position: relative;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
}

.bug-report-dialog h2 {
    margin: 0 0 4px 0;
    font-size: 1.3rem;
}

.bug-report-field {
    margin-bottom: 16px;
}

.bug-report-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.bug-report-field input,
.bug-report-field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.95rem;
    box-sizing: border-box;
}

.bug-report-field select {
    width: 100%;
    box-sizing: border-box;
    height: 2.6rem;
    padding: 0.55rem 28px 0.55rem 0.75rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    background-color: var(--bg2);
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.4;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bug-report-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca3af' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.bug-report-field select:focus {
    outline: none;
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(255,76,128,0.12);
}

:root.dark .bug-report-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4dae3' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}

.bug-report-field textarea {
    resize: vertical;
    min-height: 80px;
}

.bug-report-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* Footer bug report link */
#bug-report-trigger {
    color: var(--pink);
    text-decoration: none;
}

#bug-report-trigger:hover {
    text-decoration: underline;
}

/* ============================================================
   MOBILE TOUCH TARGETS — High priority fixes
   ============================================================ */

@media (max-width: 640px) {
    /* Bug report modal actions — stack vertically */
    .bug-report-actions {
        flex-direction: column;
    }

    /* Admin table cells — more padding for touch */
    .admin-table th,
    .admin-table td {
        padding: 12px 14px;
    }

    /* Venue edit trigger — larger touch target */
    .venue-edit-trigger {
        font-size: 1rem;
        padding: 0.5em 0.7em;
        margin-left: 0.3em;
    }

    /* My event buttons — larger touch targets */
    .my-event-edit,
    .my-event-clone,
    .my-event-delete {
        font-size: 0.9rem;
        padding: 0.55rem 1rem;
    }

    /* Mention & command dropdown items — 44px min touch target */
    .mention-item,
    .command-item {
        padding: 12px 14px;
        font-size: 1rem;
    }

    /* Chat shell — use dvh for mobile address bar compatibility */
    .chat-shell {
        height: calc(100dvh - 200px);
    }

    /* Settings tabs — larger touch targets */
    .settings-tab {
        font-size: 0.95rem;
        padding: 0.6rem 1.1rem;
    }

    /* Slideshow nav buttons — larger touch targets */
    .ss-nav {
        font-size: 2rem;
        padding: 0.8rem 1.1rem;
    }

    /* Slideshow close button — larger touch target */
    .ss-close {
        font-size: 2.2rem;
        padding: 0.5rem;
        margin: -0.5rem;
    }

    /* Footer nav links — adequate spacing */
    .footer-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.8rem;
    }
}

/* Bug report screenshot previews */
.bug-report-dialog .br-preview-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    width: 100%;
}

.br-preview-item {
    position: relative;
    width: 120px;
    height: 90px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.br-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.br-preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bug report screenshot grid in admin */
.bug-screenshots-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.bug-screenshot-thumb {
    width: 120px;
    height: 90px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: opacity 0.15s;
}

.bug-screenshot-thumb:hover {
    opacity: 0.8;
}

.bug-screenshot-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Screenshot lightbox overlay */
.bug-lightbox-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.bug-lightbox-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 4px;
}

.bug-lightbox-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    z-index: 11;
    line-height: 1;
}

/* ============================================================
   CONTENT REPORT MODAL
   ============================================================ */

.report-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.report-modal-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.report-modal-dialog {
    position: relative;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
    max-width: 550px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
}

.report-modal-dialog h2 {
    margin: 0 0 4px 0;
    font-size: 1.3rem;
}

.report-field {
    margin-bottom: 16px;
}

.report-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.report-field input,
.report-field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.95rem;
    box-sizing: border-box;
}

.report-field select {
    width: 100%;
    box-sizing: border-box;
    height: 2.6rem;
    padding: 0.55rem 28px 0.55rem 0.75rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    background-color: var(--bg2);
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.4;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.report-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca3af' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.report-field select:focus {
    outline: none;
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(255,76,128,0.12);
}

:root.dark .report-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4dae3' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}

.report-field textarea {
    resize: vertical;
    min-height: 80px;
}

/* Readonly report type display */
.report-type-readonly {
    padding: 8px 10px;
    border-radius: 4px;
    background-color: var(--bg2);
    color: var(--text-muted, #9ca3af);
    font-size: 0.95rem;
    pointer-events: none;
}

.report-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* Report screenshot previews */
.report-modal-dialog .report-preview-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    width: 100%;
}

.report-preview-item {
    position: relative;
    width: 120px;
    height: 90px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.report-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.report-preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Report comment preview */
.report-comment-preview {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 16px;
}

.report-comment-text {
    background: var(--bg2);
    border-left: 3px solid var(--pink);
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9rem;
    color: var(--text);
}

.report-comment-meta {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 8px;
}

/* Message thread report note */
.report-thread-note {
    background: rgba(255,193,7,0.1);
    border: 1px solid rgba(255,193,7,0.3);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--text);
}

/* ============================================================
   Profile Page
   ============================================================ */

.profile-page {
    max-width: var(--content-max);
    margin: 2rem auto;
    padding: 0 1rem;
}

.profile-container {
    background: var(--bg2);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--bg3);
}

.profile-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
    width: 102px;
    height: 102px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    color: var(--muted);
}

img.profile-avatar-default {
    object-fit: contain;
}

.profile-avatar-default {
    background: var(--bg3);
    color: var(--muted);
}

.profile-avatar-expandable {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.profile-avatar-expandable:hover {
    opacity: 0.85;
}

/* Profile image lightbox */
.profile-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: zoom-out;
}

.profile-image-lightbox-img {
    max-width: 80%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius);
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    cursor: default;
}

.profile-status-indicator {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--bg2);
}

.profile-status-online {
    background: #34d399;
}

.profile-info {
    flex: 1;
    min-width: 0;
}

.profile-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.2rem;
}

.profile-username {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

.profile-last-seen {
    color: var(--muted);
    font-size: 0.8rem;
}

.profile-actions {
    margin-bottom: 1.5rem;
}

.profile-section {
    margin-bottom: 1.5rem;
}

.profile-section:last-child {
    margin-bottom: 0;
}

.profile-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.5rem;
}

.profile-bio {
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
}

.profile-details {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.profile-detail {
    display: flex;
    flex-direction: column;
}

.profile-detail dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.2rem;
}

.profile-detail dd {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
}

.profile-member-since {
    color: var(--text);
    font-size: 1rem;
}

.profile-visibility-text {
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.5;
}

:root.dark .profile-container {
    background: var(--bg2);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.profile-not-found {
    max-width: 480px;
    margin: 4rem auto;
    text-align: center;
}

.profile-not-found svg {
    width: 64px;
    height: 64px;
    color: var(--muted);
    margin-bottom: 1rem;
}

.profile-not-found h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.profile-not-found p {
    color: var(--muted);
    margin-bottom: 1.5rem;
}

/* Profile owner sub-menu tabs */
.profile-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.profile-tab {
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s;
    text-decoration: none;
}

.profile-tab:hover {
    color: var(--pink);
}

.profile-tab.active {
    border-bottom-color: var(--pink);
    color: var(--pink);
    font-weight: 600;
}

/* ============================================================
   Profile Settings
   ============================================================ */

.profile-picture-upload {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.profile-picture-actions {
    display: flex;
    gap: 0.5rem;
}

.settings-avatar-default {
    width: 96px;
    height: 96px;
}

.form-char-count {
    text-align: right;
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.25rem;
}

/* Sessions */
.session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg3);
    border-radius: 10px;
    margin-bottom: 0.5rem;
}

.session-item.current {
    border: 1px solid rgba(255, 76, 128, 0.2);
    background: color-mix(in srgb, var(--pink) 4%, var(--bg3) 96%);
}

.session-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.session-device {
    font-weight: 500;
    color: var(--text);
    font-size: 0.9rem;
}

.session-ip {
    color: var(--muted);
    font-size: 0.8rem;
}

.session-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.session-time {
    font-size: 0.8rem;
    color: var(--muted);
}

.session-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--pink);
    background: rgba(255, 76, 128, 0.1);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.session-revoke-btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
}

/* Visibility toggles */
.settings-toggle-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg3);
    border-radius: 10px;
    cursor: pointer;
}

.settings-toggle input[type="checkbox"] {
    display: none;
}

.settings-toggle-track {
    width: 44px;
    height: 24px;
    background: var(--muted);
    opacity: 0.4;
    border-radius: 12px;
    position: relative;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.settings-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.settings-toggle input[type="checkbox"]:checked + .settings-toggle-track {
    background: var(--pink);
    opacity: 1;
}

.settings-toggle input[type="checkbox"]:checked + .settings-toggle-track .settings-toggle-thumb {
    transform: translateX(20px);
}

.settings-toggle-label {
    flex: 1;
}

.settings-toggle-label strong {
    display: block;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 0.15rem;
}

.settings-toggle-label small {
    font-size: 0.8rem;
    color: var(--muted);
}

/* User pill link */
.user-pill {
    text-decoration: none;
}

.user-pill:hover {
    opacity: 0.85;
}

:root.dark .session-item {
    background: color-mix(in srgb, #ffffff 6%, var(--bg3) 94%);
}

:root.dark .session-item.current {
    background: color-mix(in srgb, var(--pink) 6%, var(--bg3) 94%);
}

:root.dark .settings-toggle {
    background: color-mix(in srgb, #ffffff 6%, var(--bg3) 94%);
}

@media (max-width: 600px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-picture-upload {
        flex-direction: column;
        text-align: center;
    }

    .session-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .session-meta {
        width: 100%;
        justify-content: space-between;
    }
}

/* ============================================
   Users Page — card-panel design (matches music.php)
   ============================================ */

.user-panel {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--surface-border) 88%, var(--year-accent-strong) 12%);
    border-radius: calc(var(--radius) + 1px);
    overflow: hidden;
    background: #e7eef7;
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.42);
    transition: background 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
    margin-bottom: 1rem;
}

.user-panel:nth-child(1) { background: #edf3fa; }
.user-panel:nth-child(2) { background: #dfe8f3; }

.user-panel.open {
    border-color: color-mix(in srgb, var(--surface-border) 78%, rgba(255,76,128,0.22) 22%);
    background: #d4deea;
    box-shadow: var(--shadow-raised), inset 3px 0 0 rgba(255,76,128,0.42);
}

/* Panel summary — clickable header row */
.panel-summary {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 1rem 3.2rem 1rem 1.15rem;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    user-select: none;
}

.panel-summary::after {
    content: "\25B6";
    position: absolute;
    right: 1.05rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.78rem;
    color: var(--muted);
    transition: transform 0.2s ease, color 0.2s ease;
    pointer-events: none;
}

.user-panel.open .panel-summary::after {
    transform: translateY(-50%) rotate(90deg);
    color: var(--pink);
}

.panel-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

.panel-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Panel detail — expandable body */
.panel-detail {
    display: none;
    border-top: 1px solid color-mix(in srgb, var(--border) 84%, var(--year-accent-strong) 16%);
    background: #cfd8e5;
}

.user-panel.open .panel-detail {
    display: block;
}

.panel-detail-inner {
    padding: 1rem 1.15rem 1.25rem;
}

/* Online users grid */
.users-online-count {
    font-size: 0.85rem;
    color: var(--muted);
}

.users-sort-btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
}

.users-online-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.users-loading {
    flex-basis: 100%;
    text-align: center;
    color: var(--muted);
    padding: 2rem;
}

.online-user-card {
    text-decoration: none;
    color: var(--text);
}

.online-avatar-wrapper {
    position: relative;
    width: 72px;
    height: 72px;
}

.online-avatar-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg3);
    transition: transform 0.15s, box-shadow 0.15s;
}

.online-user-card:hover .online-avatar-img {
    transform: scale(1.05);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.online-avatar-default {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg3);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s;
}

.online-avatar-default .default-avatar-img {
    width: 52px;
    height: 52px;
}

.online-user-card:hover .online-avatar-default {
    transform: scale(1.05);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #34d399;
    border: 2px solid #cfd8e5;
}

.online-username {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    max-width: 110%;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Search */
.users-search-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.users-search-input {
    flex: 1;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    background: var(--bg3);
    color: var(--text);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
}

.users-search-input:focus {
    border-color: var(--pink);
}

.users-search-select {
    flex: 1;
    height: 2.6rem;
    padding: 0.55rem 28px 0.55rem 0.75rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    background-color: var(--surface-strong);
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.4;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.users-search-select:focus {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(255,76,128,0.12);
}

.users-search-select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.users-search-btn {
    white-space: nowrap;
    cursor: pointer;
}

.users-search-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    background: var(--bg3);
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.users-search-checkbox-label input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--pink);
}

/* Sort header */
.users-search-header {
    display: flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    margin-bottom: 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    border-bottom: 1px solid var(--surface-border);
}

.users-search-col {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

.users-search-col:hover {
    color: var(--text);
}

.users-search-col .sort-arrow {
    font-size: 0.75em;
    margin-left: 3px;
    opacity: 0.6;
}

.users-search-col-name {
    flex: 2.5;
}

.users-search-col-country {
    flex: 1.2;
}

.users-search-col-city {
    flex: 1.2;
}

.users-search-results {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.users-search-empty {
    text-align: center;
    color: var(--muted);
    padding: 1.5rem;
    font-style: italic;
}

.user-search-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius);
    transition: background 0.15s;
}

.user-search-row:hover {
    filter: brightness(0.97);
}

.user-search-row-odd {
    background: #e8edf5;
}

.user-search-row-even {
    background: #f4f7fc;
}

.user-search-avatar {
    flex-shrink: 0;
    position: relative;
    width: 40px;
    height: 40px;
}

.user-search-avatar-img,
.user-search-avatar-default {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #ffffff 40%, var(--bg3) 60%);
    color: var(--muted);
}

.user-search-avatar-img {
    object-fit: cover;
    background: none;
}

.user-search-avatar-default .default-avatar-img {
    width: 29px;
    height: 29px;
}

.user-search-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-search-name-link {
    color: inherit;
    text-decoration: none;
}

.user-search-name-link:hover {
    color: var(--pink);
    text-decoration: underline;
}

.user-search-location {
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-search-location-empty {
    font-style: italic;
}

.user-search-col-name {
    flex: 2.5;
    min-width: 0;
    overflow: hidden;
}

.user-search-col-country {
    flex: 1.2;
    min-width: 0;
    overflow: hidden;
}

.user-search-col-city {
    flex: 1.2;
    min-width: 0;
    overflow: hidden;
}

/* Pagination */
.users-search-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.users-search-pagination .btn {
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
}

.users-search-pagination .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.users-page-label {
    font-size: 0.85rem;
    color: var(--muted);
}

/* Dark mode */
:root.dark .user-panel {
    border-color: var(--surface-border);
}

:root.dark .user-panel:nth-child(1) { background: var(--bg2); }
:root.dark .user-panel:nth-child(2) { background: var(--row-alt); }
:root.dark .user-panel.open {
    border-color: color-mix(in srgb, var(--surface-border) 76%, var(--pink) 24%);
    background: var(--panel-bg);
}

:root.dark .panel-summary {
    color: var(--text);
}

:root.dark .panel-title {
    color: var(--text);
}

:root.dark .panel-detail {
    background: var(--bg3);
    border-top-color: var(--panel-edge);
}

:root.dark .users-online-count {
    color: var(--muted);
}

:root.dark .online-avatar-default {
    background: color-mix(in srgb, #ffffff 10%, var(--bg3) 90%);
}

:root.dark .online-dot {
    border-color: var(--bg3);
}

:root.dark .users-search-input {
    border-color: color-mix(in srgb, #ffffff 20%, transparent);
}

:root.dark .users-search-input:focus {
    border-color: var(--pink);
}

:root.dark .users-search-select:focus {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(255,76,128,0.12);
}

:root.dark .users-search-select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

:root.dark .users-search-checkbox-label {
    border-color: color-mix(in srgb, #ffffff 20%, transparent);
    background: var(--bg3);
    color: var(--text);
}

:root.dark .users-search-header {
    border-bottom-color: var(--panel-edge);
}

:root.dark .user-search-row-odd {
    background: #223252;
}

:root.dark .user-search-row-even {
    background: #1c2d48;
}

:root.dark .user-search-avatar-default {
    background: color-mix(in srgb, #ffffff 8%, var(--bg3) 92%);
}

/* Responsive */
@media (max-width: 768px) {
    .users-search-filters {
        flex-wrap: wrap;
    }

    .users-search-input,
    .users-search-select {
        min-width: calc(50% - 0.5rem);
    }

    .users-search-btn {
        width: 100%;
    }

    .users-search-header {
        display: none;
    }

    .user-search-row {
        flex-wrap: wrap;
    }

    .user-search-col-name {
        flex: 1 1 auto;
        min-width: calc(100% - 55px);
    }

    .user-search-col-country,
    .user-search-col-city {
        flex: 1 1 100%;
        margin-top: 0.2rem;
    }
}

@media (max-width: 600px) {
    .content-width {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .panel-summary {
        padding: 0.8rem 2.8rem 0.8rem 0.9rem;
        grid-template-columns: 1fr;
    }

    .panel-meta {
        padding-left: 0.25rem;
    }

    .panel-detail-inner {
        padding: 0.75rem 0.9rem 1rem;
    }

    .online-avatar-wrapper {
        width: 60px;
        height: 60px;
    }

    .online-avatar-img,
    .online-avatar-default {
        width: 60px;
        height: 60px;
    }

    .user-search-row {
        flex-wrap: wrap;
    }

    .user-search-row .btn {
        width: 100%;
        text-align: center;
        margin-top: 0.5rem;
    }
}

/* ============================================================
   Crop modal
   ============================================================ */

.crop-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.crop-modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
}

.crop-modal-header {
    text-align: center;
    margin-bottom: 1.25rem;
}

.crop-modal-header h3 {
    font-size: 1.15rem;
    color: var(--text);
    margin-bottom: 0.35rem;
}

.crop-modal-header p {
    font-size: 0.85rem;
    color: var(--muted);
}

.crop-modal-body {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.crop-viewport {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg3);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.crop-viewport:active {
    cursor: grabbing;
}

.crop-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

#crop-image {
    display: block;
    -webkit-user-drag: none;
}

.crop-overlay-circle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 2;
}

.crop-modal-footer {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.crop-modal-footer .button-secondary,
.crop-modal-footer .button-primary {
    min-width: 110px;
}

@media (max-width: 480px) {
    .crop-modal {
        padding: 1rem;
        max-width: 90vw;
    }

    .crop-viewport {
        width: 240px;
        height: 240px;
    }

    .crop-modal-footer {
        flex-direction: column;
        gap: 0.5rem;
    }

       .crop-modal-footer .button-secondary,
        .crop-modal-footer .button-primary {
            width: 100%;
        }
    }

    .crop-zoom-badge {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 4px;
        pointer-events: none;
        z-index: 10;
        font-family: inherit;
    }

    /* Date Picker */
    .datepicker-wrapper {
        position: relative;
        display: flex;
        align-items: stretch;
        width: 100%;
    }

    .datepicker-wrapper input[type="text"] {
        flex: 1;
        padding-right: 42px;
    }

    .date-picker-popup {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        z-index: 1000;
        width: 250px;
        background: var(--bg2);
        border: 1px solid var(--surface-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-raised);
        padding: 10px;
        font-family: inherit;
    }

    .dp-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .dp-prev,
    .dp-next {
        background: none;
        border: 1px solid var(--surface-border);
        color: var(--text);
        font-size: 1rem;
        width: 28px;
        height: 28px;
        border-radius: var(--radius);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .dp-prev:hover,
    .dp-next:hover {
        background: color-mix(in srgb, var(--pink) 12%, transparent);
        border-color: var(--pink);
        color: var(--pink);
    }

    .dp-month-year {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text);
    }

    .dp-weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        margin-bottom: 4px;
    }

    .dp-weekday {
        text-align: center;
        font-size: 0.75rem;
        color: var(--muted);
        font-weight: 600;
        padding: 4px 0;
    }

    .dp-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
    }

    .dp-day {
        text-align: center;
        font-size: 0.9rem;
        color: var(--text);
        padding: 6px 0;
        border-radius: var(--radius);
        cursor: pointer;
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dp-day:hover:not(.disabled):not(.other-month) {
        background: color-mix(in srgb, var(--pink) 10%, transparent);
    }

    .dp-day.selected {
        background: var(--pink);
        color: #fff;
    }

    .dp-day.today:not(.selected) {
        border: 2px solid var(--pink);
    }

    .dp-day.disabled,
    .dp-day.other-month {
        opacity: 0.35;
        cursor: default;
    }

    .dp-day.disabled:hover,
    .dp-day.other-month:hover {
        background: none;
    }

    /* Calendar icon button */
    .dp-calendar-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 100%;
        padding: 0;
        margin: 0;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        flex-shrink: 0;
        transition: color 0.15s ease;
        z-index: 2;
    }

    .dp-calendar-btn svg {
        width: 18px;
        height: 18px;
    }

    .dp-calendar-btn:hover {
        color: var(--pink);
    }

    .dp-calendar-btn:focus {
        outline: none;
        color: var(--pink);
    }

    /* Year grid (decade view) */
    .dp-year-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .dp-year {
        font-weight: 500;
    }

    .datetime-combo {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .datetime-combo .datepicker-wrapper {
        flex: 1;
        min-width: 0;
    }

    .datetime-combo input[type="text"] {
        width: auto;
        flex: 1;
        min-width: 0;
        padding: 0.55rem 0.75rem;
        border: 1px solid var(--surface-border);
        border-radius: var(--radius);
        background: var(--bg2);
        color: var(--text);
        font: inherit;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .datetime-combo input[type="text"]:focus {
        outline: none;
        border-color: var(--pink);
        box-shadow: 0 0 0 3px rgba(255,76,128,0.12);
    }

/* ===== Messages page ===== */
.messages-page { max-width: 900px; margin: 2rem auto; }

/* Tabs */
.messages-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
.messages-tab { padding: 0.6rem 1.2rem; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.9rem; border: none; font-family: inherit; }
.messages-tab.active { background: rgba(255,76,128,0.1); color: var(--pink); }
.messages-tab:hover:not(.active) { background: rgba(255,255,255,0.05); }

/* Badge on inbox tab */
.messages-badge { display: inline-block; min-width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center; border-radius: 999px; background: var(--pink); color: #fff; font-size: 0.75rem; margin-left: 0.3rem; font-weight: 600; }
.messages-badge:empty { display: none; }

/* List container */
.messages-list-container { position: relative; }

/* Table rows */
.messages-table tbody tr { cursor: pointer; }
.messages-row:hover td { background: rgba(255,255,255,0.03); }
.messages-row--unread td { font-weight: 600; }
.messages-row--unread .messages-subject::before { content: "\25CF"; color: var(--pink); margin-right: 0.4rem; font-size: 0.6em; vertical-align: middle; }

/* Notification type badges */
.notification-type-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.notification-type--success { background: rgba(40,167,69,0.15); color: #28a745; }
.notification-type--error { background: rgba(220,53,69,0.15); color: #dc3545; }
.notification-type--warning { background: rgba(255,193,7,0.15); color: #ffc107; }
.notification-type--info { background: rgba(23,162,184,0.15); color: #17a2b8; }
.notification-type--message { background: rgba(255,76,128,0.15); color: var(--pink); }
.notification-type--announcement { background: rgba(124,58,237,0.15); color: #7c3aed; }

/* Notification detail modal body */
.notification-detail-body {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Columns — date, sender and actions are fixed; subject fills remaining space */
.messages-date { width: 1%; min-width: 120px; white-space: nowrap; color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; }
.messages-sender { width: 1%; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-subject { width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-actions-col { width: 50px; text-align: right; }

/* Loading / error rows */
.messages-loading, .messages-error { text-align: center; padding: 2rem !important; color: var(--muted); }
.messages-error { color: #dc3545; }

/* Kebab button */
.messages-kebab-btn { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 1.2rem; padding: 0.3rem; line-height: 1; border-radius: 4px; }
.messages-kebab-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }

/* Kebab menu popup */
.messages-kebab-menu { position: absolute; right: 0; top: 100%; min-width: 180px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft, 0 4px 16px rgba(0,0,0,0.1)); z-index: 50; padding: 0.4rem; animation: user-menu-in 0.15s ease; }
.kebab-item { display: block; width: 100%; text-align: left; padding: 0.6rem 0.8rem; background: transparent; border: none; color: var(--text); cursor: pointer; border-radius: 8px; font-size: 0.85rem; font-family: inherit; }
.kebab-item:hover { background: rgba(255,76,128,0.1); color: var(--pink); }
.kebab-item.danger:hover { background: rgba(220,53,69,0.1); color: #dc3545; }
.kebab-info { padding: 0.3rem 0.8rem; font-size: 0.75rem; color: var(--muted); border-top: 1px solid var(--border); margin-top: 0.3rem; }

/* Kebab action buttons (used in JS-rendered menus) */
.kebab-action { display: block; width: 100%; text-align: left; padding: 0.6rem 0.8rem; background: transparent; border: none; color: var(--text); cursor: pointer; border-radius: 8px; font-size: 0.85rem; font-family: inherit; }
.kebab-action:hover { background: rgba(255,76,128,0.1); color: var(--pink); }
.kebab-action--danger:hover { background: rgba(220,53,69,0.1); color: #dc3545; }

/* Kebab button (JS-rendered) */
.kebab-button { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 1.3rem; padding: 0.2rem 0.4rem; line-height: 1; border-radius: 4px; }
.kebab-button:hover { background: rgba(255,255,255,0.1); color: var(--text); }

/* Kebab menu (floating popup appended to body) */
.kebab-menu { position: fixed; min-width: 180px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft, 0 4px 16px rgba(0,0,0,0.1)); z-index: 500; padding: 0.4rem; }
.kebab-menu.hidden { display: none; }

/* Messages actions cell - position relative for kebab menu */
.messages-actions { position: relative; text-align: right; white-space: nowrap; }

/* Empty state */
.messages-empty { text-align: center; padding: 3rem; color: var(--muted); font-size: 0.95rem; }

/* Thread count */
.messages-thread-count { color: var(--muted); font-weight: 400; font-size: 0.8em; }

/* Pagination buttons */
.messages-page-btn { padding: 0.4rem 1rem; border-radius: var(--radius); background: transparent; border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 0.85rem; font-family: inherit; }
.messages-page-btn:hover:not(:disabled) { background: rgba(255,76,128,0.1); border-color: var(--pink); color: var(--pink); }
.messages-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.messages-page-label { display: inline-block; padding: 0 1rem; color: var(--muted); font-size: 0.85rem; line-height: 2.4; }

/* Sender link */
.messages-sender-link { color: var(--pink); text-decoration: none; }
.messages-sender-link:hover { text-decoration: underline; }

/* ===== Message View Page ===== */

.message-back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--pink);
    text-decoration: none;
    font-size: 0.9rem;
}

.message-back-link:hover {
    text-decoration: underline;
}

/* Conversation header */
.message-conversation-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.message-subject {
    font-size: 1.3rem;
    margin: 0 0 0.3rem;
}

.message-partner {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
}

/* Thread container */
.message-thread {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Message bubbles */
.message-bubble {
    max-width: 75%;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-lg);
    line-height: 1.5;
    font-size: 0.95rem;
    word-wrap: break-word;
}

.message-bubble--mine {
    align-self: flex-end;
    background: rgba(255,76,128,0.15);
    border-bottom-right-radius: 4px;
}

.message-bubble--theirs {
    align-self: flex-start;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}

/* Bubble content */
.message-bubble-content {
    white-space: pre-wrap;
}

/* Bubble metadata (time + read status) */
.message-bubble-meta {
    font-size: 0.7rem;
    color: var(--muted);
    margin-top: 0.3rem;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
}

/* Read status checkmarks */
.message-read-status {
    opacity: 0.5;
    font-size: 0.75rem;
    letter-spacing: -2px;
}

.message-read {
    color: var(--pink);
    opacity: 1;
}

/* Reply composer at bottom of thread */
.message-composer {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.composer-actions {
    margin-top: 0.5rem;
    text-align: right;
}

/* Compose new message container */
.message-compose-container {
    max-width: 600px;
}

/* Date separator in thread */
.bubble-date {
    text-align: center;
    font-size: 0.75rem;
    color: var(--muted);
    padding: 0.5rem 0;
}

/* Dark mode adjustments for bubbles */
:root.dark .message-bubble--mine {
    background: rgba(204,61,103,0.2);
}

/* Responsive: full width bubbles on mobile */
@media (max-width: 600px) {
    .message-bubble {
        max-width: 90%;
    }

    .message-thread {
        max-height: 50vh;
    }
}

@keyframes user-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Message storage quota indicator ---- */
.messages-quota { margin-bottom: 1rem; }
.messages-quota-text { font-size: 0.85rem; color: var(--muted); display: block; margin-bottom: 0.3rem; }
.messages-quota-bar-bg { width: 100%; height: 6px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.messages-quota-bar-fill { height: 100%; background: var(--pink); border-radius: 999px; transition: width 0.3s ease; min-width: 2px; }
.messages-quota-bar--warning { background: #ff6b6b !important; }

/* Messages bulk selection */
.messages-select-col { width: 40px; text-align: center; }
.messages-select-cell { width: 40px; text-align: center; }
.messages-select-cell input[type="checkbox"],
.messages-select-col input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; accent-color: var(--pink); }

.messages-bulk-bar { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1rem; margin-bottom: 0.75rem; background: rgba(255,76,128,0.08); border-radius: var(--radius, 8px); border: 1px solid rgba(255,76,128,0.2); }
.messages-bulk-bar.hidden { display: none; }
.messages-bulk-count { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.messages-bulk-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }

.messages-bulk-btn { padding: 0.3rem 0.75rem; border-radius: var(--radius, 8px); background: transparent; border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 0.8rem; font-family: inherit; white-space: nowrap; }
.messages-bulk-btn:hover:not(:disabled) { background: rgba(255,76,128,0.1); border-color: var(--pink); color: var(--pink); }
.messages-bulk-btn--danger { color: #ff6b6b; border-color: rgba(255,107,107,0.3); }
.messages-bulk-btn--danger:hover:not(:disabled) { background: rgba(255,107,107,0.1); border-color: #ff6b6b; color: #ff6b6b; }

/* Selected row highlight */
tr.messages-row.selected td { background: rgba(255,76,128,0.06) !important; }

@media (max-width: 640px) {
    .messages-bulk-bar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .messages-bulk-actions { margin-left: 0; width: 100%; }
}

/* ---- Profile Social Media Link Badges (SimpleIcons) ---- */
.profile-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.profile-link-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.profile-link-badge:hover {
    transform: scale(1.15);
}

/* Icon uses mask-image so background-color controls the SVG fill color */
.profile-link-icon {
    display: block;
    width: 18px;
    height: 18px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Badge background colors + icon masks */
.profile-link-bandcamp { background-color: #1ea0c3; --icon-color: #fff; }
.profile-link-bandcamp .profile-link-icon {
    background-color: var(--icon-color);
    -webkit-mask-image: url('icons/bandcamp.svg');
    mask-image: url('icons/bandcamp.svg');
}

.profile-link-discogs { background-color: #333; --icon-color: #fff; }
.profile-link-discogs .profile-link-icon {
    background-color: var(--icon-color);
    -webkit-mask-image: url('icons/discogs.svg');
    mask-image: url('icons/discogs.svg');
}

.profile-link-instagram { background-color: #e4405f; --icon-color: #fff; }
.profile-link-instagram .profile-link-icon {
    background-color: var(--icon-color);
    -webkit-mask-image: url('icons/instagram.svg');
    mask-image: url('icons/instagram.svg');
}

.profile-link-mixcloud { background-color: #5bffff; --icon-color: #333; }
.profile-link-mixcloud .profile-link-icon {
    background-color: var(--icon-color);
    -webkit-mask-image: url('icons/mixcloud.svg');
    mask-image: url('icons/mixcloud.svg');
}

.profile-link-reddit { background-color: #ff4500; --icon-color: #fff; }
.profile-link-reddit .profile-link-icon {
    background-color: var(--icon-color);
    -webkit-mask-image: url('icons/reddit.svg');
    mask-image: url('icons/reddit.svg');
}

.profile-link-soundcloud { background-color: #ff5500; --icon-color: #fff; }
.profile-link-soundcloud .profile-link-icon {
    background-color: var(--icon-color);
    -webkit-mask-image: url('icons/soundcloud.svg');
    mask-image: url('icons/soundcloud.svg');
}

.profile-link-spotify { background-color: #1db954; --icon-color: #fff; }
.profile-link-spotify .profile-link-icon {
    background-color: var(--icon-color);
    -webkit-mask-image: url('icons/spotify.svg');
    mask-image: url('icons/spotify.svg');
}

.profile-link-tiktok { background-color: #010101; --icon-color: #fff; }
.profile-link-tiktok .profile-link-icon {
    background-color: var(--icon-color);
    -webkit-mask-image: url('icons/tiktok.svg');
    mask-image: url('icons/tiktok.svg');
}

/* Website (globe) — hand-crafted SVG, not in SimpleIcons */
.profile-link-website { background-color: var(--muted, #6b7280); --icon-color: #fff; }
.profile-link-website .profile-link-icon {
    background-color: var(--icon-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23fff'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='10' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M2 12h20' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23fff'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='10' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M2 12h20' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
}

.profile-link-x { background-color: #000; --icon-color: #fff; }
.profile-link-x .profile-link-icon {
    background-color: var(--icon-color);
    -webkit-mask-image: url('icons/x.svg');
    mask-image: url('icons/x.svg');
}

.profile-link-youtube { background-color: #ff0000; --icon-color: #fff; }
.profile-link-youtube .profile-link-icon {
    background-color: var(--icon-color);
    -webkit-mask-image: url('icons/youtube.svg');
    mask-image: url('icons/youtube.svg');
}

.profile-link-other { background-color: var(--muted, #6b7280); --icon-color: #fff; }
.profile-link-other .profile-link-icon {
    background-color: var(--icon-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}