/* 設計語彙與好好用工具箱一致（暖紙＋朱印）。字型只寫字族名，不載 webfont。 */
:root{
  --ink:#1d2a30; --ink-soft:#566870; --ink-faint:#8b969b;
  --paper:#f3f1e9; --surface:#ffffff; --surface-2:#faf8f2;
  --line:#dcd7cb; --line-soft:#e9e5db;
  --seal:#9d2b25; --seal-deep:#7f2019; --seal-wash:#f6ebe8;
  --ok:#2c6e49; --ok-wash:#eef3ec; --ok-line:#cdddc6;
  --serif:"Noto Serif TC",serif;
  --sans:"Noto Sans TC",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --r:10px; --pad:16px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-wrap:break-word;}
a{color:inherit;}
button,input,select{font:inherit; color:inherit;}
button{cursor:pointer;}
button,input,select{min-height:44px;}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--seal-wash); outline-offset:2px;}
input:focus,select:focus{border-color:var(--seal); box-shadow:0 0 0 3px var(--seal-wash); outline:none;}
[hidden]{display:none !important;}

/* 頂欄 */
.topbar{position:sticky; top:0; z-index:20; background:rgba(243,241,233,.92);
  backdrop-filter:saturate(1.2) blur(8px); -webkit-backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line-soft);}
.topbar .row{max-width:660px; margin:0 auto; padding:12px var(--pad); display:flex; align-items:center; gap:10px;}
.brand{display:flex; align-items:baseline; gap:9px; text-decoration:none; min-height:32px;}
.brand .mark{font-family:var(--serif); font-weight:700; font-size:18px; color:var(--ink); letter-spacing:.02em;}
.brand .en{font-size:11px; letter-spacing:.16em; color:var(--ink-faint); text-transform:uppercase;}
.seal-dot{width:9px; height:9px; border-radius:2px; background:var(--seal); flex:none; transform:translateY(-1px);}
.back{margin-left:auto; font-size:14px; color:var(--ink-soft); text-decoration:none; padding:6px 0; white-space:nowrap;}
.back:hover{color:var(--seal);}

.wrap{max-width:660px; margin:0 auto; padding:0 var(--pad) 56px;}
header.page{margin:24px 0 18px;}
.eyebrow{font-size:12.5px; letter-spacing:.2em; color:var(--seal); font-weight:700; margin:0 0 8px;}
h1{font-family:var(--serif); font-weight:700; font-size:clamp(26px,6.4vw,33px); line-height:1.2; margin:0 0 10px;}
.lede{margin:0; color:var(--ink-soft); font-size:14.5px;}

/* 模式切換 */
.seg{display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px;}
.seg-btn{flex:1; border:0; background:transparent; border-radius:999px; font-weight:700; color:var(--ink-soft); padding:6px 8px;}
.seg-btn.active{background:var(--ink); color:#fff;}

/* 計時顯示 */
.stage{margin-top:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 18px 20px; text-align:center;}
.stage.flash{animation:flashBg .9s ease-in-out 3;}
@keyframes flashBg{0%,100%{background:var(--surface);} 50%{background:var(--seal-wash);}}
.state{font-size:.95rem; font-weight:700; color:var(--ink-soft); letter-spacing:.08em;}
.state.done{color:var(--seal);}
.display{font-family:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums;
  font-size:clamp(3.6rem,17vw,6.8rem); font-weight:700; line-height:1.1; margin:6px 0 2px;}
.display.done{color:var(--seal);}
.sub{min-height:1.5em; font-size:.95rem; color:var(--ink-soft);}
.progress{height:8px; border-radius:999px; background:var(--line-soft); margin-top:16px; overflow:hidden;}
.bar{height:100%; width:0%; background:var(--ink); border-radius:999px; transition:width .12s linear;}
.bar.done{background:var(--seal);}

/* 按鈕 */
.transport{display:flex; gap:10px; margin-top:14px;}
.btn{border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:var(--r);
  padding:10px 18px; font-weight:700; font-size:1rem;}
.btn:hover:not(:disabled){border-color:var(--seal);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn.primary{flex:1; background:var(--seal); border-color:var(--seal); color:#fff; font-size:1.1rem;
  letter-spacing:.06em; min-height:54px;}
.btn.primary:hover{background:var(--seal-deep); border-color:var(--seal-deep);}
.btn.small{min-height:38px; padding:4px 12px; font-size:.9rem;}
.btn.danger-ghost{color:var(--seal);}
.hint{font-size:13px; color:var(--ink-soft); margin:8px 0 0; line-height:1.6;}
.hint.tight{margin-top:2px;}
.hint.keys{text-align:center;}
kbd{font-family:inherit; font-size:12px; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px;
  padding:0 5px; background:var(--surface);}

/* 按鈴區：金色桌鈴保留原版質感 */
.bell-zone{margin-top:18px; display:flex; align-items:center; gap:18px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:18px;}
.bell-btn{flex:none; width:96px; height:96px; border-radius:50%; border:1px solid #8a6114;
  background:radial-gradient(circle at 34% 28%,#f6e2a0,#dcb254 46%,#a87c24 100%); color:#43300a;
  box-shadow:0 8px 18px rgba(90,64,10,.35), inset 0 2px 3px rgba(255,255,255,.65), inset 0 -5px 9px rgba(70,48,4,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font-weight:900; font-size:.95rem; user-select:none; -webkit-user-select:none; touch-action:manipulation;}
.bell-btn:active{transform:translateY(2px); box-shadow:0 3px 8px rgba(90,64,10,.35), inset 0 2px 3px rgba(255,255,255,.5), inset 0 -3px 6px rgba(70,48,4,.35);}
.bell-btn svg{width:30px; height:30px;}
.bell-side{flex:1; min-width:0;}
.bell-side .btn{width:100%;}

/* 卡片 */
.card{margin-top:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px;}
.card h2{margin:0; font-family:var(--serif); font-size:1.12rem; font-weight:700;}
.card h3{margin:20px 0 4px; font-size:1rem; font-weight:700;}
.card-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.card-head .note{font-size:.8rem; color:var(--ink-soft); white-space:nowrap;}

.dur-row{display:flex; gap:12px; margin-top:14px;}
.dur-row label{flex:1; font-size:.9rem; font-weight:700; color:var(--ink-soft); display:block;}
.dur-row input{width:100%; margin-top:6px; padding:8px 12px; font-size:1.1rem; font-weight:700;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); font-variant-numeric:tabular-nums;}
input:disabled,select:disabled{opacity:.45;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.chip{border:1px solid var(--line); background:var(--surface-2); border-radius:999px; padding:6px 14px;
  min-height:40px; font-weight:700; font-size:.92rem;}
.chip:hover:not(:disabled){border-color:var(--seal);}
.chip:active{background:var(--seal-wash);}
.chip:disabled{opacity:.45; cursor:not-allowed;}

.rows{list-style:none; margin:10px 0 0; padding:0;}
.rows li{display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line-soft);}
.rows li:last-child{border-bottom:0;}
.rows .grow{flex:1; min-width:0;}
.rows .main{font-weight:700; font-variant-numeric:tabular-nums;}
.rows .meta{display:block; font-size:.85rem; color:var(--ink-soft); margin-top:1px;}
.rows li.passed{opacity:.45;}
.rows li.empty{color:var(--ink-soft); font-size:.92rem; display:block; line-height:1.6;}
.badge{flex:none; font-size:.78rem; font-weight:700; padding:3px 9px; border-radius:999px;
  background:var(--line-soft); color:var(--ink);}
.badge.long{background:var(--seal-wash); color:var(--seal);}

.end-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px;}
.end-row label{font-weight:700;}
.end-row select{padding:8px 10px; font-weight:700; font-size:16px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);}
.cue-add{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; align-items:stretch;}
.cue-add input{width:76px; padding:8px 10px; font-size:16px; font-weight:700; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r); font-variant-numeric:tabular-nums;}
.cue-add select{padding:8px 10px; font-weight:700; font-size:16px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);}
.cue-add .btn{flex:1; min-width:110px;}
.err{color:var(--seal); font-size:.88rem; margin:8px 0 0; min-height:1.2em;}
.err:empty{margin:0; min-height:0;}

.preset-save{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.preset-save input{flex:1; min-width:180px; padding:8px 12px; font-size:16px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r);}
.foot-note{text-align:center; color:var(--ink-soft); font-size:.85rem; margin-top:24px; line-height:1.7;}

/* 觸控裝置通常沒有實體鍵盤，快速鍵說明收起來 */
@media (hover:none) and (pointer:coarse){ .hint.keys{display:none;} }
@media (max-width:420px){
  .bell-zone{gap:14px; padding:14px;}
  .bell-btn{width:84px; height:84px;}
}
@media (prefers-reduced-motion:reduce){
  .stage.flash{animation:none;}
  .bar{transition:none;}
  .btn:active,.bell-btn:active{transform:none;}
}