/*
 * default.css — SV Portal default theme
 *
 * This file contains ALL styles for the portal: design tokens, reset, shared
 * chrome (navbar, drawer, modals), and every page-specific style.
 *
 * Theme images are resolved relative to this file (../default/ is this folder).
 * To create a new theme, create /themes/<name>/<name>.css and @import this file,
 * then override only what you need. Place theme images in the same folder.
 *
 * Generated from helpers.php + profile.php + account.php + messages.php
 * + friends.php + change_password.php + login.php
 */


/* ═══════════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
═══════════════════════════════════════════════════════════════════════════════ */

:root {
    --clr-bg:          #faf8fc;
    --clr-surface:     #ffffff;
    --clr-surface-2:   #f4f0f9;
    --clr-border:      #e8e0f2;
    --clr-border-light:#f0eaf8;

    --clr-lilac-soft:  #e8dff5;
    --clr-lilac-mid:   #c4aee0;
    --clr-lilac-deep:  #8b68c4;
    --clr-lilac-text:  #5c3d8f;

    --clr-rose-soft:   #fde8ec;
    --clr-rose-mid:    #f4a3b5;
    --clr-rose-accent: #e8698a;

    --clr-text-primary:   #2d2438;
    --clr-text-secondary: #7a6a8e;
    --clr-text-muted:     #a99bbf;

    --clr-online:  #52b788;
    --clr-away:    #d4903a;
    --clr-offline: #a99bbf;

    /* Login footer bar (grid identity + stats) — themeable "glass" panel.
       Defaults to the original dark-glass look; light themes (babypink,
       babyblue) override these to a lighter glassy panel to match. */
    --clr-footer-bg:          rgba(22, 14, 45, 0.82);
    --clr-footer-border:      rgba(196, 174, 224, 0.18);
    --clr-footer-cell-bg:     rgba(30, 18, 58, 0.6);
    --clr-footer-gap:         rgba(196, 174, 224, 0.1);
    --clr-footer-text:        rgba(220, 210, 255, 0.85);
    --clr-footer-text-strong: #e8e0f8;
    --clr-footer-text-muted:  rgba(220, 210, 255, 0.5);
    --clr-footer-sep:         rgba(196, 174, 224, 0.4);
    --clr-footer-online:      #7ef08a;
    --clr-footer-online-dot:  #6ee87a;
    --clr-footer-online-glow: rgba(110, 232, 122, 0.5);
    --clr-footer-uri:         var(--clr-lilac-mid);

    /* Map tile frame colour — matches the OpenSim map tile service's own
       water/background colour, so the small padding frame around region
       map tiles (see regions.php .region-tile-wrap) blends in naturally
       rather than standing out as a coloured border. */
    --clr-map-bg:  #1d476f;

    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   18px;
    --radius-xl:   24px;
    --radius-pill: 999px;

    --shadow-card: 0 2px 12px rgba(100, 70, 160, 0.08), 0 1px 3px rgba(100, 70, 160, 0.05);
    --shadow-nav:  0 1px 0 var(--clr-border), 0 2px 16px rgba(100, 70, 160, 0.06);

    --font-display: 'DM Serif Display', 'Playfair Display', Georgia, serif;
    --font-body:    'Inter', system-ui, sans-serif;

    --nav-h: 58px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   2. RESET
═══════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
    background-color: var(--clr-bg);
    color: var(--clr-text-primary);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    min-height: 100vh;
}

/* Darkening overlay so background image doesn't overwhelm content */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(20, 10, 35, 0.45);
    pointer-events: none;
    z-index: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   3. UTILITIES
═══════════════════════════════════════════════════════════════════════════════ */

/* JS-toggled visibility — add/remove this class instead of style.display.
   !important ensures it beats any component display rule when present. */
.hidden { display: none !important; }

/* Inline validation error beneath a form field (client-side only).
   Starts hidden; JS removes .hidden to reveal, adds it back to hide. */
.field-error-hint {
    font-size: 0.78rem;
    color: #a3243d;
    margin-top: 10px;
}

/* Inline heart icon — partner display, profile picks, etc. */
.icon-heart {
    color: var(--clr-rose-accent);
    vertical-align: -1px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   4. BACKGROUND IMAGE LAYER
═══════════════════════════════════════════════════════════════════════════════ */

.bg-image {
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.3s;
}
body.no-bg .bg-image { display: none; }


/* ═══════════════════════════════════════════════════════════════════════════════
   5. TOP NAVIGATION BAR
═══════════════════════════════════════════════════════════════════════════════ */

.topnav {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--nav-h);
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-nav);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    width: 100%;
}

/* Hamburger button */
.nav-hamburger {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    color: var(--clr-lilac-deep);
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: color 0.2s;
}
.nav-hamburger:hover { color: var(--clr-rose-accent); }
.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}

/* Centred logo */
.nav-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    text-decoration: none;
}
.nav-title img {
    height: var(--nav-h);
    max-width: 360px;
    width: auto;
    display: block;
    user-select: none;
}

/* Right cluster */
.nav-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* Status badge */
.status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--clr-text-secondary);
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-pill);
    padding: 4px 12px 4px 8px;
}
.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-badge.status-online  .status-dot { background: var(--clr-online);  box-shadow: 0 0 0 2px rgba(82,183,136,0.25); }
.status-badge.status-away    .status-dot { background: var(--clr-away);    box-shadow: 0 0 0 2px rgba(212,144,58,0.25); }
.status-badge.status-offline .status-dot { background: var(--clr-offline); }

/* Custom multiline tooltip */
.status-badge-wrap {
    position: relative;
    display: inline-flex;
}
.status-badge-wrap::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: rgba(30, 18, 50, 0.93);
    color: #f0eaf8;
    font-size: 0.75rem;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 11px;
    border-radius: var(--radius-sm);
    white-space: normal;
    word-wrap: break-word;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.status-badge-wrap:hover::after,
.status-badge-wrap:focus-within::after {
    opacity: 1;
    transform: translateY(0);
}
/* Flipped upward via JS (render_shared_js) when there's no room below —
   e.g. a row near the bottom of an overflow:hidden .account-panel. */
.status-badge-wrap.tooltip-up::after {
    top: auto;
    bottom: calc(100% + 8px);
    transform: translateY(4px);
}
.status-badge-wrap.tooltip-up:hover::after,
.status-badge-wrap.tooltip-up:focus-within::after {
    transform: translateY(0);
}

.nav-username {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--clr-text-primary);
    white-space: nowrap;
}

/* Flex spacer between logo and nav-right */
.nav-spacer { flex: 1; }

/* Info icon inside status badge tooltip */
.status-info-icon { opacity: 0.5; flex-shrink: 0; margin-left: 1px; }

.btn-logout {
    font-size: 0.8rem;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--clr-text-secondary);
    background: none;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-pill);
    padding: 5px 16px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-logout:hover {
    border-color: var(--clr-rose-accent);
    color: var(--clr-rose-accent);
    background: var(--clr-rose-soft);
}

/* ── Notifications bell & badge ────────────────────────────────────── */
.nav-notif-wrap {
    position: relative;
}
.nav-notif-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 7px;
    color: var(--clr-lilac-deep);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}
.nav-notif-btn:hover {
    color: var(--clr-rose-accent);
    background: var(--clr-lilac-soft);
}
.nav-notif-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    background: var(--clr-rose-accent, #e87070);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: var(--font-body);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    pointer-events: none;
    line-height: 1;
}

/* ── Notification drop-down panel ──────────────────────────────────── */
.notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 310px;
    background: var(--clr-surface-glass, rgba(255,255,255,0.88));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(80,40,120,0.18);
    z-index: 250;
    overflow: hidden;
    transition: opacity 0.15s, transform 0.15s;
}
.notif-panel[aria-hidden="true"] {
    display: none;
}
.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--clr-border-light);
}
.notif-panel-title {
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--clr-text-primary);
    letter-spacing: 0.01em;
}
.notif-panel-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--clr-text-muted);
    padding: 3px;
    border-radius: var(--radius-sm);
    display: flex;
    transition: color 0.15s;
}
.notif-panel-close:hover { color: var(--clr-text-primary); }
.notif-panel-body {
    max-height: 360px;
    overflow-y: auto;
    padding: 8px 0;
}
.notif-loading,
.notif-empty {
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    text-align: center;
    padding: 20px 16px;
    font-family: var(--font-body);
}
.notif-item {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--clr-border-light);
    transition: background 0.15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--clr-lilac-soft, rgba(180,150,220,0.08)); }
.notif-item-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.notif-icon-heart {
    background: var(--clr-rose-soft, rgba(240,150,150,0.15));
    color: var(--clr-rose-accent, #e87070);
}
.notif-icon-system {
    background: var(--clr-lilac-soft, rgba(180,150,220,0.15));
    color: var(--clr-lilac-deep);
}
.notif-item-body {
    flex: 1;
    min-width: 0;
}
.notif-item-msg {
    font-size: 0.8rem;
    font-family: var(--font-body);
    color: var(--clr-text-primary);
    line-height: 1.4;
    margin: 0 0 3px;
}
.notif-item-time {
    font-size: 0.72rem;
    color: var(--clr-text-muted);
    font-family: var(--font-body);
}
.notif-item-actions {
    display: flex;
    gap: 6px;
    margin-top: 7px;
    flex-wrap: wrap;
}
.notif-btn-accept {
    font-size: 0.74rem;
    font-family: var(--font-body);
    font-weight: 600;
    background: var(--clr-lilac-deep);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.notif-btn-accept:hover { background: var(--clr-lilac-mid); }
.notif-btn-decline,
.notif-btn-dismiss {
    font-size: 0.74rem;
    font-family: var(--font-body);
    font-weight: 500;
    background: none;
    color: var(--clr-text-secondary);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.notif-btn-decline:hover,
.notif-btn-dismiss:hover {
    border-color: var(--clr-rose-accent);
    color: var(--clr-rose-accent);
}
.notif-item-processing,
.notif-item-error {
    font-size: 0.74rem;
    font-family: var(--font-body);
    color: var(--clr-text-muted);
    font-style: italic;
}
.notif-item-error { color: var(--clr-rose-accent); }
.notif-item-done {
    font-size: 0.8rem;
    font-family: var(--font-body);
    color: var(--clr-text-secondary);
    padding: 8px 0 4px;
    text-align: center;
    width: 100%;
}

/* ── Offer Partnership button (friend profile modal) ───────────────── */
.btn-offer-partner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--clr-rose-accent, #e87070);
    background: var(--clr-rose-soft, rgba(240,150,150,0.12));
    border: 1px solid color-mix(in srgb, var(--clr-rose-accent) 30%, transparent);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-top: 10px;
}
.btn-offer-partner:hover {
    background: var(--clr-rose-soft);
    border-color: var(--clr-rose-accent);
}
.btn-offer-partner:disabled {
    opacity: 0.55;
    cursor: default;
}
#fpPartnerOfferWrap {
    padding: 0 0 4px;
}
.fp-offer-status {
    font-size: 0.76rem;
    font-family: var(--font-body);
    color: var(--clr-text-muted);
    margin: 5px 0 0;
    min-height: 1.1em;
}
.fp-offer-status.success { color: var(--clr-lilac-deep); }
.fp-offer-status.error   { color: var(--clr-rose-accent); }

/* ── Dissolve partnership button (own profile page) ─────────────────── */
.profile-dissolve-row {
    margin-top: 2px;
}
.btn-dissolve-partner {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--clr-text-muted);
    background: none;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-pill);
    padding: 4px 11px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-dissolve-partner:hover {
    border-color: var(--clr-rose-accent);
    color: var(--clr-rose-accent);
    background: var(--clr-rose-soft);
}

/* ── Dissolve confirmation modal ───────────────────────────────────── */
.dissolve-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(30,10,50,0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 700;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.dissolve-modal-overlay.open {
    display: flex;
}
.dissolve-modal-card {
    background: var(--clr-surface-glass, rgba(255,255,255,0.92));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 48px rgba(80,40,120,0.22);
    padding: 28px 28px 24px;
    max-width: 380px;
    width: 100%;
}
.dissolve-modal-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--clr-text-primary);
    margin: 0 0 12px;
}
.dissolve-modal-body {
    font-size: 0.85rem;
    font-family: var(--font-body);
    color: var(--clr-text-secondary);
    line-height: 1.55;
    margin: 0 0 16px;
}
.dissolve-modal-status {
    font-size: 0.8rem;
    font-family: var(--font-body);
    color: var(--clr-text-muted);
    margin: 0 0 14px;
    min-height: 1.1em;
}
.dissolve-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
/* Pill-shaped destructive action — same shape/weight/sizing as
   .btn-primary-pill, but with the rose accent colour to signal a
   destructive/irreversible action (e.g. "Yes, dissolve"). Hover uses
   filter:brightness() rather than a hardcoded colour so it adapts across
   themes. */
.btn-primary-pill-destructive {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: var(--clr-rose-accent, #e87070);
    border: none;
    border-radius: var(--radius-pill);
    padding: 9px 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    align-self: flex-start;
}
.btn-primary-pill-destructive:hover {
    filter: brightness(0.9);
    box-shadow: 0 2px 8px rgba(92, 61, 143, 0.25);
}
.btn-primary-pill-destructive:disabled { opacity: 0.5; cursor: not-allowed; }


/* ═══════════════════════════════════════════════════════════════════════════════
   6. SLIDE-OUT SIDE DRAWER
═══════════════════════════════════════════════════════════════════════════════ */

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 10, 50, 0.25);
    backdrop-filter: blur(2px);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }

.drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    background: var(--clr-surface);
    box-shadow: 4px 0 24px rgba(100, 70, 160, 0.15);
    z-index: 210;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.drawer.open { transform: translateX(0); }

.drawer-header {
    height: auto;
    display: flex;
    align-items: center;
    padding: 0;
    border-bottom: 1px solid var(--clr-border);
    overflow: hidden;
}
.drawer-header img {
    width: 100%;
    height: auto;
    display: block;
}

.drawer-nav {
    list-style: none;
    padding: 12px 0;
    flex: 1;
    /* .drawer is a fixed-height flex column, so without these the menu simply
       spills out of the bottom of the drawer on short screens. min-height: 0
       lets this flex child shrink below its content height; overflow-y: auto
       then makes it scroll. overscroll-behavior stops a scroll at the end of
       the menu from chaining through to the page behind the drawer. */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.drawer-nav li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--clr-text-secondary);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    position: relative;
}
.drawer-nav li a:hover {
    background: var(--clr-lilac-soft);
    color: var(--clr-lilac-text);
}
.drawer-nav li a.active {
    color: var(--clr-lilac-text);
    font-weight: 600;
    background: var(--clr-surface-2);
}
.drawer-nav li a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    background: var(--clr-lilac-deep);
    border-radius: 0 2px 2px 0;
}

.nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; }

.drawer-stub-badge {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--clr-lilac-soft);
    color: var(--clr-lilac-deep);
    border-radius: var(--radius-pill);
    padding: 2px 7px;
}

/* ── Drawer collapsible submenu (e.g. Administration) ───────────────────── */
.drawer-submenu-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--clr-text-primary);
    cursor: pointer;
    text-align: left;
}
.drawer-submenu-toggle:hover { background: var(--clr-surface-2); }
.drawer-submenu-toggle.active {
    color: var(--clr-lilac-text);
    background: var(--clr-surface-2);
    font-weight: 500;
}
.drawer-submenu-label { flex: 1; }
.drawer-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.drawer-has-submenu.open .drawer-chevron { transform: rotate(90deg); }
.drawer-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--clr-border-light);
    margin-left: 32px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}
.drawer-has-submenu.open .drawer-submenu {
    max-height: 400px;
    margin: 2px 0 4px;
    margin-left: 32px;
}
.drawer-submenu li a {
    display: block;
    padding: 8px 12px;
    font-size: 0.88rem;
    color: var(--clr-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
}
.drawer-submenu li a:hover {
    color: var(--clr-text-primary);
    background: var(--clr-surface-2);
}
.drawer-submenu li a.active {
    color: var(--clr-lilac-text);
    font-weight: 500;
    background: var(--clr-surface-2);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   7. THEME & DISPLAY MODAL
═══════════════════════════════════════════════════════════════════════════════ */

.theme-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 10, 40, 0.55);
    backdrop-filter: blur(4px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.theme-modal-overlay.open {
    opacity: 1;
    pointer-events: all;
}
.theme-modal {
    background: var(--clr-surface);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(20, 10, 40, 0.35);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-modal-overlay.open .theme-modal {
    transform: translateY(0) scale(1);
}
.theme-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--clr-border-light);
    background: linear-gradient(135deg, var(--clr-surface) 0%, var(--clr-surface-2) 100%);
}
.theme-modal-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--clr-text-primary);
}
.theme-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.theme-section-label {
    font-size: 0.63rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-text-muted);
    margin-bottom: 8px;
}
.theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-md);
    gap: 16px;
}
.theme-row-label { display: flex; flex-direction: column; gap: 2px; }
.theme-row-title {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--clr-text-primary);
}
.theme-row-desc {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
}

/* Toggle switch */
.toggle-wrap {
    flex-shrink: 0;
    position: relative;
    width: 44px;
    height: 24px;
}
.toggle-wrap input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.toggle-track {
    position: absolute;
    inset: 0;
    background: var(--clr-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.2s;
}
.toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-wrap input:checked + .toggle-track { background: var(--clr-lilac-deep); }
.toggle-wrap input:checked + .toggle-track::after { transform: translateX(20px); }
.toggle-wrap input:focus-visible + .toggle-track {
    outline: 2px solid var(--clr-lilac-deep);
    outline-offset: 2px;
}

/* Theme picker grid */
.theme-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}
.theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    font-family: var(--font-body);
}
.theme-swatch-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    border: 2px solid var(--clr-border);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
}
.theme-swatch:hover .theme-swatch-img {
    border-color: var(--clr-lilac-mid);
    box-shadow: 0 2px 8px rgba(100, 70, 160, 0.15);
}
.theme-swatch.active .theme-swatch-img {
    border-color: var(--clr-lilac-deep);
    box-shadow: 0 0 0 3px rgba(139, 104, 196, 0.25);
}
.theme-swatch-name {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--clr-text-secondary);
    text-align: center;
    text-transform: capitalize;
}
.theme-swatch.active .theme-swatch-name {
    color: var(--clr-lilac-text);
    font-weight: 600;
}
/* Active tick overlay */
.theme-swatch.active .theme-swatch-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.12);
    z-index: 1;
}
.theme-swatch.active .theme-swatch-img::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    z-index: 2;
    line-height: 1;
}

.theme-modal-footer {
    padding: 12px 20px 16px;
    font-size: 0.73rem;
    color: var(--clr-text-muted);
    text-align: center;
    border-top: 1px solid var(--clr-border-light);
}
.btn-icon-close {
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-pill);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    color: var(--clr-text-secondary);
    transition: background 0.12s, color 0.12s;
}
.btn-icon-close:hover {
    background: var(--clr-lilac-soft);
    color: var(--clr-lilac-text);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   8. SHARED PAGE CHROME  (page-wrap, panel headers, common components)
═══════════════════════════════════════════════════════════════════════════════ */

/* Generic page wrapper — pages may override max-width */
.page-wrap {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

/* Wider variant for content-dense admin pages (e.g. Logs) — 80% of
   viewport on large screens, but never narrower than the standard
   .page-wrap max-width (so it doesn't shrink things on smaller
   desktop/laptop viewports below ~1375px). */
.page-wrap-wide {
    max-width: 80vw;
}
@media (max-width: 1374px) {
    .page-wrap-wide {
        max-width: 1100px;
    }
}

/* Shared panel heading + subhead  (account, profile, change_password) */
.panel-heading {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--clr-text-primary);
    line-height: 1;
}
.panel-subhead {
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    letter-spacing: 0.01em;
}

/* Shared form elements (account.php + change_password.php) */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.form-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--clr-text-muted);
}
.form-input {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--clr-text-primary);
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 9px 13px;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.form-input:focus {
    border-color: var(--clr-lilac-mid);
    box-shadow: 0 0 0 3px rgba(139, 104, 196, 0.12);
}
.form-input:disabled { opacity: 0.55; cursor: not-allowed; }

/* Outline/ghost variant — same shape as .btn-primary but transparent
   background with a border; used where a secondary action sits alongside
   a primary one (e.g. "Restart Status" next to "Estate Tools"). */
.btn-outline {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--clr-lilac-deep);
    background: transparent;
    border: 1.5px solid var(--clr-lilac-deep);
    border-radius: var(--radius-md);
    padding: 8px 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    align-self: flex-start;
}
.btn-outline:hover {
    background: var(--clr-lilac-deep);
    color: #fff;
    box-shadow: 0 2px 8px rgba(92, 61, 143, 0.2);
}
.btn-outline:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    background: var(--clr-lilac-deep);
    border: none;
    border-radius: var(--radius-md);
    padding: 9px 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    align-self: flex-start;
}
.btn-primary:hover {
    background: var(--clr-lilac-text);
    box-shadow: 0 2px 8px rgba(92, 61, 143, 0.25);
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* .btn-primary used on an <a> (e.g. "Back to sign in", "Register a new
   account") — anchors need these to render and behave like a button. */
a.btn-primary {
    text-decoration: none;
    display: inline-block;
}

/* Pill-shaped primary action — same colours/hover as .btn-primary, used
   where a rounder, slightly bolder button suits the context (e.g. the
   "Sign out" confirm button in the logout modal). */
.btn-primary-pill {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: var(--clr-lilac-deep);
    border: none;
    border-radius: var(--radius-pill);
    padding: 9px 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    align-self: flex-start;
}
.btn-primary-pill:hover {
    background: var(--clr-lilac-text);
    box-shadow: 0 2px 8px rgba(92, 61, 143, 0.25);
}
.btn-primary-pill:disabled { opacity: 0.5; cursor: not-allowed; }

/* Shared alert/feedback messages */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.84rem;
    border-radius: var(--radius-md);
    padding: 11px 14px;
    margin-bottom: 14px;
    line-height: 1.5;
}
.alert-success { background: #e6f5ee; color: #2e7d52; }
.alert-error   { background: var(--clr-rose-soft); color: #a3243d; }
.alert-info    { background: #fef3e2; color: #9a6200; }
.alert svg     { flex-shrink: 0; margin-top: 1px; }

/* Inline linkified URLs */
.inline-link {
    color: var(--clr-lilac-deep);
    text-decoration: underline;
    text-decoration-color: var(--clr-lilac-mid);
    text-underline-offset: 2px;
    word-break: break-all;
}
.inline-link:hover {
    color: var(--clr-lilac-text);
    text-decoration-color: var(--clr-lilac-deep);
}

/* Shared section label (small uppercase heading) */
.section-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-text-muted);
    margin-bottom: 8px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   9. PROFILE PAGE
═══════════════════════════════════════════════════════════════════════════════ */

.profile-panel {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: grid;
    grid-template-columns: 380px 1fr;
    grid-template-rows: auto 1fr;
    margin-top: 24px;
}

.profile-panel-header {
    grid-column: 1 / -1;
    padding: 20px 28px 18px;
    border-bottom: 1px solid var(--clr-border-light);
    background: linear-gradient(135deg, var(--clr-surface) 0%, var(--clr-surface-2) 100%);
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.profile-left {
    border-right: 1px solid var(--clr-border-light);
    display: flex;
    flex-direction: column;
    background: linear-gradient(175deg, var(--clr-surface) 0%, var(--clr-surface-2) 100%);
}
.profile-avatar-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--clr-lilac-soft);
    overflow: hidden;
}
.profile-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-avatar-wrap::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(transparent, rgba(255,255,255,0.6));
    pointer-events: none;
}
.profile-identity { padding: 16px 20px 4px; }
.profile-fullname {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--clr-text-primary);
    line-height: 1.3;
}
.profile-meta {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.profile-meta-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: baseline;
    gap: 8px;
    font-size: 0.75rem;
    min-width: 0;
}
.profile-meta-label {
    color: var(--clr-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.profile-meta-value {
    color: var(--clr-text-secondary);
    font-family: 'Courier New', monospace;
    font-size: 0.63rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    min-width: 0;
}
.profile-meta-value.name-value {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--clr-text-primary);
}
.profile-divider {
    height: 1px;
    background: var(--clr-border-light);
    margin: 14px 20px;
}
.profile-about-section { padding: 0 20px 20px; flex: 1; }
.profile-about-text {
    font-size: 0.855rem;
    line-height: 1.65;
    color: var(--clr-text-secondary);
}
.profile-about-text em { color: var(--clr-text-muted); font-style: italic; }
.profile-member-since {
    padding: 12px 20px;
    font-size: 0.72rem;
    color: var(--clr-text-muted);
    border-top: 1px solid var(--clr-border-light);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Profile privacy footer — full-width strip below both columns */
.profile-privacy-footer {
    grid-column: 1 / -1;
    border-top: 1px solid var(--clr-border-light);
    background: linear-gradient(135deg, var(--clr-surface) 0%, var(--clr-surface-2) 100%);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.profile-privacy-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.profile-privacy-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--clr-text-primary);
}
.profile-privacy-desc {
    font-size: 0.78rem;
    color: var(--clr-text-muted);
    line-height: 1.55;
}
.profile-privacy-toggle {
    flex-shrink: 0;
}

/* Profile right column — picks */
.profile-right {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--radius-xl) 0;
}
.picks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}
.picks-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--clr-text-primary);
}
.picks-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.picks-count {
    font-size: 0.78rem;
    color: var(--clr-text-muted);
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
}
.picks-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--clr-text-muted);
    user-select: none;
    white-space: nowrap;
}
.picks-toggle input[type="checkbox"] {
    width: 14px; height: 14px;
    accent-color: var(--clr-lilac-deep);
    cursor: pointer; flex-shrink: 0;
}
.picks-toggle:hover { color: var(--clr-text-secondary); }
.pick-card[data-blank="1"] { display: none; }
.pick-card[data-blank="1"].show-blank { display: grid; opacity: 0.5; }
#picks-visible-count { transition: opacity 0.15s; }
.picks-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto !important;
    max-height: 600px !important;
    padding-right: 4px;
}
.pick-card {
    display: grid;
    grid-template-columns: 110px 1fr;
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--clr-surface);
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
    min-height: 90px;
    flex-shrink: 0;
    cursor: pointer;
}
.pick-card:hover {
    box-shadow: 0 4px 18px rgba(100, 70, 160, 0.12);
    border-color: var(--clr-lilac-mid);
    transform: translateY(-1px);
}
.pick-image {
    position: relative;
    overflow: hidden;
    background: var(--clr-lilac-soft);
    min-height: 90px;
}
.pick-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick-body {
    padding: 7px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.pick-name { font-size: 0.9rem; font-weight: 600; color: var(--clr-text-primary); line-height: 1.3; }
.pick-location {
    font-size: 0.72rem;
    color: var(--clr-lilac-deep);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 2px;
}
/* ── Pick location pills: Teleport + Copy HOP (always shown together) ──────
   Rendered by render_pick_location_pill() (helpers.php) inline in
   .pick-location, and rebuilt client-side in .pick-modal-location by
   openPickModal()/openPpPickModal()/openFpPickModal(). Both pills are built
   from the same hop:// address — Teleport is a plain href (clickable only
   if the OS has a hop:// handler registered, unconfirmed as of 2026-08-28),
   Copy HOP places it on the clipboard (always works). Outlined vs. filled
   styling distinguishes the two actions now that they sit side by side.
   Same visual family as .event-card-teleport, scaled down to fit the
   compact pick-card row; .pick-modal-location context bumps sizing for the
   larger modal. Spacing between pills comes from the parent flex
   container's `gap` (see .pick-location / .pick-modal-location), not
   margin, since two pills now sit adjacent. */
.pick-teleport-pill,
.pick-hop-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--clr-lilac-deep);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.pick-teleport-pill {
    color: var(--clr-lilac-deep);
    background: transparent;
}
.pick-teleport-pill:hover {
    background: var(--clr-lilac-deep);
    color: #fff;
}
.pick-hop-pill {
    color: #fff;
    background: var(--clr-lilac-deep);
}
.pick-hop-pill:hover {
    background: var(--clr-lilac-mid);
    border-color: var(--clr-lilac-mid);
}
.pick-hop-pill.copy-feedback {
    background: var(--clr-green, #6abf69);
    border-color: var(--clr-green, #6abf69);
}
.pick-modal-location .pick-teleport-pill,
.pick-modal-location .pick-hop-pill {
    font-size: 0.74rem;
    padding: 4px 11px;
}
.pick-desc {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    line-height: 1.55;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.picks-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--clr-text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 40px 0;
}

/* Pick detail modal */
.pick-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(20, 10, 40, 0.7);
    backdrop-filter: blur(4px);
    z-index: 500;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.pick-modal-overlay.open { opacity: 1; pointer-events: all; }

/* The friend-profile pick modal (#fpPickModal) is opened on top of the
   already-open friend-profile overlay (.fp-overlay, z-index: 900) — it
   needs a higher z-index than the base .pick-modal-overlay (500) or it
   renders invisibly underneath it. profile.php's own pick modal has no
   competing overlay beneath it, so it keeps the base z-index. */
#fpPickModal { z-index: 950; }

.pick-modal {
    background: var(--clr-surface);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(20, 10, 40, 0.4);
    width: 100%; max-width: 560px; max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateY(12px) scale(0.98); transition: transform 0.2s;
}
.pick-modal-overlay.open .pick-modal { transform: translateY(0) scale(1); }
.pick-modal-img-wrap {
    width: 100%; background: #1a1020;
    overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    max-height: min(380px, 40vh);
}
.pick-modal-img-wrap img { width: 100%; height: auto; max-height: min(380px, 40vh); object-fit: contain; display: block; }
.pick-modal-body { padding: 20px 24px 4px; overflow-y: auto; flex: 1; }
.pick-modal-name {
    font-family: var(--font-display); font-size: 1.2rem; font-weight: 400;
    color: var(--clr-text-primary); margin-bottom: 6px;
}
.pick-modal-location {
    font-size: 0.78rem; color: var(--clr-lilac-deep); font-weight: 500;
    display: flex; align-items: center; gap: 4px; margin-bottom: 12px;
}
.pick-modal-desc { font-size: 0.875rem; color: var(--clr-text-secondary); line-height: 1.65; white-space: pre-wrap; }
.pick-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--clr-border-light);
    display: flex; justify-content: flex-end; flex-shrink: 0;
}


/* Public profile link row */
.profile-public-link {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.profile-public-url {
    font-size: 0.78rem;
    word-break: break-all;
}

/* Copy link button */
.btn-copy-link {
    font-size: 0.75rem;
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--clr-lilac-text);
    background: var(--clr-lilac-soft);
    border: 1px solid var(--clr-lilac-mid);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.btn-copy-link:hover { background: var(--clr-lilac-mid); }
.btn-copy-link.copy-feedback,
.btn-copy-link.copy-feedback:hover {
    background: var(--clr-lilac-deep);
    color: #fff;
    border-color: var(--clr-lilac-deep);
}

/* Copy icon inside btn-copy-link */
.icon-copy { vertical-align: -1px; margin-right: 4px; }

/* Compact alert variant (profile public link toggle feedback) */
.alert-compact {
    margin-top: 10px;
    font-size: 0.82rem;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.alert-compact .alert-icon { flex-shrink: 0; }

/* Unnamed pick placeholder */
.text-unnamed {
    color: var(--clr-text-muted);
    font-style: italic;
    font-size: 0.8rem;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   10. ACCOUNT PAGE
═══════════════════════════════════════════════════════════════════════════════ */

.account-panel {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-top: 24px;
}
.account-panel-header {
    padding: 20px 28px 18px;
    border-bottom: 1px solid var(--clr-border-light);
    background: linear-gradient(135deg, var(--clr-surface) 0%, var(--clr-surface-2) 100%);
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.account-section {
    padding: 24px 28px;
    border-bottom: 1px solid var(--clr-border-light);
}
.account-section:last-child { border-bottom: none; }
.section-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--clr-text-muted);
    margin-bottom: 16px;
}
.info-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    row-gap: 12px;
    column-gap: 16px;
    align-items: baseline;
}
.info-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--clr-text-muted);
}
.info-value {
    font-size: 0.875rem;
    color: var(--clr-text-secondary);
}
.info-value.mono {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    word-break: break-all;
}
.level-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.75rem; font-weight: 600;
    border-radius: var(--radius-pill); padding: 3px 10px; letter-spacing: 0.02em;
}
.level-trusted { background: var(--clr-lilac-soft); color: var(--clr-lilac-text); }
.level-staff   { background: #e8f5e2; color: #2e6b30; }
.level-admin   { background: #fde8ec; color: #a3243d; }
.god-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.75rem; font-weight: 600;
    border-radius: var(--radius-pill); padding: 3px 10px; letter-spacing: 0.02em;
    background: linear-gradient(135deg, #fef6d8 0%, #fdecc8 100%);
    color: #8a5c00; border: 1px solid rgba(180, 120, 0, 0.18);
}
.god-title {
    display: inline-block; font-size: 0.82rem;
    color: var(--clr-text-secondary); font-style: italic; margin-left: 6px;
}
.account-email-desc {
    font-size: 0.84rem;
    color: var(--clr-text-secondary);
    margin-bottom: 14px;
}
.account-notice {
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    background: var(--clr-surface-2);
    border-radius: var(--radius-md);
    padding: 9px 13px;
    margin-bottom: 14px;
    line-height: 1.5;
}
.email-form-wrap { margin-top: 16px; }
.form-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.form-row .form-field { flex: 1; min-width: 200px; }
/* .btn-primary defaults to align-self: flex-start (so it doesn't stretch
   in flex-column layouts like .form-stack), but inside a .form-row it
   should line up with the input at the bottom of the row, matching
   .form-row's align-items: flex-end. */
.form-row .btn-primary { align-self: flex-end; }


/* ═══════════════════════════════════════════════════════════════════════════════
   11. CHANGE PASSWORD PAGE
═══════════════════════════════════════════════════════════════════════════════ */

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Change password page: centre the submit button (rather than the
   default left-aligned .btn-primary) within the .form-stack column. */
#pwForm .btn-primary {
    align-self: center;
}
.requirements-intro {
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    background: var(--clr-surface-2);
    border-radius: var(--radius-md);
    padding: 9px 13px;
    margin-bottom: 16px;
    line-height: 1.5;
}
.pw-rules {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pw-rule {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.78rem; color: var(--clr-text-muted); transition: color 0.15s;
}
.pw-rule .rule-icon {
    width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%;
    border: 1.5px solid var(--clr-border); background: var(--clr-surface-2);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.pw-rule .rule-icon svg { display: none; }
.pw-rule.met { color: #2e7d52; }
.pw-rule.met .rule-icon { background: #2e7d52; border-color: #2e7d52; }
.pw-rule.met .rule-icon svg { display: block; }
.alert-error-list { margin: 6px 0 0 0; padding-left: 18px; font-size: 0.82rem; }
.alert-error-list li + li { margin-top: 3px; }
#confirmMsg { font-size: 0.78rem; color: #a3243d; margin-top: 4px; }


/* ═══════════════════════════════════════════════════════════════════════════════
   12. MESSAGES PAGE
═══════════════════════════════════════════════════════════════════════════════ */

.page-header {
    display: flex; align-items: baseline; gap: 14px;
    padding: 28px 0 20px;
}
.page-title {
    font-family: var(--font-display); font-size: 1.6rem; font-weight: 400;
    color: var(--clr-text-primary);
}
.message-count-badge {
    font-size: 0.75rem; font-weight: 600;
    color: var(--clr-lilac-text); background: var(--clr-lilac-soft);
    border: 1px solid var(--clr-lilac-mid);
    border-radius: var(--radius-pill); padding: 3px 10px; line-height: 1;
}
.message-count-badge.empty {
    color: var(--clr-text-muted); background: var(--clr-surface-2); border-color: var(--clr-border);
}
.info-banner {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--clr-surface-2); border: 1px solid var(--clr-border);
    border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 20px;
    font-size: 0.8rem; color: var(--clr-text-secondary); line-height: 1.5;
}
.info-banner svg { flex-shrink: 0; margin-top: 1px; color: var(--clr-lilac-mid); }
.error-banner {
    background: var(--clr-rose-soft); border: 1px solid var(--clr-rose-mid);
    border-radius: var(--radius-md); padding: 14px 18px;
    color: #8b2a40; font-size: 0.85rem; margin-bottom: 20px;
}
.messages-list {
    display: flex; flex-direction: column; gap: 1px;
    background: var(--clr-border-light); border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card);
}
.msg-card {
    background: var(--clr-surface); padding: 16px 20px;
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
    gap: 2px 16px; cursor: pointer; transition: background 0.12s;
}
.msg-card:hover { background: var(--clr-surface-2); }
.msg-card:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.msg-card:last-child  { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.msg-card:only-child  { border-radius: var(--radius-lg); }
.msg-sender { font-size: 0.88rem; font-weight: 600; color: var(--clr-lilac-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 8px; }
.msg-type-badge {
    font-size: 0.62rem; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-pill);
    letter-spacing: 0.02em; text-transform: uppercase; border: 1px solid transparent; flex-shrink: 0;
}
.msg-type-im  { background: var(--clr-lilac-soft); color: var(--clr-lilac-text); border-color: var(--clr-lilac-mid); }
.msg-type-inv { background: #e6f5ee; color: #1e7a4a; border-color: #a3d9bb; }
.msg-type-grp { background: #fff8e6; color: #7a5c00; border-color: #f0d580; }
.msg-type-fr  { background: #fde8f0; color: #a4276b; border-color: #f3b8d3; }
.msg-type-obj,
.msg-type-sys { background: var(--clr-surface-2); color: var(--clr-text-muted); border-color: var(--clr-border); }
.msg-time   { font-size: 0.75rem; color: var(--clr-text-muted); white-space: nowrap; text-align: right; grid-row: 1; }
.msg-preview { font-size: 0.82rem; color: var(--clr-text-secondary); grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; }
.empty-state {
    background: var(--clr-surface); border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 60px 20px; text-align: center; color: var(--clr-text-muted);
}
.empty-icon { color: var(--clr-lilac-mid); opacity: 0.6; }
.empty-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; color: var(--clr-text-secondary); }
.empty-sub { font-size: 0.8rem; color: var(--clr-text-muted); }

/* Message detail modal */
.msg-modal-overlay {
    position: fixed; inset: 0; background: rgba(20, 10, 40, 0.65); backdrop-filter: blur(4px);
    z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.msg-modal-overlay.open { opacity: 1; pointer-events: all; }
.msg-modal {
    background: var(--clr-surface); border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(20, 10, 40, 0.35);
    width: 100%; max-width: 520px; max-height: 85vh;
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.msg-modal-overlay.open .msg-modal { transform: translateY(0) scale(1); }
.msg-modal-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; padding: 20px 20px 16px;
    border-bottom: 1px solid var(--clr-border-light);
    background: linear-gradient(135deg, var(--clr-surface) 0%, var(--clr-surface-2) 100%);
    flex-shrink: 0;
}
.msg-modal-from { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg-modal-sender { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; color: var(--clr-text-primary); }
.msg-modal-meta { font-size: 0.75rem; color: var(--clr-text-muted); }

.msg-modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.msg-modal-text { font-size: 0.92rem; color: var(--clr-text-primary); line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.msg-modal-footer {
    padding: 14px 20px; border-top: 1px solid var(--clr-border-light);
    background: var(--clr-surface-2); font-size: 0.75rem; color: var(--clr-text-muted);
    flex-shrink: 0; line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   13. FRIENDS PAGE
═══════════════════════════════════════════════════════════════════════════════ */

.main-card {
    width: 100%; max-width: 900px;
    margin-top: 24px;
    background: var(--clr-surface); border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden;
}
.card-header {
    padding: 24px 28px 20px;
    background: linear-gradient(135deg, var(--clr-surface) 0%, var(--clr-surface-2) 100%);
    border-bottom: 1px solid var(--clr-border-light);
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.card-header-left { display: flex; flex-direction: column; gap: 4px; }
.card-title {
    font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: var(--clr-text-primary);
    display: flex; align-items: center; gap: 10px;
}
.card-title svg { color: var(--clr-lilac-deep); flex-shrink: 0; }
.card-subtitle { font-size: 0.78rem; color: var(--clr-text-muted); }
.friends-count-badge {
    background: var(--clr-lilac-soft); color: var(--clr-lilac-text);
    font-size: 0.75rem; font-weight: 600; padding: 4px 12px;
    border-radius: var(--radius-pill); border: 1px solid var(--clr-lilac-mid);
    white-space: nowrap; align-self: flex-start;
}
.presence-notice {
    margin: 20px 28px 0; padding: 12px 16px;
    background: #fffbec; border: 1px solid #f0d980; border-radius: var(--radius-md);
    display: flex; gap: 10px; align-items: flex-start;
}
.presence-notice svg { flex-shrink: 0; color: #c9960a; margin-top: 1px; }
.presence-notice-text { font-size: 0.78rem; color: #6b5500; line-height: 1.55; }
.presence-notice-text strong { font-weight: 600; }
.filter-bar { padding: 16px 28px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search-wrap { position: relative; flex: 1; min-width: 180px; }
.search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--clr-text-muted); pointer-events: none; }
.search-input {
    width: 100%; padding: 8px 12px 8px 34px;
    font-family: var(--font-body); font-size: 0.84rem; color: var(--clr-text-primary);
    background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: var(--radius-pill);
    outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input:focus { border-color: var(--clr-lilac-mid); box-shadow: 0 0 0 3px rgba(139, 104, 196, 0.12); }
.filter-tabs { display: flex; gap: 6px; }
.filter-tab {
    padding: 7px 14px; font-size: 0.78rem; font-weight: 500;
    border-radius: var(--radius-pill); border: 1px solid var(--clr-border);
    background: var(--clr-surface); color: var(--clr-text-secondary);
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.filter-tab:hover { background: var(--clr-lilac-soft); color: var(--clr-lilac-text); border-color: var(--clr-lilac-mid); }
.filter-tab.active { background: var(--clr-lilac-deep); color: #fff; border-color: var(--clr-lilac-deep); }

/* ── Setup page tabs ──────────────────────────────────────────────────
   Same pill shape as .filter-tab above; .setup-tab-status borrows the
   color language of .restart-status-badge for the per-tab live status. */
.setup-tabs {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 10px 28px;
    border-bottom: 1px solid var(--clr-border);
}
.setup-tab {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; font-size: 0.82rem; font-weight: 500;
    border-radius: var(--radius-pill); border: 1px solid var(--clr-border);
    background: var(--clr-surface); color: var(--clr-text-secondary);
    text-decoration: none; white-space: nowrap; transition: all 0.15s;
}
.setup-tab:hover { background: var(--clr-lilac-soft); color: var(--clr-lilac-text); border-color: var(--clr-lilac-mid); }
.setup-tab.active { background: var(--clr-lilac-deep); color: #fff; border-color: var(--clr-lilac-deep); }

.setup-tab-status {
    font-size: 0.62rem; font-weight: 600; padding: 1px 7px;
    border-radius: var(--radius-pill); letter-spacing: 0.02em; text-transform: uppercase;
}
.setup-tab-status.done            { background: var(--clr-accent-teal, #5bbfb5); color: #fff; }
.setup-tab-status.not-configured  { background: var(--clr-surface-3, #ddd); color: var(--clr-text-muted); }
.setup-tab-status.unreachable     { background: var(--clr-rose-accent, #e87070); color: #fff; }
/* .setup-tab.active .setup-tab-status keeps its own state color rather than
   inheriting the active tab's white-on-lilac — status should stay legible
   and consistent whether or not the tab is currently selected. */

/* ── Read-only settings table (Setup → Database tab, config.php-sourced) ── */
.setup-readonly-table {
    width: 100%; border-collapse: collapse; margin: 14px 0;
    background: var(--clr-surface); border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-md); overflow: hidden;
}
.setup-readonly-table th, .setup-readonly-table td {
    text-align: left; padding: 10px 16px; font-size: 0.85rem;
    border-bottom: 1px solid var(--clr-border-light);
}
.setup-readonly-table tr:last-child th, .setup-readonly-table tr:last-child td { border-bottom: none; }
.setup-readonly-table th { font-weight: 600; color: var(--clr-text-secondary); width: 160px; }
.setup-readonly-table td { color: var(--clr-text-primary); font-family: var(--font-mono, monospace); }
.setup-readonly-table td em { color: var(--clr-text-muted); font-family: var(--font-body); font-style: italic; }

/* ── Pass/fail check list (Setup tabs — Database and later ROBUST/RemoteAdmin) ── */
.setup-check-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.setup-check-item { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--clr-text-primary); }
.setup-check-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    font-size: 0.7rem; font-weight: 700; color: #fff;
}
.setup-check-icon.setup-check-pass { background: var(--clr-accent-teal, #5bbfb5); }
.setup-check-icon.setup-check-fail { background: var(--clr-rose-accent, #e87070); }
.setup-check-icon.setup-check-neutral { background: var(--clr-surface-3, #ddd); color: var(--clr-text-muted); }

/* ── ALLOW_OS_DATABASE_WRITES toggle block (Database tab) ──────────────── */
.setup-toggle-block {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    margin-top: 18px; padding: 16px 18px;
    background: var(--clr-surface-2); border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
}
.setup-toggle-title { margin-bottom: 6px; }
.setup-toggle-desc { margin: 0; max-width: 640px; }
.setup-toggle-status { margin: 8px 2px 0; font-size: 0.8rem; color: var(--clr-text-secondary); }
.setup-toggle-status strong { color: var(--clr-text-primary); }

/* ── Setup callout boxes: "error" (what's wrong) and "action" (what to do) ── */
.setup-callout {
    margin-top: 16px; padding: 14px 18px; border-radius: var(--radius-md);
    font-size: 0.85rem; line-height: 1.55;
}
.setup-callout strong { display: block; margin: 12px 0 4px; }
.setup-callout strong:first-child { margin-top: 0; }
.setup-callout-error  { background: var(--clr-rose-soft, #fdeef1); color: #a3243d; }
.setup-callout-action { background: #e6f5ee; color: #1e5b3d; }
.setup-callout-info   { background: var(--clr-lilac-soft, #f0eaf8); color: var(--clr-lilac-text, #5c4a80); }

/* ── Setup settings form (ROBUST tab and later tabs) ────────────────────── */
.setup-form-row { margin-bottom: 16px; max-width: 480px; }
.setup-form-row label { display: block; font-weight: 600; font-size: 0.82rem; margin-bottom: 4px; color: var(--clr-text-primary); }
.setup-form-row input[type="text"], .setup-form-row input[type="number"] {
    width: 100%; padding: 8px 12px; font-family: var(--font-body); font-size: 0.85rem;
    color: var(--clr-text-primary); background: var(--clr-surface); border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm); outline: none; transition: border-color 0.15s;
}
.setup-form-row input:focus { border-color: var(--clr-lilac-mid); }
.setup-form-hint { margin: 4px 0 0; font-size: 0.76rem; color: var(--clr-text-muted); }
.setup-derived-table { margin-top: 20px; }

/* ── General tab additions: email/select inputs, array-shaped fields ────── */
.setup-form-row input[type="email"], .setup-form-row select {
    width: 100%; padding: 8px 12px; font-family: var(--font-body); font-size: 0.85rem;
    color: var(--clr-text-primary); background: var(--clr-surface); border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm); outline: none; transition: border-color 0.15s;
}
.setup-form-row select:focus { border-color: var(--clr-lilac-mid); }
.setup-array-row { display: flex; gap: 8px; margin-bottom: 8px; }
.setup-array-row input[type="text"] {
    flex: 1; padding: 8px 12px; font-family: var(--font-body); font-size: 0.85rem;
    color: var(--clr-text-primary); background: var(--clr-surface); border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm); outline: none; transition: border-color 0.15s;
}
.setup-array-row input:focus { border-color: var(--clr-lilac-mid); }

/* ── Collapsible "show more information" / "show fields" sections, used
   across every Setup tab (region statuses, security notes, flag detail
   rows, General's field groups, etc.). Box + indent + open-state
   highlight apply universally; the accordion "only one open at a time"
   behaviour stays scoped to #general-groups-accordion's JS (setup.php)
   — every other tab's details still open/close independently, which
   suits their smaller, standalone use. ─────────────────────────────── */
.setup-details {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    transition: background-color 0.15s, border-color 0.15s;
}
.setup-details[open] {
    background: var(--clr-lilac-soft, #f0eaf8);
    border-color: var(--clr-lilac-mid, #a98fd2);
}
.setup-details > *:not(summary) {
    padding-left: 18px;
    border-left: 2px solid var(--clr-border);
    margin-top: 12px;
}
.setup-details .hide-text { display: none; }
.setup-details[open] .show-text { display: none; }
.setup-details[open] .hide-text { display: inline; }
.setup-details summary {
    cursor: pointer; font-size: 0.84rem; font-weight: 600;
    color: var(--clr-lilac-deep); padding: 4px 0; list-style: none;
}
.setup-details summary::-webkit-details-marker { display: none; }
.setup-details summary::before {
    content: '▸'; display: inline-block; margin-right: 6px;
    transition: transform 0.15s;
}
.setup-details[open] summary::before { transform: rotate(90deg); }

/* ── General tab: divider between one collapsible group and the next
   group's title, so it's clear where one setting group ends and the
   next begins at a glance, not just from the heading colour. ───────── */
.setup-group-divider {
    border: none; border-top: 1px solid var(--clr-border);
    margin: 20px 0 4px;
}

.setup-region-results {
    list-style: none; padding: 0; margin: 14px 0 0;
    max-height: 320px; overflow-y: auto;
    border: 1px solid var(--clr-border-light); border-radius: var(--radius-md);
}
.setup-region-results li {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px;
    font-size: 0.82rem; border-bottom: 1px solid var(--clr-border-light);
}
.setup-region-results li:last-child { border-bottom: none; }
.setup-region-results .setup-region-name { font-weight: 600; flex-shrink: 0; }
.setup-region-results .setup-region-port { color: var(--clr-text-muted); font-family: var(--font-mono, monospace); flex-shrink: 0; }
.setup-region-results .setup-region-error { color: var(--clr-text-muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Cron job status blocks ─────────────────────────────────────────────── */
.setup-cron-job {
    margin-top: 16px; padding: 14px 18px;
    background: var(--clr-surface-2); border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
}
.setup-cron-job-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.88rem; margin: 0 0 6px; }
.setup-cron-job-detail { font-size: 0.82rem; color: var(--clr-text-secondary); line-height: 1.5; }
.setup-cron-job-detail code { font-size: 0.9em; }
.setup-cron-job-howto {
    margin-top: 8px; padding: 8px 10px; background: rgba(0,0,0,0.04);
    border-radius: var(--radius-sm); font-size: 0.76rem; font-family: var(--font-mono, monospace);
    overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}
.setup-mt-16 { margin-top: 16px; }

/* ── Feature flag rows (Estates tab, and any future flag-based tab) ────── */
.setup-flag-group-title {
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    color: var(--clr-lilac-deep); letter-spacing: 0.04em;
    margin: 20px 0 8px;
}
.setup-flag-group-title:first-of-type { margin-top: 4px; }
.setup-flag-row {
    padding: 12px 14px; margin-bottom: 8px;
    background: var(--clr-surface); border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-md);
}
.setup-flag-main { display: flex; align-items: center; gap: 12px; }
.setup-flag-label { font-weight: 600; font-size: 0.85rem; flex: 1; }
.setup-flag-badge {
    font-size: 0.68rem; font-weight: 600; padding: 2px 9px;
    border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.02em;
}
.setup-flag-badge-ok   { background: var(--clr-accent-teal, #5bbfb5); color: #fff; }
.setup-flag-badge-warn { background: var(--clr-rose-accent, #e87070); color: #fff; }
.setup-flag-detail { margin-top: 10px; }
.setup-flag-detail summary { font-size: 0.78rem; }
.setup-mt-8  { margin-top: 8px; }
.setup-callout pre {
    background: rgba(0,0,0,0.06); color: inherit; padding: 10px 12px;
    border-radius: var(--radius-sm); font-size: 0.78rem; overflow-x: auto;
    white-space: pre-wrap; word-break: break-word; margin: 4px 0 0;
}

/* ── Setup page-level migration status banner (sits above the tab bar) ── */
.setup-migration-banner { margin: 16px 28px 20px; }
.setup-migration-list { margin: 8px 0 0; padding-left: 20px; }
.setup-migration-list li { margin-top: 4px; }
.friends-list { list-style: none; padding: 16px 28px 28px; display: flex; flex-direction: column; gap: 10px; }
.friend-card {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    background: var(--clr-surface); border: 1px solid var(--clr-border-light); border-radius: var(--radius-lg);
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.12s;
}
.friend-card:hover { box-shadow: 0 6px 24px rgba(100, 70, 160, 0.14); border-color: var(--clr-lilac-mid); transform: translateY(-1px); }
.friend-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--clr-lilac-soft);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    font-family: var(--font-display); font-size: 1.1rem; color: var(--clr-lilac-deep);
    border: 2px solid var(--clr-border); position: relative;
}
.friend-avatar-pip { position: absolute; bottom: 0; right: 0; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--clr-surface); }
.pip-online  { background: var(--clr-online); }
.pip-offline { background: var(--clr-offline); }
.pip-hidden  { background: var(--clr-border); }
.pip-unknown { background: var(--clr-away); }
.friend-info { flex: 1; min-width: 0; }
.friend-name { font-size: 0.92rem; font-weight: 600; color: var(--clr-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-meta { font-size: 0.73rem; color: var(--clr-text-muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hg-badge {
    background: var(--clr-lilac-soft); color: var(--clr-lilac-text); border: 1px solid var(--clr-lilac-mid);
    border-radius: var(--radius-pill); font-size: 0.65rem; font-weight: 600; padding: 1px 7px; letter-spacing: 0.02em; text-transform: uppercase;
}
.friend-status { flex-shrink: 0; font-size: 0.74rem; font-weight: 500; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid transparent; }
.friend-status.s-online  { background: #e6f5ee; color: #1e7a4a; border-color: #a3d9bb; }
.friend-status.s-offline { background: var(--clr-surface-2); color: var(--clr-text-muted); border-color: var(--clr-border); }
.friend-status.s-hidden  { background: var(--clr-surface-2); color: var(--clr-text-muted); border-color: var(--clr-border); font-style: italic; }
.friend-status.s-unknown { background: #fff8e6; color: #7a5c00; border-color: #f0d580; }
.state-empty, .state-error { padding: 48px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.state-empty svg, .state-error svg { opacity: 0.35; }
.state-empty p, .state-error p { font-size: 0.88rem; color: var(--clr-text-muted); line-height: 1.6; }
.state-error p { color: var(--clr-rose-accent); }
.no-results { padding: 24px; text-align: center; font-size: 0.84rem; color: var(--clr-text-muted); }


/* ═══════════════════════════════════════════════════════════════════════════════
   14. SHARED LOGOUT CONFIRM OVERLAY
       (used in messages.php and friends.php)
═══════════════════════════════════════════════════════════════════════════════ */

.logout-overlay {
    position: fixed; inset: 0;
    background: rgba(20, 10, 40, 0.5); backdrop-filter: blur(4px);
    z-index: 600;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.logout-overlay.open { opacity: 1; pointer-events: all; }

/* #confirmOverlay (render_confirm_modal(), helpers.php) is a generic "are you
   sure?" dialog that can be triggered from a button sitting inside another
   already-open .logout-overlay-based modal (e.g. the Edit Account modal in
   admin_users.php, id="editUserOverlay"). Both share the base .logout-overlay
   z-index (600), so without this override, stacking falls back to DOM order
   and whichever modal markup happens to render later in the page wins —
   which put the confirm dialog behind the edit modal instead of above it.
   Bump it above the base layer, same pattern as .dissolve-modal-overlay. */
#confirmOverlay { z-index: 650; }

.logout-card {
    background: var(--clr-surface); border-radius: var(--radius-xl);
    box-shadow: 0 16px 48px rgba(20, 10, 40, 0.3);
    padding: 28px 28px 24px; width: 100%; max-width: 340px; text-align: center;
}
.logout-card h2, .logout-card h3 {
    font-family: var(--font-display); font-size: 1.2rem; font-weight: 400;
    color: var(--clr-text-primary); margin-bottom: 8px;
}
.logout-card p { font-size: 0.83rem; color: var(--clr-text-secondary); margin-bottom: 22px; }
.logout-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-cancel {
    font-family: var(--font-body); font-size: 0.83rem; font-weight: 500;
    padding: 8px 24px; border-radius: var(--radius-pill);
    border: 1px solid var(--clr-border); background: var(--clr-surface-2);
    color: var(--clr-text-secondary); cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-cancel:hover { background: var(--clr-lilac-soft); border-color: var(--clr-lilac-mid); color: var(--clr-lilac-text); }

/* ── Upcoming Events trigger button + modal (login.php / splash.php) ────── */
.events-trigger-btn {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body);
    font-size: 0.83rem;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--clr-border);
    background: var(--clr-surface-2);
    color: var(--clr-text-secondary);
    cursor: pointer;
    margin: 10px auto 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.events-trigger-btn:hover { background: var(--clr-lilac-soft); border-color: var(--clr-lilac-mid); color: var(--clr-lilac-text); }
/* login.php: pull up closer to the subtitle (partial collapse against its
   28px margin-bottom) and give even spacing down to the login form below,
   since .login-card isn't a flex column the way splash's logo block is. */
.login-subtitle + .events-trigger-btn {
    margin: -10px auto 22px;
}
.events-trigger-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--clr-lilac-deep);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
}
.events-modal-card {
    max-width: 640px;
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}
.events-modal-card h2 {
    text-align: center;
    margin-bottom: 16px;
}
.events-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--clr-text-secondary);
    cursor: pointer;
    padding: 4px;
}
.events-modal-close:hover { color: var(--clr-text-primary); }
.events-modal-list {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.event-card {
    display: flex;
    gap: 14px;
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-md);
    padding: 14px;
    background: var(--clr-surface-2);
}
.event-card-image {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex: 0 0 auto;
}
.event-card-body { min-width: 0; }
.event-card-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    color: var(--clr-text-primary);
    margin: 0 0 4px;
}
.event-card-time {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    margin: 0 0 8px;
}
.event-card-desc {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    margin: 0 0 8px;
    line-height: 1.5;
}
.event-card-teleport { display: inline-block; }
@media (max-width: 560px) {
    .event-card { flex-direction: column; }
    .event-card-image { width: 100%; height: 140px; }
}

/* ── Region maturity modal (regions.php) ─────────────────────────────────── */
.maturity-modal-card { max-width: 400px; }
.maturity-modal-warning {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-bottom: 18px;
    text-align: left;
}
.maturity-picker {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 6px;
}
.maturity-option {
    flex: 1;
    font-family: var(--font-body);
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--clr-text-secondary);
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 10px 8px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.maturity-option:hover {
    border-color: var(--clr-lilac-mid);
}
.maturity-option.active {
    background: var(--clr-lilac-deep);
    border-color: var(--clr-lilac-deep);
    color: #fff;
}
.maturity-option:disabled { opacity: 0.5; cursor: not-allowed; }
.maturity-modal-status {
    font-size: 0.78rem;
    color: var(--clr-text-secondary);
    min-height: 1.2em;
    margin: 10px 0 0;
}

/* ── Rolling restart modal (regions.php / all_estates.php — shared via
       render_rolling_restart_modal(), includes/helpers.php) ─────────────── */
.rolling-restart-modal-card { max-width: 460px; }
.rolling-restart-notice {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin: 0 0 16px;
    text-align: left;
    line-height: 1.5;
}
.rolling-restart-mode-picker {
    margin-bottom: 14px;
}
.rolling-restart-region-list {
    text-align: left;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin: 0 0 14px;
    max-height: 160px;
    overflow-y: auto;
}
.rolling-restart-region-list h4 {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clr-text-muted);
    margin: 0 0 6px;
}
.rolling-restart-region-list h4:not(:first-child) {
    margin-top: 12px;
}
.rolling-restart-region-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rolling-restart-region-list li {
    padding: 3px 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.rolling-restart-region-list li.skipped { color: var(--clr-text-muted); }
.rolling-restart-region-list .region-time {
    color: var(--clr-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.rolling-restart-region-list .region-skip-reason {
    color: var(--clr-rose-accent, #e87070);
    font-size: 0.74rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.rolling-restart-status {
    font-size: 0.78rem;
    color: var(--clr-text-secondary);
    min-height: 1.2em;
    margin: 10px 0 0;
    text-align: left;
}

/* ── OAR backups modal (regions.php, all_estates.php) ─────────────────────── */
.oar-backups-modal-card { max-width: 780px; }
.oar-backups-create-section { margin-bottom: 18px; }
.oar-mode-picker { margin: 0 0 12px; }
.oar-backup-time-field { margin: 0 0 12px; }
.oar-create-btn { display: block; margin: 4px auto 6px; }
.oar-active-job {
    font-size: 0.82rem;
    color: var(--clr-text-secondary);
    margin: 0 0 10px;
    padding: 8px 12px;
    background: var(--clr-surface-alt, rgba(255,255,255,0.06));
    border: 1px solid var(--clr-border);
    border-radius: 6px;
}
.oar-backup-create-status {
    font-size: 0.78rem;
    min-height: 1.1em;
    margin: 6px 0 0;
}
.oar-backup-status-ok    { color: var(--clr-green, #6abf69); }
.oar-backup-status-error { color: var(--clr-rose-accent, #e87070); }
.oar-backups-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    text-align: left;
    margin: 0 0 4px;
}
.oar-backups-table th {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clr-text-muted);
    padding: 0 8px 6px 0;
    border-bottom: 1px solid var(--clr-border);
}
.oar-backups-table td {
    padding: 7px 8px 7px 0;
    border-bottom: 1px solid var(--clr-border);
    vertical-align: middle;
}
.oar-backups-table tr:last-child td { border-bottom: none; }
.oar-backups-actions-col { text-align: right; white-space: nowrap; }
.oar-action-btn { font-size: 0.75rem; padding: 3px 10px; }
.oar-status-completed { color: var(--clr-green, #6abf69); font-weight: 600; }
.oar-status-processing { color: var(--clr-lilac-deep); font-weight: 600; }
.oar-status-scheduled  { color: var(--clr-text-secondary); font-weight: 600; }
.oar-status-error      { color: var(--clr-rose-accent, #e87070); font-weight: 600; }
.oar-error-note {
    font-size: 0.72rem;
    color: var(--clr-text-muted);
    font-weight: normal;
}
.oar-status-uploaded   { color: var(--clr-accent-gold, #c9a84c); font-weight: 600; }
.oar-restore-banner {
    margin: 0 0 12px;
    font-style: italic;
}
.oar-restore-pending-msg {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    font-style: italic;
}
.oar-backups-empty,
.oar-backups-loading-msg,
.oar-backups-retention-note {
    font-size: 0.78rem;
    color: var(--clr-text-muted);
    margin: 8px 0 0;
    text-align: center;
}
.oar-upload-section {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--clr-surface-alt, rgba(255,255,255,0.05));
    border: 1px solid var(--clr-border);
    border-radius: 8px;
}
.oar-upload-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.73rem;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 12px;
}
.oar-upload-divider::before,
.oar-upload-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--clr-border);
}
.oar-upload-limit-msg {
    font-size: 0.78rem;
    color: var(--clr-text-muted);
    margin: 0 0 8px;
    text-align: center;
}
.oar-upload-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.oar-upload-file-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 6px 12px;
    background: var(--clr-surface, rgba(255,255,255,0.08));
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: border-color 0.15s;
}
.oar-upload-file-label:hover { border-color: var(--clr-lilac-deep); }
.oar-upload-btn { flex-shrink: 0; }
.oar-upload-progress {
    margin: 10px 0 0;
    height: 6px;
    background: var(--clr-surface-alt, rgba(255,255,255,0.08));
    border-radius: 3px;
    overflow: hidden;
}
.oar-upload-progress-bar {
    height: 100%;
    background: var(--clr-lilac-deep);
    border-radius: 3px;
    transition: width 0.2s ease;
}
.oar-restore-req-warning {
    color: var(--clr-error, #e05252);
    font-weight: 600;
}
.oar-restore-req-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.oar-reject-section { display: block; }
.oar-reject-section .oar-reject-form { display: none; }
.oar-reject-section.open > .btn-primary { display: none; }
.oar-reject-section.open .oar-reject-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
}
.oar-reject-note-input { font-size: 0.8rem; padding: 5px 8px; }
.oar-reject-form-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

/* ── Restart Status modal (regions.php, all_estates.php) ──────────────────── */
.restart-status-modal { max-width: 520px; }
.restart-status-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    text-align: left;
    margin: 0 0 4px;
}
.restart-status-table th {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clr-text-muted);
    padding: 0 8px 7px 0;
    border-bottom: 1px solid var(--clr-border-light);
}
.restart-status-table td {
    padding: 7px 8px 7px 0;
    border-bottom: 1px solid var(--clr-border-light);
    color: var(--clr-text-secondary);
    vertical-align: middle;
}
.restart-status-table tr:last-child td { border-bottom: none; }
.restart-status-table td:first-child { color: var(--clr-text-primary); font-weight: 500; }
.restart-status-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}
.restart-status-badge.completed  { background: var(--clr-accent-teal, #5bbfb5); color: #fff; }
.restart-status-badge.pending    { background: var(--clr-accent-gold, #c9a84c); color: #fff; }
.restart-status-badge.scheduled  { background: var(--clr-lilac-deep, #9b8ec4); color: #fff; }
.restart-status-badge.stuck      { background: var(--clr-rose-accent, #e87070); color: #fff; }
.restart-status-badge.never      { background: var(--clr-surface-3, #ddd); color: var(--clr-text-muted); }
.restart-status-error {
    display: block;
    font-size: 0.72rem;
    color: var(--clr-rose-accent, #e87070);
    margin-top: 2px;
}
.restart-status-wrap {
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    max-height: 280px;
    overflow-y: auto;
}


.broadcast-modal-card { max-width: 420px; }
.broadcast-modal-description {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-bottom: 16px;
    text-align: left;
}
.broadcast-modal-textarea {
    resize: vertical;
    min-height: 64px;
    text-align: left;
}
.broadcast-modal-status {
    font-size: 0.78rem;
    color: var(--clr-text-secondary);
    min-height: 1.2em;
    margin: 10px 0 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   15. LOGIN PAGE
       (standalone page — has its own body layout, no navbar/drawer)
═══════════════════════════════════════════════════════════════════════════════ */

body.login-page {
    min-height: 100vh;
    background: var(--clr-bg);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
}
/* Override the ::before overlay for login */
body.login-page::before {
    background:
        radial-gradient(ellipse 70% 50% at 20% 10%, rgba(196,174,224,0.2) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 90%, rgba(244,163,181,0.15) 0%, transparent 55%);
}

/* Splash background image */
body.login-page.has-splash-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* matches .bg-image on the logged-in shell —
                                      without this, a page taller than the
                                      viewport (e.g. a long Portal Page) stretches
                                      the background over the full document height
                                      and lets it scroll with the content instead
                                      of staying pinned to the viewport. */
}
body.login-page.has-splash-bg::before {
    background: rgba(20, 10, 40, 0.45);
}

/* Main area — centred, takes all space above footer */
.login-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px 32px;
}

/* Login card */
.login-card {
    position: relative;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(100, 70, 160, 0.1), 0 1px 4px rgba(100, 70, 160, 0.06);
    width: 100%;
    max-width: 400px;
    padding: 40px 36px 36px;
}

/* Two-pane layout when news feed is enabled */
.login-card.has-news-feed {
    max-width: 780px;
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 0;
    overflow: hidden;
}
.login-news-pane {
    flex: 1 1 0;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 420px;
}
.login-news-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-style: italic;
    color: var(--clr-lilac-deep);
    margin: 0;
}
.login-news-content {
    flex: 1;
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    line-height: 1.6;
}
.login-news-empty {
    color: var(--clr-text-muted);
    font-style: italic;
    margin: 0;
}
.news-post-entry {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--clr-border);
}
.news-post-entry:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.news-post-entry.split {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.news-post-meta {
    font-size: 0.78rem;
    color: var(--clr-text-muted);
    margin-bottom: 4px;
}
.news-post-body {
    white-space: pre-wrap;
}
/* TinyMCE-authored posts (is_html=1): the source already has its own
   paragraph/list structure, so pre-wrap would add unwanted extra gaps
   from TinyMCE's own source newlines — reset to normal wrapping instead. */
.news-post-body.is-html {
    white-space: normal;
}
.login-news-divider {
    width: 1px;
    background: var(--clr-border);
    align-self: stretch;
    flex-shrink: 0;
}
.login-form-pane {
    flex: 1 1 0;
    padding: 40px 36px 36px;
}
/* When news feed is on, logo/subtitle/form live inside .login-form-pane */
.login-card.has-news-feed .login-logo {
    margin: -40px -36px 16px;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.login-footer {
    background: var(--clr-footer-bg);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-top: 1px solid var(--clr-footer-border);
    padding: 12px 32px 14px;
    color: var(--clr-footer-text);
}

/* Grid identity row */
.login-footer-identity {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 10px;
    font-size: 0.8rem;
}
.footer-grid-name {
    font-weight: 600;
    color: var(--clr-footer-text-strong);
    letter-spacing: 0.02em;
}
.footer-identity-sep {
    color: var(--clr-footer-sep);
}
.footer-login-uri-label {
    color: var(--clr-footer-text-muted);
    font-size: 0.78rem;
}
.footer-login-uri {
    color: var(--clr-footer-uri, #b99de0);
    font-size: 0.8rem;
    font-family: monospace;
}

/* Grid Links row — splash.php / login.php, below the login card, above
   .footer-stats. Centred, wraps on narrow screens. Image links show a
   small thumbnail; text-only links show as a pill button — both sit in
   the same row so mixed sets line up evenly. */
.grid-links-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
}
.grid-links-thumb {
    display: block;
    height: 42px;
    width: auto;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.grid-links-thumb img {
    height: 100%;
    width: auto;
    display: block;
}
.grid-links-thumb:hover {
    transform: translateY(-2px);
    border-color: var(--clr-accent, var(--clr-border-light));
}
.grid-links-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface);
    color: var(--clr-text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.grid-links-pill-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--clr-text-secondary);
}
.grid-links-pill:hover {
    transform: translateY(-2px);
    border-color: var(--clr-accent, var(--clr-border-light));
}

/* Stats grid — 4 columns, wraps to 2, then 1 */
.footer-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 0;
    background: var(--clr-footer-gap); /* gap colour */
    border: 1px solid var(--clr-footer-gap);
    border-radius: 10px;
    overflow: hidden;
}
.footer-stat {
    background: var(--clr-footer-cell-bg);
    padding: 7px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-stat dt {
    font-size: 0.63rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--clr-footer-text-muted);
    margin: 0;
}
.footer-stat dd {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--clr-footer-text-strong);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.stat-period {
    font-size: 0.65rem;
    text-transform: none;
    letter-spacing: 0;
}
.stats-online {
    color: var(--clr-footer-online) !important;
}
.stats-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--clr-footer-online-dot);
    box-shadow: 0 0 5px 2px var(--clr-footer-online-glow);
    flex-shrink: 0;
    display: inline-block;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .footer-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .login-card.has-news-feed {
        flex-direction: column;
        max-width: 400px;
    }
    .login-news-divider {
        width: auto; height: 1px;
    }
    .login-form-pane {
        flex: none;
        padding: 32px 22px 28px;
    }
    .login-card.has-news-feed .login-logo {
        margin: -32px -22px 16px;
    }
    .login-footer { padding: 10px 16px 12px; }
    .footer-stats { grid-template-columns: repeat(2, 1fr); }
    .login-card { padding: 32px 22px 28px; }
    .login-form-row { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 400px) {
    .footer-stats { grid-template-columns: 1fr 1fr; }
    .footer-login-uri { word-break: break-all; }
    .login-footer-identity { flex-direction: column; gap: 4px; text-align: center; }
}
.login-card {
    position: relative;
    background: var(--clr-surface); border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(100, 70, 160, 0.1), 0 1px 4px rgba(100, 70, 160, 0.06);
    width: 100%; max-width: 400px; padding: 40px 36px 36px;
}
.login-logo {
    margin: -40px -36px 16px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden; line-height: 0;
}
.login-logo img { width: 100%; height: auto; display: block; }
.login-subtitle {
    text-align: center; font-size: 0.82rem;
    color: var(--clr-text-muted); margin-bottom: 28px; letter-spacing: 0.01em;
}
.alert-warning {
    background: #fdf8ee; border: 1px solid #e8d48a; color: #8a5a00;
}
.alert-notice {
    background: var(--clr-lilac-soft); border: 1px solid var(--clr-lilac-mid); color: var(--clr-lilac-text);
}
.alert-icon { flex-shrink: 0; margin-top: 1px; }
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.form-group:last-of-type { margin-bottom: 0; }
label { font-size: 0.78rem; font-weight: 500; color: var(--clr-text-secondary); letter-spacing: 0.02em; }
input[type="text"], input[type="password"] {
    width: 100%; padding: 9px 12px; font-size: 0.9rem;
    font-family: var(--font-body); color: var(--clr-text-primary);
    background: var(--clr-surface); border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s, box-shadow 0.15s; outline: none; -webkit-appearance: none;
}
input[type="text"]:focus, input[type="password"]:focus {
    border-color: var(--clr-lilac-mid); box-shadow: 0 0 0 3px rgba(139, 104, 196, 0.12);
}
input[type="text"]:disabled, input[type="password"]:disabled {
    background: #f7f4fb; color: var(--clr-text-muted); cursor: not-allowed;
}
.password-wrap { position: relative; }
.password-wrap input { padding-right: 40px; }
.toggle-pw {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--clr-text-muted);
    padding: 2px; display: flex; align-items: center; transition: color 0.15s;
}
.toggle-pw:hover { color: var(--clr-lilac-deep); }
.login-form-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px;
}
/* "Sign in" (login.php) and "Submit registration" (register.php) submit
   buttons: centre within the form, with a little space above. */
#registerForm { margin-top: 18px; }
#loginForm .btn-primary,
#registerForm .btn-primary {
    display: block;
    margin: 18px auto 0;
    align-self: center;
}
.login-hint { margin-top: 20px; text-align: center; font-size: 0.78rem; color: var(--clr-text-muted); line-height: 1.5; }
.login-hint-tight { margin-top: -4px; margin-bottom: 14px; text-align: left; }
.login-hint-centered { text-align: center; }

/* Registration unavailable notice */
.login-card-narrow { text-align: center; max-width: 480px; }
/* Portal Pages, logged-out view — wider than a form card since it holds
   prose/rich-text content rather than a couple of form fields. Matches
   .page-wrap's max-width (1100px) so a Portal Page reads at the same width
   whether it's viewed logged in (.account-panel, inside .page-wrap) or
   logged out (this card) — previously capped at 720px, noticeably
   narrower than the logged-in equivalent. Compound selector (not just
   .login-card-wide alone) so it reliably beats the two existing
   .login-card { max-width: 400px } rules above regardless of their
   relative order in the cascade. */
.login-card.login-card-wide { max-width: 1100px; text-align: left; }
.panel-heading-spaced { margin-bottom: 12px; }
.register-unavailable-text { color: var(--clr-text-secondary); margin-bottom: 20px; }

/* Register form heading/subtitle */
.register-heading { text-align: center; margin-bottom: 4px; }
.register-subtitle { text-align: center; }

/* Alert spacing inside the register card */
.register-alert { margin-top: 16px; }

/* Success state back-link */
.register-success-back { text-align: center; margin-top: 20px; }

/* ── Registration: two-step flow (account details -> starter avatar) ────────
   Only relevant when STARTER_AVATARS is configured — register.php renders
   a single step (no dots, no .register-card-wide) otherwise, identical to
   the page's original single-page behaviour. */

/* Wider card so the avatar picker grid (step 2) has room for more than a
   couple of columns; step 1 still reads fine at this width since
   .login-form-row / inputs are already fluid. .register-card sets the
   page's default width (was previously an inline style="max-width:480px"
   on register.php's card div); .register-card-wide overrides it only
   when the starter-avatar step is active. */
.register-card { max-width: 480px; }
.register-card-wide { max-width: 640px; }

.register-progress-dots {
    display: flex; justify-content: center; align-items: center;
    gap: 8px; margin: 18px 0 4px;
}
.register-progress-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--clr-border); transition: background 0.2s, transform 0.2s;
}
.register-progress-dot.active {
    background: var(--clr-lilac-deep); transform: scale(1.25);
}

.register-step[hidden] { display: none; }

.avatar-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
/* Mirrors .theme-swatch's selectable-card mechanics (hover lift, active
   border + tick overlay) — same interaction pattern, different content. */
.avatar-swatch {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    cursor: pointer; border: none; background: none; padding: 0;
    font-family: var(--font-body);
}
.avatar-swatch-img {
    display: block; width: 100%; aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    border: 2px solid var(--clr-border);
    overflow: hidden; position: relative;
    background: var(--clr-lilac-soft);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.avatar-swatch-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-swatch:hover .avatar-swatch-img {
    border-color: var(--clr-lilac-mid);
    box-shadow: 0 2px 8px rgba(100, 70, 160, 0.15);
}
.avatar-swatch.active .avatar-swatch-img {
    border-color: var(--clr-lilac-deep);
    box-shadow: 0 0 0 3px rgba(139, 104, 196, 0.25);
}
.avatar-swatch-name {
    font-size: 0.78rem; font-weight: 500; color: var(--clr-text-secondary);
    text-align: center; line-height: 1.3;
}
.avatar-swatch.active .avatar-swatch-name { color: var(--clr-lilac-text); font-weight: 600; }
.avatar-swatch.active .avatar-swatch-img::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.12); z-index: 1;
}
.avatar-swatch.active .avatar-swatch-img::after {
    content: '✓'; position: absolute; top: 4px; right: 6px;
    font-size: 0.85rem; font-weight: 700; color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5); z-index: 2; line-height: 1;
}

/* Step 2's Back / Submit pair — side by side, overriding the centred
   block-level #registerForm .btn-primary rule above for this row only.
   Selector specificity must match (ID + class) to actually win, since a
   plain class-only override would lose to #registerForm .btn-primary
   regardless of source order. */
#registerForm .register-step2-actions .btn-primary,
#registerForm .register-step2-actions .btn-primary-pill {
    display: inline-flex; margin: 0; align-self: auto;
}
.register-step2-actions {
    display: flex; gap: 10px; justify-content: center; margin-top: 18px;
}
.register-step2-msg {
    font-size: 0.78rem; color: var(--clr-text-muted);
    margin-top: 10px; text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   16. PUBLIC PROFILE PAGE
═══════════════════════════════════════════════════════════════════════════════ */

.pp-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 16px 60px;
    position: relative;
    z-index: 1;
}
.pp-page.pp-search-mode { justify-content: center; padding-bottom: 120px; }
.pp-card-signin {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 0.8rem;
    color: var(--clr-lilac-deep);
    text-decoration: none;
    font-weight: 500;
    padding: 5px 14px;
    border: 1px solid var(--clr-lilac-mid);
    border-radius: var(--radius-pill);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.pp-card-signin:hover { background: var(--clr-lilac-soft); color: var(--clr-lilac-text); }
.pp-stats-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; }
.pp-wrap { width: 100%; max-width: 980px; }
.pp-search-card {
    position: relative;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: visible;
    padding: 36px 40px 32px;
}
.pp-logo { display: flex; justify-content: center; margin-bottom: 24px; }
.pp-logo img { height: 140px; width: auto; display: block; }
.pp-search-wrap { position: relative; margin-bottom: 24px; }
.pp-search-input {
    width: 100%;
    padding: 13px 48px 13px 18px;
    font-size: 0.95rem;
    font-family: var(--font-body);
    color: var(--clr-text-primary);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-card);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pp-search-input::placeholder { color: var(--clr-text-muted); }
.pp-search-input:focus {
    border-color: var(--clr-lilac-deep);
    box-shadow: 0 0 0 3px rgba(139,104,196,0.15), var(--shadow-card);
}
.pp-search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--clr-text-muted);
    pointer-events: none;
}
.pp-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(100,70,160,0.14);
    z-index: 50;
    overflow: hidden;
    display: none;
}
.pp-results.open { display: block; }
.pp-result-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 16px;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid var(--clr-border-light);
    transition: background 0.12s;
}
.pp-result-item:last-child { border-bottom: none; }
.pp-result-item:hover,
.pp-result-item:focus { background: var(--clr-surface-2); outline: none; }
.pp-result-name { font-size: 0.88rem; font-weight: 600; color: var(--clr-text-primary); }
.pp-result-uuid { font-size: 0.68rem; color: var(--clr-text-muted); font-family: 'Courier New', monospace; }
.pp-results-empty,
.pp-results-searching { padding: 14px 16px; font-size: 0.85rem; color: var(--clr-text-muted); text-align: center; }
.pp-search-hint { text-align: center; font-size: 0.84rem; color: var(--clr-text-muted); margin-top: 8px; }
.pp-notice-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    padding: 48px 36px;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}
.pp-notice-icon { color: var(--clr-lilac-mid); margin-bottom: 18px; }
.pp-notice-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--clr-text-primary);
    margin-bottom: 10px;
}
.pp-notice-body { font-size: 0.88rem; color: var(--clr-text-secondary); line-height: 1.65; }
.pp-profile-panel {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.pp-panel-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 16px 24px;
    border-bottom: 1px solid var(--clr-border-light);
    background: linear-gradient(135deg, var(--clr-surface) 0%, var(--clr-surface-2) 100%);
}
.pp-panel-header img { height: 120px; width: auto; display: block; }
.pp-signin-link {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--clr-lilac-deep);
    text-decoration: none;
    font-weight: 500;
    padding: 5px 14px;
    border: 1px solid var(--clr-lilac-mid);
    border-radius: var(--radius-pill);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.pp-signin-link:hover { background: var(--clr-lilac-soft); color: var(--clr-lilac-text); }

@media (max-width: 680px) {
    .pp-page { padding: 24px 12px 40px; }
    .pp-search-card { padding: 24px 18px 20px; }
    .pp-notice-card { padding: 32px 20px; }
    .pp-panel-header { padding: 12px 16px; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .pp-signin-link { position: static; transform: none; }
    .pp-logo img { height: 100px; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   17. ADMIN PAGE
═══════════════════════════════════════════════════════════════════════════════ */

/* ── Shared admin layout helpers ─────────────────────────────────────────── */

/* Section header row: title on left, controls on right */
.admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

/* section-title inside a flex header — suppress its own bottom margin */
.section-title-inline { margin-bottom: 0; }

/* Count/subtitle span inside a section-title */
.section-title-count {
    font-weight: 400;
    color: var(--clr-text-secondary);
    font-size: 0.85rem;
}

/* Controls group (sort, toggle) on the right of a section header */
.admin-section-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Label wrapping a control (sort select, checkbox) */
.admin-control-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--clr-text-secondary);
}

/* Select widget inside admin controls */
.admin-select {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface);
    color: var(--clr-text-primary);
    font-family: var(--font-body);
    font-size: 0.82rem;
}

/* Note/disclaimer line below a section header */
.admin-section-note {
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    margin-top: -4px;
    margin-bottom: 16px;
}

/* Empty-state paragraph (no results) */
.admin-section-empty {
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
}

/* ── Account approvals ───────────────────────────────────────────────────── */
.approval-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--clr-border-light);
    flex-wrap: wrap;
}
.approval-name {
    font-weight: 500;
    color: var(--clr-text-primary);
}
.approval-email {
    font-size: 0.82rem;
    color: var(--clr-text-secondary);
}
.approval-meta {
    font-size: 0.78rem;
    color: var(--clr-text-muted);
}
.approval-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Grid news ───────────────────────────────────────────────────────────── */
.admin-news-post {
    display: grid;
    grid-template-columns: 15% 1fr 15%;
    gap: 0;
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    align-items: stretch;
    margin-bottom: 6px;
}
.admin-news-post:last-child { margin-bottom: 0; }
.admin-news-meta,
.admin-news-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(175deg, var(--clr-surface) 0%, var(--clr-surface-2) 100%);
}
.admin-news-meta {
    border-right: 1px solid var(--clr-border-light);
    font-size: 0.78rem;
    color: var(--clr-text-muted);
}
.admin-news-actions {
    border-left: 1px solid var(--clr-border-light);
    align-items: stretch;
}
.admin-news-body {
    font-size: 0.92rem;
    color: var(--clr-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
    padding: 8px 16px;
    background: var(--clr-surface);
}
/* Same rationale as .news-post-body.is-html above. */
.admin-news-body.is-html {
    white-space: normal;
}

/* Baseline tag styling for TinyMCE-authored news posts (is_html=1), on
   both the public feed and the admin list — paragraphs, lists, and links.
   Also covers the public Events modal's event-card-desc (portal_events.
   is_html — same pattern, see events_data.php). Mirrors
   .portal-page-content's tag rules (see below) without its page-specific
   padding/line-height, since these live inside existing card layouts that
   already set those. */
.news-post-body.is-html p,
.admin-news-body.is-html p,
.event-card-desc.is-html p { margin: 0 0 0.8em; }
.news-post-body.is-html p:last-child,
.admin-news-body.is-html p:last-child,
.event-card-desc.is-html p:last-child { margin-bottom: 0; }
.news-post-body.is-html ul,
.news-post-body.is-html ol,
.admin-news-body.is-html ul,
.admin-news-body.is-html ol,
.event-card-desc.is-html ul,
.event-card-desc.is-html ol { margin: 0 0 0.8em; padding-left: 1.4em; }
.news-post-body.is-html li,
.admin-news-body.is-html li,
.event-card-desc.is-html li { margin-bottom: 0.3em; }
.news-post-body.is-html a,
.admin-news-body.is-html a,
.event-card-desc.is-html a {
    color: var(--clr-lilac-deep, var(--clr-text-primary));
    text-decoration: underline;
}
.news-post-body.is-html a:hover,
.admin-news-body.is-html a:hover,
.event-card-desc.is-html a:hover { text-decoration: none; }
/* Hidden posts: dim the whole row to the side columns' darker gradient stop */
.admin-news-post.is-hidden .admin-news-body {
    background: var(--clr-surface-2);
    opacity: 0.7;
}
.admin-news-post.is-hidden .admin-news-meta,
.admin-news-post.is-hidden .admin-news-actions { background: var(--clr-surface-2); }
.badge-hidden {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--clr-text-muted);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
    text-align: center;
}
.btn-secondary,
.btn-danger {
    font-size: 0.82rem;
    padding: 6px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface);
    color: var(--clr-text-primary);
    cursor: pointer;
}
.btn-secondary:hover { background: var(--clr-surface-2); }
.btn-danger {
    border-color: var(--clr-rose-accent);
    color: var(--clr-rose-accent);
    background: transparent;
}
.btn-danger:hover { background: var(--clr-rose-soft); }
/* Context: news action column — buttons fill the column width */
.admin-news-actions .btn-secondary,
.admin-news-actions .btn-danger { width: 100%; }
.admin-news-actions form { width: 100%; }
.news-post-form textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface);
    color: var(--clr-text-primary);
    font-family: var(--font-body);
    font-size: 0.92rem;
    resize: vertical;
    box-sizing: border-box;
}
.news-post-form { margin-bottom: 18px; }
.news-post-form .btn-primary { margin-top: 8px; }

/* ── Grid Events admin form ──────────────────────────────────────────────── */
.event-form-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--clr-text-secondary);
    margin: 14px 0 4px;
}
.event-form-label:first-of-type { margin-top: 0; }
.event-form input[type="text"],
.event-form input[type="datetime-local"],
.event-form input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface);
    color: var(--clr-text-primary);
    font-family: var(--font-body);
    font-size: 0.92rem;
    box-sizing: border-box;
}
.event-form input[type="number"] {
    width: 7rem; /* short numeric field (e.g. Grid Links display order), not full-width */
}
.event-form input[type="file"] {
    width: 100%;
    padding: 8px 0;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}
.event-file-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.event-file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}
.event-file-trigger {
    flex: 0 0 auto;
    cursor: pointer;
    white-space: nowrap;
}
.event-file-name {
    font-size: 0.82rem;
    color: var(--clr-text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.event-form-file-hint {
    font-size: 0.78rem;
    color: var(--clr-text-secondary);
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    margin: 4px 0 12px;
    line-height: 1.5;
}
.event-image-preview-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 10px;
    padding: 8px;
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-md);
    background: var(--clr-surface-2);
}
.event-image-preview {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex: 0 0 auto;
}
.event-form-checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--clr-text-secondary);
}
.event-form textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface);
    color: var(--clr-text-primary);
    font-family: var(--font-body);
    font-size: 0.92rem;
    resize: vertical;
    box-sizing: border-box;
}
.event-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.event-active-toggle {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
}
.event-active-toggle .toggle-wrap { margin-top: 2px; } /* nudge switch to align with first line of label text */
.event-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
@media (max-width: 640px) {
    .event-form-row { grid-template-columns: 1fr; }
}
.event-form-tight-note { margin-top: 4px; }
.link-type-options {
    display: flex;
    gap: 20px;
    margin: 4px 0 12px;
}
#restartDelayOptions {
    justify-content: center;
    margin: 4px 0 18px;
}

/* ── Who's Online ────────────────────────────────────────────────────────── */
.online-region-header {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--clr-text-primary);
    padding: 16px 4px 8px;
    border-bottom: 1px solid var(--clr-border-light);
    margin-bottom: 4px;
}
.online-region-header:first-child { padding-top: 0; }
.online-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 4px;
    flex-wrap: wrap;
}
#onlineUsersList.grouped .online-user-row { padding-left: 18px; }
.online-user-name {
    font-weight: 500;
    color: var(--clr-text-primary);
    flex: 1 1 160px;
}
/* When grouped, region header carries the visual weight — name reads as sub-item */
#onlineUsersList.grouped .online-user-name { font-size: 0.9rem; }
.online-user-region {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    flex: 1 1 160px;
}
.online-user-row.is-hypergrid .online-user-name,
.online-user-row.is-hypergrid .online-user-region { color: var(--clr-text-muted); }
.online-user-name.clickable {
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s ease;
}
.online-user-name.clickable:hover,
.online-user-name.clickable:focus-visible {
    color: var(--clr-lilac-deep);
    text-decoration: underline;
}
.online-user-name.clickable:focus-visible { outline: 2px solid var(--clr-lilac-deep); outline-offset: 2px; }
.online-user-hg-label {
    font-style: italic;
    border-bottom: 1px dashed var(--clr-text-muted);
    cursor: help;
}
.online-user-hg-badge {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--clr-text-muted);
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
    cursor: help;
}

/* ── Logs ────────────────────────────────────────────────────────────────── */
.log-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border-light);
}
.log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}
.log-table thead th {
    background: var(--clr-surface-2);
    color: var(--clr-text-secondary);
    font-weight: 600;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--clr-border-light);
    white-space: nowrap;
}
.log-table tbody tr { border-bottom: 1px solid var(--clr-border-light); }
.log-table tbody tr:last-child { border-bottom: none; }
.log-table tbody tr:hover { background: var(--clr-surface-2); }
.log-table td {
    padding: 7px 12px;
    vertical-align: top;
    color: var(--clr-text-primary);
}
.log-when { color: var(--clr-text-muted); white-space: nowrap; font-size: 0.8rem; }
.log-actor { white-space: nowrap; }
.log-action {
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    background: var(--clr-surface-2);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--clr-text-secondary);
    white-space: nowrap;
}
.log-uuid { font-family: var(--font-mono, monospace); font-size: 0.75rem; color: var(--clr-text-muted); }
.log-fail { color: var(--clr-rose-accent); font-weight: 500; }
.log-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    justify-content: center;
}
.log-page-btn {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface);
    color: var(--clr-text-primary);
    font-size: 0.82rem;
    text-decoration: none;
}
.log-page-btn.active { background: var(--clr-accent); color: #fff; border-color: var(--clr-accent); }
.log-page-btn:hover:not(.active) { background: var(--clr-surface-2); }

@media (max-width: 560px) {
    .admin-news-post { grid-template-columns: 1fr; }
    .admin-news-meta { border-right: none; border-bottom: 1px solid var(--clr-border-light); }
    .admin-news-actions { border-left: none; border-top: 1px solid var(--clr-border-light); flex-direction: row; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   18. RESPONSIVE
═══════════════════════════════════════════════════════════════════════════════ */

/* Profile page */
@media (max-width: 740px) {
    .profile-panel { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; margin-top: 16px; }
    .profile-panel-header { grid-column: 1; padding: 16px 18px 14px; }
    .profile-left { border-right: none; border-bottom: 1px solid var(--clr-border-light); }
    .profile-privacy-footer { padding: 16px 18px; flex-direction: column; align-items: flex-start; gap: 12px; }
    .picks-list { max-height: none; }
    .profile-avatar-wrap { max-height: none; aspect-ratio: unset; }
    .profile-avatar-wrap img { object-fit: contain; height: auto; }
    .pick-card { grid-template-columns: 90px 1fr; }
    .nav-username { display: none; }
}
@media (max-width: 480px) {
    .topnav { padding: 0 14px; gap: 10px; }
    .page-wrap { padding: 20px 12px 40px; }
    .profile-right { padding: 18px 16px; }
}

/* Account / change-password pages */
@media (max-width: 540px) {
    .info-grid { grid-template-columns: 1fr; row-gap: 4px; }
    .info-label { margin-top: 8px; }
    .account-section { padding: 20px 18px; }
    .account-panel-header { padding: 18px; }
    .form-row { flex-direction: column; }
    .btn-primary { width: 100%; text-align: center; align-self: stretch; }
    .nav-username { display: none; }
}

/* Messages page */
@media (max-width: 600px) {
    .nav-username { display: none; }
    .page-wrap { padding: 0 12px 40px; }
    .page-header { padding: 20px 0 16px; }
    .page-title { font-size: 1.3rem; }
    .msg-card { padding: 13px 15px; }
    .topnav { padding: 0 14px; gap: 10px; }
}

/* Friends page */
@media (max-width: 600px) {
    .card-header { padding: 18px 16px 14px; }
    .friends-list { padding: 12px 16px 20px; }
    .presence-notice { margin: 16px 16px 0; }
    .filter-bar { padding: 12px 16px 0; }
    .filter-tabs { display: none; }
}

/* Login page */
@media (max-width: 440px) {
    .login-card { padding: 32px 22px 28px; }
    .login-form-row { grid-template-columns: 1fr; gap: 0; }
}

/* Navbar: hide centred logo on narrow screens to prevent overlap with status badge */
@media (max-width: 560px) {
    .nav-title { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Friend profile modal  (.fp-*)
   ══════════════════════════════════════════════════════════════════════════ */

/* Clickable friend name — unstyled button that looks like text */
.friend-name-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--clr-lilac-deep);
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color 0.15s, text-decoration-color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.friend-name-btn:hover,
.friend-name-btn:focus-visible {
    color: var(--clr-rose-accent);
    text-decoration-color: var(--clr-rose-accent);
    outline: none;
}

/* Full-screen backdrop */
.fp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 900;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.fp-overlay.open { display: flex; }

/* Modal card */
.fp-modal {
    position: relative;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    width: 100%;
    max-width: 920px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Close button — lives inside the picks header row */
.fp-close {
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-light);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--clr-text-secondary);
    transition: background 0.15s, color 0.15s;
}
.fp-close:hover, .fp-close:focus-visible {
    background: var(--clr-rose-accent);
    color: #fff;
    border-color: transparent;
    outline: none;
}
/* Standalone close for loading/error states */
.fp-close-standalone {
    position: absolute;
    top: 14px;
    right: 14px;
}

/* Loading / error states */
.fp-loading, .fp-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 24px;
    color: var(--clr-text-secondary);
    font-size: 0.9rem;
}
.fp-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--clr-border-light);
    border-top-color: var(--clr-lilac-deep);
    border-radius: 50%;
    animation: fp-spin 0.75s linear infinite;
}
@keyframes fp-spin { to { transform: rotate(360deg); } }

/* Content: two-column layout matching profile.php */
.fp-content {
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

/* Left column */
.fp-left {
    border-right: 1px solid var(--clr-border-light);
    padding: 28px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;       /* essential: lets the column shrink inside the grid */
    display: flex;
    flex-direction: column;
    gap: 0;
    background: linear-gradient(175deg, var(--clr-surface) 0%, var(--clr-surface-2) 100%);
}

.fp-avatar-wrap {
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--clr-surface-2);
    margin-bottom: 18px;
    flex-shrink: 0;
    /* Prevent image reaching the scrollbar edge on narrow viewports */
    box-sizing: border-box;
}
.fp-avatar-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.fp-identity { margin-bottom: 0; }

.fp-fullname {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.45rem;
    color: var(--clr-text-primary);
    line-height: 1.2;
    margin-bottom: 12px;
}

.fp-meta { margin: 0; padding: 0; }
.fp-meta-row {
    display: grid;
    grid-template-columns: 62px 1fr;
    align-items: baseline;
    gap: 6px;
    padding: 4px 0;
    min-width: 0;
}
/* UUID row stacks label above value — the UUID is too long for side-by-side */
.fp-meta-row.fp-meta-row--stacked {
    grid-template-columns: 1fr;
    gap: 2px;
}
.fp-meta-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}
.fp-meta-value {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp-uuid {
    font-family: var(--font-mono, monospace);
    font-size: 0.63rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
}
.fp-partner {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: normal;
}
.fp-partner svg { flex-shrink: 0; }

.fp-about-section { margin-top: 4px; }
.fp-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-text-muted);
    margin-bottom: 6px;
}
.fp-divider {
    height: 1px;
    background: var(--clr-border-light);
    margin: 12px 0;
    flex-shrink: 0;
}
.fp-member-since {
    margin-top: auto;
    padding-top: 12px;
    font-size: 0.72rem;
    color: var(--clr-text-muted);
    border-top: 1px solid var(--clr-border-light);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.fp-about-text {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Right column */
.fp-right {
    padding: 24px 24px 24px;
    overflow-y: auto;
    min-height: 0;       /* essential: lets the column shrink inside the grid */
    display: flex;
    flex-direction: column;
}
/* Groups the picks count + close button on the right of the picks header */
.fp-picks-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.fp-picks-list { flex: 1; }
.fp-picks-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 0;
    color: var(--clr-text-muted);
    font-size: 0.85rem;
}

/* ── Account page: toggle row (public profile opt-in) ────────────────────── */

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    padding: 14px 0;
    border-top: 1px solid var(--clr-border-light);
}
.toggle-label-text { display: flex; flex-direction: column; gap: 3px; }
.toggle-label-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--clr-text-primary);
}
.toggle-label-sub {
    font-size: 0.78rem;
    color: var(--clr-text-muted);
}
.toggle-switch-wrap { position: relative; flex-shrink: 0; }
.toggle-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch {
    display: block;
    width: 44px;
    height: 24px;
    background: var(--clr-lilac-mid);
    border-radius: 12px;
    position: relative;
    transition: background 0.2s;
    cursor: pointer;
}
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.toggle-checkbox:checked + .toggle-switch { background: var(--clr-lilac-deep); }
.toggle-checkbox:checked + .toggle-switch::after { transform: translateX(20px); box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
.toggle-checkbox:focus-visible + .toggle-switch {
    outline: 2px solid var(--clr-lilac-deep);
    outline-offset: 2px;
}

/* ── Profile page: partner value ─────────────────────────────────────────── */
.partner-value {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--clr-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.partner-value svg { flex-shrink: 0; }

.partner-link {
    color: var(--clr-lilac-deep);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.partner-link:hover,
.partner-link:focus-visible {
    color: var(--clr-rose-accent);
    text-decoration-color: var(--clr-rose-accent);
    outline: none;
}

/* ── Friend profile modal: responsive ───────────────────────────────────── */
@media (max-width: 680px) {
    .fp-overlay { padding-top: calc(var(--nav-h) + 16px); align-items: flex-start; }
    .fp-modal { max-height: calc(100vh - var(--nav-h) - 32px); overflow: hidden; display: flex; flex-direction: column; }
    .fp-modal::before { content: ''; display: block; height: var(--radius-lg); flex-shrink: 0; }
    .fp-modal > .fp-loading,
    .fp-modal > .fp-error,
    .fp-modal > .fp-content { overflow-y: auto; flex: 1; scrollbar-gutter: stable; }
    .fp-content { grid-template-columns: 1fr; overflow-y: auto; min-height: unset; scrollbar-gutter: stable; }
    .fp-left { border-right: none; border-bottom: 1px solid var(--clr-border-light); padding: 20px 18px; min-height: unset; overflow: visible; }
    .fp-right { padding: 18px 18px 24px; min-height: unset; overflow: visible; }
    .fp-avatar-wrap { border-radius: var(--radius-md) var(--radius-md) 0 0; }
}

/* ── User Management modals (admin_users.php) ─────────────────────────────── */
/* Wider card variant for form modals (title/level/email/name editors).
   Reuses .logout-overlay for the backdrop; only the card itself is wider
   and left-aligned. */
.um-modal-card {
    width: 90%;
    max-width: 900px;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    padding: 0;
    text-align: left;
}
.um-modal-scroll {
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 28px 28px 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--clr-border-light) transparent;
}
.um-modal-scroll::-webkit-scrollbar {
    width: 8px;
}
.um-modal-scroll::-webkit-scrollbar-track {
    background: transparent;
    margin: 16px 0;
}
.um-modal-scroll::-webkit-scrollbar-thumb {
    background: var(--clr-border-light);
    border-radius: 8px;
}
.um-modal-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--clr-text-muted);
}
.um-modal-field-row {
    display: flex;
    gap: 12px;
    margin-bottom: 0;
}
.um-modal-field-row > div {
    flex: 1 1 0;
    min-width: 0;
}
.um-modal-field-row > div > .um-modal-field-label {
    min-height: 2.3em;
    display: flex;
    align-items: flex-end;
}
@media (max-width: 560px) {
    .um-modal-field-row {
        flex-direction: column;
        gap: 0;
    }
    .um-modal-field-row > div > .um-modal-field-label {
        min-height: 0;
    }
}
.um-modal-card h2 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--clr-text-primary);
    margin-bottom: 4px;
}
.um-modal-subhead {
    font-size: 0.82rem;
    color: var(--clr-text-secondary);
    margin-bottom: 14px;
}
.um-modal-field-label {
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    font-weight: 500;
    margin-bottom: 4px;
    display: block;
}
.um-modal-field-input {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface);
    color: var(--clr-text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    box-sizing: border-box;
    margin-bottom: 14px;
}
.um-modal-field-input:focus {
    outline: none;
    border-color: var(--clr-accent-primary);
}
.um-modal-info {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-2);
    color: var(--clr-text-secondary);
    font-size: 0.8rem;
    margin-bottom: 14px;
    line-height: 1.5;
}
.um-modal-warning {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-rose-accent);
    background: transparent;
    color: var(--clr-rose-accent);
    font-size: 0.8rem;
    margin-bottom: 14px;
    line-height: 1.5;
}
.um-modal-presence-section {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--clr-border-light);
}
.um-modal-presence-section .um-modal-field-label { margin-bottom: 4px; }
.um-modal-presence-section #editUserPresenceStatus { margin-bottom: 10px; }
.um-modal-presence-section #clearPresenceBtn { margin-bottom: 12px; }
.um-modal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* ── User Management page (admin_users.php) ─────────────────────────────────
   All rules from the former page-local <style> block, plus helpers for
   previously-inline styles. Moved here as part of the inline CSS cleanup. */

/* ── User list table ─────────────────────────────────── */
.user-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.user-table th {
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    padding: 8px 10px 8px 0;
    border-bottom: 1px solid var(--clr-border-light);
}
.um-sort-link {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.um-sort-link:hover {
    color: var(--clr-text-primary);
    text-decoration: underline;
}
.user-table td {
    padding: 10px 10px 10px 0;
    border-bottom: 1px solid var(--clr-border-light);
    vertical-align: top;
    color: var(--clr-text-primary);
}
.user-table tr:last-child td {
    border-bottom: none;
}
.user-table tr.is-disabled td {
    opacity: 0.55;
}
.user-name-cell {
    font-weight: 500;
    min-width: 120px;
}
.user-email-cell {
    font-size: 0.82rem;
    color: var(--clr-text-secondary);
    word-break: break-all;
}
.user-title-cell {
    font-size: 0.82rem;
    color: var(--clr-text-secondary);
    max-width: 120px;
}
.user-created-cell {
    font-size: 0.78rem;
    color: var(--clr-text-muted);
    white-space: nowrap;
}
.user-actions-cell {
    min-width: 80px;
}
.user-level-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-2);
    color: var(--clr-text-secondary);
    white-space: nowrap;
}
.user-level-badge.is-staff {
    border-color: var(--clr-accent-teal);
    color: var(--clr-accent-teal);
    background: transparent;
}
.user-level-badge.is-admin {
    border-color: var(--clr-rose-accent);
    color: var(--clr-rose-accent);
    background: transparent;
}
.badge-disabled {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--clr-border-light);
    color: var(--clr-text-muted);
    background: var(--clr-surface-2);
    margin-left: 4px;
}
/* Numeric level in parentheses inside the badge */
.um-level-num {
    opacity: 0.6;
    font-weight: 400;
}

/* Context: user table row action buttons — inline, compact, nowrap */
.user-table .btn-secondary,
.user-table .btn-danger {
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    display: inline-block;
    margin: 2px 2px 2px 0;
}
/* Disable/enable forms sit inline with the other row buttons */
.form-display-inline {
    display: inline;
}

/* ── Search bar ───────────────────────────────────────── */
.user-search-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 18px;
}
.user-search-bar .field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.user-search-bar label {
    font-size: 0.78rem;
    color: var(--clr-text-muted);
    font-weight: 500;
}
.user-search-bar input,
.user-search-bar select {
    padding: 7px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface);
    color: var(--clr-text-primary);
    font-family: var(--font-body);
    font-size: 0.88rem;
    min-width: 140px;
}
/* field-group containing the Search / Clear buttons */
.um-search-btn-group {
    justify-content: flex-end;
}
/* Search submit button — tighter than the default btn-primary */
.um-search-submit {
    padding: 7px 20px;
}
/* Clear filter link */
.um-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 20px;
    font-size: 0.85rem;
    line-height: normal;
    text-decoration: none;
}

/* ── Pagination ───────────────────────────────────────── */
.pagination {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
    font-size: 0.85rem;
}
.pagination a, .pagination span {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface);
    color: var(--clr-text-primary);
    text-decoration: none;
}
.pagination span.current {
    background: var(--clr-accent-primary);
    border-color: var(--clr-accent-primary);
    color: #fff;
}
.pagination span.ellipsis {
    border: none;
    background: none;
    color: var(--clr-text-muted);
}

/* ── User list header (title + count) ────────────────── */
.um-list-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.um-list-title {
    margin-bottom: 0;
}
.um-list-count {
    font-weight: 400;
    color: var(--clr-text-secondary);
    font-size: 0.85rem;
}
/* "No accounts match" paragraph */
.um-empty-note {
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
}
/* Horizontal-scroll wrapper for the user table */
.um-overflow {
    overflow-x: auto;
}

/* ── Add user form ────────────────────────────────────── */
.add-user-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.add-user-form .full-width {
    grid-column: 1 / -1;
}
.add-user-form label {
    display: block;
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    font-weight: 500;
    margin-bottom: 4px;
}
.add-user-form input,
.add-user-form select {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface);
    color: var(--clr-text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    box-sizing: border-box;
}
.add-user-form .field-hint {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    margin-top: 3px;
}
/* Introductory paragraph above the add-user form */
.um-add-note {
    font-size: 0.82rem;
    color: var(--clr-text-muted);
    margin-bottom: 14px;
}
/* Required-field asterisk */
.um-required {
    color: var(--clr-rose-accent);
}
/* "(optional)" label suffix */
.um-optional {
    color: var(--clr-text-muted);
    font-weight: 400;
}
/* Checkbox + label row for "Send welcome email" */
.um-welcome-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.add-user-form .um-welcome-checkbox {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
}
.um-welcome-label {
    flex: 0 0 auto;
    margin-bottom: 0;
    font-size: 0.88rem;
    color: var(--clr-text-secondary);
    cursor: pointer;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 560px) {
    .add-user-form { grid-template-columns: 1fr; }
    .user-table th.hide-mobile,
    .user-table td.hide-mobile { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   19. REGIONS PAGE  (estates panel, region grid, region modal, estate tools)
═══════════════════════════════════════════════════════════════════════════════ */

/* ── Header panel ─────────────────────────────────────────────── */
.estates-header-panel {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-xl, var(--radius-lg));
    box-shadow: var(--shadow-card);
    padding: 20px 24px;
    margin-top: 24px;
}
.estates-header-panel .panel-heading {
    margin: 0;
}
.estates-header-panel .panel-subhead {
    margin: 4px 0 0;
}

/* ── Estate frame ─────────────────────────────────────────────── */
.estate-block {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-xl, var(--radius-lg));
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-top: 24px;
}
.estate-block-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--clr-border-light);
    background: linear-gradient(135deg, var(--clr-surface) 0%, var(--clr-surface-2) 100%);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.estate-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--clr-text-primary);
    margin: 0;
}
.estate-role-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: var(--radius-pill, 999px);
    white-space: nowrap;
}
.estate-role-badge.owner {
    background: color-mix(in srgb, var(--clr-lilac-deep) 14%, transparent);
    color: var(--clr-lilac-deep);
}
.estate-role-badge.manager {
    background: var(--clr-surface-2);
    color: var(--clr-text-secondary);
    border: 1px solid var(--clr-border-light);
}
.estate-block-header-spacer {
    flex: 1;
}
.estate-region-count {
    font-size: 0.78rem;
    color: var(--clr-text-muted);
}
.estate-block-body {
    padding: 22px 24px;
}
.estate-no-regions {
    font-size: 0.85rem;
    color: var(--clr-text-muted);
    margin: 0;
}

/* ── Region grid ──────────────────────────────────────────────── */
.region-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}
.region-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    color: var(--clr-text-primary);
    border-radius: var(--radius-md);
    transition: transform 0.15s;
}
.region-card:hover {
    transform: translateY(-2px);
}
.region-card:focus-visible {
    outline: 2px solid var(--clr-lilac-mid);
    outline-offset: 2px;
}
.region-tile-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--clr-border-light);
    box-shadow: 0 2px 8px rgba(80,40,120,0.08);
    background: var(--clr-map-bg);
    /* Padding so the rounded corners of this wrapper don't clip
       the corners of the map tile image itself — map tiles are
       square with content right up to their edges/corners. */
    padding: 6px;
    box-sizing: border-box;
}
.region-tile-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.region-card-name {
    margin-top: 8px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    word-break: break-word;
}

/* ── Region detail modal (stub) ───────────────────────────────── */
.region-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(20, 10, 40, 0.7);
    backdrop-filter: blur(4px);
    z-index: 500;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.region-modal-overlay.open { opacity: 1; pointer-events: all; }
.region-modal {
    background: var(--clr-surface);
    border-radius: var(--radius-xl, var(--radius-lg));
    box-shadow: 0 20px 60px rgba(20, 10, 40, 0.4);
    width: 100%; max-width: 1100px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    display: flex; flex-direction: column;
    transform: translateY(12px) scale(0.98); transition: transform 0.2s;
    overflow: hidden;
}
.region-modal-overlay.open .region-modal { transform: translateY(0) scale(1); }
.region-modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--clr-border-light);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}
.region-modal-title {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 400;
    color: var(--clr-text-primary);
    margin: 0;
    word-break: break-word;
}
.region-modal-close {
    background: none; border: none; cursor: pointer;
    color: var(--clr-text-secondary);
    padding: 4px; border-radius: var(--radius-md);
    flex-shrink: 0;
    display: flex; align-items: center;
}
.region-modal-close:hover { color: var(--clr-text-primary); background: var(--clr-surface-2); }
.region-modal-body {
    padding: 0 0 20px;
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
/* ── Estate Tools modal: reuses .region-modal-* for structure,
       plus its own manager-list / typeahead styling below ──────── */
.estate-tools-modal {
    max-width: 480px;
}

/* Region Info reuses .estate-tools-modal for structure but needs real
   room to edit in — TinyMCE's toolbar wraps awkwardly and the textarea
   is cramped at 480px. ~2x width on desktop; on narrow viewports the
   shared .region-modal width:100% rule already takes over. */
.region-info-modal {
    max-width: 960px;
}
.estate-tools-modal-body {
    padding: 0 22px 22px;
}
.estate-tools-detail-line {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    margin: 0 0 6px;
}
.estate-tools-detail-line .label {
    color: var(--clr-text-muted);
    font-weight: 500;
}
.estate-tools-section-heading {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--clr-text-primary);
    margin: 20px 0 10px;
}
.estate-tools-manager-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.estate-tools-manager-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-md);
}
.estate-tools-manager-name {
    font-size: 0.85rem;
    color: var(--clr-text-primary);
    word-break: break-word;
}
.estate-tools-manager-row .btn-primary-pill-destructive {
    padding: 5px 14px;
    font-size: 0.75rem;
}
.estate-tools-empty {
    font-size: 0.82rem;
    color: var(--clr-text-muted);
    margin: 0;
}
.estate-tools-loading,
.estate-tools-error {
    font-size: 0.85rem;
    color: var(--clr-text-muted);
    text-align: center;
    padding: 20px 0;
}
.estate-tools-error { color: var(--clr-rose-accent, #e87070); }

/* ── "Add manager" typeahead — adapted from publicprofile.php's
       .pp-search-* pattern, scoped to this modal so it can sit
       inside a fixed-width dialog rather than a full page. ────── */
.estate-tools-add-wrap {
    position: relative;
    margin-top: 4px;
}
.estate-tools-add-input {
    width: 100%;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-family: var(--font-body);
    color: var(--clr-text-primary);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-pill);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.estate-tools-add-input::placeholder { color: var(--clr-text-muted); }
.estate-tools-add-input:focus {
    border-color: var(--clr-lilac-deep);
    box-shadow: 0 0 0 3px rgba(139,104,196,0.15);
}
.estate-tools-add-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(100,70,160,0.14);
    z-index: 50;
    display: none;
    max-height: 220px;
    overflow-x: hidden;
    overflow-y: auto;
}
.estate-tools-add-results.open { display: block; }
.estate-tools-add-result-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    font-size: 0.83rem;
    font-family: var(--font-body);
    color: var(--clr-text-primary);
    background: none;
    border: none;
    border-bottom: 1px solid var(--clr-border-light);
    cursor: pointer;
}
.estate-tools-add-result-item:last-child { border-bottom: none; }
.estate-tools-add-result-item:hover,
.estate-tools-add-result-item:focus {
    background: var(--clr-surface-2);
    outline: none;
}
.estate-tools-add-results-empty,
.estate-tools-add-results-searching {
    padding: 12px 14px;
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    text-align: center;
}
.estate-tools-add-status {
    font-size: 0.78rem;
    color: var(--clr-text-muted);
    margin: 8px 0 0;
    min-height: 1.1em;
}
/* .dissolve-modal-overlay (default.css) is z-index 500 — same as
   .region-modal-overlay above, which the Estate Tools modal reuses.
   #removeManagerModal and #addManagerModal need to stack ABOVE the
   Estate Tools modal they're opened from, so they get page-local
   overrides here rather than changing the shared .dissolve-modal-overlay
   z-index (which would also affect the dissolve-partnership modal on
   profile.php). */
#removeManagerModal,
#addManagerModal {
    z-index: 600;
}
/* Region modal info panel: full-width tinted "header" section.
       Tile + refresh button stacked in a centred left column;
       names in a separated column to the right. ───────────────── */
.region-modal-panel {
    background: linear-gradient(135deg, var(--clr-surface-2) 0%, var(--clr-lilac-soft) 100%);
    border-bottom: 1px solid var(--clr-border-light);
    padding: 24px;
}
.region-modal-info {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.region-modal-tile-col {
    flex: 0 0 240px;
    display: flex;
    justify-content: center;
}
.region-modal-tile-wrap {
    width: 240px;
    height: 240px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-map-bg);
    padding: 10px;
    box-sizing: border-box;
}
.region-modal-tile-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.region-modal-names {
    flex: 1;
    min-width: 0;
    padding: 4px 0 4px 24px;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    align-self: stretch;
}
.region-modal-region-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--clr-text-primary);
    margin: 0;
    word-break: break-word;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.region-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--clr-text-muted);
    position: relative;
    top: -2px;
}
.region-status-dot.status-online  { background: var(--clr-online);  box-shadow: 0 0 0 2px rgba(82,183,136,0.25); }
.region-status-dot.status-offline { background: var(--clr-offline); }
.region-status-dot.status-unknown { background: var(--clr-text-muted); }
.region-modal-maturity {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: var(--clr-lilac-deep);
    border: none;
    border-radius: var(--radius-pill, 999px);
    padding: 3px 10px 3px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s, box-shadow 0.15s;
}
.region-modal-maturity:not(:disabled)::after {
    content: "\270E";
    font-size: 0.68rem;
    line-height: 1;
}
.region-modal-maturity:hover:not(:disabled) {
    background: var(--clr-lilac-text);
    box-shadow: 0 2px 8px rgba(92, 61, 143, 0.25);
}
.region-modal-maturity:disabled {
    font-weight: 500;
    color: var(--clr-text-secondary);
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-light);
    cursor: default;
}
.region-modal-uptime {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--clr-text-secondary);
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-pill, 999px);
    padding: 2px 10px;
}
.region-modal-stats {
    padding: 14px 24px 4px;
}
.region-modal-stats-heading {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--clr-text-secondary);
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.region-modal-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px 10px;
}
.region-modal-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.region-modal-stat-label {
    font-size: 0.65rem;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.region-modal-stat-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--clr-text-primary);
}
.region-modal-stats-note {
    margin: 8px 0 0;
    font-size: 0.72rem;
    color: var(--clr-text-muted);
}
.region-modal-restarts {
    padding: 10px 24px 4px;
}
.region-modal-restarts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}
.region-modal-restarts-table th {
    text-align: left;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 8px 3px 0;
    border-bottom: 1px solid var(--clr-border-light);
}
.region-modal-restarts-table td {
    padding: 2px 8px 2px 0;
    color: var(--clr-text-secondary);
    vertical-align: top;
}
.region-modal-restarts-table td.restart-pending {
    color: var(--clr-text-muted);
    font-style: italic;
}
.region-modal-restarts-table td.restart-error {
    color: var(--clr-rose-accent);
}
.region-modal-restarts-empty {
    font-size: 0.72rem;
    color: var(--clr-text-muted);
    margin: 2px 0 0;
}
.region-modal-estate-line {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    margin: 8px 0 0;
    word-break: break-word;
}
.region-modal-detail-line {
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    margin: 6px 0 0;
}
.region-modal-detail-sep {
    margin: 0 6px;
    color: var(--clr-border-light);
}
.region-modal-estate-line .label,
.region-modal-detail-line .label {
    color: var(--clr-text-secondary);
    font-weight: 500;
}
.region-modal-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.region-modal-actions .btn-primary {
    width: auto;
}
.region-modal-refresh-status {
    font-size: 0.78rem;
    color: var(--clr-text-muted);
    margin: 8px 0 0;
    min-height: 1.1em;
}
@media (max-width: 600px) {
    .region-modal-panel { padding: 18px; }
    .region-modal-info { flex-direction: column; align-items: stretch; }
    .region-modal-tile-col { flex: none; width: 100%; }
    .region-modal-tile-wrap { width: 100%; height: auto; aspect-ratio: 1 / 1; }
    .region-modal-names {
        padding: 16px 0 0;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.12);
    }
}
.region-modal-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--clr-border-light);
    display: flex; justify-content: flex-end;
    flex-shrink: 0;
}
/* .region-modal-footer's own display:flex otherwise silently overrides the
   hidden attribute (author CSS always beats the browser's built-in
   [hidden] { display: none }, regardless of source order) — bit this once
   already for the World Map popover overlay. Region Info's modal is the
   first place with two footers toggled via hidden, so it's the first place
   this actually surfaced; this rule protects any other current/future use
   too. Attribute-selector specificity (0,2,0) beats the class alone
   (0,1,0), so this wins unconditionally. */
.region-modal-footer[hidden] {
    display: none;
}

/* ── Empty state (no estates at all — shouldn't normally happen
       since the page redirects, but kept as a safety net) ──────── */
.estates-empty {
    margin-top: 24px;
    padding: 40px 24px;
    text-align: center;
    color: var(--clr-text-muted);
    font-size: 0.9rem;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-xl, var(--radius-lg));
}

@media (max-width: 600px) {
    .estate-block-header { padding: 14px 18px; }
    .estate-block-body   { padding: 18px; }
    .region-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   20. PORTAL PAGES  (page.php — public CMS page renderer)
═══════════════════════════════════════════════════════════════════════════════ */

/* Content block shared by both the logged-in (.account-panel) and
   logged-out (.login-card-wide) shells. Basic rich-text defaults for
   TinyMCE/plain-text admin-authored content — headings, lists, links. */
.portal-page-content {
    padding: 28px;
    line-height: 1.65;
    color: var(--clr-text-primary);
}
.login-card-wide .portal-page-content { padding: 0; margin-top: 16px; }

.portal-page-content h1,
.portal-page-content h2,
.portal-page-content h3 {
    margin: 1.4em 0 0.5em;
    line-height: 1.3;
}
.portal-page-content h1:first-child,
.portal-page-content h2:first-child,
.portal-page-content h3:first-child { margin-top: 0; }

.portal-page-content p { margin: 0 0 1em; }
.portal-page-content ul,
.portal-page-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.portal-page-content li { margin-bottom: 0.35em; }

.portal-page-content a {
    color: var(--clr-lilac-deep, var(--clr-text-primary));
    text-decoration: underline;
}
.portal-page-content a:hover { text-decoration: none; }

.portal-page-content hr {
    border: none;
    border-top: 1px solid var(--clr-border-light);
    margin: 1.6em 0;
}

.portal-page-content blockquote {
    margin: 0 0 1em;
    padding: 10px 18px;
    border-left: 3px solid var(--clr-lilac-deep, var(--clr-border));
    background: var(--clr-surface-2, rgba(0,0,0,0.02));
    color: var(--clr-text-secondary);
}

.portal-page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.2em;
}
.portal-page-content th,
.portal-page-content td {
    border: 1px solid var(--clr-border-light);
    padding: 8px 12px;
    text-align: left;
}
.portal-page-content th {
    background: var(--clr-surface-2, rgba(0,0,0,0.03));
    font-weight: 600;
}

/* Plain-text pages (is_html=0): content is htmlspecialchars()+linkify()'d
   rather than real markup, so there are no <p>/<ul> tags for the rules
   above to style — fall back to pre-wrap so line breaks in the source
   are preserved, same treatment as News' plain-text posts. */
.portal-page-content.is-plain {
    white-space: pre-wrap;
}

.portal-page-back { display: inline-block; margin-top: 24px; }

/* TinyMCE fullscreen mode: force it above every other fixed/sticky element
   on the page (sticky navbar z-index:100, drawer, modals, etc.) — without
   this, TinyMCE's own fullscreen z-index can end up beneath ours, making
   its toolbar (and the only way to exit fullscreen) render invisibly
   behind the navbar. */
.tox.tox-tinymce.tox-fullscreen,
.tox-fullscreen .tox.tox-tinymce {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10000 !important;
}

/* ─── World Map (world_map.php) ──────────────────────────────────────────── */

.world-map-header-panel {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-xl, var(--radius-lg));
    box-shadow: var(--shadow-card);
    padding: 20px 24px;
    margin-top: 24px;
    margin-bottom: 20px;
}

.world-map-search-wrap {
    position: relative;
    max-width: 360px;
    margin-top: 14px;
}

.world-map-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    background: var(--clr-surface);
    color: var(--clr-text-primary);
    font-size: 0.95rem;
    box-sizing: border-box;
}

.world-map-search-input:focus {
    outline: none;
    border-color: var(--clr-lilac-deep);
}

.world-map-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 260px;
    overflow-y: auto;
}

.world-map-search-result-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--clr-border-light);
    color: var(--clr-text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

.world-map-search-result-item:last-child { border-bottom: none; }

.world-map-search-result-item:hover,
.world-map-search-result-item:focus-visible {
    background: var(--clr-surface-2);
}

.world-map-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}

.world-map-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 2px solid var(--clr-border);
    background: var(--clr-map-bg);
}

.world-map-legend-swatch--accessible {
    border-color: var(--clr-online);
}

.world-map-viewport {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    border: 6px solid var(--clr-border);
    border-radius: 12px;
    background: var(--clr-map-bg);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.world-map-viewport.dragging {
    cursor: grabbing;
}

.world-map-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    will-change: transform;
}

.world-map-loading {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.8rem;
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
}

.world-map-tile {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    overflow: hidden;
    background: var(--clr-map-bg);
    cursor: pointer;
}

.world-map-tile--accessible {
    border-color: var(--clr-online);
}

.world-map-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.world-map-tile-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 5px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.7rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.world-map-popover-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(22, 14, 45, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.world-map-popover-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.world-map-popover {
    position: relative;
    background: var(--clr-surface);
    border-radius: 12px;
    padding: 22px 24px;
    max-width: 960px;
    width: calc(100% - 32px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    /* Region Info can be arbitrarily long (rich text + images), so the card
       caps at 90vh like the other modals (.pick-modal, .msg-modal, etc.) and
       becomes a flex column: name/estate/coords stay put as a fixed header,
       .world-map-popover-info is the one part allowed to scroll (flex: 1 +
       overflow-y: auto below), and the action buttons stay pinned as a
       fixed footer rather than scrolling out of reach. Previously this had
       no max-height at all, so a long Region Info section just pushed the
       card's top/bottom off-screen with no way to scroll to it. */
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.world-map-popover-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--clr-text-secondary);
    cursor: pointer;
    padding: 4px;
}

.world-map-popover-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--clr-text-primary);
    margin: 0 0 2px;
    padding-right: 20px;
    flex-shrink: 0;
}

.world-map-popover-maturity {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--clr-text-secondary);
}

.world-map-popover-estate {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    margin: 0 0 12px;
    flex-shrink: 0;
}

.world-map-popover-info {
    font-size: 0.85rem;
    color: var(--clr-text-primary);
    line-height: 1.5;
    margin: 0 0 16px;
    padding-top: 10px;
    border-top: 1px solid var(--clr-border-light);
    /* The scrollable region — see .world-map-popover's comment above.
       min-height: 0 overrides flex items' default min-height: auto, which
       would otherwise let this grow past the card's max-height instead of
       scrolling (the classic flex-child-won't-shrink gotcha). */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.world-map-popover-info p {
    margin: 0 0 8px;
}

.world-map-popover-info p:last-child {
    margin-bottom: 0;
}

.world-map-popover-info ul,
.world-map-popover-info ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

.world-map-popover-info img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.world-map-popover-coords {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    margin: 0 0 16px;
    flex-shrink: 0;
}

.world-map-popover-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-shrink: 0;
}

.world-map-popover-mytools {
    text-decoration: none;
}

/* Mobile: shorter, viewport-relative canvas height rather than a fixed 600px */
@media (max-width: 640px) {
    .world-map-viewport {
        height: 70vh;
    }

    .world-map-search-wrap {
        max-width: none;
    }
}

/* ── Region Info modal (regions.php) — plain-textarea fallback when
   TinyMCE isn't available; hidden by TinyMCE itself once initialised. ── */
#regionInfoBody {
    width: 100%;
    min-height: 160px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface);
    color: var(--clr-text-primary);
    font-family: var(--font-body);
    font-size: 0.92rem;
    resize: vertical;
    box-sizing: border-box;
}

.region-info-save-status {
    font-size: 0.82rem;
    color: var(--clr-text-muted);
    margin: 8px 0 0;
    min-height: 1.2em;
}


/* ── Setup: instant-save controls, checkboxes, and Save-button notes ─────────
   Visual language used across all Setup tabs:
     - a SLIDING SWITCH (.toggle-switch) acts the moment it is changed;
     - a plain CHECKBOX (.setup-checkbox-label) belongs to a form and only
       takes effect when that form's Save button is pressed — such forms
       carry a .setup-save-note at the top saying so.
   .setup-toggle-status is the small inline "Saved" / error text beside an
   instant-save control. */
.setup-toggle-line { display: flex; align-items: center; gap: 12px; }
.setup-toggle-line select { width: auto; min-width: 200px; flex: 0 1 260px; }
.setup-toggle-status { font-size: 0.8rem; color: var(--clr-text-muted); min-height: 1.2em; }
.setup-toggle-status.is-ok { color: #2e7d52; }
.setup-toggle-status.is-error { color: #a3243d; }

.setup-form-row label.setup-checkbox-label {
    display: flex; align-items: center; gap: 8px;
    font-weight: 500; cursor: pointer; margin-bottom: 0;
}
.setup-checkbox-label input[type="checkbox"] {
    width: 16px; height: 16px; margin: 0; accent-color: var(--clr-lilac-deep);
}

.setup-save-note {
    margin: 0 0 16px; padding: 8px 12px; max-width: 480px;
    font-size: 0.8rem; border-radius: var(--radius-md);
    background: var(--clr-lilac-soft, #f0eaf8); color: var(--clr-lilac-text, #5c4a80);
}

/* ── Setup: reveal-a-saved-secret dialog ────────────────────────────────────
   Reuses .logout-overlay / .logout-card / .logout-actions for the backdrop and
   layout; only the card width, left alignment and the two inputs are new. */
.setup-reveal-card { max-width: 420px; text-align: left; }
.setup-reveal-card p { margin: 0 0 12px; font-size: 0.85rem; color: var(--clr-text-secondary); }
.setup-reveal-input, .setup-reveal-value {
    width: 100%; padding: 8px 12px; box-sizing: border-box;
    font-family: var(--font-body); font-size: 0.85rem;
    color: var(--clr-text-primary); background: var(--clr-surface);
    border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
}
.setup-reveal-input:focus, .setup-reveal-value:focus { outline: none; border-color: var(--clr-lilac-mid); }
.setup-reveal-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    margin-bottom: 8px;
}
.setup-reveal-btn { margin-top: 8px; }