:root{
  --bg:#0b1020;--panel:#151c2f;--panel2:#1c2740;--line:#2f3b58;--text:#f5f7fb;
  --muted:#97a3ba;--gold:#f1c56a;--accent:#69a7ff;--danger:#ff6b6b;
}
*{box-sizing:border-box} html{background:var(--bg)} body{margin:0;background:linear-gradient(#0b1020,#101629);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh;padding-bottom:88px}
button,input,select,textarea{font:inherit}
.topbar{position:sticky;top:0;z-index:5;padding:calc(14px + env(safe-area-inset-top)) 16px 12px;display:flex;justify-content:space-between;align-items:center;background:rgba(11,16,32,.94);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
h1,h2,h3{margin:0}.eyebrow{font-size:11px;letter-spacing:.16em;color:var(--gold);font-weight:800}.iconBtn{border:1px solid var(--line);background:var(--panel2);color:white;border-radius:12px;width:42px;height:42px;font-size:24px}
main{padding:14px;max-width:900px;margin:auto}
.controls{display:grid;grid-template-columns:1fr 120px;gap:10px;margin-bottom:12px}
input,select,textarea{width:100%;border:1px solid var(--line);background:#0e1526;color:white;border-radius:12px;padding:12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.stat{background:var(--panel);border:1px solid var(--line);padding:10px;border-radius:12px}.stat b{display:block;font-size:18px}.stat span{font-size:11px;color:var(--muted)}
.cards{display:grid;gap:10px}.card{background:linear-gradient(145deg,var(--panel),#10182b);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.cardTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.name{font-size:20px;font-weight:800}.id{font-size:11px;color:var(--muted)}.power{color:var(--gold);font-weight:800}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.badge{font-size:12px;padding:5px 8px;border-radius:999px;background:#202b45;color:#dce5f7;border:1px solid #34415f}
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}.metric{padding:9px;border-radius:10px;background:#0e1526}.metric span{display:block;color:var(--muted);font-size:11px}.metric b{font-size:15px}
.scoutFlag{margin-top:10px;padding:9px;border-radius:10px;background:#132b25;border:1px solid #235246;color:#baf2db;font-size:12px}
.noScout{background:#2d2315;border-color:#5b4423;color:#f5d9a1}
.card button{width:100%;margin-top:10px;background:var(--panel2);border:1px solid var(--line);color:white;padding:10px;border-radius:10px;font-weight:700}
.bottomNav{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(11,16,32,.96);border-top:1px solid var(--line);backdrop-filter:blur(18px);z-index:6}
.navBtn{border:0;background:transparent;color:var(--muted);padding:10px;text-align:center;font-weight:700}.navBtn.active{color:var(--gold)}.importLabel{display:block}
dialog{width:min(760px,96vw);max-height:92vh;border:1px solid var(--line);border-radius:18px;background:#0d1424;color:white;padding:0;overflow:auto}dialog::backdrop{background:rgba(0,0,0,.7)}
#playerForm{padding:16px}.dialogHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.grid2 label,label{font-size:12px;color:var(--muted)}label input,label textarea{margin-top:5px;color:white}
.sectionTitle{display:flex;align-items:end;justify-content:space-between;margin:20px 0 8px;padding-top:14px;border-top:1px solid var(--line)}
.smallBtn,.secondaryBtn,.primaryBtn,.dangerBtn{border-radius:10px;padding:10px 12px;font-weight:800}.smallBtn,.secondaryBtn{background:var(--panel2);border:1px solid var(--line);color:white}.primaryBtn{background:var(--accent);border:0;color:#08101f}.dangerBtn{background:transparent;border:1px solid #6d2d37;color:#ff9ca5}
.commander{display:grid;grid-template-columns:1fr 90px 44px;gap:8px;margin-bottom:8px}.commander button{border:1px solid var(--line);border-radius:10px;background:#26151a;color:#ff9ca5}
.dialogActions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}.dialogActions .dangerBtn{margin-right:auto}
.empty{color:var(--muted);padding:30px 6px;text-align:center}
@media(max-width:520px){.grid2{grid-template-columns:1fr 1fr}.controls{grid-template-columns:1fr 110px}.stats{grid-template-columns:repeat(3,1fr)}.stat b{font-size:15px}}

.controls{grid-template-columns:1fr 118px 118px}
.matchBox{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#0e1526}
.mutedText{color:var(--muted);font-size:12px;margin-top:4px}
.identityBadge{font-size:12px;padding:5px 8px;border-radius:999px;border:1px solid #5a4421;background:#2e2415;color:#f3cf83}
.identityBadge.linked{border-color:#235246;background:#132b25;color:#baf2db}
.troopGridWrap{overflow-x:auto;margin-top:10px}
.troopGrid{width:100%;border-collapse:collapse;min-width:720px}
.troopGrid th,.troopGrid td{padding:7px;border-bottom:1px solid var(--line);text-align:left;font-size:12px}
.troopGrid th{color:var(--gold)}
.troopGrid input{padding:9px;min-width:90px}
.tierTotal{font-weight:800;color:var(--gold)}
.matchCandidate{display:block;width:100%;margin-top:8px;border:1px solid var(--line);background:#121a2d;color:white;border-radius:10px;padding:10px;text-align:left}
@media(max-width:620px){.controls{grid-template-columns:1fr 1fr}.controls #search{grid-column:1/-1}}

.chooserWrap{padding:18px}
.chooserCards{display:grid;gap:12px;margin-top:14px}
.chooserCard{display:flex;align-items:center;gap:14px;width:100%;padding:16px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(145deg,var(--panel),#10182b);color:white;text-align:left}
.chooserCard b{display:block;font-size:18px;margin-bottom:4px}
.chooserCard small{display:block;color:var(--muted);font-size:12px;line-height:1.35}
.chooserIcon{font-size:28px}
.modeBanner{margin:0 0 14px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#121a2d;color:#dce5f7;font-size:13px;font-weight:700}
.modeBanner.scout{background:#2d2315;border-color:#5b4423;color:#f5d9a1}
.modeBanner.profile{background:#132b25;border-color:#235246;color:#baf2db}
.hidden{display:none!important}

.commander{grid-template-columns:120px 1fr 72px 72px 42px}.commander select{min-width:110px}@media(max-width:620px){.commander{grid-template-columns:1fr 1fr}.commander .cname{grid-column:1/-1}}

.primaryMatchCard{margin-top:14px;padding:16px;border:1px solid #5b4423;border-radius:14px;background:#2d2315;color:#fff}
.primaryMatchCard b{display:block;font-size:20px;margin-bottom:6px}
.primaryMatchCard .reason{color:#f3cf83;font-size:13px;line-height:1.4}
.matchActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.otherMatchesWrap{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.otherMatchesWrap summary{cursor:pointer;color:var(--muted);font-weight:700}
.otherMatchBtn{display:block;width:100%;margin-top:8px;padding:10px;border-radius:10px;border:1px solid var(--line);background:#121a2d;color:#fff;text-align:left}
.identityInlineHint{margin-top:8px;color:var(--muted);font-size:12px}
@media(max-width:620px){.matchActions{grid-template-columns:1fr}}

.screenshotImportWrap{max-width:720px}
.uploadDrop{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px dashed var(--line);border-radius:14px;background:#0d1528;cursor:pointer}
.uploadDrop span{color:var(--muted);font-size:12px}
.uploadDrop input{margin-top:10px}
.screenshotList{display:grid;gap:8px;margin:12px 0}
.screenshotFile{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#121a2d;font-size:13px}
.aiReviewBanner{background:#132b25!important;border-color:#235246!important;color:#baf2db!important}

/* v2.7.0 Scout intelligence history */
.scoutSummary{margin:12px 0;padding:12px;border:1px solid #d9e0e7;border-radius:10px;background:#f8fafc}
.scoutSummaryHead,.historyHead{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;color:#5d6875}
.troopHeadline{display:block;font-size:18px;margin-top:5px}
.tierLine,.historyTiers{font-size:12px;margin-top:6px;color:#485563}
.commanderLine,.historyCommander{font-size:12px;margin-top:5px;color:#485563}
.intelAge{display:inline-block;padding:3px 7px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.intelAge.fresh{background:#dff5e6;color:#176b38}
.intelAge.aging{background:#fff1c7;color:#7a5800}
.intelAge.stale{background:#fde1df;color:#8b2821}
.intelAge.noScout{background:#eceff2;color:#5e6873}
.historySection{margin-top:22px;padding-top:18px;border-top:1px solid #dfe4ea}
.historyItem{border:1px solid #dfe4ea;border-radius:10px;padding:12px;margin:10px 0;background:#fff}
.historyItem.latest{border-width:2px}
.latestBadge{font-size:9px;font-weight:800;letter-spacing:.08em;padding:2px 5px;border-radius:4px;background:#e9eef4;color:#394553}
.historyMetrics{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:#485563}
.hidden{display:none!important}

/* v2.7.3 main-card total troop emphasis */
.totalTroopsRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:baseline;
  margin-top:8px;
  padding:8px 10px;
  border-radius:8px;
  background:rgba(0,0,0,.08);
}
.totalTroopsRow span{
  font-size:12px;
  font-weight:700;
  opacity:.75;
}
.totalTroopsRow b{
  font-size:18px;
  line-height:1;
}

/* v2.7.4 improve Total Troops contrast */
.totalTroopsRow{
  background:#18233a;
  border:1px solid #34496f;
}
.totalTroopsRow span{
  color:#c9d3e6;
  opacity:1;
}
.totalTroopsRow b{
  color:#f6c85f;
}

/* v2.8.0 intelligence history + comparisons */
.historySection{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid #334463;
}
.historyItem{
  border:1px solid #334463;
  border-radius:14px;
  padding:14px;
  margin:12px 0;
  background:#101a2e;
  color:#eef3fb;
}
.historyItem.latest{
  border:2px solid #5272a8;
  background:#121f36;
}
.historyHead{
  color:#aebbd0;
}
.historyHead b{
  color:#f1f5fb;
}
.historyMetrics{
  color:#c6d1e2;
  line-height:1.5;
}
.historyTiers,.historyCommander,.historyMeta{
  color:#aebbd0;
  line-height:1.45;
}
.historyMeta{margin-top:7px;font-size:12px}
.latestBadge{
  background:#243758;
  color:#f6c85f;
  border:1px solid #405c8a;
}
.historyChanges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.changeChip{
  display:inline-block;
  padding:4px 7px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:#26354d;
  color:#dfe8f5;
}
.changeChip.up{background:#123c2b;color:#7ee1ad;border:1px solid #246849}
.changeChip.down{background:#482421;color:#ffaaa3;border:1px solid #7b3b36}
.changeChip.changed{background:#3d3117;color:#f6c85f;border:1px solid #6b572b}
.changeChip.flat{background:#26354d;color:#c5d0e0}
.noChange{
  margin-top:9px;
  font-size:11px;
  color:#7f8da3;
  font-style:italic;
}
@media(max-width:650px){
  .historyMetrics{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px}
  .historyHead{align-items:flex-start}
}

/* v2.8.1 history cleanup */
#profileHistoryCount{
  white-space:normal;
  text-align:center;
  line-height:1.2;
}

/* v2.9 Intelligence Summary */
.intelSummary{
  margin:22px 0 26px;
  padding:18px;
  border:1px solid #34486b;
  border-radius:18px;
  background:#111c32;
}
.intelSummaryEyebrow{
  color:#f5c55f;
  font-weight:900;
  letter-spacing:.16em;
  font-size:.78rem;
  margin-bottom:12px;
}
.intelSummaryGrid{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.intelSummaryChip{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #405577;
  background:#1a2945;
  color:#dce6f8;
  font-weight:800;
  line-height:1.15;
}
.intelSummaryChip.strong{color:#f7c95e;border-color:#607aa8;background:#1b2a47}
.intelSummaryChip.good{color:#8ee0aa;border-color:#287b50;background:#123c2b}
.intelSummaryChip.warn{color:#ffd77f;border-color:#8b641c;background:#3a2a11}
.intelSummaryChip.bad{color:#ffaaa4;border-color:#98483f;background:#3c1d1b}
.intelSummaryChip.neutral{color:#cbd7ea}
@media(max-width:600px){
  .intelSummary{padding:15px}
  .intelSummaryChip{font-size:.92rem}
}

/* v2.9.1 troop-type summary */
.troopTypeSummary{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #334766;
}
.troopTypeHeadline{
  color:#dfe7f4;
  font-size:.96rem;
  margin-bottom:9px;
}
.troopTypeHeadline b{
  color:#f6c85f;
}
.troopTypeGrid{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.troopTypeChip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 9px;
  border-radius:10px;
  border:1px solid #3d5071;
  background:#16233b;
  color:#bfcbe0;
  font-size:.82rem;
}
.troopTypeChip b{
  color:#eaf0fa;
}
.troopTypeChip.dominant{
  border-color:#8b6b27;
  background:#332811;
  color:#ffd97d;
}
.troopTypeChip.dominant b{
  color:#f6c85f;
}

/* v2.9.2 troop-type glance on main player cards */
.mainTroopType{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:baseline;
  margin-top:8px;
  padding:8px 10px;
  border-radius:8px;
  background:#332811;
  border:1px solid #6b572b;
}
.mainTroopType span{
  font-size:12px;
  font-weight:800;
  color:#d8c17f;
}
.mainTroopType b{
  color:#f6c85f;
  font-size:15px;
  text-align:right;
}
.typeLine{
  margin-top:7px;
  font-size:12px;
  line-height:1.45;
  color:#465467;
}


/* v2.9.3 in-app Getting Started */
.topActions{display:flex;gap:10px;align-items:center}
.helpBtn{width:42px;height:42px;border-radius:50%;border:1px solid #405071;background:#17233e;color:#f6c85f;font-size:22px;font-weight:900;cursor:pointer}
.helpDialog .helpWrap{max-width:680px}
.helpSteps{display:grid;gap:10px;margin-top:14px}
.helpSteps section{padding:12px 14px;border:1px solid #344564;border-radius:12px;background:#101a31}
.helpSteps b{color:#f6c85f;font-size:15px}
.helpSteps p{margin:5px 0 0;color:#c7d0df;font-size:13px;line-height:1.45}
.helpWorkflow{margin-top:14px;padding:12px;border-radius:10px;background:#1b2947;border:1px solid #536b99;color:#f6c85f;text-align:center;font-weight:800;font-size:13px}
@media(max-width:520px){.helpBtn{width:38px;height:38px}.helpSteps section{padding:10px 12px}}