/* ===========================================================
   高中生進階理財 · 互動教學平台
   Design tokens
=========================================================== */
:root{
  --ink:#14233B;
  --ink-2:#1c3252;
  --teal:#1F6F6B;
  --teal-light:#DCEEEC;
  --gold:#D9A441;
  --gold-light:#F6E7C6;
  --paper:#F6F3EC;
  --card:#FFFFFF;
  --line:#E4DFD2;
  --text:#22262B;
  --text-soft:#5B6270;
  --good:#2E7D4F;
  --bad:#B4433A;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 2px 10px rgba(20,35,59,.06), 0 1px 2px rgba(20,35,59,.08);
  --serif:"Noto Serif TC","Source Han Serif TC",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --mono:"IBM Plex Mono","Space Mono",monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--text);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(90deg, rgba(20,35,59,.025) 1px, transparent 1px);
  background-size:64px 100%;
  opacity:.5;
}
h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); font-weight:700; margin:0 0 .5em;}
a{color:var(--teal);}
button{font-family:var(--sans);}
.num, .amount, .mono{font-family:var(--mono);}

/* ---------- App shell ---------- */
#app{position:relative; z-index:1; display:flex; min-height:100vh;}

/* ---------- Sidebar: 理財旅程地圖 ---------- */
.sidebar{
  width:264px; flex:0 0 264px;
  background:var(--ink);
  color:#EFE9DA;
  padding:28px 20px 28px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.brand-mark{
  width:34px;height:34px;border-radius:8px;
  background:linear-gradient(135deg,var(--gold),#B97E22);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif); font-weight:700; color:var(--ink); font-size:16px;
}
.brand-name{font-family:var(--serif); font-size:16px; font-weight:700; color:#fff;}
.brand-sub{font-size:11px; color:#9FB0C6; margin:2px 0 26px; letter-spacing:.04em;}

.journey{position:relative; padding-left:6px;}
.journey::before{
  content:""; position:absolute; left:17px; top:10px; bottom:10px; width:2px;
  background:repeating-linear-gradient(180deg, #3C567B 0 6px, transparent 6px 12px);
}
.node{
  position:relative; display:flex; gap:12px; align-items:flex-start;
  padding:10px 8px; border-radius:var(--radius-sm); cursor:pointer;
  margin-bottom:2px;
}
.node:hover{background:rgba(255,255,255,.05);}
.node.active{background:rgba(217,164,65,.14);}
.coin{
  flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  background:#243A5E; border:2px solid #3C567B;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:700; font-size:13px; color:#AFC0D6;
  position:relative; z-index:1;
  transition:.2s;
}
.node.active .coin{background:var(--gold); border-color:var(--gold); color:var(--ink);}
.node.done .coin{background:var(--teal); border-color:var(--teal); color:#fff;}
.node-body{padding-top:4px;}
.node-title{font-size:13.5px; font-weight:700; color:#EFE9DA; line-height:1.4;}
.node.active .node-title{color:#fff;}
.node-dots{display:flex; gap:4px; margin-top:6px;}
.dot{width:6px;height:6px;border-radius:50%;background:#3C567B;}
.dot.on{background:var(--gold);}

.sidebar-foot{margin-top:24px; padding-top:16px; border-top:1px solid #2B4165; font-size:11px; color:#8296AF;}

/* ---------- Main ---------- */
.main{flex:1; min-width:0; padding:32px 44px 80px; max-width:980px;}
@media (max-width:900px){
  .sidebar{position:fixed; left:-280px; z-index:20; transition:.25s; box-shadow:8px 0 30px rgba(0,0,0,.25);}
  .sidebar.open{left:0;}
  .main{padding:20px 18px 80px;}
  .menu-btn{display:flex !important;}
}
.menu-btn{
  display:none; position:fixed; top:16px; left:16px; z-index:21;
  width:42px;height:42px;border-radius:50%; background:var(--ink); color:#fff;
  align-items:center; justify-content:center; border:none; cursor:pointer; box-shadow:var(--shadow);
}

.chapter-head{margin-bottom:6px;}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--teal); text-transform:uppercase;}
.chapter-head h1{font-size:30px; margin-top:4px;}

/* Tabs */
.tabbar{display:flex; gap:6px; margin:22px 0 26px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.tab{
  font-family:var(--sans); font-weight:700; font-size:14px; color:var(--text-soft);
  background:none; border:none; padding:10px 16px; cursor:pointer; position:relative; top:1px;
  border-bottom:3px solid transparent;
}
.tab.active{color:var(--ink); border-bottom-color:var(--gold);}
.tab .tab-badge{
  display:inline-block; margin-left:6px; font-family:var(--mono); font-size:10px;
  background:var(--teal-light); color:var(--teal); border-radius:20px; padding:1px 7px;
}

/* Cards / content */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; margin-bottom:18px; box-shadow:var(--shadow);}
.story{background:#fff; border-left:4px solid var(--gold); padding:18px 22px; border-radius:0 var(--radius) var(--radius) 0; margin-bottom:22px;}
.story h4{font-size:13px; letter-spacing:.06em; color:var(--gold); text-transform:uppercase; font-family:var(--sans); margin-bottom:8px;}

.objectives{background:var(--teal-light); border-radius:var(--radius); padding:20px 24px; margin-bottom:24px;}
.objectives h4{color:var(--teal); font-size:14px; letter-spacing:.04em; margin-bottom:10px;}
.objectives ol{margin:0; padding-left:20px;}
.objectives li{margin-bottom:6px; font-size:14.5px;}

.prose h3{font-size:20px; margin-top:32px; padding-bottom:8px; border-bottom:2px solid var(--gold-light);}
.prose h4{font-size:16px; margin-top:22px; color:var(--ink-2);}
.prose p{margin:.7em 0;}
.prose table{border-collapse:collapse; width:100%; margin:14px 0; font-size:14px;}
.prose th,.prose td{border:1px solid var(--line); padding:8px 12px; text-align:left; vertical-align:top;}
.prose th{background:#F2EEE2; font-family:var(--sans); font-weight:700; color:var(--ink);}
.prose tr:nth-child(even) td{background:#FBFAF6;}
.prose strong{color:var(--ink);}
.prose ul,.prose ol{padding-left:22px;}
.prose img{max-width:100%; height:auto; border-radius:10px; border:1px solid var(--line); margin:16px 0; display:block;}

.case-block{
  background:#FBF6E9; border:1px solid var(--gold-light); border-radius:var(--radius);
  padding:18px 22px; margin:22px 0;
}
.case-block h4{color:#8A5E12; font-size:15px;}

.summary-block{background:var(--ink); color:#EFE9DA; border-radius:var(--radius); padding:24px 26px; margin-top:26px;}
.summary-block h3{color:#fff; font-size:16px; letter-spacing:.04em;}
.summary-block p{color:#D6CFBE; font-size:14.5px;}

.reading-block{margin-top:20px;}
.reading-block h4{font-size:14px; color:var(--text-soft); letter-spacing:.05em; margin-bottom:8px;}

/* Section headers inside tabs */
.subsec{margin-bottom:34px;}
.subsec-head{display:flex; align-items:baseline; gap:10px; margin-bottom:14px;}
.subsec-head .idx{font-family:var(--mono); color:var(--gold); font-weight:700;}
.subsec-head h3{margin:0; font-size:18px;}
.subsec-hint{font-size:13px; color:var(--text-soft); margin:-8px 0 14px;}

/* Rapid-fire flip */
.rapid-wrap{background:var(--ink); border-radius:var(--radius); padding:26px; text-align:center; color:#fff;}
.rapid-count{font-family:var(--mono); font-size:12px; color:var(--gold); letter-spacing:.1em;}
.rapid-q{font-family:var(--serif); font-size:22px; margin:18px 0 22px; min-height:70px; display:flex; align-items:center; justify-content:center;}
.rapid-btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

/* Discussion */
.discuss-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:700px){.discuss-grid{grid-template-columns:1fr;}}
.discuss-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; font-size:14px;}
.discuss-card .n{font-family:var(--mono); color:var(--teal); font-weight:700; margin-right:4px;}
.discuss-card textarea{width:100%; margin-top:8px; border:1px solid var(--line); border-radius:6px; padding:8px; font-family:var(--sans); font-size:13px; resize:vertical; min-height:44px;}

/* Buttons */
.btn{
  font-weight:700; font-size:13.5px; border-radius:8px; padding:9px 16px; border:1px solid var(--ink);
  background:var(--ink); color:#fff; cursor:pointer;
}
.btn.ghost{background:transparent; color:var(--ink);}
.btn.gold{background:var(--gold); border-color:var(--gold); color:var(--ink);}
.btn.small{padding:5px 12px; font-size:12.5px;}
.btn:disabled{opacity:.45; cursor:not-allowed;}

/* Findout table */
.data-table{width:100%; border-collapse:collapse; margin-bottom:16px; font-size:14px;}
.data-table th,.data-table td{border:1px solid var(--line); padding:8px 12px;}
.data-table th{background:#F2EEE2;}
.data-table select{width:100%; padding:4px; font-family:var(--sans); border-radius:5px; border:1px solid var(--line);}
.data-table td.correct{background:#E4F3E9;}
.data-table td.wrong{background:#FBE6E3;}
.qa-list{list-style:none; margin:0; padding:0;}
.qa-list li{margin-bottom:12px;}
.qa-list .q{font-weight:700; margin-bottom:6px; font-size:14.5px;}
.qa-list textarea{width:100%; border:1px solid var(--line); border-radius:6px; padding:8px; font-family:var(--sans); font-size:13.5px; min-height:40px;}

/* Matching game */
.match-wrap{display:flex; gap:40px; justify-content:center; flex-wrap:wrap;}
.match-col{display:flex; flex-direction:column; gap:10px; width:230px;}
.match-item{
  border:2px solid var(--line); border-radius:10px; padding:10px 14px; cursor:pointer;
  background:#fff; font-size:14px; transition:.15s;
}
.match-item.selected{border-color:var(--gold); background:var(--gold-light);}
.match-item.matched{border-color:var(--good); background:#E4F3E9; color:var(--good); cursor:default;}
.match-item.shake{animation:shake .3s;}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.match-status{text-align:center; margin-top:16px; font-family:var(--mono); font-size:13px; color:var(--text-soft);}

/* Calc */
.calc-item{border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; margin-bottom:12px; background:#fff;}
.calc-item .title{font-weight:700; margin-bottom:6px;}
.calc-item .q{font-size:14px; margin-bottom:10px; color:var(--text-soft);}
.calc-item input{border:1px solid var(--line); border-radius:6px; padding:7px 10px; font-family:var(--mono); font-size:14px; width:220px;}
.calc-item .reveal{margin-left:10px; font-family:var(--mono); font-weight:700; color:var(--teal); display:none;}
.calc-item .reveal.show{display:inline;}

/* Checkbox activity */
.checklist{list-style:none; margin:0; padding:0;}
.checklist li{
  display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:8px; font-size:14.5px;
  border:1px solid transparent;
}
.checklist li input{margin-top:4px;}
.checklist li.correct-hit{background:#E4F3E9; border-color:var(--good);}
.checklist li.correct-miss{background:#FBF6E9; border-color:var(--gold);}
.checklist li.wrong-hit{background:#FBE6E3; border-color:var(--bad);}
.checklist-score{margin-top:14px; font-family:var(--mono); font-size:14px;}

/* Keywords flashcards */
.kw-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px;}
.kw-card{perspective:1000px; height:130px; cursor:pointer;}
.kw-inner{position:relative; width:100%; height:100%; transition:transform .5s; transform-style:preserve-3d;}
.kw-card.flipped .kw-inner{transform:rotateY(180deg);}
.kw-face{position:absolute; inset:0; backface-visibility:hidden; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:12px;}
.kw-front{background:var(--ink); color:#fff;}
.kw-front .zh{font-family:var(--serif); font-size:17px; font-weight:700;}
.kw-front .en{font-family:var(--mono); font-size:11px; color:var(--gold); margin-top:6px;}
.kw-back{background:var(--gold-light); color:var(--ink); transform:rotateY(180deg); font-size:12.5px; line-height:1.5;}

/* Worksheet / draw pad */
.worksheet-block{margin-bottom:26px;}
.worksheet-title{font-family:var(--serif); font-size:17px; margin-bottom:8px;}
.draw-toolbar{display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap;}
.swatch{width:22px;height:22px;border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer;}
.swatch.active{box-shadow:0 0 0 2px var(--ink);}
canvas.drawpad{width:100%; max-width:640px; height:320px; background:#fff; border:1px solid var(--line); border-radius:10px; touch-action:none; display:block;}
.task-fields{display:grid; gap:8px; margin-top:10px;}
.task-fields input, .task-fields textarea{border:1px solid var(--line); border-radius:6px; padding:8px; font-family:var(--sans); font-size:13.5px;}

/* Quiz */
.quiz-progress{font-family:var(--mono); font-size:13px; color:var(--text-soft); margin-bottom:10px;}
.quiz-item{border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; margin-bottom:14px; background:#fff;}
.quiz-item .qtext{font-weight:700; margin-bottom:10px;}
.quiz-opt{display:flex; gap:10px; align-items:center; padding:7px 10px; border-radius:7px; cursor:pointer; font-size:14px;}
.quiz-opt:hover{background:#F2EEE2;}
.quiz-opt input{accent-color:var(--ink);}
.quiz-item.graded .quiz-opt.correct-ans{background:#E4F3E9; font-weight:700;}
.quiz-item.graded .quiz-opt.wrong-picked{background:#FBE6E3;}
.quiz-summary{position:sticky; bottom:16px; background:var(--ink); color:#fff; border-radius:var(--radius); padding:16px 22px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow); flex-wrap:wrap; gap:10px;}
.quiz-summary .score{font-family:var(--mono); font-size:20px; color:var(--gold);}

.empty-note{color:var(--text-soft); font-size:14px; font-style:italic;}

/* ---------- 分組協作模式 ---------- */
.group-panel{margin-top:22px; padding-top:18px; border-top:1px solid #2B4165; font-size:12.5px; color:#C9D3E2;}
.switch-row{display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:700; color:#EFE9DA; font-size:13px;}
.switch-row.small{font-weight:500; font-size:12px; color:var(--text-soft);}
.switch-row input{accent-color:var(--gold); width:16px; height:16px;}
.group-row{display:flex; align-items:center; gap:6px; margin-top:10px;}
.group-row select, .group-row input[type=number]{
  background:#1c3252; color:#fff; border:1px solid #3C567B; border-radius:6px; padding:3px 6px; font-family:var(--mono); font-size:12.5px;
}
.group-api-note{margin-top:10px; font-size:11.5px; color:#7FBFA6;}
.group-api-note.warn{color:#E0A25C;}
.group-hint{margin-top:8px; font-size:11.5px; line-height:1.6; color:#8296AF;}
#groupPanel .btn{margin-top:12px; width:100%;}

.group-field{margin-top:8px;}
.group-field-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:8px;}
.group-chip{font-family:var(--mono); font-size:11px; background:var(--gold-light); color:#8A5E12; border-radius:20px; padding:2px 10px; font-weight:700;}
.group-board{margin-top:10px;}
.group-board-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px;}
.group-board-item{border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#FBFAF6; font-size:12.5px;}
.group-board-item.mine{border-color:var(--gold); background:var(--gold-light);}
.group-board-item.empty{opacity:.55; font-style:italic;}
.group-board-item .g-num{font-family:var(--mono); font-size:10.5px; color:var(--teal); font-weight:700; margin-bottom:3px;}
.group-board-item .g-text{white-space:pre-wrap; word-break:break-word;}

/* ---------- 老師總覽台 ---------- */
.overview-toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px;}
.overview-toolbar select{padding:6px 10px; border-radius:6px; border:1px solid var(--line); font-family:var(--sans); font-size:13px;}
.ov-section{margin:26px 0 10px; font-size:15px; color:var(--teal);}
.ov-item .ov-q{font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}