/* 明亮版：白底、方格紙解剖盤，拆開的字根用四色螢光筆輪流標。 */
:root{
  color-scheme:light;
  --bg:#F7F9FF; --card:#FFFFFF; --ink:#1B1F3B; --muted:#5E6587; --line:#DCE2F4; --grid:#EBF0FD;
  --accent:#2F4BEA; --accent-soft:#E6EBFF; --accent-ink:#FFFFFF;
  --hl-1:#FFE45C; --hl-2:#FFB8DA; --hl-3:#A6EFCB; --hl-4:#B5DDFF; --hl-ink:#1B1F3B;
  --good:#11925A; --mid:#C47300; --bad:#D93A45;
  --display:"Bricolage Grotesque","Noto Sans TC",system-ui,sans-serif;
  --body:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;
  padding:20px max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px))}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-family:var(--display);font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;padding:8px 14px;font-weight:700;font-size:.92rem;
  white-space:nowrap;text-decoration:none;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);line-height:1.3}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.quiet{border-color:var(--line);font-weight:500}
.btn.gh::before{content:"";width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") center/contain no-repeat}
.field{min-width:0;font-size:.95rem;background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:9px 12px}
.field::placeholder{color:var(--muted)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--accent-soft);flex:none;object-fit:cover}

/* ---------- 工具頁 ---------- */
.app{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:20px}

.top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.brand{color:inherit;text-decoration:none}
.mark{font-family:var(--display);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;line-height:1.1;display:block}
.mark em{font-style:normal;background:linear-gradient(transparent 50%,var(--hl-1) 50%);padding:0 .08em}
.sub{font-size:.85rem;color:var(--muted)}

.account{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 10px 8px 12px}
.who{display:flex;align-items:center;gap:8px;min-width:0;font-weight:700}
.who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quota{flex:1;min-width:150px;font-size:.85rem;color:var(--muted);line-height:1.35}
.quota b{font-family:var(--display);font-weight:800;color:var(--ink);font-size:1.05rem}
.quota.empty b{color:var(--bad)}
.acts{display:flex;gap:6px;margin-left:auto}
.acts .btn{padding:6px 11px;font-size:.85rem}

.notice{font-size:.85rem;color:var(--mid);margin:0}

.specimen{background-color:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 16px 16px;display:flex;flex-direction:column;gap:18px;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px;background-position:-1px -1px}
.meta{display:flex;gap:6px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.meta span{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:1px 10px}
.word{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;column-gap:0;row-gap:.6rem;
  font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,10vw,3.6rem);letter-spacing:-.025em;line-height:1.05;
  padding:14px 0 6px;transition:column-gap .5s cubic-bezier(.2,.8,.2,1);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.part{--hl:var(--hl-1);display:flex;flex-direction:column;align-items:center;position:relative;border-radius:8px;transition:background-color .4s,padding .5s cubic-bezier(.2,.8,.2,1)}
.part:nth-child(4n+2){--hl:var(--hl-2)} .part:nth-child(4n+3){--hl:var(--hl-3)} .part:nth-child(4n+4){--hl:var(--hl-4)}
.ptext{display:block;padding:0 .04em}
.pmean{display:none;font-family:var(--body);font-weight:700;font-size:.9rem;letter-spacing:0;line-height:1.35;color:var(--muted);text-align:center;max-width:7.5em;margin-top:.45rem}
.part+.part::before{content:"";position:absolute;left:-.2em;top:-.15em;bottom:-.15em;border-left:2px dashed var(--accent);opacity:0;transition:opacity .4s .15s}
.word.is-split{column-gap:.4em}
.word.is-split .part{background:var(--hl);color:var(--hl-ink);padding:0 .1em}
.word.is-split .part+.part::before{opacity:1}
.word.is-meant .part{background:transparent;padding:0}
.word.is-meant .ptext{background:var(--hl);color:var(--hl-ink);border-radius:8px;padding:0 .1em}
.word.is-meant .pmean{display:block;animation:rise .45s both}
.word.is-list .pmean{display:none}
.legend{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:-4px 0 0;padding:12px 4px 0;border-top:1px dashed var(--line);animation:rise .45s both}
.legend dt{font-family:var(--display);font-weight:800;justify-self:end;padding:0 .3em;border-radius:5px;background:var(--hl)}
.legend dd{margin:0;color:var(--muted);min-width:0}
@keyframes rise{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}


.guess{display:grid;gap:8px}
.lbl{font-weight:700;font-size:1rem}
.row{display:flex;gap:8px}
#guess{flex:1;font-size:1rem;padding:11px 12px}

.g-idx{font-size:.75rem;color:var(--muted);margin-right:6px}
.tag{display:inline-block;font-size:.75rem;font-weight:700;border-radius:99px;padding:0 9px;border:1.5px solid currentColor}
.s-good{color:var(--good)} .s-mid{color:var(--mid)} .s-bad{color:var(--bad)} .s-wait{color:var(--muted)}
.dots::after{content:"…";animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}

.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tool{background:var(--card);border:1.5px solid var(--ink);border-radius:12px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.tool b{font-size:.98rem}
.tool small{font-size:.72rem;color:var(--muted);text-align:center}
.tool:disabled{border-color:var(--line);color:var(--muted);cursor:default}
.tool.reveal{border-style:dashed}

.answer{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 16px;display:grid;gap:16px}
.ans-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.ans-k{font-size:.8rem;color:var(--muted);font-weight:700}
.ans-score{font-family:var(--display);font-weight:800;font-size:1.7rem;font-variant-numeric:tabular-nums}
.ans-mean{font-size:1.35rem;font-weight:700;line-height:1.4;text-wrap:balance;margin:2px 0 0}
.formula{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-family:var(--display);font-weight:800}
.formula .f{background:var(--hl);border-radius:6px;padding:2px 8px}
.formula .f span{font-family:var(--body);font-weight:500;margin-left:6px}
.formula .plus{color:var(--muted)}
.chip{font-size:.85rem;border:1px solid var(--line);border-radius:99px;padding:2px 10px}
.note{font-size:.88rem;color:var(--muted);margin:0}
.family{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fam{border-top:1px solid var(--line);padding-top:6px;min-width:0}
.fam code{font-family:var(--display);font-weight:800;font-size:.95rem;display:block}
.fam span{font-size:.82rem;color:var(--muted)}
.tip{background:var(--accent-soft);border-radius:12px;padding:12px 14px;display:grid;gap:4px}
.tip .ans-k{color:var(--accent)}
.tip p{margin:0;font-size:1rem;line-height:1.7}
.next{width:100%;padding:14px;font-size:1.05rem}

.tabs{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:3px}
.tabs a{padding:4px 14px;border-radius:99px;text-decoration:none;color:var(--muted);font-weight:700;font-size:.9rem}
.tabs a[aria-current]{background:var(--ink);color:#fff}

.lookup{display:flex;gap:8px}
.lookup .field{flex:1;border-style:dashed}
.lookup + .notice{margin-top:-12px}

.today-head{display:grid;gap:10px}
.daybar{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.daybar h1,.history h1{margin:0;font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.01em}
.daybar span{font-size:.85rem;color:var(--muted)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{display:flex;align-items:center;gap:6px;cursor:pointer;background:var(--card);border:1.5px solid var(--line);border-radius:99px;padding:3px 12px;
  font-family:var(--display);font-weight:800;font-size:.95rem}
.chips li small{font-family:var(--body);font-size:.72rem;font-weight:700}
.chips li.solved{background:#E5F8EE;border-color:#BDE9D2}
.chips li.solved small{color:var(--good)}
.chips li.revealed{border-style:dashed;color:var(--muted)}
.chips li.on{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent)}
.back{font-weight:700;text-decoration:none;font-size:.92rem}

.card{display:flex;flex-direction:column;gap:20px}
.tries{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.try{display:grid;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.try-text{font-weight:500;overflow-wrap:anywhere}
.try-fb{display:flex;align-items:baseline;gap:8px;font-size:.92rem;color:var(--ink);line-height:1.5}
.try-fb .tag{flex:none}
.g-idx{font-size:.75rem;color:var(--muted);margin-right:6px}
.result{margin:0;font-weight:700}
.chips-s{display:flex;flex-wrap:wrap;gap:6px}
.next-row .done-all{margin:0;text-align:center;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:14px}

.history{display:grid;gap:16px}
.h-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.h-acts{display:flex;gap:6px}
.h-acts .btn{padding:5px 11px;font-size:.85rem}
.h-day h2{margin:0 0 6px;font-size:.85rem;color:var(--muted);font-weight:700}
.h-day ul{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.h-day li+li{border-top:1px solid var(--line)}
.h-day a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 14px;color:inherit;text-decoration:none}
.h-day a:hover{background:var(--accent-soft)}
.h-day code{font-family:var(--display);font-weight:800;font-size:1rem}
.h-mean{color:var(--muted);font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:560px){
  /* 手機：頭像和按鈕一行，點數說明換到下一行整排 */
  .account{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .account .quota{grid-column:1/-1;grid-row:2;min-width:0}
  .account .acts{margin-left:0}
  .account .gh-text{display:none}
  .account .btn.gh{padding:7px 9px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}