/* 年度回顧影片 recap — 版面照 設計參考/ui-recap-0926-0.png
 * 長輩友善：字 ≥18px、按鈕高 ≥52px、圓角 20px、軟陰影；淡紫漸層背景＋馬卡龍漸層卡片 */
:root{
  --text:#3b3160; --sub:#6d6488; --main:#7b5cf5; --main-dark:#5b3fd6;
  --radius:20px; --shadow:0 8px 24px rgba(120,90,220,.14);
  --g-pink:linear-gradient(135deg,#FF7EB3,#FFB3D1);
  --g-peach:linear-gradient(135deg,#FF9A5A,#FFC46B);
  --g-lav:linear-gradient(135deg,#9B7CFF,#C8A8FF);
  --g-sky:linear-gradient(135deg,#7AA8FF,#A8C8FF);
  --g-btn-purple:linear-gradient(135deg,#6F5BFF,#9B7CFF);
  --g-btn-pink:linear-gradient(135deg,#FF6FA8,#FF9CC4);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif;
  font-size:19px;line-height:1.6;color:var(--text);
  background:linear-gradient(170deg,#F1EAFF 0%,#FAF0FF 45%,#ECF0FF 100%) fixed;
  min-height:100vh;
}
button,input,select{font-family:inherit;font-size:19px;color:inherit}
button{cursor:pointer}
.app{max-width:640px;margin:0 auto;padding:10px 16px 120px}

/* 頂部 */
.top{display:flex;align-items:center;gap:10px;min-height:64px}
.back{flex:0 0 52px;height:52px;border-radius:50%;background:#fff;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-size:34px;line-height:1;color:var(--main-dark);text-decoration:none;padding-bottom:4px}
.top h1{flex:1;margin:0;text-align:center;font-size:30px;font-weight:900;letter-spacing:1px;white-space:nowrap}
.top h1 .logo{margin-right:6px}
.beans{flex:0 0 auto;min-height:52px;display:flex;align-items:center;gap:4px;padding:0 16px;border-radius:26px;background:#fff;box-shadow:var(--shadow);text-decoration:none;color:var(--text);font-weight:bold;font-size:18px}
.beans[hidden]{display:none !important}
.plan-bar{margin:8px 0 12px;padding:10px 16px;border-radius:18px;text-align:center;font-weight:bold;font-size:18px;color:#6a4a00;background:linear-gradient(90deg,#FFF1C2,#FFE08A,#FFF1C2);box-shadow:0 4px 14px rgba(230,180,40,.25)}
.plan-bar[hidden]{display:none !important}

/* 預覽 */
.stage-card{margin:4px 0 14px}
.stage-wrap{position:relative;display:flex;align-items:center;justify-content:center;background:#2a2340;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/9}
.stage-wrap.r-9x16{aspect-ratio:9/16;max-height:72vh;margin:0 auto}
.stage-wrap.r-1x1{aspect-ratio:1/1}
.stage-wrap.r-4x3{aspect-ratio:4/3}
.stage-wrap canvas{display:block;width:100%;height:100%;object-fit:contain}
.stage-wrap.empty canvas{visibility:hidden}
.drop{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center;color:#fff;background:linear-gradient(135deg,#8f78ff,#c9a8ff 60%,#ffb3d1);border:3px dashed rgba(255,255,255,.7);border-radius:var(--radius)}
.drop[hidden]{display:none !important}
.drop.over{filter:brightness(1.08);border-style:solid}
.drop .big{font-size:52px;line-height:1}
.drop-t{margin:0;font-size:24px;font-weight:900}
.drop-s{margin:0;font-size:17px;opacity:.95}
.drop-s:empty{display:none}
.drop .btn-main{background:#fff;color:var(--main-dark)}
.ctrl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:26px 12px 8px;background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff}
.ctrl[hidden]{display:none !important}
.ctrl .ic{flex:0 0 52px;height:52px;border:none;background:transparent;color:#fff;font-size:30px;line-height:1}
.ctrl input[type=range]{flex:1;min-width:60px;accent-color:#9B7CFF;height:32px}
.ctrl .time{font-variant-numeric:tabular-nums;font-size:17px;white-space:nowrap}
.fs-exit{display:none;position:absolute;top:14px;right:14px;min-height:52px;padding:0 18px;border:none;border-radius:26px;background:rgba(255,255,255,.88);font-weight:bold}
.stage-wrap:fullscreen,.stage-wrap.fake-fs{border-radius:0;background:#000;aspect-ratio:auto;max-height:none;width:100vw;height:100vh}
.stage-wrap.fake-fs{position:fixed;inset:0;z-index:50}
.stage-wrap:fullscreen .fs-exit,.stage-wrap.fake-fs .fs-exit{display:block}

/* 膠囊選項 */
.pills{display:flex;gap:8px;margin:0 0 12px}
.pill{flex:1;min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 6px;border:none;border-radius:18px;background:#fff;box-shadow:0 3px 10px rgba(120,90,220,.10);font-weight:bold;font-size:19px;white-space:nowrap}
.pill.on{color:#fff;background:var(--g-btn-purple);box-shadow:0 6px 16px rgba(111,91,255,.35)}
.pill.locked{opacity:.55}
.pill .lk{font-size:14px}
.rbox{display:inline-block;border:2.5px solid currentColor;border-radius:4px}

/* 風格卡 */
.styles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 12px}
.style-card{position:relative;min-height:96px;border:3px solid transparent;border-radius:var(--radius);padding:8px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:900;font-size:20px;color:var(--text);box-shadow:0 3px 10px rgba(120,90,220,.10)}
.style-card .ico{font-size:34px;line-height:1.1}
.style-card.s-warm{background:linear-gradient(160deg,#FFE3EE,#FFF3F8)}
.style-card.s-lively{background:linear-gradient(160deg,#FFE7D6,#FFF4E6)}
.style-card.s-elegant{background:linear-gradient(160deg,#EEE6FF,#F7F2FF)}
.style-card.s-retro{background:linear-gradient(160deg,#FFF1D8,#FFF8EA)}
.style-card.on{border-color:#7AA8FF;box-shadow:0 6px 18px rgba(122,168,255,.35)}
.style-card.on::after{content:"✓";position:absolute;top:-8px;right:-6px;width:28px;height:28px;border-radius:50%;background:#6F7BFF;color:#fff;font-size:17px;line-height:28px;text-align:center;border:2px solid #fff}
.style-card.locked{opacity:.6}
.style-card.locked::after{content:"🔒";position:absolute;top:4px;right:6px;font-size:16px}

/* 縮圖列 */
.strip-wrap[hidden]{display:none !important}
.strip{display:flex;align-items:center;gap:0;overflow-x:auto;padding:6px 2px 10px;-webkit-overflow-scrolling:touch}
.tile{position:relative;flex:0 0 auto;width:82px;height:96px;border-radius:14px;overflow:hidden;background:#ddd;box-shadow:0 3px 10px rgba(120,90,220,.18);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-x}
.tile img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.tile .lab{position:absolute;left:0;right:0;bottom:0;padding:1px 0;font-size:15px;font-weight:bold;text-align:center;color:#fff;background:rgba(40,25,80,.55)}
.tile .no{position:absolute;top:3px;left:3px;min-width:22px;padding:0 5px;border-radius:9px;background:rgba(0,0,0,.5);color:#fff;font-size:14px;text-align:center}
.tile.cover,.tile.end{border:3px solid #9B7CFF}
.tile.cover .lab,.tile.end .lab{background:var(--g-btn-purple);font-size:17px}
.tile.out{opacity:.4}
.tile.out .lab{background:#b3261e;font-size:13px}
.tile.manual .lab{background:rgba(111,91,255,.85)}
.tile.add{background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--main-dark);font-size:16px;font-weight:bold;margin-left:6px}
.tile.add b{font-size:34px;line-height:1}
.tile.dragging{opacity:.3}
.tile.ghost{position:fixed;z-index:60;pointer-events:none;opacity:.9;transform:scale(1.1);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.arrow{flex:0 0 14px;text-align:center;color:#9B7CFF;font-size:13px}
.drop-mark{flex:0 0 6px;height:90px;border-radius:3px;background:var(--main)}
.strip-tip{margin:0;font-size:16px;color:var(--sub)}
.link{border:none;background:none;padding:0 2px;min-height:40px;color:var(--main-dark);font-weight:bold;font-size:16px;text-decoration:underline}
.warn{color:#b3261e;font-size:17px;margin:4px 0 0}
.warn:empty,.note:empty{display:none}

/* 卡片 */
.card{background:rgba(255,255,255,.92);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin:14px 0}
.card h2{margin:0 0 10px;font-size:21px}
.fields{display:grid;grid-template-columns:1fr 110px;gap:10px}
.fields .f-full{grid-column:1/-1}
.fields label{display:block;font-weight:bold;font-size:17px;margin-bottom:2px}
input[type=text]{width:100%;min-height:52px;padding:8px 12px;border:2px solid #e2d8ff;border-radius:14px;background:#fff;font-size:19px}
input[type=text]:focus{outline:none;border-color:var(--main)}
select{width:100%;min-height:52px;padding:0 10px;border:2px solid #e2d8ff;border-radius:14px;background:#fff}
.note{color:var(--sub);font-size:17px;margin:8px 0 0}
.foot-note{color:var(--sub);font-size:16px;text-align:center;margin:6px 0}
.foot-note:empty{display:none}
.music-row{margin-top:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:52px;padding:0 18px;border:2px solid #e2d8ff;border-radius:26px;background:#fff;font-weight:bold}
.btn.small{padding:0 12px;font-size:18px}
.btn.danger{color:#c62828;border-color:#ffcdd2}
.btn.locked{opacity:.6}
.btn-main{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border:none;border-radius:28px;font-size:21px;font-weight:bold;color:#fff;background:var(--g-btn-purple);box-shadow:0 6px 16px rgba(111,91,255,.3);text-decoration:none}
.switch{display:flex;align-items:center;gap:10px;min-height:52px;font-weight:bold}
.switch[hidden]{display:none !important}
.switch input{width:26px;height:26px;accent-color:var(--main)}
.progress{height:20px;border-radius:10px;background:#eee8ff;overflow:hidden;margin:10px 0 0;width:100%}
.progress>i{display:block;height:100%;width:0;background:var(--g-btn-pink);transition:width .2s}
.progress[hidden]{display:none !important}

/* 底部大按鈕 */
.bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:10px;justify-content:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(241,234,255,.96) 30%)}
.big-btn{flex:1;max-width:300px;min-height:60px;display:flex;align-items:center;justify-content:center;gap:10px;border:none;border-radius:22px;color:#fff;font-size:22px;font-weight:900;box-shadow:0 8px 20px rgba(111,91,255,.3)}
.big-btn span{font-size:24px}
.big-btn{white-space:nowrap}
@media(max-width:480px){.bottom-bar .big-btn{font-size:19px;gap:4px;padding:0 6px}.bottom-bar .big-btn span{font-size:19px}.bottom-bar .big-btn.ppt{min-width:76px}}
.big-btn.purple{background:var(--g-btn-purple)}
.big-btn.pink{background:var(--g-btn-pink);box-shadow:0 8px 20px rgba(255,111,168,.35)}
.big-btn.lav{background:linear-gradient(135deg,#EDE6FF,#F6F1FF);color:var(--main-dark);box-shadow:0 4px 12px rgba(120,90,220,.15)}
.big-btn.ppt{flex:0 0 auto;min-width:92px;max-width:110px;padding:0 10px;gap:4px;font-size:19px;color:var(--main-dark);background:#fff;border:2px solid #e2d8ff;box-shadow:0 4px 12px rgba(120,90,220,.15)}
.big-btn.ppt span{font-size:20px}
.big-btn.ppt.locked{opacity:.6}
.big-btn:disabled{opacity:.45;cursor:not-allowed}

/* 單張面板 */
.sheet{position:fixed;inset:0;z-index:40;background:rgba(40,30,80,.4);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none !important}
.sheet.center{align-items:center;padding:16px}
.sheet-box{width:100%;max-width:640px;max-height:96vh;overflow-y:auto;background:linear-gradient(180deg,#F7F3FF,#FFFFFF 40%);border-radius:26px 26px 0 0;padding:0 0 18px;box-shadow:0 -10px 30px rgba(0,0,0,.2);animation:up .28s ease-out}
.sheet.center .sheet-box{border-radius:24px;padding:22px}
.small-box{max-width:460px}
.small-box h2{margin:0 0 6px}
@keyframes up{from{transform:translateY(40%);opacity:.3}to{transform:none;opacity:1}}
.edit-wrap{position:relative;background:#2a2340;border-radius:26px 26px 0 0;overflow:hidden;display:flex;justify-content:center}
.edit-wrap canvas{display:block;width:100%;max-height:46vh;object-fit:contain;touch-action:none;cursor:move}
.edit-tip{position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:4px 16px;border-radius:16px;background:rgba(80,50,200,.85);color:#fff;font-weight:bold;font-size:17px;white-space:nowrap;pointer-events:none}
.edit-no{position:absolute;bottom:8px;left:10px;padding:0 10px;border-radius:12px;background:rgba(0,0,0,.5);color:#fff;font-size:16px;pointer-events:none}
.kb-row{display:flex;align-items:center;gap:10px;padding:6px 14px 0;flex-wrap:wrap}
.switch.small{font-size:18px}
.seg{display:flex;gap:6px;flex:1}
.seg[hidden]{display:none !important}
.seg button{flex:1;min-height:52px;border:2px solid #e2d8ff;border-radius:18px;background:#fff;font-weight:bold;font-size:18px}
.seg button.on{background:var(--g-sky);color:#fff;border-color:transparent}
.p-card{margin:10px 14px 0;padding:10px 12px;border-radius:18px;background:#fff;box-shadow:0 3px 12px rgba(120,90,220,.10)}
.p-row{display:flex;align-items:center;gap:10px;min-height:52px}
.p-row.wrap{flex-wrap:wrap}
.p-h{font-size:20px;white-space:nowrap}
.p-s{font-weight:bold;white-space:nowrap}
.p-row input[type=range]{flex:1;min-width:80px;accent-color:#7B5CF5;height:32px}
.val-pill{flex:0 0 auto;min-height:44px;padding:0 14px;border:none;border-radius:22px;background:#EFE9FF;color:var(--main-dark);font-weight:bold;font-size:18px;display:inline-flex;align-items:center;white-space:nowrap}
.trans-row{display:flex;gap:8px;overflow-x:auto;padding:8px 2px 4px}
.tr{position:relative;flex:0 0 76px;border:3px solid transparent;border-radius:14px;padding:0;background:#f3efff;overflow:hidden;font-size:16px;font-weight:bold}
.tr canvas{display:block;width:100%;height:58px}
.tr span{display:block;padding:2px 0}
.tr.on{border-color:#6F5BFF;background:#6F5BFF;color:#fff}
.tr.on::after{content:"✓";position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:#6F5BFF;color:#fff;font-size:14px;line-height:22px;border:2px solid #fff}
.tr.locked{opacity:.55}
.tr.locked::before{content:"🔒";position:absolute;top:2px;left:4px;font-size:14px}
.bg-opts{display:flex;gap:8px;flex:1}
.bg-opt{flex:1;min-height:52px;border:2px solid #e2d8ff;border-radius:16px;background:#fff;font-weight:bold;font-size:18px;white-space:nowrap;padding:0 6px}
.bg-opt.on{background:var(--g-btn-purple);color:#fff;border-color:transparent}
.bg-opt.locked{opacity:.55}
.bg-sub{display:flex;gap:10px;padding:8px 0 2px}
.bg-sub[hidden]{display:none !important}
.bg-sw{width:64px;height:52px;border-radius:12px;border:3px solid transparent;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.bg-sw.on{border-color:#6F5BFF}
.order-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 14px 0}
.sheet-btns{display:flex;gap:12px;margin:14px 14px 0}
.sheet-btns .big-btn{max-width:none;font-size:19px;gap:6px}
.result{margin-top:12px;padding:14px;border-radius:16px;background:#f3fff6;border:2px solid #b7ebc6}
.result[hidden]{display:none !important}
.toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);z-index:70;max-width:90vw;padding:12px 20px;border-radius:18px;background:rgba(40,30,80,.92);color:#fff;font-size:18px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast[hidden]{display:none !important}

@media(max-width:420px){
  .big-btn{gap:6px}
  .big-btn.ppt{min-width:80px}
  .top h1{font-size:25px}
  .pill{font-size:17px;gap:5px}
  .style-card{font-size:18px;min-height:88px}
  .big-btn{font-size:20px}
  .fields{grid-template-columns:1fr 92px}
}

/* ===== 第二期（2026-09-26）：轉場庫、封面封底編輯、Logo、去背筆刷 ===== */
.trans-row.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;max-height:330px;overflow-y:auto;overflow-x:hidden;padding:6px 2px}
.trans-row.grid .tr{flex:none;width:auto}
.tr canvas{height:auto;aspect-ratio:132/96}
.tr span{font-size:15px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.month-row{font-size:17px;min-height:44px}
.btn.wide{width:100%;margin:12px 0 0;font-size:19px;background:linear-gradient(135deg,#EDE6FF,#FFF1F7);border-color:#d9cbff}
.logo-row{display:flex;align-items:center;gap:10px;margin:10px 0}
.logo-row img{width:72px;height:72px;object-fit:contain;border-radius:12px;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/16px 16px;border:2px solid #e2d8ff}
#logoOpts[hidden],#scTitleOpts[hidden],#scTextOpts[hidden],#scImgOpts[hidden],#scLogoOpts[hidden],#scAnim[hidden]{display:none !important}
#logoOpts .seg{margin:6px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 8px}
.chip{min-height:46px;padding:0 14px;border:2px solid #e2d8ff;border-radius:23px;background:#fff;font-weight:bold;font-size:17px;white-space:nowrap}
.chip.on{background:var(--g-btn-purple);color:#fff;border-color:transparent}
.sub-h{display:block;margin:10px 0 0;font-size:18px}
.colors{display:flex;flex-wrap:wrap;gap:10px;padding:6px 0}
.sw{width:44px;height:44px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #d9cbff}
.sw.on{box-shadow:0 0 0 4px #6F5BFF}
textarea{width:100%;min-height:64px;padding:8px 12px;border:2px solid #e2d8ff;border-radius:14px;font:inherit;font-size:19px;resize:vertical}
textarea:focus{outline:none;border-color:var(--main)}
.p-row select{width:auto;flex:1;min-width:150px}
.bg-opts.wrap{flex-wrap:wrap}
.bg-sub{flex-wrap:wrap}
.bg-sw{background-size:cover;background-position:center}
.order-row.flat,.sheet-btns.flat{margin-left:0;margin-right:0}
.br-box{max-width:620px}
.br-wrap{display:flex;justify-content:center;background:#2a2340;border-radius:16px;padding:6px;margin:8px 0}
.br-wrap canvas{display:block;max-width:100%;max-height:52vh;touch-action:none;cursor:crosshair;border-radius:10px}
#brMode{margin:4px 0}