:root{
  --void: #0a0d16;
  --void-2: #0d1120;
  --panel: #121628;
  --panel-2: #171c33;
  --line: #262c47;
  --text: #e7eaf4;
  --text-dim: #8b93ac;
  --amber: #ffab3d;
  --cyan: #52d9cc;
  --violet: #b28dff;
  --magenta: #ff6fb0;
  --green: #5fe08a;
  --red: #ff5c6c;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:var(--void);color:var(--text);font-family:var(--sans);overflow-x:hidden;}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;}
#app{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:18px 16px 60px;}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:10px;margin-bottom:14px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:30px;height:30px;flex:none;}
.brand-text .t1{font-family:var(--mono);font-size:15px;letter-spacing:2px;color:var(--amber);font-weight:700;}
.brand-text .t2{font-size:11px;color:var(--text-dim);letter-spacing:1px;}
.stat-row{display:flex;gap:18px;align-items:center;}
.stat{text-align:right;}
.stat .v{font-family:var(--mono);font-size:16px;font-weight:600;}
.stat .l{font-size:10px;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase;}
.conn-dot{width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block;margin-right:6px;}
.conn-dot.live{background:var(--green);}

.ticker-wrap{overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--void-2);margin-bottom:14px;height:28px;position:relative;}
.ticker-wrap::before{content:"LOG";position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;padding:0 8px;
  background:var(--panel);color:var(--text-dim);font-family:var(--mono);font-size:10px;letter-spacing:2px;z-index:2;border-right:1px solid var(--line);}
.ticker{position:absolute;left:52px;right:0;top:0;bottom:0;display:flex;align-items:center;white-space:nowrap;
  font-family:var(--mono);font-size:12px;color:var(--text-dim);transition:transform .4s ease;}

.tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--line);}
.tab{font-family:var(--mono);font-size:12px;letter-spacing:1px;padding:9px 14px;color:var(--text-dim);cursor:pointer;
  border-bottom:2px solid transparent;user-select:none;}
.tab:hover{color:var(--text);}
.tab.active{color:var(--amber);border-bottom-color:var(--amber);}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px;}
.panel h2{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin:0 0 12px;}

.click-zone{display:flex;align-items:center;gap:16px;padding:14px;background:var(--void-2);border:1px dashed var(--line);border-radius:10px;margin-bottom:14px;flex-wrap:wrap;}
.click-btn{font-family:var(--mono);font-size:13px;letter-spacing:1px;background:var(--amber);color:#20140a;border:none;
  padding:14px 22px;border-radius:8px;cursor:pointer;font-weight:700;flex:none;transition:transform .08s ease;}
.click-btn:active{transform:scale(.95);}
.click-info{font-size:12px;color:var(--text-dim);line-height:1.5;}
.click-info b{color:var(--cyan);}

.building-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:640px){.building-grid{grid-template-columns:1fr;}}
.bcard{background:var(--void-2);border:1px solid var(--line);border-radius:10px;padding:14px;}
.bcard .bhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;}
.bcard .bname{font-weight:600;font-size:14px;}
.bcard .blvl{font-family:var(--mono);font-size:11px;color:var(--text-dim);}
.bcard .bdesc{font-size:11.5px;color:var(--text-dim);margin-bottom:10px;line-height:1.4;}
.bcard .bstats{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;margin-bottom:10px;}
.buy-btn{width:100%;font-family:var(--mono);font-size:12px;padding:10px;border-radius:7px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);cursor:pointer;letter-spacing:.5px;}
.buy-btn:hover:not(:disabled){border-color:var(--amber);color:var(--amber);}
.buy-btn:disabled{opacity:.4;cursor:not-allowed;}

.cargo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media (max-width:640px){.cargo-grid{grid-template-columns:1fr;}}
.res-card{background:var(--void-2);border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center;}
.res-card .icon{width:34px;height:34px;margin:0 auto 8px;}
.res-card .amt{font-family:var(--mono);font-size:19px;font-weight:700;}
.res-card .name{font-size:11px;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;}
.sell-btn{width:100%;font-family:var(--mono);font-size:11px;padding:8px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text-dim);cursor:pointer;}
.sell-btn:hover{color:var(--green);border-color:var(--green);}

.ah-form{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;margin-bottom:16px;}
@media (max-width:640px){.ah-form{grid-template-columns:1fr 1fr;}}
select,input[type=number],input[type=text]{font-family:var(--mono);background:var(--void-2);border:1px solid var(--line);
  color:var(--text);border-radius:7px;padding:9px 10px;font-size:12px;width:100%;}
.list-btn{font-family:var(--mono);font-size:12px;background:var(--cyan);color:#06231f;border:none;border-radius:7px;
  padding:9px 14px;cursor:pointer;font-weight:700;}
.listing{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--void-2);margin-bottom:8px;}
.listing .who{font-size:11px;color:var(--text-dim);}
.listing .what{font-family:var(--mono);font-size:13px;}
.buy-listing-btn{font-family:var(--mono);font-size:11px;background:var(--amber);color:#20140a;border:none;border-radius:6px;
  padding:8px 12px;cursor:pointer;font-weight:700;flex:none;}
.cancel-listing-btn{font-family:var(--mono);font-size:11px;background:transparent;color:var(--red);border:1px solid var(--red);
  border-radius:6px;padding:8px 12px;cursor:pointer;flex:none;}
.empty{color:var(--text-dim);font-size:12px;text-align:center;padding:20px;font-family:var(--mono);}

.lb-row{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line);font-size:13px;}
.lb-rank{font-family:var(--mono);color:var(--text-dim);width:26px;flex:none;}
.lb-name{flex:1;}
.lb-credits{font-family:var(--mono);color:var(--amber);}
.lb-row.me{background:rgba(255,171,61,.08);border-radius:6px;}

#gate{position:fixed;inset:0;background:var(--void);z-index:10;display:flex;align-items:center;justify-content:center;}
#gate .box{width:340px;max-width:90vw;text-align:center;padding:28px;border:1px solid var(--line);border-radius:12px;background:var(--panel);}
#gate h1{font-family:var(--mono);color:var(--amber);letter-spacing:3px;font-size:17px;margin-bottom:6px;}
#gate p{color:var(--text-dim);font-size:12.5px;margin-bottom:18px;line-height:1.5;}
#gate input{margin-bottom:12px;text-align:center;}
#gate button{width:100%;padding:11px;font-family:var(--mono);background:var(--amber);color:#20140a;border:none;
  border-radius:7px;font-weight:700;cursor:pointer;letter-spacing:1px;}
#gate .err{color:var(--red);font-size:11.5px;min-height:16px;margin-top:8px;}

#welcome{position:fixed;inset:0;background:rgba(5,7,13,.75);z-index:9;display:none;align-items:center;justify-content:center;}
#welcome .box{width:360px;max-width:90vw;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--panel);}
#welcome h2{font-family:var(--mono);color:var(--cyan);font-size:14px;letter-spacing:1px;margin:0 0 10px;}
#welcome .row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;padding:4px 0;color:var(--text-dim);}
#welcome button{margin-top:14px;width:100%;padding:10px;font-family:var(--mono);background:var(--panel-2);border:1px solid var(--line);
  color:var(--text);border-radius:7px;cursor:pointer;}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--line);
  color:var(--text);font-family:var(--mono);font-size:12px;padding:10px 16px;border-radius:8px;z-index:20;opacity:0;
  transition:opacity .25s ease;pointer-events:none;}
.toast.show{opacity:1;}
::selection{background:var(--amber);color:#000;}

.draggable-item{cursor:grab;}
.draggable-item:active{cursor:grabbing;}
.draggable-item.dragging{opacity:.35;}
.drag-over{outline:2px dashed var(--amber);outline-offset:-2px;background:rgba(255,171,61,.08);border-radius:8px;}

/* ---- rarity ---- */
.rarity-1{border-color:#3a4160 !important;}
.rarity-2{border-color:#4fd18c !important;box-shadow:0 0 0 1px rgba(79,209,140,.15);}
.rarity-3{border-color:#b28dff !important;box-shadow:0 0 10px rgba(178,141,255,.25);}
.rarity-4{border-color:#ffd23a !important;box-shadow:0 0 14px rgba(255,210,58,.3);}
.rarity-label{font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:1px 6px;border-radius:4px;display:inline-block;}
.rarity-label.rarity-1{background:rgba(58,65,96,.3);color:#8b93ac;border:none;box-shadow:none;}
.rarity-label.rarity-2{background:rgba(79,209,140,.15);color:#4fd18c;border:none;box-shadow:none;}
.rarity-label.rarity-3{background:rgba(178,141,255,.15);color:#b28dff;border:none;box-shadow:none;}
.rarity-label.rarity-4{background:rgba(255,210,58,.15);color:#ffd23a;border:none;box-shadow:none;}

/* ---- tooltip ---- */
#tooltip{position:fixed;z-index:50;pointer-events:none;max-width:260px;background:#0d1120;border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--text);
  opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease;box-shadow:0 8px 24px rgba(0,0,0,.5);}
#tooltip.show{opacity:1;transform:translateY(0);}
#tooltip .tt-title{font-weight:700;margin-bottom:4px;font-size:12px;}
#tooltip .tt-row{display:flex;justify-content:space-between;gap:12px;color:var(--text-dim);}
#tooltip .tt-desc{color:var(--text-dim);margin-top:4px;font-style:italic;}

.has-tooltip{cursor:help;}

/* ---- drop zones ---- */
.drop-zone{border:1px dashed var(--line);border-radius:8px;padding:12px;text-align:center;font-family:var(--mono);
  font-size:11px;color:var(--text-dim);transition:.15s ease;}
.drop-zone.drag-over{border-color:var(--amber);color:var(--amber);background:rgba(255,171,61,.08);}

/* ---- progress bar ---- */
.progress-bar{height:6px;border-radius:3px;background:var(--void-2);overflow:hidden;margin:4px 0;}
.progress-bar .fill{height:100%;background:var(--cyan);transition:width .2s ease;}

.bcard:hover,.res-card:hover{transform:translateY(-2px);border-color:#38405f;}

/* ---- layout: main content + persistent sidebar ---- */
.layout{display:flex;gap:16px;align-items:flex-start;}
.main-col{flex:1;min-width:0;}
.sidebar{width:270px;flex:none;position:sticky;top:14px;display:flex;flex-direction:column;gap:12px;
  max-height:calc(100vh - 28px);overflow-y:auto;}
.sidebar .panel{margin-bottom:0;}
.side-panel h2{margin-bottom:8px;}
.side-credits-label{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--text-dim);}
.side-credits-value{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--amber);margin-top:2px;}
.side-row{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11.5px;
  padding:4px 0;border-bottom:1px solid var(--line);}
.side-row:last-child{border-bottom:none;}
.side-row span:first-child{color:var(--text-dim);}
.side-row span:last-child{color:var(--text);font-weight:600;}
.side-subrow{font-family:var(--mono);font-size:10px;color:var(--text-dim);margin:-2px 0 4px;text-align:right;}

@media (max-width:900px){
  .layout{flex-direction:column;}
  .sidebar{width:100%;position:static;max-height:none;}
}

.res-card,.bcard{transition:transform .12s ease,border-color .12s ease,opacity .15s ease,filter .15s ease;}
.search-dim{opacity:.28;filter:grayscale(.85);}
.search-dim:hover{opacity:.55;}

.combat-active{background:var(--red) !important;color:#fff !important;animation:combatPulse 1.4s ease-in-out infinite;}
@keyframes combatPulse{0%,100%{opacity:1;}50%{opacity:.75;}}