/* ============================================================================
   DEEPER shared design tokens — single source of truth.
   Loaded by BOTH index.html (public) and admin-*.php (admin) so colour /
   surface / radius changes propagate to both. Edit design tokens HERE only.
   ============================================================================ */

:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #1a1a2e;
    --bg-hover: #242440;
    --text-primary: #e0e0e8;
    --text-secondary: #8888a0;
    --accent: #6c5ce7;
    --accent-glow: rgba(108, 92, 231, 0.3);
    --border: #2a2a3e;
    /* IIDX lamp colors */
    --lamp-noplay: #333;
    --lamp-failed: #888;
    --lamp-assist: #9c27b0;
    --lamp-easy: #4caf50;
    --lamp-normal: #2196f3;
    --lamp-hard: #ff9800;
    --lamp-exhard: #f44336;
    --lamp-fc: #ffd700;
}

/* ===== Shared redesign tokens (mobile .m-root + PC .pc-root) ===== */
.m-root, .pc-root {
    /* surfaces */
    --bg-page:#0a0a10; --bg-abyss:#05060b; --bg-base:#090a12;
    --surface-1:#11131e; --surface-2:#171a28; --surface-3:#1f2232;
    --border:#222640; --border-soft:rgba(255,255,255,.065);
    /* text */
    --text-1:#e9e9f3; --text-2:#959ab4; --text-3:#5c6079;
    /* 3-axis voltage */
    --cv:#8b7cf0; --fv:#35d4c4; --sv:#5e8cf2;
    --accent-glow:rgba(139,124,240,.30); --accent-soft:rgba(139,124,240,.14);
    /* IIDX lamps (original deepers.site label palette) */
    --lamp-noplay:#555; --lamp-failed:#888; --lamp-assist:#3a7a3a;
    --lamp-easy:#6aad6a; --lamp-normal:#6a9fc9; --lamp-hard:#c47272;
    --lamp-exhard:#b0a040; --lamp-fc:#c0ccd8;
    /* radius */
    --r:16px; --r-sm:11px;
}

/* ===== Admin redesign skin =====
   Remaps the legacy var names (--bg-*, --accent, --border) to the new redesign
   palette so admin pages match the public site WITHOUT rewriting every rule.
   Scoped to body.admin-skin → zero impact on index.html. */
body.admin-skin {
    --bg-primary:#06070d;
    --bg-secondary:#11131e;   /* surface-1 */
    --bg-card:#171a28;        /* surface-2 */
    --bg-hover:#1f2232;       /* surface-3 */
    --border:#222640;
    --accent:#8b7cf0;         /* CV purple */
    --accent-glow:rgba(139,124,240,.20);
    --text-primary:#e9e9f3;
    --text-secondary:#959ab4;
    background:linear-gradient(180deg,#0c0d18 0%,#090a12 40%,#06070d 100%);
}
body.admin-skin .header {
    background:linear-gradient(96deg,#241d52 0%,#2f2862 55%,#15414a 100%);
}
/* Rounded corners + softer surfaces to match the public redesign */
body.admin-skin .upload-form,
body.admin-skin .player-header,
body.admin-skin .cmp-header,
body.admin-skin .cmp-summary,
body.admin-skin .cmp-modal,
body.admin-skin .ability-card { border-radius: var(--r-sm); }
body.admin-skin .tab { border-radius: 9px; }
body.admin-skin .btn { border-radius: 10px; box-shadow: 0 2px 10px rgba(139,124,240,.25); }
body.admin-skin .form-group input,
body.admin-skin .form-group select { border-radius: 8px; }
body.admin-skin .data-table th { letter-spacing: .6px; }
body.admin-skin .nav-ico { display: none; }  /* desktop: labels only (unchanged) */

/* ===== Admin mobile (≤768px): turn the top nav into a bottom tab bar ===== */
@media (max-width: 768px) {
    body.admin-skin .header { padding: 9px 12px; }
    body.admin-skin .header h1 { font-size: 18px; }
    body.admin-skin .nav {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 150;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border); border-bottom: none;
        box-shadow: 0 -4px 18px rgba(0,0,0,.45);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    body.admin-skin .nav a {
        flex: 0 0 auto; border-bottom: none; padding: 6px 13px 7px;
        flex-direction: column; align-items: center; gap: 1px;
        font-size: 10px; letter-spacing: .3px;
    }
    body.admin-skin .nav-ico { display: flex; }
    body.admin-skin .nav-ico svg { width: 21px; height: 21px; }
    body.admin-skin .nav a.active {
        border-bottom: none; color: #fff;
        background: linear-gradient(180deg, var(--accent-glow), transparent);
        box-shadow: inset 0 -2px 0 var(--accent);
    }
    body.admin-skin .content { padding-bottom: 66px; }
}