@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Share+Tech+Mono&family=Oswald:wght@300;400;600&display=swap');

:root {
  --bg:        #0a0c09;
  --panel:     #111410;
  --card:      #181d13;
  --hover:     #1e2618;
  --b0:        #1e2818;
  --b1:        #2e4020;
  --b2:        #4a6030;
  --gd:        #3d5228;
  --gm:        #5e8038;
  --gh:        #7aaa48;
  --gg:        #96d058;
  --gold:      #b89840;
  --goldh:     #dac060;
  --red:       #aa2828;
  --redh:      #e04040;
  --th:        #c8dca8;
  --tm:        #7a9a5a;
  --td:        #445830;
  --tg:        #c8a840;
  --fm:        'Oswald', sans-serif;
  --fmono:     'Share Tech Mono', monospace;
  --ft:        'Cinzel', serif;
  --r:         4px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100vh}
body{background:var(--bg);color:var(--th);font-family:var(--fm);font-size:14px;line-height:1.4;
  background-image:radial-gradient(ellipse 120% 70% at 50% 0%,#152010 0%,transparent 55%)}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--panel)}
::-webkit-scrollbar-thumb{background:var(--gd);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--gm)}

/* ── Layout ── */
.wrap{max-width:1560px;margin:0 auto;padding:0 16px 40px}

/* ── Header ── */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 0 12px;
  border-bottom:2px solid var(--b1);margin-bottom:14px;flex-wrap:wrap;gap:10px}
.hdr-title{font-family:var(--ft);font-size:20px;letter-spacing:3px;color:var(--tg);
  text-shadow:0 0 18px rgba(200,168,64,.3);text-transform:uppercase}
.hdr-title span{color:var(--gg)}
.hdr-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;font-family:var(--fm);
  font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  border:1px solid var(--b1);border-radius:var(--r);background:var(--card);color:var(--tm);
  cursor:pointer;transition:all .15s;user-select:none}
.btn:hover{background:var(--hover);border-color:var(--gm);color:var(--th)}
.btn.active,.btn:active{background:var(--gd);border-color:var(--gh);color:var(--gg)}
.btn.danger{border-color:var(--red);color:var(--red)}
.btn.danger:hover{background:rgba(170,40,40,.15);color:var(--redh)}
.btn.primary{border-color:var(--gold);color:var(--gold)}
.btn.primary:hover{background:rgba(184,152,64,.1);color:var(--goldh)}

/* ── Tabs ── */
.tabs{display:flex;gap:3px;margin-bottom:14px;flex-wrap:wrap}
.tab{padding:5px 16px;font-family:var(--fm);font-size:13px;letter-spacing:1px;
  background:var(--panel);border:1px solid var(--b0);border-bottom:none;color:var(--td);
  cursor:pointer;border-radius:3px 3px 0 0;transition:all .15s}
.tab:hover{color:var(--tm);border-color:var(--b1)}
.tab.active{background:var(--card);border-color:var(--gm);color:var(--gg);border-bottom:2px solid var(--card)}
.tab.add{color:var(--tg);border-color:var(--gold);background:transparent}
.tab.add:hover{background:rgba(184,152,64,.08)}

/* ── Two-column layout ── */
.main{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start}
@media(max-width:860px){.main{grid-template-columns:1fr}}

/* ── Panel ── */
.panel{background:var(--panel);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden}
.phdr{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;
  background:linear-gradient(90deg,var(--card),var(--panel));border-bottom:1px solid var(--b1);
  font-family:var(--ft);font-size:11px;letter-spacing:2px;color:var(--tg);text-transform:uppercase}

/* ── Badges ── */
.badges{display:flex;gap:6px;flex-wrap:wrap;padding:6px 12px}
.badge{padding:2px 8px;font-size:11px;font-family:var(--fmono);border:1px solid var(--b1);
  border-radius:2px;color:var(--tm);background:var(--bg)}

/* ── Grids ── */
#battalion-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:8px}
#support-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:8px}

/* ── Slots ── */
.slot{aspect-ratio:1;border:1px solid var(--b0);border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;cursor:pointer;transition:all .15s;overflow:hidden;min-height:48px}
.slot.sup{aspect-ratio:unset;min-height:60px}

.slot.empty{background:var(--bg);border-style:dashed}
.slot.empty:hover{border-color:var(--gm);background:var(--hover)}
.s-plus{font-size:18px;color:var(--b2);line-height:1}
.slot.empty:hover .s-plus{color:var(--gm)}

.slot.filled{background:linear-gradient(145deg,var(--card),var(--hover));border-color:var(--b1)}
.slot.filled:hover{border-color:var(--gh)}
.slot.filled.sup{background:linear-gradient(145deg,#101816,#141f18);border-color:#2a4535}

.s-icon{font-size:16px;line-height:1}
.s-name{font-size:9px;text-align:center;color:var(--tm);margin-top:2px;padding:0 2px;line-height:1.2}

.s-del{position:absolute;top:2px;right:2px;width:15px;height:15px;font-size:9px;
  border:none;background:rgba(170,40,40,.8);color:#fff;border-radius:2px;
  cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1}
.slot.filled:hover .s-del{display:flex}

/* ── Right Panel ── */
.right{display:flex;flex-direction:column;gap:12px}

/* ── Stats ── */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr)}
@media(max-width:600px){.stats-grid{grid-template-columns:1fr}}
.stats-col{border-right:1px solid var(--b0);padding:6px 0}
.stats-col:last-child{border-right:none}
.stats-hdr{padding:4px 12px;font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--tg);border-bottom:1px solid var(--b0);margin-bottom:3px;font-family:var(--ft)}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:3px 12px;transition:background .1s}
.stat-row:hover{background:var(--hover)}
.stat-row.highlight{border-top:1px solid var(--b1);margin-top:4px}
.sl{color:var(--tm);font-size:12px}
.sl.small{font-size:11px}
.sl.dimmed{color:var(--td);font-style:italic}
.sv{font-family:var(--fmono);font-size:13px;color:var(--th)}
.sv.gold{color:var(--goldh);font-weight:700}

/* ── Picker Modal ── */
#picker{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:1000;
  align-items:center;justify-content:center;backdrop-filter:blur(4px)}
#picker.open{display:flex}
.picker-box{background:var(--panel);border:1px solid var(--gm);border-radius:6px;
  width:min(760px,95vw);max-height:82vh;display:flex;flex-direction:column;
  box-shadow:0 0 60px rgba(0,0,0,.95),0 0 30px rgba(90,150,50,.08);overflow:hidden}
.picker-top{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;
  border-bottom:1px solid var(--b1);background:var(--card)}
#picker-title{font-family:var(--ft);font-size:13px;letter-spacing:2px;color:var(--tg);text-transform:uppercase}
.picker-x{background:none;border:1px solid var(--b1);color:var(--td);width:26px;height:26px;
  border-radius:3px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.picker-x:hover{border-color:var(--red);color:var(--redh)}
#picker-body{overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:10px}
.pcat-label{font-size:10px;letter-spacing:2px;color:var(--tg);text-transform:uppercase;
  padding:3px 4px;border-bottom:1px solid var(--b0);margin-bottom:5px;font-family:var(--ft)}
.punits{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:5px}
.punit{display:flex;flex-direction:column;align-items:center;padding:10px 6px;
  border:1px solid var(--b0);border-radius:var(--r);cursor:pointer;transition:all .15s;
  background:var(--bg);text-align:center;gap:3px}
.punit:hover{border-color:var(--gh);background:var(--hover);transform:translateY(-1px)}
.punit.disabled{opacity:.38;cursor:not-allowed;pointer-events:none}
.pu-ic{font-size:20px}
.pu-nm{font-size:12px;color:var(--th);font-weight:600}
.pu-dt{font-size:10px;color:var(--td);font-family:var(--fmono)}

/* ── Compare ── */
#compare-panel{background:var(--panel);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden}
.cmp-hdr{padding:8px 12px;font-size:11px;letter-spacing:2px;color:var(--tg);text-transform:uppercase;
  background:var(--card);border-bottom:1px solid var(--b1);font-family:var(--ft)}
.cmp-table{width:100%;border-collapse:collapse;font-family:var(--fmono);font-size:12px}
.cmp-table th,.cmp-table td{padding:4px 12px;border-bottom:1px solid var(--b0);text-align:right}
.cmp-table th:first-child,.cmp-table td:first-child{text-align:left;color:var(--tm);font-family:var(--fm)}
.cmp-table th{color:var(--tg);font-size:11px;background:var(--card)}
.cmp-table td.ac{color:var(--gg)}
.cmp-table tr:hover td{background:var(--hover)}
.dp{color:#6dcc40}.dn{color:var(--redh)}

/* ── Notification ── */
.notification{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(16px);
  background:var(--card);border:1px solid var(--gm);color:var(--gg);padding:9px 22px;
  border-radius:var(--r);font-size:13px;font-family:var(--fmono);letter-spacing:1px;
  opacity:0;transition:all .22s;z-index:2000;pointer-events:none;
  box-shadow:0 8px 32px rgba(0,0,0,.8)}
.notification.show{opacity:1;transform:translateX(-50%) translateY(0)}
.notification.warn{border-color:var(--gold);color:var(--goldh)}

/* ── Footer ── */
.foot{margin-top:28px;padding-top:10px;border-top:1px solid var(--b0);text-align:center;
  font-size:10px;color:var(--td);letter-spacing:1px}