* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: #2b2b2b;
  color: #eee;
  min-height: 100vh;
}

#app { max-width: 1100px; margin: 0 auto; padding: 12px 16px; }

header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
header h1 { font-size: 22px; color: #ffd97d; }

.mode-tabs .tab {
  padding: 8px 20px; border: none; cursor: pointer;
  background: #444; color: #ccc; font-size: 15px;
  border-radius: 8px 8px 0 0; margin-left: 4px;
}
.mode-tabs .tab.active { background: #1e5b3a; color: #fff; font-weight: bold; }

.toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: #3a3a3a; padding: 8px 12px; border-radius: 8px 0 0 0;
}
.toolbar .divider { width: 1px; height: 24px; background: #666; }
.toolbar button {
  padding: 6px 12px; border: none; border-radius: 6px; cursor: pointer;
  background: #555; color: #eee; font-size: 14px;
}
.toolbar button:hover { background: #666; }
.toolbar .tool.active { background: #c9a227; color: #222; font-weight: bold; }
.toolbar .action { background: #2f6fb3; }
.toolbar .action:hover { background: #3d82c9; }
.toolbar input {
  padding: 6px 10px; border: 1px solid #666; border-radius: 6px;
  background: #2b2b2b; color: #eee; font-size: 14px; width: 200px;
}
#math-tools, #english-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.board-wrap { position: relative; }

#board {
  display: block; width: 100%;
  background: #1e5b3a; /* 黑板绿 */
  border: 10px solid #6b4f2f; /* 木框 */
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
}

#status {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.75); color: #ffd97d; padding: 10px 20px;
  border-radius: 20px; font-size: 15px; pointer-events: none;
  max-width: 80%;
}

.hidden { display: none !important; }

#word-card {
  display: flex; gap: 16px; margin-top: 14px;
  background: #3a3a3a; border-radius: 10px; padding: 16px;
}
.card-left img {
  width: 260px; height: 260px; object-fit: cover;
  border-radius: 8px; background: #2b2b2b;
}
.card-right { flex: 1; }
.word-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
#word-text { font-size: 32px; font-weight: bold; color: #ffd97d; }
#word-phonetic { font-size: 18px; color: #9fd3ff; }
#btn-speak {
  border: none; background: #2f6fb3; color: #fff; border-radius: 50%;
  width: 36px; height: 36px; cursor: pointer; font-size: 16px;
}
#word-meaning { font-size: 16px; color: #ddd; margin-bottom: 10px; white-space: pre-wrap; }
#word-examples { list-style: none; }
#word-examples li {
  margin-bottom: 10px; padding: 8px 12px; background: #2f2f2f; border-radius: 6px;
  line-height: 1.6;
}
#word-examples .en { color: #fff; }
#word-examples .zh { color: #999; font-size: 14px; }
#word-examples button.speak-line {
  border: none; background: none; cursor: pointer; font-size: 14px; margin-left: 6px;
}

/* ---------- 后端徽章与设置弹窗 ---------- */
.header-right { display: flex; align-items: center; gap: 8px; }
.header-right .tab {
  padding: 6px 12px; border: none; cursor: pointer;
  background: #444; color: #ccc; font-size: 15px; border-radius: 8px;
}
.header-right .tab:hover { background: #555; }
.backend-badge {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: #3a3a3a; color: #aaa;
}
.backend-badge.ok { background: rgba(64, 160, 100, 0.25); color: #7fd6a4; }
.backend-badge.warn { background: rgba(201, 162, 39, 0.22); color: #ffd97d; }

.modal-mask {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
}
.modal-mask.hidden { display: none; }
.modal {
  width: min(460px, calc(100vw - 32px));
  background: #333; border: 1px solid #555;
  border-radius: 12px; padding: 22px;
}
.modal h2 { font-size: 17px; margin-bottom: 6px; color: #ffd97d; }
.modal-label { display: block; font-size: 13px; color: #aaa; margin-top: 12px; }
.modal-label input {
  width: 100%; margin-top: 5px; padding: 9px 11px;
  background: #2b2b2b; color: #eee;
  border: 1px solid #555; border-radius: 8px; font-size: 14px;
}
.modal-label input:focus { outline: none; border-color: #2f6fb3; }
.modal-hint { font-size: 12.5px; color: #999; line-height: 1.6; margin: 10px 0 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.modal-actions button {
  padding: 8px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.modal-actions .tab { background: #444; color: #ccc; }
.modal-actions .action { background: #2f6fb3; color: #fff; }
.modal-actions .action:hover { background: #3d82c9; }
.modal-check {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: #999; line-height: 1.6; margin-top: 12px; cursor: pointer;
}
.modal-check input { margin-top: 3px; }