:root {
    --qf-bg: #07111f;
    --qf-bg-soft: #0a1626;
    --qf-panel: #0d1b2c;
    --qf-panel-light: #112238;
    --qf-border: rgba(148, 163, 184, 0.16);
    --qf-border-strong: rgba(103, 232, 249, 0.28);
    --qf-text: #edf6ff;
    --qf-muted: #8fa6bd;
    --qf-dim: #60798f;
    --qf-accent: #59d8ff;
    --qf-accent-2: #7fffd4;
    --qf-cyan: var(--qf-accent);
    --qf-cyan-soft: rgba(89,216,255,.10);
    --qf-green: #4ade80;
    --qf-green-soft: rgba(74,222,128,.08);
    --qf-red: #fb7185;
    --qf-red-soft: rgba(251,113,133,.08);
    --qf-orange: #fbbf24;
    --qf-orange-soft: rgba(251,191,36,.10);
    --qf-blue: #60a5fa;
    --qf-blue-soft: rgba(96,165,250,.10);
    --qf-purple: #c084fc;
    --qf-radius: 22px;
    --qf-shadow: 0 22px 55px rgba(0, 0, 0, 0.28);
}

* {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
}

body {
    margin: 0;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background:
        linear-gradient(rgba(4, 12, 21, .70), rgba(4, 12, 21, .82)),
        url("../img/qsoforge-ysf-c4fm-bg.png") center center / cover no-repeat fixed,
        linear-gradient(180deg, #07111f 0%, #050d16 100%);
    color: var(--qf-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .72;
    background:
        linear-gradient(rgba(89,216,255,.045) 1px, transparent 1px) 0 0 / 120px 120px,
        linear-gradient(90deg, rgba(89,216,255,.045) 1px, transparent 1px) 0 0 / 120px 120px,
        radial-gradient(circle at 18% 24%, transparent 0 52px, rgba(89,216,255,.11) 53px 54px, transparent 55px),
        radial-gradient(circle at 74% 68%, transparent 0 74px, rgba(127,255,212,.08) 75px 76px, transparent 77px),
        radial-gradient(circle at 82% 22%, transparent 0 38px, rgba(96,165,250,.10) 39px 40px, transparent 41px),
        radial-gradient(circle at 22% 72%, rgba(89,216,255,.18) 0 2px, transparent 3px),
        radial-gradient(circle at 31% 48%, rgba(127,255,212,.16) 0 2px, transparent 3px),
        radial-gradient(circle at 63% 26%, rgba(96,165,250,.14) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 58%, rgba(89,216,255,.16) 0 2px, transparent 3px);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .34;
    background:
        linear-gradient(126deg, transparent 0 32%, rgba(89,216,255,.09) 32.1%, transparent 32.6%) 0 0 / 340px 220px,
        linear-gradient(126deg, transparent 0 58%, rgba(127,255,212,.08) 58.1%, transparent 58.6%) 0 0 / 420px 260px,
        linear-gradient(0deg, rgba(255,255,255,.018), rgba(255,255,255,0)) 0 0 / 100% 3px;
    mix-blend-mode: screen;
}

button,
input,
select {
    font: inherit;
}

.qf-shell {
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.qf-page-width {
    width: 100%;
    max-width: 1540px;
    margin-right: auto;
    margin-left: auto;
    padding-left: clamp(16px, 3vw, 42px);
    padding-right: clamp(16px, 3vw, 42px);
}

.qf-topbar {
    border-bottom: 1px solid var(--qf-border);
    background: rgba(5, 14, 25, .78);
    backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.qf-topbar-inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.qf-brand-group,
.qf-topbar-actions {
    display: flex;
    align-items: center;
}

.qf-brand-group {
    gap: 13px;
    min-width: 0;
}

.qf-brand-mark {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    font-weight: 900;
    letter-spacing: -.09em;
    color: #eaffff;
    background: linear-gradient(145deg, rgba(89,216,255,.2), rgba(127,255,212,.08));
    border: 1px solid rgba(89,216,255,.32);
    box-shadow: inset 0 0 20px rgba(89,216,255,.06);
}

.qf-brand-mark::after {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(127,255,212,.18);
    border-radius: 50%;
}

.qf-brand-mark span,
.qf-brand-mark strong {
    position: relative;
    z-index: 1;
    font-size: 1rem;
}

.qf-brand-mark strong {
    color: var(--qf-accent);
    margin-left: 1px;
}

.qf-brand-mark i {
    position: absolute;
    z-index: 2;
    right: 4px;
    bottom: 2px;
    font-size: .65rem;
    color: var(--qf-accent-2);
    font-style: normal;
}

.qf-brand-name {
    color: var(--qf-text);
    font-size: 1.08rem;
    font-weight: 850;
    letter-spacing: .02em;
    line-height: 1.05;
}

.qf-brand-name span {
    color: var(--qf-accent);
    font-weight: 700;
}

.qf-brand-subtitle {
    margin-top: 5px;
    color: var(--qf-muted);
    font-size: .72rem;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.qf-topbar-actions {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.qf-language-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(132,167,195,.17);
    border-radius: 12px;
    background: rgba(4,13,24,.64);
}

.qf-lang-option {
    min-width: 35px;
    min-height: 28px;
    padding: 4px 8px;
    border: 0;
    border-radius: 8px;
    color: var(--qf-dim);
    background: transparent;
    font-size: .67rem;
    font-weight: 850;
}

.qf-lang-option.active {
    color: var(--qf-cyan);
    background: var(--qf-cyan-soft);
}

.qf-lang-option:disabled {
    opacity: .48;
}

.qf-status-pill {
    min-height: 36px;
    padding: 6px 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--qf-border);
    border-radius: 999px;
    color: var(--qf-muted);
    background: rgba(255,255,255,.025);
    font-size: .69rem;
}

.qf-status-pill strong {
    color: var(--qf-orange);
    font-size: .67rem;
    letter-spacing: .05em;
}

.qf-status-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--qf-orange);
}

.qf-status-pill.online {
    border-color: rgba(88,228,141,.20);
    background: var(--qf-green-soft);
}

.qf-status-pill.online .qf-status-led {
    background: var(--qf-green);
    box-shadow: 0 0 11px rgba(88,228,141,.55);
}

.qf-status-pill.online strong {
    color: var(--qf-green);
}

.qf-status-pill.offline {
    border-color: rgba(255,96,113,.20);
    background: var(--qf-red-soft);
}

.qf-status-pill.offline .qf-status-led {
    background: var(--qf-red);
}

.qf-status-pill.offline strong {
    color: var(--qf-red);
}

.qf-nav-shell {
    padding: 16px 0 4px;
}

.qf-nav {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 6px;
    border: 1px solid var(--qf-border);
    border-radius: 14px;
    background: rgba(8,20,34,.72);
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

.qf-nav-link {
    min-height: 38px;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--qf-muted);
    background: transparent;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 700;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.qf-nav-link:hover {
    color: var(--qf-text);
    background: rgba(255,255,255,.035);
    border-color: var(--qf-border);
}

.qf-nav-link.active {
    color: #eaffff;
    background: rgba(89,216,255,.10);
    border-color: rgba(89,216,255,.25);
}

.qf-nav-spacer {
    flex: 1 1 auto;
}

.qf-nav-icon {
    width: 18px;
    text-align: center;
    font-size: .9rem;
    transition: transform .15s ease, filter .15s ease;
}

.qf-nav-dashboard .qf-nav-icon {
    color: #58dcff;
}

.qf-nav-personalization .qf-nav-icon {
    color: var(--qf-purple);
}

.qf-nav-settings .qf-nav-icon {
    color: #fbbf24;
}

.qf-nav-banned .qf-nav-icon {
    color: #fb7185;
}

.qf-nav-telegram {
    color: #8bc7ff;
}

.qf-nav-telegram .qf-nav-icon {
    color: #60a5fa;
}

.qf-nav-link:hover .qf-nav-icon,
.qf-nav-link.active .qf-nav-icon {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 7px currentColor);
}

.qf-hero {
    margin-top: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
    gap: 18px;
    align-items: stretch;
}

.qf-hero-main,
.qf-hero-status {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--qf-border);
    border-radius: var(--qf-radius);
    background: linear-gradient(145deg, rgba(16,35,56,.84), rgba(8,20,34,.82));
    box-shadow: var(--qf-shadow);
    backdrop-filter: blur(4px);
}

.qf-hero-main {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 4vw, 46px);
}

.qf-hero-main::after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: -115px;
    top: -155px;
    border-radius: 50%;
    border: 1px solid rgba(89,216,255,.11);
    box-shadow:
        0 0 0 42px rgba(89,216,255,.025),
        0 0 0 92px rgba(127,255,212,.018);
    pointer-events: none;
}

.qf-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--qf-accent);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.qf-kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--qf-accent-2);
    box-shadow: 0 0 14px rgba(127,255,212,.58);
}

.qf-instance-row {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}


.qf-instance-logo {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    margin-right: 0;
    object-fit: contain;
    border-radius: 16px;
    padding: 6px;
    border: 1px solid var(--qf-border);
    background: rgba(255,255,255,.025);
}

.qf-instance-row > div:last-child {
    min-width: 0;
    flex: 1 1 auto;
}

.qf-instance-row h1 {
    margin: 0;
    font-size: clamp(1.2rem, 2.35vw, 2.35rem);
    line-height: 1;
    letter-spacing: -.035em;
    font-weight: 860;
    color: #f6fbff;
    white-space: nowrap;
}

.qf-instance-subtitle {
    margin: 9px 0 0;
    color: #b8cada;
    font-size: clamp(.95rem, 1.8vw, 1.2rem);
    font-weight: 400;
}

.qf-tagline {
    max-width: 760px;
    margin: 20px 0 0;
    color: var(--qf-muted);
    font-size: .9rem;
}

.qf-identity-tags {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qf-identity-tags span {
    padding: 6px 9px;
    border: 1px solid var(--qf-border);
    border-radius: 8px;
    color: var(--qf-muted);
    background: rgba(255,255,255,.02);
    font-size: .67rem;
}

.qf-identity-tags strong {
    margin-left: 5px;
    color: var(--qf-text);
}

.qf-hero-status {
    padding: 20px;
}

.qf-hero-status-label {
    margin-bottom: 12px;
    color: var(--qf-cyan);
    font-size: .76rem;
    letter-spacing: 0;
    font-weight: 650;
    text-align: center;
}

.qf-rooms-panel {
    justify-content: flex-start;
}

.qf-rooms-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.qf-rooms-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: .71rem;
}

.qf-rooms-table th {
    padding: 9px 8px;
    color: var(--qf-muted);
    border-bottom: 1px solid var(--qf-border);
    font-weight: 700;
    text-align: center;
}

.qf-rooms-table th:nth-child(1),
.qf-rooms-table td:nth-child(1) {
    width: 22%;
}

.qf-rooms-table th:nth-child(2),
.qf-rooms-table td:nth-child(2) {
    width: 56%;
}

.qf-rooms-table th:nth-child(3),
.qf-rooms-table td:nth-child(3) {
    width: 22%;
}

.qf-rooms-table td {
    padding: 8px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    color: var(--qf-text);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qf-rooms-table tbody tr:last-child td {
    border-bottom: 0;
}

.qf-rooms-table tbody tr.active {
    background: rgba(34,197,94,.085);
}

.qf-rooms-table tbody tr.active .qf-room-name {
    font-weight: 800;
}

.qf-room-dgid {
    color: var(--qf-cyan) !important;
    font-weight: 800;
}

.qf-room-users {
    color: var(--qf-green) !important;
    font-weight: 900;
}

.qf-rooms-empty {
    padding: 18px 8px !important;
    color: var(--qf-muted) !important;
}

.qf-rooms-meta {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
}

.qf-rooms-meta > span {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--qf-border);
    border-radius: 9px;
    color: var(--qf-muted);
    background: rgba(255,255,255,.018);
    font-size: .59rem;
    text-align: center;
}

.qf-rooms-meta strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--qf-text);
    font-size: .67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qf-rooms-meta #hero-dgid-default {
    color: var(--qf-accent-2);
}

.qf-rooms-meta #qf-live-clock {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.qf-main {
    padding: 14px 0 48px;
}

.qf-primary-grid {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(300px,1fr);
    gap: 14px;
}

.qf-panel {
    overflow: hidden;
    border: 1px solid var(--qf-border);
    border-radius: var(--qf-radius);
    background: var(--qf-panel);
    box-shadow: var(--qf-shadow);
}

.qf-panel-head {
    min-height: 72px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--qf-border);
}

.qf-panel-kicker {
    color: var(--qf-cyan);
    font-size: .63rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.qf-panel-head h2 {
    margin: 4px 0 0;
    color: var(--qf-text);
    font-size: 1.03rem;
    letter-spacing: -.02em;
}

.qf-title-icon {
    margin-right: 5px;
    color: var(--qf-cyan);
}

.qf-panel-live.active {
    border-color: rgba(251,113,133,.42);
    box-shadow:
        var(--qf-shadow),
        0 0 24px rgba(251,113,133,.08);
}

.qf-live-badge {
    min-width: 102px;
    padding: 6px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(74,222,128,.30);
    border-radius: 999px;
    color: #9df6bb;
    background: var(--qf-green-soft);
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .075em;
    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.qf-live-badge.active {
    color: #ff9aad;
    border-color: rgba(251,113,133,.30);
    background: var(--qf-red-soft);
    box-shadow: 0 0 14px rgba(251,113,133,.05);
}

.qf-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--qf-green);
    box-shadow: 0 0 10px rgba(74,222,128,.48);
}

.qf-live-badge.active .qf-live-dot {
    background: var(--qf-red);
    box-shadow: 0 0 12px rgba(251,113,133,.58);
    animation: qfTxPulse 1s infinite;
}

@keyframes qfTxPulse {
    50% {
        opacity: .35;
    }
}

.qf-live-stage {
    min-height: 190px;
    padding: 22px;
    display: grid;
    grid-template-columns: 110px minmax(0,1fr);
    align-items: center;
    gap: 22px;
}

.qf-live-orbit {
    width: 100px;
    height: 100px;
    position: relative;
    display: grid;
    place-items: center;
    border: 1px solid rgba(53,224,207,.22);
    border-radius: 50%;
}

.qf-live-orbit span {
    position: absolute;
    border: 1px solid rgba(53,224,207,.12);
    border-radius: 50%;
}

.qf-live-orbit span:nth-child(1) {
    width: 72px;
    height: 72px;
}

.qf-live-orbit span:nth-child(2) {
    width: 86px;
    height: 86px;
}

.qf-live-orbit span:nth-child(3) {
    width: 114px;
    height: 114px;
}

.qf-live-orbit strong {
    position: relative;
    z-index: 2;
    color: var(--qf-cyan);
    font-size: .82rem;
    letter-spacing: .08em;
}

.qf-live-content {
    min-width: 0;
}

.qf-live-callsign {
    text-align: center;
}

.qf-live-callsign > span {
    display: block;
    margin-bottom: 5px;
    color: var(--qf-muted);
    font-size: .62rem;
    text-transform: uppercase;
}

.qf-live-callsign > strong {
    display: block;
    overflow: hidden;
    color: var(--qf-text);
    font-size: clamp(1.9rem, 3.5vw, 2.8rem);
    line-height: 1;
    letter-spacing: -.04em;
    text-overflow: ellipsis;
    transition:
        color .18s ease,
        text-shadow .18s ease;
}

.qf-panel-live.active .qf-live-callsign > strong {
    color: #ff9aad;
    text-shadow: 0 0 15px rgba(251,113,133,.42);
}

.qf-live-data {
    margin-top: 17px;
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 7px;
}

.qf-live-data > div {
    padding: 8px 10px;
    border: 1px solid var(--qf-border);
    border-radius: 9px;
    background: rgba(255,255,255,.018);
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.qf-panel-live.active .qf-live-data > div {
    border-color: rgba(251,113,133,.42);
    background: rgba(251,113,133,.025);
    box-shadow: 0 0 14px rgba(251,113,133,.08);
}

.qf-live-data span {
    display: block;
    color: var(--qf-muted);
    font-size: .59rem;
}

.qf-live-data strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--qf-text);
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qf-resource-list {
    padding: 18px;
    display: grid;
    gap: 18px;
}

.qf-resource-top {
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.qf-resource-top span {
    color: var(--qf-muted);
    font-size: .7rem;
    font-weight: 700;
}

.qf-resource-top strong {
    color: var(--qf-text);
    font-size: .76rem;
}

.qf-progress {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
}

.qf-progress > div {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--qf-cyan), var(--qf-blue));
}

.qf-resource small {
    display: block;
    margin-top: 6px;
    color: var(--qf-dim);
    font-size: .61rem;
}

.qf-section-block {
    margin-top: 14px;
}

.qf-panel-head-table {
    min-height: 70px;
}

.qf-count-chip,
.qf-history-limit {
    padding: 5px 9px;
    border: 1px solid rgba(53,224,207,.16);
    border-radius: 999px;
    color: var(--qf-muted);
    background: var(--qf-cyan-soft);
    font-size: .63rem;
}

.qf-count-chip strong,
.qf-history-limit {
    color: var(--qf-cyan);
    font-weight: 850;
}

.qf-history-limit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.qf-history-limit::before {
    content: "ÚLTIMAS";
    color: var(--qf-muted);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.qf-nxdn-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.qf-nxdn-title .qf-title-icon {
    margin-right: 0;
    color: var(--qf-cyan);
    font-size: 1em;
}

.qf-table-wrap {
    overflow-x: auto;
}

.qf-history-wrap {
    max-height: 430px;
    overflow-y: auto;
}

.qf-history-wrap .qf-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #0b1929;
}

.qf-table {
    width: 100%;
    border-collapse: collapse;
}

.qf-table th,
.qf-table td {
    padding: 11px 13px;
    text-align: left;
    border-bottom: 1px solid var(--qf-border);
    white-space: nowrap;
    font-size: .75rem;
}

.qf-table th {
    color: var(--qf-muted);
    background: rgba(255,255,255,.012);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

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

.qf-table tbody tr:hover {
    background: rgba(255,255,255,.018);
}

.qf-empty {
    padding: 27px !important;
    color: var(--qf-dim);
    text-align: center !important;
}

.qf-callsign {
    color: var(--qf-text);
    font-weight: 850;
    text-decoration: none;
}

.qf-callsign:hover {
    color: var(--qf-cyan);
}

.qf-dgid {
    min-width: 34px;
    padding: 3px 7px;
    display: inline-block;
    border-radius: 7px;
    color: var(--qf-cyan);
    background: var(--qf-cyan-soft);
    text-align: center;
    font-size: .68rem;
    font-weight: 850;
}

.qf-subtext {
    margin-top: 2px;
    display: block;
    color: var(--qf-dim);
    font-size: .58rem;
}

.qf-state-badge {
    padding: 3px 7px;
    display: inline-block;
    border-radius: 7px;
    color: var(--qf-muted);
    background: rgba(255,255,255,.045);
    font-size: .62rem;
    font-weight: 800;
}

.qf-state-badge.tx {
    color: var(--qf-red);
    background: var(--qf-red-soft);
}

.qf-state-badge.tc {
    color: var(--qf-green);
    background: var(--qf-green-soft);
}

.qf-state-badge.to,
.qf-state-badge.wd,
.qf-state-badge.tb {
    color: var(--qf-orange);
    background: var(--qf-orange-soft);
}

.qf-connected-state {
    color: var(--qf-green);
    font-weight: 800;
}

.qf-stat-grid {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 13px;
}

.qf-stat-card {
    min-height: 98px;
    padding: 16px;
    flex: 1 1 220px;
    max-width: 320px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid var(--qf-border);
    border-radius: var(--qf-radius);
    background: var(--qf-panel);
    box-shadow: var(--qf-shadow);
}

.qf-stat-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--qf-cyan);
    background: var(--qf-cyan-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .69rem;
    font-weight: 900;
}

.qf-stat-value {
    color: var(--qf-text);
    font-size: 1.42rem;
    font-weight: 900;
    line-height: 1;
}

.qf-stat-label {
    margin-top: 5px;
    color: var(--qf-muted);
    font-size: .66rem;
}

.qf-footer {
    max-width: 1540px;
    margin: 18px auto 0;
    padding: 22px clamp(16px, 3vw, 42px) 30px;
    color: #71879b;
    font-size: .68rem;
    text-align: center;
    line-height: 1.7;
}

.qf-footer strong {
    color: #9eb3c6;
}

.qf-footer-brand {
    color: #d9f7ff !important;
}

@media (max-width: 1050px) {
    .qf-hero {
        grid-template-columns: 1fr;
    }

    .qf-primary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {
    .qf-stat-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .qf-nav-spacer {
        display: none;
    }

    .qf-live-data {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 650px) {
    .qf-page-width {
        width: calc(100% - 22px);
    }

    .qf-topbar-inner {
        min-height: auto;
        padding: 12px 0;
        align-items: flex-start;
        flex-direction: column;
    }

    .qf-topbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .qf-brand-subtitle {
        display: none;
    }

    .qf-nav {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .qf-nav-link {
        justify-content: flex-start;
    }

    .qf-nav-telegram {
        grid-column: 1 / -1;
    }

    .qf-hero-main {
        padding: 22px 18px;
    }

    .qf-instance-row h1 {
        font-size: clamp(.9rem, 5vw, 1.35rem);
        white-space: nowrap;
    }

    .qf-hero-status {
        padding: 14px;
    }

    .qf-live-stage {
        grid-template-columns: 1fr;
    }

    .qf-live-orbit {
        margin: 0 auto;
    }

    .qf-live-data {
        grid-template-columns: 1fr;
    }


    .qf-stat-card {
        flex-basis: 100%;
        max-width: none;
    }

    .qf-rooms-meta {
        grid-template-columns: 1fr;
    }
}


/* ==================================================================
   QSOForge YSF · cabecera pública alineada con QSOForge NXDN
   Solo afecta a la portada; administración queda intacta.
   ================================================================== */
.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-brand-mark {
    width: 45px;
    height: 45px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    font-weight: 900;
    letter-spacing: -.09em;
    color: #eaffff;
    background: linear-gradient(145deg, rgba(89,216,255,.2), rgba(127,255,212,.08));
    border: 1px solid rgba(89,216,255,.32);
    box-shadow: inset 0 0 20px rgba(89,216,255,.06);
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-brand-mark::after {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(127,255,212,.18);
    border-radius: 50%;
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-brand-mark i {
    position: absolute;
    z-index: 2;
    right: 4px;
    bottom: 2px;
    font-size: .65rem;
    color: var(--qf-accent-2);
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-brand-q,
.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-brand-f {
    position: relative;
    z-index: 1;
    font-size: 1rem;
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-brand-f {
    color: var(--qf-accent);
    margin-left: 1px;
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-language-switch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
    border: 1px solid rgba(132,167,195,.17);
    border-radius: 12px;
    background: rgba(4,13,24,.64);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 8px 20px rgba(0,0,0,.12);
    backdrop-filter: blur(9px);
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-lang-option {
    position: relative;
    isolation: isolate;
    min-width: 42px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #8293a6;
    background: rgba(255,255,255,.025);
    text-decoration: none;
    opacity: 1;
    transition:
        transform .15s ease,
        color .15s ease,
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease,
        filter .15s ease;
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-lang-code {
    position: relative;
    z-index: 2;
    font-size: .71rem;
    font-weight: 900;
    letter-spacing: .07em;
    line-height: 1;
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-lang-option.active {
    transform: translateY(-1px);
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-lang-es.active {
    color: #281200;
    border-color: rgba(255,205,57,.58);
    background:
        linear-gradient(
            180deg,
            #a90f22 0%,
            #c9142a 24%,
            #f3c51d 24%,
            #ffd43b 76%,
            #c9142a 76%,
            #a90f22 100%
        );
    box-shadow:
        0 0 0 1px rgba(255,201,45,.08),
        0 5px 14px rgba(187,25,36,.20),
        0 0 18px rgba(255,201,45,.10);
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-lang-es.active .qf-lang-code {
    text-shadow: 0 1px 0 rgba(255,255,255,.18);
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-lang-en.active {
    color: #07111f;
    border-color: rgba(130,178,255,.52);
    background:
        linear-gradient(135deg,
            transparent 0 39%,
            rgba(255,255,255,.94) 39% 45%,
            rgba(198,30,55,.96) 45% 52%,
            rgba(255,255,255,.94) 52% 58%,
            transparent 58% 100%
        ),
        linear-gradient(45deg,
            transparent 0 40%,
            rgba(255,255,255,.82) 40% 46%,
            rgba(198,30,55,.93) 46% 52%,
            rgba(255,255,255,.82) 52% 58%,
            transparent 58% 100%
        ),
        linear-gradient(90deg,
            transparent 0 42%,
            rgba(255,255,255,.96) 42% 47%,
            #c51f3a 47% 53%,
            rgba(255,255,255,.96) 53% 58%,
            transparent 58% 100%
        ),
        linear-gradient(180deg,
            transparent 0 39%,
            rgba(255,255,255,.96) 39% 45%,
            #c51f3a 45% 55%,
            rgba(255,255,255,.96) 55% 61%,
            transparent 61% 100%
        ),
        #123668;
    box-shadow:
        0 0 0 1px rgba(83,145,255,.08),
        0 5px 14px rgba(24,81,157,.22),
        0 0 18px rgba(83,145,255,.11);
    text-shadow:
        0 1px 0 rgba(255,255,255,.42),
        0 0 4px rgba(255,255,255,.36);
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-lang-en.active .qf-lang-code {
    color: #07111f;
    font-weight: 900;
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-status-pill {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    border: 1px solid var(--qf-border);
    padding: 5px 11px;
    background: rgba(255,255,255,.025);
    font-size: .74rem;
    color: var(--qf-muted);
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-status-pill strong {
    color: var(--qf-text);
    font-size: inherit;
    letter-spacing: .04em;
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-status-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--qf-red);
    box-shadow: 0 0 0 4px rgba(251,113,133,.08);
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-status-pill.online .qf-status-led {
    background: var(--qf-green);
    box-shadow: 0 0 0 4px rgba(74,222,128,.08), 0 0 12px rgba(74,222,128,.35);
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-status-pill.online strong {
    color: var(--qf-text);
}

.qsoforge-dashboard:not(.qsoforge-admin-page) .qf-status-pill.offline .qf-status-led {
    background: var(--qf-red);
    box-shadow: 0 0 0 4px rgba(251,113,133,.08), 0 0 12px rgba(251,113,133,.28);
}