/* ============================================================
   K线笔记 · 蜡烛形态工具皮肤 (candletools.css)
   贴本站蓝白 OKX bento 风：白卡 + 深色蜡烛舞台 + 发丝边 + 柔影。
   速查表 .ct-* / 测验 .qz-*。仅样式无文案，全语种共用。
   ============================================================ */

/* ---------- 工具栏 + 筛选 chip ---------- */
.ct-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;max-width:var(--wrap);margin:0 auto 14px}
.ct-toolbar .ct-fl{font-family:var(--label);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.ct-filters{display:flex;flex-wrap:wrap;gap:8px}
.ct-chip{font-family:var(--label);font-weight:600;font-size:13.5px;padding:9px 16px;min-height:42px;border:1px solid var(--line-strong);background:#fff;border-radius:30px;cursor:pointer;color:var(--ink-soft);transition:.15s;letter-spacing:.02em;display:inline-flex;align-items:center;gap:7px}
.ct-chip:hover{border-color:var(--accent);color:var(--accent)}
.ct-chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.ct-chip .n{font-family:var(--num);font-size:12px;opacity:.85}

/* ---------- 图例 ---------- */
.ct-legend{display:flex;flex-wrap:wrap;gap:8px 20px;max-width:var(--wrap);margin:0 auto 22px;font-size:13px;color:var(--ink-soft);font-family:var(--label);letter-spacing:.01em}
.ct-legend span{display:inline-flex;align-items:center;gap:7px}
.ct-legend .sw{width:13px;height:13px;border-radius:4px;display:inline-block;flex:0 0 auto}
.ct-legend .sw.up{background:#0ea66f}
.ct-legend .sw.down{background:#e64545}
.ct-legend .sw.rel-h{background:#0ea66f}
.ct-legend .sw.rel-m{background:#e0a106}
.ct-legend .sw.rel-l{background:#9aa3b2}

/* ---------- 形态卡片网格 ---------- */
.ct-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:var(--wrap);margin:0 auto}
@media(max-width:900px){.ct-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.ct-grid{grid-template-columns:1fr}}

.ct-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(14,21,38,.04),0 8px 22px rgba(14,21,38,.05);transition:transform .18s ease,box-shadow .18s,border-color .18s}
.ct-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(14,21,38,.12);border-color:var(--line-strong)}

/* 深色蜡烛舞台 */
.ct-chart{background:linear-gradient(170deg,#10182a,#0a0f1c);padding:22px 18px;display:flex;align-items:center;justify-content:center;min-height:150px;position:relative}
.ct-chart::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,rgba(30,94,255,.16),transparent 60%);pointer-events:none}
.ct-chart svg{height:118px;width:auto;max-width:90%;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));position:relative}

.ct-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.ct-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:11px}
.ct-head h3{font-size:18px;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}

/* 可靠度徽章 */
.ct-rel{flex:0 0 auto;font-family:var(--label);font-weight:600;font-size:10.5px;letter-spacing:.04em;padding:4px 9px;border-radius:7px;white-space:nowrap;line-height:1.2;margin-top:2px}
.ct-rel.h{color:#0a7d52;background:#e3f6ee}
.ct-rel.m{color:#9a6c00;background:#fdf3da}
.ct-rel.l{color:#5a6478;background:#eef1f6}

/* 方向 + 属性标签 */
.ct-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ct-tag{font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.04em;padding:3px 10px;border-radius:20px;line-height:1.5}
.ct-tag.bull{color:#0a7d52;background:#e3f6ee}
.ct-tag.bear{color:#c2332f;background:#fceaea}
.ct-tag.neu{color:#5a6478;background:#eef1f6}
.ct-tag.k{color:var(--accent);background:var(--accent-soft)}

.ct-mean{margin:0 0 12px;font-size:14.5px;line-height:1.66;color:#2a3242}
.ct-tip{margin:0 0 14px;font-size:13px;line-height:1.6;color:var(--ink-soft);background:var(--paper-2);border-radius:10px;padding:11px 13px}
.ct-tip b{color:var(--accent-dk);font-weight:600}
.ct-more{margin-top:auto;font-family:var(--label);font-weight:600;font-size:13.5px;color:var(--accent);display:inline-flex;align-items:center;gap:5px}
.ct-more:hover{color:var(--accent-dk)}

.ct-empty{text-align:center;color:var(--ink-faint);font-size:15px;margin:40px auto;max-width:var(--read)}

/* ============================================================
   测验 .qz-*
   ============================================================ */
.qz{max-width:640px;margin:0 auto}
.qz-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;font-family:var(--label);font-size:13px;color:var(--ink-soft);letter-spacing:.02em}
.qz-bar .qz-score b{color:var(--accent);font-family:var(--num);font-size:15px}
.qz-prog{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin-bottom:24px}
.qz-prog .fill{height:100%;background:linear-gradient(90deg,#1e5eff,#3f86ff);width:0;transition:width .3s ease;border-radius:6px}

.qz-card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-md);overflow:hidden}
.qz-stage{background:linear-gradient(170deg,#10182a,#0a0f1c);padding:34px 20px;display:flex;align-items:center;justify-content:center;min-height:210px;position:relative}
.qz-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(30,94,255,.16),transparent 60%);pointer-events:none}
.qz-stage svg{height:160px;width:auto;max-width:88%;display:block;filter:drop-shadow(0 5px 14px rgba(0,0,0,.5));position:relative}

.qz-q{padding:22px 24px 6px}
.qz-q .qz-qt{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--ink);margin:0 0 4px;line-height:1.35}
.qz-q .qz-qs{font-size:13.5px;color:var(--ink-faint);margin:0}

.qz-opts{padding:14px 24px 22px;display:grid;gap:10px}
.qz-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font-family:var(--sans);font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:12px;padding:14px 16px;min-height:54px;cursor:pointer;transition:.14s;line-height:1.4}
.qz-opt:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.qz-opt .qz-ic{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-family:var(--label);font-weight:700;font-size:12px;color:var(--ink-faint)}
.qz-opt:disabled{cursor:default}
.qz-opt.correct{border-color:#0ea66f;background:#e3f6ee;color:#0a7d52}
.qz-opt.correct .qz-ic{border-color:#0ea66f;background:#0ea66f;color:#fff}
.qz-opt.wrong{border-color:#e64545;background:#fceaea;color:#c2332f}
.qz-opt.wrong .qz-ic{border-color:#e64545;background:#e64545;color:#fff}
.qz-opt.dim{opacity:.55}

.qz-fb{margin:0 24px 22px;border-radius:13px;padding:15px 17px;font-size:14.5px;line-height:1.65;display:none}
.qz-fb.show{display:block}
.qz-fb.ok{background:#e3f6ee;border:1px solid #b6e6d2;color:#15663f}
.qz-fb.no{background:#fceaea;border:1px solid #f3cfcf;color:#9c3a36}
.qz-fb .qz-fb-t{font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;display:block}
.qz-fb b{font-weight:600}

.qz-next{margin:0 24px 24px;display:flex;justify-content:flex-end}
.qz-next .btn{min-height:48px}

/* 结果卡 */
.qz-result{text-align:center;padding:40px 28px}
.qz-result .qz-big{font-family:var(--num);font-weight:700;font-size:clamp(46px,9vw,68px);line-height:1;letter-spacing:-.03em;background:linear-gradient(135deg,#1e5eff,#3f86ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px}
.qz-result .qz-of{font-family:var(--label);font-size:14px;color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.qz-result .qz-msg{font-size:17px;color:#2a3242;line-height:1.7;max-width:42ch;margin:0 auto 26px}
.qz-result .qz-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

@media(max-width:560px){
  .qz-stage{min-height:180px}
  .qz-stage svg{height:130px}
  .qz-opt{font-size:15px}
}