/* ─── STO Ship Builder Styling ─── */

:root {
  --bg: #0a0e17;
  --surface: rgba(14, 22, 40, 0.9);
  --surface-border: rgba(34, 211, 238, 0.12);
  --text: #d4dce8;
  --text-dim: #6b7f9e;
  --text-bright: #e8edf8;
  --cyan: #22d3ee;
  --gold: #f5a623;
  --emerald: #34d399;
  --rose: #fb7185;
  --violet: #a78bfa;
  --tac: #fb7185;
  --eng: #f5a623;
  --sci: #34d399;
  --slot-size: 48px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{
  font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;
}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}

header{
  background:var(--surface);border-bottom:1px solid var(--surface-border);
  backdrop-filter:blur(12px);position:sticky;top:0;z-index:10;
}
.header-inner{
  max-width:1200px;margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{font-size:1.1rem;font-weight:600}
.sto{color:var(--cyan)}.gold{color:var(--gold)}
.nav-link{color:var(--text-dim);text-decoration:none;font-size:.85rem}
.nav-link:hover{color:var(--cyan)}

.app{
  max-width:1200px;margin:0 auto;padding:12px 16px;
  display:grid;grid-template-columns:1fr 320px;gap:16px;position:relative;z-index:1;
}
@media(max-width:960px){.app{grid-template-columns:1fr}}

/* ─── Panel Sections ─── */
.build-panel{min-width:0}
.panel-section{
  background:var(--surface);border:1px solid var(--surface-border);
  border-radius:12px;padding:16px;margin-bottom:12px;
  backdrop-filter:blur(8px);
}
.section-title{
  font-size:.75rem;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--text-dim);margin-bottom:10px;
}
.empty-state{color:var(--text-dim);font-size:.85rem;padding:16px;text-align:center;font-style:italic}

/* ─── Stats Panel ─── */
.stats-panel{
  background:var(--surface);border:1px solid var(--surface-border);
  border-radius:12px;padding:16px;position:sticky;top:60px;height:fit-content;
  backdrop-filter:blur(8px);max-height:calc(100vh - 80px);overflow-y:auto;
}

/* ─── Ship Selector ─── */
.ship-selector{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ship-option{
  background:rgba(34,211,238,0.03);border:1px solid rgba(34,211,238,0.08);
  border-radius:8px;padding:8px 10px;cursor:pointer;
  transition:all .15s;text-align:left;
}
.ship-option:hover{border-color:var(--cyan);background:rgba(34,211,238,0.08)}
.ship-option.selected{border-color:var(--cyan);background:rgba(34,211,238,0.12)}
.ship-option .name{font-size:.85rem;font-weight:600}
.ship-option .sub{font-size:.7rem;color:var(--text-dim);margin-top:2px}
.ship-option .meta-tag{
  font-size:.6rem;padding:1px 6px;border-radius:4px;
  margin-left:4px;font-weight:600;
}
.meta-S{background:var(--gold);color:#000}
.meta-A{background:var(--cyan);color:#000}
.meta-B{background:rgba(107,127,158,0.3);color:var(--text-dim)}

/* ─── Weapon Slots ─── */
.config-grid{display:grid;gap:4px}
.weapon-row{
  display:grid;grid-template-columns:24px 1fr;
  gap:6px;align-items:center;padding:4px 0;
}
.weapon-row .slot-label{font-size:.7rem;color:var(--text-dim);text-align:right}
.weapon-row select{
  background:rgba(0,0,0,.3);border:1px solid rgba(34,211,238,0.12);
  border-radius:6px;color:var(--text);padding:6px 8px;
  font-size:.8rem;width:100%;cursor:pointer;
}
.weapon-row select:focus{border-color:var(--cyan);outline:none}

/* ─── Console Slots ─── */
.console-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px;
}
.console-slot{
  background:rgba(0,0,0,.2);border:1px solid rgba(34,211,238,0.06);
  border-radius:6px;padding:4px 6px;display:flex;align-items:center;gap:4px;
}
.console-slot .slot-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.console-slot .slot-dot.tac{background:var(--tac)}
.console-slot .slot-dot.eng{background:var(--eng)}
.console-slot .slot-dot.sci{background:var(--sci)}
.console-slot .slot-dot.uni{background:var(--violet)}
.console-slot select{
  background:none;border:none;color:var(--text);
  font-size:.75rem;width:100%;cursor:pointer;flex:1;
}
.console-slot select:focus{outline:none;color:var(--cyan)}

/* ─── BOff Slots ─── */
.boff-config{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.boff-slot{
  background:rgba(0,0,0,.2);border-radius:6px;padding:8px;
  border-left:3px solid var(--tac);
}
.boff-slot.eng-slot{border-left-color:var(--eng)}
.boff-slot.sci-slot{border-left-color:var(--sci)}
.boff-slot .boff-header{
  display:flex;justify-content:space-between;margin-bottom:4px;
}
.boff-slot .boff-rank{font-size:.65rem;font-weight:600;text-transform:uppercase;color:var(--text-dim)}
.boff-slot .boff-career{font-size:.6rem;color:var(--text-dim)}
.boff-slot select{
  background:none;border:1px solid rgba(255,255,255,0.06);
  border-radius:4px;color:var(--text);font-size:.75rem;
  padding:3px 4px;width:100%;cursor:pointer;
}
.boff-slot select:focus{border-color:var(--cyan);outline:none}

/* ─── Equipment ─── */
.equip-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.equip-slot{
  background:rgba(0,0,0,.2);border:1px solid rgba(34,211,238,0.06);
  border-radius:8px;padding:8px;text-align:center;
}
.equip-slot .label{font-size:.65rem;color:var(--text-dim);margin-bottom:4px}
.equip-slot select{
  background:none;border:none;color:var(--text);
  font-size:.7rem;width:100%;cursor:pointer;text-align:center;
}
.equip-slot select:focus{color:var(--cyan);outline:none}

/* ─── Stats Display ─── */
.stat-group{
  background:rgba(0,0,0,.2);border-radius:8px;padding:10px;margin-bottom:8px;
}
.stat-group h3{font-size:.7rem;text-transform:uppercase;color:var(--text-dim);letter-spacing:1px;margin-bottom:6px}
.stat-row{display:flex;justify-content:space-between;padding:3px 0;font-size:.78rem}
.stat-row .label{color:var(--text-dim)}
.stat-row .value{font-weight:600;font-variant-numeric:tabular-nums}
.stat-row .value.good{color:var(--emerald)}
.stat-row .value.caution{color:var(--gold)}
.stat-row .value.bad{color:var(--rose)}
.stat-detail{font-size:.65rem;color:var(--text-dim);margin-top:8px;line-height:1.4}
.stat-divider{height:1px;background:var(--surface-border);margin:8px 0}

/* ─── Build Info ─── */
.build-info{font-size:.7rem;color:var(--text-dim);text-align:center;margin-top:12px;line-height:1.5}

/* ─── Sets Detection ─── */
.set-badge{
  display:inline-block;font-size:.6rem;padding:2px 6px;border-radius:4px;
  background:rgba(245,166,35,0.1);color:var(--gold);border:1px solid rgba(245,166,35,.2);
  margin:2px;
}