/* Phone-first product story: every landing-page image shows a real ROLLI step on a phone. */
.rolli-featured .feature-art.phone-story-stage{position:relative;display:flex;min-height:650px;flex-direction:column;justify-content:center;gap:20px;overflow:hidden;padding:25px 20px 18px;border:1px solid #536078;background:radial-gradient(ellipse at 52% 38%,#39465e 0,#222d42 44%,#151b27 100%);box-shadow:0 26px 72px #19243a2b}
.rolli-featured .feature-art.phone-story-stage>*{display:flex!important}
.rolli-featured .feature-copy h1{font-size:clamp(44px,4.1vw,60px);letter-spacing:-.065em}
.phone-stage-heading{display:flex;flex-direction:column;gap:6px;align-items:center;color:#fff;text-align:center}.phone-stage-heading span{color:#ffd276;font-size:9px;font-weight:850;letter-spacing:.17em}.phone-stage-heading b{font:650 clamp(18px,2vw,27px)/1.1 Georgia,serif;letter-spacing:-.025em}.phone-stage-devices{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.5vw,20px);width:100%;min-width:0}
.story-device{display:flex;min-width:0;flex:1;flex-direction:column;align-items:center;gap:9px}.story-device-shell,.film-preview-shell,.film-host-shell,.cta-phone-shell{position:relative;isolation:isolate;width:100%;aspect-ratio:.505;padding:6px;overflow:hidden;border:1px solid #657085;border-radius:34px;background:linear-gradient(145deg,#465269,#07090d 40%);box-shadow:0 18px 34px #080b13a8,inset 0 0 0 2px #111722}.story-screen,.film-preview-screen,.film-host-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:28px;background:#fffaf3}.story-island{position:absolute;z-index:5;top:8px;left:50%;width:30%;height:13px;transform:translateX(-50%);border-radius:999px;background:#07090c}.story-status{position:relative;z-index:3;display:flex;height:28px;align-items:center;justify-content:space-between;padding:7px 11px 0;color:#29334a;font:750 8px/1 system-ui,sans-serif}.story-status-light{color:#fff;text-shadow:0 1px 3px #0008}.story-browser{display:flex;height:25px;align-items:center;justify-content:space-between;padding:0 10px;border-bottom:1px solid #e7e1d8;color:#31415e;font-size:8px}.story-cover{display:block;width:100%;height:34%;object-fit:cover}.story-screen-copy{display:flex;flex-direction:column;gap:5px;padding:9px 11px;color:#27344c}.story-screen-copy>small:first-child{color:#bd4943;font-size:7px;font-weight:900;letter-spacing:.13em}.story-screen-copy>strong{font:700 18px/.98 Georgia,serif;letter-spacing:-.04em}.story-screen-copy>span{color:#687185;font-size:8px}.story-qr-link{display:flex;flex-direction:column;gap:3px;margin-top:4px;padding:8px;border-radius:10px;background:#fbe8bc}.story-qr-link b{color:#253650;font-size:9px}.story-qr-link span{color:#775b32;font-size:7px}.story-screen-copy .story-no-app{align-self:center;color:#637085;font-size:7px}
.story-live-view{position:absolute;inset:0;overflow:hidden;border-radius:28px;background:#151923}.story-live-view>img{width:100%;height:100%;object-fit:cover}.story-live-brand{position:absolute;top:35px;left:10px;color:#fff;font-size:10px;font-weight:900;text-shadow:0 2px 6px #0008}.story-live-brand b{color:#ffdf8e;font-size:7px;letter-spacing:.08em}.story-live-count{position:absolute;top:34px;right:9px;padding:6px 7px;border:1px solid #ffffff66;border-radius:9px;background:#1118279c;color:#fff;font-size:12px;font-weight:900}.story-live-count small{font-size:6px}.story-live-film{position:absolute;right:9px;bottom:52px;left:9px;color:#fff;font-size:7px;font-weight:800;letter-spacing:.08em;text-shadow:0 1px 5px #000}.story-camera-controls{position:absolute;right:0;bottom:0;left:0;display:flex;height:48px;align-items:center;justify-content:space-around;background:#10141dd9;color:#fff;font-size:14px}.story-camera-controls i,.film-preview-controls i{width:30px;height:30px;border:3px solid #fff;border-radius:50%;background:#f5bf59;box-shadow:inset 0 0 0 3px #151922}
.story-device-label{color:#e8ebf1;font-size:8px;font-weight:850;letter-spacing:.12em;text-align:center}.story-album-head{display:flex;flex-direction:column;gap:5px;padding:9px 10px 8px;color:#27344c}.story-album-head small{color:#b54443;font-size:6px;font-weight:900;letter-spacing:.1em}.story-album-head b{font:700 16px/.98 Georgia,serif}.story-album-head span{color:#687185;font-size:7px}.story-album-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 8px}.story-album-grid img{width:100%;aspect-ratio:.9;object-fit:cover;border-radius:7px}.story-album-share{display:block;margin:8px;padding:7px;border-radius:9px;background:#f8e4bd;color:#714b30;font-size:7px;font-weight:800;text-align:center}.phone-stage-footnote{margin:0;color:#c5cad4;font-size:8px;line-height:1.45;text-align:center}
.rolli-film-gallery .film-roll-showcase{max-width:1320px;margin:0 auto 22px;overflow:hidden;border:1px solid #3b4659;border-radius:26px;background:#182236;box-shadow:0 20px 45px #182a4020}.film-host-preview{display:flex;min-height:340px;align-items:center;justify-content:center;gap:clamp(25px,7vw,100px);padding:26px;background:radial-gradient(ellipse at 43% 34%,#43516c,#202b40 65%,#182236)}.film-host-device{width:clamp(155px,20vw,218px);flex:none}.film-host-shell{border-color:#596780}.film-host-screen{display:flex;flex-direction:column;padding:0 10px 10px;color:#26344c}.film-host-screen>small{margin-top:17px;color:#bc4943;font-size:6px;font-weight:900;letter-spacing:.12em}.film-host-screen>strong{margin-top:6px;font:700 16px/.98 Georgia,serif;letter-spacing:-.035em}.film-host-sub{margin-top:4px;color:#687185;font-size:7px}.film-host-photo{position:relative;flex:1;min-height:0;margin-top:9px;overflow:hidden;border-radius:10px}.film-host-photo img{width:100%;height:100%;object-fit:cover}.film-host-photo span{position:absolute;right:6px;bottom:6px;left:6px;padding:5px;border:1px solid #ffffff72;border-radius:7px;background:#151d2bbd;color:#fff;font-size:6px;font-weight:850;text-align:center}.film-host-presets{display:flex;justify-content:space-between;gap:2px;margin:8px 0}.film-host-presets i{display:grid;width:25px;height:25px;place-items:center;border:1px solid #e4dfd5;border-radius:50%;background:#f7f3eb;color:#46516a;font-size:5px;font-style:normal;font-weight:900}.film-host-presets .preset-active{border-color:#eab854;background:#ffdf8c;color:#382a1e}.film-host-button{display:block;padding:7px;border-radius:9px;background:#ef4d55;color:#fff;font-size:7px;font-weight:850;text-align:center}.film-host-copy{display:flex;max-width:370px;flex-direction:column;gap:10px;color:#fff}.film-host-copy span{color:#ffd276;font-size:9px;font-weight:900;letter-spacing:.15em}.film-host-copy b{font:650 clamp(24px,3.5vw,43px)/1.02 Georgia,serif;letter-spacing:-.045em}.film-host-copy small{max-width:270px;color:#d1d7e1;font-size:12px;line-height:1.6}.rolli-film-gallery .film-roll-showcase figcaption{display:flex;gap:9px;padding:12px;background:#fffaf3;color:#46536a;font-size:11px}.rolli-film-gallery .film-roll-showcase figcaption span{color:#be4943;font-weight:900}.rolli-film-gallery .film-roll-showcase figcaption b{color:#be4943}
.rolli-film-gallery .film-look-card{align-items:center;padding:14px 11px 12px;background:#fff;border:1px solid #e5dccf;border-radius:21px;box-shadow:0 11px 28px #1a28420d}.film-preview-device{width:min(100%,168px);margin:0 auto}.film-preview-shell{padding:5px;border-radius:27px;box-shadow:0 11px 22px #10172634}.film-preview-screen{border-radius:22px;background:#10141d}.film-preview-image{position:absolute;inset:0;overflow:hidden;border-radius:22px}.film-preview-image img{width:100%;height:100%;object-fit:cover}.film-preview-image:after{position:absolute;inset:0;content:"";background:linear-gradient(180deg,#08111b1c,#08111b05 44%,#08111b9c)}.film-preview-image>b,.film-preview-image>small{position:absolute;z-index:2;left:9px;color:#fff;text-shadow:0 1px 5px #000b}.film-preview-image>b{bottom:49px;font-size:8px;font-weight:900;letter-spacing:.07em}.film-preview-image>small{top:37px;font-size:6px;font-weight:800}.film-preview-controls{position:absolute;z-index:3;right:0;bottom:0;left:0;display:flex;height:42px;align-items:center;justify-content:space-around;background:#111722df;color:#fff;font-size:11px}.film-preview-controls i{width:25px;height:25px;border-width:2px;box-shadow:inset 0 0 0 2px #151922}.rolli-film-gallery .film-look-card>div:last-child:not(.film-preview-device){align-self:stretch;margin:11px 0 0;padding:10px 8px;border:1px solid #f0eee8;border-radius:12px;background:#fffdf8;text-align:center}.rolli-film-gallery .film-look-card strong{color:#202e46;font-size:13px}.rolli-film-gallery .film-look-card small{color:#657286;font-size:9px}
.film-look-card.fl-one{--film-accent:#ffc75b}.film-look-card.fl-two{--film-accent:#f3a7c2}.film-look-card.fl-three{--film-accent:#f09a68}.film-look-card.fl-four{--film-accent:#849bf2}.film-look-card.fl-five{--film-accent:#8c909b}.film-look-card .film-preview-shell{outline:2px solid color-mix(in srgb,var(--film-accent),transparent 48%)}
.rolli-last-cta{display:grid;grid-template-columns:minmax(130px,.42fr) minmax(0,1fr) auto;align-items:center;gap:clamp(20px,4vw,52px)}.rolli-last-cta h2{color:#fffaf1}.rolli-last-cta p{color:#e8dfe2}.cta-phone-preview{display:flex;justify-content:center}.cta-phone-shell{width:min(100%,142px);padding:5px;border-radius:25px;background:#0d1016;box-shadow:0 15px 30px #090c13a1}.cta-phone-shell img{display:block;width:100%;height:100%;object-fit:cover;border-radius:20px}.cta-phone-shell>span{position:absolute;right:7px;bottom:9px;left:7px;padding:5px 4px;border:1px solid #ffffff69;border-radius:7px;background:#151b26bc;color:#fff;font-size:5px;font-weight:900;letter-spacing:.06em;text-align:center}
@media(max-width:1000px){.rolli-featured .feature-art.phone-story-stage{min-height:570px;padding:20px 13px 15px}.story-device-shell{border-radius:29px}.story-screen,.film-preview-screen{border-radius:23px}.phone-stage-devices{gap:8px}.story-device-label{font-size:7px}.rolli-film-gallery .film-look-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.film-preview-device{width:min(100%,153px)}}
@media(max-width:800px){.rolli-featured .feature-art.phone-story-stage{width:min(calc(100% - 24px),690px);min-height:500px;margin:0 auto;border-radius:24px}.phone-stage-devices{justify-content:flex-start;overflow-x:auto;overscroll-behavior-inline:contain;padding:4px 4px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.story-device{width:205px;min-width:205px;flex:none;scroll-snap-align:center}.story-device.story-camera{width:220px;min-width:220px}.story-device-shell{max-width:220px}.story-device-label{font-size:8px}.phone-stage-heading b{font-size:24px}.film-host-preview{min-height:300px;gap:30px;padding:22px}.film-host-device{width:185px}.rolli-film-gallery .film-look-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rolli-film-gallery .film-look-card{min-height:0}.film-preview-device{width:min(100%,170px)}}
@media(max-width:600px){.rolli-featured .feature-art.phone-story-stage{width:calc(100% - 20px);min-height:485px;padding:18px 12px 14px}.phone-stage-heading{align-items:flex-start;padding-left:9px;text-align:left}.phone-stage-heading b{font-size:23px}.phone-stage-devices{gap:11px}.story-device{width:175px;min-width:175px}.story-device.story-camera{width:202px;min-width:202px}.story-device-shell{border-radius:30px}.phone-stage-footnote{font-size:7px}.film-host-preview{min-height:0;flex-direction:column;gap:16px;padding:20px 15px}.film-host-device{width:177px}.film-host-shell{border-radius:30px}.film-host-copy{align-items:center;text-align:center}.film-host-copy b{font-size:27px}.film-host-copy small{font-size:11px}.rolli-film-gallery .film-roll-showcase figcaption{flex-wrap:wrap;justify-content:center;text-align:center}.rolli-film-gallery .film-look-grid{display:flex;overflow-x:auto;gap:12px;padding:3px 2px 14px;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}.rolli-film-gallery .film-look-card{width:70vw;min-width:70vw;max-width:270px;flex:none;scroll-snap-align:start}.film-preview-device{width:min(100%,180px)}.rolli-last-cta{grid-template-columns:92px minmax(0,1fr);gap:13px;padding:22px}.cta-phone-shell{width:82px}.rolli-last-cta>.btn{grid-column:1/-1;width:100%}}
@media(max-width:420px){.story-device{width:160px;min-width:160px}.story-device.story-camera{width:188px;min-width:188px}.story-screen-copy>strong{font-size:16px}.story-album-head b{font-size:14px}.rolli-film-gallery .film-look-card{width:74vw;min-width:74vw}}
@media(prefers-reduced-motion:reduce){.story-device,.film-preview-device,.cta-phone-preview{scroll-behavior:auto;transition:none}}
/* ROLLI MOBILE MOCKUP V1 */
@media (max-width:600px){body.rolli-camera-mode{background:#0d1422;color:#f8f5ef}body.rolli-camera-mode .scrapbook-workspace{padding:calc(8px + env(safe-area-inset-top,0px)) 12px calc(28px + env(safe-area-inset-bottom,0px))}body.rolli-camera-mode .scrapbook-workspace .crumb,body.rolli-camera-mode .scrapbook-workspace .work-title,body.rolli-camera-mode .scrapbook-workspace .work-sub{display:none}body.rolli-camera-mode .scrapbook-camera{padding:0;border:0;border-radius:28px;background:#121a28;box-shadow:0 20px 50px #0007;overflow:hidden}body.rolli-camera-mode .scrapbook-camera .camera-head{position:relative;top:auto;left:auto;right:auto;padding:14px 14px 10px;gap:8px}body.rolli-camera-mode .scrapbook-camera .camera-head span{padding:8px 10px;font-size:10px!important;background:#222b3a;border-color:#ffffff1c}body.rolli-camera-mode .scrapbook-camera .viewfinder{height:66svh;min-height:390px;border-radius:22px;margin:0 8px;background:#1a2230}body.rolli-camera-mode .scrapbook-camera .camera-tools{grid-template-columns:1fr 78px 1fr;gap:8px;margin:0;padding:15px 12px 8px}body.rolli-camera-mode .scrapbook-camera .cam-tool{min-height:50px;border:1px solid #ffffff20;border-radius:16px;background:#202a39;color:#f8f5ef;font-size:11px}body.rolli-camera-mode .scrapbook-camera .shutter{width:74px;height:74px;min-width:74px;background:#fff;border:6px solid #fff;box-shadow:0 0 0 3px #ffffff45,inset 0 0 0 5px #e2645d}.rolli-film-preview{padding:18px 14px 24px!important;border-radius:28px!important;background:#fffaf2!important}.rolli-film-preview .preview-shot{max-height:49svh;border-radius:20px}.rolli-film-preview .preview-actions .btn{min-height:54px;border-radius:18px;font-size:14px;font-weight:800}.rolli-film-preview .preview-actions .btn-coral{background:#e85f58;color:#fff;border-color:#e85f58}}

/* ROLLI MOBILE FILM PICKER */
.mobile-film-picker{display:none}
@media(max-width:600px){.field:has(#theme)>label,.field:has(#theme)>.hint-box,.field:has(#theme)>#theme{display:none}.mobile-film-picker{display:flex;gap:10px;overflow-x:auto;padding:4px 1px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.mobile-film-card{display:flex;flex:0 0 138px;min-height:146px;flex-direction:column;align-items:flex-start;gap:7px;padding:8px;border:1px solid #eadfd4;border-radius:18px;background:#fffdf8;color:#26344e;text-align:left;scroll-snap-align:start;box-shadow:0 7px 18px #25354e12}.mobile-film-card.is-selected{border:2px solid #e85f58;padding:7px;box-shadow:0 8px 18px #e85f5830}.mobile-film-card b{font-size:12px;line-height:1.2}.mobile-film-card small{color:#728093;font-size:10px}.mobile-film-swatch{display:block;width:100%;height:91px;border-radius:13px;background:#d49a72}.film-rolli400{background:linear-gradient(135deg,#edb38a,#52647c 54%,#1e293b)}.film-softdaylight{background:linear-gradient(135deg,#c5e6e6,#f8dfb2 55%,#8ec3b1)}.film-goldenhour{background:linear-gradient(135deg,#f3bf72,#df8467 52%,#3b4d6b)}.film-nightflash{background:linear-gradient(135deg,#7ab5c3,#e26d65 50%,#18253c)}.film-monostory{background:linear-gradient(135deg,#e8e4da,#8e9091 50%,#222831)}}

.mobile-film-swatch{background-position:center;background-size:cover}.film-rolli400{background-image:linear-gradient(#0001,#0003),url('/film-mood-samples/scenes/rolli400-friends.jpg')}.film-softdaylight{background-image:linear-gradient(#0001,#0002),url('/film-mood-samples/scenes/softdaylight-friends.jpg')}.film-goldenhour{background-image:linear-gradient(#0001,#0002),url('/film-mood-samples/scenes/goldenhour-friends.jpg')}.film-nightflash{background-image:linear-gradient(#0001,#0003),url('/film-mood-samples/scenes/nightflash-friends.jpg')}.film-monostory{background-image:linear-gradient(#0001,#0003),url('/film-mood-samples/scenes/monostory-friends.jpg')}
.mobile-developed-preview{display:none}.mobile-developed-preview .developed-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 12px 8px;color:#f4c76a;font-size:10px;font-weight:850;letter-spacing:1.4px}.mobile-developed-preview .developed-preview-head button{border:1px solid #ffffff2b;border-radius:999px;background:#202b3c;color:#fff;padding:7px 10px;font-size:10px}.mobile-developed-preview .developed-preview-stage{position:relative;min-height:170px;margin:0 12px;overflow:hidden;border-radius:18px;background:#202a39}.mobile-developed-preview .developed-preview-stage img{display:block;width:100%;height:170px;object-fit:cover}.mobile-developed-preview .developed-preview-stage img+img{position:absolute;inset:0}.mobile-developed-preview.show-before .developed-preview-stage img+img{opacity:0}.mobile-developed-preview>strong{display:block;margin:8px 14px 12px;color:#b4c1d0;text-align:center;font-size:11px;font-weight:600}@media(max-width:600px){.mobile-developed-preview{display:block}}

/* ROLLI MOBILE MOCKUP V2 */
@media(max-width:600px){
body[data-rolli-view="create"],body.rolli-camera-mode{background:#fbf8f1;color:#172337}body[data-rolli-view="create"] .scrapbook-workspace,body.rolli-camera-mode .scrapbook-workspace{width:100%;max-width:520px;margin:auto;padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(34px + env(safe-area-inset-bottom,0px))}body[data-rolli-view="create"] .app-topbar,body.rolli-camera-mode .app-topbar,body[data-rolli-view="create"] .site-nav,body.rolli-camera-mode .site-nav,body[data-rolli-view="create"] .app-tabbar,body.rolli-camera-mode .app-tabbar,body[data-rolli-view="create"] .app-screen-top,body.rolli-camera-mode .app-screen-top,body[data-rolli-view="create"] .app-screen-intro,body.rolli-camera-mode .app-screen-intro{display:none}.mobile-rolli-topbar{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;min-height:44px;margin:0 0 14px;color:#172337}.mobile-rolli-topbar strong{font-size:25px;letter-spacing:.13em;text-align:center;font-weight:950}.mobile-rolli-topbar button{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#172337;font-size:25px;line-height:1}.mobile-rolli-topbar button:last-child{justify-self:end;font-size:22px}.mobile-picker-title{margin:5px 4px 18px}.mobile-picker-title h2{margin:0;color:#172337;font-size:31px;line-height:1.08;letter-spacing:-.04em}.mobile-picker-title p{margin:7px 0 0;color:#6c7581;font-size:15px}body[data-rolli-view="create"] .create-layout{display:block}.create-layout>aside{display:none}body[data-rolli-view="create"] #createForm{padding:20px 0 28px;border:0;background:transparent;box-shadow:none}body[data-rolli-view="create"] #createForm>.label-sm,body[data-rolli-view="create"] #createForm>.hint-box,body[data-rolli-view="create"] #createForm>details{display:none}body[data-rolli-view="create"] #createForm .field:not(:has(#theme)){margin-bottom:12px}body[data-rolli-view="create"] #createForm .field:not(:has(#theme)) input,body[data-rolli-view="create"] #createForm .field:not(:has(#theme)) textarea{border:1px solid #e9e2d9;border-radius:14px;background:#fff;box-shadow:0 4px 14px #27384d0b}body[data-rolli-view="create"] .field:has(#theme){margin-top:14px}.mobile-film-picker{display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow:visible;padding:0}.mobile-film-card{min-width:0;min-height:176px;padding:9px;border:1px solid #e8e0d6;border-radius:20px;background:#fff;color:#172337;box-shadow:0 8px 24px #27384d0e}.mobile-film-card.is-selected{padding:8px;border:2px solid #16a9a5;box-shadow:0 9px 24px #16a9a52e}.mobile-film-card b{font-size:14px}.mobile-film-card small{font-size:11px;color:#707987}.mobile-film-swatch{height:104px;border-radius:15px}body[data-rolli-view="create"] #createForm button[type="submit"]{width:100%;min-height:56px;margin-top:18px;border:0;border-radius:28px;background:#18a9a3;color:#fff;font-size:16px;font-weight:800}body.rolli-camera-mode .scrapbook-camera{position:relative;width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}body.rolli-camera-mode .scrapbook-camera .camera-head{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:0;border:0;letter-spacing:0}body.rolli-camera-mode .scrapbook-camera .camera-head span{display:block;min-width:0;padding:12px 14px;border:1px solid #ebe4da;border-radius:18px;background:#fff;color:#172337;box-shadow:0 5px 14px #27384d0d;font:700 12px/1.1 system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.rolli-camera-mode .scrapbook-camera .camera-head span:first-child{flex:1;text-align:left}body.rolli-camera-mode .scrapbook-camera .camera-head span:first-child:before{content:'▣ ';color:#169f9d}body.rolli-camera-mode .scrapbook-camera .camera-head span:last-child{color:#536170}body.rolli-camera-mode .scrapbook-camera .viewfinder{height:auto;min-height:0;aspect-ratio:4/5;border:0;border-radius:25px;margin:0;background:#d9d4ca;box-shadow:0 10px 25px #27384d1c;overflow:hidden}body.rolli-camera-mode .scrapbook-camera .viewfinder video,body.rolli-camera-mode .scrapbook-camera .viewfinder img{display:block;width:100%;height:100%;object-fit:cover}body.rolli-camera-mode .camera-tools{display:grid;grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr);align-items:center;gap:10px;margin:18px 0 0;padding:0}body.rolli-camera-mode .scrapbook-camera .cam-tool{min-width:0;max-width:none;min-height:58px;padding:8px 5px;border:1px solid #e9e2d8;border-radius:18px;background:#fff;color:#172337;font:700 12px/1.2 system-ui,sans-serif;box-shadow:0 5px 14px #27384d0d}body.rolli-camera-mode .scrapbook-camera #flashCam{display:block!important}body.rolli-camera-mode .scrapbook-camera #zoomCam{display:none!important}body.rolli-camera-mode .scrapbook-camera .shutter{width:82px;height:82px;min-width:82px;border:7px solid #fff;background:#18aaa5;box-shadow:0 0 0 3px #18aaa5,0 7px 18px #18aaa544}body.rolli-camera-mode .scrapbook-camera .camera-last-shot,body.rolli-camera-mode .scrapbook-camera .camera-caption{display:none}.mobile-zoom-control{display:flex;position:absolute;z-index:2;right:50%;bottom:104px;transform:translateX(50%);gap:0;padding:3px;border-radius:999px;background:#172337cc;color:#fff}.mobile-zoom-control button{min-width:41px;border:0;border-radius:999px;padding:7px 9px;background:transparent;color:#fff;font-size:11px}.mobile-zoom-control button.is-active{background:#fff;color:#172337}.mobile-developed-preview .developed-preview-head{margin:0 2px 10px;color:#172337;font-size:11px;letter-spacing:.08em}.mobile-developed-preview .developed-preview-head button{border:1px solid #dcd6cd;background:#fff;color:#172337;padding:8px 13px}.mobile-developed-preview .developed-preview-stage{min-height:0;margin:0;border-radius:24px;background:#e9e3d9;box-shadow:0 10px 25px #27384d1c}.mobile-developed-preview .developed-preview-stage img{height:auto;aspect-ratio:4/5;object-fit:cover}.mobile-developed-preview .developed-preview-stage img+img{opacity:1}.mobile-developed-preview.show-before .developed-preview-stage img+img{opacity:0}.mobile-developed-film-info{display:flex;flex-direction:column;gap:4px;margin:14px 3px 4px;padding:13px 15px;border-radius:18px;background:#fff;box-shadow:0 5px 14px #27384d0d}.mobile-developed-film-info strong{font-size:17px}.mobile-developed-film-info small{color:#707987;font-size:12px}.mobile-developed-preview>strong{margin:8px 3px;color:#6d7782;text-align:left;font-size:11px}.mobile-developed-actions{display:grid;grid-template-columns:1fr 1.25fr;gap:10px;margin:14px 0 0}.mobile-developed-actions .btn{min-height:54px;border-radius:18px;font-size:14px;font-weight:800}.mobile-developed-actions .btn-coral{background:#18a9a3;border-color:#18a9a3;color:#fff}body.rolli-developed-mode .scrapbook-camera .camera-head,body.rolli-developed-mode .scrapbook-camera .viewfinder,body.rolli-developed-mode .scrapbook-camera .camera-tools,body.rolli-developed-mode .scrapbook-camera .camera-caption{display:none}body.rolli-developed-mode .mobile-developed-preview{display:block;margin-top:0}body.rolli-camera-mode .camera-save-status{margin:12px 5px;color:#667382;text-align:center;font-size:11px;line-height:1.5}
}

/* ROLLI MOBILE UX SYSTEM V1 */
@media (max-width:600px){body[data-rolli-view=guest] .scrapbook-workspace,body[data-rolli-view=host] .scrapbook-workspace,body[data-rolli-view=mine] .scrapbook-workspace,body[data-rolli-view=account] .scrapbook-workspace{width:100%;max-width:560px;margin:auto;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(96px + env(safe-area-inset-bottom,0px))}body[data-rolli-view=guest] .guest-entry-card,body[data-rolli-view=host] .surface,body[data-rolli-view=mine] .surface,body[data-rolli-view=account] .surface{border:1px solid #e8e1d8;border-radius:24px;background:#fffdf9;box-shadow:0 10px 28px #27384d10;padding:18px}body[data-rolli-view=guest] .guest-entry-card h1{font-size:31px;line-height:1.08;margin:6px 0 10px}body[data-rolli-view=guest] .guest-entry-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0;padding:12px;border-radius:16px;background:#f0f7f4;color:#6e7784;font-size:11px;text-align:center}body[data-rolli-view=guest] .guest-entry-stats b{display:block;color:#172337;font-size:18px}body[data-rolli-view=guest] .field input,body[data-rolli-view=host] input,body[data-rolli-view=host] textarea{min-height:52px;border:1px solid #e8e1d8;border-radius:15px;background:#fff;font-size:16px}body[data-rolli-view=guest] .btn,body[data-rolli-view=host] .btn,body[data-rolli-view=mine] .btn,body[data-rolli-view=account] .btn{min-height:54px;border-radius:18px;font-size:15px;font-weight:800}body[data-rolli-view=host] .panel-grid,body[data-rolli-view=mine] .panel-grid,body[data-rolli-view=account] .panel-grid{display:block}body[data-rolli-view=host] .panel-grid>aside,body[data-rolli-view=mine] .panel-grid>aside,body[data-rolli-view=account] .panel-grid>aside{display:none}body[data-rolli-view=guest] .app-tabbar,body[data-rolli-view=host] .app-tabbar,body[data-rolli-view=mine] .app-tabbar,body[data-rolli-view=account] .app-tabbar{display:grid;position:fixed;left:0;right:0;bottom:0;width:100%;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:#fffdf9ee;border-top:1px solid #e8e1d8;backdrop-filter:blur(16px);z-index:20}body[data-rolli-view=guest] .app-tabbar button,body[data-rolli-view=host] .app-tabbar button,body[data-rolli-view=mine] .app-tabbar button,body[data-rolli-view=account] .app-tabbar button{min-height:48px;border-radius:14px;font-size:10px}body.rolli-camera-mode .app-tabbar,body.rolli-camera-mode .app-footer{display:none!important}body[data-rolli-view=guest] .crumb,body[data-rolli-view=host] .crumb,body[data-rolli-view=mine] .crumb,body[data-rolli-view=account] .crumb{display:none}}

/* MOBILE QA FIXES */
@media(max-width:600px){html.rolli-qr-entry body>.app-tabbar{display:grid!important;position:fixed!important;left:0;right:0;bottom:0;width:100%;z-index:30;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:#fffdf9f2;border-top:1px solid #e8e1d8;backdrop-filter:blur(16px)}html.rolli-qr-entry body.rolli-camera-mode>.app-tabbar{display:none!important}.memory-card img,.memory-card .photo-image,.album-grid img,.photo-grid img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:18px;background:#eee8df}.memory-card .memory-tools{display:flex;gap:8px;flex-wrap:wrap;padding:12px 14px}.memory-card .memory-tools button{min-height:42px;border-radius:14px;padding:8px 12px;font-size:12px}body.rolli-camera-mode .camera-tools{position:relative;z-index:5}body.rolli-camera-mode .camera-tools .cam-tool,body.rolli-camera-mode .camera-tools .shutter{pointer-events:auto;touch-action:manipulation}body.rolli-camera-mode .camera-tools .cam-tool{font-size:0}body.rolli-camera-mode .camera-tools #flashCam:after{content:'⚡';font-size:22px}body.rolli-camera-mode .camera-tools #flipCam:after{content:'↻';font-size:24px}body.rolli-camera-mode .camera-tools #timerCam:after{content:'◷';font-size:22px}#toast{max-width:calc(100vw - 32px);font-size:14px;line-height:1.35;text-align:center}}

/* TABLET / IPAD RESPONSIVE */
@media (min-width:601px) and (max-width:1024px){html,body{background:#f8f6f1}.scrapbook-workspace{width:min(100%,760px)!important;margin:auto!important;padding:28px 28px 48px!important}.app-topbar{padding-left:28px!important;padding-right:28px!important}.panel-grid{grid-template-columns:1fr!important;gap:18px!important}.host-album-card,.surface{border-radius:24px!important}.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}.memory-card img{width:100%;aspect-ratio:1/1;object-fit:cover}.app-tabbar{width:min(100%,760px)!important;left:50%!important;transform:translateX(-50%)!important;border-radius:22px 22px 0 0}.work-title{font-size:42px!important}.work-sub{max-width:620px;font-size:16px!important}.actions{display:flex;flex-wrap:wrap;gap:10px}.actions .btn{min-height:48px}.qr-img{max-width:280px;height:auto}}