:root{
  --bg:#04070c;
  --panel:rgba(8,18,30,.86);
  --panel-solid:#0a1624;
  --line:rgba(127,199,224,.28);
  --steel:#9fd8e8;
  --steel-dim:#5f8296;
  --sig:#57ff9a;
  --amber:#ffb454;
  --cyan:#59c2ff;
  --violet:#b48cff;
  --red:#ff6b6b;
  --text:#dff2fa;
  --radius:12px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);overflow:hidden;
  font-variant-numeric:tabular-nums;
}
#stage{position:fixed;inset:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#0a1a2a 0%,var(--bg) 60%)}
#globe,#flatmap{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#flatmap{background:#050b13}

/* ---------- top bar ---------- */
#topbar{
  position:absolute;top:0;left:0;right:0;z-index:20;
  padding:calc(10px + var(--sat)) 12px 8px;
  display:flex;gap:10px;align-items:flex-start;justify-content:space-between;
  background:linear-gradient(180deg,rgba(4,7,12,.88),rgba(4,7,12,0));
  pointer-events:none;
}
#topbar>*{pointer-events:auto}
.brand{min-width:0}
.brand-name{
  font-size:19px;font-weight:800;letter-spacing:.14em;color:#eaf7fd;
  text-shadow:0 0 14px rgba(87,255,154,.35);white-space:nowrap;
}
.brand-sub{font-size:10px;letter-spacing:.22em;color:var(--sig);margin-top:2px;white-space:nowrap}
.top-actions{display:flex;gap:8px;align-items:center;min-width:0}
#searchbox{
  display:flex;align-items:center;gap:0;background:var(--panel);
  border:1px solid var(--line);border-radius:999px;overflow:hidden;backdrop-filter:blur(8px);
}
#search-input{
  background:transparent;border:0;outline:0;color:var(--text);
  padding:9px 4px 9px 14px;font-size:14px;width:118px;min-width:0;
}
#search-input::placeholder{color:var(--steel-dim)}
#search-go{background:transparent;border:0;color:var(--sig);font-size:17px;padding:7px 12px 7px 4px;cursor:pointer}
#view-toggle{
  background:var(--panel);border:1px solid var(--line);color:var(--steel);
  border-radius:999px;padding:9px 14px;font-size:12px;font-weight:700;letter-spacing:.12em;cursor:pointer;
  backdrop-filter:blur(8px);white-space:nowrap;
}

/* ---------- layer chips ---------- */
#layers{
  position:absolute;z-index:20;left:0;right:0;
  top:calc(64px + var(--sat));
  display:flex;gap:8px;padding:6px 12px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
#layers::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;background:var(--panel);border:1px solid var(--line);color:var(--steel-dim);
  border-radius:999px;padding:8px 13px;font-size:12px;font-weight:700;letter-spacing:.06em;cursor:pointer;
  backdrop-filter:blur(8px);white-space:nowrap;
}
.chip .chip-status{color:inherit;opacity:.75;font-weight:600;letter-spacing:0}
.chip.on{color:var(--text);border-color:var(--sig);box-shadow:0 0 12px rgba(87,255,154,.25) inset,0 0 10px rgba(87,255,154,.12)}
.chip[data-layer="ships"].on{border-color:var(--violet);box-shadow:0 0 12px rgba(180,140,255,.22) inset}
#places-list-btn{color:var(--sig)}

/* ---------- HUD ---------- */
#hud{
  position:absolute;z-index:15;left:12px;bottom:calc(86px + var(--sab));
  pointer-events:none;text-shadow:0 1px 6px #000;
}
#hud-clock{font-size:12px;letter-spacing:.18em;color:var(--steel)}
#hud-hint{font-size:11px;color:var(--steel-dim);margin-top:3px}

/* ---------- dossier card ---------- */
#card{
  position:absolute;z-index:30;left:12px;right:12px;bottom:calc(12px + var(--sab));
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 16px 14px;backdrop-filter:blur(12px);
  box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 0 1px rgba(87,255,154,.06),0 0 24px rgba(87,255,154,.06);
  max-height:46dvh;overflow-y:auto;
}
#card-close{position:absolute;top:8px;right:8px;background:transparent;border:0;color:var(--steel-dim);font-size:15px;padding:8px;cursor:pointer}
.card-tag{font-size:10px;letter-spacing:.24em;color:var(--sig)}
#card h2{font-size:21px;margin:4px 30px 0 0;letter-spacing:.02em}
.card-code{font-size:12px;letter-spacing:.16em;color:var(--amber);margin-top:3px}
#card-note{font-size:14px;line-height:1.45;color:var(--text);margin-top:8px}
.card-stats{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px;font-size:13px;color:var(--steel)}
.card-stats b{color:var(--text);font-weight:700}
.card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.card-actions button{
  background:rgba(87,255,154,.1);border:1px solid rgba(87,255,154,.45);color:var(--sig);
  border-radius:8px;padding:9px 13px;font-size:13px;font-weight:700;cursor:pointer;
}
.card-actions button.ghost{background:transparent;border-color:var(--line);color:var(--steel)}

/* ---------- drawer ---------- */
#drawer{
  position:absolute;z-index:30;top:0;right:0;bottom:0;width:min(320px,86vw);
  background:var(--panel-solid);border-left:1px solid var(--line);
  padding:calc(14px + var(--sat)) 14px calc(14px + var(--sab));overflow-y:auto;
  box-shadow:-16px 0 40px rgba(0,0,0,.5);
}
.drawer-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.2em;color:var(--sig);margin-bottom:12px}
.drawer-head button{background:transparent;border:0;color:var(--steel-dim);font-size:15px;padding:6px;cursor:pointer}
.drawer-item{
  display:block;width:100%;text-align:left;background:rgba(127,199,224,.05);
  border:1px solid rgba(127,199,224,.14);border-radius:10px;padding:11px 12px;margin-bottom:9px;cursor:pointer;color:var(--text);
}
.drawer-item .di-name{font-size:15px;font-weight:700}
.drawer-item .di-code{font-size:11px;letter-spacing:.14em;color:var(--amber);margin-top:2px}
.drawer-item .di-note{font-size:12px;color:var(--steel);margin-top:4px;line-height:1.4}

/* ---------- Alfred ---------- */
#alfred-fab{
  position:absolute;z-index:25;right:12px;bottom:calc(14px + var(--sab));
  background:linear-gradient(180deg,#123324,#0a2016);border:1px solid var(--sig);color:#d9ffe9;
  border-radius:999px;padding:13px 18px;font-size:14px;font-weight:800;letter-spacing:.08em;cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,.5),0 0 16px rgba(87,255,154,.25);
}
#alfred-fab.listening{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 10px rgba(87,255,154,.25)}50%{box-shadow:0 0 26px rgba(87,255,154,.65)}}
#alfred-panel{
  position:absolute;z-index:40;left:0;right:0;bottom:0;
  background:var(--panel-solid);border-top:1px solid var(--sig);
  border-radius:16px 16px 0 0;box-shadow:0 -14px 44px rgba(0,0,0,.6);
  padding:12px 12px calc(10px + var(--sab));
  display:flex;flex-direction:column;max-height:72dvh;
}
.alfred-head{display:flex;align-items:baseline;gap:10px}
.alfred-title{font-size:13px;font-weight:800;letter-spacing:.18em;color:var(--sig)}
.alfred-sub{font-size:11px;color:var(--steel-dim);flex:1}
#alfred-close{background:transparent;border:0;color:var(--steel-dim);font-size:15px;padding:6px;cursor:pointer}
#alfred-log{overflow-y:auto;padding:10px 2px;display:flex;flex-direction:column;gap:8px;min-height:90px}
.msg{max-width:88%;padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.45}
.msg.user{align-self:flex-end;background:rgba(89,194,255,.14);border:1px solid rgba(89,194,255,.3)}
.msg.alfred{align-self:flex-start;background:rgba(87,255,154,.07);border:1px solid rgba(87,255,154,.22)}
.msg .who{display:block;font-size:10px;letter-spacing:.18em;opacity:.75;margin-bottom:3px}
#alfred-chips{display:flex;gap:7px;overflow-x:auto;padding:4px 0 9px;scrollbar-width:none}
#alfred-chips::-webkit-scrollbar{display:none}
#alfred-chips button{
  flex:0 0 auto;background:transparent;border:1px solid var(--line);color:var(--steel);
  border-radius:999px;padding:7px 12px;font-size:12px;cursor:pointer;white-space:nowrap;
}
#alfred-form{display:flex;gap:8px;align-items:center}
#alfred-mic{
  background:rgba(127,199,224,.08);border:1px solid var(--line);border-radius:50%;
  width:42px;height:42px;font-size:17px;cursor:pointer;flex:0 0 auto;color:var(--text);
}
#alfred-mic.live{border-color:var(--red);box-shadow:0 0 12px rgba(255,107,107,.5)}
#alfred-input{
  flex:1;min-width:0;background:rgba(127,199,224,.06);border:1px solid var(--line);
  border-radius:999px;padding:11px 15px;color:var(--text);font-size:14px;outline:0;
}
#alfred-send{
  background:var(--sig);border:0;color:#04140a;font-weight:800;letter-spacing:.08em;
  border-radius:999px;padding:11px 16px;font-size:13px;cursor:pointer;flex:0 0 auto;
}

/* ---------- toast / install hint ---------- */
#toast{
  position:absolute;z-index:50;left:50%;transform:translateX(-50%);
  bottom:calc(84px + var(--sab));background:var(--panel-solid);border:1px solid var(--line);
  color:var(--text);border-radius:999px;padding:9px 16px;font-size:13px;max-width:92vw;text-align:center;
  box-shadow:0 8px 28px rgba(0,0,0,.55);
}
#install-hint{
  position:absolute;z-index:45;left:12px;right:12px;bottom:calc(70px + var(--sab));
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-size:13px;color:var(--steel);backdrop-filter:blur(8px);
}
#install-hint button{background:transparent;border:0;color:var(--sig);font-weight:700;cursor:pointer;padding:2px 4px}

/* ---------- larger screens ---------- */
@media (min-width:760px){
  #search-input{width:200px}
  #card{left:auto;width:400px;right:16px;bottom:16px}
  #alfred-panel{left:auto;width:430px;right:0;border-left:1px solid var(--sig);border-radius:16px 0 0 0}
  .brand-name{font-size:23px}
  #hud{bottom:24px}
}
@media (prefers-reduced-motion: reduce){
  #alfred-fab.listening{animation:none}
}