:root {
    --bg: #0f172a;
    --panel: #111827;
    --card: #1f2937;
    --surface: #0b1220;
    --surface-strong: #020617;
    --border: #334155;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --accent: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #38bdf8;
    --link: #93c5fd;
    --topbar-bg: #020617;
    --brand: #ffffff;
    --input-bg: var(--surface);
    --input-text: var(--text);
    --flash-success-bg: #052e1a;
    --flash-error-bg: #450a0a;
    --flash-info-bg: #082f49;
    --chat-divider: rgba(255,255,255,.06);
    --entry-open-border: rgba(255,255,255,.08);
    --highlight-bg: rgba(56, 189, 248, .14);
    --highlight-outline: rgba(56, 189, 248, .28);
    --image-modal-bg: #020617;
    --image-modal-backdrop: rgba(2, 6, 23, .82);
    --button-secondary: #38bdf8;
    --button-secondary-text: #ffffff;
    --button-warning-bg: #f59e0b;
    --button-warning-text: #ffffff;
    --button-success-bg: #16a34a;
    --button-success-text: #ffffff;
    --button-info-bg: #38bdf8;
    --button-info-text: #ffffff;
    --button-danger-bg: #ef4444;
    --button-danger-text: #ffffff;
    --topbar-link-color: var(--text);
    --topbar-hover-bg: var(--surface);
    --button-primary-bg: var(--accent);
    --button-primary-text: #04110a;
    --table-head-bg: var(--surface);
    --table-head-text: var(--text);
    --footer-bg: var(--topbar-bg);
    --footer-link-color: var(--link);
    color-scheme: dark;
}
html[data-theme="light"] {
    --bg: #f8fafc;
    --panel: #ffffff;
    --card: #ffffff;
    --surface: #f1f5f9;
    --surface-strong: #e2e8f0;
    --border: #cbd5e1;
    --text: #0f172a;
    --muted: #475569;
    --accent: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #0284c7;
    --link: #1d4ed8;
    --topbar-bg: #ffffff;
    --brand: #0f172a;
    --input-bg: #ffffff;
    --input-text: #0f172a;
    --flash-success-bg: #dcfce7;
    --flash-error-bg: #fee2e2;
    --flash-info-bg: #e0f2fe;
    --chat-divider: rgba(15,23,42,.08);
    --entry-open-border: rgba(15,23,42,.08);
    --highlight-bg: rgba(14, 165, 233, .16);
    --highlight-outline: rgba(14, 165, 233, .32);
    --image-modal-bg: #ffffff;
    --image-modal-backdrop: rgba(15, 23, 42, .55);
    --button-secondary: #38bdf8;
    --button-secondary-text: #ffffff;
    --button-warning-bg: #f59e0b;
    --button-warning-text: #ffffff;
    --button-success-bg: #16a34a;
    --button-success-text: #ffffff;
    --button-info-bg: #38bdf8;
    --button-info-text: #ffffff;
    --button-danger-bg: #ef4444;
    --button-danger-text: #ffffff;
    --topbar-link-color: var(--text);
    --topbar-hover-bg: var(--surface);
    --button-primary-bg: var(--accent);
    --button-primary-text: #04110a;
    --table-head-bg: var(--surface);
    --table-head-text: var(--text);
    --footer-bg: var(--topbar-bg);
    --footer-link-color: var(--link);
    color-scheme: light;
}
html[data-theme="classic"] {
    --bg: #1b263b;
    --panel: #243b55;
    --card: #314a63;
    --surface: #223449;
    --surface-strong: #172533;
    --border: #47627c;
    --text: #f8fafc;
    --muted: #d1d5db;
    --accent: #f59e0b;
    --warning: #facc15;
    --danger: #ef4444;
    --info: #38bdf8;
    --link: #fde68a;
    --topbar-bg: #0f172a;
    --brand: #f8fafc;
    --input-bg: #1b2a3a;
    --input-text: #f8fafc;
    --flash-success-bg: #14532d;
    --flash-error-bg: #7f1d1d;
    --flash-info-bg: #0c4a6e;
    --chat-divider: rgba(255,255,255,.08);
    --entry-open-border: rgba(255,255,255,.12);
    --highlight-bg: rgba(245, 158, 11, .18);
    --highlight-outline: rgba(245, 158, 11, .36);
    --image-modal-bg: #0f172a;
    --image-modal-backdrop: rgba(15, 23, 42, .84);
    --button-secondary: #38bdf8;
    --button-secondary-text: #ffffff;
    --button-warning-bg: #f59e0b;
    --button-warning-text: #ffffff;
    --button-success-bg: #16a34a;
    --button-success-text: #ffffff;
    --button-info-bg: #38bdf8;
    --button-info-text: #ffffff;
    --button-danger-bg: #ef4444;
    --button-danger-text: #ffffff;
    --topbar-link-color: #f8fafc;
    --topbar-hover-bg: rgba(245, 158, 11, .18);
    --button-primary-bg: #f59e0b;
    --button-primary-text: #1f1300;
    --table-head-bg: #172533;
    --table-head-text: #f8fafc;
    --footer-bg: #0f172a;
    --footer-link-color: #fde68a;
    color-scheme: dark;
}
html[data-theme="forest"] {
    --bg: #0b1f17;
    --panel: #122b22;
    --card: #17362a;
    --surface: #10261f;
    --surface-strong: #0a1914;
    --border: #255646;
    --text: #eefbf4;
    --muted: #b7d9c7;
    --accent: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #38bdf8;
    --link: #86efac;
    --topbar-bg: #07130f;
    --brand: #eefbf4;
    --input-bg: #0e221b;
    --input-text: #eefbf4;
    --flash-success-bg: #14532d;
    --flash-error-bg: #7f1d1d;
    --flash-info-bg: #0c4a6e;
    --chat-divider: rgba(255,255,255,.08);
    --entry-open-border: rgba(255,255,255,.12);
    --highlight-bg: rgba(52, 211, 153, .18);
    --highlight-outline: rgba(52, 211, 153, .38);
    --image-modal-bg: #07130f;
    --image-modal-backdrop: rgba(3, 10, 8, .84);
    --button-secondary: #38bdf8;
    --button-secondary-text: #ffffff;
    --button-warning-bg: #f59e0b;
    --button-warning-text: #ffffff;
    --button-success-bg: #16a34a;
    --button-success-text: #ffffff;
    --button-info-bg: #38bdf8;
    --button-info-text: #ffffff;
    --button-danger-bg: #ef4444;
    --button-danger-text: #ffffff;
    --topbar-link-color: #eefbf4;
    --topbar-hover-bg: rgba(52, 211, 153, .18);
    --button-primary-bg: #34d399;
    --button-primary-text: #052018;
    --table-head-bg: #0e221b;
    --table-head-text: #eefbf4;
    --footer-bg: #07130f;
    --footer-link-color: #86efac;
    color-scheme: dark;
}
html[data-theme="sunset"] {
    --bg: #2b1020;
    --panel: #421635;
    --card: #512046;
    --surface: #3a1731;
    --surface-strong: #240d1e;
    --border: #8a476d;
    --text: #fff4ee;
    --muted: #f8d7c6;
    --accent: #fb923c;
    --warning: #fde047;
    --danger: #f87171;
    --info: #67e8f9;
    --link: #fdba74;
    --topbar-bg: #180915;
    --brand: #fff4ee;
    --input-bg: #331228;
    --input-text: #fff4ee;
    --flash-success-bg: #14532d;
    --flash-error-bg: #7f1d1d;
    --flash-info-bg: #0c4a6e;
    --chat-divider: rgba(255,255,255,.08);
    --entry-open-border: rgba(255,255,255,.12);
    --highlight-bg: rgba(251, 146, 60, .18);
    --highlight-outline: rgba(251, 146, 60, .4);
    --image-modal-bg: #180915;
    --image-modal-backdrop: rgba(24, 9, 21, .84);
    --button-secondary: #38bdf8;
    --button-secondary-text: #ffffff;
    --button-warning-bg: #f59e0b;
    --button-warning-text: #ffffff;
    --button-success-bg: #16a34a;
    --button-success-text: #ffffff;
    --button-info-bg: #38bdf8;
    --button-info-text: #ffffff;
    --button-danger-bg: #ef4444;
    --button-danger-text: #ffffff;
    --topbar-link-color: #fff4ee;
    --topbar-hover-bg: rgba(251, 146, 60, .18);
    --button-primary-bg: #fb923c;
    --button-primary-text: #2c1200;
    --table-head-bg: #331228;
    --table-head-text: #fff4ee;
    --footer-bg: #180915;
    --footer-link-color: #fdba74;
    color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); display:flex; flex-direction:column; min-height:100vh; }
body { position:relative; }
body.has-app-background::before {
    content:'';
    position:fixed;
    inset:0;
    z-index:-2;
    background-color:var(--bg);
    background-image: var(--app-background-image, none);
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
}
body.has-app-background::after {
    content:'';
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(2,6,23,.48), rgba(2,6,23,.68));
}
html[data-theme="light"] body.has-app-background::after {
    background:linear-gradient(180deg, rgba(248,250,252,.42), rgba(248,250,252,.66));
}
body.has-app-background .topbar {
    background: color-mix(in srgb, var(--topbar-bg) 82%, transparent);
    backdrop-filter: blur(14px);
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(1200px, 94vw); margin: 0 auto; }
.topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
.topbar-inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; }
.brand { font-size: 1.15rem; font-weight: 700; color: var(--brand); }
.brand-logo-link { display:inline-flex; align-items:center; min-height:52px; }
.brand-logo-link:hover { text-decoration:none; }
.nav-logo { display:block; max-height:56px; width:auto; max-width:min(240px, 26vw); object-fit:contain; }
.brand-placeholder { display:block; width:48px; height:48px; border-radius:14px; border:1px solid var(--border); background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, .35), transparent 48%), linear-gradient(135deg, var(--surface), var(--surface-strong)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.version { color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.nav { display:flex; flex-wrap:wrap; gap:.75rem; }
.main-content { padding: 1.2rem 0 3rem; flex:1 0 auto; }
.site-footer { border-top:1px solid var(--border); background:var(--footer-bg); padding:1rem 0 1.15rem; margin-top:auto; }
.footer-inner { display:flex; align-items:center; justify-content:center; }
.footer-inner a { color:var(--footer-link-color); font-weight:700; white-space:nowrap; }
.footer-inner a:hover { text-decoration:underline; }
.card, .panel { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; margin-bottom: 1rem; }
.grid { display:grid; gap:1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat { padding:1rem; border-radius:14px; background:var(--surface); border:1px solid var(--border); }
.stat .number { font-size:1.8rem; font-weight:700; }
.small-number { font-size: 1.2rem !important; }
label { display:block; margin-bottom: .3rem; font-weight:700; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=time], textarea, select {
    width:100%; padding:.72rem .8rem; border-radius:10px; border:1px solid var(--border); background:var(--input-bg); color:var(--input-text);
}
textarea { min-height: 90px; resize: vertical; }
button, .btn {
    display:inline-block; border:0; border-radius:10px; padding:.72rem 1rem; background:var(--button-primary-bg); color:var(--button-primary-text); font-weight:700; cursor:pointer;
    transition:filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
button:hover, .btn:hover {
    text-decoration:none;
    filter:brightness(1.03);
}
button:focus-visible, .btn:focus-visible {
    outline:2px solid color-mix(in srgb, var(--button-secondary) 70%, white);
    outline-offset:2px;
}
.btn.secondary { background:var(--button-secondary); color:var(--button-secondary-text); box-shadow:0 10px 20px rgba(56, 189, 248, .18); }
.btn.warning,
button.warning,
.btn.warning:hover,
button.warning:hover,
.tutorial-carousel-btn { background: var(--button-warning-bg); color:var(--button-warning-text); }
.btn.success { background:var(--button-success-bg); color:var(--button-success-text); }
.btn.info { background:var(--button-info-bg); color:var(--button-info-text); }
.btn.danger { background: var(--button-danger-bg); color:var(--button-danger-text); }
button.theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--text); padding: .55rem .85rem; white-space: nowrap; }
button.theme-toggle:hover { text-decoration: none; filter: brightness(1.02); }
.lang-switch { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.lang-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.2rem; padding: .25rem .6rem; border-radius: 999px; color: var(--text); font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.lang-btn:hover { text-decoration: none; background: rgba(148,163,184,.12); }
.lang-btn.is-active { background: var(--info); color: #082f49; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse: collapse; }
th, td { padding:.7rem; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
th { background:var(--table-head-bg); color:var(--table-head-text); }
.flash { padding:.9rem 1rem; border-radius:10px; margin-bottom: 1rem; }
.flash.success { background:var(--flash-success-bg); }
.flash.error { background:var(--flash-error-bg); }
.flash.info { background:var(--flash-info-bg); }
.badge { display:inline-flex; align-items:center; justify-content:center; gap:.2rem; padding:.3rem .6rem; border-radius:999px; font-size:.78rem; font-weight:700; line-height:1.2; white-space:nowrap; overflow-wrap:normal; word-break:normal; text-align:center; color:#fff; }
.badge.online, .badge.active, .badge.member, .badge.ack { background:#14532d; }
.badge.offline, .badge.closed { background:#374151; }
.badge.late, .badge.priority, .badge.traffic { background:#78350f; }
.badge.emergency, .badge.danger { background:#7f1d1d; }
.badge.visitor, .badge.guest, .badge.first { background:#1e3a8a; }
.actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.login-box { max-width: 440px; margin: 0; }
.chat-box { border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden; }
.chat-messages { height:340px; overflow:auto; padding:1rem; }
.chat-message { padding:.55rem 0; border-bottom:1px solid var(--chat-divider); }
.chat-form { display:flex; gap:.5rem; padding:1rem; border-top:1px solid var(--border); }
.chat-form textarea { min-height: 50px; }
.chat-form input[type=text] { min-width: 220px; }
.kbd { font-family: monospace; background:var(--surface-strong); border:1px solid var(--border); border-radius:6px; padding:.1rem .3rem; }
.quick-entry { position:sticky; top:88px; }
.session-print { background:#fff; color:#000; padding:1rem; }
.small { color:var(--muted); font-size:.9rem; }
.nav-logo-preview-card { min-height: 124px; display:flex; align-items:center; justify-content:center; padding:1rem; border:1px dashed var(--border); border-radius:12px; background:var(--surface); }
.settings-nav-logo-preview { display:block; max-width:100%; max-height:88px; width:auto; object-fit:contain; }
.appearance-preview-badges { display:flex; flex-wrap:wrap; gap:.45rem; }
.inline-field { display:flex; gap:.5rem; align-items:center; }
.inline-field input { flex:1; }
.qrz-status { min-height: 1.2rem; margin-top: .35rem; }
.success-text { color: #86efac; }
.error-text { color: #fca5a5; }
.info-text { color: #7dd3fc; }
.hero-card { display:flex; flex-direction:column; justify-content:center; }
.home-grid { align-items:start; }
.compact-table th, .compact-table td { padding: .55rem .6rem; }
.live-net-card h2 { margin-top: 0; }
.compact-grid { gap: .75rem; }
.compact-stat { padding: .75rem; }
.spaced-top { margin-top: 1rem; }
.status-cell { min-width: 240px; }
.status-note { margin-top: .35rem; }
.status-update-form { display:grid; gap:.45rem; margin-top:.55rem; }
.status-update-form input, .status-update-form select { padding:.55rem .65rem; }
.compact-action { padding:.5rem .75rem; font-size:.85rem; }
.stack-layout { display:grid; gap:1rem; }
.stack-card { width:100%; }
.stack-layout .card { margin-bottom:0; }
.session-stack .quick-entry { position:static; top:auto; }
.section-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:.9rem; }
.section-header h2 { margin:0 0 .25rem; }
.checkbox-row { display:flex; flex-wrap:wrap; gap:.75rem 1.1rem; margin:.95rem 0; }
.inline-field-tight { align-items:stretch; }
.inline-field-tight .btn { white-space:nowrap; }
.wide-field { grid-column: span 2; }
.fast-entry-form .qrz-status { display:block; }

.qrz-preview { min-height: 1.2rem; margin-top: .2rem; }
.entry-list { display:grid; gap:1rem; }
.entry-card { border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:1rem; }
.entry-card-summary { display:flex; gap:1rem; align-items:flex-start; justify-content:space-between; }
.entry-order { min-width:3rem; min-height:3rem; border-radius:999px; display:flex; align-items:center; justify-content:center; background:var(--panel); border:1px solid var(--border); font-weight:700; }
.entry-main { flex:1; min-width:0; }
.entry-title-row { display:flex; gap:.75rem; align-items:baseline; flex-wrap:wrap; }
.entry-title-row h3 { margin:0; }
.entry-badges { display:flex; flex-wrap:wrap; gap:.45rem; justify-content:flex-end; }
.entry-meta { margin-top:.5rem; }
.entry-edit-form textarea { min-height:80px; }
@media (max-width: 760px) {
    .topbar-inner { align-items:flex-start; }
    .inline-field { flex-direction: column; align-items: stretch; }
    .section-header { flex-direction:column; }
    .wide-field { grid-column:auto; }
    .chat-form { flex-direction: column; }
    .entry-card-summary { flex-direction:column; }
    .entry-summary-grid { grid-template-columns: 1fr; }
    .entry-details-top { flex-direction: column; }
    .entry-badges { justify-content:flex-start; }
    .entry-toggle-hint { justify-content: flex-start; min-width: 0; }
}
@media print {
    body { background:#fff; color:#000; }
    .topbar, .nav, .flash, .no-print { display:none !important; }
    .container { width:100%; }
    .card, .panel { border:0; padding:0; margin:0; background:#fff; color:#000; }
}

.full-row { grid-column: 1 / -1; }
.entry-details { padding: 0; overflow: hidden; }
.entry-card-toggle { list-style: none; cursor: pointer; margin: 0; padding: 1rem; }
.entry-card-toggle::-webkit-details-marker { display: none; }
.entry-card-toggle::marker { display: none; }
.entry-summary-grid { flex: 1; display: grid; gap: .85rem; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); align-items: center; }
.entry-summary-item { min-width: 0; }
.entry-summary-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .28rem; }
.entry-summary-value { display: block; font-weight: 700; word-break: break-word; }
.entry-summary-operator .entry-summary-value { font-size: 1rem; }
.entry-toggle-hint { display: inline-flex; align-items: center; justify-content: center; min-width: 7rem; color: var(--muted); font-size: .9rem; font-weight: 700; }
.entry-toggle-hint .toggle-open { display: none; }
.entry-details[open] .entry-toggle-hint .toggle-closed { display: none; }
.entry-details[open] .entry-toggle-hint .toggle-open { display: inline; }
.entry-details-body { border-top: 1px solid var(--entry-open-border); padding: 1rem; }
.entry-details-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.entry-details-id { display: flex; align-items: center; gap: .85rem; }
.entry-detail-title { font-size: 1.05rem; font-weight: 700; }
.entry-meta-grid { display: grid; gap: .65rem .9rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 1rem; }
.entry-ack-form { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); margin-bottom: 1rem; }
.entry-ack-actions { display: grid; gap: .5rem; }
.auto-save-note { line-height: 1.4; }
.entry-edit-form { margin-top: 0; }
.entry-edit-form textarea { min-height: 80px; }


.entry-summary-operator-row { display:flex; gap:.8rem; align-items:flex-start; min-width:0; }
.entry-summary-text-wrap { min-width:0; }
.entry-highlight-control { display:inline-flex; align-items:center; justify-content:center; padding-top:1.15rem; cursor:pointer; }
.entry-highlight-control input[type=checkbox], .entry-summary-checkbox input[type=checkbox] { width:1.15rem; height:1.15rem; accent-color: var(--info); cursor:pointer; }
.entry-summary-feedback { display:block; min-height:1.1rem; margin-top:.2rem; }
.entry-details.is-live-highlight { border-color: var(--info); box-shadow: 0 0 0 1px var(--highlight-outline); }
.entry-details.is-live-highlight > .entry-card-toggle { background: var(--highlight-bg); }
.live-roster-highlight td { background: var(--highlight-bg) !important; }
.live-roster-highlight td:first-child { box-shadow: inset 5px 0 0 var(--info); }
.live-roster-highlight td:last-child { box-shadow: inset -1px 0 0 var(--highlight-outline); }


.live-roster-photo-cell { min-width: 84px; width: 84px; }
.qrz-thumb-link { display: inline-flex; align-items: center; justify-content: center; }
.qrz-thumb { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-strong); cursor: zoom-in; }
.qrz-thumb:hover { box-shadow: 0 0 0 1px rgba(147, 197, 253, .25); }

.grid-map-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.grid-link-empty {
    color: var(--muted);
}
.grid-map-card {
    max-width: 1080px;
    margin: 0 auto;
}
.grid-map-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: .75rem 0 1rem;
}
.grid-map-coord {
    padding: .4rem .65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-strong);
    font-size: .92rem;
}
.grid-map-frame-wrap {
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface-strong);
}
.grid-map-frame {
    display: block;
    width: 100%;
    min-height: 540px;
    border: 0;
}
.grid-map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}
@media (max-width: 720px) {
    .grid-map-frame {
        min-height: 420px;
    }
}
.qrz-image-empty { color: var(--muted); font-size: .88rem; }
.image-modal-open { overflow: hidden; }
.image-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.image-modal.is-open { display: block; }
.image-modal-backdrop { position: absolute; inset: 0; background: var(--image-modal-backdrop); }
.image-modal-dialog { position: relative; z-index: 1; width: min(96vw, 1100px); max-height: calc(100vh - 2rem); margin: 1rem auto; padding: 1rem 1rem 1.15rem; border-radius: 16px; border: 1px solid rgba(148, 163, 184, .28); background: var(--image-modal-bg); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: .9rem; }
.image-modal-close { align-self: flex-end; min-width: 2.6rem; min-height: 2.6rem; padding: 0; border-radius: 999px; background: var(--button-secondary); color: var(--button-secondary-text); font-size: 1.5rem; line-height: 1; }
.image-modal-img { display: block; width: 100%; height: auto; max-height: calc(100vh - 8rem); object-fit: contain; border-radius: 12px; background: #000; }
.image-modal-caption { color: var(--muted); font-size: .95rem; text-align: center; word-break: break-word; }
@media (max-width: 760px) {
    .live-roster-photo-cell { min-width: 72px; width: 72px; }
    .qrz-thumb { width: 48px; height: 48px; }
    .image-modal-dialog { width: calc(100vw - 1rem); margin: .5rem auto; padding: .75rem .75rem 1rem; }
    .image-modal-img { max-height: calc(100vh - 6.5rem); }
}

.report-actions-row {
    align-items: end;
}
.station-map-report-card {
    overflow: hidden;
}
.station-map-shell {
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background: var(--surface-strong);
}
.station-report-map {
    display: block;
    width: 100%;
    height: auto;
    background: linear-gradient(180deg, rgba(56, 189, 248, .08), rgba(15, 23, 42, .04));
}
.station-report-map-bg {
    fill: var(--surface-strong);
}
.station-report-grid-line {
    stroke: rgba(148, 163, 184, .22);
    stroke-width: 1;
}
.station-report-land {
    fill: rgba(34, 197, 94, .18);
    stroke: rgba(148, 163, 184, .18);
    stroke-width: 1.1;
}
.station-report-axis-label {
    fill: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-anchor: middle;
}
.station-report-axis-label-left {
    text-anchor: start;
}
.station-report-axis-label-right {
    text-anchor: end;
}
.station-report-marker {
    fill: var(--info);
    stroke: var(--surface-strong);
    stroke-width: 2.5;
    transition: transform .15s ease, fill .15s ease;
}
.station-report-map a:hover .station-report-marker,
.station-report-map a:focus .station-report-marker {
    fill: var(--warning);
}
.station-report-marker-label {
    fill: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
    pointer-events: none;
}
.empty-state {
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: 14px;
    background: var(--surface);
}
@media (max-width: 720px) {
    .station-report-axis-label {
        font-size: 9px;
    }
}


.station-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem 1rem;
    margin-bottom: .9rem;
}
.station-map-control-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}
.station-map-control-btn {
    min-width: 2.7rem;
    min-height: 2.6rem;
    padding: .5rem .78rem;
    line-height: 1;
}
.station-map-reset-btn {
    min-width: auto;
}
.station-map-control-btn:disabled {
    opacity: .48;
    cursor: not-allowed;
}
.station-map-toolbar-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .95rem;
    color: var(--muted);
}
.station-map-toolbar-meta strong {
    color: var(--text);
}
.station-tile-map-shell {
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background: #0b1320;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.station-tile-map {
    display: block;
    width: 100%;
    height: auto;
    background: linear-gradient(180deg, rgba(59, 130, 246, .16), rgba(15, 23, 42, .14));
    cursor: grab;
    outline: none;
}
.station-tile-map:focus-visible {
    box-shadow: inset 0 0 0 3px rgba(59, 130, 246, .65);
}
.station-tile-map.is-dragging {
    cursor: grabbing;
}
.station-tile-map-bg {
    fill: #0b1320;
}
.station-map-tile {
    image-rendering: auto;
}
.station-map-overlay {
    fill: rgba(11, 19, 32, .10);
    pointer-events: none;
}
.station-map-marker-leader {
    stroke: rgba(255,255,255,.72);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 4 4;
    opacity: .88;
    pointer-events: none;
}
.station-map-marker-anchor {
    fill: rgba(255,255,255,.95);
    stroke: rgba(15, 23, 42, .68);
    stroke-width: 1.4;
    pointer-events: none;
}
.station-map-marker-ring {
    fill: rgba(255,255,255,.22);
    stroke: rgba(255,255,255,.55);
    stroke-width: 1.5;
    transition: transform .15s ease, fill .15s ease, stroke .15s ease;
}
.station-map-marker {
    fill: #f97316;
    stroke: rgba(255,255,255,.92);
    stroke-width: 2.5;
    transition: transform .15s ease, fill .15s ease;
}
.station-map-marker-label {
    fill: #ffffff;
    font-size: 12px;
    font-weight: 800;
    text-anchor: middle;
    pointer-events: none;
}
.station-map-marker-link:hover .station-map-marker,
.station-map-marker-link:focus .station-map-marker {
    fill: #facc15;
}
.station-map-marker-link:hover .station-map-marker-ring,
.station-map-marker-link:focus .station-map-marker-ring {
    fill: rgba(250, 204, 21, .25);
    stroke: rgba(250, 204, 21, .65);
}
.station-map-footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem 1.2rem;
    margin-top: .85rem;
    color: var(--muted);
}
.station-map-footer-meta a {
    color: var(--muted);
    text-decoration: underline;
}
@media (max-width: 720px) {
    .station-map-toolbar {
        align-items: stretch;
    }
    .station-map-control-cluster {
        width: 100%;
    }
    .station-map-toolbar-meta {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
    .station-map-footer-meta {
        flex-direction: column;
        gap: .35rem;
    }
}



.nets-management-layout {
    gap: 1.1rem;
}
.nets-create-card,
.nets-list-card {
    width: 100%;
}
.nets-form {
    display: grid;
    gap: 1rem;
}
.nets-table-wrap {
    overflow-x: auto;
}
.nets-table {
    table-layout: auto;
}
.nets-table th:nth-child(1),
.nets-table td:nth-child(1) {
    width: 4.5rem;
    white-space: nowrap;
}
.nets-table th:nth-child(6),
.nets-table td:nth-child(6),
.nets-table th:nth-child(7),
.nets-table td:nth-child(7) {
    width: 7rem;
    white-space: nowrap;
}
.nets-table th:nth-child(8),
.nets-table td:nth-child(8) {
    min-width: 15rem;
}
.nets-table td {
    word-break: break-word;
}
.nets-actions-cell {
    min-width: 15rem;
}
.nets-actions-cell .btn,
.nets-actions-cell button {
    white-space: nowrap;
}
@media (min-width: 981px) {
    .nets-management-layout {
        grid-template-columns: 1fr;
    }
    .nets-create-card,
    .nets-list-card {
        width: 100%;
        max-width: none;
    }
    .nets-table-wrap {
        overflow-x: auto;
    }
}
.nets-create-visible-grid {
    grid-template-columns: minmax(0, 1fr);
}
.nets-collapsible-toggle-row {
    display:flex;
    align-items:center;
    gap:.75rem;
    flex-wrap:wrap;
}
.nets-advanced-toggle {
    white-space:nowrap;
}
.nets-advanced-panel[hidden] {
    display:none !important;
}
.nets-advanced-panel {
    display:grid;
    gap:1rem;
}
@media (max-width: 860px) {
    .nets-table td[data-label="Name"] strong,
    .nets-table td[data-label="Frequency"] strong {
        display: block;
        margin-bottom: .15rem;
    }
}


/* Hotfix 20: mobile responsiveness */
html {
    -webkit-text-size-adjust: 100%;
}
body {
    min-height: 100vh;
    line-height: 1.5;
    overflow-x: hidden;
}
img,
svg,
iframe {
    max-width: 100%;
}
p, td, .small, .entry-summary-value, .entry-detail-title, .flash, .chat-message div {
    overflow-wrap: anywhere;
    word-break: break-word;
}
h1, h2, h3, h4, h5, h6,
label, th, .brand, .btn, button, .nav a, .theme-toggle, .lang-btn, .badge,
.entry-summary-label {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}
input,
select,
textarea,
button {
    font: inherit;
}
button,
.btn {
    min-height: 44px;
}
select[multiple] {
    min-height: 8.5rem;
}
.container {
    width: min(1360px, calc(100vw - 1.5rem));
}
.topbar > .container,
.topbar .container.topbar-inner {
    width: min(1680px, calc(100vw - 1.25rem));
}
.topbar {
    backdrop-filter: blur(10px);
}
.topbar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem 1rem;
    padding: .85rem 0;
}
.topbar-branding {
    min-width: 0;
    display:flex;
    align-items:center;
}
.nav {
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    flex-wrap: nowrap;
}
.nav a,
.nav .theme-toggle,
.nav .lang-switch,
.nav-dropdown,
.nav-toggle {
    color: var(--topbar-link-color, var(--text));
    flex: 0 0 auto;
}
.nav a,
.nav .theme-toggle,
.nav-dropdown > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem .72rem;
    border-radius: 10px;
    color: var(--topbar-link-color, var(--text));
    font-size: .94rem;
}
.nav a:hover,
.nav .theme-toggle:hover,
.nav-dropdown > summary:hover,
.nav-dropdown[open] > summary {
    background: var(--topbar-hover-bg, var(--surface));
    text-decoration: none;
}
.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.nav-dropdown > summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    user-select: none;
    white-space: nowrap;
}
.nav-dropdown > summary::-webkit-details-marker {
    display: none;
}
.nav-dropdown > summary::after {
    content: '▾';
    font-size: .82rem;
    margin-left: .45rem;
    opacity: .86;
}
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    min-width: 14rem;
    max-width: min(22rem, calc(100vw - 2rem));
    display: grid;
    gap: .25rem;
    padding: .45rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 14px 32px rgba(2, 6, 23, .28);
    z-index: 30;
}
.nav-dropdown-menu a {
    width: 100%;
    justify-content: flex-start;
}
.nav-toggle {
    display: none;
    align-items: center;
    gap: .65rem;
    padding: .65rem .85rem;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}
.nav-toggle-box {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}
.nav-toggle-line {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .16s ease, opacity .16s ease;
}
.nav-toggle-label {
    font-size: .92rem;
    font-weight: 700;
}
.nav-toggle.is-open .nav-toggle-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle-line:nth-child(2) {
    opacity: 0;
}
.nav-toggle.is-open .nav-toggle-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}
.main-content {
    padding: 1rem 0 2.5rem;
}
.card,
.panel {
    border-radius: 16px;
}
.actions {
    align-items: stretch;
}
.actions form {
    margin: 0;
}
.chat-form {
    align-items: flex-start;
}
.chat-form textarea {
    flex: 1 1 320px;
}
.chat-form input[type=text] {
    min-width: 0;
    flex: 1 1 220px;
}
.table-wrap {
    width: 100%;
}
.table-wrap table {
    min-width: 100%;
}
.live-roster-table {
    min-width: 1120px;
}
.live-roster-table th,
.live-roster-table td {
    white-space: nowrap;
}
.live-roster-table td:nth-child(4),
.live-roster-table td:nth-child(5) {
    white-space: normal;
    min-width: 12rem;
}
.live-roster-table td:nth-child(7),
.live-roster-table td:nth-child(9) {
    width: 1%;
}
.live-roster-table .badge {
    min-width: 7rem;
}
.station-tile-map-shell,
.station-map-shell,
.grid-map-frame-wrap {
    border-radius: 16px;
}

@media (min-width: 861px) {
    .brand,
    .nav a,
    .nav .theme-toggle,
    .nav .lang-btn,
    .stat .small,
    th,
    .badge,
    .nav-toggle-label,
    h1,
    .card > h2,
    .panel > h2,
    .section-header h2 {
        white-space: nowrap;
    }

    .table-wrap thead th {
        white-space: nowrap;
    }
}

@media (min-width: 981px) and (max-width: 1500px) {
    .topbar > .container,
    .topbar .container.topbar-inner {
        width: min(1480px, calc(100vw - 1rem));
    }
    .topbar-inner {
        grid-template-columns: 1fr;
        align-items: start;
        gap: .7rem;
    }
    .topbar-branding {
        justify-content: flex-start;
    }
    .nav-toggle {
        display: none !important;
    }
    .nav {
        grid-column: 1 / -1;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: .35rem;
        padding-top: .1rem;
    }
    .nav a,
    .nav .theme-toggle,
    .nav-dropdown > summary {
        padding: .5rem .62rem;
        font-size: .9rem;
    }
    .nav-dropdown {
        display: inline-flex;
        width: auto;
    }
    .nav-dropdown-menu {
        position: absolute;
        min-width: 14rem;
        max-width: min(22rem, calc(100vw - 2rem));
        margin-top: 0;
        box-shadow: 0 14px 32px rgba(2, 6, 23, .28);
        background: var(--card);
    }
}

@media (max-width: 980px) {
    .nav-toggle {
        display: inline-flex;
    }
    .nav {
        grid-column: 1 / -1;
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: .4rem;
        padding-top: .2rem;
    }
    .nav.is-open {
        display: flex;
    }
    .nav a,
    .nav .theme-toggle,
    .nav-dropdown > summary {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }
    .nav .lang-switch {
        width: 100%;
        justify-content: flex-start;
    }
    .nav-dropdown {
        width: 100%;
        display: block;
    }
    .nav-dropdown-menu {
        position: static;
        min-width: 0;
        margin-top: .35rem;
        box-shadow: none;
        background: var(--surface);
    }
    .grid.grid-2,
    .grid.grid-3 {
        grid-template-columns: 1fr;
    }
    .status-cell {
        min-width: 0;
    }
}

@media (max-width: 860px) {
    .container {
        width: min(1200px, calc(100vw - 1rem));
    }
    .table-wrap {
        overflow: visible;
    }
    .table-wrap table,
    .table-wrap thead,
    .table-wrap tbody,
    .table-wrap tr,
    .table-wrap th,
    .table-wrap td {
        display: block;
        width: 100%;
    }
    .table-wrap thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
    .table-wrap tbody {
        display: grid;
        gap: .85rem;
    }
    .table-wrap tr {
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        background: var(--surface);
    }
    .table-wrap td {
        display: grid;
        grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
        gap: .75rem;
        padding: .75rem .85rem;
        border-bottom: 1px solid var(--border);
        text-align: left;
    }
    .table-wrap td:last-child {
        border-bottom: 0;
    }
    .table-wrap td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .table-wrap td[data-label=""]::before,
    .table-wrap td[colspan]::before {
        content: none;
    }
    .table-wrap td[colspan] {
        display: block;
    }
    .table-wrap td.actions {
        display: block;
    }
    .table-wrap td.actions::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .65rem;
    }
    .table-wrap td.actions > *,
    .table-wrap td .actions > * {
        display: block;
        width: 100%;
        margin: 0 0 .55rem;
    }
    .table-wrap td.actions > *:last-child,
    .table-wrap td .actions > *:last-child {
        margin-bottom: 0;
    }
    .table-wrap td .actions {
        display: grid;
        gap: .55rem;
    }
    .table-wrap td .actions .btn,
    .table-wrap td .actions button,
    .table-wrap td.actions .btn,
    .table-wrap td.actions button {
        width: 100%;
    }
    .entry-summary-grid {
        grid-template-columns: 1fr 1fr;
    }
}


.tutorial-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
.tutorial-intro-card,
.tutorial-card {
    width: 100%;
}
.tutorial-card h2,
.tutorial-intro-card h2 {
    margin-top: 0;
}
.tutorial-card ol,
.tutorial-card ul {
    margin: .75rem 0 0;
    padding-left: 1.2rem;
}
.tutorial-card li + li {
    margin-top: .45rem;
}
.tutorial-quick-links .actions {
    justify-content: flex-start;
}
.appearance-form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.appearance-preview-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.appearance-preview-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 1rem;
}
.appearance-preview-topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--topbar-bg);
    color: var(--topbar-link-color, var(--text));
    padding: .9rem 1rem;
}
.appearance-preview-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45rem .75rem;
    border-radius: 10px;
    background: var(--topbar-hover-bg, var(--surface));
    color: var(--topbar-link-color, var(--text));
    font-weight: 700;
}
.appearance-preview-page {
    min-height: 180px;
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.appearance-preview-page.dark-preview {
    background: var(--bg);
    color: #E5E7EB;
}
.appearance-preview-page.light-preview {
    background: var(--surface);
    color: #0F172A;
}
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="file"] {
    color-scheme: dark;
}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="file"]::-webkit-file-upload-button {
    filter: invert(1) brightness(1.15);
}
html[data-theme="dark"] input[type="date"]::-moz-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-moz-calendar-picker-indicator {
    filter: invert(1) brightness(1.15);
}

@media (max-width: 640px) {
    body {
        font-size: 15px;
    }
    .brand {
        font-size: 1rem;
    }
    .nav-logo {
        max-height: 44px;
        max-width: min(180px, 42vw);
    }
    .brand-placeholder {
        width: 42px;
        height: 42px;
    }
    .main-content {
        padding-top: .85rem;
    }
    .card,
    .panel {
        padding: .9rem;
    }
    .section-header {
        gap: .75rem;
    }
    .section-header .actions {
        width: 100%;
    }
    .section-header .actions > * {
        width: 100%;
    }
    .inline-field,
    .inline-field-tight {
        flex-direction: column;
        align-items: stretch;
    }
    .nets-collapsible-toggle-row {
        flex-direction: column;
        align-items: stretch;
    }
    .inline-field .btn,
    .inline-field button,
    .inline-field-tight .btn,
    .inline-field-tight button {
        width: 100%;
    }
    .chat-messages {
        height: 260px;
        padding: .85rem;
    }
    .chat-form {
        padding: .85rem;
    }
    .chat-form textarea {
        min-height: 88px;
    }
    .entry-card,
    .entry-card-toggle {
        padding: .85rem;
    }
    .entry-order {
        min-width: 2.6rem;
        min-height: 2.6rem;
    }
    .entry-summary-grid,
    .entry-meta-grid,
    .entry-ack-form {
        grid-template-columns: 1fr;
    }
    .entry-highlight-control {
        padding-top: 0;
    }
    .entry-details-body {
        padding: .9rem;
    }
    .qrz-thumb {
        width: 52px;
        height: 52px;
    }
    .grid-map-frame {
        min-height: 320px;
    }
    .station-tile-map-shell,
    .station-map-shell,
    .grid-map-frame-wrap {
        border-radius: 14px;
    }
    .table-wrap td {
        grid-template-columns: 1fr;
        gap: .35rem;
    }
    .table-wrap td::before {
        margin-bottom: .1rem;
    }
}

/* Hotfix 29: login-page background image + improved station map */
body.login-page {
    position: relative;
}
body.login-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background-color: #020617;
    background-image:
        linear-gradient(180deg, rgba(2, 6, 23, .22), rgba(2, 6, 23, .18)),
        var(--login-background-image, radial-gradient(circle at 20% 20%, rgba(34, 197, 94, .18), transparent 34%), radial-gradient(circle at 80% 0%, rgba(56, 189, 248, .18), transparent 32%), linear-gradient(135deg, #020617, #0f172a 45%, #111827));
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.02);
}
body.login-page::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(2, 6, 23, .48), rgba(2, 6, 23, .78));
    pointer-events: none;
}
body.login-page .topbar {
    background: rgba(2, 6, 23, .76);
    backdrop-filter: blur(16px);
}
html[data-theme="light"] body.login-page .topbar {
    background: rgba(248, 250, 252, .82);
}
body.login-page .main-content {
    position: relative;
}
body.login-page .home-grid {
    align-items: stretch;
    min-height: min(760px, calc(100vh - 10rem));
}
body.login-page .login-box,
body.login-page .hero-card {
    background: rgba(15, 23, 42, .78);
    border-color: rgba(148, 163, 184, .34);
    box-shadow: 0 24px 60px rgba(2, 6, 23, .34);
    backdrop-filter: blur(16px);
}
html[data-theme="light"] body.login-page .login-box,
html[data-theme="light"] body.login-page .hero-card {
    background: rgba(255, 255, 255, .88);
    border-color: rgba(148, 163, 184, .28);
}
.settings-image-preview-card {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}
.settings-background-preview {
    width: 100%;
    min-height: 176px;
    border-radius: 12px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .22);
}
.station-slippy-map-shell {
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background: #0b1320;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.station-slippy-map {
    position: relative;
    width: 100%;
    height: min(68vh, 620px);
    min-height: 430px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(59, 130, 246, .12), rgba(2, 6, 23, .24));
    cursor: grab;
    user-select: none;
    touch-action: none;
    outline: none;
}
.station-slippy-map.is-dragging {
    cursor: grabbing;
}
.station-slippy-map:focus-visible {
    box-shadow: inset 0 0 0 3px rgba(59, 130, 246, .65);
}
.station-map-viewport,
.station-map-tile-layer,
.station-map-marker-layer,
.station-map-overlay-svg {
    position: absolute;
    inset: 0;
}
.station-map-viewport {
    z-index: 0;
}
.station-map-tile-layer {
    z-index: 1;
    overflow: hidden;
}
.station-map-tile-img {
    position: absolute;
    width: 256px;
    height: 256px;
    max-width: none;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.station-map-overlay-svg {
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.station-map-marker-layer {
    z-index: 3;
    pointer-events: none;
}
.station-map-leader-line {
    stroke: rgba(255,255,255,.74);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 4 4;
    opacity: .88;
}
.station-map-anchor-dot {
    fill: rgba(255,255,255,.95);
    stroke: rgba(15, 23, 42, .64);
    stroke-width: 1.5;
}
.station-map-marker-link {
    position: absolute;
    display: block;
    width: 42px;
    height: 42px;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    text-decoration: none;
}
.station-map-marker-visual {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 14px rgba(2, 6, 23, .42));
}
.station-map-marker-ring-outer,
.station-map-marker-core {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}
.station-map-marker-ring-outer {
    inset: 0;
    background: rgba(255,255,255,.22);
    border: 2px solid rgba(255,255,255,.78);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .14);
}
.station-map-marker-core {
    inset: 7px;
    background: #f97316;
    border: 3px solid rgba(255,255,255,.96);
}
.station-map-marker-number {
    position: relative;
    z-index: 1;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(2, 6, 23, .45);
}
.station-map-marker-link:hover .station-map-marker-core,
.station-map-marker-link:focus .station-map-marker-core,
.station-map-marker-link.is-selected .station-map-marker-core {
    background: #facc15;
}
.station-map-marker-link:hover .station-map-marker-ring-outer,
.station-map-marker-link:focus .station-map-marker-ring-outer,
.station-map-marker-link.is-selected .station-map-marker-ring-outer {
    background: rgba(250, 204, 21, .26);
    border-color: rgba(250, 204, 21, .74);
}
.station-map-control-btn,
.station-map-reset-btn {
    white-space: nowrap;
}
@media (max-width: 900px) {
    body.login-page .home-grid {
        min-height: auto;
    }
    .station-slippy-map {
        height: min(62vh, 540px);
        min-height: 380px;
    }
}
@media (max-width: 640px) {
    .settings-image-preview-card {
        min-height: 150px;
    }
    .settings-background-preview {
        min-height: 144px;
    }
    .station-slippy-map {
        min-height: 320px;
        height: min(56vh, 420px);
    }
}


.reports-actions { align-items:center; }
.import-errors-list { margin: .5rem 0 0; padding-left: 1.1rem; }
.import-errors-list li { margin: .25rem 0; }
.report-actions-row { align-items:end; }
.station-map-toolbar-meta { display:flex; flex-wrap:wrap; gap:.75rem 1rem; }

/* Chat upgrade */
.nav-count {
    display: inline-flex;
    min-width: 1.35rem;
    height: 1.35rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    margin-left: .25rem;
    padding: 0 .35rem;
}

.chat-widget-card {
    padding: 1rem;
}

.chat-widget {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.chat-pinned-shell,
.chat-poll-card,
.chat-message-card,
.chat-reply-bar,
.conversation-summary-item,
.poll-report-item {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,.02);
}

html[data-theme="light"] .chat-pinned-shell,
html[data-theme="light"] .chat-poll-card,
html[data-theme="light"] .chat-message-card,
html[data-theme="light"] .chat-reply-bar,
html[data-theme="light"] .conversation-summary-item,
html[data-theme="light"] .poll-report-item {
    background: rgba(15,23,42,.02);
}

.chat-pinned-shell {
    padding: .85rem 1rem;
}

.chat-pinned-shell h3 {
    margin: 0 0 .65rem;
}

.chat-pinned-item + .chat-pinned-item {
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px solid var(--chat-divider);
}

.modern-chat-messages {
    height: 440px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: .9rem;
}

.chat-message-card {
    padding: .85rem .95rem;
}

.chat-message-card + .chat-message-card {
    margin-top: .75rem;
}

.chat-message-card.is-pinned {
    border-color: rgba(250,204,21,.55);
    box-shadow: inset 0 0 0 1px rgba(250,204,21,.25);
}

.chat-message-head,
.chat-poll-head,
.poll-report-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .45rem;
}

.chat-message-body {
    line-height: 1.55;
    word-break: break-word;
}

.chat-message-body a {
    color: #38bdf8;
}

html[data-theme="light"] .chat-message-body a {
    color: #0f766e;
}

.chat-reference {
    margin-bottom: .55rem;
    padding: .55rem .75rem;
    border-left: 3px solid rgba(56,189,248,.65);
    background: rgba(56,189,248,.08);
    border-radius: 10px;
}

.chat-attachment {
    margin-top: .7rem;
}

.chat-attachment a {
    font-weight: 600;
}

.chat-attachment-image img {
    display: block;
    width: min(260px, 100%);
    max-height: 220px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: .45rem;
}

.chat-message-actions,
.chat-compose-tools,
.chat-reaction-summary,
.conversation-summary-list,
.poll-choice-results,
.poll-report-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.chat-message-actions {
    align-items: center;
    margin-top: .75rem;
}

.chat-action-link,
.chat-reaction-option,
.chat-reaction-chip,
.chat-poll-choice,
.file-chip {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    border-radius: 999px;
    padding: .32rem .7rem;
    font-size: .85rem;
}

.chat-reaction-chip.is-active,
.chat-poll-choice.is-selected,
.file-chip {
    background: rgba(56,189,248,.15);
    border-color: rgba(56,189,248,.4);
}

.chat-reaction-picker {
    display: inline-flex;
    gap: .3rem;
    margin-left: auto;
}

.chat-reply-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem .85rem;
}

.chat-context-content {
    min-height: 1.25rem;
}

.modern-chat-form {
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.chat-compose-row {
    width: 100%;
}

.chat-compose-row textarea {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 92px;
    box-sizing: border-box;
}

.compact-chat-topline {
    display: flex;
    gap: .75rem;
}

.compact-chat-topline > div {
    flex: 1;
}

.file-chip {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.file-chip input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.grow-right {
    margin-left: auto;
}

.chat-polls {
    display: grid;
    gap: .75rem;
}

.chat-poll-card {
    padding: .8rem .9rem;
}

.chat-poll-choices {
    display: grid;
    gap: .45rem;
}

.chat-poll-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 12px;
    padding: .55rem .75rem;
}

.poll-report-item {
    padding: .95rem 1rem;
}

.poll-choice-result-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(160px, 2fr) auto;
    gap: .75rem;
    align-items: center;
    margin-top: .5rem;
}

.poll-choice-result-bar {
    position: relative;
    height: .8rem;
    border-radius: 999px;
    background: rgba(148,163,184,.18);
    overflow: hidden;
}

.poll-choice-result-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #38bdf8, #14b8a6);
    border-radius: inherit;
}

.conversation-summary-list {
    display: grid;
    gap: .6rem;
}

.conversation-summary-item {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: .8rem .9rem;
}

.conversation-summary-item.is-active {
    border-color: rgba(56,189,248,.5);
    box-shadow: inset 0 0 0 1px rgba(56,189,248,.28);
}

.community-chat-layout,
.private-inbox-layout {
    display: grid;
    gap: 1rem;
    align-items: start;
}

.community-chat-layout {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1.65fr);
}

.private-inbox-layout {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

.community-chat-sidebar,
.private-inbox-sidebar {
    align-self: start;
    margin-bottom: 0;
    min-width: 0;
}

.community-chat-main,
.private-inbox-main {
    min-width: 0;
    width: 100%;
}

.community-chat-main .chat-widget-card,
.private-inbox-main .chat-widget-card {
    margin-bottom: 0;
}

.community-chat-main .chat-widget,
.private-inbox-main .chat-widget {
    gap: .8rem;
}

.community-chat-main .modern-chat-messages,
.private-inbox-main .modern-chat-messages {
    height: clamp(320px, 46vh, 450px);
}

.community-chat-main .chat-compose-row,
.private-inbox-main .chat-compose-row {
    width: 100%;
}

.community-chat-main .chat-compose-row textarea,
.private-inbox-main .chat-compose-row textarea {
    width: 100%;
    min-height: 112px;
}

.community-chat-main .chat-compose-tools,
.private-inbox-main .chat-compose-tools {
    justify-content: space-between;
    align-items: center;
}

.community-chat-main .chat-compose-tools .actions,
.private-inbox-main .chat-compose-tools .actions {
    margin-left: auto;
}

.public-checkin-form.compact-public-checkin {
    margin-top: .4rem;
}

.compact-public-grid {
    align-items: end;
}

.compact-public-grid > div {
    min-width: 0;
}

.compact-public-grid textarea {
    min-height: 58px;
}

.compact-public-callsign .field-help {
    min-height: 1.25rem;
    margin: .15rem 0 .4rem;
}

.compact-public-notes {
    grid-column: 1 / -1;
}

@media (max-width: 980px) {
    .community-chat-layout,
    .private-inbox-layout {
        grid-template-columns: 1fr;
    }

    .community-chat-main,
    .private-inbox-main {
        grid-column: auto !important;
    }

    .community-chat-main .modern-chat-messages,
    .private-inbox-main .modern-chat-messages {
        height: 380px;
    }

    .poll-choice-result-row {
        grid-template-columns: 1fr;
        gap: .35rem;
    }
}

@media (max-width: 720px) {
    .modern-chat-messages {
        height: 360px;
    }

    .chat-message-head,
    .chat-poll-head,
    .poll-report-head,
    .chat-reply-bar,
    .chat-compose-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .chat-reaction-picker {
        margin-left: 0;
    }

    .compact-public-notes {
        grid-column: span 4;
    }
}

.grid-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }


.live-roster-table.no-qrz-image { min-width: 1040px; }
.public-clocks { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:.75rem; margin-bottom:1rem; }
.public-clock { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:.85rem 1rem; }
.public-clock-label { font-weight:700; }
.public-clock-time { font-size:1.65rem; font-weight:800; line-height:1.1; margin-top:.2rem; }
.public-clock-zone { color:var(--muted); font-size:.85rem; margin-top:.2rem; }
.public-clocks-settings-grid { align-items:start; }
.public-clock-setting-card { min-width:0; }
.schedule-col, .source-col { white-space: nowrap; }
.nets-actions-cell, .reports-actions { white-space: nowrap; }
.private-inbox-start-box {
    min-width: 0;
    overflow: hidden;
}
.private-inbox-start-box h2,
.private-inbox-start-box h3 {
    white-space: normal !important;
    line-height: 1.25;
    overflow-wrap: anywhere;
    margin-bottom: .75rem;
}
.private-inbox-start-box label, .private-inbox-start-box .small { overflow-wrap:anywhere; }
.private-inbox-start-box form,
.private-inbox-start-box select { width:100%; max-width:100%; }
.appearance-upload-grid { display:grid; gap:1rem; align-items:start; }
@media (min-width: 900px) {
  .appearance-upload-grid { grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); }
}
.appearance-upload-actions { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-top:.85rem; }
.app-background-note { margin-top:.65rem; }
.contacts-layout { display:grid; gap:1rem; align-items:start; }
@media (min-width: 1040px) {
  .contacts-layout { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); }
}
.contacts-sidebar, .contacts-main { min-width:0; }
.contacts-sidebar > .card { min-width:0; overflow:hidden; }
.contacts-sidebar > .card > h2 { white-space:normal !important; line-height:1.22; overflow-wrap:anywhere; }
.contacts-sidebar label, .contacts-sidebar .small { overflow-wrap:anywhere; }
.contacts-stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:.75rem; }
.contact-candidate-list { display:grid; gap:.75rem; }
.contact-candidate-card { border:1px solid var(--border); border-radius:14px; padding:.9rem 1rem; background:var(--surface); }
.contact-candidate-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.contact-meta { display:grid; gap:.2rem; }
.contact-meta strong { font-size:1rem; }
.contact-candidate-form, .contact-details-form { display:grid; gap:.8rem; min-width:0; }
.contact-qso-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:.75rem; align-items:end; }
.contact-qso-grid > div { min-width:0; }
.contact-qso-grid label { display:block; margin-bottom:.28rem; white-space:normal; }
.contact-qso-grid input, .contact-qso-grid select { width:100%; max-width:100%; }
.compact-contact-grid { grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); }
.contact-card-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.1rem; }
.contact-card-actions .btn { white-space:nowrap; }
.contact-status-list { display:grid; gap:.45rem; margin-top:.8rem; }
.contact-status-pill { display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .7rem; border-radius:999px; background:var(--surface-strong); border:1px solid var(--border); font-size:.82rem; font-weight:700; }
.contact-table-actions { display:flex; flex-wrap:wrap; gap:.4rem; align-items:flex-start; }
.contact-inline-form { display:inline-flex; }
.contact-settings-fields { display:grid; gap:.85rem; min-width:0; }
.contact-settings-fields .small { margin-top:.2rem; }
.contact-empty-state { padding:1.1rem; border:1px dashed var(--border); border-radius:14px; background:var(--surface); }
@media (max-width: 860px) {
  .contact-qso-grid, .compact-contact-grid { grid-template-columns: 1fr; }
}
body.has-app-background .card,
body.has-app-background .panel,
body.has-app-background .stat,
body.has-app-background .chat-box,
body.has-app-background .live-roster-table,
body.has-app-background .public-clock,
body.has-app-background .contact-candidate-card,
body.has-app-background .contact-empty-state,
body.has-app-background .conversation-summary-item,
body.has-app-background .settings-image-preview-card { box-shadow: 0 16px 32px rgba(2,6,23,.16); }
html[data-theme="light"] body.has-app-background .card,
html[data-theme="light"] body.has-app-background .panel,
html[data-theme="light"] body.has-app-background .stat,
html[data-theme="light"] body.has-app-background .chat-box,
html[data-theme="light"] body.has-app-background .contact-candidate-card,
html[data-theme="light"] body.has-app-background .contact-empty-state,
html[data-theme="light"] body.has-app-background .conversation-summary-item,
html[data-theme="light"] body.has-app-background .settings-image-preview-card { box-shadow: 0 12px 26px rgba(15,23,42,.12); }
.mobile-checkin-shell { max-width: 480px; margin-inline: auto; }
.mobile-checkin-form { display:grid; gap:.7rem; }
.mobile-checkin-form input, .mobile-checkin-form select, .mobile-checkin-form textarea { font-size:1rem; }
.mobile-checkin-submit { width:100%; min-height:52px; }
.widget-shell .live-roster-table { min-width: 860px; }
.widget-shell .live-roster-table td, .widget-shell .live-roster-table th { font-size:.9rem; }
html[data-theme="light"] .badge { color:#fff; }
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="time"] { color: var(--input-text); }
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.15); }
@media (max-width: 760px) {
  .public-clocks { grid-template-columns: 1fr; }
  .schedule-col, .source-col { white-space: normal; }
  .widget-shell .live-roster-table { min-width: 720px; }
}

.tutorial-feature-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); align-items:stretch; }
.tutorial-intro-card,
.tutorial-feature-card,
.tutorial-admin-card { min-width:0; overflow:hidden; }
.tutorial-feature-card,
.tutorial-admin-card { display:flex; flex-direction:column; height:100%; }
.tutorial-intro-card > h2,
.tutorial-intro-card .section-header h2,
.tutorial-feature-body h2,
.tutorial-admin-body h2 {
  white-space:normal !important;
  overflow-wrap:anywhere;
}
.tutorial-intro-card .small,
.tutorial-feature-placeholder-title,
.tutorial-feature-placeholder .small,
.tutorial-feature-list li {
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.tutorial-intro-card .section-header {
  align-items:flex-start;
  gap:1rem;
}
.tutorial-intro-card .section-header > div {
  min-width:0;
}
.tutorial-feature-visual { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:linear-gradient(135deg, var(--surface-strong), var(--surface)); min-height:220px; aspect-ratio:16/9; margin-bottom:1rem; }
.admin-feature-visual { min-height:180px; aspect-ratio:16/10; }
.tutorial-feature-visual img { width:100%; height:100%; object-fit:cover; display:block; }
.tutorial-feature-placeholder { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:.55rem; padding:1.25rem; color:var(--text); }
.tutorial-feature-icon { font-size:2.4rem; line-height:1; }
.tutorial-feature-placeholder-title { font-size:1.08rem; font-weight:800; }
.tutorial-feature-body,
.tutorial-admin-body { min-width:0; display:flex; flex-direction:column; flex:1 1 auto; }
.tutorial-feature-body h2,
.tutorial-admin-body h2 { margin:0 0 .55rem; white-space:normal !important; overflow-wrap:anywhere; word-break:break-word; line-height:1.28; }
.tutorial-feature-list { margin:.75rem 0 0; padding-left:1.2rem; display:grid; gap:.42rem; }
.tutorial-feature-card .tutorial-feature-list,
.tutorial-admin-card .tutorial-feature-list { margin-top:auto; padding-top:.85rem; }
.tutorial-feature-card .small,
.tutorial-admin-card .small { overflow-wrap:anywhere; word-break:break-word; }
.tutorial-card-title-wrap { min-height:2.8em; display:flex; align-items:flex-start; padding-top:.05rem; }
.compact-tutorial-list { gap:.32rem; }
.tutorial-admin-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(310px, 1fr)); align-items:stretch; }
.tutorial-admin-form { display:grid; gap:.85rem; min-width:0; }
.tutorial-admin-form input[type="file"] { width:100%; max-width:100%; }
.private-inbox-start-box h2,
.private-inbox-start-box h3,
.private-inbox-start-box label,
.conversation-summary-item strong {
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.conversation-summary-item strong { display:block; }
.tutorial-feature-visual.is-placeholder-only,
.admin-feature-visual.is-placeholder-only {
  aspect-ratio:auto;
  min-height:240px;
}
.tutorial-feature-placeholder-title,
.tutorial-feature-body h2,
.tutorial-admin-body h2 {
  line-height:1.24;
  word-break:break-word;
}
.tutorial-carousel {
  position:relative;
  width:100%;
  height:100%;
}
.tutorial-carousel-track {
  display:flex;
  width:100%;
  height:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:thin;
}
.tutorial-carousel-track::-webkit-scrollbar {
  height:10px;
}
.tutorial-carousel-slide {
  flex:0 0 100%;
  width:100%;
  min-height:100%;
  scroll-snap-align:start;
}
.tutorial-carousel-slide img {
  width:100%;
  height:100%;
  min-height:220px;
  object-fit:cover;
  display:block;
}
.tutorial-carousel-btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  border:0;
  border-radius:999px;
  width:2.5rem;
  height:2.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.35rem;
  font-weight:800;
  background:var(--warning);
  color:#fff;
  box-shadow:0 12px 24px rgba(15,23,42,.28);
}
.tutorial-carousel-btn-prev { left:.7rem; }
.tutorial-carousel-btn-next { right:.7rem; }
.tutorial-carousel-footer {
  position:absolute;
  left:.9rem;
  right:.9rem;
  bottom:.7rem;
  padding:.32rem .55rem;
  border-radius:999px;
  background:rgba(2,6,23,.55);
  color:#fff;
  text-align:center;
  backdrop-filter:blur(6px);
}
html[data-theme="light"] .tutorial-carousel-footer {
  background:rgba(255,255,255,.82);
  color:var(--text);
}
.tutorial-admin-image-list {
  display:grid;
  gap:.75rem;
}
.tutorial-admin-image-item {
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.7rem;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
}
.tutorial-admin-image-thumb {
  width:96px;
  height:72px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--border);
  flex:0 0 auto;
}
.tutorial-admin-image-actions {
  flex:1;
  display:flex;
  justify-content:flex-end;
}
@media (max-width: 1180px) {
  .tutorial-feature-visual,
  .admin-feature-visual {
    min-height:200px;
  }
}
@media (max-width: 760px) {
  .tutorial-carousel-btn {
    width:2.2rem;
    height:2.2rem;
    font-size:1.15rem;
  }
  .tutorial-carousel-footer {
    position:static;
    margin:.55rem .75rem .75rem;
  }
  .tutorial-admin-image-item {
    flex-direction:column;
    align-items:stretch;
  }
  .tutorial-admin-image-thumb {
    width:100%;
    height:auto;
    aspect-ratio:16/9;
  }
  .tutorial-admin-image-actions {
    justify-content:stretch;
  }
  .tutorial-admin-image-actions .btn {
    width:100%;
  }
}
.contact-export-note { margin-top:.35rem; }
.users-toolbar { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; justify-content:space-between; }
.users-toolbar .actions { justify-content:flex-start; }
.users-bulk-help { margin-top:.65rem; }
.users-bulk-help code { white-space:nowrap; }
.users-export-actions .btn { white-space:nowrap; }
@media (max-width: 860px) {
  .tutorial-feature-visual { min-height:180px; }
  .admin-feature-visual { min-height:160px; }
}

@media (min-width: 900px) {
  .tutorial-feature-grid.equalized .tutorial-feature-card { height:100%; }
}

/* Hotfix 50: dashboard spacing, embed tools, tutorial/admin polish, and stronger mobile containment */
.dashboard-stats-grid,
.dashboard-panels-grid,
.embed-tools-layout,
.community-chat-layout,
.private-inbox-layout,
.contacts-layout,
.tutorial-feature-grid,
.tutorial-admin-grid,
.public-clocks,
.station-map-toolbar,
.section-header,
.users-toolbar,
.main-content,
.main-content > *,
.card > *,
.panel > *,
.grid > * {
  min-width: 0;
}

.main-content {
  overflow-x: hidden;
}

.card,
.panel,
.table-wrap,
.station-map-report-card,
.widget-shell,
.embed-preview-frame-wrap,
.chat-widget-card {
  max-width: 100%;
}

@media (min-width: 981px) {
  .dashboard-stats-grid {
    margin-bottom: 10px;
  }
}

.embed-tools-layout {
  align-items: start;
}

.embed-widget-select-form {
  display: grid;
  gap: .75rem;
}

.embed-preview-frame-wrap {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}

.embed-preview-frame-wrap iframe {
  display: block;
  width: 100%;
  min-height: 520px;
  border: 0;
}

.private-inbox-start-box,
.private-inbox-start-box h2,
.private-inbox-start-box h3,
.private-inbox-start-box label,
.private-inbox-start-box .small,
.private-inbox-start-box option,
.conversation-summary-item,
.conversation-summary-item strong,
.conversation-summary-item .small {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.private-inbox-start-box select {
  min-width: 0;
}

.conversation-summary-item {
  min-width: 0;
}

.tutorial-card-title-wrap {
  min-height: 0;
  padding-top: .1rem;
  overflow: visible;
}

@media (min-width: 900px) and (max-width: 1340px) {
  .tutorial-card-title-wrap {
    min-height: 4.8em;
  }
}

@media (min-width: 1341px) {
  .tutorial-card-title-wrap {
    min-height: 4.2em;
  }
}

.tutorial-feature-body,
.tutorial-admin-body {
  gap: .15rem;
}

.tutorial-admin-shortcuts {
  margin-top: 1rem;
}

.tutorial-admin-shortcuts .btn {
  align-self: flex-start;
}

@media (max-width: 860px) {
  html,
  body,
  .container,
  .main-content,
  .card,
  .panel,
  .grid,
  .section-header,
  .users-toolbar,
  .community-chat-layout,
  .private-inbox-layout,
  .contacts-layout,
  .tutorial-feature-grid,
  .tutorial-admin-grid,
  .station-map-toolbar,
  .public-clocks,
  .embed-tools-layout,
  .embed-preview-frame-wrap,
  .widget-shell {
    max-width: 100%;
  }

  .section-header,
  .users-toolbar,
  .station-map-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .table-wrap,
  .widget-shell .table-wrap {
    overflow: visible;
  }

  .live-roster-table,
  .live-roster-table.no-qrz-image,
  .widget-shell .live-roster-table {
    min-width: 0 !important;
  }

  .widget-shell {
    padding: .65rem;
  }

  .embed-preview-frame-wrap iframe {
    min-height: 420px;
  }

  .compact-public-grid {
    grid-template-columns: 1fr;
  }

  .compact-public-notes {
    grid-column: auto;
  }

  .contact-inline-form {
    display: block;
    width: 100%;
  }

  .contact-table-actions,
  .contact-card-actions,
  .appearance-upload-actions,
  .users-export-actions,
  .tutorial-admin-shortcuts,
  .actions {
    display: grid;
    width: 100%;
  }

  .contact-table-actions > *,
  .contact-card-actions > *,
  .appearance-upload-actions > *,
  .users-export-actions > *,
  .tutorial-admin-shortcuts > *,
  .actions > * {
    width: 100%;
    min-width: 0;
  }

  .station-map-toolbar-meta {
    justify-content: flex-start;
  }

  .community-chat-main .chat-compose-tools,
  .private-inbox-main .chat-compose-tools {
    align-items: stretch;
  }

  .community-chat-main .chat-compose-tools .actions,
  .private-inbox-main .chat-compose-tools .actions {
    margin-left: 0;
  }
}


/* Participation certificates */
.certificate-summary-grid,
.certificate-card-grid {
  margin-top: 1rem;
}

.certificate-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.certificate-card,
.certificate-bg-card {
  min-width: 0;
}

.certificate-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
}

.certificate-card-header h2,
.certificate-logo-admin-box h3,
.certificate-bg-meta strong {
  margin: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.certificate-card-body {
  display: grid;
  gap: .45rem;
}

.certificate-admin-form textarea,
.certificate-admin-form input,
.certificate-admin-form select {
  min-width: 0;
}

.certificate-bg-card {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: .9rem;
  align-items: center;
  padding: .85rem 0;
  border-top: 1px solid rgba(148, 163, 184, .2);
}

.certificate-bg-card:first-child {
  border-top: 0;
}

.certificate-bg-preview {
  width: 120px;
  height: 82px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  background-color: rgba(148, 163, 184, .14);
  border: 1px solid rgba(148, 163, 184, .22);
}

.certificate-logo-admin-box {
  border: 1px dashed rgba(148, 163, 184, .4);
  border-radius: 16px;
  padding: 1rem;
  background: rgba(148, 163, 184, .08);
}

.certificate-logo-admin-preview {
  min-height: 118px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, .24);
  background: rgba(255, 255, 255, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow: hidden;
}

.theme-dark .certificate-logo-admin-preview,
.theme-classic .certificate-logo-admin-preview,
.theme-forest .certificate-logo-admin-preview,
.theme-sunset .certificate-logo-admin-preview {
  background: rgba(15, 23, 42, .34);
}

.certificate-logo-admin-preview img {
  max-width: 100%;
  max-height: 96px;
  object-fit: contain;
}

.certificate-user-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .5rem .85rem;
  max-height: 260px;
  overflow: auto;
  padding: .75rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .22);
}

.certificate-user-checklist label {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
}

.certificate-user-picker {
  display: grid;
  gap: .75rem;
}

.certificate-user-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
}

.certificate-selected-users {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding: .85rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .22);
  min-height: 64px;
  background: rgba(148, 163, 184, .07);
}

.certificate-user-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .65rem;
  border-radius: 999px;
  background: rgba(56, 189, 248, .14);
  border: 1px solid rgba(56, 189, 248, .22);
  max-width: 100%;
}

.certificate-user-chip span {
  overflow-wrap: anywhere;
}

.certificate-user-chip .chip-remove {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.certificate-award-operator {
  display: grid;
  gap: .2rem;
}

.inline-form {
  display: inline-flex;
}

.certificate-filter-grid .actions {
  align-items: end;
}

@media (max-width: 900px) {
  .certificate-user-search-row {
    grid-template-columns: 1fr;
  }

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

  .certificate-bg-preview {
    width: 100%;
    max-width: 220px;
  }

  .certificate-card-header {
    flex-direction: column;
  }
}


.callsign-nowrap {
    white-space: nowrap;
}