/* TA3ECR Satellite Tracker — Complete Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700&display=swap');

/* ── THEMES ─────────────────────────────────────────────── */
:root {
  --bg:       #07090d;
  --panel:    #0c1018;
  --panel2:   #0f1520;
  --border:   #1a2535;
  --border2:  #223040;
  --iss:      #00d4ff;
  --iss-dim:  #007a95;
  --met:      #ff6b35;
  --met-dim:  #994020;
  --text:     #b8c8dc;
  --dim:      #3d5068;
  --bright:   #ddeeff;
  --green:    #39ff14;
  --red:      #ff3055;
  --map-bg:   #040810;
  --map-land: rgba(255,255,255,0.08);
  --map-line: rgba(255,255,255,0.16);
  --map-grid: rgba(255,255,255,0.03);
  --map-eq:   rgba(255,255,255,0.08);
  --scan:     rgba(0,0,0,0.06);
}

body.light {
  --bg:       #eef2f8;
  --panel:    #f8fafd;
  --panel2:   #edf1f7;
  --border:   #c8d4e4;
  --border2:  #b0c0d8;
  --text:     #334458;
  --dim:      #7a90aa;
  --bright:   #1a2a3a;
  --green:    #0a8a00;
  --red:      #cc0033;
  --map-bg:   #c8d8f0;
  --map-land: rgba(60,80,120,0.35);
  --map-line: rgba(60,80,120,0.5);
  --map-grid: rgba(0,0,0,0.06);
  --map-eq:   rgba(0,0,0,0.1);
  --scan:     transparent;
}

/* ── BASE ───────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'Share Tech Mono',monospace;font-size:13px;}

body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scan) 2px,var(--scan) 4px);}

/* ── LAYOUT ─────────────────────────────────────────────── */
#wrapper{display:flex;flex-direction:column;height:100vh;}
#main{display:flex;flex:1;overflow:hidden;gap:1px;background:var(--border);}
.panel{flex:1;background:var(--panel);display:flex;flex-direction:column;overflow:hidden;}
.divider{width:1px;background:var(--border);}

/* ── HEADER ─────────────────────────────────────────────── */
#header{
  display:flex;align-items:center;gap:12px;
  padding:0 14px;height:36px;flex-shrink:0;
  background:var(--panel);border-bottom:1px solid var(--border);
}
.callsign{
  font-family:'Orbitron',monospace;font-weight:700;font-size:15px;
  letter-spacing:4px;color:var(--iss);text-shadow:0 0 14px rgba(0,212,255,0.4);
}
.hdr-status{display:flex;gap:14px;align-items:center;font-size:10px;color:var(--dim);}
.hdr-right{display:flex;align-items:center;gap:10px;margin-left:auto;}
#utc-clock{font-size:11px;color:var(--dim);letter-spacing:1px;}

/* status dots */
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle;}
.dot-iss{background:var(--iss);box-shadow:0 0 6px var(--iss);animation:blink 2s infinite;}
.dot-met{background:var(--met);box-shadow:0 0 6px var(--met);animation:blink 2s infinite .5s;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ── THEME & LANG TOGGLES ─────────────────────────────────*/
.toggle-group{display:flex;gap:3px;}
.toggle-btn{
  background:transparent;border:1px solid var(--border2);color:var(--dim);
  font-family:'Share Tech Mono',monospace;font-size:10px;padding:2px 8px;
  cursor:pointer;letter-spacing:1px;transition:all .2s;
}
.toggle-btn:hover,.toggle-btn.active{border-color:var(--iss);color:var(--iss);background:rgba(0,212,255,.07);}
body.light .toggle-btn:hover, body.light .toggle-btn.active{border-color:var(--iss-dim);color:var(--iss-dim);background:rgba(0,150,200,.1);}

/* ── QTH BAR ────────────────────────────────────────────── */
#qth-bar{
  display:flex;align-items:center;gap:8px;
  padding:0 14px;height:30px;flex-shrink:0;
  background:var(--panel2);border-bottom:1px solid var(--border);
}
#qth-bar label{color:var(--dim);font-size:10px;letter-spacing:1px;}
#qth-bar input{
  background:var(--bg);border:1px solid var(--border);color:var(--bright);
  font-family:'Share Tech Mono',monospace;font-size:12px;
  padding:1px 6px;width:90px;outline:none;transition:border-color .2s;
}
#qth-bar input:focus{border-color:var(--iss);}
.qth-btn{
  background:transparent;border:1px solid var(--iss);color:var(--iss);
  font-family:'Share Tech Mono',monospace;font-size:10px;
  padding:2px 10px;cursor:pointer;letter-spacing:1px;transition:all .2s;
}
.qth-btn:hover{background:var(--iss);color:var(--bg);}
#qth-info{margin-left:auto;font-size:10px;color:var(--dim);}

/* ── PANEL HEADER ────────────────────────────────────────── */
.panel-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 12px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.panel-title{font-family:'Orbitron',monospace;font-weight:700;font-size:11px;letter-spacing:3px;}
.panel-title.iss{color:var(--iss);text-shadow:0 0 8px rgba(0,212,255,.3);}
.panel-title.met{color:var(--met);text-shadow:0 0 8px rgba(255,107,53,.3);}
.panel-sub{font-size:10px;color:var(--dim);}

/* ── PANEL BODY ─────────────────────────────────────────── */
.panel-body{flex:1;display:flex;flex-direction:column;padding:6px;gap:5px;overflow:hidden;}

/* ── MAP ────────────────────────────────────────────────── */
.map-wrap{position:relative;flex:1;min-height:0;border:1px solid var(--border);overflow:hidden;background:var(--map-bg);}
.map-wrap canvas{display:block;width:100%;height:100%;}
.map-credit{position:absolute;bottom:4px;right:6px;font-size:8px;color:var(--dim);letter-spacing:.5px;opacity:.6;}

/* ── TABS ────────────────────────────────────────────────── */
.tabs{display:flex;gap:3px;flex-shrink:0;}
.tab{
  background:var(--bg);border:1px solid var(--border);color:var(--dim);
  font-family:'Share Tech Mono',monospace;font-size:10px;
  padding:3px 10px;cursor:pointer;letter-spacing:1px;transition:all .2s;
}
.tab.active{border-color:var(--met);color:var(--met);background:rgba(255,107,53,.06);}

/* ── DATA GRID ───────────────────────────────────────────── */
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;flex-shrink:0;}
.dcell{background:var(--panel2);border:1px solid var(--border);padding:4px 8px;}
.dcell .lbl{font-size:9px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;}
.dcell .val{font-size:13px;color:var(--bright);margin-top:1px;font-variant-numeric:tabular-nums;}
.dcell .val.c-iss{color:var(--iss);}
.dcell .val.c-met{color:var(--met);}

/* ── ELEVATION ROW ───────────────────────────────────────── */
.elev-row{
  display:flex;align-items:center;gap:8px;
  background:var(--panel2);border:1px solid var(--border);
  padding:4px 8px;flex-shrink:0;
}
.elev-arc{flex-shrink:0;}
.elev-arc canvas{display:block;width:60px;height:30px;}
.elev-info{flex:1;}
.elev-info .lbl,.vis-info .lbl{font-size:9px;color:var(--dim);letter-spacing:1px;}
.elev-info .val{font-size:18px;color:var(--bright);}
.vis-info{flex:1;}
.vis-info .val{font-size:11px;color:var(--dim);}

/* ── FREQ ROW ────────────────────────────────────────────── */
.freq-row{
  display:flex;flex-shrink:0;
  background:var(--panel2);border:1px solid var(--border);
}
.freq-item{flex:1;padding:4px 8px;border-right:1px solid var(--border);}
.freq-item:last-child{border-right:none;}
.freq-item .lbl{font-size:9px;color:var(--dim);letter-spacing:1px;}
.freq-item .val{font-size:11px;color:var(--green);}

/* ── PASS BOX ────────────────────────────────────────────── */
.pass-box,.info-box{
  background:var(--panel2);border:1px solid var(--border);
  padding:4px 8px;flex-shrink:0;
}
.pass-box .lbl,.info-box .lbl{font-size:9px;color:var(--dim);letter-spacing:1px;margin-bottom:2px;}
.pass-box .body,.info-box .body{font-size:11px;line-height:1.5;}

/* ── TLE STATUS ──────────────────────────────────────────── */
#tle-status{font-size:10px;letter-spacing:1px;}