:root { --bg:#F3F4F6; --card:#fff; --text:#111827; --muted:#4B5563; --line:#D1D5DB; --blue:#1565C0; --green:#15803D; --warning:#B45309; --red:#B91C1C; --old:#9CA3AF; --qso-stripe:#F3F4F6; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:18px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.app-shell { max-width:1400px; margin:auto; padding:16px; }
header,.section-head,footer { display:flex; gap:12px; align-items:center; justify-content:space-between; }
header { padding:8px 4px 14px; }
header strong { font-size:1.08rem; letter-spacing:.02em; }
.brand { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.app-version { color:var(--muted); font-size:.72rem; font-weight:750; }
.headline { display:flex; flex-direction:column; align-items:center; font-size:1.65rem; font-weight:850; line-height:1.1; }
.radio-switch { display:flex; gap:6px; align-items:center; }
.radio-switch button { min-width:145px; }
.radio-switch button.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.radio-hint { color:var(--muted); font-size:.82rem; font-weight:700; }
#frequency { color:var(--muted); font-size:.72rem; font-weight:600; margin-top:4px; }
.pill { display:inline-block; padding:5px 9px; border-radius:999px; background:#dcfce7; color:#14532d; font-size:.76rem; font-weight:700; }
.pill.disconnected { background:#fee2e2; color:#7f1d1d; }
.pill.mock { background:#fef3c7; color:#78350f; }
.update-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 12px; padding:14px 16px; border:3px solid #dc2626; border-radius:14px; background:#fff1f2; color:#881337; box-shadow:0 4px 18px #991b1b24; }
.update-banner[hidden] { display:none; }
.update-banner div { display:grid; gap:2px; }
.update-banner strong { font-size:1.08rem; }
.update-banner span { font-size:.82rem; }
.update-banner button { flex:none; min-height:52px; background:#b91c1c; border-color:#b91c1c; color:#fff; }
.mobile-pages { display:none; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"cq qso" "station station" "actions actions"; gap:16px; }
.cq { grid-area:cq; }
.qso { grid-area:qso; }
.station { grid-area:station; }
.workspace footer { grid-area:actions; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:0 1px 2px #0000000a; }
h2 { font-size:1rem; margin:0 0 12px; letter-spacing:.02em; }
.section-head { margin-bottom:12px; }
.section-head h2 { margin-bottom:0; }
.cq-filter-row { display:flex; margin:-2px 0 10px; }
.cq-filter-row button { width:100%; min-height:44px; border-color:var(--line); color:var(--muted); font-size:.82rem; }
.cq-filter-row button.active { background:#dcfce7; border-color:#16a34a; color:#14532d; }
.cq-filter-row button:disabled { opacity:.6; cursor:not-allowed; }
body.dark .cq-filter-row button.active { background:#14532d; border-color:#22c55e; color:#dcfce7; }
.cq,.qso { min-height:355px; }
.list { display:grid; gap:8px; max-height:330px; overflow:auto; padding:3px; }
.cq-item { width:100%; min-height:60px; display:flex; justify-content:space-between; align-items:center; text-align:left; border:1px solid var(--line); border-left:7px solid var(--old); border-radius:9px; background:transparent; padding:9px 12px; color:inherit; }
.cq-item strong { font-size:1.1rem; }
.cq-item small { color:var(--muted); }
.cq-item.strong { border-left-color:#16A34A; }
.cq-item.medium { border-left-color:#D97706; }
.cq-item.weak { border-left-color:#DC2626; }
.cq-item.stale { opacity:.52; }
.cq-item.selected { outline:3px solid var(--blue); outline-offset:0; }
button { min-height:48px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--text); font:inherit; font-weight:750; padding:9px 15px; touch-action:manipulation; cursor:pointer; }
button:focus-visible { outline:3px solid #60a5fa; outline-offset:2px; }
button:disabled { cursor:not-allowed; opacity:.62; }
.modes,.sort { display:flex; gap:6px; }
.modes button { min-width:76px; }
.sort button { min-height:44px; padding:7px 12px; font-size:.92rem; }
.modes button.active,.sort button.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.station-info { display:flex; gap:28px; flex-wrap:wrap; }
.station-info div { min-width:130px; }
.station-info dt { color:var(--muted); font-size:.78rem; }
.station-info dd { margin:2px 0; font-weight:750; }
.qso-lines { display:grid; gap:2px; line-height:1.45; font-weight:650; }
.qso-lines > div { padding:7px 10px; border-radius:6px; }
.qso-lines > div:nth-child(even) { background:var(--qso-stripe); }
.quiet { color:var(--muted); }
footer { align-items:stretch; flex-wrap:wrap; }
.call { flex:1; min-height:68px; background:var(--green); border-color:var(--green); color:#fff; font-size:1.22rem; }
.call:disabled { background:var(--old); border-color:var(--old); }
.halt { flex:1.25; min-height:68px; background:var(--red); border-color:var(--red); color:#fff; font-size:1.14rem; }
.status,.start { min-width:120px; }
.notice { margin:0; width:100%; min-height:1.3em; color:var(--muted); font-size:.9rem; font-weight:650; }
.splash { max-width:440px; margin:12vh auto; text-align:center; }
.splash p { color:var(--muted); }
dialog { border:0; border-radius:14px; color:var(--text); background:var(--card); max-width:560px; width:92%; box-shadow:0 20px 60px #0008; }
dialog::backdrop { background:#11182799; }
.close { float:right; }
dl { display:grid; grid-template-columns:auto 1fr; gap:9px 18px; }
dt { color:var(--muted); }
dd { margin:0; font-weight:750; }
body.dark { --bg:#111827; --card:#1f2937; --text:#f9fafb; --muted:#d1d5db; --line:#4b5563; --qso-stripe:#374151; }
body.dark .update-banner { background:#4c0519; color:#ffe4e6; border-color:#fb7185; }

@media (max-width:850px) {
  .app-shell { padding:10px; }
  header { flex-wrap:wrap; }
  .brand { width:100%; justify-content:space-between; }
  .radio-switch { order:3; width:100%; }
  .radio-switch button { flex:1; min-width:0; }
  .cq,.qso { min-height:245px; }
  .list { max-height:300px; }
  .section-head { align-items:flex-start; }
  .station-info { gap:14px; }
  .halt,.call { flex-basis:calc(50% - 8px); }
}
@media (orientation:portrait) and (max-width:850px), (max-width:700px) {
  .mobile-pages { display:flex; gap:6px; margin:0 0 8px; padding:4px; border:1px solid var(--line); border-radius:11px; background:var(--card); }
  .mobile-pages button { flex:1; min-height:44px; padding:6px 8px; }
  .mobile-pages button.active { background:var(--blue); border-color:var(--blue); color:#fff; }
  .page-dot { margin-left:6px; color:#fbbf24; }
  #app.mobile-page-operate .workspace { grid-template-columns:1fr; grid-template-areas:"cq" "actions"; gap:8px; }
  #app.mobile-page-qso .workspace { grid-template-columns:1fr; grid-template-areas:"actions" "station" "qso"; gap:8px; }
  #app.mobile-page-operate .station,#app.mobile-page-operate .qso { display:none; }
  #app.mobile-page-qso .cq { display:none; }
  .cq,.qso { min-height:0; }
  .qso-lines { max-height:360px; overflow-y:auto; }
  @supports (height: 100svh) {
    .qso-lines { max-height:40svh; }
  }
}
@media (max-width:600px) {
  body { font-size:16px; }
  .app-shell { padding:6px; }
  header { gap:6px; padding:2px 2px 8px; }
  header strong { font-size:1rem; }
  .brand { gap:5px; }
  .app-version { font-size:.66rem; }
  .pill { padding:4px 7px; font-size:.7rem; }
  .headline { font-size:1.38rem; }
  #frequency { margin-top:2px; }
  .radio-switch { gap:4px; }
  .radio-switch button { min-height:44px; padding:6px 8px; font-size:.9rem; }
  .modes { gap:4px; }
  .modes button { min-width:62px; min-height:44px; padding:6px 9px; }
  .update-banner { align-items:stretch; flex-direction:column; }
  .update-banner button { width:100%; }
  .headline { align-items:flex-start; }
  .card { padding:10px; border-radius:11px; }
  h2 { font-size:.92rem; margin-bottom:8px; }
  .section-head { align-items:center; flex-wrap:nowrap; gap:6px; margin-bottom:8px; }
  .section-head h2 { font-size:.84rem; white-space:nowrap; }
  .cq-filter-row { margin-bottom:6px; }
  .cq-filter-row button { min-height:44px; padding:5px 8px; font-size:.76rem; }
  .sort { width:auto; gap:3px; }
  .sort button { flex:none; min-height:44px; padding:5px 7px; font-size:.76rem; }
  .list { max-height:230px; gap:6px; padding:2px; }
  @supports (height: 100svh) {
    .list { max-height:clamp(180px,28svh,230px); }
  }
  .cq-item { min-height:52px; padding:6px 9px; border-left-width:6px; }
  .cq-item strong { font-size:1rem; }
  footer { gap:6px; }
  .call { flex:.85 1 0; min-width:0; min-height:56px; padding:6px; font-size:1rem; }
  .halt { flex:1.15 1 0; min-width:0; min-height:56px; padding:6px; font-size:.9rem; }
  .status { min-width:86px; min-height:56px; padding:6px 8px; font-size:.82rem; }
  .start { flex-basis:100%; }
  .notice { min-height:1em; font-size:.78rem; }
  .station-info { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; }
  .station-info div { min-width:0; }
  .station-info dd { overflow-wrap:anywhere; }
  .qso .quiet,.station .quiet { margin:0; }
}
@media (orientation:landscape) and (min-width:701px) and (max-width:850px) {
  .workspace { gap:10px; }
  .card { padding:12px; }
  .section-head { gap:6px; }
  .section-head h2 { font-size:.88rem; }
  .sort { gap:4px; }
  .sort button { padding-inline:7px; font-size:.82rem; }
}
@media (orientation:landscape) and (max-height:850px) and (min-width:851px) {
  .cq,.qso { min-height:300px; }
  .list { max-height:275px; }
}