/* 经纬网与地球仪特有样式（通用样式见 ../shared/base.css） */
#panel h2 .h2s { font-size: 11px; color: var(--muted); font-weight: normal; margin-left: 6px; letter-spacing: 0; }
.swatch { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.readout dd { font-variant-numeric: tabular-nums; }

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.modes button, .qtypes button { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 0; cursor: pointer; }
.modes button b { display: block; font-size: 14px; }
.modes button small { display: block; font-size: 11px; color: var(--muted); }
.modes button:hover, .qtypes button:hover { border-color: var(--accent); }
.modes button.on, .qtypes button.on { border-color: var(--accent); background: rgba(255,201,74,.14); }
.qtypes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.qtypes button { font-size: 12px; padding: 5px 0; }

#placeSel { margin-bottom: 6px; }
.views { display: flex; gap: 6px; }
.views button { flex: 1; }
.gridstep { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.legend i.dash { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }
#hemiNote { margin-top: 8px; }

.cmp { width: 100%; border-collapse: collapse; font-size: 12px; }
.cmp th, .cmp td { padding: 4px 6px; border: 1px solid var(--line); vertical-align: top; text-align: left; }
.cmp th { color: var(--muted); font-weight: 600; background: var(--panel-2); }
.cmp td:first-child { color: var(--muted); white-space: nowrap; }

/* 练习卡片 */
#quizCard { position: absolute; left: 12px; bottom: 48px; z-index: 4; width: min(400px, calc(100% - 24px));
  padding: 10px 14px 12px; background: rgba(17,23,35,.92); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; font-size: 13px; line-height: 1.6; }
.qhead { display: flex; justify-content: space-between; align-items: baseline; }
#qType { color: var(--accent); font-weight: 600; }
#qPrompt { margin: 4px 0 8px; font-size: 14px; }
#qOpts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#qOpts .note { grid-column: 1 / -1; margin: 0; }
.opt { font: inherit; font-size: 13px; color: var(--text); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 4px; cursor: pointer; }
.opt:hover:not(:disabled) { border-color: var(--accent); }
.opt:disabled { cursor: default; opacity: .75; }
.opt.right { border-color: #7ee081; background: rgba(126,224,129,.16); opacity: 1; }
.opt.wrong { border-color: #ff6b5b; background: rgba(255,107,91,.16); opacity: 1; }
.feedback { margin: 8px 0 0; font-size: 12.5px; color: #cfd6e0; }
.feedback b { margin-right: 6px; }
.feedback.ok b { color: #7ee081; }
.feedback.bad b { color: #ff6b5b; }
#qNext { margin-top: 8px; }

/* 3D 标签 */
.lbl { font-size: 11px; color: #fff; white-space: nowrap; pointer-events: none; text-shadow: 0 0 3px #000, 0 0 6px #000; }
.lbl-lat { color: #b3e5fc; }
.lbl-lon { color: #ffe0b2; transform: translate(-50%, 2px); }
.lbl-lat.zero, .lbl-lon.zero { font-weight: 700; }
.lbl-sp { font-size: 11.5px; font-weight: 600; transform: translate(4px, -100%); }
.lbl-sp.equator { color: #ff8a80; }
.lbl-sp.tropicN, .lbl-sp.tropicS { color: #ffe066; }
.lbl-sp.polarN, .lbl-sp.polarS { color: #80deea; }
.lbl-sp.pm { color: #ffc94a; transform: translate(-50%, -50%); }
.lbl-sp.anti { color: #fff3c4; transform: translate(-50%, -50%); }
.lbl-pole { font-size: 13px; font-weight: 700; color: #fff; }
.lbl-axis { font-size: 11px; color: #dfe6ee; transform: translate(10px, -50%); }
.lbl-spin { font-size: 11.5px; color: #7ee081; font-weight: 600; }
.lbl-hemi { font-size: 18px; font-weight: 700; opacity: .9; }
.lbl-hemi.e { color: #ffd180; }
.lbl-hemi.w { color: #b3e5fc; }
.lbl-ew { font-size: 11px; color: #e1bee7; font-weight: 600; }
.lbl-mark { font-size: 12.5px; font-weight: 700; transform: translate(14px, -120%); }

@media (max-width: 760px) {
  #quizCard { bottom: 44px; font-size: 12px; padding: 8px 12px 10px; }
  #qPrompt { font-size: 13px; }
  .lbl { font-size: 10px; }
  .lbl-sp { font-size: 10.5px; }
  .lbl-hemi { font-size: 15px; }
}