/* ═══════════════════════════════════════════════════════════════
   蓝白山水 · 网页版组件层(bw-components)
   作用域:仅 .bw-scope 内生效;不改全局变量、不加全局 sticky/overflow。
   规范:正文 #0a2348 / 主操作 #087bff / 页面 #f3f8fe / 卡片白 / 分隔线 #dce8f5;
   正文与选项 16–18px,辅助文字 ≥13px,点击区 ≥44px,焦点可见,状态带文字。
   ═══════════════════════════════════════════════════════════════ */

.bw-scope{
  --bw-ink:#0a2348;
  --bw-ink-2:#42557a;
  --bw-ink-3:#66789c;
  --bw-blue:#087bff;
  --bw-blue-deep:#065ec4;
  --bw-blue-soft:#e8f2ff;
  --bw-page:#f3f8fe;
  --bw-card:#ffffff;
  --bw-line:#dce8f5;
  --bw-line-strong:#b9d0ea;
  --bw-good:#0c8a5f;
  --bw-good-soft:#e6f6ef;
  --bw-warn:#b3541e;
  --bw-warn-soft:#fdf0e5;
  --bw-bad:#c24141;
  --bw-bad-soft:#fdecec;
  --bw-radius:12px;
  --bw-radius-btn:8px;
  --bw-gap:8px;
  --bw-focus:#087bff;
  color:var(--bw-ink);
  font-size:16px;
  line-height:1.6;
}
.bw-scope *{box-sizing:border-box}
.bw-scope :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--bw-focus);
  outline-offset:2px;
  border-radius:var(--bw-radius-btn);
}

/* ── 标题栏(面板顶部固定区,仅面板内固定) ─────────────── */
.bw-topbar{
  display:flex;align-items:center;gap:12px;
  min-height:56px;padding:10px 16px;
  background:var(--bw-card);border-bottom:1px solid var(--bw-line);
}
.bw-topbar.bw-is-flat{background:transparent;border-bottom:none}
.bw-topbar .bw-topbar-title{
  flex:1;min-width:0;
  font-size:18px;font-weight:700;color:var(--bw-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bw-topbar .bw-topbar-sub{flex-basis:100%;font-size:13px;color:var(--bw-ink-3);margin:-4px 0 6px}

/* ── 返回 / 关闭 ───────────────────────────────────────── */
.bw-back,.bw-close{
  display:inline-flex;align-items:center;gap:6px;
  min-width:44px;min-height:44px;padding:8px 12px;
  border:1px solid var(--bw-line);border-radius:var(--bw-radius-btn);
  background:var(--bw-card);color:var(--bw-ink-2);
  font-size:14px;font-weight:600;cursor:pointer;
}
.bw-back:hover,.bw-close:hover{border-color:var(--bw-blue);color:var(--bw-blue)}
.bw-close{justify-content:center;padding:8px;border-width:0;background:transparent;font-size:20px;line-height:1}

/* ── 卡片 ──────────────────────────────────────────────── */
.bw-card{
  background:var(--bw-card);
  border:1px solid var(--bw-line);
  border-radius:var(--bw-radius);
  padding:16px;
}
.bw-card.bw-card-padless{padding:0;overflow:hidden}
.bw-card .bw-card-title{font-size:17px;font-weight:700;color:var(--bw-ink);margin:0 0 4px}
.bw-card .bw-card-sub{font-size:13px;color:var(--bw-ink-3);margin:0}

/* ── 按钮 ──────────────────────────────────────────────── */
.bw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;min-width:44px;padding:10px 20px;
  border:1px solid transparent;border-radius:var(--bw-radius-btn);
  font-size:16px;font-weight:600;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.bw-btn-primary{background:var(--bw-blue);color:#fff}
.bw-btn-primary:hover{background:var(--bw-blue-deep)}
.bw-btn-ghost{background:var(--bw-card);border-color:var(--bw-line);color:var(--bw-ink)}
.bw-btn-ghost:hover{border-color:var(--bw-blue);color:var(--bw-blue)}
.bw-btn-soft{background:var(--bw-blue-soft);color:var(--bw-blue-deep)}
.bw-btn:disabled,.bw-btn[aria-disabled="true"]{
  background:#e6edf6;border-color:#e6edf6;color:#9aabc6;
  cursor:not-allowed;
}
.bw-btn.bw-is-pending{position:relative;color:transparent!important}
.bw-btn.bw-is-pending::after{
  content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid #ffffff9e;border-top-color:#fff;
  animation:bw-spin .8s linear infinite;
}
@keyframes bw-spin{to{transform:rotate(360deg)}}
.bw-btn.bw-is-pending::before{
  content:attr(data-busy-text);position:absolute;
  color:#fff;font-size:14px;font-weight:600;
}

/* ── 筛选 ──────────────────────────────────────────────── */
.bw-filter{display:flex;flex-wrap:wrap;gap:var(--bw-gap)}
.bw-filter .bw-chip{
  min-height:44px;padding:8px 16px;
  border:1px solid var(--bw-line);border-radius:22px;
  background:var(--bw-card);color:var(--bw-ink-2);
  font-size:14px;cursor:pointer;
}
.bw-filter .bw-chip:hover{border-color:var(--bw-blue)}
.bw-filter .bw-chip[aria-pressed="true"],.bw-filter .bw-chip.bw-on{
  background:var(--bw-blue);border-color:var(--bw-blue);color:#fff;
}

/* ── 进度条 ────────────────────────────────────────────── */
.bw-progress{display:flex;align-items:center;gap:10px}
.bw-progress .bw-progress-track{
  flex:1;height:8px;border-radius:4px;background:var(--bw-line);overflow:hidden;
}
.bw-progress .bw-progress-track i{
  display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#087bff,#3ba0ff);
  transition:width .3s ease;
}
.bw-progress .bw-progress-text{font-size:13px;color:var(--bw-ink-2);white-space:nowrap}

/* ── 选项(答题) ───────────────────────────────────────── */
.bw-options{display:grid;gap:10px}
.bw-option{
  display:flex;align-items:flex-start;gap:12px;
  min-height:52px;padding:12px 14px;
  border:1px solid var(--bw-line);border-radius:var(--bw-radius-btn);
  background:var(--bw-card);color:var(--bw-ink);
  font-size:16px;line-height:1.6;text-align:left;cursor:pointer;
}
.bw-option:hover{border-color:var(--bw-blue)}
.bw-option .bw-option-key{
  flex:none;display:grid;place-items:center;
  width:28px;height:28px;border-radius:8px;
  background:var(--bw-page);color:var(--bw-ink-2);
  font-size:14px;font-weight:700;
}
.bw-option[aria-pressed="true"],.bw-option.bw-selected{
  border-color:var(--bw-blue);background:var(--bw-blue-soft);
}
.bw-option[aria-pressed="true"] .bw-option-key,.bw-option.bw-selected .bw-option-key{
  background:var(--bw-blue);color:#fff;
}
.bw-option.bw-correct{border-color:var(--bw-good);background:var(--bw-good-soft)}
.bw-option.bw-correct .bw-option-key{background:var(--bw-good);color:#fff}
.bw-option.bw-wrong{border-color:var(--bw-bad);background:var(--bw-bad-soft)}
.bw-option.bw-wrong .bw-option-key{background:var(--bw-bad);color:#fff}
.bw-option:disabled{cursor:default}
.bw-option .bw-option-state{margin-left:auto;flex:none;align-self:center;font-size:13px;font-weight:600}

/* ── 解析 ──────────────────────────────────────────────── */
.bw-explain{
  border:1px solid var(--bw-line);border-left:4px solid var(--bw-blue);
  border-radius:var(--bw-radius-btn);background:var(--bw-card);
  padding:14px 16px;
}
.bw-explain .bw-explain-title{font-size:14px;font-weight:700;color:var(--bw-ink);margin:0 0 6px}
.bw-explain p{margin:0;font-size:14px;line-height:1.7;color:var(--bw-ink-2)}

/* ── 空态 ──────────────────────────────────────────────── */
.bw-empty{
  display:grid;justify-items:center;gap:6px;
  padding:36px 20px;text-align:center;
  border:1px dashed var(--bw-line-strong);border-radius:var(--bw-radius);
  background:var(--bw-card);
}
.bw-empty .bw-empty-mark{
  width:44px;height:44px;border-radius:50%;
  background:var(--bw-blue-soft);color:var(--bw-blue);
  display:grid;place-items:center;font-size:20px;
}
.bw-empty .bw-empty-title{font-size:16px;font-weight:700;color:var(--bw-ink)}
.bw-empty .bw-empty-hint{font-size:13px;color:var(--bw-ink-3);max-width:40ch}

/* ── 失败 / 重试 ───────────────────────────────────────── */
.bw-error{
  display:grid;gap:10px;
  padding:16px;border:1px solid #f2cfcf;border-left:4px solid var(--bw-bad);
  border-radius:var(--bw-radius-btn);background:var(--bw-bad-soft);
}
.bw-error .bw-error-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#8f2626}
.bw-error .bw-error-title::before{content:"⚠";font-size:16px}
.bw-error .bw-error-detail{font-size:13px;color:#7c4040;line-height:1.6}

/* ── 弹层 ──────────────────────────────────────────────── */
.bw-modal-overlay{
  position:fixed;inset:0;z-index:1200;
  display:grid;place-items:center;
  background:#0a234866;padding:20px;
}
.bw-modal{
  width:min(560px,100%);max-height:min(80vh,720px);
  display:flex;flex-direction:column;
  background:var(--bw-card);border-radius:var(--bw-radius);
  box-shadow:0 18px 60px #0a234826;
}
.bw-modal .bw-modal-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--bw-line);
}
.bw-modal .bw-modal-head h3{flex:1;margin:0;font-size:17px;color:var(--bw-ink)}
.bw-modal .bw-modal-body{padding:16px;overflow:auto;font-size:15px;line-height:1.7;color:var(--bw-ink-2)}
.bw-modal .bw-modal-foot{
  display:flex;justify-content:flex-end;gap:10px;
  padding:12px 16px;border-top:1px solid var(--bw-line);
}

/* ── 骨架屏 ────────────────────────────────────────────── */
.bw-skeleton{border-radius:8px;background:linear-gradient(90deg,#e8eff8 25%,#f4f8fd 50%,#e8eff8 75%);background-size:200% 100%;animation:bw-shimmer 1.2s infinite}
@keyframes bw-shimmer{to{background-position:-200% 0}}
.bw-skeleton.bw-skeleton-title{height:20px;width:60%}
.bw-skeleton.bw-skeleton-line{height:14px;width:100%}
.bw-skeleton.bw-skeleton-thumb{height:96px;width:100%}

/* ── 状态文字标签(颜色之外必须有文字) ─────────────────── */
.bw-state{
  display:inline-flex;align-items:center;gap:6px;
  min-height:26px;padding:3px 10px;border-radius:13px;
  font-size:13px;font-weight:600;
}
.bw-state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.bw-state-good{background:var(--bw-good-soft);color:var(--bw-good)}
.bw-state-warn{background:var(--bw-warn-soft);color:var(--bw-warn)}
.bw-state-bad{background:var(--bw-bad-soft);color:var(--bw-bad)}
.bw-state-info{background:var(--bw-blue-soft);color:var(--bw-blue-deep)}

/* ── 山水装饰(仅页头/边角,低对比,不承载知识) ─────────── */
.bw-deco{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% -10%, #dbeafe 0%, transparent 55%),
    radial-gradient(90% 70% at 8% 0%, #e9f3ff 0%, transparent 50%),
    var(--bw-card);
}
.bw-deco::after{
  content:"";position:absolute;right:-40px;top:-30px;width:220px;height:160px;
  background:
    linear-gradient(124deg, transparent 46%, #dbeafe 46% 52%, transparent 52%),
    linear-gradient(116deg, transparent 60%, #e4effd 60% 66%, transparent 66%);
  opacity:.8;pointer-events:none;
}

/* ── 面板滚动区(仅面板内约束,不新增全局滚动规则) ─────── */
.bw-panel{display:flex;flex-direction:column;min-height:0}
.bw-panel-head{flex:none}
.bw-panel-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.bw-panel-foot{flex:none;border-top:1px solid var(--bw-line);background:var(--bw-card)}

/* ── 窄屏 ──────────────────────────────────────────────── */
@media (max-width:767px){
  .bw-scope{font-size:16px}
  .bw-modal-overlay{padding:0;align-items:flex-end}
  .bw-modal{width:100%;max-height:86vh;border-radius:var(--bw-radius) var(--bw-radius) 0 0}
  .bw-panel-foot{padding-bottom:env(safe-area-inset-bottom)}
}