/* =============================================================
   UNLICENSED HUB — MAIN STYLESHEET (formerly modern-terminal.css)
   Theme tokens, fonts, base reset, and scrollbars now live in
   theme.css, which loads BEFORE this file. Dev-only widgets
   (#uDebugPanel, #testButton) live in dev-tools.css, which loads
   AFTER this file. Everything else — nav, hero, content,
   overlays, news, auth, footer — lives here.

   The body::before rule below is a no-op kept so any legacy
   reference still resolves; safe to remove later.
   ============================================================= */
body::before {
    content: none;
    display: none;
}

/* =============================================================
   BACKGROUND CROSSFADE STACK
   Two layered divs — #background and #backgroundNext — that carry
   the legacy bg-* image classes. JS swaps the "incoming" class
   between them and drives the slide-in/out animations below.
   The modern-terminal dark gradient sits on top (::after) so the
   pic reads as a subtle backdrop rather than a full-bleed photo.
   ============================================================= */
#background,
#backgroundNext {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    pointer-events: none;
    opacity: 0;
    /* Kill the legacy bg-faded keyframe animation so our own
       crossfade classes are in full control. */
    animation: none;
}
/* When the layer has ANY bg-* class on it, it's either the current
   background (fully visible) or animating via one of the mt-bg-* classes. */
#background.mt-bg-visible,
#backgroundNext.mt-bg-visible { opacity: 0.26; }

#background::after,
#backgroundNext::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(10,10,13,0.35) 0%,
        rgba(10,10,13,0.80) 100%);
    pointer-events: none;
}

/* --- Incoming layer: start off to the side + transparent --- */
#background.mt-bg-prep-right,
#backgroundNext.mt-bg-prep-right {
    opacity: 0;
    transform: translateX(60px) scale(1.06);
    filter: blur(4px);
}
#background.mt-bg-prep-left,
#backgroundNext.mt-bg-prep-left {
    opacity: 0;
    transform: translateX(-60px) scale(1.06);
    filter: blur(4px);
}

/* --- Incoming layer: animate into place (sits ON TOP of outgoing) --- */
#background.mt-bg-in-right,
#backgroundNext.mt-bg-in-right {
    animation: mt-bg-in-right 0.7s ease forwards;
    z-index: -1;
}
#background.mt-bg-in-left,
#backgroundNext.mt-bg-in-left {
    animation: mt-bg-in-left 0.7s ease forwards;
    z-index: -1;
}

/* --- Outgoing layer: fade + drift the opposite way (sits BEHIND) --- */
#background.mt-bg-out,
#backgroundNext.mt-bg-out {
    animation: mt-bg-out 0.55s ease forwards;
    z-index: -2;
}

/* When the animation settles, the "active" (just-landed) layer
   gets .mt-bg-visible to hold at 0.26 opacity without an animation. */
#background.mt-bg-visible,
#backgroundNext.mt-bg-visible {
    z-index: -1;
}

@keyframes mt-bg-in-right {
    0%   { opacity: 0; transform: translateX(60px) scale(1.06);  filter: blur(4px); }
    100% { opacity: 0.26; transform: translateX(0) scale(1);     filter: blur(0); }
}
@keyframes mt-bg-in-left {
    0%   { opacity: 0; transform: translateX(-60px) scale(1.06); filter: blur(4px); }
    100% { opacity: 0.26; transform: translateX(0) scale(1);     filter: blur(0); }
}
@keyframes mt-bg-out {
    0%   { opacity: 0.26; transform: translateX(0) scale(1);     filter: blur(0); }
    100% { opacity: 0; transform: translateX(-30px) scale(1.04); filter: blur(6px); }
}

/* =============================================================
   MAIN WRAPPER
   ============================================================= */
.main-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    max-width: none;
    max-height: none;
    height: auto;
    position: static;
    padding: 0;
    margin: 0;
    background: transparent;
}

/* =============================================================
   TOP NAV BAR  (the centerpiece, matches reference image)
   ============================================================= */
.main-nav-bar {
    position: sticky;
    top: var(--accent-line-h);
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    z-index: 900;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    height: var(--nav-h);
    min-height: var(--nav-h);
    background: var(--t-bg-raised);
    border: 0;
    border-bottom: 1px solid var(--t-border);
    border-radius: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
    backdrop-filter: blur(6px);
}

/* Left cluster: brand + primary sections */
.nav-left {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.nav-brand {
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--t-text);
    border-right: 1px solid var(--t-border);
    white-space: nowrap;
}
.nav-brand .nav-brand-dot {
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--t-accent);
    margin-right: 10px;
    border-radius: 1px;
    box-shadow: 0 0 10px var(--t-accent);
}

.nav-primary {
    display: flex;
    align-items: stretch;
}
.nav-primary .nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--t-text-dim);
    border-right: 1px solid var(--t-border);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    user-select: none;
}
.nav-primary .nav-item .nav-bracket {
    color: var(--t-text-mute);
    font-weight: 400;
}
.nav-primary .nav-item .nav-key {
    color: var(--t-accent);
    font-weight: 700;
}
.nav-primary .nav-item:hover,
.nav-primary .nav-item.is-active {
    color: var(--t-text);
    background: var(--t-bg-hover);
}
.nav-primary .nav-item.is-active .nav-key {
    text-shadow: 0 0 8px var(--t-accent-soft);
}

/* Right cluster: utility icons */
.nav-right {
    display: flex;
    align-items: stretch;
    margin-left: auto;
}
.nav-right .nav-util {
    position: relative; /* containing block for the [data-tooltip] ::after */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    min-width: 40px;
    color: var(--t-text-dim);
    border-left: 1px solid var(--t-border);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

/* Custom tooltip on nav-util buttons. Renders BELOW the button (the
   nav bar sits at the very top of the page so an above-tooltip would
   clip off the viewport). Same mono / panel-bg styling used for the
   news icons so the look is consistent across the hub. */
.nav-right .nav-util[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    padding: 4px 8px;
    background: var(--t-bg-panel);
    border: 1px solid var(--t-border);
    border-radius: 4px;
    color: var(--t-text);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .14s ease, transform .14s ease;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.nav-right .nav-util[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(0);
}
.nav-right .nav-util:hover {
    color: var(--t-accent);
    background: var(--t-bg-hover);
}
.nav-right .nav-util svg {
    width: 16px; height: 16px;
    fill: currentColor; stroke: currentColor;
}

.nav-online {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--t-text-dim);
    border-left: 1px solid var(--t-border);
    white-space: nowrap;
}
.nav-online .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--t-online-dot);
    box-shadow: 0 0 6px var(--t-online-dot);
}
.nav-online .net-icon {
    width: 14px; height: 14px;
    color: var(--t-text-mute);
}

/* Theme toggle pill (preserves original IDs themeSelector/themeSwitch) */
.themeSelector {
    position: relative;
    align-self: center;
    width: 44px; height: 22px;
    margin: 0 10px 0 4px;
    background: var(--t-bg);
    border: 1px solid var(--t-border-strong);
    border-radius: 12px;
    cursor: pointer;
    flex-shrink: 0;
}
.themeSwitch {
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: var(--t-accent);
    border-radius: 50%;
    transition: left 0.2s ease, right 0.2s ease;
    box-shadow: 0 0 8px var(--t-accent-soft);
}

/* Hide legacy nav structure from the old template that isn't relevant here */
.main-nav-bar section.nav-title,
.main-nav-bar .nav-sub-menu,
.main-nav-bar .nav-logOut,
.main-nav-bar .nav-main-menu,
.nav-general-menus > .nav-main-menu > ul > li.group-text,
#navExpandButton,
.unlicensed-hub-version {
    display: none;
}

/* Prevent legacy .main-nav-bar section/ul/li rules from deforming the new nav */
.main-nav-bar,
.main-nav-bar * {
    animation: none;
    transform: none;
    filter: none;
    opacity: 1;
}
.main-nav-bar:hover {
    transform: none;
    filter: none;
    background-color: var(--t-bg-raised);
}
.main-nav-bar section,
.main-nav-bar ul,
.main-nav-bar li {
    position: static;
    display: flex;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
    list-style: none;
    border: 0;
}
.main-nav-bar section.nav-left,
.main-nav-bar section.nav-right { display: flex; }
.main-nav-bar .nav-item {
    width: auto;
    height: 100%;
    border-right: 1px solid var(--t-border);
}




.main-nav-bar .nav-item:hover {
    background-color: var(--t-bg-hover);
    border-color: var(--t-border);
}

/* -------- Nav hover dropdowns (Services / Games / Social) -------- */
.nav-primary .nav-item.has-dropdown { position: relative; overflow: visible; }
.nav-primary .nav-item.has-dropdown .nav-caret {
    margin-left: 4px;
    color: var(--t-text-mute);
    font-size: 10px;
    transition: color 0.15s;
}
.nav-primary .nav-item.has-dropdown:hover .nav-caret { color: var(--t-accent); }

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: -1px;
    min-width: 220px;
    background: var(--t-bg-raised);
    border: 1px solid var(--t-border);
    border-top: 2px solid var(--t-accent);
    padding: 6px 0;
    /* Always rendered; we fade with opacity + visibility so the
       transition can actually run (display:none is not animatable). */
    display: flex;
    flex-direction: column;
    z-index: 1000;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.nav-primary .nav-item.has-dropdown:hover .nav-dropdown,
.nav-primary .nav-item.has-dropdown:focus-within .nav-dropdown,
.nav-theme.has-dropdown:hover .nav-dropdown,
.nav-theme.has-dropdown:focus-within .nav-dropdown,
#themeSelector:hover .nav-dropdown,
#themeSelector:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
}

.nav-dropdown-head {
    padding: 6px 14px 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-text-mute);
    border-bottom: 1px dashed var(--t-border);
    margin-bottom: 4px;
}
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--t-text-dim);
    cursor: pointer;
    text-decoration: none;
    border: 0;
    background: transparent;
    transition: color 0.12s, background 0.12s, padding-left 0.12s;
}
.nav-dropdown-item .sq {
    color: var(--t-accent);
    font-size: 10px;
}
.nav-dropdown-item:hover {
    color: var(--t-text);
    background: var(--t-bg-hover);
    padding-left: 18px;
}

/* =============================================================
   HERO / LANDING — minimalist terminal variant
   Smaller title, quieter background, expanding underline under
   the title (revived from the original UNLEASH YOUR CREATIVITY
   landing animation).
   ============================================================= */
.hero {
    position: relative;
    padding: 32px 32px 28px;
    border-bottom: 1px solid var(--t-border);
    overflow: hidden;
    background: transparent;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    display: none;
}
.hero-inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* Hero-tag / hero-meta row was removed per design ask — the hero now
   leads with the title directly. Legacy .hero-tag selector is kept as a
   no-op so updateHero() can safely textContent into it if the element
   ever comes back; it has no visible styling now. */
.hero-tag { display: none; }

.hero-title {
    font-family: var(--mono);
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.005em;
    margin: 0;
    color: var(--t-text);
}
.hero-title .slash {
    color: var(--t-accent);
    font-weight: 200;
    margin: 0 0.1em;
    opacity: 0.5;
}
.hero-title .blink {
    display: inline-block;
    width: 0.32ch;
    height: 0.75em;
    background: var(--t-accent);
    opacity: 0.7;
    vertical-align: -0.02em;
    margin-left: 0.12em;
    animation: cursor-blink 1s steps(2) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* Subtle underline under the title — thinner, shorter, softer fade. */
.hero-rule {
    display: block;
    width: 120px;
    max-width: 40%;
    height: 1px;
    margin: 14px 0 18px;
    background: linear-gradient(90deg,
        var(--t-accent) 0%,
        transparent 100%);
    opacity: 0.75;
    transform-origin: left center;
    transform: scaleX(0);
    animation: mt-hero-underline 0.7s ease-out 0.15s forwards;
}
@keyframes mt-hero-underline {
    0%   { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}
@keyframes mt-hero-underline-swap {
    0%   { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}
.hero.hero-swap .hero-rule,
.hero.hero-swap-right .hero-rule,
.hero.hero-swap-left .hero-rule {
    animation: mt-hero-underline-swap 0.55s ease-out 0.05s forwards;
}

.hero-sub {
    max-width: 560px;
    margin: 0 0 22px 0;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--t-text-dim);
    line-height: 1.65;
}
.hero-sub .prompt { color: var(--t-accent); margin-right: 8px; }

.hero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Minimal ghost buttons: transparent by default, subtle border, quiet
   arrow glyph. The primary picks up the accent only on hover — nothing
   is shouting at rest. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--t-border);
    border-radius: 3px;
    color: var(--t-text-dim);
    background: transparent;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}
.btn:hover {
    border-color: var(--t-accent);
    color: var(--t-accent);
    background: transparent;
}
.btn.btn-primary {
    background: transparent;
    border-color: var(--t-border-strong);
    color: var(--t-text);
}
.btn.btn-primary:hover {
    background: var(--t-accent);
    border-color: var(--t-accent);
    color: #fff;
}
.btn .arr {
    color: var(--t-text-mute);
    font-weight: 400;
    transition: color 0.15s ease;
}
.btn:hover .arr { color: var(--t-accent); }
.btn.btn-primary .arr { color: var(--t-accent); }
.btn.btn-primary:hover .arr { color: #fff; }

/* =============================================================
   CONTENT AREA
   ============================================================= */
.mainContent {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    padding: 48px 32px;
    transform: none;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    background: transparent;
}

.main-content-section {
    display: none;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    top: auto;
    left: auto;
    transform: none;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
}
.main-content-section.is-visible { display: flex; }
#homeContent.is-visible { display: flex; }

/* Section headers */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-family: var(--mono);
}
.section-header .path {
    color: var(--t-text-mute);
    font-size: 13px;
}
.section-header .path .sep { color: var(--t-accent); }
.section-header h2 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--t-text);
}
.section-header .rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--t-border) 0%, transparent 100%);
}
/* CMS-supplied sub-headline. Injected after the rule by
   nav-router.js applySectionContent() when the section's
   description column is populated. */
.section-header .section-subhead {
    flex-basis: 100%;
    margin: 6px 0 0;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--t-text-dim);
    letter-spacing: 0.04em;
}

/* CMS-rendered card footer — small status text on the left + CTA on
   the right. The flexbox + gap keeps a comfortable margin between
   them, and `margin-left: auto` on the CTA pushes it to the far edge
   even when the footer text is missing. */
.card-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
}
.card-foot-text {
    color: var(--t-text-dim);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.04em;
}
.card-foot > .btn,
.card-foot > a.btn { margin-left: auto; }

/* ─────────────────────────────────────────────────────────────────────
   Section page divider. nav-router.js applySectionContent() prepends
   one of these to every `.main-content-section`, so each section page
   opens with a bold label + thin horizontal rule (replacing the now-
   hidden .section-header). Idempotent — see data-cms-divider attr.
   ───────────────────────────────────────────────────────────────────── */
.section-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 18px;
}
.section-divider-label {
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--t-text);
}
.section-divider-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        var(--t-border) 0%,
        rgba(255, 255, 255, 0.04) 100%);
}

/* CMS-driven content blocks rendered inside a .card. Mirrors the
   news-article block styling (.news-block-*) so headings / images /
   videos / quotes look consistent across the hub. */
.card-blocks { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.card-block-heading { margin: 0; font-weight: 700; color: var(--t-text); }
.card-block-heading--h1 { font-size: 22px; }
.card-block-heading--h2 { font-size: 18px; }
.card-block-heading--h3 { font-size: 15px; }
.card-block-paragraph { margin: 0; line-height: 1.55; color: var(--t-text); }
.card-block-image     { margin: 0; }
.card-block-image img { width: 100%; height: auto; border-radius: 4px; display: block; }
.card-block-image-caption {
    margin-top: 6px; font-size: 12px; color: var(--t-text-dim);
}
.card-block-video {
    width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 4px;
    overflow: hidden;
}
.card-block-video iframe,
.card-block-video video { width: 100%; height: 100%; border: 0; display: block; }
.card-block-link { margin: 0; }
.card-block-link a { color: var(--t-accent); text-decoration: underline; }
.card-block-quote {
    margin: 0; padding: 8px 14px; border-left: 3px solid var(--t-accent);
    background: var(--t-bg-raised); border-radius: 0 4px 4px 0;
}
.card-block-quote p { margin: 0; }
.card-block-quote-cite {
    display: block; margin-top: 6px; font-style: normal;
    font-size: 12px; color: var(--t-text-dim);
}
.card-block-divider {
    border: 0; border-top: 1px solid var(--t-border); margin: 4px 0;
}

/* =============================================================
   MODULE CARDS — minimal side-stripe layout.
   Tag in the top-left, subtle "…" indicator top-right, two-line
   "kind / name" anchored to the bottom, vertical accent stripe
   running down the left edge (color per module). No description
   paragraph — the whole card is a single clickable target.
   ============================================================= */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 20px 22px 20px;
    min-height: 210px;
    background: var(--t-bg-panel);
    border: 1px solid var(--t-border);
    border-radius: 6px;
    transition: transform 0.2s ease,
                border-color 0.2s ease,
                background 0.2s ease,
                box-shadow 0.2s ease;
    overflow: hidden;
    cursor: pointer;
}

/* Short accent tab pinned to the top-left, sized to align with the
   tag label row. Not a full-height stripe — this mirrors the small
   colored marker from the reference card. */
.card::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 0;
    height: 22px;
    width: 3px;
    background: var(--card-accent, var(--t-accent));
    opacity: 0.95;
    transition: height 0.2s ease, opacity 0.2s ease;
}
.card:hover {
    transform: translateY(-2px);
    background: var(--t-bg-hover);
    border-color: var(--card-accent, var(--t-accent));
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.card:hover::before { height: 26px; opacity: 1; }

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.card-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t-text-mute);
}
/* The legacy colored square marker is redundant now that the accent
   lives in the left stripe — hide any leftover markup rather than
   requiring every card to be re-authored. */
.card-tag .sq { display: none; }

.card-menu {
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--t-text-mute);
    user-select: none;
    pointer-events: none;
    transition: color 0.2s ease;
}
.card:hover .card-menu { color: var(--t-text-dim); }

/* Hover-reveal watermark logo. Sits in the bottom-right of the card at
   rest (hidden), fades + slides in when the card is hovered, and is
   clipped by the card's `overflow: hidden`. Pointer-events are off so
   it never intercepts the click. */
.card-logo-wrap {
    position: absolute;
    bottom: -14px;
    right: -14px;
    width: 110px;
    height: 110px;
    pointer-events: none;
    opacity: 0;
    transform: translate(14px, 10px) scale(0.92);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 0;
}
.card:hover .card-logo-wrap {
    opacity: 0.22;
    transform: translate(0, 0) scale(1);
}
.card-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* Placeholder used when a logo image fails to load (see onerror hook
   in main.ejs). Shows a subtle accent-tinted tile with the module's
   initial so the hover state still reads clearly. */
.card-logo-wrap.is-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--card-accent, var(--t-accent));
    border-radius: 10px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--card-accent, var(--t-accent)) 18%, transparent) 0%,
            transparent 70%);
    font-family: var(--mono);
    font-size: 34px;
    font-weight: 700;
    color: var(--card-accent, var(--t-accent));
    letter-spacing: 0;
}
.card-logo-wrap.is-placeholder .card-logo { display: none; }

/* Lift head + body above the logo watermark. */
.card-head,
.card-body {
    position: relative;
    z-index: 1;
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.card-name {
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--t-text);
    letter-spacing: -0.01em;
    line-height: 1.2;
    transition: color 0.2s ease;
}
.card-desc {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--t-text-dim);
    letter-spacing: 0;
    /* Keep descriptions compact — max two lines so the card grid stays
       even. Falls back gracefully in browsers without line-clamp. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Placeholder block (for sections still in development) */
.placeholder-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 24px;
    margin-top: 24px;
    background:
        repeating-linear-gradient(45deg,
            transparent 0 10px,
            rgba(255,255,255,0.015) 10px 20px),
        var(--t-bg-panel);
    border: 1px dashed var(--t-border-strong);
    border-radius: 6px;
    font-family: var(--mono);
}
.placeholder-panel .ph-label {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t-accent);
}
.placeholder-panel .ph-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--t-text);
}
.placeholder-panel .ph-lines { display: flex; flex-direction: column; gap: 8px; }
.placeholder-panel .ph-line {
    height: 10px;
    background: var(--t-bg-hover);
    border-radius: 2px;
}
.placeholder-panel .ph-line.short { width: 40%; }
.placeholder-panel .ph-line.medium { width: 70%; }

/* Brand color classes for the cards */
.card-planao  { --card-accent: var(--PlanaoColor);  }
.card-polar   { --card-accent: var(--PolarColor);   }
.card-otg     { --card-accent: var(--OTGColor);     }
.card-legit   { --card-accent: var(--LEGITColor);   }
.card-youtube { --card-accent: var(--YoutubeColor); }
.card-twitch  { --card-accent: var(--TwitchColor);  }
.card-discord { --card-accent: var(--DiscordColor); }
.card-shop    { --card-accent: var(--ShopColor);    }

/* Stats / KPI strip under hero */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    border-bottom: 1px solid var(--t-border);
}
.stat {
    padding: 20px 24px;
    border-left: 1px solid var(--t-border);
    font-family: var(--mono);
}
.stat:first-child { border-left: 0; }
.stat-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-text-mute);
    margin-bottom: 6px;
}
.stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--t-text);
}
.stat-value .accent { color: var(--t-accent); }

/* =============================================================
   FOOTER
   ============================================================= */
footer {
    margin-top: auto;
    padding: 24px 32px;
    background: var(--t-bg-raised);
    border-top: 1px solid var(--t-border);
}
footer p {
    max-width: 1200px;
    margin: 0 auto;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--t-text-mute);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
footer p::before {
    content: "$";
    color: var(--t-accent);
    font-weight: 700;
}

/* =============================================================
   HIDE RESTING-STATE LEGACY FLOATING BUTTONS
   Overlays (notificationBar, notificationHistory, shopItemList,
   accountSettings, settings, privacyPolicy, quickMenu,
   uplus_system_page) are NOT hidden here — JS opens them via
   inline display:flex and the original legacy styles.css handles
   their layout.
   ============================================================= */
.info-title,
.bottom-title,
.bottom-title-container,
#bottom-title,
#underline,
#logoPanelContainer,
#logoPanel,
.logoPanelContainer,
.logoPanel,
.unlicensed-hub-version,
#hubVersion,
#loading_screen,
.loading_screen_container,
#navIconTag,
#notificationBell,
.notificationBell,
#notificationBellButton,
.notificationBellButton,
#shopItemListButton,
.shopItemListButton,
#privacyPolicyButton,
.privacyPolicyButton,
#testButton,
.testButton,
#test,
.test-container,
#udebug,
#uDebugPanel,
.udebug,
.debug,
#debug,
.nav-general-menus,
.nav-shop-menu,
.nav-social-menu,
.nav-utilities-menu,
.nav-games-menu,
#navGeneralMenu,
#navShopMenu,
#navSocialMenu,
#navUtilitiesMenu,
#navGamesMenu {
    display: none;
}

/* Overlay backdrop styling. Defaults to hidden — JS flips display
   to flex/block when the corresponding action opens it. (Previously
   the legacy styles.css / uplus.css supplied these defaults; now
   that those files are gone we own them here.) `!important` because
   the JS sets inline `style.display = 'flex'` to open these — we
   want our default hide to win at rest. */
#uplus_system_page,
#notificationHistory,
#shopItemList,
#accountSettings,
#settings,
#privacyPolicy,
#quickMenuDisplay,
#notificationBar,
#findNetworks,
#newsArticle {
    display: none;
    z-index: 2000;
}
#notificationBar { z-index: 2500; }

/* ---------- Quick Menu (right-click context menu)
   Shown by core.js generalMenuOpen() which sets style.display='flex'.
   The legacy styles.css used to position + style this; we now own
   it here. Centered overlay with the same panel chrome as the rest
   of the hub. */
#quickMenuDisplay.quick-menu {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    background: rgba(5, 5, 10, 0.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.18s ease;
    padding: 24px;
}
/* When inline display:flex from generalMenuOpen, fade in. */
#quickMenuDisplay.quick-menu[style*="flex"] { opacity: 1; }

/* "QUICK MENU" header label.
   Targets both the legacy markup (an empty div followed by the
   header div) and the new markup (.quick-menu-head class). */
#quickMenuDisplay.quick-menu > .quick-menu-head,
#quickMenuDisplay.quick-menu > div:nth-of-type(2) {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t-accent);
    padding: 14px 22px 12px;
    background: var(--t-bg-panel);
    border: 1px solid var(--t-border);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    width: min(360px, 92vw);
    text-align: left;
}
#quickMenuDisplay.quick-menu ul {
    margin: 0;
    padding: 6px 0;
    background: var(--t-bg-panel);
    border: 1px solid var(--t-border);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    width: min(360px, 92vw);
    list-style: none;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
#quickMenuDisplay.quick-menu ul li {
    margin: 0;
    padding: 0;
}
#quickMenuDisplay.quick-menu ul li > div {
    padding: 12px 22px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--t-text);
    cursor: pointer;
    transition: background .12s ease, color .12s ease, padding-left .12s ease;
}
#quickMenuDisplay.quick-menu ul li > div:hover {
    background: var(--t-bg-hover);
    color: var(--t-accent);
    padding-left: 28px;
}
#quickMenuDisplay.quick-menu ul li + li > div {
    border-top: 1px dashed var(--t-border);
}

/* Footer should stick to viewport bottom */
footer {
    margin-top: auto;
    position: relative;
}

/* Any free-floating legacy button/icon — kill absolute positioning */
.generic-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
    top: auto;
    left: auto;
    transform: none;
    background: var(--t-accent);
    color: #fff;
    border: 1px solid var(--t-accent);
    border-radius: 4px;
    padding: 10px 20px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
}
.generic-button:hover { background: var(--t-accent-hot); }
.generic-button a { color: #fff; text-decoration: none; }

/* Line separator reskin (legacy uses <line-separator>) */
line-separator, .line-separator {
    display: block;
    height: 1px;
    width: 100%;
    background: var(--t-border);
    margin: 8px 0;
    position: static;
}

/* =============================================================
   UTILITY DOCK  (bottom-right floating buttons — replaces
   the old flask/bag/bell/warning icons)
   ============================================================= */
.util-dock {
    position: fixed;
    right: 20px;
    bottom: 72px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 800;
}
.util-dock-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--t-bg-raised);
    color: var(--t-text-dim);
    border: 1px solid var(--t-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.util-dock-btn svg { width: 16px; height: 16px; }
.util-dock-btn:hover {
    color: var(--t-accent);
    border-color: var(--t-accent);
    background: var(--t-bg-hover);
    transform: translateX(-2px);
}
.util-dock-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: var(--t-accent);
    border-radius: 8px;
}
.util-dock-badge[hidden] {
    display: none;
    box-shadow: 0 0 0 2px var(--t-bg);
}

/* =============================================================
   SECTION SWAP ANIMATION — true cross-fade between sections.
   The outgoing section gets .is-leaving (absolutely positioned
   overlay) + a slide-out-{left|right} class; the incoming gets
   .is-visible + slide-in-{left|right}. Direction is set by
   nav-router.js based on the section order — moving "forward"
   through the nav slides the outgoing section OUT to the left
   and the incoming IN from the right (and vice-versa).
   ============================================================= */
@keyframes mt-slide-in-right {
    0%   { opacity: 0; transform: translateX(42px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes mt-slide-in-left {
    0%   { opacity: 0; transform: translateX(-42px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes mt-slide-out-left {
    0%   { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(-42px); }
}
@keyframes mt-slide-out-right {
    0%   { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(42px); }
}
.main-content-section.is-visible.slide-in-right {
    animation: mt-slide-in-right 0.45s ease both;
}
.main-content-section.is-visible.slide-in-left {
    animation: mt-slide-in-left 0.45s ease both;
}

/* --- Outgoing section: pinned on top of the content area so the
       incoming section can share the same space while they crossfade. */
.main-content-section.is-leaving {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
    will-change: opacity, transform;
}
.main-content-section.is-leaving.slide-out-left {
    animation: mt-slide-out-left 0.42s ease both;
}
.main-content-section.is-leaving.slide-out-right {
    animation: mt-slide-out-right 0.42s ease both;
}

/* Hero cross-fade — swaps direction in lock-step with the section
   slide so the whole top half of the page feels unified. */
@keyframes mt-hero-swap {
    0%   { opacity: 0.0; transform: translateY(6px); }
    100% { opacity: 1;   transform: translateY(0); }
}
@keyframes mt-hero-slide-in-right {
    0%   { opacity: 0; transform: translateX(28px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes mt-hero-slide-in-left {
    0%   { opacity: 0; transform: translateX(-28px); }
    100% { opacity: 1; transform: translateX(0); }
}
.hero.hero-swap .hero-inner {
    animation: mt-hero-swap 0.4s ease both;
}
.hero.hero-swap-right .hero-inner {
    animation: mt-hero-slide-in-right 0.45s ease both;
}
.hero.hero-swap-left .hero-inner {
    animation: mt-hero-slide-in-left 0.45s ease both;
}

/* =============================================================
   MODERN-TERMINAL OVERLAY CHROME
   Used by: #settings, #accountSettings, #notificationHistory,
            #shopItemList (all now have class "mt-overlay")
   ============================================================= */

/* Legacy rule in styles.css does:
     .settings, .accountSettings, .notification-history, .shop-item-list {
        display: none; position: fixed; height: 100vh; width: 100vw; ... }
   We keep that but restyle the backdrop + add a centered panel. */
.mt-overlay {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(5, 5, 10, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.22s ease, backdrop-filter 0.22s ease;
    z-index: 2100;
    padding: 24px;
    overflow: auto;
}

.mt-overlay-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(720px, 92vw);
    max-width: 92vw;
    max-height: 86vh;
    background: var(--t-bg-panel);
    border: 1px solid var(--t-border);
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255,255,255,0.02);
    overflow: hidden;
    animation: mt-hero-swap 0.28s ease both;
}

/* Minimalist head: a flat breadcrumb on the left + subtle title on the
   right, separated by a thin border. No gradient wash, no heavy pink
   top stripe — matches the nav / hero / card aesthetic. */
.mt-overlay-head {
    padding: 14px 22px;
    border-bottom: 1px solid var(--t-border);
    background: transparent;
}
.mt-overlay-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
}
.mt-overlay-title .mt-dot {
    width: 3px;
    height: 14px;
    background: var(--t-accent);
    border-radius: 1px;
    box-shadow: none;
    opacity: 0.9;
}
.mt-overlay-title .mt-path {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--t-text-mute);
}
.mt-overlay-title h1 {
    margin-left: 0;
    margin-right: auto;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--t-text-dim);
    padding-right: 34px;  /* leave room for the close X */
}
.mt-overlay-sub {
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--t-text-mute);
}

.mt-overlay-body {
    /* Override legacy .settings-container / .notification-history-container
       which locked height to 90vh / width to 60vw */
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: calc(86vh - 140px);
    padding: 18px 22px;
    overflow-y: auto;
    display: block;
    flex-direction: initial;
    justify-content: flex-start;
    background: transparent;
}


/* --- Notification history: empty state.
       When the log container has no children, render a subtle terminal
       "no notifications" placeholder instead of a blank void. */
#notificationHistory .notification-history-container {
    /* Reset the legacy fixed-size rules. */
    height: auto;
    width: 100%;
    min-height: 220px;
    justify-content: flex-start;
}
#notificationLogContainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
}
#notificationLogContainer:empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}
#notificationLogContainer:empty::before {
    content: "> no notifications_";
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-text-mute);
    animation: mt-empty-cursor 1.1s steps(2) infinite;
}
@keyframes mt-empty-cursor {
    50% { opacity: 0.55; }
}

.mt-overlay-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--t-border);
    background: var(--t-bg-raised);
}

/* Close X button injected by nav-router.js — mounted inside the panel
   when one exists (.mt-overlay-panel), otherwise falls back to the
   overlay backdrop. Panels are position:relative so absolute pins the
   button right at the panel's top-right corner. */
.overlay-close-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: var(--t-text-dim);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    z-index: 10;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.overlay-close-x:hover {
    color: var(--t-accent);
    border-color: var(--t-accent);
    background: var(--t-bg-hover);
}

/* =============================================================
   SETTINGS OPTIONS (modern terminal rows + toggle switches)
   ============================================================= */
.mt-overlay .mt-options-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}
.mt-overlay .mt-option-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 4px;
    border-bottom: 1px dashed var(--t-border);
    margin: 0;
    width: 100%;
    height: auto;
    background: transparent;
    color: var(--t-text);
}
.mt-overlay .mt-option-row:last-child { border-bottom: 0; }

.mt-overlay .settings-name {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.mt-overlay .settings-name p:first-child {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--t-text);
    margin: 0;
}
.mt-overlay .settings-name .settings-subtext {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.55;
    color: var(--t-text-dim);
    max-width: 520px;
    margin: 0;
}

/* Toggle pill */
.mt-overlay .mt-toggle-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.mt-overlay .mt-toggle {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    background: var(--t-bg-hover);
    border: 1px solid var(--t-border-strong);
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
    margin: 0;
    padding: 0;
    flex: none;
    top: auto; left: auto; right: auto; bottom: auto;
    box-shadow: none;
}
.mt-overlay .mt-toggle .mt-toggle-knob {
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: var(--t-text-dim);
    border-radius: 50%;
    transition: left 0.18s, background 0.18s;
}
.mt-overlay .mt-toggle.is-on,
.mt-overlay .mt-toggle[data-on="true"] {
    background: var(--t-accent-soft);
    border-color: var(--t-accent);
}
.mt-overlay .mt-toggle.is-on .mt-toggle-knob,
.mt-overlay .mt-toggle[data-on="true"] .mt-toggle-knob {
    left: 24px;
    background: var(--t-accent);
    box-shadow: 0 0 10px var(--t-accent-soft);
}
/* Fallback visual when legacy JS flips only inline styles */
.mt-overlay .mt-toggle[style*="right"] .mt-toggle-knob { left: 24px; background: var(--t-accent); }

/* Save button in the footer */
.mt-overlay .mt-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--t-accent);
    border: 1px solid var(--t-accent);
    border-radius: 4px;
    cursor: pointer;
    position: static;
    width: auto; height: auto;
    transform: none;
    transition: background 0.15s, border-color 0.15s;
}
.mt-overlay .mt-btn-primary:hover {
    background: var(--t-accent-hot);
    border-color: var(--t-accent-hot);
}
.mt-overlay .mt-btn-primary .arr { color: #fff; }

/* Empty-state inside account/notification overlays */
.mt-empty {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 0;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--t-text-dim);
    overflow: visible;
    margin: 0;
    height: auto;
}
.mt-empty-line { color: var(--t-text); }
.mt-empty-line.mute { color: var(--t-text-mute); }

/* Shop items inside the new panel */
.mt-overlay #shopItemListContainer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
    overflow: visible;
}
.mt-overlay .shop-item-list-wrapper {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 12px;
    padding: 14px;
    margin: 0;
    background: var(--t-bg-hover);
    border: 1px solid var(--t-border);
    border-radius: 6px;
    font-family: var(--mono);
    color: var(--t-text);
    box-shadow: none;
    animation: mt-hero-swap 0.35s ease both;
}
.mt-overlay .shop-item-list-type {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-accent);
}
.mt-overlay .shop-item-list-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--t-text);
}
.mt-overlay .shop-item-list-description {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--t-text-dim);
    line-height: 1.5;
}
.mt-overlay .shop-item-list-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--t-accent);
}

/* Legacy heading + line-separator inside overlays — keep hidden,
   the mt-overlay-head replaces them */
.mt-overlay .settings-top-title,
.mt-overlay .privacy-top-title,
.mt-overlay .shop-top-title,
.mt-overlay > line-separator { display: none; }

/* Responsive */
@media (max-width: 900px) {
    .nav-brand { padding: 0 10px; font-size: 12px; }
    .nav-primary .nav-item { padding: 0 10px; font-size: 12px; }
    .nav-online { display: none; }
    .hero { padding: 56px 20px 40px; }
    .mainContent { padding: 32px 16px; }
    .stat-strip { padding: 0 16px; }
}
@media (max-width: 640px) {
    .nav-primary .nav-item .nav-label { display: none; }
    .nav-right .nav-util { padding: 0 8px; min-width: 32px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .btn { justify-content: center; }
}

/* (Old "lift above footer" override removed — util-dock is now a
   full-height rail; see UTIL DOCK RAIL section near the end.) */

/* =============================================================
   FOOTER — make the terminal footer visibly present at the bottom
   ============================================================= */
footer {
    margin-top: auto;
    position: relative;
    z-index: 5;
    display: block;
    padding: 20px 32px;
    /* Flat panel background instead of the dark gradient — the gradient
       was hardcoded in rgba(10,10,13,0.4) which read as a dark band on
       the light / sky / terra themes. */
    background: var(--t-bg-raised);
    border-top: 1px solid var(--t-border);
    /* No drop shadow either — the 1px border is enough separation; the
       previous heavy dark shadow looked harsh on light backgrounds. */
    box-shadow: none;
}
footer p {
    max-width: 1200px;
    margin: 0 auto;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--t-text-mute);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
footer p::before {
    content: "$";
    color: var(--t-accent);
    font-weight: 700;
    margin-right: 4px;
}

/* =============================================================
   NAV LAYOUT VARIANTS  (driven by <html data-nav-pos="...">)
   Four positions: top (default), bottom, left, right.
   All switch layout of .main-wrapper + pin the nav to that edge.
   ============================================================= */

/* --- TOP (default) is handled by the existing rules --- */

/* --- BOTTOM: nav pinned to the bottom of the viewport --- */
html[data-nav-pos="bottom"] .main-wrapper {
    flex-direction: column-reverse;
}
html[data-nav-pos="bottom"] .main-nav-bar {
    position: sticky;
    top: auto;
    bottom: 0;
    border-bottom: 0;
    border-top: 1px solid var(--t-border);
}
html[data-nav-pos="bottom"] body::before {
    /* move accent line to bottom too */
    top: auto;
    bottom: 0;
}
/* (bottom-layout util-dock offset moved to UTIL DOCK RAIL section.) */

/* --- LEFT: vertical rail on the left edge --- */
html[data-nav-pos="left"] .main-wrapper {
    flex-direction: row;
    min-height: 100vh;
}
html[data-nav-pos="left"] .main-nav-bar {
    position: sticky;
    top: var(--accent-line-h);
    left: 0;
    width: var(--nav-side-w, 220px);
    min-width: var(--nav-side-w, 220px);
    height: calc(100vh - var(--accent-line-h));
    min-height: calc(100vh - var(--accent-line-h));
    flex-direction: column;
    align-items: stretch;
    border-bottom: 0;
    border-right: 1px solid var(--t-border);
}
html[data-nav-pos="left"] .nav-left,
html[data-nav-pos="left"] .nav-right {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
html[data-nav-pos="left"] .nav-primary {
    flex-direction: column;
    align-items: stretch;
}
html[data-nav-pos="left"] .nav-primary .nav-item,
html[data-nav-pos="left"] .nav-right .nav-util {
    border-right: 0;
    border-bottom: 1px solid var(--t-border);
    justify-content: flex-start;
    padding: 14px 16px;
}
html[data-nav-pos="left"] .nav-brand {
    border-right: 0;
    border-bottom: 1px solid var(--t-border);
    padding: 16px;
    justify-content: flex-start;
}
html[data-nav-pos="left"] .nav-right {
    margin-top: auto;
}
html[data-nav-pos="left"] .nav-online {
    justify-content: flex-start;
    padding: 12px 16px;
}

/* --- RIGHT: vertical rail on the right edge --- */
html[data-nav-pos="right"] .main-wrapper {
    flex-direction: row-reverse;
    min-height: 100vh;
}
html[data-nav-pos="right"] .main-nav-bar {
    position: sticky;
    top: var(--accent-line-h);
    right: 0;
    left: auto;
    width: var(--nav-side-w, 220px);
    min-width: var(--nav-side-w, 220px);
    height: calc(100vh - var(--accent-line-h));
    min-height: calc(100vh - var(--accent-line-h));
    flex-direction: column;
    align-items: stretch;
    border-bottom: 0;
    border-left: 1px solid var(--t-border);
}
html[data-nav-pos="right"] .nav-left,
html[data-nav-pos="right"] .nav-right {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
html[data-nav-pos="right"] .nav-primary {
    flex-direction: column;
    align-items: stretch;
}
html[data-nav-pos="right"] .nav-primary .nav-item,
html[data-nav-pos="right"] .nav-right .nav-util {
    border-right: 0;
    border-bottom: 1px solid var(--t-border);
    justify-content: flex-start;
    padding: 14px 16px;
}
html[data-nav-pos="right"] .nav-brand {
    border-right: 0;
    border-bottom: 1px solid var(--t-border);
    padding: 16px;
    justify-content: flex-start;
}
html[data-nav-pos="right"] .nav-right { margin-top: auto; }
html[data-nav-pos="right"] .nav-online {
    justify-content: flex-start;
    padding: 12px 16px;
}
/* (right-layout util-dock flip moved to UTIL DOCK RAIL section.) */

/* =============================================================
   SETTINGS — layout picker cards + section chrome
   ============================================================= */
.mt-overlay-panel--wide { max-width: 900px; }

.mt-settings-section {
    padding: 18px 0;
    border-top: 1px solid var(--t-border);
}
.mt-settings-section:first-child { border-top: 0; }

.mt-settings-label {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--t-accent);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.mt-settings-help {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--t-text-dim);
    margin: 0 0 14px 0;
    line-height: 1.55;
}

.mt-layout-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 760px) {
    .mt-layout-grid { grid-template-columns: repeat(2, 1fr); }
}

.mt-layout-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--t-bg-hover);
    border: 1px solid var(--t-border);
    border-radius: 6px;
    font-family: var(--mono);
    color: var(--t-text);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    position: static;
    width: auto;
    height: auto;
}
.mt-layout-card:hover {
    border-color: var(--t-accent);
    transform: translateY(-1px);
}
.mt-layout-card.is-selected {
    border-color: var(--t-accent);
    background: rgba(255, 64, 129, 0.08);
    box-shadow: 0 0 0 1px var(--t-accent) inset;
}

.mt-layout-preview {
    display: flex;
    width: 100%;
    aspect-ratio: 5 / 3;
    background: var(--t-bg);
    border: 1px solid var(--t-border);
    border-radius: 4px;
    overflow: hidden;
    padding: 4px;
    gap: 4px;
}
/* HTML DOM order already encodes the layout (bar-first for Top/Left,
   body-first for Bottom/Right), so we don't want to also reverse in
   CSS — that double-flip made Bottom look like Top, and Right look
   like Left. Plain column/row is correct. */
.mt-layout-preview.layout-top,
.mt-layout-preview.layout-bottom { flex-direction: column; }
.mt-layout-preview.layout-left,
.mt-layout-preview.layout-right  { flex-direction: row; }

.mt-layout-bar {
    background: var(--t-accent);
    border-radius: 2px;
    box-shadow: 0 0 6px var(--t-accent-soft);
    flex-shrink: 0;
}
.mt-layout-preview.layout-top .mt-layout-bar,
.mt-layout-preview.layout-bottom .mt-layout-bar { height: 10px; width: 100%; }
.mt-layout-preview.layout-left .mt-layout-bar,
.mt-layout-preview.layout-right .mt-layout-bar { width: 14px; height: 100%; }

.mt-layout-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 2px;
}
.mt-layout-block {
    height: 6px;
    background: var(--t-border-strong);
    border-radius: 2px;
}
.mt-layout-block.wide { height: 14px; background: var(--t-border); }

.mt-layout-caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mt-layout-name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--t-text);
    text-transform: uppercase;
}
.mt-layout-desc {
    font-size: 11px;
    color: var(--t-text-dim);
    line-height: 1.45;
}
.mt-layout-card.is-selected .mt-layout-name { color: var(--t-accent); }

/* =============================================================
   MIDDLE SCROLL AREA — nav + footer pinned; the middle owns
   the vertical scroll. Works for all four nav layouts.
   ============================================================= */
html, body {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}
.main-wrapper {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}
.main-nav-bar { flex: 0 0 auto; }
footer        { flex: 0 0 auto; }
.mt-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Left / right layouts: wrapper flows in a row. Each layout's own
   block (above) sets the actual direction — left:row, right:row-reverse —
   so we DON'T re-set flex-direction here or it'll clobber the right
   layout's row-reverse, leaving the side rail stuck on the left. */
html[data-nav-pos="left"] .main-wrapper {
    flex-direction: row;
}
html[data-nav-pos="left"] .mt-scroll,
html[data-nav-pos="right"] .mt-scroll {
    flex: 1 1 auto;
    min-width: 0;
    height: 100vh;
    max-height: 100vh;
}
/* The footer in side-nav layouts sits at the bottom of the scroll column */
html[data-nav-pos="left"] footer,
html[data-nav-pos="right"] footer {
    display: none;
}

/* (Side-layout util-dock bottom offset moved to UTIL DOCK RAIL section.) */

/* =============================================================
   DYNAMIC SECTION ACCENT
   When html[data-dynamic-accent="on"] is set, the --t-accent CSS
   variables shift based on the current section via data-section.
   This recolors every accent surface (buttons, bars, underline,
   tags, footer $, etc) to match the active section's identity.
   ============================================================= */
html[data-dynamic-accent="on"][data-section="planao"] {
    --t-accent:      #52b2f4;
    --t-accent-hot:  #7ac7fa;
    --t-accent-soft: rgba(82, 178, 244, 0.12);
}
html[data-dynamic-accent="on"][data-section="polar"] {
    --t-accent:      #4ade80;
    --t-accent-hot:  #86efac;
    --t-accent-soft: rgba(74, 222, 128, 0.12);
}
html[data-dynamic-accent="on"][data-section="otg"] {
    --t-accent:      #ef4444;
    --t-accent-hot:  #f87171;
    --t-accent-soft: rgba(239, 68, 68, 0.12);
}
html[data-dynamic-accent="on"][data-section="legit"] {
    --t-accent:      #60a5fa;
    --t-accent-hot:  #93c5fd;
    --t-accent-soft: rgba(96, 165, 250, 0.12);
}
html[data-dynamic-accent="on"][data-section="discord"] {
    --t-accent:      #818cf8;
    --t-accent-hot:  #a5b4fc;
    --t-accent-soft: rgba(129, 140, 248, 0.14);
}
html[data-dynamic-accent="on"][data-section="youtube"] {
    --t-accent:      #f87171;
    --t-accent-hot:  #fca5a5;
    --t-accent-soft: rgba(248, 113, 113, 0.14);
}
html[data-dynamic-accent="on"][data-section="twitch"] {
    --t-accent:      #a78bfa;
    --t-accent-hot:  #c4b5fd;
    --t-accent-soft: rgba(167, 139, 250, 0.14);
}
html[data-dynamic-accent="on"][data-section="prints"] {
    --t-accent:      #fbbf24;
    --t-accent-hot:  #fcd34d;
    --t-accent-soft: rgba(251, 191, 36, 0.14);
}
/* Home stays the default hot-pink identity */

/* Smooth the variable swap over a beat so users see the crossfade */
html {
    transition: none;
}
.hero-rule,
.hero-tag,
.hero-title .slash,
.hero-title .blink,
.hero-sub .prompt,
.btn-primary,
.nav-brand-dot,
.util-dock-btn:hover,
.mt-layout-bar,
.main-nav-bar .nav-item.is-active,
.stat-value .accent,
footer p::before {
    transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease,
                box-shadow 0.35s ease;
}

/* =============================================================
   QUIETER / LESS NOISY HOME EXTRAS
   Tone down repeating noise patterns on the stat-strip and the
   mainContent section header to match the new slimmer hero.
   ============================================================= */
.stat-strip {
    border-top: 1px solid var(--t-border);
    border-bottom: 1px solid var(--t-border);
    background: linear-gradient(180deg, transparent 0%, rgba(10,10,13,0.25) 100%);
}

/* =============================================================
   NOTIFICATION BAR — terminal-style toast
   Reskins the legacy notificationBar partial without touching the
   EJS. Uses the same element hooks (.notification-icon, title,
   message, details button, close).
   ============================================================= */
#notificationBar.notification-bar {
    position: fixed !important;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2500;
    width: auto !important;
    min-width: 340px !important;
    max-width: 520px !important;
    padding: 0 !important;
    background: var(--t-bg-raised);
    border: 1px solid var(--t-border);
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55);
    font-family: var(--mono);
    color: var(--t-text);
    /* Inner content stays at its natural size; we open/close by
       clipping the bar's visible area with clip-path. The element
       remains laid out at full size, so children never reflow as
       the visible width changes — they simply get clipped from
       both sides toward the centre on close. */
    overflow: hidden !important;
    clip-path: inset(0 0 0 0 round 6px);
    transition: clip-path 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
    /* JS sets `style.display = 'flex'` to show — without an explicit
       flex-direction the outer bar becomes a row, and the timer bar
       below the container competes with it for horizontal space.
       Force column so the timer stacks underneath. */
    flex-direction: column !important;
}

/* On initial render (display:none → display:flex), pin the bar to a
   0-width centre line; the transition above then interpolates the
   clip outward to fully open. Modern browsers support @starting-style. */
@starting-style {
    #notificationBar.notification-bar {
        clip-path: inset(0 50% 0 50% round 6px);
    }
}
#notificationBar.notification-bar .notification-bar-container,
#notificationBar #notificationBarContainer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 10px 8px 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
/* Text column fills the row; icon + close are auto-sized siblings.
   `flex: 1 1 0` (instead of `auto`) tells flexbox to ignore the
   intrinsic max-content width and just fill remaining space — auto
   basis was sizing the column to its longest single word. */
#notificationBar .notification-text-container {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
}
#notificationBar .notification-icon,
#notificationBar #notificationClose,
#notificationBar .notification-close-icon {
    flex: 0 0 auto !important;
}
#notificationBar .notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    max-height: 26px;
    background: var(--t-accent-soft);
    border: 1px solid var(--t-accent);
    border-radius: 4px;
    padding: 0;
    margin: 0;
}
#notificationBar .notification-icon svg {
    width: 14px;
    height: 14px;
    fill: var(--t-accent);
}
#notificationBar .notification-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    padding: 0;
    margin: 0;
}
#notificationBar .notification-text-container > div {
    margin: 0;
    padding: 0;
    line-height: 1;
}
#notificationBar .notification-title,
#notificationBar #notificationTitle {
    margin: 0;
    padding: 0;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-accent);
    line-height: 1.2;
}
#notificationBar .notification-message,
#notificationBar #notificationMessage {
    margin: 0;
    padding: 0;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--t-text);
    line-height: 1.35;
    word-break: break-word;
}
/* Details button is hardcoded in EJS but never populated with real detail
   content — hide it by default. JS can re-enable it later with .has-details. */
#notificationBar .notification-details-button,
#notificationBar #notificationDetails {
    display: none;
}
#notificationBar.has-details .notification-details-button,
#notificationBar.has-details #notificationDetails {
    display: inline-flex;
    align-items: center;
    margin: 2px 0 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--t-text-dim);
    cursor: pointer;
    text-align: left;
    width: auto;
    height: auto;
    position: static;
    transform: none;
}
#notificationBar.has-details .notification-details-button::after,
#notificationBar.has-details #notificationDetails::after {
    content: " ›";
    color: var(--t-accent);
}
#notificationBar.has-details .notification-details-button:hover,
#notificationBar.has-details #notificationDetails:hover {
    color: var(--t-accent);
}
/* Kill the legacy vertical-line divider — we're using padding/gap instead */
#notificationBar vertical-line {
    display: none;
}
#notificationBar .notification-close-icon,
#notificationBar #notificationClose {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 0;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    max-height: 26px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--t-text-dim);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    position: static;
    transform: none;
}
#notificationBar .notification-close-icon svg,
#notificationBar #notificationClose svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}
/* Hide the legacy "CLOSE" text label — the X icon is enough */
#notificationBar .notification-close-icon p,
#notificationBar #notificationClose p {
    display: none;
}
#notificationBar .notification-close-icon:hover,
#notificationBar #notificationClose:hover {
    color: var(--t-accent);
    background: var(--t-bg-hover);
    border-color: var(--t-border);
}
#notificationBar .notification-timeout,
#notificationBar #notificationTimer {
    display: block;
    height: 2px;
    background: var(--t-accent);
    margin: 0;
    padding: 0;
    width: 100%;
    box-shadow: 0 0 8px var(--t-accent-soft);
}

/* =============================================================
   PRIVACY POLICY — overlay + panel chrome, kill inline bleed
   ============================================================= */
#privacyPolicy.privacy-policy {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    display: none;
    /* Without an explicit flex-direction, the legacy JS that flips
       display to 'flex' lays out the title block and the body as a
       row (default). Force column so they stack the way they read. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    margin: 0;
    background: rgba(6, 6, 8, 0.78);
    backdrop-filter: blur(4px);
    z-index: 2000;
    overflow: auto;
    box-shadow: none;
    border: 0;
}
/* When opened by legacy JS, it gets display:flex/inline-style; honor either */
#privacyPolicy.privacy-policy[style*="display: flex"],
#privacyPolicy.privacy-policy[style*="display: block"],
#privacyPolicy.privacy-policy[style*="display:flex"],
#privacyPolicy.privacy-policy[style*="display:block"] {
    display: flex;
}

/* Inner frame — becomes the terminal panel */
#privacyPolicy .privacy-top-title,
#privacyPolicy .privacy-policy-container {
    position: relative;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    background: var(--t-bg-raised);
    border: 1px solid var(--t-border);
    padding: 0;
    color: var(--t-text);
    font-family: var(--mono);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
#privacyPolicy .privacy-top-title {
    padding: 22px 28px 18px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 1px solid var(--t-border);
}
#privacyPolicy .privacy-top-title > div:first-child {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--t-accent);
    margin-bottom: 8px;
}
#privacyPolicy .privacy-policy-header-container {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
#privacyPolicy .privacy-policy-header-container h1 {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0;
    color: var(--t-text);
}
#privacyPolicy .privacy-policy-header-container h1.date {
    font-size: 12px;
    font-weight: 500;
    color: var(--t-text-dim);
    letter-spacing: 0.1em;
}
#privacyPolicy line-separator {
    display: none;
}
#privacyPolicy .privacy-policy-container {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    max-height: min(70vh, 760px);
    overflow-y: auto;
    padding: 0;
}
#privacyPolicy .inner-container {
    padding: 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
#privacyPolicy section {
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
}
#privacyPolicy .privacy-sub-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--t-accent);
}
#privacyPolicy .privacy-sub-title span { color: var(--t-accent-hot); }
#privacyPolicy .privacy-sub-title p { margin: 0; padding: 0; color: inherit; }
#privacyPolicy .privacy-policy-description {
    margin: 0;
    padding: 0;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.65;
    color: var(--t-text-dim);
    white-space: pre-line;
}
/* Top-level close X (injected by nav-router) sits above the panel */
#privacyPolicy .overlay-close-x {
    position: fixed;
    top: 28px;
    right: 28px;
}

/* =============================================================
   SEGMENTED SELECTOR  (Dynamic | Static theme mode picker)
   ============================================================= */
.mt-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 520px) {
    .mt-segmented { grid-template-columns: 1fr; }
}
.mt-segmented-option {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 14px 16px;
    background: var(--t-bg-hover);
    border: 1px solid var(--t-border);
    border-radius: 6px;
    color: var(--t-text);
    font-family: var(--mono);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    position: static;
    width: auto;
    height: auto;
}
.mt-segmented-option:hover {
    border-color: var(--t-accent);
    transform: translateY(-1px);
}
.mt-segmented-option.is-selected {
    border-color: var(--t-accent);
    background: rgba(255, 64, 129, 0.08);
    box-shadow: 0 0 0 1px var(--t-accent) inset;
}
.mt-segmented-option .mt-seg-dot {
    grid-row: 1 / span 2;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--t-border-strong);
    background: transparent;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.mt-segmented-option.is-selected .mt-seg-dot {
    border-color: var(--t-accent);
    background: var(--t-accent);
    box-shadow: 0 0 10px var(--t-accent-soft);
}
.mt-segmented-option .mt-seg-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t-text);
}
.mt-segmented-option.is-selected .mt-seg-label {
    color: var(--t-accent);
}
.mt-segmented-option .mt-seg-desc {
    font-size: 11px;
    color: var(--t-text-dim);
    line-height: 1.4;
}

/* =============================================================
   UTIL DOCK RAIL
   The dock is a full-height fixed rail on the OPPOSITE edge
   from the main nav.
     • Nav top / bottom / left  →  dock on RIGHT
     • Nav right                →  dock on LEFT
   The middle scroll column reserves space so the dock never
   overlaps content.
   ============================================================= */
:root {
    --util-dock-w: 56px;
}

.util-dock {
    position: fixed;
    right: 0;
    left: auto;
    top: var(--accent-line-h);
    bottom: 0;
    width: var(--util-dock-w);
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 0;
    gap: 10px;
    background: var(--t-bg-raised);
    border-left: 1px solid var(--t-border);
    border-right: 0;
    z-index: 850;
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.35);
}

.util-dock-btn {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    box-shadow: none;
    transform: none;
}
/* Hover slides the button slightly INTO the page (away from the rail
   edge). On a right-side rail that means leftward; on a left-side rail
   that means rightward. */
.util-dock-btn:hover {
    transform: translateX(-2px);
}
html[data-nav-pos="right"] .util-dock-btn:hover {
    transform: translateX(2px);
}

/* Reserve space in the scroll column for the dock so content never
   slides under it (fixes the PLAY-button-over-bell overlap). */
.mt-scroll {
    padding-right: var(--util-dock-w);
}

/* --- TOP layout (default) --- */
html[data-nav-pos="top"] .util-dock,
html:not([data-nav-pos]) .util-dock {
    top: calc(var(--accent-line-h) + var(--nav-h));
    bottom: 0;
}

/* --- BOTTOM layout: nav at bottom, dock above it on the right --- */
html[data-nav-pos="bottom"] .util-dock {
    top: var(--accent-line-h);
    bottom: var(--nav-h);
}

/* --- LEFT layout: nav on left rail, dock on right rail --- */
html[data-nav-pos="left"] .util-dock {
    top: var(--accent-line-h);
    bottom: 0;
    right: 0;
    left: auto;
    border-left: 1px solid var(--t-border);
    border-right: 0;
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.35);
}

/* --- RIGHT layout: nav on right rail, dock flips to LEFT rail --- */
html[data-nav-pos="right"] .util-dock {
    top: var(--accent-line-h);
    bottom: 0;
    right: auto;
    left: 0;
    border-left: 0;
    border-right: 1px solid var(--t-border);
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.35);
}
html[data-nav-pos="right"] .mt-scroll {
    padding-right: 0;
    padding-left: var(--util-dock-w);
}

/* In side-nav layouts, .main-wrapper is row(-reverse). The util-dock
   is fixed and floats over the viewport; the scroll column already
   reserves width via padding above. The MAIN nav (220px side rail)
   should not run under the dock — give the wrapper an extra outer
   margin equal to the dock width so the nav clears the dock. */
html[data-nav-pos="left"] .main-wrapper {
    padding-right: var(--util-dock-w);
}
html[data-nav-pos="left"] .mt-scroll {
    /* In side layouts, the dock space is handled at the wrapper
       level so we don't double-reserve inside the scroll column. */
    padding-right: 0;
}
html[data-nav-pos="right"] .main-wrapper {
    padding-left: var(--util-dock-w);
}
html[data-nav-pos="right"] .mt-scroll {
    padding-left: 0;
}

/* =============================================================
   FOOTER — guarantee flush with viewport bottom
   The wrapper is 100vh flex column, mt-scroll grows, footer is
   flex 0 0 auto. Reinforce so no margin can push it inward and
   no rounding can leave a sliver of body bg under it.

   PROBLEM: several legacy partials (notificationBar, accountSettings,
   quickMenu, util-dock, etc.) are rendered as siblings AFTER the
   <footer> inside .main-wrapper. Even when most are display:none or
   position:fixed, any in-flow one steals vertical space below the
   footer, leaving a black gap underneath. Solution: take the footer
   out of normal flow with position:absolute and pin it to the
   wrapper's bottom edge. The wrapper is height:100vh + position:relative
   (set below), so absolute-bottom = viewport bottom, period.
   ============================================================= */
.main-wrapper { position: relative; }

footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 16px 32px;
    border-bottom: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 60;
}
/* Center the whole footer line — single horizontally-centered cluster
   instead of left-pinned copyright + right-pushed uptime. */
footer p {
    margin: 0 auto;
    line-height: 1;
    max-width: 100%;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    text-align: center;
}
/* Kill the right-push on the UPTIME span so it sits inline with the rest */
footer p > span[style*="margin-left:auto"],
footer p > span[style*="margin-left: auto"] {
    margin-left: 0;
}
/* Insert a subtle bullet between the rights-reserved cluster and the uptime
   stamp so the centered line reads as one unit, not two clumps. */
footer p > span:nth-last-of-type(1)::before {
    content: "·";
    color: var(--t-text-mute);
    margin-right: 14px;
    opacity: 0.7;
}

/* =====================================================================
   HIDE — stat strip + section path/h2 headers
   Per design ask: the // MODULES / ACTIVE USERS / BUILD / STATUS strip
   and the per-section "~/hub/<path>" + h2 row are noise on the home /
   featured / sub-section pages. Hide via CSS rather than ripping the
   markup out so they stay easy to bring back if needed.
===================================================================== */
.stat-strip,
.section-header {
    display: none;
}
/* Reserve vertical room at the bottom of the scroll area so content
   never disappears beneath the now-floating footer. The dock already
   reserves 56px on the right via padding-right. */
.mt-scroll {
    padding-bottom: 56px;
}
/* Side-nav layouts already hide the footer — keep that behavior. */
html[data-nav-pos="left"] footer,
html[data-nav-pos="right"] footer {
    display: none;
}
html[data-nav-pos="left"] .mt-scroll,
html[data-nav-pos="right"] .mt-scroll {
    padding-bottom: 0;
}

/* =============================================================
   TOGGLE PILL — terminal-style ON/OFF chip
   Replaces the iOS-y pill+knob with an explicit `○ OFF` / `● ON`
   chip. Hides the legacy knob span. Wider so the text reads at
   a glance.
   ============================================================= */
.mt-overlay .mt-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    min-width: 78px;
    height: 28px;
    padding: 0 12px;
    background: var(--t-bg-hover);
    border: 1px solid var(--t-border-strong);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t-text-mute);
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    position: relative;
    box-shadow: none;
    flex: none;
    top: auto; left: auto;
    right: auto; bottom: auto;
}
.mt-overlay .mt-toggle::before {
    content: "○";
    font-size: 14px;
    line-height: 1;
    color: var(--t-text-mute);
    transition: color 0.15s, text-shadow 0.15s;
}
.mt-overlay .mt-toggle::after {
    content: "OFF";
}
.mt-overlay .mt-toggle.is-on,
.mt-overlay .mt-toggle[data-on="true"] {
    background: var(--t-accent-soft);
    border-color: var(--t-accent);
    color: var(--t-accent);
}
.mt-overlay .mt-toggle.is-on::before,
.mt-overlay .mt-toggle[data-on="true"]::before {
    content: "●";
    color: var(--t-accent);
    text-shadow: 0 0 8px var(--t-accent-soft);
}
.mt-overlay .mt-toggle.is-on::after,
.mt-overlay .mt-toggle[data-on="true"]::after {
    content: "ON";
}
.mt-overlay .mt-toggle:hover {
    border-color: var(--t-accent);
}
/* Hide the legacy sliding knob — we use ::before/::after instead */
.mt-overlay .mt-toggle .mt-toggle-knob {
    display: none;
}

/* =============================================================
   HOME / FEATURED — accent stays pink in dynamic mode but use
   the same hook so toggling Dynamic ↔ Static feels consistent.
   Also gives a single place to tweak the home accent without
   touching the default :root values.
   ============================================================= */
/* Dynamic on home/featured: dark slate grey accent so the landing
   reads as quiet and architectural rather than loud and pink. */
html[data-dynamic-accent="on"][data-section="home"],
html[data-dynamic-accent="on"][data-section="featured"] {
    --t-accent:      #708090;  /* CSS slategray — readable on dark bg */
    --t-accent-hot:  #94a3b8;  /* lighter slate for hover/highlights */
    --t-accent-soft: rgba(112, 128, 144, 0.16);
}
/* In static mode, lock the accent to the same slate so toggling
   Dynamic ↔ Static on home stays consistent. */
html[data-dynamic-accent="off"] {
    --t-accent:      #708090;
    --t-accent-hot:  #94a3b8;
    --t-accent-soft: rgba(112, 128, 144, 0.16);
}

/* =============================================================
   SETTINGS PANEL — adjust panel-internal close-X breathing room
   so the new header layout doesn't collide with the X button.
   ============================================================= */
.mt-overlay-panel .mt-overlay-head {
    padding-right: 56px; /* leave space for the close X */
}

/* =============================================================
   UPLUS AUTH — sign-in + create-account flow, terminal reskin
   Overrides public/css/uplus.css without touching the EJS.
   ============================================================= */

/* ---------- Outer overlay (backdrop) ---------- */
#uplus_system_page.uplus_system_page {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none; /* legacy JS flips this between none/flex */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 24px;
    background: rgba(6, 6, 8, 0.82);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    z-index: 2100;
    font-family: var(--mono);
    color: var(--t-text);
    overflow-x: hidden;
    overflow-y: auto;
    transition: opacity 0.22s ease;
}
/* When inline style sets display:flex, keep it centered */
#uplus_system_page[style*="flex"] {
    display: flex;
}
/* Minimalist backdrop — no diagnostic grid, let the blurred hub show
   through behind the panel like the notification history overlay does. */
#uplus_system_page.uplus_system_page::before {
    content: none;
    display: none;
}

/* ---------- Top-left "< Go back" chip (outside the panel) ---------- */
#uplusLoginCloseButton {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    cursor: pointer;
    text-decoration: none;
}
#uplusLoginCloseButton .uplus_loginClose {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--t-bg-raised);
    border: 1px solid var(--t-border);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--t-text-dim);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    width: auto;
    height: auto;
    position: static;
}
#uplusLoginCloseButton:hover .uplus_loginClose {
    color: var(--t-accent);
    border-color: var(--t-accent);
    background: var(--t-bg-hover);
}

/* ---------- Auth panel (wraps both sign-in and create-account).
   NOTE: we deliberately do NOT force `display` here — the legacy
   uplus_auth_script.js toggles `style.display = 'flex'|'none'` to
   swap between sign-in and create-account panels, and between the
   step sub-containers. We just style layout for whenever it IS shown. */
#uplus_signIn_account.uplus_signIn_account,
#uplus_create_account.uplus_create_account {
    position: relative;
    top: auto;
    left: auto;
    flex-direction: column;
    align-items: stretch;
    width: min(460px, 92vw);
    max-width: 92vw;
    max-height: 86vh;
    margin: 0;
    padding: 0;
    padding-bottom: 0;
    background: var(--t-bg-panel);
    border: 1px solid var(--t-border);
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255,255,255,0.02);
    overflow: hidden;
    z-index: 1;
    animation: mt-hero-swap 0.28s ease both;
    font-family: var(--mono);
    color: var(--t-text);
    text-align: left;
}
#uplus_create_account.uplus_create_account {
    width: min(540px, 92vw);
}

/* Minimalist panel head: thin accent bar + breadcrumb path on the left,
   subtle uppercase label on the right. Same treatment as the
   notification-history overlay. */
#uplus_signIn_account .uplus_title,
#uplus_create_account .uplus_title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    margin: 0;
    border-bottom: 1px solid var(--t-border);
    background: transparent;
}
#uplus_signIn_account .uplus_title::before,
#uplus_create_account .uplus_title::before {
    content: "";
    width: 3px;
    height: 14px;
    background: var(--t-accent);
    border-radius: 1px;
    box-shadow: none;
    opacity: 0.9;
    flex: 0 0 auto;
}
#uplus_signIn_account .uplus_title p,
#uplus_create_account .uplus_title p {
    margin: 0 auto 0 0;
    padding: 0;
    order: 2;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--t-text-dim);
    text-transform: uppercase;
    line-height: 1;
    text-align: left;
}

/* ---------- Watermark — pulled up into the title bar, top-right.
   Absolutely positioned so it aligns with the title text on the right
   while the WELCOME / SIGN IN label sits flush-left next to the | bar. */
#uplus_signIn_account .uplus_watermark,
#uplus_create_account .uplus_watermark {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 42px;
    padding: 0 22px;
    margin: 0;
    background: transparent;
    z-index: 2;
    pointer-events: none;
}
#uplus_signIn_account .uplus_watermark img,
#uplus_create_account .uplus_watermark img {
    height: 14px;
    width: auto;
    opacity: 0.55;
    filter: brightness(0) invert(1);
    margin: 0;
}
#uplus_signIn_account .uplus_subtext,
#uplus_create_account .uplus_subtext {
    padding: 18px 22px 16px;
    margin: 0;
    border-bottom: 1px solid var(--t-border);
}
#uplus_signIn_account .uplus_subtext p,
#uplus_create_account .uplus_subtext p {
    margin: 0;
    padding: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--t-text-mute);
    line-height: 1.6;
}
/* First line prompt glyph for the subtext so it reads like a terminal
   line (same feel as the hero's "> ..." intro). */
#uplus_signIn_account .uplus_subtext p::before,
#uplus_create_account .uplus_subtext p::before {
    content: "";
    margin-right: 0;
}

/* ---------- Inner containers (email / password / country / DOB / etc.)
   Default to `display: none` — the legacy uplus_auth_script.js owns
   the step-by-step flow and flips `style.display = 'flex'` on whichever
   container should be active. Inline styles beat external CSS for
   `display`, so the JS still works. Without this default, all six
   create-account steps render at once because the deleted legacy
   uplus.css used to provide it.

   The FIRST step of each flow gets a more specific override below to
   show by default — the legacy JS only sets inline display when the
   user clicks Next/Back, never on initial mount. */
#uplus_signIn_account .uplus_container,
#uplus_create_account .uplus_container {
    display: none;
    position: relative;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    width: 100%;
    height: auto;
    min-height: 0;
    max-width: none;
    padding: 18px 22px 20px;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    gap: 14px;
}
/* Legacy CSS ships some of these with overrides like width: 435px — kill them */
/* First step of each flow shows by default — uses 2-ID specificity
   so it beats the generic `.uplus_container { display: none }` rule
   above. Subsequent steps stay hidden until uplus_auth_script.js sets
   `style.display = 'flex'` on the active step (inline beats external). */
#uplus_signIn_account #uplus_email_container,
#uplus_create_account #uplus_email_creation_container {
    display: flex;
}

#uplus_password_container,
#uplus_password_creation_container,
#uplus_choose_avatar_container,
#uplus_country_container,
#uplus_dob_container,
#uplus_account_confirmation_container {
    width: 100%;
    min-height: 0;
    max-height: none;
}

/* Top row: label + alt-action link (Login / Create account, etc.) */
#uplus_signIn_account .uplus_top_text_container,
#uplus_create_account .uplus_top_text_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin: 0;
    width: 100%;
    background: transparent;
    border-bottom: 0;
}
#uplus_signIn_account .uplus_top_text_container > p,
#uplus_create_account .uplus_top_text_container > p {
    margin: 0;
    padding: 0;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t-text);
    line-height: 1;
}
#uplus_signIn_account .uplus_top_text_container > a,
#uplus_create_account .uplus_top_text_container > a,
#createAccountButton,
#createAccountCloseButton,
#uplusGoBackButton {
    margin: 0;
    padding: 0;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--t-accent);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
    background: transparent;
}
#uplus_signIn_account .uplus_top_text_container > a::after,
#uplus_create_account .uplus_top_text_container > a::after,
#createAccountButton::after,
#createAccountCloseButton::after { content: " ›"; color: var(--t-text-mute); }
#uplusGoBackButton::before { content: "‹ "; color: var(--t-text-mute); }
#uplusGoBackButton::after { content: none; }
#uplus_signIn_account .uplus_top_text_container > a:hover,
#uplus_create_account .uplus_top_text_container > a:hover,
#createAccountButton:hover,
#createAccountCloseButton:hover,
#uplusGoBackButton:hover {
    color: var(--t-accent-hot);
}

/* ---------- Inputs ---------- */
#uplus_signIn_account .uplus_input_container,
#uplus_create_account .uplus_input_container {
    padding: 0;
    margin: 0;
    width: 100%;
    background: transparent;
}
#uplus_signIn_account .uplus_input_container form,
#uplus_create_account .uplus_input_container form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
#uplus_signIn_account .uplus_input_inner_container,
#uplus_create_account .uplus_input_inner_container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    background: transparent;
    padding: 0;
    margin: 0;
}
#uplus_signIn_account label,
#uplus_create_account label {
    display: block;
    margin: 0;
    padding: 0;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--t-text-mute);
    line-height: 1;
}
#uplus_signIn_account input,
#uplus_create_account input {
    display: block;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    background: var(--t-bg-raised);
    border: 1px solid var(--t-border);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 14px;
    color: var(--t-text);
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
#uplus_signIn_account input::placeholder,
#uplus_create_account input::placeholder {
    color: var(--t-text-mute);
    opacity: 0.6;
}
#uplus_signIn_account input:hover,
#uplus_create_account input:hover {
    border-color: var(--t-border-strong);
}
#uplus_signIn_account input:focus,
#uplus_create_account input:focus {
    border-color: var(--t-accent);
    box-shadow: 0 0 0 3px var(--t-accent-soft);
}
/* Date input: let it match the dark theme */
#uplus_signIn_account input[type="date"],
#uplus_create_account input[type="date"] {
    color-scheme: dark;
}
#uplus_signIn_account input[type="date"]::-webkit-calendar-picker-indicator,
#uplus_create_account input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

/* Validation error pill */
error-text-box {
    display: none; /* default hidden; legacy JS toggles via .error */
    padding: 6px 10px;
    margin-top: -2px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ef4444;
    line-height: 1.4;
}
error-text-box.show,
error-text-box[data-visible="true"],
.error > error-text-box,
input.error ~ error-text-box { display: block; }

/* ---------- Primary CTA (Next / Login / Looks alright).
   Flat accent button matching the hero's .btn.btn-primary — no heavy
   pink glow, no loud arrow prefix. */
#uplus_signIn_account .uplus_container_btn,
#uplus_create_account .uplus_create_account_container_btn,
.uplus_container_btn,
.uplus_create_account_container_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: auto;
    margin: 4px 0 0;
    padding: 11px 18px;
    background: var(--t-accent);
    border: 1px solid var(--t-accent);
    border-radius: 4px;
    box-shadow: none;
    font-family: var(--mono);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.08s;
    position: static;
    text-align: center;
}
#uplus_signIn_account .uplus_container_btn:hover,
#uplus_create_account .uplus_create_account_container_btn:hover,
.uplus_container_btn:hover,
.uplus_create_account_container_btn:hover {
    background: var(--t-accent-hot);
    border-color: var(--t-accent-hot);
}
#uplus_signIn_account .uplus_container_btn:active,
#uplus_create_account .uplus_create_account_container_btn:active,
.uplus_container_btn:active,
.uplus_create_account_container_btn:active {
    transform: translateY(1px);
}
#uplus_signIn_account .uplus_container_btn > div,
#uplus_create_account .uplus_create_account_container_btn > div,
.uplus_container_btn > div,
.uplus_create_account_container_btn > div {
    margin: 0;
    padding: 0;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
}
/* Subtle chevron prefix — matches the hero button's "▸" arrow tone. */
#uplus_signIn_account .uplus_container_btn > div::before,
#uplus_create_account .uplus_create_account_container_btn > div::before,
.uplus_container_btn > div::before,
.uplus_create_account_container_btn > div::before {
    content: "▸";
    margin-right: 6px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
}

/* ---------- "Forgot your password?" / inline support link ---------- */
#uplus_signIn_account .uplus_bottom_support_text,
#uplus_create_account .uplus_bottom_support_text {
    display: inline-block;
    width: auto;
    margin: -4px 0 0;
    padding: 0;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t-text-mute);
    text-align: left;
    background: transparent;
}
#uplus_signIn_account a.uplus_bottom_support_text,
#uplus_create_account a.uplus_bottom_support_text {
    cursor: pointer;
    transition: color 0.15s;
}
#uplus_signIn_account a.uplus_bottom_support_text:hover,
#uplus_create_account a.uplus_bottom_support_text:hover {
    color: var(--t-accent);
}

/* The footer "Terms Of Services" block at the very bottom of the sign-in panel */
#uplus_signIn_account > .uplus_bottom_support_text,
#uplus_create_account > .uplus_bottom_support_text {
    display: flex;
    gap: 18px;
    padding: 12px 22px;
    margin: 0;
    width: 100%;
    border-top: 1px solid var(--t-border);
    background: var(--t-bg-raised);
    text-align: left;
}
#uplus_signIn_account > .uplus_bottom_support_text a,
#uplus_create_account > .uplus_bottom_support_text a {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--t-text-mute);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}
#uplus_signIn_account > .uplus_bottom_support_text a:hover,
#uplus_create_account > .uplus_bottom_support_text a:hover {
    color: var(--t-accent);
}

/* ---------- Create-account: big title + avatar preview ---------- */
#uplus_create_account #uplus_big_title { /* legacy sets it inside .uplus_title */
    order: 3;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--t-text-dim);
    text-transform: uppercase;
    line-height: 1;
}
#uplus_create_account #uplus_avatar_title,
#uplus_create_account .general_avatar_size {
    width: 56px;
    height: 56px;
    padding: 6px;
    background: var(--t-bg-raised);
    border: 1px solid var(--t-border);
    border-radius: 6px;
}
#uplus_create_account #uplus_email_title {
    margin: 10px 0 0;
    padding: 0;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--t-text-dim);
    letter-spacing: 0.06em;
}
/* The raw-inline-styled flex wrapper holding the avatar+email preview */
#uplus_create_account > div[style*="margin-bottom: 40px"] {
    margin: 0 22px 12px;
    padding: 14px;
    background: var(--t-bg-raised);
    border: 1px dashed var(--t-border);
    border-radius: 6px;
    align-items: center;
}

/* ---------- Create-account stepper (6 steps) ---------- */
#uplus_create_account .uplus_stepper {
    padding: 14px 22px;
    margin: 0;
    border-bottom: 1px dashed var(--t-border);
}
#uplus_create_account .uplus_stepper_circle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}
#uplus_create_account .uplus_stepper_circle::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 1px;
    background: var(--t-border);
    z-index: 0;
}
#uplus_create_account .uplus_stepper_circle li {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--t-text-mute);
    background: var(--t-bg-panel);
    border: 1px solid var(--t-border);
    border-radius: 50%;
    list-style: none;
    overflow: hidden;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
/* Numbers ride INSIDE the bubble; labels ride ABOVE. Any stray
   <img>/<svg> child is still constrained as a fallback so a future
   regression can't blow the bubble out. */
#uplus_create_account .uplus_stepper_circle li > img,
#uplus_create_account .uplus_stepper_circle li > svg {
    width: 12px;
    height: 12px;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}

#uplus_create_account .uplus_stepper_circle li .uplus_stepper_num {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    /* Brighter than the legacy --t-text-mute so the digit reads
       cleanly inside the 24px circle on dark backgrounds. */
    color: var(--t-text);
    letter-spacing: 0;
}
#uplus_create_account .uplus_stepper_circle li.is-done .uplus_stepper_num,
#uplus_create_account .uplus_stepper_circle li.uplus_stepper_done .uplus_stepper_num {
    color: #ffffff;
}

/* Label — positioned above the bubble, becomes visible on hover or
   once the step is done/active. Pointer-events:none so it never
   intercepts the bubble's click target. */
#uplus_create_account .uplus_stepper_circle li .uplus_stepper_label {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--t-text-mute);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
#uplus_create_account .uplus_stepper_circle li:hover .uplus_stepper_label,
#uplus_create_account .uplus_stepper_circle li.is-done .uplus_stepper_label,
#uplus_create_account .uplus_stepper_circle li.uplus_stepper_active .uplus_stepper_label,
#uplus_create_account .uplus_stepper_circle li.active .uplus_stepper_label,
#uplus_create_account .uplus_stepper_circle li[data-state="active"] .uplus_stepper_label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
#uplus_create_account .uplus_stepper_circle li.is-done .uplus_stepper_label {
    color: var(--t-accent);
}

/* Hover treatment — subtle background lift + accent border so the
   step bubble reads as clickable when it's been completed. The
   `is-done` class also makes the cursor a pointer. */
#uplus_create_account .uplus_stepper_circle li:hover {
    border-color: var(--t-accent);
    background: rgba(255, 46, 99, 0.08);
}
#uplus_create_account .uplus_stepper_circle li.is-done {
    cursor: pointer;
    background: var(--t-accent);
    border-color: var(--t-accent);
}
#uplus_create_account .uplus_stepper_circle li.is-done:hover {
    background: rgba(255, 46, 99, 0.85);
}

/* Make sure there's room above the strip so labels don't clip
   against the title row. */
#uplus_create_account .uplus_stepper_circle {
    margin-top: 22px;
}
/* Legacy JS adds "uplus_stepper_active" / "uplus_stepper_done"
   classes; keep back-compat but also style the typical "active" */
#uplus_create_account .uplus_stepper_circle li.uplus_stepper_active,
#uplus_create_account .uplus_stepper_circle li.active,
#uplus_create_account .uplus_stepper_circle li[data-state="active"] {
    background: var(--t-accent-soft);
    border-color: var(--t-accent);
    color: var(--t-accent);
    box-shadow: 0 0 0 3px var(--t-accent-soft);
}
#uplus_create_account .uplus_stepper_circle li.uplus_stepper_done,
#uplus_create_account .uplus_stepper_circle li.done,
#uplus_create_account .uplus_stepper_circle li[data-state="done"] {
    background: var(--t-accent);
    border-color: var(--t-accent);
    color: #fff;
}

/* ---------- Avatar picker (step 3) ---------- */
#uplus_create_account .uplus_avatar_container,
#uplus_create_account .uplus_avatar_outer_container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
}
#uplus_create_account .uplus_avatar_inner_container {
    padding: 12px;
    background: var(--t-bg-raised);
    border: 1px solid var(--t-border);
    border-radius: 6px;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
}
#uplus_create_account .uplus_avatar_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}
#uplus_create_account .uplus_avatar_list li {
    padding: 4px;
    background: var(--t-bg-panel);
    border: 1px solid var(--t-border);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
#uplus_create_account .uplus_avatar_list li:hover {
    border-color: var(--t-accent);
    background: var(--t-bg-hover);
}
#uplus_create_account .uplus_avatar_list li.selected,
#uplus_create_account .uplus_avatar_list li.is-selected {
    border-color: var(--t-accent);
    background: var(--t-accent-soft);
}
#uplus_create_account .uplus_avatar_list li img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Confirmation step (review account info) ---------- */
#uplus_create_account .uplus_account_container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
}
#uplus_create_account .uplus_confirmation_text_container {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    margin: 0;
    border-bottom: 1px dashed var(--t-border);
}
#uplus_create_account .uplus_confirmation_text_container:last-child {
    border-bottom: 0;
}
#uplus_create_account .uplus_confirmation_text_container > p:first-child {
    margin: 0;
    padding: 0;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-text-mute);
    line-height: 1.3;
}
#uplus_create_account .uplus_confirmation_text_bold {
    margin: 0;
    padding: 0;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--t-text);
    letter-spacing: 0.02em;
    line-height: 1.3;
    word-break: break-word;
}
#uplus_create_account #uplus_confimation_avatar {
    width: 36px;
    height: 36px;
    padding: 4px;
    background: var(--t-bg-raised);
    border: 1px solid var(--t-border);
    border-radius: 4px;
}

/* ---------- DOB step: the inline flex wrapper ---------- */
#uplus_create_account .uplus_dob_container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* ---------- Tame the legacy slideText/fadeIn animations so nothing
   jumps or fades unexpectedly in the reskinned shell. Keep the class
   as a hook for the legacy JS but strip transform/opacity defaults. */
.uplus_signIn_account .slideText,
.uplus_create_account .slideText {
    animation: none;
    opacity: 1;
    transform: none;
}

/* =====================================================================
   NOTIFICATION TIMER — countdown bar at the bottom of the toast
   core.js sets `notificationTimer.style.animation = "notification-timer
   <s>s <delay>s linear forwards"` so this keyframe shrinks the bar
   from 100% → 0% over the lifetime of the notification. Used to live
   in the deleted styles.css; brought back here.
===================================================================== */
@keyframes notification-timer {
    0%   { width: 100%; }
    100% { width: 0%; }
}

/* =====================================================================
   NOTIFICATION POSITION VARIANTS
   The bar's default position is top-centre. The settings panel writes
   `data-notif-pos` to <html> so we can branch off the corner via the
   document attribute selector — works without touching the markup.
===================================================================== */
html[data-notif-pos="top-left"]      #notificationBar.notification-bar {
    top: 24px; bottom: auto;
    left: 24px; right: auto;
    transform: none;
}
html[data-notif-pos="top-right"]     #notificationBar.notification-bar {
    top: 24px; bottom: auto;
    left: auto; right: 24px;
    transform: none;
}
html[data-notif-pos="bottom-left"]   #notificationBar.notification-bar {
    top: auto; bottom: 24px;
    left: 24px; right: auto;
    transform: none;
}
html[data-notif-pos="bottom-right"]  #notificationBar.notification-bar {
    top: auto; bottom: 24px;
    left: auto; right: 24px;
    transform: none;
}

/* =====================================================================
   NOTIFICATION ANIMATION STYLE VARIANTS
   `data-notif-style` on <html> picks one of: wipe (default, clip-path),
   slide (translate from edge), fade (opacity).
===================================================================== */
/* --- Slide --- */
html[data-notif-style="slide"] #notificationBar.notification-bar {
    clip-path: none;
    transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1),
                opacity   0.20s ease;
    opacity: 1;
}
html[data-notif-style="slide"][data-notif-pos="top-center"]   #notificationBar.notification-bar { transform: translate(-50%, 0); }
html[data-notif-style="slide"][data-notif-pos="top-left"]     #notificationBar.notification-bar { transform: translateX(0); }
html[data-notif-style="slide"][data-notif-pos="top-right"]    #notificationBar.notification-bar { transform: translateX(0); }
html[data-notif-style="slide"][data-notif-pos="bottom-left"]  #notificationBar.notification-bar { transform: translateX(0); }
html[data-notif-style="slide"][data-notif-pos="bottom-right"] #notificationBar.notification-bar { transform: translateX(0); }
@starting-style {
    html[data-notif-style="slide"][data-notif-pos="top-center"]   #notificationBar.notification-bar { transform: translate(-50%, -120%); }
    html[data-notif-style="slide"][data-notif-pos="top-left"]     #notificationBar.notification-bar { transform: translateY(-120%); }
    html[data-notif-style="slide"][data-notif-pos="top-right"]    #notificationBar.notification-bar { transform: translateY(-120%); }
    html[data-notif-style="slide"][data-notif-pos="bottom-left"]  #notificationBar.notification-bar { transform: translateY(120%); }
    html[data-notif-style="slide"][data-notif-pos="bottom-right"] #notificationBar.notification-bar { transform: translateY(120%); }
}
html[data-notif-style="slide"] #notificationBar.notification-popOut {
    clip-path: none !important;
    opacity: 0;
}
html[data-notif-style="slide"][data-notif-pos="top-center"]   #notificationBar.notification-popOut { transform: translate(-50%, -120%) !important; }
html[data-notif-style="slide"][data-notif-pos="top-left"]     #notificationBar.notification-popOut { transform: translateY(-120%) !important; }
html[data-notif-style="slide"][data-notif-pos="top-right"]    #notificationBar.notification-popOut { transform: translateY(-120%) !important; }
html[data-notif-style="slide"][data-notif-pos="bottom-left"]  #notificationBar.notification-popOut { transform: translateY(120%) !important; }
html[data-notif-style="slide"][data-notif-pos="bottom-right"] #notificationBar.notification-popOut { transform: translateY(120%) !important; }

/* --- Fade --- */
html[data-notif-style="fade"] #notificationBar.notification-bar {
    clip-path: none;
    transition: opacity 0.28s ease;
    opacity: 1;
}
@starting-style {
    html[data-notif-style="fade"] #notificationBar.notification-bar { opacity: 0; }
}
html[data-notif-style="fade"] #notificationBar.notification-popOut {
    clip-path: none !important;
    opacity: 0 !important;
}

/* =====================================================================
   NOTIFICATION CLOSE — clip-path collapses to the centre.
   The base rule declares `transition: clip-path …`, so adding the
   popOut class flips clip-path to a centre-line inset and the
   existing transition runs the close animation. Layout never changes
   — height stays put, content never reflows, just the visible window
   narrows from both sides toward the centre.
===================================================================== */
#notificationBar.notification-popOut {
    clip-path: inset(0 50% 0 50% round 6px) !important;
    pointer-events: none;
}

/* No-op the legacy container fade — the outer animation handles
   opacity for the whole card. Two stacked opacity animations were
   part of what made the close feel "off". */
#notificationBar .notification-bar-container.notification-fadeOut,
#notificationBar #notificationBarContainer.notification-fadeOut,
.notification-bar-container.notification-fadeOut {
    animation: none;
    opacity: 1;
}

/* Also smooth the timer bar so it doesn't snap to 0 during the exit */
#notificationBar.notification-popOut #notificationTimer,
#notificationBar.notification-popOut .notification-timer {
    transition: opacity 0.18s ease-out;
    opacity: 0;
}

/* =====================================================================
   NAV — drop the [H] / [S] / [E] / [P] / [G] keyboard-shortcut
   prefixes. The label alone reads cleaner.
===================================================================== */
.nav-primary .nav-item .nav-bracket,
.nav-primary .nav-item .nav-key {
    display: none;
}
.nav-primary .nav-item .nav-label {
    /* Pull the label flush against the left edge now that the bracket
       cluster is gone. */
    margin-left: 0;
}

/* =====================================================================
   THEME DROPDOWN (replaces the old themeSwitch pill in the nav)
   The trigger is a slim icon button (sun/moon swap on data-theme),
   and hovering or focusing it opens the same nav-dropdown shell used
   by Social/Services/Games. Active option gets the accent color.
===================================================================== */
.nav-theme {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 14px;
    cursor: pointer;
    border-left: 1px solid var(--t-border);
    background: transparent;
    width: var(--util-dock-w) !important;

    transition: background 0.15s, color 0.15s;
}
.nav-theme:hover {
    background: var(--t-bg-hover);
    color: var(--t-accent);
}
.nav-theme-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--t-text-mute);
    transition: color 0.15s;
}
.nav-theme:hover .nav-theme-trigger,
.nav-theme:focus-within .nav-theme-trigger {
    color: var(--t-accent);
}
.nav-theme .theme-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}
/* Show moon in dark mode, sun in light mode */
html[data-theme="light"] .nav-theme .theme-icon-dark { display: none; }
html[data-theme="dark"]  .nav-theme .theme-icon-light { display: none; }
html:not([data-theme]) .nav-theme .theme-icon-light { display: none; }

.nav-theme .nav-caret {
    color: var(--t-text-mute);
    font-size: 10px;
    margin-left: 2px;
    transition: color 0.15s;
}
.nav-theme:hover .nav-caret,
.nav-theme:focus-within .nav-caret { color: var(--t-accent); }

/* Anchor the menu to the right edge so it doesn't overflow viewport */
.nav-theme .nav-theme-menu {
    left: auto;
    right: -1px;
    min-width: 180px;
}

/* Active theme option gets the accent treatment */
.nav-theme-option.is-active {
    color: var(--t-accent);
    background: var(--t-accent-soft);
}
.nav-theme-option.is-active .sq {
    color: var(--t-accent);
}

/* Kill any leftover legacy themeSelector pill styles */
.nav-theme #themeSwitch,
.themeSelector .themeSwitch {
    display: none;
}

/* =====================================================================
   SETTINGS TOGGLES — kill the legacy 45° rotation
   `.settings-button` from the old stylesheet rotates the wrapper
   diamond-style. Our new chip toggles need to sit straight.
===================================================================== */
.mt-overlay .settings-button,
.mt-overlay .settings-button.mt-toggle-wrap,
#settingsView .settings-button {
    transform: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}
.mt-overlay .settings-button .settings-button-toggle,
#settingsView .settings-button .settings-button-toggle {
    transform: none;
    position: relative;
    top: auto; left: auto;
    right: auto; bottom: auto;
}

/* =====================================================================
   BRAND LOGO in the nav (Unlicensed Studio mark)
   Hardcoded fills so the mark is always visible on the dark nav,
   regardless of the cascade. Light mode inverts to a dark fill.
   The `[U+]` cluster in the middle uses the theme accent.
===================================================================== */
/* The logo is now an <img> pointing at /logo/logo-unlicensed-studio.svg
   (white-filled paths baked in at the file level). Since <img> can't
   inherit CSS color, we flip to dark in light-mode with a filter.
   Overrides here must be to beat legacy styles.css which
   sets `#unlicensed-studio-logo { width: 100%; max-width: 160px;
   margin-top: 10px; height: auto; }` — that would stretch the mark. */
body .nav-brand .nav-brand-logo,
body .nav-brand img#unlicensed-studio-logo {
    height: 30px;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    display: inline-block;
    visibility: visible;
    opacity: 1;
    vertical-align: middle;
    flex-shrink: 0;
    object-fit: contain;
    /* Logo paths are baked white. In both dark and light mode, we keep
       the wordmark white and give it a dark pill background on the
       .nav-brand container below — so the white mark is always legible. */
    filter: none;
}

/* Dark "badge" wrapper around the logo — fills the whole nav-bar
   rectangle top-to-bottom (no vertical margin, no rounded corners)
   so the white wordmark is always readable regardless of whether
   the nav bar around it is dark (dark theme) or near-white (light). */
body .nav-brand {
    background: #11141b;
    padding: 0 18px;
    margin: 0;
    border-radius: 0;
    align-self: stretch;
    height: 100%;
    display: flex;
    align-items: center;
    /* Keep a single divider against the nav items to the right, but
       drop any left-side border so it's flush with the viewport. */
    border-left: 0;
    border-right: 1px solid var(--t-border);
}

/* =====================================================================
   FOOTER CENTERING — hard override
   Earlier rules in the cascade left the copyright line clumped on the
   left (display: flex with no justify, plus an inline `margin-left:auto`
   on the uptime span pushing everything apart). This block wins by
   selector specificity (body prefix) + so the footer text
   sits as a single centered line regardless of ordering. Footer is
   pinned to the viewport bottom via `position: fixed`, and reserves
   room on the right for the util-dock rail so the text is truly
   centered within the *visible* content area (not under the dock).
===================================================================== */
body footer {
    position: fixed;
    /* Full viewport width — the legacy util-dock on the right edge
       no longer exists, so the previous left/right insets just left
       gutters of empty space on either side. */
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    padding: 14px 32px;
    margin: 0;
    /* Legacy styles.css sets `left: 50%; transform: translateX(-50%)`
       on the <footer>. Even with our explicit left/right overrides,
       that transform was dragging the whole bar ~half its own width
       to the left, so "COPYRIGHT © … LT" clipped off-screen. Neutralize
       the legacy transform here. */
    transform: none;
    text-align: center;
    box-sizing: border-box;
    overflow: visible;
    z-index: 60;
}
body footer p {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 14px;
    gap: 4px 14px;
    margin: 0 auto;
    padding: 0;
    max-width: 100%;
    width: 100%;
    text-align: center;
}
/* Kill the leading "$" terminal prompt glyph — it was pulling the
   line off-center and is visual noise in the centered layout. */
body footer p::before {
    content: none;
    display: none;
    margin: 0;
}
/* Kill any inline margin-left:auto on child spans (the uptime span
   has it baked into its style attribute). */
body footer p > span,
body footer p > span[style] {
    margin-left: 0;
    margin-right: 0;
    flex: 0 0 auto;
}
/* Hide the "//" separator span — one clean centered run reads better. */
body footer p > span:nth-child(2) {
    display: none;
}
/* Reserve bottom room so page content never sits under the floating footer. */
.mt-scroll {
    padding-bottom: 72px;
}

/* =============================================================
   DATETIME WIDGET — bottom-left clock when "SHOW DATETIME" is on.
   The corner offsets shift with the active nav layout so the
   widget never sits underneath the nav rail or the util-dock.
   ============================================================= */
.datetime-widget {
    position: fixed;
    left: 16px;
    bottom: 6px;
    z-index: 800;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 10px;
    background: var(--t-bg-panel);
    border: 1px solid var(--t-border);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--t-text-dim);
    pointer-events: none;
    transition: left 0.2s ease, bottom 0.2s ease, top 0.2s ease, right 0.2s ease;
}
.datetime-widget[hidden] { display: none; }
.datetime-widget-date { color: var(--t-text-mute); }
.datetime-widget-time { color: var(--t-text); font-weight: 600; }

/* --- Bottom-nav: lift the widget above the bottom-pinned nav bar. --- */
html[data-nav-pos="bottom"] .datetime-widget {
    bottom: calc(var(--nav-h, 48px) + 6px);
    left: 16px;
}
/* --- Left-nav: shift right past the side rail. --- */
html[data-nav-pos="left"] .datetime-widget {
    left: calc(var(--nav-side-w, 220px) + 16px);
    bottom: 6px;
}
/* --- Right-nav: util-dock flips to the LEFT in this layout, so the
       widget moves right of it (the side rail itself is on the right). */
html[data-nav-pos="right"] .datetime-widget {
    left: calc(var(--util-dock-w, 56px) + 16px);
    bottom: 6px;
}

/* =============================================================
   SIDE-NAV DROPDOWN POSITIONING
   When the nav becomes a vertical rail, dropdowns that opened
   "below" the trigger (top:100%) end up off-screen because the
   utility cluster sits at the bottom of the rail (margin-top:auto).
   Override so dropdowns open sideways INTO the content area —
   right for left-nav, left for right-nav.
   ============================================================= */
html[data-nav-pos="left"] .nav-primary .nav-item.has-dropdown .nav-dropdown,
html[data-nav-pos="left"] .nav-theme.has-dropdown .nav-dropdown,
html[data-nav-pos="left"] #themeSelector .nav-dropdown {
    top: 0;
    bottom: auto;
    left: 100%;
    right: auto;
    margin-left: 4px;
    border-top: 1px solid var(--t-border);
    border-left: 2px solid var(--t-accent);
    transform: translateX(-4px);
}
html[data-nav-pos="left"] .nav-primary .nav-item.has-dropdown:hover .nav-dropdown,
html[data-nav-pos="left"] .nav-primary .nav-item.has-dropdown:focus-within .nav-dropdown,
html[data-nav-pos="left"] .nav-theme.has-dropdown:hover .nav-dropdown,
html[data-nav-pos="left"] #themeSelector:hover .nav-dropdown,
html[data-nav-pos="left"] #themeSelector:focus-within .nav-dropdown {
    transform: translateX(0);
}

html[data-nav-pos="right"] .nav-primary .nav-item.has-dropdown .nav-dropdown,
html[data-nav-pos="right"] .nav-theme.has-dropdown .nav-dropdown,
html[data-nav-pos="right"] #themeSelector .nav-dropdown {
    top: 0;
    bottom: auto;
    left: auto;
    right: 100%;
    margin-right: 4px;
    border-top: 1px solid var(--t-border);
    border-left: 0;
    border-right: 2px solid var(--t-accent);
    transform: translateX(4px);
}
html[data-nav-pos="right"] .nav-primary .nav-item.has-dropdown:hover .nav-dropdown,
html[data-nav-pos="right"] .nav-primary .nav-item.has-dropdown:focus-within .nav-dropdown,
html[data-nav-pos="right"] .nav-theme.has-dropdown:hover .nav-dropdown,
html[data-nav-pos="right"] #themeSelector:hover .nav-dropdown,
html[data-nav-pos="right"] #themeSelector:focus-within .nav-dropdown {
    transform: translateX(0);
}

/* For utility cluster items pinned to the bottom of a side rail,
   anchor the dropdown to the BOTTOM of the trigger so it grows up
   from the trigger's baseline (still sideways, but won't run off the
   bottom of the viewport). */
html[data-nav-pos="left"] .nav-right .nav-item.has-dropdown .nav-dropdown,
html[data-nav-pos="left"] .nav-right .nav-theme.has-dropdown .nav-dropdown,
html[data-nav-pos="left"] .nav-right #themeSelector .nav-dropdown,
html[data-nav-pos="right"] .nav-right .nav-item.has-dropdown .nav-dropdown,
html[data-nav-pos="right"] .nav-right .nav-theme.has-dropdown .nav-dropdown,
html[data-nav-pos="right"] .nav-right #themeSelector .nav-dropdown {
    top: auto;
    bottom: 0;
}

/* =============================================================
   NOTIFICATION POSITION PICKER (preview tiles)
   ============================================================= */
.mt-layout-grid--5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
@media (max-width: 760px) {
    .mt-layout-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
.mt-layout-preview.layout-pos {
    position: relative;
    aspect-ratio: 5 / 3;
    background: var(--t-bg);
    border: 1px solid var(--t-border);
    border-radius: 4px;
    padding: 0;
}
.mt-layout-pos-dot {
    position: absolute;
    width: 14px;
    height: 4px;
    background: var(--t-accent);
    border-radius: 2px;
    box-shadow: 0 0 6px var(--t-accent-soft);
}
.mt-layout-pos-dot.pos-tl { top: 6px;    left: 6px; }
.mt-layout-pos-dot.pos-tc { top: 6px;    left: 50%; transform: translateX(-50%); }
.mt-layout-pos-dot.pos-tr { top: 6px;    right: 6px; }
.mt-layout-pos-dot.pos-bl { bottom: 6px; left: 6px; }
.mt-layout-pos-dot.pos-br { bottom: 6px; right: 6px; }

/* =============================================================
   NEWS SECTION
   Section-level layout, featured + latest grids, news cards,
   and the article overlay.
   ============================================================= */

/* ---------- Section header tweaks (extra row of action chips)
   Override the global ".section-header { display: none }" rule —
   the news section needs its header for the filter chips and the
   Find Networks button. Specificity (.news-section .section-header
   .news-section-header) beats the single-class hide rule. */
.news-section .section-header.news-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    position: relative;
}
.news-section .section-header.news-section-header .path {
    color: var(--t-text-mute);
    font-size: 13px;
}
.news-section .section-header.news-section-header .path .sep {
    color: var(--t-accent);
}
.news-section .section-header.news-section-header h2 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--t-text);
    margin: 0;
}
.news-section .section-header.news-section-header .rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--t-border) 0%, transparent 100%);
}
.news-section .section-header.news-section-header .news-section-actions {
    flex-basis: 100%;
}
.news-section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.news-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--t-border);
    color: var(--t-text-mute);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.news-chip .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--t-text-mute);
}
.news-chip:hover {
    color: var(--t-text);
    border-color: var(--t-text-dim);
}
.news-chip.is-active {
    color: var(--t-bg);
    background: var(--t-accent);
    border-color: var(--t-accent);
}
.news-chip.is-active .dot {
    background: var(--t-bg);
}
.news-find-networks {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--t-border);
    color: var(--t-text);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.news-find-networks:hover {
    border-color: var(--t-accent);
    color: var(--t-accent);
}
.news-find-networks .arr {
    color: var(--t-accent);
    font-weight: 600;
}

/* ---------- Rows (Featured / Latest) */
.news-row {
    margin-top: 28px;
}
.news-row-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.news-row-title {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t-text);
    white-space: nowrap;
}
.news-row-rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--t-border);
}

/* ---------- Card grids */
.news-card-grid {
    display: grid;
    gap: 16px;
}
.news-card-grid--featured {
    grid-template-columns: repeat(3, 1fr);
}
.news-card-grid--latest {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) {
    .news-card-grid--featured,
    .news-card-grid--latest {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 700px) {
    .news-card-grid--featured,
    .news-card-grid--latest {
        grid-template-columns: 1fr;
    }
}

/* ---------- Card */
.news-card {
    position: relative; /* containing block for badge + media icon */
    background: var(--t-bg-panel);
    border: 1px solid var(--t-border);
    border-radius: 10px;
    /* overflow visible so the media-icon tooltip can render above
       the card without being clipped. Cover handles its own image
       clipping below. */
    overflow: visible;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease;
    display: flex;
    flex-direction: column;
}
.news-card:hover,
.news-card:focus-visible {
    border-color: var(--t-accent);
    transform: translateY(-2px);
    outline: none;
}

/* Live-tail unpublish/delete: card fades + collapses out of the
   grid before being removed from the DOM. */
.news-card-leaving {
    animation: news-card-leaving-out 280ms ease-in both;
    pointer-events: none;
}
@keyframes news-card-leaving-out {
    0%   { opacity: 1; transform: translateY(0)      scale(1);    }
    100% { opacity: 0; transform: translateY(-4px)   scale(0.97); }
}

/* Fresh-arrival flash — applied by news.js when a card lands via
   the live-tail SSE so the new article catches the eye briefly,
   then settles to its normal chrome. */
.news-card-fresh {
    animation: news-card-fresh-in 1500ms ease-out both;
}
@keyframes news-card-fresh-in {
    0% {
        opacity: 0;
        transform: translateY(-6px);
        border-color: var(--t-accent);
        box-shadow: 0 0 0 2px var(--t-accent-soft, rgba(91,158,250,0.25));
    }
    35% {
        opacity: 1;
        transform: translateY(0);
        border-color: var(--t-accent);
        box-shadow: 0 0 0 2px var(--t-accent-soft, rgba(91,158,250,0.25));
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        border-color: var(--t-border);
        box-shadow: 0 0 0 0 transparent;
    }
}
.news-card-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    overflow: hidden;
    /* Round the top corners ourselves now that the card no longer
       clips them via overflow: hidden. */
    border-radius: 10px 10px 0 0;
}
.news-card-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 76px;
}
.news-card-title {
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.45;
    color: var(--t-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card-summary {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--t-text-mute);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card-foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-text-mute);
}
.news-card-network {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--t-text);
}
.news-card-time {
    color: var(--t-text-mute);
    flex: 0 0 auto;
}
.news-card--featured .news-card-cover {
    aspect-ratio: 16 / 9;
}

/* Skeleton placeholder while data loads */
.news-card.is-skeleton {
    pointer-events: none;
}
.news-card.is-skeleton .news-card-cover,
.news-card.is-skeleton .news-card-title {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: news-skel 1.4s ease-in-out infinite;
    border-radius: 4px;
}
.news-card.is-skeleton .news-card-title {
    height: 14px;
    width: 80%;
}
@keyframes news-skel {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Network badge (top-left of card cover)
   No overflow:hidden — that would clip the hover tooltip pseudo-element.
   The inner <img> handles its own corner-rounding via border-radius:inherit
   so the logo still appears clipped to the rounded square. */
.news-network-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(10, 10, 14, 0.78);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: var(--t-bg);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    /* Hard clip to the rounded corners so any uploaded logo —
       portrait, landscape, oversized — is cropped to the badge
       instead of bleeding past the border-radius. */
    overflow: hidden;
}
.news-network-badge img {
    width: 100%;
    height: 100%;
    /* object-fit: cover scales the image to fill the square while
       preserving aspect ratio; the parent's overflow: hidden then
       trims off whatever overflows in the long axis. */
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: inherit;
}
/* Custom-colour silhouette: SVG mask repaints the badge interior in any
   hex colour. Used when network.logoTint is a #hex value. */
.news-network-badge-mask {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 70%;
            mask-size: 70%;
}
.news-network-badge.is-fallback {
    background: var(--badge-tint, var(--t-accent));
    color: #0a0a0a;
}

/* ---------- Top-right cluster (category pill + media icon) */
.news-card-top-right {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}
/* When the icon sits inside the cluster it no longer needs its own
   absolute positioning — the cluster handles that. */
.news-card-top-right .news-media-icon {
    position: relative;
    top: auto;
    right: auto;
}

/* ---------- Media-type icon (top-right of card cover)
   Locked to white-on-dark so it stays legible regardless of cover
   colour or active theme. The dark glass backdrop + saturate filter
   creates a "lift" effect even on busy / bright artwork. */
.news-media-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(10, 10, 14, 0.78);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f0f0f5; /* fixed near-white — readable on any cover */
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    z-index: 2;
}
.news-media-icon svg {
    width: 14px;
    height: 14px;
}

/* ---------- Category pill (article / update / announcement)
   Same high-contrast treatment: dark frosted glass + colour-coded
   text so it reads clearly on white, neon, or photographic covers. */
.news-category-badge {
    position: relative; /* containing block for ::after tooltip */
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    background: rgba(10, 10, 14, 0.78);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f0f0f5;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: help;
    transition: color .15s ease, border-color .15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.news-category-badge--update       { color: #9ad7ff; border-color: rgba(154, 215, 255, 0.35); }
.news-category-badge--article      { color: #f0f0f5; }
.news-category-badge--announcement { color: #ffb86b; border-color: rgba(255, 184, 107, 0.35); }

/* Reuse the same tooltip pseudo-element styles. The selector group
   below extends the existing media-icon/network-badge tooltip rule
   to category badges too. */
.news-category-badge[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    padding: 4px 8px;
    background: var(--t-bg-panel);
    border: 1px solid var(--t-border);
    border-radius: 4px;
    color: var(--t-text);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .14s ease, transform .14s ease;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.news-category-badge[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* In the article-header media-flags row the badge sits inline with
   the media icons — slightly smaller for that context. */
/* Category badge inherits its default 28px height in the article
   header so it lines up with the star and media-icon next to it. */
/* White by default — readable on any cover colour.
   Hover lights up the original tint so the user can still tell what
   the icon means at a glance. */
.news-media-icon--video,
.news-media-icon--image,
.news-media-icon--audio,
.news-media-icon--link {
    color: #f0f0f5;
    transition: color .15s ease;
    cursor: help;
}
.news-media-icon--video:hover { color: #ff8676; }
.news-media-icon--image:hover { color: #7afff0; }
.news-media-icon--audio:hover { color: #ffd866; }
.news-media-icon--link:hover  { color: #b8a3ff; }

/* ---------- Custom tooltip (media icons + network badges) ----
   Pseudo-element styled to match the rest of the hub: panel bg,
   thin border, mono uppercase text. Renders ABOVE the host element.
   Default anchor is the host's right edge so the tooltip grows
   leftward — fits icons sitting in the top-RIGHT corner of a card
   without clipping. The network-badge override below flips the
   anchor since badges sit in the top-LEFT corner. */
.news-media-icon[data-tooltip]::after,
.news-network-badge[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    padding: 4px 8px;
    background: var(--t-bg-panel);
    border: 1px solid var(--t-border);
    border-radius: 4px;
    color: var(--t-text);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .14s ease, transform .14s ease;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.news-media-icon[data-tooltip]:hover::after,
.news-network-badge[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* Network badge sits in the TOP-LEFT — anchor tooltip to the badge's
   left edge so it grows rightward instead of clipping off the page. */
.news-network-badge[data-tooltip]::after {
    right: auto;
    left: 0;
}

/* In the article header, icons sit inline (not absolute) — give
   them position:relative so ::after positions against the icon. */
.news-article-media-flags .news-media-icon {
    position: relative;
}

/* ---------- Empty state (no articles) */
.news-empty {
    margin-top: 20px;
    padding: 24px;
    border: 1px dashed var(--t-border);
    border-radius: 10px;
    background: transparent;
    text-align: center;
}
.news-empty-line {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-text);
    margin-bottom: 4px;
}
.news-empty-line.mute {
    color: var(--t-text-mute);
}

/* =============================================================
   FIND NETWORKS overlay
   ============================================================= */
#findNetworks .mt-overlay-panel {
    width: min(640px, 92vw);
}
.networks-list-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}
.networks-list-search {
    padding: 14px 22px;
    border-bottom: 1px solid var(--t-border);
}
.networks-search-input {
    width: 100%;
    background: transparent;
    border: 1px solid var(--t-border);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--t-text);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
}
.networks-search-input::placeholder {
    color: var(--t-text-mute);
}
.networks-search-input:focus {
    outline: none;
    border-color: var(--t-accent);
}
.networks-list {
    max-height: 56vh;
    overflow-y: auto;
    padding: 6px 0;
}
.network-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 22px;
    border-bottom: 1px solid var(--t-border);
}
.network-row:last-child { border-bottom: none; }
.network-row-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    /* object-fit only applies when the element itself is an <img>;
       overflow: hidden also handles the case where it's a <span>
       fallback wrapping a child <img>. */
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    color: #0a0a0a;
}
/* If a future tweak nests an <img> inside the .network-row-logo
   element (e.g. so the fallback letter can sit alongside an
   uploaded asset), the inner image still snaps to the same square. */
.network-row-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: inherit;
}
.network-row-logo.is-fallback {
    background: var(--badge-tint, var(--t-accent));
}
.network-row-text {
    min-width: 0;
    overflow: hidden;
}
.network-row-name {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--t-text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.network-row-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: rgb(48 131 255 / 0.12);
    border: 1px solid rgb(48 112 250 / 0.4);
    border-radius: 999px;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--t-text-dim);
    vertical-align: middle;
}
.network-row-desc {
    font-family: var(--mono), serif;
    font-size: 11px;
    color: var(--t-text-mute);
    line-height: 1.5;
}
.network-row-toggle {
    background: transparent;
    border: 1px solid var(--t-border);
    color: var(--t-text);
    padding: 6px 14px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .15s ease;
}
.network-row-toggle:hover {
    border-color: var(--t-accent);
    color: var(--t-accent);
}
.network-row-toggle.is-on {
    background: var(--t-accent);
    border-color: var(--t-accent);
    color: var(--t-bg);
}

/* =============================================================
   NEWS ARTICLE OVERLAY (full reader)
   ============================================================= */
#newsArticle .mt-overlay-panel.news-article-panel {
    width: min(820px, 94vw);
    max-height: 90vh;
}
.news-article-body {
    padding: 22px;
    overflow-y: auto;
    max-height: calc(90vh - 60px);
}
.news-article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.news-article-network-badge {
    position: static;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 8px;
}
.news-article-meta-text {
    flex: 1 1 auto;
    min-width: 0;
}
.news-article-network-name {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-text);
}
.news-article-author {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--t-text-mute);
}
.news-article-media-flags {
    display: inline-flex;
    gap: 6px;
}
.news-article-follow-btn {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--t-border);
    color: var(--t-text);
    padding: 6px 14px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .15s ease;
}
.news-article-follow-btn:hover {
    border-color: var(--t-accent);
    color: var(--t-accent);
}
.news-article-follow-btn.is-on {
    background: var(--t-accent);
    border-color: var(--t-accent);
    color: var(--t-bg);
}
.news-article-follow-btn[hidden] {
    display: none;
}
.news-article-media-flags .news-media-icon {
    position: static;
}
.news-article-title {
    font-family: var(--mono);
    font-size: 22px;
    line-height: 1.3;
    color: var(--t-text);
    margin: 6px 0 18px;
    letter-spacing: 0.02em;
}
.news-article-cover {
    margin: 0 0 18px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--t-border);
}
.news-article-cover img {
    width: 100%;
    display: block;
}
.news-article-blocks {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--t-text);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.7;
}
.news-block-heading {
    font-family: var(--mono);
    margin: 6px 0 0;
    color: var(--t-text);
}
.news-block-heading--h1 { font-size: 18px; letter-spacing: 0.04em; }
.news-block-heading--h2 { font-size: 15px; letter-spacing: 0.06em; }
.news-block-heading--h3 { font-size: 13px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--t-text-dim); }
.news-block-paragraph {
    margin: 0;
    color: var(--t-text);
}
.news-block-image {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--t-border);
}
.news-block-image img {
    width: 100%;
    display: block;
}
.news-block-image-caption {
    padding: 8px 12px;
    font-size: 11px;
    color: var(--t-text-mute);
    border-top: 1px solid var(--t-border);
}
/* Optional "Source: …" line shown beneath an image or video block.
   Lighter weight than the caption so it reads as attribution rather
   than primary copy. Renders as a link when the saved value parses
   as an http(s) URL — see news.js renderBlockSource(). */
.news-block-source {
    margin-top: 6px;
    padding: 0 12px 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--t-text-dim);
    letter-spacing: 0.04em;
}
.news-block-source a {
    color: var(--t-accent);
    text-decoration: underline;
    word-break: break-all;
}
.news-block-video .news-block-source {
    /* Video wrappers are 16:9 absolute-positioned; the source line has
       to break out of that overlay so it lands BELOW the player. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: -24px;
    background: var(--t-bg);
    padding: 6px 0 0;
}
/* The video wrapper needs room for the source line to sit below it. */
.news-block-video:has(.news-block-source) {
    margin-bottom: 28px;
}
.news-block-video {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--t-border);
    aspect-ratio: 16 / 9;
    background: #000;
}
.news-block-video iframe,
.news-block-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.news-block-link a {
    color: var(--t-accent);
    text-decoration: none;
    border-bottom: 1px dashed var(--t-accent);
    padding-bottom: 1px;
}
.news-block-link a:hover {
    border-bottom-style: solid;
}
.news-block-quote {
    margin: 0;
    padding: 10px 16px;
    border-left: 2px solid var(--t-accent);
    background: rgba(255,255,255,0.02);
    font-style: italic;
    color: var(--t-text);
}
.news-block-quote-cite {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--t-text-mute);
    font-style: normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.news-block-divider {
    border: none;
    border-top: 1px solid var(--t-border);
    margin: 4px 0;
}
.news-article-loading {
    color: var(--t-text-mute);
    font-style: italic;
}

/* ---------- Article actions (footer of overlay) */
.news-article-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--t-border);
    flex-wrap: wrap;
}
.news-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--t-border);
    border-radius: 6px;
    color: var(--t-text);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .15s ease;
}
.news-action-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.news-action-btn:hover {
    border-color: var(--t-accent);
    color: var(--t-accent);
}

/* Active state — applied by news.js when an article is bookmarked
   or a reaction is selected. Gives clear visual confirmation that
   the action persisted. */
.news-action-btn.is-active {
    background: var(--t-accent);
    border-color: var(--t-accent);
    color: #ffffff;
}
.news-action-btn.is-active svg {
    fill: rgb(38 42 51);
    stroke: rgb(0 0 0 / 0);
}
.news-action-btn.is-active:hover {
    filter: brightness(1.1);
    color: #fff;
}

/* Reaction-specific active palette so "Great!" and "Oh." read
   distinctly from a neutral bookmark highlight. */
.news-react-btn[data-reaction="great"].is-active {
    background: #43adf1;
    border-color: #3b97f3;
}
.news-react-btn[data-reaction="great"].is-active path {
    fill: #b5e3ff;
}
.news-react-btn[data-reaction="meh"].is-active path {
    fill: #c85b00;

}
.news-react-btn[data-reaction="meh"].is-active {
    background: #f5ab0b;
    border-color: #f5ab0b;
}

/* Pulse the button briefly when state flips so the user sees the
   change even on a calm theme. JS toggles .just-toggled for ~600ms. */
@keyframes news-action-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}
.news-action-btn.just-toggled {
    animation: news-action-pulse .35s ease;
}

/* ─────────────────────────────────────────────────────────────
   My Activity overlay — bookmarks + reactions, opened via the
   square button (navMailBtn) in the top nav.
   ───────────────────────────────────────────────────────────── */
.my-activity-section {
    margin-bottom: 24px;
}
.my-activity-section h2 {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t-text-mute);
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--t-border);
}
.my-activity-empty {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--t-text-mute);
    padding: 16px 0;
    text-align: center;
}
.my-activity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.my-activity-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--t-surface, rgba(255,255,255,0.02));
    border: 1px solid var(--t-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s ease;
}
.my-activity-row:hover {
    border-color: var(--t-accent);
    background: rgba(255,255,255,0.04);
}
.my-activity-row-cover {
    width: 56px;
    height: 56px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.04);
}
.my-activity-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.my-activity-row-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--t-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.my-activity-row-meta {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--t-text-mute);
    text-transform: uppercase;
}
.my-activity-row-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--t-border);
    color: var(--t-text-mute);
    flex-shrink: 0;
}
.my-activity-row-tag.is-great { background: #4ade80; color: #000; border-color: #4ade80; }
.my-activity-row-tag.is-meh   { background: #f59e0b; color: #000; border-color: #f59e0b; }
.my-activity-row-tag.is-bookmark { background: var(--t-accent); color: #000; border-color: var(--t-accent); }

/* ─────────────────────────────────────────────────────────────
   Account Settings overlay — expanded form.
   ───────────────────────────────────────────────────────────── */
.acct-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-family: var(--mono);
}

/* Avatar header row */
.acct-avatar-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--t-border);
}
.acct-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--t-border);
    background: rgba(255,255,255,0.04);
    flex-shrink: 0;
}
.acct-avatar-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.acct-alias {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--t-text);
    word-break: break-word;
}
.acct-email {
    font-size: 12px;
    color: var(--t-text-mute);
    word-break: break-word;
}

/* Avatar picker grid */
.acct-avatar-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--t-border);
    border-radius: 6px;
}
.acct-avatar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}
.acct-avatar-list li {
    display: flex;
    justify-content: center;
    align-items: center;
}
.acct-avatar-list li img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color .12s ease, transform .12s ease;
    background: rgba(255,255,255,0.04);
}
.acct-avatar-list li img:hover { transform: scale(1.05); }
.acct-avatar-list li img.is-selected {
    border-color: var(--t-accent);
}

/* Generic editable row (alias / email / password / guid) */
.acct-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.acct-row-label {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--t-text-mute);
}
.acct-row-body {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.acct-row-value {
    font-size: 14px;
    color: var(--t-text);
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.acct-input {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--t-border);
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
    color: var(--t-text);
    font-family: var(--mono);
    font-size: 13px;
    outline: none;
    transition: border-color .12s ease;
}
.acct-input:focus { border-color: var(--t-accent); }

.acct-row-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--t-border);
    border-radius: 6px;
}
.acct-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

/* Buttons */
.acct-btn,
.acct-btn-ghost,
.acct-btn-danger,
.acct-link-btn {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--t-border);
    background: transparent;
    color: var(--t-text);
    transition: all .12s ease;
}
.acct-btn {
    background: var(--t-accent);
    border-color: var(--t-accent);
    color: #000;
}
.acct-btn:hover { filter: brightness(1.1); }
.acct-btn-ghost:hover {
    border-color: var(--t-accent);
    color: var(--t-accent);
}
.acct-btn-danger {
    color: #ff6b6b;
    border-color: #ff6b6b;
}
.acct-btn-danger:hover {
    background: #ff6b6b;
    color: #000;
}
.acct-link-btn {
    border: none;
    padding: 0;
    color: var(--t-accent);
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 11px;
    text-decoration: underline;
    align-self: flex-start;
}
.acct-link-btn:hover { filter: brightness(1.2); }

.acct-guid {
    font-size: 12px;
    color: var(--t-text-mute);
    word-break: break-all;
    user-select: all;
}

.acct-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--t-border);
}

/* The [hidden] attribute would normally apply display:none via the
   user-agent stylesheet, but the .acct-* rules above set explicit
   display:flex / display:block which win on specificity. Restore
   the expected behaviour so the avatar picker and password form
   stay collapsed until the user opens them. */
.acct-avatar-picker[hidden],
.acct-row-form[hidden],
.acct-input[hidden],
.acct-row-value[hidden],
.acct-form button[hidden] {
    display: none !important;
}

/* GUID + copy button row */
.acct-guid-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.acct-guid-row .acct-guid {
    flex: 1;
    min-width: 0;
}
.acct-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--t-border);
    background: transparent;
    color: var(--t-text-mute);
    cursor: pointer;
    transition: all .12s ease;
    flex-shrink: 0;
}
.acct-icon-btn svg {
    width: 14px;
    height: 14px;
}
.acct-icon-btn:hover {
    border-color: var(--t-accent);
    color: var(--t-accent);
}
.acct-icon-btn.is-copied {
    background: #4ade80;
    border-color: #4ade80;
    color: #000;
}

/* ─────────────────────────────────────────────────────────────────────
   Custom tooltip on the floating side dock buttons. Mirrors the
   .nav-util[data-tooltip] rule but renders to the LEFT of the button
   (the dock sits on the right edge, so a right-anchored tooltip would
   spill off-screen).
   ───────────────────────────────────────────────────────────────────── */
.util-dock-btn { position: relative; }

.util-dock-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    transform: translateY(-50%) translateX(4px);
    padding: 4px 8px;
    background: var(--t-bg-panel);
    border: 1px solid var(--t-border);
    border-radius: 4px;
    color: var(--t-text);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .14s ease, transform .14s ease;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.util-dock-btn[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ─────────────────────────────────────────────────────────────────────
   Global custom-tooltip kill-switch. When the user disables tooltips
   in Settings, the shell stamps html[data-tooltips="off"] and every
   custom pseudo-element tooltip is suppressed. Native browser title
   tooltips are not affected (we don't use them anymore on the chrome).
   ───────────────────────────────────────────────────────────────────── */
html[data-tooltips="off"] [data-tooltip]::after,
html[data-tooltips="off"] [data-tooltip]:hover::after {
    opacity: 0 !important;
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Auth-flash: a quick red pulse on a button the user clicked while
   signed out. Used by news.js's requireAuth() so users get clear
   feedback (button flash + toast notification) instead of a silent
   no-op when an action requires sign-in.
   ───────────────────────────────────────────────────────────────────── */
@keyframes hubAuthFlash {
    0%   { box-shadow: 0 0 0 0 rgba(255, 60, 60, 0);   border-color: var(--t-border); }
    35%  { box-shadow: 0 0 0 6px rgba(255, 60, 60, .35); border-color: #ff3c3c; }
    100% { box-shadow: 0 0 0 0 rgba(255, 60, 60, 0);   border-color: var(--t-border); }
}
.auth-flash {
    animation: hubAuthFlash .65s ease-out;
}

/* (per-element scrollbar suppressors removed — theme.css now hides
   every scrollbar in the app via a universal !important rule.) */