:root {
    --bg: #0a0e17;
    --panel: rgba(15, 26, 46, 0.92);
    --panel-solid: #0f1a2e;
    --blue: #2f8bff;
    --blue-light: #00b4ff;
    --blue-soft: #6fb3ff;
    --blue-glow: rgba(47, 139, 255, 0.55);
    --cyan: #00d4ff;
    --green: #00ff88;
    --red: #ff3860;
    --text: #e0f4ff;
    --muted: #88c8ff;
    --border: rgba(47, 139, 255, 0.5);
}

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

body {
    font-family: 'Courier New', monospace;
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(47, 139, 255, 0.04) 0px,
        rgba(47, 139, 255, 0.04) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 9999;
}

.portal-login-link {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    color: #e6f2ff;
    border: 1px solid var(--blue);
    background: rgba(10, 14, 23, 0.76);
    box-shadow: 0 0 18px rgba(47, 139, 255, 0.28);
    padding: 0.65rem 0.95rem;
    font-size: 0.82rem;
    font-weight: bold;
    letter-spacing: 1.8px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.portal-login-link:hover {
    color: #050a14;
    background: linear-gradient(135deg, var(--blue), var(--blue-light));
    box-shadow: 0 0 26px var(--blue-glow);
}

/* ---------- Login ---------- */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(ellipse at center, #0f1a2e 0%, #0a0e17 70%);
    z-index: 1000;
    transition: opacity 0.6s ease;
}

.login-overlay.preview-landing {
    display: grid;
    grid-template-rows: minmax(80px, 18vh) 1fr;
    justify-items: center;
    align-items: center;
    padding: 1.2rem;
    background:
        radial-gradient(circle at 50% 60%, rgba(47, 139, 255, 0.15), transparent 24%),
        radial-gradient(circle at 50% 48%, rgba(240, 199, 107, 0.14), transparent 30%),
        #000;
    overflow: hidden;
}

.preview-landing::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #000 0%, transparent 16%, transparent 84%, #000 100%),
        linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.18) 26%, transparent 70%, #000 100%);
    pointer-events: none;
}

.preview-brand-logo {
    align-self: end;
    width: min(46vw, 760px);
    min-width: 260px;
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 0 20px rgba(240, 199, 107, 0.25));
}

.preview-hero-art {
    position: absolute;
    left: 50%;
    bottom: -6vh;
    z-index: 1;
    width: min(58vw, 900px);
    max-height: 80vh;
    object-fit: contain;
    transform: translateX(-50%);
    opacity: 0.58;
    filter: drop-shadow(0 20px 42px rgba(0, 0, 0, 0.72));
}

.login-panel {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 3rem;
    background: var(--panel);
    border: 2px solid var(--blue);
    box-shadow: 0 0 30px var(--blue-glow), inset 0 0 30px rgba(47, 139, 255, 0.12);
    max-width: 420px;
    width: 90%;
    animation: floatIn 0.7s ease;
}

.login-header { margin-bottom: 2rem; }

.logo-icon {
    font-size: 3rem;
    color: var(--blue);
    text-shadow: 0 0 20px var(--blue-glow);
    animation: pulse 2s ease-in-out infinite;
}

.login-header h1 {
    font-size: 2.6rem;
    color: #fff;
    text-shadow: 0 0 12px var(--blue-glow);
    margin: 0.5rem 0;
    letter-spacing: 4px;
}

.login-subtitle {
    font-size: 0.8rem;
    color: var(--blue-soft);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.35);
}

.input-group textarea {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    padding: 0.75rem;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
}

.input-group input,
.input-group select,
.input-group textarea {
    flex: 1;
    background: rgba(15, 26, 46, 0.92);
    border: none;
    color: #e6f2ff;
    padding: 0.75rem;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
}

/* Firefox: cover the native cream background when a saved password is autofilled */
.input-group input:-internal-autofill-selected {
    background: rgba(15, 26, 46, 0.92) !important;
    color: #e6f2ff !important;
}

/* Chrome / WebKit autofill */
.input-group input::-webkit-autofill {
    background: rgba(15, 26, 46, 0.92) !important;
    color: #e6f2ff !important;
    -webkit-text-fill-color: #e6f2ff !important;
}

.input-group textarea { resize: vertical; }

.prompt {
    padding: 0.75rem;
    color: var(--blue);
    font-weight: bold;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    outline: none;
    background: rgba(47, 139, 255, 0.12);
}

.login-btn {
    width: 100%;
    padding: 1rem;
    margin-top: 1rem;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
    border: none;
    color: #050a14;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: box-shadow 0.3s ease;
}

.login-btn:hover { box-shadow: 0 0 30px var(--blue-glow); }

.btn-scan {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    animation: scan 2s ease-in-out infinite;
}

.error {
    margin-top: 1rem;
    color: var(--red);
    font-size: 0.9rem;
    min-height: 1.5em;
    text-shadow: 0 0 5px rgba(255, 56, 96, 0.5);
}

.hint-box {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.hint-label {
    font-size: 0.7rem;
    color: var(--blue-soft);
    letter-spacing: 2px;
    margin-bottom: 0.3rem;
}

.hint-text { font-size: 0.85rem; color: #fff; }

/* ---------- Dashboard layout ---------- */
.dashboard {
    padding: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-title {
    text-align: center;
    margin: 1.5rem 0 2rem;
}

.page-title h1 {
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 0 12px var(--blue-glow);
    letter-spacing: 3px;
}

.page-subtitle { color: var(--muted); margin-top: 0.4rem; font-size: 0.9rem; }
.page-subtitle strong { color: var(--blue-soft); }

.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--panel);
    border: 1px solid var(--blue);
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.status-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.logo-small {
    font-size: 1.5rem;
    color: var(--blue);
    text-shadow: 0 0 10px var(--blue-glow);
}

.system-name {
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
}

.divider { color: var(--blue); margin: 0 0.5rem; }
.status-label { color: var(--muted); font-size: 0.85rem; }

.status-center { flex: 1; text-align: center; min-width: 200px; }

.status-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.status-indicator { font-size: 1.2rem; }
.online {
    color: var(--green);
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
    animation: pulse 2s ease-in-out infinite;
}
.status-text { color: var(--green); font-size: 0.9rem; }
.status-text:hover { text-decoration: underline; cursor: pointer; }
.logout-link { color: var(--red); text-decoration: none; font-size: 0.85rem; font-weight: bold; }

.user-badge {
    background: rgba(47, 139, 255, 0.18);
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--blue);
    font-size: 0.85rem;
    color: #fff;
}

.main-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.nav-link {
    color: var(--muted);
    text-decoration: none;
    padding: 0.4rem 0.9rem;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    transition: all 0.25s ease;
}
.nav-link:hover { color: #fff; border-color: var(--blue); }
.nav-link.active {
    color: #050a14;
    background: linear-gradient(135deg, var(--blue), var(--blue-light));
    border-color: var(--blue);
    box-shadow: 0 0 15px var(--blue-glow);
}

/* ---------- Grid / Panels ---------- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--blue);
    box-shadow: 0 0 20px rgba(47, 139, 255, 0.2);
}

.panel-primary { border-color: var(--blue-light); box-shadow: 0 0 30px rgba(0, 180, 255, 0.3); }
.panel-secondary { border-color: var(--blue); }
.full-width { grid-column: 1 / -1; }

.panel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: rgba(47, 139, 255, 0.12);
    border-bottom: 1px solid var(--blue);
    flex-wrap: wrap;
}

.panel-icon { color: var(--blue); font-size: 1rem; }
.panel-header span:last-child {
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-left: auto;
}

.panel-body { padding: 1.5rem; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.logout-card { border-color: var(--red); }

.status-grid { display: grid; gap: 1rem; }

.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(47, 139, 255, 0.05);
    border-left: 3px solid var(--blue);
}

.status-row span:first-child { color: var(--muted); font-size: 0.9rem; }
.value { color: #fff; font-weight: bold; }
.online-text { color: var(--green); text-shadow: 0 0 5px rgba(0, 255, 136, 0.6); }

.log-container { max-height: 400px; overflow-y: auto; font-size: 0.9rem; }
.log-entry {
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(47, 139, 255, 0.1);
    animation: fadeIn 0.3s ease;
}
.log-entry .timestamp { color: var(--blue-soft); margin-right: 0.75rem; }

/* ---------- Hub cards ---------- */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
}

.hub-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.2rem;
    background: rgba(47, 139, 255, 0.06);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: all 0.3s ease;
    flex-direction: column;
}

.hub-card:hover {
    border-color: var(--blue-light);
    box-shadow: 0 0 20px rgba(47, 139, 255, 0.35);
    transform: translateY(-3px);
}

.hub-icon {
    font-size: 2rem;
    color: var(--blue);
    text-shadow: 0 0 12px var(--blue-glow);
    flex-shrink: 0;
}

.hub-text h3 {
    color: #fff;
    letter-spacing: 2px;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}
.hub-text p { font-size: 0.8rem; color: var(--muted); }

.group-card { position: relative; }
.group-card form { width: 100%; margin-top: 0.8rem; }
.group-btn { margin-top: 0; }

.group-tag {
    display: inline-block;
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    margin-right: 0.3rem;
    margin-top: 0.4rem;
    color: var(--blue-soft);
    border: 1px solid var(--blue);
    border-radius: 2px;
}
.group-tag.members { color: var(--green); border-color: var(--green); }
.group-tag.role { color: var(--cyan); border-color: var(--cyan); }

/* ---------- Login button variants ---------- */
.post-submit, .group-btn { width: auto; padding: 0.7rem 1.2rem; font-size: 0.9rem; margin-top: 0; }
.group-btn { margin-top: 0; }
.leave-btn { background: linear-gradient(135deg, #ff3860, #ff7ba8); }
.disabled-btn { opacity: 0.5; cursor: not-allowed; }

.row-inputs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.row-inputs select, .row-inputs input {
    flex: 1;
    min-width: 120px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    padding: 0.6rem;
    font-family: 'Courier New', monospace;
}

/* ---------- Feed ---------- */
.feed-list { display: grid; gap: 1.2rem; }
.feed-post {
    padding: 1.2rem;
    background: rgba(47, 139, 255, 0.05);
    border: 1px solid var(--border);
}
.feed-post-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}
.feed-author { color: var(--blue-soft); font-weight: bold; }
.feed-content { margin-bottom: 0.8rem; line-height: 1.5; }
.feed-media { margin-bottom: 0.8rem; }
.feed-media img { max-width: 100%; border: 1px solid var(--blue); display: block; }
.feed-media.video video { width: 100%; border: 1px solid var(--blue); max-height: 320px; }
.feed-actions { display: flex; gap: 1rem; }
.like-btn {
    background: transparent;
    border: 1px solid var(--blue);
    color: var(--blue-soft);
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    font-family: 'Courier New', monospace;
}
.like-btn:hover { background: rgba(47, 139, 255, 0.15); }

/* ---------- Products ---------- */
.product-card { align-items: stretch; }
.product-img { width: 100%; height: 140px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 0.8rem; background: #0d1626; }
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.product-placeholder {
    display: flex; align-items: center; justify-content: center; height: 100%;
    color: var(--blue); font-weight: bold; letter-spacing: 3px;
}
.product-price { color: #fff; font-size: 1.3rem; font-weight: bold; margin: 0.4rem 0; }

/* ---------- News ---------- */
.news-list { display: grid; gap: 1.2rem; }
.news-card {
    display: flex;
    gap: 1rem;
    padding: 1.2rem;
    background: rgba(47, 139, 255, 0.05);
    border: 1px solid var(--border);
}
.news-img { flex-shrink: 0; }
.news-img img { width: 180px; height: 120px; object-fit: cover; border: 1px solid var(--blue); }
.news-body h3 { color: #fff; margin: 0.3rem 0; }
.news-body p { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.5rem; }
.news-meta { font-size: 0.8rem; color: var(--blue-soft); }

/* ---------- Profile ---------- */
.profile-hero { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.avatar-placeholder {
    width: 70px; height: 70px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; font-weight: bold; color: #050a14;
    background: linear-gradient(135deg, var(--blue), var(--blue-light));
    border: 2px solid var(--blue);
    box-shadow: 0 0 15px var(--blue-glow);
}
.avatar-img {
    width: 70px; height: 70px;
    object-fit: cover;
    border: 2px solid var(--blue);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--blue-glow);
}
.profile-hero-text h2 { color: #fff; }
.profile-handle { display: block; color: var(--muted); font-size: 0.9rem; margin-bottom: 0.3rem; }
.my-groups { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }

.cart-body { display: grid; gap: 0.8rem; }
.cart-count, .cart-total { font-size: 1rem; color: #fff; }
.cart-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem; border: 1px solid var(--border);
}
.remove-link { background: none; border: none; cursor: pointer; }

.hidden-input { display: none; }

/* ---------- Footer ---------- */
.footer-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--panel);
    border: 1px solid var(--blue);
    font-size: 0.85rem;
    color: var(--muted);
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* ---------- Installer ---------- */
.install-wrap { max-width: 640px; margin: 6rem auto; padding: 2rem; background: var(--panel); border: 2px solid var(--blue); box-shadow: 0 0 30px var(--blue-glow); }
.install-wrap h1 { color: #fff; margin-bottom: 1.5rem; text-shadow: 0 0 10px var(--blue-glow); }
.install-step { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; margin-bottom: .5rem; background: rgba(47,139,255,.07); border-left: 3px solid var(--blue); }
.install-step .icon { font-size: 1.2rem; }
.install-step.ok .icon { color: var(--green); }
.install-step.err .icon { color: var(--red); }
.install-step.err { border-left-color: var(--red); }
.cta { display: inline-block; margin-top: 1.5rem; padding: 1rem 2rem; background: linear-gradient(135deg,#2f8bff,#00b4ff); color: #050a14; text-decoration: none; font-weight: bold; letter-spacing: 2px; }

/* ---------- Animations ---------- */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes scan { 0% { top: -100%; } 100% { top: 100%; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes floatIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(47, 139, 255, 0.1); }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue-light); }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .status-bar { padding: 1rem; }
    .dashboard { padding: 0.75rem; }
    .news-card { flex-direction: column; }
    .news-img img { width: 100%; height: auto; }
    .login-panel { padding: 2rem 1.5rem; }
}

/* ---------- Preview landing polish (2026-09-18) ---------- */
html {
    background: #000;
    overflow-x: hidden;
}

body.preview-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 48%, rgba(47, 139, 255, 0.12), transparent 26rem),
        radial-gradient(circle at 50% 18%, rgba(240, 199, 107, 0.08), transparent 18rem),
        #000;
    overflow-x: hidden;
}

.preview-shell {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
}

.preview-edge-vignette {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
        linear-gradient(90deg, #000 0%, transparent 16%, transparent 84%, #000 100%),
        linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.06) 25%, transparent 68%, #000 100%);
}

.preview-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 7;
    display: grid;
    place-items: start center;
    min-height: clamp(4.8rem, 15vh, 7rem);
    padding: clamp(0.55rem, 1.4vw, 0.9rem) 1rem 0;
    pointer-events: none;
}

.preview-brand-logo {
    display: block;
    width: clamp(13rem, 30vw, 26rem);
    filter: none;
    pointer-events: auto;
}

.preview-brand-logo img {
    display: block;
    width: 100%;
    height: auto;
}

body.preview-page .portal-login-link {
    position: fixed;
    top: clamp(0.8rem, 1.8vw, 1.5rem);
    right: clamp(0.8rem, 1.8vw, 1.5rem);
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.7rem 1rem;
    color: #f4fbff;
    border: 1px solid var(--blue);
    background: rgba(0, 0, 0, 0.66);
    box-shadow: 0 0 18px rgba(47, 139, 255, 0.25);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
    pointer-events: auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

body.preview-page .portal-login-link:hover,
.preview-primary-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 28px rgba(47, 139, 255, 0.42);
}

.preview-hero {
    position: relative;
    z-index: 5;
    display: grid;
    place-items: end center;
    min-height: 100vh;
    padding: clamp(6rem, 18vh, 8rem) 1rem clamp(1.2rem, 4vh, 2.5rem);
}

.preview-hero-art {
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: max(-7rem, -11vh);
    width: min(62rem, 82vw);
    max-height: 92vh;
    object-fit: contain;
    transform: translateX(-50%);
    opacity: 0.82;
    filter: drop-shadow(0 2rem 3rem rgba(0, 0, 0, 0.78));
}

.preview-hero-open {
    place-items: center;
    padding-bottom: 0;
}

.preview-hero-open .preview-hero-art {
    bottom: max(-5rem, -8vh);
    opacity: 0.9;
}

.preview-access-panel {
    width: min(28rem, 100%);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
    backdrop-filter: none;
    text-shadow: 0 2px 14px #000, 0 0 18px rgba(0, 0, 0, 0.8);
}

.preview-panel-kicker,
.preview-subtitle,
.preview-status-pill {
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

.preview-panel-kicker {
    color: #f0c76b;
    font-size: 0.7rem;
}

.preview-access-panel h1 {
    margin: 0.4rem 0 0.25rem;
    color: #fff;
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    line-height: 0.95;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 14px #000;
}

.preview-subtitle {
    margin: 0 0 0.85rem;
    color: var(--blue-soft);
    font-size: clamp(0.72rem, 2vw, 0.85rem);
}

.preview-intro {
    max-width: 21rem;
    margin: 0 auto 1rem;
    color: #d5e8f5;
    font-size: 0.88rem;
    line-height: 1.5;
}

.preview-cta-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

.preview-primary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.6rem;
    padding: 0.85rem 1.1rem;
    color: #06101b;
    border: 1px solid var(--blue);
    background: linear-gradient(135deg, var(--blue), var(--blue-light));
    box-shadow: 0 0 16px rgba(0, 180, 255, 0.22);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.preview-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.85rem;
    color: var(--blue-soft);
    border: 1px solid rgba(139, 201, 255, 0.28);
    background: rgba(0, 0, 0, 0.46);
    font-size: 0.72rem;
}

.click-ripple {
    position: fixed;
    z-index: 100;
    border: 1px solid rgba(139, 201, 255, 0.72);
    border-radius: 50%;
    pointer-events: none;
    animation: ripple 0.6s ease-out forwards;
}

@keyframes ripple {
    from {
        opacity: 0.9;
        transform: scale(0.4);
    }

    to {
        opacity: 0;
        transform: scale(3.4);
    }
}

@media (max-width: 720px) {
    .preview-topbar {
        min-height: 4.6rem;
        padding-top: 0.75rem;
    }

    .preview-brand-logo {
        justify-self: start;
        width: min(46vw, 14rem);
    }

    body.preview-page .portal-login-link {
        top: 0.75rem;
        right: 0.75rem;
        min-height: 2.35rem;
        padding: 0.55rem 0.7rem;
        font-size: 0.7rem;
        letter-spacing: 0.08em;
    }

    .preview-hero {
        min-height: 100vh;
        padding-top: 6rem;
        padding-bottom: 1.5rem;
    }

    .preview-hero-art {
        bottom: -3.5rem;
        width: min(40rem, 100vw);
        opacity: 0.78;
    }

    .preview-access-panel {
        width: min(22rem, calc(100vw - 2rem));
    }
}

@media (max-width: 430px) {
    .preview-topbar {
        width: 100%;
        gap: 0.75rem;
    }

    body.preview-page .portal-login-link {
        max-width: 8rem;
        text-align: center;
    }

    .preview-access-panel h1 {
        letter-spacing: 0.05em;
    }
}

/* ---------- Community shell (2026-09-20) ---------- */
html { background: #f5f7fa; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f5f7fa; color: #161a22; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(34,104,216,.035), transparent 36%); z-index: -1; }
.scanlines { display: none; }
.site-frame { min-height: 100vh; display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
.site-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.4rem 1rem; background: #121821; color: #dbe4ef; }
.sidebar-brand { display: block; padding: .35rem .6rem 1.8rem; }
.sidebar-brand img { display: block; width: min(10.5rem, 100%); height: auto; filter: brightness(0) invert(1); }
.sidebar-label, .eyebrow { color: #8b98a9; font-size: .68rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-label { padding: 0 .75rem .65rem; }
.site-sidebar .main-nav { display: grid; gap: .2rem; justify-content: stretch; }
.site-sidebar .nav-link { display: block; padding: .72rem .75rem; border: 0; border-radius: 5px; color: #aeb9c8; font-size: .9rem; letter-spacing: 0; text-transform: none; }
.site-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.07); border-color: transparent; }
.site-sidebar .nav-link.active { color: #fff; background: #2268d8; border-color: #2268d8; box-shadow: none; }
.sidebar-public-link, .sidebar-logout { display: block; margin-top: .8rem; padding: .72rem .75rem; color: #aeb9c8; font-size: .82rem; text-decoration: none; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-logout { margin-top: auto; color: #ff9aa9; }
.site-content { min-width: 0; }
.content-topbar, .public-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 4.6rem; padding: 0 3.4rem; border-bottom: 1px solid #e3e8ee; background: rgba(255,255,255,.9); }
.content-topbar .eyebrow, .topbar-context { color: #7a8593; }
.status-dot { display: inline-block; width: .48rem; height: .48rem; margin: 0 .4rem; border-radius: 50%; vertical-align: middle; background: #22a06b; }
.topbar-user { display: flex; align-items: center; gap: .8rem; color: #4d5664; font-size: .86rem; }
.topbar-user a, .content-topbar a { color: #2268d8; text-decoration: none; }
.dashboard { max-width: 78rem; padding: 2.2rem 3.4rem 3rem; margin: 0; }
.page-title { display: none; }
.workspace-intro, .dashboard-welcome { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.8rem; }
.workspace-intro h2, .dashboard-welcome h2 { margin: .35rem 0 .45rem; color: #161a22; font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.035em; }
.workspace-intro p:not(.eyebrow), .dashboard-welcome p:not(.eyebrow) { max-width: 42rem; margin: 0; color: #6b7582; line-height: 1.6; }
.button-primary, .button-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 2.7rem; padding: .72rem 1rem; border-radius: 4px; font-size: .84rem; font-weight: 750; text-decoration: none; cursor: pointer; }
.button-primary { border: 1px solid #2268d8; color: #fff; background: #2268d8; }
.button-primary:hover { background: #174fa8; box-shadow: none; }
.button-secondary { border: 1px solid #cbd4df; color: #354150; background: #fff; }
.button-secondary:hover { border-color: #2268d8; color: #2268d8; }
.panel { background: #fff; border: 1px solid #e0e5eb; border-radius: 6px; box-shadow: 0 6px 22px rgba(24,38,57,.04); }
.panel-primary, .panel-secondary { border-color: #e0e5eb; box-shadow: 0 6px 22px rgba(24,38,57,.04); }
.panel-header { min-height: 3.3rem; padding: .95rem 1.2rem; color: #202733; background: #fff; border-bottom: 1px solid #edf0f3; }
.panel-header span:last-child { margin-left: auto; font-size: .82rem; letter-spacing: 0; text-transform: none; }
.panel-header-note { color: #8a95a2; font-size: .75rem !important; font-weight: 500 !important; }
.panel-body { padding: 1.2rem; }
.footer-bar { display: none; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.2rem; }
.metric-card { display: grid; gap: .45rem; padding: 1.15rem; color: #161a22; text-decoration: none; background: #fff; border: 1px solid #e0e5eb; border-radius: 6px; }
.metric-card:hover { border-color: #2268d8; }
.metric-label, .card-meta { color: #7a8593; font-size: .75rem; }
.metric-card strong { font-size: 1.9rem; letter-spacing: -.04em; }
.metric-card span:last-child { color: #2268d8; font-size: .78rem; }
.dashboard-columns, .feed-page-layout, .profile-page-grid, .feed-management-grid, .inbox-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr); gap: 1.2rem; margin-bottom: 1.2rem; }
.action-list { display: grid; gap: .3rem; }
.action-list a { display: grid; gap: .25rem; padding: .85rem; color: #202733; text-decoration: none; border-bottom: 1px solid #edf0f3; }
.action-list a:hover { background: #f7f9fb; }
.action-list span, .muted-copy { color: #7a8593; font-size: .82rem; }
.main-nav { display: flex; }
.standard-input, .standard-textarea, .composer-textarea, .composer-controls select { width: 100%; padding: .78rem .85rem; border: 1px solid #cbd4df; border-radius: 4px; color: #1b222d; background: #fff; font: inherit; }
.standard-input:focus, .standard-textarea:focus, .composer-textarea:focus, .composer-controls select:focus { outline: 2px solid rgba(34,104,216,.18); border-color: #2268d8; }
.standard-textarea, .composer-textarea { resize: vertical; }
.field-label { display: grid; gap: .45rem; margin-bottom: 1rem; color: #4b5664; font-size: .8rem; font-weight: 700; }
.composer-controls { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(10rem, 1fr) auto auto; gap: .65rem; align-items: center; margin-top: .75rem; }
.file-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.65rem; padding: .65rem .8rem; border: 1px dashed #b9c4d0; border-radius: 4px; color: #5d6876; background: #f8fafc; font-size: .78rem; cursor: pointer; white-space: nowrap; }
.file-button input { display: none; }
.feed-side-rail, .inbox-folders { align-self: start; display: grid; gap: .3rem; padding: 1rem; background: #fff; border: 1px solid #e0e5eb; border-radius: 6px; }
.side-rail-title { margin: 0 0 .45rem; color: #4c5765; font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.feed-rail-item, .inbox-folders a { display: grid; gap: .2rem; padding: .72rem; color: #27303b; text-decoration: none; border-radius: 4px; }
.feed-rail-item:hover, .inbox-folders a:hover, .inbox-folders a.active { background: #eef4fe; color: #2268d8; }
.feed-rail-item span { color: #87919e; font-size: .75rem; }
.feed-list { display: grid; gap: .8rem; }
.feed-post { padding: 1rem; background: #fff; border: 1px solid #e0e5eb; border-radius: 5px; }
.feed-post-head { margin-bottom: .35rem; }
.feed-author { color: #202733; }
.feed-time { color: #9099a6; font-size: .75rem; }
.feed-content { margin: .65rem 0; color: #414c5b; line-height: 1.55; }
.feed-media img { max-width: 100%; max-height: 28rem; object-fit: contain; border: 1px solid #e0e5eb; }
.like-btn { border: 1px solid #cbd4df; border-radius: 4px; color: #516071; background: #fff; font: inherit; font-size: .78rem; cursor: pointer; }
.like-btn:hover { background: #eef4fe; border-color: #2268d8; }
.success-banner, .form-note { margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 4px; font-size: .85rem; }
.success-banner { color: #176044; background: #ecf8f2; border: 1px solid #bbecd5; }
.error-note { color: #9f2532; background: #fff1f2; border: 1px solid #f1c2c7; }
.feed-management-card, .review-row { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid #edf0f3; }
.feed-management-card:last-child, .review-row:last-child { border-bottom: 0; }
.feed-management-card h3, .review-row h3 { margin: .35rem 0; color: #202733; font-size: 1rem; }
.feed-management-card p, .review-row p { margin: 0; color: #7a8593; font-size: .84rem; line-height: 1.45; }
.card-stat { color: #7a8593; font-size: .75rem; white-space: nowrap; }
.message-list { display: grid; gap: 0; }
.message-row { display: flex; gap: .8rem; padding: 1rem 0; border-bottom: 1px solid #edf0f3; }
.message-row:last-child { border-bottom: 0; }
.message-avatar, .public-post-avatar { display: grid; place-items: center; flex: 0 0 2.3rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; color: #fff; background: #2268d8; font-size: .8rem; font-weight: 750; }
.message-copy { min-width: 0; flex: 1; }
.message-copy > div { display: flex; justify-content: space-between; gap: 1rem; }
.message-copy p { margin: .3rem 0 0; color: #7a8593; font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.upload-strip { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.media-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .8rem; }
.media-gallery figure { margin: 0; padding: .35rem; border: 1px solid #e0e5eb; border-radius: 4px; background: #f8fafc; }
.media-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-gallery figcaption { padding: .45rem .25rem .2rem; color: #7a8593; font-size: .72rem; }
.profile-bio { margin: 0 0 1.1rem; color: #6b7582; line-height: 1.55; }
.review-list { display: grid; }
.review-row form { display: flex; gap: .5rem; flex-shrink: 0; }
.review-image { max-width: 14rem; margin-top: .6rem; }
.empty-state { margin: 0; padding: 1rem 0; color: #87919e; font-size: .88rem; }

/* Public www */
.public-page { background: #f7f8fa; }
.public-shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; }
.public-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.5rem 1rem; color: #dbe4ef; background: #121821; }
.public-brand { display: block; padding: .4rem .6rem; }
.public-brand img { width: 10.5rem; filter: brightness(0) invert(1); }
.public-kicker { margin: .8rem .6rem 2rem; color: #8b98a9; font-size: .66rem; font-weight: 750; letter-spacing: .12em; }
.public-nav { display: grid; gap: .25rem; }
.public-nav a { padding: .75rem .7rem; color: #aeb9c8; border-radius: 4px; text-decoration: none; }
.public-nav a:hover, .public-nav a.active { color: #fff; background: #2268d8; }
.sidebar-note { display: flex; align-items: start; gap: .35rem; margin-top: auto; padding: .9rem .6rem; color: #8894a3; border-top: 1px solid rgba(255,255,255,.08); font-size: .75rem; line-height: 1.4; }
.public-main { min-width: 0; }
.public-topbar { position: sticky; top: 0; z-index: 5; }
.topbar-login { color: #2268d8; font-size: .84rem; font-weight: 750; text-decoration: none; }
.account-menu { position: relative; }
.account-menu summary { cursor: pointer; list-style: none; color: #45515f; font-size: .84rem; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu-panel { position: absolute; top: calc(100% + .65rem); right: 0; display: grid; min-width: 13rem; padding: .4rem; background: #fff; border: 1px solid #e0e5eb; border-radius: 5px; box-shadow: 0 .8rem 2rem rgba(19,31,48,.12); }
.account-menu-panel a { padding: .65rem .75rem; color: #45515f; font-size: .8rem; text-decoration: none; border-radius: 3px; }
.account-menu-panel a:hover { color: #2268d8; background: #eef4fe; }
.public-hero { display: grid; grid-template-columns: minmax(18rem, .8fr) minmax(26rem, 1.2fr); align-items: center; gap: 2rem; min-height: 39rem; padding: 4rem clamp(2rem, 5vw, 6rem) 3rem; background: #eef4fb; border-bottom: 1px solid #e0e5eb; }
.hero-copy { max-width: 33rem; }
.hero-copy h1 { margin: .55rem 0 1rem; color: #141923; font-size: clamp(2.6rem, 5vw, 5.2rem); line-height: .98; letter-spacing: -.055em; }
.hero-copy h1 span { color: #2268d8; }
.hero-copy > p:not(.eyebrow) { max-width: 29rem; margin: 0; color: #647080; font-size: 1.03rem; line-height: 1.65; }
.hero-actions { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1.4rem; }
.hero-art-wrap { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr); align-items: center; min-height: 28rem; align-self: stretch; overflow: hidden; padding: 1.25rem 1.1rem 0; border-radius: 6px; background: #172334; }
.hero-art-wrap::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 50%, rgba(5,10,18,.8)); }
.hero-art-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .9; }
.hero-wordmark { position: relative; z-index: 3; display: block; width: min(80%,26rem); height: auto !important; margin: 0 auto .15rem; object-fit: contain !important; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.hero-characters { position: relative; z-index: 1; display: block; min-height: 0; object-fit: contain !important; object-position: center bottom !important; }
.hero-art-caption { position: absolute; z-index: 4; left: 1.4rem; right: 1.4rem; bottom: 1.25rem; display: grid; gap: .25rem; color: #fff; }
.hero-art-caption span { color: #9bc1ff; font-size: .68rem; font-weight: 750; letter-spacing: .14em; }
.hero-art-caption strong { font-size: 1.25rem; }
.public-section { padding: 4.6rem clamp(2rem, 5vw, 6rem); border-bottom: 1px solid #e0e5eb; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.section-heading h2 { margin: .35rem 0 0; color: #161a22; font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.04em; }
.text-link { color: #2268d8; font-size: .82rem; font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.public-news-card { overflow: hidden; background: #fff; border: 1px solid #e0e5eb; border-radius: 6px; }
.news-card-art { display: flex; align-items: end; min-height: 9rem; padding: 1rem; color: #fff; background: linear-gradient(140deg, #3c77c4, #13253f); }
.news-card-art.palworld { background: linear-gradient(140deg, #4d925e, #173832); }
.news-card-art.7 { background: linear-gradient(140deg, #aa6f3e, #271c1c); }
.news-card-art.starcraft { background: linear-gradient(140deg, #4f5bc6, #161c4a); }
.news-card-art span { padding: .35rem .5rem; color: #fff; background: rgba(0,0,0,.25); border-radius: 3px; font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.public-news-body { padding: 1rem; }
.public-news-body h3 { margin: .45rem 0; color: #1f2732; font-size: 1.05rem; line-height: 1.3; }
.public-news-body p:not(.card-meta) { margin: 0 0 .9rem; color: #717d8a; font-size: .84rem; line-height: 1.5; }
.public-feed-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(16rem, .5fr); gap: 1.2rem; }
.public-feed-list { display: grid; gap: .6rem; }
.public-post { display: flex; gap: .8rem; padding: 1rem; background: #fff; border: 1px solid #e0e5eb; border-radius: 5px; }
.public-post-meta { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.public-post-meta strong { color: #202733; font-size: .87rem; }
.public-post-meta span { color: #9099a6; font-size: .72rem; }
.public-post p { margin: 0; color: #566270; font-size: .85rem; line-height: 1.5; }
.public-post-media { display: block; max-width: min(100%, 30rem); max-height: 18rem; margin-top: .7rem; object-fit: cover; border-radius: 4px; }
.feed-callout { align-self: start; padding: 1.3rem; background: #162237; color: #fff; border-radius: 6px; }
.feed-callout h3 { margin: .4rem 0 .7rem; font-size: 1.35rem; line-height: 1.2; }
.feed-callout p:not(.eyebrow) { margin: 0 0 1rem; color: #b9c9dd; font-size: .85rem; line-height: 1.55; }
.feed-callout .button-primary { width: 100%; color: #102037; background: #9bc1ff; border-color: #9bc1ff; }
.merch-feature { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .6fr); align-items: center; gap: 2rem; overflow: hidden; background: #151a22; border-radius: 6px; }
.merch-feature img { display: block; width: 100%; height: 20rem; object-fit: cover; }
.merch-feature > div { padding: 1.5rem 2rem 1.5rem 0; }
.merch-feature h3 { margin: .45rem 0 .7rem; color: #fff; font-size: 1.7rem; }
.merch-feature p:not(.eyebrow) { margin: 0; color: #b1bdcb; line-height: 1.55; }
.public-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem clamp(2rem, 5vw, 6rem); color: #7d8895; font-size: .76rem; }
.filter-row { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filter-chip { padding: .55rem .75rem; color: #657181; background: #fff; border: 1px solid #dce2e8; border-radius: 999px; font-size: .78rem; text-decoration: none; }
.filter-chip.active, .filter-chip:hover { color: #2268d8; border-color: #2268d8; }
.public-news-list { display: grid; gap: .8rem; }
.public-news-list .news-card { display: grid; grid-template-columns: 14rem minmax(0,1fr); gap: 1rem; padding: 0; background: #fff; border: 1px solid #e0e5eb; border-radius: 6px; }
.public-news-list .news-card-art { min-height: 100%; }
.public-news-list .news-body { padding: 1.1rem 1.1rem 1.1rem 0; }
@media (max-width: 960px) { .site-frame, .public-shell { grid-template-columns: 12rem minmax(0,1fr); } .dashboard, .content-topbar { padding-left: 1.5rem; padding-right: 1.5rem; } .public-hero { grid-template-columns: 1fr; } .hero-art-wrap { min-height: 22rem; } .news-grid { grid-template-columns: 1fr; } .public-feed-layout, .merch-feature { grid-template-columns: 1fr; } .merch-feature > div { padding: 0 1.5rem 1.5rem; } }
@media (max-width: 720px) { .site-frame, .public-shell { display: block; } .site-sidebar, .public-sidebar { position: static; height: auto; padding: .9rem 1rem; } .sidebar-brand, .public-brand { padding-bottom: .7rem; } .sidebar-label, .public-kicker { margin: 0 0 .5rem; } .site-sidebar .main-nav, .public-nav { display: flex; overflow-x: auto; } .site-sidebar .nav-link, .public-nav a { white-space: nowrap; } .sidebar-public-link, .sidebar-logout, .sidebar-note { display: none; } .content-topbar, .public-topbar { padding: 0 1rem; } .dashboard { padding: 1.5rem 1rem 2rem; } .workspace-intro, .dashboard-welcome, .section-heading { align-items: start; flex-direction: column; } .dashboard-metrics, .dashboard-columns, .feed-page-layout, .profile-page-grid, .feed-management-grid, .inbox-layout { grid-template-columns: 1fr; } .composer-controls { grid-template-columns: 1fr 1fr; } .message-form-grid { grid-template-columns: 1fr; } .public-hero, .public-section { padding: 3rem 1rem; } .public-topbar { min-height: 3.8rem; } .hero-art-wrap { min-height: 18rem; } .public-news-list .news-card { grid-template-columns: 1fr; } .public-news-list .news-card-art { min-height: 9rem; } .public-news-list .news-body { padding: 0 1rem 1rem; } .public-footer { padding: 1rem; } }

/* ---------- Black player workspace ---------- */
body:not(.public-page) { background: #050609; color: #e7eef8; }
body:not(.public-page) .site-content { min-height: 100vh; background: #050609; }
body:not(.public-page) .content-topbar { background: #080b10; border-color: #1d2938; }
.content-brand { display: inline-flex; align-items: center; flex: 0 0 auto; width: 8rem; }
.content-brand img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }
.content-topbar-context { display: inline-flex; align-items: center; gap: .35rem; margin-right: auto; margin-left: 1.1rem; }
body:not(.public-page) .content-topbar .eyebrow { color: #7d8ba0; }
body:not(.public-page) .topbar-user { color: #d9e3ef; }
body:not(.public-page) .dashboard-welcome h2,
body:not(.public-page) .workspace-intro h2 { color: #f4f7fb; }
body:not(.public-page) .workspace-intro p:not(.eyebrow),
body:not(.public-page) .dashboard-welcome p:not(.eyebrow),
body:not(.public-page) .muted-copy { color: #8f9cad; }
body:not(.public-page) .panel,
body:not(.public-page) .metric-card,
body:not(.public-page) .feed-side-rail,
body:not(.public-page) .inbox-folders { background: #0c1118; border-color: #223044; box-shadow: 0 8px 24px rgba(0,0,0,.24); }
body:not(.public-page) .panel-header { color: #edf3fb; background: #0e151e; border-color: #1d2938; }
body:not(.public-page) .panel-header-note,
body:not(.public-page) .card-meta,
body:not(.public-page) .metric-label { color: #7f8da0; }
body:not(.public-page) .metric-card { color: #edf3fb; }
body:not(.public-page) .metric-card:hover { border-color: #2f8bff; background: #101923; }
body:not(.public-page) .action-list a,
body:not(.public-page) .feed-rail-item,
body:not(.public-page) .inbox-folders a { color: #dce6f2; border-color: #1d2938; }
body:not(.public-page) .action-list a:hover,
body:not(.public-page) .feed-rail-item:hover,
body:not(.public-page) .inbox-folders a:hover,
body:not(.public-page) .inbox-folders a.active { background: #111e30; color: #8ec1ff; }
body:not(.public-page) .standard-input,
body:not(.public-page) .standard-textarea,
body:not(.public-page) .composer-textarea,
body:not(.public-page) .composer-controls select { color: #e7eef8; background: #080c12; border-color: #314158; }
body:not(.public-page) .field-label { color: #aab7c7; }
body:not(.public-page) .file-button { color: #a8b6c8; background: #0a1018; border-color: #314158; }
body:not(.public-page) .feed-post,
body:not(.public-page) .message-row,
body:not(.public-page) .feed-management-card,
body:not(.public-page) .review-row { background: transparent; border-color: #1d2938; }
body:not(.public-page) .feed-author,
body:not(.public-page) .message-copy strong,
body:not(.public-page) .feed-management-card h3,
body:not(.public-page) .review-row h3 { color: #edf3fb; }
body:not(.public-page) .feed-content,
body:not(.public-page) .message-copy p,
body:not(.public-page) .feed-management-card p,
body:not(.public-page) .review-row p { color: #9aa8b9; }
body:not(.public-page) .like-btn,
body:not(.public-page) .button-secondary { color: #c2cfdd; background: #0c1118; border-color: #314158; }
body:not(.public-page) .like-btn:hover,
body:not(.public-page) .button-secondary:hover { background: #111e30; border-color: #2f8bff; color: #9bc7ff; }
body:not(.public-page) .message-avatar { background: #1b5fbf; }
body:not(.public-page) .media-gallery figure { background: #080c12; border-color: #223044; }
body:not(.public-page) .media-gallery figcaption { color: #8190a2; }
body:not(.public-page) .empty-state { color: #7f8da0; }
@media (max-width: 720px) { .content-brand { width: 7rem; } .content-topbar-context { display: none; } }

/* ---------- Rift portal login (2026-09-18) ---------- */
body.portal-rift-open {
    overflow: hidden;
}

.rift-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background:
        radial-gradient(circle at 50% 50%, rgba(47, 139, 255, 0.16), transparent 28rem),
        rgba(0, 0, 0, 0.78);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.38s ease;
}

.rift-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.rift-overlay::before {
    content: "";
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 17rem, rgba(0, 0, 0, 0.5) 25rem, #000 44rem),
        repeating-conic-gradient(from 90deg, rgba(47, 139, 255, 0.08) 0deg 8deg, transparent 8deg 18deg);
    opacity: 0;
    transform: scale(0.82) rotate(-12deg);
    transition: opacity 0.5s ease, transform 1.1s cubic-bezier(.15, .84, .28, 1);
}

.rift-overlay.is-open::before {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.rift-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    color: #e6f2ff;
    border: 1px solid rgba(139, 201, 255, 0.45);
    background: rgba(0, 0, 0, 0.48);
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
}

.rift-field {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.rift-spark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 50%;
    background: #89d7ff;
    box-shadow: 0 0 18px #2f8bff, 0 0 34px rgba(240, 199, 107, 0.55);
    opacity: 0;
}

.rift-overlay.is-open .rift-spark {
    animation: riftSpark 2.4s linear infinite;
}

.spark-a { --angle: 24deg; animation-delay: 0s; }
.spark-b { --angle: 138deg; animation-delay: -0.7s; }
.spark-c { --angle: 226deg; animation-delay: -1.2s; }
.spark-d { --angle: 310deg; animation-delay: -1.8s; }

.rift-core {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: min(37rem, calc(100vw - 2rem));
    aspect-ratio: 1;
    transform: scale(0.08);
    opacity: 0;
    transition: transform 0.82s cubic-bezier(.13, .88, .26, 1.12), opacity 0.25s ease;
}

.rift-overlay.is-open .rift-core {
    transform: scale(1);
    opacity: 1;
}

.rift-ring,
.rift-ring::before,
.rift-ring::after {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.rift-ring {
    background:
        radial-gradient(circle, rgba(0, 0, 0, 0.18) 0 37%, rgba(0, 180, 255, 0.16) 38% 45%, transparent 47%),
        conic-gradient(from 0deg, transparent 0deg, rgba(47, 139, 255, 0.94) 45deg, rgba(240, 199, 107, 0.92) 94deg, transparent 138deg, rgba(0, 180, 255, 0.86) 224deg, rgba(240, 199, 107, 0.72) 282deg, transparent 360deg);
    filter: blur(0.2px) drop-shadow(0 0 28px rgba(47, 139, 255, 0.7));
    animation: riftSpin 8s linear infinite;
}

.rift-ring::before {
    content: "";
    inset: 7%;
    background:
        radial-gradient(circle, rgba(1, 8, 18, 0.94) 0 48%, transparent 49%),
        conic-gradient(from 130deg, rgba(240, 199, 107, 0.7), transparent 25%, rgba(0, 180, 255, 0.78), transparent 62%, rgba(47, 139, 255, 0.88));
    filter: blur(8px);
    animation: riftSpinReverse 5.5s linear infinite;
}

.rift-ring::after {
    content: "";
    inset: 18%;
    background:
        radial-gradient(circle at 50% 50%, rgba(9, 24, 44, 0.98) 0 46%, rgba(0, 180, 255, 0.2) 62%, transparent 72%),
        repeating-conic-gradient(from 0deg, rgba(139, 201, 255, 0.18) 0 7deg, transparent 7deg 17deg);
    box-shadow: inset 0 0 70px rgba(0, 180, 255, 0.24);
    animation: riftPulse 2.8s ease-in-out infinite;
}

.rift-login-form {
    position: relative;
    z-index: 4;
    display: grid;
    gap: 0.85rem;
    width: min(19.5rem, 64vw);
    padding: 1rem;
    text-align: center;
    opacity: 0;
    transform: translateY(0.8rem) scale(0.96);
    transition: opacity 0.34s ease 0.42s, transform 0.34s ease 0.42s;
}

.rift-overlay.is-open .rift-login-form {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.rift-logo {
    justify-self: center;
    width: min(13rem, 78%);
    height: auto;
    margin-bottom: 0.1rem;
}

.rift-kicker,
.rift-login-form h1 {
    text-transform: uppercase;
}

.rift-kicker {
    margin: 0;
    color: #f0c76b;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
}

.rift-login-form h1 {
    margin: 0 0 0.45rem;
    color: #fff;
    font-size: clamp(1.25rem, 4vw, 1.7rem);
    letter-spacing: 0.1em;
    text-shadow: 0 0 16px rgba(47, 139, 255, 0.55);
}

.rift-input {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    border: 1px solid rgba(139, 201, 255, 0.44);
    background: rgba(0, 0, 0, 0.42);
}

.rift-input span {
    padding: 0 0.8rem;
    color: var(--blue-light);
    font-weight: 700;
}

.rift-input input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #fff;
    padding: 0.78rem 0.8rem 0.78rem 0;
    font: inherit;
}

.rift-input input:focus {
    outline: 0;
}

.rift-submit {
    min-height: 2.85rem;
    border: 0;
    color: #06101b;
    background: linear-gradient(135deg, var(--blue), var(--blue-light));
    box-shadow: 0 0 18px rgba(0, 180, 255, 0.34);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

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

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

@keyframes riftPulse {
    0%, 100% { transform: scale(0.98); opacity: 0.88; }
    50% { transform: scale(1.03); opacity: 1; }
}

@keyframes riftSpark {
    0% { opacity: 0; transform: rotate(var(--angle, 0deg)) translateX(19rem) scale(0.4); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: rotate(calc(var(--angle, 0deg) + 220deg)) translateX(3rem) scale(0.08); }
}

@media (prefers-reduced-motion: reduce) {
    .rift-ring,
    .rift-ring::before,
    .rift-ring::after,
    .rift-overlay.is-open .rift-spark {
        animation: none;
    }
}

@media (max-width: 640px) {
    .rift-core {
        width: min(31rem, calc(100vw - 0.75rem));
    }

    .rift-login-form {
        width: min(18rem, 72vw);
        gap: 0.65rem;
        padding: 0.75rem;
    }

    .rift-logo {
        width: min(11rem, 74%);
    }

    .rift-input {
        min-height: 2.45rem;
    }
}

/* ---------- 720p alpha portal asset login (2026-09-18) ---------- */
.portal-asset-overlay .rift-field,
.portal-asset-overlay .rift-ring,
.portal-asset-overlay .rift-logo,
.portal-asset-overlay .rift-kicker,
.portal-asset-overlay .rift-login-form h1 {
    display: none;
}

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

.portal-login-core {
    width: min(68rem, calc(100vw - 1rem));
    max-height: min(42rem, calc(100vh - 1.5rem));
    aspect-ratio: 16 / 9;
    overflow: visible;
}

.portal-animation {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.portal-ring-asset {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.98;
    filter: drop-shadow(0 0 2rem rgba(0, 150, 255, 0.38));
}

.rift-void {
    position: relative;
    z-index: 1;
    width: 45%;
    height: 46%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 48%, rgba(0, 0, 0, 0.98) 0 56%, rgba(1, 8, 18, 0.95) 72%, transparent 74%);
    box-shadow:
        inset 0 0 4rem rgba(0, 0, 0, 0.98),
        inset 0 0 1.3rem rgba(54, 170, 255, 0.16),
        0 0 2.5rem rgba(0, 0, 0, 0.75);
}

.portal-login-form {
    width: min(22.5rem, 55vw);
    gap: 0.72rem;
    padding: 0;
}

.portal-login-form .rift-input {
    min-height: 3rem;
    border-color: rgba(134, 221, 255, 0.52);
    background: rgba(0, 0, 0, 0.56);
    box-shadow:
        inset 0 0 1.2rem rgba(16, 132, 255, 0.09),
        0 0 1.1rem rgba(0, 0, 0, 0.4);
}

.portal-login-form .rift-input input {
    padding: 0.82rem 1rem;
    text-align: center;
    letter-spacing: 0.08em;
}

.portal-login-form .rift-input input::placeholder {
    color: rgba(220, 246, 255, 0.66);
}

.portal-login-form .rift-submit {
    min-height: 3.05rem;
    background: linear-gradient(135deg, #98eaff, #2f8bff 48%, #00b4ff);
    box-shadow:
        0 0 1.2rem rgba(0, 180, 255, 0.36),
        inset 0 0 0.85rem rgba(255, 255, 255, 0.23);
}

@media (prefers-reduced-motion: reduce) {
    .portal-ring-asset {
        content: url("/assets/portal/portal-ring-poster.png?v=20260918-portal-alpha");
    }
}

@media (max-width: 720px) {
    .portal-login-core {
        width: min(45rem, calc(100vw + 7rem));
        max-height: min(28rem, calc(100vh - 1rem));
    }

    .portal-login-form {
        width: min(19rem, 66vw);
        gap: 0.58rem;
    }

    .portal-login-form .rift-input,
    .portal-login-form .rift-submit {
        min-height: 2.65rem;
    }
}

@media (max-width: 420px) {
    .portal-login-form {
        width: min(16rem, 58vw);
    }

    .portal-login-form .rift-input input {
        padding-inline: 0.7rem;
        font-size: 0.88rem;
    }

    .portal-login-form .rift-submit {
        font-size: 0.82rem;
    }
}

/* ---------- Public dark home ---------- */
body.public-page .public-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    min-height: 5.25rem;
    padding: .65rem clamp(1rem, 4vw, 3.5rem);
}

body.public-page .theme-toggle {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.35rem;
    padding: .35rem .65rem .35rem .4rem;
    color: #dce5f0;
    border: 1px solid #2d3a4b;
    border-radius: 999px;
    background: #111721;
    font: inherit;
    font-size: .74rem;
    font-weight: 750;
    cursor: pointer;
}

body.public-page .theme-toggle-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 2rem;
    height: 1.1rem;
    padding: .14rem;
    border-radius: 999px;
    background: #b77a28;
    box-shadow: 0 0 .85rem rgba(222, 161, 64, .24);
}

body.public-page .theme-toggle-thumb {
    display: block;
    width: .82rem;
    height: .82rem;
    border-radius: 50%;
    background: #fff7e7;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    transform: translateX(.76rem);
    transition: transform .2s ease;
}

body.public-page .theme-toggle[aria-checked="false"] .theme-toggle-track { background: #536477; box-shadow: none; }
body.public-page .theme-toggle[aria-checked="false"] .theme-toggle-thumb { transform: translateX(0); }
body.public-page .topbar-wordmark { justify-self: center; display: block; width: min(16rem, 27vw); }
body.public-page .topbar-wordmark img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 .8rem rgba(222, 161, 64, .22)); }
body.public-page .topbar-login { justify-self: end; display: grid; place-items: center; width: 3.2rem; aspect-ratio: 1; padding: .25rem; color: #f4d394; border: 1px solid #765427; border-radius: 5px; background: #11100d; box-shadow: 0 0 1.35rem rgba(212, 147, 49, .18); }
body.public-page .topbar-login:hover { border-color: #efbd63; background: #1a1610; box-shadow: 0 0 1.8rem rgba(222, 161, 64, .35); }
body.public-page .topbar-login img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 .45rem rgba(223, 159, 52, .28)); }

body.public-page:not(.light-mode) { background: #07090d; color: #dce5f0; }
body.public-page:not(.light-mode) .public-shell { background: #07090d; }
body.public-page:not(.light-mode) .public-sidebar { background: #0b0f16; border-right: 1px solid #202b39; }
body.public-page:not(.light-mode) .public-brand img { filter: drop-shadow(0 0 .65rem rgba(222, 161, 64, .18)); }
body.public-page:not(.light-mode) .public-nav a { color: #a9b8c9; }
body.public-page:not(.light-mode) .public-nav a:hover,
body.public-page:not(.light-mode) .public-nav a.active { color: #fff5df; background: #332615; }
body.public-page:not(.light-mode) .public-topbar { background: rgba(7, 9, 13, .94); border-bottom-color: #202b39; }
body.public-page:not(.light-mode) .public-hero { background: #07090d; border-bottom-color: #202b39; }
body.public-page:not(.light-mode) .hero-copy h1 { color: #f3eee5; }
body.public-page:not(.light-mode) .hero-copy h1 span { color: #e0a94f; }
body.public-page:not(.light-mode) .hero-copy > p:not(.eyebrow) { color: #9ba9b9; }
body.public-page:not(.light-mode) .eyebrow { color: #d8a34b; }
body.public-page:not(.light-mode) .hero-art-wrap { background: #030507; border-color: #263342; box-shadow: 0 1.5rem 3rem rgba(0,0,0,.38); }
body.public-page:not(.light-mode) .hero-art-wrap::after { background: linear-gradient(180deg, transparent 58%, rgba(0,0,0,.78)); }
body.public-page:not(.light-mode) .hero-art-caption span { color: #dbab59; }
body.public-page:not(.light-mode) .button-primary { color: #171006; border-color: #d89d3e; background: #d89d3e; box-shadow: 0 0 1.35rem rgba(216, 157, 62, .2); }
body.public-page:not(.light-mode) .button-primary:hover { color: #0d0b07; background: #efbb65; box-shadow: 0 0 1.8rem rgba(222, 161, 64, .4); }
body.public-page:not(.light-mode) .button-secondary { color: #e4edf7; border-color: #3d4d61; background: #111721; }
body.public-page:not(.light-mode) .button-secondary:hover { color: #f3c875; border-color: #b77a28; background: #1a1610; }
body.public-page:not(.light-mode) .public-section { background: #07090d; border-bottom-color: #202b39; }
body.public-page:not(.light-mode) .section-heading h2 { color: #f0ece4; }
body.public-page:not(.light-mode) .text-link { color: #e0a94f; }
body.public-page:not(.light-mode) .text-link:hover { color: #ffd48d; }
body.public-page:not(.light-mode) .public-news-card { background: #0e131b; border-color: #263342; box-shadow: 0 .8rem 2rem rgba(0,0,0,.18); }
body.public-page:not(.light-mode) .public-news-body h3 { color: #f0ece4; }
body.public-page:not(.light-mode) .public-news-body p:not(.card-meta) { color: #9ba9b9; }
body.public-page:not(.light-mode) .card-meta { color: #7f8ea1; }
body.public-page:not(.light-mode) .public-post { border-bottom-color: #263342; }
body.public-page:not(.light-mode) .public-post-meta strong { color: #f0ece4; }
body.public-page:not(.light-mode) .public-post-meta span,
body.public-page:not(.light-mode) .public-post p { color: #9ba9b9; }
body.public-page:not(.light-mode) .feed-callout { background: #111a28; border: 1px solid #2b405a; }
body.public-page:not(.light-mode) .merch-feature { background: #0e131b; border: 1px solid #263342; }
body.public-page:not(.light-mode) .merch-feature h3 { color: #f0ece4; }
body.public-page:not(.light-mode) .merch-feature p:not(.eyebrow) { color: #9ba9b9; }
body.public-page:not(.light-mode) .public-footer { color: #7f8ea1; border-top-color: #202b39; }
body.public-page:not(.light-mode) .account-menu summary { color: #dce5f0; }
body.public-page:not(.light-mode) .account-menu-panel { background: #0e131b; border-color: #2d3a4b; box-shadow: 0 .8rem 2rem rgba(0,0,0,.4); }
body.public-page:not(.light-mode) .account-menu-panel a { color: #c5d1df; }
body.public-page:not(.light-mode) .account-menu-panel a:hover { color: #f3c875; background: #1a1610; }

body.public-page .public-hero { display: grid; grid-template-columns: minmax(0, 58rem); justify-content: center; gap: 1.3rem; min-height: 0; padding: 4rem clamp(1rem, 5vw, 6rem) 3.5rem; text-align: center; }
body.public-page .hero-copy { max-width: 43rem; margin: 0 auto; }
body.public-page .hero-actions { justify-content: center; }
body.public-page .hero-art-wrap { position: relative; width: min(100%, 58rem); min-height: 21rem; align-self: auto; margin: 0 auto; overflow: hidden; border-radius: 8px; }
body.public-page .hero-characters { position: relative; z-index: 1; display: block; width: min(100%, 51rem); height: auto; max-height: 26rem; min-height: 0; margin: 0 auto; object-fit: contain; object-position: center bottom; opacity: 1; filter: drop-shadow(0 1.1rem 1.6rem rgba(0,0,0,.45)); }
body.public-page .hero-art-caption { bottom: 1rem; text-align: left; }

body.public-page.light-mode .public-topbar { background: rgba(255,255,255,.96); border-bottom-color: #e3e8ee; }
body.public-page.light-mode .theme-toggle { color: #354150; border-color: #cbd4df; background: #f7f8fa; }
body.public-page.light-mode .topbar-login { color: #7a5218; border-color: #c69544; background: #fffaf0; box-shadow: 0 0 .9rem rgba(199, 145, 58, .16); }
body.public-page.light-mode .topbar-login:hover { background: #fff4da; }
body.public-page.light-mode .public-hero { background: #eef4fb; border-bottom-color: #e0e5eb; }
body.public-page.light-mode .hero-art-wrap { border-color: #314158; box-shadow: 0 1rem 2.4rem rgba(24,38,57,.12); }

@media (max-width: 720px) {
    body.public-page .public-topbar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-height: 4.4rem; padding: .55rem .8rem; }
    body.public-page .theme-toggle { padding-right: .42rem; }
    body.public-page .theme-toggle-label { display: none; }
    body.public-page .topbar-wordmark { width: min(12.5rem, 42vw); }
    body.public-page .topbar-login { width: 2.7rem; }
    body.public-page .public-hero { padding: 3rem 1rem 2.5rem; }
    body.public-page .hero-art-wrap { min-height: 16rem; }
    body.public-page .hero-characters { max-height: 19rem; }
}

/* ---------- Public account login modal ---------- */
body.public-page .topbar-login { appearance: none; font: inherit; cursor: pointer; }
body.public-page .account-menu { justify-self: end; }
body.public-page .account-menu summary { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.8rem; padding: .35rem .55rem .35rem .75rem; border: 1px solid #2d3a4b; border-radius: 5px; background: #111721; }
body.public-page .account-summary-name { color: #f2eadb; font-size: .84rem; font-weight: 750; }
body.public-page .account-summary-title { padding: .22rem .42rem; color: #e8b45f; border: 1px solid #6f5125; border-radius: 3px; background: #1c1710; font-size: .65rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
body.public-page .account-summary-chevron { color: #aebdca; font-size: .62rem; }
body.public-page .login-modal[hidden] { display: none; }
body.public-page .login-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1.25rem; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
body.public-page .login-modal.is-open { opacity: 1; pointer-events: auto; }
body.public-page .login-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(5px); }
body.public-page .login-modal-card { position: relative; width: min(25rem, 100%); padding: 2rem; border: 1px solid #3b4b60; border-radius: 7px; background: #0e131b; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.55), 0 0 2rem rgba(222,161,64,.08); transform: translateY(.6rem) scale(.98); transition: transform .22s ease; }
body.public-page .login-modal.is-open .login-modal-card { transform: translateY(0) scale(1); }
body.public-page .login-modal-card h2 { margin: .35rem 0 .45rem; color: #f2eadb; font-size: 1.8rem; letter-spacing: -.03em; }
body.public-page .login-modal-card > p:not(.eyebrow):not(.login-modal-error) { margin: 0 0 1.35rem; color: #9ba9b9; line-height: 1.5; }
body.public-page .login-modal-close { position: absolute; top: .7rem; right: .7rem; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; color: #aebdca; border: 1px solid #334255; border-radius: 4px; background: transparent; font-size: 1.35rem; line-height: 1; cursor: pointer; }
body.public-page .login-modal-close:hover { color: #f2eadb; border-color: #d89d3e; }
body.public-page .login-modal-field { display: grid; gap: .42rem; margin-bottom: 1rem; color: #c7d2df; font-size: .78rem; font-weight: 750; }
body.public-page .login-modal-field input { width: 100%; min-height: 2.8rem; padding: .72rem .8rem; color: #f2eadb; border: 1px solid #334255; border-radius: 4px; outline: 0; background: #080c12; font: inherit; }
body.public-page .login-modal-field input:focus { border-color: #d89d3e; box-shadow: 0 0 0 3px rgba(216,157,62,.14); }
body.public-page .login-modal-submit { width: 100%; margin-top: .35rem; }
body.public-page .login-modal-error { margin: 1rem 0 0; padding: .75rem; color: #ffb4b8; border: 1px solid #713c47; border-radius: 4px; background: #25141a; font-size: .8rem; line-height: 1.45; }
body.public-page.light-mode .account-menu summary { border-color: #cbd4df; background: #fff; }
body.public-page.light-mode .account-summary-name { color: #354150; }
body.public-page.light-mode .account-summary-title { color: #7a5218; border-color: #d6b475; background: #fff7e6; }
body.public-page.light-mode .login-modal-backdrop { background: rgba(15,23,35,.4); }
body.public-page.light-mode .login-modal-card { border-color: #d1d9e2; background: #fff; box-shadow: 0 1.5rem 4rem rgba(24,38,57,.22); }
body.public-page.light-mode .login-modal-card h2 { color: #161a22; }
body.public-page.light-mode .login-modal-card > p:not(.eyebrow):not(.login-modal-error) { color: #647080; }
body.public-page.light-mode .login-modal-close { color: #647080; border-color: #cbd4df; }
body.public-page.light-mode .login-modal-field { color: #354150; }
body.public-page.light-mode .login-modal-field input { color: #161a22; border-color: #cbd4df; background: #fff; }
body.public-page.light-mode .login-modal-error { color: #9f2532; border-color: #f1c2c7; background: #fff1f2; }

@media (max-width: 720px) {
    body.public-page .account-summary-title { display: none; }
    body.public-page .account-menu summary { padding-left: .55rem; }
    body.public-page .login-modal-card { padding: 1.5rem; }
}

/* ---------- Public About view and hero scale ---------- */
body.public-page .hero-art-wrap { width: min(100%, 64rem); min-height: 28rem; }
body.public-page .hero-characters { width: min(100%, 64rem); max-height: 38rem; }
body.public-page .about-section { display: grid; place-items: center; text-align: center; }
body.public-page .about-copy { width: min(100%, 48rem); }
body.public-page .about-copy h2 { margin: .4rem 0 1rem; color: #f0ece4; font-size: clamp(2rem, 4vw, 3.8rem); letter-spacing: -.04em; }
body.public-page .about-copy > p:not(.eyebrow) { margin: 0 auto; color: #9ba9b9; font-size: clamp(1rem, 1.8vw, 1.35rem); line-height: 1.7; }
body.public-page.light-mode .about-copy h2 { color: #161a22; }
body.public-page.light-mode .about-copy > p:not(.eyebrow) { color: #647080; }

@media (max-width: 720px) {
    body.public-page .hero-art-wrap { min-height: 21rem; }
    body.public-page .hero-characters { max-height: 27rem; }
}

/* ---------- Public in-place views ---------- */
body.public-page .public-view-stack { position: relative; min-height: calc(100vh - 5.25rem); overflow: hidden; }

/* ---------- Public under-construction gate ---------- */
body.under-construction-page {
    min-height: 100vh;
    margin: 0;
    color: #f3eee5;
    background: #07090d;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.under-construction-page * { box-sizing: border-box; }
body.under-construction-page .construction-shell { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(23rem, .75fr); min-height: 100vh; }
body.under-construction-page .construction-art { position: relative; display: flex; align-items: flex-end; min-height: 100vh; overflow: hidden; padding: clamp(2rem, 6vw, 6rem); background: #090d15; isolation: isolate; }
body.under-construction-page .construction-art::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 60% 30%, rgba(41, 96, 160, .28), transparent 40%), linear-gradient(145deg, #111a2a, #07090d 72%); }
body.under-construction-page .construction-art-glow { position: absolute; z-index: -1; top: 10%; left: 48%; width: 26rem; height: 26rem; border-radius: 50%; background: rgba(218, 158, 62, .1); filter: blur(4rem); }
body.under-construction-page .construction-characters { position: absolute; right: -7%; bottom: -2%; width: min(82%, 62rem); max-height: 89%; object-fit: contain; object-position: right bottom; opacity: .8; filter: drop-shadow(0 1.4rem 2rem rgba(0, 0, 0, .55)); }
body.under-construction-page .construction-art-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(7, 9, 13, .08) 15%, rgba(7, 9, 13, .08) 35%, rgba(7, 9, 13, .78) 100%), linear-gradient(0deg, rgba(7, 9, 13, .85), transparent 42%); pointer-events: none; }
body.under-construction-page .construction-art-copy { position: relative; z-index: 2; max-width: 31rem; }
body.under-construction-page .construction-kicker { display: flex; align-items: center; gap: .55rem; margin: 0 0 2rem; color: #d8a34b; font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
body.under-construction-page .construction-signal { width: .55rem; height: .55rem; border-radius: 50%; background: #d8a34b; box-shadow: 0 0 .9rem rgba(216, 163, 75, .8); }
body.under-construction-page .construction-wordmark { display: block; width: min(19rem, 72%); height: auto; margin-bottom: 1.3rem; filter: drop-shadow(0 0 1rem rgba(222, 161, 64, .25)); }
body.under-construction-page .construction-tagline { max-width: 22rem; margin: 0; color: #c4d0df; font-size: clamp(1rem, 1.8vw, 1.2rem); line-height: 1.55; }
body.under-construction-page .construction-status { display: inline-flex; align-items: center; gap: .5rem; margin-top: 2rem; padding: .5rem .7rem; color: #d8e3ee; border: 1px solid #33465d; border-radius: 999px; background: rgba(12, 20, 33, .72); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
body.under-construction-page .construction-status .status-dot { width: .45rem; height: .45rem; background: #d8a34b; box-shadow: 0 0 .7rem rgba(216, 163, 75, .8); }
body.under-construction-page .construction-panel { display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem); background: #0c1017; border-left: 1px solid #222f40; }
body.under-construction-page .construction-panel-inner { width: min(25rem, 100%); }
body.under-construction-page .construction-panel .eyebrow { margin: 0 0 .8rem; color: #d8a34b; }
body.under-construction-page .construction-panel h1 { margin: 0 0 .9rem; color: #f3eee5; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.04; letter-spacing: -.05em; }
body.under-construction-page .construction-lede { margin: 0 0 2rem; color: #98a7b8; line-height: 1.6; }
body.under-construction-page .construction-login { display: grid; gap: 1rem; }
body.under-construction-page .construction-field { display: grid; gap: .45rem; color: #c8d3df; font-size: .78rem; font-weight: 750; }
body.under-construction-page .construction-field input { width: 100%; min-height: 3rem; padding: .75rem .85rem; color: #f3eee5; border: 1px solid #334255; border-radius: 4px; outline: 0; background: #080c12; font: inherit; }
body.under-construction-page .construction-field input:focus { border-color: #d89d3e; box-shadow: 0 0 0 3px rgba(216, 157, 62, .14); }
body.under-construction-page .construction-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3rem; margin-top: .25rem; padding: .7rem .9rem; color: #171006; border: 1px solid #d89d3e; border-radius: 4px; background: #d89d3e; font: inherit; font-weight: 800; cursor: pointer; }
body.under-construction-page .construction-submit:hover { background: #efbb65; box-shadow: 0 0 1.5rem rgba(222, 161, 64, .25); }
body.under-construction-page .construction-error { margin: 1rem 0 0; padding: .8rem; color: #ffb4b8; border: 1px solid #713c47; border-radius: 4px; background: #25141a; font-size: .8rem; line-height: 1.45; }
body.under-construction-page .construction-divider { display: flex; align-items: center; gap: .75rem; margin: 1.7rem 0 1rem; color: #65758a; font-size: .72rem; text-transform: uppercase; }
body.under-construction-page .construction-divider::before, body.under-construction-page .construction-divider::after { content: ""; flex: 1; height: 1px; background: #273445; }
body.under-construction-page .construction-portal-link { display: flex; align-items: center; justify-content: space-between; padding: .85rem .9rem; color: #dce5f0; border: 1px solid #334255; border-radius: 4px; text-decoration: none; font-size: .82rem; font-weight: 750; }
body.under-construction-page .construction-portal-link:hover { color: #f3c875; border-color: #b77a28; background: #15130f; }
body.under-construction-page .construction-footnote { margin: 1.6rem 0 0; color: #65758a; font-size: .72rem; line-height: 1.5; }
@media (max-width: 820px) {
    body.under-construction-page .construction-shell { grid-template-columns: 1fr; }
    body.under-construction-page .construction-art { min-height: 32rem; padding: 2.5rem 1.5rem; }
    body.under-construction-page .construction-characters { right: -10%; width: 75%; max-height: 82%; opacity: .62; }
    body.under-construction-page .construction-art-overlay { background: linear-gradient(90deg, rgba(7, 9, 13, .32), rgba(7, 9, 13, .42)), linear-gradient(0deg, rgba(7, 9, 13, .9), transparent 60%); }
    body.under-construction-page .construction-panel { min-height: 34rem; padding: 3rem 1.5rem 4rem; border-top: 1px solid #222f40; border-left: 0; }
}
body.public-page .public-view { position: absolute; inset: 0; width: 100%; min-height: calc(100vh - 5.25rem); overflow-y: auto; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(.75rem); transition: opacity .36s ease, transform .36s ease, visibility 0s linear .36s; }
body.public-page .public-view.is-active { position: relative; visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
body.public-page .public-nav a { transition: color .25s ease, background .25s ease, transform .25s ease; }
body.public-page .public-nav a:not(.active):hover { transform: translateX(.15rem); }
body.public-page .topbar-wordmark { width: min(30rem, 48vw); }
body.public-page .hero-copy h1 { font-size: clamp(1.45rem, 2.5vw, 2.7rem); line-height: 1.05; letter-spacing: -.035em; }
body.public-page .public-view.public-hero { min-height: calc(100vh - 5.25rem); align-content: center; padding-top: 2.4rem; padding-bottom: 2.4rem; }
body.public-page .public-view.public-section { min-height: calc(100vh - 5.25rem); padding-top: 3.5rem; padding-bottom: 3.5rem; }
body.public-page .public-view.public-section .section-heading { max-width: 70rem; margin-left: auto; margin-right: auto; }
body.public-page .public-view.public-section > .news-grid,
body.public-page .public-view.public-section > .public-feed-layout,
body.public-page .public-view.public-section > .merch-feature { max-width: 70rem; margin-left: auto; margin-right: auto; }
body.public-page .public-view.public-section .news-grid { max-height: calc(100vh - 15rem); overflow-y: auto; }
body.public-page .public-view.public-section .public-feed-layout { align-items: start; }
body.public-page .public-view.public-section .merch-feature { max-height: calc(100vh - 14rem); }
body.public-page .public-view.public-section .merch-feature img { max-height: 21rem; }

@media (max-width: 720px) {
    body.public-page .public-view-stack,
    body.public-page .public-view { min-height: calc(100vh - 4.4rem); }
    body.public-page .topbar-wordmark { width: min(17rem, 55vw); }
    body.public-page .public-view.public-hero { min-height: calc(100vh - 4.4rem); padding-top: 2rem; padding-bottom: 2rem; }
    body.public-page .public-view.public-section { min-height: calc(100vh - 4.4rem); padding-top: 2rem; padding-bottom: 2rem; }
    body.public-page .public-view.public-section .news-grid { max-height: none; overflow: visible; }
    body.public-page .public-view.public-section .merch-feature { max-height: none; }
}



/* Dashboard navigation and public login refinements */
.menu-wordmark { display:flex; align-items:center; min-height:2.5rem; color:#f3c875; text-decoration:none; }
.menu-wordmark span { font-family:Georgia,serif; font-size:1.25rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.menu-wordmark:hover span { color:#fff; }
.content-brand { width:7.2rem; }
.content-brand img { filter:none; }
.content-topbar-context { margin-left:.75rem; }
.permission-catalog { display:grid; gap:.55rem; max-width:54rem; }
.permission-entry { border:1px solid #dce2ea; border-radius:8px; background:#fff; }
.permission-entry summary { cursor:pointer; padding:.8rem 1rem; color:#263548; font-weight:700; }
.permission-entry summary::marker { color:#2268d8; }
.permission-entry p { margin:0; padding:0 1rem 1rem; color:#637084; line-height:1.5; }
body.under-construction-page .construction-art-copy { position:absolute; top:clamp(1.5rem,4vw,3.5rem); left:clamp(1.5rem,5vw,5rem); max-width:23rem; }
body.under-construction-page .construction-kicker, body.under-construction-page .construction-status, body.under-construction-page .construction-divider, body.under-construction-page .construction-portal-link, body.under-construction-page .construction-footnote { display:none; }
body.under-construction-page .construction-wordmark { width:min(15rem,62%); margin:0; }
body.under-construction-page .construction-panel { position:relative; align-items:flex-start; justify-content:flex-end; padding:clamp(1.5rem,4vw,3.5rem); }
body.under-construction-page .construction-panel-inner { width:min(20rem,100%); }
body.under-construction-page .construction-panel h1 { font-size:clamp(1.6rem,3vw,2.35rem); }
@media (max-width:720px) { body.under-construction-page .construction-art-copy { top:1.5rem; left:1.5rem; } body.under-construction-page .construction-panel { align-items:center; justify-content:center; } body.under-construction-page .construction-panel-inner { width:min(24rem,100%); } }
.construction-success,.login-modal-success { margin:1rem 0 0; color:#8fe0ba; font-size:.8rem; }
/* WWW navigation: login and collapsible dashboard */
body.public-page .public-kicker { display:none; }
body.public-page .public-sidebar { padding-top:1.5rem; }
body.public-page .public-login-button,
body.public-page .public-dashboard-toggle { width:100%; margin:0 0 1rem; padding:.75rem .8rem; color:#f3c875; border:1px solid #9b6d2c; border-radius:5px; background:#17130d; font:inherit; font-size:.9rem; font-weight:800; letter-spacing:.14em; text-align:left; text-transform:uppercase; cursor:pointer; }
body.public-page .public-login-button:hover,
body.public-page .public-dashboard-toggle:hover { color:#fff5df; border-color:#efbd63; background:#241b10; }
body.public-page .public-dashboard-toggle { display:flex; justify-content:space-between; align-items:center; }
body.public-page .dashboard-nav { display:grid; gap:.2rem; margin:-.7rem 0 1.1rem .65rem; padding-left:.7rem; border-left:1px solid #614a2b; }
body.public-page .dashboard-nav[hidden] { display:none; }
body.public-page .dashboard-nav a { padding:.55rem .65rem; color:#c6b99e; border-radius:4px; font-size:.82rem; text-decoration:none; }
body.public-page .dashboard-nav a:hover { color:#fff5df; background:#332615; transform:translateX(.12rem); }
body.public-page .dashboard-nav .dashboard-signout { margin-top:.45rem; padding-top:.75rem; border-top:1px solid #3b3021; color:#e5a4a4; }
body.public-page .public-topbar-spacer { width:3rem; }
body.public-page .dashboard-panel-shell { width:min(70rem,100%); margin:0 auto; }
body.public-page .dashboard-panel-heading { align-items:flex-end; margin-bottom:1.25rem; }
body.public-page .dashboard-panel-heading h2 { margin:.35rem 0 0; color:#f0ece4; font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.04em; }
body.public-page .dashboard-panel-hint { color:#8797aa; font-size:.78rem; }
body.public-page .dashboard-panel-content { position:relative; min-height:16rem; transition:opacity .2s ease, transform .2s ease; }
body.public-page .dashboard-panel-content.is-loading { opacity:.45; transform:translateY(.35rem); pointer-events:none; }
body.public-page .dashboard-panel-empty,
body.public-page .dashboard-panel-error { display:grid; place-items:center; min-height:16rem; padding:2rem; color:#9ba9b9; border:1px dashed #334255; border-radius:6px; background:rgba(14,19,27,.72); text-align:center; }
body.public-page .dashboard-panel-empty p { max-width:27rem; margin:.8rem 0 0; line-height:1.6; }
body.public-page .dashboard-panel-error { color:#ffb4b8; border-color:#713c47; background:#25141a; }
body.public-page .dashboard-panel-error p { margin:.4rem 0 0; color:#d79ba2; }
body.public-page .dashboard-panel-content .dashboard { min-height:0; padding:0; background:transparent; }
body.public-page .dashboard-panel-content .page-title,
body.public-page .dashboard-panel-content .footer-bar { display:none; }
body.public-page .dashboard-panel-content .dashboard-welcome { margin-top:0; }
body.public-page.light-mode .dashboard-panel-heading h2 { color:#161a22; }
body.public-page.light-mode .dashboard-panel-empty { color:#647080; border-color:#cbd4df; background:#fff; }

/* ---------- Refined public shell ---------- */
body.public-page .public-topbar { grid-template-columns:1fr; min-height:4.2rem; }
body.public-page .topbar-wordmark { width:min(11.2rem,19vw); }
body.public-page .sidebar-footer { display:grid; gap:.8rem; margin-top:auto; }
body.public-page .sidebar-footer .sidebar-note { margin-top:0; padding:.75rem .55rem; border-top:1px solid rgba(255,255,255,.1); }
body.public-page .sidebar-footer .theme-toggle { justify-self:stretch; width:100%; justify-content:flex-start; min-height:2.7rem; padding:.42rem .58rem; border-radius:999px; background:rgba(255,255,255,.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1rem 2rem rgba(0,0,0,.14); backdrop-filter:blur(14px); }
body.public-page .sidebar-footer .theme-toggle:hover { border-color:#d8a34b; background:rgba(216,163,75,.12); }
body.public-page .dashboard-nav { margin:-.55rem 0 1.1rem; padding:.45rem; border:1px solid rgba(216,163,75,.2); border-left:1px solid rgba(216,163,75,.2); border-radius:1rem; background:rgba(22,28,38,.7); box-shadow:0 1rem 2.2rem rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(16px); }
body.public-page .dashboard-nav a { display:flex; align-items:center; gap:.45rem; padding:.58rem .7rem; border-radius:999px; color:#d8e3ee; transition:background .2s ease, color .2s ease, transform .2s ease; }
body.public-page .dashboard-nav a::before { content:""; width:.35rem; height:.35rem; border-radius:50%; background:#b77a28; box-shadow:0 0 .5rem rgba(216,163,75,.55); }
body.public-page .dashboard-nav a:hover { color:#fff8e9; background:rgba(216,163,75,.16); transform:translateX(.16rem); }
body.public-page .dashboard-nav .dashboard-signout { margin-top:.35rem; padding-top:.62rem; border-top:1px solid rgba(255,255,255,.1); color:#ffb1b7; border-radius:999px; }
body.public-page .dashboard-nav .dashboard-signout::before { background:#c94f5c; box-shadow:none; }
body.public-page .dashboard-panel { background:radial-gradient(circle at 72% 16%, rgba(44,83,126,.25), transparent 34%), linear-gradient(135deg,#090d14 0%,#0d141e 52%,#0a0e15 100%); }
body.public-page .dashboard-panel.is-active { animation:dashboardDropIn .52s cubic-bezier(.22,.82,.24,1) both; }
@keyframes dashboardDropIn { from { opacity:0; transform:translateY(-2.25rem) scale(.975); } 60% { opacity:1; transform:translateY(.35rem) scale(1.005); } to { opacity:1; transform:translateY(0) scale(1); } }
body.public-page .dashboard-panel-content .dashboard-welcome { padding:1.15rem 1.25rem; border:1px solid rgba(132,164,198,.2); border-radius:1.15rem; background:linear-gradient(135deg,rgba(31,49,70,.82),rgba(16,24,35,.62)); box-shadow:0 1.4rem 3rem rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(16px); }
body.public-page .dashboard-panel-content .dashboard-welcome h2 { color:#f7f0e3; }
body.public-page .dashboard-panel-content .dashboard-welcome p:not(.eyebrow) { color:#b8c7d7; }
body.public-page .dashboard-panel-content .dashboard-metrics { gap:.8rem; }
body.public-page .dashboard-panel-content .metric-card { border:1px solid rgba(132,164,198,.22); border-radius:1rem; background:linear-gradient(145deg,rgba(34,51,72,.72),rgba(14,20,29,.72)); box-shadow:0 .9rem 2rem rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:blur(14px); transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
body.public-page .dashboard-panel-content .metric-card:hover { transform:translateY(-.25rem); border-color:rgba(216,163,75,.62); box-shadow:0 1.2rem 2.5rem rgba(0,0,0,.28), 0 0 1.5rem rgba(216,163,75,.1); }
body.public-page .dashboard-panel-content .panel { border:1px solid rgba(132,164,198,.18); border-radius:1rem; background:rgba(15,22,31,.7); box-shadow:0 1rem 2.2rem rgba(0,0,0,.16); backdrop-filter:blur(14px); }
body.public-page .dashboard-panel-content .panel-header { border-bottom-color:rgba(132,164,198,.16); }
body.public-page .dashboard-panel-content .panel-header span:first-child { color:#f2eadb; }
body.public-page.light-mode .public-sidebar { background:linear-gradient(180deg,#eef3f8,#e3eaf2); border-right-color:#cbd6e2; color:#354150; }
body.public-page.light-mode .public-topbar { background:rgba(255,255,255,.84); border-bottom-color:#d6dee8; }
body.public-page.light-mode .sidebar-footer .sidebar-note { color:#5e6d7e; border-top-color:#cbd6e2; }
body.public-page.light-mode .sidebar-footer .theme-toggle { color:#354150; border-color:#c5d0dc; background:rgba(255,255,255,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 .8rem 1.6rem rgba(76,98,122,.1); }
body.public-page.light-mode .public-nav a { color:#526174; }
body.public-page.light-mode .public-nav a:hover, body.public-page.light-mode .public-nav a.active { color:#17345c; background:#d5e3f7; }
body.public-page.light-mode .public-dashboard-toggle { color:#7b5318; border-color:#d6b475; background:rgba(255,255,255,.72); }
body.public-page.light-mode .dashboard-nav { border-color:#cbd6e2; background:rgba(255,255,255,.72); box-shadow:0 .8rem 1.8rem rgba(76,98,122,.1), inset 0 1px 0 rgba(255,255,255,.95); }
body.public-page.light-mode .dashboard-nav a { color:#40526a; }
body.public-page.light-mode .dashboard-nav a:hover { color:#17345c; background:#e0ebfa; }
body.public-page.light-mode .dashboard-nav .dashboard-signout { border-top-color:#d6dee8; color:#a13f4c; }
body.public-page.light-mode .dashboard-panel { background:radial-gradient(circle at 72% 16%,rgba(118,162,211,.25),transparent 34%),linear-gradient(135deg,#f3f7fb,#e7eef6 52%,#f7f9fb); }
body.public-page.light-mode .dashboard-panel-content .dashboard-welcome { border-color:#cbd9e7; background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(235,243,251,.82)); box-shadow:0 1rem 2rem rgba(67,92,119,.12), inset 0 1px 0 #fff; }
body.public-page.light-mode .dashboard-panel-content .dashboard-welcome h2 { color:#1c2d42; }
body.public-page.light-mode .dashboard-panel-content .dashboard-welcome p:not(.eyebrow) { color:#5e6d7e; }
body.public-page.light-mode .dashboard-panel-content .metric-card { border-color:#cbd9e7; background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(232,240,249,.88)); box-shadow:0 .8rem 1.8rem rgba(67,92,119,.1), inset 0 1px 0 #fff; }
body.public-page.light-mode .dashboard-panel-content .panel { border-color:#cbd9e7; background:rgba(255,255,255,.78); box-shadow:0 .8rem 1.8rem rgba(67,92,119,.1); }
body.public-page.light-mode .dashboard-panel-content .panel-header span:first-child { color:#263b53; }
@media (max-width:720px) { body.public-page .topbar-wordmark { width:min(12rem,42vw); } body.public-page .sidebar-footer { margin-top:1rem; } }
body.public-page .topbar-wordmark { width:min(12.6rem,21vw); }
body.public-page .profile-title-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
body.public-page .field-help { margin:-.35rem 0 1rem; color:#8797aa; font-size:.75rem; line-height:1.45; }
body.public-page .profile-title-grid select { appearance:auto; }
body.public-page.light-mode .field-help { color:#647080; }
@media (max-width:720px) { body.public-page .topbar-wordmark { width:min(13rem,46vw); } body.public-page .profile-title-grid { grid-template-columns:1fr; } }
/* Compact dashboard workspace for 1920x1080 navigation */
body.public-page .dashboard-panel { min-height:calc(100vh - 4.2rem); padding:1.25rem clamp(1.25rem,3vw,3.5rem) 2rem; }
body.public-page .dashboard-panel-shell { width:min(86rem,100%); }
body.public-page .dashboard-panel-content { min-height:0; }
body.public-page .dashboard-panel-content .dashboard { max-width:none; }
body.public-page .dashboard-panel-content .workspace-intro,
body.public-page .dashboard-panel-content .dashboard-welcome { gap:1rem; margin-bottom:1rem; }
body.public-page .dashboard-panel-content .dashboard-metrics { gap:.75rem; margin-bottom:1rem; }
body.public-page .dashboard-panel-content .dashboard-columns,
body.public-page .dashboard-panel-content .feed-page-layout,
body.public-page .dashboard-panel-content .profile-page-grid,
body.public-page .dashboard-panel-content .feed-management-grid,
body.public-page .dashboard-panel-content .inbox-layout { gap:1rem; margin-bottom:1rem; }
body.public-page .dashboard-panel-content .panel-body { padding:1rem; }
body.public-page .dashboard-panel-content .panel-header { min-height:2.9rem; padding:.75rem 1rem; }
body.public-page .dashboard-panel-content .standard-input,
body.public-page .dashboard-panel-content .standard-textarea { padding:.65rem .75rem; }
@media (min-width:1400px) { body.public-page .dashboard-panel-content .dashboard-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } body.public-page .dashboard-panel-content .profile-page-grid, body.public-page .dashboard-panel-content .feed-management-grid, body.public-page .dashboard-panel-content .inbox-layout { grid-template-columns:minmax(0,1.15fr) minmax(22rem,.85fr); } }
@media (max-width:720px) { body.public-page .dashboard-panel { padding:1rem 1rem 1.5rem; } }