@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101717;--panel:#182120;--muted:#9ca9a0;--mint:#b7d7a8;--line:#34403a;--white:#f2f1e9;font-family:'DM Sans','Noto Sans TC',sans-serif;background:var(--bg);color:var(--white)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -20%,#33423a 0,transparent 55%),var(--bg)}button{font:inherit;color:inherit;cursor:pointer}.topbar{height:72px;max-width:1020px;margin:auto;padding:0 26px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--white);font-weight:700;font-size:20px;letter-spacing:.03em}.brand-icon{color:var(--mint);font-size:25px}.brand small{font-size:10px;color:var(--muted);font-weight:400;margin-left:3px;letter-spacing:.12em}.top-actions{display:flex;align-items:center;gap:15px}.sync-state{display:flex;align-items:center;gap:7px;color:#b5c1b8;font-size:12px}.sync-state i,.live-indicator i{width:7px;height:7px;border-radius:50%;background:#e4bd77;display:inline-block}.sync-state.good i{background:#8dcc9e;box-shadow:0 0 10px #8dcc9e88}.sync-state.working i{background:#f0c872;animation:pulse 1s infinite}.avatar,.flip-button{border:1px solid #ffffff24;background:#ffffff0b;border-radius:50%;width:36px;height:36px;font-size:20px;color:#dbe5da}.avatar:hover,.flip-button:hover{border-color:var(--mint);color:var(--mint)}main{width:min(100% - 36px,760px);margin:auto}.intro{text-align:center;padding:54px 0 29px}.eyebrow{font-size:10px;letter-spacing:.2em;color:#a5c39b;font-weight:600}.intro h1{font-size:clamp(32px,6vw,48px);letter-spacing:.025em;margin:12px 0 9px;font-weight:600}.intro h1 em{font-style:normal;color:var(--mint)}.intro p{margin:0;color:#a8b2aa;font-size:14px}.camera-section{max-width:590px;margin:0 auto}.camera-view{position:relative;overflow:hidden;border:1px solid #516055;border-radius:22px;background:linear-gradient(145deg,#27332c,#151d1b 65%);aspect-ratio:4/3;box-shadow:0 24px 70px #0005}.camera-view video{width:100%;height:100%;object-fit:cover;display:none}.camera-view.camera-on video{display:block}.camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;color:#e1e9df;background:radial-gradient(ellipse at 50% 55%,#415045,#26322c 52%,#18211e 100%)}.camera-placeholder.hidden{display:none}.camera-placeholder .lens{font-size:49px;color:#c2dda9;line-height:1;margin-bottom:7px}.camera-placeholder strong{font-size:15px;font-weight:500}.camera-placeholder small{font-size:11px;color:#afbbb0}.camera-topline{position:absolute;left:17px;right:17px;top:15px;display:flex;justify-content:space-between;align-items:center}.live-indicator{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.15em;background:#121915ad;padding:7px 9px;border-radius:20px;color:#e7efe5}.live-indicator i{background:#c6e4ae}.flip-button{background:#131b18a8;border-color:#ffffff36}.camera-guides{position:absolute;inset:18% 13%;pointer-events:none;opacity:.46}.camera-guides span{position:absolute;width:20px;height:20px;border-color:#e5eedc;border-style:solid}.camera-guides span:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}.camera-guides span:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}.camera-guides span:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}.camera-guides span:nth-child(4){bottom:0;right:0;border-width:0 1px 1px 0}.camera-actions{height:91px;display:grid;grid-template-columns:1fr 86px 1fr;align-items:center;padding:0 22px}.camera-start{justify-self:start;display:flex;align-items:center;gap:13px;border:1px solid #ffffff26;background:#ffffff0a;color:#dce5dc;border-radius:30px;padding:10px 13px 10px 16px;font-size:12px}.camera-start b{color:var(--mint);font-size:16px;font-weight:400}.camera-start:disabled{opacity:.6;cursor:wait}.shutter{justify-self:center;width:65px;height:65px;border-radius:50%;border:2px solid #d9e4d4;background:transparent;display:grid;place-items:center;box-shadow:0 0 0 5px #ffffff16;transition:.15s}.shutter span{width:49px;height:49px;border-radius:50%;background:var(--mint);transition:.15s}.shutter:active span{transform:scale(.88)}.shutter:disabled{opacity:.45;cursor:not-allowed}.upload-local{justify-self:end;width:42px;height:42px;border-radius:12px;border:1px solid #ffffff26;background:#ffffff0a;display:grid;place-items:center;color:#dce5dc;font-size:23px;cursor:pointer}.upload-local:hover{color:var(--mint);border-color:var(--mint)}.upload-local input{display:none}.camera-note{text-align:center;color:#829087;font-size:11px;margin:-1px 0 0}.album-section{margin:56px 0 0;padding-top:23px;border-top:1px solid #ffffff19}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:17px}.section-heading h2{font-size:21px;font-weight:500;margin:5px 0 0}.section-heading h2 span{font-size:11px;background:#ffffff12;color:#b7c2b8;padding:3px 8px;border-radius:12px;vertical-align:3px;margin-left:5px}.text-button{border:0;background:none;color:#a6b9a0;font-size:11px}.text-button span{font-size:17px;margin-left:4px}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.photo-card{min-width:0;position:relative;overflow:hidden;padding:0;border:1px solid #ffffff20;background:#1a2521;border-radius:12px;aspect-ratio:1;animation:fade-in .3s ease}.photo-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}.photo-card:hover img{transform:scale(1.04)}.photo-card>span{position:absolute;bottom:0;left:0;right:0;text-align:left;color:white;font-size:10px;padding:24px 9px 8px;background:linear-gradient(transparent,#0009)}.empty-state{grid-column:1/-1;border:1px dashed #3b4840;border-radius:14px;min-height:155px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;color:#b9c5b8}.empty-state>span{font-size:30px;color:#9cba8d}.empty-state strong{font-size:13px;font-weight:500}.empty-state small{font-size:11px;color:#849087}.message{padding:11px 13px;border-radius:10px;font-size:12px;margin-bottom:13px}.message.hidden{display:none}.message.error{background:#4b3029;color:#ffd1bd;border:1px solid #845242}.message.success{background:#223c30;color:#c5efca;border:1px solid #477456}.message.working{background:#343a2a;color:#e5e6b8;border:1px solid #626746}footer{text-align:center;color:#68756b;padding:38px 0 29px;font-size:10px}.lightbox{position:fixed;inset:0;z-index:5;background:#070b0aeF;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:26px}.lightbox.hidden{display:none}.lightbox img{max-width:min(90vw,1000px);max-height:80vh;object-fit:contain}.lightbox button{position:absolute;right:20px;top:18px;border:0;background:transparent;font-size:36px;color:white}.lightbox div{font-size:12px;color:#cbd3cb;margin-top:13px}@keyframes pulse{50%{opacity:.4}}@keyframes fade-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.topbar{height:61px;padding:0 17px}.brand{font-size:18px}.brand small{font-size:9px}.top-actions{gap:9px}.sync-state{font-size:10px}main{width:min(100% - 30px,480px)}.intro{padding:41px 0 24px}.intro h1{font-size:35px}.intro p{font-size:12px}.camera-view{border-radius:18px;aspect-ratio:3/4}.camera-placeholder .lens{font-size:42px}.camera-actions{height:82px;padding:0 7px;grid-template-columns:1fr 76px 1fr}.camera-start{font-size:11px;padding:9px 10px 9px 12px;gap:8px}.shutter{width:61px;height:61px}.shutter span{width:45px;height:45px}.camera-note{font-size:10px}.album-section{margin-top:43px}.photo-grid{gap:8px}.section-heading h2{font-size:19px}.empty-state{min-height:135px}}