:root {
  color-scheme: dark;
  --bg: #090a0d;
  --surface: rgba(22, 20, 17, 0.96);
  --surface-2: rgba(34, 30, 24, 0.98);
  --line: rgba(220, 168, 70, 0.44);
  --line-soft: rgba(255, 255, 255, 0.10);
  --gold: #f0c266;
  --gold-2: #ffdf93;
  --amber: #c87b16;
  --text: #f7f3e9;
  --muted: #b9b2a6;
  --cyan: #67e9e6;
  --danger: #ff7676;
  --success: #8ee6ab;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -10%, rgba(205, 143, 35, 0.18), transparent 34rem),
    radial-gradient(circle at 100% 35%, rgba(50, 123, 128, 0.10), transparent 26rem),
    linear-gradient(180deg, #11100e 0%, var(--bg) 30%, #050608 100%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { color: inherit; }

.equip-top-shell{
  position:sticky;
  top:0;
  z-index:40;
  --auto-header-shift: 0px;
  transform: translate3d(0, 0, 0);
  transition: transform .24s cubic-bezier(.22,.72,.2,1);
  will-change: transform;
}
.equip-top-shell.is-header-hidden{
  transform: translate3d(0, var(--auto-header-shift), 0);
}
@media (prefers-reduced-motion: reduce){
  .equip-top-shell{ transition:none; }
}
.equip-integration-band{
  position:relative;
  z-index:2;
  background:linear-gradient(180deg,rgba(9,16,30,.96),rgba(12,19,34,.94));
}
.equip-tabs-band{
  position:relative;
  z-index:3;
  background:linear-gradient(180deg,rgba(9,16,30,.98),rgba(12,19,34,.96));
  box-shadow:0 10px 24px rgba(0,0,0,.20);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.equip-toolbar-inner{
  width:min(100%,980px);
  margin:0 auto;
  padding:10px 12px 10px;
}

.app-shell {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom));
}

.hero-header {
  position: relative;
  overflow: hidden;
  padding: 24px 18px 22px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 211, 117, 0.08), transparent 35%),
    linear-gradient(180deg, rgba(35, 31, 23, 0.98), rgba(12, 12, 12, 0.98));
  box-shadow: var(--shadow);
}

.hero-header::before,
.hero-header::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.hero-header::before { left: 0; }
.hero-header::after { right: 0; transform: rotate(180deg); }

.eyebrow,
.section-kicker {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.hero-header h1 {
  margin: 5px 0 5px;
  color: var(--gold-2);
  font-family: Georgia, "Yu Mincho", serif;
  font-size: clamp(1.85rem, 8vw, 2.8rem);
  letter-spacing: 0.04em;
  text-shadow: 0 0 22px rgba(243, 190, 78, 0.28);
}

.hero-header p { margin: 0; color: var(--muted); font-size: 0.85rem; }

.tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0;
  padding: 8px;
  border: 1px solid rgba(240, 194, 102, 0.28);
  border-radius: 17px;
  background: rgba(8, 9, 11, 0.88);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.tab {
  position: relative;
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 62px;
  padding: 7px 3px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.tab > span { font-size: 1.05rem; }
.tab strong { font-size: clamp(0.72rem, 3vw, 0.9rem); }
.tab.is-active {
  border-color: rgba(255, 220, 143, 0.75);
  background: linear-gradient(180deg, rgba(206, 137, 28, 0.95), rgba(102, 60, 8, 0.95));
  color: #fff8e5;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 5px 18px rgba(192, 112, 17, .25);
}

.saved-count {
  position: absolute;
  top: 4px;
  right: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: var(--gold-2);
  font-size: .66rem;
  line-height: 18px;
}

.panel,
.result-card {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow);
}

.panel { padding: 17px; }

.field-label {
  display: block;
  margin-bottom: 8px;
  color: var(--gold-2);
  font-weight: 800;
}

.name-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }

.text-input,
.number-input {
  width: 100%;
  border: 1px solid rgba(255,255,255,.16);
  outline: none;
  background: rgba(0,0,0,.38);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.text-input {
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
}

.text-input:focus,
.number-input:focus {
  border-color: var(--gold);
  background: rgba(0,0,0,.55);
  box-shadow: 0 0 0 3px rgba(240, 194, 102, .12);
}

.edit-state { margin-top: 8px; color: var(--muted); font-size: .76rem; }

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line-soft);
}

.section-heading h2,
.backup-panel h2 {
  margin: 2px 0 0;
  color: #fff2c9;
  font-size: 1.16rem;
}

.coefficient-badge,
.saved-summary,
.help-chip {
  flex: 0 0 auto;
  border: 1px solid rgba(240,194,102,.42);
  border-radius: 999px;
  background: rgba(240,194,102,.08);
  color: var(--gold-2);
  font-size: .72rem;
  font-weight: 800;
  padding: 6px 9px;
}

.help-chip { cursor: pointer; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.field-grid.single { grid-template-columns: 1fr; }
.field-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.number-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}

.number-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #e8dfd0;
  font-weight: 750;
  font-size: .9rem;
}

.field-icon { width: 1.25em; text-align: center; filter: saturate(1.15); }
.field-coef { color: var(--gold); font-size: .67rem; font-weight: 700; }

.input-wrap { position: relative; }
.number-input {
  height: 38px;
  padding: 0 7px;
  border-radius: 9px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.number-input::-webkit-inner-spin-button,
.number-input::-webkit-outer-spin-button { opacity: .42; }

.is-hidden { display: none !important; }

.result-card {
  position: relative;
  overflow: hidden;
  padding: 22px 18px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 70%, rgba(225, 153, 39, .22), transparent 48%),
    linear-gradient(180deg, #282015, #0e0e0f 78%);
}

.result-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(255, 219, 137, .2);
  border-radius: 13px;
}

.result-label { position: relative; color: #f3e4bd; font-weight: 800; }
.result-value {
  position: relative;
  margin: 3px 0 8px;
  color: #ffdc83;
  font-family: Georgia, serif;
  font-size: clamp(4rem, 20vw, 6.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255, 192, 62, .4), 0 0 30px rgba(255, 157, 0, .2);
}

.breakdown {
  position: relative;
  display: grid;
  gap: 6px;
  max-width: 520px;
  margin: 0 auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: .82rem;
}
.breakdown-row strong { color: #fff3cf; font-variant-numeric: tabular-nums; }

.primary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 12px;
}

.button {
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 850;
  cursor: pointer;
  transition: transform .12s, filter .12s, box-shadow .12s;
}
.button:active { transform: translateY(1px) scale(.99); }
.button:hover { filter: brightness(1.08); }
.button-calc {
  background: linear-gradient(180deg, #dd981f, #9a5709);
  border-color: #ffd078;
  color: white;
  box-shadow: 0 8px 23px rgba(197, 110, 12, .28);
}
.button-save {
  background: linear-gradient(180deg, #0c918d, #075d61);
  border-color: #67e9e6;
  color: white;
  box-shadow: 0 8px 23px rgba(9, 128, 127, .22);
}
.button-reset {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #3b3d42, #24262a);
  border-color: rgba(255,255,255,.18);
  color: #ddd;
}
.button-subtle {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.15);
  color: #e7e2d8;
}

.saved-panel { padding-bottom: 10px; }
.saved-heading { margin-bottom: 9px; }
.saved-list { display: grid; gap: 9px; }

.empty-state {
  padding: 24px 10px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 12px;
  font-size: .86rem;
}

.saved-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  background: rgba(0,0,0,.25);
}
.saved-item.is-editing { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(103,233,230,.08); }
.saved-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 850; }
.saved-meta { margin-top: 3px; color: var(--muted); font-size: .72rem; }
.saved-score { color: var(--gold-2); font-weight: 900; font-variant-numeric: tabular-nums; }
.saved-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.saved-actions button { min-height: 38px; padding: 6px 10px; border-radius: 9px; }
.load-button { background: rgba(103,233,230,.08); border: 1px solid rgba(103,233,230,.35); color: #9ef7f4; }
.delete-button { background: rgba(255,118,118,.06); border: 1px solid rgba(255,118,118,.28); color: #ff9b9b; }

.formula-panel summary {
  cursor: pointer;
  color: var(--gold-2);
  font-weight: 850;
}
.formula-grid { display: grid; gap: 8px; margin-top: 14px; }
.formula-grid > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 11px;
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}
.formula-grid span { color: var(--muted); }
.formula-grid strong { color: var(--gold-2); white-space: nowrap; }
.formula-note { margin: 12px 0 0; color: var(--muted); font-size: .79rem; line-height: 1.7; }

.backup-panel { display: grid; gap: 14px; }
.backup-panel p { margin: 7px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.backup-actions { display: grid; gap: 8px; }
.file-button { display: grid; place-items: center; }
.file-button input { display: none; }

footer { padding: 20px 8px 0; text-align: center; color: #77756f; font-size: .7rem; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 100;
  width: min(calc(100% - 28px), 520px);
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(20,21,24,.96);
  color: white;
  text-align: center;
  box-shadow: 0 14px 40px rgba(0,0,0,.42);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity .2s, transform .2s;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.success { border-color: rgba(142,230,171,.45); }
.toast.error { border-color: rgba(255,118,118,.55); }

.dialog {
  width: min(calc(100% - 28px), 520px);
  padding: 0;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: var(--text);
}
.dialog::backdrop { background: rgba(0,0,0,.74); backdrop-filter: blur(3px); }
.dialog-card { border: 1px solid var(--line); border-radius: 17px; background: #191714; padding: 18px; box-shadow: var(--shadow); }
.dialog-title-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dialog-title-row h2 { margin: 0; color: var(--gold-2); }
.icon-button { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: rgba(255,255,255,.05); font-size: 1.35rem; cursor: pointer; }

@media (min-width: 620px) {
  .app-shell { padding-left: 20px; padding-right: 20px; }
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .number-field { grid-template-columns: minmax(0, 1fr) 100px; }
  .backup-panel { grid-template-columns: 1fr auto; align-items: center; }
  .backup-actions { min-width: 220px; }
}

@media (max-width: 390px) {
  .app-shell { padding-left: 9px; padding-right: 9px; }
  .panel { padding: 13px; }
  .tab { min-height: 58px; }
  .number-field { grid-template-columns: minmax(0, 1fr) 72px; padding: 8px; }
  .number-field label { font-size: .82rem; }
  .field-coef { display: none; }
  .primary-actions { grid-template-columns: 1fr; }
  .button-reset { grid-column: auto; }
}

/* 武器カテゴリの時だけ表示する武器種サブメニュー */
.weapon-type-panel {
  margin-top: 0;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(240, 194, 102, .06), transparent 42%),
    linear-gradient(180deg, rgba(31, 27, 21, .98), rgba(17, 16, 15, .98));
}

.weapon-type-heading {
  margin-bottom: 11px;
  padding-bottom: 9px;
}

.weapon-type-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.weapon-type-tab {
  position: relative;
  display: grid;
  place-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 54px;
  padding: 7px 2px 6px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(0,0,0,.24);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}

.weapon-type-tab:active { transform: translateY(1px); }
.weapon-type-tab strong { font-size: clamp(.66rem, 2.8vw, .82rem); white-space: nowrap; }
.weapon-type-icon { font-size: 1rem; line-height: 1; }

.weapon-type-tab.is-active {
  border-color: rgba(103,233,230,.72);
  background: linear-gradient(180deg, rgba(16, 126, 124, .55), rgba(7, 69, 73, .68));
  color: #ecffff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 5px 16px rgba(9,128,127,.16);
}

.weapon-type-count {
  position: absolute;
  top: 3px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(0,0,0,.48);
  color: var(--gold-2);
  font-size: .58rem;
  line-height: 16px;
  text-align: center;
}

.weapon-type-note {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: .73rem;
  line-height: 1.5;
}

/* 保存一覧は戦闘力順。順位もひと目で分かるようにする */
.saved-item {
  grid-template-columns: 31px minmax(0, 1fr) auto;
}

.saved-rank {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(240,194,102,.34);
  border-radius: 50%;
  background: rgba(240,194,102,.08);
  color: var(--gold-2);
  font-size: .75rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.saved-main { min-width: 0; }
.saved-actions { grid-column: 2 / -1; }

@media (max-width: 350px) {
  .weapon-type-tabs { gap: 5px; }
  .weapon-type-tab { min-height: 50px; }
  .weapon-type-tab strong { font-size: .62rem; }
  .weapon-type-icon { font-size: .9rem; }
}


/* 保存一覧：5件ごとのページ切り替え */
.saved-panel { scroll-margin-top: 88px; }

.saved-pagination {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 2px 4px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.page-button {
  display: grid;
  place-items: center;
  min-width: 38px;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid rgba(240,194,102,.28);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: #e9e2d3;
  font-weight: 850;
  cursor: pointer;
}

.page-button.is-current {
  border-color: var(--gold-2);
  background: linear-gradient(180deg, rgba(206,137,28,.95), rgba(102,60,8,.95));
  color: #fff8e5;
  box-shadow: 0 5px 16px rgba(192,112,17,.22);
}

.page-button:disabled {
  opacity: .34;
  cursor: default;
}

.page-move { min-width: 62px; }
.pagination-ellipsis { color: var(--muted); font-weight: 900; }

@media (max-width: 430px) {
  .saved-pagination { grid-template-columns: 1fr 1fr; }
  .page-numbers { grid-column: 1 / -1; grid-row: 1; }
  .page-move { grid-row: 2; width: 100%; }
}

/* Integrated equipment manager */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:linear-gradient(rgba(5,8,14,.66),rgba(5,8,14,.82)),url('./assets/app_bg.webp') center/cover no-repeat;
}
.integrated-topbar{
  position:sticky; top:0; z-index:60;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px;
  width:min(100%,760px); margin:0 auto; padding:max(8px,env(safe-area-inset-top)) 12px 8px;
  background:rgba(9,12,20,.94); border-bottom:1px solid rgba(255,255,255,.12); backdrop-filter:blur(16px);
}
.integrated-topbar a{color:#f7f3e9;text-decoration:none;font-size:.78rem;font-weight:800;white-space:nowrap}
.integrated-title{color:#ffdf93;font-weight:900;font-size:.92rem;text-align:center}
.integrated-status{text-align:right}
.integration-note{display:flex;flex-direction:column;gap:4px;margin:12px 0;padding:12px 14px;border:1px solid rgba(103,233,230,.38);border-radius:14px;background:rgba(12,36,43,.82);color:#dffdfc;font-size:.78rem;line-height:1.55}
.integration-note strong{color:#67e9e6;font-size:.84rem}
.legacy-badge{display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;border-radius:999px;background:rgba(255,223,147,.13);border:1px solid rgba(255,223,147,.35);color:#ffdf93;font-size:.66rem;font-weight:900}
.saved-meta .sync-note{color:#67e9e6}
@media(max-width:520px){
  .integrated-topbar{grid-template-columns:auto 1fr auto;padding-left:8px;padding-right:8px}
  .integrated-topbar a{font-size:.7rem}.integrated-title{font-size:.8rem}
  .app-shell{padding-top:10px}
}
.tabs{top:52px}
@supports (top: env(safe-area-inset-top)){
  .tabs{top:calc(env(safe-area-inset-top) + 44px)}
}
.integrated-backup-link{display:grid;place-items:center;text-decoration:none}

/* =========================================================
   v50.82: Equipment UI redesign — align with CP / Status UI
   ========================================================= */
:root{
  color-scheme: light;
  --equip-blue:#2563eb;
  --equip-indigo:#4f46e5;
  --equip-gold:#d99b2b;
  --equip-gold-soft:#f4c66e;
  --equip-text:#111827;
  --equip-muted:#64748b;
  --equip-panel:rgba(255,255,255,.88);
  --equip-panel-strong:rgba(255,255,255,.95);
  --equip-panel-lite:rgba(248,250,252,.74);
  --equip-line:rgba(148,163,184,.25);
  --equip-line-strong:rgba(96,165,250,.30);
  --equip-shadow:0 16px 44px rgba(15,23,42,.18);
  --gold:var(--equip-gold);
  --gold-2:#b97912;
  --text:var(--equip-text);
  --muted:var(--equip-muted);
  --cyan:var(--equip-blue);
  --success:#15803d;
  --danger:#dc2626;
}

html{
  overflow-x:hidden;
  background:#0b1220;
}
body{
  overflow-x:hidden;
  color:#e5e7eb;
  background:#0b1220;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP",sans-serif;
}
body::before{
  background:
    linear-gradient(rgba(5,8,14,.54),rgba(5,8,14,.72)),
    url('./assets/app_bg.webp') center/cover fixed no-repeat;
}

/* Header — same visual family as CP / Status */
.equip-header{
  position:relative;
  width:100%;
  background:url('./assets/rs_title_bg.jpeg') center/cover no-repeat;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  overflow:hidden;
  isolation:isolate;
}
.equip-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(8,15,30,.28);
  pointer-events:none;
}
.equip-hero{
  position:relative;
  z-index:1;
  width:min(100%,980px);
  margin:0 auto;
  padding:max(8px,env(safe-area-inset-top)) 12px 12px;
}
.equip-hero-top{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:7px;
}
.equip-switchbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:11px;
  background:rgba(0,0,0,.20);
  color:#fff;
  text-decoration:none;
  font-size:.73rem;
  font-weight:850;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.equip-switchbtn:active{ transform:translateY(1px); }
.equip-switch-icon{ font-size:.9rem; line-height:1; }
.equip-hero-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  margin-top:7px;
}
.equip-hero-logo{
  display:block;
  width:min(92vw,520px);
  max-width:min(92vw,520px);
  max-height:44px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
.equip-hero-copy{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 13px;
  border:1px solid #f4c38c;
  border-radius:12px;
  background:linear-gradient(135deg,#f0ab63,#d8842a);
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:.12em;
  box-shadow:0 8px 20px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.equip-hero-copy::before{ content:"🔧"; margin-right:6px; letter-spacing:0; }
.equip-hero-sub{
  display:inline-block;
  width:fit-content;
  max-width:min(92vw,680px);
  margin-top:1px;
  padding:7px 11px;
  border:1px solid #f4e39b;
  border-radius:11px;
  background:linear-gradient(135deg,#efd86b,#d5b740);
  color:#242424;
  font-size:11.5px;
  line-height:1.55;
  box-shadow:0 8px 20px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.22);
}

.app-shell{
  width:min(100%,980px);
  margin:0 auto;
  padding:10px 12px max(28px,env(safe-area-inset-bottom));
}

/* Integration notice */
.integration-note{
  margin:0 0 10px;
  padding:10px 12px;
  border:1px solid rgba(96,165,250,.38);
  border-radius:13px;
  background:linear-gradient(135deg,rgba(15,42,78,.86),rgba(19,31,55,.84));
  color:rgba(239,246,255,.92);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.integration-note strong{ color:#93c5fd; font-size:.82rem; }
.integration-note span{ color:rgba(226,232,240,.85); font-size:.74rem; }

/* Main category toolbar */
.tabs{
  position:relative;
  top:auto !important;
  z-index:1;
  margin:0 0 10px;
  padding:6px;
  gap:6px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(11,18,32,.94),rgba(20,30,52,.91));
  box-shadow:0 10px 26px rgba(0,0,0,.24);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.tab{
  min-height:55px;
  padding:6px 3px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:11px;
  background:rgba(255,255,255,.055);
  color:rgba(226,232,240,.82);
}
.tab:nth-child(even){ background:rgba(255,255,255,.018); }
.tab > span{ font-size:1rem; }
.tab strong{ font-size:clamp(.70rem,3vw,.84rem); }
.tab.is-active{
  border-color:rgba(147,197,253,.78);
  background:linear-gradient(135deg,#2563eb,#4f46e5);
  color:#fff;
  box-shadow:0 8px 18px rgba(37,99,235,.28),inset 0 1px 0 rgba(255,255,255,.22);
}
.saved-count{
  top:3px;
  right:4px;
  background:#d99b2b;
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}

/* Light glass cards — alternating opacity */
.panel{
  padding:14px;
  border:1px solid var(--equip-line);
  border-radius:16px;
  background:var(--equip-panel);
  color:var(--equip-text);
  box-shadow:var(--equip-shadow);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
main > section.panel:nth-of-type(even){
  background:rgba(255,255,255,.91);
  border-color:rgba(191,219,254,.38);
}
main > section.panel:nth-of-type(odd){
  background:rgba(248,250,252,.76);
  border-color:rgba(255,255,255,.34);
}

.section-kicker,.eyebrow{
  color:var(--equip-blue);
  font-size:.65rem;
  letter-spacing:.14em;
}
.section-heading{
  margin-bottom:12px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(148,163,184,.24);
}
.section-heading h2,.backup-panel h2{
  margin:2px 0 0;
  color:#111827;
  font-size:1.02rem;
  font-weight:900;
}
.coefficient-badge,.saved-summary,.help-chip{
  border-color:rgba(37,99,235,.24);
  background:rgba(219,234,254,.74);
  color:#1d4ed8;
  font-size:.69rem;
  padding:5px 8px;
}
.saved-summary{ background:rgba(254,243,199,.88); border-color:rgba(217,155,43,.32); color:#92400e; }
.help-chip{ cursor:pointer; }

/* Weapon-type panel / buttons */
.weapon-type-panel{
  margin-top:0;
  background:linear-gradient(135deg,rgba(239,246,255,.91),rgba(255,255,255,.78)) !important;
  border-color:rgba(96,165,250,.34) !important;
}
.weapon-type-heading{ margin-bottom:9px; padding-bottom:8px; }
.weapon-type-tabs{ gap:6px; }
.weapon-type-tab{
  min-height:50px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:10px;
  background:rgba(255,255,255,.80);
  color:#475569;
  box-shadow:0 5px 14px rgba(15,23,42,.06);
}
.weapon-type-tab:nth-child(even){
  background:rgba(226,232,240,.48);
}
.weapon-type-tab.is-active{
  border-color:rgba(37,99,235,.58);
  background:linear-gradient(135deg,#2563eb,#4f46e5);
  color:#fff;
  box-shadow:0 8px 18px rgba(37,99,235,.24),inset 0 1px 0 rgba(255,255,255,.22);
}
.weapon-type-count{
  background:rgba(15,23,42,.82);
  color:#fde68a;
}
.weapon-type-note{ color:#64748b; }

/* Name / inputs */
.field-label{ color:#1e3a8a; font-size:.84rem; }
.text-input,.number-input{
  border:1px solid rgba(148,163,184,.32);
  background:rgba(255,255,255,.96);
  color:#111827;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.04);
}
.text-input{ min-height:44px; border-radius:10px; }
.text-input::placeholder,.number-input::placeholder{ color:#94a3b8; }
.text-input:focus,.number-input:focus{
  border-color:#60a5fa;
  background:#fff;
  box-shadow:0 0 0 3px rgba(37,99,235,.13);
}
.edit-state{ color:#64748b; }
.button-subtle{
  border-color:rgba(148,163,184,.32);
  background:rgba(255,255,255,.78);
  color:#334155;
}
.button-subtle:hover{ background:#fff; }

/* Stat / resistance fields with stronger zebra */
.field-grid{ gap:8px; }
.number-field{
  min-height:50px;
  padding:8px 9px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:11px;
  background:rgba(219,234,254,.62);
  box-shadow:0 5px 14px rgba(15,23,42,.05);
}
.field-grid .number-field:nth-child(even){
  background:rgba(255,255,255,.48);
  border-color:rgba(148,163,184,.22);
  box-shadow:none;
}
.field-grid.compact .number-field:nth-child(4n+2),
.field-grid.compact .number-field:nth-child(4n+3){
  background:rgba(254,243,199,.42);
  border-color:rgba(217,155,43,.18);
}
.number-field label{ color:#334155; font-size:.84rem; font-weight:800; }
.field-coef{ color:#1d4ed8; }
.number-input{
  height:36px;
  border-radius:8px;
  font-size:.95rem;
}

/* Result — dark glass hero, like CP total card */
.result-card{
  margin-top:12px;
  padding:18px 15px;
  border:1px solid rgba(147,197,253,.30);
  border-radius:17px;
  background:
    radial-gradient(circle at 75% 10%,rgba(245,186,73,.18),transparent 38%),
    linear-gradient(135deg,rgba(15,31,56,.93),rgba(11,18,32,.90));
  color:#fff;
  box-shadow:0 18px 42px rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.result-card::before{ border-color:rgba(255,255,255,.12); }
.result-label{ color:#dbeafe; font-size:.86rem; }
.result-value{
  margin:3px 0 8px;
  color:#f7c85c;
  font-family:inherit;
  font-size:clamp(3.6rem,18vw,6rem);
  font-weight:950;
  text-shadow:0 0 18px rgba(245,186,73,.28);
}
.breakdown{ border-top-color:rgba(255,255,255,.14); gap:4px; }
.breakdown-row{
  padding:6px 9px;
  border-radius:8px;
  color:rgba(226,232,240,.82);
}
.breakdown-row:nth-child(odd){ background:rgba(255,255,255,.08); }
.breakdown-row:nth-child(even){ background:rgba(255,255,255,.025); }
.breakdown-row strong{ color:#fff; }

/* Actions */
.primary-actions{ gap:8px; }
.button{
  min-height:44px;
  border-radius:11px;
  padding:9px 12px;
  font-weight:900;
}
.button-calc{
  border-color:#93c5fd;
  background:linear-gradient(135deg,#2563eb,#4f46e5);
  box-shadow:0 8px 20px rgba(37,99,235,.24);
}
.button-save{
  border-color:#f5cf7b;
  background:linear-gradient(135deg,#e0a035,#bc7618);
  box-shadow:0 8px 20px rgba(188,118,24,.24);
}
.button-reset{
  border-color:rgba(255,255,255,.22);
  background:linear-gradient(135deg,rgba(30,41,59,.92),rgba(15,23,42,.92));
  color:#f1f5f9;
}

/* Saved list — clear zebra */
.saved-panel{ padding-bottom:12px; }
.saved-list{ gap:7px; }
.empty-state{
  color:#64748b;
  border-color:rgba(148,163,184,.32);
  background:rgba(248,250,252,.64);
}
.saved-item{
  padding:10px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:12px;
  background:rgba(219,234,254,.66);
  color:#111827;
  box-shadow:0 7px 18px rgba(15,23,42,.06);
}
.saved-item:nth-child(even){
  background:rgba(255,255,255,.48);
  border-color:rgba(148,163,184,.22);
  box-shadow:none;
}
.saved-item.is-editing{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.12),0 8px 20px rgba(15,23,42,.08);
}
.saved-rank{
  border-color:rgba(37,99,235,.30);
  background:rgba(37,99,235,.10);
  color:#1d4ed8;
}
.saved-item:nth-child(-n+3) .saved-rank{
  border-color:rgba(217,155,43,.42);
  background:rgba(254,243,199,.82);
  color:#92400e;
}
.saved-name{ color:#0f172a; }
.saved-meta{ color:#64748b; }
.saved-score{ color:#1d4ed8; font-size:1.02rem; }
.saved-actions button{ min-height:36px; border-radius:9px; font-weight:850; }
.load-button{
  background:rgba(219,234,254,.88);
  border-color:rgba(37,99,235,.28);
  color:#1d4ed8;
}
.delete-button{
  background:rgba(254,226,226,.78);
  border-color:rgba(220,38,38,.22);
  color:#b91c1c;
}
.legacy-badge{
  background:rgba(254,243,199,.88);
  border-color:rgba(217,155,43,.30);
  color:#92400e;
}
.saved-meta .sync-note{ color:#1d4ed8; }

/* Pagination */
.saved-pagination{ border-top-color:rgba(148,163,184,.22); }
.page-button{
  min-width:36px;
  min-height:36px;
  border-color:rgba(148,163,184,.30);
  background:rgba(255,255,255,.72);
  color:#334155;
}
.page-button.is-current{
  border-color:#60a5fa;
  background:linear-gradient(135deg,#2563eb,#4f46e5);
  color:#fff;
  box-shadow:0 6px 16px rgba(37,99,235,.22);
}
.pagination-ellipsis{ color:#64748b; }

/* Formula / backup */
.formula-panel summary{ color:#1e3a8a; }
.formula-grid{ gap:6px; }
.formula-grid > div{
  border:1px solid rgba(148,163,184,.16);
  background:rgba(219,234,254,.55);
  color:#334155;
}
.formula-grid > div:nth-child(even){ background:rgba(255,255,255,.42); }
.formula-grid span{ color:#475569; }
.formula-grid strong{ color:#1d4ed8; }
.formula-note,.backup-panel p{ color:#64748b; }
.backup-actions .button-subtle,
.integrated-backup-link{
  background:rgba(239,246,255,.82);
  border-color:rgba(37,99,235,.22);
  color:#1e40af;
}

footer{ color:rgba(226,232,240,.70); padding-top:16px; }

/* Toast / help modal */
.toast{
  border-color:rgba(255,255,255,.20);
  background:rgba(15,23,42,.96);
  color:#fff;
}
.dialog{ color:#111827; }
.dialog::backdrop{ background:rgba(15,23,42,.72); backdrop-filter:blur(4px); }
.dialog-card{
  border:1px solid rgba(148,163,184,.30);
  border-radius:17px;
  background:rgba(248,250,252,.98);
  color:#111827;
  box-shadow:0 24px 60px rgba(0,0,0,.30);
}
.dialog-title-row h2{ color:#111827; }
.icon-button{
  border-color:rgba(148,163,184,.30);
  background:#fff;
  color:#334155;
}

@media (min-width:620px){
  .equip-toolbar-inner{ padding-left:16px; padding-right:16px; }
  .app-shell{ padding-left:16px; padding-right:16px; }
  .field-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .field-grid.compact{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (max-width:520px){
  .equip-hero{ padding-left:9px; padding-right:9px; }
  .equip-hero-top{ justify-content:space-between; flex-wrap:nowrap; }
  .equip-switchbtn{ flex:1 1 0; padding:6px 5px; font-size:.66rem; white-space:nowrap; }
  .equip-hero-logo{ max-height:38px; }
  .equip-hero-copy{ min-height:30px; padding:5px 11px; font-size:13px; }
  .equip-hero-sub{ font-size:10.5px; padding:6px 9px; }
  .app-shell{ padding:8px 8px max(22px,env(safe-area-inset-bottom)); }
  .panel{ padding:12px; border-radius:14px; }
  .integration-note{ padding:9px 10px; }
  .tabs{ gap:4px; padding:5px; border-radius:12px; }
  .tab{ min-height:51px; border-radius:9px; }
  .weapon-type-tabs{ gap:5px; }
  .weapon-type-tab{ min-height:47px; }
  .number-field{ grid-template-columns:minmax(0,1fr) 76px; padding:7px 8px; }
  .number-field label{ font-size:.80rem; }
  .result-card{ padding:16px 12px; }
  .primary-actions{ grid-template-columns:1fr 1fr; }
}

@media (max-width:360px){
  .equip-switchbtn span:last-child{ font-size:.62rem; }
  .equip-switch-icon{ display:none; }
  .equip-toolbar-inner{ padding-left:8px; padding-right:8px; }
  .app-shell{ padding-left:6px; padding-right:6px; }
  .panel{ padding:10px; }
  .field-grid{ gap:6px; }
  .number-field{ grid-template-columns:minmax(0,1fr) 68px; gap:5px; padding:6px; }
}

/* v50.86: only the upper equipment header hides; category tabs stay pinned */
.equip-auto-hideable{
  position:relative;
}
.equip-integration-band .equip-toolbar-inner{
  padding-bottom:0;
}
.equip-tabs-inner{
  padding-top:4px;
  padding-bottom:8px;
}
.equip-tabs-inner .tabs{
  margin:0;
}


/* v50.87: hard boundary between scroll-away upper header and pinned category tabs */
.equip-upper-header{
  position:relative;
  z-index:2;
  width:100%;
}
.equip-integration-band{
  position:relative;
  z-index:2;
  background:linear-gradient(180deg,rgba(9,16,30,.96),rgba(12,19,34,.94));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.equip-integration-band .equip-toolbar-inner{
  padding-top:10px;
  padding-bottom:10px;
}
.equip-integration-band .integration-note{
  margin:0;
}
.equip-tabs-band{
  position:sticky !important;
  top:0 !important;
  z-index:80 !important;
  width:100%;
  transform:none !important;
  background:linear-gradient(180deg,rgba(9,16,30,.99),rgba(12,19,34,.98));
  box-shadow:0 10px 24px rgba(0,0,0,.24);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.equip-tabs-band .equip-toolbar-inner{
  padding-top:6px;
  padding-bottom:7px;
}
.equip-tabs-band .tabs{
  position:relative !important;
  top:auto !important;
  z-index:1 !important;
  margin:0 !important;
}
/* Old v50.85/v50.86 wrapper rules are intentionally neutralized. */
.equip-top-shell,
.equip-auto-hideable{
  position:relative !important;
  transform:none !important;
  transition:none !important;
}
@media (max-width:520px){
  .equip-integration-band .equip-toolbar-inner{ padding:8px 8px; }
  .equip-tabs-band .equip-toolbar-inner{ padding:5px 8px 6px; }
}

/* =========================================================
   v50.89: equipment header — fixed two-stage header
   Upper block hides; equipment category tabs remain pinned.
   ========================================================= */
.equip-fixed-header{
  position:fixed !important;
  inset:0 0 auto 0;
  z-index:90;
  width:100%;
  pointer-events:none;
  --equip-upper-shift:0px;
}
.equip-fixed-header > .equip-upper-header,
.equip-fixed-header > .equip-tabs-band{
  pointer-events:auto;
  transform:translate3d(0,0,0) !important;
  transition:transform .24s cubic-bezier(.22,.72,.2,1);
  will-change:transform;
}
.equip-fixed-header.is-upper-hidden > .equip-upper-header,
.equip-fixed-header.is-upper-hidden > .equip-tabs-band{
  transform:translate3d(0,var(--equip-upper-shift),0) !important;
}
.equip-fixed-header .equip-tabs-band{
  position:relative !important;
  top:auto !important;
  z-index:92;
}
.equip-fixed-header .tabs{
  position:relative !important;
  top:auto !important;
  z-index:1;
}
.equip-header-spacer{
  display:block;
  width:100%;
  height:var(--equip-full-header-h,0px);
  min-height:0;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .equip-fixed-header > .equip-upper-header,
  .equip-fixed-header > .equip-tabs-band{ transition:none; }
}


/* v50.93: shared DB note is body content below category tabs */
.post-tabs-note{
  margin-top:0 !important;
  margin-bottom:12px !important;
}

/* =========================================================
   v50.97: balanced compact density
   Preserve readable type/tap sizes while reducing vertical travel.
   ========================================================= */
.app-shell{
  padding-top:7px;
}
.integration-note{
  padding:8px 10px;
  margin-bottom:9px !important;
  line-height:1.45;
}
.panel,
.result-card{
  margin-top:9px;
}
.panel{
  padding:11px;
  border-radius:14px;
}
.section-heading{
  margin-bottom:8px;
  padding-bottom:7px;
  gap:8px;
}
.section-heading h2,
.backup-panel h2{
  font-size:.98rem;
}
.coefficient-badge,
.saved-summary,
.help-chip{
  padding:4px 7px;
}
.weapon-type-heading{
  margin-bottom:7px;
  padding-bottom:6px;
}
.weapon-type-tabs{
  gap:5px;
}
.weapon-type-tab{
  min-height:44px;
}
.weapon-type-note{
  margin-top:7px;
  line-height:1.45;
}
.field-label{
  margin-bottom:6px;
}
.name-row{
  gap:7px;
}
.text-input{
  min-height:40px;
  padding:0 11px;
}
.edit-state{
  margin-top:5px;
}
.field-grid{
  gap:6px;
}
.number-field{
  min-height:46px;
  padding:6px 8px;
  gap:6px;
  border-radius:10px;
}
.number-field label{
  font-size:.81rem;
}
.number-input{
  height:34px;
  font-size:.93rem;
}
.result-card{
  padding:14px 12px;
  border-radius:15px;
}
.result-value{
  margin:2px 0 6px;
  font-size:clamp(3.15rem,16vw,5rem);
}
.breakdown{
  padding-top:8px;
  gap:3px;
}
.breakdown-row{
  padding:5px 8px;
}
.primary-actions{
  gap:6px;
  margin-top:9px;
}
.button{
  min-height:41px;
  padding:8px 10px;
}
.saved-panel{
  padding-bottom:9px;
}
.saved-heading{
  margin-bottom:7px;
}
.saved-list{
  gap:6px;
}
.saved-item{
  padding:8px 9px;
  gap:7px;
  border-radius:10px;
}
.saved-meta{
  margin-top:2px;
}
.saved-actions{
  gap:6px;
}
.saved-actions button{
  min-height:34px;
  padding:5px 8px;
}
.saved-pagination{
  margin-top:9px;
  padding-top:9px;
}
.page-button{
  min-width:34px;
  min-height:34px;
}
.formula-grid{
  gap:5px;
  margin-top:9px;
}
.formula-grid > div{
  padding:7px 9px;
}
.formula-note{
  margin-top:8px;
  line-height:1.55;
}
.backup-panel{
  gap:9px;
}
.backup-panel p{
  margin-top:5px;
  line-height:1.5;
}
.backup-actions{
  gap:6px;
}
footer{
  padding-top:12px;
}

@media (max-width:520px){
  .app-shell{ padding:6px 7px max(20px,env(safe-area-inset-bottom)); }
  .panel{ padding:10px; }
  .tabs{ padding:4px; }
  .tab{ min-height:48px; }
  .weapon-type-tab{ min-height:43px; }
  .number-field{ grid-template-columns:minmax(0,1fr) 72px; padding:6px 7px; }
  .result-card{ padding:13px 10px; }
}