/* ============================================================
   ROASTBOOK — GLOBAL PREMIUM PALETTE v2  |  deep blue × indigo
   Additive over redesign.css. No structure changes.
   ============================================================ */

/* ── DESIGN TOKENS ── */
:root {
    --gp-blue:        #3b82f6;
    --gp-blue-soft:   rgba(59,130,246,0.14);
    --gp-blue-glow:   rgba(59,130,246,0.24);
    --gp-indigo:      #6366f1;
    --gp-indigo-soft: rgba(99,102,241,0.12);
    --gp-violet:      rgba(139,92,246,0.18);
    --gp-border:      rgba(96,165,250,0.16);
    --gp-border-focus:rgba(59,130,246,0.48);
    --gp-text:        rgba(220,232,255,0.94);
    --gp-muted:       rgba(160,180,220,0.68);
    --gp-ease:        cubic-bezier(0.4,0,0.2,1);
    --gp-spring:      cubic-bezier(0.34,1.56,0.64,1);
}
:root[data-theme='light'] {
    --gp-border:       rgba(59,130,246,0.18);
    --gp-border-focus: rgba(59,130,246,0.44);
    --gp-text:         #0d1627;
    --gp-muted:        #4a5c7a;
    --gp-blue-soft:    rgba(59,130,246,0.09);
    --gp-indigo-soft:  rgba(99,102,241,0.08);
}

/* ── FONT SMOOTHING ── */
* { -webkit-font-smoothing:antialiased; }

/* ── GLOBAL BODY BACKGROUND ── */
body {
    background:
        radial-gradient(ellipse 65% 50% at 5%  20%, rgba(59,130,246,0.08) 0%, transparent 58%),
        radial-gradient(ellipse 55% 60% at 95% 80%, rgba(99,102,241,0.10) 0%, transparent 55%),
        radial-gradient(ellipse 50% 45% at 50%  0%, rgba(139,92,246,0.06) 0%, transparent 52%),
        linear-gradient(170deg,#05070f 0%,#070918 55%,#06080f 100%) !important;
    background-attachment:fixed !important;
}
:root[data-theme='light'] body {
    background:
        radial-gradient(ellipse 65% 50% at 5%  20%, rgba(59,130,246,0.05) 0%, transparent 58%),
        radial-gradient(ellipse 55% 60% at 95% 80%, rgba(99,102,241,0.05) 0%, transparent 55%),
        linear-gradient(170deg,#f0f4ff 0%,#edf1ff 55%,#f2f5ff 100%) !important;
}

/* ── PRIMARY BUTTON — GLOBAL ── */
.btn-primary {
    background:linear-gradient(
        130deg,
        #1d4ed8 0%,
        #2563eb 35%,
        #3b82f6 68%,
        #1e50d4 100%
    ) !important;
    background-size:220% 220% !important;
    border:1px solid rgba(147,197,253,0.30) !important;
    border-bottom-width:1px !important;
    color:#fff !important;
    font-weight:800 !important;
    box-shadow:
        inset 0 1px 0 rgba(219,234,254,0.18),
        0 6px 22px rgba(37,99,235,0.36),
        0 2px 6px  rgba(0,0,0,0.22) !important;
    position:relative;
    overflow:hidden;
    transition:
        transform  .22s var(--gp-spring),
        box-shadow .22s var(--gp-ease),
        filter     .22s var(--gp-ease) !important;
    animation:gpBtnPulse 7s ease-in-out infinite alternate;
}
@keyframes gpBtnPulse {
    0%   { background-position:0%   60%; }
    50%  { background-position:100% 40%; }
    100% { background-position:0%   60%; }
}
.btn-primary::before {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(108deg,transparent 28%,rgba(255,255,255,0.16) 50%,transparent 72%);
    transform:translateX(-110%);
    transition:transform .50s var(--gp-ease);
    pointer-events:none; z-index:1;
}
.btn-primary:hover::before { transform:translateX(110%); }
.btn-primary:hover {
    transform:translateY(-2px) !important;
    box-shadow:
        inset 0 1px 0 rgba(219,234,254,0.22),
        0 12px 30px rgba(37,99,235,0.44),
        0 3px 10px rgba(0,0,0,0.24) !important;
    filter:brightness(1.07) !important;
}
.btn-primary:active {
    transform:translateY(1px) !important;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.18),
        0 3px 10px rgba(37,99,235,0.22) !important;
    filter:brightness(0.97) !important;
    transition-duration:.08s !important;
}
.btn-primary:disabled { opacity:.42; animation:none !important; transform:none !important; }
.btn-primary .spinner {
    border-color:rgba(255,255,255,0.28) !important;
    border-top-color:rgba(255,255,255,0.90) !important;
}

/* ── SECONDARY / GHOST BUTTONS ── */
.btn-secondary,
.btn-ghost,
.nav-theme-btn {
    background:rgba(255,255,255,0.03) !important;
    border:1px solid var(--gp-border) !important;
    color:rgba(165,192,240,0.78) !important;
    transition:
        transform    .20s var(--gp-spring),
        background   .20s var(--gp-ease),
        border-color .20s var(--gp-ease),
        box-shadow   .20s var(--gp-ease) !important;
}
.btn-secondary:hover,
.btn-ghost:hover,
.nav-theme-btn:hover {
    background:var(--gp-blue-soft) !important;
    border-color:rgba(96,165,250,0.28) !important;
    color:rgba(210,228,255,0.95) !important;
    transform:translateY(-1px) !important;
    box-shadow:0 4px 14px rgba(59,130,246,0.14) !important;
}
.btn-secondary:active,
.btn-ghost:active { transform:translateY(0) !important; transition-duration:.08s !important; }

/* ── FORM INPUTS ── */
.form-control {
    background:rgba(6,10,24,0.62) !important;
    border:1px solid var(--gp-border) !important;
    border-bottom-width:1px !important;
    border-radius:14px !important;
    color:rgba(220,232,255,0.90) !important;
    transition:
        border-color .24s var(--gp-ease),
        box-shadow   .28s var(--gp-ease),
        background   .24s var(--gp-ease) !important;
}
:root[data-theme='light'] .form-control {
    background:rgba(246,249,255,0.92) !important;
    color:#0d1627 !important;
}
.form-control::placeholder { color:rgba(100,130,185,0.50) !important; }
.form-control:focus {
    border-color:var(--gp-border-focus) !important;
    background:rgba(8,12,30,0.72) !important;
    box-shadow:
        0 0 0 3px rgba(59,130,246,0.14),
        0 3px 14px rgba(59,130,246,0.10) !important;
}
:root[data-theme='light'] .form-control:focus {
    background:rgba(248,251,255,0.98) !important;
    box-shadow:
        0 0 0 3px rgba(59,130,246,0.11),
        0 3px 12px rgba(59,130,246,0.07) !important;
}

.form-label {
    color:rgba(140,170,220,0.72) !important;
    font-size:11px !important;
    font-weight:600 !important;
    letter-spacing:.04em;
    text-transform:lowercase;
    transition:color .20s var(--gp-ease);
}
.form-group:focus-within .form-label { color:rgba(96,165,250,0.92) !important; }

/* ── CARDS ── */
.card,
.auth-card,
.modal,
.room-card,
.post-card,
.spotted-card,
.rail-card,
.profile-side-card,
.profile-hero,
.dm-directory,
.dm-thread-panel,
.chat-sidebar,
.chat-main,
.chat-input-wrapper,
.navbar-search-dropdown,
.notification-dropdown,
.feed-panel,
.rb-feed-head {
    background:rgba(7,10,24,0.82) !important;
    border:1px solid rgba(96,165,250,0.13) !important;
    border-top:1px solid rgba(147,197,253,0.12) !important;
    backdrop-filter:blur(24px) saturate(160%) !important;
    box-shadow:
        0 4px 20px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(147,197,253,0.05) !important;
    transition:border-color .22s var(--gp-ease), box-shadow .22s var(--gp-ease) !important;
}
:root[data-theme='light'] .card,
:root[data-theme='light'] .auth-card,
:root[data-theme='light'] .modal,
:root[data-theme='light'] .room-card,
:root[data-theme='light'] .post-card,
:root[data-theme='light'] .spotted-card,
:root[data-theme='light'] .rail-card,
:root[data-theme='light'] .profile-side-card,
:root[data-theme='light'] .profile-hero,
:root[data-theme='light'] .dm-directory,
:root[data-theme='light'] .dm-thread-panel,
:root[data-theme='light'] .chat-sidebar,
:root[data-theme='light'] .chat-main,
:root[data-theme='light'] .chat-input-wrapper,
:root[data-theme='light'] .navbar-search-dropdown,
:root[data-theme='light'] .notification-dropdown,
:root[data-theme='light'] .feed-panel,
:root[data-theme='light'] .rb-feed-head {
    background:rgba(246,249,255,0.92) !important;
    border:1px solid rgba(59,130,246,0.14) !important;
    border-top:1px solid rgba(147,197,253,0.20) !important;
    box-shadow:
        0 4px 18px rgba(37,99,235,0.08),
        inset 0 1px 0 rgba(219,234,254,0.60) !important;
}
.post-card:hover,
.room-card:hover,
.spotted-card:hover,
.rail-card:hover {
    border-color:rgba(96,165,250,0.26) !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.32),
        0 2px 8px rgba(59,130,246,0.12) !important;
    transform:translateY(-2px) !important;
}

/* ── NAVBAR ── */
.navbar {
    background:rgba(5,8,20,0.86) !important;
    border-right:1px solid rgba(96,165,250,0.13) !important;
    backdrop-filter:blur(26px) saturate(150%) !important;
    box-shadow:18px 0 42px rgba(0,0,0,0.32) !important;
}
:root[data-theme='light'] .navbar {
    background:rgba(246,249,255,0.92) !important;
    border-right:1px solid rgba(59,130,246,0.14) !important;
}
.nav-link-shell {
    color:rgba(140,168,220,0.78) !important;
    border:1px solid transparent !important;
    transition:background .18s var(--gp-ease), color .18s var(--gp-ease), border-color .18s var(--gp-ease) !important;
}
.nav-link-shell:hover {
    background:var(--gp-blue-soft) !important;
    color:rgba(200,220,255,0.95) !important;
}
.nav-link-shell.active,
.mobile-bottom-link.active {
    background:rgba(59,130,246,0.16) !important;
    border-color:rgba(96,165,250,0.26) !important;
    color:rgba(147,197,253,0.98) !important;
    box-shadow:inset 0 1px 0 rgba(147,197,253,0.07) !important;
}
.navbar-logo-badge {
    background:var(--gp-blue-soft) !important;
    border:1px solid var(--gp-border) !important;
    color:rgba(96,165,250,0.90) !important;
}
.navbar-invite-btn,
.notification-bell-btn {
    background:var(--gp-blue-soft) !important;
    border:1px solid var(--gp-border) !important;
    color:rgba(96,165,250,0.88) !important;
}
.navbar-invite-btn:hover,
.notification-bell-btn:hover {
    background:rgba(59,130,246,0.20) !important;
    border-color:rgba(96,165,250,0.32) !important;
    color:rgba(147,197,253,1) !important;
}
.navbar-search {
    border:1px solid var(--gp-border) !important;
    background:rgba(5,8,20,0.70) !important;
}
:root[data-theme='light'] .navbar-search { background:rgba(246,249,255,0.88) !important; }
.navbar-search:focus-within {
    border-color:var(--gp-border-focus) !important;
    box-shadow:0 0 0 3px rgba(59,130,246,0.11) !important;
}

/* ── PROFILE GLANCE ── */
.rb-profile-glance {
    background:var(--gp-blue-soft) !important;
    border:1px solid var(--gp-border) !important;
    transition:background .18s var(--gp-ease), border-color .18s var(--gp-ease) !important;
}
.rb-profile-glance:hover {
    background:rgba(59,130,246,0.20) !important;
    border-color:rgba(96,165,250,0.28) !important;
}
.rb-profile-glance-name  { color:rgba(210,228,255,0.95) !important; }
.rb-profile-glance-handle{ color:rgba(120,155,210,0.72) !important; }

/* ── LOBBY TABS ── */
.lobby-tab {
    background:rgba(255,255,255,0.03) !important;
    border:1px solid var(--gp-border) !important;
    color:rgba(140,168,220,0.78) !important;
    transition:background .18s var(--gp-ease), border-color .18s var(--gp-ease), color .18s var(--gp-ease) !important;
}
.lobby-tab:hover { background:var(--gp-blue-soft) !important; color:rgba(200,220,255,0.92) !important; }
.lobby-tab.active {
    background:rgba(59,130,246,0.18) !important;
    border-color:rgba(96,165,250,0.30) !important;
    color:rgba(147,197,253,0.98) !important;
}

/* ── BADGES / CHIPS ── */
.badge,
.profile-style-chip,
.profile-presence-chip,
.post-stat-chip,
.spotted-group-badge,
.spotted-anon-badge,
.room-meta-badge,
.room-mode-badge,
.room-access-badge,
.spotted-filter-chip,
.timeline-context-pill,
.spotted-compose-pill,
.room-settings-pill,
.rail-mini-pill,
.rail-room-chip,
.rail-spotted-badge,
.post-create-hints span {
    background:var(--gp-blue-soft) !important;
    border:1px solid var(--gp-border) !important;
    color:rgba(147,197,253,0.85) !important;
}

/* ── AVATARS ── */
.post-create-avatar,
.post-author-avatar,
.rail-person-avatar,
.dm-conversation-avatar,
.sidebar-person-avatar,
.notif-avatar,
.friend-card-avatar,
.message-avatar,
.profile-avatar,
.nav-avatar {
    border:2px solid rgba(59,130,246,0.22) !important;
}

/* ── OTP INPUTS ── */
.otp-input {
    background:rgba(6,10,24,0.60) !important;
    border:1px solid var(--gp-border) !important;
    border-bottom-width:1px !important;
    border-radius:14px !important;
    color:rgba(220,232,255,0.95) !important;
    transition:border-color .22s var(--gp-ease), box-shadow .28s var(--gp-ease), transform .22s var(--gp-spring) !important;
}
.otp-input:focus {
    border-color:var(--gp-border-focus) !important;
    background:rgba(8,12,30,0.78) !important;
    box-shadow:0 0 0 3px rgba(59,130,246,0.16), 0 4px 16px rgba(59,130,246,0.12) !important;
    transform:translateY(-2px) scale(1.04) !important;
}
.otp-input.filled {
    border-color:rgba(96,165,250,0.42) !important;
    background:rgba(59,130,246,0.08) !important;
}

/* ── TOASTS ── */
#toast-container { top:22px !important; right:22px !important; }
.toast {
    background:rgba(8,10,22,0.92) !important;
    backdrop-filter:blur(22px) saturate(150%) !important;
    border:1px solid rgba(96,165,250,0.16) !important;
    border-radius:16px !important;
    color:rgba(210,225,255,0.92) !important;
    padding:14px 18px !important;
    box-shadow:0 0 0 1px rgba(59,130,246,0.05), 0 8px 30px rgba(0,0,0,0.38) !important;
    animation:gpToastIn .36s cubic-bezier(0.175,0.885,0.32,1.275) !important;
    cursor:pointer;
    transition:transform .18s var(--gp-ease), opacity .18s var(--gp-ease) !important;
}
.toast:hover {
    transform:translateY(-2px) scale(1.01);
    box-shadow:0 0 0 1px rgba(96,165,250,0.10), 0 14px 38px rgba(0,0,0,0.44) !important;
}
.toast.exit { animation:gpToastOut .20s var(--gp-ease) forwards !important; }
@keyframes gpToastIn  { from { opacity:0; transform:translateX(18px) scale(.93); } to { opacity:1; transform:none; } }
@keyframes gpToastOut { to   { opacity:0; transform:translateX(18px) scale(.93); } }
.toast-success { border-left:3px solid rgba(59,130,246,0.80) !important; background:rgba(59,130,246,0.09) !important; }
.toast-error   { border-left:3px solid rgba(239,68,68,0.80) !important;  background:rgba(239,68,68,0.07) !important; color:rgba(252,165,165,0.95) !important; }
.toast-info    { border-left:3px solid rgba(99,102,241,0.80) !important; background:rgba(99,102,241,0.08) !important; color:rgba(196,181,253,0.92) !important; }
.toast-warn    { border-left:3px solid rgba(251,191,36,0.75) !important; background:rgba(251,191,36,0.06) !important; color:rgba(253,230,138,0.92) !important; }

/* ── FORM ERRORS ── */
.form-error {
    background:rgba(239,68,68,0.08) !important;
    border:1px solid rgba(239,68,68,0.20) !important;
    border-radius:12px !important;
    color:rgba(252,165,165,0.95) !important;
    animation:gpErrIn .26s var(--gp-spring) !important;
}
@keyframes gpErrIn { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }

/* ── CHAT ── */
.chat-textarea,
.post-content-input,
.spotted-content-input,
.spotted-reply-input {
    background:rgba(6,10,24,0.60) !important;
    border:1px solid var(--gp-border) !important;
    color:rgba(210,225,255,0.90) !important;
}
.chat-textarea:focus,
.post-content-input:focus,
.spotted-content-input:focus {
    border-color:var(--gp-border-focus) !important;
    box-shadow:0 0 0 3px rgba(59,130,246,0.11) !important;
}
.chat-send-btn {
    color:rgba(59,130,246,0.80) !important;
    transition:color .18s var(--gp-ease), transform .18s var(--gp-spring) !important;
}
.chat-send-btn:hover { color:rgba(147,197,253,1) !important; transform:scale(1.12) !important; }

/* ── URGENCY BAR ── */
.spotted-urgency-bar span {
    background:linear-gradient(90deg,#3b82f6 0%,#6366f1 50%,#8b5cf6 100%) !important;
}

/* ── HEAD STATS ── */
.rb-head-stat { background:var(--gp-blue-soft) !important; border:1px solid var(--gp-border) !important; }
.rb-head-stat-value { color:rgba(147,197,253,0.96) !important; }
.rb-head-stat-label { color:rgba(120,155,210,0.72) !important; }

/* ── PAGE LOADER ── */
.page-loader {
    background:
        radial-gradient(ellipse 60% 50% at 10% 15%, rgba(59,130,246,0.08) 0%, transparent 60%),
        linear-gradient(160deg,#05070f 0%,#07091a 100%) !important;
}
.loader-text { color:rgba(147,197,253,0.60) !important; }

/* ── SITE SIGNATURE ── */
.site-signature {
    background:rgba(8,10,22,0.88) !important;
    border:1px solid rgba(96,165,250,0.16) !important;
    box-shadow:0 10px 24px rgba(0,0,0,0.24) !important;
}
.site-signature-divider {
    background:linear-gradient(135deg,#3b82f6,#6366f1) !important;
}

/* ── PRESENCE DOT ── */
.rail-person-presence { background:#38bdf8 !important; }
.rail-person-presence.is-busy { background:#fb7185 !important; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(59,130,246,0.22); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:rgba(96,165,250,0.42); }

/* ── SELECTION ── */
::selection { background:rgba(59,130,246,0.26); color:rgba(219,234,254,0.98); }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion:reduce) {
    .btn-primary, .btn-primary::before,
    .post-card, .room-card, .spotted-card {
        animation:none !important; transition:none !important;
    }
}