/* EVE Online web remake - Photon-inspired dark UI */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#000; }
body {
  font-family:"Segoe UI","Microsoft YaHei",-apple-system,sans-serif;
  font-size:12px; color:#c9d4da; user-select:none;
  -webkit-font-smoothing:antialiased;
}
.hidden { display:none !important; }
#space { position:fixed; inset:0; display:block; background:#02040a; cursor:crosshair; }
#ui { position:fixed; inset:0; pointer-events:none; z-index:10; }
#ui > * { pointer-events:auto; }

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:rgba(10,16,20,.6); }
::-webkit-scrollbar-thumb { background:#2b3d49; border:1px solid #16222b; }
::-webkit-scrollbar-thumb:hover { background:#3d5568; }

/* ---------- generic ---------- */
.btn {
  display:inline-block; padding:4px 12px; cursor:pointer;
  background:linear-gradient(180deg,#1b2830,#121b21);
  border:1px solid #34495a; color:#a9c6d8; font-size:12px;
  letter-spacing:1px; white-space:nowrap;
}
.btn:hover { background:linear-gradient(180deg,#27404f,#17232b); color:#e8f4fb; border-color:#58a6c8; }
.btn:active { background:#0d1418; }
.btn.primary { border-color:#c8a45a; color:#ecd9ab; }
.btn.primary:hover { background:linear-gradient(180deg,#4a3c1e,#221b0c); color:#ffe9b8; }
.btn.danger { border-color:#8a3a3a; color:#d89a9a; }
.btn.danger:hover { background:#3a1515; color:#ffb9b9; }
.btn.sm { padding:1px 7px; font-size:11px; }
.btn.disabled { opacity:.35; pointer-events:none; }
.dim { color:#5d7280; }
.hl { color:#58a6c8; }
.gold { color:#e0b95e; }
.red { color:#d96a6a; }
.green { color:#6fce8f; }

/* ---------- windows ---------- */
.window {
  position:absolute; min-width:180px;
  background:rgba(9,14,18,.92);
  border:1px solid #2a3b47; box-shadow:0 0 18px rgba(0,0,0,.7);
  display:flex; flex-direction:column;
  backdrop-filter:blur(3px);
}
.win-title {
  height:24px; line-height:24px; padding:0 8px; cursor:move; flex:0 0 auto;
  background:linear-gradient(180deg,rgba(40,58,70,.9),rgba(20,30,38,.9));
  border-bottom:1px solid #2a3b47;
  font-size:11px; letter-spacing:2px; color:#9fc3d8; text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:center;
}
.win-title .win-x { cursor:pointer; color:#6b8494; padding:0 4px; font-size:13px; }
.win-title .win-x:hover { color:#ff8f8f; }
.win-body { flex:1 1 auto; overflow:auto; position:relative; }

.tabs { display:flex; border-bottom:1px solid #22313c; background:rgba(14,21,26,.8); flex:0 0 auto; }
.tab { padding:4px 14px; cursor:pointer; color:#6b8494; font-size:11px; letter-spacing:1px; border-right:1px solid #1a262f; }
.tab:hover { color:#9fc3d8; }
.tab.on { color:#e8f4fb; background:rgba(60,90,110,.25); box-shadow:inset 0 -2px 0 #58a6c8; }

table.tbl { width:100%; border-collapse:collapse; font-size:11px; }
table.tbl th {
  text-align:left; padding:3px 6px; color:#5d7280; font-weight:normal; cursor:pointer;
  border-bottom:1px solid #22313c; position:sticky; top:0; background:#0c1318; letter-spacing:1px; white-space:nowrap;
}
table.tbl td { padding:2px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
table.tbl tr.row { cursor:pointer; }
table.tbl tr.row:hover { background:rgba(88,166,200,.12); }
table.tbl tr.selrow { background:rgba(88,166,200,.22) !important; outline:1px solid rgba(88,166,200,.5); }

/* ---------- sysinfo (top-left) ---------- */
#sysinfo {
  position:absolute; top:10px; left:56px; padding:6px 14px;
  background:rgba(9,14,18,.75); border:1px solid #22313c;
  min-width:200px;
}
#sysinfo .sysname { font-size:16px; color:#e8f4fb; letter-spacing:1px; }
#sysinfo .sysdetail { font-size:11px; color:#6b8494; margin-top:2px; }
#routebar { position:absolute; top:10px; left:330px; display:flex; gap:4px; align-items:center; }
#routebar .rdot { width:10px; height:10px; transform:rotate(45deg); border:1px solid #000; cursor:pointer; }
#routebar .ap { margin-left:8px; }

/* ---------- neocom ---------- */
#neocom {
  position:absolute; left:0; top:0; bottom:0; width:44px;
  background:rgba(7,11,14,.92); border-right:1px solid #1c2932;
  display:flex; flex-direction:column; align-items:center; padding-top:6px; gap:2px;
}
#neocom .ncbtn {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font-size:17px; color:#7d9aad; cursor:pointer; border:1px solid transparent; position:relative;
}
#neocom .ncbtn:hover { color:#e8f4fb; background:rgba(88,166,200,.14); border-color:#2a3b47; }
#neocom .ncbtn.on { color:#58a6c8; background:rgba(88,166,200,.18); border-color:#58a6c8; }
#neocom .portrait {
  width:36px; height:36px; border:1px solid #34495a; margin-bottom:6px;
  display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; cursor:pointer;
}
#neocom .isk { font-size:9px; color:#7fae7f; writing-mode:vertical-rl; letter-spacing:1px; margin-top:auto; margin-bottom:8px; }

/* ---------- HUD ---------- */
#hud { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); text-align:center; }
#modRows { display:flex; flex-direction:column; gap:3px; align-items:center; margin-bottom:6px; }
.modrow { display:flex; gap:3px; justify-content:center; }
.modbtn {
  width:40px; height:40px; position:relative; cursor:pointer;
  border:1px solid #2c4050; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#22333f,#0b1217);
  display:flex; align-items:center; justify-content:center; font-size:15px; color:#9fc3d8;
}
.modbtn:hover { border-color:#58a6c8; }
.modbtn.on { border-color:#7fd0a0; box-shadow:0 0 8px rgba(110,220,160,.5), inset 0 0 6px rgba(110,220,160,.3); color:#c9ffe0; }
.modbtn.passive { opacity:.55; cursor:default; border-style:dashed; }
.modbtn .cool { position:absolute; inset:0; border-radius:50%; pointer-events:none; }
.modbtn .key { position:absolute; top:-3px; left:2px; font-size:8px; color:#5d7280; }
.modbtn .cnt { position:absolute; bottom:-2px; right:2px; font-size:8px; color:#5d7280; }
#gaugeWrap { position:relative; display:inline-block; }
#hudGauge { display:block; }
#hudBtns { position:absolute; left:50%; transform:translateX(-50%); bottom:-2px; display:flex; gap:4px; }
.hudCtl { width:22px; height:22px; line-height:20px; text-align:center; border:1px solid #2c4050; border-radius:50%;
  background:#0b1217; color:#9fc3d8; cursor:pointer; font-size:11px; }
.hudCtl:hover { border-color:#58a6c8; color:#fff; }

/* ---------- targets ---------- */
#targets { position:absolute; top:52px; right:340px; display:flex; gap:8px; flex-direction:row-reverse; flex-wrap:wrap; max-width:40vw; }
.tgt { width:96px; padding:4px; background:rgba(9,14,18,.85); border:1px solid #2a3b47; cursor:pointer; position:relative; }
.tgt.active { border-color:#d9b45e; box-shadow:0 0 10px rgba(217,180,94,.35); }
.tgt .tname { font-size:10px; color:#d8e6ee; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tgt .tdist { font-size:9px; color:#6b8494; }
.tgt .bar { height:3px; background:#1a262f; margin-top:2px; }
.tgt .bar i { display:block; height:100%; }
.tgt .tx { position:absolute; top:0; right:3px; color:#6b8494; cursor:pointer; font-size:11px; }
.tgt .tx:hover { color:#ff8f8f; }
.tgt.locking { border-style:dashed; }

/* ---------- autopilot bot bar ---------- */
#autobar {
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; max-width:60vw;
  background:rgba(9,14,18,.85); border:1px solid #2a3b47; padding:5px 10px;
}
#autobar #autoStatus {
  font-size:11px; color:#9fc3d8; letter-spacing:1px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:44vw;
}

/* ---------- toasts / aura ---------- */
#toasts { position:absolute; top:64px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:4px; align-items:center; pointer-events:none; }
.toast {
  padding:5px 18px; background:rgba(10,16,22,.88); border:1px solid #2a3b47;
  color:#c9d4da; font-size:12px; letter-spacing:1px; animation:toastIn .2s ease-out;
  text-shadow:0 0 6px rgba(0,0,0,.8);
}
.toast.warn { border-color:#8a6d2f; color:#e8cf95; }
.toast.bad { border-color:#8a3a3a; color:#e89c9c; }
.toast.good { border-color:#2f6d46; color:#95e8b4; }
@keyframes toastIn { from { opacity:0; transform:translateY(-8px);} to {opacity:1; transform:none;} }
#auraBox {
  position:absolute; left:56px; bottom:230px; width:300px; padding:8px 10px 8px 44px;
  background:rgba(9,16,22,.92); border:1px solid #2f5468; font-size:12px; line-height:1.5; color:#bcd8e8;
}
#auraBox:before {
  content:"AURA"; position:absolute; left:6px; top:8px; width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#3b7f9e,#12232e); border:1px solid #58a6c8;
  font-size:7px; color:#bfe8ff; display:flex; align-items:center; justify-content:center; letter-spacing:1px;
}

/* ---------- context menu ---------- */
#ctxmenu, .submenu {
  position:fixed; z-index:1000; min-width:170px;
  background:rgba(12,18,23,.97); border:1px solid #34495a; box-shadow:0 4px 16px rgba(0,0,0,.8);
  font-size:12px;
}
#ctxmenu .ci, .submenu .ci { padding:4px 12px; cursor:pointer; color:#b8cbd6; display:flex; justify-content:space-between; }
#ctxmenu .ci:hover, .submenu .ci:hover { background:rgba(88,166,200,.2); color:#fff; }
#ctxmenu .chdr, .submenu .chdr { padding:4px 12px 2px; color:#546b7a; font-size:10px; letter-spacing:1px; border-top:1px solid #1c2932; }
#ctxmenu .chdr:first-child { border-top:none; }

/* ---------- overview colors ---------- */
.ov-npc { color:#e06c6c; }
.ov-roid { color:#b9c4cb; }
.ov-cel { color:#8fb8cc; }
.ov-wreck { color:#8a97a0; }
.ov-station { color:#7fd0a0; }
.ov-beacon { color:#e0b95e; }

/* ---------- overlay/session ---------- */
#overlay {
  position:fixed; inset:0; background:#000; z-index:2000;
  display:flex; align-items:center; justify-content:center; transition:opacity .35s;
}
#overlayText { color:#7d9aad; font-size:15px; letter-spacing:4px; animation:pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{opacity:.5;} 50%{opacity:1;} }
#warpFx { position:fixed; inset:0; pointer-events:none; z-index:5; }

/* ---------- station bg ---------- */
#stationBg { position:fixed; inset:0; z-index:1; background:
  radial-gradient(ellipse at 70% 30%, rgba(60,90,120,.25), transparent 55%),
  radial-gradient(ellipse at 30% 75%, rgba(120,90,40,.15), transparent 50%),
  linear-gradient(180deg,#05080c,#0b0f14 60%,#141a20); }
#stationBg .dockshine { position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, transparent 0 90px, rgba(120,160,190,.04) 90px 92px); }
#stationBgName { position:absolute; bottom:26px; right:30px; color:#33454f; font-size:26px; letter-spacing:3px; }

/* ---------- login ---------- */
#login {
  position:fixed; inset:0; z-index:3000; overflow:auto;
  background:radial-gradient(ellipse at 50% 120%, rgba(40,70,100,.35), transparent 60%), #01030a;
  display:flex; align-items:center; justify-content:center;
}
#login .box { width:760px; max-width:94vw; text-align:center; padding:30px 10px; }
#login h1 { font-size:34px; letter-spacing:12px; color:#dfeaf2; font-weight:300; }
#login h1 span { color:#58a6c8; }
#login .sub { color:#546b7a; letter-spacing:4px; margin:6px 0 30px; font-size:12px; }
.racegrid { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.racecard {
  width:168px; padding:14px 10px; border:1px solid #22313c; cursor:pointer;
  background:rgba(12,18,24,.8); transition:all .15s; text-align:center;
}
.racecard:hover { border-color:#4a6b80; }
.racecard.sel { border-color:#58a6c8; background:rgba(40,70,95,.3); box-shadow:0 0 14px rgba(88,166,200,.25); }
.racecard .remblem { width:54px; height:54px; margin:0 auto 8px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; border:1px solid rgba(255,255,255,.25); }
.racecard .rname { font-size:14px; color:#dfeaf2; letter-spacing:2px; }
.racecard .rdesc { font-size:10px; color:#6b8494; margin-top:6px; line-height:1.6; min-height:48px; }
#login input {
  background:rgba(10,16,22,.9); border:1px solid #34495a; color:#e8f4fb; padding:7px 12px;
  font-size:14px; width:280px; letter-spacing:1px; outline:none; text-align:center; font-family:inherit;
}
#login input:focus { border-color:#58a6c8; }
#login .startrow { margin-top:18px; display:flex; gap:10px; justify-content:center; }
#login .bigbtn { font-size:14px; padding:9px 34px; letter-spacing:3px; }

/* ---------- misc panels ---------- */
.svcgrid { display:flex; flex-wrap:wrap; gap:8px; padding:10px; }
.svcbtn {
  width:108px; height:74px; border:1px solid #2a3b47; cursor:pointer; text-align:center;
  background:linear-gradient(180deg,rgba(30,45,56,.6),rgba(14,20,26,.6));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.svcbtn:hover { border-color:#58a6c8; background:rgba(60,100,125,.25); }
.svcbtn .ico { font-size:22px; }
.svcbtn .lbl { font-size:11px; color:#9fc3d8; letter-spacing:2px; }
.kv { display:flex; justify-content:space-between; padding:2px 8px; font-size:11px; }
.kv b { color:#c9d4da; font-weight:normal; }
.sect { padding:5px 8px 2px; color:#546b7a; font-size:10px; letter-spacing:2px; border-bottom:1px solid #1c2932; margin-top:4px; }
.fitslotrow { display:flex; gap:4px; flex-wrap:wrap; padding:4px 8px; }
.fitslot {
  width:44px; height:44px; border:1px dashed #2c4050; display:flex; align-items:center; justify-content:center;
  font-size:16px; color:#9fc3d8; cursor:pointer; position:relative; background:rgba(14,21,27,.6);
}
.fitslot.filled { border-style:solid; background:radial-gradient(circle at 35% 30%,#1e3240,#0b1217); }
.fitslot:hover { border-color:#58a6c8; }
.fitslot .sz { position:absolute; bottom:0; right:2px; font-size:8px; color:#546b7a; }
.chatlog { font-size:11px; line-height:1.55; padding:4px 8px; overflow-y:auto; height:100%; }
.chatlog .t { color:#3f545f; margin-right:4px; }
.chatlog .who { color:#8fb8cc; margin-right:4px; }
.chatlog .combat-hit { color:#9fd8a8; }
.chatlog .combat-taken { color:#e08f8f; }
.chatlog .combat-info { color:#8fa8b8; }
.mapcanvas { display:block; background:radial-gradient(circle at 50% 50%, #0a1016, #04070a); cursor:pointer; }
.qbar { height:4px; background:#1a262f; }
.qbar i { display:block; height:100%; background:linear-gradient(90deg,#2f6d8e,#58a6c8); }
.aslot { display:flex; align-items:center; gap:6px; padding:3px 8px; cursor:pointer; }
.aslot:hover { background:rgba(88,166,200,.1); }
.pricegrid td.r { text-align:right; }
progress { width:100%; height:6px; }