/* 非表示ページのテキスト選択を防ぐ */
        /* OAuthボタンのホバー時に文字色を白に維持 */
        .btn-outline-light[onclick*="oauthLogin"], .btn-outline-light[onclick*="registerWithOAuth"] {
            color: #fff !important;
        }
        .btn-outline-light[onclick*="oauthLogin"]:hover, .btn-outline-light[onclick*="registerWithOAuth"]:hover,
        .btn-outline-light[onclick*="oauthLogin"]:focus, .btn-outline-light[onclick*="registerWithOAuth"]:focus {
            color: #fff !important;
            opacity: 0.85;
        }
        /* inert属性で非表示ページのCtrl+A選択を防止（MutationObserverで自動管理） */
        /* ダークモード（デフォルト） */
        body {
            --bg-dark-card: #2a2a4a;
            --bg-dark-item: #1a1a2e;
            --text-highlight-blue: #88c0ff;
            --text-highlight-gold: #f0c040;
            --text-muted-gray: #888;
            background: #212529;
            color: #dee2e6;
            min-height: 100vh;
            transition: background 0.3s, color 0.3s;
        }
        .navbar { background: #343a40 !important; }
        .card { background: #2d3238; border: 1px solid #495057; }
        .card-header { background: #343a40; border-bottom: 1px solid #495057; color: #dee2e6; }
        .card-body { color: #dee2e6; }
        .table { color: #dee2e6; }
        .table-dark { --bs-table-bg: #2d3238; }
        .list-group-item { background: #2d3238; border-color: #495057; color: #dee2e6; }
        .btn-warning { background: #ffc107; color: #fff; }
        .form-control, .form-select {
            background: #2d3238;
            border-color: #495057;
            color: #dee2e6;
        }
        .form-control:focus, .form-select:focus {
            background: #343a40;
            border-color: #ffc107;
            color: #dee2e6;
            box-shadow: 0 0 0 0.25rem rgba(255,193,7,0.25);
        }
        .form-control::placeholder { color: #6c757d; }
        .modal-content { background: #2d3238; border-color: #495057; }
        .modal-header { border-color: #495057; }
        .modal-footer { border-color: #495057; }
        .nav-tabs { border-color: #495057; }
        .nav-tabs .nav-link { color: #adb5bd; border-color: transparent; }
        .nav-tabs .nav-link:hover { border-color: #495057; color: #dee2e6; }
        .nav-tabs .nav-link.active { background: #343a40; border-color: #495057 #495057 #343a40; color: #ffc107; }
        .text-muted-custom { color: #adb5bd; }
        /* タブペインの表示制御 - authModal専用 */
        #authModal .tab-pane { display: none !important; }
        #authModal .tab-pane.show.active { display: block !important; }

        /* ライトモード */
        body.light-mode {
            --bg-dark-card: #e9ecef;
            --bg-dark-item: #f0f0f0;
            --text-highlight-blue: #0d6efd;
            --text-highlight-gold: #b38600;
            --text-muted-gray: #6c757d;
            background: #f8f9fa;
            color: #212529;
        }
        body.light-mode .navbar { background: #e9ecef !important; }
        body.light-mode .navbar-dark .navbar-nav .nav-link { color: #212529; }
        body.light-mode .navbar-dark .navbar-brand { color: #212529; }
        body.light-mode .card { background: #ffffff; border-color: #dee2e6; }
        body.light-mode .card-header { background: #e9ecef; border-color: #dee2e6; color: #212529; }
        body.light-mode .card-body { color: #212529; }
        body.light-mode .list-group-item { background: #ffffff; border-color: #dee2e6; color: #212529; }
        body.light-mode .form-control, body.light-mode .form-select {
            background: #ffffff;
            border-color: #ced4da;
            color: #212529;
        }
        body.light-mode .form-control:focus, body.light-mode .form-select:focus {
            background: #ffffff;
            color: #212529;
        }
        body.light-mode .modal-content { background: #ffffff; border-color: #dee2e6; }
        body.light-mode .nav-tabs { border-color: #dee2e6; }
        body.light-mode .nav-tabs .nav-link { color: #6c757d; }
        body.light-mode .nav-tabs .nav-link:hover { color: #212529; }
        body.light-mode .nav-tabs .nav-link.active { background: #e9ecef; border-color: #dee2e6 #dee2e6 #e9ecef; }
        body.light-mode .text-muted-custom { color: #6c757d; }
        body.light-mode .btn-outline-secondary { color: #212529; border-color: #6c757d; }
        body.light-mode code { background: #e9ecef; color: #212529; }
        body.light-mode .table { color: #212529; }
        body.light-mode .text-muted { color: #6c757d !important; }
        body.light-mode .form-check-label { color: #212529; }

        .rating-display {
            font-size: 3rem;
            font-weight: bold;
            color: #ffc107;
            text-shadow: 0 0 6px rgba(255,193,7,0.15);
        }
        .diff-bas { background: #28a745; color: #fff; }
        .diff-adv { background: #ffc107; color: #fff; }
        .diff-exp { background: #dc3545; color: #fff; }
        .diff-mas { background: #6f42c1; color: #fff; }
        .diff-ult { background: #000; border: 1px solid #666; color: #fff; }
        .diff-we { background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3); color: #fff; font-weight: bold; }

        .record-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #495057;
        }
        .record-rank {
            font-size: 1.5rem;
            font-weight: bold;
            color: #ffc107;
            width: 50px;
        }
        .record-info { flex: 1; }
        .record-title { font-weight: bold; }
        .record-meta { font-size: 0.65rem; color: #adb5bd; }
        body.light-mode .record-meta { color: #6c757d; }
        .record-rating {
            font-size: 0.7rem;
            font-weight: bold;
            color: #28a745;
        }

        .lamp-fc { color: #ffc107; }
        .lamp-aj { color: #ff69b4; }

        .bookmarklet-box {
            background: #343a40;
            padding: 15px;
            border-radius: 8px;
            font-family: monospace;
            word-break: break-all;
            font-size: 0.7rem;
        }
        body.light-mode .bookmarklet-box { background: #e9ecef; }

        .login-prompt {
            text-align: center;
            padding: 50px 20px;
        }
        .login-prompt h2 {
            color: #ffc107;
            margin-bottom: 20px;
        }

        .user-badge {
            background: #495057;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.7rem;
        }
        body.light-mode .user-badge { background: #dee2e6; color: #212529; }

        body.light-mode .record-item { border-bottom-color: #dee2e6; }

        /* 履歴アイテム */
        /* BEST枠ハイライト */
        .best-row { background: rgba(255, 255, 255, 0.03) !important; }
        .best-row td { opacity: 0.9; }
        .history-item { background: #2d3238 !important; border-color: #495057 !important; }
        body.light-mode .history-item { background: #ffffff !important; border-color: #dee2e6 !important; }

        /* マイ定数表グリッド */
        .myconst-grid {
            padding: 4px;
        }
        .myconst-cell {
            position: relative;
            aspect-ratio: 1;
            border-radius: 4px;
            overflow: hidden;
            border: 2px solid transparent;
        }
        .myconst-cell img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .myconst-cell .jacket-placeholder {
            width: 100%;
            height: 100%;
            background: #2a2a3a;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 24px;
        }
        .myconst-cell .const-badge {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.75);
            color: #ffc107;
            font-size: 0.7rem;
            font-weight: bold;
            text-align: center;
            padding: 2px 0;
        }
        .myconst-cell .mark-badge {
            position: absolute;
            top: 2px;
            right: 2px;
            font-size: 0.55rem;
            font-weight: bold;
            padding: 1px 4px;
            border-radius: 3px;
        }
        .myconst-cell .mark-badge.aj {
            background: linear-gradient(135deg, #ffd700, #ffaa00);
            color: #fff;
        }
                /* クリアランプ表示 */ 
        .lamp-badge {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: bold;
            margin-right: 4px;
        }
        .lamp-badge.lamp-clear { background: #6c757d; color: #fff; }
        .lamp-badge.lamp-hard { background: #fd7e14; color: #fff; }
        .lamp-badge.lamp-absolute { background: #dc3545; color: #fff; }
        .lamp-badge.lamp-absolutep { background: #e91e63; color: #fff; }
        .lamp-badge.lamp-catastrophy { background: #9c27b0; color: #fff; }
        .lamp-badge.lamp-brave { background: linear-gradient(90deg, #ffd700, #ff6b6b); color: #fff; }
        .mark-badge.fc {
            background: #28a745;
            color: #fff;
        }
        .myconst-cell.marked { border-color: #ffc107; }
        .myconst-cell.aj { border-color: #ffd700; }
        .myconst-cell.fc { border-color: #28a745; }
        
        .myconst-cell .diff-label {
            position: absolute;
            top: 2px;
            left: 2px;
            font-size: 9px;
            padding: 1px 4px;
            border-radius: 3px;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        .myconst-cell .diff-label.diff-bas { background: #22bb5b; }
        .myconst-cell .diff-label.diff-adv { background: #f9a825; }
        .myconst-cell .diff-label.diff-exp { background: #e53935; }
        .myconst-cell .diff-label.diff-mas { background: #9c27b0; }
        .myconst-cell .diff-label.diff-ult { background: #1a1a1a; }
        .myconst-cell .diff-label.diff-we { background: #00bcd4; }
        .myconst-cell .new-badge {
            position: absolute; top: 18px; left: 2px;
            background: linear-gradient(135deg, #ff6b6b, #ffc107);
            color: #fff; font-size: 0.5rem; font-weight: bold;
            padding: 1px 3px; border-radius: 3px;
        }
        .myconst-cell .unconfirmed-badge {
            position: absolute; top: 18px; right: 2px;
            background: linear-gradient(135deg, #9c27b0, #673ab7);
            color: #fff; font-size: 0.55rem; font-weight: bold;
            padding: 1px 4px; border-radius: 3px;
            animation: pulse-unconfirmed 2s infinite;
        }
        @keyframes pulse-unconfirmed {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }
        .unconfirmed-badge-inline {
            background: linear-gradient(135deg, #9c27b0, #673ab7);
            color: #fff; font-size: 0.7rem; font-weight: bold;
            padding: 2px 6px; border-radius: 3px; margin-left: 4px;
        }
        body.light-mode .myconst-cell .jacket-placeholder { background: #e0e0e0; }

        /* マイ定数グループ */
        .myconst-group {
            margin-bottom: 12px;
        }
        .myconst-group-header {
            font-size: 0.7rem;
            font-weight: bold;
            color: #ffc107;
            padding: 4px 8px;
            margin-bottom: 4px;
            background: rgba(255,193,7,0.1);
            border-left: 3px solid #ffc107;
            border-radius: 0 4px 4px 0;
        }
        body.light-mode .myconst-group-header {
            background: rgba(255,193,7,0.15);
            color: #856404;
        }
        .myconst-group-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--myconst-cell-size, 105px), 1fr));
            gap: 3px;
        }
        .myconst-cell .score-badge {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.9));
            color: #fff;
            font-family: 'Orbitron', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            text-align: center;
            padding: 2px 0;
            letter-spacing: 1px;
            text-shadow: 0 0 3px rgba(255,255,255,0.3);
        }


        /* ボーダースコア計算テーブル - コントラスト比検証済み */
        /* ダークモード (背景 #2d3238) */
        #border-result .table { color: #dee2e6; }
        #border-result .table th { color: #ced4da; border-bottom-color: #6c757d; }
        #border-result .table td { border-bottom-color: #6c757d; color: #dee2e6; }
        #border-result .text-success { color: #5dd9a8 !important; }
        #border-result .text-warning { color: #ffda6a !important; }
        #border-result .text-danger { color: #ff8585 !important; }
        #border-result .fw-bold { color: #ffffff; }
        #border-table-body .table-active { background: rgba(255, 218, 106, 0.15) !important; }

        /* ライトモード (背景 #ffffff) */
        body.light-mode #border-result .table { color: #212529; }
        body.light-mode #border-result .table th { color: #495057; border-bottom-color: #dee2e6; }
        body.light-mode #border-result .table td { border-bottom-color: #dee2e6; color: #212529; }
        body.light-mode #border-result .text-success { color: #146c43 !important; }
        body.light-mode #border-result .text-warning { color: #997404 !important; }
        body.light-mode #border-result .text-danger { color: #b02a37 !important; }
        body.light-mode #border-result .fw-bold { color: #212529; }
        body.light-mode #border-table-body .table-active { background: rgba(255, 193, 7, 0.25) !important; }

        /* 右側パネル (ランクボーダー一覧) */
        .border-list-panel { color: #dee2e6; }
        .border-list-panel span { color: #dee2e6; }
        .border-list-panel .fw-bold { color: #ffffff; }
        .border-list-panel .text-warning { color: #ffda6a !important; }
        .border-list-panel .border-bottom { border-bottom-color: #6c757d !important; }
        body.light-mode .border-list-panel { color: #212529; }
        body.light-mode .border-list-panel span { color: #212529; }
        body.light-mode .border-list-panel .fw-bold { color: #212529; }
        body.light-mode .border-list-panel .text-warning { color: #997404 !important; }
        body.light-mode .border-list-panel .border-bottom { border-bottom-color: #dee2e6 !important; }

        /* Music DB テーブル */
        /* DBページはダーク固定（ライトモードでも変更しない） */
        body.light-mode #page-musicdb,
        body.light-mode #page-musicdetail {
            color: #dee2e6 !important;
        }
        body.light-mode #page-musicdb .card,
        body.light-mode #page-musicdetail .card {
            background: #2d3238 !important;
            border-color: #495057 !important;
            color: #dee2e6 !important;
        }
        body.light-mode #page-musicdb .card-header,
        body.light-mode #page-musicdetail .card-header {
            background: #343a40 !important;
            border-color: #495057 !important;
            color: #dee2e6 !important;
        }
        body.light-mode #page-musicdb .card-body,
        body.light-mode #page-musicdetail .card-body {
            color: #dee2e6 !important;
        }
        body.light-mode #page-musicdb .table,
        body.light-mode #page-musicdetail .table {
            color: #dee2e6 !important;
            --bs-table-bg: transparent !important;
        }
        body.light-mode #page-musicdb .table th,
        body.light-mode #page-musicdetail .table th {
            color: #adb5bd !important;
            background: #343a40 !important;
        }
        body.light-mode #page-musicdb .table td,
        body.light-mode #page-musicdetail .table td {
            color: #dee2e6 !important;
            border-color: #495057 !important;
        }
        body.light-mode #page-musicdb .text-muted,
        body.light-mode #page-musicdetail .text-muted,
        body.light-mode #page-musicdb .text-muted-custom,
        body.light-mode #page-musicdetail .text-muted-custom {
            color: #adb5bd !important;
        }
        body.light-mode #page-musicdb h4,
        body.light-mode #page-musicdb h5,
        body.light-mode #page-musicdb h6,
        body.light-mode #page-musicdetail h4,
        body.light-mode #page-musicdetail h5,
        body.light-mode #page-musicdetail h6 {
            color: #dee2e6 !important;
        }
        body.light-mode #page-musicdb p,
        body.light-mode #page-musicdetail p {
            color: #dee2e6 !important;
        }
        body.light-mode #page-musicdb small,
        body.light-mode #page-musicdetail small {
            color: #adb5bd !important;
        }
        body.light-mode #page-musicdb .form-control,
        body.light-mode #page-musicdb .form-select {
            background: #343a40 !important;
            border-color: #495057 !important;
            color: #dee2e6 !important;
        }
        body.light-mode #page-musicdb .btn-outline-secondary {
            color: #dee2e6 !important;
            border-color: #6c757d !important;
        }
        /* DBページのカテゴリヘッダーはダーク固定 */
        body.light-mode #page-musicdb .db-category-header {
            background: #343a40 !important;
            color: #dee2e6 !important;
        }
        body.light-mode #page-musicdb .db-category-header span {
            color: #dee2e6 !important;
        }
        body.light-mode #page-musicdb .db-category-header .text-count {
            color: #adb5bd !important;
        }
        body.light-mode #page-musicdb .db-category-header .fa-chevron-down,
        body.light-mode #page-musicdb .db-category-header i {
            color: #adb5bd !important;
        }
        body.light-mode #page-musicdb .db-section-header {
            background: #343a40 !important;
            color: #dee2e6 !important;
        }
        body.light-mode .db-list-panel {
            background: linear-gradient(135deg, #252540 0%, #1a1a2e 100%) !important;
        }
        body.light-mode .db-list-item {
            background: rgba(30, 30, 50, 0.6) !important;
            border-color: rgba(124, 58, 237, 0.2) !important;
            color: #dee2e6 !important;
        }
        body.light-mode .db-list-title {
            color: #ffffff !important;
        }
        body.light-mode .db-list-artist {
            color: #adb5bd !important;
        }
        /* DB詳細パネル - page-musicdb用 */
        body.light-mode #page-musicdb .db-chart-table {
            background: #2d3238 !important;
        }
        body.light-mode #page-musicdb .db-chart-table th {
            background: #343a40 !important;
            color: #adb5bd !important;
            border-color: #495057 !important;
        }
        body.light-mode #page-musicdb .db-chart-table td {
            background: #2d3238 !important;
            color: #dee2e6 !important;
            border-color: #495057 !important;
        }
        body.light-mode #page-musicdb .db-detail-body {
            color: #dee2e6 !important;
        }
        body.light-mode #page-musicdb .db-detail-section-title {
            color: #a78bfa !important;
        }
        body.light-mode #page-musicdb .db-detail-header {
            color: #dee2e6 !important;
        }
        body.light-mode #page-musicdb .db-detail-artist {
            color: #a78bfa !important;
        }
        /* db-link-btnは元の色を維持 */
        body.light-mode #page-musicdb .db-link-btn {
            color: #fff !important;
        }
        body.light-mode #page-musicdb .btn-outline-secondary {
            color: #dee2e6 !important;
            border-color: #6c757d !important;
        }
        /* DBページのカテゴリヘッダーはダーク固定 */
        body.light-mode #page-musicdb .db-category-header {
            background: #343a40 !important;
            color: #dee2e6 !important;
        }
        body.light-mode #page-musicdb .db-category-header span {
            color: #dee2e6 !important;
        }
        body.light-mode #page-musicdb .db-category-header .text-count {
            color: #adb5bd !important;
        }
        body.light-mode #page-musicdb .db-category-header .fa-chevron-down,
        body.light-mode #page-musicdb .db-category-header i {
            color: #adb5bd !important;
        }
        body.light-mode #page-musicdb .db-section-header {
            background: #343a40 !important;
            color: #dee2e6 !important;
        }
        body.light-mode #page-musicdb .db-detail-meta-item {
            color: #c4b5fd !important;
            background: rgba(124, 58, 237, 0.3) !important;
        }
        body.light-mode #page-musicdb .db-detail-title {
            color: #ffffff !important;
        }
        body.light-mode .db-detail-section-title {
            color: #a78bfa !important;
        }
        body.light-mode .db-detail-body {
            color: #dee2e6 !important;
        }
        body.light-mode .drawer-title {
            color: #ffffff !important;
        }
        body.light-mode .drawer-artist {
            color: #a78bfa !important;
        }
        /* DB譜面テーブル */
        body.light-mode #page-musicdetail table.table-dark,
        body.light-mode #page-musicdetail .table {
            --bs-table-bg: #2d3238 !important;
            --bs-table-color: #dee2e6 !important;
            color: #dee2e6 !important;
        }
        body.light-mode #page-musicdetail table.table-dark th,
        body.light-mode #page-musicdetail .table th {
            background: #343a40 !important;
            color: #adb5bd !important;
            border-color: #495057 !important;
        }
        body.light-mode #page-musicdetail table.table-dark td,
        body.light-mode #page-musicdetail .table td {
            background: #2d3238 !important;
            color: #dee2e6 !important;
            border-color: #495057 !important;
        }
        body.light-mode #page-musicdetail table.table-dark > :not(caption) > * > *,
        body.light-mode #page-musicdetail .table > :not(caption) > * > * {
            background: inherit !important;
            color: #dee2e6 !important;
        }
        body.light-mode #page-musicdetail a {
            color: #a78bfa !important;
        }
        body.light-mode #page-musicdetail a:hover {
            color: #c4b5fd !important;
        }
        /* 外部リンク */
        body.light-mode #page-musicdetail .btn-outline-secondary,
        body.light-mode #page-musicdetail .btn-outline-light {
            color: #dee2e6 !important;
            border-color: #6c757d !important;
        }
        /* BEST/NEWグリッド */
        .best-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, 140px);
            gap: 7px;
            justify-content: start;
        }
        .best-grid-item {
            display: flex;
            background: var(--card-bg);
            border-radius: 4px;
            overflow: hidden;
            width: 140px;
            flex-wrap: wrap;
            
        }
        .best-grid-item .grid-title {
            font-size: 12px;
            width: 100%;
            flex-shrink: 0;
        }
        .grid-left {
            width: 34px;
            background: rgba(0,0,0,0.4);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 4px 2px;
            flex-shrink: 0;
            font-family: 'M PLUS 1p', sans-serif;
        }
        .grid-rank {
            font-size: 12px;
            font-weight: bold;
            color: var(--text-muted);
            margin-bottom: 6px;
        }
        .grid-label {
            font-size: 7px;
            color: var(--text-muted);
            letter-spacing: -0.5px;
        }
        .grid-const-val {
            font-size: 11px;
            font-weight: bold;
            color: #17a2b8;
            margin-bottom: 8px;
        }
        .grid-rate-val {
            font-size: 10px;
            font-weight: bold;
            color: #ffc107;
        }
        .grid-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        .grid-jacket-wrap {
            position: relative;
            width: 106px;
            height: 106px;
        }
        .grid-jacket {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #1a1a2a;
        }
        .grid-jacket img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .grid-jacket-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #444;
            font-size: 20px;
        }
        .grid-diff {
            position: absolute;
            top: 2px;
            left: 2px;
            padding: 1px 3px;
            border-radius: 2px;
            font-size: 7px;
            font-weight: bold;
            color: #fff;
        }
        .grid-diff.diff-bas { background: #28a745; }
        .grid-diff.diff-adv { background: #ffc107; color: #fff; }
        .grid-diff.diff-exp { background: #dc3545; }
        .grid-diff.diff-mas { background: #6f42c1; }
        .grid-diff.diff-ult { background: #000; }
        .grid-mark {
            position: absolute;
            top: 2px;
            right: 2px;
            padding: 1px 3px;
            border-radius: 2px;
            font-size: 7px;
            font-weight: bold;
        }
        .grid-mark.mark-aj { background: #ffd700; color: #fff; }
        .grid-mark.mark-fc { background: #32cd32; color: #fff; }
        .grid-score {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.75);
            color: #fff;
            font-family: 'Orbitron', sans-serif;
            font-size: 9px;
            font-weight: 700;
            text-align: center;
            padding: 2px 0;
            letter-spacing: 0.5px;
        }
        .grid-title {
            font-size: 12px;
            padding: 2px 3px;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            width: 140px;
            text-overflow: ellipsis;
            text-align: center;
            background: rgba(0,0,0,0.3);
        }
        @media (max-width: 768px) {
            .best-grid { grid-template-columns: repeat(auto-fill, 110px); }
            .best-grid-item { width: 110px; }
            .grid-jacket-wrap { width: 72px; height: 80px; }
            .grid-left { width: 30px; }
        }
        /* ホーム中間幅対応 */
        @media (max-width: 1400px) and (min-width: 1001px) {
            #stats-content > .row {
                flex-wrap: nowrap !important;
            }
            #stats-content > .row > .col-lg-4 {
                width: auto !important;
                flex: 0 0 auto !important;
                max-width: none !important;
            }
            #stats-content > .row > .col-md-8 {
                flex: 1 1 0 !important;
                width: 0 !important;
                min-width: 0 !important;
                max-width: none !important;
            }
        }
        @media (max-width: 1000px) {
            #stats-content > .row {
                flex-wrap: wrap !important;
            }
            #stats-content > .row > .col-lg-4,
            #stats-content > .row > .col-md-8 {
                width: 100% !important;
                flex: 0 0 100% !important;
                max-width: 100% !important;
            }
        }
        @media (max-width: 850px) {
            .player-profile-main {
                flex-direction: row !important;
            }
            .player-char-area {
                flex-direction: column !important;
            }
        }
        /* スマホ用: プロフカードを画面幅に比例して縮小 (432px基準、一回り小さく) */
        @media (max-width: 432px) {
            .chunithm-player-card { transform: scale(0.95); transform-origin: top left; margin-bottom: -17px; overflow: visible !important; height: auto !important; }
            #stats-content > .row > .col-lg-4 { overflow: visible !important; min-height: auto; }
            .col-lg-4.col-md-6.mb-4 { overflow: visible !important; }
        }
        @media (max-width: 410px) {
            .chunithm-player-card { transform: scale(0.902); transform-origin: top left; margin-bottom: -33px; overflow: visible !important; }
        }
        @media (max-width: 390px) {
            .chunithm-player-card { transform: scale(0.858); transform-origin: top left; margin-bottom: -48px; overflow: visible !important; }
        }
        @media (max-width: 370px) {
            .chunithm-player-card { transform: scale(0.813); transform-origin: top left; margin-bottom: -64px; overflow: visible !important; }
        }
        @media (max-width: 350px) {
            .chunithm-player-card { transform: scale(0.770); transform-origin: top left; margin-bottom: -78px; overflow: visible !important; }
        }
        @media (max-width: 330px) {
            .chunithm-player-card { transform: scale(0.726); transform-origin: top left; margin-bottom: -93px; overflow: visible !important; }
        }
        @media (max-width: 310px) {
            .chunithm-player-card { transform: scale(0.682); transform-origin: top left; margin-bottom: -108px; overflow: visible !important; }
        }
        @media (max-width: 290px) {
            .chunithm-player-card { transform: scale(0.637); transform-origin: top left; margin-bottom: -123px; overflow: visible !important; }
        }
        @media (max-width: 270px) {
            .chunithm-player-card { transform: scale(0.594); transform-origin: top left; margin-bottom: -138px; overflow: visible !important; }
        }
        @media (max-width: 250px) {
            .chunithm-player-card { transform: scale(0.550); transform-origin: top left; margin-bottom: -153px; overflow: visible !important; }
        }
        @media (max-width: 230px) {
            .chunithm-player-card { transform: scale(0.505); transform-origin: top left; margin-bottom: -168px; overflow: visible !important; }
        }
        @media (max-width: 210px) {
            .chunithm-player-card { transform: scale(0.462); transform-origin: top left; margin-bottom: -183px; overflow: visible !important; }
        }

                /* セクション区切り */
        .best-section-divider {
            display: flex;
            align-items: center;
            margin: 20px 0 15px;
            font-family: 'M PLUS 1p', sans-serif;
        }
        .best-section-divider::before,
        .best-section-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(to right, transparent, var(--border-color), transparent);
        }
        .best-section-divider span {
            padding: 0 15px;
            font-size: 14px;
            font-weight: bold;
            color: var(--text-muted);
        }
        /* フッター情報 */
        .best-footer-info {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid var(--border-color);
            font-size: 12px;
            color: var(--text-muted);
        }
        .best-footer-info .timestamps {
            display: flex;
            gap: 20px;
            margin-bottom: 10px;
        }
        .best-footer-info .disclaimer {
            font-size: 12px;
            line-height: 1.5;
        }

        /* CHUNITHM-NET Style Player Card */
        .chunithm-player-card {
            background: #1e1e2e;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #3a3a5a;
            width: 410px;
            height: auto; min-height: 340px;
            flex-shrink: 0;
        }
        .player-profile-main {
            position: relative;
            display: flex;
            padding: 15px;
            gap: 7px;
            background: linear-gradient(135deg, #252540 0%, #1a1a2e 100%);
        }
        .player-nameplate {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-size: cover;
            background-position: left top;
            opacity: 0.3;
            
        }
        /* Character area */
        .player-char-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            position: relative;
            z-index: 1;
        }
        .player-char-box {
            width: 85px;
            height: 85px;
            border-radius: 6px;
            overflow: hidden;
            background: #2a2a4a;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 3px solid #555;
            position: relative;
        }
        .player-char-box.rainbow-frame {
            border: 4px solid transparent;
            background:
                linear-gradient(#2a2a4a, #2a2a4a) padding-box,
                linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff0000) border-box;
            background-size: 100% 100%, 400% 100%;
            animation: rainbowSlide 3s linear infinite;
        }
        @keyframes rainbowSlide {
            0% { background-position: 0 0, 0% 0; }
            100% { background-position: 0 0, 400% 0; }
        }
        .player-char-box img {
            width: 90%;
            height: 90%;
            object-fit: cover;
            border-radius: 3px;
        }
        .player-char-box i {
            font-size: 2rem;
            color: #555;
        }
        .player-badges-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        .player-rank-badge {
            min-width: 60px;
            text-align: center;
        }
        .player-rank-badge img {
            width: 72px;
            height: auto;
        }
        .player-rate-emblem {
            text-align: center;
            margin-top: -24px;
            position: relative;
            display: inline-block;
        }
        .player-rate-emblem img.rate-emblem-bg {
            width: 55px;
            height: auto;
        }
        .rate-emblem-num {
            position: absolute;
            top: 51%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            gap: 7px;
        }
        .rate-emblem-num img {
            width: 16px;
            height: auto;
        }
        .player-course {
            text-align: center;
            margin-top: -9px;
            position: relative;
            display: inline-block;
        }
        .player-course .class-base {
            width: 86px;
            height: auto;
            display: block;
        }
        .player-course .class-medal {
            width: 86px;
            height: auto;
        }
        .player-course:not(:has(.class-base)) .class-medal {
            display: block;
            margin: 0 auto;
        }
        .player-course:has(.class-base) .class-medal {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .player-rank-badge span {
            background: linear-gradient(180deg, #ffd700, #cc8800);
            color: #fff;
            font-weight: bold;
            font-size: 0.65rem;
            padding: 3px 10px;
            border-radius: 4px;
            display: inline-block;
        }
        /* Info area */
        .player-info-area {
            padding-left: 19px;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0;
            min-width: 0;
            max-width: 100%;
            overflow: visible;
            position: relative;
            z-index: 1;
        }
        /* Team row */
        .player-team-line {
            transform: scale(1.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 600;
            color: #fff;
            background: none;
            padding: 0 10px 0 30px;
            height: 70px;
            line-height: 70px;
            width: 257px;
            max-width: 257px;
            background-size: 257px auto !important;
            background-position: -2px center;
            background-repeat: no-repeat;
            border-radius: 4px;
            margin-bottom: 0;
            margin-top: -20px;
            padding-left: 9px; padding-top: 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
        }
        .team-emblem-dot {
            width: 14px;
            height: 14px;
            border-radius: 3px;
            box-shadow: 0 0 4px currentColor;
        }
        .team-emblem-dot.purple { background: #9b59b6; }
        .team-emblem-dot.gold { background: #f1c40f; }
        .team-emblem-dot.silver { background: #bdc3c7; }
        .team-emblem-dot.rainbow { background: linear-gradient(90deg, red, orange, yellow, green, blue, purple); }
        .team-emblem-dot.red { background: #e74c3c; }
        .team-emblem-dot.yellow { background: #f1c40f; }
        .team-emblem-dot.green { background: #27ae60; }
        .team-emblem-dot.gray { background: #7f8c8d; }
        /* Honors */
        .player-honors-list {
            transform: scale(1.1);
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        .honor-bar {
            position: relative;
            z-index: 1;
            height: 70px;
            line-height: 27px;
            padding: 0 12px;
            font-size: 0.7rem;
            font-weight: bold;
            text-align: center;
            border-radius: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 257px;
            max-width: 257px;
            box-sizing: border-box;
            margin-top: -41px;
        }
        
        .player-honors-list .honor-bar:first-child {
            margin-top: -8px;
        }
        .player-honors-list .honor-bar.version-conquest:first-child {
            margin-top: -11px !important;
        }
        .honor-bar.version-conquest {
            transform: none;
            
            color: transparent;
            text-shadow: none;
            
            background-size: 257px auto !important;
            background-position: left top;
            background-repeat: no-repeat;
            background-color: transparent;
        }
        .honor-bar.master {
            background: url(/static/images/chunithm/honor_bg_master.png) left top/257px 30px no-repeat;
            color: #000;
            text-shadow: 0 0 3px #fff, 0 0 5px #fff;
        }
        .honor-bar.gold {
            background: url(/static/images/chunithm/honor_bg_gold.png) left top/257px 30px no-repeat;
            color: #000;
            text-shadow: 0 0 2px #fff;
        }
        .honor-bar.silver {
            background: url(/static/images/chunithm/honor_bg_silver.png) left top/257px 30px no-repeat;
            color: #222;
            text-shadow: 0 0 2px #fff;
        }
        .honor-bar.normal {
            background: url(/static/images/chunithm/honor_bg_normal.png) left top/257px 30px no-repeat;
            color: #000;
            text-shadow: 0 0 3px #fff, 0 0 5px #fff;
        }
        .honor-bar.platina {
            background: url(/static/images/chunithm/honor_bg_platina.png) left top/257px 30px no-repeat;
            color: #000;
            text-shadow: 0 0 3px #fff, 0 0 5px #fff;
        }
        .honor-bar.rainbow {
            background: url(/static/images/chunithm/honor_bg_rainbow.png) left top/257px 30px no-repeat;
            color: #000;
            text-shadow: 0 0 3px #fff, 0 0 5px #fff;
        }
        .honor-bar.copper {
            background: url(/static/images/chunithm/honor_bg_copper.png) left top/257px 30px no-repeat;
            color: #000;
            text-shadow: 0 0 2px #fff;
        }
        /* Name row */
        .player-name-line {
            z-index: 10;
            position: relative;
            display: flex;
            align-items: center;
            gap: 7px;
            margin-top: -29px;
        }
        .reborn-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 32px;
            background-image: url(/api/chunithm-image/images/icon_reborn_star.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            font-size: 0.7rem;
            font-weight: bold;
            color: #000;
            padding-left: 9px; padding-top: 6px;
            position: relative;
        }
        .lv-tag {
            background: #333;
            color: #ffd700;
            font-size: 0.7rem;
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 3px;
        }
        .name-text {
            max-width: 70px;
            flex-shrink: 0;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 1px 3px rgba(0,0,0,0.8);
            white-space: nowrap;
            display: inline-flex;
            align-items: baseline;
        }
        /* Rating row */
        .player-rating-line {
            z-index: 10;
            position: relative;
            margin-top: 6px;
            display: flex;
            align-items: center;
            gap: 3px;
        }
        .rating-tag {
            background: #1565c0;
            color: #fff;
            font-size: 1.0rem;
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 3px;
        }
        .rating-num {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.3rem;
            font-weight: bold;
        }
        .rating-num.rainbow-extreme { 
            background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: rainbow-shift 4s linear infinite;
            font-weight: bold;
        }
        .rating-num.rainbow { 
            background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: bold;
        }
        .rating-num.bronze { 
            background: linear-gradient(180deg, #ffd8b0 0%, #cd7f32 40%, #6b4020 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
        }
        .rating-num.silver { 
            background: linear-gradient(180deg, #ffffff 0%, #c8c8c8 40%, #505050 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
        }
        .rating-num.gold { 
            background: linear-gradient(180deg, #fff8d0 0%, #ffd700 40%, #906000 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
        }
        .rating-num.platinum { 
            background: linear-gradient(180deg, #fffff0 0%, #e8e4c9 40%, #a09060 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
        }
        .rating-num.purple { color: #9b59b6; }
        .rating-num.red { color: #e74c3c; }
        .rating-num.orange { color: #f39c12; }
        .rating-num.green { color: #27ae60; }
        @keyframes rainbow-shift {
            0% { background-position: 0% center; }
            100% { background-position: 200% center; }
        }
        .rating-max-small {
            font-size: 0.6rem;
            color: #666;
        }
        /* OP and last play */
        .player-op-line {
            z-index: 10;
            position: relative;
            margin-top: 4px;
            font-size: 0.75rem;
            color: #4fc3f7;
        }
                .player-lastplay-line {
            z-index: 10;
            position: relative;
            margin-top: 2px;
            font-size: 0.65rem;
            color: #666;
        }
        .player-name-rating-line {
            margin-left: -10px;
            margin-top: -35px;
            z-index: 10;
            position: relative;
            display: flex;
            align-items: center;
            gap: 4px;
            flex-wrap: nowrap;
            max-width: 100%;
        }
        .player-sub-info {
            z-index: 10;
            position: relative;
            display: flex;
            gap: 12px;
            margin-top: 4px;
            font-size: 0.7rem;
        }
        .sub-info-item {
            color: #888;
        }
        .sub-info-item span {
            color: #4fc3f7;
        }
        .player-extra-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 12px;
            margin-top: 2px;
            font-size: 0.65rem;
        }
        .uncertain {
            color: #ff9800 \!important;
            font-style: italic;
        }
        .extra-stat-row {
            display: flex;
            gap: 7px;
        }
        .stat-label2 {
            color: #888;
        }
        .stat-value2 {
            color: #4fc3f7;
            font-weight: bold;
        }
        /* Stats bar */
        .player-stats-row {
            display: flex;
            background: rgba(0,0,0,0.4);
            border-top: 1px solid #3a3a5a;
        }
        .stat-box {
            flex: 1;
            text-align: center;
            padding: 8px 5px;
            border-right: 1px solid #3a3a5a;
        }
        .stat-box:last-child { border-right: none; }
        .stat-label { font-size: 0.55rem; color: #666; }
        .stat-value { font-size: 0.7rem; font-weight: bold; color: #fff; }
        .stat-value.gold { color: #ffd700; }
        /* Light mode */
        body.light-mode .chunithm-player-card { background: #080808 !important; border-color: #333 !important; }
        body.light-mode .player-profile-main {
            position: relative; background: linear-gradient(135deg, #e8e8f0 0%, #d8d8e8 100%); }
        body.light-mode .player-stats-row { background: #111 !important; }
        body.light-mode .stat-value { color: #222; }

        /* DB/コレクション系ライトモード対応 */
        body.light-mode .db-category-header { background: #e9ecef !important; color: #212529 !important; }
        body.light-mode .db-category-header span { color: #212529 !important; }
        body.light-mode .db-category-header .fa-chevron-down { color: #495057 !important; }
        body.light-mode .trophy-preview-status { color: #6c757d !important; }

        /* 汎用グレー文字のライトモード */
        body.light-mode [style*="color:#888"] { color: #6c757d !important; }
        body.light-mode [style*="color:#555"] { color: #495057 !important; }
        body.light-mode [style*="color:#8b949e"] { color: #6c757d !important; }

        /* 暗い背景のライトモード上書き */
        body.light-mode [style*="background:#1a1a2e"] { background: #f0f0f0 !important; }
        body.light-mode [style*="background:#2a2a4a"] { background: #e9ecef !important; }

        /* プレビュー系 */
        body.light-mode .trophy-preview-box { background: #ffffff !important; border-color: #dee2e6 !important; }
        body.light-mode .character-preview { background: #ffffff !important; }
        body.light-mode .nameplate-preview { background: #ffffff !important; }

        /* JS生成の追加カラー対応 */
        body.light-mode [style*="color:#88c0ff"] { color: #0d6efd !important; }
        body.light-mode [style*="color:#f0c040"] { color: #b38600 !important; }
        body.light-mode [style*="color:#22d3ee"] { color: #0891b2 !important; }
        body.light-mode [style*="color:#ccc"] { color: #6c757d !important; }
        body.light-mode [style*="color:#666"] { color: #495057 !important; }
        body.light-mode [style*="color:#ffd700"] { color: #b38600 !important; }
        body.light-mode [style*="color:#3fb950"] { color: #198754 !important; }
        body.light-mode [style*="color:#fff"] { color: #212529 !important; }

        /* MusicDB テーブルのライトモード */
        body.light-mode .clickable-filter { color: #212529 !important; }
        body.light-mode .clickable-filter:hover { background: #e9ecef !important; }

        /* プレースホルダー/ジャケット背景 */
        body.light-mode [style*="background:#333"] { background: #e9ecef !important; color: #212529 !important; }
        body.light-mode [style*="background:#0d0d1a"] { background: #f0f0f0 !important; }

        /* モーダル/プレビュー系 */
        body.light-mode .modal-body { color: #212529; }
        body.light-mode .filter-dropdown-item:hover { background: #e9ecef !important; }

        /* ===== 全ページ共通ライトモード対応 ===== */

        /* テーブルヘッダー sticky */
        body.light-mode thead[style*="background: #343a40"] { background: #e9ecef !important; }
        body.light-mode thead[style*="background:#343a40"] { background: #e9ecef !important; }
        body.light-mode [style*="background: #343a40"] { background: #e9ecef !important; }
        body.light-mode [style*="background:#343a40"] { background: #e9ecef !important; }

        /* 行脚 0%の色を濃く */
        body.light-mode .legend-color[style*="rgba(150,150,150"] { background: rgba(100,100,100,0.6) !important; }
        body.light-mode [style*="background:rgba(150,150,150"] { background: rgba(100,100,100,0.5) !important; }

        /* 管理者パネル */
        body.light-mode #admin-panel .card { background: #ffffff; }
        body.light-mode #admin-panel h4 { color: #212529; }
        body.light-mode #admin-panel small { color: #6c757d; }
        body.light-mode #admin-panel thead { background: #e9ecef !important; color: #212529; }
        body.light-mode #admin-panel tbody tr { background: #ffffff; color: #212529; }
        body.light-mode #admin-panel tbody tr:hover { background: #f8f9fa; }

        /* 全体統計 */
        body.light-mode #page-globalstats .card { background: #ffffff; }
        body.light-mode #page-globalstats thead { background: #e9ecef !important; }
        body.light-mode #page-globalstats th { color: #212529 !important; }
        body.light-mode #page-globalstats td { color: #212529 !important; }

        /* レコード */
        body.light-mode #page-records thead { background: #e9ecef !important; }
        body.light-mode #page-records th { color: #212529 !important; }
        body.light-mode .record-item { background: #ffffff !important; }
        body.light-mode .record-title { color: #212529 !important; }
        body.light-mode .record-meta { color: #6c757d !important; }

        /* プレイ履歴 */
        body.light-mode #page-history .history-item { background: #ffffff !important; color: #212529 !important; }
        body.light-mode .history-item .text-muted { color: #6c757d !important; }

        /* ホーム難易度別統計 */
        body.light-mode #page-home .stats-card { background: #ffffff !important; }
        body.light-mode #page-home thead { background: #e9ecef !important; }
        body.light-mode #page-home th, body.light-mode #page-home td { color: #212529 !important; }

        /* スコアを取り込む（コレクター画面） */
        body.light-mode .collector-container { background: #ffffff !important; }
        body.light-mode .collector-status { color: #212529 !important; }

        /* DB全体 */

        /* テーブル行のライトモード背景 */

        body.light-mode #page-records tbody tr { background: #ffffff !important; color: #212529 !important; }
        body.light-mode #page-records tbody tr:nth-child(even) { background: #f8f9fa !important; }
        body.light-mode #page-records tbody tr td { color: #212529 !important; }

        body.light-mode #page-globalstats tbody tr { background: #ffffff !important; color: #212529 !important; }
        body.light-mode #page-globalstats tbody tr:nth-child(even) { background: #f8f9fa !important; }

        body.light-mode #page-compare tbody tr { background: #ffffff !important; color: #212529 !important; }
        body.light-mode #page-compare tbody tr:nth-child(even) { background: #f8f9fa !important; }

        body.light-mode #page-history tbody tr { background: #ffffff !important; color: #212529 !important; }
        body.light-mode #page-history tbody tr:nth-child(even) { background: #f8f9fa !important; }

        /* 全テーブル共通 */
        body.light-mode table.table tbody tr { background: #ffffff; color: #212529; }
        body.light-mode table.table tbody tr:nth-child(even) { background: #f8f9fa; }
        /* table-dark ライトモード完全上書き */
        body.light-mode .table-dark {
            --bs-table-bg: #ffffff !important;
            --bs-table-color: #212529 !important;
            --bs-table-border-color: #dee2e6 !important;
            --bs-table-striped-bg: #f8f9fa !important;
            --bs-table-striped-color: #212529 !important;
            --bs-table-hover-bg: #e9ecef !important;
            --bs-table-hover-color: #212529 !important;
            background-color: #ffffff !important;
            color: #212529 !important;
        }
        body.light-mode .table-dark > :not(caption) > * > * {
            background-color: #ffffff !important;
            color: #212529 !important;
            border-color: #dee2e6 !important;
        }
        body.light-mode .table-dark tbody tr {
            background-color: #ffffff !important;
            color: #212529 !important;
        }
        body.light-mode .table-dark tbody tr:nth-child(even) {
            background-color: #f8f9fa !important;
        }
        body.light-mode .table-dark tbody tr:nth-child(even) > * {
            background-color: #f8f9fa !important;
        }
        body.light-mode .table-dark th,
        body.light-mode .table-dark td {
            background-color: inherit !important;
            color: #212529 !important;
            border-color: #dee2e6 !important;
        }
        body.light-mode .table-dark thead {
            background-color: #e9ecef !important;
        }
        body.light-mode .table-dark thead th {
            background-color: #e9ecef !important;
            color: #212529 !important;
        }

        /* DB ライトモード - 世界観維持 */

        /* DB 詳細パネル（右側） */

        /* グラデーション背景のライトモード */
        body.light-mode [style*="linear-gradient(135deg, #252540"] {
            background: linear-gradient(135deg, #e8e6f0 0%, #dde4f0 100%) !important;
        }
        body.light-mode [style*="linear-gradient(135deg, #12121f"] {
            background: linear-gradient(135deg, #e0e8f0 0%, #d5dce8 100%) !important;
        }
        body.light-mode [style*="linear-gradient(180deg, #0f0f1a"] {
            background: linear-gradient(180deg, #e8e8f0 0%, #dde4f0 100%) !important;
        }

        /* 難易度バッジ（視認性維持） */
        body.light-mode .diff-badge { color: #ffffff !important; }

        /* グラフ背景 */
        body.light-mode .chart-container { background: #ffffff !important; }

        /* 汎用 dark background overrides */
        body.light-mode [style*="background:#212529"] { background: #f8f9fa !important; }
        body.light-mode [style*="background: #212529"] { background: #f8f9fa !important; }
        body.light-mode [style*="background:#16213e"] { background: #e9ecef !important; }
        body.light-mode [style*="background: #16213e"] { background: #e9ecef !important; }

        /* 入力フォーム */
        body.light-mode .form-control::placeholder { color: #6c757d; }
        body.light-mode .input-group-text { background: #e9ecef; color: #212529; border-color: #ced4da; }

        /* JS生成要素のテーマ対応クラス */
        .db-cat-header { background: var(--bg-dark-card); color: var(--text-highlight-blue); border-radius: 4px; cursor: pointer; }
        .db-cat-header.db-cat-gold { color: var(--text-highlight-gold); }
        .db-jacket-bg { background: var(--bg-dark-item); display: flex; align-items: center; justify-content: center; }
        .uncollected-box { background: var(--bg-dark-item); border-color: #6c757d; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: #6c757d; margin: 0 auto; }
        .img-dark-bg { background: var(--bg-dark-item); }
        .ui-cat-bg { background: var(--bg-dark-card); border-radius: 6px; padding: 10px; }
        .ui-item-bg { background: var(--bg-dark-item); border-radius: 4px; display: flex; align-items: center; gap: 6px; }
        .text-count { color: var(--text-muted-gray); }

        body.light-mode .db-cat-header { background: #e9ecef; }
        body.light-mode .db-cat-header.db-cat-gold { color: #b38600; }
        body.light-mode .db-jacket-bg { background: #f0f0f0; }
        body.light-mode .uncollected-box { background: #f0f0f0; border-color: #adb5bd; color: #6c757d; }
        body.light-mode .img-dark-bg { background: #f0f0f0; }
        body.light-mode .ui-cat-bg { background: #e9ecef; }
        body.light-mode .ui-item-bg { background: #f8f9fa; }
        body.light-mode .text-count { color: #6c757d; }
        .ui-modal-bg { background: var(--bg-dark-item); }
        body.light-mode .ui-modal-bg { background: #ffffff; }

        /* sticky-header テーマ対応 */
        .sticky-header { background: #343a40; }
        body.light-mode .sticky-header { background: #e9ecef !important; color: #212529 !important; }
        body.light-mode .sticky-header th { color: #212529 !important; }

        /* ===== 視認性修正 ===== */

        /* 行脚 - 未訪問の視認性向上 */
        body.light-mode .pref-item.unvisited {
            background: rgba(100,100,100,0.15) !important;
            border: 2px dashed rgba(100,100,100,0.4) !important;
            color: #495057 !important;
            opacity: 0.8 !important;
        }
        body.light-mode .pref-item.visited { color: #212529 !important; }
        body.light-mode .region-name { color: #212529 !important; }
        body.light-mode .region-count { color: #495057 !important; }

        /* 行脚ランキング地図の0%セル */
        body.light-mode .map-cell[style*="rgba(150,150,150"] {
            background: rgba(100,100,100,0.3) !important;
            color: #495057 !important;
        }

        /* 全体統計の表 */
        body.light-mode #page-globalstats table { background: #ffffff; }
        body.light-mode #page-globalstats tr:nth-child(even) { background: #f8f9fa; }
        body.light-mode #page-globalstats .rank-col { color: #212529 !important; }

        /* ホームのスタッツカード */
        body.light-mode .stat-card { background: #ffffff !important; border-color: #dee2e6 !important; }
        body.light-mode .stat-card h5, body.light-mode .stat-card h4 { color: #212529 !important; }
        body.light-mode .stat-card small { color: #6c757d !important; }

        /* ホームの難易度別テーブル */
        body.light-mode .diff-stats-table { background: #ffffff; }
        body.light-mode .diff-stats-table th { background: #e9ecef !important; color: #212529 !important; }
        body.light-mode .diff-stats-table td { color: #212529 !important; }

        /* コレクター画面 */
        body.light-mode #collector-overlay { background: rgba(255,255,255,0.95) !important; }
        body.light-mode #collector-panel { background: #ffffff !important; color: #212529 !important; border-color: #dee2e6 !important; }
        body.light-mode #collector-panel h5 { color: #212529 !important; }
        body.light-mode .collector-log { background: #f8f9fa !important; color: #212529 !important; }

        /* スコアを取り込むセクション */
        body.light-mode #import-section + .card-body .card.bg-dark {
            background: #f8f9fa !important;
            border-color: #dee2e6 !important;
        }
        body.light-mode #import-section + .card-body .card.bg-dark .card-body {
            color: #212529 !important;
        }
        body.light-mode #import-section + .card-body .bg-dark {
            background: #f8f9fa !important;
        }
        body.light-mode #import-section + .card-body h6 {
            color: #0d6efd !important;
        }
        body.light-mode #import-section + .card-body .text-muted-custom {
            color: #6c757d !important;
        }
        body.light-mode #import-section + .card-body .small {
            color: #495057 !important;
        }
        body.light-mode #import-section + .card-body ol li {
            color: #212529 !important;
        }
        body.light-mode #import-section + .card-body p {
            color: #212529 !important;
        }
        body.light-mode .bg-secondary.bg-opacity-25 {
            background: #e9ecef !important;
        }

        /* 汎用 bg-dark オーバーライド */
        body.light-mode .card.bg-dark {
            background: #ffffff !important;
            color: #212529 !important;
        }
        body.light-mode .card.bg-dark .card-body {
            color: #212529 !important;
        }
        body.light-mode .bg-dark {
            background: #f8f9fa !important;
            color: #212529 !important;
        }

        /* スコアを取り込む - 文字色修正 */
        body.light-mode #import-section + .card-body .text-info {
            color: #0d6efd !important;
        }
        body.light-mode #import-section + .card-body .text-warning {
            color: #b38600 !important;
        }
        body.light-mode #import-section + .card-body .btn-outline-light {
            color: #212529 !important;
            border-color: #6c757d !important;
        }
        body.light-mode #import-section + .card-body .btn-outline-light:hover {
            background: #212529 !important;
            color: #ffffff !important;
        }
        body.light-mode #import-section + .card-body strong {
            color: #212529 !important;
        }
        body.light-mode #import-section + .card-body kbd {
            background: #212529 !important;
            color: #ffffff !important;
        }

        /* 汎用: bg-dark内のtext-info/warning */
        body.light-mode .card.bg-dark .text-info {
            color: #0d6efd !important;
        }
        body.light-mode .card.bg-dark .text-warning {
            color: #b38600 !important;
        }
        body.light-mode .card.bg-dark .border-info {
            border-color: #0d6efd !important;
        }
        body.light-mode .card.bg-dark .border-secondary {
            border-color: #6c757d !important;
        }

        /* 比較ページ */
        body.light-mode #page-compare table { background: #ffffff; }
        body.light-mode #page-compare th { background: #e9ecef !important; color: #212529 !important; }
        body.light-mode #page-compare td { color: #212529 !important; }

        /* 定数表 */
        body.light-mode #page-myconst .myconst-cell { background: #ffffff !important; border-color: #dee2e6 !important; }
        body.light-mode #page-myconst .myconst-const { color: #0891b2 !important; }
        body.light-mode #page-myconst .myconst-title { color: #212529 !important; }
        body.light-mode #page-myconst .myconst-score { color: #495057 !important; }

        /* ランダム選曲結果 */
        body.light-mode #random-result .card { background: #ffffff !important; }
        body.light-mode #random-result .record-title { color: #212529 !important; }
        body.light-mode #random-result .record-artist { color: #6c757d !important; }
        /* 非アクティブページは選択不可 */
        .page.d-none { user-select: none; }
        .page:not(.d-none) { user-select: auto; }
        /* DB専用レイアウト */
        .db-container {
            display: flex;
            height: calc(100vh - 120px);
            margin: -0.7rem;
            overflow: hidden;
        }
        .db-sidebar {
            width: 200px;
            background: linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 100%);
            border-right: 1px solid rgba(124, 58, 237, 0.3);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
        }
        .db-sidebar-header {
            padding: 20px 16px;
            border-bottom: 1px solid rgba(124, 58, 237, 0.2);
        }
        .db-sidebar-title {
            font-size: 0.7rem;
            font-weight: bold;
            color: #a78bfa;
            display: flex;
            align-items: center;
            gap: 3px;
        }
        .db-nav {
            flex: 1;
            padding: 12px 0;
            overflow-y: auto;
        }
        .db-nav-item {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 12px 20px;
            color: #888;
            cursor: pointer;
            transition: all 0.2s;
            border-left: 3px solid transparent;
        }
        .db-nav-item:hover {
            background: rgba(124, 58, 237, 0.1);
            color: #c4b5fd;
        }
        .db-nav-item.active {
            background: rgba(124, 58, 237, 0.2);
            color: #a78bfa;
            border-left-color: #7c3aed;
        }
        .db-nav-item i {
            width: 19px;
            text-align: center;
        }
        .db-nav-badge {
            margin-left: auto;
            background: rgba(124, 58, 237, 0.3);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.75rem;
            color: #a78bfa;
        }

        .db-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
            background: #0d0d15;
        }
        .db-content {
            height: 100%;
            
            flex: 1;
            display: flex;
            overflow: hidden;
        }
        .db-list-panel {
            width: 45%;
            height: 100%;
            
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .db-detail-panel {
            
            position: relative;
            z-index: 1;
            flex: 1;
            overflow-y: auto;
            background: linear-gradient(135deg, #12121f 0%, #1a1a2e 100%);
        }

        .db-search-bar {
            position: relative;
            z-index: 2000;
            padding: 16px;
            background: rgba(0,0,0,0.3);
            border-bottom: 1px solid rgba(124, 58, 237, 0.2);
        }
        .db-search-input {
            width: 100%;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(124, 58, 237, 0.3);
            border-radius: 8px;
            padding: 10px 14px;
            color: #fff;
            font-size: 0.7rem;
        }
        .db-search-input:focus {
            outline: none;
            border-color: #7c3aed;
            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
        }
        .db-search-input::placeholder { color: #666; }

        

        /* Notion風フィルターUI */
        .filter-bar {
            position: relative;
            z-index: 2000;
            display: flex;
            align-items: center;
            gap: 3px;
            flex-wrap: wrap;
        }
        .filter-search-wrap {
            flex: 1;
            min-width: 150px;
            position: relative;
        }
        .filter-search-wrap i {
            position: absolute;
            left: 12px;
            top: 49%;
            transform: translateY(-50%);
            color: #666;
            font-size: 14px;
        }
        .filter-search-input {
            width: 100%;
            padding: 10px 12px 10px 36px;
            background: #1a1a2e;
            border: 1px solid #333;
            border-radius: 8px;
            color: #e9ecef;
            font-size: 14px;
        }
        .filter-search-input:focus {
            outline: none;
            border-color: #7c3aed;
            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
        }
        .filter-search-input::placeholder { color: #666; }

        .filter-add-btn {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 10px 14px;
            background: transparent;
            border: 1px dashed #555;
            border-radius: 8px;
            color: #888;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .filter-add-btn:hover {
            border-color: #7c3aed;
            color: #7c3aed;
            background: rgba(124, 58, 237, 0.1);
        }

        .filter-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-top: 2px;
        }
        .filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 6px 10px;
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            border-radius: 6px;
            font-size: 12px;
            color: #fff;
            animation: chipIn 0.2s ease;
        }
        @keyframes chipIn {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }
        .filter-chip-label {
            color: rgba(255,255,255,0.7);
        }
        .filter-chip-value {
            font-weight: 600;
        }
        .filter-chip-remove {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            cursor: pointer;
            transition: background 0.2s;
        }
        .filter-chip-remove:hover {
            background: rgba(255,255,255,0.4);
        }
        .filter-chip-remove i {
            font-size: 10px;
        }

        .filter-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            min-width: 180px;
            background: #1a1a2e;
            border: 1px solid #333;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
            z-index: 2000;
            overflow: hidden;
            animation: dropIn 0.15s ease;
        }
        @keyframes dropIn {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .filter-dropdown-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            color: #e9ecef;
            font-size: 13px;
            cursor: pointer;
            transition: background 0.15s;
        }
        .filter-dropdown-item:hover {
            background: rgba(124, 58, 237, 0.2);
        }
        .filter-dropdown-item i {
            color: #666;
            font-size: 12px;
        }

        .filter-submenu {
            z-index: 2100;
            position: absolute;
            top: 0;
            right: 100%;
            margin-right: 4px;
            min-width: 200px;
            max-height: 300px;
            overflow-y: auto;
            background: #1a1a2e;
            border: 1px solid #333;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
        }
        .filter-submenu-search {
            padding: 8px;
            border-bottom: 1px solid #333;
        }
        .filter-submenu-search input {
            width: 100%;
            padding: 8px 10px;
            background: #0d0d1a;
            border: 1px solid #444;
            border-radius: 6px;
            color: #e9ecef;
            font-size: 12px;
        }
        .filter-submenu-search input:focus {
            outline: none;
            border-color: #7c3aed;
        }
        .filter-submenu-list {
            max-height: 240px;
            overflow-y: auto;
        }
        .filter-submenu-item {
            padding: 10px 16px;
            color: #e9ecef;
            font-size: 13px;
            cursor: pointer;
            transition: background 0.15s;
        }
        .filter-submenu-item:hover {
            background: rgba(124, 58, 237, 0.2);
        }

        .filter-input-popup {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            padding: 12px;
            background: #1a1a2e;
            border: 1px solid #333;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
            z-index: 2000;
            animation: dropIn 0.15s ease;
        }
        .filter-input-popup input {
            width: 150px;
            padding: 8px 10px;
            background: #0d0d1a;
            border: 1px solid #444;
            border-radius: 6px;
            color: #e9ecef;
            font-size: 13px;
        }
        .filter-input-popup input:focus {
            outline: none;
            border-color: #7c3aed;
        }
        .filter-input-popup-btns {
            display: flex;
            gap: 3px;
            margin-top: 2px;
        }
        .filter-input-popup-btns button {
            flex: 1;
            padding: 6px;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
        }
        .filter-input-popup-btns .btn-apply {
            background: #7c3aed;
            color: #fff;
        }
        .filter-input-popup-btns .btn-cancel {
            background: #333;
            color: #888;
        }

        .filter-clear-btn {
            padding: 6px 10px;
            background: transparent;
            border: none;
            color: #888;
            font-size: 12px;
            cursor: pointer;
            transition: color 0.2s;
        }
        .filter-clear-btn:hover {
            color: #ef4444;
        }

        /* DBフィルター */
        .db-filter-row {
            display: flex;
            gap: 3px;
            margin-top: 2px;
        }
        .db-filter-select {
            flex: 1;
            padding: 6px 10px;
            background: #1a1a2e;
            border: 1px solid #333;
            border-radius: 6px;
            color: #e9ecef;
            font-size: 12px;
            cursor: pointer;
        }
        .db-filter-select:focus {
            outline: none;
            border-color: #ffc107;
        }
        .db-list {
            
            flex: 1;
            overflow-y: auto;
            padding: 8px;
        }
        .db-section-header {
            font-size: 13px;
            font-weight: 600;
            color: #a78bfa;
            padding: 12px 8px 6px 8px;
            border-bottom: 1px solid rgba(124, 58, 237, 0.3);
            margin-bottom: 8px;
        }
        .db-list-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s;
            margin-bottom: 4px;
        }
        .db-list-item:hover {
            background: rgba(124, 58, 237, 0.15);
        }
        .db-list-item.selected {
            background: rgba(124, 58, 237, 0.25);
            box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.5);
        }
        .db-list-jacket {
            width: 48px;
            height: 48px;
            border-radius: 6px;
            background: #2a2a4a;
            overflow: hidden;
            flex-shrink: 0;
        }
        .db-list-jacket img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .db-list-info {
            flex: 1;
            min-width: 0;
        }
        .db-list-title {
            font-size: 0.7rem;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .db-list-artist {
            font-size: 0.75rem;
            color: #888;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .db-list-badges {
            display: flex;
            gap: 7px;
            flex-shrink: 0;
        }

        /* 詳細パネル */
        .db-detail-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #555;
            font-size: 0.7rem;
        }
        .db-detail-header {
            padding: 24px;
            background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(124, 58, 237, 0.05) 100%);
            border-bottom: 1px solid rgba(124, 58, 237, 0.2);
        }
        .db-detail-top {
            display: flex;
            gap: 20px;
        }
        .db-detail-jacket {
            width: 160px;
            height: 160px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
            flex-shrink: 0;
        }
        .db-detail-jacket img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .db-detail-jacket-placeholder {
            width: 100%;
            height: 100%;
            background: #2a2a4a;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            color: #444;
        }
        .db-detail-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .db-detail-title {
            font-size: 1.6rem;
            font-weight: bold;
            color: #fff;
            margin-bottom: 8px;
            line-height: 1.3;
        }
        .db-detail-artist {
            font-size: 0.7rem;
            color: #a78bfa;
            margin-bottom: 16px;
        }
        .db-detail-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }
        .db-detail-meta-item {
        .clickable-filter { cursor: pointer; transition: background 0.2s; }
        .clickable-filter:hover { background: rgba(124, 58, 237, 0.4); }
            background: rgba(124, 58, 237, 0.2);
        .clickable-filter { cursor: pointer; transition: background 0.2s; }
        .clickable-filter:hover { background: rgba(124, 58, 237, 0.4); }
            padding: 6px 12px;
        .clickable-filter { cursor: pointer; transition: background 0.2s; }
        .clickable-filter:hover { background: rgba(124, 58, 237, 0.4); }
            border-radius: 6px;
        .clickable-filter { cursor: pointer; transition: background 0.2s; }
        .clickable-filter:hover { background: rgba(124, 58, 237, 0.4); }
            font-size: 0.65rem;
        .clickable-filter { cursor: pointer; transition: background 0.2s; }
        .clickable-filter:hover { background: rgba(124, 58, 237, 0.4); }
            color: #c4b5fd;
        .clickable-filter { cursor: pointer; transition: background 0.2s; }
        .clickable-filter:hover { background: rgba(124, 58, 237, 0.4); }
        }
        .clickable-filter { cursor: pointer; transition: background 0.2s; }
        .clickable-filter:hover { background: rgba(124, 58, 237, 0.4); }

        .db-detail-body {
            padding: 24px;
        }
        .db-detail-section {
            margin-bottom: 24px;
        }
        .db-detail-section-title {
            font-size: 0.7rem;
            font-weight: bold;
            color: #a78bfa;
            margin-bottom: 12px;
            padding-left: 10px;
            border-left: 3px solid #7c3aed;
        }

        .db-chart-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 6px;
        }
        .db-chart-table th {
            text-align: center;
            padding: 8px;
            color: #666;
            font-weight: normal;
            font-size: 0.7rem;
        }
        .db-chart-table td {
            text-align: center;
            padding: 12px 8px;
            background: rgba(255,255,255,0.03);
        }
        .db-chart-table tr td:first-child { border-radius: 8px 0 0 8px; }
        .db-chart-table tr td:last-child { border-radius: 0 8px 8px 0; }

        .db-links {
            display: flex;
            gap: 12px;
        }
        .db-link-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 10px 18px;
            border-radius: 8px;
            text-decoration: none;
            font-size: 0.7rem;
            transition: transform 0.2s;
        }
        .db-link-btn:hover { transform: translateY(-2px); }
        .db-link-youtube { background: #ff0000; color: #fff; }
        .db-link-niconico { background: #252525; color: #fff; }

        /* レスポンシブ */
        @media (max-width: 1200px) {
            .db-list-panel {
            width: 50%; }
        }
        @media (max-width: 900px) {
            .db-container { flex-direction: column; height: auto; }
            .db-sidebar { width: 100%; flex-direction: row; overflow-x: auto; }
            .db-sidebar-header {  }
            .db-nav { display: flex; padding: 0; }
            .db-nav-item { padding: 12px 16px; border-left: none; border-bottom: 3px solid transparent; }
            .db-nav-item.active { border-bottom-color: #7c3aed; }
            .db-content { flex-direction: column; }
            .db-list-panel { width: 100%; height: 300px; border-right: none; border-bottom: 1px solid rgba(124, 58, 237, 0.2); }
        }
    
    
        /* 曲詳細ドロワー */
        .music-drawer-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.6); z-index: 1040; opacity: 0;
            visibility: hidden; transition: all 0.3s;
        }
        .music-drawer-overlay.show { opacity: 1; visibility: visible; }
        .music-drawer {
            position: fixed; top: 0; right: 0; width: 450px; max-width: 90vw;
            height: 100%; background: #1a1a2e; z-index: 1050;
            transform: translateX(100%);
            visibility: hidden;
            pointer-events: none;
            transition: transform 0.3s, visibility 0.3s;
            overflow-y: auto; box-shadow: -5px 0 20px rgba(0,0,0,0.5);
        }
        .music-drawer.show {
            transform: translateX(0);
            visibility: visible;
            pointer-events: auto;
        }
        .drawer-close {
            position: absolute; top: 10px; right: 10px; background: transparent;
            border: none; color: #888; font-size: 1.5rem; cursor: pointer;
        }
        .drawer-close:hover { color: #fff; }
        .drawer-header { padding: 20px; display: flex; gap: 7px; border-bottom: 1px solid #333; }
        .drawer-jacket { width: 100px; height: 100px; background: #333; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
        .drawer-jacket img { width: 100%; height: 100%; object-fit: cover; }
        .drawer-jacket-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #666; }
        .drawer-info { flex: 1; min-width: 0; }
        .drawer-title { margin: 0 0 5px; font-size: 0.7rem; color: #fff; word-break: break-word; }
        .drawer-artist { margin: 0 0 10px; font-size: 0.65rem; }
        .drawer-meta { display: flex; flex-wrap: wrap; gap: 3px; }
        .drawer-meta-item { background: #333; padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; color: #aaa; }
        .drawer-designers { margin-top: 2px; font-size: 0.7rem; color: #aaa; }
        .designer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
        .designer-badge { padding: 2px 6px; border-radius: 3px; font-size: 0.7rem; }
        .designer-badge.diff-bas { background: #2d5016; }
        .designer-badge.diff-adv { background: #7a4f1a; }
        .designer-badge.diff-exp { background: #8b1a1a; }
        .designer-badge.diff-mas { background: #4a1a6b; }
        .designer-badge.diff-ult { background: #1a1a1a; border: 1px solid #666; }
        .designer-badge.diff-we { background: #000; border: 1px solid #e91e63; color: #e91e63; }
        .drawer-body { padding: 20px; }
        .drawer-diff-badge { padding: 2px 8px; border-radius: 3px; font-size: 0.75rem; font-weight: bold; }
        .drawer-diff-bas { background: #4caf50; color: #fff; }
        .drawer-diff-adv { background: #ff9800; color: #fff; }
        .drawer-diff-exp { background: #f44336; color: #fff; }
        .drawer-diff-mas { background: #9c27b0; color: #fff; }
        .drawer-diff-ult { background: #212121; color: #fff; }
        .drawer-diff-we { background: #e91e63; color: #fff; }
        .drawer-const { color: #22d3ee; font-weight: bold; }
        .drawer-notes { color: #888; }
        .drawer-links { margin-top: 15px; }
    
        /* ローディングオーバーレイ */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(33, 37, 41, 0.95);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.3s;
        }
        .loading-overlay.fade-out {
            opacity: 0;
            pointer-events: none;
        }
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid #495057;
            border-top-color: #ffc107;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .loading-text {
            color: #ffc107;
            margin-top: 15px;
            font-size: 14px;
        }
        .loading-progress {
            color: #6c757d;
            font-size: 12px;
            margin-top: 5px;
        }
        /* 称号横スクロール */
        .trophy-bg-grid {
            display: flex !important;
            flex-wrap: nowrap !important;
            overflow-x: auto;
            gap: 7px;
            padding-bottom: 10px;
        }
        .trophy-bg-grid::-webkit-scrollbar {
            height: 6px;
        }
        .trophy-bg-grid::-webkit-scrollbar-track {
            background: #1a1a2e;
            border-radius: 3px;
        }
        .trophy-bg-grid::-webkit-scrollbar-thumb {
            background: #495057;
            border-radius: 3px;
        }
        /* 称号アイテム */
        .collection-item-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-shrink: 0;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .collection-item-wrap:hover {
            transform: scale(1.05);
        }
        .collection-item-wrap.selected {
            outline: 3px solid #ffc107;
            outline-offset: 2px;
            border-radius: 8px;
        }
        .collection-item-label {
            white-space: nowrap;
            font-size: 11px;
            color: #adb5bd;
            margin-bottom: 4px;
            text-transform: uppercase;
        }
        .conquest-item-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-shrink: 0;
            cursor: pointer;
        }
        .conquest-item-wrap:hover {
            transform: scale(1.05);
        }
        .conquest-item-label {
            font-size: 9px;
            color: #6c757d;
            margin-bottom: 2px;
        }
        /* 称号プレビュー */
        .trophy-preview {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .trophy-preview img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(255, 193, 7, 0.3);
        }
        .trophy-preview-name {
            margin-top: 15px;
            font-size: 18px;
            color: #ffc107;
            text-transform: uppercase;
        }
        
        /* バージョン制覇グリッド */
        .version-conquest-grid {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .version-row {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 8px;
            background: #2d3238;
            border-radius: 6px;
        }
        .version-row.version-complete { border-left: 3px solid #ffc107; }
        .version-row.version-partial { border-left: 3px solid #6c757d; }
        .version-row.version-empty { border-left: 3px solid #333; opacity: 0.6; }
        .version-name {
            width: 257px;
            max-width: 257px;
            font-weight: bold;
            font-size: 12px;
            color: #adb5bd;
        }
        .version-items {
            display: flex;
            gap: 3px;
        }
        .conquest-item {
            width: 72px;
            height: 30px;
            border-radius: 4px;
            overflow: hidden;
        }
        .conquest-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .conquest-item.collected {
            border: 1px solid #ffc107;
        }
        .conquest-item.not-collected {
            border: 1px dashed #495057;
            background: #1a1a2e;
        }
        .conquest-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #495057;
            font-size: 14px;
            font-weight: bold;
        }
        .trophy-preview-status {
            margin-top: 5px;
            font-size: 12px;
            color: #6c757d;
        }
        
        /* 詳細モーダル（狭い画面用） */
        .db-detail-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            z-index: 10000;
            overflow-y: auto;
        }
        .db-detail-modal.active {
            display: block;
        }
        .db-detail-modal-content {
            max-width: 500px;
            margin: 20px auto;
            padding: 20px;
            background: linear-gradient(135deg, #12121f 0%, #1a1a2e 100%);
            border-radius: 12px;
        }
        .db-detail-modal-close {
            position: sticky;
            top: 10px;
            float: right;
            background: #f85149;
            border: none;
            color: #fff;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 5px;
            cursor: pointer;
            z-index: 10001;
        }
        @media (min-width: 1200px) {
            .db-detail-modal { display: none !important; }
        }
        @media (max-width: 1199px) {
            .db-detail-panel { display: none !important; }
            .db-list-panel { width: 100% !important; height: auto !important; }
            .db-list { height: calc(100vh - 280px) !important; }
        }

        
        /* 都道府県グリッド */
        .pilgrimage-grid {
            width: 100%;
        }
        .region-block {
            background: rgba(255,255,255,0.03);
            border-radius: 8px;
            padding: 12px;
        }
        .region-header {
            font-size: 0.7rem;
            font-weight: 600;
        }
        .region-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
        }
        .region-name {
            color: var(--text-color);
        }
        .region-count {
            font-size: 0.7rem;
            color: var(--text-muted);
        }
        .pref-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
            gap: 7px;
        }
        .pref-item {
            border-radius: 6px;
            padding: 6px 4px;
            text-align: center;
            transition: all 0.2s ease;
            cursor: default;
            border: 2px solid transparent;
        }
        .pref-item.visited {
            color: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        .pref-item.visited:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }
        .pref-item.unvisited {
            background: rgba(128,128,128,0.2);
            border: 2px dashed rgba(128,128,128,0.3);
            color: var(--text-muted);
            opacity: 0.5;
        }
        .pref-name {
            display: block;
            font-size: 0.65rem;
            font-weight: 600;
            line-height: 1.2;
        }
        .pref-date {
            display: block;
            font-size: 0.65rem;
            opacity: 0.85;
            margin-top: 2px;
        }
        @media (max-width: 576px) {
            .pref-grid {
                grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
            }
            .pref-name {
                font-size: 0.75rem;
            }
            .pref-date {
                font-size: 0.6rem;
            }
        }

    
        /* ランキンググリッド */
        .ranking-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 3px;
        }
        .ranking-item {
            display: flex;
            align-items: center;
            padding: 8px 10px;
            border-radius: 6px;
            transition: transform 0.15s ease;
        }
        .ranking-item:hover {
            transform: translateX(7px);
        }
        .ranking-rank {
            min-width: 28px;
            text-align: center;
        }
        .rank-medal {
            font-size: 0.7rem;
        }
        .rank-num {
            font-size: 0.75rem;
            color: var(--text-muted);
            font-weight: 600;
        }
        .ranking-name {
            flex: 1;
            font-size: 0.65rem;
            font-weight: 600;
            color: var(--text-color);
        }
        .ranking-stats {
            text-align: right;
            font-size: 0.75rem;
        }
        .ranking-count {
            color: var(--text-color);
            display: block;
        }
        .ranking-pct {
            color: var(--text-muted);
            font-size: 0.7rem;
        }
        @media (max-width: 576px) {
            .ranking-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .ranking-item {
                padding: 6px 8px;
            }
            .ranking-name {
                font-size: 0.7rem;
            }
        }

    
        /* 日本地図風ランキング */
        .japan-map-ranking {
            display: grid;
            grid-template-columns: repeat(16, 40px);
            grid-template-rows: repeat(13, 36px);
            gap: 7px;
            max-width: 800px;
            margin: 0 auto;
            padding: 10px;
            background: linear-gradient(180deg, rgba(30,50,80,0.15) 0%, rgba(20,30,50,0.08) 100%);
            border-radius: 12px;
        }
        
        .btn-xs {
            padding: 0.17rem 0.4rem;
            font-size: 0.75rem;
        }
        .map-rank-pref {
            padding: 4px 2px;
            border-radius: 4px;
            text-align: center;
            color: #fff;
            font-size: 0.7rem;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            cursor: default;
            min-height: 36px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .map-rank-pref:hover {
            transform: scale(1.15);
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
            z-index: 10;
        }
        .map-rank-name {
            font-weight: 600;
            font-size: 0.65rem;
            line-height: 1.1;
        }
        .map-rank-pct {
            font-size: 0.6rem;
            opacity: 0.9;
        }
        .ranking-legend {
            font-size: 0.7rem;
        }
        .legend-item {
            margin-right: 8px;
        }
        .legend-color {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            margin-right: 2px;
            vertical-align: middle;
        }
        @media (max-width: 991px) {
            .japan-map-ranking {
                grid-template-columns: repeat(16, 30px);
                grid-template-rows: repeat(13, 28px);
                gap: 4px;
                max-width: 600px;
            }
            .map-rank-pref {
                min-height: 28px;
                padding: 2px 1px;
            }
            .map-rank-name {
                font-size: 0.55rem;
            }
            .map-rank-pct {
                font-size: 0.5rem;
            }
        }
        @media (max-width: 767px) {
            .japan-map-ranking {
                grid-template-columns: repeat(16, 24px);
                grid-template-rows: repeat(13, 24px);
                gap: 3px;
                max-width: 500px;
            }
            .map-rank-pref {
                min-height: 24px;
                overflow: hidden;
            }
            .map-rank-name {
                font-size: 0.5rem;
            }
            .map-rank-pct {
                font-size: 0.45rem;
            }
        }
        @media (max-width: 576px) {
            .japan-map-ranking {
                grid-template-columns: repeat(16, 18px);
                grid-template-rows: repeat(13, 18px);
                gap: 2px;
                max-width: 360px;
            }
            .map-rank-pref {
                padding: 1px;
                min-height: 18px;
                overflow: hidden;
            }
            .map-rank-name {
                display: none;
            }
            .map-rank-pct {
                font-size: 0.4rem;
            }
            .ranking-legend {
                display: block;
                margin-top: 4px;
                margin-left: 0 !important;
            }
        }

        @media (max-width: 576px) {
            #page-records .card {
                min-width: 0;
            }
            #page-records .card-header {
                overflow-x: hidden;
            }
            #page-records .card-header > .row {
                margin-left: 0;
                margin-right: 0;
            }
            #page-records .card-header .col-auto {
                max-width: 100%;
            }
            #page-records .table-responsive {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-x: contain;
            }
            #page-records table {
                min-width: 660px;
            }
            #page-records th,
            #page-records td {
                white-space: nowrap;
            }
            #page-records th:first-child,
            #page-records td:first-child {
                min-width: 160px;
                white-space: normal;
            }
            #filter-diff-btns {
                flex-wrap: wrap;
            }
            #filter-search,
            #records-sort {
                width: min(100%, 220px) !important;
            }
            #filter-const-min,
            #filter-const-max {
                min-width: 4.5rem;
            }
        }

        /* ===== Cinematic CSS v1 — 純CSS、JS変更なし ===== */

        /* --- 背景 --- */
        body { background:#030303!important;color:#d0d0d0!important }
        body::after { content:'';position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;
            background:radial-gradient(ellipse 50% 50% at 15% 25%,rgba(232,160,32,.035) 0%,transparent 70%),
                        radial-gradient(ellipse 50% 50% at 85% 75%,rgba(120,80,200,.04) 0%,transparent 70%),
                        radial-gradient(ellipse 40% 40% at 50% 50%,rgba(64,128,216,.02) 0%,transparent 70%);
        }

        /* --- Navbar --- */
        .navbar { background:rgba(3,3,3,.85)!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;border-bottom:1px solid rgba(255,255,255,.03)!important;box-shadow:0 1px 40px rgba(0,0,0,.5)!important }
        .navbar-brand { font-family:'Orbitron',sans-serif!important;font-size:1rem!important;letter-spacing:6px!important;text-transform:uppercase!important;background:linear-gradient(90deg,#e8a020,#c088ff,#88c0ff)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important }
        .navbar-dark .navbar-nav .nav-link { color:rgba(255,255,255,.3)!important;font-size:.76rem!important;letter-spacing:1.5px!important;text-transform:uppercase!important;transition:color .3s!important }
        .navbar-dark .navbar-nav .nav-link:hover { color:rgba(255,255,255,.8)!important }
        .navbar-dark .navbar-nav .nav-link.active { color:#fff!important }

        /* --- カード --- */
        .card { background:rgba(255,255,255,.008)!important;border:1px solid rgba(255,255,255,.04)!important;border-radius:10px!important;box-shadow:none!important;transition:border-color .3s!important }
        .card:hover { border-color:rgba(232,160,32,.08)!important }
        .card-header { background:transparent!important;border-bottom:1px solid rgba(255,255,255,.03)!important;color:rgba(255,255,255,.85)!important;font-weight:600!important;font-size:.84rem!important;letter-spacing:.5px!important }
        .card-body { color:#999!important }

        /* --- テーブル --- */
        .table { --bs-table-bg:transparent!important;color:#999!important }
        .table thead th { background:transparent!important;border-bottom:1px solid rgba(255,255,255,.05)!important;color:rgba(255,255,255,.2)!important;font-size:.65rem!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:2px!important }
        .table tbody td { border-bottom:1px solid rgba(255,255,255,.02)!important }
        .table tbody tr:hover { background:rgba(232,160,32,.02)!important }

        /* --- モーダル --- */
        .modal-content { background:#080808!important;border:1px solid rgba(255,255,255,.04)!important;border-radius:14px!important;box-shadow:0 40px 120px rgba(0,0,0,.8)!important }
        .modal-header { border-bottom-color:rgba(255,255,255,.03)!important }
        .modal-footer { border-top-color:rgba(255,255,255,.03)!important }

        /* --- フォーム --- */
        .form-control,.form-select { background:rgba(255,255,255,.02)!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:8px!important;color:#d0d0d0!important;transition:border-color .3s,box-shadow .3s!important }
        .form-control:focus,.form-select:focus { background:rgba(255,255,255,.035)!important;border-color:rgba(232,160,32,.25)!important;box-shadow:0 0 0 3px rgba(232,160,32,.06)!important;color:#fff!important }
        .form-control::placeholder { color:rgba(255,255,255,.18)!important }
        .form-select option { color:#d0d0d0;background:#111 }

        /* --- ボタン: 全種類暗背景対応 --- */
        .btn-warning { background:#e8a020!important;border:none!important;color:#030303!important;font-weight:700!important;border-radius:8px!important }
        .btn-warning:hover { box-shadow:0 0 30px rgba(232,160,32,.15)!important }
        .btn-primary { background:transparent!important;border:1px solid rgba(255,255,255,.1)!important;color:rgba(255,255,255,.65)!important;border-radius:8px!important }
        .btn-primary:hover { border-color:rgba(255,255,255,.2)!important;background:rgba(255,255,255,.03)!important }
        .btn-outline-light { background:transparent!important;border:1px solid rgba(255,255,255,.15)!important;color:rgba(255,255,255,.7)!important }
        .btn-outline-light:hover { background:rgba(255,255,255,.06)!important;color:#fff!important }
        .btn-outline-secondary { background:transparent!important;border:1px solid rgba(255,255,255,.12)!important;color:rgba(255,255,255,.55)!important }
        .btn-outline-secondary:hover { background:rgba(255,255,255,.04)!important;color:rgba(255,255,255,.8)!important }
        .btn-outline-info { background:transparent!important;border:1px solid rgba(136,192,255,.2)!important;color:#88c0ff!important }
        .btn-outline-info:hover { background:rgba(136,192,255,.06)!important }
        .btn-outline-warning { background:transparent!important;border:1px solid rgba(232,160,32,.25)!important;color:#e8a020!important }
        .btn-outline-warning:hover { background:rgba(232,160,32,.06)!important }
        .btn-outline-danger { background:transparent!important;border:1px solid rgba(255,107,107,.2)!important;color:#ff6b6b!important }
        .btn-outline-danger:hover { background:rgba(255,107,107,.06)!important }
        .btn-outline-success { background:transparent!important;border:1px solid rgba(93,217,168,.2)!important;color:#5dd9a8!important }
        .btn-outline-success:hover { background:rgba(93,217,168,.06)!important }
        .btn-success { background:rgba(93,217,168,.15)!important;border:1px solid rgba(93,217,168,.25)!important;color:#5dd9a8!important }
        .btn-danger { background:rgba(255,107,107,.12)!important;border:1px solid rgba(255,107,107,.2)!important;color:#ff6b6b!important }
        .btn-info { background:rgba(136,192,255,.1)!important;border:1px solid rgba(136,192,255,.18)!important;color:#88c0ff!important }
        .btn-secondary { background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.1)!important;color:rgba(255,255,255,.6)!important }
        .btn-dark { background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.1)!important;color:rgba(255,255,255,.6)!important }
        .btn-light { background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.12)!important;color:rgba(255,255,255,.7)!important }
        .btn-close { filter:invert(1) grayscale(100%) brightness(200%)!important;opacity:.4!important }
        .btn-close:hover { opacity:.8!important }

        /* --- テキスト色 --- */
        .text-warning { color:#e8a020!important }
        .text-info { color:#88c0ff!important }
        .text-success { color:#5dd9a8!important }
        .text-danger { color:#ff6b6b!important }
        .text-primary { color:#88c0ff!important }
        .text-muted { color:rgba(255,255,255,.25)!important }
        .text-muted-custom { color:rgba(255,255,255,.25)!important }
        h1,h2,h3,h4,h5,h6 { color:rgba(255,255,255,.85)!important }
        small,.small { color:rgba(255,255,255,.3)!important }
        .fw-bold,strong,b { color:rgba(255,255,255,.85) }
        .lead { color:rgba(255,255,255,.45)!important }

        /* --- 背景色 --- */
        .bg-dark { background:rgba(255,255,255,.015)!important }
        .bg-secondary { background:rgba(255,255,255,.04)!important }
        .border-warning { border-color:rgba(232,160,32,.2)!important }

        /* --- リストグループ --- */
        .list-group-item { background:transparent!important;border-color:rgba(255,255,255,.03)!important;color:#999!important }
        .list-group-item:hover { background:rgba(232,160,32,.015)!important }

        /* --- タブ --- */
        .nav-tabs { border-bottom:1px solid rgba(255,255,255,.04)!important }
        .nav-tabs .nav-link { color:rgba(255,255,255,.25)!important;border:none!important;border-bottom:2px solid transparent!important;border-radius:0!important;transition:color .3s!important }
        .nav-tabs .nav-link:hover { color:rgba(255,255,255,.5)!important;background:transparent!important }
        .nav-tabs .nav-link.active { color:#fff!important;background:transparent!important;border-color:transparent transparent #e8a020!important }

        /* --- バッジ --- */
        .badge.bg-warning { background:#e8a020!important;color:#030303!important }
        .badge.bg-info { background:rgba(136,192,255,.15)!important;color:#88c0ff!important }
        .badge.bg-success { background:rgba(93,217,168,.15)!important;color:#5dd9a8!important }
        .badge.bg-danger { background:rgba(255,107,107,.15)!important;color:#ff6b6b!important }
        .badge.bg-secondary { background:rgba(255,255,255,.08)!important;color:rgba(255,255,255,.55)!important }
        .badge.bg-dark { background:rgba(255,255,255,.06)!important;color:rgba(255,255,255,.6)!important }
        .badge.bg-primary { background:rgba(136,192,255,.12)!important;color:#88c0ff!important }
        .diff-bas { background:#2e7d32!important }
        .diff-adv { background:#e65100!important }
        .diff-exp { background:#c62828!important }
        .diff-mas { background:#6a1b9a!important }
        .diff-ult { background:#000!important;border:1px solid rgba(255,255,255,.1)!important }

        /* --- アラート --- */
        .alert { background:rgba(255,255,255,.015)!important;border:1px solid rgba(255,255,255,.06)!important;color:rgba(255,255,255,.7)!important;border-left:3px solid!important }
        .alert-warning { border-left-color:#e8a020!important }
        .alert-info { border-left-color:#88c0ff!important }
        .alert-success { border-left-color:#5dd9a8!important }
        .alert-danger { border-left-color:#ff6b6b!important }

        /* --- ドロップダウン --- */
        .dropdown-menu { background:#0e0e0e!important;border:1px solid rgba(255,255,255,.06)!important;box-shadow:0 20px 60px rgba(0,0,0,.8)!important }
        .dropdown-item { color:rgba(255,255,255,.6)!important }
        .dropdown-item:hover { background:rgba(232,160,32,.06)!important;color:rgba(255,255,255,.9)!important }

        /* --- Input group --- */
        .input-group-text { background:rgba(255,255,255,.03)!important;border-color:rgba(255,255,255,.06)!important;color:rgba(255,255,255,.35)!important }

        /* --- チェックボックス/スイッチ --- */
        .form-check-input { background-color:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.12)!important }
        .form-check-input:checked { background-color:#e8a020!important;border-color:#e8a020!important }
        .form-check-label { color:rgba(255,255,255,.6)!important }

        /* --- アコーディオン --- */
        .accordion-item { background:rgba(255,255,255,.01)!important;border-color:rgba(255,255,255,.04)!important }
        .accordion-button { background:transparent!important;color:rgba(255,255,255,.7)!important;box-shadow:none!important }
        .accordion-button:not(.collapsed) { color:#e8a020!important;background:rgba(232,160,32,.03)!important }
        .accordion-button::after { filter:invert(1) brightness(.5)!important }

        /* --- ナビバートグラー --- */
        .navbar-toggler { border-color:rgba(255,255,255,.1)!important }
        .navbar-toggler-icon { filter:invert(1) brightness(.7)!important }

        /* --- ページネーション --- */
        .page-link { background:transparent!important;border-color:rgba(255,255,255,.06)!important;color:rgba(255,255,255,.4)!important }
        .page-item.active .page-link { background:rgba(232,160,32,.12)!important;border-color:rgba(232,160,32,.2)!important;color:#e8a020!important }

        /* --- スクロールバー --- */
        ::-webkit-scrollbar { width:4px;height:4px }
        ::-webkit-scrollbar-track { background:transparent }
        ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.04);border-radius:2px }
        ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.08) }
        ::selection { background:rgba(232,160,32,.15);color:#fff }

        /* --- プレイヤーカード conic glow --- */
        .chunithm-player-card { position:relative!important;background:#040404!important;border:none!important;border-radius:12px!important;overflow:visible!important;box-shadow:0 20px 60px rgba(0,0,0,.5)!important }
        .chunithm-player-card::before { content:'';position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;background:conic-gradient(from 0deg,#e8a020,#d44040 15%,#c83898 30%,#7850c8 50%,#4080d8 70%,#e8a020);border-radius:16px;z-index:-1;filter:blur(12px);opacity:.2;animation:glowSpin 3s linear infinite }
        @property --glow-angle { syntax:'<angle>';initial-value:0deg;inherits:false }
        @keyframes glowSpin { from{rotate:0deg}to{rotate:360deg} }
        .chunithm-player-card:hover::before { opacity:.4 }
        .chunithm-player-card .player-profile-main { background:#040404!important;border-radius:11px 11px 0 0!important }

        /* --- レーティング表示 --- */
        .rating-display { color:#e8a020!important;text-shadow:0 0 6px rgba(232,160,32,.1)!important;font-family:'Orbitron',monospace!important }
        .player-rating-value { font-family:'Orbitron',monospace!important }

        /* --- ローディング --- */
        .loading-overlay { background:#030303!important }
        .loading-text { font-family:'Orbitron',sans-serif!important;color:rgba(255,255,255,.8)!important }

        /* --- その他 --- */
        hr { border-color:rgba(255,255,255,.04)!important;opacity:1!important }
        code { background:rgba(255,255,255,.04)!important;color:#e8a020!important }
        .toast { background:#0e0e0e!important;border-color:rgba(255,255,255,.04)!important }
        .offcanvas { background:#0a0a0a!important }
        .record-item { border-bottom-color:rgba(255,255,255,.03)!important }
        .record-rank { color:#e8a020!important }
        .history-item { background:rgba(255,255,255,.008)!important;border-color:rgba(255,255,255,.04)!important }
        .bookmarklet-box { background:rgba(255,255,255,.02)!important;color:rgba(255,255,255,.4)!important }
        .user-badge { background:rgba(255,255,255,.05)!important;color:rgba(255,255,255,.5)!important }
        .myconst-group-header { background:rgba(232,160,32,.05)!important;border-left-color:#e8a020!important;color:#e8a020!important }
        .login-prompt h2 { color:#e8a020!important }

        /* --- ライトモード: 全v1をリセット --- */
        body.light-mode { background:#eae8e2!important;color:#1a1a1a!important }
        body.light-mode::after { opacity:.3 }
        body.light-mode .navbar { background:rgba(245,244,240,.92)!important;border-bottom-color:rgba(0,0,0,.06)!important;box-shadow:0 1px 20px rgba(0,0,0,.04)!important }
        body.light-mode .navbar-brand { background:linear-gradient(90deg,#c08020,#7b1fa2,#3949ab)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important }
        body.light-mode .navbar-dark .navbar-nav .nav-link { color:rgba(0,0,0,.65)!important }
        body.light-mode .navbar-dark .navbar-nav .nav-link:hover { color:rgba(0,0,0,.8)!important }
        body.light-mode .navbar-dark .navbar-nav .nav-link.active { color:#1a1a1a!important }
        body.light-mode .card { background:#ffffff!important;border-color:rgba(0,0,0,.13)!important;box-shadow:0 1px 4px rgba(0,0,0,.06)!important }
        body.light-mode .card-header { border-bottom-color:rgba(0,0,0,.1)!important;color:#1a1a1a!important;background:rgba(0,0,0,.02)!important }
        body.light-mode .card-body { color:#333!important }
        body.light-mode .table { color:#333!important }
        body.light-mode .table thead th { color:rgba(0,0,0,.6)!important;border-bottom-color:rgba(0,0,0,.12)!important }
        body.light-mode .table tbody td { color:#333!important;border-bottom-color:rgba(0,0,0,.1)!important }
        body.light-mode .modal-content { background:#f5f4f0!important;border-color:rgba(0,0,0,.12)!important }
        body.light-mode .form-control,body.light-mode .form-select { background:#ffffff!important;border-color:rgba(0,0,0,.15)!important;color:#1a1a1a!important }
        body.light-mode .form-control::placeholder { color:rgba(0,0,0,.3)!important }
        body.light-mode .list-group-item { border-color:rgba(0,0,0,.1)!important;color:#333!important }
        body.light-mode .nav-tabs { border-bottom-color:rgba(0,0,0,.12)!important }
        body.light-mode .nav-tabs .nav-link { color:rgba(0,0,0,.6)!important }
        body.light-mode .nav-tabs .nav-link.active { color:#1a1a1a!important;border-color:transparent transparent #c08020!important }
        body.light-mode .text-warning { color:#c08020!important }
        body.light-mode .text-info { color:#0d6efd!important }
        body.light-mode .text-success { color:#198754!important }
        body.light-mode .text-danger { color:#dc3545!important }
        body.light-mode h1,body.light-mode h2,body.light-mode h3,body.light-mode h4,body.light-mode h5,body.light-mode h6 { color:#1a1a1a!important }
        body.light-mode small { color:rgba(0,0,0,.55)!important }
        body.light-mode .fw-bold,body.light-mode strong { color:#1a1a1a }
        body.light-mode .btn-outline-light { border-color:rgba(0,0,0,.2)!important;color:rgba(0,0,0,.7)!important }
        body.light-mode .btn-outline-secondary { border-color:rgba(0,0,0,.2)!important;color:rgba(0,0,0,.65)!important }
        body.light-mode .btn-success { background:#198754!important;border-color:#198754!important;color:#fff!important }
        body.light-mode .btn-danger { background:#dc3545!important;border-color:#dc3545!important;color:#fff!important }
        body.light-mode .btn-close { filter:none!important }
        body.light-mode .dropdown-menu { background:#fff!important;border-color:rgba(0,0,0,.1)!important;box-shadow:0 10px 30px rgba(0,0,0,.1)!important }
        body.light-mode .dropdown-item { color:rgba(0,0,0,.7)!important }
        body.light-mode .form-check-input { background-color:rgba(0,0,0,.08)!important;border-color:rgba(0,0,0,.25)!important }
        body.light-mode .form-check-label { color:rgba(0,0,0,.8)!important }
        body.light-mode .navbar-toggler { border-color:rgba(0,0,0,.3)!important }
        body.light-mode .navbar-toggler-icon { filter:none!important }
        body.light-mode .alert { background:rgba(255,255,255,.7)!important;color:rgba(0,0,0,.7)!important }
        body.light-mode .loading-overlay { background:#eae8e2!important }
        body.light-mode .loading-text { color:#1a1a1a!important }
        body.light-mode .chunithm-player-card { background:#080808!important }
        body.light-mode .chunithm-player-card::before { opacity:0;display:none }
        body.light-mode .chunithm-player-card .player-profile-main { background:#080808!important }
        /* MusicDB stays dark in light mode */
        body.light-mode #page-musicdb,body.light-mode #page-musicdetail { color:#dee2e6!important }
        body.light-mode #page-musicdb .card,body.light-mode #page-musicdetail .card { background:#2d3238!important;border-color:#495057!important;color:#dee2e6!important }
        body.light-mode #page-musicdb .card-header,body.light-mode #page-musicdetail .card-header { background:#343a40!important;color:#dee2e6!important }
        body.light-mode #page-musicdb .text-warning,body.light-mode #page-musicdetail .text-warning { color:#e8a020!important }

        /* ===== Cinematic CSS v1 拡張 — 前衛的エフェクト ===== */

        /* --- Film Grain Overlay --- */
        body::before { content:'';position:fixed;top:-50%;left:-50%;width:200%;height:200%;pointer-events:none;z-index:9998;opacity:.45;mix-blend-mode:overlay;
            background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
            animation:grain .12s steps(1) infinite }
        @keyframes grain { 0%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(1px,-2px)}75%{transform:translate(-1px,-1px)} }

        /* --- Animated Aurora Background --- */
        body::after { animation:auroraShift 20s ease-in-out infinite alternate!important }
        @keyframes auroraShift {
            0% { background:radial-gradient(ellipse 50% 50% at 15% 25%,rgba(232,160,32,.04) 0%,transparent 70%),radial-gradient(ellipse 50% 50% at 85% 75%,rgba(120,80,200,.05) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 50% 50%,rgba(64,128,216,.025) 0%,transparent 70%) }
            50% { background:radial-gradient(ellipse 50% 50% at 75% 60%,rgba(232,160,32,.05) 0%,transparent 70%),radial-gradient(ellipse 50% 50% at 20% 30%,rgba(120,80,200,.04) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 60% 20%,rgba(64,128,216,.03) 0%,transparent 70%) }
            100% { background:radial-gradient(ellipse 50% 50% at 40% 80%,rgba(232,160,32,.035) 0%,transparent 70%),radial-gradient(ellipse 50% 50% at 60% 15%,rgba(200,56,152,.04) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 30% 50%,rgba(64,128,216,.03) 0%,transparent 70%) }
        }

        /* --- Glassmorphism Cards --- */
        .card { backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important }
        .card:hover { transform:translateY(-2px)!important;box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 40px rgba(232,160,32,.03)!important;transition:transform .4s cubic-bezier(.23,1,.32,1),box-shadow .4s!important }

        /* --- Brand Shimmer Animation --- */
        .navbar-brand { position:relative!important;overflow:hidden!important }
        .navbar-brand::after { content:'';position:absolute;top:0;left:-150%;width:80%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:brandShimmer 4s ease-in-out infinite }
        @keyframes brandShimmer { 0%,100%{left:-150%}50%{left:250%} }

        /* --- Scroll Progress Bar (top of page) --- */
        @supports (animation-timeline:scroll()) {
            body>.navbar::before { content:'';position:fixed;top:0;left:0;height:2px;width:100%;z-index:9999;pointer-events:none;
                background:linear-gradient(90deg,#e8a020,#7850c8,#4080d8);
                transform-origin:left;scale:0 1;
                animation:scrollProg linear;animation-timeline:scroll() }
            @keyframes scrollProg { to{scale:1 1} }
        }

        /* --- Heading Glow --- */
        h4 .fas,h4 .far,h4 i.fa-solid,h5 .fas { filter:drop-shadow(0 0 6px rgba(232,160,32,.2)) }
        .card-header { text-shadow:none }

        /* --- Stat Values — Orbitron + Glow --- */
        .stat-value,.player-rating-value,.rating-display,h3.text-warning,h3.text-info,h3.text-success,h3.text-danger {
            font-family:'Orbitron',monospace!important;text-shadow:0 0 4px currentColor;filter:none }

        /* --- Card Hover Spotlight (CSS only, follows center) --- */
        .card::after { content:'';position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;z-index:0;border-radius:inherit;
            background:radial-gradient(300px circle at 50% 50%,rgba(232,160,32,.03),transparent 70%);transition:opacity .5s }
        .card:hover::after { opacity:1 }
        .card>* { position:relative;z-index:1 }

        /* --- Animated Conic Glow on Player Card --- */
        .chunithm-player-card::before { animation:glowSpin 3s linear infinite!important }
        @keyframes glowSpin { from{rotate:0deg}to{rotate:360deg} }

        /* --- Button Hover Glow --- */
        .btn-warning:hover { text-shadow:0 0 4px rgba(232,160,32,.15)!important }
        .btn:active { transform:scale(.96)!important;transition:transform .1s!important }

        /* --- Record Item Hover Slide --- */
        .record-item { transition:padding-left .3s cubic-bezier(.23,1,.32,1),background .3s!important }
        .record-item:hover { padding-left:20px!important;background:rgba(232,160,32,.015)!important }
        .record-rank { font-family:'Orbitron',monospace!important;text-shadow:0 0 3px rgba(232,160,32,.08) }

        /* --- Table Row Hover Glow --- */
        .table tbody tr { transition:background .3s,box-shadow .3s!important }
        .table tbody tr:hover { box-shadow:inset 3px 0 0 #e8a020!important }

        /* --- Floating Subtle Lines (pure CSS decorative) --- */
        .page { position:relative }
        .page::before { content:'';position:absolute;top:0;left:50%;width:1px;height:60px;background:linear-gradient(to bottom,transparent,rgba(232,160,32,.08),transparent);pointer-events:none;z-index:0 }

        /* --- Custom Scrollbar Glow --- */
        ::-webkit-scrollbar-thumb { background:rgba(232,160,32,.08)!important }
        ::-webkit-scrollbar-thumb:hover { background:rgba(232,160,32,.15)!important;box-shadow:0 0 8px rgba(232,160,32,.1) }

        /* --- Modal Entrance Enhancement --- */
        .modal.show .modal-dialog { animation:modalSlideIn .5s cubic-bezier(.16,1,.3,1) }
        @keyframes modalSlideIn { from{opacity:0;transform:scale(.92) translateY(30px);filter:blur(8px)}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)} }

        /* --- Loading Screen Enhancement --- */
        .loading-text { font-size:1.5rem!important;letter-spacing:12px!important;text-shadow:0 0 8px rgba(232,160,32,.08) }

        /* --- Difficulty Badge Glow --- */
        .diff-bas { box-shadow:0 0 12px rgba(46,125,50,.15)!important }
        .diff-adv { box-shadow:0 0 12px rgba(230,81,0,.15)!important }
        .diff-exp { box-shadow:0 0 12px rgba(198,40,40,.15)!important }
        .diff-mas { box-shadow:0 0 12px rgba(106,27,154,.15)!important }
        .diff-ult { box-shadow:0 0 12px rgba(255,255,255,.05)!important }

        /* --- ライトモード追加 --- */
        body.light-mode::before { opacity:.08 }
        body.light-mode .card:hover { transform:translateY(-2px)!important;box-shadow:0 20px 60px rgba(0,0,0,.06)!important }
        body.light-mode .card::after { background:radial-gradient(300px circle at 50% 50%,rgba(180,130,35,.02),transparent 70%) }
        body.light-mode .navbar-brand::after { background:linear-gradient(90deg,transparent,rgba(0,0,0,.06),transparent) }
        body.light-mode ::-webkit-scrollbar-thumb { background:rgba(0,0,0,.04)!important }
        body.light-mode .stat-value,body.light-mode .rating-display { text-shadow:none;filter:none }
        body.light-mode .record-rank { text-shadow:none }
        body.light-mode .page::before { background:linear-gradient(to bottom,transparent,rgba(180,130,35,.06),transparent) }

        /* ===== END Cinematic CSS v1 拡張 ===== */
        /* ===== END Cinematic CSS v1 ===== */


/* ===== Landing Page CSS ===== */
.lp-hero { padding: 80px 20px 60px; }
.lp-hero-inner { max-width: 700px; margin: 0 auto; }
.lp-title { font-family: "Orbitron", sans-serif; font-size: 3.5rem; font-weight: 700; color: #f0c040; margin-bottom: 12px; letter-spacing: 2px; }
.lp-icon { display: inline-block; margin-right: 8px; font-size: 2.8rem; vertical-align: middle; }
.lp-subtitle { font-size: 1.4rem; color: #dee2e6; margin-bottom: 16px; font-weight: 700; }
.lp-desc { color: #adb5bd; font-size: 1rem; line-height: 1.8; margin-bottom: 32px; }
.lp-cta-btn { font-size: 1.15rem; padding: 12px 40px; border-radius: 8px; font-weight: 700; box-shadow: 0 4px 24px rgba(240,192,64,0.25); transition: transform 0.2s, box-shadow 0.2s; }
.lp-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(240,192,64,0.4); }
.lp-note { color: #6c757d; font-size: 0.85rem; margin-top: 12px; }
.lp-features { padding: 60px 20px; max-width: 1000px; margin: 0 auto; }
.lp-section-title { text-align: center; font-size: 1.8rem; font-weight: 700; color: #f0c040; margin-bottom: 40px; letter-spacing: 1px; }
.lp-feature-card { background: rgba(45,50,56,0.7); border: 1px solid #495057; border-radius: 10px; padding: 32px 24px; text-align: center; height: 100%; transition: transform 0.2s, border-color 0.3s; }
.lp-feature-card:hover { transform: translateY(-4px); border-color: rgba(240,192,64,0.4); }
.lp-feature-icon { font-size: 2.2rem; color: #f0c040; margin-bottom: 16px; }
.lp-feature-card h3 { font-size: 1.15rem; font-weight: 700; color: #dee2e6; margin-bottom: 10px; }
.lp-feature-card p { color: #adb5bd; font-size: 0.9rem; line-height: 1.6; margin: 0; }
.lp-howto { padding: 60px 20px; max-width: 700px; margin: 0 auto; }
.lp-steps { display: flex; flex-direction: column; gap: 24px; }
.lp-step { display: flex; align-items: flex-start; gap: 20px; background: rgba(45,50,56,0.5); border: 1px solid #495057; border-radius: 10px; padding: 24px; }
.lp-step-num { flex-shrink: 0; width: 44px; height: 44px; background: #f0c040; color: #212529; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; }
.lp-step-body h4 { font-size: 1.05rem; font-weight: 700; color: #dee2e6; margin-bottom: 4px; }
.lp-step-body p { color: #adb5bd; font-size: 0.9rem; margin: 0; }
.lp-cta { padding: 60px 20px 80px; }
.lp-cta h2 { font-size: 1.5rem; color: #dee2e6; margin-bottom: 24px; font-weight: 700; }
.lp-footer { border-top: 1px solid #495057; padding: 32px 20px; text-align: center; }
.lp-footer-inner { max-width: 700px; margin: 0 auto; }
.lp-footer-links a { color: #adb5bd; text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
.lp-footer-links a:hover { color: #f0c040; }
.lp-footer-sep { color: #495057; margin: 0 10px; font-size: 0.85rem; }
.lp-footer-copy { color: #6c757d; font-size: 0.8rem; margin: 0; }

/* LP Light mode */
body.light-mode .lp-title { color: #b38600 !important; }
body.light-mode .lp-subtitle { color: #212529; }
body.light-mode .lp-desc { color: #495057; }
body.light-mode .lp-section-title { color: #b38600 !important; }
body.light-mode .lp-feature-card { background: rgba(255,255,255,0.8); border-color: #dee2e6; }
body.light-mode .lp-feature-card h3 { color: #212529; }
body.light-mode .lp-feature-card p { color: #495057; }
body.light-mode .lp-feature-icon { color: #b38600; }
body.light-mode .lp-step { background: rgba(255,255,255,0.7); border-color: #dee2e6; }
body.light-mode .lp-step-num { background: #b38600; color: #fff; }
body.light-mode .lp-step-body h4 { color: #212529; }
body.light-mode .lp-step-body p { color: #495057; }
body.light-mode .lp-cta h2 { color: #212529; }
body.light-mode .lp-footer { border-top-color: #dee2e6; }
body.light-mode .lp-footer-links a { color: #495057; }
body.light-mode .lp-footer-links a:hover { color: #b38600; }
body.light-mode .lp-footer-sep { color: #dee2e6; }

/* LP Responsive */
@media (max-width: 768px) { .lp-title { font-size: 2.2rem; } .lp-icon { font-size: 1.8rem; } .lp-subtitle { font-size: 1.1rem; } .lp-hero { padding: 50px 16px 40px; } .lp-features, .lp-howto { padding: 40px 16px; } .lp-cta { padding: 40px 16px 60px; } }
@media (max-width: 480px) { .lp-title { font-size: 1.7rem; letter-spacing: 1px; } .lp-icon { font-size: 1.4rem; } }

/* ===== ライトモード追加修正 (コントラスト3:1未満の要素) ===== */

/* .small クラス（Bootstrapの小文字クラス） */
body.light-mode .small { color: #495057 !important; }

/* badge.bg-secondary */
body.light-mode .badge.bg-secondary { background: #6c757d !important; color: #fff !important; }

/* badge.bg-info */
body.light-mode .badge.bg-info { background: #0d6efd !important; color: #fff !important; }

/* text-warning の見やすさ改善 */
body.light-mode .text-warning { color: #956d00 !important; }
body.light-mode h5.text-warning { color: #956d00 !important; }

/* stat-label2 / stat-value2 (プロフカード内) */
body.light-mode .chunithm-player-card .stat-label2 { color: #adb5bd !important; }
body.light-mode .chunithm-player-card .stat-value2 { color: #e0e0e0 !important; }
body.light-mode .chunithm-player-card .stat-value { color: #fff !important; }
body.light-mode .chunithm-player-card .stat-label { color: #ccc !important; }
body.light-mode .chunithm-player-card .name-text { color: #fff !important; }
body.light-mode .chunithm-player-card .rating-tag { color: #fff !important; }

/* フレンドコード非表示テキスト */
body.light-mode .chunithm-player-card .stat-value.small { color: #ccc !important; }

/* プロフカードのグロー完全消去 */
body.light-mode .chunithm-player-card::before { opacity: 0 !important; display: none !important; }

/* DiffSummary内のテキスト */
body.light-mode #difficulty-summary .small { color: #333 !important; }
body.light-mode #difficulty-summary .small span { color: #333 !important; }

/* All Record Statistics内のテキスト */
body.light-mode .text-muted-custom.small { color: #495057 !important; }

/* ===== 全ページライトモード: コントラスト3:1未満の修正 ===== */

/* text-muted-custom: 全ページ共通 (rgba(255,255,255,0.25)→#666) */
body.light-mode .text-muted-custom { color: #666 !important; }

/* btn-outline-info (明るい水色→濃い青) */
body.light-mode .btn-outline-info { color: #0d6efd !important; border-color: #0d6efd !important; }
body.light-mode .btn-outline-info:hover { background: #0d6efd !important; color: #fff !important; }

/* btn-outline-warning (アンバー→濃いアンバー) */
body.light-mode .btn-outline-warning { color: #8a6800 !important; border-color: #8a6800 !important; }
body.light-mode .btn-outline-warning:hover { background: #8a6800 !important; color: #fff !important; }

/* input-group-text */
body.light-mode .input-group-text { color: #495057 !important; background: #e9ecef !important; border-color: rgba(0,0,0,.15) !important; }

/* text-light → ライトモードではダーク色に */
body.light-mode .text-light { color: #333 !important; }

/* BEST枠グリッド値 */
body.light-mode .grid-const-val { color: #0d6efd !important; }
body.light-mode .grid-rate-val { color: #8a6800 !important; }
body.light-mode .grid-mark.mark-fc { color: #8a6800 !important; }
body.light-mode .grid-mark.mark-aj { color: #d63384 !important; }

/* レコードページ ランプ/バッジ */
body.light-mode .lamp-fc { color: #8a6800 !important; }
body.light-mode .lamp-aj { color: #d63384 !important; }
body.light-mode .badge.bg-success { background: #198754 !important; color: #fff !important; }
body.light-mode .badge.bg-primary { background: #0d6efd !important; color: #fff !important; }
body.light-mode .badge.diff-we { color: #333 !important; }

/* form-label.text-light (比較ページ) */
body.light-mode .form-label.text-light { color: #333 !important; }

/* BEST枠FCマーク: 緑背景に白文字 */
body.light-mode .grid-mark.mark-fc { color: #fff !important; }

/* 比較ページのページネーション */
body.light-mode .btn-primary { color: #fff !important; }