/* WVARC NCO Logger application shell */

:root {
    --app-bg: #0d1216;
    --app-surface: #171e24;
    --app-surface-raised: #202930;
    --app-border: rgba(116, 198, 212, 0.22);
    --app-border-strong: rgba(116, 198, 212, 0.48);
    --app-text: #f4f5f2;
    --app-muted: #9ba9b2;
    --app-cyan: #74c6d4;
    --app-orange: #dc8335;
    --app-heading: var(--app-text);
    --app-link: var(--app-cyan);
    --app-link-hover: #a0e1ea;
    --app-focus-ring: rgba(116, 198, 212, 0.55);
    --app-page-background:
        radial-gradient(circle at 12% 8%, rgba(116, 198, 212, 0.1), transparent 28rem),
        radial-gradient(circle at 88% 18%, rgba(220, 131, 53, 0.08), transparent 24rem),
        var(--app-bg);
    --app-panel-background: linear-gradient(150deg, rgba(11, 29, 41, 0.96), rgba(5, 15, 23, 0.99));
    --app-panel-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2);
    --app-control-bg: #0d1317;
    --app-control-border: rgba(155, 169, 178, 0.35);
    --app-control-placeholder: #71808a;
    --app-control-disabled-bg: #101a21;
    --app-control-disabled-text: #8e9da4;
    --app-faint: #84949b;
    --app-subtle-text: #bdc8cc;
    --app-card-border: rgba(155, 169, 178, 0.48);
    --app-divider: rgba(155, 169, 178, 0.32);
    --app-divider-soft: rgba(155, 169, 178, 0.16);
    --app-status-bg: rgba(26, 39, 48, 0.34);
    --app-status-accent: #00c8f0;
    --app-interactive-border: rgba(0, 200, 240, 0.58);
    --app-interactive-outline: rgba(0, 200, 240, 0.16);
    --app-subtle-bg: rgba(116, 198, 212, 0.06);
    --app-orange-text: var(--app-orange);
    --app-danger-text: #ffaaa0;
    --app-danger-bg: rgba(220, 84, 69, 0.08);
    --app-danger-border: rgba(220, 84, 69, 0.46);
    --app-live-text: #eaffef;
    --app-live-bg: rgba(32, 128, 66, 0.72);
    --app-live-border: rgba(67, 209, 122, 0.5);
    --app-live-accent: #43d17a;
    --app-card-hover: rgba(0, 191, 232, 0.07);
    --app-dashboard-hero-overlay:
        linear-gradient(90deg, rgba(3, 11, 18, 0.94) 0%, rgba(3, 11, 18, 0.82) 28%, rgba(3, 11, 18, 0.18) 58%, rgba(3, 11, 18, 0.05) 100%),
        linear-gradient(0deg, rgba(3, 11, 18, 0.28), transparent 45%);
    --app-dashboard-hero-overlay-mobile:
        linear-gradient(90deg, rgba(3, 11, 18, 0.96), rgba(3, 11, 18, 0.72) 58%, rgba(3, 11, 18, 0.22)),
        linear-gradient(0deg, rgba(3, 11, 18, 0.52), transparent 60%);
    --app-dashboard-hero-copy: #f0f2f3;
    --app-dashboard-hero-title-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.5);
    --app-dashboard-hero-copy-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.7);
    --app-dashboard-hero-secondary-bg: rgba(3, 13, 21, 0.78);
    --app-dashboard-hero-secondary-border: #00bfe8;
    --app-dashboard-hero-image: url('/img/nco-logger-hero-panorama.png');
}

/* Select the dashboard artwork from the viewer's local time, independently of Appearance. */
:root[data-hero-period='day'] {
    --app-dashboard-hero-image: url('/img/nco-logger-hero-phoenix-day-final.png');
}

:root[data-hero-period='night'] {
    --app-dashboard-hero-image: url('/img/nco-logger-hero-phoenix-night-final.png');
}

.app-page {
    min-height: 100vh;
    color: var(--app-text);
    background: var(--app-page-background);
}

.app-page a:focus-visible,
.app-page button:focus-visible,
.app-page input:focus-visible {
    outline: 3px solid var(--app-focus-ring);
    outline-offset: 3px;
}

.app-navbar {
    min-height: 4.75rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--app-border);
    background: #050d14 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(14px);
}

.app-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    margin-right: clamp(.85rem, 1.4vw, 1.35rem);
    padding: 0;
}

.app-navbar-brand {
    width: clamp(13.5rem, 17vw, 15.5rem);
}

.app-brand-logo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 4.75rem;
    object-fit: contain;
    object-position: left center;
}

.app-theme-logo-light {
    display: none !important;
}

:root[data-theme='light'] .app-theme-logo-dark {
    display: none !important;
}

:root[data-theme='light'] .app-theme-logo-light {
    display: block !important;
}

/* Balance the measured alpha bounds and align their centers without changing the layout box. */
:root[data-theme='light'] .app-navbar .app-theme-logo-light {
    transform: translate(0.04923%, 4.87357%) scale(1.06923);
    transform-origin: center center;
}

/* The landing logo uses a fixed-height box, so its equivalent measured y-offset differs slightly. */
:root[data-theme='light'] .app-navbar .landing-brand-logo.app-theme-logo-light {
    transform: translate(0.04923%, 4.8228%) scale(1.06923);
}

/* Footer variants share a canvas; align their measured painted bounds independently. */
:root[data-theme='light'] .landing-footer .app-theme-logo-light {
    transform: translate(0.41456%, 1.05528%) scale(1.00425);
    transform-origin: center center;
}

.app-navbar .nav-link {
    position: relative;
    padding: 0.65rem 0.85rem !important;
    color: #f4f5f2 !important;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    text-decoration: none;
    white-space: nowrap;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus-visible {
    color: #00c8f0 !important;
}

.app-navbar:not(.landing-navbar) :is(.navbar-brand, .nav-link, .navbar-toggler):focus-visible {
    border-radius: 0.35rem;
    outline: 2px solid #00c8f0;
    outline-offset: 2px;
}

.app-navbar .app-nav-sign-in {
    margin-left: 0.5rem;
    padding-inline: 1rem !important;
    color: #11181c !important;
    border-radius: 0.45rem;
    background: var(--app-cyan);
}

.app-navbar .app-nav-sign-in:hover,
.app-navbar .app-nav-sign-in:focus-visible {
    color: #11181c !important;
    background: #96d9e3;
}

.app-main {
    min-height: calc(100vh - 12rem);
}

.landing-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid var(--app-border);
}

.landing-hero::after {
    position: absolute;
    right: -8rem;
    bottom: -11rem;
    width: 32rem;
    height: 32rem;
    border: 1px solid rgba(116, 198, 212, 0.13);
    border-radius: 50%;
    box-shadow:
        0 0 0 3rem rgba(116, 198, 212, 0.035),
        0 0 0 7rem rgba(116, 198, 212, 0.025);
    content: '';
    pointer-events: none;
}

.landing-kicker {
    display: inline-flex;
    gap: 0.55rem;
    align-items: center;
    max-width: 100%;
    margin-bottom: 1.25rem;
    color: var(--app-cyan);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    line-height: 1.5;
    text-wrap: balance;
    text-transform: uppercase;
}

.landing-kicker::before {
    flex: 0 0 1.8rem;
    width: 1.8rem;
    height: 1px;
    background: currentColor;
    content: '';
}

.landing-title {
    max-width: 15ch;
    margin-bottom: 1.25rem;
    color: var(--app-text);
    font-size: clamp(2.45rem, 6vw, 4.75rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.landing-title-phrase {
    white-space: nowrap;
}

.landing-title-run {
    color: var(--app-text);
}

.landing-title-find {
    color: var(--app-cyan);
}

.landing-title-join {
    color: var(--app-orange);
}

.landing-copy {
    max-width: 42rem;
    margin-bottom: 2rem;
    color: var(--app-muted);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.65;
    text-wrap: pretty;
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.app-button {
    display: inline-flex;
    gap: 0.55rem;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.7rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        transform 120ms ease,
        border-color 120ms ease,
        background-color 120ms ease;
}

.app-button:hover {
    transform: translateY(-1px);
}

.app-button-primary {
    color: #11181c;
    background: var(--app-orange);
}

.app-button-primary:hover {
    color: #11181c;
    background: #e39958;
}

.app-button-secondary {
    color: var(--app-text);
    border-color: var(--app-border-strong);
    background: rgba(116, 198, 212, 0.07);
}

.app-button-secondary:hover {
    color: var(--app-cyan);
    border-color: var(--app-cyan);
    background: rgba(116, 198, 212, 0.12);
}

.landing-logo-panel {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 19rem;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 2vw, 1.25rem);
    border: 1px solid var(--app-border);
    border-radius: 1.15rem;
    background: linear-gradient(145deg, rgba(32, 41, 48, 0.96), rgba(18, 25, 30, 0.88));
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.28);
}

.landing-logo {
    width: 118%;
    max-width: 46rem;
    max-height: 14rem;
    object-fit: contain;
}

.scheduled-nets-section {
    scroll-margin-top: 5rem;
    padding: clamp(3rem, 6vw, 5rem) 0;
    border-bottom: 1px solid var(--app-border);
}

.scheduled-net-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.scheduled-net-group {
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--app-border);
    border-radius: 0.85rem;
    background: rgba(23, 30, 36, 0.68);
}

.scheduled-net-group-heading {
    margin-bottom: 1rem;
}

.scheduled-net-group-heading h3 {
    margin: 0 0 0.25rem;
    color: var(--app-text);
    font-size: 1.25rem;
    font-weight: 600;
}

.scheduled-net-group-heading p {
    margin: 0;
    color: var(--app-muted);
    font-size: 0.88rem;
}

.scheduled-net-list {
    display: grid;
    gap: 0.8rem;
}

.scheduled-nets-empty {
    min-height: 10rem;
    display: grid;
    align-content: center;
    padding: 2rem 1rem;
}

.scheduled-net-card {
    grid-template-columns: minmax(0, 1fr) auto;
}

.scheduled-net-card [hidden] {
    display: none !important;
}

.scheduled-net-card-content {
    display: grid;
    min-width: 0;
    gap: 0.85rem;
}

.scheduled-net-card-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
}

.scheduled-net-card-image-slot {
    width: 4rem;
    height: 4rem;
}

.scheduled-net-card-image-slot img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0.55rem;
    object-fit: contain;
}

.scheduled-net-card-heading {
    min-width: 0;
}

.scheduled-net-card-title {
    margin: 0;
    color: var(--app-text);
    font-size: 1.08rem;
}

.scheduled-net-card-title,
.scheduled-net-card-description,
.scheduled-net-card-when,
.scheduled-net-connections dt,
.scheduled-net-connections dd {
    overflow-wrap: anywhere;
}

.scheduled-net-card-title a {
    color: var(--app-text);
    text-decoration: none;
}

.scheduled-net-card-title a:hover {
    color: var(--app-cyan);
}

.scheduled-net-card-when,
.scheduled-net-connections {
    color: var(--app-muted);
    font-size: 0.88rem;
}

.scheduled-net-card-when {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    margin-top: 0.25rem;
}

.scheduled-net-card-description,
.scheduled-net-connections {
    margin: 0;
}

.scheduled-net-connections {
    display: grid;
    grid-template-columns: minmax(6rem, 0.45fr) minmax(0, 1fr);
    gap: 0.35rem 0.75rem;
}

.scheduled-net-connections dt {
    color: var(--app-cyan);
    font-weight: 600;
}

.scheduled-net-connections dd {
    min-width: 0;
    margin: 0;
}

.scheduled-net-card-actions {
    align-self: start;
}

.nets-section {
    padding: clamp(3rem, 6vw, 5rem) 0 5rem;
}

.section-heading {
    display: flex;
    gap: 1.5rem;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.section-eyebrow {
    margin-bottom: 0.35rem;
    color: var(--app-orange);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section-title {
    margin: 0;
    color: var(--app-text);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.section-note {
    margin: 0;
    color: var(--app-muted);
    font-size: 0.9rem;
}

.nets-list {
    display: grid;
    gap: 0.8rem;
}

.net-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 2rem;
    align-items: center;
    margin: 0 !important;
    padding: 1.2rem 1.35rem !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 0.7rem !important;
    color: var(--app-muted);
    background: rgba(23, 30, 36, 0.9) !important;
    transition:
        border-color 140ms ease,
        background-color 140ms ease,
        transform 140ms ease;
}

.net-card:hover {
    border-color: var(--app-border-strong) !important;
    background: var(--app-surface-raised) !important;
    transform: translateY(-1px);
}

.net-card-main {
    display: flex;
    min-width: 0;
    gap: 0.75rem;
    align-items: center;
}

.net-card-link {
    display: inline-flex;
    min-width: 0;
    gap: 0.8rem;
    align-items: center;
    color: var(--app-text) !important;
    font-size: 1.08rem;
    font-weight: 600;
    text-decoration: none;
}

.net-card-link:hover {
    color: var(--app-cyan) !important;
}

.net-card-link #title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.net-card-meta {
    display: flex;
    gap: 1.5rem;
    justify-content: end;
    color: var(--app-muted);
    font-size: 0.9rem;
}

.nets-state {
    padding: 3rem 1.5rem;
    border: 1px dashed var(--app-border-strong);
    border-radius: 0.7rem;
    color: var(--app-muted);
    text-align: center;
    background: rgba(23, 30, 36, 0.55);
}

.nets-state i {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--app-cyan);
    font-size: 1.5rem;
}

.login-main {
    display: grid;
    min-height: calc(100vh - 10rem);
    place-items: center;
    padding: 3rem 0;
}

.login-page {
    background:
        radial-gradient(circle at 16% 12%, rgba(0, 200, 240, 0.12), transparent 30rem),
        radial-gradient(circle at 88% 28%, rgba(255, 133, 0, 0.06), transparent 25rem),
        linear-gradient(155deg, #071522 0%, #030a11 62%, #06111b 100%);
}

.login-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 0.65fr);
    overflow: hidden;
    width: min(100%, 68rem);
    border: 1px solid rgba(0, 200, 240, 0.32);
    border-radius: 1rem;
    background: #07131e;
    box-shadow:
        0 30px 75px rgba(0, 0, 0, 0.48),
        0 0 2.5rem rgba(0, 151, 190, 0.06);
}

.login-intro {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 34rem;
    padding: clamp(2rem, 5vw, 4rem);
    background:
        radial-gradient(circle at 18% 16%, rgba(0, 200, 240, 0.16), transparent 14rem),
        linear-gradient(145deg, #081b2a, #06131f 72%);
}

.login-logo {
    width: 7.25rem;
    max-width: 42vw;
    max-height: 7rem;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 0 1rem rgba(0, 200, 240, 0.13));
}

.login-page .landing-kicker {
    color: #00c8f0;
}

.login-page .landing-kicker::before {
    background: #00c8f0;
}

.login-intro h1 {
    max-width: 11ch;
    margin: 2.5rem 0 1rem;
    color: var(--app-text);
    font-size: clamp(2.2rem, 5vw, 3.7rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
}

.login-intro p {
    max-width: 34rem;
    margin: 0;
    color: #c1cbd0;
    line-height: 1.65;
}

.login-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    border-left: 1px solid rgba(92, 130, 145, 0.28);
    background: #07111a;
}

.login-form-panel h2 {
    margin-bottom: 0.5rem;
    color: var(--app-text);
    font-size: 1.75rem;
    font-weight: 600;
}

.login-form-panel > p {
    margin-bottom: 1.75rem;
    color: #b7c3c9;
}

.app-auth-button {
    display: inline-flex;
    width: 100%;
    min-height: 3rem;
    gap: 0.65rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border-strong);
    border-radius: 0.45rem;
    color: var(--app-text);
    font-weight: 600;
    text-decoration: none;
    background: rgba(116, 198, 212, 0.06);
}

.login-page .app-auth-button {
    color: #f4f7f8;
    border-color: rgba(0, 200, 240, 0.42);
    background: rgba(8, 34, 48, 0.72);
}

.login-page .app-auth-button:hover,
.login-page .app-auth-button:focus-visible {
    color: #6fe5f7;
    border-color: #00c8f0;
    background: rgba(10, 48, 65, 0.86);
}

.app-auth-button:hover {
    color: var(--app-cyan);
    border-color: var(--app-cyan);
    background: rgba(116, 198, 212, 0.11);
}

.login-divider {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    margin: 1.4rem 0;
    color: var(--app-muted);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
    height: 1px;
    flex: 1;
    background: var(--app-border);
    content: '';
}

.login-page .login-divider {
    color: #91a2aa;
}

.login-page .login-divider::before,
.login-page .login-divider::after {
    background: rgba(92, 130, 145, 0.38);
}

.app-label {
    margin-bottom: 0.5rem;
    color: #dbe2e5;
    font-size: 0.9rem;
    font-weight: 600;
}

.app-input {
    min-height: 3rem;
    border-color: rgba(155, 169, 178, 0.35);
    color: var(--app-text) !important;
    background: #0d1317 !important;
}

.app-input:focus {
    border-color: var(--app-cyan);
    box-shadow: 0 0 0 0.2rem rgba(116, 198, 212, 0.12);
}

.app-input::placeholder {
    color: #71808a;
}

.login-page .app-label {
    color: #e2e8ea;
}

.login-page .app-input {
    color: #f4f7f8 !important;
    border-color: #294653;
    background: #030b12 !important;
}

.login-page .app-input:focus {
    border-color: #00c8f0;
    box-shadow: 0 0 0 0.2rem rgba(0, 200, 240, 0.14);
}

.login-page .app-input::placeholder {
    color: #788b94;
}

.app-submit {
    width: 100%;
    margin-top: 0.8rem;
    border: 0;
}

/* Contact */
.contact-main {
    background:
        radial-gradient(circle at 16% 8%, rgba(0, 200, 240, 0.07), transparent 30rem),
        linear-gradient(155deg, #071522 0%, #030a11 72%, #06111b 100%);
}

.contact-layout {
    width: min(100%, 56rem);
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.contact-heading {
    margin-bottom: 1.5rem;
}

.contact-heading h1 {
    margin-bottom: 0.65rem;
    color: var(--app-text);
    font-size: clamp(2rem, 5vw, 3.25rem);
    letter-spacing: -0.035em;
}

.contact-heading p {
    max-width: 42rem;
    margin: 0;
    color: var(--app-muted);
    font-size: 1.05rem;
}

.contact-card {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(155, 169, 178, 0.38);
    border-radius: 0.9rem;
    background: linear-gradient(150deg, rgba(11, 29, 41, 0.97), rgba(5, 15, 23, 0.99));
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.26);
}

.contact-card h2 {
    margin-bottom: 1.25rem;
    color: var(--app-text);
}

.contact-support-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    color: var(--app-muted);
    font-size: 1.1rem;
}

.login-page .app-submit {
    color: #fff;
    background: linear-gradient(135deg, #ff971d, #ed6e00);
    box-shadow: 0 0 1.6rem rgba(244, 122, 0, 0.18);
}

.login-page .app-submit:hover,
.login-page .app-submit:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #ffa735, #f47a08);
}

.login-page .app-submit:disabled {
    color: #d7dcde;
    background: #654422;
    box-shadow: none;
}

.app-footer {
    margin: 0 !important;
    padding: 2rem max(1rem, calc((100vw - 1140px) / 2)) !important;
    border-top: 1px solid rgba(116, 198, 212, 0.12);
    color: #71808a;
    background: transparent !important;
}

.app-footer.landing-footer {
    padding: 2.6rem 0 1.2rem !important;
    color: #d3d8da;
    background: #050d14 !important;
}

@media (max-width: 991.98px) {
    .app-navbar .navbar-collapse {
        padding-top: 0;
    }

    .app-navbar .app-nav-sign-in {
        display: inline-block;
        margin: 0.4rem 0 0;
    }

    .landing-logo-panel {
        min-height: 14rem;
        margin-top: 2.5rem;
    }

    .scheduled-net-groups {
        grid-template-columns: 1fr;
    }

    .login-layout {
        grid-template-columns: 1fr;
        max-width: 36rem;
    }

    .login-intro {
        min-height: auto;
    }

    .login-form-panel {
        border-top: 1px solid rgba(92, 130, 145, 0.28);
        border-left: 0;
    }

    .login-intro h1 {
        margin-top: 2rem;
    }
}

.app-mobile-drawer-header {
    display: none;
}

.app-mobile-nav-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    body.app-mobile-nav-open {
        position: fixed;
        right: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
    }

    .app-navbar {
        backdrop-filter: none;
    }

    .app-navbar .app-mobile-drawer {
        position: fixed;
        z-index: 1052;
        top: 0;
        right: 0;
        bottom: auto;
        display: flex;
        width: min(84vw, 20rem);
        max-width: calc(100vw - max(1rem, env(safe-area-inset-left)));
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        flex-direction: column;
        padding: max(.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) 1rem;
        overflow-x: hidden;
        overflow-y: auto;
        color: var(--app-text);
        background: rgba(8, 18, 25, .985);
        border-left: 1px solid var(--app-border-strong);
        box-shadow: -1rem 0 2.5rem rgba(0, 0, 0, .32);
        visibility: hidden;
        pointer-events: none;
        transform: translateX(100%);
        transition: transform .18s ease, visibility 0s linear .18s;
    }

    .app-navbar .app-mobile-drawer.is-open {
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
        transition: transform .18s ease;
    }

    .app-mobile-drawer-header {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        min-height: 2.75rem;
        padding: 0 0 .75rem .65rem;
        color: var(--app-muted);
        border-bottom: 1px solid var(--app-border);
        font-size: .76rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    .app-mobile-drawer-close {
        display: inline-grid;
        width: 2.75rem;
        height: 2.75rem;
        place-items: center;
        padding: 0;
        color: var(--app-text);
        border: 1px solid var(--app-border);
        border-radius: 50%;
        background: var(--app-subtle-bg);
        font-size: 1.1rem;
    }

    .app-navbar .app-mobile-drawer .navbar-nav {
        width: 100%;
        min-height: 0;
        flex: 1 1 auto;
        align-items: stretch;
        padding-top: .65rem;
    }

    .app-navbar .app-mobile-drawer .nav-link {
        width: 100%;
        padding: .72rem .65rem !important;
        text-align: left;
    }

    .app-navbar .app-mobile-drawer .app-nav-sign-in {
        display: inline-flex;
        width: auto;
    }

    .app-navbar .app-mobile-drawer .app-theme-item {
        margin-top: auto;
        padding-top: .85rem;
        border-top: 1px solid var(--app-border);
    }

    .app-mobile-nav-backdrop {
        position: fixed;
        z-index: 1051;
        inset: 0;
        display: block;
        background: rgba(0, 6, 10, .58);
        opacity: 0;
        transition: opacity .18s ease;
    }

    .app-mobile-nav-backdrop.is-open {
        opacity: 1;
    }

    :root[data-theme='light'] body.app-page .app-navbar .app-mobile-drawer {
        color: #14242d;
        border-left-color: rgba(27, 81, 96, .32);
        background: rgba(247, 250, 251, .99);
        box-shadow: -1rem 0 2.5rem rgba(18, 45, 57, .22);
    }

    :root[data-theme='light'] body.app-page .app-mobile-drawer-close {
        color: #14242d;
        border-color: rgba(27, 81, 96, .3);
        background: rgba(8, 117, 144, .07);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-navbar .app-mobile-drawer,
    .app-mobile-nav-backdrop {
        transition: none;
    }
}

/* Feedback for an explicitly added structured connection. */
.connection-card {
    scroll-margin-block: 20vh;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.connection-card.is-newly-created {
    border-color: rgba(116, 198, 212, .92);
    background: rgba(21, 69, 79, .72);
    box-shadow: 0 0 0 3px rgba(116, 198, 212, .16), 0 .7rem 1.8rem rgba(0, 0, 0, .18);
}

:root[data-theme='light'] .connection-card.is-newly-created {
    border-color: rgba(5, 107, 133, .8);
    background: rgba(8, 117, 144, .11);
    box-shadow: 0 0 0 3px rgba(8, 117, 144, .12), 0 .7rem 1.8rem rgba(18, 45, 57, .12);
}

@media (prefers-reduced-motion: reduce) {
    .connection-card {
        scroll-behavior: auto;
        transition: none;
    }
}

@media (max-width: 575.98px) {
    .landing-kicker {
        gap: 0.45rem;
        font-size: 0.7rem;
        letter-spacing: 0.12em;
    }

    .landing-kicker::before {
        flex-basis: 1.35rem;
        width: 1.35rem;
    }

    .app-navbar-brand {
        width: 12rem;
    }

    .app-brand-logo {
        height: 3.4rem;
    }

    .section-heading,
    .net-card,
    .net-card-meta {
        align-items: start;
    }

    .net-card {
        grid-template-columns: 1fr;
    }

    .scheduled-net-group {
        padding: 1rem;
    }

    .scheduled-net-card-header {
        align-items: start;
    }

    .scheduled-net-card-image-slot {
        width: 3.5rem;
        height: 3.5rem;
    }

    .scheduled-net-connections {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .section-heading {
        display: grid;
        gap: 0.6rem;
    }

    .net-card-meta {
        justify-content: start;
    }

    .login-main {
        padding: 1.25rem 0;
    }

    .login-layout {
        border-radius: 0.75rem;
    }
}

/* User guide */
.guide-main {
    padding-bottom: 5rem;
    background:
        radial-gradient(circle at 14% 8%, rgba(0, 200, 240, 0.065), transparent 32rem),
        radial-gradient(circle at 88% 20%, rgba(255, 133, 0, 0.035), transparent 26rem),
        linear-gradient(155deg, #071522 0%, #030a11 68%, #06111b 100%);
}

.guide-hero {
    padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(2.25rem, 5vw, 3.75rem);
    border-bottom: 1px solid var(--app-border);
    background:
        radial-gradient(circle at 84% 28%, rgba(116, 198, 212, 0.09), transparent 23rem),
        linear-gradient(110deg, rgba(220, 131, 53, 0.05), transparent 58%);
}

.guide-workspace {
    padding-top: clamp(2rem, 5vw, 4rem);
}

.guide-grid {
    display: grid;
    grid-template-columns: minmax(14.5rem, 0.52fr) minmax(0, 1.48fr);
    gap: 1.25rem;
    align-items: start;
}

.guide-contents {
    position: sticky;
    top: 1.25rem;
    padding: 1.5rem;
}

.guide-main :is(.guide-contents, .guide-content) {
    border-color: rgba(155, 169, 178, 0.38);
    background: linear-gradient(150deg, rgba(11, 29, 41, 0.96), rgba(5, 15, 23, 0.99));
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.26);
}

.guide-contents h2 {
    margin: 0 0 1rem;
    color: var(--app-text);
    font-size: 1.3rem;
    font-weight: 600;
}

.guide-contents-list {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-contents-list a {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.6rem;
    align-items: center;
    min-height: 2.55rem;
    padding: 0.48rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    color: var(--app-muted);
    font-size: 0.8rem;
    line-height: 1.3;
    text-decoration: none;
}

.guide-contents-list a span {
    color: var(--app-cyan);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.guide-contents-list a:hover,
.guide-contents-list a:focus-visible {
    color: var(--app-text);
    border-color: var(--app-border);
    background: rgba(116, 198, 212, 0.06);
}

.guide-content {
    padding: clamp(1.4rem, 4vw, 3rem);
}

.guide-section {
    padding: 0 0 clamp(2.8rem, 6vw, 4.5rem);
    scroll-margin-top: 1.25rem;
}

.guide-section + .guide-section {
    padding-top: clamp(2.8rem, 6vw, 4.5rem);
    border-top: 1px solid var(--app-border);
}

.guide-section:last-child {
    padding-bottom: 0;
}

.guide-section-label {
    margin-bottom: 0.55rem;
    color: var(--app-orange);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.guide-section h2 {
    margin: 0 0 1.35rem;
    color: var(--app-text);
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.guide-section h3 {
    margin: 2rem 0 0.7rem;
    color: var(--app-cyan);
    font-size: 1.05rem;
    font-weight: 600;
}

.guide-section p,
.guide-section li {
    color: #b5c0c6;
    line-height: 1.72;
}

.guide-section p {
    margin-bottom: 1rem;
}

.guide-section ul,
.guide-section ol {
    display: grid;
    gap: 0.45rem;
    margin: 0.75rem 0 1.25rem;
    padding-left: 1.4rem;
}

.guide-section li::marker {
    color: var(--app-orange);
}

.guide-section strong {
    color: #eef1ee;
    font-weight: 600;
}

.guide-section a {
    color: var(--app-cyan);
    text-decoration-color: rgba(116, 198, 212, 0.45);
    text-underline-offset: 0.18em;
}

.guide-section a:hover {
    color: #a0e1ea;
    text-decoration-color: currentColor;
}

.guide-section code {
    padding: 0.12rem 0.34rem;
    border: 1px solid rgba(116, 198, 212, 0.13);
    border-radius: 0.25rem;
    color: #d4a9ef;
    background: rgba(13, 18, 22, 0.75);
}

.guide-table-wrap {
    overflow-x: auto;
    margin: 1rem 0 1.5rem;
    border: 1px solid var(--app-border);
    border-radius: 0.6rem;
}

.guide-table {
    width: 100%;
    min-width: 36rem;
    margin: 0;
    border-collapse: collapse;
    color: #b5c0c6;
    background: #08141e;
}

.guide-table th,
.guide-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(155, 169, 178, 0.13);
    text-align: left;
    vertical-align: top;
}

.guide-table th {
    color: var(--app-cyan);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(116, 198, 212, 0.07);
}

.guide-table td:first-child {
    width: 35%;
}

.guide-table tr:last-child td {
    border-bottom: 0;
}

.guide-table tbody tr:hover {
    background: rgba(116, 198, 212, 0.035);
}

.guide-code {
    overflow-x: auto;
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--app-border);
    border-left: 3px solid var(--app-orange);
    border-radius: 0.45rem;
    color: var(--app-text);
    background: #06111a;
}

.guide-code code {
    padding: 0;
    border: 0;
    color: var(--app-text);
    background: transparent;
}

@media (max-width: 991.98px) {
    .guide-grid {
        grid-template-columns: 1fr;
    }

    .guide-contents {
        position: static;
    }

    .guide-contents-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .guide-contents-list {
        grid-template-columns: 1fr;
    }

    .guide-content {
        padding: 1.2rem;
    }

    .guide-code {
        overflow-x: visible;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .guide-table-wrap {
        overflow-x: visible;
        border: 0;
        border-radius: 0;
    }

    .guide-table {
        display: block;
        width: 100%;
        min-width: 0;
        background: transparent;
    }

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

    .guide-table tbody,
    .guide-table tr,
    .guide-table td {
        display: block;
        width: 100%;
    }

    .guide-table tr {
        margin-bottom: 0.75rem;
        border: 1px solid var(--app-border);
        border-radius: 0.55rem;
        overflow: hidden;
        background: #08141e;
    }

    .guide-table td {
        padding: 0.75rem;
        border-bottom: 0;
    }

    .guide-table td:first-child {
        border-bottom: 1px solid rgba(155, 169, 178, 0.13);
        color: var(--app-cyan);
        background: rgba(116, 198, 212, 0.07);
    }
}

/* Favorites */
.favorites-page {
    background:
        radial-gradient(circle at 14% 8%, rgba(0, 200, 240, 0.1), transparent 32rem),
        radial-gradient(circle at 88% 20%, rgba(255, 133, 0, 0.045), transparent 26rem),
        linear-gradient(155deg, #071522 0%, #030a11 68%, #06111b 100%);
}

.favorites-main {
    min-height: calc(100vh - 12rem);
    padding-bottom: 5rem;
}

.favorites-hero {
    padding: clamp(1.75rem, 3.6vw, 3rem) 0 clamp(1.4rem, 3vw, 2.25rem);
    border-bottom: 1px solid rgba(0, 200, 240, 0.2);
    background:
        radial-gradient(circle at 20% 25%, rgba(0, 200, 240, 0.1), transparent 28rem),
        linear-gradient(110deg, rgba(8, 31, 47, 0.82), rgba(4, 13, 21, 0.34) 62%, transparent);
}

.favorites-hero .container {
    position: relative;
}

.favorites-workspace {
    min-height: 22rem;
    padding-top: clamp(2rem, 5vw, 4rem);
}

.favorites-workspace hl-favlist {
    display: block;
}

/* Waiting for net */
.waiting-main {
    padding-bottom: 5rem;
}

.waiting-workspace {
    max-width: 58rem;
    padding-top: clamp(2rem, 5vw, 4rem);
}

.waiting-status-card {
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid rgba(155, 169, 178, 0.48);
    border-radius: 0.75rem;
    background: linear-gradient(150deg, rgba(11, 29, 41, 0.92), rgba(5, 15, 23, 0.98));
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.18);
}

.waiting-card-heading {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
}

.waiting-off-air {
    display: inline-block;
    margin-bottom: 0.7rem;
    padding: 0.25rem 0.55rem;
    color: #bdc8cc;
    border: 1px solid rgba(155, 169, 178, 0.32);
    border-radius: 0.35rem;
    background: rgba(155, 169, 178, 0.08);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.waiting-card-heading h2 {
    margin: 0;
    color: var(--app-text);
    font-size: clamp(1.45rem, 3vw, 1.9rem);
    font-weight: 650;
    overflow-wrap: anywhere;
}

.waiting-favorite .favicon {
    display: inline-grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    padding: 0;
    color: #84949b;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 1.35rem;
}

.waiting-favorite .favicon:hover,
.waiting-favorite .favicon:focus-visible,
.waiting-favorite .bi-heart-fill {
    color: #ff8500;
}

.waiting-favorite .favicon:hover,
.waiting-favorite .favicon:focus-visible {
    background: rgba(255, 133, 0, 0.1);
}

.waiting-connection {
    margin-top: 1rem;
}

.waiting-connection p {
    margin: 0;
    color: #d6dde0;
    font-size: 1rem;
}

#netConnectionLines {
    display: grid;
    gap: 0.25rem;
}

.waiting-message {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(155, 169, 178, 0.22);
}

.waiting-message h3 {
    margin: 0 0 0.35rem;
    color: var(--app-text);
    font-size: 1.05rem;
    font-weight: 650;
}

.waiting-message p {
    margin: 0;
    color: var(--app-muted);
    line-height: 1.55;
}

.waiting-activity {
    display: flex;
    gap: 0.28rem;
    align-items: center;
    min-width: 2.8rem;
}

.waiting-activity span {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: var(--app-cyan);
    animation: waiting-pulse 1.35s ease-in-out infinite;
}

.waiting-activity span:nth-child(2) {
    animation-delay: 0.16s;
}

.waiting-activity span:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes waiting-pulse {
    0%,
    70%,
    100% {
        opacity: 0.28;
        transform: translateY(0);
    }

    35% {
        opacity: 1;
        transform: translateY(-0.18rem);
    }
}

/* Data privacy */
.privacy-main {
    min-height: calc(100vh - 12rem);
    padding-bottom: 5rem;
}

.privacy-workspace {
    display: grid;
    gap: 1.25rem;
    padding-top: clamp(2rem, 5vw, 4rem);
}

.privacy-preferences-card,
.privacy-danger-card {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(155, 169, 178, 0.48);
    border-radius: 0.75rem;
    background: linear-gradient(150deg, rgba(11, 29, 41, 0.92), rgba(5, 15, 23, 0.98));
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.18);
}

.privacy-preferences-card h2,
.privacy-danger-card h2 {
    margin: 0 0 1.25rem;
    color: var(--app-text);
    font-size: 1.45rem;
    font-weight: 650;
}

.privacy-setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    min-height: 5.25rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(155, 169, 178, 0.22);
}

.privacy-setting-row label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 650;
    cursor: pointer;
}

.privacy-setting-row p,
.privacy-danger-card > p,
.app-modal #delete_confirmation p {
    margin: 0;
    color: var(--app-muted);
    line-height: 1.55;
}

.privacy-toggle {
    position: relative;
    width: 3rem;
    height: 1.65rem;
    margin: 0;
    border: 1px solid rgba(155, 169, 178, 0.5);
    border-radius: 999px;
    appearance: none;
    background: #172731;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.privacy-toggle::after {
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: #9ba9b2;
    content: '';
    transition: transform 140ms ease, background 140ms ease;
}

.privacy-toggle:checked {
    border-color: rgba(0, 200, 240, 0.72);
    background: rgba(0, 130, 166, 0.72);
}

.privacy-toggle:checked::after {
    background: #dffaff;
    transform: translateX(1.35rem);
}

.privacy-toggle:focus-visible {
    outline: 3px solid rgba(0, 200, 240, 0.35);
    outline-offset: 3px;
}

.privacy-danger-card {
    border-color: rgba(202, 78, 83, 0.38);
}

.privacy-danger-card > p {
    margin-bottom: 1.25rem;
}

.privacy-danger-button {
    display: inline-flex;
    gap: 0.55rem;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    color: #ffe9e9;
    border: 1px solid rgba(232, 82, 89, 0.72);
    border-radius: 0.45rem;
    background: rgba(137, 35, 42, 0.72);
    font-weight: 700;
}

.privacy-danger-button:hover,
.privacy-danger-button:focus-visible {
    color: #fff;
    border-color: #ff6d73;
    background: rgba(174, 43, 51, 0.88);
}

.privacy-page .app-modal .modal-footer {
    gap: 0.65rem;
}

.privacy-page #delete_output {
    color: var(--app-text);
    line-height: 1.55;
}

@media (max-width: 575.98px) {
    .privacy-setting-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }
}

/* Account settings */
.settings-main {
    padding-bottom: 5rem;
}

.settings-hero {
    padding: clamp(1.75rem, 3.6vw, 3rem) 0 clamp(1.4rem, 3vw, 2.25rem);
    border-bottom: 1px solid rgba(0, 200, 240, 0.2);
    background:
        radial-gradient(circle at 20% 25%, rgba(0, 200, 240, 0.1), transparent 28rem),
        linear-gradient(110deg, rgba(8, 31, 47, 0.82), rgba(4, 13, 21, 0.34) 62%, transparent);
}

.settings-hero .container {
    position: relative;
}

.settings-workspace {
    padding-top: clamp(2rem, 5vw, 4rem);
}

.settings-grid {
    display: grid;
    grid-template-columns: minmax(17rem, 0.7fr) minmax(0, 1.3fr);
    gap: 1.25rem;
    align-items: start;
}

.settings-sidebar,
.settings-form-panel {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.settings-page :is(.settings-sidebar, .settings-form-panel) {
    border: 1px solid rgba(155, 169, 178, 0.48);
    border-radius: 0.75rem;
    background: linear-gradient(150deg, rgba(11, 29, 41, 0.92), rgba(5, 15, 23, 0.98));
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.18);
}

.settings-sidebar {
    position: sticky;
    top: 1.25rem;
}

.settings-sidebar h2 {
    margin: 0 0 0.65rem;
    color: var(--app-text);
    font-size: 1.45rem;
    font-weight: 600;
}

.settings-sidebar p {
    margin: 0;
    color: var(--app-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.settings-navigation {
    display: grid;
    gap: 0.35rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--app-border);
}

.settings-nav-item {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    min-height: 2.7rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    color: var(--app-muted);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
}

.settings-nav-item:hover {
    color: var(--app-cyan);
    border-color: var(--app-border);
    background: rgba(116, 198, 212, 0.05);
}

.settings-nav-item.is-current {
    color: var(--app-text);
    border-color: var(--app-border-strong);
    background: rgba(116, 198, 212, 0.09);
}

.settings-nav-item i {
    color: var(--app-cyan);
}

.settings-policy-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.9rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(155, 169, 178, 0.12);
}

.settings-policy-links a {
    color: var(--app-muted);
    font-size: 0.72rem;
    text-decoration: none;
}

.settings-policy-links a:hover {
    color: var(--app-orange);
}

.settings-form-panel .panel-heading {
    margin-bottom: 0.45rem;
}

.settings-form-panel #userprofile_form_status {
    max-width: 15rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.35rem;
    color: var(--app-cyan) !important;
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: right;
    background: rgba(116, 198, 212, 0.08);
}

.settings-form-panel #userprofile_form_status.text-danger {
    color: #ff708e !important;
    background: rgba(243, 29, 82, 0.08);
}

.settings-form {
    margin-top: 1.75rem;
}

.settings-callsign {
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-input-with-icon {
    position: relative;
}

.settings-input-with-icon > i {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0.9rem;
    color: var(--app-cyan);
    transform: translateY(-50%);
    pointer-events: none;
}

.settings-input-with-icon .app-input {
    padding-left: 2.6rem;
}

.settings-form-note {
    display: flex;
    gap: 0.65rem;
    align-items: start;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(116, 198, 212, 0.16);
    border-radius: 0.5rem;
    color: var(--app-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    background: rgba(116, 198, 212, 0.04);
}

.settings-form-note i {
    flex: 0 0 auto;
    color: var(--app-cyan);
}

.appearance-settings {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--app-border);
}

.appearance-settings h2 {
    margin: 0 0 0.45rem;
    color: var(--app-text);
    font-size: 1.35rem;
}

.appearance-settings > p {
    margin: 0;
    color: var(--app-muted);
    font-size: 0.84rem;
}

.appearance-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 1rem 0 0;
    padding: 0;
    border: 0;
}

.appearance-option {
    display: flex;
    gap: 0.65rem;
    align-items: start;
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    cursor: pointer;
    background: rgba(116, 198, 212, 0.04);
}

.appearance-option:hover,
.appearance-option:focus-within {
    border-color: var(--app-border-strong);
    background: rgba(116, 198, 212, 0.08);
}

.appearance-option input {
    flex: 0 0 auto;
    margin-top: 0.2rem;
    accent-color: var(--app-cyan);
}

.appearance-option span {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.appearance-option strong {
    color: var(--app-text);
    font-size: 0.86rem;
}

.appearance-option small {
    color: var(--app-muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.appearance-current {
    min-height: 1.25rem;
    margin-top: 0.75rem !important;
}

.consent-content {
    color: var(--app-muted);
    line-height: 1.6;
}

.consent-content ul {
    display: grid;
    gap: 0.55rem;
    margin: 1rem 0;
    padding-left: 1.35rem;
}

.consent-content a {
    color: var(--app-cyan);
}

.consent-warning {
    margin: 1.25rem 0 0;
    padding: 0.75rem;
    border-left: 3px solid var(--app-orange);
    color: #e6c6a8;
    font-size: 0.84rem;
    background: rgba(220, 131, 53, 0.08);
}

@media (max-width: 991.98px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-sidebar {
        position: static;
    }

    .settings-navigation {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .settings-navigation {
        grid-template-columns: 1fr;
    }

    .settings-form-panel #userprofile_form_status {
        max-width: 9rem;
    }

    .appearance-options {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-page *,
    .app-page *::before,
    .app-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Net profile manager */
.net-manager-main {
    padding-bottom: 5rem;
}

.net-manager-page {
    background:
        radial-gradient(circle at 14% 8%, rgba(0, 200, 240, 0.1), transparent 32rem),
        radial-gradient(circle at 88% 20%, rgba(255, 133, 0, 0.045), transparent 26rem),
        linear-gradient(155deg, #071522 0%, #030a11 68%, #06111b 100%);
}

.net-manager-hero {
    padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(2.25rem, 5vw, 3.75rem);
    border-bottom: 1px solid var(--app-border);
    background: linear-gradient(110deg, rgba(116, 198, 212, 0.06), transparent 55%);
}

.net-manager-page .net-manager-hero {
    padding: clamp(1.75rem, 3.6vw, 3rem) 0 clamp(1.4rem, 3vw, 2.25rem);
    border-bottom-color: rgba(0, 200, 240, 0.2);
    background:
        radial-gradient(circle at 20% 25%, rgba(0, 200, 240, 0.1), transparent 28rem),
        linear-gradient(110deg, rgba(8, 31, 47, 0.82), rgba(4, 13, 21, 0.34) 62%, transparent);
}

.net-manager-page .net-manager-hero .container {
    position: relative;
}

.net-manager-header-tower,
.settings-header-tower,
.favorites-header-tower {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    width: auto;
    height: 9.25rem;
    opacity: 0.64;
    pointer-events: none;
    transform: translateY(-50%);
}

.workspace-title {
    margin: 0 0 0.8rem;
    color: var(--app-text);
    font-size: clamp(2.5rem, 6vw, 4.6rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.045em;
}

.workspace-copy {
    max-width: 47rem;
    margin: 0;
    color: var(--app-muted);
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.65;
}

.net-manager-workspace {
    padding-top: clamp(2rem, 5vw, 4rem);
}

.net-manager-grid {
    display: grid;
    grid-template-columns: minmax(18rem, 0.78fr) minmax(0, 1.22fr);
    gap: 1.25rem;
    align-items: start;
}

.app-panel {
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 0.85rem;
    background: rgba(23, 30, 36, 0.92);
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.18);
}

.net-manager-page .app-panel {
    border-color: rgba(0, 200, 240, 0.26);
    background: rgba(7, 19, 30, 0.96);
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.32);
}

.net-manager-page :is(.owned-nets-panel, #formContainerNetProfile) {
    border-color: rgba(155, 169, 178, 0.48);
    border-radius: 0.75rem;
    background: linear-gradient(150deg, rgba(11, 29, 41, 0.92), rgba(5, 15, 23, 0.98));
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.18);
}

.owned-nets-panel,
.net-editor-panel {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.owned-nets-panel {
    position: sticky;
    top: 1.25rem;
}

.panel-heading {
    display: flex;
    gap: 1rem;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.panel-heading h2 {
    margin: 0;
    color: var(--app-text);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.panel-count {
    display: inline-grid;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.65rem;
    place-items: center;
    border: 1px solid var(--app-border-strong);
    border-radius: 2rem;
    color: var(--app-cyan);
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(116, 198, 212, 0.08);
}

.panel-help {
    margin: 0 0 1.4rem;
    color: var(--app-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.coowner-list {
    display: grid;
    gap: 0.6rem;
    margin: 1rem 0 1.25rem;
}

.coowner-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: 0.55rem;
    background: rgba(3, 11, 18, 0.72);
}

.coowner-row > span {
    display: grid;
    min-width: 0;
}

.coowner-row strong {
    color: var(--app-text);
}

.coowner-row small,
.coowner-empty {
    color: var(--app-muted);
}

.coowner-empty {
    margin: 0;
}

.panel-loading {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    padding: 1.5rem 0;
    color: var(--app-muted);
    font-size: 0.9rem;
}

.owned-net-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.owned-net-card {
    padding: 1rem;
    border: 1px solid rgba(155, 169, 178, 0.17);
    border-radius: 0.65rem;
    background: #12191e;
    transition:
        border-color 140ms ease,
        transform 140ms ease;
}

.net-manager-page .owned-net-card,
.net-manager-page .app-option-card {
    border-color: rgba(92, 130, 145, 0.3);
    background: #08141e;
}

.net-manager-page .owned-net-card:hover,
.net-manager-page .app-option-card:hover {
    border-color: rgba(0, 200, 240, 0.48);
}

.owned-net-card:hover {
    border-color: var(--app-border-strong);
    transform: translateY(-1px);
}

.owned-net-card.is-live {
    border-color: rgba(220, 131, 53, 0.46);
    background: linear-gradient(135deg, rgba(220, 131, 53, 0.08), #12191e 55%);
}

.owned-net-card.is-preparing {
    border-color: rgba(0, 200, 240, 0.42);
}

.owned-net-heading {
    display: flex;
    gap: 0.8rem;
    align-items: start;
    justify-content: space-between;
}

.owned-net-title-group {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.45rem 0.6rem;
    align-items: center;
}

.owned-net-title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--app-text);
    font-size: 1rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.owned-net-status {
    padding: 0.17rem 0.42rem;
    border-radius: 2rem;
    color: var(--app-muted);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(155, 169, 178, 0.1);
}

.owned-net-status.is-live {
    color: #ffb56f;
    background: rgba(220, 131, 53, 0.14);
}

.owned-net-status.is-preparing {
    color: var(--app-cyan);
    background: rgba(0, 200, 240, 0.11);
}

.owned-net-start {
    display: inline-flex;
    min-height: 2.35rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid #35d07f;
    border-radius: 0.55rem;
    color: #071d12;
    background: #35d07f;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.owned-net-start:hover {
    color: #04150c;
    border-color: #65e7a0;
    background: #65e7a0;
}

.owned-net-start.is-live {
    color: #ffb56f;
    border-color: rgba(220, 131, 53, 0.78);
    background: rgba(220, 131, 53, 0.18);
}

.owned-net-start.is-live:hover {
    color: #11181c;
    background: var(--app-orange);
}

.owned-net-start.is-preparing {
    color: var(--app-cyan);
    border-color: rgba(0, 200, 240, 0.55);
}

.owned-net-start:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.owned-net-details {
    display: grid;
    gap: 0.2rem;
    margin-top: 0.55rem;
    color: var(--app-muted);
    font-size: 0.82rem;
}

.owned-net-schedule {
    display: grid;
    gap: 0.28rem;
    margin-top: 0.65rem;
    padding: 0.55rem 0.65rem;
    border-left: 2px solid rgba(0, 200, 240, 0.48);
    border-radius: 0.3rem;
    color: var(--app-muted);
    background: rgba(0, 200, 240, 0.045);
    font-size: 0.76rem;
}

.owned-net-schedule span {
    display: flex;
    gap: 0.45rem;
    align-items: baseline;
}

.owned-net-schedule strong {
    min-width: 4.2rem;
    color: var(--app-text);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.owned-net-schedule small {
    color: var(--app-muted);
    font-size: 0.68rem;
}

.owned-net-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(155, 169, 178, 0.12);
}

.owned-net-action {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.32rem 0.5rem;
    border: 0;
    border-radius: 0.35rem;
    color: var(--app-muted);
    font-size: 0.75rem;
    background: transparent;
}

.owned-net-action:hover {
    color: var(--app-cyan);
    background: rgba(116, 198, 212, 0.09);
}

.owned-net-action.is-danger:hover {
    color: #ff708e;
    background: rgba(243, 29, 82, 0.09);
}

.owned-nets-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--app-border-strong);
    border-radius: 0.6rem;
    color: var(--app-muted);
    text-align: center;
    background: rgba(116, 198, 212, 0.025);
}

.owned-nets-empty i {
    margin-bottom: 0.8rem;
    color: var(--app-cyan);
    font-size: 1.6rem;
}

.owned-nets-empty strong {
    margin-bottom: 0.25rem;
    color: var(--app-text);
}

.owned-nets-empty span {
    font-size: 0.85rem;
}

.owned-nets-empty.is-error i,
.owned-nets-empty.is-error strong {
    color: #ff708e;
}

.form-status,
.net-editor-panel #netprofile_form_status,
.net-editor-panel #netowner_form_status {
    max-width: 13rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.35rem;
    color: var(--app-cyan) !important;
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: right;
    background: rgba(116, 198, 212, 0.08);
}

.net-editor-panel #netprofile_form_status.text-danger,
.net-editor-panel #netowner_form_status.text-danger {
    color: #ff708e !important;
    background: rgba(243, 29, 82, 0.08);
}

.app-form {
    display: grid;
    gap: 1.15rem;
    margin-top: 1.6rem;
}

.net-manager-page .app-input {
    color: #f4f7f8 !important;
    border-color: #294653;
    background-color: #030b12 !important;
}

.net-manager-page .app-input:focus {
    border-color: #00c8f0;
    box-shadow: 0 0 0 0.2rem rgba(0, 200, 240, 0.14);
}

.net-manager-page .app-input:disabled {
    color: #8e9da4 !important;
    border-color: #223945;
    background-color: #101a21 !important;
    opacity: 0.72;
}

.net-manager-page .app-input::placeholder,
.net-manager-page .app-field > small,
.net-manager-page .app-option-card small {
    color: #91a2aa;
}

.net-manager-page .app-select option {
    color: #f4f7f8;
    background: #07111a;
}

.net-manager-page .app-button-primary {
    color: #fff;
    background: linear-gradient(135deg, #ff971d, #ed6e00);
    box-shadow: 0 0 1.4rem rgba(244, 122, 0, 0.15);
}

.net-manager-page .app-button-primary:hover,
.net-manager-page .app-button-primary:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #ffa735, #f47a08);
}

.net-manager-page .app-button-secondary {
    color: #e2e8ea;
    border-color: rgba(0, 200, 240, 0.4);
    background: rgba(8, 34, 48, 0.66);
}

.net-manager-page .app-button-secondary:hover,
.net-manager-page .app-button-secondary:focus-visible {
    color: #6fe5f7;
    border-color: #00c8f0;
    background: rgba(10, 48, 65, 0.84);
}

.app-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.app-field {
    display: grid;
    gap: 0.42rem;
}

.app-field > label,
.app-options-fieldset > legend {
    margin: 0;
    color: #dfe5e7;
    font-size: 0.88rem;
    font-weight: 600;
}

.app-field > small,
.app-option-card small {
    color: var(--app-muted);
    font-size: 0.76rem;
    font-weight: 400;
    line-height: 1.4;
}

.app-select {
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2374c6d4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}

.app-select option {
    color: var(--app-text);
    background: #12191e;
}

.app-options-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.connections-fieldset {
    display: grid;
    gap: 0.75rem;
}

.connections-heading,
.connection-card-header {
    display: flex;
    gap: 0.8rem;
    align-items: start;
    justify-content: space-between;
}

.connections-heading > div {
    display: grid;
    gap: 0.25rem;
}

.connections-heading small,
.connections-empty {
    margin: 0;
    color: var(--app-muted);
    font-size: 0.78rem;
}

.app-button-compact {
    min-height: 2.35rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.78rem;
}

.connections-list {
    display: grid;
    gap: 0.7rem;
}

.connection-card {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid rgba(92, 130, 145, 0.36);
    border-radius: 0.6rem;
    background: rgba(3, 11, 18, 0.72);
}

.connection-type-field {
    width: min(100%, 15rem);
}

.net-manager-page #input_net_type {
    width: min(100%, 15rem);
}

.connection-card-actions {
    display: flex;
    gap: 0.2rem;
    align-items: center;
    margin-top: 1.6rem;
}

.connection-drag-handle,
.connection-order-button {
    display: inline-grid;
    width: 1.85rem;
    height: 1.85rem;
    place-items: center;
    padding: 0;
    color: var(--app-muted);
    border: 1px solid transparent;
    border-radius: 0.35rem;
    background: transparent;
}

.connection-drag-handle {
    cursor: grab;
    touch-action: none;
}

.connection-drag-handle:active {
    cursor: grabbing;
}

.connection-drag-handle:hover,
.connection-drag-handle:focus-visible,
.connection-order-button:hover:not(:disabled),
.connection-order-button:focus-visible {
    color: var(--app-cyan);
    border-color: var(--app-border);
    background: rgba(116, 198, 212, 0.07);
}

.connection-order-button:disabled {
    opacity: 0.28;
}

.connection-card.is-dragging {
    opacity: 0.55;
    border-color: var(--app-border-strong);
}

.connection-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.connection-remove {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    margin: 0;
    padding: 0.25rem;
    border: 0;
    color: #e09a93;
    font-size: 0.75rem;
    background: transparent;
}

.connection-remove:hover,
.connection-remove:focus-visible {
    color: #ffb1a8;
}

@media (max-width: 575.98px) {
    .connection-card-header {
        flex-wrap: wrap;
    }

    .connection-card-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0;
    }
}

.legacy-connection-notice {
    padding: 0.75rem 0.85rem;
    border-left: 2px solid var(--app-orange);
    border-radius: 0.35rem;
    color: var(--app-muted);
    font-size: 0.82rem;
    background: rgba(220, 131, 53, 0.08);
}

.app-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.55rem;
}

.app-option-card {
    display: flex;
    gap: 0.7rem;
    align-items: start;
    padding: 0.85rem;
    border: 1px solid rgba(155, 169, 178, 0.2);
    border-radius: 0.55rem;
    cursor: pointer;
    background: #12191e;
}

.app-option-card:hover {
    border-color: var(--app-border-strong);
}

.app-option-card .form-check-input {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    border-color: var(--app-border-strong);
    background-color: #0d1317;
}

.app-option-card .form-check-input:checked {
    border-color: var(--app-cyan);
    background-color: var(--app-cyan);
}

.app-option-card span {
    display: grid;
    gap: 0.2rem;
}

.app-option-card strong {
    color: var(--app-text);
    font-size: 0.83rem;
}

.app-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.35rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--app-border);
}

.net-editor-panel .tox-tinymce {
    border-color: rgba(155, 169, 178, 0.35);
    border-radius: 0.45rem;
}

.net-manager-page .net-editor-panel .tox-tinymce {
    border-color: #294653;
    background: #030b12;
}

.net-manager-page .net-editor-panel .tox-tinymce:focus-within {
    border-color: #00c8f0;
    box-shadow: 0 0 0 0.2rem rgba(0, 200, 240, 0.14);
}

.net-manager-page .tox .tox-editor-header,
.net-manager-page .tox .tox-toolbar-overlord,
.net-manager-page .tox .tox-toolbar,
.net-manager-page .tox .tox-toolbar__primary,
.net-manager-page .tox .tox-toolbar__overflow {
    background-color: #071722 !important;
    background-image: none !important;
}

.net-manager-page .tox .tox-toolbar,
.net-manager-page .tox .tox-toolbar__primary,
.net-manager-page .tox .tox-toolbar__overflow {
    border-bottom: 1px solid rgba(92, 130, 145, 0.38);
}

.net-manager-page .tox .tox-tbtn:hover,
.net-manager-page .tox .tox-tbtn:focus,
.net-manager-page .tox .tox-tbtn--enabled,
.net-manager-page .tox .tox-tbtn--enabled:hover {
    background: rgba(0, 200, 240, 0.2);
}

.net-manager-page .tox .tox-edit-area,
.net-manager-page .tox .tox-edit-area__iframe {
    background: #030b12 !important;
}

.app-modal .modal-content {
    overflow: hidden;
    border: 1px solid var(--app-border-strong);
    border-radius: 0.8rem;
    color: var(--app-text);
    background: #171e24;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.48);
}

.app-modal .modal-header,
.app-modal .modal-footer {
    border-color: var(--app-border);
}

.app-modal .modal-title {
    color: var(--app-text);
}

.app-modal .modal-body {
    padding-block: 1.5rem;
}

.schedule-editor-dialog {
    max-width: 46rem;
}

.schedule-editor-form > fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.schedule-editor-body {
    display: grid;
    gap: 1rem;
    max-height: min(70vh, 42rem);
    overflow-y: auto;
    background: linear-gradient(145deg, rgba(7, 25, 38, 0.95), rgba(4, 13, 21, 0.98));
}

.schedule-editor-status {
    min-height: 1.2rem;
    margin: 0;
    color: var(--app-cyan);
    font-size: 0.8rem;
}

.schedule-editor-status.is-error {
    color: #ff708e;
}

.schedule-primary-fields {
    align-items: start;
}

.schedule-end-date-field label span {
    color: var(--app-muted);
    font-size: 0.72rem;
    font-weight: 400;
}

.schedule-recurrence-fields {
    min-width: 0;
    margin: 0;
    padding: 0.85rem;
    border: 1px solid rgba(92, 130, 145, 0.34);
    border-radius: 0.6rem;
    background: rgba(3, 11, 18, 0.58);
}

.schedule-recurrence-fields[hidden],
.schedule-end-date-field[hidden] {
    display: none;
}

.schedule-recurrence-fields legend {
    width: auto;
    margin: 0 0 0.55rem;
    color: var(--app-text);
    font-size: 0.88rem;
    font-weight: 600;
}

.schedule-recurrence-fields > small {
    display: block;
    margin-top: 0.55rem;
    color: var(--app-muted);
    font-size: 0.74rem;
}

.schedule-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
}

.schedule-weekdays label {
    cursor: pointer;
}

.schedule-weekdays input {
    position: absolute;
    opacity: 0;
}

.schedule-weekdays span {
    display: grid;
    min-height: 2.35rem;
    place-items: center;
    border: 1px solid rgba(92, 130, 145, 0.42);
    border-radius: 0.4rem;
    color: var(--app-muted);
    font-size: 0.72rem;
    background: rgba(8, 34, 48, 0.5);
}

.schedule-weekdays input:checked + span {
    color: #061019;
    border-color: var(--app-cyan);
    background: var(--app-cyan);
}

.schedule-weekdays input:focus-visible + span {
    outline: 2px solid var(--app-cyan);
    outline-offset: 2px;
}

.schedule-editor-actions {
    gap: 0.55rem;
}

.schedule-occurrences {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(92, 130, 145, 0.3);
}

.schedule-occurrences-heading {
    display: flex;
    gap: 0.75rem;
    align-items: start;
    justify-content: space-between;
}

.schedule-occurrences-heading h3,
.schedule-occurrences-heading p {
    margin: 0;
}

.schedule-occurrences-heading h3 {
    color: var(--app-text);
    font-size: 0.95rem;
}

.schedule-occurrences-heading p,
.schedule-occurrences-heading > span,
.schedule-occurrences-empty {
    color: var(--app-muted);
    font-size: 0.74rem;
}

.schedule-occurrences-heading p {
    margin-top: 0.2rem;
}

.schedule-occurrences-heading > span.is-error {
    color: #ff708e;
}

.schedule-occurrences-list {
    display: grid;
    gap: 0.45rem;
}

.schedule-occurrences-empty {
    margin: 0;
    padding: 0.85rem;
    border: 1px dashed rgba(92, 130, 145, 0.32);
    border-radius: 0.5rem;
    text-align: center;
}

.schedule-occurrence {
    display: grid;
    gap: 0.45rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(92, 130, 145, 0.28);
    border-radius: 0.5rem;
    background: rgba(3, 11, 18, 0.52);
}

.schedule-occurrence.is-cancelled {
    opacity: 0.62;
}

.schedule-occurrence-summary,
.schedule-occurrence-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.schedule-occurrence-summary {
    justify-content: space-between;
}

.schedule-occurrence-summary time {
    color: var(--app-text);
    font-size: 0.82rem;
}

.schedule-occurrence-status {
    padding: 0.16rem 0.4rem;
    border-radius: 2rem;
    color: var(--app-muted);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(155, 169, 178, 0.1);
}

.schedule-occurrence.is-preparing .schedule-occurrence-status,
.schedule-occurrence.is-override .schedule-occurrence-status {
    color: var(--app-cyan);
    background: rgba(0, 200, 240, 0.11);
}

.schedule-occurrence.is-live .schedule-occurrence-status {
    color: #ffb56f;
    background: rgba(220, 131, 53, 0.14);
}

.schedule-occurrence-editor {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(7rem, 0.8fr) auto;
    gap: 0.45rem;
}

.schedule-occurrence-editor[hidden] {
    display: none;
}

.schedule-action-spacer {
    flex: 1 1 auto;
}

.net-manager-page .app-button-danger {
    color: #ff8aa2;
    border: 1px solid rgba(243, 29, 82, 0.45);
    background: rgba(88, 12, 30, 0.34);
}

.net-manager-page .app-button-danger:hover,
.net-manager-page .app-button-danger:focus-visible {
    color: #fff;
    border-color: #ff5f80;
    background: rgba(150, 18, 49, 0.58);
}

@media (max-width: 991.98px) {
    .net-manager-header-tower,
    .settings-header-tower,
    .favorites-header-tower {
        display: none;
    }

    .net-manager-grid {
        grid-template-columns: 1fr;
    }

    .owned-nets-panel {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .app-form-grid,
    .app-option-grid,
    .connection-fields {
        grid-template-columns: 1fr;
    }

    .connections-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .connections-heading .app-button {
        width: 100%;
    }

    .schedule-weekdays {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .schedule-editor-actions {
        align-items: stretch;
    }

    .schedule-editor-actions .app-button {
        flex: 1 1 100%;
    }

    .schedule-occurrences-heading {
        flex-direction: column;
    }

    .schedule-occurrence-editor {
        grid-template-columns: 1fr;
    }

    .schedule-action-spacer {
        display: none;
    }

    .panel-heading {
        align-items: start;
    }

    .form-status,
    .net-editor-panel #netprofile_form_status,
    .net-editor-panel #netowner_form_status {
        max-width: 9rem;
    }

    .app-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .app-form-actions .app-button {
        width: 100%;
    }
}

/* Phase 2 landing page */
.landing-page {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 78% 10%, rgba(116, 198, 212, 0.09), transparent 30rem),
        radial-gradient(circle at 18% 3%, rgba(220, 131, 53, 0.05), transparent 24rem),
        #080d11;
}

.landing-page .landing-navbar {
    padding-block: 0.65rem;
    background: rgba(8, 13, 17, 0.92) !important;
}

.landing-navbar-brand {
    display: grid !important;
    grid-template-columns: minmax(0, 9.5rem);
    gap: 0.08rem;
}

.landing-brand-logo {
    display: block;
    width: 9.5rem;
    height: 3.2rem;
    object-fit: contain;
    object-position: left center;
}

.landing-navbar-brand small,
.landing-footer-brand small {
    margin-top: -0.55rem;
    padding-left: 3.7rem;
    color: var(--app-cyan);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.landing-page .landing-hero::after {
    display: none;
}

.landing-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(22rem, 0.78fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: center;
}

.landing-hero-copy {
    position: relative;
    z-index: 2;
}

.landing-page .landing-title {
    display: grid;
    max-width: 9ch;
    margin-bottom: 1.5rem;
    font-size: clamp(3.2rem, 6.7vw, 6.3rem);
    font-weight: 650;
    line-height: 0.93;
    letter-spacing: -0.055em;
}

.landing-page .landing-title-find {
    color: var(--app-text);
}

.landing-page .landing-title-join {
    color: var(--app-cyan);
}

.landing-page .landing-copy {
    max-width: 39rem;
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
}

.landing-page .app-button-primary {
    color: #10171b;
    background: var(--app-orange);
    box-shadow: 0 10px 28px rgba(220, 131, 53, 0.16);
}

.landing-page .app-button-primary:hover,
.landing-page .app-button-primary:focus-visible {
    color: #10171b;
    background: #efa15d;
}

.landing-tower-panel {
    position: relative;
    display: grid;
    min-width: 0;
    place-items: center;
}

.landing-tower-glow {
    position: absolute;
    width: 74%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(116, 198, 212, 0.08);
    filter: blur(3.5rem);
}

.landing-tower {
    position: relative;
    width: min(100%, 39rem);
    height: auto;
    filter: drop-shadow(0 1.75rem 2.75rem rgba(0, 0, 0, 0.42));
}

.landing-features {
    position: relative;
    z-index: 3;
    padding: 0 0 clamp(4rem, 7vw, 6rem);
    border-bottom: 1px solid var(--app-border);
}

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

.landing-feature-card {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
    padding: 1.35rem 1.2rem;
    border: 1px solid var(--app-border);
    border-radius: 0.9rem;
    background: linear-gradient(145deg, rgba(23, 30, 36, 0.96), rgba(13, 20, 25, 0.92));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16);
}

.landing-feature-icon,
.landing-panel-icon {
    position: relative;
    display: inline-grid;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--app-border-strong);
    border-radius: 50%;
    color: var(--app-cyan);
    background: rgba(116, 198, 212, 0.08);
    font-size: 1.15rem;
}

.landing-feature-icon-no-cost::after {
    position: absolute;
    width: 1.8rem;
    height: 2px;
    border-radius: 2px;
    background: var(--app-orange);
    content: '';
    transform: rotate(48deg);
}

.landing-feature-card h2 {
    margin: 0 0 0.35rem;
    color: var(--app-text);
    font-size: 1.05rem;
    font-weight: 650;
}

.landing-feature-card p {
    margin: 0;
    color: var(--app-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.landing-net-board {
    scroll-margin-top: 5rem;
    padding: clamp(4rem, 8vw, 7rem) 0;
    border-bottom: 1px solid var(--app-border);
}

.landing-net-board-heading {
    max-width: 42rem;
    margin-bottom: 2rem;
}

.landing-net-board-heading > p {
    margin: 0.75rem 0 0;
    color: var(--app-muted);
}

.landing-net-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.landing-net-panel {
    min-width: 0;
    min-height: 25rem;
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(116, 198, 212, 0.035), transparent 7rem),
        rgba(17, 24, 29, 0.94);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.2);
}

.landing-live-panel {
    border-color: var(--app-border-strong);
}

.landing-net-panel-heading {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.25rem 0.25rem 1rem;
    border-bottom: 1px solid var(--app-border);
}

.landing-panel-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.65rem;
    font-size: 1rem;
}

.landing-panel-icon.is-live {
    color: var(--app-orange);
    border-color: rgba(220, 131, 53, 0.48);
    background: rgba(220, 131, 53, 0.08);
}

.landing-panel-label {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--app-muted);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.landing-net-panel-heading h3 {
    margin: 0;
    color: var(--app-text);
    font-size: 1.25rem;
    font-weight: 650;
}

.landing-page .nets-list {
    gap: 0.65rem;
}

.landing-page .net-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.9rem !important;
    border-radius: 0.65rem !important;
    background: rgba(23, 32, 39, 0.9) !important;
}

.landing-page .net-card-main {
    justify-content: space-between;
}

.landing-page .net-card-link {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 1rem;
}

.landing-page .net-card-meta {
    gap: 0.5rem 1rem;
    justify-content: start;
    font-size: 0.78rem;
}

.landing-page .nets-state {
    min-height: 17rem;
    display: grid;
    align-content: center;
    padding: 1.5rem 1rem;
    border-color: var(--app-border);
    background: rgba(8, 13, 17, 0.28);
    line-height: 1.5;
}

.landing-page .scheduled-nets-empty {
    min-height: 17rem;
}

.landing-page .scheduled-net-card {
    grid-template-columns: minmax(0, 1fr);
}

.landing-page .landing-footer {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0 1.5rem !important;
    color: var(--app-muted);
    background: #080d11 !important;
}

.landing-footer-grid {
    display: grid;
    grid-template-columns: minmax(14rem, 1.6fr) repeat(3, minmax(9rem, 0.7fr));
    gap: clamp(2rem, 5vw, 5rem);
}

.landing-footer-brand > a {
    display: grid;
    width: 11rem;
    text-decoration: none;
}

.landing-footer-brand img {
    width: 11rem;
    height: auto;
}

.landing-footer-brand p {
    max-width: 18rem;
    margin: 1.25rem 0 0;
    line-height: 1.6;
}

.landing-footer-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
}

.landing-footer-column h2 {
    margin: 0 0 0.35rem;
    color: var(--app-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.landing-footer-column a,
.landing-footer-link,
.landing-footer-bottom a {
    color: var(--app-muted);
    font-size: 0.88rem;
    text-decoration: none;
}

.landing-footer-column a:hover,
.landing-footer-column a:focus-visible,
.landing-footer-bottom a:hover,
.landing-footer-bottom a:focus-visible {
    color: var(--app-cyan);
}

.landing-footer-link.is-unavailable {
    cursor: not-allowed;
    opacity: 0.62;
}

.landing-footer-contact a {
    overflow-wrap: anywhere;
}

.landing-footer-bottom {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 3.5rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--app-border);
}

.landing-footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

@media (max-width: 991.98px) {
    .landing-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
        gap: 1rem;
    }

    .landing-feature-grid,
    .landing-net-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-live-panel {
        grid-column: 1 / -1;
    }

    .landing-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .landing-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .landing-tower-panel {
        max-height: 23rem;
        margin-top: 1rem;
    }

    .landing-tower {
        width: min(90%, 28rem);
    }

    .landing-feature-grid,
    .landing-net-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .landing-live-panel {
        grid-column: auto;
    }

    .landing-net-panel {
        min-height: 21rem;
    }

    .landing-page .nets-state,
    .landing-page .scheduled-nets-empty {
        min-height: 13rem;
    }
}

@media (max-width: 575.98px) {
    .landing-page,
    .landing-page main,
    .landing-page .container,
    .landing-page .landing-footer,
    .landing-page .landing-footer .container {
        max-width: 100%;
    }

    .landing-brand-logo {
        width: 8.25rem;
        height: 2.85rem;
    }

    .landing-navbar-brand small {
        margin-top: -0.45rem;
        padding-left: 3.2rem;
        font-size: 0.52rem;
    }

    .landing-page .landing-title {
        font-size: clamp(2.85rem, 15vw, 4.25rem);
    }

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

    .landing-page .landing-actions .app-button {
        width: 100%;
    }

    .landing-feature-card {
        padding: 1.1rem;
    }

    .landing-footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .landing-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-page .app-button,
    .landing-page .net-card {
        transition: none;
    }
}

/* Reference-directed landing composition */
.landing-page .landing-navbar {
    min-height: 6.8rem;
    padding-block: 0.85rem;
    border-bottom: 0;
    background: #050d14 !important;
}

.landing-page .landing-navbar .container {
    max-width: 1180px;
}

.landing-page .landing-navbar .navbar-collapse {
    flex-grow: 1;
}

.landing-page .landing-navbar .navbar-nav {
    gap: clamp(0.35rem, 1.8vw, 1.35rem);
    align-items: center;
}

.landing-page .landing-navbar .nav-link {
    color: #f4f5f2 !important;
    font-size: 1.05rem;
    font-weight: 500;
}

.landing-page .landing-navbar .nav-link:hover,
.landing-page .landing-navbar .nav-link:focus-visible {
    color: var(--app-cyan) !important;
}

.landing-page .landing-navbar .app-nav-sign-in {
    min-width: 6rem;
    margin-left: 0.15rem;
    padding: 0.78rem 1.2rem !important;
    color: #fff !important;
    border: 0;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #ff971d, #ed6e00);
    box-shadow: 0 0 1.6rem rgba(244, 122, 0, 0.18);
    text-align: center;
}

.landing-navbar-brand {
    width: clamp(13rem, 23vw, 18rem);
    grid-template-columns: minmax(0, 1fr);
}

.landing-brand-logo {
    width: 100%;
    height: 4.4rem;
}

.landing-navbar-brand small {
    margin-top: -0.95rem;
    padding-left: 4.4rem;
    color: #fff;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.landing-page .landing-hero {
    position: relative;
    min-height: 34rem;
    display: flex;
    align-items: center;
    padding: 3.3rem 0 3.8rem;
    border-bottom: 0;
    background-color: #061321;
    background-image: var(--app-dashboard-hero-image);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
}

.landing-page .landing-hero::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: var(--app-dashboard-hero-overlay);
    content: '';
    pointer-events: none;
}

.landing-page .landing-hero > .container {
    position: relative;
    z-index: 1;
}

.landing-page .landing-hero-copy {
    max-width: 34rem;
}

.landing-page .landing-title {
    max-width: 8.5ch;
    margin-bottom: 1.3rem;
    font-size: clamp(3.45rem, 6vw, 5.25rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-shadow: var(--app-dashboard-hero-title-shadow);
}

.landing-page .landing-copy {
    max-width: 31rem;
    margin-bottom: 1.65rem;
    color: var(--app-dashboard-hero-copy);
    font-size: clamp(1rem, 1.65vw, 1.18rem);
    line-height: 1.7;
    text-shadow: var(--app-dashboard-hero-copy-shadow);
}

.landing-page .landing-actions {
    gap: 0.9rem;
}

.landing-page .landing-actions .app-button {
    min-width: 12rem;
    min-height: 3.7rem;
    border-radius: 0.5rem;
    font-size: 0.92rem;
    letter-spacing: 0.025em;
}

.landing-page .landing-actions .app-button i {
    font-size: 1.35rem;
}

.landing-page .landing-actions .app-button-primary {
    color: #fff;
    background: linear-gradient(135deg, #ff981d, #ed6d00);
    box-shadow: 0 0.75rem 2rem rgba(244, 122, 0, 0.24);
}

.landing-page .landing-actions .app-button-primary:hover,
.landing-page .landing-actions .app-button-primary:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #ffaa3c, #f77c08);
}

.landing-page .landing-actions .app-button-secondary {
    color: #fff;
    border-color: var(--app-dashboard-hero-secondary-border);
    background: var(--app-dashboard-hero-secondary-bg);
}

.landing-features {
    padding: 1.75rem 0 2rem;
    border-bottom: 1px solid rgba(155, 169, 178, 0.26);
    background: #06111a;
}

.landing-feature-grid {
    gap: 0;
    padding-block: 0.25rem;
    border-top: 1px solid rgba(155, 169, 178, 0.34);
}

.landing-feature-card {
    min-height: 8.5rem;
    gap: 1rem;
    align-items: center;
    padding: 1.35rem 1.3rem;
    border: 0;
    border-right: 1px solid rgba(155, 169, 178, 0.34);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.landing-feature-card:last-child {
    border-right: 0;
}

.landing-feature-icon {
    width: 4.2rem;
    height: 4.2rem;
    border: 0;
    border-radius: 0;
    color: #00bfe8;
    background: transparent;
    font-size: 3.25rem;
}

.landing-feature-card:nth-child(even) .landing-feature-icon,
.landing-feature-card:nth-child(even) h2 {
    color: #f47a00;
}

.landing-feature-icon-no-cost {
    border: 3px solid currentColor;
    border-radius: 50%;
    font-size: 2.25rem;
}

.landing-feature-icon-no-cost::after {
    width: 4.3rem;
    height: 3px;
    background: currentColor;
}

.landing-feature-card h2 {
    color: #00bfe8;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    text-transform: uppercase;
}

.landing-feature-card p {
    color: #e0e4e6;
    font-size: 0.82rem;
    line-height: 1.65;
}

.landing-net-board {
    padding: 3rem 0 4rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 191, 232, 0.055), transparent 36rem),
        #06111a;
}

.landing-net-grid {
    gap: 0.85rem;
}

.landing-net-panel {
    min-height: 27rem;
    padding: 1rem 1.05rem;
    border-color: rgba(155, 169, 178, 0.48);
    border-radius: 0.75rem;
    background: linear-gradient(150deg, rgba(11, 29, 41, 0.92), rgba(5, 15, 23, 0.98));
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.18);
}

.landing-net-panel-heading {
    min-height: 3.2rem;
    gap: 0.8rem;
    margin-bottom: 0.65rem;
    padding: 0.15rem 0.35rem 0.85rem;
    border-bottom-color: rgba(155, 169, 178, 0.32);
}

.landing-net-panel-heading h3 {
    color: #f4f5f2;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.landing-panel-icon {
    width: 2.15rem;
    height: 2.15rem;
    border: 0;
    border-radius: 0;
    color: #f4f5f2;
    background: transparent;
    font-size: 1.45rem;
}

.landing-live-dot {
    width: 0.9rem;
    height: 0.9rem;
    margin-left: 0.35rem;
    border-radius: 50%;
    background: #43d17a;
    box-shadow: 0 0 0.8rem rgba(67, 209, 122, 0.28);
}

.landing-page .nets-list {
    gap: 0;
}

.landing-page .net-card {
    min-height: 6.6rem;
    gap: 0.45rem;
    padding: 1rem 0.25rem !important;
    border: 0 !important;
    border-bottom: 1px dotted rgba(155, 169, 178, 0.3) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none;
}

.landing-page .net-card:hover {
    background: rgba(0, 191, 232, 0.045) !important;
    transform: none;
}

.landing-page .net-card-link {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.94rem;
}

.landing-page .net-card-meta {
    padding-left: 4.75rem;
    color: #d0d6d9;
}

.landing-page .nets-state,
.landing-page .scheduled-nets-empty {
    min-height: 19rem;
    border: 0;
    background: transparent;
}

.landing-page .nets-state i {
    font-size: 2rem;
}

.landing-page .landing-footer {
    padding-top: 2.6rem !important;
    background: #050d14 !important;
}

.landing-footer-grid {
    grid-template-columns: minmax(16rem, 1.35fr) repeat(3, minmax(9rem, 0.75fr));
    gap: 0;
}

.landing-footer-brand,
.landing-footer-column {
    padding: 0 2rem;
    border-right: 1px solid rgba(155, 169, 178, 0.34);
}

.landing-footer-brand {
    padding-left: 0;
}

.landing-footer-column:last-child {
    padding-right: 0;
    border-right: 0;
}

.landing-footer-brand > a,
.landing-footer-brand img {
    width: min(17.5rem, 100%);
    height: auto;
}

.landing-footer-brand small {
    margin-top: -0.9rem;
    padding-left: 4.9rem;
    color: #fff;
    font-size: 0.7rem;
}

.landing-footer-brand p {
    max-width: 19rem;
    color: #e0e4e6;
    font-size: 0.88rem;
}

.landing-footer-column h2 {
    color: #00bfe8;
    font-size: 0.78rem;
}

.landing-footer-column a,
.landing-footer-link,
.landing-footer-bottom a {
    color: #e0e4e6;
}

.landing-footer-bottom {
    color: #d3d8da;
    border-top-color: rgba(155, 169, 178, 0.42);
}

@media (max-width: 991.98px) {
    .landing-page .landing-navbar {
        min-height: auto;
    }

    .landing-page .landing-navbar .navbar-nav {
        align-items: stretch;
        gap: 0.2rem;
    }

    .landing-page .landing-navbar .app-nav-sign-in {
        width: fit-content;
        margin-left: 0;
    }

    .landing-page .landing-hero {
        background-position: center;
    }

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

    .landing-feature-card:nth-child(2) {
        border-right: 0;
    }

    .landing-feature-card:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(155, 169, 178, 0.34);
    }

    .landing-footer-grid {
        gap: 2rem 0;
    }

    .landing-footer-brand,
    .landing-footer-column {
        padding-inline: 1.5rem;
    }

    .landing-footer-brand:nth-child(2n),
    .landing-footer-column:nth-child(2n) {
        border-right: 0;
    }
}

@media (max-width: 767.98px) {
    .landing-page .landing-hero {
        --landing-mobile-art-height: clamp(15.5rem, 72vw, 17.5rem);
        min-height: 42rem;
        align-items: flex-start;
        padding-top: 2.65rem;
        padding-bottom: calc(var(--landing-mobile-art-height) + .75rem);
        background-position: right bottom;
        background-size: auto var(--landing-mobile-art-height);
    }

    .landing-page .landing-hero::before {
        background:
            linear-gradient(180deg, rgba(3, 11, 18, .98) 0%, rgba(3, 11, 18, .94) 47%, rgba(3, 11, 18, .34) 66%, rgba(3, 11, 18, .06) 100%),
            linear-gradient(90deg, rgba(3, 11, 18, .78), rgba(3, 11, 18, .08));
    }

    .landing-page .landing-hero-copy {
        max-width: 29rem;
    }

    .landing-page .landing-title {
        font-size: clamp(3rem, 12vw, 4.25rem);
    }

    .landing-net-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .landing-net-panel {
        min-height: 21rem;
    }

    .landing-page .nets-state,
    .landing-page .scheduled-nets-empty {
        min-height: 13rem;
    }
}

@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 575px) {
    .landing-page .landing-hero {
        min-height: 26rem;
        align-items: center;
        padding: 1.75rem 0;
        background-position: right bottom;
        background-size: auto min(100%, 25rem);
    }

    .landing-page .landing-hero-copy {
        max-width: min(27rem, 62vw);
    }

    .landing-page .landing-title {
        margin-bottom: .75rem;
        font-size: clamp(2.6rem, 7vw, 3.5rem);
    }

    .landing-page .landing-copy {
        margin-bottom: 1rem;
        font-size: .96rem;
        line-height: 1.5;
    }
}

@media (max-width: 575.98px) {
    .landing-navbar-brand {
        width: 13.25rem;
    }

    .landing-brand-logo {
        width: 100%;
        height: auto;
        max-height: 4.25rem;
    }

    .landing-navbar-brand small {
        margin-top: -0.78rem;
        padding-left: 3.75rem;
        font-size: 0.6rem;
    }

    .landing-page .landing-hero {
        min-height: 42rem;
    }

    .landing-page .landing-actions .app-button {
        min-width: 0;
    }

    .landing-feature-grid {
        grid-template-columns: minmax(0, 1fr);
        border-top: 0;
    }

    .landing-feature-card,
    .landing-feature-card:nth-child(2) {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(155, 169, 178, 0.34);
    }

    .landing-feature-card:last-child {
        border-bottom: 0;
    }

    .landing-footer-grid {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: 100%;
    }

    .landing-footer-grid > *,
    .landing-footer-brand,
    .landing-footer-column {
        min-width: 0;
        max-width: 100%;
    }

    .landing-footer-brand,
    .landing-footer-column,
    .landing-footer-brand:nth-child(2n),
    .landing-footer-column:nth-child(2n) {
        padding: 0 0 1.5rem;
        border-right: 0;
        border-bottom: 1px solid rgba(155, 169, 178, 0.28);
    }

    .landing-footer-column:last-child {
        border-bottom: 0;
    }

    .landing-footer-brand p,
    .landing-footer-column a,
    .landing-footer-link,
    .landing-footer-bottom,
    .landing-footer-bottom a {
        overflow-wrap: anywhere;
    }

    .landing-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.8rem;
    }

    .landing-footer-bottom nav {
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem 1rem;
        max-width: 100%;
    }
}

/* Compact desktop proportions for the approved dashboard composition. */
@media (min-width: 992px) {
    .landing-page .landing-navbar {
        min-height: 4.75rem;
        padding-block: 0.25rem;
    }

    .landing-navbar-brand {
        width: clamp(14rem, 17vw, 15.75rem);
    }

    .landing-brand-logo {
        height: auto;
        max-height: 4.75rem;
    }

    .landing-page .landing-navbar .navbar-nav {
        flex-wrap: nowrap;
        align-items: center;
        gap: clamp(.1rem, .45vw, .4rem);
    }

    .landing-page .landing-navbar .nav-link {
        color: #f8fafb !important;
        padding-inline: clamp(.45rem, .75vw, .7rem) !important;
        font-size: .98rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .landing-page .landing-hero {
        min-height: 0;
        aspect-ratio: 2560 / 859;
        padding: 1.65rem 0 1.85rem;
        background-position: center center;
        background-size: 100% auto;
    }

    .landing-page .landing-hero::before {
        background:
            linear-gradient(90deg, rgba(3, 11, 18, 0.9) 0%, rgba(3, 11, 18, 0.74) 29%, rgba(3, 11, 18, 0.34) 48%, rgba(3, 11, 18, 0.1) 68%, transparent 82%),
            linear-gradient(0deg, rgba(3, 11, 18, 0.22), transparent 42%);
    }

    .landing-page .landing-hero-copy {
        max-width: 30rem;
    }

    .landing-page .landing-title {
        margin-bottom: 0.85rem;
        font-size: 3.75rem;
        font-weight: 700;
        line-height: 0.98;
    }

    .landing-page .landing-copy {
        max-width: 29rem;
        margin-bottom: 1.15rem;
        font-size: 1.08rem;
        line-height: 1.6;
    }

    .landing-page .landing-actions {
        gap: 0.7rem;
    }

    .landing-page .landing-actions .app-button {
        min-width: 11.25rem;
        min-height: 3.25rem;
        padding-block: 0.6rem;
        font-size: 0.92rem;
    }

    .landing-features {
        padding: 1.25rem 0;
    }

    .landing-feature-card {
        min-height: 7.5rem;
        gap: 0.9rem;
        padding: 1.1rem 1rem;
    }

    .landing-feature-icon {
        width: 3.85rem;
        height: 3.85rem;
        font-size: 2.9rem;
    }

    .landing-feature-icon-no-cost {
        font-size: 2.05rem;
    }

    .landing-feature-icon-no-cost::after {
        width: 3.95rem;
    }

    .landing-feature-card h2 {
        margin-bottom: 0.18rem;
        font-size: 0.86rem;
        font-weight: 700;
    }

    .landing-feature-card p {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    .landing-net-board {
        padding: 1.5rem 0 2.5rem;
    }

    .landing-net-panel {
        min-height: 21rem;
        display: flex;
        flex-direction: column;
        padding: 1rem 1.05rem 0.9rem;
    }

    .landing-net-panel-heading {
        min-height: 3rem;
        margin-bottom: 0.45rem;
        padding-bottom: 0.75rem;
    }

    .landing-net-panel-heading h3 {
        font-size: 1.1rem;
        font-weight: 700;
    }

    .landing-page .nets-list,
    .landing-page .scheduled-net-list {
        flex: 1;
    }

    .landing-page .net-card {
        min-height: 5.85rem;
        padding: 0.8rem 0.25rem !important;
    }

    .landing-page .net-card-link {
        font-size: 1rem;
        font-weight: 700;
    }

    .landing-page .net-card-meta {
        color: #e0e4e6;
        font-size: 0.86rem;
    }

    .landing-page .nets-state,
    .landing-page .scheduled-nets-empty {
        min-height: 0;
        align-content: start;
        padding: 1.4rem 1rem;
        color: #d5dbde;
        font-size: 0.9rem;
    }

    .landing-net-action {
        display: inline-flex;
        gap: 0.4rem;
        align-items: center;
        align-self: flex-start;
        margin-top: auto;
        padding: 0.7rem 0.1rem 0.15rem;
        color: #ff8500;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
    }

    .landing-net-action:hover,
    .landing-net-action:focus-visible {
        color: #ffa02f;
    }

    .landing-net-action.is-placeholder {
        cursor: default;
    }

    .landing-page .landing-footer {
        padding: 1.8rem 0 1.2rem !important;
    }

    .landing-footer-grid {
        grid-template-columns: minmax(17rem, 1.3fr) repeat(3, minmax(9rem, 0.75fr));
    }

    .landing-footer-brand,
    .landing-footer-column {
        padding-inline: 1.7rem;
    }

    .landing-footer-brand {
        padding-left: 0;
    }

    .landing-footer-brand > a,
    .landing-footer-brand img {
        width: 15.5rem;
    }

    .landing-footer-brand p {
        max-width: 18.5rem;
        margin-top: 0.85rem;
        font-size: 0.94rem;
        line-height: 1.55;
    }

    .landing-footer-column {
        gap: 0.65rem;
    }

    .landing-footer-column h2 {
        margin-bottom: 0.3rem;
        color: #00c8f0;
        font-size: 0.9rem;
        font-weight: 700;
    }

    .landing-footer-column a,
    .landing-footer-link,
    .landing-footer-bottom a {
        color: #f6f8f9;
        font-size: 0.96rem;
        font-weight: 600;
    }

    .landing-footer-link.is-unavailable {
        opacity: 1;
    }

    .landing-footer-contact a {
        display: inline-flex;
        gap: 0.65rem;
        align-items: center;
    }

    .landing-footer-contact a i {
        color: #f6f8f9;
        font-size: 1.5rem;
        line-height: 1;
    }

    .landing-footer-bottom {
        margin-top: 1.5rem;
        padding-top: 1rem;
        color: #e1e5e7;
        font-size: 0.9rem;
    }
}

/* Landing Live Nets card internals. */
.landing-live-panel .landing-live-count {
    margin-left: auto;
    color: #43d17a;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.landing-page .landing-live-panel .net-card {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    cursor: pointer;
}

.landing-page .landing-live-panel .net-card:hover,
.landing-page .landing-live-panel .net-card:focus-visible {
    background: rgba(0, 191, 232, 0.07) !important;
    outline: 1px solid rgba(0, 191, 232, 0.48);
    outline-offset: -1px;
}

.landing-live-net-logo {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    border-radius: 50%;
}

.landing-live-net-info {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
}

.landing-live-net-title {
    overflow: hidden;
    color: #f4f5f2;
    font-size: 1rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-live-net-frequency,
.landing-live-net-time {
    overflow: hidden;
    color: #d6dde0;
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-live-net-frequency {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.landing-live-net-time:empty {
    display: none;
}

.landing-live-net-status {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.4rem;
    align-items: center;
    justify-items: end;
}

.landing-live-net-state {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-end;
}

.landing-check-in-count {
    color: #bdc8cc;
    font-size: 0.72rem;
    white-space: nowrap;
}

.landing-net-favorite {
    display: inline-grid;
    width: 1.9rem;
    height: 1.9rem;
    place-items: center;
    padding: 0;
    color: #84949b;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 1.15rem;
}

.landing-net-favorite:hover,
.landing-net-favorite:focus-visible {
    color: #ff9a25;
    background: rgba(255, 133, 0, 0.1);
    outline: 1px solid rgba(255, 133, 0, 0.55);
}

.landing-net-favorite.bi-heart-fill {
    color: #ff8500;
}

.landing-on-air {
    padding: 0.28rem 0.48rem;
    color: #eaffef;
    border: 1px solid rgba(67, 209, 122, 0.5);
    border-radius: 0.35rem;
    background: rgba(32, 128, 66, 0.72);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Phase 5 public net visibility and schedule surfaces. */
@media (min-width: 992px) {
    .landing-page .landing-net-grid {
        align-items: stretch;
    }

    .landing-page .landing-net-panel {
        height: 26rem;
        min-height: 0;
    }

    .landing-page :is(.nets-list, .scheduled-net-list) {
        min-height: 0;
        overflow: hidden;
    }

    .landing-page .landing-net-panel .net-card {
        min-height: 0;
        padding: 0.45rem 0.25rem !important;
    }

    .landing-page .landing-live-panel .net-card {
        height: 4.45rem;
    }

    .landing-page .landing-live-net-logo {
        width: 3.1rem;
        height: 3.1rem;
    }

    .landing-page .landing-live-net-info {
        gap: 0.1rem;
    }

    .landing-page .landing-live-net-title {
        font-size: 0.9rem;
    }

    .landing-page :is(.landing-live-net-frequency, .landing-live-net-time) {
        font-size: 0.74rem;
        -webkit-line-clamp: 1;
    }
    .landing-page .landing-live-panel .net-card {
        grid-template-columns: 3.1rem minmax(0, 1fr) auto;
        min-height: 4.45rem;
        height: 4.45rem;
    }

    .landing-page .scheduled-net-card {
        cursor: pointer;
    }

    .landing-page .scheduled-net-card-content {
        gap: 0.25rem;
    }

    .landing-page .scheduled-net-card-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .landing-page .scheduled-net-card-title {
        overflow: hidden;
        font-size: 0.9rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .landing-page .scheduled-net-card-when {
        margin-top: 0.1rem;
        font-size: 0.74rem;
    }

    .landing-page .scheduled-net-card-description {
        display: none;
    }

    .landing-page .scheduled-net-connections {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.3rem;
        font-size: 0.72rem;
    }
}

.landing-page .scheduled-net-connections {
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.3rem;
    white-space: nowrap;
}

.landing-page .scheduled-net-connections dt,
.landing-page .scheduled-net-connections dd {
    overflow-wrap: normal;
    white-space: nowrap;
}

.landing-page .scheduled-net-connections dd {
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-page .scheduled-net-card:last-of-type {
    border-bottom: 0 !important;
}

.landing-page .scheduled-net-card:hover {
    background: rgba(0, 191, 232, 0.045) !important;
    outline: 0;
}

.landing-page .scheduled-net-card:focus-visible {
    background: rgba(0, 191, 232, 0.06) !important;
    outline: 2px solid rgba(0, 200, 240, 0.72);
    outline-offset: 2px;
}

.public-directory-page {
    background:
        radial-gradient(circle at 14% 8%, rgba(0, 200, 240, 0.1), transparent 32rem),
        radial-gradient(circle at 88% 20%, rgba(255, 133, 0, 0.045), transparent 26rem),
        linear-gradient(155deg, #071522 0%, #030a11 68%, #06111b 100%);
}

.public-directory-main {
    min-height: calc(100vh - 12rem);
    padding-bottom: 5rem;
}

.public-directory-hero {
    padding: clamp(1.75rem, 3.6vw, 3rem) 0 clamp(1.4rem, 3vw, 2.25rem);
    border-bottom: 1px solid rgba(0, 200, 240, 0.2);
    background:
        radial-gradient(circle at 20% 25%, rgba(0, 200, 240, 0.1), transparent 28rem),
        linear-gradient(110deg, rgba(8, 31, 47, 0.82), rgba(4, 13, 21, 0.34) 62%, transparent);
}

.public-directory-hero .container {
    position: relative;
}

.public-directory-tower {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    width: auto;
    height: 9.25rem;
    opacity: 0.64;
    pointer-events: none;
    transform: translateY(-50%);
}

.public-directory-workspace {
    padding-top: clamp(2rem, 5vw, 4rem);
}

.public-directory-heading,
.schedule-toolbar {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.public-directory-heading h2,
.schedule-toolbar h2 {
    margin: 0;
    color: var(--app-text);
    font-size: clamp(1.6rem, 3vw, 2.15rem);
}

.public-live-total {
    color: #43d17a;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.public-live-list,
.schedule-results {
    display: grid;
    gap: 0.75rem;
}

.public-live-card,
.schedule-day {
    border: 1px solid rgba(155, 169, 178, 0.48);
    border-radius: 0.75rem;
    background: linear-gradient(150deg, rgba(11, 29, 41, 0.92), rgba(5, 15, 23, 0.98));
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.18);
}

.public-live-card {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.2rem;
    color: var(--app-text);
    text-decoration: none;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.public-live-card:hover,
.public-live-card:focus-visible,
.schedule-item:hover,
.schedule-item:focus-visible {
    color: var(--app-text);
    border-color: rgba(0, 200, 240, 0.55);
    background: rgba(0, 191, 232, 0.07);
    outline: none;
}

.public-live-card:hover {
    transform: translateY(-1px);
}

.public-live-card > img {
    width: 4rem;
    height: 4rem;
    object-fit: contain;
}

.public-live-card-info,
.public-live-card-meta,
.schedule-item-info {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
}

.public-live-card-info strong,
.schedule-item-info strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--app-text);
    font-size: 1.05rem;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.public-live-card-info span,
.public-live-card-meta > span:last-child,
.schedule-item-info span {
    color: var(--app-muted);
    font-size: 0.84rem;
}

.public-live-card-info [data-role="connection"],
.schedule-item-info [data-role="connection"] {
    display: grid;
    gap: 0.15rem;
}

.landing-live-net-frequency,
.scheduled-net-connections dd {
    white-space: pre-line;
}

.public-live-card-meta {
    align-items: flex-end;
}

.public-directory-empty {
    min-height: 15rem;
    display: grid;
    gap: 0.75rem;
    place-content: center;
    color: var(--app-muted);
    text-align: center;
}

.public-directory-empty i {
    color: var(--app-cyan);
    font-size: 2rem;
}

.public-directory-empty[hidden],
.public-live-total[hidden],
.schedule-period-controls[hidden] {
    display: none !important;
}

.schedule-view-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(155, 169, 178, 0.2);
}

.schedule-view-tabs a,
.schedule-period-controls button {
    padding: 0.55rem 0.85rem;
    color: var(--app-muted);
    border: 1px solid rgba(155, 169, 178, 0.28);
    border-radius: 0.45rem;
    background: rgba(5, 15, 23, 0.65);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.schedule-view-tabs a:hover,
.schedule-view-tabs a:focus-visible,
.schedule-view-tabs a.is-current,
.schedule-period-controls button:hover,
.schedule-period-controls button:focus-visible {
    color: var(--app-cyan);
    border-color: rgba(0, 200, 240, 0.52);
}

.schedule-view-tabs a.is-current {
    background: rgba(0, 200, 240, 0.09);
}

#schedule-timezone {
    margin: 0.35rem 0 0;
    color: var(--app-muted);
    font-size: 0.8rem;
}

.schedule-period-controls {
    display: flex;
    gap: 0.5rem;
}

.schedule-day {
    overflow: hidden;
}

.schedule-day > h3 {
    margin: 0;
    padding: 0.85rem 1.1rem;
    color: var(--app-cyan);
    border-bottom: 1px solid rgba(155, 169, 178, 0.25);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.schedule-item {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
    color: var(--app-text);
    border-bottom: 1px solid rgba(155, 169, 178, 0.18);
    text-decoration: none;
}

.schedule-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    border-bottom: 1px solid rgba(155, 169, 178, 0.18);
}

.schedule-item-row:last-child {
    border-bottom: 0;
}

.schedule-item-row .schedule-item {
    border-bottom: 0;
}

.schedule-item-actions {
    display: flex;
    align-items: center;
    padding: 0 1.1rem 0 0.35rem;
}

.schedule-follow,
.scheduled-net-follow {
    padding: 0.35rem;
    color: var(--app-orange);
    border: 0;
    background: transparent;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.schedule-follow:hover,
.schedule-follow:focus-visible,
.scheduled-net-follow:hover,
.scheduled-net-follow:focus-visible {
    color: var(--app-cyan);
    outline: 2px solid rgba(0, 200, 240, 0.45);
    outline-offset: 2px;
    border-radius: 0.35rem;
}

.schedule-item:last-child {
    border-bottom: 0;
}

.schedule-item > time {
    color: var(--app-orange);
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .landing-page .landing-net-panel {
        height: auto;
    }

    .public-directory-tower {
        right: 0.5rem;
        height: 6.5rem;
        opacity: 0.35;
    }

    .public-directory-hero .workspace-copy {
        max-width: calc(100% - 5rem);
    }

    .public-live-card {
        grid-template-columns: 3rem minmax(0, 1fr) auto;
        gap: 0.75rem;
        padding: 0.85rem;
    }

    .public-live-card > img {
        width: 3rem;
        height: 3rem;
    }

    .public-live-card-meta {
        grid-column: 2;
        align-items: flex-start;
    }

    .public-live-card > i {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .schedule-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .schedule-item {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .schedule-item > time {
        grid-column: 1 / -1;
    }
}

/* Appearance Phase 2: light shared shell and basic pages. */
:root[data-theme='light'] body.app-page:not(.landing-page):not(.public-directory-page) {
    --app-bg: #edf2f4;
    --app-surface: #f7fafb;
    --app-surface-raised: #ffffff;
    --app-border: rgba(27, 81, 96, 0.2);
    --app-border-strong: rgba(13, 92, 113, 0.42);
    --app-text: #14242d;
    --app-heading: #0e202a;
    --app-muted: #52636d;
    --app-faint: #657680;
    --app-cyan: #087590;
    --app-link: #056b85;
    --app-link-hover: #034e62;
    --app-orange: #a34d00;
    --app-orange-text: #934500;
    --app-focus-ring: #087590;
    --app-page-background:
        radial-gradient(circle at 12% 8%, rgba(8, 117, 144, 0.09), transparent 28rem),
        radial-gradient(circle at 88% 18%, rgba(163, 77, 0, 0.06), transparent 24rem),
        var(--app-bg);
    --app-panel-background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 248, 0.98));
    --app-panel-shadow: 0 1rem 2.5rem rgba(18, 45, 57, 0.1);
    --app-control-bg: #ffffff;
    --app-control-border: #71838c;
    --app-control-placeholder: #657680;
    --app-control-disabled-bg: #e2e8eb;
    --app-control-disabled-text: #657680;
    --app-subtle-text: #52636d;
    --app-card-border: rgba(27, 81, 96, 0.24);
    --app-divider: rgba(27, 81, 96, 0.2);
    --app-divider-soft: rgba(27, 81, 96, 0.14);
    --app-status-bg: rgba(82, 99, 109, 0.08);
    --app-status-accent: #056b85;
    --app-interactive-border: rgba(5, 107, 133, 0.58);
    --app-interactive-outline: rgba(5, 107, 133, 0.18);
    --app-subtle-bg: rgba(8, 117, 144, 0.07);
    --app-danger-text: #9d2936;
    --app-danger-bg: #fff1f2;
    --app-danger-border: #c55560;
}

/* My Nets has a deliberately richer surface hierarchy than the basic site views. */
:root[data-theme='light'] body.net-manager-page {
    --app-border: rgba(20, 76, 92, 0.3);
    --app-border-strong: rgba(5, 101, 128, 0.68);
    --app-muted: #40545f;
    --app-cyan: #056b85;
    --app-orange: #934500;
    --app-card-border: rgba(20, 76, 92, 0.38);
    --app-divider: rgba(20, 76, 92, 0.32);
    --app-divider-soft: rgba(20, 76, 92, 0.22);
    --app-interactive-border: rgba(5, 101, 128, 0.78);
    --app-subtle-bg: rgba(5, 107, 133, 0.1);
    --app-control-border: #586f7a;
    background:
        radial-gradient(circle at 14% 8%, rgba(8, 117, 144, 0.09), transparent 32rem),
        radial-gradient(circle at 88% 20%, rgba(163, 77, 0, 0.05), transparent 26rem),
        var(--app-bg);
}

:root[data-theme='light'] .net-manager-page .net-manager-header-tower {
    opacity: 0.82;
}

:root[data-theme='light'] .net-manager-page .net-manager-hero {
    border-bottom-color: var(--app-border);
    background:
        radial-gradient(circle at 20% 25%, rgba(8, 117, 144, 0.1), transparent 28rem),
        linear-gradient(110deg, rgba(255, 255, 255, 0.78), rgba(224, 236, 240, 0.58) 62%, transparent);
}

:root[data-theme='light'] .net-manager-page :is(.workspace-title, .panel-heading h2) {
    color: var(--app-heading);
}

:root[data-theme='light'] .net-manager-page :is(.app-panel, .owned-nets-panel, #formContainerNetProfile) {
    border-color: var(--app-card-border);
    background: var(--app-panel-background);
    box-shadow: var(--app-panel-shadow);
}

:root[data-theme='light'] .net-manager-page :is(.owned-net-card, .app-option-card, .coowner-row, .connection-card) {
    border-color: var(--app-card-border);
    background: var(--app-surface-raised);
}

:root[data-theme='light'] .net-manager-page :is(.owned-net-card:hover, .app-option-card:hover) {
    border-color: var(--app-interactive-border);
}

:root[data-theme='light'] .net-manager-page .owned-net-card.is-live {
    border-color: #ad5608;
    background: linear-gradient(135deg, rgba(173, 86, 8, 0.12), var(--app-surface-raised) 55%);
}

:root[data-theme='light'] .net-manager-page .owned-net-card.is-preparing {
    border-color: rgba(5, 107, 133, 0.72);
}

:root[data-theme='light'] .net-manager-page :is(.owned-net-status.is-live, .schedule-occurrence.is-live .schedule-occurrence-status) {
    color: #7d3900;
    background: rgba(173, 86, 8, 0.16);
}

:root[data-theme='light'] .net-manager-page .owned-net-start.is-live {
    color: #8a4000;
    border-color: #ad5608;
    background: rgba(173, 86, 8, 0.13);
}

:root[data-theme='light'] .net-manager-page .owned-net-start.is-live:hover {
    color: #ffffff;
    background: #934500;
}

:root[data-theme='light'] .net-manager-page :is(.owned-net-status.is-preparing, .schedule-occurrence.is-preparing .schedule-occurrence-status, .schedule-occurrence.is-override .schedule-occurrence-status) {
    color: #045b71;
    background: rgba(5, 107, 133, 0.14);
}

:root[data-theme='light'] .net-manager-page .owned-net-start:not(.is-live):not(.is-preparing) {
    color: #06351d;
    border-color: #16854b;
    background: #5cdb95;
}

:root[data-theme='light'] .net-manager-page .owned-net-start.is-preparing {
    color: #045b71;
    border-color: rgba(5, 107, 133, 0.72);
    background: rgba(5, 107, 133, 0.1);
}

:root[data-theme='light'] .net-manager-page :is(.owned-net-actions, .app-form-actions, .schedule-occurrences) {
    border-color: var(--app-divider);
}

:root[data-theme='light'] .net-manager-page :is(.owned-net-status, .schedule-occurrence-status) {
    background: var(--app-status-bg);
}

:root[data-theme='light'] .net-manager-page :is(.owned-net-schedule, .form-status, .legacy-connection-notice) {
    background: var(--app-subtle-bg);
}

:root[data-theme='light'] .net-manager-page .owned-net-schedule {
    border-left-color: #087590;
}

:root[data-theme='light'] .net-manager-page :is(.app-field > label, .app-options-fieldset > legend) {
    color: var(--app-heading);
}

:root[data-theme='light'] .net-manager-page .app-input {
    color: var(--app-text) !important;
    border-color: var(--app-control-border);
    background-color: var(--app-control-bg) !important;
}

:root[data-theme='light'] .net-manager-page .app-input::placeholder,
:root[data-theme='light'] .net-manager-page :is(.app-field > small, .app-option-card small) {
    color: var(--app-control-placeholder);
    opacity: 1;
}

:root[data-theme='light'] .net-manager-page .app-input:focus {
    border-color: var(--app-cyan);
    box-shadow: 0 0 0 0.2rem rgba(8, 117, 144, 0.18);
}

:root[data-theme='light'] .net-manager-page .app-input:disabled {
    color: var(--app-control-disabled-text) !important;
    border-color: var(--app-border);
    background-color: var(--app-control-disabled-bg) !important;
}

:root[data-theme='light'] .net-manager-page .app-select option {
    color: var(--app-text);
    background: var(--app-surface-raised);
}

:root[data-theme='light'] .net-manager-page .app-option-card .form-check-input {
    border-color: var(--app-control-border);
    background-color: var(--app-control-bg);
}

:root[data-theme='light'] .net-manager-page .app-option-card .form-check-input:checked {
    border-color: var(--app-cyan);
    background-color: var(--app-cyan);
}

:root[data-theme='light'] .net-manager-page .app-button-secondary {
    color: #045b71;
    border-color: rgba(5, 107, 133, 0.72);
    background: var(--app-subtle-bg);
}

:root[data-theme='light'] .net-manager-page .app-button-secondary:is(:hover, :focus-visible) {
    color: var(--app-link-hover);
    border-color: var(--app-cyan);
    background: rgba(8, 117, 144, 0.12);
}

:root[data-theme='light'] .net-manager-page .app-button-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #ad5608, #934500);
    box-shadow: 0 0.65rem 1.5rem rgba(125, 57, 0, 0.16);
}

:root[data-theme='light'] .net-manager-page .app-button-primary:is(:hover, :focus-visible) {
    color: #ffffff;
    background: linear-gradient(135deg, #934500, #7d3900);
}

:root[data-theme='light'] .net-manager-page :is(.connection-drag-handle, .connection-order-button):is(:hover, :focus-visible) {
    border-color: var(--app-border);
    background: var(--app-subtle-bg);
}

:root[data-theme='light'] .net-manager-page .net-editor-panel .tox-tinymce {
    border-color: var(--app-control-border);
    background: var(--app-control-bg);
}

:root[data-theme='light'] .net-manager-page .net-editor-panel .tox-tinymce:focus-within {
    border-color: var(--app-cyan);
    box-shadow: 0 0 0 0.2rem rgba(8, 117, 144, 0.18);
}

:root[data-theme='light'] .net-manager-page .tox :is(.tox-editor-header, .tox-toolbar-overlord, .tox-toolbar, .tox-toolbar__primary, .tox-toolbar__overflow) {
    color: var(--app-text);
    border-color: var(--app-border);
    background-color: #edf3f5 !important;
}

:root[data-theme='light'] .net-manager-page .tox :is(.tox-tbtn, .tox-tbtn svg) {
    color: var(--app-text);
    fill: currentColor;
}

:root[data-theme='light'] .net-manager-page .tox :is(.tox-tbtn:hover, .tox-tbtn:focus, .tox-tbtn--enabled, .tox-tbtn--enabled:hover) {
    background: rgba(8, 117, 144, 0.14);
}

:root[data-theme='light'] .net-manager-page .tox :is(.tox-edit-area, .tox-edit-area__iframe) {
    background: var(--app-control-bg) !important;
}

:root[data-theme='light'] .net-manager-page .app-modal .modal-content {
    color: var(--app-text);
    border-color: var(--app-border-strong);
    background: var(--app-surface-raised);
    box-shadow: 0 1.5rem 4rem rgba(18, 45, 57, 0.22);
}

:root[data-theme='light'] .net-manager-page .app-modal .btn-close-white {
    filter: none;
}

:root[data-theme='light'] .net-manager-page .schedule-editor-body {
    background: var(--app-surface-raised);
}

:root[data-theme='light'] .net-manager-page :is(.schedule-recurrence-fields, .schedule-occurrence) {
    border-color: var(--app-card-border);
    background: var(--app-subtle-bg);
}

:root[data-theme='light'] .net-manager-page .schedule-weekdays span {
    color: var(--app-muted);
    border-color: var(--app-control-border);
    background: var(--app-control-bg);
}

:root[data-theme='light'] .net-manager-page .schedule-weekdays input:checked + span {
    color: #ffffff;
    border-color: var(--app-cyan);
    background: var(--app-cyan);
}

:root[data-theme='light'] .net-manager-page .app-button-danger {
    color: var(--app-danger-text);
    border-color: var(--app-danger-border);
    background: var(--app-danger-bg);
}

:root[data-theme='light'] .net-manager-page .app-button-danger:is(:hover, :focus-visible) {
    color: #ffffff;
    border-color: #9d2936;
    background: #9d2936;
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    :is(.app-navbar, .app-footer) {
    --app-bg: #0d1216;
    --app-surface: #171e24;
    --app-surface-raised: #202930;
    --app-border: rgba(116, 198, 212, 0.22);
    --app-border-strong: rgba(116, 198, 212, 0.48);
    --app-text: #f4f5f2;
    --app-muted: #9ba9b2;
    --app-cyan: #74c6d4;
    --app-link: #74c6d4;
    --app-link-hover: #a0e1ea;
    --app-orange: #dc8335;
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page) .app-footer {
    color: #b8c2c7;
    border-top-color: rgba(116, 198, 212, 0.18);
    background: #050d14 !important;
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    :is(.app-panel, .contact-card, .waiting-status-card, .privacy-preferences-card, .privacy-danger-card) {
    border-color: var(--app-border);
    background: var(--app-panel-background);
    box-shadow: var(--app-panel-shadow);
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    :is(.settings-sidebar, .settings-form-panel) {
    border-color: var(--app-border);
    background: var(--app-panel-background);
    box-shadow: var(--app-panel-shadow);
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    :is(.settings-hero, .favorites-hero, .guide-hero) {
    border-bottom-color: var(--app-border);
    background:
        radial-gradient(circle at 82% 20%, rgba(8, 117, 144, 0.1), transparent 24rem),
        linear-gradient(110deg, rgba(255, 255, 255, 0.76), rgba(224, 236, 240, 0.58));
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    :is(.workspace-title, .section-title, .panel-heading h2, .contact-heading h1, .contact-card h2) {
    color: var(--app-heading);
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    main a:not(.app-button):not(.settings-nav-item) {
    color: var(--app-link);
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    main a:not(.app-button):not(.settings-nav-item):hover {
    color: var(--app-link-hover);
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    .app-button-primary {
    color: #ffffff;
    background: #a94b00;
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    .app-button-primary:hover,
:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    .app-button-primary:focus-visible {
    color: #ffffff;
    background: #873c00;
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    .app-button-secondary {
    color: var(--app-link);
    border-color: var(--app-border-strong);
    background: var(--app-subtle-bg);
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    .app-button-secondary:hover,
:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    .app-button-secondary:focus-visible {
    color: var(--app-link-hover);
    border-color: var(--app-cyan);
    background: rgba(8, 117, 144, 0.12);
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    :is(.app-label, .app-field > label, .app-options-fieldset > legend) {
    color: var(--app-heading);
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    .app-input {
    color: var(--app-text) !important;
    border-color: var(--app-control-border);
    background-color: var(--app-control-bg) !important;
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    .app-input::placeholder {
    color: var(--app-control-placeholder);
    opacity: 1;
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    .app-input:focus {
    border-color: var(--app-cyan);
    box-shadow: 0 0 0 0.2rem rgba(8, 117, 144, 0.18);
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    .app-input:disabled {
    color: var(--app-control-disabled-text) !important;
    border-color: var(--app-border);
    background-color: var(--app-control-disabled-bg) !important;
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    .app-modal .modal-content {
    color: var(--app-text);
    border-color: var(--app-border-strong);
    background: var(--app-surface-raised);
    box-shadow: 0 1.5rem 4rem rgba(18, 45, 57, 0.22);
}

:root[data-theme='light'] body.app-page:not(.landing-page):not(.net-manager-page):not(.public-directory-page)
    .app-modal .btn-close-white {
    filter: none;
}

:root[data-theme='light'] .login-page {
    background:
        radial-gradient(circle at 16% 12%, rgba(8, 117, 144, 0.1), transparent 30rem),
        radial-gradient(circle at 88% 28%, rgba(163, 77, 0, 0.06), transparent 25rem),
        #edf2f4;
}

:root[data-theme='light'] .login-page .login-layout {
    border-color: var(--app-border-strong);
    background: var(--app-surface-raised);
    box-shadow: var(--app-panel-shadow);
}

:root[data-theme='light'] .login-page .login-intro {
    --app-text: #f4f5f2;
    --app-muted: #b7c3c9;
}

:root[data-theme='light'] .login-page .login-form-panel {
    border-color: var(--app-border);
    background: var(--app-surface-raised);
}

:root[data-theme='light'] .login-page :is(.login-form-panel h2, .login-page .app-label) {
    color: var(--app-heading);
}

:root[data-theme='light'] .login-page .login-form-panel > p,
:root[data-theme='light'] .login-page .login-divider {
    color: var(--app-muted);
}

:root[data-theme='light'] .login-page .login-divider::before,
:root[data-theme='light'] .login-page .login-divider::after {
    background: var(--app-border);
}

:root[data-theme='light'] .login-page .app-auth-button {
    color: var(--app-link);
    border-color: var(--app-border-strong);
    background: var(--app-subtle-bg);
}

:root[data-theme='light'] .login-page .app-auth-button:hover,
:root[data-theme='light'] .login-page .app-auth-button:focus-visible {
    color: var(--app-link-hover);
    border-color: var(--app-cyan);
    background: rgba(8, 117, 144, 0.12);
}

:root[data-theme='light'] .login-page .app-submit {
    color: #ffffff;
    background: #a94b00;
    box-shadow: 0 0.65rem 1.5rem rgba(133, 60, 0, 0.16);
}

:root[data-theme='light'] .login-page .app-submit:hover,
:root[data-theme='light'] .login-page .app-submit:focus-visible {
    color: #ffffff;
    background: #873c00;
}

:root[data-theme='light'] .login-page .app-submit:disabled {
    color: var(--app-control-disabled-text);
    background: var(--app-control-disabled-bg);
}

:root[data-theme='light'] .contact-main,
:root[data-theme='light'] .guide-main,
:root[data-theme='light'] .favorites-page {
    background:
        radial-gradient(circle at 14% 8%, rgba(8, 117, 144, 0.08), transparent 30rem),
        radial-gradient(circle at 88% 20%, rgba(163, 77, 0, 0.045), transparent 25rem),
        #edf2f4;
}

:root[data-theme='light'] .guide-main :is(.guide-contents, .guide-content) {
    border-color: var(--app-border);
    background: var(--app-panel-background);
    box-shadow: var(--app-panel-shadow);
}

:root[data-theme='light'] .guide-contents-list a:hover,
:root[data-theme='light'] .guide-contents-list a:focus-visible {
    color: var(--app-heading);
    border-color: var(--app-border);
    background: var(--app-subtle-bg);
}

:root[data-theme='light'] .guide-section-label {
    color: var(--app-orange-text);
}

:root[data-theme='light'] .guide-section :is(p, li) {
    color: var(--app-muted);
}

:root[data-theme='light'] .guide-section strong {
    color: var(--app-heading);
}

:root[data-theme='light'] .guide-section a {
    color: var(--app-link);
    text-decoration-color: rgba(5, 107, 133, 0.45);
}

:root[data-theme='light'] .guide-section a:hover {
    color: var(--app-link-hover);
}

:root[data-theme='light'] .guide-section code {
    color: #6c387c;
    border-color: var(--app-border);
    background: #edf2f4;
}

:root[data-theme='light'] .guide-table {
    color: var(--app-muted);
    background: var(--app-surface-raised);
}

:root[data-theme='light'] .guide-table :is(th, td) {
    border-bottom-color: var(--app-border);
}

:root[data-theme='light'] .guide-table th,
:root[data-theme='light'] .guide-table tbody tr:hover {
    background: var(--app-subtle-bg);
}

:root[data-theme='light'] .guide-code {
    color: var(--app-text);
    background: #e8eff1;
}

:root[data-theme='light'] .waiting-off-air {
    color: var(--app-muted);
    border-color: var(--app-border-strong);
    background: rgba(82, 99, 109, 0.08);
}

:root[data-theme='light'] .waiting-favorite .favicon {
    color: var(--app-faint);
}

:root[data-theme='light'] .waiting-favorite :is(.favicon:hover, .favicon:focus-visible, .bi-heart-fill) {
    color: var(--app-orange-text);
}

:root[data-theme='light'] .waiting-connection p {
    color: var(--app-text);
}

:root[data-theme='light'] .waiting-message,
:root[data-theme='light'] .privacy-setting-row {
    border-color: var(--app-border);
}

:root[data-theme='light'] .privacy-toggle {
    border-color: var(--app-control-border);
    background: #d7e0e4;
}

:root[data-theme='light'] .privacy-toggle::after {
    background: #60737d;
}

:root[data-theme='light'] .privacy-toggle:checked {
    border-color: var(--app-cyan);
    background: var(--app-cyan);
}

:root[data-theme='light'] .privacy-toggle:checked::after {
    background: #ffffff;
}

:root[data-theme='light'] .privacy-danger-card {
    border-color: rgba(157, 41, 54, 0.38) !important;
}

:root[data-theme='light'] .privacy-danger-button {
    color: #ffffff;
    border-color: #9d2936;
    background: #9d2936;
}

:root[data-theme='light'] .privacy-danger-button:hover,
:root[data-theme='light'] .privacy-danger-button:focus-visible {
    color: #ffffff;
    border-color: #791d28;
    background: #791d28;
}

:root[data-theme='light'] .settings-nav-item:hover {
    color: var(--app-link);
    border-color: var(--app-border);
    background: var(--app-subtle-bg);
}

:root[data-theme='light'] .settings-nav-item.is-current {
    color: var(--app-heading);
    border-color: var(--app-border-strong);
    background: rgba(8, 117, 144, 0.1);
}

:root[data-theme='light'] .settings-form-panel #userprofile_form_status {
    color: var(--app-link) !important;
    background: var(--app-subtle-bg);
}

:root[data-theme='light'] .settings-form-note,
:root[data-theme='light'] .appearance-option {
    border-color: var(--app-border);
    background: var(--app-subtle-bg);
}

:root[data-theme='light'] .appearance-option:hover,
:root[data-theme='light'] .appearance-option:focus-within,
:root[data-theme='light'] .appearance-option:has(input:checked) {
    border-color: var(--app-border-strong);
    background: rgba(8, 117, 144, 0.12);
}

:root[data-theme='light'] .consent-warning {
    color: #78400f;
    background: rgba(163, 77, 0, 0.08);
}

/* Appearance Phase 3: Dashboard and public net discovery. */
:root[data-theme='light'] :is(body.landing-page, body.public-directory-page) {
    --app-bg: #edf2f4;
    --app-surface: #f7fafb;
    --app-surface-raised: #ffffff;
    --app-border: rgba(27, 81, 96, 0.2);
    --app-border-strong: rgba(13, 92, 113, 0.42);
    --app-text: #14242d;
    --app-heading: #0e202a;
    --app-muted: #52636d;
    --app-faint: #657680;
    --app-subtle-text: #52636d;
    --app-cyan: #087590;
    --app-link: #056b85;
    --app-link-hover: #034e62;
    --app-orange: #a34d00;
    --app-orange-text: #934500;
    --app-focus-ring: #087590;
    --app-page-background:
        radial-gradient(circle at 12% 8%, rgba(8, 117, 144, 0.09), transparent 28rem),
        radial-gradient(circle at 88% 18%, rgba(163, 77, 0, 0.06), transparent 24rem),
        var(--app-bg);
    --app-panel-background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 248, 0.98));
    --app-panel-shadow: 0 1rem 2.5rem rgba(18, 45, 57, 0.1);
    --app-card-border: rgba(27, 81, 96, 0.24);
    --app-divider: rgba(27, 81, 96, 0.2);
    --app-divider-soft: rgba(27, 81, 96, 0.14);
    --app-subtle-bg: rgba(8, 117, 144, 0.07);
    --app-status-bg: rgba(82, 99, 109, 0.08);
    --app-status-accent: #056b85;
    --app-interactive-border: rgba(5, 107, 133, 0.58);
    --app-interactive-outline: rgba(5, 107, 133, 0.18);
    --app-live-text: #ffffff;
    --app-live-bg: #247143;
    --app-live-border: #1c5d37;
    --app-live-accent: #176b38;
    --app-card-hover: rgba(8, 117, 144, 0.09);
}

:root[data-theme='light'] :is(.landing-page, .public-directory-page) :is(.app-navbar, .app-footer) {
    --app-bg: #0d1216;
    --app-surface: #171e24;
    --app-surface-raised: #202930;
    --app-border: rgba(116, 198, 212, 0.22);
    --app-border-strong: rgba(116, 198, 212, 0.48);
    --app-text: #f4f5f2;
    --app-muted: #9ba9b2;
    --app-cyan: #74c6d4;
    --app-link: #74c6d4;
    --app-link-hover: #a0e1ea;
    --app-orange: #dc8335;
}

:root[data-theme='light'] .landing-page {
    background:
        radial-gradient(circle at 78% 10%, rgba(8, 117, 144, 0.08), transparent 30rem),
        radial-gradient(circle at 18% 3%, rgba(163, 77, 0, 0.045), transparent 24rem),
        var(--app-bg);
}

/* Keep hero copy legible in light mode without coupling Appearance to hero period. */
:root[data-theme='light'] .landing-page .landing-hero {
    --app-text: #f4f5f2;
    --app-cyan: #74c6d4;
    color: var(--app-dashboard-hero-copy);
}

:root[data-theme='light'] .landing-features {
    border-bottom-color: var(--app-border);
    background: #e5edef;
}

:root[data-theme='light'] .landing-feature-grid {
    border-color: var(--app-divider);
}

:root[data-theme='light'] .landing-feature-card {
    border-color: var(--app-divider);
    background: transparent;
}

:root[data-theme='light'] .landing-feature-icon,
:root[data-theme='light'] .landing-feature-card h2 {
    color: var(--app-cyan);
}

:root[data-theme='light'] .landing-feature-card:nth-child(even) :is(.landing-feature-icon, h2) {
    color: var(--app-orange-text);
}

:root[data-theme='light'] .landing-feature-card p {
    color: var(--app-muted);
}

:root[data-theme='light'] .landing-net-board {
    background:
        radial-gradient(circle at 50% 0%, rgba(8, 117, 144, 0.07), transparent 36rem),
        var(--app-bg);
}

:root[data-theme='light'] .landing-net-panel {
    border-color: var(--app-card-border);
    background: var(--app-panel-background);
    box-shadow: var(--app-panel-shadow);
}

:root[data-theme='light'] .landing-net-panel-heading {
    border-bottom-color: var(--app-divider);
}

:root[data-theme='light'] .landing-net-panel-heading h3,
:root[data-theme='light'] .landing-panel-icon {
    color: var(--app-heading);
}

:root[data-theme='light'] .landing-live-dot {
    background: var(--app-live-accent);
    box-shadow: 0 0 0.7rem rgba(23, 107, 56, 0.24);
}

:root[data-theme='light'] .landing-page .net-card {
    color: var(--app-muted);
    border-bottom-color: var(--app-divider) !important;
}

:root[data-theme='light'] .landing-page .net-card:hover,
:root[data-theme='light'] .landing-page .net-card:focus-visible,
:root[data-theme='light'] .landing-page .scheduled-net-card:hover,
:root[data-theme='light'] .landing-page .scheduled-net-card:focus-visible {
    background: var(--app-card-hover) !important;
}

:root[data-theme='light'] .landing-page .net-card:focus-visible,
:root[data-theme='light'] .landing-page .scheduled-net-card:focus-visible {
    outline: 2px solid var(--app-focus-ring);
    outline-offset: 2px;
}

:root[data-theme='light'] :is(.landing-live-net-title, .scheduled-net-card-title, .scheduled-net-card-title a) {
    color: var(--app-heading);
}

:root[data-theme='light'] :is(.landing-live-net-frequency, .landing-live-net-time, .landing-check-in-count) {
    color: var(--app-muted);
}

:root[data-theme='light'] .scheduled-net-card-title a:hover,
:root[data-theme='light'] .scheduled-net-card-title a:focus-visible,
:root[data-theme='light'] .landing-net-action,
:root[data-theme='light'] .landing-net-action:hover,
:root[data-theme='light'] .landing-net-action:focus-visible {
    color: var(--app-link);
}

:root[data-theme='light'] .landing-net-action:hover,
:root[data-theme='light'] .landing-net-action:focus-visible {
    color: var(--app-link-hover);
}

:root[data-theme='light'] .landing-net-favorite {
    color: var(--app-faint);
}

:root[data-theme='light'] .landing-net-favorite:hover,
:root[data-theme='light'] .landing-net-favorite:focus-visible,
:root[data-theme='light'] .landing-net-favorite.bi-heart-fill {
    color: var(--app-orange-text);
}

:root[data-theme='light'] :is(.landing-live-panel .landing-live-count, .public-live-total) {
    color: var(--app-live-accent);
}

:root[data-theme='light'] .landing-on-air {
    color: var(--app-live-text);
    border-color: var(--app-live-border);
    background: var(--app-live-bg);
}

:root[data-theme='light'] .landing-page :is(.nets-state, .scheduled-nets-empty) {
    color: var(--app-muted);
    background: transparent;
}

:root[data-theme='light'] .public-directory-page {
    background:
        radial-gradient(circle at 14% 8%, rgba(8, 117, 144, 0.08), transparent 32rem),
        radial-gradient(circle at 88% 20%, rgba(163, 77, 0, 0.045), transparent 26rem),
        var(--app-bg);
}

:root[data-theme='light'] .public-directory-hero {
    border-bottom-color: var(--app-border);
    background:
        radial-gradient(circle at 82% 20%, rgba(8, 117, 144, 0.1), transparent 24rem),
        linear-gradient(110deg, rgba(255, 255, 255, 0.76), rgba(224, 236, 240, 0.58));
}

:root[data-theme='light'] :is(.public-directory-heading h2, .schedule-toolbar h2) {
    color: var(--app-heading);
}

:root[data-theme='light'] :is(.public-live-card, .schedule-day) {
    border-color: var(--app-card-border);
    background: var(--app-panel-background);
    box-shadow: var(--app-panel-shadow);
}

:root[data-theme='light'] .public-live-card {
    color: var(--app-text);
}

:root[data-theme='light'] :is(.public-live-card:hover, .schedule-item:hover) {
    color: var(--app-text);
    border-color: var(--app-interactive-border);
    background: var(--app-card-hover);
}

:root[data-theme='light'] :is(.public-live-card:focus-visible, .schedule-item:focus-visible) {
    color: var(--app-text);
    border-color: var(--app-interactive-border);
    background: var(--app-card-hover);
    outline: 2px solid var(--app-focus-ring);
    outline-offset: 2px;
}

:root[data-theme='light'] :is(.public-live-card-info strong, .schedule-item-info strong) {
    color: var(--app-heading);
}

:root[data-theme='light'] :is(.public-live-card-info span, .public-live-card-meta > span:last-child, .schedule-item-info span) {
    color: var(--app-muted);
}

:root[data-theme='light'] .public-directory-empty {
    color: var(--app-muted);
}

:root[data-theme='light'] .schedule-view-tabs {
    border-bottom-color: var(--app-divider);
}

:root[data-theme='light'] :is(.schedule-view-tabs a, .schedule-period-controls button) {
    color: var(--app-muted);
    border-color: var(--app-border);
    background: rgba(255, 255, 255, 0.72);
}

:root[data-theme='light']
    :is(
        .schedule-view-tabs a:hover,
        .schedule-view-tabs a:focus-visible,
        .schedule-view-tabs a.is-current,
        .schedule-period-controls button:hover,
        .schedule-period-controls button:focus-visible
    ) {
    color: var(--app-link);
    border-color: var(--app-border-strong);
}

:root[data-theme='light'] .schedule-view-tabs a.is-current {
    color: var(--app-link-hover);
    background: var(--app-subtle-bg);
}

:root[data-theme='light'] .schedule-day > h3 {
    color: var(--app-link);
    border-bottom-color: var(--app-divider);
    background: var(--app-subtle-bg);
}

:root[data-theme='light'] .schedule-item {
    color: var(--app-text);
    border-bottom-color: var(--app-divider-soft);
}

:root[data-theme='light'] .schedule-item > time {
    color: var(--app-orange-text);
}

:root[data-theme='light'] :is(.landing-page, .public-directory-page) .landing-footer {
    color: #d3d8da;
    background: #050d14 !important;
}

/* Shared two-state theme control and contained website light chrome. */
.app-theme-item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.app-theme-toggle {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    min-height: 2.4rem;
    margin-left: .35rem;
    padding: .25rem .45rem;
    color: #f4f5f2;
    border: 1px solid rgba(116, 198, 212, .3);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}

.app-theme-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.app-theme-toggle-track {
    position: relative;
    width: 2rem;
    height: 1.1rem;
    background: #465963;
    border: 1px solid #7d9ba5;
    border-radius: 999px;
    transition: background-color .15s ease, border-color .15s ease;
}

.app-theme-toggle-track::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: .75rem;
    height: .75rem;
    content: '';
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .15s ease;
}

.app-theme-toggle input:checked + .app-theme-toggle-track {
    background: #087590;
    border-color: #74c6d4;
}

.app-theme-toggle input:checked + .app-theme-toggle-track::after {
    transform: translateX(.88rem);
}

.app-theme-toggle input:focus-visible + .app-theme-toggle-track {
    outline: 2px solid #00c8f0;
    outline-offset: 2px;
}

:root[data-theme='light'] body.app-page:not(.nco-logger-page) .app-navbar {
    border-bottom-color: rgba(27, 81, 96, .22);
    background: rgba(247, 250, 251, .97) !important;
    box-shadow: 0 .45rem 1.4rem rgba(18, 45, 57, .1);
}

:root[data-theme='light'] body.app-page:not(.nco-logger-page) .app-navbar .nav-link {
    color: #18313d !important;
}

:root[data-theme='light'] body.app-page:not(.nco-logger-page) .app-navbar .nav-link:is(:hover, :focus-visible) {
    color: #056b85 !important;
}

:root[data-theme='light'] body.app-page:not(.nco-logger-page) .app-navbar .navbar-toggler {
    border-color: rgba(27, 81, 96, .38);
}

:root[data-theme='light'] body.app-page:not(.nco-logger-page) .app-navbar .navbar-toggler-icon {
    filter: invert(1) grayscale(1);
}

:root[data-theme='light'] body.app-page:not(.nco-logger-page) .app-theme-toggle {
    color: #18313d;
    border-color: rgba(27, 81, 96, .28);
    background: rgba(8, 117, 144, .05);
}

:root[data-theme='light'] body.app-page:not(.nco-logger-page) .app-theme-toggle-track {
    background: #d5e1e5;
    border-color: #718993;
}

:root[data-theme='light'] body.app-page:not(.nco-logger-page) .app-footer {
    color: #52636d;
    border-top-color: rgba(27, 81, 96, .2);
    background: #e4edef !important;
}

:root[data-theme='light'] body.app-page:not(.nco-logger-page) .app-footer :is(p, small) {
    color: #52636d;
}

:root[data-theme='light'] body.app-page:not(.nco-logger-page) .app-footer :is(a, .landing-footer-link, .landing-footer-bottom a) {
    color: #174f60;
}

:root[data-theme='light'] body.app-page:not(.nco-logger-page) .app-footer :is(a, .landing-footer-link, .landing-footer-bottom a):is(:hover, :focus-visible) {
    color: #873c00;
}

:root[data-theme='light'] body.app-page:not(.nco-logger-page) .app-footer .landing-footer-column h2 {
    color: #056b85;
}

:root[data-theme='light'] body.app-page:not(.nco-logger-page) .app-footer :is(.landing-footer-brand, .landing-footer-column, .landing-footer-bottom) {
    border-color: rgba(27, 81, 96, .2);
}

@media (max-width: 991.98px) {
    .app-theme-item {
        align-items: center;
    }

    .app-theme-toggle {
        justify-content: flex-start;
        width: fit-content;
        min-height: 2.75rem;
        gap: .5rem;
        margin: .35rem 0 .15rem .4rem;
    }
}