:root{color-scheme:dark;--bg:#101215;--panel:#1b1d20;--edge:#303338;--text:#f5f1e9;--muted:#aaa8a2;--accent:#f5b978}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:0;color:inherit;background:transparent}button:disabled{opacity:.4}#app{max-width:740px;margin:auto}header{height:72px;padding:13px 18px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:11px}.mark{font-size:32px;color:var(--accent)}.brand strong{font-size:16px;letter-spacing:2px}.brand em{font-style:normal;color:var(--accent)}.brand small{display:block;font-size:9px;letter-spacing:2.6px;color:var(--muted);margin-top:4px}.header-actions{display:flex;gap:6px}.header-actions button{background:#25282c;border-radius:50%;width:42px;height:42px;font-size:21px}#viewfinder{position:relative;width:100%;aspect-ratio:3/4;background:#090a0c;overflow:hidden;touch-action:manipulation}#camera,#preview{position:absolute;width:100%;height:100%;object-fit:contain;inset:0}#camera{opacity:0;pointer-events:none}#preview{touch-action:manipulation}#noCamera{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px;background:radial-gradient(circle at 50% 30%,#31363a,#111215 65%)}#noCamera.hidden{display:none}.no-cam-icon{font-size:70px;color:var(--accent)}#noCamera h2{font-size:24px;margin:8px 0}#noCamera p{font-size:14px;max-width:290px;color:#c1c0bc;line-height:1.5}.primary{background:var(--accent)!important;color:#1b1714!important;border-radius:10px;padding:12px 20px;font-weight:750!important}.ghost{border:1px solid #5b6064;border-radius:10px;padding:10px 16px;margin-top:12px}#status{position:absolute;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;pointer-events:none;font-size:10px;letter-spacing:1.5px;font-weight:700}#status span{background:#0009;padding:8px 10px;border-radius:5px}#exposureInfo{position:absolute;bottom:15px;left:14px;font-size:11px;color:#fff;text-shadow:0 1px 4px #000;pointer-events:none}.focus-ring{position:absolute;color:var(--accent);font-size:42px;transform:translate(-50%,-50%);pointer-events:none;text-shadow:0 0 10px #000}.grid-lines{position:absolute;inset:0;pointer-events:none}.grid-lines i{position:absolute;background:#ffffff55}.grid-lines i:nth-child(1){height:1px;width:100%;top:33.333%}.grid-lines i:nth-child(2){height:1px;width:100%;top:66.666%}.grid-lines i:nth-child(3){width:1px;height:100%;left:33.333%}.grid-lines i:nth-child(4){width:1px;height:100%;left:66.666%}#countdown{position:absolute;inset:0;display:grid;place-items:center;background:#0007;font-size:100px;font-weight:800}#flash{position:absolute;inset:0;background:white}.hidden{display:none!important}.capture-bar{padding:12px 16px 17px;background:#17191c}.modes{display:flex;overflow-x:auto;gap:6px;scrollbar-width:none;justify-content:flex-start}.modes button{white-space:nowrap;font-size:11px;letter-spacing:1px;padding:10px 12px;color:#a3a2a0;font-weight:700}.modes button.active{color:var(--accent);border-bottom:2px solid var(--accent)}.capture-row{display:flex;justify-content:space-around;align-items:center;padding:12px 0 5px}#shutter{height:76px;width:76px;border:3px solid #eee;border-radius:50%;padding:5px;display:grid;place-items:center}#shutter span{display:block;background:#f5f3ed;border-radius:50%;width:58px;height:58px;transition:.2s}#shutter.recording span{background:#f45155;width:27px;height:27px;border-radius:6px}.round{width:48px;height:48px;border-radius:50%;font-size:24px}.secondary{background:#303237}.hint{text-align:center;color:#898d90;font-size:11px;margin-top:10px}.film-panel,.tool-panel{padding:22px 16px;border-top:1px solid #333}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:17px}.eyebrow{font-size:10px;color:var(--accent);letter-spacing:2px;font-weight:700}.section-title h2{margin:6px 0 0;font-size:22px;letter-spacing:-.6px}.section-title button{color:var(--accent);font-size:12px}.film-list{display:flex;gap:9px;overflow-x:auto;padding-bottom:12px;scrollbar-width:thin}.film-item{min-width:92px;width:92px;text-align:left;padding:0 0 8px;border:1px solid #333;border-radius:10px;overflow:hidden;background:#232528}.film-item.active{border:2px solid var(--accent)}.film-thumb{display:block;height:76px;background-size:cover;background-position:center}.film-item span:last-child{display:block;font-size:11px;font-weight:650;padding:8px 5px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selected-film{display:flex;justify-content:space-between;align-items:center;background:#222427;border:1px solid #36383b;border-radius:10px;padding:13px}.selected-film strong,.selected-film small{display:block}.selected-film small{color:var(--muted);font-size:11px;margin-top:5px}.selected-film button{color:var(--accent);font-size:12px}.selected-film button span{margin-left:5px}.tool-tabs{display:flex;border-bottom:1px solid #383b3e;overflow:auto;gap:3px}.tool-tabs button{padding:12px 14px;font-size:12px;color:#aaa}.tool-tabs button.active{color:var(--accent);border-bottom:2px solid var(--accent)}.tab-content{padding:20px 0}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}.control-grid label,.tab-content>label,#sliders label{display:block;font-size:12px;color:#d4d0c8}.control-grid output,#sliders output{float:right;color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent);margin:13px 0 0}input[type=text],input:not([type]),select{background:#2b2d31;color:#fff;border:1px solid #45474a;padding:10px;border-radius:7px;width:100%;margin-top:8px}input[type=color]{background:transparent;border:0;height:40px;width:100%}.button-line{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.button-line button,.chip{background:#303236;border-radius:8px;padding:11px 14px;font-size:12px}.chip.active{color:var(--accent);border:1px solid var(--accent)}.fineprint{font-size:11px;color:#9c9b98;line-height:1.6}.select-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:15px}.select-row label{font-size:12px;color:#ccc}.check{margin-top:15px;display:flex!important;gap:8px;align-items:center}.check input{accent-color:var(--accent)}#filmControls{padding:16px 0}#sliders{display:grid;grid-template-columns:1fr 1fr;gap:16px}footer{text-align:center;font-size:9px;color:#777;letter-spacing:1.3px;padding:25px 8px 40px}footer span{color:var(--accent)}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#efc18e;color:#171717;border-radius:12px;padding:13px 20px;max-width:92vw;font-size:13px;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}#editor{position:fixed;inset:0;z-index:50;background:#111;display:flex;flex-direction:column}.editor-top,.editor-bottom{display:flex;justify-content:space-between;align-items:center;padding:15px;gap:12px}.editor-top button{background:#303236;padding:9px 13px;border-radius:7px}.editor-image-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:10px;overflow:hidden}#editorCanvas{max-width:100%;max-height:100%;object-fit:contain;touch-action:none}.editor-bottom{padding-bottom:max(18px,env(safe-area-inset-bottom))}.editor-bottom span{font-size:11px;color:#aaa}#settingsBtn.active{color:var(--accent)}@media(max-width:370px){.control-grid,#sliders{grid-template-columns:1fr}.brand strong{font-size:13px}}@media(min-width:740px){#viewfinder{max-height:75vh;aspect-ratio:4/3}}

/* v0.2: accessible safe areas, film picker overlay, and explicit export choices */
header{height:auto;min-height:72px;padding-top:calc(13px + env(safe-area-inset-top, 0px));position:relative;z-index:4}header button{touch-action:manipulation;min-width:44px;min-height:44px}#filmToggle{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:5;background:rgba(12,13,15,.88);border:1px solid #ffffff50;border-radius:22px;padding:11px 16px;color:#f5b978;font-size:12px;font-weight:750;white-space:nowrap;backdrop-filter:blur(12px)}#filmSheet{position:absolute;left:8px;right:8px;bottom:58px;z-index:6;max-height:min(56vh,440px);overflow-y:auto;overscroll-behavior:contain;background:rgba(21,22,25,.96);border:1px solid #ffffff3d;border-radius:16px;box-shadow:0 12px 40px #0009;backdrop-filter:blur(16px)}#filmSheet .film-panel{border:0;padding:16px 12px}#filmSheet .section-title h2{font-size:19px}#filmSheet .film-list{padding-bottom:10px}#filmSheet #filmControls{max-height:220px;overflow:auto}#editor{height:100dvh;overflow:hidden}.editor-top{padding-top:calc(12px + env(safe-area-inset-top, 0px));flex-shrink:0}.editor-top button{min-height:44px}.editor-bottom{display:flex;flex-direction:column;align-items:stretch;flex-shrink:0;padding:12px 14px max(16px,env(safe-area-inset-bottom,0px));gap:10px}.editor-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px}.editor-buttons button{min-height:46px;border-radius:9px;background:#33363b;padding:9px 10px;font-size:13px;font-weight:700}.editor-buttons #editorShare{grid-column:1/3;background:#f5b978;color:#171717}.editor-buttons #editorDismiss{grid-column:1/3;background:#25272b}.editor-image-wrap{padding:6px 10px;min-height:0}#editorCanvas{max-height:100%;width:auto}#status{top:10px}@media(max-width:420px){.brand small{font-size:8px;letter-spacing:1.2px}.brand strong{font-size:14px}}

/* v0.4 compact immersive camera */
html,body{width:100%;overflow-x:hidden}body{overscroll-behavior-y:none}#app{max-width:none;min-height:100dvh}main{width:100%}
header{position:absolute;top:0;left:0;right:0;z-index:15;background:linear-gradient(#0009,#0000);padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 14px;pointer-events:none}
header .brand,header .header-actions{pointer-events:auto}.brand small{display:none}.brand strong{font-size:13px;text-shadow:0 2px 8px #000}.mark{font-size:23px}.header-actions button{background:#0008;backdrop-filter:blur(15px);border:1px solid #ffffff36;width:44px;height:44px}
#viewfinder{width:100%;height:calc(100dvh - 196px - env(safe-area-inset-bottom,0px));min-height:300px;aspect-ratio:auto;max-height:none;background:#050506}
#camera,#preview{object-fit:contain}#status{top:calc(env(safe-area-inset-top,0px) + 80px);left:12px;right:12px;font-size:10px}#status span{border-radius:18px;background:#0007;backdrop-filter:blur(8px)}#exposureInfo{bottom:58px}
#filmToggle{bottom:13px;left:50%;min-width:158px;max-width:90vw;border-radius:26px;background:#000a;color:#fff;padding:12px 17px;box-shadow:0 3px 16px #0006}#filmChevron,#editorChevron{color:var(--accent);margin-left:9px;font-size:16px}
#filmSheet{bottom:66px;left:8px;right:8px;max-height:min(49dvh,380px);background:#151719ed;border-radius:20px;padding:4px;z-index:10}#filmSheet .film-panel{padding:12px}#filmSheet .section-title{margin-bottom:8px}#filmSheet .section-title h2{font-size:16px}#filmSheet .eyebrow{font-size:9px}#filmSheet .film-thumb{height:57px}#filmSheet .film-item{min-width:83px;width:83px}#filmSheet .selected-film{padding:9px}#filmSheet #filmControls{max-height:135px}
.capture-bar{height:calc(196px + env(safe-area-inset-bottom,0px));padding:10px 12px max(8px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;justify-content:space-between;background:#141518}.mode-heading{text-align:center;font-size:9px;letter-spacing:2px;color:#888}.modes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;overflow:visible}.modes button{font-size:clamp(8px,2.4vw,11px);letter-spacing:0;padding:11px 1px;white-space:normal;min-width:0;border-radius:8px}.modes button.active{background:#f5b97818;border:1px solid #f5b97860}.capture-row{padding:2px 0}.capture-row .round{width:46px;height:46px;background:#292c30;border:1px solid #ffffff22}#shutter{height:67px;width:67px}#shutter span{height:51px;width:51px}.hint{margin:0;font-size:10px;min-height:14px}
#settingsShade{position:fixed;inset:0;z-index:25;background:#0009;backdrop-filter:blur(5px)}#settingsPanel{position:fixed;z-index:26;top:0;right:0;bottom:0;width:min(100%,520px);overflow-y:auto;background:#191b1f;box-shadow:-8px 0 35px #0009;padding:calc(env(safe-area-inset-top,0px) + 18px) 17px max(24px,env(safe-area-inset-bottom,0px));transform:translateX(110%);transition:transform .22s ease;border:0}#settingsPanel.open{transform:translateX(0)}.settings-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid #333}.settings-head strong{font-size:16px;letter-spacing:1px}.settings-head small{display:block;color:#999;font-size:10px;margin-top:5px;letter-spacing:1px}.settings-head button{background:#333;border-radius:50%;width:44px;height:44px;font-size:19px}.tool-panel>.section-title{margin-top:24px}
#editor{z-index:30}#editor .editor-top{padding-top:calc(env(safe-area-inset-top,0px) + 10px)}.editor-top small{color:#888;font-size:10px}.editor-image-wrap{position:relative;padding:0;overflow:hidden;background:#08090a}#editorCanvas{width:100%;height:100%;object-fit:contain}#editorFilmToggle{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:3;background:#000b;border:1px solid #ffffff44;backdrop-filter:blur(12px);padding:11px 16px;border-radius:24px;white-space:nowrap}#editorFilmSheet{position:absolute;bottom:65px;left:8px;right:8px;z-index:4;max-height:min(43dvh,370px);overflow:auto;background:#191a1def;border:1px solid #ffffff36;border-radius:18px;backdrop-filter:blur(16px)}#editorFilmSheet .film-panel{padding:12px;border:0}#editorFilmSheet .film-thumb{height:54px}#editorFilmSheet .film-item{min-width:82px;width:82px}#editorFilmSheet .section-title h2{font-size:17px}#editorFilmSheet .section-title{margin-bottom:8px}#editorFilmSheet #filmControls{max-height:135px;overflow:auto}
.editor-bottom{padding:9px 12px max(10px,env(safe-area-inset-bottom,0px));gap:6px}.editor-buttons{gap:6px}.editor-buttons button{min-height:40px;font-size:11px;padding:7px 5px}.editor-buttons #editorShare,.editor-buttons #editorShareOriginal{grid-column:auto;background:#f5b978;color:#171717}.editor-buttons #editorDismiss{grid-column:1/3;min-height:34px}.editor-bottom span{font-size:10px}
@media(min-width:740px){#viewfinder{max-height:none;aspect-ratio:auto}#app{max-width:740px;position:relative;margin:auto}header{max-width:740px;margin:auto}}

/* v0.5 — iPhone safe-area and no-scroll camera layout */
:root{--safe-top:env(safe-area-inset-top, 0px);--safe-bottom:env(safe-area-inset-bottom, 0px);--camera-bottom:190px}
html,body{height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;width:100%;touch-action:pan-x pan-y}
#app{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative}
main{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
header{position:absolute;z-index:22;top:var(--safe-top);left:0;right:0;height:60px;min-height:60px;padding:6px 14px;display:flex;align-items:center;background:linear-gradient(#050608cc,#05060800);pointer-events:none}
header .brand,header .header-actions{pointer-events:auto}
.header-actions{position:relative;z-index:23}
.header-actions button{min-width:48px;min-height:48px;touch-action:manipulation;position:relative;z-index:24}
#viewfinder{flex:1 1 auto;min-height:0!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;margin-top:var(--safe-top);overflow:hidden}
#status{top:74px}
#filmToggle{z-index:18;bottom:12px;min-height:46px;touch-action:manipulation;border:1px solid #ffffff80;background:#0b0c0de8;box-shadow:0 4px 18px #000a}
#filmSheet{z-index:19;bottom:70px;max-height:min(54dvh,460px);overflow-y:auto;overscroll-behavior:contain}
.film-close{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 14px;color:#f7e6d4;font-size:13px;font-weight:700;position:sticky;top:0;z-index:3;background:#202124;border-radius:14px 14px 0 0;min-height:46px}
.film-close span{color:var(--accent)}
.capture-bar{flex:0 0 auto;height:calc(var(--camera-bottom) + var(--safe-bottom));padding:8px 12px max(10px,var(--safe-bottom));position:relative;z-index:4;overflow:hidden}
.capture-bar .mode-heading{display:none}
.modes{flex:0 0 40px;align-items:center}
.modes button{min-height:40px;touch-action:manipulation}
.capture-row{flex:1 1 auto;min-height:68px;display:flex;align-items:center}
#shutter{flex:0 0 67px}
.hint{flex:0 0 18px}
#settingsPanel{z-index:45;top:0;padding-top:calc(var(--safe-top) + 66px);overscroll-behavior:contain;touch-action:pan-y}
#settingsShade{z-index:44}
.settings-head{position:relative}
.settings-head button{touch-action:manipulation;min-width:48px;min-height:48px}
#editor{z-index:55}
#editor .editor-top{padding-top:calc(var(--safe-top) + 12px)}
#toast{z-index:90;bottom:calc(var(--safe-bottom) + 18px)}
footer{display:none}
@media (max-height:680px){:root{--camera-bottom:160px}.capture-bar .hint{display:none}.capture-row{min-height:66px}}


/* v0.6: immersive, one-screen camera */
:root { --camera-bottom: 172px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
html,body { margin:0; width:100%; height:100%; overflow:hidden; overscroll-behavior:none; background:#000; }
#app { width:100%; max-width:none; height:100dvh; display:flex; flex-direction:column; position:relative; background:#000; overflow:hidden; }
main { flex:1; min-height:0; display:flex; flex-direction:column; }
header { top:var(--safe-top); height:58px; min-height:58px; padding:6px 16px; background:linear-gradient(#000b,#0000); z-index:35; }
header .brand { display:none; }
header .header-actions { margin-left:auto; }
header .header-actions button { border-radius:50%; background:#0008; border:1px solid #fff3; width:46px; height:46px; font-size:21px; }
#viewfinder { flex:1 1 auto; min-height:0!important; height:auto!important; max-height:none!important; margin-top:calc(var(--safe-top) + 58px); width:100%; aspect-ratio:auto!important; background:#080808; overflow:hidden; }
#camera,#preview { object-fit:contain; width:100%; height:100%; }
#status { top:10px; left:12px; right:12px; z-index:3; }
#status span { background:#0007; border-radius:20px; padding:7px 11px; font-size:10px; }
#filmToggle { bottom:60px; left:50%; min-height:44px; background:#090909a8; border:1px solid #ffffff75; color:#f5c179; border-radius:24px; z-index:12; backdrop-filter:blur(14px); }
#filmSheet { bottom:112px; max-height:min(50dvh,410px); z-index:13; background:#121316f2; }
#zoomQuick { position:absolute; bottom:9px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:4px; z-index:10; padding:4px; border-radius:28px; background:#0008; backdrop-filter:blur(12px); }
#zoomQuick button { width:42px; height:38px; border-radius:50%; color:#eee; font-size:13px; }
#zoomQuick button.active { background:#4b4e51; color:#f6c06e; font-weight:700; }
.capture-bar { flex:0 0 auto; height:calc(var(--camera-bottom) + var(--safe-bottom)); padding:8px 14px max(10px,var(--safe-bottom)); display:flex; flex-direction:column; justify-content:space-between; background:#070707; border:0; overflow:hidden; z-index:4; }
.capture-bar .capture-row { order:1; flex:1 1 auto; min-height:78px; padding:0 6px; justify-content:space-between; }
.capture-bar .modes { order:2; flex:0 0 44px; display:flex; justify-content:center; gap:0; overflow-x:auto; width:100%; border-radius:26px; background:#171719; }
.modes button { padding:9px 13px; font-size:11px; border-radius:24px; border:0!important; }
.modes button.active { color:#f5c35c; background:#2b2b2e; }
#shutter { height:78px; width:78px; border:3px solid #777; background:#171717; padding:6px; }
#shutter span { width:58px; height:58px; background:white; }
.round.secondary { background:#242426; width:52px; height:52px; border-radius:50%; }
.capture-bar .hint,.capture-bar .mode-heading { display:none!important; }
#settingsPanel { z-index:60; padding-top:calc(var(--safe-top) + 24px); background:#17181b; }
#settingsShade { z-index:55; }
#editor { z-index:70; }
footer { display:none; }
@media (max-height:750px) { :root { --camera-bottom:150px; } #filmToggle { bottom:54px; } #filmSheet { bottom:104px; } #shutter { height:70px;width:70px; } #shutter span { width:51px;height:51px; } }

/* v0.7: film control lives alongside camera switch and settings, not on viewfinder. */
header { overflow:visible; }
header .header-actions { display:flex; gap:7px; align-items:center; pointer-events:auto; }
header .header-actions #filmToggle { position:static!important; transform:none!important; inset:auto!important; width:auto; min-width:0; max-width:min(42vw,175px); height:46px; padding:0 12px; margin:0; display:flex; align-items:center; justify-content:center; gap:4px; overflow:hidden; white-space:nowrap; font-size:11px; border-radius:24px; background:#171819d9; border:1px solid #ffffff55; color:#f5c179; z-index:auto; }
#filmQuickName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:80px; }
header #filmSheet { position:absolute!important; top:calc(100% + 6px)!important; bottom:auto!important; left:12px!important; right:12px!important; width:auto; max-height:min(55dvh,420px); z-index:45; overflow-y:auto; pointer-events:auto; border:1px solid #ffffff44; box-shadow:0 14px 40px #000d; }
#filmSheet .film-panel { padding:12px; }
#filmSheet .film-list { scroll-snap-type:x proximity; }
#filmSheet .film-item { scroll-snap-align:start; }
#viewfinder { margin-top:calc(var(--safe-top) + 58px); }
#zoomQuick { bottom:12px; }
@media(max-width:380px){header .header-actions{gap:5px}header .header-actions #filmToggle{padding:0 8px;max-width:40vw}header .header-actions button:not(#filmToggle){width:43px;min-width:43px;height:43px;min-height:43px}}

/* v0.8 hybrid: clear, reachable system-camera and Photos actions */
.capture-bar .capture-row{align-items:center;gap:10px;}
#libraryBtn,#nativeBtn{font-size:24px;flex-shrink:0;min-width:54px;min-height:54px;touch-action:manipulation;}
.capture-source{background:#232428;border:1px solid #ffffff24;padding:14px;border-radius:13px;margin-bottom:18px;}
.capture-source p{font-size:12px;line-height:1.5;color:#b8b8bd;margin:7px 0 12px;}
.capture-source .button-line{display:flex;gap:8px;flex-wrap:wrap;}
.capture-source button{min-height:44px;border:1px solid #ffffff40;border-radius:10px;padding:8px 12px;background:#33363b;color:#fff;}

/* v1.1: compact top-mounted film selection on photo review */
#editor { position:fixed; isolation:isolate; }
#editor .editor-top { position:relative; z-index:12; display:flex; align-items:center; min-height:65px; gap:8px; padding-left:14px; padding-right:14px; background:#111214; }
#editor .editor-top>strong { white-space:nowrap; font-size:14px; }
#editor .editor-top-actions { display:flex; gap:7px; align-items:center; margin-left:auto; min-width:0; }
#editor #editorFilmToggle { position:static!important; transform:none!important; inset:auto!important; display:flex; align-items:center; justify-content:center; gap:5px; min-width:0; max-width:min(48vw,210px); padding:10px 12px; background:#2b2c2f; border:1px solid #55575a; border-radius:23px; font-size:12px; font-weight:650; color:#f4d1a1; white-space:nowrap; }
#editor #editorFilmName { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#editor #editorChevron { margin-left:2px; flex-shrink:0; }
#editor #editorClose { padding:10px; min-height:43px; white-space:nowrap; font-size:12px; }
#editor #editorFilmSheet { position:absolute!important; top:calc(env(safe-area-inset-top,0px) + 67px)!important; bottom:auto!important; left:9px!important; right:9px!important; z-index:13!important; max-height:min(37dvh,270px)!important; overflow:auto; border-radius:14px; background:#191a1ef7; box-shadow:0 15px 45px #000b; }
#editorFilmSheet .film-panel { padding:10px!important; }
#editorFilmSheet .section-title { margin-bottom:7px!important; }
#editorFilmSheet .section-title h2 { font-size:14px!important; margin:3px 0 0; }
#editorFilmSheet .eyebrow { font-size:8px; }
#editorFilmSheet .film-list { gap:5px; padding-bottom:7px; }
#editorFilmSheet .film-item { min-width:61px!important; width:61px!important; border-radius:7px; padding-bottom:4px; }
#editorFilmSheet .film-thumb { height:39px!important; }
#editorFilmSheet .film-item span:last-child { font-size:9px; padding:5px 4px 0; }
#editorFilmSheet .selected-film { padding:7px 9px; gap:8px; }
#editorFilmSheet .selected-film strong { font-size:11px; }
#editorFilmSheet .selected-film small { font-size:9px; margin-top:2px; }
#editorFilmSheet #filmControls { max-height:120px; }
#editor .editor-image-wrap { flex:1; min-height:0; }
@media(max-width:390px) { #editor .editor-top>strong { font-size:12px; } #editor #editorFilmToggle { max-width:43vw; padding:9px 8px; } #editor #editorClose { font-size:11px; padding:9px 7px; } }

/* v1.2: allow every film preset to be reached by horizontal swiping */
#editorFilmSheet .film-panel {min-width:0;max-width:100%;overflow:hidden;}
#editorFilmSheet .film-list {display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:stretch;gap:7px!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;touch-action:pan-x;overscroll-behavior-x:contain;padding:4px 4px 13px!important;scrollbar-width:thin;}
#editorFilmSheet .film-item {display:flex!important;flex-direction:column;flex:0 0 76px!important;min-width:76px!important;width:76px!important;max-width:76px!important;overflow:hidden;scroll-snap-align:start;}
#editorFilmSheet .film-item .film-thumb {display:block;width:100%;height:44px!important;flex-shrink:0;}
#editorFilmSheet .film-item span:last-child {display:block;max-width:100%;white-space:normal!important;overflow-wrap:anywhere;line-height:1.15;min-height:24px;padding:5px 4px!important;font-size:10px!important;}
#editorFilmSheet {overflow-x:hidden!important;}
#editorFilmSheet .selected-film {margin-top:3px;}

/* v1.3: fully visible four-column film gallery; vertical scrolling is intentional. */
#editorFilmSheet{left:10px!important;right:10px!important;width:auto!important;max-width:none!important;overflow-y:auto!important;overflow-x:hidden!important;max-height:min(48dvh,450px)!important;box-sizing:border-box;}
#editorFilmSheet .film-panel{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;overflow:visible!important;padding:12px!important;}
#editorFilmSheet .film-list,#editorFilmSheet #films{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important;width:100%!important;max-width:100%!important;min-width:0!important;max-height:min(28dvh,270px)!important;overflow-x:hidden!important;overflow-y:auto!important;scroll-snap-type:none!important;padding:2px 2px 8px!important;box-sizing:border-box!important;touch-action:pan-y!important;}
#editorFilmSheet .film-item{display:flex!important;flex-direction:column!important;min-width:0!important;width:100%!important;max-width:100%!important;flex:initial!important;box-sizing:border-box!important;overflow:hidden!important;}
#editorFilmSheet .film-item .film-thumb{height:42px!important;width:100%!important;}
#editorFilmSheet .film-item span:last-child{font-size:10px!important;line-height:1.2!important;white-space:normal!important;overflow-wrap:anywhere!important;min-height:25px!important;}
#editorFilmSheet .selected-film{margin-top:8px!important;}
#editor .editor-buttons #editorShare{grid-column:auto!important;}
#editor .editor-buttons #editorShareOriginal{grid-column:auto!important;}
#editor .editor-bottom{padding-bottom:max(12px,env(safe-area-inset-bottom,0px))!important;}