/**
 * 暗色主题配色：本文件仅含颜色/背景/边框/阴影等主题相关样式，
 * 结构样式见 css/common/common.css；亮色配色见 css/light/common.css。
 */

body { background: var(--bg-deep); color: var(--text-primary); }

body::before { background:
        radial-gradient(1200px 600px at 12% -8%, rgba(139, 92, 255, 0.22), transparent 60%),
        radial-gradient(1000px 520px at 88% 8%, rgba(0, 240, 255, 0.18), transparent 60%),
        radial-gradient(900px 620px at 50% 108%, rgba(255, 47, 214, 0.15), transparent 60%),
        var(--bg-deep); }

body::after { background: var(--rainbow); opacity: 0.045; filter: blur(60px); }

.glass { background: var(--bg-panel); border: 1px solid var(--bg-glass-border); backdrop-filter: var(--blur); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); }

.usermenu-modal-card,
.cdr-modal-card,
.incoming-card { background: rgba(22, 25, 50, 0.5); backdrop-filter: blur(24px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.1); }

.theme-toggle { border: 1px solid var(--bg-glass-border); background: var(--bg-panel); color: var(--text-secondary); }

.theme-toggle:hover { color: var(--neon-cyan); box-shadow: var(--glow-cyan); }

.btn { border: 1px solid var(--bg-glass-border); background: rgba(255, 255, 255, 0.04); color: var(--text-primary); }

.btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: rgba(0, 240, 255, 0.4); box-shadow: var(--glow-cyan); }

.btn:disabled { opacity: 0.32; }

.btn-primary { background: linear-gradient(rgba(10, 12, 26, 0.9), rgba(10, 12, 26, 0.9)) padding-box,
                var(--rainbow) border-box; border: 1px solid transparent; background-size: 100% 100%, 300% 100%; }

.btn-primary:hover:not(:disabled) { box-shadow: var(--glow-violet), var(--glow-cyan); border-color: transparent; }

.btn-danger:hover:not(:disabled) { border-color: rgba(255, 80, 80, 0.55); box-shadow: 0 0 8px rgba(255, 80, 80, 0.5), 0 0 22px rgba(255, 80, 80, 0.22); }

.btn-success:hover:not(:disabled) { border-color: rgba(182, 255, 60, 0.55); box-shadow: 0 0 8px rgba(182, 255, 60, 0.5), 0 0 22px rgba(182, 255, 60, 0.22); }

.btn-loading { opacity: 0.85 !important; }

.spinner { border: 2px solid rgba(0, 240, 255, 0.25); border-top-color: var(--neon-cyan); box-shadow: 0 0 6px rgba(0, 240, 255, 0.3); }

.input { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--bg-glass-border); color: var(--text-primary); outline: none; }

.input::placeholder { color: var(--text-dim); }

.input:focus { border-color: rgba(0, 240, 255, 0.55); background: rgba(0, 0, 0, 0.5); box-shadow: var(--glow-cyan); }

.dropdown { background: var(--bg-dropdown); border: 1px solid rgba(0, 240, 255, 0.22); backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.75), 0 0 24px rgba(0, 240, 255, 0.08); opacity: 0; }

.dropdown.open { opacity: 1; }

.badge { border: 1px solid var(--bg-glass-border); background: rgba(255, 255, 255, 0.04); color: var(--text-secondary); }

.dot-online { background: var(--neon-lime); box-shadow: 0 0 8px var(--neon-lime); }

.dot-busy { background: var(--neon-amber); box-shadow: 0 0 8px var(--neon-amber); }

.dot-offline { background: var(--text-dim); box-shadow: none; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(0, 240, 255, 0.35), rgba(139, 92, 255, 0.35)); }

::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(0, 240, 255, 0.6), rgba(255, 47, 214, 0.6)); }

.text-rainbow { background: var(--rainbow); background-size: 300% 100%; color: transparent; }

.app-toast { background: linear-gradient(rgba(10, 12, 26, 0.92), rgba(10, 12, 26, 0.92)) padding-box,
                linear-gradient(90deg, rgba(0, 240, 255, 0.6), rgba(139, 92, 255, 0.6)) border-box; border: 1px solid transparent; color: var(--text-primary); opacity: 0; box-shadow: var(--glow-cyan); }

.app-toast.show { opacity: 1; }

.app-pager { border-top: 1px solid var(--bg-glass-border); }

.app-pager .cdr-page-btn { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--bg-glass-border); color: var(--text-secondary); }

.app-pager .cdr-page-btn:hover:not(:disabled):not(.active) { background: rgba(0, 240, 255, 0.12); border-color: rgba(0, 240, 255, 0.4); color: var(--neon-cyan); }

.app-pager .cdr-page-btn.active { background: linear-gradient(rgba(0, 240, 255, 0.18), rgba(139, 92, 255, 0.18)) padding-box,
                linear-gradient(90deg, var(--neon-cyan), var(--neon-violet)) border-box; border: 1px solid transparent; color: #fff; box-shadow: var(--glow-cyan); }

.app-pager .cdr-page-btn:disabled { opacity: 0.3; }

.app-pager .cdr-page-dots { color: var(--text-dim); }

.app-pager .cdr-total { color: var(--text-dim); }

.app-toast.toast-success i { color: var(--neon-lime); }

.app-toast.toast-error i { color: var(--neon-magenta); }

.app-toast.toast-info i { color: var(--neon-cyan); }

.lang-btn { border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: var(--text-primary); }

.lang-btn:hover { border-color: rgba(0, 240, 255, 0.45); box-shadow: 0 0 12px rgba(0, 240, 255, 0.18); color: var(--neon-cyan); }

.lang-btn .fa-globe { color: var(--neon-cyan); }

.lang-btn .fa-chevron-down { opacity: 0.6; }

.lang-item { color: var(--text-secondary); }

.lang-item:hover { background: rgba(0, 240, 255, 0.1); color: var(--text-primary); }

.lang-item.active { color: var(--neon-cyan); background: rgba(0, 240, 255, 0.12); }

.app-loading { color: var(--text-secondary, #9aa3c0); }

.app-loading i { color: var(--neon-cyan, #00f0ff); }
/* 右键菜单（暗色） */
.ctx-menu { background: rgba(17, 23, 44, 0.97); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
.ctx-menu-item { color: var(--text-secondary); }
.ctx-menu-item:hover { background: rgba(0, 240, 255, 0.1); color: var(--neon-cyan); }
.ctx-menu-item.danger { color: #ff5470; }
.ctx-menu-item.danger:hover { background: rgba(255, 84, 112, 0.12); color: #ff5470; }
.ctx-menu-sep { background: rgba(255, 255, 255, 0.08); }