:root {
    color-scheme: dark;
    --page: #181c23;
    --page-deep: #12161c;
    --panel: #242a34;
    --panel-raised: #2b323d;
    --panel-soft: #20262f;
    --well: #171c23;
    --line: #39424f;
    --line-soft: #303844;
    --text: #edf1f6;
    --text-soft: #c3ccd7;
    --muted: #8f9baa;
    --blue: #6bc7ff;
    --blue-strong: #2faeea;
    --blue-soft: rgba(107, 199, 255, .12);
    --mint: #72dea7;
    --amber: #f0b45d;
    --red: #f17d82;
    --radius: 10px;
    --shadow: 0 9px 28px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page-deep); }
body {
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(180deg, #1d222a 0, var(--page) 260px, var(--page-deep) 100%);
    color: var(--text);
    font: 14px/1.35 "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}

button, input, select { font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; }
[hidden], .is-hidden { display: none !important; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.app-shell, .legal-footer { width: min(1460px, calc(100% - 24px)); margin-inline: auto; }

.topbar {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line-soft);
}
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand > span:last-child { display: flex; gap: 7px; align-items: baseline; }
.brand strong { font-size: 15px; letter-spacing: .07em; }
.brand small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.brand-mark { width: 28px; height: 23px; display: flex; align-items: center; gap: 2px; }
.brand-mark i { display: block; width: 3px; border-radius: 2px; background: var(--blue); }
.brand-mark i:nth-child(1) { height: 6px; }
.brand-mark i:nth-child(2) { height: 16px; }
.brand-mark i:nth-child(3) { height: 22px; background: var(--mint); }
.brand-mark i:nth-child(4) { height: 11px; }

.connection-strip { display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 8px; text-align: right; }
.connection-strip .eyebrow { grid-column: 1; }
.connection-strip strong { grid-column: 1; color: var(--text-soft); font: 700 12px/1.15 ui-monospace, Consolas, monospace; }
.connection-strip .led { grid-column: 2; grid-row: 1 / 3; }

.eyebrow, label, .section-label, .panel-badge {
    color: var(--muted);
    font-size: 9px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #647080; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.led.online, .led.connected { background: var(--mint); box-shadow: 0 0 9px rgba(114,222,167,.5); }
.led.connecting { background: var(--amber); box-shadow: 0 0 9px rgba(240,180,93,.45); }
.led.error { background: var(--red); box-shadow: 0 0 9px rgba(241,125,130,.4); }

main { display: grid; gap: 9px; padding: 9px 0 14px; }

.login-card, .hardware-bar, .panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.login-card {
    min-height: 82px;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(510px, .95fr);
    align-items: center;
    gap: 24px;
}
.login-copy h1 { display: inline; margin: 0 10px 0 0; font-size: 21px; letter-spacing: -.025em; }
.login-copy p { display: inline; margin: 0; color: var(--muted); }
.login-copy .eyebrow { display: block; margin-bottom: 3px; }
.login-controls { display: grid; grid-template-columns: minmax(160px, 1fr) auto; gap: 5px 7px; align-items: end; }
.login-controls label { grid-column: 1 / 3; }
.login-controls .status { grid-column: 1 / 3; }
.login-card.is-connected { min-height: 51px; padding-block: 7px; grid-template-columns: auto 1fr; }
.login-card.is-connected .login-copy p, .login-card.is-connected .login-copy .eyebrow { display: none; }
.login-card.is-connected .login-copy h1 { font-size: 14px; color: var(--text-soft); }
.login-card.is-connected .login-controls { margin-left: auto; width: min(100%, 520px); }
.login-card.is-connected .login-controls label { display: none; }
.login-card.is-connected .status { grid-column: 1 / 3; text-align: right; height: 0; overflow: visible; transform: translateY(-2px); pointer-events: none; }

.hardware-bar {
    min-height: 58px;
    padding: 7px 10px;
    display: grid;
    grid-template-columns: 145px 205px 110px minmax(190px, 1fr);
    grid-template-areas: "title source button state";
    align-items: center;
    gap: 8px;
    background: #29313c;
    border-color: #475361;
}
.hardware-bar.is-network { grid-template-columns: 145px 205px minmax(210px, 290px) 110px minmax(190px, 1fr); grid-template-areas: "title source key button state"; }
.hardware-title { grid-area: title; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hardware-bar > .inline-field:not(.network-key-field) { grid-area: source; }
.network-key-field { grid-area: key; }
.hardware-title > span:last-child { min-width: 0; }
.hardware-title strong, .hardware-title small { display: block; white-space: nowrap; }
.hardware-title strong { font-size: 11px; letter-spacing: .08em; }
.hardware-title small { margin-top: 2px; color: var(--blue); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.hardware-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid #546171; border-radius: 7px; background: var(--well); color: var(--blue); font: 800 10px ui-monospace, monospace; }
.hardware-state { grid-area: state; min-width: 0; display: flex; align-items: center; gap: 8px; padding-left: 3px; }
.hardware-state .status { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.inline-field { display: grid; grid-template-columns: 1fr; gap: 3px; }
.field-label-row { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.remember-inline { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 9px; letter-spacing: .02em; text-transform: none; white-space: nowrap; cursor: pointer; }
.remember-inline input { width: 12px; min-height: 12px; height: 12px; margin: 0; padding: 0; accent-color: var(--blue-strong); }
.remember-inline input:disabled { cursor: not-allowed; }
.box-button { grid-area: button; align-self: end; }

.field { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.field.grow { flex: 1 1 220px; }
input, select {
    width: 100%;
    min-height: 34px;
    padding: 5px 9px;
    border: 1px solid #46515f;
    border-radius: 6px;
    background: var(--well);
    color: var(--text);
    font-size: 14px;
    transition: border-color .14s ease, background .14s ease;
}
input:hover, select:hover { border-color: #637184; }
input:focus, select:focus { border-color: var(--blue-strong); background: #151b22; }
input::placeholder { color: #687484; }
input:disabled, select:disabled { opacity: .5; cursor: not-allowed; }

.button {
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid #536071;
    border-radius: 6px;
    background: #343d49;
    color: var(--text);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .01em;
    transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.button:hover:not(:disabled) { background: #3d4855; border-color: #6b798a; }
.button:active:not(:disabled) { transform: translateY(1px); }
.button.primary { background: #258fc2; border-color: #5ac7f5; color: #f5fcff; }
.button.primary:hover:not(:disabled) { background: #2d9dce; }
.button.danger { background: #5d353b; border-color: #8d4f58; }
.button.warning { background: #624b2b; border-color: #8b6b3d; }
.button.connected { background: #2e684d; border-color: #5ba47f; }
.button:disabled { opacity: .38; cursor: not-allowed; }
.button.compact { min-height: 29px; padding: 4px 10px; }
.button.wide { width: 100%; }
.button-row, .header-actions { display: flex; gap: 6px; }

.panel { overflow: hidden; }
.panel-header { height: 48px; padding: 7px 11px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--panel-raised); }
.panel-heading { display: flex; align-items: center; gap: 9px; }
.panel-heading > span:last-child, .panel-heading small, .panel-heading strong { display: block; }
.panel-heading small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.panel-heading strong { margin-top: 1px; font-size: 15px; font-weight: 700; }
.panel-index { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #596575; border-radius: 6px; color: var(--muted); font: 800 10px ui-monospace, monospace; }
.panel-index.active { border-color: #458bb0; background: var(--blue-soft); color: var(--blue); }
.panel-badge { display: inline-flex; gap: 6px; align-items: center; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-soft); }

.lobby-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; }
.lobby-main { min-width: 0; padding: 10px 11px; border-right: 1px solid var(--line); }
.roster-card { min-width: 0; padding: 10px; background: var(--panel-soft); display: flex; flex-direction: column; }
.channel-controls { display: flex; align-items: end; gap: 7px; margin-bottom: 8px; }
.create-field { margin-left: 6px; }
.section-label { min-height: 20px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.section-label small { color: #697585; font: inherit; letter-spacing: .09em; }

.log {
    overflow: auto;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: var(--well);
    scrollbar-color: #4a5665 transparent;
    font: 12px/1.35 ui-monospace, "SFMono-Regular", Consolas, monospace;
}
.lobby-log { height: clamp(155px, 25vh, 270px); }
.room-log { height: clamp(280px, calc(100vh - 405px), 600px); }
.log:empty::before { content: "Waiting for traffic…"; display: block; padding: 12px; color: #697585; }
.log-entry { display: grid; grid-template-columns: 45px 96px minmax(0, 1fr); gap: 7px; padding: 5px 8px; border-bottom: 1px solid #242b34; align-items: start; }
.log-entry:hover { background: #1d242d; }
.log-time { color: #687585; }
.log-user { color: var(--blue); font-weight: 800; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.log-text { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.log-qsy { cursor: pointer; background: rgba(240,180,93,.11); }
.log-qsy .log-text { color: #f0c47f; }
.log-cw { cursor: pointer; background: rgba(107,199,255,.08); }
.log-cw-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cw-symbols { color: #a8e0ff; letter-spacing: .1em; }
.cw-decoded { display: none; color: var(--muted); font-family: "Segoe UI", sans-serif; font-size: 11px; }
.log-cw.revealed .cw-decoded { display: block; }

.composer { display: flex; gap: 6px; margin-top: 6px; }
.composer input { min-width: 0; flex: 1; }
.presence-list { list-style: none; margin: 0 0 7px; padding: 0; min-height: 106px; max-height: 230px; overflow: auto; flex: 1; }
.presence-list li { position: relative; padding: 6px 7px 6px 23px; border-radius: 5px; color: var(--text-soft); cursor: pointer; font-size: 12px; font-weight: 650; }
.presence-list li::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); transform: translateY(-50%); }
.presence-list li:hover, .presence-list li.selected { background: var(--blue-soft); color: var(--text); }
.private-qso-banner { margin-top: 7px; padding: 9px; border: 1px solid #755b35; border-radius: 6px; background: #3b3124; display: flex; flex-direction: column; gap: 7px; }

.has-active-room .lobby-log { height: 135px; }
.has-active-room .presence-list { min-height: 80px; max-height: 135px; }

.room-header { position: relative; justify-content: flex-start; }
.room-heading { flex: 1; }
.room-heading strong { display: flex; align-items: baseline; gap: 8px; }
.room-heading em { font-style: normal; font-weight: 500; }
.collapse-button { width: 29px; height: 29px; padding: 0; border: 1px solid #596575; border-radius: 6px; background: #222933; color: var(--text-soft); }
.collapse-button:hover { background: #303946; }
.collapse-chevron { display: inline-block; font-size: 14px; transition: transform .15s ease; }
.collapse-button[aria-expanded="false"] .collapse-chevron { transform: rotate(180deg); }
.room-content.is-collapsed { display: none; }
.room-workspace.is-collapsed .panel-header { border-bottom: 0; }
.room-workspace.is-collapsed .room-heading small { display: none; }
.room-workspace.is-collapsed .room-heading strong { font-size: 13px; }

.room-toolbar { min-height: 48px; padding: 7px 10px; display: flex; align-items: end; flex-wrap: wrap; gap: 6px 10px; border-bottom: 1px solid var(--line); background: var(--panel-soft); }
.select-field { width: 88px; }
.wpm-field { width: 63px; }
.select-field select { min-height: 29px; padding-block: 3px; font-size: 12px; }
.room-toolbar .switch { margin-bottom: 6px; }
.room-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; }
.chat-column { min-width: 0; padding: 9px 10px 10px; border-right: 1px solid var(--line); }
.room-side { min-width: 0; padding: 9px; background: var(--panel-soft); display: flex; flex-direction: column; gap: 8px; }
.side-card { padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.participant-card { flex: 1; }
.table-wrap { min-height: 110px; max-height: 280px; overflow: auto; }
.table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; }
.table th { padding: 5px 4px; color: #748091; text-align: left; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.table th:first-child { width: 36%; }
.table th:last-child { width: 38px; }
.table td { padding: 6px 4px; border-bottom: 1px solid var(--line-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table td:first-child { color: var(--text); font-weight: 750; }
.table td:last-child { color: var(--muted); }
.table tr.active { background: rgba(240,180,93,.12); }

.switch { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; white-space: nowrap; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch > span { width: 27px; height: 15px; border: 1px solid #536070; border-radius: 999px; background: #181e26; position: relative; }
.switch > span::after { content: ""; position: absolute; width: 9px; height: 9px; left: 2px; top: 2px; border-radius: 50%; background: #8592a2; transition: transform .14s ease; }
.switch input:checked + span { background: #276d91; border-color: #4cafdf; }
.switch input:checked + span::after { transform: translateX(12px); background: #effaff; }
.switch:has(input:disabled) { opacity: .42; cursor: not-allowed; }

.key-controls { display: grid; grid-template-columns: 1fr 92px; gap: 7px; align-items: stretch; }
.cw-key { min-height: 55px; border: 1px solid #8b6b3d; border-radius: 6px; background: #584329; color: #f4c67f; user-select: none; touch-action: none; }
.cw-key span, .cw-key small { display: block; }
.cw-key span { font-size: 14px; font-weight: 900; letter-spacing: .1em; }
.cw-key small { margin-top: 2px; color: #c3995c; font-size: 7px; letter-spacing: .1em; }
.cw-key.active { transform: translateY(1px); background: #d59536; color: #211507; }
.cw-key:disabled { opacity: .35; cursor: not-allowed; }

.status { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.status.error { color: var(--red); }
.status.success { color: var(--mint); }
.audio-overlay, .toast { position: fixed; z-index: 1000; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 8px 14px; border: 1px solid #617083; border-radius: 999px; background: #242c36; color: var(--text); box-shadow: var(--shadow); font-weight: 700; }
.toast { border-color: #397ca0; color: #bce8ff; }

.legal-footer { padding: 11px 2px 18px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 16px; color: #758190; font-size: 10px; }
.legal-footer nav { display: flex; gap: 15px; }
.legal-footer a { color: var(--muted); text-decoration: none; }
.legal-footer a:hover { color: var(--text); }

@media (max-width: 1060px) {
    .hardware-bar { grid-template-columns: 130px 190px 105px minmax(180px, 1fr); }
    .hardware-bar.is-network { grid-template-columns: 130px 190px minmax(180px, 1fr) 105px; grid-template-areas: "title source key button" "state state state state"; }
    .hardware-bar.is-network .hardware-state { min-height: 16px; padding-left: 3px; }
    .lobby-layout { grid-template-columns: minmax(0, 1fr) 220px; }
    .room-layout { grid-template-columns: minmax(0, 1fr) 250px; }
}

@media (max-width: 760px) {
    .app-shell, .legal-footer { width: calc(100% - 12px); }
    .login-card, .login-card.is-connected { grid-template-columns: 1fr; gap: 8px; }
    .login-card.is-connected .login-controls { width: 100%; }
    .hardware-bar, .hardware-bar.is-network { position: static; grid-template-columns: 1fr 1fr; grid-template-areas: "title title" "source button" "state state"; }
    .hardware-bar.is-network { grid-template-areas: "title title" "source button" "key key" "state state"; }
    .lobby-layout, .room-layout { grid-template-columns: 1fr; }
    .lobby-main, .chat-column { border-right: 0; border-bottom: 1px solid var(--line); }
    .roster-card { min-height: 170px; }
    .presence-list { min-height: 80px; }
    .room-side { display: grid; grid-template-columns: 1fr 1fr; }
    .room-log { height: 340px; }
}

@media (max-width: 520px) {
    .topbar { height: 46px; }
    .brand > span:last-child { display: block; }
    .brand small { display: block; }
    .connection-strip .eyebrow { display: none; }
    .login-copy p { display: block; margin-top: 3px; }
    .login-controls { grid-template-columns: 1fr; }
    .login-controls label, .login-controls .status { grid-column: 1; }
    .hardware-bar, .hardware-bar.is-network { grid-template-columns: 1fr; grid-template-areas: "title" "source" "button" "state"; }
    .hardware-bar.is-network { grid-template-areas: "title" "source" "key" "button" "state"; }
    .channel-controls { display: grid; grid-template-columns: 1fr auto; }
    .channel-controls .create-field { margin-left: 0; }
    .panel-badge { display: none; }
    .log-entry { grid-template-columns: 40px 70px minmax(0, 1fr); gap: 5px; padding-inline: 6px; font-size: 10px; }
    .room-toolbar { display: grid; grid-template-columns: auto auto 1fr 1fr; align-items: center; }
    .room-toolbar .switch { grid-column: span 2; margin: 2px 0; }
    .room-side { display: flex; }
    .room-heading em { display: none; }
    .legal-footer { flex-direction: column; gap: 5px; }
}