*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #0a0a0a;
      --bg2: #111;
      --bg3: #151515;
      --red: #CC0000;
      --red-dark: #8B0000;
      --text: #e0e0e0;
      --text2: #999;
      --text3: #555;
      --border: #1e1e1e;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    html, body {
      height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
      font-size: 14px;
      -webkit-text-size-adjust: 100%;
      overscroll-behavior: none;
    }

    #app {
      display: flex;
      flex-direction: column;
      height: 100%;
      max-width: 430px;
      margin: 0 auto;
    }

    /* ============================================================
       ヘッダー
    ============================================================ */
    .header {
      background: linear-gradient(180deg, #1c0000 0%, #0f0000 100%);
      border-bottom: 1px solid #2a0000;
      padding: calc(var(--safe-top) + 12px) 16px 12px;
      flex-shrink: 0;
      position: relative;
      z-index: 2;
    }
    .header-inner { display: flex; align-items: center; gap: 10px; }
    .eye-icon { font-size: 22px; }
    .header-text { flex: 1; }
    .header-title { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: 0.05em; }
    .header-sub { font-size: 10px; color: var(--text3); margin-top: 1px; letter-spacing: 0.08em; }
    .refresh-btn {
      width: 36px; height: 36px;
      background: rgba(139,0,0,0.3);
      border: 1px solid var(--red-dark);
      border-radius: 8px;
      color: var(--red);
      font-size: 18px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: background 0.15s;
    }
    .refresh-btn:active { background: rgba(139,0,0,0.5); }
    .refresh-btn.loading { animation: spin 1s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ============================================================
       フィルターバー
    ============================================================ */
    .filter-bar {
      display: flex;
      gap: 6px;
      padding: 10px 14px;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .filter-bar::-webkit-scrollbar { display: none; }
    .filter-chip {
      flex-shrink: 0;
      padding: 5px 12px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: var(--bg2);
      color: var(--text3);
      font-size: 12px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: all 0.15s;
    }
    .filter-chip.active {
      background: var(--red-dark);
      border-color: var(--red);
      color: #fff;
    }

    /* ============================================================
       ステータスバー
    ============================================================ */
    .status-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 14px;
      background: var(--bg);
      flex-shrink: 0;
    }
    .status-text { font-size: 10px; color: var(--text3); }
    .auto-refresh-row { display: flex; align-items: center; gap: 6px; }
    .auto-label { font-size: 10px; color: var(--text3); }

    /* トグル */
    .toggle-wrap { position: relative; width: 36px; height: 20px; }
    .toggle-wrap input { opacity: 0; width: 0; height: 0; }
    .slider {
      position: absolute; inset: 0;
      background: #2a2a2a;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .slider::before {
      content: '';
      position: absolute;
      width: 14px; height: 14px;
      left: 3px; top: 3px;
      background: #666;
      border-radius: 50%;
      transition: all 0.2s;
    }
    input:checked ~ .slider { background: var(--red-dark); }
    input:checked ~ .slider::before { left: 19px; background: #fff; }

    /* ============================================================
       ローディングバー
    ============================================================ */
    .progress {
      height: 2px;
      background: var(--border);
      flex-shrink: 0;
      overflow: hidden;
    }
    .progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--red-dark), var(--red));
      transition: width 0.4s ease;
    }
    .progress-bar.indeterminate {
      width: 35%;
      animation: indeterminate 1.1s ease-in-out infinite;
    }
    @keyframes indeterminate {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(390%); }
    }

    /* ============================================================
       スクロールエリア
    ============================================================ */
    .scroll-area {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 12px 14px calc(var(--safe-bottom) + 12px);
    }

    .overview {
      margin-bottom: 12px;
      background: linear-gradient(180deg, #111 0%, #0d0d0d 100%);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px;
    }
    .overview-title {
      font-size: 11px;
      color: var(--text3);
      letter-spacing: 0.08em;
      margin-bottom: 8px;
    }
    .overview-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .overview-card {
      background: #121212;
      border: 1px solid #232323;
      border-radius: 8px;
      padding: 8px;
    }
    .overview-value { font-size: 18px; font-weight: 700; color: #fff; }
    .overview-label { font-size: 10px; color: var(--text3); margin-top: 2px; }
    .profile-guide {
      margin-top: 10px;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid #2a1a1a;
      background: linear-gradient(180deg, #171010 0%, #101010 100%);
    }
    .knowledge-details {
      border: none;
    }
    .knowledge-details > summary {
      list-style: none;
      cursor: pointer;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: #ffd9d9;
      padding: 0 0 8px 0;
    }
    .knowledge-details > summary::-webkit-details-marker { display: none; }
    .knowledge-details > summary::after {
      content: "＋";
      font-size: 12px;
      color: #bfa6a6;
      flex-shrink: 0;
    }
    .knowledge-details[open] > summary::after {
      content: "−";
    }
    .knowledge-summary-note {
      margin-left: auto;
      font-size: 9px;
      color: #8f7f7f;
      letter-spacing: 0.04em;
      font-weight: 400;
    }
    .knowledge-details-body {
      padding-top: 2px;
    }
    .profile-guide-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: #ffd9d9;
      margin-bottom: 8px;
    }
    .profile-guide-note {
      margin-top: 8px;
      font-size: 10px;
      line-height: 1.5;
      color: #a7a7a7;
    }
    .profile-guide-rows {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-top: 8px;
    }
    .profile-guide-row {
      background: #121212;
      border: 1px solid #292929;
      border-radius: 8px;
      padding: 6px 8px;
      min-height: 52px;
    }
    .profile-guide-row .row-k {
      font-size: 10px;
      color: #aaa;
      margin-bottom: 3px;
    }
    .profile-guide-row .row-v {
      font-size: 11px;
      color: #fff;
      line-height: 1.4;
    }
    .profile-guide table {
      width: 100%;
      border-collapse: collapse;
      font-size: 10px;
      color: #ddd;
    }
    .profile-guide th,
    .profile-guide td {
      border: 1px solid #292929;
      padding: 4px 5px;
      text-align: center;
      white-space: nowrap;
    }
    .profile-guide th {
      background: #1c1c1c;
      color: #fff;
      font-weight: 700;
    }
    .profile-guide tbody tr:nth-child(odd) td {
      background: #121212;
    }
    .profile-guide tbody tr:nth-child(even) td {
      background: #0f0f0f;
    }
    .profile-knowledge {
      margin-top: 10px;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid #2c2430;
      background: linear-gradient(180deg, #141018 0%, #0f0f12 100%);
    }
    .profile-knowledge .knowledge-details > summary {
      color: #ead8ff;
    }
    .profile-knowledge .knowledge-details > summary::after {
      color: #baa9d1;
    }
    .profile-knowledge-title {
      font-size: 11px;
      font-weight: 700;
      color: #ead8ff;
      letter-spacing: 0.05em;
      margin-bottom: 8px;
    }
    .profile-knowledge ul {
      padding-left: 16px;
      color: #cfc7dd;
      font-size: 10px;
      line-height: 1.5;
      margin: 6px 0 0;
    }
    .profile-knowledge li {
      margin-bottom: 4px;
    }
    .profile-template {
      margin-top: 8px;
      padding: 8px;
      border-radius: 8px;
      background: #101015;
      border: 1px solid #2b2733;
      font-size: 10px;
      color: #d7d0e6;
      line-height: 1.5;
      white-space: pre-wrap;
    }
    .pick-list {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-top: 10px;
      padding-bottom: 2px;
    }
    .pick-list::-webkit-scrollbar { display: none; }
    .pick-chip {
      flex-shrink: 0;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid #2c2c2c;
      background: #101010;
      font-size: 11px;
      color: #ddd;
      white-space: nowrap;
    }
    button.pick-chip {
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
      font: inherit;
      text-align: left;
    }
    .pick-chip strong { color: #fff; }
    .pick-panel {
      margin-top: 10px;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid #262626;
      background: #0f0f0f;
    }
    .pick-panel-title {
      font-size: 11px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.05em;
    }
    .pick-panel-sub {
      margin-top: 4px;
      font-size: 9px;
      color: #7b7b7b;
      line-height: 1.4;
    }
    .pick-panel .pick-list {
      margin-top: 8px;
    }
    .menu-section {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }
    .menu-action {
      width: 100%;
      border: 1px solid #2a2a2a;
      border-radius: 12px;
      padding: 12px 14px;
      background: #111;
      color: #ddd;
      font-size: 14px;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .menu-action.primary {
      border-color: #6a1f1f;
      background: #200d0d;
      color: #fff;
    }
    .saved-date-actions {
      margin-top: 8px;
    }
    .saved-date-list {
      display: grid;
      gap: 6px;
      margin-top: 8px;
    }
    .saved-date-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 32px;
      gap: 6px;
      align-items: stretch;
    }
    .sit-chip.sit-setting {
      border-color: #6a1f1f;
      background: #210d0d;
    }
    .sit-chip.sit-ceiling {
      border-color: #5a3b00;
      background: #1c1307;
    }
    .sit-chip.sit-wait {
      border-color: #2c2c2c;
      background: #101010;
    }
    .sit-chip.sit-hidden {
      border-color: #242424;
      background: #0d0d0d;
      color: #666;
    }
    .saved-date-chip.is-active {
      border-color: #cc0000;
      background: #1f0d0d;
      color: #fff;
    }
    .saved-date-chip {
      min-height: 40px;
      line-height: 1.35;
    }
    .saved-today-chip {
      border-color: #305070;
      background: #102030;
    }
    .saved-date-delete {
      border: 1px solid #4b1f1f;
      border-radius: 999px;
      background: #1a0c0c;
      color: #ff8b8b;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .saved-date-delete:active {
      background: #2a1111;
    }

    /* ============================================================
       ホールカード
    ============================================================ */
    .hall-section { margin-bottom: 16px; }
    .hall-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 8px 8px 0 0;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .hall-section.collapsed .hall-header { border-radius: 8px; }
    .hall-header-left { }
    .hall-name { font-weight: 700; font-size: 14px; color: #fff; }
    .hall-meta { font-size: 10px; color: var(--text3); margin-top: 2px; }
    .hall-summary {
      font-size: 10px;
      color: #9ab;
      margin-top: 4px;
      line-height: 1.5;
    }
    .hall-header-right { display: flex; align-items: center; gap: 8px; }
    .hot-badge {
      font-size: 10px; font-weight: 700;
      padding: 3px 8px;
      border-radius: 4px;
    }
    .hot-badge.hot { background: var(--red); color: #fff; }
    .hot-badge.normal { background: #1e1e1e; color: var(--text3); }
    .hot-badge.error { background: #2a1400; color: #c06020; }
    .chevron {
      color: var(--text3); font-size: 12px;
      transition: transform 0.2s;
    }
    .hall-section.collapsed .chevron { transform: rotate(-90deg); }

    /* AI分析 */
    .ai-box {
      background: #0c0c1c;
      border-left: 3px solid #334;
      padding: 8px 12px;
      font-size: 12px;
      color: #9ab;
      line-height: 1.6;
      border-bottom: 1px solid var(--border);
    }
    .ai-box-label { font-size: 9px; color: #446; margin-bottom: 3px; letter-spacing: 0.1em; }

    /* 台リスト */
    .machine-list {
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 8px 8px;
      overflow: hidden;
    }
    .hall-section.collapsed .machine-list { display: none; }

    .machine-row {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 62px;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border-bottom: 1px solid var(--border);
      -webkit-tap-highlight-color: transparent;
    }
    .machine-row:last-child { border-bottom: none; }
    .machine-row.is-hot { background: #0c0000; }
    .machine-row.profile-ghoul { border-left: 3px solid #7c5cc8; }
    .machine-row.profile-monsterHunter { border-left: 3px solid #3ea6a6; }
    .machine-row.profile-ghoul.is-hot { background: #12091a; }
    .machine-row.profile-monsterHunter.is-hot { background: #091314; }

    .tai { font-size: 12px; color: var(--text3); }
    .tai strong { color: var(--text2); display: block; font-size: 13px; }

    .stats {
      font-size: 11px;
      color: var(--text2);
      line-height: 1.5;
      min-width: 0;
      overflow: hidden;
    }
    .stats .label { color: var(--text3); font-size: 10px; }
    .machine-name {
      display: inline-block;
      font-size: 10px;
      color: #aaa;
      margin-bottom: 2px;
      padding: 1px 6px;
      border: 1px solid #2f2f2f;
      border-radius: 999px;
      background: #111;
    }
    .machine-row.profile-ghoul .machine-name {
      color: #e0d2ff;
      border-color: #6e4cb0;
      background: #1a1026;
    }
    .machine-row.profile-monsterHunter .machine-name {
      color: #d2f0f0;
      border-color: #3e8c8c;
      background: #0f1c1c;
    }
    .judge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin: 2px 0 2px;
    }
    .judge-chip {
      display: inline-flex;
      align-items: center;
      padding: 2px 7px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 10px;
      line-height: 1.2;
      white-space: nowrap;
    }
    .judge-chip.setting-unknown,
    .judge-chip.evaluation-chip.eval-unknown {
      background: #151515;
      border-color: #2a2a2a;
      color: #aaa;
    }
    .judge-chip.setting-good,
    .judge-chip.evaluation-chip.eval-good {
      background: #2a0a0a;
      border-color: #5e1d1d;
      color: #ff8787;
    }
    .judge-chip.setting-mid,
    .judge-chip.evaluation-chip.eval-mid {
      background: #1b1200;
      border-color: #5a3b00;
      color: #f0b24b;
    }
    .judge-chip.setting-low,
    .judge-chip.evaluation-chip.eval-low {
      background: #11141d;
      border-color: #2c3856;
      color: #9eb6e6;
    }
    .machine-row.profile-ghoul .judge-chip.setting-good,
    .machine-row.profile-ghoul .judge-chip.evaluation-chip.eval-good {
      background: #251234;
      border-color: #6e4cb0;
      color: #d9c7ff;
    }
    .machine-row.profile-ghoul .judge-chip.setting-mid,
    .machine-row.profile-ghoul .judge-chip.evaluation-chip.eval-mid {
      background: #1b1329;
      border-color: #5c4293;
      color: #bba4f5;
    }
    .machine-row.profile-ghoul .judge-chip.setting-low,
    .machine-row.profile-ghoul .judge-chip.evaluation-chip.eval-low {
      background: #17131e;
      border-color: #433161;
      color: #9c84d8;
    }
    .machine-row.profile-monsterHunter .judge-chip.setting-good,
    .machine-row.profile-monsterHunter .judge-chip.evaluation-chip.eval-good {
      background: #0e2323;
      border-color: #2d6c6c;
      color: #92f0f0;
    }
    .machine-row.profile-monsterHunter .judge-chip.setting-mid,
    .machine-row.profile-monsterHunter .judge-chip.evaluation-chip.eval-mid {
      background: #102020;
      border-color: #397878;
      color: #73d6d6;
    }
    .machine-row.profile-monsterHunter .judge-chip.setting-low,
    .machine-row.profile-monsterHunter .judge-chip.evaluation-chip.eval-low {
      background: #11171a;
      border-color: #2d4f57;
      color: #92afbb;
    }

    .score-col {
      text-align: right;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      padding: 4px 2px;
      border-radius: 6px;
      min-width: 0;
    }
    .score-col:hover { background: rgba(255,255,255,0.03); }
    .score-num { font-size: 13px; font-weight: 700; white-space: nowrap; }
    .score-hi { color: var(--red); }
    .score-mid { color: #cc8800; }
    .score-lo { color: var(--text3); }
    .machine-row.profile-ghoul .score-hi { color: #b28cff; }
    .machine-row.profile-ghoul .score-mid { color: #8d73da; }
    .machine-row.profile-monsterHunter .score-hi { color: #64d5d5; }
    .machine-row.profile-monsterHunter .score-mid { color: #49aaaa; }
    .score-label {
      font-size: 8px;
      color: var(--text3);
      white-space: nowrap;
    }
    .score-label .rank-arrow {
      display: inline-block;
      margin-left: 4px;
      font-size: 10px;
      font-weight: 700;
    }
    .rank-up { color: #4a9a4a; }
    .rank-down { color: #9a4040; }
    .rank-new { color: #cc8800; }
    .rank-flat { color: #666; }
    .delta-line {
      font-size: 9px;
      color: var(--text3);
      margin-top: 1px;
    }
    .delta-up { color: #4a9a4a; }
    .delta-down { color: #9a4040; }
    .delta-flat { color: #666; }
    .supp-line {
      font-size: 9px;
      color: #8ba;
      margin-top: 2px;
      line-height: 1.35;
    }
    .score-total-box {
      margin-top: 6px;
      padding: 12px;
      border-radius: 10px;
      border: 1px solid #2a1a1a;
      background: linear-gradient(180deg, #1b1111 0%, #101010 100%);
      text-align: center;
    }
    .score-total-label {
      font-size: 10px;
      color: #b99;
      letter-spacing: 0.08em;
    }
    .score-total-value {
      margin-top: 4px;
      font-size: 28px;
      font-weight: 700;
      color: #fff;
    }
    .score-total-note {
      margin-top: 2px;
      font-size: 10px;
      color: #9b8c8c;
    }
    .score-tabbar {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      margin-top: 10px;
    }
    .score-tab {
      padding: 8px 6px;
      border-radius: 10px;
      border: 1px solid #2a2a2a;
      background: #111;
      color: #bbb;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .score-tab.active {
      border-color: #6a1f1f;
      background: #200d0d;
      color: #fff;
    }
    .score-tab-title {
      display: block;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.25;
    }
    .score-tab-note {
      display: block;
      margin-top: 2px;
      font-size: 9px;
      color: #7f7f7f;
      line-height: 1.25;
    }
    .score-tab.active .score-tab-note { color: #cfb2b2; }
    .score-breakdown {
      margin-top: 10px;
      display: grid;
      gap: 10px;
    }
    .score-breakdown-section {
      padding: 10px;
      border-radius: 10px;
      border: 1px solid #2a2a2a;
      background: #111;
    }
    .score-breakdown-title {
      font-size: 11px;
      font-weight: 700;
      color: #ddd;
      margin-bottom: 8px;
      letter-spacing: 0.04em;
    }
    .score-breakdown-sub {
      font-size: 9px;
      color: #888;
      margin-bottom: 8px;
      line-height: 1.35;
    }
    .score-breakdown-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      padding: 6px 0;
      border-top: 1px solid #202020;
    }
    .score-breakdown-row:first-of-type { border-top: none; padding-top: 0; }
    .score-breakdown-left {
      min-width: 0;
      flex: 1;
    }
    .score-breakdown-label {
      display: block;
      font-size: 10px;
      color: #fff;
      line-height: 1.3;
    }
    .score-breakdown-note {
      display: block;
      margin-top: 2px;
      font-size: 9px;
      color: #8f8f8f;
      line-height: 1.35;
    }
    .score-breakdown-delta {
      flex-shrink: 0;
      font-size: 12px;
      font-weight: 700;
      min-width: 42px;
      text-align: right;
    }
    .score-breakdown-delta.pos { color: #4a9a4a; }
    .score-breakdown-delta.neg { color: #9a4040; }
    .score-breakdown-empty {
      font-size: 10px;
      color: #666;
      padding: 4px 0;
    }
    .supp-btn {
      margin-top: 4px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 6px;
      border-radius: 999px;
      border: 1px solid #2b2b2b;
      background: #111;
      color: #bbb;
      font-size: 9px;
      cursor: pointer;
    }
    .supp-btn:active { background: #181818; }

    .hamari-chip {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      background: #1a0a00;
      border: 1px solid #3a1500;
      border-radius: 3px;
      padding: 1px 5px;
      margin: 0 4px 3px 0;
      font-size: 10px;
      color: #cc6600;
      white-space: nowrap;
    }
    .hamari-chip:first-child { background: #2a1400; color: #ff9933; border-color: #5a2500; }
    .hamari-chip:nth-child(2) { color: #ffb366; }
    .hamari-chip:nth-child(3) { color: #d08c4a; }
    .hamari-row {
      display: flex;
      flex-wrap: wrap;
      margin: 2px 0 3px;
    }

    /* エラー */
    .error-row {
      padding: 10px 12px;
      font-size: 12px;
      color: #a05020;
      background: #150a00;
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 8px 8px;
    }

    /* ============================================================
       空・エラーステート
    ============================================================ */
    .empty {
      text-align: center;
      padding: 60px 20px;
      color: var(--text3);
    }
    .empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.3; }
    .empty-title { font-size: 15px; margin-bottom: 6px; }
    .empty-sub { font-size: 12px; }

    /* ============================================================
       設定パネル（シート風）
    ============================================================ */
    .sheet-overlay {
      display: none;
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.7);
      z-index: 100;
      -webkit-backdrop-filter: blur(4px);
    }
    .sheet-overlay.open { display: block; }
    .sheet {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      background: #111;
      border-radius: 16px 16px 0 0;
      padding: 0 20px calc(var(--safe-bottom) + 20px);
      max-height: 80vh;
      overflow-y: auto;
    }
    .sheet-handle {
      width: 36px; height: 4px;
      background: #333;
      border-radius: 2px;
      margin: 12px auto 16px;
    }
    .sheet-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 20px; }
    .sheet-group { margin-bottom: 16px; }
    .sheet-label { font-size: 11px; color: var(--text3); margin-bottom: 6px; letter-spacing: 0.05em; }
    .sheet-input {
      width: 100%;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 8px;
      color: var(--text);
      padding: 10px 12px;
      font-size: 14px;
      outline: none;
      -webkit-appearance: none;
    }
    .sheet-input:focus { border-color: var(--red-dark); }
    .sheet-hint { font-size: 10px; color: #444; margin-top: 4px; }
    .sheet-save {
      width: 100%;
      background: linear-gradient(135deg, var(--red-dark), var(--red));
      border: none;
      border-radius: 12px;
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      padding: 14px;
      margin-top: 8px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .sheet-save.secondary {
      background: #2b2b2b;
      color: #ddd;
    }

    .supp-summary {
      font-size: 10px;
      color: var(--text3);
      margin-top: -10px;
      margin-bottom: 12px;
      line-height: 1.5;
    }
    .supp-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 12px;
    }
    .supp-box {
      background: #0d0d0d;
      border: 1px solid #242424;
      border-radius: 8px;
      padding: 8px;
    }
    .supp-box .k { font-size: 9px; color: #777; }
    .supp-box .v { font-size: 15px; font-weight: 700; color: #fff; margin-top: 2px; }
    .supp-box.eval-good { border-color: #3f6f4a; background: #0c160f; }
    .supp-box.eval-mid { border-color: #6f5a34; background: #151108; }
    .supp-box.eval-low { border-color: #6f3a3a; background: #160c0c; }
    .supp-box.eval-unknown { border-color: #2e2e2e; }
    .supp-box.eval-good .k, .supp-box.eval-good .v { color: #8ee39b; }
    .supp-box.eval-mid .k, .supp-box.eval-mid .v { color: #f0c26b; }
    .supp-box.eval-low .k, .supp-box.eval-low .v { color: #f08b8b; }
    .supp-grid.profile-ghoul .supp-box {
      border-color: #6e4cb0;
      background: #12091a;
    }
    .supp-grid.profile-ghoul .supp-box .v { color: #e0d2ff; }
    .supp-grid.profile-monsterHunter .supp-box {
      border-color: #3e8c8c;
      background: #091314;
    }
    .supp-grid.profile-monsterHunter .supp-box .v { color: #d2f0f0; }
    .supp-textarea {
      width: 100%;
      min-height: 150px;
      resize: vertical;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 8px;
      color: var(--text);
      padding: 10px 12px;
      font-size: 13px;
      line-height: 1.45;
      outline: none;
    }
    .supp-actions {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }
    .supp-action {
      flex: 1;
      border: none;
      border-radius: 10px;
      padding: 12px;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      background: #2b2b2b;
      cursor: pointer;
    }
    .supp-action.primary {
      background: linear-gradient(135deg, var(--red-dark), var(--red));
    }
    .supp-mini {
      font-size: 10px;
      color: #7d9;
      margin-top: 6px;
      line-height: 1.45;
    }
    .supp-guide {
      margin-top: 8px;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #2d2240;
      background: #120b1c;
      font-size: 10px;
      line-height: 1.45;
      color: #d8cfff;
    }
    .supp-guide strong { color: #fff; }
    .supp-guide table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 6px;
      font-size: 9px;
    }
    .supp-guide th, .supp-guide td {
      text-align: left;
      padding: 2px 4px 2px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      vertical-align: top;
    }
    .supp-guide th { color: #fff; font-weight: 700; }
    .supp-guide .guide-note { margin-top: 6px; color: #b8a7ef; }
    .supp-title-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }
    .supp-machine-title {
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }
    .supp-machine-sub {
      font-size: 11px;
      color: var(--text3);
    }
    .supp-summary-line {
      font-size: 9px;
      color: #8ba;
      margin-top: 2px;
      line-height: 1.35;
    }

    /* gear btn */
    .gear-btn {
      width: 36px; height: 36px;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text3);
      font-size: 16px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .gear-btn:active { background: rgba(255,255,255,0.1); }
    .ocr-btn {
      min-width: 44px;
      padding: 0 10px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
    }