:root{color-scheme:dark;--bg: #0d0c0a;--ink: #f8f1df;--muted: #aa9f89;--line: rgba(248, 241, 223, .14);--panel: rgba(22, 20, 16, .88);--panel-soft: rgba(248, 241, 223, .07);--accent: #2f9b78;--accent-strong: #68d0a4;--gold: #d2a94a;--clay: #a85c44;--danger: #f26d64;--shadow: 0 30px 90px rgba(0, 0, 0, .46)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 18% -10%,rgba(210,169,74,.18),transparent 34rem),radial-gradient(ellipse at 86% 10%,rgba(47,155,120,.16),transparent 32rem),radial-gradient(ellipse at 50% 74%,rgba(168,92,68,.1),transparent 38rem),linear-gradient(180deg,#15130f,#0b0a08 52%,#14110e);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans TC,sans-serif}button,input,select{font:inherit}button,label,a{-webkit-tap-highlight-color:transparent}button{color:inherit}.auth-screen{display:grid;min-height:100vh;place-items:center;padding:18px}.auth-card{width:min(560px,100%);padding:26px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(135deg,#f8f1df14,#2f9b7814),#0d0c0ae6;box-shadow:var(--shadow)}.auth-card h1{font-size:clamp(34px,8vw,58px)}.auth-form{display:grid;gap:12px;margin-top:20px}.auth-form label,.settings-form label{display:grid;gap:6px;color:var(--muted);font-weight:800}.auth-form input,.settings-form input{min-height:46px;border:1px solid var(--line);border-radius:8px;background:#181611eb;color:var(--ink);padding:0 12px}.form-error{margin:12px 0 0;color:var(--danger);font-weight:800}.app-shell{width:min(1200px,100%);margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 18px 46px}.hero{position:relative;overflow:hidden;min-height:430px;padding:18px;border:1px solid var(--line);border-radius:8px;background:radial-gradient(ellipse at 84% 18%,rgba(105,138,104,.2),transparent 28rem),radial-gradient(ellipse at 18% 76%,rgba(123,62,46,.16),transparent 30rem),linear-gradient(110deg,#0d0c0afa,#0d0c0ac7 52%,#2642342e);box-shadow:var(--shadow)}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.055),transparent 42%),radial-gradient(ellipse at 76% 36%,rgba(210,169,74,.12),transparent 24rem),radial-gradient(ellipse at 50% 120%,rgba(0,0,0,.55),transparent 34rem);pointer-events:none}.hero:after{content:"";position:absolute;inset:auto 24px 18px;height:1px;background:linear-gradient(90deg,transparent,rgba(210,169,74,.82),transparent)}.topbar,.section-title,.dialog-header,.preview-chrome,.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:18px}.topbar{position:relative;z-index:1}.top-actions{display:flex;align-items:center;gap:10px}.user-pill{max-width:220px;overflow:hidden;padding:10px 12px;border:1px solid var(--line);border-radius:999px;background:#f8f1df14;color:var(--muted);font-size:13px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;font-weight:800;text-transform:uppercase}.brand-mark{width:12px;height:12px;border:2px solid var(--gold);border-radius:50%;box-shadow:0 0 22px #d2a94a8c}.hero-content{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:22px;min-height:280px;align-items:end;padding:50px 2px 26px}.hero-left{display:grid;gap:24px}.hero-copy{width:min(650px,100%)}.eyebrow{margin:0 0 8px;color:var(--gold);font-size:12px;font-weight:900;letter-spacing:0;text-transform:uppercase}h1,h2,p{margin-top:0}h1{max-width:650px;margin-bottom:14px;font-size:clamp(36px,8vw,74px);line-height:.95}h2{margin-bottom:8px;font-size:21px}p{color:var(--muted);line-height:1.65}.icon-button,.text-button,.segment,.danger-button,.primary-action,.secondary-action,.nav-arrow{min-height:44px;border:1px solid var(--line);border-radius:8px;cursor:pointer}.icon-button{display:grid;width:46px;height:46px;place-items:center;background:#f8f1df14;color:var(--ink)}.settings-glyph{position:relative;display:block;width:20px;height:14px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}.settings-glyph:before,.settings-glyph:after{content:"";position:absolute;top:-5px;width:6px;height:6px;border-radius:50%;background:currentColor}.settings-glyph:before{left:3px}.settings-glyph:after{right:3px;top:9px}.upload-stage{width:min(360px,100%);padding:18px;border:1px solid rgba(248,241,223,.16);border-radius:8px;background:#0a0907a3;box-shadow:inset 0 1px #ffffff0f;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.upload-stage h2{margin-bottom:16px}.hero-reel{width:min(700px,100%);padding:12px;border:1px solid rgba(248,241,223,.13);border-radius:8px;background:#05050470;box-shadow:inset 0 1px #ffffff0d}.reel-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;color:var(--muted);font-size:12px;font-weight:900}.reel-header span:first-child{color:var(--ink)}.reel-frames{display:grid;grid-template-columns:repeat(5,minmax(54px,1fr));gap:8px}.reel-frame{position:relative;display:grid;aspect-ratio:3 / 4;place-items:center;overflow:hidden;padding:0;border:1px solid rgba(248,241,223,.13);border-radius:6px;background:linear-gradient(135deg,#d2a94a21,#2f9b781a),#211e17;color:#f8f1df57;font-weight:900}.reel-frame img,.reel-frame video{width:100%;height:100%;object-fit:cover}.reel-frame:after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));pointer-events:none}.empty-frame{border-style:dashed}.upload-actions,.dialog-actions,.library-actions,.selection-actions{display:flex;flex-wrap:wrap;gap:10px}.primary-action,.secondary-action,.danger-button,.text-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;font-weight:900;text-decoration:none}.primary-action,.as-button{border-color:#63c39c8c;background:linear-gradient(180deg,#42a77f,#1f765f);color:#fff}.secondary-action,.text-button{background:#f8f1df14;color:var(--ink)}.danger-button{border-color:#f26d6452;background:#f26d641a;color:var(--danger)}input[type=file]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.stats-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stats-grid article{padding:15px;border:1px solid var(--line);border-radius:8px;background:#f8f1df0f}.stats-grid span{display:block;margin-bottom:6px;color:var(--muted);font-size:13px}.stats-grid strong{font-size:25px}.library{padding-top:24px}.library-actions{justify-content:end}.toolbar{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:auto minmax(220px,1fr) auto;align-items:center;gap:14px;margin:0 0 22px;padding:10px 0;background:linear-gradient(180deg,#0d0c0afa,#0d0c0ab8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.toolbar-selects{display:grid;grid-template-columns:minmax(104px,auto) minmax(128px,auto);gap:10px}.segmented{display:inline-grid;grid-template-columns:repeat(4,minmax(72px,1fr));border:1px solid var(--line);border-radius:8px;background:#f8f1df0f;padding:4px}.segment{min-height:38px;border:0;background:transparent;color:var(--muted);font-weight:900}.segment.active{background:#f8f1df24;color:var(--ink);box-shadow:0 10px 24px #00000029}.search-box{position:relative;display:block;min-width:0}.search-box span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.search-box input{width:100%;min-height:44px;border:1px solid rgba(248,241,223,.16);border-radius:8px;background:linear-gradient(180deg,#f8f1df13,#f8f1df09),#0d0c0ad1;color:var(--ink);padding:0 14px;box-shadow:inset 0 1px #ffffff0a}.search-box input::placeholder{color:#aa9f89bd}.search-box input:focus{border-color:#d2a94a8f;outline:none}select,input[type=url],input[type=password]{min-height:44px;border:1px solid var(--line);border-radius:8px;background:#181611eb;color:var(--ink);padding:0 12px}.selection-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding:12px;border:1px solid rgba(210,169,74,.28);border-radius:8px;background:#d2a94a1a}.selection-bar span{color:var(--ink);font-weight:900}button:disabled{cursor:not-allowed;opacity:.45}.timeline{display:grid;gap:28px}.day-section{display:grid;gap:14px}.day-divider{display:flex;width:100%;align-items:end;justify-content:space-between;gap:16px;padding:18px 2px 10px;border:0;border-bottom:1px solid rgba(248,241,223,.12);background:transparent;color:inherit;cursor:pointer;text-align:left}.day-divider:hover,.day-divider:focus-visible{border-bottom-color:#d2a94a61;outline:none}.day-divider span{display:block;margin-bottom:6px;color:var(--muted);font-size:13px;font-weight:800}.day-divider strong{color:var(--ink);font-size:clamp(24px,5vw,38px);line-height:1}.day-divider p{margin:0;color:var(--muted);font-size:13px;font-weight:800}.load-more-panel{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;padding:18px;border:1px solid rgba(248,241,223,.12);border-radius:8px;background:#f8f1df0b}.load-more-panel span{color:var(--muted);font-size:13px;font-weight:900}.masonry-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}.media-card{position:relative;display:block;width:100%;overflow:hidden;margin:0;padding:0;border:1px solid var(--line);border-radius:8px;background:#f8f1df0f;color:var(--ink);text-align:left;cursor:pointer;box-shadow:0 18px 36px #0003;transition:transform .18s ease,border-color .18s ease,background .18s ease}.media-card:hover{transform:translateY(-3px);border-color:#d2a94a6b;background:#f8f1df1a}.media-card:focus-visible{outline:2px solid rgba(210,169,74,.72);outline-offset:3px}.media-card.selectable{cursor:pointer}.media-card.selected{border-color:#d2a94ae0;box-shadow:0 0 0 2px #d2a94a42,0 18px 36px #0000003d}.media-card.protected{cursor:not-allowed}.media-card.protected .select-check{border-color:#d2a94a85;background:#34260db8}.media-card.protected .select-check:after{content:"★";position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);font-size:15px;line-height:1}.select-check{position:absolute;top:10px;left:10px;z-index:3;display:none;width:28px;height:28px;border:1px solid rgba(248,241,223,.42);border-radius:50%;background:#0a0907b8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.selectable .select-check{display:block}.selected .select-check{border-color:var(--gold);background:var(--gold)}.selected .select-check:after{content:"";position:absolute;left:8px;top:5px;width:8px;height:13px;border-right:3px solid #16130d;border-bottom:3px solid #16130d;transform:rotate(45deg)}.favorite-button{position:absolute;top:10px;right:10px;z-index:4;display:grid;width:34px;min-height:34px;padding:0;place-items:center;border:1px solid rgba(248,241,223,.28);border-radius:50%;background:#0a0907a8;color:#f8f1dfe6;cursor:pointer;font-size:20px;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.75);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease}.favorite-button:hover,.favorite-button:focus-visible{border-color:#d2a94ab3;background:#231d10d1;color:var(--gold);outline:none;transform:scale(1.04)}.favorite-button.active{border-color:#d2a94aeb;background:#34260de6;color:var(--gold)}.thumb{position:relative;display:grid;aspect-ratio:4 / 5;place-items:center;overflow:hidden;background:linear-gradient(135deg,rgba(210,169,74,.16),transparent),#242118;color:var(--accent-strong);font-weight:900}.square-card .thumb,.tall-card .thumb,.portrait-card .thumb,.cinema-card .thumb{aspect-ratio:1}.thumb:after{content:"";position:absolute;inset:auto 0 0;height:48%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));pointer-events:none}.thumb img,.thumb video{width:100%;height:100%;object-fit:cover}.thumb .video-mark,.reel-frame .video-mark{position:absolute;z-index:1;display:grid;place-items:center;border:1px solid rgba(248,241,223,.44);border-radius:50%;background:#0c0b09ad;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.thumb .video-mark{width:56px;height:56px}.reel-frame .video-mark{width:36px;height:36px}.thumb .video-mark:before,.reel-frame .video-mark:before{content:"";width:0;height:0;margin-left:4px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid var(--ink)}.reel-frame .video-mark:before{margin-left:3px;border-top-width:7px;border-bottom-width:7px;border-left-width:11px}.card-body{padding:12px}.card-body strong{display:block;overflow:hidden;margin-bottom:6px;text-overflow:ellipsis;white-space:nowrap}.name-button{display:block;width:100%;min-height:28px;padding:3px 6px;overflow:hidden;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink);cursor:text;font-weight:900;text-align:left;text-overflow:ellipsis;white-space:nowrap}.name-button:hover,.name-button:focus-visible{border-color:#d2a94a57;background:#f8f1df14;outline:none}.rename-input{width:100%;min-height:28px;margin-bottom:6px;padding:3px 6px;border:1px solid rgba(210,169,74,.58);border-radius:6px;background:#060605db;color:var(--ink);font-weight:900}.card-body span,.card-body small{color:var(--muted);font-size:13px}.upload-card{cursor:default}.upload-card:hover{transform:none}.card-progress{height:7px;margin:12px 0 8px;overflow:hidden;border-radius:99px;background:#f8f1df21}.card-progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .18s ease}.upload-card .thumb{opacity:.72}.upload-card:after{content:"上傳中";position:absolute;top:10px;right:10px;z-index:2;padding:5px 8px;border:1px solid rgba(248,241,223,.22);border-radius:999px;background:#0a0907ad;color:var(--ink);font-size:12px;font-weight:900}.upload-error:after{content:"失敗";color:var(--danger)}.empty-state{display:grid;min-height:240px;place-items:center;padding:28px;border:1px dashed rgba(248,241,223,.24);border-radius:8px;background:#f8f1df0d;text-align:center}.empty-state p{margin-bottom:0}dialog{border:1px solid var(--line);border-radius:8px;background:#15130f;color:var(--ink);box-shadow:var(--shadow)}dialog::backdrop{background:#000000c7;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.settings-dialog{width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}.immersive-dialog{width:min(1180px,calc(100vw - 18px));max-width:none;height:min(860px,calc(100vh - 18px));max-height:none;padding:14px;overflow:hidden;background:radial-gradient(circle at 20% 0%,rgba(210,169,74,.16),transparent 30rem),#070605}.preview-chrome{position:relative;z-index:2}.preview-chrome h2{max-width:min(620px,58vw);overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap}.preview-body{position:absolute;inset:70px 18px 112px;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:#050504eb}.preview-body img,.preview-body video{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}.nav-arrow{position:absolute;top:50%;z-index:3;width:58px;min-height:58px;padding:0;overflow:hidden;border-color:#f8f1df2e;background:#f8f1df14;color:transparent;transform:translateY(-50%)}.nav-arrow:before{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);font-size:28px;font-weight:900}.nav-prev{left:14px}.nav-next{right:14px}.nav-prev:before{content:"<"}.nav-next:before{content:">"}.preview-footer{position:absolute;inset:auto 14px 14px;align-items:end}.preview-meta{display:grid;gap:4px;min-width:0;color:var(--muted);font-size:13px;word-break:break-all}.protected-note{display:inline-flex;min-height:44px;align-items:center;justify-content:center;padding:0 12px;border:1px solid rgba(210,169,74,.28);border-radius:8px;background:#d2a94a1a;color:var(--gold);font-size:13px;font-weight:900;text-align:center}.settings-form{display:grid;gap:12px;margin-top:14px}.admin-panel{display:grid;gap:14px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.compact-title h2{margin-bottom:0}.employee-form{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;column-gap:12px;row-gap:14px}.employee-form label,.employee-form input{min-width:0}.employee-form input{width:100%}.employee-form .as-button{width:100%;min-height:46px;white-space:nowrap}.user-list{display:grid;gap:10px}.user-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:8px;background:#f8f1df0f}.user-row>div:first-child{min-width:0}.user-row strong,.user-row span{display:block}.user-row strong,.user-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-row span{margin-top:4px;color:var(--muted);font-size:13px}.user-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:end}.logout-button{margin-top:18px}@media(max-width:820px){.hero-content{grid-template-columns:1fr;min-height:auto;padding-top:44px}.upload-stage{width:100%}.stats-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.app-shell{padding-inline:12px}.hero{min-height:0;padding:14px}.topbar{align-items:start}.top-actions{align-items:end;display:grid;justify-items:end}.user-pill{max-width:150px}h1{font-size:clamp(34px,11vw,48px)}.upload-actions{display:grid;grid-template-columns:1fr 1fr}.toolbar{display:grid;grid-template-columns:1fr}.section-title,.selection-bar,.preview-footer{align-items:stretch;display:grid}.library-actions,.selection-actions{display:grid;grid-template-columns:1fr 1fr}.employee-form{display:grid;grid-template-columns:1fr}.segmented,.search-box,.toolbar-selects,select{width:100%}.segmented{grid-template-columns:repeat(4,minmax(0,1fr))}.toolbar-selects{grid-template-columns:1fr 1fr}.masonry-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.media-card{margin:0}.day-divider{align-items:start;display:grid}.load-more-panel{display:grid;text-align:center}.immersive-dialog{width:100vw;height:100dvh;max-height:none;border:0;border-radius:0}.preview-body{inset:72px 0 160px;border-radius:0}.preview-chrome h2{max-width:68vw}.preview-footer{inset:auto 12px 12px;gap:10px}.nav-arrow{top:auto;bottom:108px;width:48px;min-height:48px;background:#f8f1df1f}.dialog-actions{display:grid;grid-template-columns:1fr 1fr}.user-row{align-items:stretch;display:grid}.user-actions{justify-content:stretch}.user-actions .text-button{width:100%}}@media(max-width:390px){.upload-actions,.stats-grid,.masonry-grid,.employee-form{grid-template-columns:1fr}}