/* ROLLI 0.8 App Experience — visual-only foundation, no change to authorization or payments.
   Mobile-first navigation, safe-area spacing and dedicated live camera screen.
   All private photographs are fetched by the existing authenticated photo API. */
:root{
 --paper:#f7f8fa;--light:#ffffff;--ink:#1d2633;--blue:#314d76;
 --orange:#e56753;--line:#e5e9ef;--muted:#667387;--olive:#60756c;
 --app-shadow:0 16px 52px rgba(30,45,71,.075);--app-radius:24px;
}
html{scroll-behavior:auto;background:#f7f8fa}
body{background:#f7f8fa;color:#1d2633;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:14px;min-height:100svh}
*{-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font-family:inherit}
button{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #5279b7;outline-offset:3px}
.app-topbar.site-nav{background:#fff;min-height:75px;padding:12px max(24px,calc((100vw - 1180px)/2));border-bottom:1px solid #e9edf1;display:flex;align-items:center;gap:30px;z-index:20;position:sticky;top:0}
.app-topbar .wordmark{font:800 35px/1 Georgia,serif;letter-spacing:-2px;color:#243047}
.app-topbar .wordmark span{color:var(--orange)}
.app-topbar-label{font-size:10px;font-weight:800;letter-spacing:1.6px;color:#87909f;margin-left:8px}
.app-topbar .nav-actions{margin-left:auto;gap:12px}
.app-topbar .nav-link{padding:12px 14px;border-radius:15px;color:#445269;font-size:13px;font-weight:650}
.app-topbar .nav-link:hover{background:#f3f5f8}
.app-topbar .nav-create{padding:13px 18px;background:#1c2a43;color:white;border-radius:14px;border:0;box-shadow:0 6px 18px #1523391e;font-size:13px}
.app-topbar .nav-create:hover{background:#304d77}
.app-preview-tag{background:#f5e9df;color:#a26450;border-radius:30px;padding:6px 10px;font-size:9px;letter-spacing:1.4px;font-weight:800}
#app{min-height:calc(100svh - 180px)}
.btn{border-radius:14px;min-height:46px;padding:12px 19px;font-size:13px;font-weight:750;letter-spacing:0;transition:transform .15s,background-color .15s;box-shadow:none}
.btn:not(:disabled):active{transform:scale(.985)}
.btn-coral{background:var(--orange);border:1px solid var(--orange);color:#fff}
.btn-coral:hover{background:#cc5441}
.btn-ink{background:#22334d;border-color:#22334d}
.btn-ink:hover{background:#324e75;border-color:#324e75}
.btn-outline{background:#fff;border:1px solid #dce2e9;color:#33455c}
.btn-outline:hover{background:#edf2f8;color:#243c5b}
.btn-soft{border-color:#e1e4e9;background:#f8f9fb}
/* Intentional landing screen, not a desktop brochure on mobile. */
.app-home{max-width:1190px;margin:0 auto;padding:64px 25px 42px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:54px}
.app-home-intro{min-width:0}
.app-kicker{display:inline-flex;align-items:center;gap:9px;font-size:10px;letter-spacing:1.55px;font-weight:850;color:#6d7f91;text-transform:uppercase}
.app-kicker-dot{width:8px;height:8px;border-radius:50%;background:#ee856c;box-shadow:0 0 0 5px #f9e4df}
.app-home h1{font:600 clamp(52px,5.1vw,77px)/1.03 Georgia,'Times New Roman',serif;letter-spacing:-2.8px;color:#1c3044;margin:27px 0 24px}
.app-home h1 em{font-weight:400;color:#e16b55;font-style:italic}
.app-home-description{max-width:490px;color:#647287;line-height:1.78;font-size:16px}
.app-home-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 24px}
.app-home-actions .btn{padding:15px 24px;min-height:52px}
.app-home-points{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:11px;color:#7c8a9c;font-weight:700}
.app-story-preview{background:#f1e5d9;border-radius:28px;padding:13px;box-shadow:0 20px 55px #17335618;min-height:520px;position:relative;isolation:isolate}
.app-story-photo{height:465px;overflow:hidden;border-radius:20px;background:#d3d9e0;position:relative}
.app-story-photo img{width:100%;height:100%;object-fit:cover;display:block}
.app-photo-credit{position:absolute;right:15px;top:15px;color:#fff;background:#1119279d;font-size:8px;letter-spacing:.8px;font-weight:800;padding:8px 10px;border-radius:999px;backdrop-filter:blur(8px)}
.app-story-overlay{position:absolute;left:28px;right:28px;bottom:0;transform:translateY(20%);display:flex;align-items:center;gap:17px;background:#fff;border:1px solid #f1eeec;padding:18px;border-radius:20px;box-shadow:var(--app-shadow)}
.app-story-mark{height:45px;width:45px;border-radius:14px;display:grid;place-items:center;background:#fff1e9;color:#db7258;font-size:23px}
.app-story-overlay div{flex:1;display:grid;gap:5px}.app-story-overlay small{font-size:10px;letter-spacing:1px;color:#929aa5;font-weight:800}.app-story-overlay strong{font:600 19px Georgia,serif;color:#263446}
.app-story-overlay>span:last-child{font-size:20px;color:#7d8da5}
.app-how{max-width:1190px;margin:0 auto;padding:95px 25px 80px}
.app-section-intro{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:0 0 26px}
.app-section-intro h2{font:600 clamp(30px,3vw,46px)/1.17 Georgia,serif;letter-spacing:-.8px;max-width:570px;margin:0}.app-section-intro h2 em{color:var(--orange);font-weight:400}
.app-how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.app-how-card{background:#fff;border:1px solid #e7ebf1;border-radius:22px;padding:25px;box-shadow:0 9px 27px #152c4210;min-height:235px}
.app-step-symbol{display:grid;place-items:center;background:#edf2f9;color:#344f77;border-radius:15px;width:49px;height:49px;font-size:29px;margin-bottom:20px}
.app-how-card:nth-child(2) .app-step-symbol{background:#fff0eb;color:#df6b54}
.app-how-card:nth-child(3) .app-step-symbol{background:#f1f3e9;color:#728362}
.app-step-tag{font-size:10px;color:#8e9cb0;letter-spacing:1.1px;font-weight:800}
.app-how-card h3{font:600 25px Georgia,serif;margin:9px 0 8px;color:#253b57}
.app-how-card p{font-size:13px;line-height:1.72;color:#708197;margin:0}
.app-final-cta{max-width:1140px;margin:0 auto 22px;border-radius:28px;padding:42px;background:#253b5b;display:flex;align-items:center;justify-content:space-between;gap:25px;color:white}
.app-final-cta .app-kicker{color:#b4c8e2}
.app-final-cta h2{font:600 clamp(28px,3vw,40px) Georgia,serif;margin:12px 0}.app-final-cta h2 em{font-weight:400;color:#ffb5a1}
.app-final-cta p{color:#d2ddec;margin:0}.app-final-cta .btn{white-space:nowrap}
.app-test-note{max-width:1140px;padding:5px 20px 35px;margin:0 auto;text-align:center;font-size:11px;color:#8b96a3;line-height:1.6}
.app-footer{max-width:1170px;margin:0 auto;padding:30px 20px 36px;border-top:1px solid #e5eaf0;display:flex;justify-content:space-between;align-items:center;color:#8895a4;font-size:10px;letter-spacing:1px}
.app-footer strong{font:750 28px Georgia,serif;letter-spacing:-1.8px;color:#24324b}
.app-tabbar{display:none}
/* All flows share one visual system: create, join, dashboard, moderation, albums. */
.app-screen.scrapbook-workspace{max-width:1140px;margin:0 auto;padding:38px 24px 90px;width:100%}
.app-screen.scrapbook-workspace.narrow{max-width:850px}
.app-screen-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;gap:12px}
.app-screen .crumb{margin:0;border:1px solid #e0e5ec;border-radius:30px;color:#596d84;font-weight:750;font-size:12px;padding:9px 15px;min-height:37px;background:white}
.app-screen .crumb:hover{color:#273e58;background:#f2f5f9}
.app-screen-label{font-size:10px;letter-spacing:1.2px;color:#8d9aad;font-weight:800}
.app-screen-intro{margin-bottom:27px}
.app-screen .work-title{font:600 clamp(37px,4.7vw,59px)/1.1 Georgia,'Times New Roman',serif;letter-spacing:-1.6px;margin:3px 0 9px;color:#223a57}
.app-screen .work-title em{color:#de6a55;font-weight:400}
.app-screen .work-sub{color:#708095;line-height:1.6;max-width:735px;font-size:14px;margin:0}
.app-screen .panel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.app-screen .surface,.app-screen .event-card,.app-screen .keybox,.app-screen .privacy-settings{background:#fff;border:1px solid #e6eaf0;box-shadow:0 8px 32px #162c4510;border-radius:22px;padding:25px;min-width:0}
.app-screen .surface .label-sm,.app-screen .label-sm{color:#7a8da3;font-weight:850;letter-spacing:1.2px;font-size:10px}
.app-screen .surface h2,.app-screen .surface h3{color:#263b56}
.app-screen .field{margin-bottom:17px}
.app-screen .field label{color:#34475f;font-weight:750;display:block;margin:0 0 8px}
.app-screen input:not([type=checkbox]):not([type=file]),.app-screen select,.app-screen textarea{min-height:48px;border:1px solid #dce3ec;border-radius:13px;background:#fff;color:#26344a;max-width:100%;padding:11px 14px;box-shadow:none}
.app-screen textarea{min-height:86px}
.app-screen input:focus,.app-screen textarea:focus,.app-screen select:focus{border-color:#6087bb;outline:2px solid #bfd4f2;outline-offset:0}
.app-screen .field-hint,.app-screen .fine{color:#758397;line-height:1.65;font-size:12px}
.app-screen .hint-box{background:#f7f9fc;color:#556b84;border:1px solid #e4eaf2;border-radius:16px;margin:15px 0;padding:15px 16px;line-height:1.55}
.app-screen .checkline{align-items:flex-start;gap:10px;line-height:1.6;border-radius:13px}
.app-screen .checkline input{width:18px;height:18px;accent-color:#e36955;flex-shrink:0;margin-top:3px}
.app-screen .actions{display:flex;flex-wrap:wrap;gap:9px}
.app-screen .btn{white-space:normal}
.app-screen .event-card{background:#eff4fa}
.app-screen .event-card .cover-preview{border-radius:16px}
.app-screen .stats.scrapbook-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:20px}
.app-screen .stats .stat{min-width:0;border:1px solid #e8ebf1;border-radius:18px;background:#fff;box-shadow:none;padding:19px 12px;transform:none;text-align:left}
.app-screen .stats .stat b{font-size:34px;font-weight:800;color:#263e5e}
.app-screen .stats .stat small{font-size:11px;color:#8c99ab;font-weight:700}
.app-screen .host-album-card{margin:0}
.app-screen .host-album-card .host-quote{font:600 30px Georgia,serif;letter-spacing:-.4px}
.app-screen .host-album-card .actions .btn{flex:1 1 170px}
.app-screen .qr-img{border-radius:13px;background:white;border:1px solid #e8ecf2}
.app-screen .invite-row{gap:8px}
.app-screen .keybox,.app-screen .privacy-settings{margin-top:17px;box-shadow:none}
.app-screen .privacy-settings{border-left:1px solid #e6eaf0;background:#fff}
.app-screen .roll-list-item{border:1px solid #e4e9f0;background:#fff;box-shadow:none;border-radius:17px;transform:none}
.app-screen .roll-list-item h3{color:#243d5b;font:600 23px Georgia,serif}
.app-screen .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:15px}
.app-screen .memory-card{border:1px solid #e4e8ed;border-radius:17px;box-shadow:none;transform:none!important;padding:9px 9px 13px;overflow:hidden;background:white}
.app-screen .memory-card:before{display:none}
.app-screen .memory-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;background:#f3f5f8}
.app-screen .memory-card p{font-family:inherit;font-weight:700;color:#485c78;font-size:13px;margin:9px 4px}
.app-screen .memory-tools{gap:8px;display:flex;align-items:center;flex-wrap:wrap}
.app-screen .memory-tools a,.app-screen .memory-tools button{min-height:37px;border-radius:10px;padding:8px 10px}
.app-screen .empty,.app-screen .waiting{border-radius:20px;border:1px dashed #cbd8e7;background:#f7faff;padding:35px 20px}
.app-screen .status{border-radius:100px;padding:8px 11px;font-weight:800}
.app-screen .print-invite{display:none}
/* Camera-only immersive UX: live preview is real getUserMedia (no mock photo). */
body.rolli-camera-mode{background:#0b1220;color:#ecf2fc;min-height:100svh}
body.rolli-camera-mode .app-topbar,body.rolli-camera-mode .app-footer,body.rolli-camera-mode .app-tabbar{display:none!important}
body.rolli-camera-mode #app{min-height:100svh}
body.rolli-camera-mode .app-screen.scrapbook-workspace{max-width:1100px;padding:16px 20px 40px;margin:0 auto}
body.rolli-camera-mode .app-screen-top{margin-bottom:11px}
body.rolli-camera-mode .app-screen .crumb{background:#17243a;border:1px solid #3e526b;color:#e7eef8;border-radius:28px;min-height:40px;padding:8px 17px}
body.rolli-camera-mode .app-screen-label{color:#9fb0c5}
body.rolli-camera-mode .app-screen-intro{margin-bottom:14px}
body.rolli-camera-mode .app-screen .work-title{font:600 clamp(22px,3vw,30px) Georgia,serif;color:#fff;margin:0 0 5px}
body.rolli-camera-mode .app-screen .work-sub{font-size:12px;color:#a8b7cb;margin:0}
body.rolli-camera-mode .app-screen .panel-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(255px,.85fr);gap:22px}
body.rolli-camera-mode .scrapbook-camera{max-width:none;width:100%;border:1px solid #293c53;border-radius:24px;padding:11px;background:#142136;box-shadow:0 18px 44px #040b168c}
body.rolli-camera-mode .scrapbook-camera .viewfinder{height:clamp(370px,58svh,640px);background:#19293c;border-radius:18px;max-height:none;min-height:0}
body.rolli-camera-mode .scrapbook-camera .viewfinder:after{background:linear-gradient(to top,#0c182366,transparent 30%)}
body.rolli-camera-mode .scrapbook-camera .camera-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:#1c2c40!important;color:#f2f6fc!important;text-shadow:none!important;letter-spacing:0;font:600 16px/1.5 inherit;text-align:center}
body.rolli-camera-mode .camera-placeholder .camera-off-icon{display:grid;place-items:center;width:72px;height:72px;border:2px solid #899cb4;border-radius:50%;font-size:45px;font-weight:400;color:#b8c9dd}
body.rolli-camera-mode .camera-placeholder small{color:#b3c1d1;font-size:12px;font-weight:500}
body.rolli-camera-mode .scrapbook-camera .camera-head{top:26px;left:25px;right:25px;gap:7px}
body.rolli-camera-mode .scrapbook-camera .camera-head span{font-size:10px;background:#121b2bb5;border-radius:16px;color:#fff;padding:8px 9px;overflow:hidden;text-overflow:ellipsis;max-width:52%}
body.rolli-camera-mode .scrapbook-camera .film-counter{color:#fff;background:#152234aa;border-radius:99px;font-size:10px;letter-spacing:.3px;bottom:17px;left:16px}
body.rolli-camera-mode .scrapbook-camera .camera-tools{margin:15px 4px 3px;display:flex;align-items:center;justify-content:space-between;gap:9px}
body.rolli-camera-mode .scrapbook-camera .cam-tool{min-height:48px;flex:1;max-width:none;border:1px solid #516782;background:#23344c;color:#ebf2fc;border-radius:16px;padding:10px 7px;font-size:12px;font-weight:750}
body.rolli-camera-mode .scrapbook-camera .cam-tool:hover{background:#345273}
body.rolli-camera-mode .scrapbook-camera .shutter{flex:0 0 74px;min-width:74px;max-width:74px;width:74px;height:74px;border:6px solid #fff;background:#f8f8fa;border-radius:50%;box-shadow:inset 0 0 0 4px #e56753,0 0 0 4px #23354f;margin:0 9px}
body.rolli-camera-mode .scrapbook-camera .shutter:not(:disabled):active{transform:scale(.93)}
body.rolli-camera-mode .scrapbook-camera .camera-caption{margin:8px 0 0;color:#c4d6e8;font-size:10px;letter-spacing:.8px}
body.rolli-camera-mode .scrapbook-camera .camera-save-status{color:#d8e5f3;font-size:12px;line-height:1.45;min-height:34px;margin:10px 5px 5px}
body.rolli-camera-mode .scrapbook-camera .camera-native-cta{display:block;min-height:40px;margin:8px auto;color:#bfd1e6;font-size:12px;background:none;border:1px solid #445c74;border-radius:12px;padding:8px 16px}
body.rolli-camera-mode .scrapbook-camera .camera-recovery-actions{margin-top:6px}
body.rolli-camera-mode .centered-actions{justify-content:center;margin:14px 0;display:flex;gap:10px}
body.rolli-camera-mode .centered-actions .btn{flex:1;min-height:46px;border-color:#415773;background:#1b2a40;color:#e1ecfa}
body.rolli-camera-mode .app-screen .event-card{background:#192942;border:1px solid #3b5067;color:#e0ebfa;box-shadow:none}
body.rolli-camera-mode .app-screen .event-card h3{color:#f7f9ff}
body.rolli-camera-mode .app-screen .event-card p,body.rolli-camera-mode .app-screen aside .fine{color:#b7c9dc}
body.rolli-camera-mode .app-screen aside .hint-box{background:#192942;border-color:#3b5067;color:#c4d3e5}
body.rolli-camera-mode #toast{background:#23364f;border:1px solid #53708b;color:white;z-index:100}
/* iPhone/Android safe areas and native-sized touch targets. */
@media(max-width:800px){
 .app-topbar.site-nav{min-height:62px;padding:11px 18px;position:sticky;top:0;z-index:30}
 .app-topbar .wordmark{font-size:29px}.app-topbar-label{display:none}
 .app-topbar .nav-actions{display:none}
 .app-preview-tag{margin-left:auto}
 #app{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px));min-height:calc(100svh - 130px)}
 .app-tabbar{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom,0px));z-index:45;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:8px 7px;background:#fffefefa;border:1px solid #e7eaf0;border-radius:24px;box-shadow:0 15px 40px #13253c2b;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
 .app-tabbar button{background:none;border:0;border-radius:17px;min-height:56px;color:#8290a3;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;font-weight:750;font-size:10px;cursor:pointer}
 .app-tabbar button.active{color:#e26852;background:#fff0eb}
 .app-tabbar .tab-icon{display:block;font-size:26px;font-weight:500;line-height:1}
 .app-home{display:flex;flex-direction:column;gap:25px;padding:32px 18px 32px}
 .app-home h1{font-size:clamp(43px,10.6vw,62px);letter-spacing:-1.9px;margin:20px 0 16px}
 .app-home-description{font-size:14px;line-height:1.7;margin:0}
 .app-home-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:21px 0 15px}
 .app-home-actions .btn{padding:12px 9px;font-size:12px;min-height:52px}
 .app-home-points{font-size:10px;gap:5px 12px}
 .app-story-preview{width:100%;min-height:0;border-radius:22px;padding:8px;margin:9px auto 12px}
 .app-story-photo{height:auto;aspect-ratio:1.26;border-radius:17px}
 .app-story-overlay{position:relative;bottom:auto;left:auto;right:auto;margin:-18px 10px -6px;transform:none;padding:12px;border-radius:16px}
 .app-story-mark{height:38px;width:38px;font-size:20px}
 .app-story-overlay strong{font-size:15px}.app-story-overlay small{font-size:8px}
 .app-photo-credit{font-size:7px;right:9px;top:9px}
 .app-how{padding:40px 18px}
 .app-section-intro{display:block;padding-bottom:19px}
 .app-section-intro h2{font-size:30px;margin:11px 0 0}
 .app-how-grid{display:grid;grid-template-columns:1fr;gap:10px}
 .app-how-card{min-height:0;padding:17px 19px;display:grid;grid-template-columns:49px 1fr;column-gap:14px;align-items:start}
 .app-step-symbol{grid-row:span 3;margin:0}
 .app-how-card h3{font-size:21px;margin:4px 0}.app-how-card p{grid-column:2;font-size:12px;line-height:1.5}
 .app-how-card .app-step-tag{align-self:end}
 .app-final-cta{margin:0 18px 15px;border-radius:22px;padding:24px;display:block}
 .app-final-cta h2{font-size:31px}.app-final-cta .btn{margin-top:16px;width:100%}
 .app-test-note{font-size:10px;padding:11px 20px 0}
 .app-footer{display:none}
 .app-screen.scrapbook-workspace,.app-screen.scrapbook-workspace.narrow{padding:18px 15px 23px;max-width:690px;width:100%}
 .app-screen-top{margin-bottom:17px}.app-screen .crumb{min-height:40px}
 .app-screen-label{font-size:9px}
 .app-screen-intro{margin-bottom:22px}
 .app-screen .work-title{font-size:clamp(34px,8.5vw,48px);letter-spacing:-1px}
 .app-screen .work-sub{font-size:13px;line-height:1.55}
 .app-screen .panel-grid{grid-template-columns:minmax(0,1fr);gap:14px}
 .app-screen .surface,.app-screen .event-card,.app-screen .keybox,.app-screen .privacy-settings{border-radius:18px;padding:18px}
 .app-screen .cols2{grid-template-columns:1fr}
 .app-screen .stats.scrapbook-stats{gap:8px}
 .app-screen .stats .stat{padding:14px 10px}.app-screen .stats .stat b{font-size:29px}.app-screen .stats .stat small{font-size:10px}
 .app-screen .surface .actions .btn{flex:1 1 150px}
 .app-screen .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
 .app-screen .memory-card{padding:7px}
 .app-screen input,.app-screen select,.app-screen textarea{font-size:16px}
 body.rolli-camera-mode{background:#0b1220}
 body.rolli-camera-mode #app{padding-bottom:0;min-height:100svh}
 body.rolli-camera-mode .app-screen.scrapbook-workspace{padding:calc(10px + env(safe-area-inset-top,0px)) 11px calc(20px + env(safe-area-inset-bottom,0px));max-width:560px}
 body.rolli-camera-mode .app-screen-top{margin-bottom:9px}
 body.rolli-camera-mode .app-screen .crumb{padding:6px 13px;min-height:37px;font-size:12px}
 body.rolli-camera-mode .app-screen .work-title{font-size:23px;margin:0}
 body.rolli-camera-mode .app-screen .work-sub{font-size:11px;line-height:1.4;margin:3px 0 0}
 body.rolli-camera-mode .app-screen-intro{margin-bottom:9px}
 body.rolli-camera-mode .app-screen .panel-grid{grid-template-columns:1fr;gap:9px}
 body.rolli-camera-mode .scrapbook-camera{padding:6px;border-radius:17px}
 body.rolli-camera-mode .scrapbook-camera .viewfinder{height:clamp(260px,46svh,480px);border-radius:14px}
 body.rolli-camera-mode .scrapbook-camera .camera-head{top:19px;left:17px;right:17px}
 body.rolli-camera-mode .scrapbook-camera .camera-head span{font-size:9px;padding:8px 7px;max-width:53%}
 body.rolli-camera-mode .scrapbook-camera .camera-tools{margin:10px 2px 4px;gap:7px}
 body.rolli-camera-mode .scrapbook-camera .shutter{width:66px;height:66px;min-width:66px;max-width:66px;flex-basis:66px;margin:0 3px}
 body.rolli-camera-mode .scrapbook-camera .cam-tool{font-size:11px;min-height:48px;padding:6px 8px}
 body.rolli-camera-mode .scrapbook-camera .camera-save-status{font-size:11px;min-height:30px;margin:8px 4px 0}
 body.rolli-camera-mode .scrapbook-camera .camera-caption{font-size:9px;margin-top:6px}
 body.rolli-camera-mode .scrapbook-camera .camera-native-cta{font-size:11px;min-height:38px;margin:6px auto 2px}
 body.rolli-camera-mode .centered-actions{margin:8px 0 12px;gap:8px}
 body.rolli-camera-mode .centered-actions .btn{min-height:42px;font-size:11px}
 body.rolli-camera-mode .app-screen aside{margin-top:0}
 body.rolli-camera-mode .app-screen .event-card{padding:13px}
 body.rolli-camera-mode .app-screen aside .hint-box{margin:7px 0}
 body.rolli-camera-mode #toast{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:350px){
 .app-home h1{font-size:39px}.app-home-actions .btn{font-size:11px}
 body.rolli-camera-mode .scrapbook-camera .camera-head span{font-size:8px}
 body.rolli-camera-mode .scrapbook-camera .cam-tool{font-size:10px;padding:5px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{
 .app-tabbar,.app-topbar,.app-footer,.app-screen-top,.app-screen-intro{display:none!important}
 .app-screen .print-invite{display:block!important}
}
/* Override legacy global white workspace only while the real camera is active. */
body.rolli-camera-mode .workspace.scrapbook-workspace.app-screen{background:#0b1220!important}
body.rolli-camera-mode .app-screen .work-title{color:#f3f7fd!important}
body.rolli-camera-mode .app-screen .work-sub{color:#b3c6db!important}
body.rolli-camera-mode .app-screen .work-title em{color:#f29a85!important}

/* ROLLI LOCAL RC: Retain the approved White Vintage Editorial identity.
   App layout changes navigation and touch behavior, not brand palette or hero artwork. */
:root{--paper:#fff;--light:#fff;--ink:#272b29;--orange:#b74734;--blue:#315b81;--line:#ded9cf;--muted:#625f59;--olive:#6b735b;--app-shadow:0 12px 35px #272b2910}
html,body{background:#fff;color:var(--ink)}
.app-topbar.site-nav{border-color:var(--line);background:#fff}
.app-topbar .wordmark,.app-home h1,.app-screen .work-title,.app-section-intro h2,.app-footer strong{color:var(--ink)}
.app-topbar .wordmark span,.app-home h1 em,.app-section-intro h2 em,.app-screen .work-title em{color:var(--orange)}
.app-topbar .nav-create,.btn-ink{background:var(--blue);border-color:var(--blue);color:white}
.btn-coral,.app-tabbar button.active{background:var(--orange);border-color:var(--orange);color:white}
.app-home-description,.app-home-points,.app-screen .work-sub,.app-screen .fine,.app-how-card p{color:var(--muted)}
.app-kicker,.app-step-tag,.app-screen .label-sm{color:var(--blue)}
.app-story-preview{background:#f6f1e7}
.app-story-overlay,.app-how-card,.app-screen .surface,.app-screen .event-card,.app-screen .privacy-settings{border-color:var(--line);background:#fff}
.app-final-cta{background:#2d3330}
.app-tabbar{border-color:var(--line)!important;background:#fff!important}
.app-tabbar button.active{background:transparent!important;color:var(--orange)!important}
.app-screen .event-card{background:#f8f4ed}
.app-screen .roll-list-item{border-color:var(--line)}
body.rolli-camera-mode{background:#171b1a;color:#fffaf1}
.rolli-account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}
.rolli-account-grid .surface{min-width:0}
.rolli-account-grid h2{font:500 27px Georgia,serif;margin:12px 0 23px}
.rolli-account-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:13px 0}
.rolli-account-row>div{min-width:0;flex:1}
.rolli-account-row strong{display:block;font-weight:750;font-size:13px;color:var(--ink)}
.rolli-account-row small{display:block;color:var(--muted);line-height:1.6;margin-top:5px;overflow-wrap:anywhere}
.rolli-account-overview{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:18px}
.rolli-account-overview h2{font:500 24px Georgia,serif;margin:9px 0;overflow-wrap:anywhere}
.rolli-recover{margin-bottom:15px}
.rolli-recovery-card code{display:block;font-size:16px;background:#f7efe7;border:1px dashed var(--orange);padding:15px;margin:16px 0;overflow-wrap:anywhere;color:#643326}
#accountMessage{min-height:25px;color:var(--orange)}
@media(max-width:750px){.rolli-account-grid{grid-template-columns:1fr}.rolli-account-overview{flex-direction:column;align-items:flex-start}}
/* Keep actionable controls clear of the fixed mobile tab bar. */
@media(max-width:800px){
 html{scroll-padding-bottom:calc(124px + env(safe-area-inset-bottom,0px))}
 body:not(.rolli-camera-mode) #app{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))}
 body:not(.rolli-camera-mode) .app-screen.scrapbook-workspace{padding-bottom:calc(155px + env(safe-area-inset-bottom,0px));}
 body:not(.rolli-camera-mode) .rolli-account-row button,body:not(.rolli-camera-mode) .memory-tools button{scroll-margin-bottom:120px}
}
@media(max-width:800px){
 .app-tabbar{grid-template-columns:repeat(5,minmax(0,1fr));padding:6px 5px;gap:0}
 .app-tabbar button{min-width:0;min-height:55px;font-size:9px;white-space:nowrap;gap:3px;padding:4px 2px}
 .app-tabbar .tab-icon{font-size:22px}
}

/* ROLLI v0.9.1 — Date/time fields must fit their form column, not the viewport.
   auto-fit stacks date pickers when the Organizer form is narrow beside preview. */
.create-layout #createForm .cols2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
  gap: 14px;
}
.create-layout #createForm .cols2 > .field { min-width: 0; }
.create-layout #createForm input[type="date"],
.create-layout #createForm input[type="datetime-local"] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}