/* 食譜 App — 暖廚房紙感;與 Pillbox 同家(粉圓字型、蛋白質綠、圓角 20) */
:root{
  --bg:#F6F1E9; --card:#FFFFFF; --ink:#1F2A2E; --sub:#6A7780; --line:#E7DFD4; --chip:#F0EAE0; --chip2:#EFE8DD;
  --accent:#D9663D; --accent-ink:#B8532E; --accent-bg:#FBE9E0;
  --ok:#0E9B8D; --ok-bg:#E3F4F1; --amber:#E8930C; --amber-ink:#B8730C; --amber-bg:#FDF1DD; --red:#E5484D; --red-ink:#C4363C; --red-bg:#FDE9EA;
  --tabidle:#9FA9AE; --shadow:0 2px 10px rgba(40,30,20,.06); --muted:#A9B1B5; --dim:#4F5C63;
}
@font-face{ font-family:'jf open huninn'; src:url('huninn.woff2') format('woff2'); font-weight:400; font-display:swap; }
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'jf open huninn',-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;
  background:var(--bg); color:var(--ink); min-height:100vh; min-height:100dvh; line-height:1.5;
  padding:env(safe-area-inset-top) 0 0; overscroll-behavior:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
body, body *{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
input, textarea, [contenteditable="true"], .selectable, .selectable *{-webkit-user-select:text; user-select:text}
button{font-family:inherit; font-size:inherit; color:inherit; border:none; background:none; cursor:pointer}
svg{display:block}
img{max-width:100%}
a{color:var(--accent-ink)}
.hidden{display:none!important}

/* 版面 */
#view{max-width:560px; margin:0 auto; padding:0 0 calc(env(safe-area-inset-bottom) + 96px)}
.page{padding:18px 16px 0; display:flex; flex-direction:column; gap:14px}
.band{position:absolute; left:0; right:0; top:0; height:220px; background:linear-gradient(180deg,#F2DCC8 0%,var(--bg) 100%); z-index:-1}
.wrap{position:relative}
h1.title{font-size:26px; font-weight:900; letter-spacing:.5px; line-height:1.2}
.subtitle{font-size:13px; color:var(--sub)}
.h2{font-size:17px; font-weight:800}
.h3{font-size:16px; font-weight:800}
.meta{font-size:12px; color:var(--sub)}
.row{display:flex; align-items:center; gap:10px}
.between{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.iconbtn{width:40px; height:40px; border-radius:14px; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink); flex:none}
.iconbtn.round{border-radius:99px; width:38px; height:38px; background:rgba(255,255,255,.92); border:none}
.iconbtn.on{background:var(--accent-bg); color:var(--accent-ink); border-color:#F1CDBD}

/* 搜尋 */
.search{display:flex; align-items:center; gap:10px; height:46px; padding:0 14px; background:var(--card); border:1px solid var(--line); border-radius:14px; color:var(--sub)}
.search input{flex:1; border:none; background:transparent; font-size:16px; color:var(--ink); outline:none; min-width:0}
.search input::placeholder{color:var(--sub)}

/* chips */
.chips{display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none; padding:8px 14px; border-radius:99px; background:var(--card); border:1px solid var(--line); color:var(--ink); font-size:13px; font-weight:500; white-space:nowrap}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:700}
.tag{display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border-radius:99px; background:var(--card); border:1px solid var(--line); font-size:12.5px; font-weight:600}
.tag.lv1{background:var(--ok-bg); color:var(--ok); border-color:transparent; font-weight:700}
.tag.lv2{background:var(--amber-bg); color:var(--amber-ink); border-color:transparent; font-weight:700}
.tag.lv3{background:var(--accent-bg); color:var(--accent-ink); border-color:transparent; font-weight:700}
.pill{display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:99px; font-size:12.5px; font-weight:700}
.pill.video{background:var(--accent-bg); color:var(--accent-ink)}
.pill.timer{background:var(--amber-bg); color:var(--amber-ink)}
.pill.ok{background:var(--ok-bg); color:var(--ok)}
.lv1{color:var(--ok)} .lv2{color:var(--amber)} .lv3{color:var(--accent)}

/* 卡片 */
.card{background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); overflow:hidden}
.card.pad{padding:14px 16px}
.hscroll{display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -16px; padding:0 16px 4px}
.hscroll::-webkit-scrollbar{display:none}
.rcard{flex:none; width:236px; cursor:pointer}
.rcard .thumb{position:relative; height:140px; background:var(--line)}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.gcard{cursor:pointer}
.gcard .thumb{position:relative; height:110px; background:var(--line)}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb .ph{width:100%; height:100%; display:flex; align-items:flex-end; padding:10px; font-size:13px; font-weight:800; color:rgba(31,42,46,.55)}
.badge{position:absolute; left:10px; top:10px; padding:4px 9px; border-radius:99px; background:var(--ok); color:#fff; font-size:12px; font-weight:800}
.gcard .badge{left:8px; top:8px; padding:3px 8px; font-size:11px}
.playdot{position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:99px; background:rgba(31,42,46,.78); color:#fff; display:flex; align-items:center; justify-content:center}
.cbody{display:flex; flex-direction:column; gap:6px; padding:12px 14px 14px}
.gcard .cbody{gap:5px; padding:10px 12px 12px}
.cname{font-size:15.5px; font-weight:700; line-height:1.35}
.gcard .cname{font-size:14px}
.cmeta{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--sub); flex-wrap:wrap}
.gcard .cmeta{font-size:11.5px}
.dot{color:#C9BFB2}
.empty{color:var(--sub); text-align:center; padding:40px 20px; font-size:14px; line-height:1.8}

/* 食譜頁 */
.hero{position:relative; height:250px; background:var(--line); cursor:pointer}
.hero img{width:100%; height:100%; object-fit:cover; display:block}
.hero .shade{position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,20,20,.35) 0%,rgba(20,20,20,0) 40%,rgba(20,20,20,.55) 100%)}
.hero .tl{position:absolute; left:14px; top:14px} .hero .tr{position:absolute; right:14px; top:14px}
.hero .play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:99px; background:rgba(255,255,255,.95); color:var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.25)}
.hero .bl{position:absolute; left:16px; bottom:14px; display:flex; gap:8px; color:#fff; font-size:12.5px; font-weight:600}
.hero .bl span{padding:4px 9px; border-radius:99px; background:rgba(255,255,255,.22)}
.hero.nov{background:linear-gradient(135deg,#F2DCC8,#E4C3A8)}
.hero.nov .play{display:none}
.rtitle{font-size:24px; font-weight:900; line-height:1.25}
.summary{font-size:14px; line-height:1.65; color:var(--sub)}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.tile{display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border-radius:14px; background:var(--card); border:1px solid var(--line)}
.tile .l{font-size:11px; color:var(--sub)} .tile .v{font-size:20px; font-weight:900} .tile .u{font-size:10px; color:var(--sub)}
.tile.p{background:var(--ok-bg); border-color:transparent} .tile.p .l,.tile.p .v,.tile.p .u{color:var(--ok)} .tile.p .l{font-weight:700}
.hl{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11.5px; color:var(--sub)}
.hl b{padding:3px 9px; border-radius:99px; background:var(--ok-bg); color:var(--ok); font-weight:700}
.seg{display:flex; background:var(--chip2); border-radius:14px; padding:4px; position:sticky; top:calc(env(safe-area-inset-top) + 8px); z-index:5}
.seg button{flex:1; text-align:center; padding:8px 0; border-radius:11px; font-size:13px; font-weight:600; color:var(--sub)}
.seg button.on{background:var(--card); color:var(--ink); font-weight:800; box-shadow:0 1px 4px rgba(40,30,20,.08)}
.ingr{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--chip); cursor:pointer}
.ingr:last-of-type{border-bottom:none}
.cb{width:22px; height:22px; border-radius:7px; border:1.5px solid #C9BFB2; flex:none; display:flex; align-items:center; justify-content:center; color:#fff}
.cb.on{background:var(--ok); border-color:var(--ok)}
.ingr .n{flex:1; display:flex; flex-direction:column} .ingr .n .nm{font-size:15px} .ingr .n .nt{font-size:11.5px; color:var(--sub)}
.ingr .q{font-size:14px; font-weight:700; white-space:nowrap}
.ingr.on .nm,.ingr.on .q{color:var(--tabidle); text-decoration:line-through}
.ghead{font-size:12px; font-weight:800; color:var(--sub); padding:10px 0 2px}
.btn{display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:46px; border-radius:14px; background:var(--accent-bg); color:var(--accent-ink); font-size:14px; font-weight:800; margin-top:8px}
.btn.primary{background:var(--accent); color:#fff; box-shadow:0 6px 16px rgba(217,102,61,.3)}
.btn.dark{background:var(--ink); color:#fff}
.btn.ghost{background:var(--card); border:1px solid var(--line); color:var(--ink); font-weight:700}
.btn.ok{background:var(--ok); color:#fff}
.btn.sm{height:40px; font-size:13px; width:auto; padding:0 14px; margin:0}
.tool{display:flex; align-items:flex-start; gap:12px}
.tool .ic{width:36px; height:36px; border-radius:12px; background:var(--chip); display:flex; align-items:center; justify-content:center; color:var(--ink); flex:none}
.tool .t{font-size:14.5px; font-weight:700} .tool .d{font-size:12.5px; color:var(--sub); line-height:1.55}
.step{display:flex; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:14px 16px; box-shadow:var(--shadow)}
.step .num{width:30px; height:30px; border-radius:99px; background:var(--ink); color:#fff; font-size:14px; font-weight:900; display:flex; align-items:center; justify-content:center; flex:none}
.step .b{display:flex; flex-direction:column; gap:6px; flex:1; min-width:0}
.step .t{font-size:15.5px; font-weight:800} .step .x{font-size:14.5px; line-height:1.7} .step .w{font-size:12.5px; line-height:1.6; color:var(--sub)}
.step .acts{display:flex; gap:8px; margin-top:2px; flex-wrap:wrap}
.callout{display:flex; flex-direction:column; gap:6px; border-radius:20px; padding:14px 16px}
.callout .h{font-size:14px; font-weight:800} .callout p{font-size:14px; line-height:1.7}
.callout.ok{background:var(--ok-bg)} .callout.ok .h{color:var(--ok)}
.callout.red{background:var(--red-bg)} .callout.red .h{color:var(--red-ink)}
.callout.amber{background:var(--amber-bg)} .callout.amber .h{color:var(--amber-ink)}
.fine{font-size:12.5px; color:var(--sub); line-height:1.6; padding:0 4px}
.bottombar{position:fixed; left:0; right:0; bottom:0; z-index:15; display:flex; gap:10px; padding:12px 16px calc(env(safe-area-inset-bottom) + 14px); background:rgba(246,241,233,.96); border-top:1px solid var(--line); backdrop-filter:blur(8px)}
.bottombar .btn{margin:0; height:52px; border-radius:16px; font-size:15px}
.bottombar .btn.primary{flex:1.3; font-size:16px}
.bottombar .btn.ghost{flex:1}
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:15; display:flex; background:var(--card); border-top:1px solid var(--line); padding:8px 8px calc(env(safe-area-inset-bottom) + 12px)}
.tabbar button{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--tabidle); font-size:11px; font-weight:600; position:relative; padding:2px 0}
.tabbar button.on{color:var(--accent); font-weight:800}
.tabbar .cnt{position:absolute; top:-4px; right:calc(50% - 24px); min-width:17px; height:17px; padding:0 5px; border-radius:99px; background:var(--accent); color:#fff; font-size:10px; line-height:17px; font-weight:800; text-align:center}

/* 影片頁 */
.vpage{display:flex; flex-direction:column; height:100vh; height:100dvh; max-width:560px; margin:0 auto; padding-top:env(safe-area-inset-top)}
.vhead{display:flex; align-items:center; gap:10px; padding:12px 16px 10px}
.vhead .iconbtn{width:36px; height:36px; border-radius:12px}
.vhead .t{font-size:16px; font-weight:800; line-height:1.3} .vhead .s{font-size:11.5px; color:var(--sub); line-height:1.4}
.player{position:relative; width:100%; aspect-ratio:16/9; background:#1F2A2E; flex:none}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.player .fallback{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#fff; padding:20px; text-align:center; font-size:14px}
.vctl{display:flex; flex-direction:column; gap:10px; padding:12px 16px 0; flex:none}
.vctl .r{display:flex; gap:8px; align-items:center}
.vctl .r .spacer{margin-left:auto}
.ctlchip{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:99px; background:var(--card); border:1px solid var(--line); font-size:12.5px; font-weight:700}
.ctlchip.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.stepchip{flex:none; padding:7px 12px; border-radius:12px; background:var(--card); border:1px solid var(--line); font-size:12.5px; white-space:nowrap}
.stepchip .n{color:var(--sub)} .stepchip .tm{color:var(--accent-ink); font-weight:700}
.stepchip.on{background:var(--accent-bg); border-color:#F1CDBD; font-weight:700}
.note{display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border-radius:14px; background:var(--amber-bg); color:#6E4A0A; font-size:12.5px; line-height:1.55}
.note svg{flex:none; margin-top:2px}
.tx{display:flex; flex-direction:column; flex:1; margin:12px 16px 0; background:var(--card); border:1px solid var(--line); border-radius:20px 20px 0 0; padding:12px 16px 0; overflow:hidden; min-height:0}
.tx .h{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; font-size:13px; font-weight:800; color:var(--sub); flex:none}
.tx .list{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:24px; scroll-behavior:smooth; overscroll-behavior:contain}
.cue{display:flex; gap:12px; padding:9px 12px; margin:0 -12px; border-radius:14px; color:var(--dim); font-size:16px; line-height:1.7; cursor:pointer}
.cue .tm{width:40px; flex:none; font-size:12px; font-weight:700; padding-top:3px; color:var(--sub)}
.cue.past{color:var(--muted)}
.cue.on{background:var(--accent-bg); color:var(--ink); font-weight:700; font-size:17px}
.cue.on .tm{color:var(--accent-ink); font-weight:800}
.cue .o{display:block; font-size:13px; color:var(--sub); font-weight:400; margin-top:2px}
.vfoot{display:flex; gap:10px; padding:12px 16px calc(env(safe-area-inset-bottom) + 12px); background:var(--card); border-top:1px solid var(--line); flex:none}
.vfoot .btn{margin:0; height:48px}

/* 煮飯模式 */
.cook{display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; max-width:560px; margin:0 auto; background:#FFFDF9; padding-top:env(safe-area-inset-top)}
.cook .top{display:flex; align-items:center; gap:12px; padding:16px 16px 8px}
.cook .prog{display:flex; flex-direction:column; gap:6px; flex:1}
.cook .bars{display:flex; gap:5px} .cook .bars i{flex:1; height:5px; border-radius:99px; background:var(--chip)} .cook .bars i.on{background:var(--accent)}
.cook .body{display:flex; flex-direction:column; gap:16px; padding:18px 22px 0; flex:1}
.cook .big{font-size:64px; font-weight:900; line-height:1; color:var(--accent); letter-spacing:-1px}
.cook .st{font-size:28px; font-weight:900; line-height:1.25}
.cook .tx2{font-size:20px; line-height:1.75}
.cook .why{font-size:14.5px; line-height:1.65; color:var(--sub); padding:12px 14px; border-radius:14px; background:var(--bg)}
.timerbox{display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:20px; background:var(--amber-bg)}
.timerbox .ic{width:48px; height:48px; border-radius:99px; background:var(--amber); color:#fff; display:flex; align-items:center; justify-content:center; flex:none}
.timerbox .num{font-size:30px; font-weight:900; line-height:1; letter-spacing:1px; font-variant-numeric:tabular-nums}
.timerbox .lb{font-size:12px; color:#6E4A0A}
.timerbox .go{padding:10px 14px; border-radius:12px; background:var(--ink); color:#fff; font-size:13px; font-weight:800}
.timerbox.done{background:var(--ok-bg)} .timerbox.done .ic{background:var(--ok)}
.vrow{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; background:var(--card); border:1px solid var(--line); cursor:pointer}
.vrow .th{width:60px; height:40px; border-radius:8px; background:var(--line); overflow:hidden; flex:none} .vrow .th img{width:100%; height:100%; object-fit:cover}
.vrow .t{font-size:14px; font-weight:700} .vrow .s{font-size:12px; color:var(--sub)}
.cook .nav{display:flex; gap:10px; padding:12px 16px calc(env(safe-area-inset-bottom) + 20px)}
.cook .nav .btn{margin:0; height:58px; border-radius:18px; font-size:16px}
.cook .nav .btn.ok{flex:1.4; font-size:17px; box-shadow:0 6px 16px rgba(14,155,141,.3)}
.cook .nav .btn.chip{flex:1; background:var(--chip); color:var(--ink)}
.awake{display:inline-flex; align-items:center; gap:4px; padding:6px 9px; border-radius:99px; background:var(--ok-bg); color:var(--ok); font-size:11px; font-weight:700}
.awake.off{background:var(--chip); color:var(--sub)}

/* 採買 */
.group{display:flex; flex-direction:column; padding:12px 16px 6px}
.group .gh{display:flex; align-items:center; gap:8px; padding-bottom:6px; font-size:13px; font-weight:800}
.group .gh i{width:8px; height:8px; border-radius:99px; display:block} .group .gh small{font-size:11.5px; color:var(--sub); font-weight:400}
.srow{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--chip); cursor:pointer}
.srow .cb{width:24px; height:24px; border-radius:8px}
.srow .n{flex:1; display:flex; flex-direction:column} .srow .nm{font-size:15.5px} .srow .fr{font-size:11.5px; color:var(--sub)}
.srow .q{font-size:15px; font-weight:800; white-space:nowrap}
.srow.on .nm,.srow.on .q{color:var(--tabidle); text-decoration:line-through}

/* 工具箱 */
.acc{display:flex; flex-direction:column}
.acc .ah{display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer}
.acc .ah + .ah{border-top:1px solid var(--chip)}
.acc .ic{width:40px; height:40px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex:none}
.acc .ic.a{background:var(--accent-bg); color:var(--accent-ink)} .acc .ic.b{background:var(--amber-bg); color:var(--amber-ink)} .acc .ic.c{background:var(--ok-bg); color:var(--ok)} .acc .ic.d{background:var(--chip); color:var(--ink)}
.acc .t{font-size:15.5px; font-weight:800} .acc .d{font-size:12.5px; color:var(--sub)}
.acc .ab{display:flex; flex-direction:column; gap:10px; padding:0 16px 14px; border-bottom:1px solid var(--chip)}
.acc .ab p{font-size:14px; line-height:1.7}
.acc .ab ul{padding-left:18px; font-size:14px; line-height:1.7}
.tbl{display:grid; border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:12.5px}
.tbl > div{padding:8px 10px; border-top:1px solid var(--chip)}
.tbl > div.th{background:var(--chip); font-weight:800; border-top:none}
.brow{display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer}
.brow + .brow{border-top:1px solid var(--chip)}
.brow .th{width:64px; height:42px; border-radius:10px; background:var(--line); overflow:hidden; flex:none} .brow .th img{width:100%; height:100%; object-fit:cover}
.brow .t{font-size:14.5px; font-weight:700} .brow .s{font-size:12px; color:var(--sub)}
.gl{display:flex; flex-direction:column; gap:3px; padding:12px 16px} .gl + .gl{border-top:1px solid var(--chip)}
.gl .t{font-size:14.5px; font-weight:800} .gl .d{font-size:13px; color:var(--dim); line-height:1.6}

/* 我的 / 表單 */
.field{display:flex; flex-direction:column; gap:5px}
.field label{font-size:12.5px; color:var(--sub)}
.field input{width:100%; padding:11px 12px; font-size:16px; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--ink); font-family:inherit}
.lrow{display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer} .lrow + .lrow{border-top:1px solid var(--chip)}
.lrow .t{font-size:14.5px; font-weight:700} .lrow .s{font-size:12px; color:var(--sub)}
.stars{color:var(--amber); font-size:13px}

/* sheet / toast */
.veil{position:fixed; inset:0; background:rgba(10,14,10,.45); z-index:20; display:none; align-items:flex-end; justify-content:center}
.veil.on{display:flex}
.sheet{background:var(--card); width:100%; max-width:560px; border-radius:22px 22px 0 0; padding:20px 20px calc(env(safe-area-inset-bottom) + 20px); max-height:88vh; max-height:88dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; gap:12px}
.sheet h2{font-size:17px}
.sheet .sub{font-size:12.5px; color:var(--sub); line-height:1.6}
#toast{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 108px); transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:10px 16px; border-radius:99px; font-size:13.5px; opacity:0; transition:.25s; z-index:30; pointer-events:none; white-space:nowrap; max-width:92vw}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
#toast a{color:#F8C9B5; font-weight:700; margin-left:8px}
.spin{width:22px; height:22px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:99px; animation:sp 1s linear infinite; margin:40px auto}
@keyframes sp{to{transform:rotate(360deg)}}
@media (min-width:560px){ .band{border-radius:0 0 24px 24px} }

/* 鍵盤焦點與減少動態 */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation-duration:.01ms!important} .tx .list{scroll-behavior:auto} }

/* 全域倒數膠囊 */
#timerpill{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom) + 100px); z-index:16; display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:99px; background:var(--amber); color:#fff; font-size:13px; font-weight:700; box-shadow:0 6px 16px rgba(232,147,12,.35); cursor:pointer; max-width:88vw; white-space:nowrap}
#timerpill b{font-size:15px; font-variant-numeric:tabular-nums} #timerpill span{overflow:hidden; text-overflow:ellipsis}
.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px}

/* 全螢幕頁(影片/煮飯):外層不再墊瀏海與底部,由頁面自己讓出 */
body.full{padding-top:0}
body.full #view{padding-bottom:0}