body {

      background-color: var(--bg-color);

      margin: 0;
      padding: 0;
      font-size: 14px;

    }

    .container {  margin: 0 auto;  }
    h1, h2, h3 {   padding-bottom: 5px;   }

    h3 {    border-bottom: 1px dashed var(--accent-gold); }
    .hidden { display: none !important; }

    body.status-detail-open { overflow: hidden; }
    .status-detail-modal {
      position: fixed;
      inset: 0;
      z-index: 1600;
      display: flex;
      align-items: stretch;
      justify-content: center;
      padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
      background: rgba(7, 12, 22, 0.58);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .status-detail-backdrop {
      position: absolute;
      inset: 0;
    }
    .status-detail-dialog {
      position: relative;
      width: min(100%, 980px);
      max-height: 100%;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid rgba(186, 218, 255, 0.28);
      background: linear-gradient(180deg, rgba(17, 27, 48, 0.94), rgba(10, 16, 30, 0.97));
      box-shadow: 0 28px 80px rgba(0,0,0,.48);
    }
    .status-detail-scroll {
      height: 100%;
      overflow: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;

    }
    .status-detail-inner {
      max-width: 100%;
      margin: 0;
      background: transparent;
      box-shadow: none;
      border: none;
      padding: 0;
    }
    .status-detail-topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;

      position: sticky;
      top: 0;
      z-index: 5;

      background: linear-gradient(180deg, rgba(12, 18, 32, 0.96), rgba(12, 18, 32, 0.78), rgba(12,18,32,0));
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .status-detail-close {
      margin-left: auto;
      white-space: nowrap;
    }
    @media (max-width: 680px) {
      .status-detail-modal {
        padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
      }
      .status-detail-dialog {
        width: 100%;
        max-height: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
      }
      .status-detail-scroll { padding: 12px; }
    }

    /* 入力フォーム */
    input[type="text"], input[type="number"], select {
      background-color: var(--input-bg);

      width: 100%;
      box-sizing: border-box;
    }
    input[type="number"] { text-align: center; }
    .small-input {  display: inline-block !important; }

    /* 検索ボックス用 */
    .search-box {

      position: relative;
    }
    .search-box input {
      padding-left: 30px; /* アイコン分 */
      padding-right: 42px; /* クリアボタン分 */
    }
    .search-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);

    }
    .search-clear-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);

      font-size: 24px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;

    }
    .search-clear-btn:active {
      transform: translateY(-50%) scale(0.95);
    }

    /* 武器種フィルター */

    .weapon-filter-title { font-size: 12px; color:#bbb; text-align:center;  font-weight:bold; }
    .weapon-filter-bar { display:flex; flex-wrap:wrap;   }
    .weapon-btn {
      width: 44px; height: 44px;

      font-weight:bold;
      cursor:pointer;
      font-size: 12px;

      display:flex;
      align-items:center;
      justify-content:center;
      -webkit-tap-highlight-color: transparent;
    }
    .weapon-btn.wide { width: 56px; }

    .weapon-btn:active { transform: scale(0.97); }
    .weapon-btn .mini { font-size: 11px; line-height: 1.05; }

    .weapon-badge {
      padding: 2px 8px;
      border: 1px solid #888;
      border-radius: 999px;
      font-size: 11px;

      margin-top: 4px;
    }

    .form-label { display: block;  font-weight: bold; font-size: 15px; }

    /* ボタン */
    .btn {

      font-size: 16px;
      cursor: pointer;
      text-align: center;

      width: 100%;
      box-sizing: border-box;

    }

    /* フッターナビ */

    /* 一覧画面 */
    .list-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch;  border: 1px solid var(--accent-gold); border-radius: 4px; }

    .list-icon { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid #999; margin-right: 10px; background-color: #000; }
    .pagination { display: flex; justify-content: space-between;  }

    /* 詳細画面 */
    .char-header { display: flex;   background: #222;   border: 1px solid var(--accent-gold); }
    .char-header img {   border-radius: 50%; border: 2px solid var(--accent-gold);  object-fit: cover; }
    .stat-inputs-container {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));

      align-items: start;
    }
    .stat-box {
      text-align: center;
      width: auto;
      min-width: 0;
      display: flex;
      flex-direction: column;

    }
    .stat-box label {
      font-size: 13px;
      font-weight: 800;
      line-height: 1.15;
      display: block;
      margin-bottom: 0;
      color: #374151;
      letter-spacing: .01em;
    }
    .stat-box input {
      width: 100%;
      min-width: 0;

      font-weight: 800;
      line-height: 1.2;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0;
      appearance: textfield;
      -moz-appearance: textfield;
    }
    .stat-box input::-webkit-outer-spin-button,
    .stat-box input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    #currentStatsInputs {
      grid-template-columns: repeat(2, minmax(0, 1fr));

    }
    #currentStatsInputs .stat-box {

      border: 1px solid rgba(148,163,184,.22);
      background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.94));
      box-shadow: 0 10px 24px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.75);
    }
    #currentStatsInputs .stat-box label {

      font-weight: 900;
      text-align: center;
      color: #334155;
      letter-spacing: .02em;
      margin: 0;
    }
    #currentStatsInputs .stepper-row {
      display: grid;

      align-items: center;
    }
    #currentStatsInputs .stepper-btn {
      appearance: none;
      -webkit-appearance: none;
      border: 1px solid rgba(148,163,184,.36);

      min-width: 0;
      padding: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.98));
      color: #0f172a;

      line-height: 1;
      font-weight: 900;
      box-shadow: 0 8px 18px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.7);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      touch-action: manipulation;
    }
    #currentStatsInputs .stepper-btn:active {
      transform: translateY(1px);
      box-shadow: 0 4px 10px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.65);
    }
    #currentStatsInputs .stepper-btn.minus-btn {
      color: #1e3a8a;
    }
    #currentStatsInputs .stepper-btn.plus-btn {
      color: #166534;
    }
    #currentStatsInputs input {
      text-align: center;

      border: 1px solid rgba(148,163,184,.32);
      background: rgba(255,255,255,.98);
      color: #0f172a;
      box-shadow: inset 0 1px 2px rgba(15,23,42,.05);
    }

    /* 詳細テーブル */
    .table-scroll { overflow-x: auto; margin-top: 25px; }
    .stat-table {  border-collapse: separate; border-spacing: 0; font-size: 16px; white-space: nowrap;   overflow: hidden; }
    .stat-table th, .stat-table td { border: 1px solid #555; padding: 12px 6px; text-align: center; }
    .stat-table th { background-color: #444;  font-weight: bold;  font-size: 14px; }

    .row-max { background-color: #2a2a2a;  font-size: 13px; }
    .row-max td { color: #888;  }
    .row-limit { background-color: #222; font-weight: bold; }

    .val-positive { color: var(--positive); font-weight: bold; }
    .val-negative { color: var(--negative); font-weight: bold; }
    .val-zero { color: var(--capped); font-weight: normal; }
    .val-target { color: #666; font-size: 13px; }

    .style-icon-sm { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--accent-gold); vertical-align: middle; object-fit: cover; background: #000; }

    /* スタイルON/OFF（詳細の表の下） */
    .style-toggle-panel {

      background: rgba(0,0,0,0.25);
      border: 1px dashed #666;

    }
    .style-toggle-title {
      font-size: 12px;
      color: #bbb;
      font-weight: bold;
      text-align: center;

    }
    .style-toggle-bar {
      display: flex;
      flex-wrap: wrap;

      justify-content: center;
    }
    .toggle-wrap {
      position: relative;
      width: 56px;
      height: 56px;
      cursor: pointer;
      border-radius: 50%;
    }
    .toggle-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: 2px solid var(--accent-gold);
      object-fit: cover;
      background: #000;
      display: block;
      transition: opacity .15s ease, transform .05s ease;
    }
    .toggle-wrap:active .toggle-icon { transform: scale(0.98); }
    .toggle-icon.off {
      opacity: 0.35;
      filter: grayscale(0.7);
      border-style: dashed;
    }
    .toggle-badge {
      position: absolute;
      right: -6px;
      bottom: -6px;

      border: 1px solid #888;

      font-size: 10px;
      padding: 2px 6px;
      border-radius: 999px;
      font-weight: bold;
      display: none;
    }
    .toggle-wrap.off .toggle-badge { display: block; }

    /* 管理画面 */
    .manage-section { background-color: var(--panel-bg);    border: 1px solid #666; }
    .upload-area { border: 2px dashed #666;  text-align: center;  border-radius: 8px; cursor: pointer;  }
    .preview-img {   border-radius: 50%; object-fit: cover; display: none;  border: 2px solid var(--accent-gold); background:#000; }

    .manage-style-item { display: flex; align-items: center; justify-content: space-between;    }
    .manage-style-info { display: flex; align-items: center; }
    .manage-style-actions { display: flex;  }

  /* Collapsible (backup/import) */
  details.collapsible { margin: 0; }
  details.collapsible > summary.collapsible-summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 0 0 6px 0;
    margin: 0;
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  details.collapsible > summary.collapsible-summary::-webkit-details-marker { display: none; }
  details.collapsible > summary.collapsible-summary .title {
    display: block;

    border-bottom: 1px solid var(--accent-gold);
    padding-bottom: 5px;
    margin-top: 0;
    text-align: center;
    font-weight: bold;
  }
  details.collapsible > summary.collapsible-summary::after {
    content: "▼";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;

  }
  details.collapsible[open] > summary.collapsible-summary::after {
    transform: translateY(-50%) rotate(180deg);
  }
  .collapsible-body { margin-top: 10px; }

/* === App background image (v50.18) === */
:root{
  --app-bg-url: url("./assets/app_bg.webp");
  --app-bg-overlay: rgba(11, 18, 32, 0.62);
}
html, body{
  background: var(--app-bg-url) center/cover fixed no-repeat;
}
/* Overlay for readability */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background: var(--app-bg-overlay);
  pointer-events: none;
  z-index: -1;
}
/* Ensure content sits above overlay */
body{
  position: relative;
  z-index: 0;
}

    /* 横スクロール端フェード（全エリア共通） */
    .xfadeWrap{ position:relative; }
    .xfadeWrap::before, .xfadeWrap::after{
      content:"";
      position:absolute;
      top:0; bottom:0;
      width:22px;
      pointer-events:none;
      opacity:0;
      transition: opacity .15s ease;
      z-index:30;
    }
    .xfadeWrap::before{
      left:0;
      background: linear-gradient(to right, var(--xfade-edge), rgba(0,0,0,0));
    }
    .xfadeWrap::after{
      right:0;
      background: linear-gradient(to left, var(--xfade-edge), rgba(0,0,0,0));
    }
    .xfadeWrap.showL::before{ opacity:1; }
    .xfadeWrap.showR::after{ opacity:1; }

/* === Status page redesign: align with CP simulator look === */
:root {
  --bg-color: #eef4ff;
  --panel-bg: rgba(255,255,255,0.88);
  --text-color: #111827;
  --accent-gold: #2563eb;
  --input-bg: rgba(255,255,255,0.96);
  --positive: #2563eb;
  --negative: #dc2626;
  --capped: #6b7280;
  --header-bg: rgba(37,99,235,0.10);
  --btn-grad-start: #2563eb;
  --btn-grad-end: #4f46e5;
  --xfade-edge: rgba(243,244,246,0.94);
  --card-border: rgba(255,255,255,0.24);
  --soft-border: rgba(148,163,184,0.24);
  --soft-shadow: 0 16px 44px rgba(15,23,42,0.18);
  --muted: #64748b;
}

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", sans-serif;
  color: var(--text-color);
  padding-bottom: calc(22px + env(safe-area-inset-bottom));
}

.container {
  max-width: 980px;

}

.status-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;
}
.status-top-shell.is-header-hidden {
  transform: translate3d(0, var(--auto-header-shift), 0);
}
@media (prefers-reduced-motion: reduce) {
  .status-top-shell { transition: none; }
}
.status-header {
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  overflow: hidden;
  isolation: isolate;
}
.status-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8,15,30,.26);
  pointer-events: none;
}
.status-hero {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 12px 12px 14px;
}
.status-header {
  will-change: transform;
}
.status-hero-hideable {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  max-height: var(--status-hideable-h, 320px);
  opacity: 1;
  transform: translateY(0);
  transition: max-height .22s cubic-bezier(.22,.72,.2,1), opacity .16s ease, transform .22s cubic-bezier(.22,.72,.2,1);
  will-change: max-height, opacity, transform;
}
.status-hero-top {
  display: flex;
  justify-content: flex-end;
}
.status-switchbtn {
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(0,0,0,.18);
  color: #fff;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.status-switchbtn:active { transform: translateY(1px); }
.status-hero-brand {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.status-hero-copy {
  display: inline-block;
  width: fit-content;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f0ab63, #d8842a);
  border: 1px solid #f4c38c;
  box-shadow: 0 10px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow:
    -0.6px 0 0 rgba(0,0,0,.68),
     0.6px 0 0 rgba(0,0,0,.68),
     0 -0.6px 0 rgba(0,0,0,.68),
     0  0.6px 0 rgba(0,0,0,.68);
  -webkit-text-stroke: 0.45px rgba(0,0,0,.68);
  paint-order: stroke fill;
}
.status-hero-sub {
  display: inline-block;
  width: fit-content;
  color: #1f1f1f;
  font-size: 12px;
  line-height: 1.65;
  max-width: min(92vw, 620px);
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #efd86b, #d5b740);
  border: 1px solid #f4e39b;
  box-shadow: 0 10px 24px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow: none;
  -webkit-text-stroke: 0;
  paint-order: normal;
}

.status-toolbar-band{
  position: relative;
  background: linear-gradient(180deg, rgba(11,18,32,.92), rgba(20,30,52,.88));
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  --xfade-edge: rgba(0,0,0,.62);
}
.status-toolbar-band::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  pointer-events:none;
}
.status-toolbar-inner{
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 6px 12px 10px;
}
.status-toolbar-wrap{
  margin-top: 0;
  position: relative;
}
.status-toolbar{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  padding: 4px 0 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
.status-toolbar::-webkit-scrollbar{ display:none; }
.status-toolbtn{
  flex:0 0 auto;
  min-width: 92px;
  min-height: 78px;
  border:1px solid rgba(255,255,255,.34);
  background: rgba(0,0,0,.18);
  color:#fff;
  border-radius: 14px;
  padding: 10px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
  font-weight:900;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
}
.status-toolbtn .ico{
  font-size: 20px;
  line-height: 1;
}
.status-toolbtn .txt{
  font-size: 11px;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
  line-break: strict;
  letter-spacing: .01em;
}
.status-toolbtn:hover{
  box-shadow: 0 12px 26px rgba(0,0,0,.20);
}
.status-toolbtn:active{
  transform: translateY(1px);
}
.status-toolbtn.active{
  background: rgba(255,255,255,.24);
  border-color: rgba(255,255,255,.56);
  box-shadow: 0 14px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.18);
}
@media (max-width: 420px){
  .status-toolbtn{
    min-width: 86px;
    min-height: 74px;
    padding: 9px 7px;
  }
  .status-toolbtn .txt{
    font-size: 10.5px;
  }
}

h1, h2, h3 {
  color: var(--text-color);
  border-bottom: 1px solid rgba(148,163,184,.22);
  text-align: left;
  margin-top: 0;
}
h1 { font-size: 1.35rem; font-weight: 900; }
h2 { font-size: 1.22rem; margin-bottom: 14px; }
h3 { font-size: 1.02rem; margin-top: 0; margin-bottom: 12px; }

.pagehead {
  display: flex;
  justify-content: space-between;

  flex-wrap: wrap;
}
.pagehead > div:last-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--soft-border);

  box-shadow: 0 8px 22px rgba(15,23,42,.10);
}
.pagehead label {
  color: var(--muted);
  font-weight: 700;
}

input[type="text"], input[type="number"], select {
  background: var(--input-bg);
  border: 1px solid rgba(148,163,184,.28);
  color: var(--text-color);
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 15px;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
}
input[type="text"]:focus, input[type="number"]:focus, select:focus {
  outline: none;
  border-color: rgba(37,99,235,.52);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.small-input {
  width: 76px !important;
  border-radius: 10px;
}

.search-icon {
  color: #2563eb;
}
.search-clear-btn {
  color: #64748b;
}
.search-clear-btn:hover {
  color: #2563eb;
}

.weapon-filter-title,
.style-toggle-title,
#styleToggleHint,
#backupStatus,
.muted,
.val-target,
.row-max td,
#view-detail > div[style*="text-align:center; margin-top:20px;"] {
  color: var(--muted) !important;
}
.weapon-filter-bar {

  justify-content: flex-start;
}
.weapon-btn {
  border: 1px solid rgba(148,163,184,.24);
  background: rgba(255,255,255,.82);
  color: var(--text-color);

  box-shadow: 0 8px 20px rgba(15,23,42,.10);
}
.weapon-btn.active {
  background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(79,70,229,.12));
  color: #1d4ed8;
  border-color: rgba(37,99,235,.34);
  box-shadow: 0 12px 30px rgba(37,99,235,.18);
}
.weapon-badge {
  border-color: rgba(148,163,184,.24);
  color: var(--muted);
  background: rgba(255,255,255,.82);
}

.btn {

  font-weight: 800;

}
.btn:active { transform: translateY(1px); }
.btn-small {
  width: auto;

}

.manage-section,
.char-header,
.style-toggle-panel,
.list-wrapper,
.table-scroll,
#view-detail > div[style*="background-color: var(--panel-bg)"],
.pagehead,
.search-box,
.weapon-filter,
.pagination {
  background: var(--panel-bg);
  border: 1px solid var(--soft-border);
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.search-box,
.weapon-filter,
.pagination,
.pagehead {
  padding: 14px;
}
.manage-section,
.char-header,
.style-toggle-panel,
#view-detail > div[style*="background-color: var(--panel-bg)"] {
  padding: 16px;
}
.list-wrapper,
.table-scroll { overflow: hidden; }
.char-header {

  align-items: center;
}
.char-header img,
.list-icon,
.style-icon-sm,
.toggle-icon,
.preview-img {
  border-color: rgba(37,99,235,.34);
  background: rgba(255,255,255,.95);
  box-shadow: 0 8px 22px rgba(15,23,42,.14);
}
.char-header img { margin-right: 0; }

.stat-table{
  width: 100%;
  background: transparent;
}
.stat-table th{

  border-bottom: 1px solid rgba(37,99,235,.16);
}
.stat-table td{
  color: var(--text-color);
  border-color: rgba(148,163,184,.18);
}

.stat-table {
  border: 0;
  border-radius: 0;
}
.row-max {
  background: rgba(148,163,184,.10);
  font-weight: 700;
}
.row-max td {
  border-bottom: 1px solid rgba(148,163,184,.22);
}
.row-limit {
  background: rgba(37,99,235,.06);
}
.row-limit td {
  border-top: 1px solid rgba(37,99,235,.20);
}

.manage-style-list {
  border-top: 1px solid rgba(148,163,184,.20);
}
.manage-style-item {
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(148,163,184,.16);

}
.upload-area {
  border-color: rgba(37,99,235,.28);
  background: rgba(255,255,255,.72);
}
#view-manage-tab > .manage-section:nth-of-type(2) div[style*="background:rgba(0,0,0,0.3)"] {
  background: rgba(248,250,252,.84) !important;
  border-color: rgba(148,163,184,.24) !important;
}
.toggle-badge {
  background: rgba(255,255,255,.92);
  border-color: rgba(148,163,184,.24);
  color: #dc2626;
}

.details.collapsible,
details.collapsible {
  margin: 0;
}
details.collapsible > summary.collapsible-summary .title {
  color: var(--text-color);
  border-bottom-color: rgba(148,163,184,.22);
}
details.collapsible > summary.collapsible-summary::after {
  color: var(--muted);
}

#detailName { color: var(--text-color) !important; }
#pageInfo { color: var(--muted) !important; }
#view-manage-tab .form-label { color: var(--text-color); }
#view-manage-tab .form-group > label.form-label[style*="font-size:12px"] { color: var(--muted) !important; }

@media (min-width: 560px) {
  .stat-inputs-container{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .stat-box input{
    font-size: 17px;
    padding: 11px 6px;
  }
  #currentStatsInputs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  #currentStatsInputs .stat-box {
    padding: 10px 8px;
    border-radius: 16px;
  }
  #currentStatsInputs .stepper-row {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 6px;
  }
  #currentStatsInputs .stepper-btn {
    height: 44px;
    font-size: 26px;
    border-radius: 13px;
  }
  #currentStatsInputs input {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  body { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  .status-hero-copy { font-size: 15px; letter-spacing: .14em; padding: 8px 14px; }
  .status-hero-sub { font-size: 12px; line-height: 1.65; padding: 8px 12px; border-radius: 12px; }
  .container { padding: 10px; }
  .pagehead,
  .search-box,
  .weapon-filter,
  .pagination,
  .manage-section,
  .char-header,
  .style-toggle-panel,
  #view-detail > div[style*="background-color: var(--panel-bg)"] {
    padding: 12px;
  }
  .pagehead > div:last-child {
    width: 100%;
    justify-content: flex-start;
  }
  .weapon-filter-bar {
    justify-content: center;
  }
}

/* === v50_47b: status UI closer to CP (buttons + headings) === */
.pagehead{
  align-items:center;

}
.pagehead > div:last-child{
  border-radius: 16px;

}

.btn, .status-switchbtn, .weapon-btn, .search-clear-btn{
  position: relative;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
}
.btn:hover, .status-switchbtn:hover, .weapon-btn:hover, .search-clear-btn:hover{
  box-shadow: 0 14px 28px rgba(15,23,42,.14);
}
.btn:active, .status-switchbtn:active, .weapon-btn:active, .search-clear-btn:active{
  transform: translateY(1px);
}

.btn{
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  color: var(--text-color);
  box-shadow: 0 10px 24px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.8);
  margin-bottom: 10px;
}
.btn-primary{
  background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
  color: #fff;
  border-color: rgba(37,99,235,.28);
  box-shadow: 0 12px 30px rgba(37,99,235,.22);
}
.btn-secondary{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  color: var(--text-color);
  border: 1px solid var(--soft-border);
  box-shadow: 0 10px 24px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.82);
}
.btn-edit{
  background: linear-gradient(135deg, #16a34a, #15803d);
  color:#fff;
  border-color: rgba(21,128,61,.24);
  box-shadow: 0 12px 28px rgba(22,163,74,.22);
}
.btn-delete{
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color:#fff;
  border-color: rgba(220,38,38,.24);
  box-shadow: 0 12px 28px rgba(220,38,38,.20);
}
.btn-small{
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  margin: 0;
}
.status-switchbtn{
  min-height: 42px;
  border-radius: 12px;
  padding: 10px 12px;
}
.weapon-btn{
  min-height: 38px;
  border-radius: 12px;
  padding: 8px 12px;
}
.search-clear-btn{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.20);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  box-shadow: 0 8px 20px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.82);
}

.pagehead h1,
.manage-section h3,
.style-toggle-title,
.weapon-filter-title,
.collapsible-summary .title,
#detailName,
.detail-section-title{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  min-height: 48px;
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(79,70,229,.08));
  box-shadow: 0 12px 30px rgba(37,99,235,.10), inset 0 1px 0 rgba(255,255,255,.62);
  color: #1d4ed8;
  letter-spacing: .02em;
}
.pagehead h1::before,
.manage-section h3::before,
.style-toggle-title::before,
.weapon-filter-title::before,
.collapsible-summary .title::before,
#detailName::before,
.detail-section-title::before{
  content: "";
  width: 6px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2563eb, #4f46e5);
  box-shadow: 0 0 0 1px rgba(255,255,255,.45);
}
.pagehead h1{ font-size: 1.2rem; }
.manage-section h3,
.style-toggle-title,
.weapon-filter-title,
.collapsible-summary .title,
.detail-section-title{
  font-size: 1rem;
  font-weight: 900;
}

.weapon-filter-title,
.style-toggle-title,
.collapsible-summary .title{ width: fit-content; }
#detailName{
  border: none !important;
  font-size: 1.35rem !important;
  line-height: 1.2;
}
.detail-current-card{

  border-radius: 16px !important;
  border: 1px solid var(--soft-border) !important;
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.detail-current-card .detail-section-title{
  margin-bottom: 12px;
}

.stat-table th{
  padding-top: 13px;
  padding-bottom: 13px;
  background: linear-gradient(180deg, rgba(37,99,235,.12), rgba(79,70,229,.08));
  color: #1d4ed8;
}
.stat-table th:first-child{ border-top-left-radius: 12px; }
.stat-table th:last-child{ border-top-right-radius: 12px; }

@media (max-width: 640px) {
  .pagehead h1,
  .manage-section h3,
  .style-toggle-title,
  .weapon-filter-title,
  .collapsible-summary .title,
  #detailName,
  .detail-section-title{
    min-height: 44px;
    padding: 9px 12px;
  }
  .pagehead > div:last-child{
    min-height: 48px;
  }
}

/* ===== キャラ詳細モーダル：縦幅コンパクト化 ===== */
.status-detail-scroll{
  padding: 8px;
}
.status-detail-topbar{
  gap: 8px;
  margin-bottom: 8px;
  padding: 2px 0 6px;
}
.status-detail-topbar .btn-small{
  min-height: 40px;
  padding: 7px 10px;
}
.status-detail-inner .char-header{
  gap: 10px;
  padding: 9px 10px;
  margin-bottom: 10px;
  border-radius: 14px;
}
.status-detail-inner .char-header img{
  width: 54px;
  height: 54px;
}
.status-detail-inner #detailName{
  min-height: 38px !important;
  padding: 6px 10px;
  font-size: 1.18rem !important;
}
.status-detail-inner #detailName::before{
  width: 5px;
  height: 18px;
}
.status-detail-inner .detail-current-card{
  padding: 10px !important;
  margin-bottom: 10px !important;
  border-radius: 14px !important;
}
.status-detail-inner .detail-current-card .detail-section-title{
  min-height: 38px;
  padding: 6px 10px;
  margin-bottom: 8px;
  font-size: .95rem;
}
.status-detail-inner .detail-current-card .detail-section-title::before{
  width: 5px;
  height: 18px;
}

#currentStatsInputs .stat-box{
  gap: 4px;
  padding: 6px;
  border-radius: 14px;
}
#currentStatsInputs .stat-box label{
  font-size: 12px;
  line-height: 1;
}
#currentStatsInputs .stepper-row{
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 5px;
}
#currentStatsInputs .stepper-btn{
  height: 38px;
  border-radius: 11px;
  font-size: 22px;
}
#currentStatsInputs input{
  height: 38px;
  min-height: 38px;
  padding: 5px 4px;
  border-radius: 11px;
  font-size: 16px;
}
.status-detail-inner .detail-current-card > .btn{
  min-height: 42px;
  padding: 9px 12px;
  margin-top: 8px !important;
  margin-bottom: 0;
}
.status-detail-inner .table-scroll{
  margin-top: 10px;
}
.status-detail-inner .stat-table th{
  padding: 8px 4px;
  font-size: 13px;
}
.status-detail-inner .stat-table td{
  padding: 6px 4px;
  font-size: 14px;
}
.status-detail-inner .style-icon-sm{
  width: 40px;
  height: 40px;
  border-width: 1px;
}
.status-detail-inner .style-toggle-panel{
  margin-top: 8px;
  padding: 8px;
}
.status-detail-inner .style-toggle-title{
  min-height: 36px;
  padding: 6px 10px;
  margin-bottom: 6px;
}
.status-detail-inner > div[style*="text-align:center"]{
  margin-top: 10px !important;
}

@media (max-width: 640px){
  .status-detail-scroll{ padding: 8px; }
  .status-detail-inner .char-header{ padding: 8px 9px; }
  .status-detail-inner .char-header img{ width: 50px; height: 50px; }
  #currentStatsInputs{ gap: 7px; }
  #currentStatsInputs .stat-box{ padding: 5px; }
  #currentStatsInputs .stepper-row{
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 4px;
  }
  #currentStatsInputs .stepper-btn{
    height: 36px;
    font-size: 21px;
  }
  #currentStatsInputs input{
    height: 36px;
    min-height: 36px;
    font-size: 15px;
  }
  .status-detail-inner .stat-table th{ padding: 7px 3px; }
  .status-detail-inner .stat-table td{ padding: 5px 3px; }
  .status-detail-inner .style-icon-sm{ width: 38px; height: 38px; }
}

/* v50.61: cross-app character linkage */
.character-link-note{
  margin-top:8px;
  color:#b7c4d8;
  font-size:12px;
  line-height:1.55;
}
.character-link-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:15px;
}
@media (max-width:520px){
  .character-link-actions .btn{ width:100%; }
}

/* v50.64: status master data + CP style profile + resistances */
.character-master-panel{
  margin:0 0 18px;

  border:1px solid rgba(37,99,235,.28);

  background:rgba(239,246,255,.82);
}
.character-master-title{

  color:#1e3a8a;
  font-weight:900;
}
.character-master-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);

}

.new-character-master-grid{ margin-bottom:4px; }

.status-hp-tracker{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr) minmax(0,.75fr);

}
.status-hp-tracker > label,
.status-hp-tracker > div{
  min-width:0;

  border:1px solid rgba(148,163,184,.25);
  border-radius:11px;
  background:rgba(255,255,255,.75);
}
.status-hp-tracker label,
.status-hp-tracker span{
  display:block;
  color:#64748b;
  font-size:11px;
  font-weight:700;
}
.status-hp-tracker input{
  width:100%;

  padding:5px 7px;
  font-size:16px;
}
.status-hp-tracker strong{
  display:block;

  color:#0f172a;

}
.detail-subtitle{

  color:#475569;
  font-size:12px;
  font-weight:800;
}

.style-cp-fields{
  margin:0 0 15px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:12px;
  background:rgba(255,255,255,.7);
  overflow:hidden;
}
.style-cp-fields > summary{
  cursor:pointer;

  color:#1e3a8a;
  font-weight:900;
  list-style:none;
}
.style-cp-fields > summary::-webkit-details-marker{ display:none; }
.style-cp-fields > summary::after{ content:"＋"; float:right; }
.style-cp-fields[open] > summary::after{ content:"−"; }
.style-cp-note{
  margin:0 12px 10px;
  color:#64748b;
  font-size:11px;
  line-height:1.5;
}

.style-cp-section + .style-cp-section{ padding-top:4px; border-top:1px solid rgba(148,163,184,.18); }
.manage-style-item{
  gap:10px;

  border:1px solid transparent;
}

.manage-style-info{ min-width:0; flex:1; }
.manage-style-thumb{

  flex:0 0 46px;

  border:1px solid #94a3b8;
  border-radius:50%;
  object-fit:cover;
  background:#000;
}
.manage-style-copy{ min-width:0; }
.manage-style-name{
  margin-bottom:3px;
  color:#0f172a;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.manage-style-mods{ color:#64748b; font-size:11px; line-height:1.45; }
.manage-style-badges{ display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.cp-field-badge{
  display:inline-flex;
  align-items:center;
  min-height:21px;
  padding:2px 7px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:999px;
  background:#f8fafc;
  color:#64748b;
  font-size:10px;
  font-weight:800;
}
.cp-field-badge.partial{ color:#a16207; background:#fefce8; border-color:#fde68a; }
.cp-field-badge.complete{ color:#166534; background:#f0fdf4; border-color:#bbf7d0; }

.manage-style-actions{
  flex:0 0 auto;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.manage-style-actions .btn{ margin:0; }

@media (max-width:640px){
  .character-master-grid{ grid-template-columns:1fr; gap:0; }
  .status-hp-tracker{ grid-template-columns:1.2fr .8fr .8fr; gap:5px; }
  .status-hp-tracker > label,
  .status-hp-tracker > div{ padding:6px; }
  .manage-style-item{ align-items:stretch; flex-direction:column; }
  .manage-style-actions{ display:grid;  width:100%; }
  .manage-style-actions .btn{ width:100%; padding:8px 4px; }
  .style-cp-fields .stat-inputs-container{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.toggle-wrap.cp-style{ box-shadow:0 0 0 3px rgba(37,99,235,.35); }
.toggle-cp-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:25px;
  padding:2px 5px;
  border-radius:999px;
  border:1px solid #bfdbfe;
  background:#2563eb;
  color:#fff;
  font-size:9px;
  font-weight:900;
  text-align:center;
}

/* v50.64: style resistance inputs */
.resist-inputs-container .stat-box label{ color:#7c2d12; }
.resist-inputs-container input{ text-align:center; }

/* v50.72: status management is the character master */
.cp-character-check{display:flex;align-items:center;gap:10px;margin:10px 0 14px;border:1px solid rgba(246,190,69,.7);border-radius:10px;background:rgba(246,190,69,.10);font-weight:800;cursor:pointer;}
.cp-character-check input{width:20px;height:20px;accent-color:#d9a329;flex:0 0 auto}
.cp-target-list-badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:20px;padding:0 6px;margin-left:6px;border-radius:999px;background:#d9a329;color:#161616;font-size:10px;font-weight:900;line-height:1;vertical-align:middle}

/* v50.73: style-character picker with sort + CP image */
.manage-char-toolbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:10px;
}
.manage-char-sort{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid rgba(37,99,235,.22);
  border-radius:10px;
  background:rgba(255,255,255,.82);
  color:#475569;
  font-size:12px;
  font-weight:800;
}
.manage-char-sort select{
  min-width:140px;
  border:1px solid rgba(148,163,184,.42);
  border-radius:9px;
  background:#fff;
  color:#0f172a;
  font-size:13px;
  font-weight:800;
}

.manage-char-hidden-select{
  display:none !important;
}

body.manage-char-picker-open{
  overflow:hidden;
  overscroll-behavior:none;
}

.manage-char-picker-list, .manage-char-option, .manage-char-sort, .manage-char-sort select{
  box-sizing:border-box;
  min-width:0;
}
.manage-char-picker-list,
.manage-char-option{
  width:100%;
  max-width:100%;
}

.manage-char-picker-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
  padding-right:2px;
}
.manage-char-picker-empty{
  padding:28px 12px;
  color:#64748b;
  text-align:center;
  font-size:13px;
}
.manage-char-option{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:11px 12px;
  border:1px solid rgba(148,163,184,.32);
  border-radius:16px;
  background:#fff;
  text-align:left;
  cursor:pointer;
}
.manage-char-option.selected{
  border-color:rgba(37,99,235,.58);
  box-shadow:0 0 0 3px rgba(37,99,235,.14);
  background:rgba(239,246,255,.92);
}
.manage-char-option-thumb{
  width:52px;
  height:52px;
  flex:0 0 52px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #94a3b8;
  background:#0f172a;
}
.manage-char-option-copy{ min-width:0; flex:1; }
.manage-char-option-name{
  color:#0f172a;
  font-size:14px;
  font-weight:900;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.manage-char-option-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:5px;
}
.manage-char-chip{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:2px 8px;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:10px;
  font-weight:900;
}
.manage-char-chip.cp-on{
  background:#fef3c7;
  color:#92400e;
}
.manage-char-chip.cp-off{
  background:#e2e8f0;
  color:#475569;
}
@media (max-width:640px){
  .manage-char-toolbar{ justify-content:stretch; }
  .manage-char-sort{
    display:grid;
    grid-template-columns:60px minmax(0,1fr);
    width:100%;
  }

}

/* v50.75: viewport-height character picker (avoid clipping by filtered parent) */

.manage-char-picker-list{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
@media (min-width:641px){

}

/* v50.76: compact mobile header (about two-thirds of the former height) */
@media (max-width: 680px) {
  .status-hero {
    padding: 6px 9px 7px;
  }
  .status-hero-hideable {
    gap: 4px;
  }
  .status-hero-top {
    min-height: 0;
  }
  .status-switchbtn {
    gap: 5px;
    padding: 5px 9px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1;
  }
  .status-hero-brand {
    margin-top: 1px;
    gap: 2px;
  }
  .status-hero-copy {
    font-size: 12px;
    line-height: 1.05;
    letter-spacing: .11em;
    padding: 5px 10px;
    border-radius: 10px;
  }
  .status-hero-sub {
    max-width: min(94vw, 620px);
    margin-top: 1px;
    padding: 5px 8px;
    border-radius: 9px;
    font-size: 10.5px;
    line-height: 1.3;
  }
  .status-toolbar-inner {
    padding: 3px 8px 5px;
  }
  .status-toolbar {
    gap: 6px;
    padding: 2px 0 3px;
  }
  .status-toolbtn {
    min-width: 80px;
    min-height: 54px;
    padding: 5px 6px;
    gap: 3px;
    border-radius: 11px;
  }
  .status-toolbtn .ico {
    font-size: 16px;
  }
  .status-toolbtn .txt {
    font-size: 9.5px;
    line-height: 1.05;
  }
}

/* v50.83: compact direct navigation to CP / equipment */
.status-hero-top{
  gap:6px;
  flex-wrap:nowrap;
}
.status-switchbtn-equip{
  border-color:rgba(246,190,69,.58);
  background:rgba(121,82,18,.24);
}
@media (max-width:420px){
  .status-hero-top{ gap:5px; }
  .status-switchbtn{
    padding-left:7px;
    padding-right:7px;
    font-size:10px;
  }
}

/* v50.94: common BASE returned to list header */

.status-base-panel label{
  color:#475569 !important;
  font-size:12px !important;
  font-weight:800 !important;
  white-space:nowrap;
}

@media(max-width:520px){
  .pagehead{ align-items:center !important; }
  .status-base-panel{ width:auto !important; }
  .status-base-panel label{ font-size:11.5px !important; }
  .status-base-panel .small-input{ width:64px !important; min-width:64px !important; }
}

/* =========================================================
   v50.97: balanced compact density
   Reference-card density is the visual benchmark.
   ========================================================= */
.container{
  padding:9px;
}
.pagehead{
  gap:10px;
  margin-bottom:10px;
}
.pagehead,
.search-box,
.weapon-filter,
.pagination{
  padding:10px 11px;
  border-radius:14px;
}
.pagehead > div:last-child{
  min-height:44px;
  padding:7px 9px;
}
.search-box{
  margin-bottom:10px;
}
.weapon-filter{
  margin-bottom:10px;
}
.weapon-filter-title{
  margin:3px 0 6px;
}
.weapon-filter-bar{
  gap:6px;
}
.pagination{
  margin-top:12px;
}
.list-wrapper{
  margin-top:7px;
}
.manage-section{
  padding:12px;
  margin-bottom:16px;
  border-radius:14px;
}
.manage-section h3{
  margin-bottom:10px;
}
.form-group{
  margin-bottom:14px;
}
.form-label{
  margin-bottom:6px;
}
.upload-area{
  padding:14px;
  margin-bottom:14px;
}
.preview-img{
  width:68px;
  height:68px;
  margin:7px auto;
}
.manage-style-list{
  margin-bottom:13px;
}
.manage-style-item{
  padding:8px;
  margin-bottom:6px;
  border-radius:10px;
}
.manage-style-thumb{
  width:42px;
  height:42px;
  flex-basis:42px;
  margin-right:8px;
}
.character-master-panel{
  margin-bottom:12px;
  padding:11px;
  border-radius:12px;
}
.character-master-title{
  margin-bottom:8px;
}
.character-master-grid{
  gap:7px;
}
.character-master-grid .form-group{
  margin-bottom:7px;
}

.status-hp-tracker{
  gap:6px;
  margin-bottom:8px;
}
.status-hp-tracker > label,
.status-hp-tracker > div{
  padding:6px;
}
.status-hp-tracker input{
  min-height:33px;
  margin-top:3px;
}
.status-hp-tracker strong{
  margin-top:6px;
  font-size:16px;
}
.stat-inputs-container{
  gap:8px;
}
.stat-box{
  gap:4px;
}
.stat-box input{
  padding:9px 6px;
  font-size:17px;
}
#currentStatsInputs{
  gap:10px 9px;
}
.style-toggle-panel{
  margin-top:9px;
  padding:9px;
  border-radius:10px;
}
.style-toggle-title{
  margin-bottom:7px;
}
.style-toggle-bar{
  gap:8px;
}
.toggle-wrap,
.toggle-icon{
  width:50px;
  height:50px;
}
.char-header{
  gap:10px;
  padding:10px 11px;
  margin-bottom:11px;
  border-radius:13px;
}
.char-header img{
  width:58px;
  height:58px;
}
.detail-current-card{
  padding:11px !important;
  margin-bottom:12px !important;
}
.detail-subtitle{
  margin:6px 0 5px;
}
.style-cp-fields{
  margin-bottom:11px;
}
.style-cp-fields > summary{
  padding:9px 11px;
}
.style-cp-section{
  padding:0 9px 9px;
}
.cp-character-check{
  margin-bottom:10px;
  padding:8px 10px;
}

@media (max-width:640px){
  .container{ padding:8px; }
  .pagehead,
  .search-box,
  .weapon-filter,
  .pagination{ padding:9px 10px; }
  .manage-section{ padding:10px; margin-bottom:13px; }
  .form-group{ margin-bottom:12px; }

  .manage-char-option{ padding:8px; gap:9px; }
  .manage-char-option-thumb{ width:42px; height:42px; flex-basis:42px; }
  .character-master-panel{ padding:10px; }
  .stat-inputs-container{ gap:7px; }
}

/* v51.02: simulator image is managed only in Style Add / Confirm.
   Existing round style icons remain unchanged across Status Management. */
.character-image-master{
  margin:0 0 12px;
  padding:0;
  border:1px solid rgba(37,99,235,.22);
  border-radius:12px;
  background:rgba(255,255,255,.72);
  overflow:hidden;
}
.character-image-master-summary{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:9px 11px;
  cursor:pointer;
  color:#1d4ed8;
  font-size:12px;
  font-weight:900;
  list-style:none;
}
.character-image-master-summary::-webkit-details-marker{ display:none; }
.character-image-master-summary::after{
  content:"▾";
  margin-left:auto;
  color:#64748b;
  transition:transform .18s ease;
}
.character-image-master[open] .character-image-master-summary::after{ transform:rotate(180deg); }
.character-image-master-note{
  margin:0 11px 8px;
  padding:7px 9px;
  border-radius:9px;
  background:rgba(239,246,255,.9);
  color:#475569;
  font-size:10px;
  font-weight:700;
  line-height:1.5;
}
.character-image-master-body{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:0 11px 11px;
}
.character-image-preview-wrap{
  width:96px;
  aspect-ratio:16/9;
  border:1px solid rgba(148,163,184,.34);
  border-radius:10px;
  overflow:hidden;
  background:rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}
.character-image-preview{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
}
.character-image-controls{ min-width:0; }
.character-image-controls > input[type="text"]{ width:100%; }
.character-image-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:7px;
}
.character-image-actions .btn{ width:auto; margin:0; }
.character-image-file-btn{ position:relative; overflow:hidden; }
.character-image-file-btn input{ display:none; }
@media(max-width:520px){
  .character-image-master-body{ grid-template-columns:82px minmax(0,1fr); gap:8px; padding-left:9px; padding-right:9px; }
  .character-image-preview-wrap{ width:82px; }
  .character-image-actions{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .character-image-actions .btn{ width:100%; padding:7px 4px; font-size:10px; }
}

/* v51.06: prevent page-level horizontal drift on Status Management.
   Horizontal tables keep their own local scrolling. */
*, *::before, *::after{
  box-sizing:border-box;
}
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
@supports (overflow:clip){
  html, body{ overflow-x:clip; }
}
.status-top-shell,
.status-header,
.status-hero,
.status-toolbar-band,
.status-toolbar-inner,
#view-list-tab,
#view-manage-tab,
.container,
.manage-section{
  max-width:100%;
}
.list-wrapper,
.table-scroll,
.status-toolbar-wrap{
  overscroll-behavior-x:contain;
}

/* v51.07: character list sort switch */
.status-list-sortbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin:-4px 0 8px;
  padding:0 2px;
}
.status-list-sortbar label{
  color:#475569;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.status-list-sortbar select{
  width:auto;
  min-width:168px;
  min-height:38px;
  padding:7px 34px 7px 10px;
  border-radius:11px;
  border:1px solid rgba(37,99,235,.22);
  background:rgba(255,255,255,.88);
  color:#0f172a;
  font-size:13px;
  font-weight:800;
  box-shadow:0 6px 16px rgba(15,23,42,.07);
}
@media(max-width:520px){
  .status-list-sortbar{
    justify-content:space-between;
    margin-top:-3px;
  }
  .status-list-sortbar select{
    flex:1;
    min-width:0;
    max-width:230px;
  }
}

/* v53.01: 育成状況専用UI */
.status-toolbar.status-toolbar-two{grid-template-columns:repeat(2,minmax(0,1fr));}
.status-toolbar.status-toolbar-three{grid-template-columns:repeat(3,minmax(0,1fr));}
.status-growth-extra-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 14px;}
.status-growth-extra-grid label{display:flex;flex-direction:column;gap:6px;color:#d7deea;font-size:12px;font-weight:800;}
.status-growth-extra-grid input{width:100%;min-height:42px;border-radius:12px;padding:8px 10px;font-size:16px;}
@media(max-width:520px){.status-growth-extra-grid{grid-template-columns:1fr 1fr;gap:8px}.status-growth-extra-grid input{min-height:40px}}
.status-growth-role-note{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.2);color:#e8edf5;line-height:1.6;}

/* v53.04: separate growth-target and user CP-candidate style controls */
.style-toggle-note,
.style-toggle-empty{
  text-align:center;
  color:#667085;
  font-size:11px;
  line-height:1.55;
  margin:3px 8px 8px;
}
.cp-candidate-panel{
  border-style:solid;
  border-color:rgba(37,99,235,.42);
  background:rgba(37,99,235,.055);
}
.cp-candidate-bar{
  align-items:flex-start;
}
.cp-candidate-item{
  width:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.cp-candidate-toggle .toggle-badge{
  right:-9px;
  bottom:-5px;
  padding:2px 5px;
  font-size:8px;
  white-space:nowrap;
}
.cp-candidate-value{
  max-width:58px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#334155;
  font-size:10px;
  font-weight:900;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.cp-candidate-summary{
  margin:9px auto 0;
  padding:7px 9px;
  border-radius:10px;
  border:1px solid rgba(37,99,235,.24);
  background:rgba(219,234,254,.66);
  color:#1e3a8a;
  text-align:center;
  font-size:11px;
  font-weight:800;
  line-height:1.5;
}
.cp-candidate-summary strong{ color:#1d4ed8; }
.cp-candidate-summary span{
  display:inline-block;
  margin-left:4px;
  color:#0f172a;
  font-variant-numeric:tabular-nums;
}
@media (max-width:640px){
  .manage-style-actions{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cp-candidate-item{ width:54px; }
  .cp-candidate-value{ max-width:54px; font-size:9px; }
}

/* v53.06: キャラ・スタイル管理のキャラ候補をモーダルから15件ページ式インライン一覧へ変更 */
.manage-char-inline-panel{
  width:100%;
  padding:10px;
  border:1px solid rgba(148,163,184,.30);
  border-radius:16px;
  background:rgba(248,250,252,.78);
}
.manage-char-inline-note{
  margin:0 2px 10px;
  color:#64748b;
  font-size:11px;
  line-height:1.55;
}
.manage-char-inline-panel .manage-char-picker-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  max-width:100%;
  overflow:visible;
  padding:0;
}
.manage-char-picker-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(148,163,184,.22);
}
.manage-char-picker-page-info{
  min-width:128px;
  color:#475569;
  font-size:12px;
  font-weight:900;
  text-align:center;
}
.manage-char-picker-pagination button:disabled{
  opacity:.38;
  cursor:default;
}
@media (max-width:640px){
  .manage-char-inline-panel{ padding:8px; border-radius:14px; }
  .manage-char-inline-note{ font-size:10px; }
  .manage-char-picker-pagination{ gap:6px; }
  .manage-char-picker-page-info{ min-width:112px; font-size:11px; }
}

/* =========================================================
   v53.09 — app-wide readability / contrast sweep
   Light Status/Data surfaces use dark secondary text; disabled
   states stay visibly inactive through surfaces/borders, not faint text.
   ========================================================= */
body.status-page{
  --muted:#475569;
}
body.status-page .character-link-note{
  color:#475569;
}
body.status-page .character-link-panel .character-link-note{
  color:#dbeafe;
}
body.status-page .status-growth-extra-grid label{
  color:#334155;
}
body.status-page .status-growth-role-note{
  color:#334155;
  background:rgba(255,247,237,.94);
  border-color:rgba(217,119,6,.32);
}
body.status-page .style-toggle-note,
body.status-page .style-toggle-empty,
body.status-page .style-cp-note,
body.status-page .manage-char-inline-note,
body.status-page .detail-subtitle,
body.status-page .manage-style-mods,
body.status-page .status-hp-tracker label,
body.status-page .status-hp-tracker span{
  color:#475569;
}
body.status-page input::placeholder,
body.status-page textarea::placeholder{
  color:#64748b !important;
  opacity:1;
}
body.status-page .upload-area{
  color:#334155;
}
body.status-page .toggle-icon.off{
  opacity:.62;
  filter:grayscale(.62) brightness(.88);
}
body.status-page .manage-char-picker-pagination button:disabled,
body.status-page .btn:disabled{
  opacity:1 !important;
  color:#64748b !important;
  background:#eef2f7 !important;
  border-color:#cbd5e1 !important;
  box-shadow:none !important;
  cursor:default;
}
body.status-page .rs-empty-state,
body.status-page td.rs-empty-cell{
  color:#475569 !important;
}
body.status-page .cp-field-badge, body.status-page .manage-char-picker-page-info{
  font-weight:900;
}

/* v53.09: キャラごとのスタイル表示順を手動調整 */
.manage-style-list-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin:0 0 8px;
}
.manage-style-list-heading .form-label{ margin-bottom:3px; }
.manage-style-order-note{
  color:#475569;
  font-size:11px;
  font-weight:700;
  line-height:1.55;
}
.manage-style-reset-order{
  flex:0 0 auto;
  margin:0;
  border:1px solid rgba(34,197,94,.32);
  background:rgba(240,253,244,.94);
  color:#166534;
}
.manage-style-order-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:20px;
  margin-right:6px;
  padding:0 6px;
  border:1px solid rgba(34,197,94,.28);
  border-radius:999px;
  background:#f0fdf4;
  color:#166534;
  font-size:10px;
  font-weight:900;
  vertical-align:1px;
}
.style-order-btn{
  border:1px solid rgba(34,197,94,.30);
  background:linear-gradient(180deg,#f0fdf4,#dcfce7);
  color:#166534;
  font-weight:900;
}
.style-order-btn:hover:not(:disabled){
  border-color:rgba(21,128,61,.52);
  background:linear-gradient(180deg,#dcfce7,#bbf7d0);
}
.style-order-btn:disabled{
  border-color:rgba(148,163,184,.24);
  background:#f1f5f9;
  color:#94a3b8;
  opacity:1;
}
@media(max-width:640px){
  .manage-style-list-heading{ align-items:stretch; flex-direction:column; }
  .manage-style-reset-order{ align-self:flex-end; }
}

/* =========================================================
   v53.10: 管理者標準BASE + ユーザー個人BASE上書き
   ========================================================= */
.status-base-panel{
  display:grid !important;
  grid-template-columns:auto auto 68px auto;
  grid-template-areas:
    "standard toggle input reset"
    "note note note note";
  align-items:center !important;
  gap:6px 8px !important;
  width:auto !important;
  min-height:0 !important;
  padding:7px 9px !important;
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(148,163,184,.24) !important;
  border-radius:13px !important;
  box-shadow:0 5px 14px rgba(15,23,42,.07) !important;
}
.status-base-standard-row{
  grid-area:standard;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:32px;
  padding:4px 7px;
  border:1px solid rgba(37,99,235,.18);
  border-radius:9px;
  background:rgba(239,246,255,.88);
}
.status-base-label{
  color:#475569;
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
}
.status-base-standard-value{
  color:#1d4ed8;
  font-size:15px;
  font-weight:950;
  line-height:1;
}
.status-base-override-toggle{
  grid-area:toggle;
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  min-height:32px;
  margin:0;
  padding:4px 7px;
  border:1px solid rgba(99,102,241,.18);
  border-radius:9px;
  background:rgba(238,242,255,.72);
  color:#3730a3 !important;
  font-size:11px !important;
  font-weight:900 !important;
  cursor:pointer;
}
.status-base-override-toggle input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:#4f46e5;
}
.status-base-panel .small-input{
  grid-area:input;
  width:68px !important;
  min-width:68px !important;
  height:32px !important;
  min-height:32px !important;
  padding:3px 6px !important;
  background:#fff !important;
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  font-size:16px !important;
  font-weight:900 !important;
  text-align:center;
}
.status-base-panel .small-input:disabled{
  background:#f1f5f9 !important;
  color:#64748b !important;
  -webkit-text-fill-color:#64748b !important;
  opacity:1;
}
.status-base-reset-btn{
  grid-area:reset;
  min-height:32px;
  padding:5px 8px;
  border:1px solid rgba(99,102,241,.24);
  border-radius:9px;
  background:#fff;
  color:#4338ca;
  font-size:10.5px;
  font-weight:900;
  white-space:nowrap;
  cursor:pointer;
}
.status-base-reset-btn:disabled{
  border-color:rgba(148,163,184,.22);
  background:#f8fafc;
  color:#64748b;
  opacity:1;
  cursor:default;
}
.status-base-mode-note{
  grid-area:note;
  min-width:0;
  color:#475569;
  font-size:10.5px;
  font-weight:750;
  line-height:1.35;
  text-align:right;
}
.status-base-mode-note.is-override{
  color:#4338ca;
  font-weight:850;
}
@media(max-width:620px){
  .pagehead{ align-items:center !important; }
  .status-base-panel{
    width:100% !important;
    grid-template-columns:auto minmax(64px,1fr) auto;
    grid-template-areas:
      "standard standard standard"
      "toggle input reset"
      "note note note";
  }
  .status-base-standard-row{ justify-content:center; }
  .status-base-panel .small-input{ width:100% !important; min-width:64px !important; }
  .status-base-mode-note{ text-align:center; }
}

/* =========================================================
   v53.11 — ステータス管理：必要なキャラだけ取り込むユーザー一覧
   原本はデータ管理に保持し、statusTracked=true のキャラだけを育成一覧へ表示する。
   ========================================================= */
.status-import-panel{
  margin:0 0 12px;
  padding:11px;
  border:1px solid rgba(37,99,235,.24);
  border-radius:15px;
  background:rgba(248,250,252,.97);
  box-shadow:0 10px 24px rgba(15,23,42,.07);
}
.status-import-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}
.status-import-head strong{
  color:#0f172a;
  font-size:14px;
  font-weight:900;
}
.status-import-head p{
  margin:4px 0 0;
  color:#475569;
  font-size:11px;
  font-weight:700;
  line-height:1.55;
}
.status-import-search{
  margin:0 0 9px !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
}
.status-import-list{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.status-import-option{
  width:100%;
  min-height:62px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:7px 9px;
  border:1px solid #cbd5e1;
  border-radius:13px;
  background:#fff;
  color:#0f172a;
  text-align:left;
  box-shadow:0 3px 10px rgba(15,23,42,.04);
  cursor:pointer;
}
.status-import-option:hover,
.status-import-option:focus-visible{
  border-color:#60a5fa;
  background:#eff6ff;
  outline:none;
}
.status-import-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
  background:#e2e8f0;
  border:2px solid #dbeafe;
}
.status-import-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.status-import-copy strong{
  overflow:hidden;
  color:#0f172a;
  font-size:13px;
  font-weight:900;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.status-import-copy small{
  overflow:hidden;
  color:#64748b;
  font-size:10px;
  font-weight:700;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.status-import-add{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:6px 9px;
  border-radius:10px;
  background:#2563eb;
  color:#fff;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.status-import-empty{
  padding:16px 10px;
  border:1px dashed #cbd5e1;
  border-radius:12px;
  background:#fff;
  color:#475569;
  text-align:center;
  font-size:11px;
  font-weight:700;
  line-height:1.6;
}
.status-import-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid #e2e8f0;
}
.status-import-pagination #statusImportPageInfo{
  min-width:128px;
  color:#475569;
  font-size:11px;
  font-weight:900;
  text-align:center;
}
.status-import-pagination button:disabled{
  opacity:1 !important;
  color:#64748b !important;
  background:#eef2f7 !important;
  border-color:#cbd5e1 !important;
  box-shadow:none !important;
  cursor:default;
}
.status-roster-empty{
  white-space:normal !important;
  line-height:1.65;
}
.status-detail-topbar-actions{
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
}
.status-remove-roster-btn{
  width:auto !important;
  margin:0 !important;
  border:1px solid #f59e0b !important;
  background:#fff7ed !important;
  color:#9a3412 !important;
  box-shadow:none !important;
  white-space:nowrap;
}
.status-remove-roster-btn:hover,
.status-remove-roster-btn:focus-visible{
  background:#ffedd5 !important;
  border-color:#ea580c !important;
}
@media(max-width:520px){
  .status-import-panel{ padding:9px; }
  .status-import-option{
    grid-template-columns:44px minmax(0,1fr) auto;
    gap:8px;
    min-height:58px;
    padding:7px;
  }
  .status-import-avatar{ width:44px; height:44px; }
  .status-import-add{ padding:6px 7px; font-size:10px; }
  .status-import-pagination{ gap:5px; }
  .status-import-pagination #statusImportPageInfo{ min-width:105px; font-size:10px; }
  .status-detail-topbar-actions{ gap:5px; }
  .status-remove-roster-btn{ padding-left:8px !important; padding-right:8px !important; font-size:10px !important; }
}

/* =========================================================
   v53.12 — 育成状況一覧をスマホ向け2段ステータスカードへ変更
   名前と8ステータスを分離し、横スクロールなしで全項目を表示する。
   ========================================================= */
.status-char-card-wrapper{
  overflow:visible !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.status-char-card-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  min-width:0;
}
.status-char-card{
  width:100%;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.30);
  border-radius:15px;
  background:rgba(255,255,255,.92);
  box-shadow:0 5px 16px rgba(15,23,42,.07);
  color:#0f172a;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.status-char-card:nth-child(even){
  background:rgba(248,250,252,.94);
}
.status-char-card:hover,
.status-char-card:focus-visible{
  border-color:rgba(37,99,235,.48);
  background:#f8fbff;
  box-shadow:0 7px 20px rgba(37,99,235,.10);
  outline:none;
}
.status-char-card:active{
  transform:translateY(1px);
}
.status-char-card-head{
  display:grid;
  grid-template-columns:50px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:64px;
  padding:7px 11px;
  border-bottom:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg, rgba(239,246,255,.88), rgba(255,255,255,.72));
}
.status-char-card-avatar{
  width:50px !important;
  height:50px !important;
  margin:0 !important;
  flex:none;
  border-radius:50%;
  object-fit:cover;
}
.status-char-card-title{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex-wrap:wrap;
}
.status-char-card-name{
  min-width:0;
  overflow-wrap:anywhere;
  color:#0f172a;
  font-size:15px;
  font-weight:900;
  line-height:1.28;
}
.status-char-card-power{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  padding:3px 8px;
  border:1px solid #bfdbfe;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:10px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  white-space:nowrap;
}
.status-char-card-cp{
  align-self:center;
  margin-left:2px;
  flex:none;
}
.status-char-card-stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  width:100%;
  min-width:0;
}
.status-char-stat{
  display:flex;
  align-items:center;
  justify-content:center;

  min-width:0;

  border-right:1px solid rgba(148,163,184,.16);
  border-bottom:1px solid rgba(148,163,184,.16);
  background:rgba(255,255,255,.42);
}
.status-char-stat:nth-child(4n){
  border-right:0;
}
.status-char-stat:nth-child(n/**/+5){
  border-bottom:0;
}
.status-char-stat-label{
  flex:none;
  color:#2563eb;
  font-size:11px;
  font-weight:900;
  line-height:1;
}
.status-char-stat-value{
  min-width:0;
  color:#0f172a;
  font-size:14px;
  font-variant-numeric:tabular-nums;
  font-weight:850;
  line-height:1;
  text-align:center;
}
.status-char-card-empty{
  width:100%;
  padding:22px 14px !important;
  border:1px dashed #cbd5e1;
  border-radius:14px;
  background:rgba(255,255,255,.90);
  color:#475569 !important;
  text-align:center;
  white-space:normal !important;
}
@media(max-width:520px){
  .status-char-card-list{ gap:7px; }
  .status-char-card-head{
    grid-template-columns:46px minmax(0,1fr) auto;
    min-height:58px;
    gap:8px;
    padding:6px 8px;
  }
  .status-char-card-avatar{
    width:46px !important;
    height:46px !important;
  }
  .status-char-card-title{ gap:6px; }
  .status-char-card-name{ font-size:13.5px; }
  .status-char-card-power{
    padding:3px 7px;
    font-size:9.5px;
  }

  .status-char-stat-label{ font-size:10px; }
  .status-char-stat-value{ font-size:13px; }
}
@media(max-width:360px){
  .status-char-card-head{
    grid-template-columns:42px minmax(0,1fr) auto;
  }
  .status-char-card-avatar{
    width:42px !important;
    height:42px !important;
  }
  .status-char-stat{
    flex-direction:column;
    gap:2px;

  }
}

/* =========================================================
   v53.13 — 育成状況カードに「残り育成値」を追加
   最大値までの差を 残=1 / 残=0 / 残=-2 の形式で表示する。
   ========================================================= */
.status-char-stat{
  flex-direction:column;
  gap:4px;
  min-height:54px;
  padding:6px 4px;
}
.status-char-stat-main{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:5px;
  min-width:0;
  width:100%;
}
.status-char-stat-remaining{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  max-width:100%;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:9.5px;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  white-space:nowrap;
}
.status-char-stat-remaining.is-positive{
  color:#1d4ed8;
  background:#eff6ff;
  border-color:#bfdbfe;
}
.status-char-stat-remaining.is-zero{
  color:#475569;
  background:#f1f5f9;
  border-color:#cbd5e1;
}
.status-char-stat-remaining.is-negative{
  color:#9a3412;
  background:#fff7ed;
  border-color:#fed7aa;
}
.status-char-stat-remaining.is-empty{
  color:#64748b;
  background:#f8fafc;
  border-color:#e2e8f0;
}
@media(max-width:520px){
  .status-char-stat{
    gap:3px;
    min-height:51px;
    padding:5px 2px;
  }
  .status-char-stat-main{ gap:3px; }
  .status-char-stat-remaining{
    min-width:38px;
    padding:2px 5px;
    font-size:9px;
  }
}
@media(max-width:360px){
  .status-char-stat{
    min-height:53px;
  }
  .status-char-stat-main{
    gap:2px;
  }
  .status-char-stat-remaining{
    min-width:36px;
    padding-left:4px;
    padding-right:4px;
    font-size:8.5px;
  }
}

/* =========================================================
   v53.14 — 育成状況カードの名前横にCP戦闘力を表示
   CP対象キャラのみ、現在のCP採用スタイルの戦闘力を補助表示する。
   ========================================================= */
@media(max-width:360px){
  .status-char-card-title{ gap:4px; }
  .status-char-card-power{
    padding:2px 6px;
    font-size:9px;
  }
}


/* v53.26 weapon-type custom icons */
.weapon-btn{
  gap: 4px;
}
.weapon-inline-icon{
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.28));
}
.weapon-inline-icon.filter-icon{
  width: 20px;
  height: 20px;
}
.weapon-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* v53.53 — ステータス管理の「登録キャラを取り込む」を独立ツールバー化 */
.status-import-tab-container{
  padding-top:12px;
}
.status-import-pagehead{
  margin-bottom:10px;
}
.status-import-pagehead h1{
  margin-bottom:0;
}
@media(max-width:520px){
  .status-import-tab-container{ padding-top:9px; }
}


/* v53.54 — status toolbar labels: 育成キャラ一覧 / 育成キャラ取り込み / 統合BK */

/* 育成キャラ一覧：見出し右横へ管理中件数を集約 */
.status-list-title-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.status-list-title-row h1{
  flex:0 1 auto;
  min-width:0;
}
.status-tracked-count{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:7px 12px;
  border:1px solid rgba(59,130,246,.24);
  border-radius:999px;
  background:linear-gradient(135deg, rgba(37,99,235,.10), rgba(14,165,233,.06));
  color:var(--text-color);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  letter-spacing:.02em;
}
@media(max-width:520px){
  .status-list-title-row{ gap:8px; }
  .status-tracked-count{
    min-height:32px;
    padding:6px 9px;
    font-size:11px;
  }
}