/* ===== kanlin.org 主版風格:米黃底、深藍墨色粗框、硬陰影、膠囊按鈕 ===== */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 12% 5%, rgba(255, 183, 3, .14), transparent 24%),
    radial-gradient(circle at 90% 18%, rgba(112, 183, 255, .18), transparent 22%);
  background-attachment: fixed;
}
.mono { font-family: inherit; font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

/* topbar */
.topbar { background: rgba(255, 248, 234, .92); backdrop-filter: blur(10px); border-bottom: 2px solid var(--text); box-shadow: 0 4px 0 rgba(32, 36, 58, .06); }
.brand-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--coral); color: var(--text); border: 2px solid var(--text); font-family: inherit; font-weight: 800; box-shadow: 0 0 0 4px rgba(255, 107, 107, .2); }
.brand-text { font-size: 15px; font-weight: 800; letter-spacing: .03em; }
.brand-text em { color: var(--text-dim); font-weight: 600; letter-spacing: 0; }
.progress-bar { background: #fff; border-bottom: 2px solid var(--text); height: 8px; }
.progress-bar-fill { background: var(--coral); }

/* tabs */
.tabbar { background: transparent; border-bottom: 2px dashed rgba(32, 36, 58, .24); top: calc(env(safe-area-inset-top, 0px) + 70px); backdrop-filter: blur(10px); background: rgba(255, 248, 234, .9); }
.tabbar-inner { padding: 10px 12px; gap: 10px; }
.tab-btn { border: 2px solid var(--text); border-radius: 999px; background: #fff; color: var(--text); font-weight: 700; padding: 6px 16px; min-height: 40px; box-shadow: 3px 3px 0 var(--text); transition: transform .12s, box-shadow .12s; }
.tab-btn:hover { color: var(--text); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--text); }
.tab-btn.is-active { background: var(--coral); color: var(--text); border: 2px solid var(--text); font-weight: 800; }

/* hero / start */
.hero h1 { text-shadow: 4px 4px 0 #ffd6d6; font-weight: 900; }
.lede { color: var(--text); }
.eyebrow { font-family: inherit; text-transform: none; letter-spacing: .04em; font-weight: 800; color: var(--text); background: var(--amber); border: 2px solid var(--text); border-radius: 8px; padding: 6px 14px; box-shadow: 4px 4px 0 var(--text); transform: rotate(-1.5deg); }
.stat-tile { border: 2px solid var(--text); border-radius: var(--radius-md); }
.stat-tile:nth-child(1) { background: #fff0bd; }
.stat-tile:nth-child(2) { background: #d9f7ee; }
.stat-tile:nth-child(3) { background: #dcebff; }
.stat-tile:nth-child(4) { background: #ffe0df; }
.stat-num { color: var(--text); font-weight: 800; }
.stat-label { color: var(--text); font-weight: 600; }
.unit-chip { border: 2px solid var(--text); border-radius: var(--radius-md); background: #fff; box-shadow: 3px 3px 0 rgba(32, 36, 58, .12); font-weight: 600; }
.unit-no { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--text); border-radius: 50%; background: var(--amber); color: var(--text); font-size: 12px; font-weight: 800; }
.unit-chip:nth-child(3n+2) .unit-no { background: var(--blue); }
.unit-chip:nth-child(3n) .unit-no { background: #8ed8bd; }
.fine-print { color: var(--text-dim); }

/* buttons */
.btn { border: 2px solid var(--text); border-radius: 999px; box-shadow: 4px 4px 0 var(--text); font-weight: 800; transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translate(-1px, -2px); box-shadow: 6px 6px 0 var(--text); opacity: 1; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--text); }
.btn-primary { background: var(--coral); color: var(--text); }
.btn-accent { background: var(--accent); color: var(--text); }
.btn-ghost { background: #fff; color: var(--text); border: 2px solid var(--text); }
.btn:disabled { box-shadow: none; opacity: .45; }
.btn-link { color: var(--text-dim); }
.chip-btn { border: 2px solid var(--text); border-radius: 999px; background: #fff; font-weight: 700; color: var(--text); }
.chip-btn:hover { border-color: var(--text); background: var(--surface-alt); }
.chip-btn.is-on { background: var(--coral); color: var(--text); border-color: var(--text); }

/* history */
.history-block { border-top: 2px dashed rgba(32, 36, 58, .24); }
.history-block h2 { color: var(--text); }
.history-row { border: 2px solid var(--text); border-radius: var(--radius-sm); }
.history-pill { border: 1.5px solid var(--text); }
.history-pill.pass { background: #d9f7ee; color: var(--text); }
.history-pill.fail { background: #ffe0df; color: var(--text); }

/* exam */
.question-map { border: 2px solid var(--text); border-radius: var(--radius-md); background: #fff; }
.qmap-btn { border: 2px solid var(--text); border-radius: 50%; background: #fff; color: var(--text); font-family: inherit; font-weight: 700; }
.qmap-btn.is-answered { background: var(--amber); color: var(--text); border-color: var(--text); }
.qmap-btn.is-current { outline: 3px solid var(--coral); outline-offset: 2px; background: var(--coral); }
.question-card { border: 2px solid var(--text); border-radius: var(--radius-lg); box-shadow: 8px 8px 0 var(--blue); }
.chip { border: 1.5px solid var(--text); }
.chip-topic { background: #fff; color: var(--text); }
.chip-type { background: #d9f7ee; color: var(--text); }
.chip-type.is-multi { background: var(--amber); color: var(--text); }
.option { border: 2px solid var(--text); border-radius: var(--radius-md); box-shadow: 3px 3px 0 rgba(32, 36, 58, .12); transition: transform .1s, box-shadow .1s; }
.option:hover { border-color: var(--text); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--text); }
.option-letter { border: 2px solid var(--text); border-radius: 50%; background: #fff; color: var(--text); font-family: inherit; font-weight: 800; }
.option.is-selected { border-color: var(--text); background: #fff0bd; box-shadow: 4px 4px 0 var(--text); }
.option.is-selected .option-letter { background: var(--coral); color: var(--text); }
.answered-count { color: var(--text-dim); font-weight: 600; }

/* result */
.result-summary { border: 2px solid var(--text); border-radius: var(--radius-lg); box-shadow: 8px 8px 0 var(--amber); }
.result-pill { border: 2px solid var(--text); color: var(--text); }
.result-pill.pass { background: #8ed8bd; color: var(--text); }
.result-pill.fail { background: #ffb3b3; color: var(--text); }
.review-controls h2 { font-weight: 900; }
.filter-tabs { background: transparent; padding: 0; gap: 8px; }
.filter-tab { border: 2px solid var(--text); background: #fff; color: var(--text); font-weight: 700; }
.filter-tab.is-active { background: var(--coral); color: var(--text); box-shadow: none; }
.review-item { border: 2px solid var(--text); border-radius: var(--radius-lg); }
.review-item.is-wrong { border-color: var(--text); box-shadow: 6px 6px 0 #ffb3b3; }
.review-status { border: 1.5px solid var(--text); }
.review-status.correct { background: #d9f7ee; color: var(--text); }
.review-status.wrong { background: #ffe0df; color: var(--text); }
.review-option { border: 2px solid var(--text); border-radius: var(--radius-sm); }
.review-option.opt-correct { background: #d9f7ee; border-color: var(--text); }
.review-option.opt-correct .option-letter { background: #8ed8bd; color: var(--text); }
.review-option.opt-user-wrong { background: #ffe0df; border-color: var(--text); }
.review-option.opt-user-wrong .option-letter { background: #ffb3b3; color: var(--text); }
.review-option.opt-correct .review-option-tag, .review-option.opt-user-wrong .review-option-tag { color: var(--text); }
.review-explain { background: #fff0bd; border: 2px dashed rgba(32, 36, 58, .4); color: var(--text); }
.confirm-overlay { background: rgba(32, 36, 58, .55); }
.confirm-box { border: 2px solid var(--text); border-radius: var(--radius-lg); box-shadow: 8px 8px 0 var(--text); }

/* study tabs */
.study h1 { font-weight: 900; text-shadow: 3px 3px 0 #ffd6d6; }
.study .sub { color: var(--text-dim); }
.tools input[type=search], .tools select { border: 2px solid var(--text); border-radius: 999px; background: #fff; color: var(--text); padding: 8px 16px; }
.day-badge { border: 2px solid var(--text); color: var(--text) !important; font-family: inherit; font-weight: 800; box-shadow: 3px 3px 0 var(--text); }
.day-1 .day-badge { background: var(--amber); }
.day-2 .day-badge { background: var(--blue); }
.day-3 .day-badge { background: var(--coral); }
.unit-box { border: 2px solid var(--text); border-radius: var(--radius-lg); box-shadow: 5px 5px 0 rgba(32, 36, 58, .12); }
.day-1 .unit-box { box-shadow: 5px 5px 0 var(--amber); }
.day-2 .unit-box { box-shadow: 5px 5px 0 var(--blue); }
.day-3 .unit-box { box-shadow: 5px 5px 0 var(--coral); }
.unit-box .cnt { color: var(--text-dim); font-weight: 600; }
.topic-card { border: 2px solid var(--text); border-radius: var(--radius-md); background: #fff; }
.topic-card:nth-child(3n+1) { background: #ffe0df; }
.topic-card:nth-child(3n+2) { background: #d9f7ee; }
.topic-card:nth-child(3n) { background: #fff0bd; }
.topic-card h3 { color: var(--text); font-weight: 800; }
mark { background: var(--amber); }
.mm-wrap { border: 2px solid var(--text); border-radius: var(--radius-lg); box-shadow: 8px 8px 0 var(--blue); background: #fff; }
.mm-node { border: 2px solid var(--text); border-radius: 12px; background: #fff; color: var(--text); box-shadow: 3px 3px 0 var(--text); transition: transform .1s, box-shadow .1s; }
.mm-node:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--text); }
.mm-node.is-root { background: var(--coral); color: var(--text); border-color: var(--text); box-shadow: 4px 4px 0 var(--text); }
.lvl-day-1 > .mm-node { background: #fff0bd; border-color: var(--text); }
.lvl-day-2 > .mm-node { background: #dcebff; border-color: var(--text); }
.lvl-day-3 > .mm-node { background: #ffe0df; border-color: var(--text); }
.lvl-unit > .mm-node { background: #fff; border-color: var(--text); }
.lvl-topic > .mm-node { background: #d9f7ee; border-style: solid; box-shadow: 2px 2px 0 var(--text); }
.mm-leaf { border: 1.5px dashed rgba(32, 36, 58, .5); background: #fffdf8; color: var(--text); }
.pt-row { border: 2px solid var(--text); border-radius: var(--radius-md); }
.pt-row input { accent-color: var(--coral); }
.pt-row.is-done { background: #d9f7ee; }
.pt-meta { color: var(--text-dim); }
.progress-line { color: var(--text); font-weight: 700; }
@media (max-width: 800px) { .tab-btn { padding: 6px 12px; font-size: 14px; } .tabbar-inner { gap: 8px; } }

/* ===== 心智圖:概念樹 / 相關概念 / 情境流程 ===== */
.mm-col { display: flex; flex-direction: column; gap: 4px; flex: none; }
.mm-desc { font-size: 12.5px; color: var(--text-dim); max-width: 240px; line-height: 1.4; padding-left: 4px; }
.lvl-domain > .mm-node, .lvl-domain > .mm-col > .mm-node { font-weight: 800; font-size: 15px; }
.lvl-domain.c0 > .mm-node, .lvl-domain.c0 > .mm-col > .mm-node { background: #fff0bd; }
.lvl-domain.c1 > .mm-node, .lvl-domain.c1 > .mm-col > .mm-node { background: #dcebff; }
.lvl-domain.c2 > .mm-node, .lvl-domain.c2 > .mm-col > .mm-node { background: #ffe0df; }
.lvl-domain.c3 > .mm-node, .lvl-domain.c3 > .mm-col > .mm-node { background: #d9f7ee; }
.lvl-sub > .mm-node { background: #fff; font-weight: 700; }
.lvl-topic > .mm-node { background: #fffdf8; }
.mm-node.is-hit { background: var(--amber) !important; animation: hit 2.4s ease-out; }
@keyframes hit { 0%, 60% { box-shadow: 0 0 0 6px rgba(255, 107, 107, .55), 3px 3px 0 var(--text); } 100% { box-shadow: 3px 3px 0 var(--text); } }
.day-tag { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 0 6px; border: 1.5px solid var(--text); border-radius: 999px; vertical-align: 1px; color: var(--text); line-height: 1.5; }
.day-tag.d1 { background: var(--amber); } .day-tag.d2 { background: var(--blue); } .day-tag.d3 { background: var(--coral); }
.legend { margin-left: auto; font-size: 13px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mm-rel { display: flex; flex-direction: column; gap: 6px; width: max-content; max-width: 340px; padding: 10px 12px; border: 2px dashed var(--text); border-radius: 12px; background: #fff0bd; }
.mm-rel-h { font-weight: 800; font-size: 13px; }
.rel-chip { font: inherit; text-align: left; cursor: pointer; border: 2px solid var(--text); border-radius: 12px; background: #fff; color: var(--text); padding: 6px 10px; box-shadow: 2px 2px 0 var(--text); display: flex; flex-direction: column; gap: 1px; }
.rel-chip b { font-size: 13.5px; }
.rel-chip span { font-size: 12.5px; color: var(--text-dim); font-weight: 500; }
.rel-chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--text); background: #d9f7ee; }
.rel-chip.small { display: inline-flex; flex-direction: row; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.flow-step { display: flex; gap: 14px; align-items: flex-start; position: relative; }
.flow-step:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: -18px; border-left: 3px dashed rgba(32, 36, 58, .35); }
.flow-no { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--text); background: var(--coral); display: grid; place-items: center; font-weight: 900; box-shadow: 3px 3px 0 var(--text); z-index: 1; }
.flow-card { flex: 1; min-width: 0; background: #fff; border: 2px solid var(--text); border-radius: var(--radius-lg); padding: 14px 18px; box-shadow: 5px 5px 0 var(--amber); }
.flow-step:nth-child(3n+2) .flow-card { box-shadow: 5px 5px 0 var(--blue); }
.flow-step:nth-child(3n) .flow-card { box-shadow: 5px 5px 0 #8ed8bd; }
.flow-card h3 { font-size: 18px; font-weight: 900; margin-bottom: 4px; }
.flow-card p { margin: 0 0 10px; font-size: 15px; line-height: 1.7; }
.flow-chips { display: flex; flex-wrap: wrap; gap: 8px; }