:root {
    --ui-bg: #111722;
    --ui-bg-raised: #232c3a;
    --ui-surface: #1d2430;
    --ui-surface-2: #232c3a;
    --ui-surface-3: #273244;
    --ui-border: rgba(255, 255, 255, 0.12);
    --ui-border-strong: rgba(255, 255, 255, 0.16);
    --ui-text: #f6f8fc;
    --ui-muted: #b8c3d4;
    --ui-muted-strong: #d9e1ee;
    --ui-primary: #5f7cff;
    --ui-primary-strong: #485fd6;
    --ui-green: #24a66a;
    --ui-yellow: #d7902f;
    --ui-red: #e14d5a;
    --ui-twitch: #5f7cff;
    --ui-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
    --ui-radius: 8px;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 16px;
    --ui-space-4: 24px;
    --ui-space-5: 32px;
    --ui-space-6: 48px;
    --bg: var(--ui-bg);
    --bg-alt: var(--ui-bg-raised);
    --surface: var(--ui-surface);
    --surface-soft: rgba(255, 255, 255, 0.035);
    --surface-strong: var(--ui-bg-raised);
    --text: var(--ui-text);
    --muted: var(--ui-muted);
    --muted-strong: var(--ui-muted-strong);
    --border: var(--ui-border);
    --primary: var(--ui-primary);
    --secondary: var(--ui-primary);
}

[data-theme="light"] {
    --ui-bg: #f4f6fb;
    --ui-bg-raised: #f9fbff;
    --ui-surface: #ffffff;
    --ui-surface-2: #f3f6ff;
    --ui-surface-3: #e9eef8;
    --ui-border: rgba(19, 24, 33, 0.12);
    --ui-border-strong: rgba(19, 24, 33, 0.18);
    --ui-text: #131821;
    --ui-muted: #536174;
    --ui-muted-strong: #334155;
    --ui-shadow: 0 18px 46px rgba(31, 42, 68, 0.1);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.product-page {
    min-height: 100vh;
    margin: 0;
    color: var(--ui-text);
    background:
        radial-gradient(760px 420px at 4% 0%, rgba(95, 124, 255, 0.2), transparent),
        radial-gradient(620px 360px at 100% 4%, rgba(36, 166, 106, 0.12), transparent),
        var(--ui-bg);
    background-attachment: fixed;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
}

[data-theme="light"] body.product-page {
    background:
        radial-gradient(760px 420px at 4% 0%, rgba(95, 124, 255, 0.16), transparent),
        radial-gradient(620px 360px at 100% 4%, rgba(36, 166, 106, 0.1), transparent),
        var(--ui-bg);
}

body.product-page h1,
body.product-page h2,
body.product-page h3,
body.product-page .navbar-brand {
    margin-top: 0;
    color: var(--ui-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

body.product-page a,
body.product-page button,
body.product-page input,
body.product-page select,
body.product-page textarea,
body.product-page summary {
    font: inherit;
}

body.product-page a:focus-visible,
body.product-page button:focus-visible,
body.product-page input:focus-visible,
body.product-page select:focus-visible,
body.product-page textarea:focus-visible,
body.product-page summary:focus-visible {
    outline: 3px solid rgba(95, 124, 255, 0.48);
    outline-offset: 2px;
}

body.product-page .navbar,
body.product-page .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 68px;
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    background: rgba(29, 36, 48, 0.96);
    box-shadow: none;
    backdrop-filter: blur(16px);
}

body.product-page .navbar {
    padding: 10px max(16px, calc((100vw - 1440px) / 2));
}

body.product-page .topbar-inner {
    width: min(1440px, calc(100vw - 32px));
    min-height: 68px;
    padding: 8px 0;
}

body.product-page .navbar-brand {
    gap: 10px;
    color: var(--ui-text);
    font-size: 16px;
    font-weight: 800;
}

body.product-page .brand-logo,
body.product-page .bot-icon {
    width: 36px;
    height: 36px;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
}

body.product-page .navbar-menu,
body.product-page .topbar-nav,
body.product-page .nav-links {
    gap: 4px;
}

body.product-page .nav-link,
body.product-page .navbar-link {
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--ui-muted-strong);
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

body.product-page .nav-link:hover,
body.product-page .navbar-link:hover,
body.product-page .nav-link:focus-visible,
body.product-page .navbar-link:focus-visible {
    color: var(--ui-text);
    border-color: var(--ui-border);
    background: rgba(255, 255, 255, 0.045);
    transform: translateY(-1px);
}

body.product-page .nav-link.active,
body.product-page .navbar-link.active {
    color: #fff;
    border-color: rgba(95, 124, 255, 0.42);
    background: rgba(95, 124, 255, 0.16);
    box-shadow: inset 0 -2px 0 var(--ui-primary);
}

body.product-page .user-chip,
body.product-page .user-menu summary {
    min-height: 42px;
    padding: 4px 8px 4px 4px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-bg-raised);
}

body.product-page .avatar {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--ui-primary);
    box-shadow: none;
    font-size: 13px;
}

body.product-page .server-context-select,
body.product-page select,
body.product-page input:not([type="checkbox"]):not([type="radio"]),
body.product-page textarea {
    min-height: 42px;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 6px !important;
    color: var(--ui-text) !important;
    background: var(--ui-bg-raised) !important;
    box-shadow: none !important;
}

body.product-page textarea {
    min-height: 96px;
    resize: vertical;
}

body.product-page input::placeholder,
body.product-page textarea::placeholder {
    color: #7f8c9a;
}

body.product-page .btn,
body.product-page .save-btn,
body.product-page .schedule-btn,
body.product-page .login-button,
body.product-page .login-button-twitch {
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    box-shadow: none;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.1;
    text-decoration: none;
    transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

body.product-page .btn:hover,
body.product-page .save-btn:hover,
body.product-page .schedule-btn:hover,
body.product-page .login-button:hover,
body.product-page .login-button-twitch:hover {
    transform: translateY(-1px);
}

body.product-page .btn-primary,
body.product-page .save-btn,
body.product-page .schedule-btn.save,
body.product-page .login-button {
    color: #fff;
    border-color: var(--ui-primary);
    background: var(--ui-primary);
}

body.product-page .btn-primary:hover,
body.product-page .save-btn:hover,
body.product-page .schedule-btn.save:hover,
body.product-page .login-button:hover {
    background: var(--ui-primary-strong);
}

body.product-page .btn-secondary,
body.product-page .btn-ghost,
body.product-page .schedule-btn.clear {
    color: var(--ui-text);
    border-color: var(--ui-border-strong);
    background: var(--ui-bg-raised);
}

body.product-page .btn-success {
    color: #061a12;
    background: var(--ui-green);
}

body.product-page .btn-danger,
body.product-page .logout-btn {
    color: #fff;
    background: #b83f49;
}

body.product-page .page-blocking-overlay {
    background: rgba(7, 10, 14, 0.88);
    backdrop-filter: blur(8px);
}

body.product-page .page-blocking-card {
    width: min(360px, calc(100vw - 32px));
    padding: 24px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

body.product-page .page-blocking-spinner {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    animation: ui-loader-pulse 1.2s ease-in-out infinite alternate;
}

body.product-page .page-footer {
    border-top: 1px solid var(--ui-border);
    color: var(--ui-muted);
}

body.product-page .page-footer a {
    color: var(--ui-muted-strong);
}

@keyframes ui-loader-pulse {
    from { opacity: 0.55; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

/* Public landing page */
.landing-page main {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.landing-page main::before {
    position: absolute;
    inset: 480px -28% -180px;
    z-index: -1;
    content: "";
    pointer-events: none;
    background: linear-gradient(
        118deg,
        rgba(95, 124, 255, 0.22),
        rgba(36, 166, 106, 0.08) 42%,
        rgba(95, 124, 255, 0.1) 72%,
        rgba(95, 124, 255, 0.05)
    );
    opacity: 0.36;
    transform: translate3d(-4%, 0, 0) scale(1.08);
    animation: landing-color-drift 34s ease-in-out infinite;
}

@keyframes landing-color-drift {
    0%, 100% { opacity: 0.3; transform: translate3d(-4%, 0, 0) scale(1.08); }
    50% { opacity: 0.46; transform: translate3d(4%, 1.5%, 0) scale(1.12); }
}

.landing-page .public-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    position: sticky;
    top: 12px;
    z-index: 40;
    width: min(1500px, calc(100% - 32px));
    min-height: 74px;
    margin: 12px auto 0;
    padding: 8px 16px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 8px;
    background: rgba(29, 36, 48, 0.96);
    box-shadow: var(--ui-shadow);
    backdrop-filter: blur(16px);
}

.landing-page .public-nav__links,
.landing-page .public-nav__actions,
.landing-page .hero-actions,
.landing-page .cta-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.landing-page .public-nav__links {
    justify-content: center;
}

.landing-page .public-nav__actions {
    justify-content: flex-end;
}

.landing-page .public-nav__link {
    padding: 8px 10px;
    color: var(--ui-muted-strong);
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
}

.landing-page .public-nav__link:hover {
    color: #fff;
}

.landing-page .landing-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(520px, 70svh, 680px);
    overflow: hidden;
    border-bottom: 1px solid var(--ui-border);
    background: #080b10;
    isolation: isolate;
}

.landing-page .landing-hero::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: rgba(3, 6, 10, 0.66);
}

.landing-page .landing-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.72;
}

.landing-page .landing-hero__content {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
    padding: 64px 0 72px;
}

.landing-page .landing-hero__content > * {
    max-width: 770px;
}

.landing-page .eyebrow,
.landing-page .section-eyebrow {
    margin: 0 0 12px;
    color: #89a1ff;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.landing-page .landing-hero h1 {
    margin: 0 0 16px;
    font-size: clamp(52px, 8vw, 92px);
    line-height: 0.96;
}

.landing-page .landing-hero__lead {
    margin: 0 0 28px;
    color: #e5ebf4;
    font-size: clamp(18px, 2.4vw, 24px);
    line-height: 1.45;
}

.landing-page .hero-feature-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 26px 0 0;
    color: var(--ui-muted-strong);
    font-size: 14px;
    font-weight: 650;
}

.landing-page .hero-feature-line span::before {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--ui-green);
    content: "";
}

.landing-page .error-message {
    display: grid;
    gap: 4px;
    width: min(620px, 100%);
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid rgba(239, 98, 109, 0.44);
    border-radius: var(--ui-radius);
    color: #ffdce0;
    background: rgba(136, 35, 45, 0.38);
}

.landing-page .landing-section {
    padding: 80px max(20px, calc((100vw - 1240px) / 2));
    border-bottom: 1px solid var(--ui-border);
}

.landing-page .landing-section--muted {
    background: rgba(29, 36, 48, 0.84);
}

.landing-page .system-divider {
    position: relative;
    z-index: 1;
    height: 96px;
    overflow: hidden;
    border-bottom: 1px solid var(--ui-border);
    background: rgba(17, 23, 34, 0.72);
}

.landing-page .system-divider svg {
    display: block;
    width: 100%;
    height: 100%;
    color: #7892ff;
    opacity: 0.46;
}

.landing-page .system-divider--reverse svg {
    transform: scaleX(-1);
}

.landing-page .system-divider path {
    fill: none;
    stroke: currentColor;
    stroke-width: 0.8;
    vector-effect: non-scaling-stroke;
    animation: landing-network-pulse 8s ease-in-out infinite;
}

.landing-page .system-divider path:nth-child(2) {
    color: var(--ui-green);
    animation-delay: -4s;
}

.landing-page .system-divider circle {
    fill: currentColor;
}

.landing-page .system-divider g {
    transform-origin: center;
    animation: landing-network-drift 12s ease-in-out infinite;
}

@keyframes landing-network-pulse {
    0%, 100% { opacity: 0.24; }
    50% { opacity: 0.74; }
}

@keyframes landing-network-drift {
    0%, 100% { transform: translate3d(-6px, 0, 0); opacity: 0.55; }
    50% { transform: translate3d(6px, -2px, 0); opacity: 1; }
}

.landing-page .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1.2fr);
    gap: 48px;
    align-items: end;
    margin-bottom: 40px;
}

.landing-page .section-heading h2 {
    margin: 0;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;
}

.landing-page .section-heading p {
    margin: 0;
    color: var(--ui-muted);
    font-size: 17px;
}

.landing-page .outcome-grid,
.landing-page .feature-directory,
.landing-page .trust-grid {
    display: grid;
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-border);
}

.landing-page .outcome-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-page .feature-directory {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-page .trust-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-page .outcome,
.landing-page .feature-entry,
.landing-page .trust-item {
    padding: 28px;
    background: var(--ui-surface);
}

.landing-page .outcome__index {
    display: block;
    color: var(--ui-green);
    font-size: 12px;
    font-weight: 850;
}

.landing-page .outcome__header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    margin-bottom: 28px;
}

.landing-page .outcome__header > .landing-feature-icon {
    width: 24px;
    height: 24px;
    color: #9bb0ff;
}

.landing-page .outcome h3,
.landing-page .feature-entry h3,
.landing-page .trust-item h3 {
    margin-bottom: 8px;
    font-size: 19px;
}

.landing-page .outcome p,
.landing-page .feature-entry p,
.landing-page .trust-item p {
    margin: 0;
    color: var(--ui-muted);
}

.landing-page .feature-entry__icon {
    display: grid;
    width: 36px;
    height: 36px;
    margin-bottom: 22px;
    place-items: center;
    border: 1px solid var(--ui-border-strong);
    border-radius: 6px;
    color: #9bb0ff;
    background: var(--ui-bg-raised);
}

.landing-page .feature-entry__icon svg {
    width: 18px;
    height: 18px;
}

.landing-page .landing-feature-icon {
    display: block;
    width: 20px;
    height: 20px;
    color: inherit;
    background: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.landing-page .landing-feature-icon--applications {
    mask-image: url('/static/icons/server-settings/applications.svg');
    -webkit-mask-image: url('/static/icons/server-settings/applications.svg');
}

.landing-page .landing-feature-icon--engagement {
    mask-image: url('/static/icons/server-settings/engagement.svg');
    -webkit-mask-image: url('/static/icons/server-settings/engagement.svg');
}

.landing-page .landing-feature-icon--moderation {
    mask-image: url('/static/icons/server-settings/moderation.svg');
    -webkit-mask-image: url('/static/icons/server-settings/moderation.svg');
}

.landing-page .landing-feature-icon--setup-alerts {
    mask-image: url('/static/icons/server-settings/setup-alerts.svg');
    -webkit-mask-image: url('/static/icons/server-settings/setup-alerts.svg');
}

.landing-page .landing-feature-icon--steam {
    mask-image: url('/static/icons/server-settings/steam.svg');
    -webkit-mask-image: url('/static/icons/server-settings/steam.svg');
}

.landing-page .landing-feature-icon--twitch {
    mask-image: url('/static/icons/server-settings/twitch.svg');
    -webkit-mask-image: url('/static/icons/server-settings/twitch.svg');
}

.landing-page .landing-feature-icon--voice {
    mask-image: url('/static/icons/server-settings/voice.svg');
    -webkit-mask-image: url('/static/icons/server-settings/voice.svg');
}

.landing-page .landing-feature-icon--welcome {
    mask-image: url('/static/icons/server-settings/welcome.svg');
    -webkit-mask-image: url('/static/icons/server-settings/welcome.svg');
}

.landing-page .product-window {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 520px;
    overflow: hidden;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

.landing-page .product-window__nav {
    padding: 22px 14px;
    border-right: 1px solid var(--ui-border);
    background: #0f151c;
}

.landing-page .product-window__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    font-weight: 800;
}

.landing-page .product-window__brand img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.landing-page .product-window__nav span {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--ui-muted);
    font-size: 13px;
    font-weight: 650;
}

.landing-page .product-window__nav span.active {
    color: #fff;
    background: rgba(95, 124, 255, 0.17);
    box-shadow: inset 3px 0 0 var(--ui-primary);
}

.landing-page .product-window__main {
    padding: 28px;
}

.landing-page .product-window__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.landing-page .product-window__header h3 {
    margin: 0 0 4px;
    font-size: 24px;
}

.landing-page .product-window__header p {
    margin: 0;
    color: var(--ui-muted);
}

.landing-page .preview-status {
    padding: 7px 10px;
    border: 1px solid rgba(54, 201, 143, 0.34);
    border-radius: 6px;
    color: #7be2b9;
    background: rgba(54, 201, 143, 0.1);
    font-size: 12px;
    font-weight: 800;
}

.landing-page .preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.landing-page .preview-card {
    min-height: 150px;
    padding: 18px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-bg-raised);
}

.landing-page .preview-card strong,
.landing-page .preview-card span {
    display: block;
}

.landing-page .preview-card span {
    margin-top: 6px;
    color: var(--ui-muted);
    font-size: 13px;
}

.landing-page .preview-bar {
    height: 7px;
    margin-top: 30px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--ui-surface-3);
}

.landing-page .preview-bar::after {
    display: block;
    width: var(--bar-width, 62%);
    height: 100%;
    border-radius: inherit;
    background: var(--ui-primary);
    content: "";
}

.landing-page .final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-top: 64px;
    padding-bottom: 64px;
    background: #111923;
}

.landing-page .final-cta h2 {
    margin: 0 0 8px;
    font-size: clamp(28px, 4vw, 44px);
}

.landing-page .final-cta p {
    margin: 0;
    color: var(--ui-muted);
}

.landing-page .landing-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px max(20px, calc((100vw - 1240px) / 2));
    color: var(--ui-muted);
    font-size: 13px;
}

.landing-page .landing-footer__links {
    display: flex;
    gap: 18px;
}

.landing-page .landing-footer a {
    color: var(--ui-muted-strong);
}

/* Dashboard */
.dashboard-page .container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 28px;
    width: min(1280px, calc(100vw - 40px));
    max-width: none;
    margin: 0 auto;
    padding: 30px 0 56px;
}

.dashboard-page .section-card {
    grid-column: 1 / -1;
    margin: 0;
    padding: 34px 0;
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.dashboard-page .section-card.hero {
    padding-top: 24px;
}

.dashboard-page .hero h1 {
    max-width: 850px;
    margin-bottom: 12px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
}

.dashboard-page .hero-copy > p {
    max-width: 760px;
    color: var(--ui-muted);
    font-size: 17px;
}

.dashboard-page .health-section {
    grid-column: span 5;
}

.dashboard-page .updates-section {
    grid-column: span 7;
}

.dashboard-page .health-section,
.dashboard-page .updates-section {
    border-bottom: 1px solid var(--ui-border);
}

.dashboard-page .section-eyebrow,
.dashboard-page .hero-kicker {
    color: #8fa4ff;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dashboard-page .section-title {
    margin: 4px 0 7px;
    font-size: 23px;
}

.dashboard-page .section-copy,
.dashboard-page .panel-meta {
    color: var(--ui-muted);
}

.dashboard-page .setup-shell {
    gap: 14px;
}

.dashboard-page .setup-overview,
.dashboard-page .setup-check,
.dashboard-page .recommendation-item,
.dashboard-page .health-card,
.dashboard-page .account-card,
.dashboard-page .timeline-item,
.dashboard-page .timeline-empty {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: none;
}

.dashboard-page .health-grid {
    grid-template-columns: 1fr;
}

.dashboard-page .health-card,
.dashboard-page .account-card {
    padding: 18px;
}

.dashboard-page .account-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-page .service-brand,
.dashboard-page .health-icon {
    border-radius: 6px;
}

.dashboard-page .timeline {
    max-height: 520px;
    overflow-y: auto;
}

/* Personal settings */
.settings-page .container {
    width: min(1240px, calc(100vw - 40px));
    max-width: none;
    margin: 0 auto;
    padding: 30px 0 56px;
}

.settings-page .hero-panel,
.twitch-page .page-hero {
    margin: 0;
    padding: 24px 0 34px;
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.settings-page .hero-panel h1,
.twitch-page .page-hero h1 {
    margin-bottom: 8px;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.1;
}

.settings-page .hero-panel > p,
.twitch-page .page-hero p {
    max-width: 760px;
    color: var(--ui-muted);
    font-size: 17px;
}

.settings-page .hero-link-grid {
    display: none;
}

.settings-page .settings-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: start;
    margin-top: 30px;
}

.settings-page .section,
.settings-page .summary-panel,
.settings-page .save-panel,
.twitch-page .section {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: none;
}

.settings-page .section {
    padding: 24px;
}

.settings-page .section h2,
.twitch-page .section h2 {
    margin-bottom: 8px;
    padding: 0;
    border: 0;
    color: var(--ui-text);
    font-size: 21px;
}

.settings-page .section-intro,
.settings-page .setting-description {
    color: var(--ui-muted);
}

.settings-page .setting-item {
    position: relative;
    margin: 22px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--ui-border);
    border-bottom: 0;
}

.settings-page .setting-label {
    margin-bottom: 4px;
    color: var(--ui-text);
    font-weight: 750;
}

.settings-page .settings-sidebar {
    position: sticky;
    top: 92px;
}

.settings-page .summary-panel,
.settings-page .save-panel {
    padding: 20px;
}

.settings-page .summary-item {
    border-color: var(--ui-border);
}

.settings-page .schedule-grid {
    gap: 14px;
}

.settings-page .schedule-table,
.twitch-page .commands-table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-bg-raised);
}

.settings-page .schedule-table th,
.twitch-page .commands-table th {
    color: var(--ui-muted-strong);
    background: var(--ui-surface-2);
}

.settings-page .schedule-table td,
.settings-page .schedule-table th,
.twitch-page .commands-table td,
.twitch-page .commands-table th {
    border-color: var(--ui-border);
}

/* Twitch tools */
.twitch-page .container {
    width: min(1240px, calc(100vw - 40px));
    max-width: none;
    margin: 0 auto;
    padding: 30px 0 56px;
}

.twitch-page .page-hero h1 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.twitch-page .hero-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(95, 124, 255, 0.4);
    border-radius: 6px;
    color: #b8c6ff;
    background: rgba(95, 124, 255, 0.12);
}

.twitch-page .tabs {
    display: none;
}

.twitch-page .tab,
.twitch-page .streamer-subtab {
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-muted-strong);
    background: var(--ui-bg-raised);
}

.twitch-page .tab.active,
.twitch-page .streamer-subtab.active {
    color: #fff;
    border-color: rgba(95, 124, 255, 0.42);
    background: rgba(95, 124, 255, 0.15);
    box-shadow: inset 0 -2px 0 var(--ui-twitch);
}

.twitch-page .streamer-subtabs {
    position: sticky;
    top: 68px;
    z-index: 20;
    display: flex;
    gap: 6px;
    margin: 0 0 18px;
    padding: 12px 0;
    background: var(--ui-bg);
}

.twitch-page .requirements-panel {
    padding: 20px 22px;
    border-left: 3px solid var(--ui-twitch);
    background: rgba(95, 124, 255, 0.08) !important;
}

.twitch-page .requirements-panel h2 {
    color: #b8c6ff !important;
}

.twitch-page .section {
    padding: 24px;
}

.twitch-page .stats-grid {
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-border);
}

.twitch-page .stat-card {
    border: 0;
    border-radius: 0;
    background: var(--ui-bg-raised);
    box-shadow: none;
}

.twitch-page .stat-value {
    color: #c5a4ff;
}

.twitch-page .linked-account,
.twitch-page .checkbox-row {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-bg-raised);
}

.twitch-page .modal {
    background: rgba(4, 7, 10, 0.82);
    backdrop-filter: blur(8px);
}

.twitch-page .modal-content {
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

@media (max-width: 1040px) {
    .landing-page .feature-directory {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-page .health-section,
    .dashboard-page .updates-section {
        grid-column: 1 / -1;
    }

    .dashboard-page .health-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .settings-page .settings-shell {
        grid-template-columns: 1fr;
    }

    .settings-page .settings-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
}

@media (max-width: 820px) {
    .landing-page .public-nav {
        grid-template-columns: 1fr auto;
    }

    .landing-page .public-nav__links {
        display: none;
    }

    .landing-page .outcome-grid,
    .landing-page .trust-grid,
    .dashboard-page .health-grid,
    .dashboard-page .account-grid {
        grid-template-columns: 1fr;
    }

    .landing-page .section-heading {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .landing-page .product-window {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .landing-page .product-window__nav {
        display: none;
    }

    .landing-page .final-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .landing-page .system-divider {
        height: 72px;
    }

    body.product-page .navbar,
    body.product-page .topbar-inner {
        grid-template-columns: auto auto;
    }

    body.product-page .navbar-menu,
    body.product-page .topbar-nav {
        grid-column: 1 / -1;
        order: 3;
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
    }

    body.product-page .user-info,
    body.product-page .topbar-user {
        justify-self: end;
    }

    body.product-page .server-context-select {
        max-width: 180px;
    }
}

@media (max-width: 620px) {
    .landing-page .public-nav {
        min-height: 64px;
        padding: 8px 16px;
    }

    .landing-page .public-nav__actions .public-nav__link {
        display: none;
    }

    .landing-page .landing-hero {
        min-height: min(680px, calc(100svh - 64px));
    }

    .landing-page .landing-hero__content {
        width: calc(100% - 32px);
        padding: 48px 0 42px;
    }

    .landing-page .landing-hero__media {
        object-position: 58% center;
    }

    .landing-page .landing-hero h1 {
        font-size: clamp(46px, 18vw, 70px);
    }

    .landing-page .hero-actions,
    .landing-page .cta-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .landing-page .hero-actions .btn,
    .landing-page .cta-actions .btn {
        justify-content: center;
        width: 100%;
    }

    .landing-page .landing-section {
        padding: 56px 16px;
    }

    .landing-page .system-divider {
        height: 54px;
    }

    .landing-page .feature-directory,
    .landing-page .preview-grid {
        grid-template-columns: 1fr;
    }

    .landing-page .product-window__main {
        padding: 18px;
    }

    .landing-page .preview-card {
        min-height: auto;
    }

    .landing-page .product-window__header,
    .landing-page .landing-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-page .container,
    .settings-page .container,
    .twitch-page .container {
        width: calc(100vw - 28px);
    }

    .dashboard-page .section-card,
    .settings-page .section,
    .twitch-page .section {
        padding: 22px 0;
    }

    .settings-page .section,
    .twitch-page .section {
        padding: 18px;
    }

    .settings-page .settings-sidebar {
        grid-template-columns: 1fr;
    }

    .twitch-page .streamer-subtabs {
        overflow-x: auto;
    }

    body.product-page .user-copy,
    body.product-page .server-context-select {
        display: none;
    }
}

@media (max-width: 420px) {
    .landing-page .public-nav .navbar-brand span {
        display: none;
    }

    .landing-page .public-nav__actions .btn {
        min-height: 38px;
        padding: 0 12px;
        font-size: 13px;
    }

    .landing-page .hero-feature-line {
        gap: 8px 12px;
        font-size: 13px;
    }

    .landing-page .outcome,
    .landing-page .feature-entry,
    .landing-page .trust-item {
        padding: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Shared floating chrome used by the public and authenticated product pages. */
body.product-page.landing-page .public-nav {
    position: sticky;
    top: 12px;
    z-index: 40;
    width: min(1500px, calc(100% - 32px));
    min-height: 74px;
    margin: 12px auto 0;
    padding: 8px 16px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 8px;
    background: rgba(29, 36, 48, 0.96);
    box-shadow: var(--ui-shadow);
    backdrop-filter: blur(16px);
}

/* Unified application chrome for the dashboard, personal settings, and Twitch tools. */
body.product-page.dashboard-page,
body.product-page.settings-page,
body.product-page.twitch-page {
    background:
        radial-gradient(760px 420px at 4% 0%, rgba(95, 124, 255, 0.2), transparent),
        radial-gradient(620px 360px at 100% 4%, rgba(36, 166, 106, 0.12), transparent),
        var(--ui-bg);
    background-attachment: fixed;
}

body.product-page.dashboard-page .topbar,
body.product-page.settings-page .navbar,
body.product-page.twitch-page .navbar {
    position: sticky;
    top: 12px;
    z-index: 40;
    width: min(1500px, calc(100% - 32px));
    min-height: 74px;
    margin: 12px auto 0;
    padding: 8px 16px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 8px;
    background: rgba(29, 36, 48, 0.96);
    box-shadow: var(--ui-shadow);
    backdrop-filter: blur(16px);
}

body.product-page.dashboard-page .topbar-inner {
    width: 100%;
    min-height: 56px;
    padding: 0;
}

body.product-page.settings-page .navbar,
body.product-page.twitch-page .navbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

body.product-page.dashboard-page .topbar-nav,
body.product-page.settings-page .navbar-menu,
body.product-page.twitch-page .navbar-menu {
    justify-content: center;
}

body.product-page.dashboard-page .nav-link,
body.product-page.settings-page .nav-link,
body.product-page.twitch-page .nav-link {
    min-height: 40px;
    border-radius: 6px;
}

body.product-page.dashboard-page .topbar-user,
body.product-page.settings-page .user-info,
body.product-page.twitch-page .user-info {
    gap: 8px;
}

body.product-page.dashboard-page .user-chip,
body.product-page.settings-page .user-menu summary,
body.product-page.twitch-page .user-menu summary {
    border-color: var(--ui-border-strong);
    background: var(--ui-surface-2);
}

body.product-page .app-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: min(1500px, calc(100% - 32px));
    min-height: 80px;
    margin: 16px auto 0;
    padding: 16px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

body.product-page .app-context-bar__copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

body.product-page .app-context-bar__copy span,
body.product-page .app-context-bar__controls label {
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

body.product-page .app-context-bar__copy strong {
    overflow-wrap: anywhere;
    color: var(--ui-text);
    font-size: 16px;
}

body.product-page .app-context-bar__controls {
    display: grid;
    grid-template-columns: auto minmax(240px, 360px) auto;
    align-items: center;
    gap: 8px;
    margin: 0;
}

body.product-page .app-context-bar .server-context-select {
    display: block;
    width: 100%;
    min-width: 240px;
}

.dashboard-page .container,
.settings-page .container,
.twitch-page .container {
    width: min(1500px, calc(100% - 32px));
    padding: 24px 0 64px;
}

.dashboard-page .container {
    gap: 0 28px !important;
}

/* The dashboard mixes full-width cards with a split health/update row. Margins
   keep every top-level section visibly separate regardless of grid placement. */
.dashboard-page .container > .section-card + .section-card {
    margin-top: 16px;
}

.dashboard-page .section-card {
    margin: 0;
    padding: 28px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

.dashboard-page .section-card.hero {
    padding: 36px;
    background: var(--ui-surface);
}

.dashboard-page .section-card.hero h1 {
    max-width: 760px;
    font-size: clamp(32px, 4vw, 48px);
}

.dashboard-page .health-section,
.dashboard-page .updates-section {
    border: 1px solid var(--ui-border);
}

.dashboard-page .setup-overview,
.dashboard-page .setup-check,
.dashboard-page .recommendation-item,
.dashboard-page .health-card,
.dashboard-page .account-card,
.dashboard-page .timeline-item,
.dashboard-page .timeline-empty {
    background: var(--ui-surface-2);
}

.settings-page .hero-panel,
.twitch-page .page-hero {
    margin: 0;
    padding: 30px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

.settings-page .hero-panel h1,
.twitch-page .page-hero h1 {
    margin-bottom: 8px;
    font-size: clamp(32px, 4vw, 46px);
}

.settings-page .hero-link-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.settings-page .hero-link-card {
    display: grid;
    gap: 4px;
    min-height: 104px;
    padding: 16px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text);
    background: var(--ui-surface-2);
    text-decoration: none;
}

.settings-page .hero-link-card:hover {
    border-color: rgba(95, 124, 255, 0.46);
    background: rgba(95, 124, 255, 0.1);
}

.settings-page .hero-link-card span {
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.45;
}

.settings-page .settings-shell {
    gap: 16px;
    margin-top: 16px;
}

.settings-page .section,
.settings-page .summary-panel,
.settings-page .save-panel,
.twitch-page .section {
    border-radius: 8px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

.settings-page .settings-sidebar {
    top: 98px;
}

.twitch-page .streamer-subtabs {
    top: 98px;
    gap: 8px;
    margin: 16px 0;
    padding: 8px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}

.twitch-page .section {
    margin-bottom: 16px;
}

body.product-page .theme-toggle {
    flex: 0 0 auto;
    white-space: nowrap;
    background: transparent;
}

body.product-page .user-menu {
    position: relative;
}

body.product-page .user-menu .account-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin: 0;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 6px;
    color: var(--ui-text) !important;
    background: transparent !important;
    cursor: pointer;
    list-style: none;
}

body.product-page .user-menu .account-chip::-webkit-details-marker {
    display: none;
}

body.product-page .account-avatar {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border-radius: 50%;
    object-fit: cover;
    color: #fff;
    background: var(--ui-primary);
}

body.product-page .account-name {
    max-width: 150px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.product-page.landing-page .public-nav__actions > .account-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: var(--ui-text);
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
}

body.product-page .user-menu-dropdown {
    border-color: var(--ui-border-strong) !important;
    background: var(--ui-surface-2) !important;
    box-shadow: var(--ui-shadow);
}

[data-theme="light"] body.product-page .navbar,
[data-theme="light"] body.product-page .topbar,
[data-theme="light"] body.product-page.landing-page .public-nav,
[data-theme="light"] body.product-page.dashboard-page .topbar,
[data-theme="light"] body.product-page.settings-page .navbar,
[data-theme="light"] body.product-page.twitch-page .navbar {
    background: rgba(255, 255, 255, 0.96);
}

@media (max-width: 820px) {
    body.product-page.landing-page .public-nav {
        top: 8px;
        width: min(100% - 16px, 1500px);
        margin-top: 8px;
    }

    body.product-page.dashboard-page .topbar,
    body.product-page.settings-page .navbar,
    body.product-page.twitch-page .navbar {
        top: 8px;
        width: min(100% - 16px, 1500px);
        margin-top: 8px;
        border-radius: 8px;
    }

    .dashboard-page .container,
    .settings-page .container,
    .twitch-page .container {
        width: min(100% - 16px, 1500px);
        padding-top: 16px;
    }

    body.product-page .app-context-bar {
        width: min(100% - 16px, 1500px);
        margin-top: 8px;
    }

    .settings-page .hero-link-grid {
        grid-template-columns: 1fr;
    }

    .settings-page .hero-link-card {
        min-height: 0;
    }
}

@media (max-width: 620px) {
    body.product-page.landing-page .public-nav {
        min-height: 64px;
        padding: 8px 10px;
    }

    body.product-page.dashboard-page .topbar,
    body.product-page.settings-page .navbar,
    body.product-page.twitch-page .navbar {
        padding: 6px 10px;
    }

    body.product-page .app-context-bar {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        min-height: 0;
    }

    body.product-page .app-context-bar__controls {
        grid-template-columns: 1fr;
    }

    body.product-page .app-context-bar .server-context-select {
        display: block;
        min-width: 0;
        max-width: none;
    }

    body.product-page .app-context-bar--dashboard .btn {
        justify-content: center;
        width: 100%;
    }

    .dashboard-page .section-card,
    .dashboard-page .section-card.hero,
    .settings-page .hero-panel,
    .twitch-page .page-hero,
    .settings-page .section,
    .twitch-page .section {
        padding: 20px;
    }

    .dashboard-page .section-card.hero h1,
    .settings-page .hero-panel h1,
    .twitch-page .page-hero h1 {
        font-size: 30px;
    }
}

/* Match the production React server-settings chrome exactly. */
body.product-page.dashboard-page .topbar,
body.product-page.settings-page .navbar,
body.product-page.twitch-page .navbar,
body.product-page.landing-page .public-nav {
    position: relative !important;
    top: auto !important;
    z-index: auto;
    width: min(1500px, calc(100% - 32px));
    min-height: 0;
    margin: 24px auto;
    padding: 16px;
    border: 1px solid var(--ui-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
    box-shadow: var(--ui-shadow);
    backdrop-filter: none;
}

body.product-page.dashboard-page .topbar-inner,
body.product-page.settings-page .navbar,
body.product-page.twitch-page .navbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body.product-page.landing-page .public-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body.product-page.dashboard-page .topbar-inner {
    width: 100%;
    min-height: 36px;
    padding: 0;
}

body.product-page.dashboard-page .topbar-nav,
body.product-page.settings-page .navbar-menu,
body.product-page.twitch-page .navbar-menu {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

body.product-page.dashboard-page .topbar-nav .nav-group {
    display: contents;
}

body.product-page.dashboard-page .topbar-nav .nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.product-page .nav-link-icon {
    display: none !important;
}

body.product-page .nav-link,
body.product-page .navbar-link {
    min-height: 0;
    padding: 10px 12px;
    border: 0 !important;
    border-radius: 6px;
    color: var(--ui-muted);
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 700;
}

body.product-page .nav-link:hover,
body.product-page .nav-link:focus-visible,
body.product-page .nav-link.active,
body.product-page .navbar-link:hover,
body.product-page .navbar-link:focus-visible,
body.product-page .navbar-link.active {
    color: var(--ui-text);
    background: color-mix(in srgb, var(--ui-primary) 14%, transparent) !important;
    box-shadow: none !important;
    transform: none;
}

body.product-page .theme-toggle,
body.product-page .app-context-bar .btn {
    min-height: 40px;
    border-radius: 12px;
    padding: 0 16px;
}

body.product-page .theme-toggle {
    border-color: color-mix(in srgb, var(--ui-primary) 46%, var(--ui-border));
    color: var(--ui-text);
    background: transparent !important;
}

body.product-page .app-context-bar {
    gap: 24px;
    width: min(1500px, calc(100% - 32px));
    min-height: 0;
    margin: 0 auto 16px;
    padding: 16px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

body.product-page .app-context-bar__copy {
    min-width: 180px;
}

body.product-page .app-context-bar__controls {
    grid-template-columns: auto minmax(220px, 360px) auto;
    margin-left: auto;
}

body.product-page .app-context-bar .server-context-select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 10px 12px;
    border-color: var(--ui-border) !important;
    border-radius: 6px !important;
    background: var(--ui-surface-2) !important;
    color: var(--ui-text) !important;
}

.dashboard-page .container,
.settings-page .container,
.twitch-page .container {
    padding: 0 0 48px;
}

@media (max-width: 820px) {
    body.product-page.dashboard-page .topbar,
    body.product-page.settings-page .navbar,
    body.product-page.twitch-page .navbar,
    body.product-page.landing-page .public-nav {
        width: min(100% - 16px, 1500px);
        margin: 8px auto 16px;
    }

    body.product-page .app-context-bar {
        width: min(100% - 16px, 1500px);
        margin: 0 auto 16px;
    }

    body.product-page.dashboard-page .topbar-nav,
    body.product-page.settings-page .navbar-menu,
    body.product-page.twitch-page .navbar-menu {
        order: 0;
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    body.product-page.dashboard-page .topbar,
    body.product-page.settings-page .navbar,
    body.product-page.twitch-page .navbar,
    body.product-page.landing-page .public-nav {
        padding: 10px;
    }

    body.product-page .app-context-bar__controls {
        grid-template-columns: 1fr;
        margin-left: 0;
    }

    body.product-page .theme-toggle {
        padding: 0 12px;
    }

    body.product-page .account-name {
        display: none;
    }
}