/* style.css — fælles BLIP-tema for auth-sider og feed. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --void:#0a0e1a;
  --void-2:#0d1220;
  --panel:#131b2e;
  --panel-2:#182238;
  --line:#232e47;
  --amber:#ffb454;
  --amber-dim:#8a6a3a;
  --phosphor:#6ee7b7;
  --static:#5b6a85;
  --mist:#e9ecf2;
  --faint:#8792a6;
  --danger:#ff6b6b;
  --radius-s:6px;
  --radius-m:12px;
  --radius-l:20px;
  --display:'Bricolage Grotesque', sans-serif;
  --body:'Inter', sans-serif;
  --mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{color-scheme:dark;}
body{
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(255,180,84,0.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(110,231,183,0.06), transparent 55%),
    var(--void);
  color:var(--mist);
  font-family:var(--body);
  line-height:1.5;
  min-height:100vh;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}

/* ---- nav ---- */
header.topnav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:16px;
  padding:14px 24px;
  background:rgba(10,14,26,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.logo{display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:800; font-size:20px;}
.logo .dot{width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:0 0 12px rgba(255,180,84,0.6);}
.navspacer{flex:1;}
.navuser{font-size:13px; color:var(--faint); display:flex; align-items:center; gap:10px;}
.navuser b{color:var(--mist);}
.navuser a{color:var(--faint); font-weight:600;}
.navuser a:hover{color:var(--amber);}

/* ---- auth pages ---- */
.authwrap{min-height:calc(100vh - 64px); display:flex; align-items:center; justify-content:center; padding:40px 20px;}
.authcard{
  width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-l); padding:32px;
}
.authcard h1{font-family:var(--display); font-size:22px; font-weight:700; margin-bottom:6px;}
.authcard p.sub{font-size:13px; color:var(--faint); margin-bottom:24px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:11.5px; color:var(--faint); margin-bottom:6px; font-family:var(--mono); letter-spacing:0.05em;}
.field input{
  width:100%; padding:11px 12px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-s); color:var(--mist); font-size:14px; font-family:var(--body);
}
.field input:focus{outline:none; border-color:var(--amber-dim);}
.btn-primary{
  width:100%; padding:12px; border:none; border-radius:var(--radius-s);
  background:var(--amber); color:var(--void); font-weight:700; font-size:14px; margin-top:6px;
}
.btn-primary:hover{filter:brightness(1.05);}
.autherror{
  background:rgba(255,107,107,0.1); border:1px solid rgba(255,107,107,0.4); color:var(--danger);
  font-size:13px; padding:10px 12px; border-radius:var(--radius-s); margin-bottom:16px;
}
.authswitch{text-align:center; margin-top:18px; font-size:13px; color:var(--faint);}
.authswitch a{color:var(--amber); font-weight:600;}

/* ---- feed ---- */
.feedwrap{max-width:640px; margin:0 auto; padding:28px 20px 100px;}
.feed-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px;}
.feed-head h1{font-family:var(--display); font-size:22px; font-weight:700;}
.feed-head p{font-size:13px; color:var(--faint); margin-top:3px;}
.empty{
  text-align:center; padding:60px 20px; color:var(--faint); border:1px dashed var(--line);
  border-radius:var(--radius-l); font-size:14px;
}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:16px 18px; margin-bottom:14px; display:flex; gap:14px;
}
.votecol{display:flex; flex-direction:column; align-items:center; gap:2px; padding-top:2px;}
.votebtn{width:30px; height:26px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--static); border-radius:6px; font-size:15px;}
.votebtn:hover{background:var(--panel-2); color:var(--amber);}
.votebtn.active{color:var(--amber);}
.votecount{font-family:var(--mono); font-weight:600; font-size:13px;}
.card-body{flex:1; min-width:0;}
.card-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--faint); margin-bottom:6px;}
.card-meta .who{color:var(--mist); font-weight:600;}
.card-meta .dist{font-family:var(--mono); color:var(--phosphor); background:rgba(110,231,183,0.09); padding:1px 7px; border-radius:999px; font-size:11px;}
.card h3{font-family:var(--display); font-size:16.5px; font-weight:600; margin-bottom:6px;}
.card p.txt{font-size:13.5px; color:#c3c9d6; margin-bottom:10px;}
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; margin-bottom:10px;}
.badge.plane{background:rgba(139,148,168,0.15); color:var(--static); border:1px solid #2c3a5c;}
.badge.satellite{background:rgba(125,211,252,0.12); color:#7dd3fc; border:1px solid #3a6a85;}
.badge.none{background:rgba(255,180,84,0.12); color:var(--amber); border:1px solid var(--amber-dim);}
.badge.pending{background:rgba(139,148,168,0.1); color:var(--faint); border:1px solid var(--line);}
.card-foot{display:flex; align-items:center; gap:16px; font-size:12.5px; color:var(--faint);}

/* ---- FAB + report modal ---- */
.fab{
  position:fixed; bottom:26px; right:26px; z-index:60;
  display:flex; align-items:center; gap:9px;
  background:var(--amber); color:var(--void);
  padding:14px 20px; border-radius:999px; border:none; font-weight:700; font-size:14px;
  box-shadow:0 8px 24px rgba(255,180,84,0.35);
}
.overlay{position:fixed; inset:0; background:rgba(6,8,14,0.72); backdrop-filter:blur(3px); z-index:80; display:none; align-items:center; justify-content:center;}
.overlay.open{display:flex;}
.sheet{width:100%; max-width:420px; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:22px; margin:16px;}
.sheet .sh-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.sheet h2{font-family:var(--display); font-size:19px; font-weight:700;}
.sheet .close{background:none; border:none; color:var(--faint); font-size:20px;}
.val{display:flex; justify-content:space-between; align-items:center; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-s); padding:10px 12px; font-family:var(--mono); font-size:12px; color:var(--mist);}
.val .ok{color:var(--phosphor);}
.hint{font-size:11.5px; color:var(--static); text-align:center; margin-top:10px;}
.resultbox{margin-top:14px; padding:12px; border-radius:var(--radius-s); border:1px solid var(--line); background:var(--panel-2); font-size:13px; display:none;}
.resultbox.show{display:block;}

/* ---- sky check ---- */
.skybtn{
  display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line);
  color:var(--mist); font-size:13px; font-weight:600; padding:10px 16px; border-radius:999px; margin-bottom:18px;
}
.skybtn:hover{border-color:#3a6a85;}
.skyfield{display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap;}
.skyfield select, .skyfield input{
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-s);
  color:var(--mist); font-size:13px; padding:8px 10px; font-family:var(--body);
}
.skyfield label{font-size:11.5px; color:var(--faint); font-family:var(--mono);}

.verdict{padding:14px 16px; border-radius:var(--radius-m); font-size:14px; font-weight:600; margin-bottom:16px; border:1px solid var(--line);}
.verdict.plane{background:rgba(139,148,168,0.12); color:#c7cddb; border-color:#2c3a5c;}
.verdict.satellite{background:rgba(125,211,252,0.1); color:#bce8fb; border-color:#3a6a85;}
.verdict.uap{background:rgba(255,180,84,0.12); color:#ffd9a3; border-color:var(--amber-dim);}
.verdict.unknown{background:var(--panel-2); color:var(--faint);}

.skyradar{
  position:relative; width:220px; height:220px; margin:0 auto 18px; border-radius:50%;
  background:radial-gradient(circle at center, rgba(110,231,183,0.05), transparent 70%), #0a1120;
  border:1px solid #3f6f5c;
}
.skyradar::before, .skyradar::after{content:''; position:absolute; background:rgba(110,231,183,0.12);}
.skyradar::before{left:0; right:0; top:50%; height:1px;}
.skyradar::after{top:0; bottom:0; left:50%; width:1px;}
.skyradar .rdot{position:absolute; width:8px; height:8px; border-radius:50%; transform:translate(-50%,-50%);}
.skyradar .rdot.plane{background:var(--static);}
.skyradar .rdot.sat{background:#7dd3fc; box-shadow:0 0 6px rgba(125,211,252,0.8);}
.skyradar .rcenter{position:absolute; top:50%; left:50%; width:6px; height:6px; margin:-3px; border-radius:50%; background:#fff;}
.skyradar .rlabel{position:absolute; font-family:var(--mono); font-size:9px; color:var(--faint);}

.nearby-section{margin-bottom:16px;}
.nearby-section h4{font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--faint); text-transform:uppercase; margin-bottom:8px;}
.nearby-row{display:flex; justify-content:space-between; font-size:12.5px; padding:6px 0; border-top:1px solid var(--line);}
.nearby-row .n{font-family:var(--mono); font-size:11px; color:var(--faint);}
.nearby-empty{font-size:12.5px; color:var(--faint); padding:6px 0;}