/* ===================================================================
   大肥鱼监控 · UI 设计系统（全站重构版）
   · 亮色「日间」/ 暗色「夜间」双主题，全部组件由设计令牌驱动
   · 保留原有 171 个业务类名与 DOM 结构，app.js 功能逻辑零改动
   · 涨跌沿用 A 股习惯：红涨 / 绿跌
   =================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root{
  color-scheme:light;

  /* 底色 / 表面层级 */
  --bg:#f2f6fc;
  --panel:#ffffff;
  --panel-2:#f7faff;
  --panel-3:#eaf1fb;

  /* 文字层级 */
  --ink:#101d32;
  --ink-2:#3d4e68;
  --muted:#7789a4;

  /* 描边 */
  --line:#e0e8f4;
  --line-strong:#c3d2e8;

  /* 品牌蓝 */
  --amber:#2563eb;
  --amber-strong:#1b53cf;
  --amber-bright:#5c92ff;
  --amber-soft:rgba(37,99,235,.10);
  --blue-soft:rgba(80,140,255,.13);
  --amber-on:#ffffff;

  /* 语义色：多 / 空 / 状态 */
  --green:#0f9d78;
  --green-soft:rgba(15,157,120,.11);
  --red:#df614f;
  --red-soft:rgba(223,97,79,.11);

  /* 涨跌：红涨绿跌 */
  --rise:#e0454b;
  --fall:#0a9d6e;

  /* 阴影 / 圆角 */
  --shadow:0 1px 2px rgba(16,35,70,.05),0 10px 26px -16px rgba(16,35,70,.26);
  --shadow-lg:0 2px 6px rgba(16,35,70,.07),0 24px 50px -20px rgba(16,35,70,.34);
  --r-lg:18px; --r-md:12px; --r-sm:9px;

  /* 主题化表面 */
  --grid:rgba(37,99,235,.055);
  --glass:rgba(250,252,255,.80);
  --topbar-bg:rgba(248,251,255,.84);
  --hero-a:#e3eeff; --hero-b:#f8fbff; --hero-c:#e9f2ff;
  --hero-border:rgba(37,99,235,.15);
  --hero-shadow:0 18px 40px -26px rgba(37,99,235,.55);
  --seg-line:rgba(37,99,235,.13);
  --seg-active-bg:rgba(37,99,235,.07);
  --head-hair:linear-gradient(90deg,var(--amber),#82b6ff 42%,transparent);
  --table-stripe:rgba(37,99,235,.028);
  --video-frame:#ffffff;
  --skeleton-a:#eaf1fb; --skeleton-b:#f7faff;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

html[data-theme="dark"]{
  color-scheme:dark;

  --bg:#080e1a;
  --panel:#101a2b;
  --panel-2:#152137;
  --panel-3:#1c2b44;

  --ink:#edf3ff;
  --ink-2:#bdcce3;
  --muted:#8a9cb8;

  --line:rgba(151,188,240,.13);
  --line-strong:rgba(151,188,240,.27);

  --amber:#5a9cff;
  --amber-strong:#82b6ff;
  --amber-bright:#a9ceff;
  --amber-soft:rgba(90,156,255,.14);
  --blue-soft:rgba(90,156,255,.12);
  --amber-on:#06152c;

  --green:#35cf94;
  --green-soft:rgba(53,207,148,.13);
  --red:#ff8478;
  --red-soft:rgba(255,132,120,.13);

  --rise:#ff6b72;
  --fall:#35cf94;

  --shadow:0 1px 0 rgba(255,255,255,.035) inset,0 12px 32px -14px rgba(0,0,0,.62);
  --shadow-lg:0 1px 0 rgba(255,255,255,.05) inset,0 26px 56px -20px rgba(0,0,0,.78);

  --grid:rgba(120,175,255,.055);
  --glass:rgba(12,22,38,.78);
  --topbar-bg:rgba(9,16,29,.82);
  --hero-a:#10233f; --hero-b:#0d1728; --hero-c:#132a48;
  --hero-border:rgba(120,180,255,.18);
  --hero-shadow:0 20px 48px -28px rgba(0,0,0,.9);
  --seg-line:rgba(151,188,240,.14);
  --seg-active-bg:rgba(90,156,255,.10);
  --head-hair:linear-gradient(90deg,var(--amber),rgba(120,180,255,.35) 42%,transparent);
  --table-stripe:rgba(151,188,240,.035);
  --video-frame:#f4f8ff;
  --skeleton-a:#1c2b44; --skeleton-b:#142139;
}

/* ---------- 2. 基础 ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);
  line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100dvh;overflow-x:hidden;
  transition:background-color .32s ease,color .32s ease;
}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:8px}
.num,.clock,.etf-big,.ov-wk .rate,.pnl .amt,.live-price{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.up{color:var(--rise)} .down{color:var(--fall)}
.wrap{width:min(1220px,100% - 36px);margin:0 auto}

/* 环境光 / 网格背景 */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(ellipse 80% 48% at 50% -16%,var(--amber-soft),transparent 62%),var(--bg);
  transition:background-color .32s ease}
.ambient::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:60px 60px;opacity:.85;
  -webkit-mask-image:radial-gradient(ellipse 78% 55% at 50% 0%,#000 26%,transparent 78%);
          mask-image:radial-gradient(ellipse 78% 55% at 50% 0%,#000 26%,transparent 78%)}
.ambient i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;will-change:transform}
.ambient .g1{width:440px;height:440px;left:-140px;top:-180px;background:var(--amber-soft);animation:drift1 28s ease-in-out infinite alternate}
.ambient .g2{width:380px;height:380px;right:-120px;top:4%;background:var(--blue-soft);animation:drift2 34s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(0,0)}to{transform:translate(100px,60px)}}
@keyframes drift2{from{transform:translate(0,0)}to{transform:translate(-80px,90px)}}

/* ---------- 3. 顶栏 ---------- */
.topbar{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line);
  background:var(--topbar-bg);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5)}
.topbar-in{display:flex;align-items:center;gap:16px;padding:12px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.logo{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;overflow:hidden;padding:0;
  background:var(--video-frame);
  box-shadow:0 0 0 1px var(--line-strong),0 8px 20px -10px var(--amber);
  animation:logoFloat 6s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-2deg)}}
.logo svg{width:27px;height:27px}
.logo img{width:100%;height:100%;border-radius:inherit;object-fit:cover;display:block}
.brand h1{margin:0;font-size:1.24rem;font-weight:820;letter-spacing:-.035em;line-height:1.15}
.brand p{margin:3px 0 0;color:var(--muted);font-size:.75rem;white-space:nowrap;letter-spacing:.01em}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.live-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);font-size:.77rem;color:var(--ink-2);font-weight:650;min-width:8.5em;justify-content:center}
.live-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--green);opacity:.6;animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(.45);opacity:.7}80%,100%{transform:scale(1.25);opacity:0}}
.live-pill.err .live-dot{background:var(--red)} .live-pill.err .live-dot::after{border-color:var(--red)}
#live-text{min-width:4.5em;text-align:center}
.ring-box{display:flex;align-items:center;gap:9px;padding:6px 13px 6px 8px;border-radius:999px;border:1px solid var(--line);background:var(--panel)}
.ring{transform:rotate(-90deg);flex:none}
.ring .track{stroke:var(--line)}
.ring .prog{stroke:var(--amber);stroke-linecap:round;transition:stroke-dashoffset .3s linear}
.ring-box span{font-size:.75rem;color:var(--muted);white-space:nowrap}
.ring-box b{color:var(--ink);font-weight:750}
.btn{appearance:none;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);
  padding:9px 16px;border-radius:12px;font-size:.83rem;font-weight:720;cursor:pointer;min-height:40px;
  display:inline-flex;align-items:center;gap:7px;
  transition:transform .18s ease,border-color .18s,background .18s,box-shadow .18s}
.btn:hover{border-color:var(--amber);box-shadow:0 4px 14px -8px var(--amber);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn.primary{background:var(--amber);border-color:transparent;color:var(--amber-on);box-shadow:0 8px 20px -10px var(--amber)}
.btn.primary:hover{background:var(--amber-strong);color:var(--amber-on)}
.btn:disabled{opacity:.55;cursor:wait;transform:none}
.btn .spin-ic{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.btn.loading .spin-ic{animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.countdown-bar{height:2px;background:var(--line);position:relative;overflow:hidden}
.countdown-bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--amber),var(--amber-bright));transform-origin:left;transform:scaleX(1)}

/* 主题切换按钮 */
.theme-toggle{appearance:none;position:relative;width:40px;height:40px;flex:none;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-2);
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:transform .2s,border-color .2s,color .2s,background .2s,box-shadow .2s}
.theme-toggle:hover{color:var(--amber);border-color:var(--amber);transform:translateY(-1px) rotate(-12deg)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle svg{width:19px;height:19px;display:block}
.theme-toggle .ico-sun{display:none}
.theme-toggle .ico-moon{display:block}
html[data-theme="dark"] .theme-toggle .ico-sun{display:block}
html[data-theme="dark"] .theme-toggle .ico-moon{display:none}

/* ---------- 4. 品牌全景横幅 ---------- */
.hero{padding:26px 0 4px}
.hero-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:22px 26px;border-radius:22px;border:1px solid var(--hero-border);overflow:hidden;
  background:linear-gradient(115deg,var(--hero-a) 0%,var(--hero-b) 52%,var(--hero-c) 100%);
  box-shadow:var(--hero-shadow)}
.hero-top::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:linear-gradient(90deg,transparent 35%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 35%,#000 100%)}
.hero-top::after{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--head-hair)}
.hero-brand{display:flex;align-items:center;gap:20px;min-width:0;flex:1;position:relative;z-index:1}
.brand-showcase{position:relative;flex:none;width:112px;height:112px;display:grid;place-items:center}
.brand-showcase::before{content:"";position:absolute;inset:-16px;border-radius:50%;
  background:radial-gradient(circle,var(--amber-soft),transparent 68%);filter:blur(14px);
  animation:brandBreath 5s ease-in-out infinite}
.brand-showcase::after{content:"";position:absolute;inset:-6px;border-radius:32px;
  border:1px dashed var(--line-strong);pointer-events:none;opacity:.85}
.brand-video-wrap{position:relative;z-index:1;width:112px;height:112px;border-radius:24px;overflow:hidden;
  background:var(--video-frame);
  box-shadow:0 16px 34px -14px rgba(16,35,70,.45),0 0 0 1px var(--line-strong) inset;
  transform:rotate(-2deg)}
.brand-video-wrap video{width:100%;height:100%;object-fit:cover;object-position:38% center;display:block}
.brand-spark{position:absolute;z-index:2;width:8px;height:8px;border-radius:50%;background:var(--amber-bright);
  box-shadow:0 0 12px 3px var(--amber-soft)}
.brand-spark.s1{top:0;right:-2px;animation:brandTwinkle 2.8s ease-in-out infinite}
.brand-spark.s2{bottom:4px;left:-6px;width:5px;height:5px;animation:brandTwinkle 3.6s ease-in-out .8s infinite}
.brand-spark.s{width:6px;height:6px}
@keyframes brandBreath{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes brandTwinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
.hero-copy{min-width:0;position:relative;z-index:1}
.hero-kicker{display:inline-flex;align-items:center;gap:7px;font-size:.71rem;font-weight:800;letter-spacing:.06em;
  color:var(--amber-strong);background:var(--panel);
  border:1px solid var(--hero-border);
  padding:4px 11px;border-radius:999px;margin-bottom:9px}
.hero-kicker i{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber)}
.hero h2{margin:0;font-size:clamp(1.4rem,3.2vw,2.05rem);font-weight:850;letter-spacing:-.04em;line-height:1.22}
.hero h2 em{font-style:normal;color:var(--amber-strong)}
.hero-sub{margin:7px 0 0;color:var(--muted);font-size:.85rem}
.hero-clock{position:relative;z-index:1;text-align:right;flex:none;
  padding:12px 18px;border-radius:14px;border:1px solid var(--hero-border);background:var(--glass);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);min-width:140px}
.hero-clock .clock{font-size:1.42rem;font-weight:800;letter-spacing:-.02em;display:block}
.hero-clock small{display:block;color:var(--muted);font-size:.73rem;margin-top:2px}

/* ---------- 5. 视图切换（分段标签栏） ---------- */
.seg{position:relative;display:flex;gap:2px;background:transparent;border:0;border-bottom:1px solid var(--seg-line);
  border-radius:0;padding:4px 4px 8px;margin:24px 0 0;width:fit-content;max-width:100%;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.seg::-webkit-scrollbar{display:none}
/* moveThumb() 依赖 .thumb 绝对定位 + left/width，此处改为底部指示条 */
.seg .thumb{position:absolute;top:auto;bottom:0;height:3px;border-radius:99px 99px 0 0;
  background:linear-gradient(90deg,var(--amber),var(--amber-bright));
  box-shadow:0 0 12px -2px var(--amber);
  transition:left .36s cubic-bezier(.3,1.3,.4,1),width .36s cubic-bezier(.3,1.3,.4,1);z-index:1}
.seg button{position:relative;z-index:1;white-space:nowrap;flex-shrink:0;appearance:none;border:0;background:transparent;color:var(--muted);
  padding:9px 18px;border-radius:10px;font-size:.9rem;font-weight:700;cursor:pointer;min-height:42px;
  display:inline-flex;align-items:center;gap:7px;transition:color .22s,background .22s}
.seg button:hover{color:var(--ink);background:var(--seg-active-bg)}
.seg button.active{color:var(--amber-strong);background:var(--seg-active-bg)}
.badge-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:99px;
  background:var(--red);color:#fff;font-size:.7rem;font-weight:800;animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}
.disclaimer{font-size:.75rem;color:var(--muted);margin:12px 2px 0;letter-spacing:.01em}

/* ---------- 6. 通用面板 ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  overflow:hidden;position:relative;margin-top:16px}
.panel::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--head-hair);opacity:.85}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 22px 0;flex-wrap:wrap;position:relative}
.panel-head h3{margin:0;font-size:1.12rem;font-weight:820;letter-spacing:-.025em;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.panel-head h3::before{content:"";width:4px;height:16px;border-radius:3px;background:var(--amber);flex:none}
.panel-sub{margin:6px 0 0;color:var(--muted);font-size:.79rem;line-height:1.5}
.panel-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}
.panel-body{padding:18px 22px 24px}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:750;padding:3px 10px;border-radius:99px;
  background:var(--amber-soft);color:var(--amber-strong);border:1px solid color-mix(in srgb,var(--amber) 26%,transparent)}
.tag.gray{background:var(--panel-3);color:var(--muted);border-color:var(--line)}
.tag.red{background:var(--red-soft);color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.status-pill{font-size:.73rem;font-weight:720;padding:5px 11px;border-radius:99px;background:var(--panel-3);color:var(--muted);
  border:1px solid var(--line);white-space:nowrap;min-width:4.5em;text-align:center}
.status-pill.live{background:var(--green-soft);color:var(--green);border-color:color-mix(in srgb,var(--green) 30%,transparent)}
.status-pill.warn{background:var(--amber-soft);color:var(--amber-strong);border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
.status-pill.err{background:var(--red-soft);color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.view{display:none}.view.active{display:block;animation:viewIn .4s cubic-bezier(.2,.9,.3,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.empty{padding:42px 16px;text-align:center;color:var(--muted);font-size:.88rem}
.empty .big{font-size:1.7rem;display:block;margin-bottom:8px;opacity:.7}
.empty-brand{width:66px;height:66px;border-radius:18px;object-fit:cover;display:block;margin:0 auto 12px;
  box-shadow:0 10px 24px -10px var(--amber),0 0 0 1px var(--line-strong)}
.err-box{padding:15px 16px;border-radius:var(--r-md);background:var(--red-soft);color:var(--red);font-size:.85rem;
  border:1px solid color-mix(in srgb,var(--red) 24%,transparent)}
.skel{border-radius:var(--r-md);background:linear-gradient(100deg,var(--skeleton-a) 40%,var(--skeleton-b) 50%,var(--skeleton-a) 60%);
  background-size:200% 100%;animation:shim 1.3s linear infinite;min-height:120px}
@keyframes shim{to{background-position:-200% 0}}

/* ---------- 7. 带单员切换 ---------- */
.trader-chips{display:flex;flex-wrap:wrap;gap:9px;padding:16px 0 14px;min-height:44px}
.chip{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--ink-2);cursor:pointer;
  border-radius:12px;padding:7px 11px 7px 8px;min-height:44px;display:inline-flex;align-items:center;gap:9px;
  font-size:.84rem;font-weight:680;transition:transform .22s cubic-bezier(.2,.9,.3,1),box-shadow .22s,border-color .22s,background .22s;
  box-shadow:var(--shadow)}
.chip:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:var(--shadow-lg)}
.chip.active{background:var(--amber);color:var(--amber-on);border-color:transparent;box-shadow:0 8px 20px -10px var(--amber)}
.chip .ava{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:.72rem;font-weight:850;
  color:#08182c;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.06) inset}
.chip .cnt{min-width:22px;height:22px;padding:0 6px;border-radius:8px;display:grid;place-items:center;
  font-size:.7rem;font-weight:850;background:var(--green-soft);color:var(--green)}
.chip .cnt.zero{background:var(--panel-3);color:var(--muted)}
.chip.active .cnt{background:rgba(255,255,255,.22);color:inherit}
.chip.active .cnt.zero{background:rgba(255,255,255,.18);color:inherit}
.chip .wk{font-size:.72rem;font-weight:700;opacity:.9}

/* ---------- 8. 明细汇总 ---------- */
.sum-row{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}
.sum-chip{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 15px;
  font-size:.76rem;color:var(--muted);min-width:96px}
.sum-chip b{display:block;color:var(--ink);font-size:1.04rem;margin-top:2px;font-weight:800}
.expo{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:18px}
.expo .side{flex:1 1 190px;border-radius:var(--r-md);padding:12px 15px;border:1px solid var(--line);
  position:relative;overflow:hidden;background:var(--panel-2)}
.expo .side i{position:absolute;inset:0;transform-origin:left;transition:transform .9s cubic-bezier(.2,.9,.25,1)}
.expo .side.long i{background:var(--green-soft)} .expo .side.short i{background:var(--red-soft);transform-origin:right}
.expo .side span{position:relative;font-size:.77rem;color:var(--muted);font-weight:650}
.expo .side b{position:relative;display:block;font-size:1.08rem;margin-top:2px;font-weight:800}
/* 多/空敞口与底色同色系，避免红绿交叉刺眼 */
.expo .side.long b{color:var(--green)}
.expo .side.short b{color:var(--red)}

/* ---------- 9. 仓位卡 ---------- */
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.pos-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel-2);padding:18px 19px 16px;
  position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.9,.3,1),box-shadow .25s,border-color .25s;
  animation:rise .5s cubic-bezier(.2,.9,.3,1) both}
.pos-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.pos-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green)}
.pos-card.is-short::before{background:var(--red)}
.pos-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sym{font-size:1.3rem;font-weight:850;letter-spacing:-.03em;display:flex;align-items:center;gap:9px}
.side-tag{font-size:.69rem;font-weight:820;padding:3px 9px;border-radius:7px;letter-spacing:.02em}
.side-tag.long{background:var(--green-soft);color:var(--green);box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 25%,transparent) inset}
.side-tag.short{background:var(--red-soft);color:var(--red);box-shadow:0 0 0 1px color-mix(in srgb,var(--red) 25%,transparent) inset}
.pos-sub{color:var(--muted);font-size:.75rem;margin-top:4px}
.pnl{text-align:right;flex:none}
.pnl .amt{font-size:1.14rem;font-weight:850}
.pnl .rate{font-size:.79rem;font-weight:750}
.pos-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin-top:15px}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;padding:6px 0;border-bottom:1px dashed var(--line)}
.kv span{color:var(--muted);flex:none}.kv b{font-weight:680;text-align:right}
.live-line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;padding:10px 0 0;
  border-top:1px dashed var(--line);font-size:.78rem;color:var(--muted)}
.live-line span{color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.live-line .pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent);animation:notify-pulse 1.4s ease-in-out infinite}
.live-price{font-weight:820;font-size:.95rem;color:var(--ink)}
.live-price.is-wait{color:var(--muted);font-weight:600}
.live-price.tick-up{color:var(--rise)} .live-price.tick-down{color:var(--fall)}

/* ---------- 10. 历史折叠 ---------- */
.hist{margin-top:20px;border-top:1px dashed var(--line);padding-top:6px}
.hist>summary{cursor:pointer;font-weight:780;font-size:.9rem;padding:10px 2px;list-style:none;display:flex;align-items:center;gap:8px;color:var(--amber-strong)}
.hist>summary::-webkit-details-marker{display:none}
.hist>summary::after{content:"▾";margin-left:auto;color:var(--muted);transition:transform .3s}
.hist[open]>summary::after{transform:rotate(180deg)}
.hist-list{display:flex;flex-direction:column;gap:9px;max-height:430px;overflow:auto;padding:2px;
  overscroll-behavior:contain;scrollbar-gutter:stable}
.hist-item{border:1px solid var(--line);border-radius:var(--r-md);padding:11px 14px;background:var(--panel-2);font-size:.82rem}
.hist-item .meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:.74rem;margin-bottom:6px;flex-wrap:wrap}
.hist-item pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:var(--font);font-size:.82rem;line-height:1.6;color:var(--ink-2)}

/* ---------- 11. 全部概览 ---------- */
.ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;min-height:120px}
.ov-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);
  cursor:pointer;transition:transform .25s cubic-bezier(.2,.9,.3,1),box-shadow .25s,border-color .25s;
  animation:rise .5s cubic-bezier(.2,.9,.3,1) both;text-align:left;width:100%;color:var(--ink);font-size:1rem;
  position:relative;overflow:hidden}
.ov-card::after{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--head-hair);opacity:0;transition:opacity .25s}
.ov-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.ov-card:hover::after{opacity:1}
.ov-card.sel{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber),var(--shadow)}
.ov-card.sel::after{opacity:1}
.ov-head{display:flex;align-items:center;gap:11px}
.ov-head .ava{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:850;font-size:.9rem;
  color:#08182c;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.06) inset}
.ov-head h4{margin:0;font-size:1.02rem;font-weight:820}
.ov-head small{display:block;color:var(--muted);font-weight:500;font-size:.73rem;margin-top:2px}
.ov-wk{display:flex;align-items:baseline;gap:10px;margin-top:15px}
.ov-wk .rate{font-size:1.72rem;font-weight:850;letter-spacing:-.03em}
.ov-wk .lab{font-size:.75rem;color:var(--muted)}
.ov-hold{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.hold-chip{font-size:.73rem;font-weight:720;padding:4px 10px;border-radius:99px;background:var(--panel-3);border:1px solid var(--line)}
.hold-chip.l{color:var(--green)} .hold-chip.s{color:var(--red)}
.ov-metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin-top:15px;padding-top:14px;border-top:1px dashed var(--line)}
.ov-metrics div span{display:block;font-size:.71rem;color:var(--muted)}
.ov-metrics div b{font-size:.9rem;font-weight:720}
.mini-ls{display:flex;height:7px;border-radius:99px;overflow:hidden;background:var(--red-soft);margin-top:14px}
.mini-ls i{background:var(--green);transition:width .9s cubic-bezier(.2,.9,.25,1)}

/* ---------- 12. 提醒时间线 ---------- */
.alert-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tl{position:relative;padding:6px 0 4px 8px}
.tl::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;
  background:repeating-linear-gradient(to bottom,var(--line-strong) 0 5px,transparent 5px 10px);border-radius:2px}
.tl-item{position:relative;display:flex;gap:14px;padding:11px 0;animation:rise .5s cubic-bezier(.2,.9,.3,1) both}
.tl-ic{width:24px;height:24px;flex:none;border-radius:8px;display:grid;place-items:center;font-size:.68rem;font-weight:900;
  z-index:1;margin-left:2px;box-shadow:0 0 0 4px var(--panel)}
.tl-ic.open{background:var(--green);color:#fff}
.tl-ic.close{background:var(--panel-3);color:var(--muted);box-shadow:0 0 0 4px var(--panel),0 0 0 5px var(--line)}
.tl-ic.add{background:var(--amber);color:var(--amber-on)}
.tl-ic.reduce{background:var(--red);color:#fff}
.tl-card{flex:1;border:1px solid var(--line);background:var(--panel-2);border-radius:var(--r-md);padding:12px 15px;min-width:0}
.tl-card .t1{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tl-card .t1 b{font-size:.91rem}
.tl-card time{color:var(--muted);font-size:.73rem}
.tl-card p{margin:5px 0 0;color:var(--ink-2);font-size:.82rem;line-height:1.6}

/* ---------- 13. 动态 ---------- */
.feed-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}
.msg-list{display:flex;flex-direction:column;gap:10px;max-height:640px;overflow:auto;padding:2px;
  overscroll-behavior:contain;scrollbar-gutter:stable}
.msg{border:1px solid var(--line);background:var(--panel-2);border-left:3px solid var(--amber);
  border-radius:var(--r-md);padding:13px 16px;animation:rise .5s cubic-bezier(.2,.9,.3,1) both}
.msg .meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.msg .sender{font-weight:780;font-size:.84rem;color:var(--amber-strong)}
.msg time{color:var(--muted);font-size:.73rem}
.msg .text{white-space:pre-wrap;word-break:break-word;font-size:.87rem;color:var(--ink-2);line-height:1.7}
.msg img{display:block;max-width:100%;border-radius:var(--r-sm);margin-top:10px;border:1px solid var(--line);background:var(--panel-3)}
.msg a{color:var(--amber-strong);font-weight:680;font-size:.82rem;text-decoration:none}
.msg a:hover{text-decoration:underline}

/* ---------- 14. 策略列表 ---------- */
.strat-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}
.strat-tab{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);
  padding:8px 15px;border-radius:10px;font-size:.83rem;font-weight:700;cursor:pointer;transition:all .2s}
.strat-tab:hover{border-color:var(--line-strong);color:var(--ink)}
.strat-tab.active{background:var(--amber);color:var(--amber-on);border-color:transparent;box-shadow:0 6px 16px -9px var(--amber)}
.strat-source{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2);padding:17px 19px;margin-bottom:14px}
.strat-source:last-child{margin-bottom:0}
.strat-source-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.strat-source-head h4{margin:0;font-size:1rem;font-weight:820}
.strat-market{font-size:.77rem;color:var(--muted);margin-top:3px}
.strat-pos{margin-top:12px}
.strat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.strat-card{border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;background:var(--panel);cursor:pointer;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.strat-card:hover{transform:translateY(-2px);border-color:var(--amber);box-shadow:var(--shadow-lg)}
.strat-ret{margin-top:10px;font-size:1.38rem;font-weight:820;font-family:var(--mono);font-variant-numeric:tabular-nums}
.strat-ret.pos{color:var(--rise)}
.strat-ret.neg{color:var(--fall)}
.strat-ret span{display:block;font-size:.73rem;font-weight:700;color:var(--muted);margin-top:3px;font-family:var(--font)}
.strat-meta{margin-top:9px;font-size:.79rem;color:var(--muted)}

/* ---------- 15. ETF 资金流 ---------- */
.etf-head{display:flex;flex-wrap:wrap;gap:8px 36px;padding:2px 0 17px;border-bottom:1px solid var(--line)}
.etf-title{font-size:1.3rem;font-weight:820;letter-spacing:-.02em}
.etf-label{font-size:.76rem;color:var(--muted);margin-bottom:3px}
.etf-sub{font-size:.76rem;color:var(--muted);margin-top:3px}
.etf-spot-wrap{align-self:flex-end}
.etf-spot{font-size:1rem;font-weight:750;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.etf-spot .status-pill{padding:3px 9px;font-size:.68rem}
.etf-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:17px}
.etf-card{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--line-strong);
  border-radius:var(--r-md);padding:17px 18px}
.etf-card.acc-up{border-left-color:var(--rise)}
.etf-card.acc-down{border-left-color:var(--fall)}
.etf-big{font-size:1.95rem;font-weight:850;letter-spacing:-.02em;line-height:1.25}
.etf-tools{display:flex;flex-wrap:wrap;gap:8px;margin:17px 0 4px;align-items:center}
.etf-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.etf-seg button{appearance:none;background:transparent;border:0;color:var(--muted);padding:8px 14px;font:inherit;
  font-size:.83rem;font-weight:680;cursor:pointer;transition:background .2s,color .2s}
.etf-seg button + button{border-left:1px solid var(--line)}
.etf-seg button:hover{color:var(--ink);background:var(--panel-3)}
.etf-seg button.on{background:var(--amber);color:var(--amber-on)}
.etf-seg.full{width:100%;margin:12px 0 4px}
.etf-seg.full button{flex:1;justify-content:center}
.etf-acc-head{display:flex;gap:8px;align-items:stretch;margin:17px 0 4px}
.etf-acc-toggle{flex:1;display:flex;justify-content:space-between;align-items:center;background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--r-md);padding:12px 15px;font:inherit;font-size:.89rem;
  font-weight:750;color:var(--ink);cursor:pointer;text-align:left;transition:border-color .2s}
.etf-acc-toggle:hover{border-color:var(--amber)}
.etf-acc-toggle .chev{color:var(--muted);transition:transform .25s;display:inline-block}
.etf-acc-toggle.open .chev{transform:rotate(180deg)}
.etf-acc-refresh{flex-shrink:0;width:46px;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--panel-2);color:var(--muted);font-size:1.1rem;cursor:pointer;transition:color .2s,border-color .2s}
.etf-acc-refresh:hover{color:var(--amber);border-color:var(--amber)}
.etf-snap{margin:16px 0 0;color:var(--muted);font-size:.79rem;line-height:1.65}
.etf-detail{margin-top:6px}
.etf-detail h4{margin:18px 0 9px;font-size:.93rem;font-weight:780}
.etf-table{width:100%;border-collapse:collapse;font-size:.85rem}
.etf-table th,.etf-table td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right}
.etf-table th{color:var(--muted);font-weight:700;font-size:.75rem;background:var(--panel-3)}
.etf-table th:first-child,.etf-table td:first-child{text-align:left}
.etf-table tbody tr:nth-child(even){background:var(--table-stripe)}
.etf-table tbody tr:hover{background:var(--amber-soft)}
.etf-table tr.zero td{opacity:.45}
.etf-table tr.etf-total td{font-weight:850;border-top:2px solid var(--line-strong);background:var(--panel-3)}

/* ---------- 16. 系统通知设置 ---------- */
.btn-notify{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;padding:0 13px;border-radius:99px;border:1px solid var(--line-strong);
  background:var(--panel);color:var(--muted);font-size:.74rem;font-weight:720;
  cursor:pointer;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:border-color .15s,color .15s,background .15s,box-shadow .15s,transform .12s}
.btn-notify:hover{border-color:var(--amber);color:var(--amber-strong)}
.btn-notify:active{transform:scale(.96)}
.btn-notify.is-on{border-color:color-mix(in srgb,var(--green) 55%,transparent);color:var(--green);background:var(--green-soft);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 22%,transparent)}
.btn-notify.is-on:hover{color:var(--green)}
.btn-notify .notify-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--green);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 24%,transparent);animation:notify-pulse 1.6s ease-in-out infinite}
@keyframes notify-pulse{
  0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)}
  50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 10%,transparent)}
}
.notify-settings{margin:0 0 16px;padding:15px 17px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--panel-2)}
.notify-settings-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.notify-settings-head strong{font-size:.89rem}
.notify-perm{font-size:.72rem;color:var(--muted)}
.notify-hint{margin:0 0 10px;font-size:.72rem;color:var(--muted);line-height:1.5}
.notify-section-title{margin:11px 0 7px;font-size:.74rem;color:var(--muted);font-weight:750}
.notify-trader-list{display:flex;flex-wrap:wrap;gap:8px 14px}
.notify-trader-row{display:inline-flex;align-items:center;gap:6px;font-size:.81rem;cursor:pointer;user-select:none}
.notify-trader-row input{accent-color:var(--amber);width:15px;height:15px}

/* ---------- 17. 页脚 / FAB / Toast ---------- */
footer{margin:36px 0 42px;color:var(--muted);font-size:.79rem;padding-bottom:env(safe-area-inset-bottom,0px)}
.foot-line{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
.fab{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:50;width:54px;height:54px;
  border-radius:17px;border:0;cursor:pointer;background:var(--amber);color:var(--amber-on);display:grid;place-items:center;
  box-shadow:0 16px 32px -10px var(--amber);animation:fabIn .45s cubic-bezier(.3,1.5,.5,1) both;transition:transform .2s}
.fab:hover{transform:translateY(-3px) rotate(-5deg)}
.fab .n{position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;padding:0 5px;border-radius:99px;
  background:var(--red);color:#fff;font-size:.72rem;font-weight:850;display:grid;place-items:center;
  border:2px solid var(--bg)}
@keyframes fabIn{from{transform:scale(0) translateY(16px)}to{transform:scale(1) translateY(0)}}
.toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);
  z-index:60;background:var(--ink);color:var(--bg);padding:11px 19px;border-radius:12px;font-size:.84rem;font-weight:680;
  opacity:0;pointer-events:none;transition:all .35s cubic-bezier(.2,.9,.3,1);box-shadow:var(--shadow-lg);
  max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 18. 刷新防抖（业务依赖，勿删） ---------- */
body.settled .pos-card,
body.settled .ov-card,
body.settled .tl-item,
body.settled .msg,
body.settled .hist-item,
body.settled .chip,
body.settled .view.active{animation:none!important}
body.settled .pos-card,
body.settled .ov-card{opacity:1;transform:none}
.msg-list,.hist-list{scrollbar-gutter:stable}
.trader-chips{min-height:44px}
.ov-grid{min-height:120px}

/* 主题切换瞬间只对颜色做短过渡，不改变布局 */
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after{
  transition-property:background-color,border-color,color,box-shadow,fill,stroke!important;
  transition-duration:.26s!important;
  transition-timing-function:ease!important;
}

/* ---------- 19. 响应式 ---------- */
@media (max-width:900px){
  .hero-clock{display:none}
}
@media (max-width:640px){
  .panel-head-actions{width:100%;justify-content:flex-start}
  .trader-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:10px}
  .trader-chips::-webkit-scrollbar{display:none}
  .trader-chips .chip{flex:none}
  .btn-notify{min-height:38px}
  .notify-trader-row{padding:6px 4px}
  .notify-trader-row input{width:18px;height:18px}
  .msg-list{max-height:min(640px,66dvh)}
  .brand-showcase,.brand-video-wrap{width:92px;height:92px}
  .brand-video-wrap{border-radius:20px}
  .hero-brand{gap:14px}
  .hero-top{padding:17px 18px}
}
@media (max-width:560px){
  .wrap{width:calc(100% - 24px)}
  .pos-grid,.ov-grid,.etf-grid{grid-template-columns:1fr}
  .panel-head{padding:17px 16px 0}.panel-body{padding:15px 16px 20px}
  /* 顶栏压成一行 */
  .logo{width:36px;height:36px;border-radius:11px}
  .brand{gap:8px}
  .brand p{display:none}
  .brand h1{font-size:1rem;white-space:nowrap}
  .ring-box{display:none}
  .topbar-in{gap:8px;padding:9px 0;flex-wrap:nowrap}
  .top-actions{margin-left:auto;flex-wrap:nowrap;gap:6px}
  .live-pill{min-width:0;padding:5px 8px;gap:5px;font-size:.7rem}
  #live-text{min-width:0}
  .top-actions .btn{padding:7px 10px;font-size:.76rem;min-height:36px}
  .theme-toggle{width:34px;height:34px;border-radius:10px}
  .theme-toggle svg{width:17px;height:17px}
  /* 6 个标签尽量一屏排下 */
  .seg{width:100%;gap:0;padding:4px 0 8px;justify-content:space-between}
  .seg button{flex:0 0 auto;justify-content:center;padding:8px 4px;font-size:.73rem;gap:3px;min-height:38px}
  .badge-n{min-width:17px;height:17px;padding:0 4px;font-size:.64rem}
  .pos-card{padding:16px}
  .pos-card .sym{font-size:1.16rem}
  .ov-card{padding:17px}
  .sum-chip{flex:1 1 42%}
  .hero{padding:16px 0 4px}
  .hero-top{border-radius:18px}
  .etf-big{font-size:1.55rem}
  .etf-card{padding:15px}
}
@media (max-width:420px){
  .brand-showcase,.brand-video-wrap{width:74px;height:74px}
  .brand-video-wrap{border-radius:16px}
  .hero-brand{gap:11px}
  .hero h2{font-size:1.3rem}
  .hero-sub{font-size:.78rem}
  .live-pill{font-size:.68rem;padding:5px 6px}
  .seg button{font-size:.7rem;padding:8px 2px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .btn-notify .notify-dot,.brand-showcase::before,.brand-spark{animation:none}
}