/* Unified theme template for user pages */

:root {
    --bg-1: #0b1222;
    --bg-2: #16213a;
    --line: rgba(148, 163, 184, 0.25);
    --text-main: #e2e8f0;
    --glass-bg: rgba(15, 23, 42, 0.68);
    --panel-bg: rgba(2, 6, 23, 0.38);
    --panel-line: rgba(51, 65, 85, 0.85);
    --button-bg: rgba(2, 6, 23, 0.55);
    --button-line: rgba(71, 85, 105, 1);
    --button-text: #cbd5e1;
    --odd-text: #e2e8f0;
    --theme-ring: rgba(20, 184, 166, 0.35);
    --accent-strong: #5eead4;
    --accent-border-hover: rgba(20, 184, 166, 0.7);
    --accent-border-active: rgba(20, 184, 166, 0.9);
    --accent-shadow-active: rgba(20, 184, 166, 0.25);
}

body[data-theme="day"] {
    --bg-1: #d5ddcf;
    --bg-2: #ecefe3;
    --line: rgba(31, 41, 55, 0.34);
    --text-main: #111827;
    --glass-bg: rgba(246, 248, 239, 0.92);
    --panel-bg: rgba(238, 242, 231, 0.95);
    --panel-line: rgba(31, 41, 55, 0.32);
    --button-bg: rgba(250, 252, 246, 0.98);
    --button-line: rgba(31, 41, 55, 0.4);
    --button-text: #1f2937;
    --odd-text: #111827;
    --theme-ring: rgba(17, 24, 39, 0.16);
    --accent-strong: #0b3f3a;
    --accent-border-hover: rgba(11, 63, 58, 0.82);
    --accent-border-active: rgba(11, 63, 58, 0.94);
    --accent-shadow-active: rgba(11, 63, 58, 0.2);
}

body {
    min-height: 100vh;
    font-family: "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    background:
        radial-gradient(circle at 8% 12%, rgba(20, 184, 166, 0.22) 0, rgba(20, 184, 166, 0) 34%),
        radial-gradient(circle at 88% 78%, rgba(56, 189, 248, 0.2) 0, rgba(56, 189, 248, 0) 38%),
        linear-gradient(135deg, var(--bg-1), var(--bg-2));
    color: var(--text-main);
}

.glass {
    backdrop-filter: blur(14px);
    background: var(--glass-bg);
    border: 1px solid var(--line);
}

.theme-toggle {
    border: 1px solid var(--line);
    background: var(--button-bg);
    color: var(--button-text);
    box-shadow: 0 0 0 2px var(--theme-ring);
}

.market-title {
    color: var(--accent-strong);
}

.odds-btn:hover {
    border-color: var(--accent-border-hover);
}

.odds-btn.active {
    border-color: var(--accent-border-active);
    box-shadow: 0 0 0 3px var(--accent-shadow-active);
    color: var(--accent-strong);
}

/* Day theme contrast overrides for shared utility classes */
body[data-theme="day"] .text-slate-400 {
    color: #374151;
}

body[data-theme="day"] .text-slate-300 {
    color: #1f2937;
}

body[data-theme="day"] .text-slate-200,
body[data-theme="day"] .text-slate-100 {
    color: #111827;
}

body[data-theme="day"] .bg-slate-900\/65,
body[data-theme="day"] .bg-slate-900\/70,
body[data-theme="day"] .bg-slate-900\/60,
body[data-theme="day"] .bg-slate-900\/40,
body[data-theme="day"] .bg-slate-950\/40,
body[data-theme="day"] .bg-slate-950\/60,
body[data-theme="day"] .bg-slate-950\/90,
body[data-theme="day"] .bg-slate-950 {
    background-color: rgba(236, 240, 230, 0.96);
}

body[data-theme="day"] .bg-slate-800 {
    background-color: rgba(224, 230, 218, 0.97);
}

body[data-theme="day"] #chatPanel {
    border-color: rgba(31, 41, 55, 0.3);
    background: rgba(244, 248, 238, 0.98);
}

body[data-theme="day"] #actionToast {
    background: rgba(15, 23, 42, 0.94);
    border-color: rgba(71, 85, 105, 0.9);
}

body[data-theme="day"] #actionToast.text-teal-200 {
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.9);
}

body[data-theme="day"] #actionToast.text-rose-200 {
    color: #fecdd3;
    border-color: rgba(244, 63, 94, 0.9);
}

body[data-theme="day"] .text-teal-300,
body[data-theme="day"] .text-teal-200,
body[data-theme="day"] .text-teal-100,
body[data-theme="day"] .text-cyan-200,
body[data-theme="day"] .text-cyan-100 {
    color: #0b3f3a;
}

body[data-theme="day"] .text-emerald-300,
body[data-theme="day"] .text-emerald-400 {
    color: #14532d;
}

body[data-theme="day"] .text-rose-300,
body[data-theme="day"] .text-rose-400 {
    color: #9f1239;
}

body[data-theme="day"] .bg-teal-400\/15,
body[data-theme="day"] .bg-cyan-400\/10,
body[data-theme="day"] .bg-cyan-400\/20 {
    background-color: rgba(11, 63, 58, 0.13);
}

body[data-theme="day"] .bg-teal-400\/15.text-teal-100 {
    color: #0b3f3a;
    border: 1px solid rgba(11, 63, 58, 0.35);
    background-color: rgba(172, 210, 203, 0.5);
}

body[data-theme="day"] .border-slate-600,
body[data-theme="day"] .border-slate-600\/70,
body[data-theme="day"] .border-slate-700,
body[data-theme="day"] .border-slate-700\/70,
body[data-theme="day"] .border-slate-700\/80 {
    border-color: rgba(31, 41, 55, 0.42);
}

body[data-theme="day"] .odds-btn.active {
    color: #111827;
    border-color: var(--accent-border-active);
    box-shadow: 0 0 0 3px var(--accent-shadow-active);
    background: rgba(188, 225, 218, 0.72);
}

body[data-theme="day"] .hover\:text-teal-200:hover {
    color: #0b3f3a;
}

body[data-theme="day"] .hover\:border-teal-400\/70:hover {
    border-color: var(--accent-border-hover);
}

body[data-theme="day"] .market-title {
    color: var(--accent-strong);
}

body[data-theme="day"] #themeToggle:hover {
    background-color: rgba(209, 213, 219, 0.8);
    border-color: rgba(31, 41, 55, 0.5);
}

body[data-theme="day"] #myShortcutBtn:hover {
    background-color: rgba(209, 213, 219, 0.8);
    border-color: var(--accent-border-hover);
}

/* Shared reusable motion and status components */
.fade-up {
    animation: fadeUp 0.45s ease both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
}

.status-chip.pending {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.12);
}

.status-chip.won {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.12);
}

.status-chip.lost {
    color: #f43f5e;
    border-color: rgba(244, 63, 94, 0.45);
    background: rgba(244, 63, 94, 0.12);
}

.status-chip.cancelled {
    color: #64748b;
    border-color: rgba(100, 116, 139, 0.45);
    background: rgba(100, 116, 139, 0.12);
}

.status-chip.settled {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.12);
}

.status-tab.active {
    border-color: var(--accent-border-active);
    background: rgba(20, 184, 166, 0.12);
    color: var(--accent-strong);
}

body[data-theme="day"] .status-tab.active {
    background: rgba(11, 63, 58, 0.1);
}