/* ============================================================
   PC28景天 · 苹果风深色底座（全站共享）
   用法：任何页面在 app.css 之后引入本文件即可整页变深色。
   只做「底座 + 通用组件」，页面专属布局写在各页自己的 <style> 里。
   ============================================================ */

:root {
  /* —— 覆盖 app.css 的浅色 tokens（这一步让 app.css 原生组件自动变深）—— */
  --c-bg: #000000;
  --c-bg-soft: #0b0b0c;
  --c-card: #1d1d1f;
  --c-primary: #0071e3;
  --c-primary-hover: #0077ed;
  --c-primary-soft: rgba(0, 113, 227, .16);
  --c-text: #f5f5f7;
  --c-text-2: #a1a1a6;
  --c-muted: #6e6e73;
  --c-border: rgba(255, 255, 255, .09);
  --c-border-light: rgba(255, 255, 255, .05);
  --c-big: #ff453a;
  --c-small: #0a84ff;
  --c-success: #30d158;
  --c-warning: #ff9f0a;
  --c-ds-dadan: #ff453a;
  --c-ds-dashuang: #ff9f0a;
  --c-ds-xiaodan: #0a84ff;
  --c-ds-xiaoshuang: #30d158;
  --shadow-sm: none;
  --shadow-md: 0 18px 50px -22px rgba(0, 0, 0, .95);
  --shadow-primary: 0 10px 28px -12px rgba(0, 113, 227, .55);
  --header-gradient: linear-gradient(135deg, #0071e3 0%, #2997ff 100%);
  --font-ui: -apple-system, "SF Pro Display", "SF Pro Text", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-num: ui-monospace, "SF Mono", "SF Pro Text", Menlo, Consolas, monospace;

  /* —— 本文件自己的一套语义变量 —— */
  --bg0: #000000;
  --bg1: #0b0b0c;
  --bg2: #141416;
  --card: rgba(29, 29, 31, .74);
  --card2: rgba(22, 22, 24, .94);
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .045);
  --a1: #0071e3;
  --a2: #2997ff;
  --a3: #0062c4;
  --txt: #f5f5f7;
  --txt2: #a1a1a6;
  --txt3: #6e6e73;
  --green: #30d158;
  --red: #ff453a;
  --blue: #0a84ff;
  --orange: #ff9f0a;
  --yellow: #ffd60a;
  --r: 18px;
  --r2: 26px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ============================ 基础 ============================ */
html { background: var(--bg0); }
html, body {
  background: var(--bg0) !important;
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--font-ui) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 100vh;
}
a { color: var(--a2); }
::selection { background: rgba(0, 113, 227, .35); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 99px; border: 3px solid #000; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .24); }

/* ============================ 顶部导航 ============================ */
.hd {
  position: sticky; top: 0; z-index: 60;
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--line2);
}
.hd-in {
  max-width: 1360px; margin: 0 auto;
  padding: 0 22px; height: 58px;
  display: flex; align-items: center; gap: 26px;
}
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: 0 0 auto; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(140deg, #0071e3, #2997ff);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff;
  box-shadow: 0 6px 18px -6px rgba(0, 113, 227, .9);
}
.logo-txt { font-size: 15px; font-weight: 700; color: var(--txt); letter-spacing: -.01em; line-height: 1.1; }
.logo-txt i { display: block; font-style: normal; font-size: 8px; letter-spacing: .22em; color: var(--txt3); font-weight: 500; }
.nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 7px 14px; border-radius: 99px;
  font-size: 13.5px; font-weight: 550; color: var(--txt2);
  text-decoration: none; white-space: nowrap; transition: .2s var(--ease);
}
.nav a:hover { color: var(--txt); background: rgba(255, 255, 255, .06); }
.nav a.on { background: var(--a1); color: #fff; font-weight: 650; text-shadow: 0 1px 2px rgba(0, 0, 0, .22); }
.hd-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.vip-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 99px;
  font-size: 12px; font-weight: 650; white-space: nowrap;
  background: linear-gradient(135deg, rgba(255, 214, 10, .16), rgba(255, 159, 10, .1));
  border: 1px solid rgba(255, 214, 10, .3);
  color: #ffd60a;
}
.vip-badge.free { background: rgba(255, 255, 255, .06); border-color: var(--line); color: var(--txt2); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(140deg, #2c2c2e, #48484a);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--txt);
  text-decoration: none; flex: 0 0 auto;
}
.login-btn {
  padding: 7px 14px; border-radius: 99px; font-size: 13px; font-weight: 600;
  background: var(--a1); color: #fff; text-decoration: none; white-space: nowrap;
}
.login-btn:hover { background: var(--a2); }

/* app.js renderHeader 生成的旧结构（兜底深色化） */
.site-header { background: rgba(0, 0, 0, .72) !important; border-bottom: 1px solid var(--line2) !important; box-shadow: none !important; }
.site-header .header-row1, .site-header .header-left, .site-header .header-right { color: var(--txt) !important; }
.site-header .site-title { color: var(--txt) !important; }
.site-header .nav-tab { color: var(--txt2) !important; }
.site-header .nav-tab.active { background: var(--a1) !important; color: #fff !important; }

/* ============================ 版心 / 页面 ============================ */
.wrap { max-width: 1200px !important; margin: 0 auto; padding: 0 22px; }
.page { padding-top: 22px !important; }

/* ============================ 卡片 ============================ */
.card {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
  color: var(--txt);
}
.card.lift { transition: .28s var(--ease); }
.card.lift:hover { border-color: rgba(255, 255, 255, .18) !important; transform: translateY(-2px); }

/* ============================ 按钮 ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 20px; border-radius: 99px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .07);
  color: var(--txt) !important; cursor: pointer;
  transition: .2s var(--ease); text-decoration: none; white-space: nowrap;
}
.btn:hover { background: rgba(255, 255, 255, .12); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary {
  background: var(--a1) !important; border-color: transparent !important; color: #fff !important;
  box-shadow: 0 10px 26px -12px rgba(0, 113, 227, .8) !important;
}
.btn.primary:hover { background: var(--a2) !important; }
.btn.ghost { background: transparent !important; border-color: var(--line) !important; color: var(--txt2) !important; }
.btn.ghost:hover { background: rgba(255, 255, 255, .06) !important; color: var(--txt) !important; }
.btn.danger { background: rgba(255, 69, 58, .14) !important; border-color: rgba(255, 69, 58, .32) !important; color: #ff8078 !important; }
.btn.danger:hover { background: rgba(255, 69, 58, .22) !important; }
.btn.block { display: flex; width: 100%; }

/* ============================ 表单 ============================ */
.field { margin-bottom: 16px; }
.label { display: block; font-size: 12.5px; font-weight: 550; color: var(--txt2) !important; margin-bottom: 8px; }
.input,
body input[type=text], body input[type=password], body input[type=search],
body input[type=email], body input[type=number], body textarea, body select {
  width: 100%; padding: 13px 15px;
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--line) !important;
  border-radius: 13px;
  color: var(--txt) !important; font-size: 14.5px; font-family: inherit;
  outline: none; transition: .2s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder, body input::placeholder, body textarea::placeholder { color: var(--txt3) !important; }
.input:focus, body input:focus, body textarea:focus, body select:focus {
  border-color: rgba(41, 151, 255, .6) !important;
  background: rgba(41, 151, 255, .07) !important;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, .14) !important;
}
body select option { background: #1d1d1f; color: var(--txt); }

/* ============================ 列表行 ============================ */
.list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: transparent !important; border-bottom: 1px solid var(--line2) !important;
  color: var(--txt); text-decoration: none;
}
.list-row:last-child { border-bottom: none !important; }
.list-row:active { background: rgba(255, 255, 255, .04) !important; }
.lr-ico { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; }
.lr-main { flex: 1 1 auto; min-width: 0; }
.lr-title { font-size: 14.5px; font-weight: 600; color: var(--txt) !important; }
.lr-sub { font-size: 12px; color: var(--txt3) !important; margin-top: 2px; }
.lr-arrow { color: var(--txt3) !important; font-size: 16px; flex: 0 0 auto; }

/* ============================ 键值对 ============================ */
.kv { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line2); font-size: 13.5px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--txt2) !important; }
.kv .v { color: var(--txt) !important; font-weight: 600; font-family: var(--mono); }

/* ============================ 空态 ============================ */
.empty { text-align: center; padding: 52px 20px; color: var(--txt3) !important; font-size: 13.5px; }

/* ============================ 弹层 / 提示 ============================ */
.modal-mask, .sheet-mask {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .66);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal, .sheet {
  background: var(--card2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px !important;
  color: var(--txt) !important;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .95) !important;
  max-width: 420px; width: 100%;
}
.sheet { align-self: flex-end; border-radius: 24px 24px 0 0 !important; }
.modal-body, .sheet-body { padding: 22px; color: var(--txt) !important; font-size: 14px; line-height: 1.62; }
.sheet-title { padding: 20px 22px 4px; font-size: 16px; font-weight: 700; color: var(--txt) !important; }
.sheet-close { color: var(--txt3) !important; }
#toast-box { position: fixed; left: 0; right: 0; bottom: 86px; z-index: 300; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  max-width: 82vw; padding: 10px 18px; border-radius: 99px;
  background: rgba(44, 44, 46, .96) !important; color: var(--txt) !important;
  font-size: 13px; font-weight: 550;
  border: 1px solid var(--line) !important;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .95) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.toast.ok { color: #7ef29a !important; }
.toast.err { color: #ff8a84 !important; }

/* ============================ 底部 tabbar ============================ */
.tabbar {
  background: rgba(0, 0, 0, .86) !important;
  border-top: 1px solid var(--line2) !important;
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
.tabbar .tab-item { color: var(--txt3) !important; }
.tabbar .tab-item.active { color: var(--a2) !important; }

/* ============================ 表格（通用）============================ */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th {
  text-align: left; padding: 10px 12px; font-weight: 550; font-size: 11.5px;
  color: var(--txt3) !important; border-bottom: 1px solid var(--line) !important;
  white-space: nowrap; letter-spacing: .02em;
}
.tbl td {
  padding: 11px 12px; border-bottom: 1px solid var(--line2) !important;
  color: var(--txt) !important; white-space: nowrap;
}

/* ============================ 徽章 / 胶囊 ============================ */
.tag, .pill, .badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; line-height: 1.5;
  border: 1px solid var(--line); color: var(--txt2);
  background: rgba(255, 255, 255, .05);
}
.tag.b, .pill.b, .badge.b { background: rgba(255, 69, 58, .16); border-color: rgba(255, 69, 58, .3); color: #ff8a84; }
.tag.s, .pill.s, .badge.s { background: rgba(10, 132, 255, .16); border-color: rgba(10, 132, 255, .3); color: #7cbcff; }
.tag.g, .pill.g, .badge.g { background: rgba(48, 209, 88, .16); border-color: rgba(48, 209, 88, .3); color: #7ef29a; }
.tag.o, .pill.o, .badge.o { background: rgba(255, 159, 10, .16); border-color: rgba(255, 159, 10, .3); color: #ffc46b; }

/* ============================ 客服浮动按钮 ============================ */
.cs-float {
  width: 54px !important; height: 54px !important; border-radius: 50% !important;
  background: rgba(29, 29, 31, .92) !important;
  border: 1px solid var(--line) !important;
  color: var(--txt) !important; padding: 0 !important;
  flex-direction: column !important; gap: 0 !important;
  font-size: 10px !important; font-weight: 500 !important;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .95) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: .22s var(--ease);
}
.cs-float:hover { background: rgba(48, 48, 52, .96) !important; transform: translateY(-2px); }

/* ============================ 入场动效 ============================ */
[data-rise] { opacity: 1; animation: riseIn .62s var(--ease) both; }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .hd-in { padding: 0 14px; gap: 12px; height: 54px; }
  .nav a { padding: 6px 10px; font-size: 12.5px; }
  .wrap { padding: 0 14px; }
  .page { padding-top: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* pw-hist-fix */

/* ===== app.css 里遗留的浅色组件（预测历史表） ===== */
.pred-hist-table-wrap{background:rgba(29,29,31,.74)!important;border-color:rgba(255,255,255,.09)!important}
table.pred-hist-table{background:transparent!important;color:#f5f5f7!important}
table.pred-hist-table thead th{background:rgba(255,255,255,.05)!important;color:#a1a1a6!important;border-color:rgba(255,255,255,.09)!important}
table.pred-hist-table tbody td{border-bottom-color:rgba(255,255,255,.07)!important;color:#f5f5f7!important}
table.pred-hist-table tbody tr:nth-child(even){background:rgba(255,255,255,.03)!important}
table.pred-hist-table tbody tr:hover{background:rgba(255,255,255,.06)!important}
table.pred-hist-table .pred-period{color:#f5f5f7!important}
table.pred-hist-table .pred-numbers{color:#f5f5f7!important}
table.pred-hist-table .pred-label{background:rgba(255,255,255,.06)!important;color:#a1a1a6!important}
table.pred-hist-table .pred-label.kill{background:rgba(255,159,10,.14)!important;color:#ffb340!important}
table.pred-hist-table .pred-hit{background:rgba(255,255,255,.06)!important;color:#a1a1a6!important}
table.pred-hist-table .pred-hit.hit-yes{background:rgba(48,209,88,.16)!important;color:#30d158!important}
table.pred-hist-table .pred-hit.hit-no{background:rgba(255,69,58,.16)!important;color:#ff453a!important}
table.pred-hist-table tr.pred-pending td{background:rgba(255,159,10,.1)!important}
table.pred-hist-table .pred-pending-text{color:#ff9f0a!important}
table.pred-hist-table .pred-empty{color:#6e6e73!important}
table.pred-hist-table .pred-vip-lock-link{color:#0a84ff!important}

/* pw-admin-fix */

/* ===== app.css 遗留浅色组件（表格/待开奖/导航页签） ===== */
table.admin-tbl{background:transparent!important;color:#f5f5f7!important}
table.admin-tbl th{background:rgba(255,255,255,.05)!important;color:#a1a1a6!important;border-color:rgba(255,255,255,.09)!important}
table.admin-tbl td{border-color:rgba(255,255,255,.08)!important;color:#f5f5f7}
tr.tr-pending td{background:rgba(255,159,10,.1)!important}
.nav-tab.active{background:rgba(255,255,255,.1)!important;color:#f5f5f7!important;box-shadow:none!important}

/* ===== 旧 app.js 顶栏 / tabbar 兜底（pw-legacy-header） ===== */
.site-header{background:rgba(0,0,0,.72)!important;border-bottom:1px solid rgba(255,255,255,.09)!important;backdrop-filter:blur(18px)}
.site-header .site-title,.site-header .header-left{color:#f5f5f7!important}
.site-header .nav-tab{background:rgba(255,255,255,.05)!important;color:#a1a1a6!important;border-color:rgba(255,255,255,.09)!important}
.site-header .nav-tab.active{background:#0071e3!important;color:#fff!important;border-color:transparent!important}
.site-header .avatar,.site-header .login-btn{background:#0071e3!important;color:#fff!important}
.tabbar{display:none!important}

/* ===== 算法详情页统计卡（pw-stats-card） ===== */
.stats-card{background:rgba(29,29,31,.74)!important;border:1px solid rgba(255,255,255,.09)!important;
  border-radius:16px!important;color:#f5f5f7!important;box-shadow:none!important}
.stats-label{color:#a1a1a6!important}
.stats-value{color:#f5f5f7!important}
.stats-value.accuracy,.stats-value.text-success{color:#30d158!important}
.stats-value.text-danger{color:#ff453a!important}
.stats-value.stats-highlight{color:#0a84ff!important}
.stats-value.stats-highlight.negative{color:#ff453a!important}
.sub-header{background:rgba(0,0,0,.8)!important;border-bottom:1px solid rgba(255,255,255,.09)!important;
  color:#f5f5f7!important;backdrop-filter:blur(16px)}
.sub-header .sub-title{color:#f5f5f7!important}
.sub-header .back-btn{color:#a1a1a6!important}
.sub-header .btn.xs{background:rgba(255,255,255,.08)!important;color:#f5f5f7!important;border-color:rgba(255,255,255,.12)!important}
.detail-vip-game-badge{color:#1c1917!important}
.embed-bar,.embed-tip{background:transparent!important;color:#a1a1a6!important}
.embed-title{color:#f5f5f7!important}
.loading-line,.spinner{color:#a1a1a6!important}
.accuracy{color:#30d158!important}
.text-danger{color:#ff453a!important}
.text-success{color:#30d158!important}