:root{
  --bg:#050609; --panel:#101218; --panel2:#171a23; --text:#f7fafc; --muted:#9ca3af;
  --border:#272a35; --accent:#4fd1c5; --danger:#f97373;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(circle at top,#111827,#020617 60%);color:var(--text)}
.topbar{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);background:linear-gradient(90deg,#020617,#111827)}
.title{font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-size:14px}
.subtitle{color:var(--muted);font-size:12px}
.top-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--border);background:#020617;border-radius:999px;padding:6px 10px;color:var(--muted);font-size:12px}
.pill button{border:1px solid var(--border);background:#0b1220;color:var(--text);border-radius:8px;width:26px;height:22px;cursor:pointer}
.pill span{color:var(--text);min-width:18px;display:inline-block;text-align:center}
.btn{border:1px solid var(--border);background:#020617;color:var(--text);border-radius:999px;padding:6px 10px;font-size:12px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.danger{border-color:rgba(249,115,115,.5);color:var(--danger)}
.layout{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:12px;padding:12px;height:calc(100vh - 56px)}
.panel{background:radial-gradient(circle at top left,#111827,#020617 70%);border:1px solid var(--border);border-radius:12px;padding:12px;min-height:0;display:flex;flex-direction:column;box-shadow:0 18px 45px rgba(0,0,0,.55)}
.panel-head{margin-bottom:8px}
.panel-title{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.panel-sub{font-size:12px;color:var(--muted)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
select,input{border:1px solid var(--border);background:#020617;color:var(--text);border-radius:999px;padding:8px 10px;font-size:12px}
input{flex:1;min-width:120px}
.unitlist{margin-top:10px;flex:1;overflow:auto;border:1px solid rgba(31,41,55,.7);border-radius:10px;background:rgba(15,23,42,.9);padding:6px}
.unitrow{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px;border-radius:10px;border:1px solid transparent;cursor:pointer}
.unitrow:hover{background:rgba(15,118,110,.15);border-color:rgba(45,212,191,.3)}
.unitname{font-weight:600;font-size:13px}
.unitmeta{display:flex;gap:6px;flex-wrap:wrap;color:var(--muted);font-size:11px}
.tag{border:1px solid var(--border);border-radius:999px;padding:2px 8px}
.addbtn{width:28px;height:28px;border-radius:10px;border:1px solid var(--border);background:#020617;color:var(--text);cursor:pointer}
.addbtn:hover{border-color:var(--accent)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.grid{flex:1;overflow:auto;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));align-content:start}
.tile{border:1px solid rgba(31,41,55,.85);border-radius:12px;background:radial-gradient(circle at top,#111827,#020617 70%);padding:10px;cursor:pointer;position:relative}
.tile:hover{border-color:var(--accent)}
.tilehead{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.titlename{font-weight:800;font-size:13px}
.subline{color:var(--muted);font-size:11px;margin-top:2px}
.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.qbtn{border:1px solid var(--border);background:#020617;color:var(--muted);border-radius:999px;padding:4px 8px;font-size:11px;cursor:pointer}
.qbtn:hover{border-color:var(--accent);color:var(--accent)}
.bar{height:12px;border-radius:999px;background:rgba(15,23,42,.9);overflow:hidden;margin-top:8px;position:relative}
.barfill{height:100%;background:linear-gradient(90deg,#ef4444,#eab308,#22c55e);transform-origin:left}
.bartext{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.75)}
.hint{color:var(--muted);font-size:12px;margin-top:8px}
.kbd{border:1px solid var(--border);border-bottom-color:rgba(255,255,255,.2);background:#020617;border-radius:8px;padding:2px 6px;font-size:11px;color:var(--muted)}
/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:12px}
.modal-backdrop.open{display:flex}
.modal{width:min(900px,96vw);max-height:90vh;overflow:auto;border:1px solid var(--border);border-radius:14px;background:radial-gradient(circle at top left,#111827,#020617 70%);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.modal-head{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(2,6,23,.95);backdrop-filter:blur(8px)}
.modal-title{font-weight:900;font-size:14px}
.modal-sub{color:var(--muted);font-size:12px}
.modal-body{padding:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.bigbar{height:20px;border-radius:999px;background:rgba(15,23,42,.9);overflow:hidden;position:relative;border:1px solid rgba(31,41,55,.7)}
.bigbar-fill{height:100%;background:linear-gradient(90deg,#ef4444,#eab308,#22c55e);transform-origin:left}
.bigbar-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.75)}
.models{display:flex;flex-direction:column;gap:6px}
.modelrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px;border:1px solid rgba(31,41,55,.7);border-radius:12px;background:rgba(15,23,42,.65);cursor:pointer}
.modelrow.target{outline:2px solid var(--accent)}
.mleft{display:flex;gap:8px;align-items:center}
.micon{font-size:16px}
.mlabel{color:var(--muted);font-size:12px}
.mw{font-weight:800}
.mctrl{display:flex;gap:6px;align-items:center}
.mbtn{width:28px;height:28px;border-radius:10px;border:1px solid var(--border);background:#020617;color:var(--text);cursor:pointer}
.mbtn:hover{border-color:var(--accent)}
.profiles{display:flex;flex-direction:column;gap:8px;margin:10px 0 14px}
.profile{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px;border:1px dashed rgba(31,41,55,.75);border-radius:12px;background:rgba(2,6,23,.35)}
.pname{display:flex;gap:8px;align-items:center}
.pcount{display:flex;gap:6px;align-items:center}
@media(max-width:900px){.layout{grid-template-columns:1fr;height:auto}}

/* Datasheet side panel */
.datasheet-panel{position:fixed;top:0;right:0;height:100vh;width:min(460px,96vw);background:radial-gradient(circle at top left,#111827,#020617 72%);border-left:1px solid var(--border);box-shadow:-22px 0 60px rgba(0,0,0,.62);transform:translateX(105%);transition:transform .18s ease;z-index:9000;display:flex;flex-direction:column}
.datasheet-panel.open{transform:translateX(0)}
.datasheet-head{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px;border-bottom:1px solid var(--border);background:rgba(2,6,23,.96)}
.datasheet-title{font-weight:900;color:var(--accent);font-size:15px;text-transform:uppercase;letter-spacing:.05em}
.datasheet-sub{font-size:12px;color:var(--muted);margin-top:2px}
.datasheet-body{padding:12px;overflow:auto}
.ds-section{border:1px solid rgba(31,41,55,.75);border-radius:12px;padding:10px;margin-bottom:10px;background:rgba(15,23,42,.62)}
.ds-section h4{margin:0 0 8px;color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:.09em}
.ds-stats{display:grid;grid-template-columns:repeat(6,minmax(42px,1fr));gap:6px}
.ds-stat{text-align:center;border:1px solid var(--border);border-radius:10px;background:#020617;padding:6px 4px}
.ds-stat span{display:block;color:var(--muted);font-size:10px}
.ds-stat strong{display:block;color:var(--text);font-size:14px;margin-top:2px}
.ds-note{margin-top:8px;color:var(--muted);font-size:12px}
.ds-raw-table{display:flex;flex-direction:column;gap:4px}
.ds-row{border:1px solid rgba(31,41,55,.55);border-radius:8px;padding:6px 8px;background:rgba(2,6,23,.5);font-size:12px;color:var(--text)}
.ds-section ul{margin:0;padding-left:18px;color:var(--text);font-size:12px}
.ds-section li{margin:4px 0}
.ds-empty{color:var(--muted);font-size:12px}
.ds-keywords{display:flex;gap:6px;flex-wrap:wrap}
.update-banner{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:9999;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--accent);border-radius:999px;background:#020617;box-shadow:0 12px 36px rgba(0,0,0,.6);font-size:13px}
@media(max-width:700px){.ds-stats{grid-template-columns:repeat(3,1fr)}}


/* Option A: Warhammer-app-style datasheet accordions */
.datasheet-panel{
  width:min(520px, 100vw);
  background:#f4f4f2;
  color:#111;
}
.datasheet-head{
  background:#303030;
  color:#fff;
  min-height:72px;
}
.datasheet-title{
  color:#fff;
  font-size:22px;
  font-weight:900;
  letter-spacing:.04em;
}
.datasheet-sub{color:#ddd}
.datasheet-body{
  padding:0;
  background:#f4f4f2;
  color:#111;
}
.ds-profile-name{
  background:#477f98;
  color:#fff;
  font-size:20px;
  font-weight:900;
  padding:16px 28px;
  letter-spacing:.02em;
}
.ds-top-stats{
  background:#303030;
  color:#fff;
  padding:18px 26px 22px;
}
.ds-stats{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:18px;
}
.ds-stat{
  background:transparent;
  border:0;
  padding:0;
}
.ds-stat span{
  color:#fff;
  font-size:14px;
  text-transform:uppercase;
  font-weight:900;
}
.ds-stat strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:44px;
  margin-top:8px;
  background:#fff;
  color:#000;
  border:2px solid #477f98;
  clip-path:polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%);
  font-size:18px;
}
.ds-note{color:#fff}
.ds-accordion{
  border:0;
  margin:0;
  background:#fff;
}
.ds-accordion-head{
  width:100%;
  border:0;
  background:#477f98;
  color:#fff;
  padding:16px 28px;
  font-size:19px;
  font-weight:900;
  text-align:left;
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-transform:uppercase;
  letter-spacing:.04em;
  cursor:pointer;
}
.ds-chevron{font-size:26px;line-height:1}
.ds-accordion-body{
  display:none;
  background:#fff;
  color:#111;
}
.ds-accordion.open .ds-accordion-body{display:block}
.ds-weapon-head{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:8px;
  background:#d0d0d0;
  color:#000;
  font-weight:900;
  text-transform:uppercase;
  padding:14px 28px;
  font-size:16px;
}
.ds-weapon-card{
  padding:16px 14px 20px;
}
.ds-weapon-name{
  background:#303030;
  color:#fff;
  font-size:18px;
  font-weight:900;
  padding:14px 18px;
  border-radius:6px;
  margin-bottom:12px;
}
.ds-weapon-stats{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:8px;
  padding:0 12px;
  font-size:18px;
  font-weight:900;
  color:#000;
}
.ds-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}
.ds-tag{
  display:inline-flex;
  padding:6px 10px;
  border-radius:8px;
  background:#111;
  color:#fff;
  font-size:14px;
  font-weight:900;
  text-transform:uppercase;
}
.ds-tag.dashed{
  background:#fff;
  color:#111;
  border:2px dashed #999;
}
.ds-accordion-body p{
  font-size:17px;
  line-height:1.55;
  padding:0 28px;
  margin:16px 0;
}
.ds-ability-block{
  padding:22px 28px;
}
.ds-ability-block p{
  padding:0;
}
.ds-muted-title{
  color:#777;
  font-size:18px;
  margin:12px 0;
}
.ds-ability-block hr{
  border:0;
  border-top:2px dashed #222;
  margin:20px 0;
}
.ds-keyword-box{
  margin:28px;
  padding:18px;
  border:2px solid #999;
  border-radius:12px;
  font-size:16px;
  line-height:1.45;
}
.ds-faction-keyword{
  margin:0 28px 28px;
  padding:18px;
  background:#477f98;
  color:#fff;
  border-radius:12px;
  font-size:16px;
}
.ds-empty{
  padding:20px 28px;
  color:#666;
}
.ds-section{border:0;background:transparent}
@media(max-width:700px){
  .datasheet-panel{width:100vw}
  .ds-stats{gap:10px}
  .ds-stat strong{min-width:40px;height:40px;font-size:16px}
  .ds-weapon-head,.ds-weapon-stats{font-size:15px}
}


/* Flatter datasheet look + collapsible accordions refinement */
.datasheet-panel{
  background:#f4f4f2 !important;
  color:#111 !important;
}

.datasheet-body{
  background:#f4f4f2 !important;
}

.ds-top-stats{
  border:0 !important;
  box-shadow:none !important;
}

.ds-accordion{
  border:0 !important;
  margin:0 !important;
  box-shadow:none !important;
}

.ds-accordion-body{
  border:0 !important;
  box-shadow:none !important;
  background:#fff !important;
}

.ds-weapon-card{
  border:0 !important;
  box-shadow:none !important;
  background:#fff !important;
  padding:16px 14px 18px !important;
  margin:0 !important;
}

.ds-weapon-card + .ds-weapon-card{
  border-top:10px solid #fff !important;
}

.ds-weapon-name{
  border:0 !important;
  box-shadow:none !important;
  border-radius:6px !important;
  background:#303030 !important;
  color:#fff !important;
}

.ds-weapon-head{
  border:0 !important;
  box-shadow:none !important;
}

.ds-section,
.ds-ability-block{
  border:0 !important;
  box-shadow:none !important;
  background:#fff !important;
}

.ds-ability-block{
  padding:22px 28px !important;
}

.ds-ability-block p,
.ds-accordion-body p{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.ds-tag.dashed{
  background:#fff !important;
  border:2px dashed #999 !important;
  color:#111 !important;
  box-shadow:none !important;
}

.ds-keyword-box{
  background:#fff !important;
  box-shadow:none !important;
}

.ds-faction-keyword{
  box-shadow:none !important;
}

/* When all sections are collapsed, keep the panel clean rather than leaving empty boxes */
.ds-accordion:not(.open) .ds-accordion-body{
  display:none !important;
}


/* Cleaner weapon row grouping: one complete block per weapon */
.ds-weapon-card{
  padding:12px 14px 18px !important;
}
.ds-weapon-name{
  margin-bottom:12px !important;
}
.ds-weapon-stats{
  align-items:center;
  min-height:34px;
}
.ds-weapon-stats span{
  display:flex;
  align-items:center;
  justify-content:center;
}
.ds-tags{
  padding:0 8px;
}


/* Align weapon column headers with weapon stats below */
.ds-weapon-head,
.ds-weapon-stats{
  grid-template-columns: 1.25fr 0.75fr 1fr 1fr 1fr 1fr !important;
  column-gap: 0 !important;
}

.ds-weapon-head{
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.ds-weapon-stats{
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.ds-weapon-head span,
.ds-weapon-stats span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Keep weapon name aligned with the overall content width */
.ds-weapon-name{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Datasheet rule/list polish: cleaner Abilities, Wargear Abilities, and Additional Wargear */
.ds-ability-block{
  padding:18px 24px 22px !important;
}

.ds-rule-tag-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:0 0 12px;
  margin-bottom:10px;
  border-bottom:1px solid #d8d8d8;
}

.ds-rule-tag-row + .ds-rule-tag-row{
  margin-top:4px;
}

.ds-rule-tag-row .ds-muted-title{
  margin:0 4px 0 0;
  min-width:66px;
  color:#555;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.ds-rule-card{
  padding:12px 0;
  border-bottom:1px solid #e2e2e2;
}

.ds-rule-card:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.ds-rule-title{
  color:#111;
  font-size:16px;
  font-weight:950;
  line-height:1.2;
  margin-bottom:5px;
  text-transform:none;
}

.ds-rule-text{
  color:#222;
  font-size:14px;
  line-height:1.45;
}

.ds-wargear-list{
  padding:18px 24px 22px;
  background:#fff;
}

.ds-wargear-group{
  padding:12px 0;
  border-bottom:1px solid #e2e2e2;
}

.ds-wargear-group:first-child{
  padding-top:0;
}

.ds-wargear-group:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.ds-wargear-title{
  color:#111;
  font-size:14px;
  font-weight:850;
  line-height:1.4;
}

.ds-wargear-options{
  display:grid;
  gap:6px;
  margin-top:10px;
}

.ds-wargear-option{
  position:relative;
  padding:7px 10px 7px 28px;
  background:#f3f3f1;
  border-left:4px solid #477f98;
  border-radius:5px;
  color:#111;
  font-size:14px;
  font-weight:750;
  line-height:1.3;
}

.ds-wargear-option::before{
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#303030;
  transform:translateY(-50%);
}

.ds-wargear-note{
  color:#444;
  font-size:13px;
  line-height:1.45;
  padding:10px 0;
  border-top:1px dashed #c8c8c8;
}

.ds-accordion-body .ds-empty{
  background:#fff;
  padding:18px 24px;
}

@media(max-width:700px){
  .ds-ability-block,
  .ds-wargear-list{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .ds-rule-title{
    font-size:15px;
  }

  .ds-rule-text,
  .ds-wargear-title,
  .ds-wargear-option{
    font-size:13px;
  }
}

/* Confirmed stats only / multi-profile stat rows */
.ds-stat-profiles{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
}
.ds-stat-profile-row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ds-stat-profile-label{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* Official-style invulnerable save bar */
.ds-invuln-save{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#477f98;
  color:#fff;
  min-height:56px;
  padding:0 28px;
  border-top:1px solid rgba(255,255,255,.28);
  border-bottom:1px solid rgba(255,255,255,.28);
  font-size:15px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.ds-invuln-save span{
  display:flex;
  align-items:center;
  height:56px;
  line-height:1;
  transform:translateY(1px);
}

.ds-invuln-save strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:39px;
  background:#fff;
  color:#477f98;
  font-size:16px;
  font-weight:900;
  line-height:1;
  clip-path:polygon(
    50% 0,
    100% 14%,
    100% 68%,
    82% 88%,
    50% 100%,
    18% 88%,
    0 68%,
    0 14%
  );
}

/* Batch 7: datasheet polish + weapon loadout toggles */
.ds-loadout-panel{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(2,6,23,.38);
  border-radius:12px;
  padding:10px;
  margin:0 0 10px;
}
.ds-loadout-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:8px;
}
.ds-loadout-title{
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.ds-loadout-sub{
  color:var(--muted);
  font-size:11px;
  margin-top:2px;
}
.ds-loadout-actions{
  display:flex;
  gap:6px;
  flex:0 0 auto;
}
.ds-mini-btn{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(15,23,42,.92);
  color:#fff;
  border-radius:999px;
  padding:5px 9px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.ds-mini-btn:hover{border-color:var(--accent);color:var(--accent)}
.ds-weapon-toggle-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.ds-weapon-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(15,23,42,.72);
  color:var(--muted);
  border-radius:999px;
  padding:5px 9px;
  font-size:11px;
  font-weight:750;
  cursor:pointer;
  user-select:none;
}
.ds-weapon-toggle.checked{
  color:#fff;
  border-color:rgba(79,209,197,.46);
  background:rgba(20,184,166,.14);
}
.ds-weapon-toggle input{
  width:13px;
  height:13px;
  accent-color:var(--accent);
  margin:0;
}

.ds-ability-block{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ds-rule-tag-row{
  background:rgba(2,6,23,.30);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:9px 10px;
}
.ds-rule-card{
  border-left:4px solid var(--accent);
  background:rgba(255,255,255,.045);
  border-radius:0 12px 12px 0;
  padding:10px 11px;
  margin:0;
}
.ds-rule-title{
  color:#fff;
  font-size:13px;
  font-weight:950;
  letter-spacing:.035em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.ds-rule-text{
  color:rgba(247,250,252,.88);
  font-size:12px;
  line-height:1.45;
}
.ds-wargear-group{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px;
}
.ds-wargear-option{
  background:rgba(2,6,23,.42);
  border-radius:10px;
}

@media (max-width:620px){
  .ds-loadout-head{flex-direction:column}
  .ds-loadout-actions{width:100%}
  .ds-mini-btn{flex:1}
}


/* Batch 8: collapsible selected weapon menu */
.ds-loadout-panel{
  padding:0;
  overflow:hidden;
}
.ds-loadout-head{
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px;
  margin:0;
  text-align:left;
  cursor:pointer;
}
.ds-loadout-head:hover .ds-loadout-title{
  color:var(--accent);
}
.ds-loadout-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  color:#fff;
  font-size:15px;
  line-height:1;
  transition:transform .15s ease, border-color .15s ease;
}
.ds-loadout-panel.collapsed .ds-loadout-chevron{
  transform:rotate(-90deg);
}
.ds-loadout-content{
  padding:0 10px 10px;
}
.ds-loadout-panel.collapsed .ds-loadout-content{
  display:none;
}
.ds-loadout-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.ds-loadout-help{
  color:var(--muted);
  font-size:11px;
}
@media (max-width:620px){
  .ds-loadout-tools{flex-direction:column;align-items:stretch}
}


/* Batch 10: selected weapon header alignment fix */
.ds-loadout-panel{
  margin:8px 0 10px;
}
.ds-loadout-head{
  min-height:52px;
  padding:8px 14px 7px 18px;
  align-items:center;
}
.ds-loadout-head > div:first-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  line-height:1.1;
  transform:translateY(2px);
  min-width:0;
}
.ds-loadout-title{
  line-height:1;
}
.ds-loadout-sub{
  line-height:1;
  margin-top:0;
}
.ds-loadout-chevron{
  flex:0 0 26px;
  margin-top:1px;
}

/* Batch 11: selected weapon header true vertical alignment */
.ds-loadout-head{
  min-height:54px;
  padding:0 14px 0 18px;
  align-items:center;
}
.ds-loadout-head > div:first-child{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:54px;
  line-height:1;
  transform:none;
  padding:0;
}
.ds-loadout-title{
  display:flex;
  align-items:center;
  min-height:26px;
  line-height:1;
}
.ds-loadout-sub{
  position:absolute;
  left:0;
  top:34px;
  line-height:1;
  margin:0;
}
.ds-loadout-chevron{
  align-self:center;
  margin-top:0;
}

/* Batch 12: readable ability cards + drone/support selectors */
.ds-accordion-body .ds-ability-block{
  background:#fff !important;
  color:#111 !important;
  padding:22px 28px !important;
  gap:10px !important;
}

.ds-accordion-body .ds-rule-tag-row{
  background:#fff !important;
  border:0 !important;
  border-bottom:1px solid #d8d8d8 !important;
  border-radius:0 !important;
  color:#111 !important;
  padding:0 0 12px !important;
  margin:0 0 10px !important;
}

.ds-accordion-body .ds-rule-tag-row .ds-muted-title{
  color:#555 !important;
}

.ds-accordion-body .ds-rule-card{
  background:#fff !important;
  color:#111 !important;
  border:0 !important;
  border-left:4px solid var(--accent) !important;
  border-bottom:1px solid #e2e2e2 !important;
  border-radius:0 !important;
  padding:10px 12px !important;
  margin:0 !important;
}

.ds-accordion-body .ds-rule-card:last-child{
  border-bottom:0 !important;
}

.ds-accordion-body .ds-rule-title{
  color:#111 !important;
  font-size:14px !important;
  font-weight:950 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  margin:0 0 5px !important;
}

.ds-accordion-body .ds-rule-text{
  color:#222 !important;
  font-size:13px !important;
  line-height:1.45 !important;
}

.ds-option-panel{
  margin:8px 8px 10px !important;
  border-radius:8px !important;
  background:#a7a8ad !important;
  color:#fff !important;
}

.ds-option-panel + .ds-option-panel{
  margin-top:0 !important;
}

.ds-option-panel .ds-loadout-title{
  color:var(--accent) !important;
}

.ds-option-panel .ds-loadout-content{
  background:#f4f4f2 !important;
  color:#111 !important;
  padding:10px !important;
}

.ds-option-panel .ds-loadout-help{
  color:#555 !important;
}

.ds-option-panel .ds-weapon-toggle{
  background:#fff !important;
  color:#111 !important;
  border-color:#d8d8d8 !important;
}

.ds-option-panel .ds-weapon-toggle.checked{
  border-color:var(--accent) !important;
  box-shadow:inset 4px 0 0 var(--accent) !important;
}

.ds-loadout-rule-note{
  background:#fff7df;
  color:#111;
  border-top:1px solid #e1d199;
  border-bottom:1px solid #e1d199;
  padding:10px 28px;
  font-size:12px;
  line-height:1.35;
}

.ds-hit-note{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#477f98;
  font-weight:950;
}

/* Weapon keyword hover/focus help */
.ds-keyword-tooltip{
  cursor:help;
}

.ds-keyword-tooltip:focus{
  outline:2px solid rgba(79,209,197,.75);
  outline-offset:2px;
}

.ds-floating-tooltip{
  position:fixed;
  width:min(280px, calc(100vw - 20px));
  max-width:280px;
  background:#222;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  text-transform:none;
  letter-spacing:0;
  white-space:normal;
  z-index:9999;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  pointer-events:none;
}

.ds-floating-tooltip::after{
  content:"";
  position:absolute;
  left:var(--tooltip-arrow-left, 50%);
  bottom:-12px;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#222;
}

.ds-floating-tooltip.below::after{
  top:-12px;
  bottom:auto;
  border-top-color:transparent;
  border-bottom-color:#222;
}



/* Batch 17: place selected drone/support controls inside Additional Wargear */
.ds-additional-wargear-content{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ds-additional-wargear-content .ds-option-panel{
  margin:0 !important;
}

.ds-additional-wargear-content .ds-option-panel + .ds-option-panel{
  margin-top:0 !important;
}

.ds-additional-wargear-content .ds-wargear-list{
  margin-top:2px;
}


/* Batch 19: PWA + mobile layout pass */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  min-height:100dvh;
  overscroll-behavior-y:none;
  padding-left:var(--safe-left);
  padding-right:var(--safe-right);
}

button,
select,
input{
  font:inherit;
  touch-action:manipulation;
}

.btn,
.addbtn,
.qbtn,
.mbtn,
.ds-mini-btn,
.ds-loadout-head,
.ds-accordion-head{
  -webkit-tap-highlight-color:transparent;
}

.install-btn[hidden]{display:none !important;}

@media (display-mode: standalone){
  .install-btn{display:none !important;}
}

@supports (height: 100dvh){
  .layout{height:calc(100dvh - 56px - var(--safe-top));}
  .datasheet-panel{height:100dvh;}
  .modal-backdrop{min-height:100dvh;}
}

@media(max-width:900px){
  .topbar{
    position:sticky;
    top:0;
    z-index:2000;
    align-items:flex-start;
    padding:calc(10px + var(--safe-top)) 10px 10px;
  }

  .top-controls{
    justify-content:flex-end;
    gap:6px;
  }

  .top-controls .pill{
    padding:5px 7px;
    gap:5px;
  }

  .top-controls .btn{
    padding:7px 9px;
  }

  .layout{
    display:flex;
    flex-direction:column;
    height:auto;
    min-height:calc(100dvh - 64px - var(--safe-top));
    padding:10px;
    gap:10px;
  }

  .panel{
    border-radius:12px;
    padding:10px;
    min-height:auto;
  }

  .unitlist,
  .grid{
    overflow:visible;
    max-height:none;
  }

  .grid{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:620px){
  body{
    background:#020617;
  }

  .topbar{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .title{
    font-size:13px;
  }

  .subtitle{
    font-size:11px;
  }

  .top-controls{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr;
    align-items:center;
    width:100%;
  }

  .top-controls .pill{
    justify-content:center;
    min-height:40px;
  }

  .top-controls .pill button{
    width:28px;
    height:28px;
  }

  .top-controls .btn{
    min-height:40px;
    padding:6px 7px;
    font-size:11px;
  }

  .filters{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  select,
  input{
    width:100%;
    min-height:42px;
    font-size:14px;
  }

  .unitrow{
    min-height:52px;
    padding:10px;
  }

  .unitname,
  .titlename{
    font-size:14px;
  }

  .addbtn,
  .mbtn{
    width:36px;
    height:36px;
  }

  .toolbar .btn,
  .quick .qbtn{
    min-height:38px;
  }

  .tile{
    padding:12px;
  }

  .modal-backdrop{
    align-items:stretch;
    justify-content:stretch;
    padding:0;
  }

  .modal{
    width:100vw;
    max-height:100dvh;
    border-radius:0;
    border-left:0;
    border-right:0;
  }

  .modal-head{
    padding:calc(10px + var(--safe-top)) 12px 10px;
  }

  .modal-body{
    padding:12px 10px calc(12px + var(--safe-bottom));
  }

  .modelrow{
    min-height:54px;
  }
}

@media(max-width:520px){
  .datasheet-panel{
    width:100vw !important;
    height:100dvh !important;
    border-left:0;
  }

  .datasheet-head{
    min-height:62px;
    padding:calc(10px + var(--safe-top)) 12px 10px;
    position:sticky;
    top:0;
    z-index:2;
  }

  .datasheet-title{
    font-size:18px;
    line-height:1.05;
  }

  .datasheet-sub{
    font-size:11px;
  }

  .datasheet-head .btn{
    min-height:38px;
    padding:7px 10px;
  }

  .datasheet-body{
    padding-bottom:calc(18px + var(--safe-bottom));
  }

  .ds-profile-name{
    font-size:17px;
    padding:13px 16px;
  }

  .ds-top-stats{
    padding:14px 14px 16px !important;
  }

  .ds-stats{
    grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
    gap:7px !important;
  }

  .ds-stat span{
    font-size:11px !important;
  }

  .ds-stat strong{
    min-width:34px !important;
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
    margin-top:6px !important;
  }

  .ds-stat-profile-label{
    font-size:9px;
    padding-left:2px;
  }

  .ds-invuln-save{
    min-height:50px;
    padding:0 16px;
    font-size:14px;
  }

  .ds-invuln-save span{
    height:50px;
  }

  .ds-invuln-save strong{
    width:31px;
    height:36px;
    font-size:15px;
  }

  .ds-accordion-head{
    min-height:50px;
    padding:12px 16px;
    font-size:16px;
  }

  .ds-chevron{
    font-size:22px;
  }

  .ds-weapon-head,
  .ds-weapon-stats{
    grid-template-columns:1.15fr .75fr .85fr .85fr .85fr .85fr !important;
    padding-left:12px !important;
    padding-right:12px !important;
    font-size:13px !important;
  }

  .ds-weapon-head{
    padding-top:12px !important;
    padding-bottom:12px !important;
  }

  .ds-weapon-card{
    padding:12px 8px 16px !important;
  }

  .ds-weapon-name{
    font-size:15px !important;
    line-height:1.25;
    padding:12px 13px !important;
    margin-bottom:10px !important;
  }

  .ds-weapon-stats{
    min-height:30px;
  }

  .ds-tags{
    gap:6px;
    margin-top:10px;
    padding:0 6px;
  }

  .ds-tag{
    font-size:11px !important;
    padding:5px 8px !important;
    border-radius:7px;
  }

  .ds-accordion-body .ds-ability-block,
  .ds-wargear-list{
    padding:16px 14px !important;
  }

  .ds-accordion-body .ds-rule-card{
    padding:9px 10px !important;
  }

  .ds-accordion-body .ds-rule-title{
    font-size:13px !important;
  }

  .ds-accordion-body .ds-rule-text,
  .ds-wargear-title,
  .ds-wargear-option,
  .ds-wargear-note{
    font-size:12px !important;
  }

  .ds-keyword-box,
  .ds-faction-keyword{
    margin:14px;
    padding:13px;
    font-size:13px;
  }

  .ds-option-panel{
    margin:0 0 8px !important;
  }

  .ds-loadout-head{
    min-height:50px;
    padding:0 12px 0 14px;
  }

  .ds-loadout-head > div:first-child{
    min-height:50px;
  }

  .ds-loadout-title{
    font-size:11px;
  }

  .ds-loadout-sub{
    top:31px;
    font-size:10px;
  }

  .ds-loadout-chevron{
    width:24px;
    height:24px;
    flex-basis:24px;
  }

  .ds-weapon-toggle-list{
    display:grid;
    grid-template-columns:1fr;
  }

  .ds-weapon-toggle{
    min-height:38px;
    border-radius:10px;
    justify-content:flex-start;
    white-space:normal;
  }

  .ds-floating-tooltip{
    font-size:12px;
    max-width:calc(100vw - 18px);
  }
}

@media(max-width:390px){
  .top-controls{
    grid-template-columns:1fr 1fr 1fr;
  }

  .top-controls .pill{
    grid-column:span 1;
  }

  .ds-stats{
    gap:5px !important;
  }

  .ds-stat strong{
    min-width:30px !important;
    width:30px !important;
    height:31px !important;
    font-size:13px !important;
  }

  .ds-weapon-head,
  .ds-weapon-stats{
    font-size:12px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
}


/* Mobile unit library drawer + fielded-count buttons */
.mobile-library-open,
.mobile-library-close,
.library-backdrop{
  display:none;
}

.library-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.unitrow-main{
  min-width:0;
  flex:1 1 auto;
}

.unitrow-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.addbtn-count{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.unit-count-badge{
  position:absolute;
  right:-7px;
  top:-7px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:var(--accent);
  color:#020617;
  font-size:10px;
  font-weight:900;
  line-height:1;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}

.mobile-library-count{
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:var(--accent);
  font-size:11px;
  font-weight:800;
}

@media(max-width:900px){
  .mobile-library-open{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    min-height:46px;
    margin-bottom:8px;
    border-color:rgba(79,209,197,.45);
    background:linear-gradient(90deg, rgba(79,209,197,.16), rgba(2,6,23,.95));
    color:var(--text);
    font-weight:800;
  }

  .mobile-library-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
  }

  .library-backdrop.open{
    display:block;
    position:fixed;
    inset:0;
    z-index:2100;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(2px);
  }

  .library-panel{
    position:fixed;
    z-index:2200;
    top:calc(10px + var(--safe-top));
    left:10px;
    bottom:calc(10px + var(--safe-bottom));
    width:min(430px, calc(100vw - 20px));
    max-width:none;
    transform:translateX(calc(-100% - 22px));
    transition:transform .22s ease;
    overflow:hidden;
    display:flex;
    box-shadow:0 24px 70px rgba(0,0,0,.75);
  }

  .library-panel.open{
    transform:translateX(0);
  }

  .library-panel .unitlist{
    flex:1;
    overflow:auto;
    max-height:none;
    -webkit-overflow-scrolling:touch;
  }

  .library-panel .hint{
    flex:0 0 auto;
  }

  .layout{
    display:block;
  }

  #activePanel{
    min-height:calc(100dvh - 84px - var(--safe-top));
  }
}

@media(max-width:620px){
  .library-panel{
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100vw;
    height:100dvh;
    border-radius:0;
    padding:calc(12px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));
  }

  .library-panel-head{
    align-items:center;
  }

  .unitrow-actions{
    gap:8px;
  }

  .addbtn-count{
    margin-right:5px;
  }
}


/* Batch 20: mobile polish + Army Manager save slots/presets/export/import */
body.overlay-open{
  overflow:hidden;
}

.army-manager-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:12000;
  background:rgba(0,0,0,.62);
  padding:calc(16px + var(--safe-top, 0px)) 16px calc(16px + var(--safe-bottom, 0px));
  align-items:center;
  justify-content:center;
}

.army-manager-backdrop.open{
  display:flex;
}

.army-manager{
  width:min(860px, 96vw);
  max-height:min(820px, 92dvh);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:18px;
  background:radial-gradient(circle at top left,#111827,#020617 72%);
  color:var(--text);
  box-shadow:0 30px 90px rgba(0,0,0,.78);
}

.army-manager-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:rgba(2,6,23,.96);
}

.army-manager-title{
  color:var(--accent);
  font-size:15px;
  font-weight:950;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.army-manager-sub{
  margin-top:2px;
  color:var(--muted);
  font-size:12px;
}

.army-manager-body{
  padding:14px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.army-manager-section{
  border:1px solid rgba(39,42,53,.9);
  border-radius:14px;
  background:rgba(15,23,42,.72);
  padding:14px;
  margin-bottom:12px;
}

.army-manager-section h3{
  margin:0 0 6px;
  color:var(--text);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.army-manager-section p,
.army-help{
  margin:0 0 10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.army-current-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.army-current-actions,
.army-save-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.army-input-row{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
}

.army-input-row input{
  flex:1 1 auto;
  min-height:38px;
  border-radius:12px;
}

.army-save-list{
  display:grid;
  gap:8px;
}

.army-save-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(2,6,23,.56);
}

.army-save-main{
  min-width:0;
}

.army-save-name{
  color:var(--text);
  font-size:13px;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.army-save-meta{
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}

.army-empty{
  padding:12px;
  border:1px dashed rgba(255,255,255,.16);
  border-radius:12px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

@media(max-width:900px){
  .topbar{
    position:sticky;
    top:0;
    z-index:1500;
  }

  .toolbar .btn,
  .top-controls .btn,
  .mobile-library-open{
    min-height:42px;
  }

  .tile{
    padding:12px;
  }

  .quick .qbtn{
    min-height:36px;
    min-width:42px;
  }
}

@media(max-width:620px){
  .army-manager-backdrop{
    padding:0;
    align-items:stretch;
    justify-content:stretch;
  }

  .army-manager{
    width:100vw;
    max-height:none;
    height:100dvh;
    border-radius:0;
    border-left:0;
    border-right:0;
  }

  .army-manager-head{
    padding:calc(12px + var(--safe-top, 0px)) 12px 12px;
  }

  .army-manager-body{
    padding:12px 12px calc(16px + var(--safe-bottom, 0px));
  }

  .army-current-summary,
  .army-save-card,
  .army-input-row{
    align-items:stretch;
    flex-direction:column;
  }

  .army-current-actions,
  .army-save-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .army-current-actions .btn,
  .army-save-actions .btn,
  .army-input-row .btn{
    min-height:42px;
    width:100%;
  }

  .army-save-name{
    white-space:normal;
  }
}


/* Mobile keyword tooltip tap support */
.ds-keyword-tooltip{
  -webkit-tap-highlight-color:rgba(71,127,152,.22);
  touch-action:manipulation;
}

@media(max-width:700px){
  .ds-keyword-tooltip{
    cursor:pointer;
    min-height:32px;
    align-items:center;
  }

  .ds-floating-tooltip{
    font-size:13px;
    line-height:1.4;
    padding:11px 13px;
    z-index:12000;
  }
}


/* Mobile Army Manager button fix */
.mobile-main-actions{
  display:none;
}

.mobile-army-open{
  display:none;
}

#armyManagerBtn,
.mobile-army-open{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(79,209,197,.25);
  position:relative;
  z-index:3;
}

@media(max-width:620px){
  .top-controls{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:7px;
  }

  #armyManagerBtn{
    min-height:44px;
    font-weight:900;
    border-color:rgba(79,209,197,.45);
  }

  .mobile-main-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-bottom:10px;
  }

  .mobile-main-actions .btn,
  .mobile-army-open{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:46px;
    font-size:13px;
    font-weight:900;
  }

  .mobile-army-open{
    border-color:rgba(79,209,197,.55);
    color:var(--accent);
  }
}

/* Batch 23: make Army Manager open like the mobile Add / browse units drawer */
@media(max-width:900px){
  .army-manager-backdrop{
    display:none !important;
    position:fixed !important;
    inset:0 !important;
    z-index:2300 !important;
    padding:0 !important;
    background:rgba(0,0,0,.55) !important;
    backdrop-filter:blur(2px) !important;
    align-items:stretch !important;
    justify-content:stretch !important;
  }

  .army-manager-backdrop.open{
    display:block !important;
  }

  .army-manager-backdrop .army-manager{
    position:fixed !important;
    z-index:2400 !important;
    top:calc(10px + var(--safe-top)) !important;
    left:10px !important;
    bottom:calc(10px + var(--safe-bottom)) !important;
    width:min(430px, calc(100vw - 20px)) !important;
    height:auto !important;
    max-height:none !important;
    max-width:none !important;
    margin:0 !important;
    border-radius:12px !important;
    transform:translateX(calc(-100% - 22px)) !important;
    transition:transform .22s ease !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    box-shadow:0 24px 70px rgba(0,0,0,.75) !important;
  }

  .army-manager-backdrop.open .army-manager{
    transform:translateX(0) !important;
  }

  .army-manager-head{
    flex:0 0 auto !important;
    min-height:64px !important;
  }

  .army-manager-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

@media(max-width:620px){
  .army-manager-backdrop .army-manager{
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    height:100dvh !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
  }

  .army-manager-head{
    padding:calc(12px + var(--safe-top, 0px)) 12px 12px !important;
  }

  .army-manager-body{
    padding:12px 12px calc(16px + var(--safe-bottom, 0px)) !important;
  }
}


/* Batch 24: hamburger app menu to reduce top-bar clutter */
.menu-btn{
  min-width:44px;
  font-size:20px;
  font-weight:900;
  line-height:1;
  border-color:rgba(79,209,197,.45);
}

.main-menu-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:25000;
  background:rgba(0,0,0,.48);
  backdrop-filter:blur(2px);
}

.main-menu-backdrop.open{
  display:block;
}

.main-menu-panel{
  position:fixed;
  top:calc(10px + var(--safe-top, 0px));
  right:10px;
  width:min(340px, calc(100vw - 20px));
  max-height:calc(100dvh - 20px - var(--safe-top, 0px) - var(--safe-bottom, 0px));
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:14px;
  background:radial-gradient(circle at top left,#111827,#020617 72%);
  box-shadow:0 28px 80px rgba(0,0,0,.78);
  transform:translateX(calc(100% + 24px));
  transition:transform .22s ease;
}

.main-menu-backdrop.open .main-menu-panel{
  transform:translateX(0);
}

.main-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-bottom:1px solid var(--border);
  background:rgba(2,6,23,.96);
}

.main-menu-title{
  color:var(--accent);
  font-size:14px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.main-menu-sub{
  color:var(--muted);
  font-size:12px;
  margin-top:2px;
}

.main-menu-body{
  display:grid;
  gap:8px;
  padding:12px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.main-menu-action{
  width:100%;
  min-height:46px;
  border-radius:12px;
  justify-content:flex-start;
  text-align:left;
  padding:10px 12px;
  font-size:13px;
  font-weight:900;
}

.main-menu-action.danger{
  border-color:rgba(249,115,115,.55);
  color:var(--danger);
}

.sr-menu-only{
  display:none !important;
}

@media(max-width:900px){
  .top-controls{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto !important;
    align-items:center !important;
    width:100% !important;
  }

  .top-controls .pill{
    min-height:42px;
    justify-content:center;
  }

  .top-controls .btn.menu-btn{
    min-height:42px;
    width:48px;
    padding:6px 8px;
    justify-self:end;
  }

  .mobile-main-actions,
  .mobile-army-open{
    display:none !important;
  }
}

@media(max-width:620px){
  .main-menu-panel{
    top:0;
    right:0;
    bottom:0;
    width:min(86vw, 360px);
    max-height:none;
    height:100dvh;
    border-radius:0;
    border-top:0;
    border-right:0;
    border-bottom:0;
  }

  .main-menu-head{
    padding:calc(12px + var(--safe-top, 0px)) 12px 12px;
  }

  .main-menu-body{
    padding:12px 12px calc(16px + var(--safe-bottom, 0px));
  }
}


/* Batch 25: instance-specific datasheet loadouts + mobile overlay stability */
.ds-instance-context{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:10px 16px 0;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(71,127,152,.12);
  border:1px solid rgba(71,127,152,.28);
  color:#303030;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

body.datasheet-open{
  overflow:hidden;
}

@media(max-width:760px){
  body.datasheet-open .datasheet-panel.open{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-height:none !important;
    z-index:12000 !important;
    transform:translateX(0) !important;
    overflow:hidden !important;
  }

  body.datasheet-open .datasheet-body{
    flex:1 1 auto !important;
    height:auto !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
  }
}


/* Hide internal per-tracker loadout label in datasheet UI */
.ds-instance-context{display:none !important;}

/* Weapon duplicate quantity display */
.ds-weapon-qty{
  font-style:normal;
  font-weight:900;
  color:var(--accent);
  margin-left:4px;
}

.ds-weapon-name-qty{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(79,209,197,.18);
  color:#fff;
  border:1px solid rgba(79,209,197,.5);
  font-size:.78em;
  line-height:1;
  vertical-align:middle;
}

.datasheet-panel .ds-weapon-name-qty{
  color:#fff;
}


/* Batch 28: update check + ability keyword tooltip polish */
.ds-rule-text .ds-keyword-tooltip,
.ds-rule-tag-row .ds-keyword-tooltip{
  cursor:help;
  vertical-align:baseline;
}

.main-menu-action#menuCheckUpdateBtn::before{
  content:"↻";
  margin-right:6px;
}


/* Batch 31: mobile full tracker must sit above sticky top menu */
body.modal-open{
  overflow:hidden !important;
  height:100dvh !important;
}

.modal-backdrop{
  z-index:30000 !important;
}

.modal-backdrop.open{
  display:flex !important;
}

@media(max-width:620px){
  .modal-backdrop{
    position:fixed !important;
    inset:0 !important;
    z-index:30000 !important;
    padding:0 !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    overflow:hidden !important;
    background:rgba(0,0,0,.68) !important;
  }

  .modal{
    position:relative !important;
    z-index:30001 !important;
    width:100vw !important;
    height:100dvh !important;
    max-height:none !important;
    margin:0 !important;
    border-radius:0 !important;
    border:0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .modal-head{
    position:sticky !important;
    top:0 !important;
    z-index:30002 !important;
    padding:calc(14px + var(--safe-top, 0px)) 12px 12px !important;
    background:rgba(2,6,23,.98) !important;
  }

  .modal-body{
    padding:12px 10px calc(18px + var(--safe-bottom, 0px)) !important;
  }

  #modalClose{
    position:relative !important;
    z-index:30003 !important;
    min-height:42px !important;
    flex:0 0 auto !important;
  }
}


/* Batch 32: hard lock page behind full tracker modal */
html.modal-root-lock,
body.modal-open{
  overscroll-behavior:none !important;
}

body.modal-open .topbar,
body.modal-open .layout,
body.modal-open .main-menu-backdrop,
body.modal-open .library-backdrop,
body.modal-open .datasheet-panel{
  pointer-events:none !important;
}

body.modal-open .modal-backdrop,
body.modal-open .modal-backdrop *{
  pointer-events:auto !important;
}

@media(max-width:620px){
  body.modal-open{
    touch-action:none !important;
  }

  body.modal-open .modal{
    touch-action:auto !important;
    overscroll-behavior:contain !important;
  }
}


/* Unit nickname test */
.nickname-editor{
  margin:10px 0 12px;
}
.nickname-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:8px;
  border:1px solid rgba(31,41,55,.75);
  border-radius:12px;
  background:rgba(15,23,42,.62);
}
.nickname-label{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.nickname-input{
  width:100%;
  min-width:0;
  border-radius:10px;
}
.nickname-clear{
  min-height:34px;
}
@media(max-width:760px){
  .nickname-row{
    grid-template-columns:1fr auto;
  }
  .nickname-label{
    grid-column:1 / -1;
  }
  .nickname-input{
    min-height:42px;
  }
}


/* iOS input zoom fix
   iPhone Safari zooms the page when focusing inputs under 16px.
   Keep mobile form fields at 16px so nickname editing does not zoom the screen. */
@media (max-width:760px){
  input,
  select,
  textarea,
  .nickname-input,
  .army-input-row input,
  #searchBox{
    font-size:16px !important;
  }

  .nickname-input{
    min-height:44px;
  }
}


/* Batch BA2: cleaner selected weapon/loadout panels inside datasheets */
.datasheet-panel .ds-loadout-panel{
  margin:10px 18px 14px !important;
  border:1px solid #c9d3d8 !important;
  border-radius:10px !important;
  background:#f7f7f5 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
.datasheet-panel .ds-loadout-head{
  min-height:44px !important;
  padding:0 12px 0 14px !important;
  background:#e9ecec !important;
  color:#111 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}
.datasheet-panel .ds-loadout-head > div:first-child{
  min-height:44px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  transform:none !important;
  position:static !important;
  gap:2px !important;
}
.datasheet-panel .ds-loadout-title{
  color:#111 !important;
  font-size:13px !important;
  line-height:1.1 !important;
  min-height:0 !important;
  letter-spacing:.06em !important;
}
.datasheet-panel .ds-loadout-sub{
  position:static !important;
  color:#65727a !important;
  font-size:11px !important;
  line-height:1.1 !important;
  margin:0 !important;
}
.datasheet-panel .ds-loadout-chevron{
  width:28px !important;
  height:28px !important;
  flex:0 0 28px !important;
  color:#477f98 !important;
  border:1px solid #b7c8d1 !important;
  background:#fff !important;
  margin:0 !important;
}
.datasheet-panel .ds-loadout-content{
  padding:10px 12px 12px !important;
  background:#fff !important;
}
.datasheet-panel .ds-loadout-help{
  color:#475569 !important;
}
.datasheet-panel .ds-weapon-toggle{
  background:#f4f4f2 !important;
  color:#111 !important;
  border:1px solid #d4d4d0 !important;
}
.datasheet-panel .ds-weapon-toggle.checked{
  background:#dff3f0 !important;
  border-color:#4fd1c5 !important;
}
@media (max-width:700px){
  .datasheet-panel .ds-loadout-panel{margin:8px 12px 12px !important;border-radius:8px !important;}
  .datasheet-panel .ds-loadout-title{font-size:12px !important;}
}

/* Batch 8 polish: points, versions, keyword tags, army manager cleanup */
.points-summary-pill{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  border:1px solid rgba(79,209,197,.35);
  background:rgba(15,23,42,.86);
  color:var(--accent);
  border-radius:999px;
  padding:6px 11px;
  font-size:12px;
  font-weight:850;
  letter-spacing:.02em;
}

.ds-keyword-box,
.ds-faction-keyword{
  display:block;
}

.ds-keyword-label{
  display:block;
  margin-bottom:10px;
  color:#555;
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ds-keyword-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ds-keyword-tooltip{
  cursor:help;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.ds-keyword-tooltip:focus{
  outline:2px solid #477f98;
  outline-offset:2px;
}

.main-menu-version{
  margin-top:8px;
  padding:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(15,23,42,.65);
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.main-menu-version strong{
  color:var(--text);
  margin-right:6px;
}

.army-manager-section{
  border-radius:16px;
}

.army-current-summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  background:linear-gradient(135deg, rgba(79,209,197,.10), rgba(15,23,42,.86));
  border-color:rgba(79,209,197,.25) !important;
}

.army-version-line{
  margin:4px 0 0 !important;
  color:var(--muted);
  font-size:12px;
}

.army-input-row input{
  min-height:40px;
}

.army-save-card{
  align-items:center;
}

.army-save-meta{
  line-height:1.45;
}

@media(max-width:760px){
  .points-summary-pill{
    width:100%;
    justify-content:center;
    font-size:13px;
  }

  .army-current-summary{
    grid-template-columns:1fr;
  }

  .army-current-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .army-save-card{
    gap:10px;
  }

  .army-save-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .ds-keyword-tooltip{
    cursor:pointer;
  }
}