:root, [data-theme="dark"] {
            --bg:#050505;--card:#121212;--border:#282828;--text:#ffffff;--sub-text:#888888;
            --accent:#007aff;--S-color:#ff3b30;--A-color:#ff9500;--B-color:#34c759;
            --C-color:#007aff;--D-color:#8e8e93;--st-ok:#007aff;--st-warn:#ffcc00;--st-bad:#ff3b30;
            --app-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Hiragino Sans",sans-serif;
            --modal-bg:#111;--modal-border:#2a2a2a;--input-bg:#1a1a1a;--input-border:#2a2a2a;
            --btn-secondary-bg:#1e1e1e;--btn-secondary-color:#666;
        }
        [data-theme="light"] {
            --bg:#f2f2f7;--card:#ffffff;--border:#d1d1d6;--text:#000000;--sub-text:#6c6c70;
            --accent:#007aff;--S-color:#ff3b30;--A-color:#ff9500;--B-color:#34c759;
            --C-color:#007aff;--D-color:#8e8e93;--st-ok:#007aff;--st-warn:#ff9500;--st-bad:#ff3b30;
            --modal-bg:#ffffff;--modal-border:#d1d1d6;--input-bg:#f2f2f7;--input-border:#d1d1d6;
            --btn-secondary-bg:#e5e5ea;--btn-secondary-color:#3c3c43;
        }
        body { background-color:var(--bg);color:var(--text);font-family:var(--app-font);margin:0;padding:20px;line-height:1.4;-webkit-font-smoothing:antialiased; }
        #auth-bar { background:var(--card); border-bottom:1px solid var(--border); }
        [data-theme="dark"] #auth-bar { background:rgba(5,5,5,0.97); }
        #auth-username { color:var(--text); }
        #notif-btn { color:var(--text); }
        .app { max-width:900px;margin:0 auto;background-color:var(--bg);padding-bottom:40px; }
        .main-rank-card { background:var(--card);border:1px solid var(--border);padding:35px;border-radius:24px;display:flex;align-items:center;margin-bottom:25px; }
        #rank-letter { font-size:5rem;font-weight:900;width:130px;height:130px;display:flex;align-items:center;justify-content:center;border-radius:28px;background:#000;margin-right:35px;border:4px solid var(--border);transition:all 0.6s cubic-bezier(0.19,1,0.22,1);flex-shrink:0; }
        .rank-S,.rank-S\+,.rank-S- { color:var(--S-color);border-color:var(--S-color)!important;box-shadow:0 0 40px rgba(255,59,48,0.3); }
        .rank-A,.rank-A\+,.rank-A- { color:var(--A-color);border-color:var(--A-color)!important;box-shadow:0 0 30px rgba(255,149,0,0.2); }
        .rank-B,.rank-B\+,.rank-B- { color:var(--B-color);border-color:var(--B-color)!important; }
        .rank-C,.rank-C\+,.rank-C- { color:var(--C-color);border-color:var(--C-color)!important; }
        .rank-D,.rank-D\+ { color:var(--D-color);border-color:var(--D-color)!important; }
        .rank-info { flex:1; }
        #status-title { font-size:1.8rem;font-weight:800;margin:0;letter-spacing:-0.02em;color:var(--text); }
        #eval-msg { color:var(--sub-text);font-size:0.95rem;margin-top:8px;line-height:1.7;word-break:break-word; }
        #time-remaining { color:var(--accent);font-size:0.85rem;font-weight:700;margin-top:6px;word-break:break-word; }
        .browser-info-area { display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:30px; }
        .info-panel { background:var(--card);border:1px solid var(--border);padding:22px;border-radius:20px; }
        .info-panel.full-width { grid-column:span 2; }
        .info-panel label { display:block;color:var(--sub-text);font-size:0.8rem;font-weight:800;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.1em; }
        .info-panel .val { font-size:1.2rem;font-weight:800;color:var(--accent);word-break:break-all; }
        .spec-list { display:flex;flex-direction:column;gap:12px; }
        .spec-row { background:var(--card);border:1px solid var(--border);padding:20px 25px;border-radius:18px;display:flex;justify-content:space-between;align-items:center;border-left:8px solid transparent;transition:border-color 0.4s,background 0.4s; }
        .spec-row .label { color:var(--sub-text);font-size:0.95rem;font-weight:600; }
        .spec-row .val   { font-size:1rem;font-weight:700;text-align:right;margin-left:20px;word-break:break-all; }
        .st-ok   { border-left-color:var(--st-ok);  background:var(--st-ok-bg,rgba(0,122,255,0.08)); }
        .st-good { border-left-color:#34c759; background:rgba(52,199,89,0.08); }
        .st-warn { border-left-color:var(--st-warn); background:var(--st-warn-bg,rgba(255,204,0,0.08)); }
        .st-bad  { border-left-color:var(--st-bad);  background:var(--st-bad-bg,rgba(255,59,48,0.08)); }
        .capture-mode .spec-list { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
        .capture-mode .spec-row { flex-direction:column;align-items:flex-start;justify-content:space-between;padding:14px 16px 12px;border-radius:14px;border-left:none;border-top:4px solid transparent;min-height:76px;gap:6px; }
        .capture-mode .spec-row .label { font-size:0.72rem;line-height:1.3;white-space:normal; }
        .capture-mode .spec-row .val   { font-size:0.88rem;text-align:left;margin-left:0;word-break:break-all;white-space:normal; }
        .capture-mode .st-ok   { border-top-color:var(--st-ok);  border-left-color:transparent; }
        .capture-mode .st-good { border-top-color:#34c759; border-left-color:transparent; background:rgba(52,199,89,0.08); }
        .capture-mode .st-warn { border-top-color:var(--st-warn); border-left-color:transparent; }
        .capture-mode .st-bad  { border-top-color:var(--st-bad);  border-left-color:transparent; }
        .action-zone { max-width:900px;margin:0 auto;padding:0 0 60px; }
        .action-zone-card {
            background:var(--card);border:1px solid var(--border);
            border-radius:24px;padding:20px;margin-bottom:0;
            display:flex;flex-direction:column;gap:10px;
        }
        .action-zone-footer {
            display:grid;grid-template-columns:repeat(3,1fr);
            gap:8px;padding:12px 0 4px;
            border-top:1px solid var(--border);margin-top:4px;
        }
        .action-zone-footer button {
            width:100%;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        }
        @media (max-width:560px) {
            .action-zone-footer { grid-template-columns:repeat(2,1fr); }
        }
        #save-btn { display:none;width:100%;padding:22px;border-radius:22px;background:var(--accent);color:#fff;border:none;font-size:1.2rem;font-weight:800;cursor:pointer;box-shadow:0 12px 35px rgba(0,122,255,0.3);transition:transform 0.2s,opacity 0.2s; }
        #save-btn:active { transform:scale(0.98); }
        #save-btn:disabled { opacity:0.5;cursor:not-allowed; }
        #share-x-btn {
            width:100%;padding:18px;border-radius:22px;
            background:transparent;color:#fff;
            border:2px solid #ffffff;
            font-size:1.1rem;font-weight:800;cursor:pointer;
            transition:transform 0.2s,background 0.2s;
            margin-bottom:12px;
            display:none;
            align-items:center;justify-content:center;gap:10px;
        }
        #share-x-btn:hover  { background:rgba(255,255,255,0.08); }
        #share-x-btn:active { transform:scale(0.98); }
        #ai-btn {
            display:none;width:100%;padding:18px;border-radius:22px;
            background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;
            font-size:1.1rem;font-weight:800;cursor:pointer;
            box-shadow:0 12px 35px rgba(99,102,241,0.35);
            transition:transform 0.2s;
        }
        #ai-btn:active { transform:scale(0.98); }
        #ai-modal {
            display:none;position:fixed;top:0;left:0;width:100%;height:100%;
            background:rgba(0,0,0,0.95);z-index:99999;
            flex-direction:column;align-items:center;justify-content:center;
            padding:20px;box-sizing:border-box;
        }
        #ai-modal-box {
            background:var(--card);border:1px solid #6366f1;border-radius:24px;
            width:100%;max-width:620px;display:flex;flex-direction:column;
            height:85vh;overflow:hidden;
        }
        #ai-header { padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0; }
        #ai-header h2 { margin:0;font-size:1.1rem;font-weight:800;background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
        #ai-close { background:none;border:none;color:var(--sub-text);font-size:1.4rem;cursor:pointer;padding:4px 8px; }
        #ai-messages { flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px; }
        .ai-msg { max-width:88%;padding:12px 16px;border-radius:18px;font-size:0.9rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word; }
        .ai-msg a.pu-ext-link { color:#8ab4ff;word-break:break-all;overflow-wrap:anywhere; }
        .ai-msg.user { background:linear-gradient(135deg,#6366f1,#7c3aed);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;box-shadow:0 2px 12px rgba(99,102,241,0.3); }
        .ai-msg.assistant { background:#16162a;color:var(--text);align-self:flex-start;border:1px solid rgba(99,102,241,0.2);border-bottom-left-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,0.2); }
        #ai-input-area { padding:12px 14px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0;background:rgba(0,0,0,0.15); }
        #ai-input { flex:1;background:#1a1a2e;border:1px solid rgba(99,102,241,0.25);border-radius:14px;padding:10px 16px;color:#fff;font-size:0.95rem;outline:none;resize:none;font-family:inherit;transition:border-color 0.2s; }
        #ai-input:focus { border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,0.15); }
        #ai-send { background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:14px;padding:12px 20px;font-weight:800;cursor:pointer;font-size:0.95rem; }
        #ai-send:disabled { opacity:0.5;cursor:not-allowed; }
        #retry-btn {
            display:none;width:100%;padding:18px;border-radius:22px;
            background:#ff9500;color:#fff;border:none;
            font-size:1.1rem;font-weight:800;cursor:pointer;
            box-shadow:0 12px 35px rgba(255,149,0,0.3);
            transition:transform 0.2s,opacity 0.2s;
            margin-top:12px;
        }
        #retry-btn:active { transform:scale(0.98); }
        #modal-overlay { display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);z-index:99999;justify-content:center;align-items:center;flex-direction:column;padding:20px;box-sizing:border-box;overflow-y:auto; }
        #result-img-wrap { padding:10px;background:#000;border-radius:28px;border:1px solid var(--border);box-shadow:0 0 60px rgba(255,255,255,0.1);max-width:650px;width:100%; }
        #result-img-wrap img { width:100%;border-radius:20px;display:block; }
        .modal-footer { margin-top:20px;text-align:center;width:100%;max-width:650px; }
        .modal-hint { color:var(--sub-text);font-size:0.9rem;margin-bottom:16px;font-weight:600; }
        .modal-actions { display:flex;gap:12px;justify-content:center; }
        #dl-btn { background:var(--accent);color:#fff;border:none;padding:14px 32px;border-radius:14px;cursor:pointer;font-weight:800;font-size:1rem;box-shadow:0 8px 24px rgba(0,122,255,0.3);transition:transform 0.2s; }
        #dl-btn:active { transform:scale(0.97); }
        .close-btn { background:#333;color:#fff;border:none;padding:14px 32px;border-radius:14px;cursor:pointer;font-weight:800;font-size:1rem; }

        #history-btn {
            display:none;width:100%;padding:18px;border-radius:22px;
            background:#ff2d78;color:#fff;border:none;
            font-size:1.1rem;font-weight:800;cursor:pointer;
            box-shadow:0 12px 35px rgba(255,45,120,0.3);
            transition:transform 0.2s;
        }
        #history-btn:active { transform:scale(0.98); }
        #speed-btn {
            display:none;width:100%;padding:18px;border-radius:22px;
            background:#7c3aed;color:#fff;border:none;
            font-size:1.1rem;font-weight:800;cursor:pointer;
            box-shadow:0 12px 35px rgba(124,58,237,0.3);
            transition:transform 0.2s;
        }
        #speed-btn:active { transform:scale(0.98); }
        #battle-btn {
            width:100%;padding:18px;border-radius:22px;
            background:linear-gradient(135deg,#ff2d55,#ff6b35);color:#fff;border:none;
            font-size:1.1rem;font-weight:800;cursor:pointer;
            box-shadow:0 12px 35px rgba(255,45,85,0.3);
            transition:transform 0.2s;
        }
        #battle-btn:active { transform:scale(0.98); }
        #ranking-btn {
            width:100%;padding:18px;border-radius:22px;
            background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;border:none;
            font-size:1.1rem;font-weight:800;cursor:pointer;
            box-shadow:0 12px 35px rgba(245,158,11,0.3);
            transition:transform 0.2s;
            align-items:center;justify-content:center;gap:10px;
        }
        #ranking-btn:active { transform:scale(0.98); }
        #particle-diag-btn {
            display:none;width:100%;padding:18px;border-radius:22px;
            background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff;border:none;
            font-size:1.1rem;font-weight:800;cursor:pointer;
            box-shadow:0 12px 35px rgba(167,139,250,0.3);
            transition:transform 0.2s,opacity 0.2s;
        }
        #particle-diag-btn:active { transform:scale(0.98); }
        .extra-modal {
            display:none;position:fixed;top:0;left:0;width:100%;height:100%;
            background:rgba(0,0,0,0.95);z-index:99999;
            justify-content:center;align-items:flex-start;
            padding:20px;box-sizing:border-box;overflow-y:auto;
        }
        .extra-modal-box {
            background:var(--card);border:1px solid var(--border);
            border-radius:24px;padding:28px;width:100%;max-width:600px;
            margin-top:20px;
        }
        .extra-modal-box h2 { margin:0 0 20px;font-size:1.2rem;font-weight:800; }
        .modal-close-btn {
            margin-top:20px;width:100%;padding:13px;border-radius:14px;
            background:#333;color:#fff;border:none;font-size:0.95rem;font-weight:800;cursor:pointer;
        }

        /* 色の基準ボタン */
        #legend-btn {
            display:block;max-width:900px;margin:0 auto 18px;width:100%;
            padding:13px;border-radius:16px;
            background:var(--card);color:var(--sub-text);
            border:1px solid var(--border);
            font-size:0.9rem;font-weight:700;cursor:pointer;
            text-align:center;letter-spacing:0.05em;
            transition:background 0.2s,color 0.2s;
        }
        #legend-btn:hover { background:#1e1e1e;color:var(--text); }

        /* 色の基準モーダル */
        #legend-overlay {
            display:none;position:fixed;top:0;left:0;width:100%;height:100%;
            background:rgba(0,0,0,0.92);z-index:99998;
            justify-content:center;align-items:center;
            padding:20px;box-sizing:border-box;overflow-y:auto;
        }
        #legend-box {
            background:var(--card);border:1px solid var(--border);
            border-radius:24px;padding:30px;width:100%;max-width:560px;
        }
        #legend-box h2 { margin:0 0 20px;font-size:1.2rem;font-weight:800;color:var(--text); }
        .legend-row {
            display:flex;align-items:center;gap:14px;
            padding:12px 0;border-bottom:1px solid var(--border);
        }
        .legend-row:last-of-type { border-bottom:none; }
        .legend-dot {
            width:14px;height:14px;border-radius:50%;flex-shrink:0;
        }
        .legend-dot.ok   { background:var(--st-ok); }
        .legend-dot.warn { background:var(--st-warn); }
        .legend-dot.bad  { background:var(--st-bad); }
        .legend-dot.good { background:#34c759; }
        .legend-label { font-size:0.95rem;font-weight:700;color:var(--text);min-width:60px; }
        .legend-desc  { font-size:0.88rem;color:var(--sub-text);line-height:1.5; }
        #legend-close {
            margin-top:22px;width:100%;padding:14px;border-radius:14px;
            background:#333;color:#fff;border:none;
            font-size:1rem;font-weight:800;cursor:pointer;
        }

        /* IP警告モーダル */
        #ip-warn-overlay {
            display:none;position:fixed;top:0;left:0;width:100%;height:100%;
            background:rgba(0,0,0,0.95);z-index:999999;
            justify-content:center;align-items:center;
            padding:20px;box-sizing:border-box;
        }
        #ip-warn-box {
            background:var(--card);border:1px solid #ff9500;
            border-radius:24px;padding:30px;width:100%;max-width:500px;
        }
        #ip-warn-box h3 { margin:0 0 14px;font-size:1.1rem;font-weight:800;color:#ff9500; }
        #ip-warn-box p  { color:var(--sub-text);font-size:0.9rem;line-height:1.7;margin:0 0 22px; }
        .ip-warn-btns   { display:flex;flex-direction:column;gap:10px; }
        .ip-warn-btns button {
            width:100%;padding:14px;border-radius:14px;border:none;
            font-size:0.95rem;font-weight:800;cursor:pointer;
        }
        #ip-include-btn { background:var(--st-bad);color:#fff; }
        #ip-mask-btn    { background:var(--st-warn);color:#000; }
        #ip-hide-btn    { background:var(--accent);color:#fff; }
        .ip-note {
            margin-top:16px;font-size:0.78rem;color:#555;
            text-align:center;line-height:1.6;
        }
        /* ── スマホ向けレスポンシブ ── */
        @media (max-width: 480px) {
            .main-rank-card { padding:18px; }
            #rank-letter { width:80px;height:80px;font-size:3rem;margin-right:16px;border-radius:18px; }
            #status-title { font-size:1.1rem; }
            #eval-msg { font-size:0.78rem;margin-top:4px;line-height:1.5; }
            #time-remaining { font-size:0.72rem; }
        }
        @media (max-width: 360px) {
            #rank-letter { width:68px;height:68px;font-size:2.5rem;margin-right:12px; }
            #status-title { font-size:1rem; }
            #eval-msg { font-size:0.72rem; }
        }
/* アップデートモーダル専用スタイル */
#update-overlay {
    display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); z-index: 100000;
    align-items: center; justify-content: center; padding: 20px;
}
#update-box {
    background: var(--card); border: 1px solid var(--border); border-radius: 24px;
    width: 100%; max-width: 500px; padding: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
#update-box h2 {
    margin: 0 0 20px; font-size: 1.4rem; font-weight: 800; color: var(--text);
    display: flex; align-items: center; gap: 10px;
}
.update-row {
    display: flex; align-items: flex-start; margin-bottom: 16px; gap: 12px;
}
.update-dot {
    width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0;
}
/* 各種ラベルの色設定（既存の変数を利用） */
.dot-new { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.dot-improve { background: var(--B-color); }
.dot-fix { background: var(--S-color); }
.dot-info { background: var(--sub-text); }

.update-label {
    font-size: 0.75rem; font-weight: 800; padding: 2px 8px; border-radius: 6px;
    background: var(--border); color: var(--sub-text); min-width: 50px; text-align: center;
}
.update-desc { font-size: 0.9rem; color: var(--text); line-height: 1.5; flex: 1; }

/* ボタン：薄い緑（目に優しい配色） */
#update-close {
    width: 100%; margin-top: 20px; padding: 16px; border-radius: 16px;
    background: #1b2e1b; color: #4ade80; border: 1px solid #2d4a2d;
    font-size: 1rem; font-weight: 800; cursor: pointer; transition: 0.2s;
}
#update-close:hover { background: #243d24; }
#update-close:active { transform: scale(0.98); }
/* ──────────────────────────────────────────
   auth-bar対応: 未ログイン時の余白確保
   JSがbody.paddingTop='0'をセットするため
   margin-topだけでauth-bar分をカバーする
────────────────────────────────────────── */


.app {
  margin-top: 90px;  /* 75px → 90px に増量 */
}

.help {
  margin-left:6px;
  font-size:0.8rem;
  color:#888;
  cursor:pointer;
}

/* スマホ向け: 小画面でボタン折り返し発生時も対応 */
@media (max-width: 480px) {
  .app {
    margin-top: 95px;
  }
}

/* iPhone ノッチ / Dynamic Island 対応 (PWAモード) */
@supports (padding-top: env(safe-area-inset-top)) {
  #auth-bar {
    /* ノッチ分の高さを自動で上乗せ */
    padding-top: max(10px, env(safe-area-inset-top)) !important;
  }
  .app {
    /* auth-barの高さ + ノッチ分を余白に加算 */
    margin-top: max(90px, calc(env(safe-area-inset-top) + 55px));
  }
}
/* ── ライトテーマ モーダル対応 ── */
[data-theme="light"] #auth-modal > div,
[data-theme="light"] #email-login-modal > div,
[data-theme="light"] #signup-modal > div,
[data-theme="light"] #settings-modal > div,
[data-theme="light"] #ai-modal > div,
[data-theme="light"] #history-modal > div,
[data-theme="light"] #speed-modal > div,
[data-theme="light"] #battle-modal > div {
    background: var(--modal-bg) !important;
    border-color: var(--modal-border) !important;
    color: var(--text) !important;
}
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="text"] {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text) !important;
}
[data-theme="light"] #auth-modal,
[data-theme="light"] #email-login-modal,
[data-theme="light"] #signup-modal,
[data-theme="light"] #settings-modal,
[data-theme="light"] #ai-modal,
[data-theme="light"] #history-modal,
[data-theme="light"] #speed-modal,
[data-theme="light"] #battle-modal {
    background: rgba(0,0,0,0.5) !important;
}

/* ══════════════════════════════════════════
   👑 ProUltra スキン
   ══════════════════════════════════════════ */

/* --- Gold スキン --- */
[data-theme="dark"] [data-pu-skin="gold"] {
    --accent: #f59e0b;
    --card:   #130f00;
    --border: #3d2e00;
    --bg:     #0a0800;
}
[data-theme="dark"] [data-pu-skin="gold"] .main-rank-card {
    background: linear-gradient(135deg, #1a1100 0%, #2a1f00 100%);
    border-color: #5a4000;
}
[data-theme="dark"] [data-pu-skin="gold"] .spec-row {
    background: linear-gradient(90deg, #100d00 0%, #1a1500 100%);
    border-color: #3d2e00;
}
[data-theme="dark"] [data-pu-skin="gold"] .st-ok {
    --st-ok-bg: rgba(245,158,11,0.09);
    border-left-color: #f59e0b;
    background: rgba(245,158,11,0.07);
}
[data-theme="dark"] [data-pu-skin="gold"] #save-btn {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    box-shadow: 0 12px 35px rgba(245,158,11,0.35);
}
[data-theme="dark"] [data-pu-skin="gold"] #rank-letter {
    background: linear-gradient(135deg, #1a1100, #2d2000);
    border-color: #f59e0b !important;
    box-shadow: 0 0 40px rgba(245,158,11,0.4);
}

/* --- Aurora スキン --- */
[data-theme="dark"] [data-pu-skin="aurora"] {
    --accent: #a855f7;
    --card:   #0d0014;
    --border: #2d1040;
    --bg:     #080010;
}
[data-theme="dark"] [data-pu-skin="aurora"] .main-rank-card {
    background: linear-gradient(135deg, #0d0020 0%, #1a0035 50%, #000d20 100%);
    border-color: #3d1060;
}
[data-theme="dark"] [data-pu-skin="aurora"] .spec-row {
    background: linear-gradient(90deg, #0a0018 0%, #130025 100%);
    border-color: #2d1040;
}
[data-theme="dark"] [data-pu-skin="aurora"] .st-ok {
    --st-ok-bg: rgba(168,85,247,0.09);
    border-left-color: #a855f7;
    background: rgba(168,85,247,0.07);
}
[data-theme="dark"] [data-pu-skin="aurora"] #save-btn {
    background: linear-gradient(135deg, #7c3aed, #db2777, #0ea5e9);
    box-shadow: 0 12px 35px rgba(168,85,247,0.4);
}
[data-theme="dark"] [data-pu-skin="aurora"] #rank-letter {
    background: linear-gradient(135deg, #0d0020, #1e0040);
    border-color: #a855f7 !important;
    box-shadow: 0 0 50px rgba(168,85,247,0.5), 0 0 80px rgba(236,72,153,0.2);
}
[data-theme="dark"] [data-pu-skin="aurora"] .info-panel {
    background: linear-gradient(135deg, #0a001a, #00101a);
    border-color: #2d1040;
}
[data-theme="dark"] [data-pu-skin="aurora"] #ai-btn {
    background: linear-gradient(135deg, #7c3aed, #db2777);
}

/* --- LINE友だち限定 スキン --- */
[data-theme="dark"] [data-pu-skin="grant_line_friend"] {
    --accent: #06C755;
    --card:   #0b1410;
    --border: #06C75540;
    --bg:     #060a08;
}
[data-theme="dark"] [data-pu-skin="grant_line_friend"] .main-rank-card {
    background: linear-gradient(135deg, #0b1a12 0%, #0f2418 100%);
    border-color: #06C75550;
    position: relative;
}
[data-theme="dark"] [data-pu-skin="grant_line_friend"] .spec-row {
    background: linear-gradient(90deg, #081209 0%, #0d1a10 100%);
    border-color: #06C75530;
}
[data-theme="dark"] [data-pu-skin="grant_line_friend"] .st-ok {
    --st-ok-bg: rgba(6,199,85,0.12);
    border-left-color: #06C755;
    background: rgba(6,199,85,0.09);
}
[data-theme="dark"] [data-pu-skin="grant_line_friend"] #save-btn {
    background: #06C755;
    color: #fff;
    box-shadow: 0 12px 30px rgba(6,199,85,0.4);
}
/* LINEのトーク吹き出しをイメージした丸いバッジ＋しっぽ */
[data-theme="dark"] [data-pu-skin="grant_line_friend"] #rank-letter {
    background: linear-gradient(135deg, #051209, #08200f);
    border-color: #06C755 !important;
    box-shadow: 0 0 0 4px #ffffff, 0 0 45px rgba(6,199,85,0.55);
    position: relative;
}
[data-theme="dark"] [data-pu-skin="grant_line_friend"] #rank-letter::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 4px solid transparent;
    border-top: 20px solid #06C755;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.35));
}
[data-theme="dark"] [data-pu-skin="grant_line_friend"] #rank-letter::before {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 27px;
    width: 0;
    height: 0;
    border-left: 19px solid transparent;
    border-right: 7px solid transparent;
    border-top: 23px solid #ffffff;
    z-index: -1;
}
[data-theme="dark"] [data-pu-skin="grant_line_friend"] .info-panel {
    background: linear-gradient(135deg, #081009, #0c1a10);
    border-color: #06C75530;
}
[data-theme="dark"] [data-pu-skin="grant_line_friend"] #ai-btn {
    background: #06C755;
    color: #fff;
}
[data-theme="dark"] [data-pu-skin="grant_line_friend"] #pu-header-badge {
    background: #ffffff;
    color: #06C755;
    font-weight: 900;
    border: 1.5px solid #06C755;
}

/* --- LINE友だち限定+（強化版）：緑白ストライプ＋トークバブルをさらに強調 --- */
[data-theme="dark"] [data-pu-skin="grant_line_friend_plus"] {
    --accent: #06C755;
    --card:   #0b1410;
    --border: #06C75570;
    --bg:     #04100a;
}
[data-theme="dark"] [data-pu-skin="grant_line_friend_plus"] .main-rank-card {
    background: repeating-linear-gradient(135deg, #0b1a12 0px, #0b1a12 18px, #0f2a1a 18px, #0f2a1a 36px);
    border-color: #06C75570;
    position: relative;
}
[data-theme="dark"] [data-pu-skin="grant_line_friend_plus"] .spec-row {
    background: linear-gradient(90deg, #071309 0%, #0e2013 100%);
    border-color: #06C75550;
}
[data-theme="dark"] [data-pu-skin="grant_line_friend_plus"] .st-ok {
    --st-ok-bg: rgba(6,199,85,0.16);
    border-left-color: #06C755;
    background: rgba(6,199,85,0.12);
}
[data-theme="dark"] [data-pu-skin="grant_line_friend_plus"] #save-btn {
    background: linear-gradient(135deg, #06C755, #04a047);
    color: #fff;
    box-shadow: 0 12px 34px rgba(6,199,85,0.55);
}
/* LINEのトーク吹き出し＋オンラインステータスのドットを追加した強化版バッジ */
[data-theme="dark"] [data-pu-skin="grant_line_friend_plus"] #rank-letter {
    background: radial-gradient(circle at 30% 25%, #0a2a15, #051209 70%);
    border-color: #06C755 !important;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 7px #06C755, 0 0 55px rgba(6,199,85,0.7);
    position: relative;
}
[data-theme="dark"] [data-pu-skin="grant_line_friend_plus"] #rank-letter::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 4px solid transparent;
    border-top: 20px solid #06C755;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.35));
}
[data-theme="dark"] [data-pu-skin="grant_line_friend_plus"] #rank-letter::before {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: inset 0 0 0 3px #06C755, 0 0 10px rgba(6,199,85,0.8);
    z-index: 2;
}
[data-theme="dark"] [data-pu-skin="grant_line_friend_plus"] .info-panel {
    background: repeating-linear-gradient(135deg, #081009 0px, #081009 14px, #0d1f11 14px, #0d1f11 28px);
    border-color: #06C75550;
}
[data-theme="dark"] [data-pu-skin="grant_line_friend_plus"] #ai-btn {
    background: linear-gradient(135deg, #06C755, #04a047);
    color: #fff;
}
[data-theme="dark"] [data-pu-skin="grant_line_friend_plus"] #pu-header-badge {
    background: #06C755;
    color: #fff;
    font-weight: 900;
    border: 1.5px solid #ffffff;
    box-shadow: 0 0 10px rgba(6,199,85,0.6);
}

/* --- プリズム・ロワイヤル（クーポン限定・超派手な虹色スキン） --- */
[data-theme="dark"] [data-pu-skin="grant_prism_royale"] {
    --accent: #c084fc;
    --card:   #140a20;
    --border: #ff67c455;
    --bg:     #0a0512;
}
[data-theme="dark"] [data-pu-skin="grant_prism_royale"] .main-rank-card {
    background:
        radial-gradient(circle at 15% 20%, rgba(255,0,110,0.35), transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(255,190,11,0.3), transparent 45%),
        radial-gradient(circle at 20% 85%, rgba(58,134,255,0.3), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(6,214,160,0.28), transparent 45%),
        linear-gradient(120deg, #2a0a30, #180a2e 35%, #0a1230 65%, #0a2a24 100%);
    border: 2px solid transparent;
    border-image: linear-gradient(120deg, #ff006e, #ffbe0b, #8338ec, #3a86ff, #06d6a0) 1;
    position: relative;
    box-shadow: 0 0 40px rgba(131,56,236,0.35), 0 0 70px rgba(255,0,110,0.2);
}
[data-theme="dark"] [data-pu-skin="grant_prism_royale"] .spec-row {
    background: linear-gradient(90deg, rgba(255,0,110,0.16) 0%, rgba(131,56,236,0.16) 50%, rgba(58,134,255,0.16) 100%), #150a22;
    border-color: #8338ec55;
    border-left: 8px solid #ffbe0b;
    border-image: linear-gradient(180deg, #ff006e, #ffbe0b, #8338ec, #3a86ff) 1;
    box-shadow: inset 0 0 20px rgba(131,56,236,0.15);
}
[data-theme="dark"] [data-pu-skin="grant_prism_royale"] .spec-row .val {
    background: linear-gradient(90deg, #ff67c4, #ffd166, #8338ec, #3a86ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}
/* 用途別スコアのカードにも動くグラデーションを適用。
   background-positionのアニメーションはSafari/iOSで省電力のため止められることがあるため、
   より確実に動くtransformベースの疑似要素方式に変更している。 */
[data-theme="dark"] [data-pu-skin="grant_prism_royale"] .usage-score-card {
    background: #0d0710 !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    box-shadow: 0 6px 22px rgba(131,56,236,0.4);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
[data-theme="dark"] [data-pu-skin="grant_prism_royale"] .usage-score-card::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -60%;
    width: 220%;
    height: 220%;
    background: conic-gradient(from 0deg, #ff006e, #fb5607, #ffbe0b, #8338ec, #3a86ff, #06d6a0, #ff006e);
    animation: puPrismCardSpin 8s linear infinite;
    z-index: 0;
}
[data-theme="dark"] [data-pu-skin="grant_prism_royale"] .usage-score-card > * {
    position: relative;
    z-index: 1;
}
@keyframes puLeaveFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes puPrismCardSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
[data-theme="dark"] [data-pu-skin="grant_prism_royale"] .st-ok {
    --st-ok-bg: rgba(255,190,11,0.16);
    border-left-color: #ffbe0b;
    background: rgba(131,56,236,0.14);
}
[data-theme="dark"] [data-pu-skin="grant_prism_royale"] #save-btn {
    background: linear-gradient(120deg, #ff006e, #fb5607, #ffbe0b, #8338ec, #3a86ff);
    background-size: 250% 100%;
    color: #fff;
    box-shadow: 0 12px 34px rgba(131,56,236,0.55);
    animation: puPrismShift 3.5s ease-in-out infinite;
}
[data-theme="dark"] [data-pu-skin="grant_prism_royale"] #rank-letter {
    background: linear-gradient(135deg, #1a0a24, #0a1230);
    border: 4px solid transparent !important;
    background-image:
        linear-gradient(135deg, #1a0a24, #0a1230),
        conic-gradient(from 0deg, #ff006e, #fb5607, #ffbe0b, #8338ec, #3a86ff, #06d6a0, #ff006e);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 0 0 4px #140a20, 0 0 60px rgba(131,56,236,0.7), 0 0 100px rgba(255,190,11,0.4);
    position: relative;
    animation: puPrismSpin 6s linear infinite;
}
[data-theme="dark"] [data-pu-skin="grant_prism_royale"] .info-panel {
    background: linear-gradient(120deg, #1c0a28, #0f1230 60%, #0a2a24 100%);
    border-color: #8338ec55;
}
[data-theme="dark"] [data-pu-skin="grant_prism_royale"] #ai-btn {
    background: linear-gradient(120deg, #ff006e, #8338ec, #3a86ff);
    color: #fff;
}
[data-theme="dark"] [data-pu-skin="grant_prism_royale"] #pu-header-badge {
    background: linear-gradient(120deg, #ff006e, #ffbe0b, #3a86ff);
    background-size: 200% 100%;
    color: #fff;
    font-weight: 900;
    border: 1.5px solid #ffffff;
    box-shadow: 0 0 12px rgba(255,190,11,0.6);
    animation: puPrismShift 3.5s ease-in-out infinite;
}
@keyframes puPrismShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@keyframes puPrismSpin {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* --- メダカ（クーポン限定・クリーム色の体×目の後ろの黒紺模様をイメージしたスキン） --- */
[data-theme="dark"] [data-pu-skin="grant_medaka"] {
    --accent: #22222e;
    --card:   #16130d;
    --border: #8b2e1f44;
    --bg:     #0d0c08;
}
[data-theme="dark"] [data-pu-skin="grant_medaka"] .main-rank-card {
    background: linear-gradient(135deg, #1e1c14 0%, #201d15 55%, #1a1a20 100%);
    border-color: #22222e55;
    position: relative;
}
[data-theme="dark"] [data-pu-skin="grant_medaka"] .spec-row {
    background: linear-gradient(90deg, #191710 0%, #16161c 100%);
    border-color: #8b2e1f33;
}
[data-theme="dark"] [data-pu-skin="grant_medaka"] .st-ok {
    --st-ok-bg: rgba(139,46,31,0.12);
    border-left-color: #8b2e1f;
    background: rgba(34,34,46,0.35);
}
[data-theme="dark"] [data-pu-skin="grant_medaka"] #save-btn {
    background: linear-gradient(120deg, #e8dcc0, #8b2e1f 45%, #22222e);
    color: #fff;
    box-shadow: 0 12px 30px rgba(34,34,46,0.5);
}
/* クリーム色の体＋目の後ろの黒紺の模様＋赤の差し色をイメージしたバッジ */
[data-theme="dark"] [data-pu-skin="grant_medaka"] #rank-letter {
    background: linear-gradient(100deg, #8b2e1f 0%, #8b2e1f 12%, #22222e 12%, #22222e 55%, #e8dcc0 55%, #e8dcc0 100%);
    border-color: #e8dcc0 !important;
    box-shadow: 0 0 0 4px #16130d, 0 0 45px rgba(139,46,31,0.35);
    position: relative;
}
[data-theme="dark"] [data-pu-skin="grant_medaka"] .info-panel {
    background: linear-gradient(135deg, #17150f, #1a1a20);
    border-color: #8b2e1f33;
}
[data-theme="dark"] [data-pu-skin="grant_medaka"] #ai-btn {
    background: linear-gradient(120deg, #8b2e1f, #22222e);
    color: #fff;
}
[data-theme="dark"] [data-pu-skin="grant_medaka"] #pu-header-badge {
    background: #e8dcc0;
    color: #22222e;
    font-weight: 900;
    border: 1.5px solid #8b2e1f;
}
[data-theme="dark"] [data-pu-skin="grant_medaka"] .usage-score-card {
    background: linear-gradient(135deg, #1e1c14 0%, #1a1a20 100%) !important;
    border: 1px solid #8b2e1f33 !important;
}

/* --- エメラルド スキン（隠しガチャ限定） --- */
[data-theme="dark"] [data-pu-skin="grant_hg_emerald"] {
    --accent: #10b981;
    --card:   #022c1f;
    --border: #10b98150;
    --bg:     #011a13;
}
[data-theme="dark"] [data-pu-skin="grant_hg_emerald"] .main-rank-card {
    background: linear-gradient(135deg, #022c1f 0%, #034a34 100%);
    border-color: #10b98150;
}
[data-theme="dark"] [data-pu-skin="grant_hg_emerald"] .spec-row {
    background: linear-gradient(90deg, #011a13 0%, #022c1f 100%);
    border-color: #10b98130;
}
[data-theme="dark"] [data-pu-skin="grant_hg_emerald"] .st-ok {
    --st-ok-bg: rgba(16,185,129,0.12);
    border-left-color: #10b981;
    background: rgba(16,185,129,0.09);
}
[data-theme="dark"] [data-pu-skin="grant_hg_emerald"] #save-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 12px 30px rgba(16,185,129,0.4);
}
[data-theme="dark"] [data-pu-skin="grant_hg_emerald"] #rank-letter {
    background: linear-gradient(135deg, #022c1f, #045539);
    border-color: #6ee7b7 !important;
    box-shadow: 0 0 40px rgba(16,185,129,0.5);
}
[data-theme="dark"] [data-pu-skin="grant_hg_emerald"] .info-panel {
    background: linear-gradient(135deg, #011a13, #022c1f);
    border-color: #10b98130;
}
[data-theme="dark"] [data-pu-skin="grant_hg_emerald"] #ai-btn {
    background: linear-gradient(135deg, #10b981, #059669);
}
[data-theme="dark"] [data-pu-skin="grant_hg_emerald"] #pu-header-badge {
    background: linear-gradient(135deg, #10b981, #059669);
}

/* --- シークレット スキン（隠しガチャ限定・レジェンダリー） --- */
[data-theme="dark"] [data-pu-skin="grant_hg_secret"] {
    --accent: #06C755;
    --card:   #050505;
    --border: #06C75560;
    --bg:     #000000;
}
[data-theme="dark"] [data-pu-skin="grant_hg_secret"] .main-rank-card {
    background: linear-gradient(135deg, #000000 0%, #0a1410 100%);
    border-color: #06C75560;
    box-shadow: 0 0 50px rgba(6,199,85,0.15) inset;
}
[data-theme="dark"] [data-pu-skin="grant_hg_secret"] .spec-row {
    background: linear-gradient(90deg, #000000 0%, #0a0f0c 100%);
    border-color: #06C75540;
}
[data-theme="dark"] [data-pu-skin="grant_hg_secret"] .st-ok {
    --st-ok-bg: rgba(6,199,85,0.1);
    border-left-color: #ffffff;
    background: rgba(6,199,85,0.08);
}
[data-theme="dark"] [data-pu-skin="grant_hg_secret"] #save-btn {
    background: linear-gradient(135deg, #000000, #06C755);
    box-shadow: 0 12px 35px rgba(6,199,85,0.45);
    border: 1px solid #ffffff30;
}
[data-theme="dark"] [data-pu-skin="grant_hg_secret"] #rank-letter {
    background: #000000;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 3px #06C755, 0 0 50px rgba(6,199,85,0.6);
}
[data-theme="dark"] [data-pu-skin="grant_hg_secret"] .info-panel {
    background: linear-gradient(135deg, #000000, #060c09);
    border-color: #06C75540;
}
[data-theme="dark"] [data-pu-skin="grant_hg_secret"] #ai-btn {
    background: linear-gradient(135deg, #000000, #06C755);
    border: 1px solid #ffffff30;
}
[data-theme="dark"] [data-pu-skin="grant_hg_secret"] #pu-header-badge {
    background: #000000;
    color: #06C755;
    border: 1.5px solid #06C755;
    font-weight: 900;
}

/* --- ジェイド スキン（隠しガチャ限定） --- */
[data-theme="dark"] [data-pu-skin="grant_hg_jade"] {
    --accent: #059669;
    --card:   #022c1f;
    --border: #05966950;
    --bg:     #011a13;
}
[data-theme="dark"] [data-pu-skin="grant_hg_jade"] .main-rank-card {
    background: linear-gradient(135deg, #022c1f 0%, #013d2b 100%);
    border-color: #05966950;
}
[data-theme="dark"] [data-pu-skin="grant_hg_jade"] .spec-row {
    background: linear-gradient(90deg, #011a13 0%, #022c1f 100%);
    border-color: #05966930;
}
[data-theme="dark"] [data-pu-skin="grant_hg_jade"] .st-ok {
    --st-ok-bg: rgba(5,150,105,0.12);
    border-left-color: #4ade80;
    background: rgba(5,150,105,0.09);
}
[data-theme="dark"] [data-pu-skin="grant_hg_jade"] #save-btn {
    background: linear-gradient(135deg, #059669, #4ade80);
    box-shadow: 0 12px 30px rgba(5,150,105,0.4);
}
[data-theme="dark"] [data-pu-skin="grant_hg_jade"] #rank-letter {
    background: linear-gradient(135deg, #022c1f, #013d2b);
    border-color: #4ade80 !important;
    box-shadow: 0 0 40px rgba(5,150,105,0.5);
}
[data-theme="dark"] [data-pu-skin="grant_hg_jade"] .info-panel {
    background: linear-gradient(135deg, #011a13, #022c1f);
    border-color: #05966930;
}
[data-theme="dark"] [data-pu-skin="grant_hg_jade"] #ai-btn {
    background: linear-gradient(135deg, #059669, #4ade80);
}
[data-theme="dark"] [data-pu-skin="grant_hg_jade"] #pu-header-badge {
    background: linear-gradient(135deg, #059669, #4ade80);
}

/* --- Diamond スキン --- */
[data-theme="dark"] [data-pu-skin="diamond"] {
    --accent: #67e8f9;
    --card:   #020d14;
    --border: #0c2a3a;
    --bg:     #010810;
}
[data-theme="dark"] [data-pu-skin="diamond"] .main-rank-card {
    background: linear-gradient(135deg, #021018 0%, #031824 100%);
    border-color: #0e3a50;
}
[data-theme="dark"] [data-pu-skin="diamond"] .spec-row {
    background: linear-gradient(90deg, #010c14 0%, #031520 100%);
    border-color: #0c2a3a;
}
[data-theme="dark"] [data-pu-skin="diamond"] .st-ok {
    --st-ok-bg: rgba(103,232,249,0.09);
    border-left-color: #67e8f9;
    background: rgba(103,232,249,0.06);
}
[data-theme="dark"] [data-pu-skin="diamond"] #save-btn {
    background: linear-gradient(135deg, #0ea5e9, #67e8f9);
    color: #000;
    box-shadow: 0 12px 35px rgba(103,232,249,0.3);
}
[data-theme="dark"] [data-pu-skin="diamond"] #rank-letter {
    background: linear-gradient(135deg, #021018, #04202e);
    border-color: #67e8f9 !important;
    box-shadow: 0 0 40px rgba(103,232,249,0.35), 0 0 80px rgba(14,165,233,0.15);
}
[data-theme="dark"] [data-pu-skin="diamond"] .info-panel {
    background: linear-gradient(135deg, #010c14, #020e18);
    border-color: #0c2a3a;
}


/* --- Neon スキン（ポイント限定） --- */
[data-theme="dark"] [data-pu-skin="neon"] {
    --accent: #00ff88;
    --card:   #001a0f;
    --border: #003d1f;
    --bg:     #00100a;
}
[data-theme="dark"] [data-pu-skin="neon"] .main-rank-card {
    background: linear-gradient(135deg, #001a0f 0%, #002a18 100%);
    border-color: #005a2a;
}
[data-theme="dark"] [data-pu-skin="neon"] .spec-row {
    background: linear-gradient(90deg, #001208 0%, #001e10 100%);
    border-color: #003d1f;
}
[data-theme="dark"] [data-pu-skin="neon"] .st-ok {
    --st-ok-bg: rgba(0,255,136,0.09);
    border-left-color: #00ff88;
    background: rgba(0,255,136,0.07);
}
[data-theme="dark"] [data-pu-skin="neon"] #save-btn {
    background: linear-gradient(135deg, #00ff88, #00ccff);
    color: #000;
    box-shadow: 0 12px 35px rgba(0,255,136,0.4);
}
[data-theme="dark"] [data-pu-skin="neon"] #rank-letter {
    background: linear-gradient(135deg, #001a0f, #002a18);
    border-color: #00ff88 !important;
    box-shadow: 0 0 40px rgba(0,255,136,0.5), 0 0 80px rgba(0,204,255,0.2);
}
[data-theme="dark"] [data-pu-skin="neon"] .info-panel {
    background: linear-gradient(135deg, #000f07, #00121a);
    border-color: #003d1f;
}
[data-theme="dark"] [data-pu-skin="neon"] #ai-btn {
    background: linear-gradient(135deg, #00ff88, #00ccff);
    color: #000;
}
[data-theme="dark"] [data-pu-skin="neon"] #pu-header-badge {
    background: linear-gradient(135deg, #00ff88, #00ccff);
    color: #000;
}

/* --- Sakura スキン（ポイント限定） --- */
[data-theme="dark"] [data-pu-skin="sakura"] {
    --accent: #ff6b9d;
    --card:   #1a000d;
    --border: #3d0020;
    --bg:     #100008;
}
[data-theme="dark"] [data-pu-skin="sakura"] .main-rank-card {
    background: linear-gradient(135deg, #1a000d 0%, #2a0018 100%);
    border-color: #5a0030;
}
[data-theme="dark"] [data-pu-skin="sakura"] .spec-row {
    background: linear-gradient(90deg, #12000a 0%, #1e0012 100%);
    border-color: #3d0020;
}
[data-theme="dark"] [data-pu-skin="sakura"] .st-ok {
    --st-ok-bg: rgba(255,107,157,0.09);
    border-left-color: #ff6b9d;
    background: rgba(255,107,157,0.07);
}
[data-theme="dark"] [data-pu-skin="sakura"] #save-btn {
    background: linear-gradient(135deg, #ff6b9d, #ffb7d5);
    color: #000;
    box-shadow: 0 12px 35px rgba(255,107,157,0.4);
}
[data-theme="dark"] [data-pu-skin="sakura"] #rank-letter {
    background: linear-gradient(135deg, #1a000d, #2d0018);
    border-color: #ff6b9d !important;
    box-shadow: 0 0 40px rgba(255,107,157,0.45), 0 0 80px rgba(255,183,213,0.2);
}
[data-theme="dark"] [data-pu-skin="sakura"] .info-panel {
    background: linear-gradient(135deg, #100008, #1a000d);
    border-color: #3d0020;
}
[data-theme="dark"] [data-pu-skin="sakura"] #ai-btn {
    background: linear-gradient(135deg, #ff6b9d, #ffb7d5);
    color: #000;
}
[data-theme="dark"] [data-pu-skin="sakura"] #pu-header-badge {
    background: linear-gradient(135deg, #ff6b9d, #ffb7d5);
    color: #000;
}

/* --- Midnight スキン（ポイント限定） --- */
[data-theme="dark"] [data-pu-skin="midnight"] {
    --accent: #a78bfa;
    --card:   #0a0812;
    --border: #1e1a35;
    --bg:     #060410;
}
[data-theme="dark"] [data-pu-skin="midnight"] .main-rank-card {
    background: linear-gradient(135deg, #0d0a1f 0%, #151030 100%);
    border-color: #2a2450;
}
[data-theme="dark"] [data-pu-skin="midnight"] .spec-row {
    background: linear-gradient(90deg, #080616 0%, #0f0c25 100%);
    border-color: #1e1a35;
}
[data-theme="dark"] [data-pu-skin="midnight"] .st-ok {
    --st-ok-bg: rgba(167,139,250,0.09);
    border-left-color: #a78bfa;
    background: rgba(167,139,250,0.07);
}
[data-theme="dark"] [data-pu-skin="midnight"] #save-btn {
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    color: #000;
    box-shadow: 0 12px 35px rgba(167,139,250,0.4);
}
[data-theme="dark"] [data-pu-skin="midnight"] #rank-letter {
    background: linear-gradient(135deg, #0d0a1f, #1a1540);
    border-color: #a78bfa !important;
    box-shadow: 0 0 40px rgba(167,139,250,0.4), 0 0 80px rgba(96,165,250,0.15);
}
[data-theme="dark"] [data-pu-skin="midnight"] .info-panel {
    background: linear-gradient(135deg, #060410, #0a0820);
    border-color: #1e1a35;
}
[data-theme="dark"] [data-pu-skin="midnight"] #ai-btn {
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    color: #000;
}
[data-theme="dark"] [data-pu-skin="midnight"] #pu-header-badge {
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    color: #000;
}


/* --- Legend スキン（全購入隠し解放） --- */
[data-theme="dark"] [data-pu-skin="legend"] {
    --accent: #ffd700;
    --st-ok-bg: rgba(255,215,0,0.09);
    --card:   #0f0a00;
    --border: #3d2e00;
    --bg:     #080500;
}
[data-theme="dark"] [data-pu-skin="legend"] .main-rank-card {
    background: linear-gradient(135deg, #1a0f00 0%, #0a0020 50%, #001a1a 100%);
    border-color: #5a4000;
}
[data-theme="dark"] [data-pu-skin="legend"] .spec-row {
    background: linear-gradient(90deg, #0f0800 0%, #0a0515 50%, #001010 100%);
    border-color: #3d2e00;
}
[data-theme="dark"] [data-pu-skin="legend"] .st-ok {
    border-left-color: #ffd700;
    background: rgba(255,215,0,0.09);
}
[data-theme="dark"] [data-pu-skin="legend"] #save-btn {
    background: linear-gradient(135deg, #ffd700, #ff6b6b, #c77dff, #00d4ff);
    color: #000;
    box-shadow: 0 12px 35px rgba(255,215,0,0.5);
}
[data-theme="dark"] [data-pu-skin="legend"] #rank-letter {
    background: linear-gradient(135deg, #1a0f00, #0a0020);
    border-color: #ffd700 !important;
    box-shadow: 0 0 50px rgba(255,215,0,0.6), 0 0 100px rgba(199,125,255,0.3);
}
[data-theme="dark"] [data-pu-skin="legend"] .info-panel {
    background: linear-gradient(135deg, #0f0800, #0a0020);
    border-color: #3d2e00;
}
[data-theme="dark"] [data-pu-skin="legend"] #pu-header-badge {
    background: linear-gradient(135deg, #ffd700, #ff6b6b, #c77dff, #00d4ff);
    color: #000;
}

/* --- ProUltra バッジ（ヘッダー） --- */
#pu-header-badge {
    display: none;
    font-size: 0.7rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 20px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
[data-theme="dark"] [data-pu-skin="aurora"] #pu-header-badge {
    background: linear-gradient(135deg, #7c3aed, #db2777);
}
[data-theme="dark"] [data-pu-skin="diamond"] #pu-header-badge {
    background: linear-gradient(135deg, #0ea5e9, #67e8f9);
    color: #000;
}

/* ══ ガチャスキン 21種 ══════════════════════════════════════════ */

/* --- Fire スキン --- */
[data-theme="dark"] [data-pu-skin="fire"] { --accent:#ff4500; --card:#150500; --border:#4a1500; --bg:#0a0200; }
[data-theme="dark"] [data-pu-skin="fire"] .main-rank-card { background:linear-gradient(135deg,#1a0800,#2d1000); border-color:#5a1800; }
[data-theme="dark"] [data-pu-skin="fire"] .spec-row { background:linear-gradient(90deg,#110500,#1f0a00); border-color:#4a1500; }
[data-theme="dark"] [data-pu-skin="fire"] .st-ok { --st-ok-bg:rgba(255,69,0,0.09); border-left-color:#ff4500; background:rgba(255,69,0,0.07); }
[data-theme="dark"] [data-pu-skin="fire"] #save-btn { background:linear-gradient(135deg,#ff4500,#ff8c00); box-shadow:0 12px 35px rgba(255,69,0,0.35); }
[data-theme="dark"] [data-pu-skin="fire"] #rank-letter { background:linear-gradient(135deg,#1a0800,#2d1000); border-color:#ff4500 !important; box-shadow:0 0 40px rgba(255,69,0,0.4); }
[data-theme="dark"] [data-pu-skin="fire"] #pu-header-badge { background:linear-gradient(135deg,#ff4500,#ff8c00); }

/* --- Ocean スキン --- */
[data-theme="dark"] [data-pu-skin="ocean"] { --accent:#00bcd4; --card:#000d14; --border:#003040; --bg:#000810; }
[data-theme="dark"] [data-pu-skin="ocean"] .main-rank-card { background:linear-gradient(135deg,#001520,#002535); border-color:#004060; }
[data-theme="dark"] [data-pu-skin="ocean"] .spec-row { background:linear-gradient(90deg,#001020,#001a30); border-color:#003040; }
[data-theme="dark"] [data-pu-skin="ocean"] .st-ok { --st-ok-bg:rgba(0,188,212,0.09); border-left-color:#00bcd4; background:rgba(0,188,212,0.07); }
[data-theme="dark"] [data-pu-skin="ocean"] #save-btn { background:linear-gradient(135deg,#006994,#00bcd4); box-shadow:0 12px 35px rgba(0,188,212,0.35); }
[data-theme="dark"] [data-pu-skin="ocean"] #rank-letter { background:linear-gradient(135deg,#001520,#002535); border-color:#00bcd4 !important; box-shadow:0 0 40px rgba(0,188,212,0.4); }
[data-theme="dark"] [data-pu-skin="ocean"] #pu-header-badge { background:linear-gradient(135deg,#006994,#00bcd4); }

/* --- Forest スキン --- */
[data-theme="dark"] [data-pu-skin="forest"] { --accent:#22c55e; --card:#001208; --border:#003318; --bg:#000d05; }
[data-theme="dark"] [data-pu-skin="forest"] .main-rank-card { background:linear-gradient(135deg,#001f0e,#003018); border-color:#004a22; }
[data-theme="dark"] [data-pu-skin="forest"] .spec-row { background:linear-gradient(90deg,#001508,#002010); border-color:#003318; }
[data-theme="dark"] [data-pu-skin="forest"] .st-ok { --st-ok-bg:rgba(34,197,94,0.09); border-left-color:#22c55e; background:rgba(34,197,94,0.07); }
[data-theme="dark"] [data-pu-skin="forest"] #save-btn { background:linear-gradient(135deg,#15803d,#22c55e); box-shadow:0 12px 35px rgba(34,197,94,0.35); }
[data-theme="dark"] [data-pu-skin="forest"] #rank-letter { background:linear-gradient(135deg,#001f0e,#003018); border-color:#22c55e !important; box-shadow:0 0 40px rgba(34,197,94,0.4); }
[data-theme="dark"] [data-pu-skin="forest"] #pu-header-badge { background:linear-gradient(135deg,#15803d,#22c55e); }

/* --- Lava スキン --- */
[data-theme="dark"] [data-pu-skin="lava"] { --accent:#ef4444; --card:#150005; --border:#450010; --bg:#0a0003; }
[data-theme="dark"] [data-pu-skin="lava"] .main-rank-card { background:linear-gradient(135deg,#200008,#380010); border-color:#600018; }
[data-theme="dark"] [data-pu-skin="lava"] .spec-row { background:linear-gradient(90deg,#180005,#280008); border-color:#450010; }
[data-theme="dark"] [data-pu-skin="lava"] .st-ok { --st-ok-bg:rgba(239,68,68,0.09); border-left-color:#ef4444; background:rgba(239,68,68,0.07); }
[data-theme="dark"] [data-pu-skin="lava"] #save-btn { background:linear-gradient(135deg,#b91c1c,#ef4444); box-shadow:0 12px 35px rgba(239,68,68,0.35); }
[data-theme="dark"] [data-pu-skin="lava"] #rank-letter { background:linear-gradient(135deg,#200008,#380010); border-color:#ef4444 !important; box-shadow:0 0 40px rgba(239,68,68,0.4); }
[data-theme="dark"] [data-pu-skin="lava"] #pu-header-badge { background:linear-gradient(135deg,#b91c1c,#ef4444); }

/* --- Ice スキン --- */
[data-theme="dark"] [data-pu-skin="ice"] { --accent:#bae6fd; --card:#000d18; --border:#002040; --bg:#00080f; }
[data-theme="dark"] [data-pu-skin="ice"] .main-rank-card { background:linear-gradient(135deg,#001828,#002840); border-color:#003860; }
[data-theme="dark"] [data-pu-skin="ice"] .spec-row { background:linear-gradient(90deg,#001020,#001830); border-color:#002040; }
[data-theme="dark"] [data-pu-skin="ice"] .st-ok { --st-ok-bg:rgba(186,230,253,0.09); border-left-color:#38bdf8; background:rgba(186,230,253,0.07); }
[data-theme="dark"] [data-pu-skin="ice"] #save-btn { background:linear-gradient(135deg,#0284c7,#38bdf8); box-shadow:0 12px 35px rgba(56,189,248,0.35); }
[data-theme="dark"] [data-pu-skin="ice"] #rank-letter { background:linear-gradient(135deg,#001828,#002840); border-color:#bae6fd !important; box-shadow:0 0 40px rgba(186,230,253,0.4); }
[data-theme="dark"] [data-pu-skin="ice"] #pu-header-badge { background:linear-gradient(135deg,#0284c7,#38bdf8); }

/* --- Sunset スキン --- */
[data-theme="dark"] [data-pu-skin="sunset"] { --accent:#f97316; --card:#150800; --border:#452000; --bg:#0a0500; }
[data-theme="dark"] [data-pu-skin="sunset"] .main-rank-card { background:linear-gradient(135deg,#1f0d00,#301500); border-color:#5a2800; }
[data-theme="dark"] [data-pu-skin="sunset"] .spec-row { background:linear-gradient(90deg,#170900,#250f00); border-color:#452000; }
[data-theme="dark"] [data-pu-skin="sunset"] .st-ok { --st-ok-bg:rgba(249,115,22,0.09); border-left-color:#f97316; background:rgba(249,115,22,0.07); }
[data-theme="dark"] [data-pu-skin="sunset"] #save-btn { background:linear-gradient(135deg,#ea580c,#f97316,#fbbf24); box-shadow:0 12px 35px rgba(249,115,22,0.35); }
[data-theme="dark"] [data-pu-skin="sunset"] #rank-letter { background:linear-gradient(135deg,#1f0d00,#301500); border-color:#f97316 !important; box-shadow:0 0 40px rgba(249,115,22,0.4); }
[data-theme="dark"] [data-pu-skin="sunset"] #pu-header-badge { background:linear-gradient(135deg,#ea580c,#fbbf24); }

/* --- Cyber スキン --- */
[data-theme="dark"] [data-pu-skin="cyber"] { --accent:#00ff41; --card:#000d00; --border:#002800; --bg:#000800; }
[data-theme="dark"] [data-pu-skin="cyber"] .main-rank-card { background:linear-gradient(135deg,#001500,#002000); border-color:#003800; }
[data-theme="dark"] [data-pu-skin="cyber"] .spec-row { background:linear-gradient(90deg,#001000,#001800); border-color:#002800; }
[data-theme="dark"] [data-pu-skin="cyber"] .st-ok { --st-ok-bg:rgba(0,255,65,0.09); border-left-color:#00ff41; background:rgba(0,255,65,0.07); }
[data-theme="dark"] [data-pu-skin="cyber"] #save-btn { background:linear-gradient(135deg,#00b300,#00ff41); box-shadow:0 12px 35px rgba(0,255,65,0.35); }
[data-theme="dark"] [data-pu-skin="cyber"] #rank-letter { background:linear-gradient(135deg,#001500,#002000); border-color:#00ff41 !important; box-shadow:0 0 40px rgba(0,255,65,0.4); }
[data-theme="dark"] [data-pu-skin="cyber"] #pu-header-badge { background:linear-gradient(135deg,#00b300,#00ff41); color:#000; }

/* --- Galaxy スキン --- */
[data-theme="dark"] [data-pu-skin="galaxy"] { --accent:#818cf8; --card:#04001a; --border:#150040; --bg:#020010; }
[data-theme="dark"] [data-pu-skin="galaxy"] .main-rank-card { background:linear-gradient(135deg,#080028,#0f0040); border-color:#200060; }
[data-theme="dark"] [data-pu-skin="galaxy"] .spec-row { background:linear-gradient(90deg,#060020,#0c0035); border-color:#150040; }
[data-theme="dark"] [data-pu-skin="galaxy"] .st-ok { --st-ok-bg:rgba(129,140,248,0.09); border-left-color:#818cf8; background:rgba(129,140,248,0.07); }
[data-theme="dark"] [data-pu-skin="galaxy"] #save-btn { background:linear-gradient(135deg,#4f46e5,#818cf8); box-shadow:0 12px 35px rgba(129,140,248,0.35); }
[data-theme="dark"] [data-pu-skin="galaxy"] #rank-letter { background:linear-gradient(135deg,#080028,#0f0040); border-color:#818cf8 !important; box-shadow:0 0 40px rgba(129,140,248,0.4); }
[data-theme="dark"] [data-pu-skin="galaxy"] #pu-header-badge { background:linear-gradient(135deg,#4f46e5,#818cf8); }

/* --- Cherry スキン --- */
[data-theme="dark"] [data-pu-skin="cherry"] { --accent:#e11d48; --card:#150008; --border:#45001a; --bg:#0a0005; }
[data-theme="dark"] [data-pu-skin="cherry"] .main-rank-card { background:linear-gradient(135deg,#200010,#380018); border-color:#600025; }
[data-theme="dark"] [data-pu-skin="cherry"] .spec-row { background:linear-gradient(90deg,#180008,#280012); border-color:#45001a; }
[data-theme="dark"] [data-pu-skin="cherry"] .st-ok { --st-ok-bg:rgba(225,29,72,0.09); border-left-color:#e11d48; background:rgba(225,29,72,0.07); }
[data-theme="dark"] [data-pu-skin="cherry"] #save-btn { background:linear-gradient(135deg,#be123c,#e11d48); box-shadow:0 12px 35px rgba(225,29,72,0.35); }
[data-theme="dark"] [data-pu-skin="cherry"] #rank-letter { background:linear-gradient(135deg,#200010,#380018); border-color:#e11d48 !important; box-shadow:0 0 40px rgba(225,29,72,0.4); }
[data-theme="dark"] [data-pu-skin="cherry"] #pu-header-badge { background:linear-gradient(135deg,#be123c,#e11d48); }

/* --- Sand スキン --- */
[data-theme="dark"] [data-pu-skin="sand"] { --accent:#d4a96a; --card:#120d00; --border:#3d2d00; --bg:#0a0800; }
[data-theme="dark"] [data-pu-skin="sand"] .main-rank-card { background:linear-gradient(135deg,#1a1400,#2a2000); border-color:#503800; }
[data-theme="dark"] [data-pu-skin="sand"] .spec-row { background:linear-gradient(90deg,#140f00,#201800); border-color:#3d2d00; }
[data-theme="dark"] [data-pu-skin="sand"] .st-ok { --st-ok-bg:rgba(212,169,106,0.09); border-left-color:#d4a96a; background:rgba(212,169,106,0.07); }
[data-theme="dark"] [data-pu-skin="sand"] #save-btn { background:linear-gradient(135deg,#92400e,#d4a96a); box-shadow:0 12px 35px rgba(212,169,106,0.3); }
[data-theme="dark"] [data-pu-skin="sand"] #rank-letter { background:linear-gradient(135deg,#1a1400,#2a2000); border-color:#d4a96a !important; box-shadow:0 0 40px rgba(212,169,106,0.35); }
[data-theme="dark"] [data-pu-skin="sand"] #pu-header-badge { background:linear-gradient(135deg,#92400e,#d4a96a); }

/* --- Void スキン --- */
[data-theme="dark"] [data-pu-skin="void"] { --accent:#6b21a8; --card:#080010; --border:#1a0030; --bg:#040008; }
[data-theme="dark"] [data-pu-skin="void"] .main-rank-card { background:linear-gradient(135deg,#0f0020,#180035); border-color:#2d0058; }
[data-theme="dark"] [data-pu-skin="void"] .spec-row { background:linear-gradient(90deg,#0c0018,#140028); border-color:#1a0030; }
[data-theme="dark"] [data-pu-skin="void"] .st-ok { --st-ok-bg:rgba(147,51,234,0.09); border-left-color:#9333ea; background:rgba(147,51,234,0.07); }
[data-theme="dark"] [data-pu-skin="void"] #save-btn { background:linear-gradient(135deg,#6b21a8,#9333ea); box-shadow:0 12px 35px rgba(147,51,234,0.35); }
[data-theme="dark"] [data-pu-skin="void"] #rank-letter { background:linear-gradient(135deg,#0f0020,#180035); border-color:#9333ea !important; box-shadow:0 0 40px rgba(147,51,234,0.4); }
[data-theme="dark"] [data-pu-skin="void"] #pu-header-badge { background:linear-gradient(135deg,#6b21a8,#9333ea); }

/* --- Rose スキン --- */
[data-theme="dark"] [data-pu-skin="rose"] { --accent:#fb7185; --card:#150008; --border:#40001a; --bg:#0a0005; }
[data-theme="dark"] [data-pu-skin="rose"] .main-rank-card { background:linear-gradient(135deg,#200012,#350020); border-color:#580030; }
[data-theme="dark"] [data-pu-skin="rose"] .spec-row { background:linear-gradient(90deg,#18000e,#280018); border-color:#40001a; }
[data-theme="dark"] [data-pu-skin="rose"] .st-ok { --st-ok-bg:rgba(251,113,133,0.09); border-left-color:#fb7185; background:rgba(251,113,133,0.07); }
[data-theme="dark"] [data-pu-skin="rose"] #save-btn { background:linear-gradient(135deg,#e11d48,#fb7185); box-shadow:0 12px 35px rgba(251,113,133,0.35); }
[data-theme="dark"] [data-pu-skin="rose"] #rank-letter { background:linear-gradient(135deg,#200012,#350020); border-color:#fb7185 !important; box-shadow:0 0 40px rgba(251,113,133,0.4); }
[data-theme="dark"] [data-pu-skin="rose"] #pu-header-badge { background:linear-gradient(135deg,#e11d48,#fb7185); }

/* --- Teal スキン --- */
[data-theme="dark"] [data-pu-skin="teal"] { --accent:#14b8a6; --card:#001210; --border:#003530; --bg:#000c0a; }
[data-theme="dark"] [data-pu-skin="teal"] .main-rank-card { background:linear-gradient(135deg,#001e1a,#003028); border-color:#004840; }
[data-theme="dark"] [data-pu-skin="teal"] .spec-row { background:linear-gradient(90deg,#001512,#002220); border-color:#003530; }
[data-theme="dark"] [data-pu-skin="teal"] .st-ok { --st-ok-bg:rgba(20,184,166,0.09); border-left-color:#14b8a6; background:rgba(20,184,166,0.07); }
[data-theme="dark"] [data-pu-skin="teal"] #save-btn { background:linear-gradient(135deg,#0f766e,#14b8a6); box-shadow:0 12px 35px rgba(20,184,166,0.35); }
[data-theme="dark"] [data-pu-skin="teal"] #rank-letter { background:linear-gradient(135deg,#001e1a,#003028); border-color:#14b8a6 !important; box-shadow:0 0 40px rgba(20,184,166,0.4); }
[data-theme="dark"] [data-pu-skin="teal"] #pu-header-badge { background:linear-gradient(135deg,#0f766e,#14b8a6); }

/* --- Amber スキン --- */
[data-theme="dark"] [data-pu-skin="amber"] { --accent:#fbbf24; --card:#130d00; --border:#3d2800; --bg:#0a0800; }
[data-theme="dark"] [data-pu-skin="amber"] .main-rank-card { background:linear-gradient(135deg,#1c1300,#2d1f00); border-color:#503400; }
[data-theme="dark"] [data-pu-skin="amber"] .spec-row { background:linear-gradient(90deg,#160f00,#221800); border-color:#3d2800; }
[data-theme="dark"] [data-pu-skin="amber"] .st-ok { --st-ok-bg:rgba(251,191,36,0.09); border-left-color:#fbbf24; background:rgba(251,191,36,0.07); }
[data-theme="dark"] [data-pu-skin="amber"] #save-btn { background:linear-gradient(135deg,#d97706,#fbbf24); box-shadow:0 12px 35px rgba(251,191,36,0.35); }
[data-theme="dark"] [data-pu-skin="amber"] #rank-letter { background:linear-gradient(135deg,#1c1300,#2d1f00); border-color:#fbbf24 !important; box-shadow:0 0 40px rgba(251,191,36,0.4); }
[data-theme="dark"] [data-pu-skin="amber"] #pu-header-badge { background:linear-gradient(135deg,#d97706,#fbbf24); color:#000; }

/* --- Retro スキン --- */
[data-theme="dark"] [data-pu-skin="retro"] { --accent:#a3e635; --card:#0a0d00; --border:#283300; --bg:#060800; }
[data-theme="dark"] [data-pu-skin="retro"] .main-rank-card { background:linear-gradient(135deg,#101500,#182000); border-color:#353f00; }
[data-theme="dark"] [data-pu-skin="retro"] .spec-row { background:linear-gradient(90deg,#0c1000,#141a00); border-color:#283300; }
[data-theme="dark"] [data-pu-skin="retro"] .st-ok { --st-ok-bg:rgba(163,230,53,0.09); border-left-color:#a3e635; background:rgba(163,230,53,0.07); }
[data-theme="dark"] [data-pu-skin="retro"] #save-btn { background:linear-gradient(135deg,#65a30d,#a3e635); box-shadow:0 12px 35px rgba(163,230,53,0.35); color:#000; }
[data-theme="dark"] [data-pu-skin="retro"] #rank-letter { background:linear-gradient(135deg,#101500,#182000); border-color:#a3e635 !important; box-shadow:0 0 40px rgba(163,230,53,0.4); }
[data-theme="dark"] [data-pu-skin="retro"] #pu-header-badge { background:linear-gradient(135deg,#65a30d,#a3e635); color:#000; }

/* --- Toxic スキン --- */
[data-theme="dark"] [data-pu-skin="toxic"] { --accent:#84cc16; --card:#080d00; --border:#202d00; --bg:#040800; }
[data-theme="dark"] [data-pu-skin="toxic"] .main-rank-card { background:linear-gradient(135deg,#0f1500,#182200); border-color:#2d3d00; }
[data-theme="dark"] [data-pu-skin="toxic"] .spec-row { background:linear-gradient(90deg,#0a0f00,#131b00); border-color:#202d00; }
[data-theme="dark"] [data-pu-skin="toxic"] .st-ok { --st-ok-bg:rgba(132,204,22,0.09); border-left-color:#84cc16; background:rgba(132,204,22,0.07); }
[data-theme="dark"] [data-pu-skin="toxic"] #save-btn { background:linear-gradient(135deg,#4d7c0f,#84cc16,#bef264); box-shadow:0 12px 35px rgba(132,204,22,0.35); color:#000; }
[data-theme="dark"] [data-pu-skin="toxic"] #rank-letter { background:linear-gradient(135deg,#0f1500,#182200); border-color:#84cc16 !important; box-shadow:0 0 40px rgba(132,204,22,0.4); }
[data-theme="dark"] [data-pu-skin="toxic"] #pu-header-badge { background:linear-gradient(135deg,#4d7c0f,#84cc16); color:#000; }

/* --- Silver スキン --- */
[data-theme="dark"] [data-pu-skin="silver"] { --accent:#94a3b8; --card:#0d0f12; --border:#2a2d35; --bg:#080a0d; }
[data-theme="dark"] [data-pu-skin="silver"] .main-rank-card { background:linear-gradient(135deg,#131620,#1c2030); border-color:#353a4a; }
[data-theme="dark"] [data-pu-skin="silver"] .spec-row { background:linear-gradient(90deg,#10121a,#181c28); border-color:#2a2d35; }
[data-theme="dark"] [data-pu-skin="silver"] .st-ok { --st-ok-bg:rgba(148,163,184,0.09); border-left-color:#94a3b8; background:rgba(148,163,184,0.07); }
[data-theme="dark"] [data-pu-skin="silver"] #save-btn { background:linear-gradient(135deg,#475569,#94a3b8); box-shadow:0 12px 35px rgba(148,163,184,0.3); }
[data-theme="dark"] [data-pu-skin="silver"] #rank-letter { background:linear-gradient(135deg,#131620,#1c2030); border-color:#94a3b8 !important; box-shadow:0 0 40px rgba(148,163,184,0.35); }
[data-theme="dark"] [data-pu-skin="silver"] #pu-header-badge { background:linear-gradient(135deg,#475569,#94a3b8); }

/* --- Horizon スキン --- */
[data-theme="dark"] [data-pu-skin="horizon"] { --accent:#fb923c; --card:#120800; --border:#3d1f00; --bg:#090500; }
[data-theme="dark"] [data-pu-skin="horizon"] .main-rank-card { background:linear-gradient(135deg,#1d0e00,#2f1800); border-color:#502a00; }
[data-theme="dark"] [data-pu-skin="horizon"] .spec-row { background:linear-gradient(90deg,#160a00,#231200); border-color:#3d1f00; }
[data-theme="dark"] [data-pu-skin="horizon"] .st-ok { --st-ok-bg:rgba(251,146,60,0.09); border-left-color:#fb923c; background:rgba(251,146,60,0.07); }
[data-theme="dark"] [data-pu-skin="horizon"] #save-btn { background:linear-gradient(135deg,#ea580c,#fb923c,#fde68a); box-shadow:0 12px 35px rgba(251,146,60,0.35); color:#000; }
[data-theme="dark"] [data-pu-skin="horizon"] #rank-letter { background:linear-gradient(135deg,#1d0e00,#2f1800); border-color:#fb923c !important; box-shadow:0 0 40px rgba(251,146,60,0.4); }
[data-theme="dark"] [data-pu-skin="horizon"] #pu-header-badge { background:linear-gradient(135deg,#ea580c,#fb923c); }

/* --- Storm スキン --- */
[data-theme="dark"] [data-pu-skin="storm"] { --accent:#64748b; --card:#080c10; --border:#1a2230; --bg:#040810; }
[data-theme="dark"] [data-pu-skin="storm"] .main-rank-card { background:linear-gradient(135deg,#0c1520,#141f30); border-color:#202e42; }
[data-theme="dark"] [data-pu-skin="storm"] .spec-row { background:linear-gradient(90deg,#0a1018,#121a28); border-color:#1a2230; }
[data-theme="dark"] [data-pu-skin="storm"] .st-ok { --st-ok-bg:rgba(100,116,139,0.09); border-left-color:#94a3b8; background:rgba(100,116,139,0.07); }
[data-theme="dark"] [data-pu-skin="storm"] #save-btn { background:linear-gradient(135deg,#334155,#64748b); box-shadow:0 12px 35px rgba(100,116,139,0.3); }
[data-theme="dark"] [data-pu-skin="storm"] #rank-letter { background:linear-gradient(135deg,#0c1520,#141f30); border-color:#94a3b8 !important; box-shadow:0 0 40px rgba(148,163,184,0.35); }
[data-theme="dark"] [data-pu-skin="storm"] #pu-header-badge { background:linear-gradient(135deg,#334155,#64748b); }

/* --- Candy スキン --- */
[data-theme="dark"] [data-pu-skin="candy"] { --accent:#f472b6; --card:#150010; --border:#40003a; --bg:#0a0008; }
[data-theme="dark"] [data-pu-skin="candy"] .main-rank-card { background:linear-gradient(135deg,#200018,#350028); border-color:#580048; }
[data-theme="dark"] [data-pu-skin="candy"] .spec-row { background:linear-gradient(90deg,#18000e,#280020); border-color:#40003a; }
[data-theme="dark"] [data-pu-skin="candy"] .st-ok { --st-ok-bg:rgba(244,114,182,0.09); border-left-color:#f472b6; background:rgba(244,114,182,0.07); }
[data-theme="dark"] [data-pu-skin="candy"] #save-btn { background:linear-gradient(135deg,#db2777,#f472b6,#fbcfe8); box-shadow:0 12px 35px rgba(244,114,182,0.35); }
[data-theme="dark"] [data-pu-skin="candy"] #rank-letter { background:linear-gradient(135deg,#200018,#350028); border-color:#f472b6 !important; box-shadow:0 0 40px rgba(244,114,182,0.4); }
[data-theme="dark"] [data-pu-skin="candy"] #pu-header-badge { background:linear-gradient(135deg,#db2777,#f472b6); }

/* --- Phantom スキン --- */
[data-theme="dark"] [data-pu-skin="phantom"] { --accent:#a78bfa; --card:#070010; --border:#1e0035; --bg:#040008; }
[data-theme="dark"] [data-pu-skin="phantom"] .main-rank-card { background:linear-gradient(135deg,#0e0020,#1a0038); border-color:#2d0058; }
[data-theme="dark"] [data-pu-skin="phantom"] .spec-row { background:linear-gradient(90deg,#0c0018,#160030); border-color:#1e0035; }
[data-theme="dark"] [data-pu-skin="phantom"] .st-ok { --st-ok-bg:rgba(167,139,250,0.09); border-left-color:#a78bfa; background:rgba(167,139,250,0.07); }
[data-theme="dark"] [data-pu-skin="phantom"] #save-btn { background:linear-gradient(135deg,#7c3aed,#a78bfa); box-shadow:0 12px 35px rgba(167,139,250,0.35); }
[data-theme="dark"] [data-pu-skin="phantom"] #rank-letter { background:linear-gradient(135deg,#0e0020,#1a0038); border-color:#a78bfa !important; box-shadow:0 0 40px rgba(167,139,250,0.4); }
[data-theme="dark"] [data-pu-skin="phantom"] #pu-header-badge { background:linear-gradient(135deg,#7c3aed,#a78bfa); }

/* ══ ガチャモーダル ══════════════════════════════════════════════ */
#gacha-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.92);
    z-index: 1000001; display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
#gacha-modal {
    background: #111; border: 2px solid #ff6eb4aa;
    border-radius: 24px; padding: 28px 20px 24px;
    width: 100%; max-width: 400px;
    text-align: center; position: relative;
}
.gacha-spin-wrap {
    margin: 20px auto;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: conic-gradient(#ff6eb4, #ffd700, #00d4ff, #ff6eb4);
    display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem;
    transition: transform 0.8s cubic-bezier(.4,2,.6,1);
    box-shadow: 0 0 40px rgba(255,110,180,0.5);
}
.gacha-spin-wrap.spinning {
    animation: gacha-spin 0.8s cubic-bezier(.4,2,.6,1);
}
@keyframes gacha-spin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(540deg) scale(1.12); }
    100% { transform: rotate(720deg) scale(1); }
}
.gacha-result-card {
    margin: 16px auto 0;
    background: #1a1a1a; border-radius: 16px; padding: 16px;
    border: 2px solid #ff6eb444;
}
.gacha-dup-actions {
    display: flex; gap: 10px; margin-top: 14px;
}
.gacha-dup-actions button {
    flex: 1; padding: 10px; border-radius: 12px; border: none;
    font-size: 0.88rem; font-weight: 800; cursor: pointer;
}

/* ══ スキン選択カード（グリッド化） ══════════════════════════════ */
#pu-skin-selector {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

/* --- スキン選択カード --- */
.pu-skin-card {
    flex: 1;
    min-width: 0;
    border-radius: 12px;
    padding: 10px 6px 8px;
    cursor: pointer;
    border: 2px solid transparent;
    text-align: center;
    transition: all 0.2s;
    background: #1a1a1a;
    position: relative;
}
.pu-skin-card.active {
    border-color: #f59e0b;
    box-shadow: 0 0 12px rgba(245,158,11,0.3);
}
.pu-skin-card .pu-skin-preview {
    width: 100%;
    height: 32px;
    border-radius: 8px;
    margin-bottom: 6px;
}
.pu-skin-card .pu-skin-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: #ccc;
}
/* ══════════════════════════════════════════
   👑 ProUltra 共有カード限定デザイン
   capture-area に .pu-share-gold / aurora / diamond を付与してキャプチャ
   ══════════════════════════════════════════ */

/* --- 共通: ProUltraウォーターマーク --- */
.pu-share-gold .main-rank-card::after,
.pu-share-aurora .main-rank-card::after,
.pu-share-diamond .main-rank-card::after {
    content: '👑 ProUltra';
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 20px;
    pointer-events: none;
}
.main-rank-card { position: relative; }

/* --- Gold カード --- */
.pu-share-gold .main-rank-card {
    background: linear-gradient(135deg, #1a1100 0%, #2d2000 50%, #1a1500 100%);
    border: 1px solid #7a5c00;
    box-shadow: 0 0 40px rgba(245,158,11,0.25), inset 0 1px 0 rgba(245,158,11,0.15);
}
.pu-share-gold .main-rank-card::after {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
}
.pu-share-gold #rank-letter {
    background: linear-gradient(135deg, #2d2000, #1a1100) !important;
    border-color: #f59e0b !important;
    box-shadow: 0 0 30px rgba(245,158,11,0.5) !important;
    color: #f59e0b !important;
}
.pu-share-gold #status-title { color: #fbbf24 !important; }
.pu-share-gold #eval-msg     { color: #d97706 !important; }

/* --- Aurora カード --- */
.pu-share-aurora .main-rank-card {
    background: linear-gradient(135deg, #0d0020 0%, #1a0035 40%, #000d20 100%);
    border: 1px solid #5b21b6;
    box-shadow: 0 0 50px rgba(139,92,246,0.3), inset 0 1px 0 rgba(168,85,247,0.2);
}
.pu-share-aurora .main-rank-card::after {
    background: linear-gradient(135deg, #7c3aed, #db2777);
    color: #fff;
}
.pu-share-aurora #rank-letter {
    background: linear-gradient(135deg, #1e0040, #0d0020) !important;
    border-color: #a855f7 !important;
    box-shadow: 0 0 40px rgba(168,85,247,0.6), 0 0 80px rgba(236,72,153,0.2) !important;
    color: #a855f7 !important;
}
.pu-share-aurora #status-title { color: #c4b5fd !important; }
.pu-share-aurora #eval-msg     { color: #8b5cf6 !important; }

/* --- Diamond カード --- */
.pu-share-diamond .main-rank-card {
    background: linear-gradient(135deg, #021018 0%, #031824 50%, #010c14 100%);
    border: 1px solid #0e7490;
    box-shadow: 0 0 50px rgba(6,182,212,0.25), inset 0 1px 0 rgba(103,232,249,0.15);
}
.pu-share-diamond .main-rank-card::after {
    background: linear-gradient(135deg, #0ea5e9, #67e8f9);
    color: #000;
}
.pu-share-diamond #rank-letter {
    background: linear-gradient(135deg, #04202e, #021018) !important;
    border-color: #67e8f9 !important;
    box-shadow: 0 0 40px rgba(103,232,249,0.4), 0 0 80px rgba(14,165,233,0.2) !important;
    color: #67e8f9 !important;
}
.pu-share-diamond #status-title { color: #a5f3fc !important; }
.pu-share-diamond #eval-msg     { color: #0ea5e9 !important; }

/* ── データ管理モーダルのスタイル ── */
#data-manage-modal {
    display: none !important;
}
#data-manage-modal[style*="display: flex"] {
    display: flex !important;
}



/* ===== 4ヶ月記念スキン（cosmos + a4_*）自動生成CSS ===== */

[data-theme="dark"] [data-pu-skin="cosmos"] { --accent:#302b63; --card:#070614; --border:#0a081c; --bg:#05040e; }
[data-theme="dark"] [data-pu-skin="cosmos"] .main-rank-card { background:linear-gradient(135deg,#0f0c29,#302b63); border-color:#0a081c; }
[data-theme="dark"] [data-pu-skin="cosmos"] .spec-row { background:linear-gradient(90deg,#060410,#15132c); border-color:#0a081c; }
[data-theme="dark"] [data-pu-skin="cosmos"] .st-ok { --st-ok-bg:rgba(48,43,99,0.09); border-left-color:#302b63; background:rgba(48,43,99,0.07); }
[data-theme="dark"] [data-pu-skin="cosmos"] #save-btn { background:linear-gradient(135deg,#15132c,#302b63); box-shadow:0 12px 35px rgba(48,43,99,0.35); }
[data-theme="dark"] [data-pu-skin="cosmos"] #rank-letter { background:linear-gradient(135deg,#0f0c29,#302b63); border-color:#302b63 !important; box-shadow:0 0 40px rgba(48,43,99,0.4); }
[data-theme="dark"] [data-pu-skin="cosmos"] #pu-header-badge { background:linear-gradient(135deg,#15132c,#302b63); }

[data-theme="dark"] [data-pu-skin="a4_ember"] { --accent:#f97316; --card:#3e1609; --border:#561f0c; --bg:#2b0f06; }
[data-theme="dark"] [data-pu-skin="a4_ember"] .main-rank-card { background:linear-gradient(135deg,#7c2d12,#f97316); border-color:#561f0c; }
[data-theme="dark"] [data-pu-skin="a4_ember"] .spec-row { background:linear-gradient(90deg,#311207,#703309); border-color:#561f0c; }
[data-theme="dark"] [data-pu-skin="a4_ember"] .st-ok { --st-ok-bg:rgba(249,115,22,0.09); border-left-color:#f97316; background:rgba(249,115,22,0.07); }
[data-theme="dark"] [data-pu-skin="a4_ember"] #save-btn { background:linear-gradient(135deg,#703309,#f97316); box-shadow:0 12px 35px rgba(249,115,22,0.35); }
[data-theme="dark"] [data-pu-skin="a4_ember"] #rank-letter { background:linear-gradient(135deg,#7c2d12,#f97316); border-color:#f97316 !important; box-shadow:0 0 40px rgba(249,115,22,0.4); }
[data-theme="dark"] [data-pu-skin="a4_ember"] #pu-header-badge { background:linear-gradient(135deg,#703309,#f97316); }

[data-theme="dark"] [data-pu-skin="a4_mint2"] { --accent:#6ee7b7; --card:#011611; --border:#011e17; --bg:#000f0b; }
[data-theme="dark"] [data-pu-skin="a4_mint2"] .main-rank-card { background:linear-gradient(135deg,#022c22,#6ee7b7); border-color:#011e17; }
[data-theme="dark"] [data-pu-skin="a4_mint2"] .spec-row { background:linear-gradient(90deg,#00110d,#316752); border-color:#011e17; }
[data-theme="dark"] [data-pu-skin="a4_mint2"] .st-ok { --st-ok-bg:rgba(110,231,183,0.09); border-left-color:#6ee7b7; background:rgba(110,231,183,0.07); }
[data-theme="dark"] [data-pu-skin="a4_mint2"] #save-btn { background:linear-gradient(135deg,#316752,#6ee7b7); box-shadow:0 12px 35px rgba(110,231,183,0.35); }
[data-theme="dark"] [data-pu-skin="a4_mint2"] #rank-letter { background:linear-gradient(135deg,#022c22,#6ee7b7); border-color:#6ee7b7 !important; box-shadow:0 0 40px rgba(110,231,183,0.4); }
[data-theme="dark"] [data-pu-skin="a4_mint2"] #pu-header-badge { background:linear-gradient(135deg,#316752,#6ee7b7); }

[data-theme="dark"] [data-pu-skin="a4_denim"] { --accent:#3b82f6; --card:#0f1d2f; --border:#152842; --bg:#0a1421; }
[data-theme="dark"] [data-pu-skin="a4_denim"] .main-rank-card { background:linear-gradient(135deg,#1e3a5f,#3b82f6); border-color:#152842; }
[data-theme="dark"] [data-pu-skin="a4_denim"] .spec-row { background:linear-gradient(90deg,#0c1726,#1a3a6e); border-color:#152842; }
[data-theme="dark"] [data-pu-skin="a4_denim"] .st-ok { --st-ok-bg:rgba(59,130,246,0.09); border-left-color:#3b82f6; background:rgba(59,130,246,0.07); }
[data-theme="dark"] [data-pu-skin="a4_denim"] #save-btn { background:linear-gradient(135deg,#1a3a6e,#3b82f6); box-shadow:0 12px 35px rgba(59,130,246,0.35); }
[data-theme="dark"] [data-pu-skin="a4_denim"] #rank-letter { background:linear-gradient(135deg,#1e3a5f,#3b82f6); border-color:#3b82f6 !important; box-shadow:0 0 40px rgba(59,130,246,0.4); }
[data-theme="dark"] [data-pu-skin="a4_denim"] #pu-header-badge { background:linear-gradient(135deg,#1a3a6e,#3b82f6); }

[data-theme="dark"] [data-pu-skin="a4_caramel"] { --accent:#fcd34d; --card:#3c1a07; --border:#54250a; --bg:#2a1205; }
[data-theme="dark"] [data-pu-skin="a4_caramel"] .main-rank-card { background:linear-gradient(135deg,#78350f,#fcd34d); border-color:#54250a; }
[data-theme="dark"] [data-pu-skin="a4_caramel"] .spec-row { background:linear-gradient(90deg,#301506,#715e22); border-color:#54250a; }
[data-theme="dark"] [data-pu-skin="a4_caramel"] .st-ok { --st-ok-bg:rgba(252,211,77,0.09); border-left-color:#fcd34d; background:rgba(252,211,77,0.07); }
[data-theme="dark"] [data-pu-skin="a4_caramel"] #save-btn { background:linear-gradient(135deg,#715e22,#fcd34d); box-shadow:0 12px 35px rgba(252,211,77,0.35); }
[data-theme="dark"] [data-pu-skin="a4_caramel"] #rank-letter { background:linear-gradient(135deg,#78350f,#fcd34d); border-color:#fcd34d !important; box-shadow:0 0 40px rgba(252,211,77,0.4); }
[data-theme="dark"] [data-pu-skin="a4_caramel"] #pu-header-badge { background:linear-gradient(135deg,#715e22,#fcd34d); }

[data-theme="dark"] [data-pu-skin="a4_smoke"] { --accent:#9ca3af; --card:#1b2028; --border:#262d38; --bg:#13161c; }
[data-theme="dark"] [data-pu-skin="a4_smoke"] .main-rank-card { background:linear-gradient(135deg,#374151,#9ca3af); border-color:#262d38; }
[data-theme="dark"] [data-pu-skin="a4_smoke"] .spec-row { background:linear-gradient(90deg,#161a20,#46494e); border-color:#262d38; }
[data-theme="dark"] [data-pu-skin="a4_smoke"] .st-ok { --st-ok-bg:rgba(156,163,175,0.09); border-left-color:#9ca3af; background:rgba(156,163,175,0.07); }
[data-theme="dark"] [data-pu-skin="a4_smoke"] #save-btn { background:linear-gradient(135deg,#46494e,#9ca3af); box-shadow:0 12px 35px rgba(156,163,175,0.35); }
[data-theme="dark"] [data-pu-skin="a4_smoke"] #rank-letter { background:linear-gradient(135deg,#374151,#9ca3af); border-color:#9ca3af !important; box-shadow:0 0 40px rgba(156,163,175,0.4); }
[data-theme="dark"] [data-pu-skin="a4_smoke"] #pu-header-badge { background:linear-gradient(135deg,#46494e,#9ca3af); }

[data-theme="dark"] [data-pu-skin="a4_pine"] { --accent:#4ade80; --card:#0a2916; --border:#0e3a1f; --bg:#071d0f; }
[data-theme="dark"] [data-pu-skin="a4_pine"] .main-rank-card { background:linear-gradient(135deg,#14532d,#4ade80); border-color:#0e3a1f; }
[data-theme="dark"] [data-pu-skin="a4_pine"] .spec-row { background:linear-gradient(90deg,#082112,#216339); border-color:#0e3a1f; }
[data-theme="dark"] [data-pu-skin="a4_pine"] .st-ok { --st-ok-bg:rgba(74,222,128,0.09); border-left-color:#4ade80; background:rgba(74,222,128,0.07); }
[data-theme="dark"] [data-pu-skin="a4_pine"] #save-btn { background:linear-gradient(135deg,#216339,#4ade80); box-shadow:0 12px 35px rgba(74,222,128,0.35); }
[data-theme="dark"] [data-pu-skin="a4_pine"] #rank-letter { background:linear-gradient(135deg,#14532d,#4ade80); border-color:#4ade80 !important; box-shadow:0 0 40px rgba(74,222,128,0.4); }
[data-theme="dark"] [data-pu-skin="a4_pine"] #pu-header-badge { background:linear-gradient(135deg,#216339,#4ade80); }

[data-theme="dark"] [data-pu-skin="a4_rust"] { --accent:#c2410c; --card:#3e1609; --border:#561f0c; --bg:#2b0f06; }
[data-theme="dark"] [data-pu-skin="a4_rust"] .main-rank-card { background:linear-gradient(135deg,#7c2d12,#c2410c); border-color:#561f0c; }
[data-theme="dark"] [data-pu-skin="a4_rust"] .spec-row { background:linear-gradient(90deg,#311207,#571d05); border-color:#561f0c; }
[data-theme="dark"] [data-pu-skin="a4_rust"] .st-ok { --st-ok-bg:rgba(194,65,12,0.09); border-left-color:#c2410c; background:rgba(194,65,12,0.07); }
[data-theme="dark"] [data-pu-skin="a4_rust"] #save-btn { background:linear-gradient(135deg,#571d05,#c2410c); box-shadow:0 12px 35px rgba(194,65,12,0.35); }
[data-theme="dark"] [data-pu-skin="a4_rust"] #rank-letter { background:linear-gradient(135deg,#7c2d12,#c2410c); border-color:#c2410c !important; box-shadow:0 0 40px rgba(194,65,12,0.4); }
[data-theme="dark"] [data-pu-skin="a4_rust"] #pu-header-badge { background:linear-gradient(135deg,#571d05,#c2410c); }

[data-theme="dark"] [data-pu-skin="a4_sky"] { --accent:#7dd3fc; --card:#013450; --border:#024970; --bg:#012438; }
[data-theme="dark"] [data-pu-skin="a4_sky"] .main-rank-card { background:linear-gradient(135deg,#0369a1,#7dd3fc); border-color:#024970; }
[data-theme="dark"] [data-pu-skin="a4_sky"] .spec-row { background:linear-gradient(90deg,#012a40,#385e71); border-color:#024970; }
[data-theme="dark"] [data-pu-skin="a4_sky"] .st-ok { --st-ok-bg:rgba(125,211,252,0.09); border-left-color:#7dd3fc; background:rgba(125,211,252,0.07); }
[data-theme="dark"] [data-pu-skin="a4_sky"] #save-btn { background:linear-gradient(135deg,#385e71,#7dd3fc); box-shadow:0 12px 35px rgba(125,211,252,0.35); }
[data-theme="dark"] [data-pu-skin="a4_sky"] #rank-letter { background:linear-gradient(135deg,#0369a1,#7dd3fc); border-color:#7dd3fc !important; box-shadow:0 0 40px rgba(125,211,252,0.4); }
[data-theme="dark"] [data-pu-skin="a4_sky"] #pu-header-badge { background:linear-gradient(135deg,#385e71,#7dd3fc); }

[data-theme="dark"] [data-pu-skin="a4_clay"] { --accent:#d4a96a; --card:#492007; --border:#662c09; --bg:#331604; }
[data-theme="dark"] [data-pu-skin="a4_clay"] .main-rank-card { background:linear-gradient(135deg,#92400e,#d4a96a); border-color:#662c09; }
[data-theme="dark"] [data-pu-skin="a4_clay"] .spec-row { background:linear-gradient(90deg,#3a1905,#5f4c2f); border-color:#662c09; }
[data-theme="dark"] [data-pu-skin="a4_clay"] .st-ok { --st-ok-bg:rgba(212,169,106,0.09); border-left-color:#d4a96a; background:rgba(212,169,106,0.07); }
[data-theme="dark"] [data-pu-skin="a4_clay"] #save-btn { background:linear-gradient(135deg,#5f4c2f,#d4a96a); box-shadow:0 12px 35px rgba(212,169,106,0.35); }
[data-theme="dark"] [data-pu-skin="a4_clay"] #rank-letter { background:linear-gradient(135deg,#92400e,#d4a96a); border-color:#d4a96a !important; box-shadow:0 0 40px rgba(212,169,106,0.4); }
[data-theme="dark"] [data-pu-skin="a4_clay"] #pu-header-badge { background:linear-gradient(135deg,#5f4c2f,#d4a96a); }

[data-theme="dark"] [data-pu-skin="a4_plum"] { --accent:#8b5cf6; --card:#260e4a; --border:#351468; --bg:#1a0a34; }
[data-theme="dark"] [data-pu-skin="a4_plum"] .main-rank-card { background:linear-gradient(135deg,#4c1d95,#8b5cf6); border-color:#351468; }
[data-theme="dark"] [data-pu-skin="a4_plum"] .spec-row { background:linear-gradient(90deg,#1e0b3b,#3e296e); border-color:#351468; }
[data-theme="dark"] [data-pu-skin="a4_plum"] .st-ok { --st-ok-bg:rgba(139,92,246,0.09); border-left-color:#8b5cf6; background:rgba(139,92,246,0.07); }
[data-theme="dark"] [data-pu-skin="a4_plum"] #save-btn { background:linear-gradient(135deg,#3e296e,#8b5cf6); box-shadow:0 12px 35px rgba(139,92,246,0.35); }
[data-theme="dark"] [data-pu-skin="a4_plum"] #rank-letter { background:linear-gradient(135deg,#4c1d95,#8b5cf6); border-color:#8b5cf6 !important; box-shadow:0 0 40px rgba(139,92,246,0.4); }
[data-theme="dark"] [data-pu-skin="a4_plum"] #pu-header-badge { background:linear-gradient(135deg,#3e296e,#8b5cf6); }

[data-theme="dark"] [data-pu-skin="a4_ivory"] { --accent:#e7e5e4; --card:#3c3836; --border:#544f4b; --bg:#2a2725; }
[data-theme="dark"] [data-pu-skin="a4_ivory"] .main-rank-card { background:linear-gradient(135deg,#78716c,#e7e5e4); border-color:#544f4b; }
[data-theme="dark"] [data-pu-skin="a4_ivory"] .spec-row { background:linear-gradient(90deg,#302d2b,#676766); border-color:#544f4b; }
[data-theme="dark"] [data-pu-skin="a4_ivory"] .st-ok { --st-ok-bg:rgba(231,229,228,0.09); border-left-color:#e7e5e4; background:rgba(231,229,228,0.07); }
[data-theme="dark"] [data-pu-skin="a4_ivory"] #save-btn { background:linear-gradient(135deg,#676766,#e7e5e4); box-shadow:0 12px 35px rgba(231,229,228,0.35); }
[data-theme="dark"] [data-pu-skin="a4_ivory"] #rank-letter { background:linear-gradient(135deg,#78716c,#e7e5e4); border-color:#e7e5e4 !important; box-shadow:0 0 40px rgba(231,229,228,0.4); }
[data-theme="dark"] [data-pu-skin="a4_ivory"] #pu-header-badge { background:linear-gradient(135deg,#676766,#e7e5e4); }

[data-theme="dark"] [data-pu-skin="a4_moss"] { --accent:#84cc16; --card:#1b290a; --border:#253a0e; --bg:#121d07; }
[data-theme="dark"] [data-pu-skin="a4_moss"] .main-rank-card { background:linear-gradient(135deg,#365314,#84cc16); border-color:#253a0e; }
[data-theme="dark"] [data-pu-skin="a4_moss"] .spec-row { background:linear-gradient(90deg,#152108,#3b5b09); border-color:#253a0e; }
[data-theme="dark"] [data-pu-skin="a4_moss"] .st-ok { --st-ok-bg:rgba(132,204,22,0.09); border-left-color:#84cc16; background:rgba(132,204,22,0.07); }
[data-theme="dark"] [data-pu-skin="a4_moss"] #save-btn { background:linear-gradient(135deg,#3b5b09,#84cc16); box-shadow:0 12px 35px rgba(132,204,22,0.35); }
[data-theme="dark"] [data-pu-skin="a4_moss"] #rank-letter { background:linear-gradient(135deg,#365314,#84cc16); border-color:#84cc16 !important; box-shadow:0 0 40px rgba(132,204,22,0.4); }
[data-theme="dark"] [data-pu-skin="a4_moss"] #pu-header-badge { background:linear-gradient(135deg,#3b5b09,#84cc16); }

[data-theme="dark"] [data-pu-skin="a4_blush"] { --accent:#fda4af; --card:#5f0c2e; --border:#851041; --bg:#420820; }
[data-theme="dark"] [data-pu-skin="a4_blush"] .main-rank-card { background:linear-gradient(135deg,#be185d,#fda4af); border-color:#851041; }
[data-theme="dark"] [data-pu-skin="a4_blush"] .spec-row { background:linear-gradient(90deg,#4c0925,#71494e); border-color:#851041; }
[data-theme="dark"] [data-pu-skin="a4_blush"] .st-ok { --st-ok-bg:rgba(253,164,175,0.09); border-left-color:#fda4af; background:rgba(253,164,175,0.07); }
[data-theme="dark"] [data-pu-skin="a4_blush"] #save-btn { background:linear-gradient(135deg,#71494e,#fda4af); box-shadow:0 12px 35px rgba(253,164,175,0.35); }
[data-theme="dark"] [data-pu-skin="a4_blush"] #rank-letter { background:linear-gradient(135deg,#be185d,#fda4af); border-color:#fda4af !important; box-shadow:0 0 40px rgba(253,164,175,0.4); }
[data-theme="dark"] [data-pu-skin="a4_blush"] #pu-header-badge { background:linear-gradient(135deg,#71494e,#fda4af); }

[data-theme="dark"] [data-pu-skin="a4_charcoal"] { --accent:#57534e; --card:#0e0c0b; --border:#131110; --bg:#090808; }
[data-theme="dark"] [data-pu-skin="a4_charcoal"] .main-rank-card { background:linear-gradient(135deg,#1c1917,#57534e); border-color:#131110; }
[data-theme="dark"] [data-pu-skin="a4_charcoal"] .spec-row { background:linear-gradient(90deg,#0b0a09,#272523); border-color:#131110; }
[data-theme="dark"] [data-pu-skin="a4_charcoal"] .st-ok { --st-ok-bg:rgba(87,83,78,0.09); border-left-color:#57534e; background:rgba(87,83,78,0.07); }
[data-theme="dark"] [data-pu-skin="a4_charcoal"] #save-btn { background:linear-gradient(135deg,#272523,#57534e); box-shadow:0 12px 35px rgba(87,83,78,0.35); }
[data-theme="dark"] [data-pu-skin="a4_charcoal"] #rank-letter { background:linear-gradient(135deg,#1c1917,#57534e); border-color:#57534e !important; box-shadow:0 0 40px rgba(87,83,78,0.4); }
[data-theme="dark"] [data-pu-skin="a4_charcoal"] #pu-header-badge { background:linear-gradient(135deg,#272523,#57534e); }

[data-theme="dark"] [data-pu-skin="a4_butter"] { --accent:#fef08a; --card:#381f09; --border:#4f2c0c; --bg:#271606; }
[data-theme="dark"] [data-pu-skin="a4_butter"] .main-rank-card { background:linear-gradient(135deg,#713f12,#fef08a); border-color:#4f2c0c; }
[data-theme="dark"] [data-pu-skin="a4_butter"] .spec-row { background:linear-gradient(90deg,#2d1907,#726c3e); border-color:#4f2c0c; }
[data-theme="dark"] [data-pu-skin="a4_butter"] .st-ok { --st-ok-bg:rgba(254,240,138,0.09); border-left-color:#fef08a; background:rgba(254,240,138,0.07); }
[data-theme="dark"] [data-pu-skin="a4_butter"] #save-btn { background:linear-gradient(135deg,#726c3e,#fef08a); box-shadow:0 12px 35px rgba(254,240,138,0.35); }
[data-theme="dark"] [data-pu-skin="a4_butter"] #rank-letter { background:linear-gradient(135deg,#713f12,#fef08a); border-color:#fef08a !important; box-shadow:0 0 40px rgba(254,240,138,0.4); }
[data-theme="dark"] [data-pu-skin="a4_butter"] #pu-header-badge { background:linear-gradient(135deg,#726c3e,#fef08a); }

[data-theme="dark"] [data-pu-skin="a4_ocean2"] { --accent:#0ea5e9; --card:#041724; --border:#052033; --bg:#021019; }
[data-theme="dark"] [data-pu-skin="a4_ocean2"] .main-rank-card { background:linear-gradient(135deg,#082f49,#0ea5e9); border-color:#052033; }
[data-theme="dark"] [data-pu-skin="a4_ocean2"] .spec-row { background:linear-gradient(90deg,#03121d,#064a68); border-color:#052033; }
[data-theme="dark"] [data-pu-skin="a4_ocean2"] .st-ok { --st-ok-bg:rgba(14,165,233,0.09); border-left-color:#0ea5e9; background:rgba(14,165,233,0.07); }
[data-theme="dark"] [data-pu-skin="a4_ocean2"] #save-btn { background:linear-gradient(135deg,#064a68,#0ea5e9); box-shadow:0 12px 35px rgba(14,165,233,0.35); }
[data-theme="dark"] [data-pu-skin="a4_ocean2"] #rank-letter { background:linear-gradient(135deg,#082f49,#0ea5e9); border-color:#0ea5e9 !important; box-shadow:0 0 40px rgba(14,165,233,0.4); }
[data-theme="dark"] [data-pu-skin="a4_ocean2"] #pu-header-badge { background:linear-gradient(135deg,#064a68,#0ea5e9); }

[data-theme="dark"] [data-pu-skin="a4_lavender"] { --accent:#c4b5fd; --card:#260e4a; --border:#351468; --bg:#1a0a34; }
[data-theme="dark"] [data-pu-skin="a4_lavender"] .main-rank-card { background:linear-gradient(135deg,#4c1d95,#c4b5fd); border-color:#351468; }
[data-theme="dark"] [data-pu-skin="a4_lavender"] .spec-row { background:linear-gradient(90deg,#1e0b3b,#585171); border-color:#351468; }
[data-theme="dark"] [data-pu-skin="a4_lavender"] .st-ok { --st-ok-bg:rgba(196,181,253,0.09); border-left-color:#c4b5fd; background:rgba(196,181,253,0.07); }
[data-theme="dark"] [data-pu-skin="a4_lavender"] #save-btn { background:linear-gradient(135deg,#585171,#c4b5fd); box-shadow:0 12px 35px rgba(196,181,253,0.35); }
[data-theme="dark"] [data-pu-skin="a4_lavender"] #rank-letter { background:linear-gradient(135deg,#4c1d95,#c4b5fd); border-color:#c4b5fd !important; box-shadow:0 0 40px rgba(196,181,253,0.4); }
[data-theme="dark"] [data-pu-skin="a4_lavender"] #pu-header-badge { background:linear-gradient(135deg,#585171,#c4b5fd); }

[data-theme="dark"] [data-pu-skin="a4_tangerine"] { --accent:#fb923c; --card:#612006; --border:#872d08; --bg:#431604; }
[data-theme="dark"] [data-pu-skin="a4_tangerine"] .main-rank-card { background:linear-gradient(135deg,#c2410c,#fb923c); border-color:#872d08; }
[data-theme="dark"] [data-pu-skin="a4_tangerine"] .spec-row { background:linear-gradient(90deg,#4d1a04,#70411b); border-color:#872d08; }
[data-theme="dark"] [data-pu-skin="a4_tangerine"] .st-ok { --st-ok-bg:rgba(251,146,60,0.09); border-left-color:#fb923c; background:rgba(251,146,60,0.07); }
[data-theme="dark"] [data-pu-skin="a4_tangerine"] #save-btn { background:linear-gradient(135deg,#70411b,#fb923c); box-shadow:0 12px 35px rgba(251,146,60,0.35); }
[data-theme="dark"] [data-pu-skin="a4_tangerine"] #rank-letter { background:linear-gradient(135deg,#c2410c,#fb923c); border-color:#fb923c !important; box-shadow:0 0 40px rgba(251,146,60,0.4); }
[data-theme="dark"] [data-pu-skin="a4_tangerine"] #pu-header-badge { background:linear-gradient(135deg,#70411b,#fb923c); }

[data-theme="dark"] [data-pu-skin="a4_aurora3"] { --accent:#4ade80; --card:#181740; --border:#22205a; --bg:#11102d; }
[data-theme="dark"] [data-pu-skin="a4_aurora3"] .main-rank-card { background:linear-gradient(135deg,#312e81,#22d3ee); border-color:#22205a; }
[data-theme="dark"] [data-pu-skin="a4_aurora3"] .spec-row { background:linear-gradient(90deg,#131233,#0f5e6b); border-color:#22205a; }
[data-theme="dark"] [data-pu-skin="a4_aurora3"] .st-ok { --st-ok-bg:rgba(74,222,128,0.09); border-left-color:#4ade80; background:rgba(74,222,128,0.07); }
[data-theme="dark"] [data-pu-skin="a4_aurora3"] #save-btn { background:linear-gradient(135deg,#216339,#4ade80); box-shadow:0 12px 35px rgba(74,222,128,0.35); }
[data-theme="dark"] [data-pu-skin="a4_aurora3"] #rank-letter { background:linear-gradient(135deg,#312e81,#22d3ee); border-color:#4ade80 !important; box-shadow:0 0 40px rgba(74,222,128,0.4); }
[data-theme="dark"] [data-pu-skin="a4_aurora3"] #pu-header-badge { background:linear-gradient(135deg,#216339,#4ade80); }

[data-theme="dark"] [data-pu-skin="a4_twilight"] { --accent:#f97316; --card:#0f0d25; --border:#151234; --bg:#0a091a; }
[data-theme="dark"] [data-pu-skin="a4_twilight"] .main-rank-card { background:linear-gradient(135deg,#1e1b4b,#db2777); border-color:#151234; }
[data-theme="dark"] [data-pu-skin="a4_twilight"] .spec-row { background:linear-gradient(90deg,#0c0a1e,#621135); border-color:#151234; }
[data-theme="dark"] [data-pu-skin="a4_twilight"] .st-ok { --st-ok-bg:rgba(249,115,22,0.09); border-left-color:#f97316; background:rgba(249,115,22,0.07); }
[data-theme="dark"] [data-pu-skin="a4_twilight"] #save-btn { background:linear-gradient(135deg,#703309,#f97316); box-shadow:0 12px 35px rgba(249,115,22,0.35); }
[data-theme="dark"] [data-pu-skin="a4_twilight"] #rank-letter { background:linear-gradient(135deg,#1e1b4b,#db2777); border-color:#f97316 !important; box-shadow:0 0 40px rgba(249,115,22,0.4); }
[data-theme="dark"] [data-pu-skin="a4_twilight"] #pu-header-badge { background:linear-gradient(135deg,#703309,#f97316); }

[data-theme="dark"] [data-pu-skin="a4_mermaid"] { --accent:#a5f3fc; --card:#062537; --border:#08334d; --bg:#041926; }
[data-theme="dark"] [data-pu-skin="a4_mermaid"] .main-rank-card { background:linear-gradient(135deg,#0c4a6e,#14b8a6); border-color:#08334d; }
[data-theme="dark"] [data-pu-skin="a4_mermaid"] .spec-row { background:linear-gradient(90deg,#041d2c,#09524a); border-color:#08334d; }
[data-theme="dark"] [data-pu-skin="a4_mermaid"] .st-ok { --st-ok-bg:rgba(165,243,252,0.09); border-left-color:#a5f3fc; background:rgba(165,243,252,0.07); }
[data-theme="dark"] [data-pu-skin="a4_mermaid"] #save-btn { background:linear-gradient(135deg,#4a6d71,#a5f3fc); box-shadow:0 12px 35px rgba(165,243,252,0.35); }
[data-theme="dark"] [data-pu-skin="a4_mermaid"] #rank-letter { background:linear-gradient(135deg,#0c4a6e,#14b8a6); border-color:#a5f3fc !important; box-shadow:0 0 40px rgba(165,243,252,0.4); }
[data-theme="dark"] [data-pu-skin="a4_mermaid"] #pu-header-badge { background:linear-gradient(135deg,#4a6d71,#a5f3fc); }

[data-theme="dark"] [data-pu-skin="a4_sakura3"] { --accent:#fff1f2; --card:#410c21; --border:#5b102e; --bg:#2d0817; }
[data-theme="dark"] [data-pu-skin="a4_sakura3"] .main-rank-card { background:linear-gradient(135deg,#831843,#f9a8d4); border-color:#5b102e; }
[data-theme="dark"] [data-pu-skin="a4_sakura3"] .spec-row { background:linear-gradient(90deg,#34091a,#704b5f); border-color:#5b102e; }
[data-theme="dark"] [data-pu-skin="a4_sakura3"] .st-ok { --st-ok-bg:rgba(255,241,242,0.09); border-left-color:#fff1f2; background:rgba(255,241,242,0.07); }
[data-theme="dark"] [data-pu-skin="a4_sakura3"] #save-btn { background:linear-gradient(135deg,#726c6c,#fff1f2); box-shadow:0 12px 35px rgba(255,241,242,0.35); }
[data-theme="dark"] [data-pu-skin="a4_sakura3"] #rank-letter { background:linear-gradient(135deg,#831843,#f9a8d4); border-color:#fff1f2 !important; box-shadow:0 0 40px rgba(255,241,242,0.4); }
[data-theme="dark"] [data-pu-skin="a4_sakura3"] #pu-header-badge { background:linear-gradient(135deg,#726c6c,#fff1f2); }

[data-theme="dark"] [data-pu-skin="a4_rainbow2"] { --accent:#eab308; --card:#772222; --border:#a72f2f; --bg:#531717; }
[data-theme="dark"] [data-pu-skin="a4_rainbow2"] .main-rank-card { background:linear-gradient(135deg,#ef4444,#f97316); border-color:#a72f2f; }
[data-theme="dark"] [data-pu-skin="a4_rainbow2"] .spec-row { background:linear-gradient(90deg,#5f1b1b,#703309); border-color:#a72f2f; }
[data-theme="dark"] [data-pu-skin="a4_rainbow2"] .st-ok { --st-ok-bg:rgba(234,179,8,0.09); border-left-color:#eab308; background:rgba(234,179,8,0.07); }
[data-theme="dark"] [data-pu-skin="a4_rainbow2"] #save-btn { background:linear-gradient(135deg,#695003,#eab308); box-shadow:0 12px 35px rgba(234,179,8,0.35); }
[data-theme="dark"] [data-pu-skin="a4_rainbow2"] #rank-letter { background:linear-gradient(135deg,#ef4444,#f97316); border-color:#eab308 !important; box-shadow:0 0 40px rgba(234,179,8,0.4); }
[data-theme="dark"] [data-pu-skin="a4_rainbow2"] #pu-header-badge { background:linear-gradient(135deg,#695003,#eab308); }

[data-theme="dark"] [data-pu-skin="a4_prism"] { --accent:#ec4899; --card:#075274; --border:#0973a3; --bg:#043951; }
[data-theme="dark"] [data-pu-skin="a4_prism"] .main-rank-card { background:linear-gradient(135deg,#0ea5e9,#a855f7); border-color:#0973a3; }
[data-theme="dark"] [data-pu-skin="a4_prism"] .spec-row { background:linear-gradient(90deg,#05425d,#4b266f); border-color:#0973a3; }
[data-theme="dark"] [data-pu-skin="a4_prism"] .st-ok { --st-ok-bg:rgba(236,72,153,0.09); border-left-color:#ec4899; background:rgba(236,72,153,0.07); }
[data-theme="dark"] [data-pu-skin="a4_prism"] #save-btn { background:linear-gradient(135deg,#6a2044,#ec4899); box-shadow:0 12px 35px rgba(236,72,153,0.35); }
[data-theme="dark"] [data-pu-skin="a4_prism"] #rank-letter { background:linear-gradient(135deg,#0ea5e9,#a855f7); border-color:#ec4899 !important; box-shadow:0 0 40px rgba(236,72,153,0.4); }
[data-theme="dark"] [data-pu-skin="a4_prism"] #pu-header-badge { background:linear-gradient(135deg,#6a2044,#ec4899); }

[data-theme="dark"] [data-pu-skin="a4_wildfire"] { --accent:#f97316; --card:#220505; --border:#300707; --bg:#180303; }
[data-theme="dark"] [data-pu-skin="a4_wildfire"] .main-rank-card { background:linear-gradient(135deg,#450a0a,#dc2626); border-color:#300707; }
[data-theme="dark"] [data-pu-skin="a4_wildfire"] .spec-row { background:linear-gradient(90deg,#1b0404,#631111); border-color:#300707; }
[data-theme="dark"] [data-pu-skin="a4_wildfire"] .st-ok { --st-ok-bg:rgba(249,115,22,0.09); border-left-color:#f97316; background:rgba(249,115,22,0.07); }
[data-theme="dark"] [data-pu-skin="a4_wildfire"] #save-btn { background:linear-gradient(135deg,#703309,#f97316); box-shadow:0 12px 35px rgba(249,115,22,0.35); }
[data-theme="dark"] [data-pu-skin="a4_wildfire"] #rank-letter { background:linear-gradient(135deg,#450a0a,#dc2626); border-color:#f97316 !important; box-shadow:0 0 40px rgba(249,115,22,0.4); }
[data-theme="dark"] [data-pu-skin="a4_wildfire"] #pu-header-badge { background:linear-gradient(135deg,#703309,#f97316); }

[data-theme="dark"] [data-pu-skin="a4_frostbite"] { --accent:#e0f2fe; --card:#062537; --border:#08334d; --bg:#041926; }
[data-theme="dark"] [data-pu-skin="a4_frostbite"] .main-rank-card { background:linear-gradient(135deg,#0c4a6e,#e0f2fe); border-color:#08334d; }
[data-theme="dark"] [data-pu-skin="a4_frostbite"] .spec-row { background:linear-gradient(90deg,#041d2c,#646c72); border-color:#08334d; }
[data-theme="dark"] [data-pu-skin="a4_frostbite"] .st-ok { --st-ok-bg:rgba(224,242,254,0.09); border-left-color:#e0f2fe; background:rgba(224,242,254,0.07); }
[data-theme="dark"] [data-pu-skin="a4_frostbite"] #save-btn { background:linear-gradient(135deg,#646c72,#e0f2fe); box-shadow:0 12px 35px rgba(224,242,254,0.35); }
[data-theme="dark"] [data-pu-skin="a4_frostbite"] #rank-letter { background:linear-gradient(135deg,#0c4a6e,#e0f2fe); border-color:#e0f2fe !important; box-shadow:0 0 40px rgba(224,242,254,0.4); }
[data-theme="dark"] [data-pu-skin="a4_frostbite"] #pu-header-badge { background:linear-gradient(135deg,#646c72,#e0f2fe); }

[data-theme="dark"] [data-pu-skin="a4_velvet2"] { --accent:#7e22ce; --card:#1d0332; --border:#290446; --bg:#140223; }
[data-theme="dark"] [data-pu-skin="a4_velvet2"] .main-rank-card { background:linear-gradient(135deg,#3b0764,#7e22ce); border-color:#290446; }
[data-theme="dark"] [data-pu-skin="a4_velvet2"] .spec-row { background:linear-gradient(90deg,#170228,#380f5c); border-color:#290446; }
[data-theme="dark"] [data-pu-skin="a4_velvet2"] .st-ok { --st-ok-bg:rgba(126,34,206,0.09); border-left-color:#7e22ce; background:rgba(126,34,206,0.07); }
[data-theme="dark"] [data-pu-skin="a4_velvet2"] #save-btn { background:linear-gradient(135deg,#380f5c,#7e22ce); box-shadow:0 12px 35px rgba(126,34,206,0.35); }
[data-theme="dark"] [data-pu-skin="a4_velvet2"] #rank-letter { background:linear-gradient(135deg,#3b0764,#7e22ce); border-color:#7e22ce !important; box-shadow:0 0 40px rgba(126,34,206,0.4); }
[data-theme="dark"] [data-pu-skin="a4_velvet2"] #pu-header-badge { background:linear-gradient(135deg,#380f5c,#7e22ce); }

[data-theme="dark"] [data-pu-skin="a4_citrus"] { --accent:#fb923c; --card:#1b290a; --border:#253a0e; --bg:#121d07; }
[data-theme="dark"] [data-pu-skin="a4_citrus"] .main-rank-card { background:linear-gradient(135deg,#365314,#ca8a04); border-color:#253a0e; }
[data-theme="dark"] [data-pu-skin="a4_citrus"] .spec-row { background:linear-gradient(90deg,#152108,#5a3e01); border-color:#253a0e; }
[data-theme="dark"] [data-pu-skin="a4_citrus"] .st-ok { --st-ok-bg:rgba(251,146,60,0.09); border-left-color:#fb923c; background:rgba(251,146,60,0.07); }
[data-theme="dark"] [data-pu-skin="a4_citrus"] #save-btn { background:linear-gradient(135deg,#70411b,#fb923c); box-shadow:0 12px 35px rgba(251,146,60,0.35); }
[data-theme="dark"] [data-pu-skin="a4_citrus"] #rank-letter { background:linear-gradient(135deg,#365314,#ca8a04); border-color:#fb923c !important; box-shadow:0 0 40px rgba(251,146,60,0.4); }
[data-theme="dark"] [data-pu-skin="a4_citrus"] #pu-header-badge { background:linear-gradient(135deg,#70411b,#fb923c); }

[data-theme="dark"] [data-pu-skin="a4_rose2"] { --accent:#fda4af; --card:#44091b; --border:#5f0d26; --bg:#2f0613; }
[data-theme="dark"] [data-pu-skin="a4_rose2"] .main-rank-card { background:linear-gradient(135deg,#881337,#f43f5e); border-color:#5f0d26; }
[data-theme="dark"] [data-pu-skin="a4_rose2"] .spec-row { background:linear-gradient(90deg,#360716,#6d1c2a); border-color:#5f0d26; }
[data-theme="dark"] [data-pu-skin="a4_rose2"] .st-ok { --st-ok-bg:rgba(253,164,175,0.09); border-left-color:#fda4af; background:rgba(253,164,175,0.07); }
[data-theme="dark"] [data-pu-skin="a4_rose2"] #save-btn { background:linear-gradient(135deg,#71494e,#fda4af); box-shadow:0 12px 35px rgba(253,164,175,0.35); }
[data-theme="dark"] [data-pu-skin="a4_rose2"] #rank-letter { background:linear-gradient(135deg,#881337,#f43f5e); border-color:#fda4af !important; box-shadow:0 0 40px rgba(253,164,175,0.4); }
[data-theme="dark"] [data-pu-skin="a4_rose2"] #pu-header-badge { background:linear-gradient(135deg,#71494e,#fda4af); }

[data-theme="dark"] [data-pu-skin="a4_steel2"] { --accent:#93c5fd; --card:#070b15; --border:#0a101d; --bg:#05080e; }
[data-theme="dark"] [data-pu-skin="a4_steel2"] .main-rank-card { background:linear-gradient(135deg,#0f172a,#1e40af); border-color:#0a101d; }
[data-theme="dark"] [data-pu-skin="a4_steel2"] .spec-row { background:linear-gradient(90deg,#060910,#0d1c4e); border-color:#0a101d; }
[data-theme="dark"] [data-pu-skin="a4_steel2"] .st-ok { --st-ok-bg:rgba(147,197,253,0.09); border-left-color:#93c5fd; background:rgba(147,197,253,0.07); }
[data-theme="dark"] [data-pu-skin="a4_steel2"] #save-btn { background:linear-gradient(135deg,#425871,#93c5fd); box-shadow:0 12px 35px rgba(147,197,253,0.35); }
[data-theme="dark"] [data-pu-skin="a4_steel2"] #rank-letter { background:linear-gradient(135deg,#0f172a,#1e40af); border-color:#93c5fd !important; box-shadow:0 0 40px rgba(147,197,253,0.4); }
[data-theme="dark"] [data-pu-skin="a4_steel2"] #pu-header-badge { background:linear-gradient(135deg,#425871,#93c5fd); }

[data-theme="dark"] [data-pu-skin="a4_galaxy2"] { --accent:#c084fc; --card:#01030b; --border:#010410; --bg:#000208; }
[data-theme="dark"] [data-pu-skin="a4_galaxy2"] .main-rank-card { background:linear-gradient(135deg,#020617,#4f46e5); border-color:#010410; }
[data-theme="dark"] [data-pu-skin="a4_galaxy2"] .spec-row { background:linear-gradient(90deg,#000209,#231f67); border-color:#010410; }
[data-theme="dark"] [data-pu-skin="a4_galaxy2"] .st-ok { --st-ok-bg:rgba(192,132,252,0.09); border-left-color:#c084fc; background:rgba(192,132,252,0.07); }
[data-theme="dark"] [data-pu-skin="a4_galaxy2"] #save-btn { background:linear-gradient(135deg,#563b71,#c084fc); box-shadow:0 12px 35px rgba(192,132,252,0.35); }
[data-theme="dark"] [data-pu-skin="a4_galaxy2"] #rank-letter { background:linear-gradient(135deg,#020617,#4f46e5); border-color:#c084fc !important; box-shadow:0 0 40px rgba(192,132,252,0.4); }
[data-theme="dark"] [data-pu-skin="a4_galaxy2"] #pu-header-badge { background:linear-gradient(135deg,#563b71,#c084fc); }

[data-theme="dark"] [data-pu-skin="a4_dragon2"] { --accent:#f97316; --card:#220505; --border:#300707; --bg:#180303; }
[data-theme="dark"] [data-pu-skin="a4_dragon2"] .main-rank-card { background:linear-gradient(135deg,#450a0a,#7f1d1d); border-color:#300707; }
[data-theme="dark"] [data-pu-skin="a4_dragon2"] .spec-row { background:linear-gradient(90deg,#1b0404,#390d0d); border-color:#300707; }
[data-theme="dark"] [data-pu-skin="a4_dragon2"] .st-ok { --st-ok-bg:rgba(249,115,22,0.09); border-left-color:#f97316; background:rgba(249,115,22,0.07); }
[data-theme="dark"] [data-pu-skin="a4_dragon2"] #save-btn { background:linear-gradient(135deg,#703309,#f97316); box-shadow:0 12px 35px rgba(249,115,22,0.35); }
[data-theme="dark"] [data-pu-skin="a4_dragon2"] #rank-letter { background:linear-gradient(135deg,#450a0a,#7f1d1d); border-color:#f97316 !important; box-shadow:0 0 40px rgba(249,115,22,0.4); }
[data-theme="dark"] [data-pu-skin="a4_dragon2"] #pu-header-badge { background:linear-gradient(135deg,#703309,#f97316); }

[data-theme="dark"] [data-pu-skin="a4_electric"] { --accent:#fde047; --card:#0d1702; --border:#122003; --bg:#091001; }
[data-theme="dark"] [data-pu-skin="a4_electric"] .main-rank-card { background:linear-gradient(135deg,#1a2e05,#365314); border-color:#122003; }
[data-theme="dark"] [data-pu-skin="a4_electric"] .spec-row { background:linear-gradient(90deg,#0a1202,#182509); border-color:#122003; }
[data-theme="dark"] [data-pu-skin="a4_electric"] .st-ok { --st-ok-bg:rgba(253,224,71,0.09); border-left-color:#fde047; background:rgba(253,224,71,0.07); }
[data-theme="dark"] [data-pu-skin="a4_electric"] #save-btn { background:linear-gradient(135deg,#71641f,#fde047); box-shadow:0 12px 35px rgba(253,224,71,0.35); }
[data-theme="dark"] [data-pu-skin="a4_electric"] #rank-letter { background:linear-gradient(135deg,#1a2e05,#365314); border-color:#fde047 !important; box-shadow:0 0 40px rgba(253,224,71,0.4); }
[data-theme="dark"] [data-pu-skin="a4_electric"] #pu-header-badge { background:linear-gradient(135deg,#71641f,#fde047); }

[data-theme="dark"] [data-pu-skin="a4_void2"] { --accent:#4c1d95; --card:#01030b; --border:#010410; --bg:#000208; }
[data-theme="dark"] [data-pu-skin="a4_void2"] .main-rank-card { background:linear-gradient(135deg,#020617,#1e1b4b); border-color:#010410; }
[data-theme="dark"] [data-pu-skin="a4_void2"] .spec-row { background:linear-gradient(90deg,#000209,#0d0c21); border-color:#010410; }
[data-theme="dark"] [data-pu-skin="a4_void2"] .st-ok { --st-ok-bg:rgba(76,29,149,0.09); border-left-color:#4c1d95; background:rgba(76,29,149,0.07); }
[data-theme="dark"] [data-pu-skin="a4_void2"] #save-btn { background:linear-gradient(135deg,#220d43,#4c1d95); box-shadow:0 12px 35px rgba(76,29,149,0.35); }
[data-theme="dark"] [data-pu-skin="a4_void2"] #rank-letter { background:linear-gradient(135deg,#020617,#1e1b4b); border-color:#4c1d95 !important; box-shadow:0 0 40px rgba(76,29,149,0.4); }
[data-theme="dark"] [data-pu-skin="a4_void2"] #pu-header-badge { background:linear-gradient(135deg,#220d43,#4c1d95); }

[data-theme="dark"] [data-pu-skin="a4_crystal2"] { --accent:#e0f2fe; --card:#062537; --border:#08334d; --bg:#041926; }
[data-theme="dark"] [data-pu-skin="a4_crystal2"] .main-rank-card { background:linear-gradient(135deg,#0c4a6e,#38bdf8); border-color:#08334d; }
[data-theme="dark"] [data-pu-skin="a4_crystal2"] .spec-row { background:linear-gradient(90deg,#041d2c,#19556f); border-color:#08334d; }
[data-theme="dark"] [data-pu-skin="a4_crystal2"] .st-ok { --st-ok-bg:rgba(224,242,254,0.09); border-left-color:#e0f2fe; background:rgba(224,242,254,0.07); }
[data-theme="dark"] [data-pu-skin="a4_crystal2"] #save-btn { background:linear-gradient(135deg,#646c72,#e0f2fe); box-shadow:0 12px 35px rgba(224,242,254,0.35); }
[data-theme="dark"] [data-pu-skin="a4_crystal2"] #rank-letter { background:linear-gradient(135deg,#0c4a6e,#38bdf8); border-color:#e0f2fe !important; box-shadow:0 0 40px rgba(224,242,254,0.4); }
[data-theme="dark"] [data-pu-skin="a4_crystal2"] #pu-header-badge { background:linear-gradient(135deg,#646c72,#e0f2fe); }

[data-theme="dark"] [data-pu-skin="a4_phoenix2"] { --accent:#fbbf24; --card:#3e1609; --border:#561f0c; --bg:#2b0f06; }
[data-theme="dark"] [data-pu-skin="a4_phoenix2"] .main-rank-card { background:linear-gradient(135deg,#7c2d12,#ef4444); border-color:#561f0c; }
[data-theme="dark"] [data-pu-skin="a4_phoenix2"] .spec-row { background:linear-gradient(90deg,#311207,#6b1e1e); border-color:#561f0c; }
[data-theme="dark"] [data-pu-skin="a4_phoenix2"] .st-ok { --st-ok-bg:rgba(251,191,36,0.09); border-left-color:#fbbf24; background:rgba(251,191,36,0.07); }
[data-theme="dark"] [data-pu-skin="a4_phoenix2"] #save-btn { background:linear-gradient(135deg,#705510,#fbbf24); box-shadow:0 12px 35px rgba(251,191,36,0.35); }
[data-theme="dark"] [data-pu-skin="a4_phoenix2"] #rank-letter { background:linear-gradient(135deg,#7c2d12,#ef4444); border-color:#fbbf24 !important; box-shadow:0 0 40px rgba(251,191,36,0.4); }
[data-theme="dark"] [data-pu-skin="a4_phoenix2"] #pu-header-badge { background:linear-gradient(135deg,#705510,#fbbf24); }

[data-theme="dark"] [data-pu-skin="a4_cosmos2"] { --accent:#ffd700; --card:#070614; --border:#0a081c; --bg:#05040e; }
[data-theme="dark"] [data-pu-skin="a4_cosmos2"] .main-rank-card { background:linear-gradient(135deg,#0f0c29,#302b63); border-color:#0a081c; }
[data-theme="dark"] [data-pu-skin="a4_cosmos2"] .spec-row { background:linear-gradient(90deg,#060410,#15132c); border-color:#0a081c; }
[data-theme="dark"] [data-pu-skin="a4_cosmos2"] .st-ok { --st-ok-bg:rgba(255,215,0,0.09); border-left-color:#ffd700; background:rgba(255,215,0,0.07); }
[data-theme="dark"] [data-pu-skin="a4_cosmos2"] #save-btn { background:linear-gradient(135deg,#726000,#ffd700); box-shadow:0 12px 35px rgba(255,215,0,0.35); }
[data-theme="dark"] [data-pu-skin="a4_cosmos2"] #rank-letter { background:linear-gradient(135deg,#0f0c29,#302b63); border-color:#ffd700 !important; box-shadow:0 0 40px rgba(255,215,0,0.4); }
[data-theme="dark"] [data-pu-skin="a4_cosmos2"] #pu-header-badge { background:linear-gradient(135deg,#726000,#ffd700); }

[data-theme="dark"] [data-pu-skin="a4_genesis"] { --accent:#ffd700; --card:#01030b; --border:#010410; --bg:#000208; }
[data-theme="dark"] [data-pu-skin="a4_genesis"] .main-rank-card { background:linear-gradient(135deg,#020617,#312e81); border-color:#010410; }
[data-theme="dark"] [data-pu-skin="a4_genesis"] .spec-row { background:linear-gradient(90deg,#000209,#16143a); border-color:#010410; }
[data-theme="dark"] [data-pu-skin="a4_genesis"] .st-ok { --st-ok-bg:rgba(255,215,0,0.09); border-left-color:#ffd700; background:rgba(255,215,0,0.07); }
[data-theme="dark"] [data-pu-skin="a4_genesis"] #save-btn { background:linear-gradient(135deg,#726000,#ffd700); box-shadow:0 12px 35px rgba(255,215,0,0.35); }
[data-theme="dark"] [data-pu-skin="a4_genesis"] #rank-letter { background:linear-gradient(135deg,#020617,#312e81); border-color:#ffd700 !important; box-shadow:0 0 40px rgba(255,215,0,0.4); }
[data-theme="dark"] [data-pu-skin="a4_genesis"] #pu-header-badge { background:linear-gradient(135deg,#726000,#ffd700); }

[data-theme="dark"] [data-pu-skin="a4_oblivion"] { --accent:#7f1d1d; --card:#070614; --border:#0a081c; --bg:#05040e; }
[data-theme="dark"] [data-pu-skin="a4_oblivion"] .main-rank-card { background:linear-gradient(135deg,#0f0c29,#7f1d1d); border-color:#0a081c; }
[data-theme="dark"] [data-pu-skin="a4_oblivion"] .spec-row { background:linear-gradient(90deg,#060410,#390d0d); border-color:#0a081c; }
[data-theme="dark"] [data-pu-skin="a4_oblivion"] .st-ok { --st-ok-bg:rgba(127,29,29,0.09); border-left-color:#7f1d1d; background:rgba(127,29,29,0.07); }
[data-theme="dark"] [data-pu-skin="a4_oblivion"] #save-btn { background:linear-gradient(135deg,#390d0d,#7f1d1d); box-shadow:0 12px 35px rgba(127,29,29,0.35); }
[data-theme="dark"] [data-pu-skin="a4_oblivion"] #rank-letter { background:linear-gradient(135deg,#0f0c29,#7f1d1d); border-color:#7f1d1d !important; box-shadow:0 0 40px rgba(127,29,29,0.4); }
[data-theme="dark"] [data-pu-skin="a4_oblivion"] #pu-header-badge { background:linear-gradient(135deg,#390d0d,#7f1d1d); }

[data-theme="dark"] [data-pu-skin="a4_eternia"] { --accent:#ffd700; --card:#7f375a; --border:#b24d7d; --bg:#59263e; }
[data-theme="dark"] [data-pu-skin="a4_eternia"] .main-rank-card { background:linear-gradient(135deg,#ff6eb4,#a855f7); border-color:#b24d7d; }
[data-theme="dark"] [data-pu-skin="a4_eternia"] .spec-row { background:linear-gradient(90deg,#662c48,#4b266f); border-color:#b24d7d; }
[data-theme="dark"] [data-pu-skin="a4_eternia"] .st-ok { --st-ok-bg:rgba(255,215,0,0.09); border-left-color:#ffd700; background:rgba(255,215,0,0.07); }
[data-theme="dark"] [data-pu-skin="a4_eternia"] #save-btn { background:linear-gradient(135deg,#726000,#ffd700); box-shadow:0 12px 35px rgba(255,215,0,0.35); }
[data-theme="dark"] [data-pu-skin="a4_eternia"] #rank-letter { background:linear-gradient(135deg,#ff6eb4,#a855f7); border-color:#ffd700 !important; box-shadow:0 0 40px rgba(255,215,0,0.4); }
[data-theme="dark"] [data-pu-skin="a4_eternia"] #pu-header-badge { background:linear-gradient(135deg,#726000,#ffd700); }

/* ── モーダル表示中の背面スクロール防止 ──
   script.js 側で <html> に付与される app-modal-lock クラスと対になるスタイル。
   いずれかのモーダル/オーバーレイが表示中は、背面（モーダルの外側）の
   スクロールを止める。各モーダル自体は overflow-y:auto 等で内部スクロール可。 */
html.app-modal-lock,
html.app-modal-lock body {
    overflow: hidden;
}

/* ── ライトモード ハードコード色の上書き ── */
[data-theme="light"] .ai-msg.assistant {
    background: #f0f0f5;
    border-color: rgba(99,102,241,0.2);
}
[data-theme="light"] #ai-input {
    background: #f2f2f7;
    border-color: rgba(99,102,241,0.25);
    color: #000;
}
[data-theme="light"] #ai-input-area {
    background: rgba(0,0,0,0.03);
}
/* カード系（#1a1a1a, #111, #222, #2a2a2a） */
[data-theme="light"] [style*="background:#1a1a1a"],
[data-theme="light"] [style*="background:#111"],
[data-theme="light"] [style*="background:#222"],
[data-theme="light"] [style*="background:#2a2a2a"],
[data-theme="light"] [style*="background:#333"],
[data-theme="light"] [style*="background:#0d0d0d"],
[data-theme="light"] [style*="background:#1c1c1e"],
[data-theme="light"] [style*="background:#1e1e1e"],
[data-theme="light"] [style*="background:#0a0a0a"] {
    background: #ffffff !important;
    border-color: #d1d1d6 !important;
}
/* サブカード系（#222 内の小カード） */
[data-theme="light"] [style*="background:#222;border-radius"] {
    background: #f2f2f7 !important;
}
/* エラーカード */
[data-theme="light"] [style*="background:#1c0a0a"] {
    background: #fff2f2 !important;
}
/* ダークなモーダル背景 */
[data-theme="light"] [style*="background:#0d0d1a"],
[data-theme="light"] [style*="background:#0d0d2e"],
[data-theme="light"] [style*="background:#16162a"],
[data-theme="light"] [style*="background:#1a1a2e"],
[data-theme="light"] [style*="background:#2a2a3a"] {
    background: #f5f5ff !important;
}
/* テキスト色の反転が必要な箇所 */
[data-theme="light"] [style*="color:#fff"]:not([style*="background:#6366f1"]):not([style*="background:linear-gradient"]):not(button):not(.ai-msg.user) {
    color: #000 !important;
}
[data-theme="light"] [style*="color:#aaa"],
[data-theme="light"] [style*="color:#888"],
[data-theme="light"] [style*="color:#999"] {
    color: #6c6c70 !important;
}
[data-theme="light"] [style*="color:#ccc"],
[data-theme="light"] [style*="color:#ddd"] {
    color: #3c3c43 !important;
}
/* ヘッダー */
[data-theme="light"] #pu-header {
    background: #ffffff;
    border-bottom: 1px solid #d1d1d6;
}
/* legend-btn */
[data-theme="light"] #legend-btn:hover {
    background: #e5e5ea !important;
}

/* ── スマホ向けヘッダー(auth-bar)最適化 ── */
@media (max-width: 480px) {
    #auth-bar {
        padding: 6px 8px !important;
    }
    #auth-user-info {
        gap: 4px !important;
    }
    #auth-username {
        max-width: 70px !important;
        font-size: 0.75rem !important;
    }
    #auth-sync-status {
        display: none !important;
    }
    #auth-bar > div:last-child {
        gap: 4px !important;
    }
    #auth-logout-btn {
        padding: 4px 8px !important;
        font-size: 0.68rem !important;
    }
    #notif-btn {
        width: 28px !important;
        height: 28px !important;
    }
    #propass-register-btn {
        display: none !important;
    }
    #auth-friend-btn {
        padding: 4px 8px !important;
        font-size: 0.68rem !important;
    }
    #auth-friend-btn svg {
        width: 12px !important;
        height: 12px !important;
    }
    #auth-login-btn {
        padding: 4px 10px !important;
        font-size: 0.72rem !important;
    }
}
@media (max-width: 380px) {
    #auth-username {
        max-width: 45px !important;
    }
    #auth-logout-btn span {
        display: none;
    }
    #auth-logout-btn::after {
        content: "⏻";
        font-size: 0.85rem;
    }
    #auth-friend-label {
        display: none !important;
    }
}