/* =========================================================================
 * theme.css  —  银河映像投资平台 · 浅色专业金融风设计令牌系统
 * 加载方式：在 index.html / admin.html 的 <style> 块【之后】引入：
 *   <link rel="stylesheet" href="theme.css?v=20260717a">
 * 设计原则：Flat · Professional · Data-Dense（参考 MIC UI Style / fanruan 驾驶舱）
 * 约束：纯 vanilla CSS，零第三方依赖；通过覆盖现有类名实现换肤，不改 HTML 结构/JS 逻辑
 * ========================================================================= */

:root {
  /* 品牌主色（专业天蓝） */
  --primary:        #2f6fed;
  --primary-dark:   #1f5bd6;
  --primary-soft:   rgba(47,111,237,.10);
  --primary-softer: rgba(47,111,237,.06);
  --accent:         #0fb5a6;   /* 青绿，极少量点缀 */

  /* 文字层级 */
  --text-main:  #1f2733;
  --text-sub:   #5b6675;
  --text-muted: #9aa4b2;
  --text:       #1f2733;      /* 兼容 admin 中误用的 var(--text) */

  /* 表面 */
  --bg:        #f4f6fa;
  --bg-2:      #eef1f7;
  --card:      #ffffff;
  --border:    #e6e9ef;
  --border-strong: #d4dae3;

  /* 语义色 */
  --success:      #1f9d55;  --success-soft: rgba(31,157,85,.12);
  --danger:       #e5484d;  --danger-soft:  rgba(229,72,77,.12);
  --warning:      #d99100;  --warning-soft: rgba(217,145,0,.14);
  --info:         #2f6fed;

  /* 圆角 */
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-pill: 999px;

  /* 阴影层级 */
  --sh-1:  0 1px 3px  rgba(16,24,40,.06);
  --sh-2:  0 4px 16px rgba(16,24,40,.08);
  --sh-pop:0 12px 40px rgba(16,24,40,.18);

  /* 后台侧边栏（深海军蓝，浅色内容区 + 深色导航 = 标准专业后台） */
  --sb-bg:        #0b1f3a;
  --sb-active:    #16335f;
  --sb-hover:     #10294c;
  --sb-text:      #aebcd0;
  --sb-text-strong: #ffffff;

  /* 字体 / 过渡 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --t: 0.15s ease;
}

/* ----------------------------------------------------------------------- */
/* 基础                                                                     */
/* ----------------------------------------------------------------------- */
body { font-family: var(--font); color: var(--text-main); }
a { color: var(--primary); }

/* ============================ 后台 admin.html ============================ */
/* 重写 :root 变量已由上方统一，下面处理硬编码渐变 / 组件外观             */

.sidebar { background: var(--sb-bg); }
.sidebar-header { background: linear-gradient(135deg, #0b1f3a 0%, #16335f 100%); }
.logo { color: #fff; }
.menu-group-title { color: var(--sb-text); opacity: .7; }
.menu-item { color: var(--sb-text); border-radius: var(--r-sm); transition: background var(--t), color var(--t); }
.menu-item:hover { background: var(--sb-hover); color: var(--sb-text-strong); }
.menu-item.active { background: var(--sb-active); color: #fff; }
.menu-item .icon, .menu-item .arrow { color: inherit; }
.submenu-item { color: var(--sb-text); }
.submenu-item:hover { color: var(--sb-text-strong); }
.submenu-item.active { color: #fff; }

.topbar { background: var(--card); border-bottom: 1px solid var(--border); }
.breadcrumb { color: var(--text-sub); }
.breadcrumb .current { color: var(--text-main); }
.topbar-btn { color: var(--text-sub); border: 1px solid var(--border); background: var(--card); }
.topbar-btn:hover { color: var(--primary); border-color: var(--primary); }
.admin-name { color: var(--text-main); }

/* 统计卡 */
.stat-cards { gap: 16px; }
.stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
  transition: transform var(--t), box-shadow var(--t);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--sh-pop); }
.stat-label { color: var(--text-sub); }
.stat-value { color: var(--text-main); }
.stat-trend.up   { color: var(--success); }
.stat-trend.down { color: var(--danger); }

/* 面板 */
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.panel-header { border-bottom: 1px solid var(--border); }
.panel-title { color: var(--text-main); }
.panel-sub, .panel-extra { color: var(--text-sub); }

/* 按钮三件套 */
.btn-primary, .btn-danger, .btn-default {
  border-radius: var(--r); font-weight: 600; cursor: pointer; transition: filter var(--t), box-shadow var(--t);
}
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border: none; color: #fff; box-shadow: var(--sh-1); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-danger  { background: var(--danger); border: 1px solid var(--danger); color: #fff; }
.btn-default { background: var(--card); border: 1px solid var(--border-strong); color: var(--text-main); }
.btn-default:hover { border-color: var(--primary); color: var(--primary); }

/* 表格内动作按钮 — 淡色胶囊（与 .status-tag 统一风格） */
.action-btn {
  border: 1px solid; border-radius: var(--r-pill); color: var(--text-main); cursor: pointer; font-size: 12px;
  font-weight: 600; padding: 4px 12px; transition: opacity var(--t); background: var(--card);
}
.action-btn:hover { opacity: 0.8; }
.action-btn.view    { background: var(--primary-soft); color: var(--primary); border-color: #91d5ff; }
.action-btn.edit    { background: var(--warning-soft); color: var(--warning); border-color: #ffe58f; }
.action-btn.del     { background: var(--danger-soft);  color: var(--danger);  border-color: #ffccc7; }
.action-btn.publish { background: var(--success-soft); color: var(--success); border-color: #b7eb8f; }
.action-btn.warn    { background: rgba(217,145,0,.14); color: var(--warning); border-color: #ffd591; }
.action-btn.ok, .action-btn.approve { background: var(--success-soft); color: var(--success); border-color: #b7eb8f; }
.action-btn.setting { background: var(--primary-soft); color: var(--primary); border-color: #b5b3f7; }

/* 表单 */
.form-group { margin-bottom: 14px; }
.form-label { color: var(--text-main); font-weight: 600; }
.form-label.req::before { content: "*"; color: var(--danger); margin-right: 4px; }
.form-input, .form-select, .form-textarea {
  width: 100%; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 9px 12px; font-size: 14px; color: var(--text-main); background: var(--card);
  transition: border-color var(--t), box-shadow var(--t); font-family: var(--font);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}

/* 状态标签 */
.status-tag { border-radius: var(--r-pill); padding: 2px 10px; font-size: 12px; font-weight: 600; }
.status-tag.success { background: var(--success-soft); color: var(--success); }
.status-tag.warning { background: var(--warning-soft); color: var(--warning); }
.status-tag.danger  { background: var(--danger-soft);  color: var(--danger); }
.status-tag.info    { background: var(--primary-soft); color: var(--primary); }

/* 表格 */
table { width: 100%; border-collapse: collapse; }
thead th { background: var(--bg-2); color: var(--text-sub); font-weight: 600; text-align: left; padding: 10px 12px; }
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-main); }
tbody tr:hover { background: var(--bg); }

/* 分页 */
.pagination { gap: 6px; margin-top: 14px; }
.page-btn { border: 1px solid var(--border); background: var(--card); color: var(--text-sub); border-radius: var(--r-sm); padding: 6px 11px; cursor: pointer; transition: all var(--t); }
.page-btn:hover { border-color: var(--primary); color: var(--primary); }
.page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 分段控件 */
.seg { border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; background: var(--bg); }
.seg-btn { border: none; background: transparent; color: var(--text-sub); border-radius: var(--r-pill); padding: 6px 16px; cursor: pointer; transition: all var(--t); }
.seg-btn.active { background: var(--primary); color: #fff; }

/* 弹窗 */
.modal-overlay { background: rgba(16,24,40,.45); }
.modal { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-pop); }
.modal-header { border-bottom: 1px solid var(--border); }
.modal-title { color: var(--text-main); }
.modal-close { color: var(--text-sub); }
.modal-footer { border-top: 1px solid var(--border); }

/* 图表容器 */
.chart-row, .region-wrapper, .donut-chart { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); }
.donut-center .num { color: var(--text-main); }
.donut-center .label { color: var(--text-sub); }
.legend-item { color: var(--text-sub); }

/* 登录 */
.login-overlay { background: rgba(16,24,40,.45); }
.login-card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-pop); }
.login-logo { color: var(--primary); }
.login-input { border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 10px 12px; font-size: 14px; color: var(--text-main); }
.login-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.login-btn { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border: none; border-radius: var(--r); font-weight: 600; cursor: pointer; }
.login-error { color: var(--danger); }

/* 用户卡 / 搜索栏 */
.user-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.user-card-value.clickable { color: var(--primary); cursor: pointer; }
.user-card-value.online  { color: var(--success); }
.user-card-value.offline { color: var(--text-muted); }
.user-card-value.frozen  { color: var(--danger); }

/* 会员看板：保留为深色特性卡（不破坏业务），仅微调文字层级 */
.member-dashboard { background: linear-gradient(135deg, #0b1f3a, #17233d); border-radius: var(--r-lg); }
.member-stat-card { background: rgba(255,255,255,.06); border-radius: var(--r); }
.member-level-card { background: rgba(255,255,255,.05); border-radius: var(--r); }
.member-level-name { color: #fff; }
.member-level-row.highlight { color: #fff; }

/* 搜索 */
.search-input { border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 8px 12px; color: var(--text-main); }
.search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* 客服浮动按钮 */
.cs-fab { background: var(--primary); }
.cs-badge { background: var(--danger); }

/* ============================ 用户端 index.html ============================ */
/* 当前为零变量文件，下面用令牌统一覆盖可见区域                               */

html { background: var(--bg); }
body { background: var(--bg) !important; }

/* 底部导航 */
.tab-bar { background: #ffffff; }
.tab-item { color: var(--text-sub); }
.tab-icon, .tab-name { color: inherit; }
.tab-item.active .tab-icon, .tab-item.active .tab-name { color: var(--primary); }

/* 通用卡片 / 抽屉 / 表单壳层 */
.mypage, .auth-card, .buy-sheet, .pd-card, .news-detail-sheet, .contract-sheet,
.inv-page, .shop-head, .news-head, .company-body, .chat-panel, .chat-img-modal {
  background: var(--card);
}
.mypage { border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sh-pop); }
.auth-card, .buy-sheet, .pd-card, .news-detail-sheet, .contract-sheet, .chat-img-modal {
  border-radius: var(--r-lg); box-shadow: var(--sh-pop);
}
.mypage-header { background: rgba(255,255,255,.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(0,0,0,.04); }
.mypage-name { color: var(--text-main); }
.mypage-item .k { color: var(--text-sub); }
.mypage-item .v { color: var(--text-main); }
.mp-account-card { background: linear-gradient(135deg,#eaf4ff 0%,#dceaff 50%,#c8dfff 100%); color: #2b3340; border-radius: var(--r-lg); }
.mp-account-title, .mp-account-stat .k { color: #6f8ab3; }
.mp-account-amount, .mp-account-stat .v { color: #1f3459; }
.mp-tag { border-radius: var(--r-pill); padding: 2px 9px; font-size: 12px; }
.mp-tag.level    { background: rgba(80,130,230,.12); color: #4f8ae0; }
.mp-tag.verified { background: rgba(31,157,85,.12); color: #1f9d55; }
.mp-tag.team     { background: rgba(200,170,50,.14); color: #b8960e; }
.mp-menu-icon.orange { background: rgba(245,235,220,.25); color: #8a7a60; }
.mp-menu-icon.red    { background: rgba(235,220,220,.25); color: #8a6060; }
.mp-menu-icon.blue   { background: rgba(210,225,245,.25); color: #4f7ab0; }
.mp-menu-icon.yellow { background: rgba(235,230,210,.25); color: #8a8060; }

/* 功能入口图标：统一为天蓝系柔色，告别彩虹渐变 */
.feature-icon {
  background: linear-gradient(135deg, var(--primary-soft), var(--primary-softer)) !important;
  color: var(--primary) !important;
  border-radius: var(--r) !important;
}
.feature-icon.intro, .feature-icon.invite, .feature-icon.lottery,
.feature-icon.shop, .feature-icon.notice, .feature-icon.recharge,
.feature-icon.withdraw, .feature-icon.news {
  background: linear-gradient(135deg, var(--primary-soft), var(--primary-softer)) !important;
  color: var(--primary) !important;
}
.feature-name { color: var(--text-main); }

/* 卡片标题 */
.section-title, .section-title-text { color: var(--text-main); }
.section-title::before { background: var(--primary); }
/* 公告横幅 — 毛玻璃拟态圆角卡片 */
.notice-bar { background: linear-gradient(135deg, #f0f6ff 0%, #e8f0fe 100%); border: 1px solid rgba(47,111,237,.10); border-radius: 12px; box-shadow: 0 2px 12px rgba(47,111,237,.06), 0 1px 0 rgba(255,255,255,.95) inset; margin: 6px 12px; }
.notice-icon { filter: drop-shadow(0 1px 2px rgba(255,77,77,.25)); font-size: 18px; }
.notice-text { color: var(--text-sub); }

/* 主按钮：全部收口为天蓝主色渐变（覆盖原有各种渐变） */
.auth-btn, .buy-btn, .pd-invest-btn, .shop-ex-btn, .inv-contract-btn,
.lottery-result .rbtn, .copy-btn, .chat-send {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  color: #fff !important; border: none !important; border-radius: var(--r) !important;
  font-weight: 600; cursor: pointer; transition: filter var(--t);
}
.auth-btn:hover, .buy-btn:hover, .pd-invest-btn:hover, .shop-ex-btn:hover,
.inv-contract-btn:hover, .lottery-result .rbtn:hover, .copy-btn:hover, .chat-send:hover {
  filter: brightness(1.05);
}
.auth-btn.disabled, .buy-btn.disabled, .shop-ex-btn.disabled { opacity: .55; cursor: not-allowed; }

/* 表单 */
.auth-input, .buy-input {
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 14px; color: var(--text-main); background: var(--card);
}
.auth-input:focus, .buy-input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.auth-label, .buy-label { color: var(--text-main); font-weight: 600; }
.auth-label.req::before, .buy-label.req::before { content: "*"; color: var(--danger); margin-right: 4px; }
.auth-hint { color: var(--danger); }
.buy-info b, .pd-amount .num, .pd-stat .value, .inv-item .amt { color: var(--danger); }

/* 聊天 */
.chat-header { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
.chat-online { color: var(--success); }
.chat-bubble { border-radius: var(--r); }
.chat-row.user .chat-bubble { background: var(--primary); color: #fff; }
.chat-row.service .chat-bubble { background: var(--bg-2); color: var(--text-main); }

/* ---------------------- 幸运大转盘（浅色专业风重皮） ---------------------- */
#lotteryPage {
  background: linear-gradient(160deg, #eaf1ff 0%, #f4f6fa 55%, #eef3ff 100%) !important;
}
.lottery-title { color: var(--text-main) !important; text-shadow: 0 1px 2px rgba(16,24,40,.10); }
.lottery-sub   { color: var(--text-sub) !important; }
.lottery-remain { color: var(--text-sub) !important; font-weight: 600; }
.lottery-tip   { color: var(--text-sub) !important; }

.lottery-info { gap: 12px; }
.lottery-info .li-card {
  background: var(--card) !important;
  border: 1px solid var(--border);
  color: var(--text-main) !important;
  box-shadow: var(--sh-1);
}
.lottery-info .li-card .k { color: var(--text-sub) !important; }
.lottery-info .li-card .v { color: var(--text-main) !important; }

/* 转盘：保留多彩扇区（JS 注入 conic-gradient），仅统一外圈与文字 */
.wheel { border: 8px solid #fff; box-shadow: var(--sh-pop); background: #fff; }
.wheel-label { color: #5a2a2a; }   /* 深酒红，扇区上清晰可读 */
.wheel-pointer {
  border-top: 30px solid #f0b400;   /* 保留金色三角指针，浅底更跳 */
  filter: drop-shadow(0 2px 3px rgba(16,24,40,.30));
}
.wheel-center {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  color: #fff !important; border: 4px solid #fff;
  box-shadow: 0 4px 14px rgba(16,24,40,.25);
}

/* 中奖弹窗 */
.lottery-result-mask { background: rgba(16,24,40,.5); }
.lottery-result { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-pop); }
.lottery-result .gift-emoji { font-size: 56px; }
.lottery-result .rtitle { color: var(--danger); font-size: 20px; font-weight: 800; margin: 8px 0 4px; }
.lottery-result .rdesc  { color: var(--text-sub); font-size: 14px; margin-bottom: 18px; line-height: 1.5; }
.lottery-result .rbtn  { border-radius: var(--r-pill) !important; padding: 12px 0; width: 100%; font-size: 15px; }

/* ----------------------------------------------------------------------- */
/* 响应式：沿用现有断点（768 / 480），令牌化无需改动布局                       */
/* ----------------------------------------------------------------------- */