/* ---------- themes ---------- */
:root, [data-theme="bn-dark"] {
  color-scheme: dark;
  --bg: #0b0e11; --panel: #181a20; --panel2: #1e2329; --panel3: #2b3139;
  --line: #2b3139; --line2: #363c45; --line-soft: rgba(43, 49, 57, .6);
  --text: #eaecef; --text2: #b7bdc6; --muted: #848e9c; --muted2: #5e6673;
  --yellow: #f0b90b; --yellow-bg: rgba(240, 185, 11, .12);
  --green: #2ebd85; --red: #f6465d; --green-bg: rgba(46, 189, 133, .12); --red-bg: rgba(246, 70, 93, .12);
  --accent: #f0b90b; --accent-ink: #f0b90b; --accent-bg: rgba(240, 185, 11, .12); --accent-line: rgba(240, 185, 11, .45);
  --chart-line: #f0b90b; --pri: #fcd535; --pri-text: #202630; --pri-hover: #f0c600; --focus: #f0b90b;
  --btn-hover: #363c45; --scroll: #2f353d; --scroll-h: #474d57; --tip-bg: #2b3139; --tip-line: #3a414b;
  --banner-text: #ff8a98; --banner-cd: #ffffff; --shadow: rgba(0, 0, 0, .45);
  --title-bar: #181a20;
}
[data-theme="bn-light"] {
  color-scheme: light;
  --bg: #f5f5f5; --panel: #ffffff; --panel2: #f5f5f5; --panel3: #eaecef;
  --line: #eaecef; --line2: #d8dce1; --line-soft: #f0f1f2;
  --text: #1e2329; --text2: #474d57; --muted: #707a8a; --muted2: #a0a7b2;
  --yellow: #c99400; --yellow-bg: rgba(240, 185, 11, .14);
  --green: #03a66d; --red: #cf304a; --green-bg: rgba(3, 166, 109, .1); --red-bg: rgba(207, 48, 74, .08);
  --accent: #fcd535; --accent-ink: #c99400; --accent-bg: rgba(252, 213, 53, .2); --accent-line: rgba(201, 148, 0, .45);
  --chart-line: #f0b90b; --pri: #fcd535; --pri-text: #202630; --pri-hover: #f0c600; --focus: #f0b90b;
  --btn-hover: #dde0e4; --scroll: #d8dce1; --scroll-h: #b7bdc6; --tip-bg: #ffffff; --tip-line: #e6e8ea;
  --banner-text: #cf304a; --banner-cd: #1e2329; --shadow: rgba(0, 0, 0, .12);
  --title-bar: #ffffff;
}
[data-theme="okx-dark"] {
  color-scheme: dark;
  --bg: #000000; --panel: #121212; --panel2: #1c1c1c; --panel3: #2a2a2a;
  --line: #222222; --line2: #333333; --line-soft: #1c1c1c;
  --text: #ffffff; --text2: #c8c8c8; --muted: #8c8c8c; --muted2: #5c5c5c;
  --yellow: #f7a600; --yellow-bg: rgba(247, 166, 0, .12);
  --green: #25a750; --red: #ca3f64; --green-bg: rgba(37, 167, 80, .14); --red-bg: rgba(202, 63, 100, .14);
  --accent: #ffffff; --accent-ink: #ffffff; --accent-bg: rgba(255, 255, 255, .09); --accent-line: rgba(255, 255, 255, .4);
  --chart-line: #e6e6e6; --pri: #ffffff; --pri-text: #000000; --pri-hover: #dcdcdc; --focus: #ffffff;
  --btn-hover: #383838; --scroll: #2a2a2a; --scroll-h: #444444; --tip-bg: #1c1c1c; --tip-line: #333333;
  --banner-text: #ff7a99; --banner-cd: #ffffff; --shadow: rgba(0, 0, 0, .6);
  --title-bar: #121212;
}
[data-theme="okx-light"] {
  color-scheme: light;
  --bg: #f7f7f7; --panel: #ffffff; --panel2: #f5f5f5; --panel3: #ebebeb;
  --line: #ebebeb; --line2: #dcdcdc; --line-soft: #f2f2f2;
  --text: #000000; --text2: #333333; --muted: #8c8c8c; --muted2: #b3b3b3;
  --yellow: #d48806; --yellow-bg: rgba(247, 166, 0, .12);
  --green: #1f9e55; --red: #d9304e; --green-bg: rgba(31, 158, 85, .1); --red-bg: rgba(217, 48, 78, .08);
  --accent: #000000; --accent-ink: #000000; --accent-bg: rgba(0, 0, 0, .06); --accent-line: rgba(0, 0, 0, .4);
  --chart-line: #121212; --pri: #000000; --pri-text: #ffffff; --pri-hover: #333333; --focus: #000000;
  --btn-hover: #dedede; --scroll: #dcdcdc; --scroll-h: #b3b3b3; --tip-bg: #ffffff; --tip-line: #e6e6e6;
  --banner-text: #d9304e; --banner-cd: #000000; --shadow: rgba(0, 0, 0, .12);
  --title-bar: #ffffff;
}
:root {
  --up: var(--green); --down: var(--red); --up-bg: var(--green-bg); --down-bg: var(--red-bg);
  --blue: #3b82f6; --radius: 8px;
  --font: "IBM Plex Sans", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}
[data-theme^="okx"] { --radius: 12px; }
[data-updown="red"] { --up: var(--red); --down: var(--green); --up-bg: var(--red-bg); --down-bg: var(--green-bg); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 13px/1.5 var(--font);
  -webkit-font-smoothing: antialiased; overflow: hidden; user-select: none;
}
input, textarea, select, button { font: inherit; color: inherit; }
textarea, input, [contenteditable] { user-select: text; }
a { color: var(--accent-ink); text-decoration: none; cursor: pointer; }
a:hover { opacity: .8; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--muted); }
.muted2 { color: var(--muted2); }
.yellow { color: var(--accent-ink); }
.amber { color: var(--yellow); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.b { font-weight: 600; }
.right { text-align: right; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.sp { justify-content: space-between; }
.hidden { display: none !important; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-h); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- layout ---------- */
#app { display: grid; grid-template-columns: 200px 1fr; height: 100vh; }
#side { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.brand { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 18px; font-size: 16px; font-weight: 700; letter-spacing: .5px; }
.brand .logo { width: 26px; height: 26px; border-radius: 6px; background: var(--accent); display: grid; place-items: center; }
.brand .logo svg { width: 16px; height: 16px; }
.nav { padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: auto; }
.nav a { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 6px; color: var(--text2); font-weight: 500; }
.nav a svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; }
.nav a:hover { background: var(--panel2); color: var(--text); }
.nav a.on { background: var(--panel3); color: var(--accent-ink); }
.nav .badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; display: grid; place-items: center; }
.nav .sep { height: 1px; background: var(--line); margin: 8px 6px; }
.side-foot { padding: 12px 18px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted2); }

#main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
#top { height: 56px; flex: none; display: flex; align-items: center; gap: 20px; padding: 0 22px; border-bottom: 1px solid var(--line); background: var(--panel); }
#top h1 { font-size: 18px; margin: 0; font-weight: 600; }
.top-stat { display: flex; flex-direction: column; line-height: 1.25; }
.top-stat .k { font-size: 11px; color: var(--muted); }
.top-stat .v { font-size: 14px; font-weight: 600; }
.sync-pill { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted2); display: inline-block; }
.dot.ok { background: #2ebd85; }
.dot.err { background: var(--red); }
.dot.warn { background: var(--yellow); }
.dot.spin { background: var(--yellow); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
#content { flex: 1; overflow: auto; padding: 18px 22px 40px; }
#banner { flex: none; }

/* ---------- components ---------- */
.card { background: var(--panel); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.card.flat { padding: 0; }
.card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-h h3 { margin: 0; font-size: 15px; font-weight: 600; }
.card-h .sub { color: var(--muted); font-size: 12px; }
.card-h .act { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }
.g-main { grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); }
.mb { margin-bottom: 14px; }
.mt { margin-top: 14px; }

.kpi .k { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.kpi .v { font-size: 22px; font-weight: 600; margin: 4px 0 2px; letter-spacing: .2px; }
.kpi .s { font-size: 12px; color: var(--muted); }
.kpi .s b { color: var(--text2); font-weight: 500; }

.bar { height: 6px; background: var(--panel3); border-radius: 3px; overflow: hidden; position: relative; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 3px; }
.bar.g > i { background: var(--up); }
.bar.r > i { background: var(--down); }

.btn { height: 32px; padding: 0 14px; border-radius: 6px; border: 0; background: var(--panel3); color: var(--text); cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn:hover { background: var(--btn-hover); }
.btn.pri { background: var(--pri); color: var(--pri-text); }
.btn.pri:hover { background: var(--pri-hover); }
.btn.ghost { background: transparent; border: 1px solid var(--line2); }
.btn.ghost:hover { border-color: var(--muted); }
.btn.sm { height: 26px; padding: 0 10px; font-size: 12px; }
.btn.danger { background: var(--red-bg); color: var(--red); }
.btn.buy { background: var(--up); color: #fff; }
.btn.sell { background: var(--down); color: #fff; }
.btn:disabled { opacity: .5; cursor: default; }
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.seg { display: inline-flex; background: var(--panel2); border-radius: 6px; padding: 2px; gap: 2px; }
.seg button { height: 26px; padding: 0 12px; border: 0; background: transparent; color: var(--muted); border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 500; }
.seg button.on { background: var(--panel3); color: var(--text); }
.seg.dir button.on.l { background: var(--up); color: #fff; }
.seg.dir button.on.s { background: var(--down); color: #fff; }

.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs a { color: var(--muted); padding: 10px 0; font-weight: 500; position: relative; }
.tabs a.on { color: var(--text); }
.tabs a.on::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -1px; width: 18px; height: 3px; border-radius: 2px; background: var(--accent); }

.inp, select.inp, textarea.inp {
  height: 34px; background: var(--panel2); border: 1px solid transparent; border-radius: 6px; padding: 0 10px; outline: none; width: 100%; color: var(--text);
}
.inp:hover { border-color: var(--line2); }
.inp:focus { border-color: var(--focus); }
textarea.inp { height: auto; min-height: 76px; padding: 8px 10px; resize: vertical; line-height: 1.6; }
select.inp { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 26px; }
.inp-wrap { position: relative; display: flex; align-items: center; background: var(--panel2); border: 1px solid transparent; border-radius: 6px; height: 38px; }
.inp-wrap:hover { border-color: var(--line2); }
.inp-wrap:focus-within { border-color: var(--focus); }
.inp-wrap .pre { color: var(--muted); padding-left: 12px; white-space: nowrap; font-size: 12px; }
.inp-wrap input { flex: 1; min-width: 0; border: 0; background: transparent; height: 100%; padding: 0 10px; outline: none; text-align: right; }
.inp-wrap .suf { color: var(--text2); padding-right: 12px; font-size: 12px; white-space: nowrap; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .lbl { color: var(--muted); font-size: 12px; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 6px 0; }
.check input { display: none; }
.check .box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--muted2); flex: none; margin-top: 2px; display: grid; place-items: center; }
.check input:checked + .box { background: var(--pri); border-color: var(--pri); }
.check input:checked + .box::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--pri-text); border-bottom: 2px solid var(--pri-text); transform: rotate(-45deg) translate(1px, -1px); }
.check input:checked ~ .t { color: var(--muted); }
.switch { position: relative; display: inline-block; vertical-align: middle; width: 34px; height: 18px; flex: none; cursor: pointer; }
.switch input { display: none; }
.switch i { position: absolute; inset: 0; border-radius: 9px; background: var(--panel3); transition: .15s; }
.switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .15s; }
.switch input:checked + i { background: var(--pri); }
.switch input:checked + i::after { background: var(--pri-text); }
[data-theme^="bn"] .switch input:checked + i::after { background: #fff; }
.switch input:checked + i::after { left: 18px; }

.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--panel2); color: var(--text2); cursor: pointer; font-size: 12px; border: 1px solid transparent; }
.chip:hover { border-color: var(--line2); }
.chip.on { background: var(--accent-bg); color: var(--accent-ink); border-color: var(--accent-line); }
.chip.on.bad { background: var(--red-bg); color: var(--red); border-color: var(--red); }

.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 500; background: var(--panel3); color: var(--text2); white-space: nowrap; }
.tag.l { background: var(--up-bg); color: var(--up); }
.tag.s { background: var(--down-bg); color: var(--down); }
.tag.y { background: var(--yellow-bg); color: var(--yellow); }
.tag.r { background: var(--red-bg); color: var(--red); }
.tag.g { background: var(--green-bg); color: var(--green); }
.ex { display: inline-flex; align-items: center; gap: 6px; }
.ex i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex: none; }
.ex i.binance { background: #f0b90b; }
.ex i.hyper { background: #50d2c1; }

/* tables */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; color: var(--muted); font-weight: 400; font-size: 12px; padding: 8px 10px; white-space: nowrap; position: sticky; top: 0; background: var(--panel); z-index: 1; }
.tbl td { padding: 10px; border-top: 1px solid var(--line-soft); white-space: nowrap; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--panel2); }
.tbl .r, .tbl th.r { text-align: right; }
.tbl td.wrap { white-space: normal; }
.scroll-y { overflow: auto; }
.empty { color: var(--muted2); text-align: center; padding: 36px 0; }

/* alerts */
.alert { display: flex; gap: 10px; padding: 10px 12px; border-radius: 6px; background: var(--panel2); margin-bottom: 8px; border-left: 3px solid var(--muted2); }
.alert.danger { background: var(--red-bg); border-color: var(--red); }
.alert.warn { background: var(--yellow-bg); border-color: var(--yellow); }
.alert.ok { background: var(--green-bg); border-color: var(--green); }
.alert .t { font-weight: 600; }
.alert .d { color: var(--text2); font-size: 12px; }
.banner { display: flex; align-items: center; gap: 14px; padding: 10px 22px; background: linear-gradient(90deg, rgba(246, 70, 93, .28), rgba(246, 70, 93, .1)); border-bottom: 1px solid rgba(246, 70, 93, .5); }
.banner .big { font-size: 15px; font-weight: 700; color: var(--banner-text); }
.banner .cd { font-size: 20px; font-weight: 700; color: var(--banner-cd); margin-left: auto; }

/* charts */
.chart { position: relative; width: 100%; }
.chart canvas { display: block; width: 100%; height: 100%; }
.tip { position: absolute; pointer-events: none; background: var(--tip-bg); border: 1px solid var(--tip-line); color: var(--text); border-radius: 6px; padding: 6px 10px; font-size: 12px; white-space: nowrap; z-index: 5; box-shadow: 0 4px 16px var(--shadow); }

/* modal */
.mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 50; display: grid; place-items: center; }
.modal { background: var(--panel); border-radius: 12px; width: min(1040px, 94vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px var(--shadow); }
.modal-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-h h3 { margin: 0; font-size: 16px; }
.modal-b { padding: 16px 20px; overflow: auto; }
.modal-f { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
.x { margin-left: auto; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.x:hover { background: var(--panel2); color: var(--text); }

.toast { position: fixed; right: 24px; bottom: 24px; background: var(--panel3); padding: 10px 16px; border-radius: 8px; z-index: 99; box-shadow: 0 6px 20px var(--shadow); border-left: 3px solid var(--accent); }

.stars { display: inline-flex; gap: 4px; }
.stars span { cursor: pointer; font-size: 18px; color: var(--muted2); line-height: 1; }
.stars span.on { color: var(--yellow); }
.mood { display: inline-flex; gap: 6px; }
.mood span { width: 30px; height: 30px; border-radius: 6px; background: var(--panel2); display: grid; place-items: center; cursor: pointer; font-size: 13px; color: var(--muted); border: 1px solid transparent; }
.mood span.on { border-color: var(--accent-line); color: var(--accent-ink); background: var(--accent-bg); }

.imgs { display: flex; gap: 10px; flex-wrap: wrap; }
.imgs .im { position: relative; width: 160px; height: 100px; border-radius: 6px; overflow: hidden; background: var(--panel2); cursor: zoom-in; }
.imgs .im img { width: 100%; height: 100%; object-fit: cover; }
.imgs .im .del { position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; cursor: pointer; font-size: 12px; }
.drop { width: 160px; height: 100px; border: 1px dashed var(--line2); border-radius: 6px; display: grid; place-items: center; color: var(--muted); font-size: 12px; text-align: center; cursor: pointer; padding: 8px; }
.drop:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.viewer { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .85); display: grid; place-items: center; cursor: zoom-out; }
.viewer img { max-width: 94vw; max-height: 94vh; }

.ladder { display: flex; flex-direction: column; gap: 6px; }
.ladder .st { display: grid; grid-template-columns: 90px 1fr 90px; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 6px; background: var(--panel2); }
.ladder .st.on { background: var(--accent-bg); outline: 1px solid var(--accent-line); }
.ladder .st.done { opacity: .55; }

.news-item { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.news-item:first-child { border-top: 0; }
.news-item .tm { color: var(--muted); font-size: 12px; }
.news-item.imp .txt { color: var(--red); }
.cal-day { color: var(--accent-ink); font-weight: 600; padding: 14px 0 6px; font-size: 13px; }
.cal-ev { display: grid; grid-template-columns: 50px 46px 1fr 70px 70px 70px; gap: 8px; align-items: center; padding: 8px 6px; border-radius: 6px; }
.cal-ev:hover { background: var(--panel2); }
.cal-ev.past { opacity: .5; }
.cal-ev.next { background: var(--accent-bg); }
.imp { display: inline-flex; gap: 2px; }
.imp i { width: 4px; height: 12px; border-radius: 1px; background: var(--panel3); }
.imp.High i { background: var(--red); }
.imp.Medium i:nth-child(-n+2) { background: var(--yellow); }
.imp.Low i:nth-child(1) { background: var(--muted); }

.legs td { padding: 6px 10px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12px; }
.kv .k { color: var(--muted); }
.kv .v { text-align: right; }
.calc-out .v { font-size: 20px; font-weight: 600; }
hr.l { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.set-sec { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); }
.set-sec:first-child { border-top: 0; padding-top: 4px; }
.set-sec h4 { margin: 0 0 4px; font-size: 14px; }
.set-sec .desc { color: var(--muted); font-size: 12px; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mini-tbl td { padding: 4px 6px 4px 0; border: 0; }
.quote-strip { color: var(--muted); font-size: 12px; font-style: italic; }
.col > .seg { align-self: flex-start; }

.brand .logo svg * { fill: var(--pri-text); stroke: var(--pri-text); }
.brand .logo svg path { fill: none; }
body, #side, #top, .card, .inp, .btn, .seg button { transition: background-color .15s, color .15s, border-color .15s; }
[data-theme$="light"] .card { box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
[data-theme$="light"] .mask { background: rgba(0, 0, 0, .35); }
[data-theme$="light"] .banner { background: linear-gradient(90deg, rgba(246, 70, 93, .16), rgba(246, 70, 93, .05)); }
.theme-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.theme-card { border-radius: 10px; border: 2px solid transparent; cursor: pointer; overflow: hidden; background: var(--panel2); }
.theme-card.on { border-color: var(--accent-line); }
.theme-card .pv { height: 92px; display: grid; grid-template-columns: 26% 1fr; }
.theme-card .pv .sb { padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; }
.theme-card .pv .sb i { height: 6px; border-radius: 3px; opacity: .8; }
.theme-card .pv .mn { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.theme-card .pv .mn .k { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.theme-card .pv .mn .k span { height: 20px; border-radius: 4px; }
.theme-card .pv .mn .ch { flex: 1; border-radius: 4px; position: relative; overflow: hidden; }
.theme-card .nm { padding: 8px 10px; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.icon-btn { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; color: var(--muted); border: 1px solid var(--line2); background: transparent; }
.icon-btn:hover { color: var(--text); border-color: var(--muted); }
.icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.draw-bar { gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.draw-bar .icon-btn { width: 30px; height: 30px; }
.draw-bar .icon-btn.on { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-bg); }
.draw-bar .sep { width: 1px; height: 20px; background: var(--line2); margin: 0 4px; }
.swatch { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line2); }
.swatch.on { border-color: var(--panel); box-shadow: 0 0 0 2px var(--accent-ink); }

/* market watch */
.mkt { display: grid; grid-template-columns: 340px 1fr 44px; gap: 12px; height: calc(100vh - 56px - 36px); min-height: 520px; }
.mkt-left { display: flex; flex-direction: column; min-height: 0; padding-top: 6px; }
.mkt-ltabs { display: flex; gap: 18px; padding: 8px 14px 10px; }
.mkt-ltabs a { color: var(--muted); font-weight: 600; }
.mkt-ltabs a.on { color: var(--text); }
.mkt-head, .mkt-row { display: grid; grid-template-columns: 1fr 96px 86px; gap: 6px; align-items: center; padding: 0 12px; }
.mkt-head { color: var(--muted); font-size: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.mkt-head span { cursor: pointer; }
.mkt-head .r, .mkt-row .r { text-align: right; }
.mkt-list { flex: 1; overflow: auto; min-height: 0; }
.mkt-row { grid-template-columns: 18px 1fr 96px 86px; height: 48px; cursor: pointer; }
.mkt-head { grid-template-columns: minmax(0, 1fr) 80px 104px; padding-left: 36px; }
.mkt-head > span:first-child { white-space: nowrap; overflow: hidden; }
.mkt-row:hover { background: var(--panel2); }
.mkt-row.on { background: var(--panel3); }
.mkt-row .nm { line-height: 1.25; overflow: hidden; white-space: nowrap; }
.mkt-row .chg { display: inline-block; min-width: 68px; text-align: center; padding: 4px 0; border-radius: 4px; color: #fff; font-weight: 600; font-size: 12px; }
.mkt-row .chg.up { background: var(--up); color: #fff; }
.mkt-row .chg.down { background: var(--down); color: #fff; }
.star { color: var(--muted2); cursor: pointer; font-size: 14px; }
.star.on { color: #f0b90b; }
.mkt-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: 10px; }
.mkt-tabs { display: flex; gap: 8px; overflow-x: auto; flex: none; }
.mkt-tab { background: var(--panel); border-radius: 8px; padding: 6px 12px; cursor: pointer; min-width: 150px; border: 1px solid transparent; }
.mkt-tab.on { border-color: var(--accent-line); background: var(--panel2); }
.mkt-tab .b { font-weight: 600; display: flex; align-items: center; gap: 4px; }
.mkt-tab .x { margin-left: auto; color: var(--muted2); font-size: 11px; padding: 0 2px; }
.mkt-tab .x:hover { color: var(--text); }
.mkt-main { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 10px 12px; }
.mkt-hdr { display: flex; align-items: center; gap: 16px; padding: 2px 4px 10px; flex-wrap: wrap; }
.mkt-tools { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.mkt-tools .sep { width: 1px; height: 18px; background: var(--line2); margin: 0 4px; }
.mkt-chart { flex: 1; min-height: 300px; }

/* copy-trading lead page (Binance style) */
.ld-head { display: flex; align-items: flex-start; gap: 22px; padding: 10px 6px 26px; }
.ld-ava { width: 78px; height: 78px; border-radius: 50%; background: var(--panel3); position: relative; overflow: hidden; flex: none; display: grid; place-items: center; font-size: 30px; font-weight: 700; color: var(--muted); }
.ld-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ld-name { font-size: 26px; font-weight: 700; }
.ld-stats { display: flex; gap: 26px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.ld-stats span { border-bottom: 1px dashed var(--line2); padding-bottom: 1px; }
.ld-stats b { color: var(--text); margin-left: 4px; font-size: 15px; }
.ld-btn { height: 44px; justify-content: center; font-size: 15px; font-weight: 600; background: var(--panel3); }
.ld-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); gap: 22px; }
.ld-card { border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px; background: var(--panel); min-width: 0; }
.ld-ch { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ld-ch h3 { margin: 0; font-size: 20px; }
.ld-sel { background: transparent; border: 0; color: var(--text); font-size: 14px; cursor: pointer; outline: none; }
.ld-sel option { background: var(--panel); }
.ld-kv { display: flex; justify-content: space-between; padding: 12px 0; font-size: 14px; }
.ld-kv .k { color: var(--muted); border-bottom: 1px dashed var(--line2); }
.ld-legend { display: grid; grid-template-columns: repeat(2, minmax(110px, auto)); gap: 18px 36px; font-size: 13px; }
.ld-legend i { display: block; width: 20px; height: 4px; border-radius: 2px; margin-bottom: 6px; }
.ld-tbl th { font-size: 13px; padding: 14px 10px; }
.ld-tbl td { padding: 16px 10px; vertical-align: middle; font-size: 14px; }
.ld-bar { width: 3px; height: 30px; border-radius: 2px; background: var(--up); }

/* month calendar */
.cal-top { display: flex; align-items: flex-end; justify-content: space-between; padding: 4px 2px 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 10px; }
.cal-clock { font-size: 44px; font-weight: 300; letter-spacing: 1px; line-height: 1.1; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; color: var(--muted); font-size: 12px; padding: 4px 0; }
.cal-cell { position: relative; border: 2px solid transparent; border-radius: 6px; padding: 6px 2px 8px; text-align: center; cursor: pointer; min-height: 58px; }
.cal-cell:hover { border-color: var(--line2); }
.cal-cell .n { font-size: 17px; font-weight: 500; }
.cal-cell .l { font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; }
.cal-cell .l.term { color: var(--accent-ink); }
.cal-cell .l.fest { color: #3b82f6; }
.cal-cell.other { opacity: .38; }
.cal-cell.today { background: var(--pri); color: var(--pri-text); }
.cal-cell.today .l { color: var(--pri-text); opacity: .8; }
.cal-cell.sel { border-color: var(--accent-line); }
.cal-cell .dots { position: absolute; left: 0; right: 0; bottom: 3px; display: flex; justify-content: center; gap: 3px; }
.cal-cell .dots i, .cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); display: inline-block; }
.cal-cell .dots i.h, .cal-dot.h { background: var(--red); }
.cal-cell .dots i.m, .cal-dot.m { background: #f7a600; }
.cal-sel-h { display: flex; align-items: center; gap: 10px; padding: 14px 4px 6px; border-top: 1px solid var(--line-soft); margin-top: 10px; }

/* alert dialog */
.al-form { display: grid; grid-template-columns: 90px 1fr; gap: 14px 18px; align-items: center; }
.al-form > label { color: var(--muted); }
.al-step { display: flex; flex-direction: column; border-left: 1px solid var(--line2); height: 100%; }
.al-step a { flex: 1; display: grid; place-items: center; padding: 0 10px; font-size: 9px; color: var(--muted); cursor: pointer; }
.al-step a:hover { color: var(--text); background: var(--panel3); }
.al-ch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.al-chip { position: relative; height: 44px; border-radius: 8px; border: 1.5px solid var(--line2); display: grid; place-items: center; cursor: pointer; font-weight: 500; background: var(--panel2); }
.al-chip small { position: absolute; right: 8px; top: 4px; font-size: 10px; color: var(--muted2); }
.al-chip.on { border-color: var(--text); background: var(--panel); }
.al-chip.on::after { content: "✓"; position: absolute; right: -1px; top: -1px; width: 18px; height: 18px; background: var(--text); color: var(--panel); font-size: 11px; display: grid; place-items: center; border-radius: 0 7px 0 6px; }
.al-chip.off { opacity: .55; }

.badge-dot { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; display: grid; place-items: center; }
.ld-new td { background: var(--accent-bg); }
.tbl td { transition: background 1.2s; }
/* cooldown quote copy */
.qr-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 14px; }
.qr-steps i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; background: var(--panel3); color: var(--text2); }
.qr-steps i.on { background: var(--accent); color: #1e2329; font-weight: 700; }
.qr-steps i.done { background: var(--green); color: #fff; }
.qr-steps b { width: 40px; height: 2px; background: var(--line); }
.qr-card { background: var(--panel2); border-left: 3px solid var(--accent); border-radius: 8px; padding: 20px 22px; font-size: 19px; line-height: 1.7; font-weight: 600; user-select: none; -webkit-user-select: none; }
.qr-by { font-size: 13px; color: var(--muted); font-weight: 400; text-align: right; margin-top: 6px; }
.qr-read { margin: 12px 0 8px; display: flex; align-items: center; gap: 10px; min-height: 20px; }
.qr-read .bar { flex: 1; }
.qr-inp { min-height: 80px; font-size: 16px; }
.qr-inp.ok { border-color: var(--green); }
.ph-tbl td { padding-top: 7px; padding-bottom: 7px; }
.ph-side { width: 3px; height: 30px; border-radius: 2px; background: var(--up); flex: none; }
.ph-side.s { background: var(--down); }
/* daily plan */
.pl-item { display: flex; gap: 14px; padding: 14px 4px; border-top: 1px solid var(--line); }
.pl-item:first-of-type { border-top: 0; }
.pl-main { flex: 1; min-width: 0; }
.pl-act { display: flex; flex-direction: column; gap: 6px; font-size: 12px; text-align: right; }
.pl-item.cancel, .pl-item.expired { opacity: .55; }
.pl-res { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: var(--panel2); font-size: 12px; }
.pl-item.win .pl-res { box-shadow: inset 3px 0 0 var(--up); }
.pl-item.loss .pl-res { box-shadow: inset 3px 0 0 var(--down); }
.pl-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.pl-row:first-of-type { border-top: 0; }
.pl-row[data-trade] { cursor: pointer; }
.tag.b { background: rgba(59,130,246,.14); color: #3b82f6; }
/* chart: left drawing toolbar, property bar, context menu */
.kl-wrap { display: flex; gap: 0; min-height: 0; }
.kl-wrap > .kl-host { flex: 1; min-width: 0; }
.kl-side { width: 44px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border-right: 1px solid var(--line); margin-right: 6px; overflow-y: auto; scrollbar-width: none; }
.kl-side > i { width: 26px; height: 1px; background: var(--line2); margin: 5px 0; flex: none; }
.kl-b { position: relative; width: 36px; height: 34px; border-radius: 6px; display: grid; place-items: center; color: var(--text2); cursor: pointer; flex: none; }
.kl-b svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kl-b:hover { background: var(--panel3); color: var(--text); }
.kl-b.on { color: var(--accent-ink); background: var(--accent-bg); }
.kl-b .more { position: absolute; right: 0; bottom: 1px; width: 10px; height: 14px; font-size: 11px; line-height: 14px; text-align: center; color: var(--muted); opacity: 0; border-radius: 3px; }
.kl-b:hover .more { opacity: 1; }
.kl-b .more:hover { background: var(--line2); color: var(--text); }
.kl-prop { position: absolute; top: 54px; left: 50%; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 6px 20px var(--shadow); }
.kl-prop .sw { width: 16px; height: 16px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 1px var(--line2); }
.kl-prop .sw.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent-ink); }
.kl-prop i { width: 1px; height: 18px; background: var(--line2); }
.kl-prop .lw { width: 26px; height: 22px; display: grid; place-items: center; border-radius: 4px; cursor: pointer; }
.kl-prop .lw b { display: block; width: 16px; background: var(--text2); border-radius: 2px; }
.kl-prop .lw.on { background: var(--accent-bg); }
.kl-prop button { height: 24px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); font-size: 12px; cursor: pointer; white-space: nowrap; }
.kl-prop button:hover { border-color: var(--accent-line); }
.ctx-menu { position: fixed; z-index: 1000; min-width: 200px; padding: 5px; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 10px 30px var(--shadow); font-size: 13px; }
.ctx-menu a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 5px; color: var(--text); cursor: pointer; white-space: nowrap; }
.ctx-menu a:hover { background: var(--panel3); }
.ctx-menu a.danger { color: var(--red); }
.ctx-menu a.dis { opacity: .5; cursor: default; background: none; }
.ctx-menu .ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ctx-menu kbd { font: 11px/1 inherit; color: var(--muted); }
.ctx-menu > i { display: block; height: 1px; margin: 4px 6px; background: var(--line); }

.mkt.with-side { grid-template-columns: 320px 1fr 270px 44px; }
.mkt-chart { min-height: 0 !important; overflow: hidden; }
.mkt-chart .kl-host { position: relative; min-height: 0; }
.mkt-chart .kl-host > .chart { position: absolute; inset: 0; height: auto !important; }
.mkt-head a { color: var(--muted); cursor: pointer; }
.mkt-head a:hover { color: var(--text); }
.mkt-head a.dd { padding: 0 3px; border-radius: 3px; }
.mkt-head a.dd.on { color: var(--accent-ink); }
.mkt-chart { display: flex; }
.mkt-pop { position: fixed; z-index: 900; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 12px 34px var(--shadow); padding: 8px; }
.mkt-pop.list a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--text); cursor: pointer; }
.mkt-pop.list a:hover, .mkt-pop.list a.on { background: var(--panel3); }
.mkt-pop .vp { display: flex; gap: 8px; }
.mkt-pop .vp-l { width: 110px; border-right: 1px solid var(--line); padding-right: 8px; }
.mkt-pop .vp-l a { display: block; padding: 9px 10px; border-radius: 6px; color: var(--text); cursor: pointer; }
.mkt-pop .vp-l a.on, .mkt-pop .vp-l a:hover { background: var(--panel3); }
.mkt-pop .vp-r { flex: 1; padding: 6px 8px; }
.mkt-pop .vp-o { display: block; padding: 8px 6px; border-radius: 6px; color: var(--text); cursor: pointer; font-size: 14px; }
.mkt-pop .vp-o:hover, .mkt-pop .vp-o.on { background: var(--panel3); }
.mkt-sidep { display: flex; flex-direction: column; min-height: 0; padding: 0; }
.sp-h { display: flex; align-items: center; gap: 10px; padding: 12px; }
.sp-h b { flex: 1; }
.sp-list { flex: 1; overflow: auto; min-height: 0; }
.sp-it { padding: 9px 12px; border-top: 1px solid var(--line-soft); cursor: pointer; }
.sp-it:hover { background: var(--panel2); }
.sp-it.off { opacity: .55; }
.sp-it .sp-act { display: none; gap: 10px; font-size: 12px; }
.sp-it:hover .sp-act { display: flex; }
.sp-it .chg { display: inline-block; text-align: center; padding: 2px 0; border-radius: 4px; color: #fff; font-weight: 600; font-size: 12px; }
.sp-it .chg.up { background: var(--up); } .sp-it .chg.down { background: var(--down); }
.sp-day { padding: 10px 12px 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.mkt-rail { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.mkt-rail a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border-radius: 8px; color: var(--muted); cursor: pointer; font-size: 11px; }
.mkt-rail a:hover { background: var(--panel); color: var(--text); }
.mkt-rail a.on { background: var(--panel); color: var(--accent-ink); }
.mkt-rail svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mkt-rail .badge { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; display: grid; place-items: center; font-style: normal; }
.mkt-pop .vp-l { flex: none; }
.mkt-pop .vp-r { min-width: 0; }
.mkt-pop .vp-r .inp-wrap { flex: 1; min-width: 0; width: auto; }
.mkt-pop .vp-r .row.sp { justify-content: space-between; }
.mkt-head > span { white-space: nowrap; }
/* training */
.tr-hero { display: grid; grid-template-columns: minmax(280px, 1.3fr) 2fr auto; gap: 28px; align-items: center; }
.tr-h b { font-size: 40px; font-weight: 700; color: var(--accent-ink); }
.tr-h span { color: var(--muted); font-size: 15px; }
.tr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tr-kpis .k { font-size: 12px; color: var(--muted); }
.tr-kpis .v { font-size: 20px; font-weight: 600; margin-top: 4px; }
.tr-kpis small { font-size: 12px; color: var(--muted); font-weight: 400; }
.tr-heat { display: flex; gap: 3px; }
.tr-heat > div { display: flex; flex-direction: column; gap: 3px; }
.tr-heat i { width: 11px; height: 11px; border-radius: 2px; background: var(--panel3); }
.tr-heat i.l1 { background: rgba(240, 185, 11, .3); } .tr-heat i.l2 { background: rgba(240, 185, 11, .55); } .tr-heat i.l3 { background: rgba(240, 185, 11, .8); } .tr-heat i.l4 { background: #f0b90b; }
.trs { display: grid; grid-template-columns: 1fr 330px; gap: 12px; height: calc(100vh - 56px - 36px); min-height: 560px; }
.trs-main { display: flex; flex-direction: column; min-height: 0; padding: 10px 12px; }
.trs-bar { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.trs-bar .sep { width: 1px; height: 18px; background: var(--line2); }
.trs-chart { flex: 1; min-height: 0; overflow: hidden; display: flex; }
.trs-chart .kl-host, .mkt-chart .kl-host { position: relative; min-height: 0; }
.trs-chart .kl-host > .chart { position: absolute; inset: 0; height: auto !important; }
.trs-right { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; }
.trs-right .card { padding: 14px; }
.trs-eq { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.trs-eq span:first-child { font-size: 24px; font-weight: 700; }
.trs-eq small { color: var(--muted); }
.trs-pos { margin-top: 10px; padding: 10px; border-radius: 8px; background: var(--panel2); box-shadow: inset 3px 0 0 var(--up); }
.trs-pos.s { box-shadow: inset 3px 0 0 var(--down); }
.trs-buy, .trs-sell { flex: 1; height: 40px; font-weight: 700; color: #fff !important; border: 0 !important; }
.trs-buy { background: var(--up) !important; } .trs-sell { background: var(--down) !important; }
.trs-notes { flex: 1; min-height: 220px; display: flex; flex-direction: column; }
.trs-nlist { flex: 1; overflow-y: auto; margin-top: 8px; min-height: 80px; }
.trs-n { padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; white-space: pre-wrap; }
.trs-n.open { color: var(--accent-ink); } .trs-n.auto { color: var(--muted); }
.trr-notes { max-height: 420px; overflow-y: auto; }
.mc-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.mc-stats .k { display: block; font-size: 11px; color: var(--muted); }
.mc-stats b { font-size: 16px; }
/* replay (TradingView-style) */
.rp { display: grid; grid-template-rows: 42px minmax(0, 1fr) 40px var(--rpb-h, 210px); height: calc(100vh - 56px - 36px); min-height: 600px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rp.no-bottom { grid-template-rows: 42px minmax(0, 1fr) 40px 36px; }
.rp-top { display: flex; align-items: center; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.rp-top > i, .rp-ctl i { width: 1px; height: 20px; background: var(--line2); margin: 0 6px; flex: none; }
.rp-sym input { width: 130px; height: 30px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); border-radius: 6px; padding: 0 10px; font-weight: 700; }
.rp-iv, .rp-tb { padding: 5px 8px; border-radius: 5px; color: var(--text2); cursor: pointer; white-space: nowrap; font-size: 13px; flex: none; }
.rp-iv:hover, .rp-tb:hover { background: var(--panel3); color: var(--text); }
.rp-iv.on { color: var(--accent-ink); background: var(--accent-bg); font-weight: 600; }
.rp-tb.rp-on { background: var(--text); color: var(--panel); }
.rp-tb.rp-end { background: var(--red); color: #fff; margin-left: 4px; }
.rp-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; }
.rp.no-order .rp-body { grid-template-columns: minmax(0, 1fr) 0; }
.rp.no-order .rp-order { display: none; }
.rp-charts { display: flex; min-height: 0; min-width: 0; padding: 4px 0 0 4px; }
.rp-charts .kl-side { margin-right: 4px; }
.rp-panes { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr; gap: 4px; }
.rp-panes { grid-template-rows: minmax(0, 1fr); }
.rp-panes.two { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.rp-pane { position: relative; min-width: 0; min-height: 0; border: 1px solid transparent; border-radius: 4px; }
.rp-pane.act { border-color: var(--accent-line); }
.rp-pane .kl-host { position: absolute; inset: 0; }
.rp-pane .kl-host > .chart { position: absolute; inset: 0; height: auto !important; }
.rp-ptag { position: absolute; left: 6px; bottom: 26px; z-index: 3; font-size: 11px; color: var(--muted); background: var(--panel2); padding: 1px 6px; border-radius: 4px; pointer-events: none; }
.rp-order { border-left: 1px solid var(--line); overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 9px; }
.op-h { display: flex; align-items: center; gap: 8px; }
.op-h b { font-size: 15px; } .op-h a { margin-left: auto; cursor: pointer; }
.op-ba { display: grid; grid-template-columns: 1fr auto 1fr; border-radius: 8px; overflow: hidden; border: 1px solid var(--line2); }
.op-ba > div { padding: 7px 10px; cursor: pointer; display: flex; flex-direction: column; }
.op-s span, .op-b span { font-size: 12px; font-weight: 700; }
.op-s b { color: var(--down); } .op-b { text-align: right; } .op-b b { color: #2962ff; }
.op-s.on { background: rgba(246, 70, 93, .14); box-shadow: inset 0 -2px 0 var(--down); }
.op-b.on { background: rgba(41, 98, 255, .14); box-shadow: inset 0 -2px 0 #2962ff; }
.op-sp { align-self: center; font-size: 11px; color: var(--muted); padding: 0 4px !important; }
.op-types { display: flex; border-bottom: 1px solid var(--line); }
.op-types a { flex: 1; text-align: center; padding: 7px 0; font-size: 13px; color: var(--muted); cursor: pointer; }
.op-types a.on { color: var(--text); font-weight: 700; box-shadow: inset 0 -2px 0 var(--text); }
.op-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.op-row label { font-size: 12px; color: var(--text2); white-space: nowrap; }
.op-row .inp { width: 150px; height: 32px; text-align: right; }
.op-row select { background: transparent; border: 0; color: var(--text2); font-size: 12px; }
.op-row2 { display: flex; align-items: center; gap: 8px; }
.op-row2 .inp { flex: 1; height: 32px; } .op-row2.off { opacity: .45; }
.op-sec { font-weight: 700; margin-top: 4px; }
.op-hint { line-height: 1.6; }
.op-reason { min-height: 46px; font-size: 12px; }
.op-go { border: 0; border-radius: 8px; padding: 9px; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.op-go.buy { background: #2962ff; } .op-go.sell { background: var(--down); }
.op-go b { font-size: 15px; } .op-go span { font-size: 12px; opacity: .9; }
.op-go:disabled { opacity: .4; cursor: default; }
.op-acct { display: grid; grid-template-columns: 1fr 1fr 70px; gap: 8px; font-size: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.op-acct span { display: block; color: var(--muted); }
.op-acct .inp { height: 26px; padding: 0 6px; }
.rp-ctl { display: flex; align-items: center; border-top: 1px solid var(--line); padding: 0 10px; gap: 10px; }
.rp-ranges { display: flex; gap: 2px; flex: 1; }
.rp-ranges a { padding: 4px 7px; border-radius: 4px; font-size: 12px; color: var(--text2); cursor: pointer; }
.rp-ranges a:hover { background: var(--panel3); }
.rp-mid { display: flex; align-items: center; gap: 4px; }
.rp-btn { padding: 5px 10px; border-radius: 6px; cursor: pointer; color: var(--text); font-size: 13px; white-space: nowrap; }
.rp-btn:hover { background: var(--panel3); }
.rp-btn.big { font-size: 16px; padding: 3px 12px; }
.rp-clock { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
.rp-bottom { border-top: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.rpb-h { display: flex; align-items: center; gap: 4px; padding: 0 12px; height: 36px; flex: none; border-bottom: 1px solid var(--line-soft); }
.rpb-title { margin-right: 10px; font-size: 13px; }
.rpb-h > a[data-btab] { padding: 6px 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.rpb-h > a.on { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent-ink); }
.rpb-k { font-size: 12px; color: var(--muted); margin-left: 12px; white-space: nowrap; }
.rpb-k b { color: var(--text); }
.rpb-h a[data-bfold] { margin-left: 12px; cursor: pointer; }
.rpb-b { flex: 1; overflow-y: auto; padding: 4px 12px; min-height: 0; }
.rp.no-bottom .rpb-b { display: none; }
.rp-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 14px 0; }
.rp-stats span { display: block; font-size: 12px; color: var(--muted); } .rp-stats b { font-size: 18px; }
.rp-order > * { flex: none; }
/* full-height pages follow the real available height (banner, small windows) */
#content { min-height: 0; }
#content:has(> .rp), #content:has(> .mkt), #content:has(> .trs) { padding-bottom: 14px; display: flex; flex-direction: column; }
#content > .rp, #content > .mkt, #content > .trs { flex: 1; height: auto; min-height: 520px; }
.rp-ranges a, .rp-btn, .rpb-h a, .rpb-k, .rp-clock span { white-space: nowrap; }
.rpb-h { overflow-x: auto; scrollbar-width: none; }
.rp-clock span { line-height: 1.2; }
#top { overflow: hidden; }
#top h1, .top-stat .k, .top-stat .v, .sync-pill, .sync-pill * { white-space: nowrap; }
/* narrower windows / high DPI scaling */
@media (max-width: 1500px) {
  .rp-ranges { display: none; }
  .rp-mid { flex: 1; justify-content: center; }
  .rp-body { grid-template-columns: minmax(0, 1fr) 270px; }
  .rpb-k:nth-of-type(n+4) { display: none; }
}
@media (max-width: 1280px) {
  #app { grid-template-columns: 64px 1fr; }
  .brand { padding: 0; justify-content: center; font-size: 0; }
  .nav { padding: 6px 8px; }
  .nav a { justify-content: center; padding: 0; position: relative; }
  .nav a span:not(.badge) { display: none; }
  .nav .badge { position: absolute; top: 2px; right: 2px; margin: 0; }
  .side-foot { font-size: 0; padding: 6px; }
  #top { gap: 14px; padding: 0 14px; }
  #top .top-stat:nth-of-type(n+3) { display: none; }
  #content { padding: 12px 12px 30px; }
  .rp-top .rp-tb#rp-undo, .rp-top .rp-tb#rp-redo { display: none; }
}
@media (max-width: 1100px) {
  .rp-body { grid-template-columns: minmax(0, 1fr) 250px; }
  .rp-iv { padding: 5px 5px; }
  .rpb-k { display: none; }
  .rpb-k:nth-of-type(2) { display: inline; }
  .mkt, .mkt.with-side { grid-template-columns: 260px 1fr 44px; }
  .mkt.with-side .mkt-sidep { display: none; }
}
.rp-top > * { flex: none; white-space: nowrap; }
.op-row .inp { width: 58%; min-width: 0; }
@media (max-height: 820px) { .rp { grid-template-rows: 42px minmax(0, 1fr) 40px var(--rpb-h, 150px); } }
@media (max-width: 1280px) { .rp-top > span.small { display: none; } }
/* Binance-style order panel in replay */
.bn-top { display: flex; align-items: center; gap: 8px; }
.bn-chip { min-width: 54px; height: 28px; padding: 0 10px; border-radius: 5px; background: var(--panel3); color: var(--text); font-weight: 600; font-size: 13px; display: grid; place-items: center; cursor: pointer; }
.bn-chip:hover { filter: brightness(1.15); }
.bn-oc { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.bn-oc a { text-align: center; padding: 7px 0; font-weight: 600; color: var(--text2); cursor: pointer; }
.bn-oc a.on { background: var(--panel3); color: var(--text); }
.bn-types { display: flex; gap: 18px; border-bottom: 1px solid var(--line); }
.bn-types a { padding: 6px 0 8px; color: var(--muted); cursor: pointer; font-weight: 600; }
.bn-types a.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.bn-avail { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.bn-avail b { color: var(--text); }
.bn-inp { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 8px; background: transparent; }
.bn-inp:focus-within { border-color: var(--accent-line); }
.bn-inp label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.bn-inp input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); text-align: right; font-size: 14px; outline: none; }
.bn-inp > span { font-size: 12px; font-weight: 600; color: var(--text); }
.bn-inp .bn-last { color: var(--accent-ink); cursor: pointer; font-weight: 500; }
.bn-inp .bn-pc { font-weight: 500; }
.bn-unit { font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; white-space: nowrap; }
.bn-slider { position: relative; height: 22px; margin: 2px 8px 4px; cursor: pointer; touch-action: none; }
.bn-slider .bn-track, .lev-sl .bn-track { position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--line2); }
.bn-slider .bn-track i, .lev-sl .bn-track i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--text); }
.bn-slider b { position: absolute; top: 7px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg); background: var(--panel); border: 1.5px solid var(--line2); }
.bn-slider b.on { border-color: var(--text); background: var(--text); }
.bn-knob { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg); background: var(--panel); border: 2px solid var(--text); }
.bn-knob em { position: absolute; left: 50%; top: -26px; transform: rotate(-45deg) translateX(-50%); transform-origin: left; font-style: normal; font-size: 11px; background: var(--panel3); color: var(--text); padding: 1px 5px; border-radius: 4px; white-space: nowrap; opacity: 0; transition: opacity .15s; }
.bn-slider:hover .bn-knob em, .bn-slider.drag .bn-knob em { opacity: 1; }
.bn-sub { font-size: 12px; color: var(--muted); line-height: 1.5; }
.bn-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.bn-check input { width: 15px; height: 15px; accent-color: var(--text); }
.bn-check span { display: none; }
.bn-lbl { display: flex; justify-content: space-between; font-size: 12px; color: var(--text2); margin-bottom: -4px; }
.bn-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bn-btns.one { grid-template-columns: 1fr; }
.bn-btns button { height: 42px; border: 0; border-radius: 8px; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.bn-long { background: #2ebd85; } .bn-short { background: #f6465d; }
.bn-btns button:hover { filter: brightness(1.08); } .bn-btns button:disabled { opacity: .4; cursor: default; }
.bn-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; }
.bn-foot > div { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 2px 6px; color: var(--muted); }
.bn-foot > div.r { justify-content: end; text-align: right; }
.bn-foot b { color: var(--text); font-weight: 500; }
.bn-risk { grid-column: 1 / -1; display: block !important; color: var(--text2); line-height: 1.5; }
.bn-pos { padding: 10px; border-radius: 8px; background: var(--panel2); box-shadow: inset 3px 0 0 var(--up); }
.bn-pos.s { box-shadow: inset 3px 0 0 var(--down); }
.lev-box { display: grid; grid-template-columns: 44px 1fr 44px; height: 46px; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.lev-box a { display: grid; place-items: center; font-size: 20px; cursor: pointer; color: var(--text2); }
.lev-box a:hover { background: var(--panel3); }
.lev-box input { border: 0; background: transparent; color: var(--text); text-align: center; font-size: 18px; font-weight: 700; outline: none; }
.lev-sl { position: relative; height: 26px; margin: 22px 8px 4px; cursor: pointer; touch-action: none; }
.lev-sl .bn-knob em { opacity: 1; }
.lev-marks { display: flex; justify-content: space-between; font-size: 12px; }
.lev-marks a { color: var(--muted); cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.lev-marks a:hover { color: var(--text); background: var(--panel3); }
.bn-foot > div { display: flex; flex-direction: column; gap: 3px; }
.bn-foot p { margin: 0; display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; }
.bn-foot > div.r { text-align: left; }
.bn-btns button.pv-on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text); }
.scen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.scen { padding: 12px 14px; border-radius: 10px; background: var(--panel2); border: 1px solid transparent; cursor: pointer; box-shadow: inset 3px 0 0 var(--line2); }
.scen:hover { border-color: var(--accent-line); }
.scen.bull { box-shadow: inset 3px 0 0 var(--up); } .scen.bear, .scen.crash { box-shadow: inset 3px 0 0 var(--down); } .scen.range { box-shadow: inset 3px 0 0 var(--accent); }
.kl-prop .grip { cursor: grab; color: var(--muted); font-size: 12px; letter-spacing: -2px; padding: 0 4px 0 0; user-select: none; touch-action: none; }
.kl-prop .grip:active { cursor: grabbing; }
/* Binance-style positions table */
.tbl.bnpos td { vertical-align: middle; padding-top: 9px; padding-bottom: 9px; }
.tbl.bnpos tr.pl td:first-child, .tbl.bnpos tr.ps td:first-child { border-left: 3px solid var(--up); padding-left: 9px; }
.tbl.bnpos tr.ps td:first-child { border-left-color: var(--down); }
.pos-badges { display: flex; gap: 4px; margin-top: 4px; align-items: center; }
.pos-badges > span:not(.ex) { font-size: 11px; line-height: 16px; padding: 0 4px; border-radius: 2px; background: var(--panel3); color: var(--text2); }
.tbl-wrap { overflow-x: auto; }
.live-tag { color: var(--up); font-weight: 600; font-size: 11px; padding: 1px 5px; border-radius: 3px; background: var(--up-bg); }
.dash-j10-h { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.dash-j10 { max-height: 360px; overflow-y: auto; }
.dash-j10 .j10 { display: grid; grid-template-columns: 42px 1fr; gap: 8px; padding: 6px 0; font-size: 12.5px; line-height: 1.55; border-bottom: 1px dashed var(--line); color: var(--text2); }
.dash-j10 .j10.imp span:last-child { color: var(--down); }
.mkt-head .per-h { display: flex; min-width: 0; overflow: hidden; align-items: center; justify-content: flex-end; gap: 2px; white-space: nowrap; }
.mkt-head .per-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 4px; background: var(--panel3); color: var(--text); }
.mkt-head .per-chip:hover { background: var(--line); }
.mkt-head .per-chip i { font-style: normal; font-size: 10px; color: var(--text3); }
.mkt-head .per-sort { padding: 0 2px; min-width: 12px; text-align: center; }
.mkt-pop.list a { display: block; padding: 8px 14px; border-radius: 6px; }
.mkt-pop.list a.on { background: var(--panel3); font-weight: 600; }
.alm-c { max-height: 70vh; overflow: auto; padding: 10px 20px 18px; }
.mkt-tools .hide { display: none !important; }
.kl-wrap.tv .kl-side { display: none; }
.kl-wrap.tv .kl-host { padding: 0; }
.chip.tvchip.on { background: #2962ff; color: #fff; border-color: #2962ff; }
.wl-box { max-width: 360px; margin: 80px auto; text-align: center; padding: 32px 28px; }
.wl-box .wl-ic svg { width: 40px; height: 40px; stroke: var(--yellow); fill: none; stroke-width: 1.6; }
.wl-box h3 { margin: 10px 0 6px; }
.wl-box .inp { width: 100%; height: 40px; text-align: center; font-size: 15px; }
.wl-box .btn { justify-content: center; height: 40px; }
/* weekly review */
.wk-wrap { overflow-x: auto; }
.wk-tbl td { vertical-align: middle; }
.wk-tbl tr.wk-cur td { background: var(--yellow-bg); }
.wk-chart { position: relative; cursor: zoom-in; outline: none; }
.wk-chart img { width: 240px; max-height: 120px; object-fit: contain; display: block; border-radius: 4px; }
.wk-chart:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.wk-chart .wk-up { position: absolute; right: 4px; bottom: 2px; opacity: 0; background: var(--panel); padding: 1px 6px; border-radius: 4px; }
.wk-chart:hover .wk-up { opacity: 1; }
.wk-chart .wk-imgx { position: absolute; right: 4px; top: 2px; opacity: 0; background: var(--panel); padding: 0 5px; border-radius: 4px; }
.wk-chart:hover .wk-imgx { opacity: 1; }
.wk-nochart { height: 96px; display: flex; align-items: center; justify-content: center; }
.wk-ta { width: 100%; min-height: 90px; resize: vertical; font-size: 12.5px; line-height: 1.55; padding: 6px 8px; }
.wk-trend { height: 30px; border-radius: 15px; padding: 0 10px; font-size: 12.5px; }
.wk-trend.tr-up { background: rgba(41, 98, 255, .18); color: #6f95ff; }
.wk-trend.tr-side { background: rgba(0, 188, 212, .16); color: #26c6da; }
.wk-trend.tr-down { background: rgba(255, 152, 0, .18); color: #ffa726; }
.wk-motto textarea { width: 100%; resize: vertical; line-height: 1.6; }
.wk-tbl { min-width: 1320px; table-layout: fixed; width: 100%; }
.wk-tbl th:last-child, .wk-tbl td:last-child { min-width: 300px; }
.wk-tbl tr.wk-cur td { background: rgba(240, 185, 11, .05); }
.wk-eye { cursor: pointer; color: inherit; }
.wk-an { position: relative; }
.wk-an .wk-ai { position: absolute; left: 6px; bottom: 2px; font-size: 10.5px; color: var(--text3); }
.wk-an .wk-regen { position: absolute; right: 8px; bottom: 2px; opacity: 0; }
.wk-an:hover .wk-regen { opacity: 1; }
.wk-tbl th:nth-child(5) { width: 300px !important; }
.rg-date { height: 28px; width: 132px; padding: 0 8px; font-size: 12.5px; color-scheme: dark; }
[data-theme$="light"] .rg-date { color-scheme: light; }
/* custom date picker */
.dp-inp { cursor: pointer; caret-color: transparent; }
.dp-pop { position: fixed; z-index: 2000; width: 296px; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 14px 40px var(--shadow); padding: 10px; user-select: none; font-size: 13px; }
.dp-pop a { cursor: pointer; color: var(--text); }
.dp-h { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.dp-h a { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--text2); font-size: 15px; }
.dp-h a:hover { background: var(--panel3); color: var(--text); }
.dp-h .dp-t { flex: 1; width: auto; font-weight: 600; font-size: 13.5px; color: var(--text); }
.dp-wk, .dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wk span { text-align: center; color: var(--text3); font-size: 12px; padding: 4px 0; }
.dp-days a { height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: background .08s; }
.dp-days a:hover { background: var(--panel3); }
.dp-days a.out { color: var(--text3); }
.dp-days a.today { box-shadow: inset 0 0 0 1px var(--yellow); }
.dp-days a.on { background: var(--yellow); color: #1e2026; font-weight: 600; }
.dp-days a.dis { opacity: .25; pointer-events: none; }
.dp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px 0; }
.dp-grid a { height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.dp-grid a:hover { background: var(--panel3); }
.dp-grid a.on { background: var(--yellow); color: #1e2026; font-weight: 600; }
.dp-time { display: flex; align-items: center; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.dp-time > a { width: 20px; text-align: center; color: var(--text2); border-radius: 4px; }
.dp-time > a:hover { background: var(--panel3); color: var(--text); }
.dp-time b { font-size: 15px; min-width: 22px; text-align: center; }
.dp-time .dp-q { margin-left: auto; display: flex; gap: 4px; }
.dp-time .dp-q a { font-size: 11px; padding: 2px 5px; border-radius: 4px; background: var(--panel3); color: var(--text2); }
.dp-f { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.dp-f a { color: var(--yellow); font-size: 12.5px; }
.dp-f .btn { margin-left: auto; }
.dp-time .muted { white-space: nowrap; margin-right: 4px; }
/* symbol picker */
.sp-pop { position: fixed; z-index: 2000; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 14px 40px var(--shadow); padding: 6px; }
.sp-tabs { display: flex; align-items: center; gap: 4px; padding: 2px 4px 6px; border-bottom: 1px solid var(--line); }
.sp-tabs a { padding: 3px 9px; border-radius: 5px; cursor: pointer; color: var(--text2); font-size: 12.5px; }
.sp-tabs a.on { background: var(--panel3); color: var(--text); font-weight: 600; }
.sp-rows { max-height: 320px; overflow-y: auto; padding-top: 4px; }
.sp-row { display: grid; grid-template-columns: 1fr 90px 72px 64px; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 6px; cursor: pointer; color: var(--text); font-size: 13px; }
.sp-row:hover, .sp-row.on { background: var(--panel3); }
.sp-row .r { text-align: right; }
/* paper trading */
.mkt.with-side.side-paper { grid-template-columns: 300px 1fr 310px 44px; }
.pp-panel { display: flex; flex-direction: column; gap: 9px; padding: 10px 12px; overflow-y: auto; min-height: 0; flex: 1; }
.pp-panel > * { flex: none; }
.pp-bottom { flex: none; height: var(--ppb-h, 250px); margin-top: 8px; position: relative; }
.pp-bottom.fold { height: auto; }
.pp-bottom .rpb-b { overflow: auto; flex: 1; min-height: 0; }
.pp-bottom .tbl td { padding-top: 6px; padding-bottom: 6px; }
.pp-act { margin-left: 10px; color: var(--yellow); cursor: pointer; white-space: nowrap; }
.pp-acct { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.pp-acct p { margin: 0; display: flex; flex-direction: column; font-size: 12px; }
.pp-acct p span { color: var(--text3); }
.pp-acctg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 8px 4px; }
.pp-acctg > div { display: flex; flex-direction: column; gap: 4px; }
.pp-acctg > div > span:first-child { color: var(--text3); font-size: 12px; }
@media (max-width: 1400px) { .mkt.with-side.side-paper { grid-template-columns: 260px 1fr 300px 44px; } }
.rpb-h > a[data-pptab] { padding: 6px 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.rpb-h a[data-pfold] { margin-left: 12px; cursor: pointer; }
/* TP/SL P&L bubble (Binance style) */
.bn-inp { position: relative; }
.bn-tip { display: none; position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20; background: #474d57; color: #eaecef; border-radius: 6px; padding: 6px 10px; font-size: 12px; line-height: 1.6; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.35); pointer-events: none; }
.bn-tip::after { content: ''; position: absolute; left: 16px; top: 100%; border: 5px solid transparent; border-top-color: #474d57; }
.bn-tip p { margin: 0; } .bn-tip p > span:first-child { color: #b7bdc6; }
.bn-tip .up { color: #2ebd85; } .bn-tip .down { color: #f6465d; } .bn-tip .muted { color: #b7bdc6; }
.bn-inp:focus-within .bn-tip, .bn-inp:hover .bn-tip { display: block; }
.bn-last.on { color: var(--yellow); }
/* 复盘问题 tags (pastel, like the sheet) */
.prob { border: 1px solid transparent; }
.chip.prob { opacity: .55; }
.chip.prob.on { opacity: 1; font-weight: 600; box-shadow: 0 0 0 1px currentColor inset; }
.prob.p0 { background: rgba(98, 132, 255, .22); color: #8fa8ff; }
.prob.p1 { background: rgba(255, 152, 0, .22); color: #ffb74d; }
.prob.p2 { background: rgba(0, 188, 212, .2); color: #4dd0e1; }
.prob.p3 { background: rgba(240, 185, 11, .2); color: #f0c94a; }
.prob.p4 { background: rgba(38, 198, 168, .2); color: #4fd6bb; }
.prob.p5 { background: rgba(246, 70, 93, .18); color: #ff8a9a; }
.prob.p6 { background: rgba(156, 39, 176, .2); color: #ce93d8; }
.prob.p7 { background: rgba(46, 189, 133, .2); color: #6fdcaa; }
.prob.p8 { background: rgba(233, 30, 99, .18); color: #f48fb1; }
.prob.p9 { background: rgba(205, 220, 57, .18); color: #d4e157; }
/* 回放全屏 */
body.focus aside, body.focus #top, body.focus #banner { display: none !important; }
body.focus #content { padding: 8px !important; }
body.focus #content > .rp { min-height: 0; }
body.focus #app { grid-template-columns: 1fr !important; }

/* drag to resize chart / bottom panel */
.rp-bottom { position: relative; }
.vsplit { position: absolute; left: 0; right: 0; top: -4px; height: 8px; cursor: row-resize; z-index: 5; }
.vsplit::after { content: ''; position: absolute; left: 50%; top: 2px; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: var(--line2); opacity: 0; transition: opacity .15s; }
.vsplit:hover::after, .vsplit.drag::after { opacity: 1; background: var(--yellow); }
body.vsplitting { cursor: row-resize !important; user-select: none; }
body.vsplitting * { cursor: row-resize !important; }
.rg-lbl { white-space: nowrap; }
.pos-sym { color: var(--text); cursor: pointer; display: inline-block; } .pos-sym:hover { color: var(--yellow); text-decoration: underline; }
/* trade plan rows — flat */
.pl-item { display: block; padding: 16px 18px 12px; margin-top: 10px; border: 0; border-radius: 10px; background: var(--panel2); position: relative; }
.pl-item:first-of-type { margin-top: 2px; }
.pl-item::before, .pl-row::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--text3); }
.pl-item.l::before, .pl-row.l::before { background: var(--up); }
.pl-item.s::before, .pl-row.s::before { background: var(--down); }
.pl-head { display: flex; align-items: flex-start; gap: 16px; }
.pl-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1; }
.pl-sym { font-weight: 700; font-size: 15px; color: var(--text); cursor: pointer; letter-spacing: .2px; }
.pl-sym em { font-style: normal; font-weight: 600; color: var(--text2); }
.pl-sym:hover, .pl-sym:hover em { color: var(--yellow); }
.pl-perp { font-size: 11px; color: var(--text3); padding: 1px 5px; border-radius: 3px; background: var(--panel3); margin-left: -2px; }
.pl-dir { font-size: 12px; font-weight: 600; }
.pl-dir.l { color: var(--up); } .pl-dir.s { color: var(--down); } .pl-dir.o { color: var(--text2); }
.pl-tag { font-size: 11.5px; color: var(--text2); padding: 1px 7px; border-radius: 10px; border: 1px solid var(--line2); }
.pl-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text2); }
.pl-st i { width: 6px; height: 6px; border-radius: 50%; background: var(--text3); }
.pl-st.wait i { background: #3d7eff; box-shadow: 0 0 0 3px rgba(61,126,255,.15); }
.pl-st.fired i, .pl-st.open i { background: var(--yellow); box-shadow: 0 0 0 3px rgba(240,185,11,.15); }
.pl-st.win i { background: var(--up); } .pl-st.loss i { background: var(--down); }
.pl-bell { font-size: 12px; opacity: .7; }
.pl-focus { text-align: right; flex: none; }
.pl-focus span { display: block; font-size: 11px; color: var(--text3); }
.pl-focus b { font-size: 18px; font-weight: 600; letter-spacing: .3px; }
.pl-focus em { display: block; font-style: normal; font-size: 11px; color: var(--text3); margin-top: 1px; }
.pl-focus em.near { color: var(--yellow); }
.pl-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 22px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft, var(--line)); }
.pl-kv span { font-size: 11px; color: var(--text3); letter-spacing: .5px; }
.pl-kv p { margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: var(--text); white-space: pre-wrap; }
.pl-foot { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 11.5px; color: var(--text3); }
.pl-foot a { color: var(--text2); cursor: pointer; opacity: .75; }
.pl-foot a:hover { color: var(--yellow); opacity: 1; }
.pl-foot a.del:hover { color: var(--down); }
.pl-item.cancel, .pl-item.expired { opacity: .5; }
.pl-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; margin-top: 6px; border: 0; border-radius: 8px; background: var(--panel2); }
.pl-row:first-of-type { margin-top: 2px; }
.pl-row::before { top: 9px; bottom: 9px; }
.pl-l2 { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; min-width: 0; }
.pl-row .r b { font-size: 14px; }
:root, :root[data-theme] { --text3: var(--muted); }
[data-psym] { cursor: pointer; }
[data-psym]:hover { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
/* add-alert dialog: never wider than the modal (long prices like 0.0028741 used to push it past the right edge) */
.al-form { grid-template-columns: 90px minmax(0, 1fr); }
.al-form > div { min-width: 0; }
.al-form .inp, .al-form .inp-wrap { min-width: 0; max-width: 100%; box-sizing: border-box; }
.al-form .inp-wrap input { min-width: 0; width: 100%; }
.modal-b.al-form { overflow-x: hidden; }
.sp-fires { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; align-items: center; }
.sp-fire { font-size: 11px; padding: 2px 7px; border-radius: 4px; background: var(--panel3); color: var(--text2); cursor: pointer; }
.sp-fire:hover { color: var(--yellow); background: var(--accent-bg); }
.cl-dlg { display: flex; flex-direction: column; gap: 12px; }
.cl-pos { font-size: 14px; }
.cl-chk { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.cl-chk input { width: 16px; height: 16px; accent-color: var(--yellow); }
.cl-pcts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
#cl-partbox.hide { display: none; }
.pl-res > div + div { margin-top: 4px; }
.pl-res .pl-sum { font-size: 13px; font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.pl-res .click:hover { color: var(--text); text-decoration: underline; cursor: pointer; }
.pl-res .pl-sum { display: flex; align-items: center; gap: 6px; }
.pl-allk { margin-left: auto; font-weight: 500; }
.pk-list { margin-top: 10px; display: grid; gap: 4px; font-size: 12px; }
.pk-list .click:hover { text-decoration: underline; cursor: pointer; }
.pk-n { display: inline-block; min-width: 18px; text-align: center; margin-right: 6px; border-radius: 4px; background: var(--panel2); font-weight: 700; }
/* 行情 → 全球 */
.gl-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 10px; }
.gl-cats a { padding: 3px 10px; border-radius: 12px; background: var(--panel2); font-size: 12px; cursor: pointer; color: var(--text2); }
.gl-cats a.on { background: var(--accent-bg); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-line); font-weight: 600; }
.gl-row { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 46px; cursor: pointer; }
.gl-row:hover { background: var(--panel2); }
.gl-row.on { background: var(--panel3); }
.gl-row .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; overflow: hidden; white-space: nowrap; }
.gl-main { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.gl-main .mkt-hdr { gap: 10px; }
.gl-chart { flex: 1; min-height: 480px; }
.mkt-desc { flex: 1 1 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text2); padding: 3px 10px; margin: 0 6px; border-left: 2px solid var(--accent-line); }
.rp-pvis { position: absolute; left: 62px; bottom: 26px; z-index: 4; display: flex; gap: 4px; }
.rp-pvis a { font-size: 11px; color: var(--text2); background: var(--panel2); padding: 1px 7px; border-radius: 4px; cursor: pointer; border: 1px solid var(--line2); }
.rp-pvis a:hover { color: var(--text); }
.rp-pvis a.off { color: var(--muted2); border-style: dashed; text-decoration: line-through; }
/* 交易训练 · 完整统计 */
.ts { display: flex; flex-direction: column; gap: 14px; padding: 8px 2px 18px; }
.ts .muted { color: var(--muted); font-weight: 400; }
.ts-h { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.ts-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.ts-hero { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 14px; }
.ts-sum { background: linear-gradient(160deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; }
.ts-cap { font-size: 12px; color: var(--muted); }
.ts-big { font-size: 38px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 4px 0 6px; }
.ts-ret { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.ts-pill { padding: 2px 8px; border-radius: 10px; font-weight: 600; font-size: 12px; background: var(--panel3); }
.ts-pill.up { background: var(--green-bg); color: var(--green); } .ts-pill.down { background: var(--red-bg); color: var(--red); }
.ts-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.ts-quad > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts-quad span { font-size: 11.5px; color: var(--muted); }
.ts-quad b { font-size: 20px; font-weight: 600; }
.ts-quad em { font-style: normal; font-size: 11px; color: var(--muted2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-curve { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 8px; min-width: 0; }
.ts-ddw { margin-top: 2px; border-top: 1px dashed var(--line); }
.ts-legend { margin-left: auto; display: flex; align-items: center; gap: 6px; font-weight: 400; letter-spacing: 0; }
.ts-legend i { width: 10px; height: 3px; border-radius: 2px; background: var(--muted); margin-left: 8px; }
.ts-legend i.up { background: var(--green); } .ts-legend i.down { background: var(--red); }
.ts-diag { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; gap: 7px; }
.ts-diag .ts-h { margin-bottom: 2px; }
.ts-tip { display: flex; gap: 10px; align-items: baseline; font-size: 13px; line-height: 1.55; }
.ts-tip i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); transform: translateY(-1px); }
.ts-tip.good i { background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.ts-tip.bad i { background: var(--red); box-shadow: 0 0 0 3px var(--red-bg); }
.ts-tip.info i { background: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-bg); }
.ts-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ts-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'l v' 'l n'; column-gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); align-items: center; }
.ts-r:last-child { border-bottom: 0; }
.ts-l { grid-area: l; font-size: 13px; color: var(--text2); display: flex; align-items: center; gap: 8px; }
.ts-r b { grid-area: v; text-align: right; font-size: 15px; font-weight: 600; }
.ts-r em { grid-area: n; text-align: right; font-style: normal; font-size: 11px; color: var(--muted); }
.ts-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line2); flex: none; }
.ts-dot.good { background: var(--green); } .ts-dot.bad { background: var(--red); }
.ts-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ts-sec { font-size: 14px; font-weight: 600; margin: 4px 0 -4px; color: var(--text); }
.ts-tbls { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 14px; }
.ts-tbl table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ts-tbl th { font-weight: 400; color: var(--muted); font-size: 11.5px; padding: 0 6px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.ts-tbl td { padding: 7px 6px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.ts-tbl tr:last-child td { border-bottom: 0; }
.ts-tbl td:first-child { color: var(--text2); }
.ts-tbl .r { text-align: right; }
.ts-wr { display: inline-block; vertical-align: middle; width: 34px; height: 4px; border-radius: 2px; background: var(--panel3); margin-left: 6px; overflow: hidden; }
.ts-wr i { display: block; height: 100%; background: var(--accent-ink); border-radius: 2px; }
@media (max-width: 1200px) { .ts-hero, .ts-two { grid-template-columns: 1fr; } .ts-groups { grid-template-columns: 1fr 1fr; } }
.ts-bar { display: flex; align-items: center; }
.ts-fs { font-size: 12px; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--line2); color: var(--text2); cursor: pointer; }
.ts-fs:hover { color: var(--text); border-color: var(--accent-line); }
.ts-legend b { font-weight: 600; margin: 0 2px; }
.ts-fullm .modal { height: 96vh; max-height: 96vh; display: flex; flex-direction: column; }
.ts-fullm .modal-b { flex: 1; overflow-y: auto; }
.ts-matrix .ts-mxw { overflow-x: auto; }
.ts-matrix table { border-collapse: separate; border-spacing: 4px; font-size: 12px; }
.ts-matrix th { font-weight: 500; color: var(--muted); font-size: 11.5px; padding: 2px 6px; white-space: nowrap; text-align: center; }
.ts-matrix th.ts-mxl { text-align: left; color: var(--text2); padding-right: 12px; }
.ts-mx { min-width: 92px; padding: 6px 8px; border-radius: 6px; background: var(--panel2); text-align: center; line-height: 1.35; }
.ts-mx b { display: block; font-size: 14px; }
.ts-mx span { font-size: 11.5px; color: var(--text2); }
.ts-mx em { display: block; font-style: normal; font-size: 10.5px; color: var(--muted); }
.ts-mx.pos { background: var(--green-bg); box-shadow: inset 0 0 0 1px rgba(46, 189, 133, .25); }
.ts-mx.neg { background: var(--red-bg); box-shadow: inset 0 0 0 1px rgba(246, 70, 93, .2); }
.ts-mx0 { text-align: center; color: var(--muted2); min-width: 92px; }
.ts-mxsum { opacity: .92; }
th.ts-mxsum { color: var(--text) !important; }
/* 下单面板：开单逻辑 / 进场点位 */
.op-tags { margin: 8px 0 6px; display: flex; flex-direction: column; gap: 4px; }
.op-tl { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.op-tc { display: flex; flex-wrap: wrap; gap: 4px; }
.op-tc a { font-size: 11.5px; padding: 2px 8px; border-radius: 10px; background: var(--panel2); color: var(--text2); cursor: pointer; border: 1px solid transparent; }
.op-tc a:hover { color: var(--text); }
.op-tc a.on { background: var(--accent-bg); color: var(--accent-ink); border-color: var(--accent-line); font-weight: 600; }
/* 回放持仓表（币安样式） */
.bn-ptbl th { font-weight: 400; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.bn-ptbl td { vertical-align: middle; white-space: nowrap; font-size: 12.5px; }
.bn-ptbl tr.pl td:first-child, .bn-ptbl tr.ps td:first-child { position: relative; }
.bp-sym { display: flex; align-items: center; gap: 8px; }
.bp-sym > i { width: 3px; height: 30px; border-radius: 2px; background: var(--green); }
.bp-sym > i.down { background: var(--red); }
.bp-lev { padding: 0 4px; border-radius: 3px; background: var(--panel3); color: var(--text2); }
.bp-act { white-space: nowrap; }
.bp-link { color: var(--accent-ink); cursor: pointer; margin-right: 10px; font-weight: 600; }
.bp-link:hover { text-decoration: underline; }
.bp-in { width: 96px; height: 26px; padding: 0 8px; font-size: 12px; margin-right: 6px; display: inline-block; }
.bp-tpsl { cursor: pointer; white-space: nowrap; }
.bp-tpsl:hover { opacity: .8; }
.scen-fold { cursor: pointer; padding-top: 14px; padding-bottom: 14px; }
.scen-fold:hover { border-color: var(--accent-line); }
.scen-h { cursor: pointer; }
/* 离场策略 */
.xp-list { display: flex; flex-direction: column; gap: 8px; }
.xp { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); cursor: pointer; }
.xp > i { width: 12px; height: 12px; border-radius: 50%; background: var(--xc); margin-top: 4px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--xc) 22%, transparent), 0 0 12px var(--xc); flex: none; }
.xp b { font-size: 14px; color: var(--xc); }
.xp b .muted { color: var(--muted); font-weight: 400; }
.xp .small { color: var(--text2); margin-top: 3px; }
.xp:hover { border-color: var(--xc); }
.xp.on { border-color: var(--xc); background: color-mix(in srgb, var(--xc) 9%, var(--panel2)); }
.xp.dis { opacity: .55; }
.xp-tag { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 8px; font-size: 10.5px; color: var(--xc); background: color-mix(in srgb, var(--xc) 14%, transparent); }
.xp-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--xc); }
#tr-pool.hide, .mkt-head.hide { display: none !important; }
.mkt-copy { font-size: 12px; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--line2); color: var(--text2); cursor: pointer; white-space: nowrap; margin-left: -6px; }
.mkt-copy:hover { color: var(--accent-ink); border-color: var(--accent-line); }
.mkt-copy.ok { color: var(--green); border-color: var(--green); }
/* 学习 */
.ln-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.ln-cats a { font-size: 12px; padding: 3px 10px; border-radius: 12px; background: var(--panel2); color: var(--text2); cursor: pointer; }
.ln-cats a.on { background: var(--accent-bg); color: var(--accent-ink); }
.ln-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ln-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.ln-card:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.ln-card.done { opacity: .72; }
.ln-th { position: relative; aspect-ratio: 16 / 9; background: var(--panel2); overflow: hidden; }
.ln-th > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ln-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 28px; color: var(--muted); background: linear-gradient(135deg, var(--panel2), var(--panel3)); }
.ln-ph span { font-size: 13px; }
.ln-ph.web img { width: 40px; height: 40px; border-radius: 8px; }
.ln-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 38px; border-radius: 10px; background: rgba(255, 0, 0, .88); color: #fff; font-style: normal; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.ln-done { position: absolute; right: 8px; top: 8px; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--green); color: #fff; }
.ln-b { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ln-t { font-weight: 600; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ln-m { display: flex; gap: 8px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.ln-cat { color: var(--accent-ink); }
.ln-note { font-size: 12px; color: var(--text2); background: var(--panel2); border-radius: 6px; padding: 6px 8px; white-space: pre-wrap; max-height: 60px; overflow: hidden; }
.ln-acts { display: flex; gap: 12px; font-size: 12px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.ln-acts a { color: var(--muted); cursor: pointer; }
.ln-acts a:hover { color: var(--text); }
.ln-video { position: relative; aspect-ratio: 16 / 9; }
.ln-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mkt-ai { color: var(--accent-ink); border-color: var(--accent-line); }
.ai-body { min-height: 180px; max-height: 70vh; overflow-y: auto; }
.ai-wait { display: flex; gap: 8px; justify-content: center; padding: 40px 0 14px; }
.ai-wait i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-ink); animation: aiDot 1.2s infinite ease-in-out; }
.ai-wait i:nth-child(2) { animation-delay: .15s; } .ai-wait i:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot { 0%, 80%, 100% { opacity: .2; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.ai-md { font-size: 13.5px; line-height: 1.75; color: var(--text); }
.ai-md h4 { font-size: 14px; margin: 14px 0 6px; color: var(--accent-ink); }
.ai-md h4:first-child { margin-top: 0; }
.ai-md ul { margin: 4px 0 8px; padding-left: 20px; }
.ai-md li { margin: 3px 0; }
.ai-md p { margin: 6px 0; }
.ai-md a, .ai-src a { color: var(--accent-ink); cursor: pointer; }
.ai-src { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ai-src a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 指标参数 */
.ind-tabs { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; }
.ind-tabs a[data-indt] { padding: 5px 12px; border-radius: 6px; background: var(--panel2); cursor: pointer; font-size: 13px; color: var(--text2); }
.ind-tabs a[data-indt].on { background: var(--accent-bg); color: var(--accent-ink); font-weight: 600; }
.ind-tabs a[data-indreset] { cursor: pointer; color: var(--muted); }
.ind-hd, #ind-body .ind-row { display: grid; grid-template-columns: 110px 1fr 54px 90px; gap: 10px; align-items: center; }
.ind-hd { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
#ind-body .ind-row { padding: 4px 0; }
#ind-body .ind-row .inp { height: 32px; }
#ind-body input[type=color] { width: 44px; height: 30px; border: 1px solid var(--line2); border-radius: 6px; background: transparent; padding: 2px; cursor: pointer; }
#ind-body .ind-row:has([data-bk]) { grid-template-columns: auto 90px auto 90px 54px 54px; }
.ind-n { font-size: 12.5px; color: var(--text2); }
.ai-prov { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai-prov a { border: 1px solid var(--line2); border-radius: 8px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.ai-prov a span { font-size: 11.5px; color: var(--muted); }
.ai-prov a.on { border-color: var(--accent-line); background: var(--accent-bg); }
.ai-prov a.on b { color: var(--accent-ink); }
.ai-prompt { width: 100%; min-height: 300px; font-size: 12.5px; line-height: 1.6; font-family: inherit; resize: vertical; }
.ai-go { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
/* 画线练习 */
.drill-card { border: 1px solid var(--accent-line); }
.drill-kpi { display: flex; gap: 18px; font-size: 12px; color: var(--muted); }
.drill-kpi span { display: flex; flex-direction: column; gap: 2px; }
.drill-kpi b { font-size: 16px; color: var(--text); }
.rp-charts { position: relative; }
#drill-bar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--accent-line); box-shadow: 0 6px 24px rgba(0,0,0,.4); font-size: 12.5px; white-space: nowrap; }
#drill-bar b { color: var(--accent-ink); }
.drill-res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.drill-res > div { background: var(--panel2); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.drill-res span { font-size: 11.5px; color: var(--muted); }
.drill-res b { font-size: 18px; }
/* 形态库 */
.pt-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; margin-bottom: 14px; }
.pt-hero { display: flex; flex-direction: column; gap: 14px; }
.pt-ht { display: flex; gap: 16px; align-items: flex-start; }
.pt-ht > div { flex: 1; }
.pt-ht h3 { margin: 0 0 6px; font-size: 18px; }
.pt-kpi { display: flex; gap: 28px; margin-top: auto; }
.pt-kpi span { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.pt-kpi b { font-size: 22px; color: var(--text); }
.pt-check ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 12.5px; color: var(--text2, var(--text)); }
.pt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-chips a { padding: 5px 11px; border-radius: 16px; background: var(--panel2); font-size: 12.5px; cursor: pointer; color: var(--muted); border: 1px solid transparent; }
.pt-chips a i { font-style: normal; opacity: .7; margin-left: 2px; }
.pt-chips a.on { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-bg, var(--panel2)); }
.pt-grp { margin-bottom: 22px; }
.pt-gh { display: flex; align-items: center; gap: 10px; margin: 0 2px 10px; flex-wrap: wrap; }
.pt-gh > b { font-size: 15px; }
.pt-my { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.pt-my b { color: var(--text); }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.pt-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; }
.pt-card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.pt-img { position: relative; aspect-ratio: 16 / 10; background: #0b0e11; }
.pt-img img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.pt-noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: 12px; }
.pt-stars i { font-style: normal; color: var(--line); font-size: 13px; letter-spacing: 1px; }
.pt-stars i.on { color: #f0b90b; }
.pt-stars.ov { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.6); padding: 2px 7px; border-radius: 10px; }
.pt-stars.ov i { color: rgba(255,255,255,.25); }
.pt-stars.ov i.on { color: #f0b90b; }
.pt-b { padding: 10px 12px 12px; }
.pt-t { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-m { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.pt-n { font-size: 12px; color: var(--muted); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-view { display: flex; height: min(86vh, 900px); }
.pt-vimg { flex: 1; position: relative; background: #000; display: flex; align-items: center; justify-content: center; min-width: 0; }
.pt-vimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pt-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #fff; background: rgba(0,0,0,.45); border-radius: 8px; cursor: pointer; }
.pt-nav.l { left: 10px; } .pt-nav.r { right: 10px; }
.pt-vside { width: 330px; padding: 18px; display: flex; flex-direction: column; overflow: auto; border-left: 1px solid var(--line); }
.pt-ck { display: grid; gap: 5px; font-size: 12px; margin: 4px 0 10px; }
.pt-ck div { display: flex; gap: 6px; color: var(--muted); }
.pt-ck div.on { color: var(--text); }
.pt-ck i { font-style: normal; width: 14px; color: var(--down); }
.pt-ck div.on i { color: var(--up); }
.pt-vn { white-space: pre-wrap; font-size: 13px; line-height: 1.7; background: var(--panel2); border-radius: 8px; padding: 10px 12px; margin: 6px 0 10px; }
.pt-ed { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.pt-drop { position: relative; min-height: 340px; border: 2px dashed var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--panel2); }
.pt-drop.over { border-color: var(--accent); }
.pt-drop img { max-width: 100%; max-height: 60vh; display: block; }
.pt-dh { position: absolute; inset: auto 0 0 0; text-align: center; padding: 10px; font-size: 12.5px; color: var(--muted); }
.pt-dh:not(.has) { position: static; }
.pt-dh.has { background: rgba(0,0,0,.6); color: #ddd; }
.pt-dh a { color: var(--accent-ink); cursor: pointer; margin-left: 2px; }
.pt-ef { display: flex; flex-direction: column; gap: 10px; }
.pt-starsel { display: flex; align-items: center; gap: 2px; }
.pt-starsel a { font-size: 22px; color: var(--line); cursor: pointer; }
.pt-starsel a.on { color: #f0b90b; }
.pt-starsel span { margin-left: 8px; }
.pt-cksel { display: grid; gap: 5px; font-size: 12px; }
.pt-cksel label { display: flex; gap: 6px; align-items: flex-start; cursor: pointer; }
@media (max-width: 1100px) { .pt-top, .pt-ed { grid-template-columns: 1fr; } }
.pt-ai { border-radius: 10px; padding: 10px 12px; background: var(--panel2); font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }
.pt-ai:empty { display: none; }
.pt-ai.ok { border: 1px solid var(--accent-line); }
.pt-ai.err { border: 1px solid rgba(246,70,93,.4); }
.pt-ai.busy b { color: var(--accent-ink); }
.pt-ai a { color: var(--accent-ink); cursor: pointer; }
.pt-ai ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; display: grid; gap: 2px; }
.pt-sug { outline: 1.5px solid rgba(240,185,11,.55); outline-offset: 2px; border-radius: 6px; }
.pt-vimg img { cursor: zoom-in; }
.pt-vimg.zoom { display: block; overflow: auto; }
.pt-vimg.zoom img { max-width: none; max-height: none; width: 160%; cursor: zoom-out; }
/* 形态库全屏浏览 */
.pt-vimg { overflow: hidden; }
.pt-vimg img { transform-origin: center center; transition: transform .08s ease-out; }
.pt-fsbtn { position: absolute; right: 12px; top: 12px; padding: 5px 12px; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 12.5px; cursor: pointer; opacity: .75; }
.pt-fsbtn:hover { opacity: 1; }
.pt-fsbar { display: none; }
.mask.pt-fs { padding: 0; background: #000; }
.mask.pt-fs .modal { width: 100vw !important; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; border: 0; margin: 0; }
.mask.pt-fs .pt-view { height: 100vh; position: relative; }
.mask.pt-fs .pt-vside { display: none; }
.mask.pt-fs.pt-fsn .pt-vside { display: flex; position: absolute; right: 0; top: 48px; bottom: 0; width: 360px; background: rgba(18,20,24,.92); backdrop-filter: blur(6px); z-index: 3; border-left: 1px solid rgba(255,255,255,.08); }
.mask.pt-fs .pt-fsbtn { display: none; }
.mask.pt-fs .pt-vimg { position: absolute; inset: 0; }
.mask.pt-fs .pt-vimg img { max-width: 100vw; max-height: calc(100vh - 48px); margin-top: 48px; cursor: grab; }
.mask.pt-fs.grab .pt-vimg img { cursor: grabbing; transition: none; }
.mask.pt-fs .pt-fsbar { display: flex; position: absolute; left: 0; right: 0; top: 0; height: 48px; align-items: center; gap: 12px; padding: 0 16px; background: rgba(12,14,18,.92); color: #ddd; font-size: 13px; z-index: 4; }
.pt-fsbar a { cursor: pointer; padding: 5px 10px; border-radius: 6px; background: rgba(255,255,255,.08); color: #eee; }
.pt-fsbar a:hover { background: rgba(255,255,255,.16); }
.pt-fsbar a.on { background: rgba(240,185,11,.25); color: #f0b90b; }
.pt-fsbar #pf-z { min-width: 44px; text-align: center; color: #aaa; }
.mask.pt-fs .pt-nav { z-index: 4; }
.bn-arisk { margin: 2px 0 6px; display: flex; flex-direction: column; gap: 6px; }
.bn-arow { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.bn-arow.off { opacity: .45; pointer-events: none; }
.bn-arow .bn-inp.sm { width: 74px; height: 30px; margin: 0; padding: 0 8px; }
.bn-arow .bn-inp.sm input { width: 100%; text-align: right; }
.bn-arow b { margin-left: auto; font-size: 12px; }
[data-pdir] + [data-pdir] .bn-ptbl tr:first-child { display: none; }
.bn-chip.on { color: var(--accent-ink); border-color: var(--accent-line); }
.sc-opt .bn-inp.sm { width: 92px; height: 32px; margin: 0; padding: 0 8px; }
.sc-opt .bn-inp.sm input { width: 100%; text-align: right; }
.sc-wrap { max-height: 62vh; overflow: auto; }
.sc-tbl td { vertical-align: middle; }
.sc-tbl a[data-scsym] { cursor: pointer; }
.sc-tbl tr.sc-5 td { background: rgba(240,185,11,.06); }
.sc-tbl tr.hide { display: none; }
.sc-why td { background: var(--panel2); }
.sc-why ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; display: grid; gap: 2px; }
.bt-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: stretch; }
.bt-kpi { grid-template-columns: repeat(3, 1fr); }
.bt-kpi small { font-size: 11px; font-weight: 400; }
.bt-curve { background: var(--panel2); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.bt-svg { width: 100%; height: 130px; }
.bt-svg polyline { fill: none; stroke: #f0b90b; stroke-width: 2; vector-effect: non-scaling-stroke; }
.bt-svg .z { stroke: var(--line); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.bt-row { cursor: pointer; }
.bt-row:hover td { background: var(--panel2); }
@media (max-width: 1000px) { .bt-top { grid-template-columns: 1fr; } }
.bt-acct { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--panel2); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.bt-acct > div { display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.bt-acct span { font-size: 11.5px; color: var(--muted); }
.bt-acct b { font-size: 18px; }
.bt-acct .btn { margin-left: auto; }
.bt-sec { font-weight: 600; margin: 16px 0 8px; font-size: 13.5px; }
.ths-key { margin: 12px; padding: 14px; border-radius: 10px; background: var(--panel2); display: flex; flex-direction: column; gap: 8px; }
/* 单笔复盘 */
.bd-h{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.bd-svg{width:100%;height:auto;display:block;background:var(--bg2,transparent);border-radius:8px}
.bd-grid-l{stroke:var(--line-soft);stroke-width:1}
.bd-ax{fill:var(--muted);font-size:11px}
.bd-hold{fill:var(--yellow);opacity:.06}
.bd-u{stroke:var(--up);stroke-width:1}.bd-d{stroke:var(--down);stroke-width:1}
.bd-uf{fill:var(--up)}.bd-df{fill:var(--down)}
.bd-ma{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.8}
.bd-lvl{stroke:var(--blue);stroke-width:1.2;stroke-dasharray:2 3}
.bd-sl{stroke:var(--down);stroke-width:1.3;stroke-dasharray:6 4}
.bd-en{stroke:var(--yellow);stroke-width:1;opacity:.7}
.bd-arr{fill:var(--yellow)}.bd-ex{fill:var(--blue)}.bd-half{fill:var(--accent);stroke:#000;stroke-width:1}
.bd-tx{fill:var(--text,#ddd);font-size:11px;font-weight:600}.bd-tx.dn{fill:var(--down)}
.bd-leg{display:flex;gap:16px;flex-wrap:wrap;margin:6px 0 10px}.bd-leg i{display:inline-block;width:14px;height:3px;vertical-align:middle;margin-right:5px}
.bd-leg i.dash{height:0;border-top:2px dashed}.bd-leg i.dot{height:0;border-top:2px dotted}
.bd-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bd-sec{background:var(--bg3,rgba(255,255,255,.03));border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.bd-sec ol{margin:0;padding-left:20px;line-height:1.75}.bd-t{font-weight:700;margin-bottom:6px}
@media (max-width:800px){.bd-grid{grid-template-columns:1fr}}
.pv-box{fill:var(--blue);opacity:.10;stroke:var(--blue);stroke-opacity:.5;stroke-dasharray:3 3}
.pv-ma20{fill:none;stroke:#7aa2ff;stroke-width:1.3;opacity:.8}.pv-ma50{fill:none;stroke:#b07cff;stroke-width:1.3;opacity:.8}
.pv-en{stroke:var(--yellow);stroke-width:1.5}
.pv-q{list-style:none;margin:0;padding:0;line-height:1.9}
.modal.pv-full,.pv-full .modal,.pv-full{width:100vw!important;max-width:100vw!important;height:100vh!important;max-height:100vh!important;border-radius:0!important;top:0!important;left:0!important;margin:0!important;overflow:auto}
select.sel{background:var(--bg3,#1e2229);color:inherit;border:1px solid var(--line);border-radius:8px;padding:6px 8px;max-width:200px}
/* ================= 量化实验室 ================= */
.lab{--lab-bg:#070b14;--lab-p:#0c1322;--lab-p2:#101a2e;--lab-line:rgba(56,189,248,.14);--lab-line2:rgba(56,189,248,.28);--lab-cy:#22d3ee;--lab-tx:#e6edf7;--lab-mu:#8796b0;--lab-up:#2ebd85;--lab-dn:#f6465d;
  color:var(--lab-tx);background:radial-gradient(1200px 500px at 15% -10%,rgba(34,211,238,.10),transparent 60%),radial-gradient(900px 400px at 100% 0,rgba(124,58,237,.12),transparent 60%),var(--lab-bg);
  margin:-20px;padding:22px 24px 40px;min-height:calc(100vh - 60px);position:relative;overflow:hidden}
.lab::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--lab-line) 1px,transparent 1px),linear-gradient(90deg,var(--lab-line) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 520px);pointer-events:none}
.lab>*{position:relative}
.lab-up{color:var(--lab-up)!important}.lab-dn{color:var(--lab-dn)!important}
.lab-hero{display:flex;gap:24px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}
.lab-badge{display:inline-block;font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.32em;color:var(--lab-cy);border:1px solid var(--lab-line2);padding:6px 10px;border-radius:999px;background:rgba(34,211,238,.06);box-shadow:0 0 18px rgba(34,211,238,.18) inset}
.lab-hero h2{font-size:30px;margin:10px 0 4px;letter-spacing:.04em;background:linear-gradient(90deg,#e6f7ff,#7dd3fc 45%,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.lab-hero p{margin:0;color:var(--lab-mu);font-size:13px}
.lab-launch{display:flex;gap:12px;flex-wrap:wrap}
.lab-go{--c:#0891b2;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:8px;text-align:left;min-width:190px;padding:12px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 22%,transparent),rgba(255,255,255,.02));color:var(--lab-tx);cursor:pointer;transition:transform .15s,box-shadow .15s}
.lab-go:hover{transform:translateY(-2px);box-shadow:0 8px 28px color-mix(in srgb,var(--c) 40%,transparent),0 0 0 1px var(--c) inset}
.lab-go .lab-dot{grid-row:1;align-self:center}.lab-go b{font-size:15px}.lab-go small{grid-column:1/3;color:var(--lab-mu);font-size:11.5px;margin-top:2px}.lab-go em{grid-column:1/3;font-style:normal;font-size:12px;color:var(--c);margin-top:6px;filter:brightness(1.5)}
.lab-dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--lab-cy));box-shadow:0 0 10px var(--c,var(--lab-cy));display:inline-block}
.lab-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:14px}
.lab-kpi{background:linear-gradient(180deg,var(--lab-p2),var(--lab-p));border:1px solid var(--lab-line);border-radius:14px;padding:14px 16px;position:relative;overflow:hidden}
.lab-kpi::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--lab-cy),transparent 70%);opacity:.7}
.lab-kpi-l{font-size:12px;color:var(--lab-mu);letter-spacing:.04em}
.lab-kpi-v{font:700 26px/1.2 ui-monospace,"SF Mono",Consolas,monospace;margin:6px 0 2px;text-shadow:0 0 18px rgba(34,211,238,.25)}
.lab-kpi-s{font-size:11.5px;color:var(--lab-mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.lab-card{background:linear-gradient(180deg,rgba(16,26,46,.92),rgba(12,19,34,.92));border:1px solid var(--lab-line);border-radius:16px;padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.25);backdrop-filter:blur(6px)}
.lab-card-h{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.lab-card-h b{font-size:14px;letter-spacing:.03em}.lab-card-h>span{color:var(--lab-mu);font-size:12px}
.lab-chart{min-height:200px}
.lab-svg{width:100%;height:auto;display:block;overflow:visible}
.lab-svg .gl{stroke:rgba(135,150,176,.14)}.lab-svg .zl{stroke:rgba(135,150,176,.45);stroke-dasharray:3 4}.lab-svg .ax{fill:var(--lab-mu);font-size:10.5px;font-family:ui-monospace,Consolas,monospace}.lab-svg .ax.sw{fill:var(--lab-up);opacity:.7}
.lab-svg .ln{fill:none;stroke-width:2;stroke-linejoin:round;filter:drop-shadow(0 0 4px currentColor)}
.lab-svg .end{stroke:var(--lab-bg);stroke-width:2}
.lab-svg .xh{stroke:rgba(34,211,238,.6);stroke-dasharray:2 3}
.lab-svg .sweet{fill:rgba(46,189,133,.06);stroke:rgba(46,189,133,.25);stroke-dasharray:4 4}
.lab-svg .pt{fill-opacity:.55;stroke:var(--lab-bg);stroke-width:2;cursor:pointer;transition:fill-opacity .15s}
.lab-svg .pt:hover,.lab-svg .pt.sel{fill-opacity:.95;stroke:#fff;stroke-width:1.5}
.lab-leg{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--lab-mu);margin-top:6px}.lab-leg i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}.lab-leg span{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-nodata{color:var(--lab-mu);text-align:center;padding:70px 0}
.lab-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.lab-mc{--c:#0891b2;background:linear-gradient(150deg,color-mix(in srgb,var(--c) 16%,transparent),rgba(12,19,34,.95) 55%);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);border-radius:16px;padding:14px 16px}
.lab-mc-h{display:flex;gap:8px;align-items:center;margin-bottom:10px}.lab-mc-h b{font-size:15px}
.lab-mc-g{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.lab-mc-g span{display:block;font-size:11px;color:var(--lab-mu)}.lab-mc-g b{font:700 17px ui-monospace,Consolas,monospace}
.lab-mc-bars{display:flex;align-items:center;gap:3px;height:60px;margin:10px 0 4px;border-top:1px dashed var(--lab-line);border-bottom:1px dashed var(--lab-line);position:relative}
.lab-mc-bars::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid rgba(135,150,176,.25)}
.lab-mc-bars i{flex:1;max-width:14px;border-radius:3px;position:relative;cursor:default}
.lab-mc-bars i.u{background:var(--lab-up);align-self:flex-end;margin-bottom:30px;box-shadow:0 0 6px rgba(46,189,133,.5)}
.lab-mc-bars i.d{background:var(--lab-dn);align-self:flex-start;margin-top:30px;box-shadow:0 0 6px rgba(246,70,93,.5)}
.lab-mc-b{margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-filters{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.lab .seg{background:rgba(255,255,255,.03);border:1px solid var(--lab-line)}.lab .seg button.on{background:rgba(34,211,238,.16);color:var(--lab-cy)}
.lab-search{background:rgba(255,255,255,.04);border:1px solid var(--lab-line2);color:var(--lab-tx);border-radius:8px;padding:6px 10px;width:180px}
.lab-tbl-wrap{max-height:none}
.lab-tbl{width:100%;border-collapse:collapse;font-size:13px}
.lab-tbl th{position:sticky;top:0;background:#0d1628;color:var(--lab-mu);font-weight:500;font-size:12px;text-align:left;padding:9px 10px;border-bottom:1px solid var(--lab-line2);white-space:nowrap}
.lab-tbl th.srt{cursor:pointer}.lab-tbl th.on{color:var(--lab-cy)}
.lab-tbl td{padding:9px 10px;border-bottom:1px solid rgba(56,189,248,.07);vertical-align:middle}
.lab-tbl tbody tr{transition:background .12s}.lab-tbl tbody tr:hover{background:rgba(34,211,238,.05)}.lab-tbl tbody tr.sel{background:rgba(34,211,238,.09);box-shadow:inset 3px 0 0 var(--lab-cy)}
.lab-tbl .num{font-family:ui-monospace,Consolas,monospace}
.lab-nm b{cursor:pointer}.lab-nm b:hover{color:var(--lab-cy)}
.lab-par{max-width:360px;line-height:1.5}
.lab-chip{--c:#0891b2;display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--c) 22%,transparent);border:1px solid color-mix(in srgb,var(--c) 60%,transparent);color:#fff;vertical-align:middle}
.lab-spark{width:110px;height:30px;display:block}.lab-spark polyline{fill:none;stroke-width:1.6}.lab-spark .z{stroke:rgba(135,150,176,.3);stroke-dasharray:2 3}
.lab-act{white-space:nowrap}.lab-act a{margin-right:10px;color:var(--lab-cy);cursor:pointer;font-size:12px}
.lab-star{cursor:pointer;color:rgba(135,150,176,.4);font-size:15px}.lab-star.on{color:#fbbf24;text-shadow:0 0 8px rgba(251,191,36,.6)}
.lab-chk input{display:none}.lab-chk span{display:inline-block;width:15px;height:15px;border-radius:4px;border:1px solid var(--lab-line2);cursor:pointer;vertical-align:middle}.lab-chk input:checked+span{background:var(--lab-cy);box-shadow:0 0 8px var(--lab-cy)}
.lab-cmp{margin-top:14px}.lab-best{color:var(--lab-cy)!important;font-weight:700;text-shadow:0 0 10px rgba(34,211,238,.45)}.lab-sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
.lab-empty{text-align:center;padding:70px 0;color:var(--lab-mu)}.lab-empty b{display:block;color:var(--lab-tx);font-size:16px;margin:16px 0 6px}
.lab-empty-ring,.lab-loading i{width:56px;height:56px;margin:0 auto;border-radius:50%;border:2px solid rgba(34,211,238,.15);border-top-color:var(--lab-cy);animation:labspin 1.1s linear infinite;box-shadow:0 0 20px rgba(34,211,238,.25)}
.lab-loading{text-align:center;color:var(--lab-mu);padding:80px 0}.lab-loading i{display:block;margin-bottom:14px}
@keyframes labspin{to{transform:rotate(360deg)}}
.lab-tip{position:fixed;z-index:9999;pointer-events:none;background:rgba(7,11,20,.95);border:1px solid rgba(34,211,238,.35);border-radius:10px;padding:8px 10px;font-size:12px;color:#e6edf7;box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 14px rgba(34,211,238,.15);display:none;max-width:360px;line-height:1.6}
.lab-tip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.lab-params{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}.lab-params div{background:var(--panel2);border-radius:8px;padding:8px 10px}.lab-params span{display:block;font-size:11px;color:var(--muted)}.lab-params b{font-size:13px}
@media (max-width:1300px){.lab-kpis{grid-template-columns:repeat(3,1fr)}.lab-grid,.lab-models{grid-template-columns:1fr}}
.bd-charts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bd-cw{min-width:0}.bd-ct{font-size:12px;color:var(--muted);margin:0 0 4px 2px}
.pv-full .bd-svg{max-height:calc(100vh - 330px)}
.pv-full .bd-charts{grid-template-columns:1fr 1fr}
@media (max-width:1100px){.bd-charts{grid-template-columns:1fr}}
.bt-srt{cursor:pointer;user-select:none}.bt-srt:hover,.bt-srt.on{color:var(--accent)}
.bt-dbar{height:8px;background:rgba(127,127,127,.12);border-radius:4px;overflow:hidden}.bt-dbar i{display:block;height:100%;border-radius:4px}.bt-dbar i.u{background:var(--up)}.bt-dbar i.d{background:var(--down)}
input.bt-date{width:140px;color-scheme:dark}
.bt-pre{display:inline-flex;gap:6px;flex-wrap:wrap}.bt-pre a{font-size:12px;padding:3px 8px;border-radius:999px;border:1px solid var(--line);cursor:pointer;color:var(--text2)}.bt-pre a:hover{border-color:var(--accent);color:var(--accent)}
.lab-ks{margin-bottom:14px}.lab-ivc{display:inline-flex;gap:6px;align-items:center;font-size:13px;cursor:pointer}.lab-ivc input{accent-color:#22d3ee}
.lab-ksbar{height:8px;border-radius:4px;background:rgba(34,211,238,.1);margin:10px 0 4px;overflow:hidden}.lab-ksbar i{display:block;height:100%;background:linear-gradient(90deg,#0891b2,#22d3ee);box-shadow:0 0 10px #22d3ee}
.bd-add{fill:#ffb020;stroke:#000;stroke-width:1}
.bf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;max-height:60vh;overflow:auto;padding-right:4px}
.bf-ck{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;cursor:pointer;font-size:13px}
.bf-ck span{margin-left:auto;font-size:11px}.bf-ck.main{border-color:var(--accent)}
.btg-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.btg{border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:rgba(255,255,255,.015)}
.btg-wide{grid-column:1/-1}
.btg-h{font-size:12px;color:var(--muted);letter-spacing:.05em;margin-bottom:6px}
.btf{display:flex;align-items:center;gap:10px;min-height:38px}
.btf>label{width:68px;flex:none;color:var(--muted);font-size:13px}
.btf-v{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.btg-wide .btf-v{gap:8px 10px}
.btg-foot{display:flex;align-items:flex-start;gap:12px;margin:10px 0}
.btg-rule{flex:1;min-width:0}.btg-rule summary{cursor:pointer;color:var(--muted);font-size:12px}.btg-rule div{margin-top:6px;line-height:1.7}
@media(max-width:900px){.btg-wrap{grid-template-columns:1fr}}
.btg-cost{gap:10px 10px!important}.btg-cost>span{color:var(--muted);font-size:13px}
.btg-foot .btn.pri{padding:8px 28px}
.btg .bt-pre{display:inline-flex;flex-wrap:wrap;gap:4px}
.btp{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btp>span:first-child{color:var(--muted);font-size:13px}
.btf-v .bn-inp.sm{flex:none}
.btg-cost{display:grid!important;grid-template-columns:repeat(2,max-content);gap:10px 22px!important}
.lab-tune-bar{background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.35);border-radius:8px;padding:9px 12px;margin-bottom:10px;font-size:13px;line-height:1.6}
.lab-tune-bar a,.lab-dhead a{color:var(--accent);cursor:pointer}
.lab-par-of{color:#22d3ee;opacity:.85}
.lab-dhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}.lab-dhead>div{display:flex;align-items:center;gap:8px}
.lab-dnote{background:rgba(255,255,255,.03);border-left:3px solid #22d3ee;border-radius:6px;padding:10px 14px;margin-bottom:12px;line-height:1.9;font-size:13.5px}
.lab-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.lab-dtbl td,.lab-dtbl th{padding:6px 10px}.lab-chg{color:#22d3ee;font-weight:600}
.lab-dsplit{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.lab-dbar{display:grid;grid-template-columns:300px 1fr 90px;align-items:center;gap:10px;font-size:13px}.lab-dbar>div{height:10px;background:rgba(255,255,255,.04);border-radius:5px;overflow:hidden}.lab-dbar i{display:block;height:100%;border-radius:5px}.lab-dbar b{text-align:right}.lab-dbar.tot{border-top:1px solid var(--line);padding-top:6px;font-weight:600}
.lab-dcols{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
@media(max-width:900px){.lab-dgrid,.lab-dcols{grid-template-columns:1fr}.lab-dbar{grid-template-columns:1fr 80px}.lab-dbar>div{display:none}}
.lab-ks-times{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);line-height:1.6}
.lab-ks-times b{font-weight:600}.lab-ks-times .y{color:var(--yellow)}
.lab-ks-times>span:last-child{flex-basis:100%}
.rb-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.rb-tab{background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:7px 14px;cursor:pointer;font-size:13px}
.rb-tab.on{color:var(--text);border-color:#22d3ee;background:rgba(34,211,238,.1)}
.rb-note{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:10px}
.rb-v{border-radius:8px;padding:8px 12px;margin:6px 0;font-size:13.5px;line-height:1.7;border-left:3px solid}
.rb-v1{background:rgba(16,185,129,.08);border-color:var(--up)}.rb-v2{background:rgba(234,179,8,.08);border-color:var(--yellow)}.rb-v3{background:rgba(239,68,68,.08);border-color:var(--down)}
.rb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.rb-svg{width:100%;height:auto;display:block}
.rb-hu{fill:rgba(34,211,238,.55)}.rb-hd{fill:rgba(239,68,68,.5)}.rb-zero{stroke:var(--muted);stroke-dasharray:3 3}
.rb-mark{stroke:var(--yellow);stroke-width:2}.rb-tx{fill:var(--yellow);font-size:11px}.rb-ax{fill:var(--muted);font-size:10px}
.rb-risk{fill:none;stroke:#22d3ee;stroke-width:1.4}
.rb-kpis{grid-template-columns:repeat(6,1fr);margin:10px 0}
.rb-dist div{display:grid;grid-template-columns:60px 1fr 60px;align-items:center;gap:10px;font-size:12.5px;margin:3px 0}.rb-dist i{display:block;height:9px;background:#22d3ee;border-radius:4px;min-width:2px}.rb-dist b{text-align:right}
.rb-gform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}.rb-gform .inp{width:140px}
.rb-heat{border-collapse:separate;border-spacing:4px;width:100%}.rb-heat th{font-size:12px;color:var(--muted);font-weight:500;padding:6px}
.rb-heat td{border-radius:8px;padding:10px 8px;text-align:center;cursor:pointer;min-width:110px}.rb-heat td b{display:block;font-size:16px;color:#fff}.rb-heat td small{display:block;font-size:11px;color:rgba(255,255,255,.75);margin-top:2px}
.rb-heat td.best{outline:2px solid var(--yellow)}
@media(max-width:900px){.rb-grid2{grid-template-columns:1fr}.rb-kpis{grid-template-columns:repeat(2,1fr)}}
.bt-minb{font-weight:700;margin-left:auto;margin-right:6px}
.bt-pill{position:fixed;right:20px;bottom:20px;z-index:9999;background:var(--panel,#1b1e24);border:1px solid #22d3ee;border-radius:12px;padding:10px 14px;max-width:420px;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.bt-pill b{display:flex;align-items:center;gap:8px;font-size:13.5px}.bt-pill span{color:var(--muted);line-height:1.5}
.bt-pill.done{border-color:var(--up);background:rgba(16,185,129,.12)}
.bt-pill:hover{filter:brightness(1.15)}
.bt-spin{width:12px;height:12px;border:2px solid #22d3ee;border-top-color:transparent;border-radius:50%;display:inline-block;animation:btspin .8s linear infinite}
@keyframes btspin{to{transform:rotate(360deg)}}
.gn-sum{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13px}.gn-rep{background:rgba(34,197,94,.12);border-radius:6px;padding:2px 7px;font-size:12px}
.gn-tbl{width:100%;border-collapse:collapse}.gn-tbl td{border-bottom:1px solid var(--line);padding:8px 6px;vertical-align:top}.gn-day{width:110px;white-space:nowrap}.gn-day .tag{margin-left:6px}
.gn-chips{display:flex;flex-wrap:wrap;gap:6px}
.gn-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:8px;padding:5px 9px;cursor:pointer;color:var(--text);font-size:13px}
.gn-chip:hover{border-color:var(--accent)}.gn-chip i{font-style:normal;color:var(--muted);font-size:11px}.gn-chip span{font-size:12px}.gn-chip.done{border-color:rgba(34,197,94,.6);background:rgba(34,197,94,.08)}.gn-chip em{font-style:normal;color:var(--up)}
.gn-st{margin:0;padding-left:18px;line-height:1.85;font-size:13.5px}.gn-tags{display:flex;flex-wrap:wrap;gap:6px}
.gw{display:flex;flex-direction:column;gap:12px}
.gw-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.gw-title{font-size:17px}
.gw-hist{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.gw-h{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer;color:var(--text);min-width:120px}
.gw-h.on{border-color:var(--accent);background:rgba(240,185,11,.08)}.gw-h span,.gw-h small{color:var(--muted);font-size:12px}
.gw-grid{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(260px,1fr);gap:12px}
.gw-ol{margin:0;padding-left:22px;line-height:2}.gw-ol li b{display:inline-block;min-width:80px}.gw-ol li small{margin-left:8px}
.gw-sum3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.gw-sum3 textarea{width:100%;margin-top:6px}
.gw-miss{color:var(--accent);cursor:pointer}
@media(max-width:1100px){.gw-grid,.gw-sum3{grid-template-columns:1fr}}
#gwplan-bar{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:10px;background:rgba(20,24,30,.92);border:1px solid #22d3ee;box-shadow:0 6px 24px rgba(0,0,0,.4);font-size:13px;white-space:nowrap}
#gwplan-bar b{color:#22d3ee}
.gw-tr-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px}
.gw-form{display:grid;grid-template-columns:90px 1fr;gap:10px 12px;align-items:center}.gw-form>label{color:var(--muted);font-size:13px}
.rx{display:flex;flex-direction:column;gap:12px}
.rx-form{display:grid;grid-template-columns:90px 1fr;gap:12px 14px;align-items:center}.rx-form>label{color:var(--muted);font-size:13px}
.rx-q{cursor:pointer;color:var(--accent);font-size:12.5px;margin-left:4px}
.rx-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:sticky;top:0;z-index:5;background:var(--bg);padding:6px 0}
.rx-clock{font-size:18px;font-variant-numeric:tabular-nums}
.rx-grid{display:grid;grid-template-columns:260px minmax(0,1fr) 300px;gap:12px}
.rx-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.rx-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;cursor:pointer;font-size:13px}
.rx-row:hover{background:rgba(255,255,255,.04)}.rx-row.on{background:rgba(240,185,11,.1)}
.rx-row b{min-width:76px}.rx-row i{font-style:normal;color:var(--muted);font-size:11px;margin-left:auto}.rx-row a{margin-left:auto;cursor:pointer}
.rx-feed{max-height:300px;overflow:auto}
.rx-f{display:grid;grid-template-columns:44px 80px 1fr 90px;gap:8px;font-size:12.5px;padding:4px 6px;border-left:2px solid transparent;cursor:pointer}
.rx-f.u{border-left-color:var(--up)}.rx-f.d{border-left-color:var(--down)}.rx-f:hover{background:rgba(255,255,255,.04)}
.rx-ch-h{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
@media(max-width:1200px){.rx-grid{grid-template-columns:1fr}}
.rx-q.on{color:var(--text);font-weight:600;text-decoration:underline}
.top-eye{margin-left:14px;font-size:15px;opacity:.7}.top-eye:hover{opacity:1}
.bd-vu{fill:rgba(14,203,129,.6)}.bd-vd{fill:rgba(246,70,93,.6)}
.bd-vm5{fill:none;stroke:#f0b90b;stroke-width:1}.bd-vm10{fill:none;stroke:#b07cff;stroke-width:1}
.bd-vt{font-size:11px;fill:var(--muted)}.bd-vt .vu{fill:#0ecb81}.bd-vt .vd{fill:#f6465d}.bd-vt .m5{fill:#f0b90b}.bd-vt .m10{fill:#b07cff}.bd-vt .muted{fill:var(--muted)}
/* ---------- 币安风格 K 线（bnchart.js）+ 行情复现主窗口（交易界面） ---------- */
.bn-svg{display:block;font-family:"IBM Plex Sans","Segoe UI",sans-serif}.bn-svg .bn-g{stroke:var(--line-soft,#1e2329)}.bn-svg .bn-g2{stroke:var(--line,#2b3139)}
.bn-ax{fill:var(--muted,#848e9c);font-size:10.5px;font-variant-numeric:tabular-nums}.bn-lg{font-size:11px;font-variant-numeric:tabular-nums}
.bn-lp{fill:#fff;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}.bn-ln{fill:#0b0e11;font-size:10.5px;font-weight:600}
.bn-empty{display:grid;place-items:center;color:var(--muted);font-size:13px}
.bn-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:4px 2px 8px;border-bottom:1px solid var(--line)}
.bn-sym{font-size:17px}.bn-perp{font-size:11px;color:var(--muted);background:var(--panel3);padding:1px 6px;border-radius:3px;margin-left:-10px}
.bn-last{font-size:19px;font-variant-numeric:tabular-nums}.bn-last.u,.bn-head em.u{color:#0ecb81}.bn-last.d,.bn-head em.d{color:#f6465d}
.bn-kv,.bnx-kv{display:flex;flex-direction:column;line-height:1.3}.bn-kv i,.bnx-kv i{font-style:normal;color:var(--muted);font-size:11px}.bn-kv em,.bnx-kv em{font-style:normal;font-size:12.5px;font-variant-numeric:tabular-nums}
.bnx .rx-bar{background:var(--bg)}
.bnx-grid{display:grid;grid-template-columns:330px minmax(0,1fr) 290px;gap:6px;align-items:start}
.bnx-l,.bnx-c,.bnx-r{display:flex;flex-direction:column;gap:6px;min-width:0}
.bnx-card{background:var(--panel);border-radius:6px;padding:10px 12px;min-width:0}
.bnx-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.bnx-h>span{color:var(--muted);font-size:11.5px}
.bnx-tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);margin:-2px 0 6px;font-size:13.5px}
.bnx-tabs a{cursor:pointer;color:var(--muted);padding:4px 0 7px;border-bottom:2px solid transparent}.bnx-tabs a.on{color:var(--text);border-bottom-color:#f0b90b;font-weight:600}
.bnx-lh{display:grid;grid-template-columns:1fr 90px 70px;font-size:11px;color:var(--muted);padding:0 6px 4px}
.bnx-list .rx-row{display:grid;grid-template-columns:1fr 90px 70px auto;padding:4px 6px;font-size:12.5px}.bnx-list .rx-row span{text-align:right;font-variant-numeric:tabular-nums}
.bnx-list{max-height:430px;overflow:auto}.bnx-px{color:var(--text)}
.bnx-hp{font-style:normal;font-size:10px;color:#f0b90b;border:1px solid #f0b90b;border-radius:3px;padding:0 3px;margin-left:4px}
.bnx-fl .rx-feed{max-height:calc(100vh - 640px);min-height:220px}
.rx-f.me{background:rgba(240,185,11,.08)}
.bnx-tfs{display:flex;align-items:center;gap:14px;font-size:12.5px;padding:6px 2px}.bnx-tfs a{cursor:pointer;color:var(--muted)}.bnx-tfs a.on{color:#f0b90b;font-weight:600}
.bnx-star{cursor:pointer;color:var(--muted);font-size:13px}.bnx-star.on{color:#f0b90b}
.bnx-tbl{width:100%;border-collapse:collapse;font-size:12.5px}.bnx-tbl th{color:var(--muted);font-weight:400;text-align:left;padding:5px 6px;font-size:11.5px}
.bnx-tbl td{padding:7px 6px;border-top:1px solid var(--line-soft);font-variant-numeric:tabular-nums}.bnx-tbl tr{cursor:pointer}.bnx-tbl tr:hover td{background:rgba(255,255,255,.02)}
.bnx-sd{display:inline-block;width:3px;height:14px;vertical-align:-2px;margin-right:6px}.bnx-sd.l{background:#0ecb81}.bnx-sd.s{background:#f6465d}
.bnx-tg{font-size:10.5px;color:#f0b90b;background:rgba(240,185,11,.12);padding:1px 5px;border-radius:3px}.bnx-or{color:#ff9800}
.bnx-cl{cursor:pointer;color:#f0b90b;margin-left:10px;white-space:nowrap}.nw{white-space:nowrap}
.bnx-pill{font-size:11.5px;background:var(--panel3);color:var(--text)!important;padding:2px 10px;border-radius:4px}
.bnx-lev{font-size:12px;color:var(--muted)}.bnx-lev input{width:38px;background:var(--panel3);border:0;color:var(--text);text-align:center;border-radius:3px;padding:2px}
.bnx-osym{font-size:13px;margin:2px 0 8px}.bnx-av{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px}.bnx-av b{color:var(--text);font-weight:500}
.bnx-inp{display:flex;align-items:center;background:var(--panel3);border-radius:6px;padding:0 10px;height:38px;margin:6px 0;border:1px solid transparent}.bnx-inp:focus-within{border-color:#f0b90b}
.bnx-inp span{color:var(--muted);font-size:12.5px;width:52px}.bnx-inp input{flex:1;min-width:0;background:none;border:0;color:var(--text);text-align:right;font-size:14px;outline:none}.bnx-inp i{font-style:normal;margin-left:8px;font-size:12.5px}
.bnx-pcts{display:flex;gap:6px}.bnx-pcts a{flex:1;text-align:center;cursor:pointer;font-size:11.5px;color:var(--muted);border:1px solid var(--line2);border-radius:4px;padding:2px 0}.bnx-pcts a:hover{color:#f0b90b;border-color:#f0b90b}
.bnx-pcts.sm a{font-size:10.5px;padding:1px 0}
.bnx-est{font-size:11.5px;color:var(--muted);margin:8px 0;min-height:16px;line-height:1.6}.bnx-est b{color:var(--text)}
.bnx-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bnx-btns button{border:0;border-radius:6px;height:40px;font-size:14.5px;font-weight:600;color:#fff;cursor:pointer}
.bnx-long{background:#0ecb81}.bnx-short{background:#f6465d}.bnx-btns button:hover{filter:brightness(1.08)}
.bnx-kvs{display:grid;grid-template-columns:1fr auto;gap:6px 10px;font-size:12.5px}.bnx-kvs>span{color:var(--muted)}.bnx-kvs>b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:1250px){.bnx-grid{grid-template-columns:240px minmax(0,1fr)}.bnx-r{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}}
.rxk-wrap{display:flex;gap:4px;align-items:stretch}.rxk-wrap>.kl-side{flex:none}.rxk-main{flex:1;min-width:0}
.rxk-ind{cursor:pointer;color:var(--muted);font-size:12px}.rxk-ind.on{color:#f0b90b;font-weight:600}.bnx-sep{width:1px;height:12px;background:var(--line2)}
.bnx-mk{padding:6px 0 4px}.bnx-mk .mkt-ltabs{gap:14px;padding:6px 12px 8px;font-size:13px;white-space:nowrap;overflow:hidden}.bnx-mk .mkt-ltabs a{cursor:pointer}
.bnx-q{padding:0 12px 8px}.bnx-q input{height:30px;width:100%}
.bnx-mlist{max-height:calc(100vh - 470px);min-height:360px}.bnx-mlist .mkt-row{height:46px}
.bnx-mk .mkt-head{padding-top:2px}
/* 行情复现主窗口 = 左：全部币列表 + 异动；右：交易训练同一套回放 + 下单界面 */
.rx2-bar{display:flex;align-items:center;gap:12px;height:40px;margin-bottom:6px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.rx2-grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:6px;align-items:stretch}
.rx2-l{display:flex;flex-direction:column;gap:6px;min-width:0;height:calc(100vh - 56px - 36px - 46px);min-height:600px}
.rx2-l .bnx-mk{flex:1.6;min-height:0;display:flex;flex-direction:column}.rx2-l .bnx-mlist{max-height:none;min-height:0;flex:1}
.rx2-l .bnx-fl{flex:1;min-height:0;display:flex;flex-direction:column}.rx2-l .bnx-fl .rx-feed{max-height:none;min-height:0;flex:1;overflow:auto}
.rx2-c{min-width:0}.rx2-c>.rp{height:calc(100vh - 56px - 36px - 46px)}
.rx2 .bnx-tabs{align-items:flex-end}
body.focus .rx2-c>.rp,body.focus .rx2-l{height:calc(100vh - 16px - 46px)}
.rx2 #rx-ftabs{white-space:nowrap;gap:0 2px;justify-content:space-between;overflow:visible;flex-wrap:wrap;height:auto;min-height:40px}.rx2 #rx-ftabs a{white-space:nowrap;font-size:12.5px;padding-left:3px;padding-right:3px;flex:0 0 auto}.rx2 #rx-ftabs .small{overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:11px}
.tr-sleep{display:flex;flex-direction:column;gap:6px;padding:10px 12px;margin:0 0 10px;border-radius:8px;background:rgba(132,142,156,.14);border:1px dashed rgba(132,142,156,.5);font-size:12px;color:var(--muted)}.tr-sleep b{color:var(--text);font-size:13px}.tr-sleep .btn{align-self:flex-start}
.rp.asleep .rp-order>*:not(.tr-sleep){opacity:.35;pointer-events:none;filter:grayscale(1)}
.rx-learn{display:flex;flex-direction:column;gap:4px;line-height:1.7}.rx-learn b{color:var(--text)}
.rx-f.my{background:rgba(240,185,11,.12);border-left-color:#f0b90b!important}.rx-f.my span:nth-child(3){color:#f0b90b;font-weight:600}
.rx-pk{display:grid;grid-template-columns:70px 52px 1fr 70px;gap:4px 8px;align-items:center;padding:6px;border-bottom:1px solid var(--line-soft);font-size:12.5px;cursor:pointer}.rx-pk:hover{background:rgba(255,255,255,.04)}.rx-pk.cur{background:rgba(240,185,11,.08)}
.rx-pk>.small.muted{grid-column:1/3}.rx-pk>.btn,.rx-pk>.tag{justify-self:end;grid-column:3/5}
/* 信号卡片 */
.sg{--c:#848e9c;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px 9px 8px;margin:0 0 2px;border-radius:8px;cursor:pointer;position:relative;transition:background .12s}
.sg:hover{background:var(--panel2)}
.sg-up{--c:#0ecb81}.sg-dn{--c:#f6465d}.sg-vol{--c:#f0b90b}.sg-brk{--c:#3b82f6}.sg-hot{--c:#ff7a45}.sg-my{--c:#f0b90b}
.sg-my{background:color-mix(in srgb,var(--c) 8%,transparent)}.sg-my::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--c)}
.sg-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px;background:color-mix(in srgb,var(--c) 15%,transparent)}
.sg-m{min-width:0;display:flex;flex-direction:column;gap:3px}
.sg-t{display:flex;align-items:baseline;gap:7px;min-width:0;white-space:nowrap}.sg-t b{font-size:13.5px;letter-spacing:.2px}.sg-t span{font-size:11.5px;font-weight:600;color:var(--c);overflow:hidden;text-overflow:ellipsis}
.sg-d{display:flex;flex-wrap:wrap;gap:4px}.sg-d i{font-style:normal;font-size:10.5px;line-height:16px;padding:0 6px;border-radius:4px;color:var(--muted);background:var(--panel3);white-space:nowrap;font-variant-numeric:tabular-nums}
.sg-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.sg-p{font-size:12px;font-weight:700;padding:2px 7px;border-radius:5px;font-variant-numeric:tabular-nums;min-width:56px;text-align:center}.sg-p.u{color:#0ecb81;background:rgba(14,203,129,.12)}.sg-p.d{color:#f6465d;background:rgba(246,70,93,.12)}
.sg-r time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.rx2 .bnx-fl .rx-feed{padding:2px 0}
.bnx-15{font-style:normal;font-size:9.5px;color:var(--muted);border:1px solid var(--line2);border-radius:3px;padding:0 3px;margin-left:4px}
.rv-row{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px}.rv-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.rv-b{display:flex;gap:6px;margin-top:8px}
.rv-rs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}.rv-rs[hidden]{display:none}
.rv-chip{cursor:pointer;font-size:12px;padding:2px 9px;border-radius:12px;border:1px solid var(--line2);color:var(--muted)}.rv-chip.on{color:#fff;background:#f6465d;border-color:#f6465d}
.btn.danger{background:#f6465d;color:#fff;border-color:#f6465d}

.rx-myf{display:flex;flex-wrap:wrap;gap:6px;padding:6px 8px 8px;border-bottom:1px solid var(--line,#2b3139);margin-bottom:4px}
.rx-myf a{font-size:12px;padding:3px 9px;border-radius:12px;background:#1e2329;color:#b7bdc6;cursor:pointer;user-select:none;white-space:nowrap}
.rx-myf a:hover{color:#eaecef}
.rx-myf a.on{background:#f0b90b;color:#0b0e11;font-weight:600}
.rx-myf a i{font-style:normal;opacity:.7;margin-left:2px}

.sg-pat{font-size:11px;padding:1px 7px;border-radius:9px;background:#2b2f36;color:#f0b90b;cursor:pointer;margin-left:4px;white-space:nowrap}
.sg-pat:hover{background:#3a3f47}
.sg-pat.ok{color:#0ecb81}

.rx2-bar .rx-eq{display:inline-flex;align-items:baseline;gap:6px;margin-left:14px;padding:3px 12px;border:1px solid rgba(240,185,11,.45);border-radius:6px;background:rgba(240,185,11,.08);white-space:nowrap}.rx2-bar .rx-eq i{font-style:normal;font-size:12px;color:var(--muted)}.rx2-bar .rx-eq b{font-size:20px;font-weight:700;color:#f0b90b}.rx2-bar .rx-eq em{font-style:normal;font-size:12px;color:var(--muted)}.rx2-bar .rx-eq span{font-size:14px;font-weight:600}.rx2-bar .rx-eq span.up{color:var(--up)}.rx2-bar .rx-eq span.down{color:var(--down)}
.rx2-bar{flex-wrap:wrap;height:auto;min-height:40px;row-gap:6px;overflow:visible}
.rx2 #rx-rktabs{flex-wrap:wrap;row-gap:4px;gap:4px 12px}

.mkt-dual{position:absolute;inset:0;display:flex;flex-direction:column}.mkt-dual-a{position:relative;flex:0 0 56%;min-height:0}.mkt-dual-a>.chart{position:absolute;inset:0;height:auto!important}.mkt-dual-bar{display:flex;gap:2px;align-items:center;padding:3px 8px;border-top:1px solid var(--line,rgba(127,127,127,.2));border-bottom:1px solid var(--line,rgba(127,127,127,.2));font-size:12px}.mkt-dual-bar a{padding:2px 7px;border-radius:4px;cursor:pointer;color:var(--muted)}.mkt-dual-bar a.on{background:var(--bg2,rgba(127,127,127,.15));color:var(--text);font-weight:600}.mkt-dual-b{flex:1;position:relative;min-height:0}.mkt-dual-b>.chart{position:absolute;inset:0;height:auto!important}
.sc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sc-tabs .chip b { margin-left: 3px; font-weight: 600; }
.sc-tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 3px; margin: 1px 0; }
.sc-tag.h { color: var(--up); background: rgba(46,189,133,.12); }
.sc-tag.l { color: var(--down); background: rgba(246,70,93,.12); }
.sc-tag.s { color: var(--yellow); background: rgba(240,185,11,.12); }
.sc-tag.t { color: #6f9bff; background: rgba(47,107,255,.14); }
.sc-tag.b { color: #ff8a3d; background: rgba(255,138,61,.15); font-weight: 600; }
.sc-tbl td.small { white-space: normal; min-width: 360px; line-height: 1.6; }
.sc-tag.d { color: #ff5c8a; background: rgba(255,92,138,.14); font-weight: 600; }
.sc-tag.x { color: #b48cff; background: rgba(150,100,255,.15); font-weight: 600; }
.sc-tbl td:nth-child(4) { min-width: 128px; white-space: normal !important; }
.sc-tag { white-space: nowrap; }
/* 箱体突破 */
.bb-wrap { display: grid; gap: 14px; max-width: 1280px; }
.bb-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 1000px) { .bb-head { grid-template-columns: 1fr; } }
.bb-h { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.bb-head ol { margin: 0; padding-left: 1.3em; line-height: 1.8; }
.bb-plan .small { line-height: 1.8; }
.bb-opt .bn-inp.sm { width: 92px; height: 32px; margin: 0; padding: 0 8px; }
.bb-opt .bn-inp.sm input { width: 100%; text-align: right; }
.bb-tbl td { vertical-align: middle; white-space: nowrap; }
.bb-tbl a[data-bbsym] { cursor: pointer; }
.bb-tbl tr.bb-off td { opacity: .45; }
.bb-chart { --bb-bg: var(--panel2, #1a1d21); --bb-box: rgba(59,130,246,.07); --bb-boxl: rgba(59,130,246,.75); --bb-y: rgba(240,185,11,.9); --bb-y2: rgba(240,185,11,.06);
  --bb-lv: rgba(160,160,170,.7); --bb-l5: rgba(56,140,255,.95); --bb-l5s: #2f6bff; --bb-path: rgba(255,90,90,.75); --bb-num: #ff5a5a; --bb-numbg: var(--bb-bg); --bb-pos: rgba(120,120,140,.06);
  border-radius: 6px; display: block; }
.bb-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.bb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bb-lg { display: inline-block; width: 18px; height: 0; border-top: 2px solid; }
.bb-lg.box { height: 10px; border: 1.5px solid rgba(59,130,246,.75); background: rgba(59,130,246,.1); }
.bb-lg.y { height: 10px; border: 1.5px solid rgba(240,185,11,.9); }
.bb-lg.l5 { border-color: rgba(56,140,255,.95); }
.bb-lg.lv { border-top: 1.5px dashed rgba(160,160,170,.8); }
.bb-lg.sl { border-top: 2px dashed var(--down); }
.bb-lg.tp { border-top: 2px dashed var(--up); }
.sp-it.sig-x{border-left:3px solid #f59e0b}
.sp-it.sig-fast{border-left:3px solid var(--up)}

/* 自选：颜色标签 + 板块 */
.mkt-row { position: relative; }
.mkt-flag { position: absolute; left: 0; top: 50%; width: 9px; height: 18px; margin-top: -9px; cursor: pointer; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); background: var(--fc, transparent); }
.mkt-row:hover .mkt-flag:not(.on) { background: var(--line); }
.mkt-flag:hover { filter: brightness(1.2); }
.wm-pop { position: fixed; z-index: 9999; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.35); padding: 8px; min-width: 200px; }
.wm-cols { display: flex; gap: 8px; align-items: center; padding: 2px; }
.wm-cols a { width: 22px; height: 22px; border-radius: 50%; background: var(--c); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wm-cols a.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--c); }
.wm-cols a.wm-none { background: none; border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.wm-menu { margin-top: 8px; border-top: 1px solid var(--line-soft); padding-top: 6px; display: flex; flex-direction: column; }
.wm-menu a { padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.wm-menu a:hover { background: var(--panel2); }
.wm-menu a.on { color: var(--accent); }
.wm-menu .wm-mt { font-size: 11px; color: var(--muted); padding: 2px 8px; }
.wm-menu hr { border: 0; border-top: 1px solid var(--line-soft); margin: 4px 0; }
.wm-bar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.wm-bar [data-wmadd] { color: var(--accent); cursor: pointer; }
.wm-f { cursor: pointer; color: var(--muted); padding: 1px 6px; border-radius: 10px; }
.wm-f.on { color: var(--text); background: var(--panel3); }
.wm-dot { width: 12px; height: 12px; padding: 0; border-radius: 50%; background: var(--c); opacity: .55; }
.wm-dot.on { opacity: 1; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--c); background: var(--c); }
.wm-sec { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; color: var(--muted); font-size: 12px; letter-spacing: .3px; border-top: 1px solid var(--line-soft); user-select: none; }
.wm-sec:hover { background: var(--panel2); }
.wm-sec .wm-t { color: var(--text); font-weight: 600; }
.wm-chev { display: inline-block; transition: transform .15s; font-size: 14px; width: 10px; }
.wm-sec.open .wm-chev { transform: rotate(90deg); }
.wm-sec > a { opacity: 0; color: var(--muted); padding: 0 2px; }
.wm-sec:hover > a { opacity: 1; }
.wm-sec > a:hover { color: var(--text); }
.wm-name { background: var(--panel2); border: 1px solid var(--accent); color: var(--text); border-radius: 4px; padding: 2px 6px; font-size: 12px; width: 140px; }
.wm-drop { min-height: 6px; }
.wm-over { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--panel2); }
.wm-hint { padding: 10px 14px; }

/* 币种图标 */
.mkt-row .nm { display: flex; align-items: center; gap: 8px; }
.mkt-row .nmt { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ci { width: 24px; height: 24px; border-radius: 50%; flex: none; object-fit: cover; background: var(--panel2); vertical-align: middle; }
.ci-l { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: hsl(var(--h), 55%, 45%); }
#mkt-hdr .ci { width: 26px; height: 26px; margin-right: 2px; }
.mkt-row { grid-template-columns: 14px minmax(0, 1fr) 84px 78px; gap: 6px; padding-left: 10px; }
.mkt-row .nm { gap: 7px; }
.mkt-row .nm .ci { width: 22px; height: 22px; }
.mkt-row .nmt .muted2 { display: none; }
.mkt-row .nmt { white-space: nowrap; }