:root{ --sidebar-w: 360px; }
html,body{height:100%;margin:0;background:#0b0f19;color:#eaeef6;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
#layout{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:100%;height:100%}

/* Sidebar */
#sidebar{background:#0d1324;border-right:1px solid #1f2a44;display:flex;flex-direction:column;min-width:300px;max-width:560px}
#brand{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid #1f2a44}
#brand img.poseidon-logo{height:72px;width:auto;border-radius:12px;object-fit:contain}
#brand h1{font-size:16px;margin:0;color:#c7d2fe;letter-spacing:.3px}
#controls{padding:12px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.card{border:1px solid #1f2a44;border-radius:12px;background:#0f1526;padding:12px}
.card h3{margin:0 0 10px 0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#9fb3ff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
label{font-size:12px;opacity:.9}
input,select{width:100%;padding:8px 10px;border-radius:8px;border:1px solid #2a385e;background:#0b1120;color:#eaeef6}
input[type=file]{color:#9fb3ff}
.btn{background:linear-gradient(180deg,#3b82f6,#2563eb);border:none;color:#fff;padding:10px 12px;border-radius:10px;cursor:pointer;font-weight:600}
.btn.secondary{background:#223055}
.stack{display:flex;flex-wrap:wrap;gap:8px}
.switch{display:flex;gap:8px;align-items:center}
.muted{font-size:12px;opacity:.8}
.status{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid #2a385e;background:#0b1120;font-size:12px;color:#9fb3ff}

/* Map panel */
#map{position:relative}
#cesiumContainer{position:absolute;inset:0}

/* Legend */
#legend{position:absolute;right:12px;bottom:12px;z-index:15;background:rgba(18,24,38,.92);border:1px solid #1f2a44;border-radius:10px;padding:10px;min-width:120px}
#legend h5{margin:0 0 6px 0;font-size:12px;color:#c7d2fe}
#legend canvas{display:block;border:1px solid #1f2a44;border-radius:8px;background:#0b1120}
#legend .muted{margin-top:6px}

/* Popup */
#popup{position:absolute;z-index:20;min-width:220px;max-width:320px;background:rgba(14,18,30,.98);border:1px solid #223055;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.35);padding:10px;display:none;pointer-events:none}
#popup h4{margin:0 0 6px 0;font-size:13px;color:#c7d2fe}
#popup .rowp{font-size:12px;display:flex;justify-content:space-between;gap:8px}

/* Hide Cesium credits */
.cesium-widget-credits{display:none !important}

/* Profile */
#profileBox{border:1px solid #1f2a44;border-radius:10px;background:#0f1526;padding:10px}
#profileCanvas{width:100%;height:160px;border:1px solid #1f2a44;border-radius:8px;background:#0b1120}
#profileStats{font-size:12px;margin-top:6px;opacity:.9}

/* === Toolbar === */
#toolbar{
    position:absolute; left:50%; top:12px; transform:translateX(-50%);
    z-index:30; display:flex; gap:8px; align-items:center;
    background:rgba(13,19,36,.85); border:1px solid #1f2a44; border-radius:999px;
    padding:6px 10px; box-shadow:0 6px 20px rgba(0,0,0,.35); backdrop-filter: blur(6px);
  }
  #toolbar .tool-sep{ width:1px; height:22px; background:#1f2a44; }
  .tool-btn{
    border:1px solid #2a385e; background:#0b1120; color:#eaeef6;
    padding:6px 10px; border-radius:999px; cursor:pointer; font-weight:700; line-height:1;
  }
  .tool-btn:hover{ background:#12203b; }
  .tool-btn.active{ background:linear-gradient(180deg,#3b82f6,#2563eb); border-color:#2563eb; color:#fff; }
  
  /* === Profile Dock (bottom) === */
  #profileDock{
    position:absolute; left:12px; right:12px; bottom:12px; z-index:25;
    background:rgba(14,18,30,.96); border:1px solid #1f2a44; border-radius:12px;
    box-shadow:0 12px 40px rgba(0,0,0,.5); overflow:hidden;
    transition: transform .25s ease, opacity .2s ease;
  }
  #profileDock.closed{ transform: translateY(calc(100% + 12px)); opacity:0; pointer-events:none; }
  
  #profileDock .dock-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 12px; border-bottom:1px solid #1f2a44; background:rgba(15,21,38,.9);
  }
  #profileDock .dock-left{ display:flex; align-items:center; gap:10px; }
  #profileDock .dock-right{ display:flex; align-items:center; gap:8px; }
  #chartSearch{
    width:220px; padding:6px 10px; border-radius:8px; border:1px solid #2a385e;
    background:#0b1120; color:#eaeef6;
  }
  #profileDock .dock-body{ display:grid; grid-template-columns: 260px 1fr; min-height:280px; }
  
  .chart-list{ border-right:1px solid #1f2a44; background:#0f1526; overflow:auto; }
  #chartList{ list-style:none; margin:0; padding:6px; display:flex; flex-direction:column; gap:6px; }
  #chartList li{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    border:1px solid #243255; border-radius:10px; padding:8px 10px; background:#0b1120; cursor:pointer;
  }
  #chartList li.active{ border-color:#3b82f6; background:#0e1a33; }
  #chartList .title{ font-size:13px; color:#c7d2fe; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #chartList .meta{ font-size:11px; opacity:.8; }
  #chartList .row{ display:flex; flex-direction:column; }
  #chartList .actions{ display:flex; gap:6px; }
  #chartList .mini{ border:1px solid #2a385e; background:#0b1120; color:#eaeef6; padding:4px 8px; border-radius:8px; }
  
  .chart-panel{ padding:10px; display:flex; flex-direction:column; gap:8px; }
  #dockCanvas{ width:100%; height:260px; border:1px solid #1f2a44; border-radius:10px; background:#0b1120; }
  .chart-meta{ font-size:12px; opacity:.9; color:#eaeef6; display:flex; gap:16px; flex-wrap:wrap; }