/* Minimal wireframe styles for IdleSpace (desktop-first) */
:root{
  --bg:#0f1724;
  --panel:#0b1220;
  --muted:#94a3b8;
  --accent:#5b6eff;
  --accent-2:#00c2a8;
  --surface:#0f1724;
  --card:#0b1220;
  --text:#e6eef8;
  --tile-size:48px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,system-ui,Arial,sans-serif;background:var(--bg);color:var(--text);}
.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-bottom:1px solid rgba(255,255,255,0.03)}
.logo{font-weight:700;font-size:20px;color:var(--accent)}
.main-actions .btn{margin-left:8px}
.resource-bar{display:flex;gap:12px;margin-right:12px;color:var(--muted)}
.app-body{display:grid;grid-template-columns:240px 1fr 320px;gap:12px;padding:12px;height:calc(100vh - 64px - 32px)}
.left-rail{background:var(--panel);border-radius:8px;padding:12px;display:flex;flex-direction:column}
.rail-header{font-weight:600;margin-bottom:8px}
.ship-search input{width:100%;padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--text)}
.ship-list{list-style:none;padding:8px 0;margin:8px 0;overflow:auto}
.ship-item{padding:8px;border-radius:6px;color:var(--muted);cursor:pointer}
.ship-item.selected{background:rgba(91,110,255,0.1);color:var(--text)}
.rail-footer{margin-top:auto}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 10px;border-radius:6px;color:var(--text);cursor:pointer}
.btn.primary{background:var(--accent);border-color:transparent}
.btn.ghost{background:transparent;border:1px dashed rgba(255,255,255,0.04)}
.btn.small{padding:6px 8px;font-size:12px}
.main-canvas{display:flex;flex-direction:column}
.canvas-toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);border-radius:8px}
.canvas-area{display:flex;gap:12px;margin-top:12px;align-items:stretch}
.canvas-stage{flex:1;min-height:480px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
.canvas-hud{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:6px;z-index:20}
.zoom-controls .btn{display:inline-block}
.grid{position:absolute;inset:0;background-color:rgba(10,15,24,0.6);background-image:
  linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,0.03) 1px, transparent 1px);
background-size:var(--tile-size) var(--tile-size),var(--tile-size) var(--tile-size)}
.palette{width:180px;background:var(--card);border-radius:8px;padding:8px}
.palette-header{font-weight:600;margin-bottom:8px}
.palette-item{padding:8px;border-radius:6px;margin-bottom:6px;background:rgba(255,255,255,0.02);cursor:grab}
.right-panel{background:var(--panel);border-radius:8px;padding:8px;display:flex;flex-direction:column}
.panel-tabs{display:flex;gap:6px;margin-bottom:8px}
.tab{flex:1;padding:8px;border-radius:6px;background:transparent;border:1px solid rgba(255,255,255,0.03);cursor:pointer;color:var(--muted)}
.tab.active{background:rgba(91,110,255,0.08);color:var(--text)}
.panel-body{overflow:auto}
.panel-section{padding:8px}
.panel-section.hidden{display:none}
.statusbar{height:24px;display:flex;justify-content:space-between;align-items:center;padding:8px 12px;color:var(--muted)}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:100}
.modal .modal-content{background:var(--card);padding:16px;border-radius:8px;min-width:320px}
.modal.show{display:flex}

/* Responsive: collapse rails to slide-overs on narrow screens */
@media (max-width:980px){
  .app-body{grid-template-columns:1fr;grid-auto-rows:auto}
  .left-rail,.right-panel{position:fixed;top:64px;bottom:32px;width:300px;transform:translateX(-110%);transition:transform .22s ease}
  .left-rail.open{transform:translateX(0)}
  .right-panel{right:0;left:auto;transform:translateX(110%)}
  .right-panel.open{transform:translateX(0)}
  .palette{display:none}
  .canvas-stage{min-height:360px}
}