/* kids-ai-lab 共用視覺 —— 給國小高年級的明亮、大按鈕、圓角風格 */
:root {
  --bg: #fef9f3;
  --ink: #2b2b3a;
  --brand: #ff7a59;
  --brand-2: #4ecdc4;
  --accent: #ffd166;
  --card: #ffffff;
  --shadow: 0 6px 20px rgba(0,0,0,.10);
  --radius: 18px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}
a { color: var(--brand); }

/* ===== 共用頁首 ===== */
.lab-top {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; background: var(--card); box-shadow: var(--shadow);
  position: sticky; top: 0; z-index: 10;
}
.lab-top .back { text-decoration: none; font-weight: 700; color: var(--brand); }
.lab-top h1 { font-size: 1.1rem; margin: 0; }
.lab-top .tag {
  margin-left: auto; font-size: .8rem; padding: 4px 10px;
  border-radius: 999px; background: var(--accent); color: #6b4b00; font-weight: 700;
}

/* ===== 容器 ===== */
.wrap { max-width: 980px; margin: 0 auto; padding: 24px 20px 80px; }
.panel {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; margin-bottom: 20px;
}
.stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }
canvas { border-radius: 14px; max-width: 100%; box-shadow: var(--shadow); }

/* ===== 按鈕 ===== */
.btn {
  border: none; cursor: pointer; font-weight: 800; font-size: 1rem;
  padding: 12px 22px; border-radius: 999px; color: #fff; background: var(--brand);
  box-shadow: var(--shadow); transition: transform .08s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn.secondary { background: var(--brand-2); }
.btn.ghost { background: #eee; color: var(--ink); }
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ===== 狀態列 ===== */
.status { font-weight: 700; color: #888; min-height: 1.4em; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; cursor: pointer; box-shadow: var(--shadow); }

/* ===== hub 首頁 ===== */
.hub-head { text-align: center; padding: 38px 20px 6px; }
.hub-head h1 { font-size: 2.2rem; margin: 0 0 8px; }
.hub-head p { color: #777; margin: 4px 0; }

.chapter {
  display: flex; align-items: center; gap: 10px;
  margin: 32px 0 12px; font-size: 1.2rem; font-weight: 800; color: var(--ink);
}
.chapter::before {
  content: ""; width: 8px; height: 24px; border-radius: 6px; background: var(--brand);
}

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }

.card {
  display: flex; align-items: center; gap: 16px;
  text-decoration: none; color: inherit;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; transition: transform .1s ease, box-shadow .1s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.card .emoji {
  flex-shrink: 0; width: 66px; height: 66px; border-radius: 20px;
  font-size: 2.2rem; background: #fff4ee;
  display: flex; align-items: center; justify-content: center;
}
.card .meta { flex: 1; min-width: 0; }
.card .t { font-weight: 800; font-size: 1.05rem; margin: 0 0 3px; }
.card .d { font-size: .85rem; color: #777; margin: 0; }
.card .badge {
  display: inline-block; margin-top: 9px; font-size: .72rem; font-weight: 800;
  padding: 3px 9px; border-radius: 999px;
}
.badge.ok { background: #d8f5e3; color: #1a7a44; }
.badge.wip { background: #ffe6c7; color: #a05a00; }
.badge.api { background: #e2e0ff; color: #4b3fa0; }