/* EMT Work - 统一主题系统 v1.0
 * 包含所有公共样式和深色模式主题
 * 使用CSS变量实现主题切换
 */

/* ========================================
   CSS 变量定义
   ======================================== */

:root {
    /* 品牌颜色 */
    --color-primary: #6366f1;
    --color-primary-dark: #4f46e5;
    --color-secondary: #8b5cf6;
    --color-gold: #d4af37;
    --color-gold-light: #ffd700;
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-warning: #f59e0b;

    /* 背景颜色 - 浅色主题 */
    --bg-primary: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    --bg-secondary: rgba(255, 255, 255, 0.85);
    --bg-tertiary: rgba(255, 255, 255, 0.75);
    --bg-card: rgba(255, 255, 255, 0.75);
    --bg-hover: rgba(241, 245, 249, 0.7);
    --bg-input: #ffffff;
    --bg-overlay: rgba(0, 0, 0, 0.3);

    /* 文字颜色 - 浅色主题 */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-accent: #6366f1;
    --text-inverse: #ffffff;

    /* 边框颜色 - 浅色主题 */
    --border-color: rgba(226, 232, 240, 0.5);
    --border-hover: rgba(99, 102, 241, 0.3);
    --border-input: #e2e8f0;
    --border-focus: #6366f1;

    /* 渐变色 */
    --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
    --gradient-gold: linear-gradient(135deg, #d4af37, #ffd700);
    --gradient-success: linear-gradient(135deg, #10b981, #059669);
    --gradient-error: linear-gradient(135deg, #ef4444, #dc2626);

    /* 阴影 - 浅色主题 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 20px 60px rgba(99, 102, 241, 0.08);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.04);
    --shadow-button: 0 4px 15px rgba(99, 102, 241, 0.15);
    --shadow-gold: 0 4px 12px rgba(212, 175, 55, 0.15);

    /* 圆角 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 999px;

    /* 过渡 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* 间距 */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;

    /* 字体 */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 32px;

    /* z-index 层级 */
    --z-dropdown: 100;
    --z-modal: 1000;
    --z-overlay: 9999;
}

/* ========================================
   深色主题覆盖
   ======================================== */

body.dark,
body[data-theme="dark"] {
    /* 品牌颜色 - 深色主题使用金色 */
    --color-primary: #d4af37;
    --color-primary-dark: #c9a227;
    --color-secondary: #f5c211;
    --color-gold: #ffd700;
    --color-gold-light: #ffed4a;
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-warning: #f59e0b;

    /* 背景颜色 - 深色主题 */
    --bg-primary: linear-gradient(135deg, #121212 0%, #1a1a1a 100%);
    --bg-secondary: rgba(22, 22, 22, 0.85);
    --bg-tertiary: rgba(30, 30, 30, 0.6);
    --bg-card: rgba(30, 30, 30, 0.6);
    --bg-hover: rgba(212, 175, 55, 0.08);
    --bg-input: #2a2a2a;
    --bg-overlay: rgba(0, 0, 0, 0.5);

    /* 文字颜色 - 深色主题 */
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #9ca3af;
    --text-accent: #d4af37;
    --text-inverse: #1a1a1a;

    /* 边框颜色 - 深色主题 */
    --border-color: #443825;
    --border-hover: #d4af37;
    --border-input: #443825;
    --border-focus: #d4af37;

    /* 渐变色 - 深色主题 */
    --gradient-primary: linear-gradient(135deg, #d4af37, #ffd700);
    --gradient-gold: linear-gradient(135deg, #d4af37, #ffd700);
    --gradient-success: linear-gradient(135deg, #10b981, #059669);
    --gradient-error: linear-gradient(135deg, #ef4444, #dc2626);

    /* 阴影 - 深色主题 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 60px rgba(212, 175, 55, 0.15);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-button: 0 4px 15px rgba(212, 175, 55, 0.2);
    --shadow-gold: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* ========================================
   基础样式重置
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background var(--transition-slow), color var(--transition-slow);
    min-height: 100vh;
}

/* ========================================
   通用组件样式
   ======================================== */

/* 导航栏 */
.navbar {
    background: var(--bg-secondary);
    backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-slow), border-color var(--transition-slow);
}

/* 侧边栏 */
.sidebar {
    background: var(--bg-secondary);
    backdrop-filter: blur(20px);
    border-right: 1px solid var(--border-color);
    transition: background var(--transition-slow), border-color var(--transition-slow);
}

/* 卡片 */
.card,
.download-box,
.pay-card,
.register-card,
.login-card,
.info-card,
.stat-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    transition: background var(--transition-slow), border-color var(--transition-slow), box-shadow var(--transition-slow);
}

/* 按钮 */
.btn-primary,
.login-btn,
.register-btn,
.dl-btn,
.svip-btn {
    background: var(--gradient-primary);
    color: var(--text-inverse);
    border: none;
    box-shadow: var(--shadow-button);
    transition: all var(--transition-normal);
}

.btn-primary:hover,
.login-btn:hover:not(:disabled),
.register-btn:hover:not(:disabled),
.dl-btn:hover,
.svip-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* 按钮 - 金色 */
.btn-gold,
.svip-banner-btn {
    background: var(--gradient-gold);
    color: var(--text-inverse);
    box-shadow: var(--shadow-gold);
}

.btn-gold:hover,
.svip-banner-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

/* 输入框 */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
.form-input {
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    color: var(--text-primary);
    transition: all var(--transition-normal);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
.form-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
}

/* 徽章 */
.badge-primary {
    background: rgba(99, 102, 241, 0.1);
    color: var(--color-primary);
}

.badge-gold {
    background: rgba(212, 175, 55, 0.15);
    color: var(--color-gold);
}

.badge-success {
    background: rgba(16, 185, 129, 0.12);
    color: var(--color-success);
}

.badge-error {
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-error);
}

/* 链接 */
a {
    color: var(--text-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    opacity: 0.8;
}

/* 下拉菜单 */
.dropdown-menu {
    background: var(--bg-secondary);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    transition: background var(--transition-slow), border-color var(--transition-slow);
}

.dropdown-item {
    color: var(--text-primary);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--bg-hover);
}

/* 模态框 */
.modal-overlay,
.admin-modal-overlay,
.user-profile-modal,
.create-group-modal,
.group-members-modal,
.group-menu-modal {
    background: var(--bg-overlay);
    backdrop-filter: blur(8px);
}

.modal-content,
.admin-modal,
.user-profile-content,
.create-group-content,
.group-members-content,
.group-menu-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: background var(--transition-slow), border-color var(--transition-slow);
}

/* 头像 */
.avatar,
.user-avatar,
.contact-avatar,
.member-avatar,
.group-avatar,
.profile-avatar,
.chat-header-avatar,
.item-icon,
.software-icon {
    background: var(--gradient-primary);
    color: var(--text-inverse);
}

body.dark .avatar,
body.dark .user-avatar,
body.dark .contact-avatar,
body.dark .member-avatar,
body.dark .profile-avatar,
body.dark .chat-header-avatar,
body.dark .item-icon,
body.dark .software-icon,
body[data-theme="dark"] .avatar,
body[data-theme="dark"] .user-avatar,
body[data-theme="dark"] .contact-avatar,
body[data-theme="dark"] .member-avatar,
body[data-theme="dark"] .profile-avatar,
body[data-theme="dark"] .chat-header-avatar,
body[data-theme="dark"] .item-icon,
body[data-theme="dark"] .software-icon {
    background: var(--gradient-gold);
    color: var(--text-inverse);
}

/* 消息气泡 */
.message-bubble {
    color: var(--text-primary);
}

.message-sent .message-bubble {
    background: var(--gradient-primary);
    color: var(--text-inverse);
}

.message-received .message-bubble {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

/* 列表项 */
.user-item,
.group-chat-item,
.contact-item,
.member-item,
.software-item,
.domain-card,
.info-card,
.stat-card {
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.user-item:hover,
.group-chat-item:hover,
.contact-item:hover,
.member-item:hover,
.software-item:hover,
.domain-card:hover,
.info-card:hover,
.stat-card:hover {
    background: var(--bg-hover);
    transform: translateX(4px);
}

.user-item.active,
.group-chat-item.active {
    background: var(--bg-hover);
    border-left: 3px solid var(--color-primary);
}

/* 用户名和标题 */
.user-name,
.group-name,
.contact-name,
.member-name,
.software-name,
.domain-url,
.section-title,
.login-title,
.register-title,
.svip-title,
.modal-title,
.stat-title,
.info-label,
.plan-duration,
.payment-name,
.auto-renew-text {
    color: var(--text-primary);
}

/* 次要文本 */
.last-message,
.user-message,
.group-members,
.contact-section h4,
.card-desc,
.worktime-info p,
.subtitle,
.social-title,
.footer-note,
.user-level,
.member-role,
.fortune-result,
.member-role {
    color: var(--text-secondary);
}

/* 图标和按钮 */
.icon-wrapper,
.worktime-icon,
.card-icon {
    background: rgba(99, 102, 241, 0.1);
}

body.dark .icon-wrapper,
body.dark .worktime-icon,
body.dark .card-icon,
body[data-theme="dark"] .icon-wrapper,
body[data-theme="dark"] .worktime-icon,
body[data-theme="dark"] .card-icon {
    background: rgba(212, 175, 55, 0.1);
}

.icon-wrapper svg,
.worktime-icon svg,
.card-icon svg {
    stroke: var(--color-primary);
}

body.dark .icon-wrapper svg,
body.dark .worktime-icon svg,
body.dark .card-icon svg,
body[data-theme="dark"] .icon-wrapper svg,
body[data-theme="dark"] .worktime-icon svg,
body[data-theme="dark"] .card-icon svg {
    stroke: var(--color-gold);
}

/* 支付相关 */
.payment-item,
.plan-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.payment-item:hover,
.plan-card:hover {
    background: var(--bg-hover);
}

.payment-item.selected,
.plan-card.selected {
    border-color: var(--color-gold);
    background: rgba(212, 175, 55, 0.08);
}

/* 状态指示器 */
.online-dot.online,
.chat-header-online-dot.online,
.status-dot.ok {
    background: var(--color-success);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.online-dot.offline,
.chat-header-online-dot.offline {
    background: var(--text-muted);
}

.status-dot.fail {
    background: var(--color-error);
}

.status-dot.checking {
    background: var(--color-warning);
    animation: pulse 0.8s ease-in-out infinite;
}

/* 箭头指示器 */
.arrow-indicator,
.back-btn,
.check-btn {
    color: var(--text-accent);
}

/* 工具提示 */
.tooltip-text,
.question-circle {
    background: var(--text-primary);
    color: var(--text-inverse);
}

.question-circle {
    background: var(--color-primary);
}

body.dark .question-circle,
body[data-theme="dark"] .question-circle {
    background: var(--color-gold);
    color: var(--text-inverse);
}

/* 主题切换按钮 */
.theme-toggle,
.theme-toggle-btn,
.theme-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.theme-toggle:hover,
.theme-toggle-btn:hover,
.theme-btn:hover {
    background: var(--bg-hover);
    transform: scale(1.1);
}

/* 用户下拉框 */
.user-dropdown {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.user-dropdown:hover {
    background: var(--bg-hover);
}

/* 加载动画 */
.spinner {
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-top-color: var(--color-primary);
}

body.dark .spinner,
body[data-theme="dark"] .spinner {
    border: 2px solid rgba(212, 175, 55, 0.2);
    border-top-color: var(--color-gold);
}

/* 深色模式提示 */
body.dark .login-btn:disabled,
body[data-theme="dark"] .login-btn:disabled {
    background: #444;
    color: #888;
}

body.dark .register-btn:disabled,
body[data-theme="dark"] .register-btn:disabled {
    background: #444;
    color: #888;
}

/* 用户菜单项 */
.dropdown-item svg {
    stroke: var(--color-primary);
}

body.dark .dropdown-item svg,
body[data-theme="dark"] .dropdown-item svg {
    stroke: var(--color-gold);
}

.dropdown-item:hover {
    background: var(--bg-hover);
}

/* 分割线 */
.dropdown-item,
.create-group-header,
.group-members-header,
.group-menu-divider,
.create-group-footer {
    border-color: var(--border-color);
}

/* 群聊样式 */
.group-request {
    background: rgba(245, 158, 11, 0.1);
}

body.dark .group-request,
body[data-theme="dark"] .group-request {
    background: rgba(245, 158, 11, 0.1);
}

.group-request-title {
    color: var(--text-primary);
}

.group-request-name {
    color: var(--text-secondary);
}

/* 动画关键帧 */
@keyframes pulse {
    0%, 100% { opacity: 0.5; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

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

/* 其他通用样式 */
.page-header h1,
.back-btn,
.check-btn,
.section-title,
.to-download {
    color: var(--text-primary);
}

.social-link {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.social-link svg {
    stroke: var(--text-secondary);
}

.social-link:hover {
    background: var(--gradient-primary);
    border-color: transparent;
}

.social-link:hover svg {
    stroke: var(--text-inverse);
}

body.dark .social-link:hover,
body[data-theme="dark"] .social-link:hover {
    background: var(--gradient-gold);
}

body.dark .social-link:hover svg,
body[data-theme="dark"] .social-link:hover svg {
    stroke: var(--text-inverse);
}

/* 工作时间徽章 */
.worktime-badge {
    background: var(--gradient-success);
    color: var(--text-inverse);
}

body.dark .worktime-badge,
body[data-theme="dark"] .worktime-badge {
    background: var(--gradient-gold);
    color: var(--text-inverse);
}

/* 自动续费开关 */
.toggle-switch {
    background: var(--text-muted);
}

.toggle-switch.active {
    background: var(--color-gold);
}

/* 单选圆圈 */
.radio-circle {
    border-color: var(--text-muted);
}

.radio-circle.selected {
    border-color: var(--color-gold);
    background: var(--color-gold);
}

/* 账户状态 */
.account-status,
.user-level {
    color: var(--text-inverse);
}

.free-status,
.level-normal {
    background: rgba(250, 204, 21, 0.12);
    color: #ca8a04;
}

body.dark .free-status,
body.dark .level-normal,
body[data-theme="dark"] .free-status,
body[data-theme="dark"] .level-normal {
    background: rgba(212, 175, 55, 0.15);
    color: var(--color-gold);
}

.svip-status,
.level-svip,
.admin-status,
.level-admin {
    background: var(--gradient-gold);
    color: var(--text-inverse);
}

/* 导航链接 */
.nav-center a,
.nav-btn {
    color: var(--text-secondary);
}

.nav-center a:hover,
.nav-btn:hover {
    color: var(--text-accent);
}

/* 品牌文字 */
.logo {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.dark .logo,
body[data-theme="dark"] .logo {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 用户名和用户名文本 */
.username,
.username-text {
    color: var(--text-primary);
}

body.dark .username,
body.dark .username-text,
body[data-theme="dark"] .username,
body[data-theme="dark"] .username-text {
    color: var(--text-primary);
}

/* 下拉箭头 */
.dropdown-arrow {
    border-top-color: var(--text-secondary);
}

body.dark .dropdown-arrow,
body[data-theme="dark"] .dropdown-arrow {
    border-top-color: var(--color-gold);
}

/* 消息元数据 */
.message-meta,
.message-time {
    color: var(--text-muted);
}

/* 背景动画 */
body::before {
    background-image: radial-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px);
}

body.dark::before,
body[data-theme="dark"]::before {
    background-image: radial-gradient(rgba(212, 175, 55, 0.04) 1px, transparent 1px);
}