/* ============================================================
   教学白板 TeachBoard 样式（独立命名空间 .tb- / #tbRoot）
   ============================================================ */
#tbRoot {
  position: fixed; inset: 0; z-index: 1700;
  display: flex; flex-direction: column;
  background: #eef1f7; color: #1f2430;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 1.5;
}
#tbRoot * { box-sizing: border-box; }
body.tb-open { overflow: hidden !important; }
/* 教学白板打开时隐藏应用层的悬浮组件，避免遮挡板面 */
body.tb-open #scaleFloating,
body.tb-open #floatNoteFab,
body.tb-open #floatNoteTab,
body.tb-open #floatNotePanel,
body.tb-open #artDock { display: none !important; }

/* ---------- 顶栏 ---------- */
.tb-top {
  height: 56px; flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 0 14px; background: #fff; border-bottom: 1px solid #e3e7f1;
  box-shadow: 0 2px 10px rgba(30, 40, 70, .05); z-index: 20;
}
.tb-brand { display: flex; align-items: center; gap: 8px; }
.tb-logo {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff); border-radius: 11px; font-size: 18px;
}
.tb-brand-t { display: flex; flex-direction: column; line-height: 1.15; }
.tb-brand-t b { font-size: 14px; letter-spacing: .01em; }
.tb-brand-t em { font-size: 9.5px; color: #9aa1b5; font-style: normal; letter-spacing: .16em; text-transform: uppercase; }
.tb-name {
  width: 210px; height: 32px; border: 1px solid transparent; background: #f5f7fc;
  border-radius: 9px; padding: 0 10px; font-size: 13px; font-weight: 600; color: #1f2430;
  outline: none; font-family: inherit; transition: .15s;
}
.tb-name:hover { background: #f0f3fa; }
.tb-name:focus { background: #fff; border-color: #c7cffa; box-shadow: 0 0 0 3px rgba(79, 70, 229, .1); }
.tb-tools { margin-left: auto; display: flex; align-items: center; gap: 3px; }
.tb-ico {
  width: 30px; height: 30px; border: 0; background: transparent; border-radius: 8px;
  font-size: 15px; color: #4b5468; cursor: pointer; display: grid; place-items: center; font-family: inherit;
}
.tb-ico:hover { background: #f0f3fb; color: #3730a3; }
.tb-ico:disabled { opacity: .32; cursor: default; background: transparent; color: #4b5468; }
.tb-sep { width: 1px; height: 20px; background: #e6eaf3; margin: 0 5px; }
.tb-zoomval, .tb-pageval {
  font-size: 12px; color: #5b6172; min-width: 48px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.tb-mini {
  height: 30px; padding: 0 10px; border: 1px solid #e2e6f0; background: #fff;
  border-radius: 8px; font-size: 12.5px; color: #3d465c; cursor: pointer; font-family: inherit;
  white-space: nowrap; transition: .15s;
}
.tb-mini:hover { border-color: #b9c3f8; color: #3730a3; background: #f7f8ff; }
.tb-mini.tb-primary { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.tb-mini.tb-primary:hover { background: #4338ca; color: #fff; }
.tb-exit { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.tb-exit:hover { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }

/* ---------- 主体 ---------- */
.tb-main { flex: 1 1 auto; display: flex; min-height: 0; }
.tb-rail {
  width: 72px; flex: 0 0 auto; background: #fff; border-right: 1px solid #e3e7f1;
  display: flex; flex-direction: column; padding: 8px 6px; gap: 2px; overflow-y: auto;
}
.tb-railbtn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 2px; border: 0; background: transparent; border-radius: 10px;
  cursor: pointer; color: #5b6172; font-family: inherit; transition: .15s;
}
.tb-railbtn b { font-size: 17px; font-weight: 400; line-height: 20px; }
.tb-railbtn span { font-size: 10.5px; letter-spacing: .02em; }
.tb-railbtn:hover { background: #f5f7fd; color: #3730a3; }
.tb-railbtn.on { background: #eef2ff; color: #4338ca; box-shadow: inset 0 0 0 1px #dbe2ff; }
.tb-panel {
  width: 252px; flex: 0 0 auto; background: #fff; border-right: 1px solid #e3e7f1;
  overflow-y: auto; padding: 8px 12px 28px; overscroll-behavior: contain;
}
.tb-sec { padding: 10px 0; border-bottom: 1px dashed #edf0f7; }
.tb-sec:last-child { border-bottom: 0; }
.tb-sec-t { font-size: 11.5px; font-weight: 700; color: #6b7387; letter-spacing: .03em; margin-bottom: 8px; }
.tb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tb-grid-s { grid-template-columns: 1fr 1fr; }
.tb-item {
  padding: 8px 5px; border: 1px solid #e6eaf3; background: #fbfcfe; border-radius: 9px;
  font-size: 12.5px; color: #394154; cursor: pointer; text-align: center; font-family: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .12s;
}
.tb-item:hover { border-color: #b9c3f8; background: #f5f7ff; color: #3730a3; }
.tb-item.on { background: #eef2ff; border-color: #a5b4fc; color: #3730a3; font-weight: 600; }
.tb-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tb-tip { margin-top: 8px; font-size: 11px; color: #98a0b3; line-height: 1.6; }
.tb-select {
  height: 30px; border: 1px solid #e2e6f0; border-radius: 8px; background: #fff;
  font-size: 12.5px; color: #3d465c; padding: 0 6px; font-family: inherit; outline: none; flex: 1; min-width: 0;
}
.tb-select-wide { width: 100%; margin-top: 2px; }
.tb-search {
  width: 100%; height: 30px; margin-bottom: 6px; padding: 0 9px;
  border: 1px solid #e2e6f0; border-radius: 8px; background: #fff;
  font-size: 12.5px; color: #3d465c; font-family: inherit; outline: none;
  -webkit-appearance: none; appearance: none;
}
.tb-search:focus { border-color: #b9c3f8; box-shadow: 0 0 0 3px rgba(79, 70, 229, .10); }
.tb-search::-webkit-search-cancel-button { cursor: pointer; }
.tb-select:focus { border-color: #b9c3f8; }
.tb-num {
  width: 56px; height: 28px; border: 1px solid #e2e6f0; border-radius: 7px;
  text-align: center; font-size: 12.5px; font-family: inherit; outline: none;
}
.tb-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #4b5468; cursor: pointer; }
.tb-check input { accent-color: #4f46e5; }

/* 颜色 / 粗细 */
.tb-swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tb-sw {
  width: 100%; aspect-ratio: 1; border-radius: 8px; background: var(--c);
  border: 2px solid #fff; box-shadow: 0 0 0 1px #e0e5f0; cursor: pointer; padding: 0;
  transition: .12s; position: relative;
}
.tb-sw:hover { transform: scale(1.08); }
.tb-sw.on { box-shadow: 0 0 0 2px #4f46e5; transform: scale(1.06); }
.tb-sw-custom { background: conic-gradient(#ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7, #ef4444); overflow: hidden; }
.tb-sw-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.tb-sizes { display: flex; gap: 6px; align-items: center; }
.tb-size {
  flex: 1; height: 34px; border: 1px solid #e6eaf3; background: #fbfcfe; border-radius: 9px;
  display: grid; place-items: center; cursor: pointer; padding: 0; transition: .12s;
}
.tb-size i { display: block; border-radius: 50%; background: #3d465c; }
.tb-size:hover { border-color: #b9c3f8; }
.tb-size.on { border-color: #4f46e5; background: #eef2ff; }
.tb-size.on i { background: #4338ca; }

/* 底纹 */
.tb-bgs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tb-bg {
  display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid #e6eaf3;
  background: #fbfcfe; border-radius: 9px; font-size: 11.5px; color: #4b5468; cursor: pointer; font-family: inherit;
}
.tb-bg i { width: 22px; height: 22px; border-radius: 5px; border: 1px solid #dde3ef; flex: 0 0 auto; }
.tb-bg:hover { border-color: #b9c3f8; }
.tb-bg.on { border-color: #4f46e5; background: #eef2ff; color: #3730a3; }

/* 页面 / 文档列表 */
.tb-pagelist, .tb-doclist { display: flex; flex-direction: column; gap: 6px; }
.tb-pagebtn {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #e6eaf3;
  background: #fbfcfe; border-radius: 9px; cursor: pointer; font-family: inherit; text-align: left;
}
.tb-pagebtn b {
  width: 22px; height: 22px; display: grid; place-items: center; background: #eef2ff;
  color: #4338ca; border-radius: 6px; font-size: 11.5px; flex: 0 0 auto;
}
.tb-pagebtn span { font-size: 11.5px; color: #6b7387; }
.tb-pagebtn.on { border-color: #4f46e5; background: #eef2ff; }
.tb-doc {
  display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid #e6eaf3;
  border-radius: 10px; background: #fbfcfe;
}
.tb-doc.on { border-color: #a5b4fc; background: #f4f6ff; }
.tb-doc-main { flex: 1; min-width: 0; }
.tb-doc-main b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-doc-main em { font-size: 10.5px; color: #98a0b3; font-style: normal; }
.tb-danger { color: #b91c1c; border-color: #fecaca; }
.tb-danger:hover { background: #fef2f2; color: #991b1b; }
.tb-empty { font-size: 12px; color: #98a0b3; padding: 8px 0; }

/* ---------- 画布区 ---------- */
.tb-stage { flex: 1 1 auto; position: relative; overflow: hidden; background: #e8ebf2; touch-action: none; min-width: 0; }
#tbCanvas { position: absolute; inset: 0; display: block; }
.tb-pagehud {
  position: absolute; left: 14px; top: 12px; z-index: 12; font-size: 11.5px; color: #5b6172;
  background: rgba(255, 255, 255, .88); border: 1px solid #e3e7f1; padding: 3px 10px;
  border-radius: 20px; backdrop-filter: blur(6px); pointer-events: none;
}
.tb-textedit {
  position: fixed; z-index: 1850; border: 1px dashed #4f46e5; outline: none;
  background: rgba(255, 255, 255, .96); border-radius: 4px; padding: 2px 4px;
  resize: none; overflow: hidden; box-shadow: 0 6px 20px rgba(31, 36, 48, .16);
  font-family: inherit; min-height: 34px;
}
.tb-lens {
  position: fixed; width: 220px; height: 220px; border-radius: 50%; z-index: 1800;
  pointer-events: none; background: #fff;
  box-shadow: 0 12px 30px rgba(20, 28, 50, .3), 0 0 0 3px #fff, 0 0 0 6px rgba(79, 70, 229, .35);
}
.tb-curtain {
  position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: radial-gradient(circle 150px at var(--cx, 50%) var(--cy, 50%),
    rgba(8, 12, 22, 0) 0, rgba(8, 12, 22, 0) 58px, rgba(8, 12, 22, .55) 118px, rgba(8, 12, 22, .93) 190px);
  transition: opacity .2s;
}
.tb-capbox {
  position: absolute; border: 2px dashed #4f46e5; background: rgba(79, 70, 229, .1);
  z-index: 35; pointer-events: none; border-radius: 4px;
}

/* ---------- 卡片 ---------- */
.tb-cards {
  position: absolute; right: 14px; top: 14px; z-index: 40;
  display: flex; flex-direction: column; gap: 10px;
  max-height: calc(100% - 28px); overflow-y: auto; width: 258px;
}
.tb-card {
  background: #fff; border: 1px solid #e3e7f1; border-radius: 14px;
  box-shadow: 0 12px 34px rgba(30, 40, 70, .16); overflow: hidden;
}
.tb-card-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid #f0f2f8; font-size: 13px;
}
.tb-card-x { border: 0; background: transparent; cursor: pointer; color: #98a0b3; font-size: 13px; font-family: inherit; }
.tb-card-x:hover { color: #b91c1c; }
.tb-card-b { padding: 12px; }
.tb-card-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.tb-ring {
  position: relative; width: 136px; height: 136px; margin: 2px auto 8px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(#4f46e5 calc(var(--p, 1) * 360deg), #e9edf8 0);
}
.tb-ring::before {
  content: ''; position: absolute; width: 112px; height: 112px; background: #fff; border-radius: 50%;
}
.tb-ring b { position: relative; font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tb-result {
  font-size: 26px; font-weight: 700; text-align: center; padding: 14px 6px;
  background: #f7f8ff; border-radius: 12px; color: #3730a3; min-height: 62px;
  display: grid; place-items: center; transition: .12s;
}
.tb-result.rolling { color: #4f46e5; transform: scale(1.02); }
.tb-result-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 200px; overflow: auto; }
.tb-group { display: flex; gap: 8px; font-size: 12px; padding: 6px 8px; background: #f8fafc; border-radius: 8px; }
.tb-group b { color: #4338ca; flex: 0 0 46px; }
.tb-group span { color: #4b5468; }
.tb-fold { margin-top: 8px; }
.tb-fold summary { font-size: 11.5px; color: #6b7387; cursor: pointer; }
.tb-area {
  width: 100%; height: 78px; margin-top: 6px; border: 1px solid #e2e6f0; border-radius: 8px;
  padding: 6px 8px; font-size: 12px; font-family: inherit; outline: none; resize: vertical;
}
.tb-score-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.tb-team { flex: 1; font-size: 12.5px; font-weight: 600; }
.tb-team.a { color: #dc2626; }
.tb-team.b { color: #2563eb; }
.tb-score-row b { min-width: 34px; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; }
.tb-calc-in {
  width: 100%; height: 34px; border: 1px solid #e2e6f0; border-radius: 8px; padding: 0 10px;
  font-size: 13px; font-family: ui-monospace, Menlo, Consolas, monospace; outline: none;
}
.tb-calc-out { font-size: 15px; font-weight: 700; color: #3730a3; margin-left: auto; }

/* ---------- 底栏 ---------- */
.tb-foot {
  height: 28px; flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 0 14px; background: #fff; border-top: 1px solid #e3e7f1;
  font-size: 11.5px; color: #8b93a8;
}
#tbToolHint { margin-left: auto; color: #4f46e5; font-weight: 600; }

/* ---------- 左工具栏自动收回：选择工具后收起，左缘悬浮/划入唤出 ---------- */
.tb-rail, .tb-panel { transition: transform .22s ease, margin-right .22s ease; }
#tbRoot.tb-left-collapsed .tb-rail, #tbRoot.tb-left-collapsed .tb-panel { transform: translateX(-110%); pointer-events: none; opacity: .35; }
#tbRoot.tb-left-collapsed .tb-rail { margin-right: -72px; }
#tbRoot.tb-left-collapsed .tb-panel { margin-right: -252px; }
.tb-left-edge { position: absolute; left: 0; top: 56px; bottom: 28px; width: 9px; z-index: 40; background: transparent; }
#tbRoot.tb-left-collapsed .tb-left-edge:hover, #tbRoot.tb-left-collapsed .tb-left-edge { background: linear-gradient(90deg, rgba(79,70,229,.08), transparent); cursor: ew-resize; }
@media (max-width: 980px) {
  #tbRoot.tb-left-collapsed .tb-rail { margin-right: -58px; }
  #tbRoot.tb-left-collapsed .tb-panel { margin-right: -208px; }
}
/* ---------- 窄屏 ---------- */
@media (max-width: 980px) {
  .tb-panel { width: 208px; }
  .tb-rail { width: 58px; }
  .tb-railbtn span { display: none; }
  .tb-brand-t em { display: none; }
  .tb-chart-grid { border:1px solid #d8e2dc;border-radius:8px;padding:4px;background:#fff;max-height:34vh;overflow:auto }
  .tb-cg-row { display:flex;gap:4px;margin:3px 0;align-items:center }
  .tb-cg-label { flex:1.4;border:1px solid #d5dfd8;border-radius:5px;padding:5px 7px;font-size:12.5px;min-width:0 }
  .tb-cg-val { flex:1;border:1px solid #d5dfd8;border-radius:5px;padding:5px 7px;font-size:12.5px;min-width:0 }
  .tb-cg-del { color:#c44;cursor:pointer;font-size:13px;padding:2px 6px }
  .tb-rad-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px;padding:4px 0 }
  .tb-rad { border:1px solid #d8e2dc;background:#fff;border-radius:6px;font-size:17px;line-height:1;padding:9px 0;cursor:pointer }
  .tb-rad:hover { background:#eaf5ef;border-color:#287c5b }
  .tb-input { border:1px solid #c9d8cf;border-radius:7px;padding:7px 9px;font-size:13px }
  .tb-super-badge { border:1px solid #d9c48a;background:#fff8e6;color:#a06a2a;border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;white-space:nowrap }
  .tb-super-on { background:#f6e3b4;border-color:#c9a84c;color:#7a5210;font-weight:700 }
  .tb-super-off { opacity:.92 }
  .tb-name { width: 130px; }
  .tb-tools .tb-mini { padding: 0 7px; }
}
@media (max-width: 720px) {
  .tb-panel { position: absolute; left: 58px; top: 56px; bottom: 28px; z-index: 25; box-shadow: 8px 0 24px rgba(20, 30, 60, .12); }
  .tb-tools .tb-mini:not(.tb-exit) { display: none; }
  .tb-cards { width: 210px; }
}


/* 页面四键常驻（背景布左上角） */
.tb-pageops { position: absolute; right: 10px; top: 8px; display: flex; gap: 4px; z-index: 12; background: rgba(255,255,255,.95); border: 1px solid #dfe5ec; border-radius: 8px; padding: 3px 5px; box-shadow: 0 1px 4px rgba(15,40,80,.1); pointer-events: auto; }
.tb-pageops .tb-ico { font-size: 12px; padding: 2px 6px; white-space: nowrap; }
/* EN UI 开关：隐藏中文层（对 bi-cn/bi-en 双层文案生效） */
body.tb-ui-en .bi-cn { display: none !important; }
body.tb-ui-en .bi-en { display: block !important; }
body.tb-ui-en .bi-en[lang=en] { display: block !important; }
.tb-pageops .tb-ico { cursor: pointer; min-height: 22px; }
#tbCanvas { pointer-events: auto; }