/* ==========================================================
   港講粵語 KONG GONG CANTONESE · 共用主題
   配色：活力亮橙（由 logo 蜜桃橘 #f0b48a 提亮加飽和而成）
   主色 #f97316 / 亮橙 #ffa63d / 淺底 #fff2e4 / 高亮 #ffb955
   ========================================================== */
:root{
  --bg:#fff9f3; --card:#ffffff; --ink:#3a281c; --sub:#9a7154; --line:#ffe1c6;
  --accent:#f97316; --accent-2:#ffa63d; --accent-soft:#fff2e4;
  --hl:#ffdca8; --hl-strong:#ffb955;
  --brown:#c2410c; --cream:#ffe9ce;
  --xhs:#ff2442;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans CJK SC","Microsoft JhengHei",sans-serif;
  line-height:1.75;-webkit-font-smoothing:antialiased}
.wrap{max-width:840px;margin:0 auto;padding:22px 16px 70px}

/* ---------- 頂部 ---------- */
header.top{background:linear-gradient(135deg,#ffa63d,#f97316);color:#fff;border-radius:18px;padding:20px 20px 18px;
  box-shadow:0 8px 24px rgba(249,115,22,.28)}
.brandrow{display:flex;align-items:center;gap:14px}
.brandrow img.logo{width:52px;height:52px;flex:0 0 auto;border-radius:14px;background:#fff;padding:4px;
  box-shadow:0 4px 12px rgba(217,119,26,.22)}
.brandrow>div{flex:1 1 auto;min-width:0}
.kicker{font-size:12.5px;letter-spacing:.12em;opacity:.95}
h1{margin:6px 0 10px;font-size:24px;line-height:1.35;font-weight:700}
h1 .day{color:#fff7dd}
.sub{font-size:14.5px;color:rgba(255,255,255,.94)}
.meta{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:4px 13px;font-size:13px}
.bar{height:6px;background:rgba(255,255,255,.28);border-radius:99px;margin-top:15px;overflow:hidden}
.bar i{display:block;height:100%;width:3.33%;background:#fff3cf;border-radius:99px}
.prog{font-size:12.5px;color:rgba(255,255,255,.90);margin-top:7px}

/* ---------- 小紅書關注 ---------- */
.xhs{display:inline-flex;align-items:center;gap:8px;margin-top:14px;text-decoration:none;
  background:#fff;border-radius:999px;padding:6px 14px 6px 6px;
  box-shadow:0 4px 14px rgba(249,115,22,.18);transition:.16s}
.xhs:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(249,115,22,.26)}
.xhs .tag{background:var(--xhs);color:#fff;border-radius:999px;font-size:12px;font-weight:700;padding:3px 10px;letter-spacing:.02em}
.xhs .txt{font-size:13.5px;color:var(--brown);font-weight:600}
.xhs .txt small{font-weight:400;color:var(--sub)}
.xhs .arrow{font-size:13px;color:var(--sub)}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;margin-top:16px}
h2{font-size:16px;margin:0 0 12px;display:flex;align-items:center;gap:8px;font-weight:700}
h2 .n{background:var(--accent-soft);color:var(--accent);border-radius:8px;font-size:12.5px;padding:3px 9px;font-weight:700}
/* 一句一句練標題右邊嘅語速選擇器 */
h2 .ratewrap{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:400;font-size:13px;color:var(--sub)}
h2 .ratewrap select{font:inherit;font-size:13px;padding:4px 8px;border:1px solid var(--line);
  border-radius:9px;background:#fffdfa;color:var(--ink);cursor:pointer}
h2 .ratewrap select:focus{outline:none;border-color:var(--accent)}
@media (max-width:560px){h2{flex-wrap:wrap}h2 .ratewrap{margin-left:0}}

.scene{background:var(--accent-soft);border-radius:12px;padding:14px 16px;font-size:15.5px}
.scene b{color:var(--accent)}
.ctrl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
button{font:inherit;font-size:13.5px;cursor:pointer;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:7px 14px;transition:.15s}
button:hover{border-color:var(--accent);color:var(--accent)}
button.pri{background:var(--accent);border-color:var(--accent);color:#fff}
button.pri:hover{background:#ea650b;color:#fff}
button.hebe{background:#fff5ea;border-color:#ffd3a3;color:#c2410c}
button.hebe:hover{border-color:#ffa63d;color:#c2410c}
button.ai{background:#fff;border-color:var(--accent-2);color:#e2620b;font-weight:600}
button.ai:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
select{font:inherit;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:#fff;color:var(--ink)}
.small{font-size:13px;color:var(--sub)}

/* ---------- 朗讀文本 ---------- */
.passage{font-size:22px;line-height:1.9}
.passage .seg{border-radius:8px;padding:1px 2px;transition:background .18s}
.passage .seg.on{background:var(--hl);box-shadow:0 0 0 2px var(--hl)}
/* 每粒字：上行粵拼、下行漢字（粵拼喺字上面）。唔用 ruby，確保「關」嗰陣真係完全唔顯示 */
.tk{display:inline-flex;flex-direction:column;align-items:center;vertical-align:top;
    border-radius:5px;padding:0 1px}
.tk .hz{display:block;line-height:1.35}
.tk .rt{display:none;font-size:11px;line-height:1;height:13px;color:var(--accent);
        font-weight:600;white-space:nowrap;letter-spacing:0;margin-bottom:1px}
body.show-jyut .tk .rt{display:block}
body.show-jyut .tk{margin:0 3px}
body.show-jyut .passage{line-height:2.4}
body.show-jyut .cant{line-height:2.4}
.en{font-size:.82em;letter-spacing:.02em}
.punc{color:#cba684}

/* ---------- 逐句 ---------- */
.row{border:1px solid var(--line);border-radius:14px;padding:13px 14px 12px;margin-bottom:11px;transition:.18s}
.row.on{background:#fff6e9;border-color:var(--hl-strong)}
.row .idx{display:inline-block;min-width:25px;height:25px;line-height:25px;text-align:center;background:var(--accent-soft);color:var(--accent);border-radius:8px;font-size:12.5px;font-weight:700}
.cant{font-size:22px;line-height:1.5;margin:7px 0 6px}
.cant .tk{border-radius:6px;padding:1px 0;transition:background .12s}
.cant .tk.on{background:var(--hl-strong)}
.mand{font-size:14.5px;color:var(--sub);border-left:3px solid var(--line);padding-left:10px}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px;align-items:center}

/* ---------- 頁尾 ---------- */
footer{text-align:center;color:var(--sub);font-size:12px;margin-top:24px}
footer .fbrand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
footer .fbrand img{width:34px;height:34px;border-radius:10px;background:#fff;padding:3px;box-shadow:0 2px 8px rgba(249,115,22,.16)}
footer .fbrand a{color:var(--xhs);font-weight:700;text-decoration:none}
footer .fbrand a:hover{text-decoration:underline}
footer .fbrand span.brandname{font-weight:700;color:var(--brown)}

@media (max-width:520px){h1{font-size:20px}.passage{font-size:19px}.cant{font-size:20px}
  .brandrow img.logo{width:44px;height:44px}}

/* 手机：阅读、触控和底部安全边距 */
img,audio{max-width:100%}
.scene,.mand,.passage,.cant{overflow-wrap:anywhere}
@media(max-width:600px){
  .wrap{padding:14px 12px calc(92px + env(safe-area-inset-bottom,0px))}
  header.top{padding:18px 16px}.card{padding:16px}
  .brandrow{gap:10px}.kicker{letter-spacing:.06em;font-size:12px}
  button,select{min-height:44px}input,textarea,select{font-size:16px}
  .ctrl{gap:8px}.ctrl>button{flex:1 1 145px}.ctrl>.small{flex-basis:100%}
  .btns>button{flex:1;min-width:0;padding:8px}
  h2{line-height:1.6}.xhs{max-width:100%}
  .xhs .tag{flex-shrink:0}.xhs .txt{min-width:0}.xhs small{display:block}
  #kgCheckin,#kgLogout{bottom:calc(12px + env(safe-area-inset-bottom,0px))!important}
  #kgCheckin{left:12px!important;right:88px}#kgCheckinBtn{width:100%;min-height:44px}
  #kgLogout{right:12px!important}#kgLogoutBtn{min-height:44px;min-width:64px}
  body:has(#kgCheckin)::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(70px + env(safe-area-inset-bottom,0px));background:rgba(255,249,243,.97);border-top:1px solid var(--line);z-index:9998;pointer-events:none}
  body:has(#kgTeacherBar){padding-top:72px}
  #kgTeacherBar{left:12px!important;right:12px!important;top:calc(8px + env(safe-area-inset-top,0px))!important;border-radius:12px!important;flex-wrap:wrap;gap:6px!important}
  #kgTeacherBar a,#kgTeacherOut{min-height:36px;display:inline-flex;align-items:center}
}