:root{
  --bg: #0A0F1C;
  --panel: #0F1626;
  --panel-2: #131C30;
  --grid: #1C2942;
  --scope: #35E39A;
  --scope-dim: #1C6B4C;
  --amber: #FFB020;
  --climb: #4FA8FF;
  --gold: #E8B84B;
  --red: #FF5C5C;
  --text: #DCE4F2;
  --text-dim: #6E7EA0;
  --text-faint: #45516E;
  --topbar-from: #0D1424;
  --topbar-to: #0A0F1C;
  --card-shadow: none;
  --scope-glow: 0.28;
}
body.theme-light{
  --bg: #EEF1F7;
  --panel: #FFFFFF;
  --panel-2: #F5F7FB;
  --grid: #D7DEEB;
  --scope: #0E8F5C;
  --scope-dim: #8FCDAE;
  --amber: #B8720C;
  --climb: #1D6FD1;
  --gold: #A6790A;
  --red: #C63B32;
  --text: #131A2A;
  --text-dim: #4C566E;
  --text-faint: #8891A8;
  --topbar-from: #FFFFFF;
  --topbar-to: #F7F9FC;
  --card-shadow: 0 1px 2px rgba(20,30,50,0.04), 0 6px 16px rgba(20,30,50,0.06);
  --scope-glow: 0.14;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s ease, color 0.2s ease;
}
.mono{ font-family: 'IBM Plex Mono', monospace; }
a{ color:inherit; text-decoration:none; }

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--grid);
  background: linear-gradient(180deg, var(--topbar-from), var(--topbar-to));
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:34px; height:34px;
  border:1px solid var(--scope);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color:var(--scope);
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  position:relative;
}
.brand-mark::after{
  content:""; position:absolute;
  width:6px;height:6px; background:var(--scope); border-radius:50%;
  top:3px; right:3px; box-shadow: 0 0 6px var(--scope);
}
.brand-text h1{ font-size:16px; font-weight:600; letter-spacing:0.02em; color: var(--text); }
.brand-text span{
  display:block; font-family:'IBM Plex Mono', monospace;
  font-size:11px; color: var(--text-dim); letter-spacing: 0.08em; margin-top:2px;
}
.status-pill{
  display:flex; align-items:center; gap:8px;
  font-size:11px; color: var(--scope);
  border:1px solid var(--scope-dim);
  background: color-mix(in srgb, var(--scope) 10%, transparent);
  padding: 6px 12px; border-radius: 100px; letter-spacing:0.05em;
}
.status-pill.stale{
  color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}
.status-pill.waiting{ color: var(--text-dim); border-color: var(--grid); background: transparent; }
.status-pill .dot{
  width:7px; height:7px; border-radius:50%; background: currentColor;
  box-shadow: 0 0 8px currentColor; animation: pulse 1.8s infinite ease-in-out;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }

.top-right{ display:flex; align-items:center; gap:14px; }
.user-chip{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--text-dim);
  border:1px solid var(--grid); padding:6px 12px; border-radius:8px;
  background: var(--panel);
}
.user-chip .av{
  width:20px;height:20px;border-radius:50%;
  background:var(--panel-2); border:1px solid var(--grid);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--text);
}

/* ---------- Layout ---------- */
.layout{
  display:grid; grid-template-columns: 1.3fr 420px; gap: 1px; background: var(--grid);
}
@media (max-width: 980px){ .layout{ grid-template-columns: 1fr; } }

/* ---------- Scope panel ---------- */
.scope-wrap{ background: var(--bg); padding: 20px; display:flex; flex-direction:column; gap:14px; }
.panel-header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.panel-header h2{
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color: var(--text-dim); font-weight:600;
}
.controls-row{ display:flex; gap:8px; flex-wrap:wrap; }
.ctrl{
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--text-dim);
  background: var(--panel); border:1px solid var(--grid); padding:6px 10px; border-radius:6px;
  display:flex; align-items:center; gap:6px;
  box-shadow: var(--card-shadow);
}
.ctrl b{ color:var(--text); font-weight:600; }
.ctrl.active{ color:var(--scope); border-color:var(--scope-dim); }

.scope{
  position:relative; aspect-ratio: 1 / 1; width: min(100%, 640px); margin: 0 auto;
  border-radius:50%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--scope) 6%, transparent), transparent 70%), var(--panel);
  border: 1px solid var(--grid); overflow:hidden;
  box-shadow: var(--card-shadow);
}
.ring{
  position:absolute; border-radius:50%; border: 1px solid var(--grid);
  top:50%; left:50%; transform: translate(-50%,-50%);
}
.ring-label{
  position:absolute; font-family:'IBM Plex Mono', monospace; font-size:10px; color: var(--text-faint); left:50%;
}
.crosshair{ position:absolute; background: var(--grid); }
.crosshair.h{ top:50%; left:0; right:0; height:1px; }
.crosshair.v{ left:50%; top:0; bottom:0; width:1px; }

.home{
  position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:50%; background: var(--amber); box-shadow: 0 0 10px var(--amber);
}
.home-label{
  position:absolute; top:50%; left:50%; margin-top:8px; margin-left:8px;
  font-family:'IBM Plex Mono', monospace; font-size:10px; color: var(--amber); letter-spacing:0.05em;
}

.sweep{
  position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--scope) calc(var(--scope-glow) * 100%), transparent), transparent 32%);
  animation: rotate 6s linear infinite; mix-blend-mode: multiply;
}
body:not(.theme-light) .sweep{ mix-blend-mode: screen; }
@keyframes rotate{ from{transform:rotate(0deg);} to{transform:rotate(-360deg);} }

.blip{ position:absolute; width:8px; height:8px; border-radius:2px; transform: translate(-50%,-50%) rotate(var(--hdg, 0deg)); }
.blip::before{
  content:""; position:absolute; inset:0; background: var(--scope);
  clip-path: polygon(50% 0%, 100% 100%, 50% 78%, 0% 100%);
}
.blip.landing::before{ background: var(--amber); }
.blip.departure::before{ background: var(--climb); }
.blip .tag{
  position:absolute; top:-6px; left:12px; font-family:'IBM Plex Mono', monospace;
  font-size:9.5px; white-space:nowrap; color: var(--text-dim); line-height:1.3;
}
.blip .tag b{ color: var(--text); display:block; font-size:10px; }

.theme-toggle{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:12px; color:var(--text-dim);
  border:1px solid var(--grid); padding:6px 12px; border-radius:8px;
  background: var(--panel);
}
.theme-toggle:hover{ color: var(--text); border-color: var(--scope-dim); }

.legend{ display:flex; gap:16px; flex-wrap:wrap; font-family:'IBM Plex Mono', monospace; font-size:10.5px; color: var(--text-dim); }
.legend span{ display:flex; align-items:center; gap:6px; }
.swatch{ width:9px; height:9px; border-radius:2px; display:inline-block; }

/* ---------- Side panel: flight list ---------- */
.list-wrap{
  background: var(--bg); padding: 20px; display:flex; flex-direction:column; gap:14px;
  max-height: 100vh; overflow:hidden;
}
.list-count{ font-family:'IBM Plex Mono', monospace; font-size:11px; color: var(--text-dim); }
.flight-list{ display:flex; flex-direction:column; gap:10px; overflow-y:auto; padding-right:4px; }
.empty-state{ color: var(--text-faint); font-size:12px; padding: 20px 0; text-align:center; }

.flight-card{
  background: var(--panel); border: 1px solid var(--grid); border-radius: 10px; padding: 12px 14px;
  display:grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items:center; position:relative;
  box-shadow: var(--card-shadow);
}
.flight-card.alert-landing{ border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.flight-card.alert-departure{ border-color: color-mix(in srgb, var(--climb) 55%, transparent); }
.logo{
  width:44px; height:44px; border-radius:8px; background: var(--panel-2); border:1px solid var(--grid);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:11px; color: var(--text); letter-spacing:0.02em;
}
.flight-main .row1{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.flight-main .callsign{ font-weight:600; font-size:14px; }
.flight-main .type{ font-family:'IBM Plex Mono', monospace; font-size:11px; color: var(--text-dim); }
.flight-main .route{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; color: var(--text-dim); margin-top:4px;
}
.flight-stats{ text-align:right; font-family:'IBM Plex Mono', monospace; }
.flight-stats .alt{ font-size:15px; font-weight:600; }
.flight-stats .alt.landing{ color: var(--amber); }
.flight-stats .alt.departure{ color: var(--climb); }
.flight-stats .spd{ font-size:11px; color: var(--text-dim); margin-top:2px; }

.filter-note{
  font-size:10.5px; color: var(--text-faint); border-top: 1px dashed var(--grid);
  padding-top:12px; line-height:1.6;
}
.filter-note b{ color: var(--text-dim); }
.filter-note a{ color: var(--scope); }

::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-thumb{ background: var(--grid); border-radius:4px; }

/* ---------- Login ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{
  width:100%; max-width:340px; background: var(--panel); border:1px solid var(--grid);
  border-radius:12px; padding:28px; display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center;
  box-shadow: var(--card-shadow);
}
.login-mark{
  width:40px; height:40px; border:1px solid var(--scope); border-radius:8px; color:var(--scope);
  display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:4px;
}
.login-card h1{ font-family:'Space Grotesk', sans-serif; font-size:16px; color: var(--text); }
.login-sub{ font-size:11px; color: var(--text-dim); letter-spacing:0.05em; margin-bottom:8px; }
.login-card label{ width:100%; text-align:left; font-size:11px; color: var(--text-dim); display:flex; flex-direction:column; gap:6px; }
.login-card input{
  background: var(--panel-2); border:1px solid var(--grid); border-radius:6px; padding:9px 10px;
  color: var(--text); font-family:'IBM Plex Mono', monospace; font-size:13px;
}
.login-card button{
  width:100%; margin-top:8px; padding:10px; border-radius:6px; border:1px solid var(--scope-dim);
  background: color-mix(in srgb, var(--scope) 12%, transparent); color: var(--scope); font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:0.05em; cursor:pointer;
}
.login-card button:hover{ background: color-mix(in srgb, var(--scope) 20%, transparent); }
.login-error{
  width:100%; background: color-mix(in srgb, var(--red) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--red) 45%, transparent); color: var(--red);
  font-size:11.5px; padding:8px 10px; border-radius:6px;
}

/* ---------- Admin ---------- */
.admin-wrap{ max-width:640px; margin: 0 auto; padding: 28px 20px; display:flex; flex-direction:column; gap:20px; }
.admin-card{
  background: var(--panel); border:1px solid var(--grid); border-radius:12px; padding:22px; display:flex; flex-direction:column; gap:14px;
  box-shadow: var(--card-shadow);
}
.admin-card h2{ font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color: var(--text-dim); }
.field-row{ display:flex; gap:14px; flex-wrap:wrap; }
.field-row label{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:6px; font-size:11px; color: var(--text-dim); }
.admin-card input{
  background: var(--panel-2); border:1px solid var(--grid); border-radius:6px; padding:9px 10px;
  color: var(--text); font-family:'IBM Plex Mono', monospace; font-size:13px;
}
.admin-card button, .btn-secondary{
  padding:9px 16px; border-radius:6px; border:1px solid var(--scope-dim);
  background: color-mix(in srgb, var(--scope) 12%, transparent);
  color: var(--scope); font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.05em;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; width:fit-content;
}
.admin-card button:hover, .btn-secondary:hover{ background: color-mix(in srgb, var(--scope) 20%, transparent); }
.admin-hint{ font-size:11px; color: var(--text-faint); }
.backup-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.backup-import-form{ display:flex; gap:8px; align-items:center; }
.backup-import-form input[type="file"]{ font-size:11px; color: var(--text-dim); }
.admin-message{
  background: color-mix(in srgb, var(--scope) 10%, transparent); border:1px solid var(--scope-dim); color: var(--scope);
  padding:10px 14px; border-radius:8px; font-size:12px;
}

/* ---------- Board / Anzeigetafel ---------- */
.board-view{
  padding: 32px 22px; display:flex; flex-direction:column; align-items:center; gap:16px; min-height: calc(100vh - 65px);
}
.board-card{
  width:100%; max-width:1100px; aspect-ratio: 3 / 1;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 4px),
    #05070C;
  border: 10px solid #1A1F2B;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 0 40px rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center;
  padding: 30px 40px;
  position:relative;
  overflow:hidden;
}
body.theme-light .board-card{ box-shadow: 0 20px 50px rgba(20,30,50,0.18), inset 0 0 40px rgba(0,0,0,0.6); }

.board-empty{ color:#3A4358; font-size:15px; letter-spacing:0.08em; }

.board-content{
  width:100%; height:100%;
  display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap: 36px;
}

.board-badge{
  width: 130px; height:130px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:34px;
  color:#05070C;
  background: var(--board-badge-color, #35E39A);
  text-shadow: none;
  box-shadow: 0 0 26px var(--board-badge-color, #35E39A);
  flex-shrink:0;
}

.board-main{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.board-airline{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  font-size: clamp(22px, 3.4vw, 40px);
  color: #EAF6EF;
  text-shadow: 0 0 10px rgba(53,227,154,0.35);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.board-callsign{ font-size: clamp(14px, 1.6vw, 19px); color:#7FE8B3; letter-spacing:0.05em; }
.board-type{ font-size: clamp(13px, 1.5vw, 18px); color:#B9C4DC; }
.board-pos{ font-size: clamp(11px, 1.3vw, 15px); color:#6E7EA0; margin-top:6px; }

.board-data{ display:flex; flex-direction:column; gap:10px; flex-shrink:0; }
.board-data-row{
  display:flex; align-items:baseline; justify-content:flex-end; gap:10px;
  font-size: clamp(14px, 1.6vw, 19px);
}
.board-data-row span{ color:#5B6683; letter-spacing:0.08em; }
.board-data-row b{ color:#EAF6EF; font-weight:600; min-width:90px; text-align:right; }

.board-dots{
  display:flex; gap:6px;
}
.board-dots .b-dot{
  width:6px; height:6px; border-radius:50%; background: var(--grid);
  transition: background 0.2s ease;
}
.board-dots .b-dot.active{ background: var(--scope); box-shadow: 0 0 6px var(--scope); }

.board-hint{ font-size:10.5px; color: var(--text-faint); text-align:center; max-width:520px; }

@media (max-width: 760px){
  .board-card{ aspect-ratio: 4 / 3; padding: 20px; }
  .board-content{ grid-template-columns: 1fr; text-align:center; gap:16px; }
  .board-badge{ margin: 0 auto; width:90px; height:90px; font-size:24px; }
  .board-data{ align-items:center; }
  .board-data-row{ justify-content:center; }
}