@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');

:root{--ink:#111214;--muted:#777b82;--line:#dedfe1;--paper:#f4f3ef;--surface:#fff;--accent:#e43c31;--lime:#d9ff43;--shadow:0 22px 60px rgba(0,0,0,.22)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#090a0b;color:var(--ink);font-family:Manrope,'Noto Sans TC',sans-serif}
button,input{font:inherit}button{color:inherit}.app-shell{width:100%;min-height:100dvh;background:#0c0d0e;display:grid;grid-template-rows:auto minmax(360px,1fr) auto;overflow:hidden}
.topbar{height:74px;padding:0 max(22px,env(safe-area-inset-left));padding-top:env(safe-area-inset-top);display:flex;align-items:center;justify-content:space-between;color:#fff;background:#0c0d0e;position:relative;z-index:3}
.wordmark{display:flex;align-items:baseline;gap:10px}.wordmark strong{font-size:21px;letter-spacing:-.06em}.wordmark span{font-size:9px;letter-spacing:.2em;color:#8d9197;font-weight:700}
.icon-button{width:42px;height:42px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;cursor:pointer}.icon-button:hover{background:#222428}.menu-icon,.menu-icon:before{width:22px;height:1.5px;background:#fff;display:block;content:""}.menu-icon:before{transform:translateY(7px);width:15px}.switch-icon{width:21px;height:15px;border:1.7px solid #fff;border-radius:12px;position:relative}.switch-icon:before,.switch-icon:after{content:"";position:absolute;border-style:solid;border-width:4px 3px 0;border-color:#fff transparent transparent;transform:rotate(35deg);top:-5px;left:1px}.switch-icon:after{transform:rotate(215deg);top:12px;left:12px}
.camera-stage{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 40%,#303338,#101113 70%);min-height:0}.camera-stage video,.camera-stage>img{width:100%;height:100%;object-fit:cover;display:none}.camera-stage.active video,.camera-stage.has-photo>img{display:block}.camera-stage.has-photo video{display:none}.camera-stage.active .empty-state,.camera-stage.has-photo .empty-state{display:none}
.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:30px}.empty-state h1{font-size:clamp(27px,6vw,44px);margin:24px 0 4px;letter-spacing:-.04em}.empty-state p{font-size:13px;color:#92979e;margin:0 0 24px}.primary-button{border:0;background:var(--lime);padding:14px 22px;border-radius:4px;font-weight:800;cursor:pointer;color:#111}.lens-mark{width:76px;height:76px;border:1px solid #5c6067;border-radius:50%;display:grid;place-items:center}.lens-mark:before,.lens-mark:after{content:"";position:absolute;width:104px;height:1px;background:#383b40}.lens-mark:after{transform:rotate(90deg)}.lens-mark i{width:45px;height:45px;border:8px solid #23262a;border-radius:50%;box-shadow:inset 0 0 0 1px #61656b}
.stage-gradient{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 25%,transparent 72%,rgba(0,0,0,.42));opacity:0}.active .stage-gradient,.has-photo .stage-gradient{opacity:1}.focus-frame{position:absolute;left:50%;top:50%;width:70px;height:70px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.74);opacity:0;transition:.2s}.focus-frame:before,.focus-frame:after{content:"";position:absolute;background:#fff}.focus-frame:before{width:10px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%)}.focus-frame:after{width:1px;height:10px;top:50%;left:50%;transform:translate(-50%,-50%)}.camera-stage.focusing .focus-frame{opacity:1}
.camera-status{position:absolute;top:18px;left:20px;color:#fff;font-size:9px;font-weight:700;letter-spacing:.15em;display:none;align-items:center;gap:7px}.camera-status span{width:6px;height:6px;border-radius:50%;background:#f44336;box-shadow:0 0 0 4px rgba(244,67,54,.2)}.active .camera-status{display:flex}.zoom-control{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:none;gap:4px;padding:4px;background:rgba(12,13,14,.6);backdrop-filter:blur(14px);border-radius:24px}.active .zoom-control{display:flex}.zoom-control button{border:0;color:#aeb1b5;background:transparent;width:38px;height:31px;border-radius:18px;font-size:11px;font-weight:700}.zoom-control button.active{color:#111;background:#fff}
.control-deck{background:#0c0d0e;color:#fff;padding:13px 20px calc(16px + env(safe-area-inset-bottom));position:relative}.mode-row{display:flex;justify-content:center;gap:24px}.mode-row button{border:0;background:transparent;color:#6e7278;font-size:9px;letter-spacing:.16em;font-weight:700;padding:5px;position:relative}.mode-row button.active{color:#fff}.mode-row button.active:after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:var(--lime);bottom:-3px;left:50%}.capture-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin:12px 0 5px}.round-button{justify-self:center;width:48px;height:48px;border-radius:50%;border:1px solid #2e3033;background:#17191c;display:grid;place-items:center;cursor:pointer}.gallery-button span{width:19px;height:16px;border:1.5px solid #fff;border-radius:2px;position:relative;overflow:hidden}.gallery-button span:after{content:"";position:absolute;width:17px;height:17px;background:#fff;transform:rotate(45deg);top:9px;left:5px}.adjust-button span,.adjust-button span:before,.adjust-button span:after{width:20px;height:1px;background:#fff;display:block;position:relative}.adjust-button span:before,.adjust-button span:after{content:"";position:absolute;top:-7px}.adjust-button span:after{top:7px}.adjust-button span:before{width:13px;left:7px}.adjust-button span:after{width:14px}.shutter{width:72px;height:72px;border:1px solid #fff;background:transparent;border-radius:50%;padding:5px;cursor:pointer;transition:.12s}.shutter span{display:block;width:100%;height:100%;border-radius:50%;background:#fff;transition:.12s}.shutter:active{transform:scale(.94)}.shutter:active span{background:var(--lime);transform:scale(.88)}.capture-hint{text-align:center;color:#656970;font-size:9px;letter-spacing:.03em;margin:8px 0 0}
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(5px);z-index:10}.settings-sheet{position:fixed;z-index:11;left:0;right:0;bottom:0;max-height:92dvh;background:var(--paper);border-radius:26px 26px 0 0;transform:translateY(105%);transition:transform .42s cubic-bezier(.22,.8,.22,1);overflow:auto;padding:10px max(20px,env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));box-shadow:var(--shadow)}.settings-sheet.open{transform:translateY(0)}.sheet-handle{width:42px;height:4px;border-radius:2px;background:#c8c7c2;margin:0 auto 18px}.sheet-heading,.result-header{display:flex;align-items:center;justify-content:space-between}.sheet-heading p,.result-header p{font-size:9px;letter-spacing:.18em;color:#8b8a85;margin:0 0 5px;font-weight:700}.sheet-heading h2,.result-header h2{font-size:27px;letter-spacing:-.045em;margin:0}.close-button{width:40px;height:40px;border:1px solid #d3d2cd;background:transparent;border-radius:50%;position:relative;cursor:pointer}.close-button:before,.close-button:after{content:"";position:absolute;left:12px;top:19px;width:15px;height:1px;background:#17181a;transform:rotate(45deg)}.close-button:after{transform:rotate(-45deg)}
.preview-card{margin:20px 0 5px;background:#fff;border:1px solid #e3e2dc;padding:17px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;box-shadow:0 12px 28px rgba(0,0,0,.06)}.preview-card>div:last-child{text-align:right}.preview-card span{display:block;font-size:7px;letter-spacing:.18em;color:#9a9a96;margin-bottom:4px}.preview-card strong{font-size:10px;white-space:nowrap}.preview-brand{font-size:22px;font-weight:800;font-style:italic;padding:2px 16px;border-left:1px solid #ddd;border-right:1px solid #ddd}.form-section{padding:20px 0 8px;border-bottom:1px solid #dad9d4}.section-label{display:flex;gap:10px;align-items:center;margin-bottom:14px}.section-label>span{font-size:9px;color:#999993}.section-label h3{font-size:13px;margin:0;letter-spacing:.03em}.brand-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.brand-grid input{position:absolute;opacity:0}.brand-grid span{min-height:46px;display:grid;place-items:center;border:1px solid #d8d7d2;background:#fff;font-size:11px;font-weight:800;cursor:pointer;transition:.15s}.brand-grid input:checked+span{background:#151617;color:#fff;border-color:#151617}.field-grid{display:grid;gap:10px;margin-top:10px}.two-columns{grid-template-columns:1fr 1fr}.four-columns{grid-template-columns:repeat(4,1fr)}.field{display:block;background:#fff;border:1px solid #deddd8;padding:9px 11px}.field>span{font-size:8px;color:#969690;display:block;margin-bottom:5px}.field input{width:100%;border:0;outline:0;background:transparent;font-size:12px;font-weight:600;padding:0;min-width:0}.field>div{display:flex;align-items:baseline;gap:3px}.field small{font-size:7px;color:#999}.compact-section{border-bottom:0}.toggle-list{background:#fff;border:1px solid #deddd8}.toggle-list label{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-bottom:1px solid #eee}.toggle-list label:last-child{border:0}.toggle-list strong,.toggle-list small{display:block}.toggle-list strong{font-size:11px}.toggle-list small{font-size:8px;color:#999;margin-top:2px}.toggle-list input{position:absolute;opacity:0}.toggle-list i{width:35px;height:20px;border-radius:12px;background:#d5d5d1;position:relative;transition:.2s}.toggle-list i:after{content:"";position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:3px;left:3px;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}.toggle-list input:checked+i{background:#18191a}.toggle-list input:checked+i:after{transform:translateX(15px);background:var(--lime)}.apply-button{width:100%;border:0;background:#171819;color:#fff;padding:16px;margin-top:15px;font-weight:700;cursor:pointer}.apply-button:after{content:"  →";color:var(--lime)}
.result-modal{position:fixed;z-index:20;inset:0;background:#0c0d0e;display:none;align-items:center;justify-content:center;padding:clamp(14px,3vw,36px)}.result-modal.open{display:flex}.result-panel{width:min(1100px,100%);max-height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:16px;color:#fff}.result-header h2{font-size:24px}.close-button.light{border-color:#36383c}.close-button.light:before,.close-button.light:after{background:#fff}.result-image-wrap{min-height:0;display:flex;align-items:center;justify-content:center;background:#17191b;overflow:hidden}.result-image-wrap img{display:block;max-width:100%;max-height:calc(100dvh - 210px);object-fit:contain}.result-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px}.secondary-button,.download-button{border:1px solid #37393d;background:transparent;color:#fff;text-align:center;text-decoration:none;padding:15px;cursor:pointer;font-weight:700}.download-button{background:var(--lime);color:#111;border-color:var(--lime);border-radius:0}.toast{position:fixed;z-index:30;left:50%;bottom:25px;transform:translate(-50%,20px);background:#fff;color:#111;padding:11px 16px;font-size:11px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow);white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:800px){body{display:grid;place-items:center;padding:24px;background:linear-gradient(130deg,#050506,#1a1b1d)}.app-shell{width:min(100%,1180px);height:calc(100dvh - 48px);min-height:600px;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:74px 1fr;border:1px solid #2b2d30;box-shadow:0 30px 90px rgba(0,0,0,.5)}.topbar{grid-column:1/-1}.camera-stage{grid-row:2;grid-column:1}.control-deck{grid-row:2;grid-column:2;border-left:1px solid #282a2e;display:flex;flex-direction:column;justify-content:flex-end;padding:30px 24px}.capture-row{grid-template-columns:1fr;gap:28px}.shutter{grid-row:1}.round-button{grid-row:2}.gallery-button{grid-column:1;transform:translateX(-35px)}.adjust-button{grid-column:1;transform:translate(35px,-76px);margin-bottom:-76px}.settings-sheet{left:auto;top:0;right:0;width:min(520px,46vw);max-height:none;border-radius:0;padding-top:24px}.sheet-handle{display:none}}
@media (max-width:520px){.camera-stage{min-height:390px}.topbar{height:64px}.control-deck{padding-top:9px}.four-columns{grid-template-columns:1fr 1fr}.brand-grid{grid-template-columns:repeat(3,1fr)}.brand-grid label:nth-child(n+4){grid-column:span 1}.preview-card{gap:8px;padding:14px 10px}.preview-brand{font-size:18px;padding:2px 10px}.preview-card strong{font-size:8px}.settings-sheet{max-height:94dvh}.result-actions{grid-template-columns:1fr 1.5fr}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Desktop workstation */
.brand-grid label span{position:relative}.brand-grid label span img{display:none}.brand-grid label span b{font:inherit}
@media (min-width:1000px){
  body{display:block;padding:0;background:#101113;overflow:hidden}
  .app-shell{width:calc(100vw - 522px);height:100dvh;min-height:640px;margin:0;background:#0d0e10;border:0;box-shadow:none;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:76px minmax(0,1fr) 104px}
  .topbar{grid-column:1;height:76px;padding:0 32px;background:#0d0e10;border-bottom:1px solid #25272a}
  .topbar-label{margin-right:0}.camera-stage{grid-column:1;grid-row:2;margin:26px 28px 0;min-height:0;background:radial-gradient(circle at 50% 40%,#2e3135,#141518 73%)}
  .empty-state{background:linear-gradient(145deg,rgba(255,255,255,.03),transparent 55%)}.empty-state h1{font-size:42px}.empty-state p{font-size:14px}.empty-state .primary-button{padding:15px 28px}
  .control-deck{grid-column:1;grid-row:3;border:0;background:#0d0e10;padding:18px 28px 24px;display:block}.capture-row{width:min(540px,100%);margin:0 auto;grid-template-columns:54px 1fr 54px;gap:16px}.round-button{width:50px;height:50px}.process-button{height:50px;font-size:13px;letter-spacing:.04em}.capture-hint{margin-top:10px}
  .sheet-backdrop{display:none!important}.settings-sheet{display:block;position:fixed;inset:0 0 0 auto;width:522px;max-height:none;height:100dvh;overflow-y:auto;transform:none!important;border-radius:0;background:#f5f4f0;padding:32px 30px 34px;box-shadow:-24px 0 70px rgba(0,0,0,.25)}.settings-sheet[aria-hidden="true"]{visibility:visible}.sheet-handle,.close-button{display:none}.sheet-heading{margin-bottom:23px}.sheet-heading p{font-size:9px}.sheet-heading h2{font-size:30px}
  .preview-card{margin:0 0 27px;padding:18px 17px;min-height:71px}.preview-brand{font-size:24px}.form-section{padding:0 0 18px;margin-bottom:18px}.section-label{margin-bottom:13px}.section-label h3{font-size:14px}.brand-grid{grid-template-columns:repeat(4,1fr);gap:8px}.brand-grid span{min-height:48px!important;padding:7px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:4px}.brand-grid label span img{display:block;max-width:64px;max-height:17px;object-fit:contain;filter:grayscale(1) brightness(.15)}.brand-grid label span b{display:none;font-size:8px}.brand-grid label .brand-name{font-size:9px!important;letter-spacing:.02em}.brand-grid input:checked+span img{filter:grayscale(1) brightness(10)}
  .two-columns{gap:10px}.field{padding:10px 12px}.field input{font-size:12px}.four-columns{gap:8px}.compact-section{margin-bottom:0}.toggle-list label{padding:10px 13px}.apply-button{margin-top:4px;height:57px;font-size:14px}.quick-settings{display:none}
}

/* Localized controls, Font Awesome icon treatment, and tactile motion. */
.icon-button i,.round-button i{font-size:18px;line-height:1}.gallery-button span,.adjust-button span{display:none}.add-photos i{margin-right:6px}.watermark-scale-section{border-bottom:0!important}.section-label output{margin-left:auto;color:#6f736f;font-size:11px;font-weight:700}.range-field{display:grid;grid-template-columns:24px 1fr 24px;align-items:center;gap:8px;background:#fff;border:1px solid #deddd8;padding:10px 12px}.range-field i{text-align:center;font-size:12px;color:#555}.range-field input{appearance:none;width:100%;height:4px;background:#deded9;border-radius:8px;outline:none}.range-field input::-webkit-slider-thumb{appearance:none;width:17px;height:17px;border-radius:50%;background:#171819;border:3px solid var(--lime);cursor:pointer;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}.range-field input::-webkit-slider-thumb:hover{transform:scale(1.22);box-shadow:0 0 0 5px rgba(217,255,67,.24)}.range-field input::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#171819;border:3px solid var(--lime);cursor:pointer}
.toggle-list i{transition:background .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1)!important}.toggle-list i:after{transition:transform .28s cubic-bezier(.2,.8,.2,1),background .28s!important}.toggle-list input:checked+i{animation:switch-pulse .34s ease-out}.brand-grid span,.round-button,.primary-button,.add-photos{transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}.brand-grid span:hover,.round-button:hover,.add-photos:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.12)}
.process-button{overflow:hidden;position:relative;display:block;padding:0!important}.process-button span{display:block;white-space:nowrap;line-height:52px;min-width:max-content;animation:download-marquee 4.4s linear infinite}.process-button:hover span{animation-duration:2.3s}.camera-stage.dragging:after{content:"放開以加入照片"!important}@keyframes switch-pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes download-marquee{0%{transform:translateX(0)}100%{transform:translateX(-33.333%)}}
@media (min-width:1000px){.settings-sheet{padding-left:clamp(48px,3.8vw,72px)!important;padding-right:clamp(24px,2.4vw,44px)!important}.range-field{padding:12px 14px}.process-button span{line-height:52px}}
.add-photos:before{content:none!important}

/* Refined actions: compact right panel, pill controls, true-colour brand marks. */
.primary-button,.add-photos,.apply-button,.download-action,.preview-apply,.brand-grid span,.size-options button,.secondary-button,.download-button{border-radius:999px!important}.brand-grid label span img{filter:none!important}.brand-grid input:checked+span{background:#fff!important;color:#111!important;border-color:#151617!important;box-shadow:inset 0 0 0 2px #151617!important}.brand-grid input:checked+span img{filter:none!important}
.size-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.size-options button{border:1px solid #d9d8d3;background:#fff;min-height:42px;font-size:12px;font-weight:700;cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}.size-options button:hover{transform:translateY(-2px)}.size-options button.active{background:#171819;color:#fff;box-shadow:0 7px 14px rgba(0,0,0,.12)}
.settings-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.settings-actions .apply-button{margin:0;height:52px;padding:0;background:#f1f0eb;color:#161719;border:1px solid #d6d5cf}.settings-actions .apply-button:after{display:none}.download-action{position:relative;overflow:hidden;border:0;background:#171819;color:#fff;height:52px;font-weight:800;cursor:pointer}.download-label{position:relative;z-index:2}.download-progress{display:none;position:absolute;left:15px;right:15px;bottom:10px;height:3px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden}.download-progress i{display:block;height:100%;width:0;background:var(--lime);border-radius:4px;transition:width .1s linear}.download-action.is-downloading .download-progress{display:block}.download-action.is-downloading .download-label{font-size:0}.download-action.is-downloading .download-label:after{content:"下載中";font-size:12px}.download-action:disabled{cursor:wait}
.process-button span{animation:none!important;transform:none!important}.preview-apply{display:block;width:min(430px,100%);height:52px;margin:0 auto;border:0;background:var(--lime);color:#111;font-size:13px;font-weight:800;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.preview-apply:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(217,255,67,.2)}
@media (min-width:1000px){:root{--desktop-panel:clamp(460px,29vw,560px)}.settings-sheet{padding-left:clamp(32px,2.5vw,48px)!important;padding-right:clamp(24px,2vw,38px)!important}.control-deck{padding-top:16px!important}.capture-hint{margin-top:9px!important}.preview-apply{width:min(460px,100%)}.brand-grid span{min-height:46px!important}.settings-actions{margin-top:16px}}

.brand-grid img[alt="DJI"],.preview-brand img[alt="DJI"]{filter:grayscale(1) brightness(.08)!important}.settings-actions{grid-template-columns:1fr}.settings-actions .download-action{width:100%}.control-deck{display:flex!important;align-items:center;justify-content:center}.control-deck .capture-hint{margin:0!important}

.preview-card{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important}.preview-card>div:last-child{text-align:left!important}.preview-card strong{font-size:11px!important}.preview-meta{padding-left:2px}.preview-meta small{display:block;color:#858589;font-size:8px;font-weight:600;margin-top:4px;white-space:nowrap}

/* Preserve the entire exported composition in the editor preview. */
.camera-stage.has-photo{display:grid;place-items:center;background:#0b0c0e}.camera-stage.has-photo>img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}

.details-modal{position:fixed;z-index:50;inset:0;background:rgba(7,8,9,.62);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:22px}.details-modal.open{display:flex}.details-panel{width:min(640px,100%);max-height:min(780px,90dvh);overflow:auto;background:#f5f4f0;padding:28px;box-shadow:0 24px 70px rgba(0,0,0,.4)}.details-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}.details-heading p{margin:0 0 5px;font-size:10px;letter-spacing:.12em;color:#777}.details-heading h2{font-size:28px;margin:0}.details-list{display:grid;grid-template-columns:150px 1fr;margin:0;border-top:1px solid #d9d8d3}.details-list dt,.details-list dd{margin:0;padding:11px 12px;border-bottom:1px solid #dfded9;font-size:12px}.details-list dt{background:#eeece7;font-weight:700}.details-list dd{background:#fff;overflow-wrap:anywhere}.photo-details{display:none}
@media (min-width:1000px){.photo-details{display:block;border:1px solid #36383c;background:transparent;color:#d3d5d7;padding:10px 4px;font-size:10px;font-weight:700;cursor:pointer;margin-bottom:9px}.photo-details i{margin-right:5px}.photo-details:not(:disabled):hover{border-color:var(--lime);color:#fff}.photo-details:disabled{opacity:.35;cursor:not-allowed}}
@media (max-width:600px){.details-panel{padding:20px}.details-list{grid-template-columns:110px 1fr}.details-list dt,.details-list dd{font-size:11px;padding:9px}.details-heading h2{font-size:23px}}
@media (min-width:1500px){.app-shell{width:calc(100vw - 590px)}.settings-sheet{width:590px;padding-left:54px;padding-right:54px}}

/* 詳細資料僅保留常用項目，因此不需在視窗內捲動。 */
.details-panel{max-height:none!important;overflow:hidden!important}
.details-panel .close-button{display:grid!important;place-items:center;flex:none;border-radius:50%!important}
.details-list dt,.details-list dd{padding:8px 12px!important}

/* 資訊卡背景改為明確的雙選項；桌面版收窄右側設定區，將畫面留給預覽。 */
.card-background-setting{display:grid;gap:10px}.card-background-setting>span{font-size:11px;font-weight:700}.card-background-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.card-background-options button{height:42px;border:1px solid #d7d6d1;border-radius:999px;background:#fff;color:#171819;font-size:12px;font-weight:800;cursor:pointer;transition:background .24s ease,color .24s ease,transform .24s ease,box-shadow .24s ease}.card-background-options button:hover{transform:translateY(-1px)}.card-background-options button.active{background:#171819;color:#fff;border-color:#171819;box-shadow:0 5px 13px rgba(0,0,0,.16)}.card-background-options button[data-card-background="glass"]{background:linear-gradient(120deg,#eef4f2,#b6c7c4);border-color:#aebfbb;color:#18201f}.card-background-options button[data-card-background="glass"].active{background:linear-gradient(120deg,#273637,#78928d);color:#fff;border-color:#1c2829}
@media (min-width:1000px){:root{--desktop-panel:clamp(410px,24vw,480px)}.settings-sheet{padding-left:28px!important;padding-right:28px!important}.sheet-heading h2{font-size:31px!important}.preview-card{margin-bottom:20px!important}.form-section{padding-bottom:14px!important;margin-bottom:14px!important}.camera-stage{margin-right:28px!important}.control-deck{padding-right:28px!important}.card-settings-section{padding-bottom:12px!important}}

/* Upload-only interface overrides */
.topbar-label{font-size:9px;letter-spacing:.2em;color:#8d9197;font-weight:700;margin-right:10px}
.camera-stage>img{width:100%;height:100%;object-fit:cover;display:none}.camera-stage.has-photo>img{display:block}.camera-stage.has-photo .empty-state{display:none}
.empty-state small{font-size:9px;color:#62666d;letter-spacing:.04em;margin-top:14px}.stage-gradient{opacity:0}.camera-stage.has-photo .stage-gradient{opacity:1}.focus-frame{display:none}.camera-status,.zoom-control{display:none!important}
.control-deck{padding-top:18px}.mode-row{display:none}.capture-row{margin-top:3px}.process-button{border:0;background:var(--lime);color:#111;padding:15px 21px;font-size:12px;font-weight:800;cursor:pointer}.camera-stage.dragging:after{content:"放開以加入照片";position:absolute;inset:14px;border:1px dashed var(--lime);display:grid;place-items:center;color:#111;background:rgba(217,255,67,.88);font-size:12px;font-weight:800;letter-spacing:.18em;z-index:4}
@media (min-width:800px){.process-button{grid-row:1}.shutter{display:none}}

/* Final desktop layout reset: prevents phone-control rules from leaking into the workstation. */
.preview-brand img{display:block;max-width:118px;max-height:30px;object-fit:contain;filter:grayscale(1) brightness(.1)}
@media (min-width:1000px){
  body{min-width:1000px;overflow:hidden;background:#0d0e10}
  .app-shell{width:calc(100vw - 650px)!important;height:100dvh!important;margin:0!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:76px minmax(0,1fr) 112px!important}
  .camera-stage{grid-column:1!important;grid-row:2!important;margin:26px 30px 0!important}.control-deck{grid-column:1!important;grid-row:3!important;display:block!important;padding:20px 30px 26px!important}
  .capture-row{width:min(620px,100%)!important;margin:0 auto!important;display:grid!important;grid-template-columns:52px minmax(260px,420px) 52px!important;grid-template-rows:52px!important;align-items:center!important;justify-content:center!important;gap:16px!important}
  .capture-row>*{grid-row:1!important;transform:none!important;margin:0!important}.gallery-button{grid-column:1!important}.process-button{grid-column:2!important;width:100%;height:52px!important;white-space:nowrap!important}.adjust-button{grid-column:3!important}.capture-hint{margin:10px 0 0!important}
  .settings-sheet{width:650px!important;padding:36px 48px 42px!important}.sheet-heading h2{font-size:33px!important}.brand-grid{grid-template-columns:repeat(4,1fr)!important}.brand-grid span{min-height:52px!important}.brand-grid label span img{max-width:82px!important;max-height:23px!important}.preview-card{min-height:82px!important}.preview-brand{min-width:130px!important;text-align:center}.preview-brand img{margin:auto;max-width:126px;max-height:35px}.field{min-height:62px}.apply-button{height:60px!important}
}
@media (min-width:1600px){.app-shell{width:calc(100vw - 700px)!important}.settings-sheet{width:700px!important;padding-left:66px!important;padding-right:66px!important}}

/* Balanced two-pane desktop canvas. */
@media (min-width:1000px){
  :root{--desktop-panel:clamp(540px,35vw,700px)}
  html,body{width:100%;height:100%;overflow:hidden!important}
  body{display:block!important;padding:0!important;place-items:initial!important;background:#101113!important}
  .app-shell{width:calc(100vw - var(--desktop-panel))!important;min-width:0!important;margin:0!important;justify-self:start!important;align-self:start!important;background:#101113!important}
  .topbar{padding-left:44px!important;padding-right:44px!important}
  .camera-stage{margin:28px 44px 0!important}
  .control-deck{padding:20px 44px 26px!important}
  .capture-row{width:min(640px,calc(100% - 80px))!important;grid-template-columns:54px minmax(280px,430px) 54px!important}
  .settings-sheet{width:var(--desktop-panel)!important;padding:38px clamp(34px,3vw,62px) 42px!important;box-shadow:-18px 0 44px rgba(0,0,0,.22)!important}
  .sheet-heading p{font-size:10px!important}.sheet-heading h2{font-size:36px!important}.section-label>span{font-size:10px!important}.section-label h3{font-size:16px!important}.field>span{font-size:9px!important}.field input{font-size:14px!important}.field small{font-size:8px!important}.toggle-list strong{font-size:13px!important}.toggle-list small{font-size:9px!important}.preview-card strong{font-size:11px!important}.preview-card span{font-size:8px!important}
}

/* Lightroom-style multi-photo rail and bright proof preview. */
.filmstrip{display:none}.camera-stage.has-photo .stage-gradient{opacity:0!important}
@media (min-width:1000px){
  .filmstrip{display:flex;position:fixed;z-index:6;left:0;top:76px;bottom:0;width:166px;flex-direction:column;background:#111214;border-right:1px solid #292b2e;padding:17px 12px;overflow:hidden}.filmstrip-head{display:flex;align-items:center;justify-content:space-between;color:#8a8f95;font-size:8px;font-weight:800;letter-spacing:.12em;margin:0 4px 12px}.filmstrip-head strong{font-size:9px;color:#cdd1d4;letter-spacing:0}.add-photos,.remove-photo{border:1px solid #36383c;background:#1b1d20;color:#fff;padding:10px 4px;font-size:10px;font-weight:700;cursor:pointer;margin-bottom:9px}.add-photos:before{content:"+ ";color:var(--lime);font-size:14px}.remove-photo{color:#c8c9cb;background:transparent;border-color:#313337}.remove-photo:not(:disabled):hover{border-color:#d05a54;color:#ff8179}.remove-photo:disabled{opacity:.35;cursor:not-allowed}.remove-photo i{margin-right:5px}.thumbnail-list{display:grid;grid-template-columns:1fr;gap:9px;overflow:auto;padding:4px 1px 12px}.thumbnail{position:relative;display:block;width:100%;aspect-ratio:1.32;border:1px solid #35373a;background:#232528;padding:0;overflow:hidden;cursor:pointer}.thumbnail img{display:block;width:100%;height:100%;object-fit:cover}.thumbnail span{position:absolute;bottom:0;left:0;background:rgba(12,13,14,.82);color:#aeb3b8;font-size:8px;padding:4px 6px;font-weight:700}.thumbnail.active{border:2px solid var(--lime)}.thumbnail.active span{color:#111;background:var(--lime)}
  .topbar{padding-left:204px!important}.camera-stage{margin-left:204px!important}.control-deck{padding-left:204px!important}.camera-stage.has-photo>img{filter:none!important;opacity:1!important}
}

/* Final compact desktop proportion: the image workspace is intentionally dominant. */
@media (min-width:1000px){
  :root{--desktop-panel:clamp(410px,24vw,480px)!important}
  .app-shell{width:calc(100vw - var(--desktop-panel))!important}
  .settings-sheet{width:var(--desktop-panel)!important;padding:30px 28px 34px!important}
  .camera-stage{margin-right:28px!important}
  .control-deck{padding-right:28px!important}
  .sheet-heading h2{font-size:31px!important}
}

/* Preview framing and workstation zoom control. */
.card-background-options{grid-template-columns:repeat(3,1fr)}
.camera-stage.has-photo>img{width:auto!important;height:auto!important;max-width:100%!important;max-height:calc(100% - 22px)!important;object-fit:contain!important;transform:scale(var(--preview-zoom-factor,.9));transform-origin:center;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.preview-zoom{display:none}
@media (min-width:1000px){
  .preview-zoom{display:flex;position:absolute;z-index:4;left:2px;top:50%;transform:translateY(-50%);padding:12px 5px;border-radius:999px;background:rgba(10,12,14,.42);backdrop-filter:blur(9px)}
  .preview-zoom input{appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;width:18px;height:178px;accent-color:var(--lime);cursor:ns-resize}
  .thumbnail-list{min-height:0!important}
}

/* Custom text presets and proportional brand logo rendering. */
.custom-brand-editor{margin-top:11px}.custom-brand-add{display:flex;gap:7px}.custom-brand-add button,.custom-brand-option button{border:0;border-radius:999px;cursor:pointer;font-weight:800}.custom-brand-add button{width:100%;height:36px;background:#171819;color:#fff;font-size:10px}.custom-brand-add button:disabled{opacity:.35;cursor:not-allowed}.custom-brand-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.custom-brand-option{display:flex;align-items:center;height:48px;border:1px solid #d8d7d2;border-radius:999px;background:#fff;overflow:hidden}.custom-brand-option input{position:absolute;opacity:0}.custom-brand-option img{width:auto;height:auto;max-width:118px;max-height:34px;object-fit:contain;margin-left:14px;cursor:pointer}.custom-brand-option:has(input:checked){border-color:#171819;box-shadow:inset 0 0 0 1px #171819}.custom-brand-option button{width:32px;height:32px;background:transparent;color:#8b8d90;font-size:18px;line-height:1}.brand-grid span{border-radius:999px!important}.brand-grid label span img{width:auto!important;height:auto!important;max-width:70px!important;max-height:24px!important;object-fit:contain!important}
.mobile-brand-title{margin:14px 0 8px;font-size:10px;font-weight:800;color:#777871;letter-spacing:.08em}.mobile-brand-grid{margin-top:0}.mobile-brand-grid .phone-logo{font-size:9px!important;letter-spacing:.01em!important;white-space:nowrap}.mobile-brand-grid .apple-logo{font-size:11px!important}.mobile-brand-grid .apple-logo i{font-size:14px;margin-right:3px}.mobile-brand-grid .xiaomi-logo{color:#f26b21}.mobile-brand-grid .google-logo{font-size:8px!important;color:#3975d4}
.mobile-brand-grid span{min-height:52px!important}

/* Keep the credit at the workstation edge and give the proof image the remaining height. */
@media (min-width:1000px){
  .app-shell{grid-template-rows:76px minmax(0,1fr) 32px!important}
  .control-deck{display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:0 28px 9px!important}
  .capture-hint{margin:0!important}
}

/* The filmstrip itself never grows: only the thumbnail area scrolls. */
@media (min-width:1000px){
  .filmstrip>*:not(.thumbnail-list){flex:0 0 auto}
  .thumbnail-list{flex:1 1 0!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;align-content:start;grid-auto-rows:auto;padding:4px 1px 16px!important;scrollbar-width:thin;scrollbar-color:#4a4d51 transparent}
  .thumbnail-list::-webkit-scrollbar{width:5px}.thumbnail-list::-webkit-scrollbar-thumb{background:#4a4d51;border-radius:999px}
  .thumbnail{min-height:0!important;flex-shrink:0}
}

/* A selected brand is always rendered in the same black monochrome state. */
.brand-grid input:checked+span img{filter:grayscale(1) brightness(.08)!important}
.brand-grid label:has(input[value="CANON"]:checked) span img{filter:none!important}
#previewBrand img[alt="CANON"]{filter:none!important}
.mobile-brand-grid label:has(input[value="XIAOMI"]:checked) span img{filter:none!important}

/* Phone editor: upload stays above the proof, adjustment stays below it. */
.mobile-add-photo,.mobile-adjust-button{display:none}
.mobile-library-toggle{display:none}
@media (max-width:999px){
  html,body{height:100%;overflow:hidden}
  .app-shell{height:50dvh;min-height:0;grid-template-rows:64px minmax(0,1fr)}
  .topbar{height:64px;padding:env(safe-area-inset-top) 16px 0;justify-content:center;border-bottom:1px solid #242629}
  .topbar .icon-button,.topbar-label{display:none}
  .mobile-library-toggle{display:grid;position:absolute;left:14px;top:calc(env(safe-area-inset-top) + 12px);z-index:2;width:38px;height:38px;place-items:center;border:1px solid #34373b;border-radius:50%;background:#1a1c1f;color:#fff;font-size:15px;cursor:pointer}
  .wordmark{position:relative;z-index:1}.wordmark strong{font-size:22px}.wordmark span{font-size:8px}
  .mobile-add-photo{display:flex;position:absolute;right:14px;top:calc(env(safe-area-inset-top) + 12px);z-index:2;align-items:center;gap:6px;height:38px;padding:0 14px;border:1px solid #34373b;border-radius:999px;background:#1a1c1f;color:#fff;font-size:11px;font-weight:800;cursor:pointer}
  .mobile-add-photo i{font-size:14px;color:var(--lime)}
  .camera-stage{min-height:0!important;margin:0!important;background:#0b0c0e}
  .control-deck{display:none!important}
  .mobile-adjust-button{display:none!important}
  .settings-sheet{display:block!important;position:fixed!important;z-index:11;inset:50dvh 0 0!important;width:100%!important;height:50dvh!important;max-height:none!important;overflow-y:auto!important;transform:none!important;border-radius:22px 22px 0 0!important;padding:12px 18px calc(24px + env(safe-area-inset-bottom))!important;box-shadow:0 -14px 38px rgba(0,0,0,.26)!important}
  .settings-sheet[aria-hidden="true"]{visibility:visible!important}
  .settings-sheet .sheet-handle{display:block!important;margin-bottom:12px!important}
  .settings-sheet .close-button{display:none!important}
  .sheet-heading{margin-bottom:14px!important}
  .sheet-heading h2{font-size:25px!important}
  .preview-card{margin:0 0 16px!important}
  .form-section{margin-bottom:14px!important}
  .filmstrip.mobile-open{display:flex!important;position:fixed;z-index:20;top:64px;left:0;right:0;max-height:min(50dvh,480px);padding:14px 16px 16px;flex-direction:column;background:#121315;border-bottom:1px solid #303236;box-shadow:0 16px 34px rgba(0,0,0,.34);overflow:hidden}
  .filmstrip.mobile-open .filmstrip-head{display:flex;align-items:center;justify-content:space-between;color:#aeb2b8;font-size:10px;font-weight:800;letter-spacing:.1em;margin:0 2px 10px}
  .filmstrip.mobile-open .filmstrip-head strong{color:#fff;font-size:11px}
  .filmstrip.mobile-open .add-photos,.filmstrip.mobile-open .remove-photo,.filmstrip.mobile-open .photo-details{display:block;width:100%;height:38px;margin:0 0 8px;border:1px solid #383a3f;background:#1a1c20;color:#fff;font-size:11px;font-weight:800;cursor:pointer}
  .filmstrip.mobile-open .remove-photo{background:transparent;color:#d6d8db}.filmstrip.mobile-open .remove-photo:disabled,.filmstrip.mobile-open .photo-details:disabled{opacity:.4}
  .filmstrip.mobile-open .thumbnail-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;overflow-y:auto;padding:4px 0 2px}
  .filmstrip.mobile-open .thumbnail{position:relative;display:block;width:100%;aspect-ratio:1.18;border:1px solid #3b3d40;background:#202226;padding:0;overflow:hidden;cursor:pointer}
  .filmstrip.mobile-open .thumbnail img{display:block;width:100%;height:100%;object-fit:cover}.filmstrip.mobile-open .thumbnail span{position:absolute;left:0;bottom:0;padding:3px 5px;background:rgba(10,11,12,.82);color:#fff;font-size:8px;font-weight:800}.filmstrip.mobile-open .thumbnail.active{border:2px solid var(--lime)}.filmstrip.mobile-open .thumbnail.active span{background:var(--lime);color:#111}
}

/* On phones, the proof must always fit above the fixed tool panel in full. */
@media (max-width:999px){
  .camera-stage.has-photo{display:block!important}
  .camera-stage.has-photo>img{
    position:absolute!important;
    inset:10px!important;
    display:block!important;
    width:calc(100% - 20px)!important;
    height:calc(100% - 20px)!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
  }
}


/* Proof image must always include the entire rendered photo and its information card. */
@media (min-width:1000px){
  .camera-stage.has-photo>img{
    position:absolute!important;
    inset:11px!important;
    display:block!important;
    width:calc(100% - 22px)!important;
    height:calc(100% - 22px)!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:scale(var(--preview-zoom-factor,.9))!important;
  }

  /* Keep every library thumbnail as a separate, evenly spaced row. */
  .thumbnail-list{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    grid-template-columns:none!important;
    padding:4px 1px 18px!important;
  }
  .thumbnail{flex:0 0 auto!important;margin:0!important;min-height:0!important}
}