:root {
      --bg-color: #2b2825;
      --panel-bg: #3e3a35;
      --text-color: #f0f0f0;
      --accent-gold: #c5a059;
      --input-bg: #1a1a1a;
      --positive: #66ccff;
      --negative: #ff6666;
      --capped: #777;
      --header-bg: #554d44;
      --btn-grad-start: #d4af37;
      --btn-grad-end: #a67c00;
      --xfade-edge: rgba(197,160,89,.35);
    }

    body {
      font-family: "Helvetica Neue", Arial, sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      margin: 0;
      padding: 0;
      font-size: 14px;
      padding-bottom: 80px;
    }

    .container { max-width: 600px; margin: 0 auto; padding: 15px; }
    h1, h2, h3 { color: var(--accent-gold); border-bottom: 1px solid var(--accent-gold); padding-bottom: 5px; margin-top: 0; text-align: center; }
    h2 { font-size: 1.3rem; margin-bottom: 15px; }
    h3 { font-size: 1.1rem; margin-top: 25px; margin-bottom: 10px; 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;
      padding: 14px;
    }
    .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;
      gap: 10px;
      margin-bottom: 15px;
      position: sticky;
      top: 0;
      z-index: 5;
      padding: 6px 0 10px;
      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);
      border: 1px solid var(--accent-gold);
      color: white;
      padding: 10px;
      border-radius: 4px;
      font-size: 16px;
      width: 100%;
      box-sizing: border-box;
    }
    input[type="number"] { text-align: center; }
    .small-input { width: 60px !important; display: inline-block !important; }

    /* 検索ボックス用 */
    .search-box {
      margin-bottom: 15px;
      position: relative;
    }
    .search-box input {
      padding-left: 30px; /* アイコン分 */
      padding-right: 42px; /* クリアボタン分 */
    }
    .search-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--accent-gold);
    }
    .search-clear-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      border: none;
      background: transparent;
      color: #bbb;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border-radius: 6px;
    }
    .search-clear-btn:active {
      transform: translateY(-50%) scale(0.95);
    }
    .search-clear-btn:hover {
      color: #fff;
    }

    
    /* 武器種フィルター */
    .weapon-filter { margin-bottom: 12px; }
    .weapon-filter-title { font-size: 12px; color:#bbb; text-align:center; margin: 6px 0 8px; font-weight:bold; }
    .weapon-filter-bar { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
    .weapon-btn {
      width: 44px; height: 44px;
      border-radius: 12px;
      border: 1px solid var(--accent-gold);
      background:#222;
      color:#eee;
      font-weight:bold;
      cursor:pointer;
      font-size: 12px;
      padding: 0;
      display:flex;
      align-items:center;
      justify-content:center;
      -webkit-tap-highlight-color: transparent;
    }
    .weapon-btn.wide { width: 56px; }
    .weapon-btn.active { background: rgba(197,160,89,0.25); color:#fff; box-shadow:0 0 6px rgba(197,160,89,0.35); }
    .weapon-btn:active { transform: scale(0.97); }
    .weapon-btn .mini { font-size: 11px; line-height: 1.05; }

    .weapon-badge {
      display:inline-block;
      padding: 2px 8px;
      border: 1px solid #888;
      border-radius: 999px;
      font-size: 11px;
      color: #ddd;
      background: #222;
      margin-top: 4px;
    }
.form-group { margin-bottom: 20px; }
    .form-label { display: block; margin-bottom: 8px; font-weight: bold; font-size: 15px; }

    /* ボタン */
    .btn {
      background: linear-gradient(to bottom, var(--btn-grad-start), var(--btn-grad-end));
      border: 1px solid #fff;
      color: white;
      padding: 12px 20px;
      border-radius: 4px;
      font-weight: bold;
      font-size: 16px;
      cursor: pointer;
      text-align: center;
      display: inline-block;
      width: 100%;
      box-sizing: border-box;
      margin-bottom: 10px;
    }
    .btn:active { transform: translateY(2px); }
    .btn-small { width: auto; padding: 6px 10px; font-size: 12px; margin: 0; }
    .btn-delete { background: linear-gradient(to bottom, #ff6666, #cc0000); }
    .btn-edit { background: linear-gradient(to bottom, #4CAF50, #2E7D32); }
    .btn-secondary { background: #555; }

    /* フッターナビ */
    .footer-nav {
      position: fixed; bottom: 0; left: 0; width: 100%;
      background-color: #222; border-top: 2px solid var(--accent-gold);
      display: flex; justify-content: space-around; padding: 12px 0; z-index: 100;
    }
    .footer-nav button { background: none; border: none; color: var(--accent-gold); font-weight: bold; font-size: 15px; cursor: pointer; }
    .footer-nav button.active { color: #fff; text-shadow: 0 0 5px var(--accent-gold); }

    /* 一覧画面 */
    .list-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 10px; border: 1px solid var(--accent-gold); border-radius: 4px; }
    .char-list-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
    .char-list-table th { background-color: var(--header-bg); color: var(--accent-gold); padding: 12px 8px; position: sticky; top: 0; z-index: 10; border-bottom: 2px solid var(--accent-gold); }
    .char-list-table td { padding: 12px 8px; border-bottom: 1px solid #555; text-align: center; color: #ddd; }
    .char-list-table tbody tr:nth-child(even) { background-color: #35322e; }
    .char-list-table tbody tr:hover { background-color: #4a453e; }
    .list-name-cell { text-align: left !important; display: flex; align-items: center; min-width: 140px; }
    .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; margin-top: 20px; }

    /* 詳細画面 */
    .char-header { display: flex; align-items: center; margin-bottom: 20px; background: #222; padding: 15px; border-radius: 8px; border: 1px solid var(--accent-gold); }
    .char-header img { width: 70px; height: 70px; border-radius: 50%; border: 2px solid var(--accent-gold); margin-right: 20px; object-fit: cover; }
    .stat-inputs-container {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      align-items: start;
    }
    .stat-box {
      text-align: center;
      width: auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .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;
      padding: 12px 8px;
      font-size: 18px;
      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));
      gap: 16px 14px;
    }
    #currentStatsInputs .stat-box {
      gap: 10px;
      padding: 12px 10px;
      border-radius: 18px;
      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-size: 14px;
      font-weight: 900;
      text-align: center;
      color: #334155;
      letter-spacing: .02em;
      margin: 0;
    }
    #currentStatsInputs .stepper-row {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) 40px;
      gap: 8px;
      align-items: center;
    }
    #currentStatsInputs .stepper-btn {
      appearance: none;
      -webkit-appearance: none;
      border: 1px solid rgba(148,163,184,.36);
      border-radius: 14px;
      height: 48px;
      min-width: 0;
      padding: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.98));
      color: #0f172a;
      font-size: 28px;
      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;
      padding: 12px 8px;
      min-height: 48px;
      border-radius: 16px;
      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 { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; white-space: nowrap; border: 2px solid var(--accent-gold); border-radius: 4px; overflow: hidden; }
    .stat-table th, .stat-table td { border: 1px solid #555; padding: 12px 6px; text-align: center; }
    .stat-table th { background-color: #444; color: var(--accent-gold); font-weight: bold; border-bottom: 2px solid var(--accent-gold); font-size: 14px; }

    .row-max { background-color: #2a2a2a; font-weight: bold; font-size: 13px; }
    .row-max td { color: #888; border-bottom: 2px solid var(--accent-gold); }
    .row-limit { background-color: #222; font-weight: bold; }
    .row-limit td { border-top: 2px solid var(--accent-gold); }

    .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 {
      margin-top: 12px;
      background: rgba(0,0,0,0.25);
      border: 1px dashed #666;
      border-radius: 8px;
      padding: 12px;
    }
    .style-toggle-title {
      font-size: 12px;
      color: #bbb;
      font-weight: bold;
      text-align: center;
      margin-bottom: 10px;
    }
    .style-toggle-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      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;
      background: #222;
      border: 1px solid #888;
      color: #ff6666;
      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); padding: 15px; border-radius: 8px; margin-bottom: 25px; border: 1px solid #666; }
    .upload-area { border: 2px dashed #666; padding: 20px; text-align: center; margin-bottom: 20px; border-radius: 8px; cursor: pointer; background: rgba(0,0,0,0.2); }
    .preview-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: none; margin: 10px auto; border: 2px solid var(--accent-gold); background:#000; }
    .manage-style-list { margin-bottom: 20px; border-top: 1px solid #666; }
    .manage-style-item { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-bottom: 1px solid #666; background: #2a2a2a; }
    .manage-style-info { display: flex; align-items: center; }
    .manage-style-actions { display: flex; gap: 10px; }
  
  /* 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;
    color: var(--accent-gold);
    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;
    color: #bbb;
  }
  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;
  padding: 12px;
}

.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;
  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;
}
.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-header.is-collapsed .status-hero {
  padding-top: 0;
  padding-bottom: 0;
}
.status-header.is-collapsed {
  box-shadow: none;
}
.status-header.is-collapsed .status-hero-hideable {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}
.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;
  border-radius: 12px;
  padding: 9px 12px;
  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-logo {
  display: block;
  height: auto;
  width: min(92vw, 560px);
  max-height: 52px;
  max-width: min(92vw, 560px);
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
.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;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
  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);
  border-radius: 14px;
  padding: 8px 12px;
  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 {
  gap: 10px;
  justify-content: flex-start;
}
.weapon-btn {
  border: 1px solid rgba(148,163,184,.24);
  background: rgba(255,255,255,.82);
  color: var(--text-color);
  border-radius: 14px;
  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 {
  background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(37,99,235,.22);
  margin-bottom: 10px;
}
.btn:active { transform: translateY(1px); }
.btn-small {
  width: auto;
  padding: 9px 12px;
  font-size: 13px;
  border-radius: 12px;
  margin: 0;
}
.btn-secondary {
  background: rgba(255,255,255,.88);
  color: var(--text-color);
  border: 1px solid var(--soft-border);
  box-shadow: 0 10px 26px rgba(15,23,42,.12);
}
.btn-edit {
  background: linear-gradient(135deg, #16a34a, #15803d);
}
.btn-delete {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.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 {
  gap: 14px;
  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; }

.char-list-table,
.stat-table {
  width: 100%;
  background: transparent;
}
.char-list-table th,
.stat-table th {
  background: rgba(37,99,235,.10);
  color: #1d4ed8;
  border-bottom: 1px solid rgba(37,99,235,.16);
}
.char-list-table td,
.stat-table td {
  color: var(--text-color);
  border-color: rgba(148,163,184,.18);
}
.char-list-table tbody tr:nth-child(even) {
  background: rgba(148,163,184,.08);
}
.char-list-table tbody tr:hover {
  background: rgba(37,99,235,.08);
}
.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);
  border-radius: 12px;
  margin-bottom: 8px;
}
.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;
}

.footer-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: min(980px, calc(100vw - 24px));
  background: rgba(255,255,255,.90);
  border: 1px solid var(--soft-border);
  box-shadow: 0 18px 42px rgba(15,23,42,.18);
  border-radius: 18px;
  padding: 8px;
  justify-content: stretch;
  gap: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.footer-nav button {
  flex: 1;
  border-radius: 12px;
  padding: 12px 10px;
  color: var(--muted);
  font-size: 14px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.footer-nav button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
  box-shadow: 0 10px 24px rgba(37,99,235,.22);
  text-shadow: none;
}

.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; }
#charImgPlaceholder { color: #94a3b8 !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-logo { width: min(92vw, 520px); max-height: 44px; }
  .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;
  }
  .footer-nav button {
    font-size: 13px;
    padding: 11px 8px;
  }
}



/* === v50_47b: status UI closer to CP (buttons + headings) === */
.pagehead{
  align-items:center;
  gap:14px;
}
.pagehead > div:last-child{
  border-radius: 16px;
  padding: 10px 12px;
  min-height: 52px;
}

.btn,
.status-switchbtn,
.footer-nav button,
.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,
.footer-nav button:hover,
.weapon-btn:hover,
.search-clear-btn:hover{
  box-shadow: 0 14px 28px rgba(15,23,42,.14);
}
.btn:active,
.status-switchbtn:active,
.footer-nav button: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);
}
.footer-nav button{
  min-height: 46px;
  border: 1px solid transparent;
}
.footer-nav button:not(.active){
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  color: var(--text-color);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
.footer-nav button.active{
  border-color: rgba(37,99,235,.18);
}

.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;
}
.manage-section h3{ margin-bottom: 14px; }
.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{
  padding: 16px !important;
  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;
}

.char-list-table th,
.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;
}
.char-list-table th:first-child,
.stat-table th:first-child{ border-top-left-radius: 12px; }
.char-list-table th:last-child,
.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{
  gap: 8px;
}
#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-panel{
  margin:0 0 18px;
  padding:13px;
  border:1px solid rgba(96,165,250,.55);
  border-radius:10px;
  background:rgba(15,23,42,.6);
}
.character-link-title{
  margin-bottom:9px;
  font-weight:800;
  color:#bfdbfe;
}
.character-link-row{
  display:flex;
  gap:8px;
  align-items:stretch;
}
.character-link-row select{ min-width:0; flex:1; }
.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-row{ flex-direction:column; }
  .character-link-row .btn,
  .character-link-actions .btn{ width:100%; }
}

/* v50.64: status master data + CP style profile + resistances */
.character-master-panel{
  margin:0 0 18px;
  padding:14px;
  border:1px solid rgba(37,99,235,.28);
  border-radius:14px;
  background:rgba(239,246,255,.82);
}
.character-master-title{
  margin-bottom:10px;
  color:#1e3a8a;
  font-weight:900;
}
.character-master-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
}
.character-master-grid .form-group{ margin-bottom:10px; }
.new-character-master-grid{ margin-bottom:4px; }
.status-hp-summary{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:0 0 12px;
  padding:9px 11px;
  border-radius:10px;
  background:rgba(255,255,255,.8);
  color:#475569;
  font-size:13px;
}
.status-hp-summary strong{ color:#0f172a; }
.status-hp-tracker{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr) minmax(0,.75fr);
  gap:8px;
  margin-bottom:10px;
}
.status-hp-tracker > label,
.status-hp-tracker > div{
  min-width:0;
  padding:8px;
  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%;
  min-height:36px;
  margin-top:4px;
  padding:5px 7px;
  font-size:16px;
}
.status-hp-tracker strong{
  display:block;
  margin-top:8px;
  color:#0f172a;
  font-size:17px;
}
.detail-subtitle{
  margin:8px 0 7px;
  color:#475569;
  font-size:12px;
  font-weight:800;
}
.cp-style-check{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 14px;
  padding:10px 12px;
  border:1px solid rgba(37,99,235,.28);
  border-radius:11px;
  background:rgba(219,234,254,.65);
  color:#1e3a8a;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.cp-style-check input{ width:20px; height:20px; flex:0 0 auto; }
.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;
  padding:12px 14px;
  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{ padding:0 12px 12px; }
.style-cp-section + .style-cp-section{ padding-top:4px; border-top:1px solid rgba(148,163,184,.18); }
.manage-style-item{
  gap:10px;
  padding:10px;
  border:1px solid transparent;
}
.manage-style-item.cp-selected{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 0 0 2px rgba(37,99,235,.08);
}
.manage-style-info{ min-width:0; flex:1; }
.manage-style-thumb{
  width:46px;
  height:46px;
  flex:0 0 46px;
  margin-right:10px;
  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,
.cp-selected-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; }
.cp-selected-badge{ color:#1d4ed8; background:#eff6ff; border-color:#bfdbfe; }
.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; grid-template-columns:repeat(3,minmax(0,1fr)); 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;padding:12px 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-sort-inline{
  display:flex;
  width:100%;
  justify-content:space-between;
  margin:0 0 12px;
}
.manage-char-picker-trigger{
  display:flex;
  align-items:center;
  width:100%;
  min-height:72px;
  gap:12px;
  padding:12px 14px;
  border:2px solid rgba(148,163,184,.38);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  text-align:left;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}
.manage-char-picker-trigger:hover{ border-color:rgba(37,99,235,.38); }
.manage-char-picker-thumb{
  width:52px;
  height:52px;
  flex:0 0 52px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #94a3b8;
  background:#0f172a;
}
.manage-char-picker-copy{ min-width:0; flex:1; }
.manage-char-picker-name{
  color:#0f172a;
  font-size:15px;
  font-weight:900;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.manage-char-picker-meta{
  margin-top:4px;
  color:#64748b;
  font-size:11px;
  line-height:1.45;
}
.manage-char-picker-action{
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:999px;
  background:#2563eb;
  color:#fff;
  font-size:12px;
  font-weight:900;
}
.manage-char-hidden-select{
  display:none !important;
}
.manage-char-modal{
  position:fixed;
  inset:0;
  z-index:3500;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  box-sizing:border-box;
  width:auto;
  max-width:100%;
  padding:max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));
  overflow:hidden;
  overscroll-behavior:contain;
}
body.manage-char-picker-open{
  overflow:hidden;
  overscroll-behavior:none;
}
.manage-char-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.55);
}
.manage-char-modal-card{
  position:relative;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  width:min(720px, 100%);
  max-width:100%;
  max-height:min(calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 920px);
  margin:0;
  padding:16px;
  border-radius:20px;
  background:#f8fafc;
  box-shadow:0 24px 60px rgba(15,23,42,.35);
  overflow:hidden;
}

.manage-char-modal-card,
.manage-char-modal-card *,
.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-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.manage-char-modal-title{
  color:#0f172a;
  font-size:18px;
  font-weight:900;
}
.manage-char-modal-sub{
  margin-top:4px;
  color:#64748b;
  font-size:12px;
}
.manage-char-modal-close{
  width:38px;
  height:38px;
  border:1px solid rgba(148,163,184,.42);
  border-radius:50%;
  background:#fff;
  color:#334155;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.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,
  .manage-char-sort-inline{
    display:grid;
    grid-template-columns:60px minmax(0,1fr);
    width:100%;
  }
  .manage-char-picker-trigger{ padding:11px; gap:10px; }
  .manage-char-picker-thumb,
  .manage-char-option-thumb{ width:46px; height:46px; flex-basis:46px; }
  .manage-char-picker-action{ padding:6px 10px; font-size:11px; }
  .manage-char-modal{
    padding:max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom));
  }
  .manage-char-modal-card{
    width:100%;
    max-width:100%;
    max-height:calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin:0;
    padding:12px;
    border-radius:18px;
  }
  .manage-char-modal-title{ font-size:16px; }
  .manage-char-option{ padding:10px; }
}

/* v50.75: viewport-height character picker (avoid clipping by filtered parent) */
.manage-char-modal{
  inset:auto 0 auto 0;
  top:var(--manage-char-viewport-top, 0px);
  height:var(--manage-char-viewport-height, 100dvh);
  min-height:0;
}
.manage-char-modal-card{
  height:100%;
  min-height:0;
  max-height:100%;
}
.manage-char-modal-head,
.manage-char-sort-inline{
  flex:0 0 auto;
}
.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){
  .manage-char-modal-card{
    height:min(100%, 920px);
  }
}

/* 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-switchbtn .navsvg {
    width: 15px;
    height: 15px;
  }
  .status-hero-brand {
    margin-top: 1px;
    gap: 2px;
  }
  .status-hero-logo {
    width: min(82vw, 430px);
    max-width: min(82vw, 430px);
    max-height: 32px;
  }
  .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;
  }
}