/* ============================================================
   theme.css —— 月亮科技 · 设计系统（唯一一份）

   以前每个页面自己带一段 <style>，六个页面六套颜色。
   那不是「六个页面」，那是六个迟早会长得不一样的页面 ——
   改一处颜色要改六遍，漏掉一遍就是一个看起来很廉价的角落。
   所以这里是唯一的一份，页面只准用变量和类，不准自带调色板。

   取色的想法：交易界面盯久了眼睛会累，所以背景压得很暗但不是纯黑
   （纯黑上的白字会「发光」，长时间看很刺），
   涨跌用降饱和度的青绿/砖红而不是荧光色 —— 专业感来自克制，
   强调色只留给「此刻要你做决定」的那一个元素。
   ============================================================ */

:root{
  /* 层次：页面 → 面板 → 面板里的卡片。只有三层，多了就乱 */
  --bg:        #0A0C10;
  --surface:   #11141A;
  --raised:    #171B23;
  --line:      #222835;
  --line-soft: #191E27;

  /* 文字三级：主要 / 次要 / 弱化。不再有第四级 */
  --fg:        #E7EAF0;
  --fg-dim:    #A5ADBC;
  --mut:       #6E7789;

  --up:        #14A07E;
  --dn:        #DC4F4C;
  --acc:       #3D6FF5;
  --warn:      #C9922B;

  --up-soft:   #14A07E22;
  --dn-soft:   #DC4F4C22;
  --acc-soft:  #3D6FF51F;
  --warn-soft: #C9922B1A;

  --r:   10px;   /* 圆角：卡片 */
  --r-s: 7px;    /* 圆角：控件 */

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
          "Microsoft YaHei", "Helvetica Neue", sans-serif;
  /* 数字必须等宽：价格跳动时字符不该左右乱挪，那种抖动看着就不专业 */
  --num: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, Menlo, monospace;
}

*{ box-sizing:border-box }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--fg);
           font:14px/1.6 var(--font); -webkit-font-smoothing:antialiased }
body.scroll{ height:auto; min-height:100% }

/* ---------- 排版 ---------- */
h1{ font-size:19px; font-weight:600; letter-spacing:-.2px; margin:0 }
h2{ font-size:16px; font-weight:600; margin:0 }
h3{ font-size:13.5px; font-weight:600; margin:0 }
a{ color:var(--acc); text-decoration:none }
.num{ font-family:var(--num); font-variant-numeric:tabular-nums }
.mut{ color:var(--mut); font-size:12.5px }
.dim{ color:var(--fg-dim) }
.strong{ color:var(--fg); font-weight:600 }
.up{ color:var(--up) } .dn{ color:var(--dn) } .wn{ color:var(--warn) }

/* 小标题：用字距和弱化代替粗黑，安静但分得清 */
.label{ font-size:10.5px; letter-spacing:1.4px; color:var(--mut);
        font-weight:600; margin:0 0 8px }

/* ---------- 容器 ---------- */
.card{ background:var(--surface); border:1px solid var(--line);
       border-radius:var(--r); padding:20px }
.panel{ background:var(--raised); border:1px solid var(--line-soft);
        border-radius:var(--r-s); padding:12px 13px }
.sep{ height:1px; background:var(--line-soft); margin:16px 0 }

/* ---------- 键值行：侧栏的主力 ---------- */
.kv{ display:flex; justify-content:space-between; align-items:baseline;
     font-size:12.5px; padding:3.5px 0; color:var(--fg-dim) }
.kv b{ font-family:var(--num); font-variant-numeric:tabular-nums;
       color:var(--fg); font-weight:600 }
.kv.big b{ font-size:17px; letter-spacing:-.3px }

/* ---------- 按钮 ---------- */
button, .btn{
  font:500 13px/1 var(--font); color:var(--fg-dim);
  background:#0D1016; border:1px solid var(--line); border-radius:var(--r-s);
  padding:10px 12px; cursor:pointer; transition:.14s;
  display:inline-flex; align-items:center; justify-content:center; gap:6px }
button:hover:not(:disabled){ color:var(--fg); background:#141922; border-color:#2E3645 }
button:active:not(:disabled){ transform:translateY(.5px) }
button:disabled{ opacity:.38; cursor:not-allowed }
button.p{ background:var(--acc); border-color:var(--acc); color:#fff; font-weight:600 }
button.p:hover:not(:disabled){ background:#4A79F7; border-color:#4A79F7; color:#fff }
button.g{ background:var(--up); border-color:var(--up); color:#fff }
button.r{ background:transparent; border-color:#5A2A2A; color:var(--dn) }
button.r:hover:not(:disabled){ background:var(--dn-soft); border-color:var(--dn); color:var(--dn) }
button.ghost{ background:transparent }
.row{ display:flex; gap:8px; margin-top:9px }
.row > *{ flex:1 }

/* ---------- 表单 ---------- */
label{ display:block; font-size:12px; color:var(--mut); margin:15px 0 6px }
input, select{ width:100%; padding:10px 12px; border-radius:var(--r-s);
  border:1px solid var(--line); background:#0D1016; color:var(--fg);
  font:15px/1.4 var(--font); transition:.14s }
input:focus, select:focus{ outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-soft) }
input::placeholder{ color:#4E5666 }

/* ---------- 徽标 / 状态点 ---------- */
.chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
  border-radius:999px; font-size:11.5px; font-weight:600; letter-spacing:.3px;
  border:1px solid var(--line); color:var(--fg-dim); background:#0D1016 }
.chip.code{ font-family:var(--num); color:var(--fg); letter-spacing:1px }
.chip.live{ color:var(--up); border-color:#14A07E55; background:var(--up-soft) }
.chip.warn{ color:var(--warn); border-color:#C9922B55; background:var(--warn-soft) }
.dot{ width:6px; height:6px; border-radius:50%; background:currentColor }
.dot.pulse{ animation:pulse 1.6s ease-in-out infinite }
@keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }

/* ---------- 提示条 ---------- */
.note{ border-radius:var(--r-s); padding:11px 13px; font-size:12.5px;
       line-height:1.7; border:1px solid; margin-top:12px }
.note.w{ color:var(--warn); border-color:#C9922B44; background:var(--warn-soft) }
.note.a{ color:var(--fg-dim); border-color:var(--line); background:#0D1016 }
.err{ color:#FF8A80; font-size:12.5px; margin-top:12px; min-height:18px }
.err.ok{ color:var(--up) }

/* ---------- 表格 ---------- */
table{ width:100%; border-collapse:collapse; font-size:12.5px }
th{ text-align:left; font-weight:600; color:var(--mut); font-size:11px;
    letter-spacing:.8px; padding:8px; border-bottom:1px solid var(--line) }
td{ padding:8px; border-bottom:1px solid var(--line-soft); color:var(--fg-dim) }
td b{ color:var(--fg); font-family:var(--num); font-variant-numeric:tabular-nums }

/* ---------- 滚动条：默认那根在深色界面上非常刺眼 ---------- */
::-webkit-scrollbar{ width:9px; height:9px }
::-webkit-scrollbar-thumb{ background:#232835; border-radius:5px }
::-webkit-scrollbar-thumb:hover{ background:#2E3645 }
::-webkit-scrollbar-track{ background:transparent }

/* ============================================================
   工作台专用（回放 / 实盘 / 教程 三个页面共用）
   ============================================================ */
#app{ display:flex; height:100% }
#left{ flex:1; position:relative; min-width:0 }
canvas{ display:block; width:100%; height:100%; cursor:crosshair }

#side{ width:302px; flex-shrink:0; background:var(--surface);
  border-left:1px solid var(--line); display:flex; flex-direction:column }
#sideHead{ padding:15px 16px 13px; border-bottom:1px solid var(--line) }
#sideBody{ padding:14px 16px 22px; overflow:auto; flex:1 }
#brand{ display:flex; align-items:center; justify-content:space-between; gap:8px }
#brand .nm{ font-size:12px; color:var(--mut); letter-spacing:.5px }
/* 回家的路。做成一个真的够大、点得到的目标 ——
   一个 12px 的箭头等于没有出口。 */
#brand #home{ display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-right:2px; flex:0 0 auto;
  border:1px solid var(--line); border-radius:7px;
  color:var(--mut); text-decoration:none; font-size:15px; line-height:1 }
#brand #home:hover{ color:var(--fg); border-color:var(--mut) }
#brand .nm{ margin-right:auto }

.grp{ margin-top:20px }
.grp:first-child{ margin-top:0 }

.tfbar{ display:flex; gap:0; border:1px solid var(--line);
        border-radius:var(--r-s); overflow:hidden; margin-top:9px }
.tfbar button{ flex:1; padding:7px 0; font-size:12px; border:0; border-radius:0;
  border-right:1px solid var(--line-soft); background:transparent; color:var(--mut) }
.tfbar button:last-child{ border-right:0 }
.tfbar button.on{ background:var(--acc-soft); color:var(--acc); font-weight:600 }

/* 折叠式说明：第一天有用，第三天就是噪音。让人自己收起来 */
details.help{ border:1px solid var(--line); border-radius:var(--r-s);
  padding:0; margin-top:9px; background:#0D1016 }
details.help > summary{ list-style:none; cursor:pointer; padding:10px 12px;
  font-size:12.5px; color:var(--fg-dim); display:flex;
  justify-content:space-between; align-items:center }
details.help > summary::-webkit-details-marker{ display:none }
details.help > summary::after{ content:'+'; color:var(--mut); font-size:15px }
details.help[open] > summary::after{ content:'–' }
details.help .body{ padding:2px 12px 12px; font-size:12px; line-height:1.95;
  color:var(--mut); border-top:1px solid var(--line-soft); padding-top:10px }
details.help .body b{ color:var(--fg-dim); font-weight:500 }

#hud{ position:absolute; left:14px; top:12px; font-size:11.5px; color:var(--mut);
  background:#0A0C10CC; border:1px solid var(--line-soft); padding:6px 11px;
  border-radius:var(--r-s); pointer-events:none; letter-spacing:.3px;
  font-family:var(--num); font-variant-numeric:tabular-nums;
  display:flex; gap:14px; align-items:center; backdrop-filter:blur(4px) }
#hud .sepv{ width:1px; height:11px; background:var(--line) }

#toast{ position:absolute; left:50%; top:18px; transform:translateX(-50%);
  background:#0A0C10F2; border:1px solid var(--line); border-radius:var(--r-s);
  padding:10px 16px; font-size:13px; opacity:0; transition:.18s;
  pointer-events:none; white-space:pre-line; max-width:74%; z-index:8;
  box-shadow:0 8px 34px #0009 }
#panel{ position:absolute; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:13px; width:214px; display:none;
  box-shadow:0 14px 44px #000B; z-index:6 }
#panel .confirm-actions{position:sticky;bottom:-13px;margin:8px -13px -13px;
  padding:9px 13px 13px;background:linear-gradient(180deg,transparent,#151922 24%)}
#menu{ position:absolute; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-s); padding:5px; display:none; box-shadow:0 14px 44px #000B;
  z-index:7; min-width:146px; user-select:none }
#menu .mtitle{ font-size:11px; color:var(--mut); padding:5px 10px 7px;
  border-bottom:1px solid var(--line-soft); margin-bottom:4px;
  font-family:var(--num); font-variant-numeric:tabular-nums }
#menu .mi{ padding:9px 11px; border-radius:6px; cursor:pointer; font-size:13.5px }
#menu .mi:hover{ background:#0D1016 }
#menu .mi.up{ color:var(--up) } #menu .mi.dn{ color:var(--dn) }

#done{ position:absolute; inset:0; background:#0A0C10F7; display:none; z-index:10;
  padding:46px 28px; overflow:auto; backdrop-filter:blur(3px) }
#done .inner{ max-width:520px; margin:0 auto }

.tag{ display:inline-block; padding:1px 6px; border-radius:4px; font-size:11px; margin-left:5px }
.tag.b{ background:var(--up-soft); color:var(--up) }
.tag.s{ background:var(--dn-soft); color:var(--dn) }

.presence-gate{position:fixed;inset:0;z-index:1000;background:#07090ddd;display:flex;
  align-items:center;justify-content:center;padding:18px}
.presence-card{width:min(520px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:20px;box-shadow:0 20px 70px #0009}
.presence-card h2{margin:0 0 12px;font-size:18px}
.presence-card video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#050609;
  border:1px solid var(--line);border-radius:10px;transform:scaleX(-1)}
.presence-copy{font-size:13px;line-height:1.75;color:var(--mut);margin:12px 0}
.presence-consent{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.6}
.presence-consent input{width:auto;flex:0 0 auto;margin-top:4px}.presence-card .err{min-height:22px;color:var(--dn)}
.buttonlike{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;
  border:1px solid var(--line);border-radius:8px;color:var(--fg);text-decoration:none}

/* ============================================================
   视觉预览 vNext：更安静的层级、更大的点击目标、更少的描边
   ============================================================ */
:root{
  --bg:#090B10;--surface:#11141B;--raised:#181C25;
  --line:#FFFFFF14;--line-soft:#FFFFFF0B;
  --fg:#F3F5F8;--fg-dim:#B4BBC8;--mut:#7C8596;
  --acc:#5B7CFA;--up:#32C48D;--dn:#FF6B68;--warn:#F2B84B;
  --r:16px;--r-s:11px;
}
html,body{font-size:15px;letter-spacing:-.01em;background:
  radial-gradient(900px 560px at 50% -220px,#263A7B2B,transparent 68%),var(--bg)}
h1{font-size:28px;line-height:1.15;letter-spacing:-.8px}h2{font-size:18px;letter-spacing:-.3px}
.mut{font-size:13px;color:var(--mut)}.label{font-size:11px;letter-spacing:.08em;text-transform:none}
.card{background:linear-gradient(180deg,#151820,#11141A);border-color:#FFFFFF12;
  box-shadow:0 24px 80px #00000035;padding:26px}
.panel{background:#181C24;border-color:#FFFFFF0A;box-shadow:inset 0 1px #FFFFFF08}
button,.btn{min-height:44px;padding:0 16px;border-radius:11px;font-size:14px;
  background:#171B24;border-color:#FFFFFF12;transition:background .16s,border-color .16s,transform .12s}
button:hover:not(:disabled){background:#202633;border-color:#FFFFFF1F}
button:active:not(:disabled){transform:scale(.985)}
button.p{background:linear-gradient(180deg,#6685FF,#5274F5);box-shadow:0 8px 24px #4F6FF72E}
input,select{min-height:46px;border-radius:11px;background:#0D1016;border-color:#FFFFFF14}
.chip{min-height:26px;padding:3px 10px;background:#FFFFFF08;border-color:#FFFFFF0D}

/* 首页 */
.wrap{max-width:720px!important;padding-top:72px!important}
.head{margin-bottom:30px!important}.head .mark{gap:14px!important;align-items:center}
.head .glyph{display:none}.brand-logo{width:48px;height:48px;filter:drop-shadow(0 10px 24px #4F6FF744)}
.product-name{font-size:13px;color:var(--mut);margin-top:4px;letter-spacing:.06em}
.head .sub{font-size:14px!important;margin:15px 0 0!important;color:var(--fg-dim)!important}
#home>.card{padding:28px 30px}.stat{grid-template-columns:repeat(4,1fr)!important;gap:10px!important}
.stat>div{padding:15px 14px;border-radius:12px;background:#FFFFFF06;border:1px solid #FFFFFF09}
.stat div span{font-size:12px!important}.stat div b{font-size:22px!important;line-height:1.25}
.acts button{min-height:46px}.foot{margin-top:38px!important;color:#626B7C!important}

/* 标注工作台 */
#side{width:340px;background:#10131A;border-left-color:#FFFFFF0D}
#sideHead{padding:18px 20px 16px;border-bottom-color:#FFFFFF0C}
#sideBody{padding:16px 20px 30px}.side-logo{width:25px;height:25px;border-radius:8px}
#brand{justify-content:flex-start}#brand .nm{color:var(--fg-dim);font-size:12px;line-height:1.15}
#brand .nm small{display:block;color:var(--mut);font-size:10px;margin-top:3px}
#brand .code{margin-left:auto}.grp{margin-top:24px}.grp>.panel{padding:14px 15px}
.kv{font-size:13px;padding:5px 0}.kv.big b{font-size:21px}.tfbar{height:38px}
.note.a{background:#FFFFFF04;border-color:#FFFFFF0A;color:var(--fg-dim)}
#hud{top:14px;left:16px;border-color:#FFFFFF0C;background:#0B0E14C7;
  box-shadow:0 10px 30px #0004;backdrop-filter:blur(16px)}
#toast{top:18px;background:#151922F2;border-color:#FFFFFF15;border-radius:12px;
  box-shadow:0 18px 55px #0008}
#panel{width:236px;border-radius:14px;border-color:#FFFFFF16;background:#151922F5;
  backdrop-filter:blur(18px);box-shadow:0 22px 65px #000A}
.presence-card{border-radius:20px;padding:24px;background:#12161EF5;backdrop-filter:blur(22px)}

/* 后台：高信息密度，但仍保持清晰 */
.wrap#main,.wrap[id="main"]{max-width:1440px!important}.tile{border-color:#FFFFFF0D!important;
  background:#141820!important;border-radius:14px!important}.tile b{font-size:25px!important}
table{font-size:13px}th{height:40px;background:#11141B;color:#8993A4}td{height:42px}
.bounded-table{border-radius:12px}
@media(max-width:680px){
  .wrap{padding:32px 16px 48px!important}.brand-logo{width:42px;height:42px}
  h1{font-size:24px}.card{padding:20px}.stat{grid-template-columns:repeat(2,1fr)!important}
  .acts>.row:last-child{flex-wrap:wrap}.acts>.row:last-child button{min-width:calc(50% - 5px)}
}