:root{font-family:Inter,"Microsoft YaHei","PingFang SC",sans-serif;color:#f5f5f5;background:#000000;color-scheme:dark;font-synthesis:none;--accent:#ffffff;--muted:#999999;--border:#303030;--surface:#181818}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default}button{border:0;background:none}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}a{color:inherit;text-decoration:none}button{transition:background .15s,color .15s,border-color .15s}button:hover:not(:disabled){filter:brightness(1.08)}[hidden]{display:none!important}.app-shell{max-width:1800px;margin:auto}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:0 38px}.brand{display:flex;align-items:center;gap:13px;font-size:23px;font-weight:650;letter-spacing:3px}.brand-mark{width:42px;height:42px;display:grid;place-items:center;color:var(--accent)}.brand-mark svg{width:38px;height:38px;stroke-width:1.3}.brand small{font-size:8px;font-weight:500;letter-spacing:2px;display:block;margin-top:5px;color:#a8a8a8}.document-title{font-size:12px;color:#c5c5c5;display:flex;align-items:center;gap:14px}.document-title span{font-size:10px;border-left:1px solid #494949;padding-left:14px;color:var(--muted)}.primary{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--accent);color:#111111;font-size:13px;font-weight:600;padding:12px 22px;border-radius:7px;min-height:44px}.primary svg{width:17px;height:17px}main{display:grid;grid-template-columns:86px minmax(420px,1fr) 365px;min-height:calc(100vh - 132px)}.rail{border-right:1px solid var(--border);display:flex;align-items:center;flex-direction:column;padding-top:29px;position:relative}.rail-active{display:flex;align-items:center;gap:8px;flex-direction:column;font-size:10px;color:var(--accent);background:#292929;border-radius:10px;padding:15px 18px}.rail-bottom{position:absolute;bottom:24px;font-family:monospace;font-size:11px;color:#6c6c6c}.stage{padding:30px 42px 24px;background:radial-gradient(ellipse at 50% 45%,#272727 0, #1d1d1d 40%, #181818 84%);display:flex;flex-direction:column;align-items:center;min-width:0}.stage-heading{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}.eyebrow{font-size:9px;letter-spacing:2.1px;color:#aaaaaa;font-weight:500}h1{font-size:21px;letter-spacing:2px;font-weight:400;margin:10px 0 0}h2{font-size:20px;font-weight:450;letter-spacing:1px;margin:11px 0 0}.draft-tag{font-size:10px;color:#9b9b9b;border:1px solid #3a3a3a;border-radius:20px;padding:6px 11px}.preview-wrap{position:relative;line-height:0;box-shadow:0 18px 50px #0005;width:min(100%,calc((100vh - 331px)*.75));min-width:250px;max-width:540px;background:#272727;overflow:hidden}#preview{display:block;width:100%;height:auto;touch-action:none}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#252525;font-size:13px;color:#afafaf}.preview-footer{display:flex;justify-content:space-between;align-items:center;width:min(100%,580px);margin-top:18px;gap:10px;color:#8d8d8d;font-size:9px;letter-spacing:.4px}.preview-footer i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#c0c0c0;margin-right:5px}.preview-footer button{font-size:10px;color:#c4c4c4;padding:8px 4px;user-select:none;touch-action:none}.stage-actions{display:flex;justify-content:space-between;align-items:center;width:min(100%,580px);margin-top:18px;gap:10px}.secondary{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #4a4a4a;border-radius:6px;padding:11px 15px;font-size:12px;background:#272727;color:#e5e5e5;min-height:44px}.secondary svg{width:16px;height:16px}.history{display:flex;align-items:center;gap:8px}.history button{padding:8px;font-size:10px;color:#b7b7b7;min-height:38px}.history button:disabled{opacity:.3}.history svg{width:16px;height:16px}.history span{height:14px;width:1px;background:#414141;margin:0 1px}.flip{transform:scaleX(-1)}.editor{border-left:1px solid var(--border);background:#1d1d1d;padding:30px 25px 20px;display:flex;flex-direction:column;min-width:0}.editor-heading{display:flex;justify-content:space-between;align-items:center}.step{font-size:10px;color:#9c9c9c}.step b{font-family:monospace;color:#dcdcdc;font-size:15px;font-weight:400;margin-left:6px}.tools{display:flex;border-bottom:1px solid var(--border);margin-top:28px;margin-bottom:24px;gap:4px}.tool{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:9px;font-size:11px;padding:12px 0 16px;position:relative;color:#979797}.tool svg{width:20px;height:20px}.tool.active{color:var(--accent)}.tool.active:after{content:"";position:absolute;bottom:-1px;width:25px;height:2px;background:var(--accent)}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}h3{font-size:12px;font-weight:500;margin:0;letter-spacing:1px}.section-title>span{font-size:9px;color:#a0a0a0;font-family:monospace}.camera-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.camera-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;border:1px solid #3b3b3b;border-radius:7px;background:#252525;padding:12px;min-width:0}.camera-card.selected{border-color:#ffffff;background:#303030}.camera-card img{width:100%;height:62px;object-fit:contain;margin-bottom:9px}.selected-check{position:absolute;right:7px;top:7px;width:14px;height:14px;background:var(--accent);border-radius:50%;color:#111111;display:grid;place-items:center}.selected-check svg{height:10px;width:10px;stroke-width:2.5}.camera-card small{color:#b0b0b0;letter-spacing:1.2px;font-size:8px}.camera-card strong{font-size:15px;font-weight:500;letter-spacing:.3px;margin-top:4px}.card-detail{font-size:9px;color:#a6a6a6;margin-top:6px}.pending{background:#212121;border-color:#323232}.pending strong{color:#a9a9a9}.pending small,.pending .card-detail{color:#7f7f7f}.camera-placeholder{height:62px;width:100%;display:grid;place-items:center;margin-bottom:9px;color:#5a5a5a}.camera-placeholder svg{width:45px;height:35px;stroke-width:1}.range-field{margin:24px 0 0}.range-field>label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#cacaca;margin-bottom:15px}.range-field output{font-family:monospace;color:var(--accent);font-size:11px}input[type=range]{display:block;width:100%;height:3px;accent-color:var(--accent);cursor:pointer;margin:0 0 12px}input[type=range]::-webkit-slider-thumb{width:13px;height:13px}.panel-note{font-size:10px;color:#919191;line-height:1.9;margin:20px 0 0}.editor-bottom{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:24px;color:#848484}.editor-bottom>svg{height:28px;width:28px;stroke-width:1}.editor-bottom p{font-size:10px;margin:0;letter-spacing:1px;line-height:1.9}.editor-bottom p span{display:block;letter-spacing:.5px;color:#6b6b6b;font-family:Georgia,serif;font-style:italic}.app-footer{height:40px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 34px;font-size:8px;letter-spacing:1.5px;color:#7e7e7e}.choice-row{display:flex;gap:6px}.choice{border:1px solid #404040;border-radius:5px;padding:11px 8px;font-size:10px;flex:1;color:#b5b5b5}.choice.active{background:#3d3d3d;color:var(--accent);border-color:#7a7a7a}.field-label{display:block;color:#bbbbbb;font-size:11px;margin:23px 0 10px}select,input[type=text]{width:100%;background:#2a2a2a;border:1px solid #4d4d4d;border-radius:5px;color:#e3e3e3;padding:12px 10px;font-size:12px}input[type=color]{border:0;padding:0;background:none;width:36px;height:26px;cursor:pointer}.color-field,.switch-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#cacaca;padding:20px 0;border-bottom:1px solid #3b3b3b}.switch-row input{accent-color:var(--accent);width:18px;height:18px}dialog{background:#232323;color:#ededed;border:1px solid #555555;border-radius:14px;padding:28px;width:min(420px,calc(100% - 32px));box-shadow:0 20px 100px #0007}dialog::backdrop{background:#000000c9;backdrop-filter:blur(6px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.dialog-heading h2{font-size:20px}.icon-button{padding:8px;color:#c3c3c3}.download{width:100%;margin-top:24px}.export-status{font-size:11px;color:#cccccc;line-height:1.6;margin-bottom:0}.toast{position:fixed;bottom:35px;left:50%;transform:translate(-50%,20px);background:#eeeeee;color:#171717;border-radius:7px;box-shadow:0 8px 30px #0005;max-width:calc(100% - 40px);padding:13px 20px;font-size:12px;line-height:1.6;opacity:0;pointer-events:none;transition:.2s;z-index:10}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1500px){main{grid-template-columns:100px minmax(500px,1fr) 400px}.editor{padding-left:32px;padding-right:32px}.stage{padding:38px 64px}.preview-wrap{width:min(100%,calc((100vh - 360px)*.75));max-width:640px}}
@media(max-width:1100px){main{grid-template-columns:minmax(390px,1fr) 330px}.rail{display:none}.stage{padding:26px}.editor{padding:26px 20px}.document-title{display:none}.preview-footer{font-size:8px;letter-spacing:0}.preview-footer button{font-size:9px}.preview-wrap{min-width:230px}}
@media(max-width:760px){.topbar{height:70px;padding:0 20px}.brand{font-size:20px;gap:6px}.brand-mark{width:30px}.brand-mark svg{width:29px}.brand small{font-size:6px;letter-spacing:1.6px}.topbar>.primary{padding:10px 14px;font-size:11px;min-height:40px}.topbar>.primary svg{width:15px}main{display:flex;flex-direction:column;min-height:0}.stage{padding:22px 22px 20px}.stage-heading{margin-bottom:20px}.stage-heading .eyebrow{font-size:8px}h1{font-size:17px;margin-top:8px}.draft-tag{font-size:9px}.preview-wrap{width:min(100%,335px);min-width:0}.preview-footer{width:min(100%,410px);margin-top:12px;flex-wrap:wrap;gap:4px}.preview-footer span:first-child{font-size:8px}.stage-actions{width:min(100%,410px);margin-top:12px}.history{gap:2px}.secondary{padding:9px 11px;font-size:11px}.history button{font-size:9px;padding:7px}.editor{border-left:0;border-top:1px solid #3a3a3a;padding:24px 22px}.editor-heading h2{font-size:18px}.editor-heading .eyebrow{font-size:8px}.tools{margin-top:12px;margin-bottom:22px}.tool{min-height:65px;gap:8px}.camera-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.camera-card{padding:10px}.camera-card img,.camera-placeholder{height:48px;margin-bottom:7px}.camera-card strong{font-size:14px}.card-detail{font-size:8px}.camera-card small{font-size:7px}.camera-placeholder svg{width:37px;height:30px}.editor-bottom{padding-top:28px}.panel-note{font-size:11px}.range-field>label{font-size:12px}.range-field input{height:5px;margin-bottom:20px}.range-field{margin-top:25px}.app-footer{font-size:7px;padding:0 22px;letter-spacing:.5px}.app-footer span:last-child{display:none}.choice,.field-label,.color-field,.switch-row{font-size:12px}select,input[type=text]{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.camera-card.selected::after{content:"✓";position:absolute;right:7px;top:7px;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#111111;font-size:10px;font-weight:700}
.brand-logo{width:44px;height:44px;object-fit:contain}.exif-fields{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.brand{font-size:20px;letter-spacing:1px}.brand small{letter-spacing:2.2px}.exif-section{border-top:1px solid var(--border);margin-top:28px;padding-top:24px}.exif-section .section-title{margin-bottom:0}.exif-section .section-title button{font-size:10px;color:var(--accent);padding:7px 0}.exif-section .switch-row{padding:16px 0}.exif-section .panel-note{margin-top:13px}.exif-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}.exif-toggle{display:flex;align-items:center;gap:5px;font-size:11px;color:#cacaca;margin-bottom:10px}.exif-toggle input{accent-color:var(--accent);margin:0;width:14px;height:14px}.exif-field input[type=text]{padding:10px 7px;font-size:11px}.exif-field{min-width:0}
@media(max-width:760px){.brand{font-size:17px;letter-spacing:.3px}.brand small{font-size:7px;letter-spacing:1.8px}.topbar{padding:0 16px}.exif-field input[type=text]{font-size:13px}.exif-toggle{min-height:30px}.exif-section .section-title button{font-size:11px;min-height:40px}}
/* Keep the composition and actions in view while the editing panel scrolls. */
html,body{height:100%;overflow:hidden}
.app-shell{height:100vh;height:100dvh;display:flex;flex-direction:column}
.topbar{height:64px;flex-shrink:0}.app-footer{display:none}
main{flex:1;min-height:0;overflow:hidden}
.stage{min-height:0;padding:20px 28px 16px}
.stage-heading{flex-shrink:0;margin-bottom:14px}.stage-heading .eyebrow{display:none}.stage-heading h1{margin:0;font-size:18px}
.preview-wrap{width:min(100%,calc((100dvh - 236px)*var(--preview-ratio, .75)));min-width:0;height:auto;aspect-ratio:var(--preview-ratio, .75);max-width:100%;flex-shrink:0}
#preview{width:100%;height:100%;object-fit:contain}
.preview-footer,.stage-actions{flex-shrink:0;margin-top:10px}
.editor{min-height:0;overflow:hidden;padding-top:18px;padding-bottom:0}
.editor-heading{display:none}.tools{flex-shrink:0;margin:0 0 16px}
.panel{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;flex:1;padding:0 8px 28px 0}
.editor-bottom{display:none}.camera-card strong{font-size:13px;overflow-wrap:anywhere}
@media(max-width:760px){
 .topbar{height:52px;padding:0 16px}.brand-logo{width:32px;height:32px}.brand small{display:none}
 main{display:flex;flex-direction:column;min-height:0}
 .stage{flex-shrink:0;padding:8px 16px 10px;overflow:hidden}
 .stage-heading{display:none}.preview-wrap{height:auto;width:min(100%,calc(min(36dvh,320px)*var(--preview-ratio, .75)));aspect-ratio:var(--preview-ratio, .75);max-width:100%;flex-shrink:0}
 .preview-footer{display:none}.stage-actions{width:100%;margin-top:8px}.secondary{min-height:40px}
 .editor{flex:1;min-height:0;padding:0 16px;border-top:1px solid var(--border)}
 .tools{margin:0 0 12px}.tool{min-height:48px;flex-direction:row;gap:6px;padding:10px 0}.tool svg{width:18px;height:18px}
 .panel{padding-bottom:calc(24px + env(safe-area-inset-bottom))}.camera-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .camera-card img{height:56px}.camera-card strong{font-size:14px}
 .history button{min-height:36px}.toast{bottom:16px}
}
@media(max-height:550px){.preview-wrap{width:min(100%,calc((100dvh - 190px)*var(--preview-ratio, .75)))}.stage-heading{display:none}.preview-footer{display:none}.stage{padding-top:10px}.topbar{height:48px}}
@media(max-width:760px) and (max-height:550px){.preview-wrap{width:min(100%,calc(28dvh*var(--preview-ratio, .75)))}.topbar{height:44px}.stage{padding-top:4px}.tool{min-height:40px}}
.topbar{height:108px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:54px auto;padding-bottom:10px}.topbar .brand{grid-column:1;grid-row:1;justify-self:start}.topbar>.primary{grid-column:2;grid-row:1}.brand-copy{grid-column:1/-1;grid-row:2;margin:0}.brand-tagline{margin:0;color:#f5f5f5;font-size:15px;font-weight:500;line-height:22px;letter-spacing:.5px}.brand-story{margin:2px 0 0;color:#a3a3a3;font-size:11px;line-height:18px}.stage-heading{display:none}
@media(max-width:760px){.topbar{height:auto;min-height:102px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:44px auto;column-gap:12px;padding-bottom:10px}.topbar .brand{grid-column:1;grid-row:1;justify-self:start}.topbar>.primary{grid-column:2;grid-row:1;min-height:34px;padding:8px 12px}.brand-copy{grid-column:1/-1;grid-row:2;margin:0}.brand-tagline{font-size:14px;line-height:21px}.brand-story{font-size:11px;line-height:16px;margin-top:2px}.preview-wrap{width:min(100%,calc(min(34dvh,300px)*var(--preview-ratio,.75)))}}
@media(max-width:760px) and (max-height:600px){.preview-wrap{width:min(100%,calc(27dvh*var(--preview-ratio,.75)))}.topbar{min-height:96px}.brand-tagline{font-size:13px;line-height:19px}.brand-story{font-size:10px;line-height:15px}}