/* ============================================================
   Paradigm Reboot Server · user center theme
   Deep-space navy + cyan accent, layered on top of style.css.
   ============================================================ */

:root {
    --bg: #050a12;
    --bg-soft: #0a1220;
    --bg-deep: #03070d;
    --panel: rgba(13, 23, 38, 0.84);
    --panel-solid: #0c1626;
    --panel-soft: rgba(18, 32, 50, 0.6);
    --line: rgba(112, 202, 255, 0.11);
    --line-strong: rgba(112, 202, 255, 0.24);
    --line-bright: rgba(150, 224, 255, 0.4);

    --text: #edf6ff;
    --text-soft: #cfe3f3;
    --muted: #91aac2;
    --dim: #5f7890;

    --accent: #5ac8fa;
    --accent-2: #a6e8ff;
    --accent-deep: #1d719b;
    --rose: #ff8fd8;
    --danger: #ff7c95;
    --danger-soft: rgba(255, 124, 149, 0.12);
    --success: #7fe6c2;
    --success-soft: rgba(127, 230, 194, 0.12);
    --gold: #ffd28a;

    --glow: 0 0 40px rgba(90, 200, 250, 0.18);
}

body.app-body {
    background:
        radial-gradient(1100px 680px at 10% -12%, rgba(35, 126, 178, 0.28), transparent 62%),
        radial-gradient(900px 620px at 108% 4%, rgba(255, 143, 216, 0.1), transparent 58%),
        radial-gradient(800px 700px at 46% 120%, rgba(37, 86, 140, 0.16), transparent 62%),
        linear-gradient(180deg, #070d16 0%, #050a12 68%, #03070d 100%);
}

.brand-mark {
    text-shadow: 0 0 26px rgba(90, 200, 250, 0.55);
}

.auth-visual {
    background:
        radial-gradient(70% 90% at 20% 25%, rgba(90, 200, 250, 0.2), transparent 60%),
        linear-gradient(160deg, rgba(10, 20, 34, 0.92), rgba(3, 8, 14, 0.98));
}

.auth-orb-a {
    background: radial-gradient(circle, rgba(90, 200, 250, 0.24), transparent 68%);
}

.auth-orb-b {
    background: radial-gradient(circle, rgba(255, 143, 216, 0.16), transparent 68%);
}

.auth-panel {
    background:
        radial-gradient(80% 70% at 80% 10%, rgba(255, 143, 216, 0.08), transparent 60%),
        linear-gradient(180deg, rgba(7, 13, 22, 0.98), rgba(3, 7, 12, 0.99));
}

/* Difficulty badges used by play lists */
.diff-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid var(--line-strong);
    background: var(--panel-soft);
    color: var(--text-soft);
    white-space: nowrap;
}

.diff-detected { border-color: rgba(127, 230, 194, 0.45); color: #a7f3d8; background: rgba(127, 230, 194, 0.1); }
.diff-invaded  { border-color: rgba(90, 200, 250, 0.45);  color: #b9ecff; background: rgba(90, 200, 250, 0.1); }
.diff-massive  { border-color: rgba(255, 143, 216, 0.45); color: #ffc2ea; background: rgba(255, 143, 216, 0.1); }
.diff-reboot   { border-color: rgba(255, 210, 138, 0.5); color: #ffe0ae; background: rgba(255, 210, 138, 0.1); }

.song-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
}

.song-title {
    font-weight: 600;
    color: var(--text);
}

.song-meta {
    font-size: 12px;
    color: var(--muted);
}

.const-cell {
    font-family: var(--font-number);
    font-weight: 700;
    color: var(--accent-2);
}

.player-sub {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.mono-break {
    font-family: var(--font-number);
    word-break: break-all;
}

@media (max-width: 640px) {
    .song-cell { min-width: 140px; }
}