/* ============ fonts (vendored, no foreign CDN) ============ */
@font-face{font-family:'WenKai';src:url(fonts/wenkai.woff2) format('woff2');font-display:swap}
@font-face{font-family:'MaShan';src:url(fonts/mashan.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Mono';src:url(fonts/courier.woff2) format('woff2');font-display:swap;font-weight:700}
@font-face{font-family:'Pix';src:url(fonts/vt323.woff2) format('woff2');font-display:swap}
@font-face{font-family:'GaramondI';src:url(fonts/cormorant-i.woff2) format('woff2');font-display:swap;font-style:italic}

/* ============ theme ELEMENTS ============
   A theme = layout + map + frame + dot + font + palette (each is an html data-* attribute).
   Custom themes later just pick a value for each element. */
:root{
 --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
 --f-ui:-apple-system,'SF Pro Text','PingFang SC','HarmonyOS Sans SC','Noto Sans CJK SC','Microsoft YaHei',sans-serif;
 --spring:cubic-bezier(.32,.72,0,1);--spring-soft:cubic-bezier(.3,.9,.3,1.08);--spring-fast:cubic-bezier(.25,.9,.3,1);
 --d:.5s;--d-soft:.62s;--d-fast:.32s;
 --tab-h:calc(66px + var(--sab));
 --dot:110,186,255;--dot-core:#fff;
}
/* palette */
[data-palette=peach]{--bg:#F6EFE4;--bg2:#FBF6EE;--ink:#43392F;--sub:#8C8178;--mute:#B5AA9E;--line:rgba(120,100,80,.12);
 --glass:rgba(255,251,245,.74);--glass-b:rgba(255,255,255,.8);--card:#fff;--sheet:rgba(255,251,245,.96);
 --ac:#FF9F8A;--ac-ink:#E07A62;--ac-grad:linear-gradient(135deg,#FFC2A8,#FF9F8A);--num:#5BA3E8;--star:#FFB38F;--star-off:#EDE4D8;
 --seg-bg:rgba(255,250,243,.72);--seg-on:#fff;--seg-on-ink:#43392F;--seg-ink:#8C8178;
 --tab-bg:rgba(255,251,245,.86);--tab-on:#43392F;--tab-off:#B5AA9E;
 --cj:#9FD3B5;--cj2:#4F8C69;--cjb:#E3F2E8;--cf:#F7C6A3;--cf2:#C27A45;--cfb:#FFF0E2;--cn:#D9C6F0;--cn2:#8A6BB8;--cnb:#EFE7F8;--co:#C9D3DD;--co2:#6E7F90;--cob:#EDF1F5;
 --map-bg:#EAF0EA;--tint:#BFE3CD,#FFD3BE,#D9CCF2,#FFE3A8,#C8E0F4,#F6CFD8;--shadow:0 10px 30px rgba(120,100,80,.13);
 --hd-fade:linear-gradient(rgba(246,239,228,.94),rgba(246,239,228,.6) 60%,rgba(246,239,228,0));}
[data-palette=kraft]{--bg:#F1E8D8;--bg2:#F7F0E3;--ink:#3A2E25;--sub:#7E6C5B;--mute:#A8977F;--line:rgba(90,70,50,.18);
 --glass:rgba(250,244,232,.86);--glass-b:rgba(255,253,246,.9);--card:#FFFDF8;--sheet:#EFE6D5;
 --ac:#B8432F;--ac-ink:#B8432F;--ac-grad:radial-gradient(circle at 40% 35%,#D2553C,#A8382A);--num:#B8432F;--star:#B8432F;--star-off:#D9CBB5;
 --seg-bg:#FFFDF6;--seg-on:transparent;--seg-on-ink:#3A2E25;--seg-ink:#8B7A68;
 --tab-bg:#F7F0E3;--tab-on:#3A2E25;--tab-off:#A8977F;
 --cj:#9DBF97;--cj2:#4E7A4A;--cjb:#E2ECD9;--cf:#E8B48A;--cf2:#A8602E;--cfb:#F6E4D2;--cn:#C9B3DE;--cn2:#7B5CA3;--cnb:#ECE2F4;--co:#BFC6CC;--co2:#5F6B75;--cob:#E7EAEC;
 --map-bg:#E9DFCC;--tint:#E8B4A0,#BFD5C0,#E9D08F,#B8CFDB,#D8B9C9,#C9C08F;--shadow:0 8px 18px -6px rgba(60,40,20,.35);
 --hd-fade:linear-gradient(#F1E8D8 0,rgba(241,232,216,.92) 55%,rgba(241,232,216,0));}
[data-palette=darkroom]{--bg:#1A1512;--bg2:#221B16;--ink:#F3EBDD;--sub:#CDBFA9;--mute:#7D7064;--line:rgba(243,235,221,.16);
 --glass:rgba(26,21,18,.78);--glass-b:rgba(243,235,221,.16);--card:#F2EADC;--sheet:#17120F;
 --ac:#E2662A;--ac-ink:#FF9A3C;--ac-grad:radial-gradient(circle at 40% 35%,#FFB061,#E2662A);--num:#FF9A3C;--star:#B5651D;--star-off:#D3C5B0;
 --seg-bg:rgba(26,21,18,.78);--seg-on:#F3EBDD;--seg-on-ink:#1A1512;--seg-ink:#CDBFA9;
 --tab-bg:#17120F;--tab-on:#F3EBDD;--tab-off:#7D7064;
 --cj:#8FB59A;--cj2:#5E8B6E;--cjb:#2C3A2F;--cf:#E0A070;--cf2:#C47F3E;--cfb:#3A2C20;--cn:#C9A5C5;--cn2:#B5677D;--cnb:#3A2A30;--co:#9AA3AD;--co2:#7A7F8C;--cob:#2A2D31;
 --map-bg:#D8C7A8;--tint:#E2A070,#9FBFA5,#C9A5C5,#E3C27F,#9FB7C9,#D79A8A;--shadow:0 6px 14px rgba(30,20,10,.38);
 --hd-fade:linear-gradient(rgba(26,21,18,.97) 0,rgba(26,21,18,.88) 55%,rgba(26,21,18,0));--dot:110,196,255}
/* fonts */
[data-font=wenkai]{--f-text:'WenKai','Kaiti SC','STKaiti',var(--f-ui);--f-disp:'WenKai','Kaiti SC',var(--f-ui);--f-hand:'WenKai',var(--f-ui);--f-mono:'Mono','Courier New',monospace}
[data-font=hand]{--f-text:'WenKai','Kaiti SC',var(--f-ui);--f-disp:'MaShan','WenKai','Kaiti SC',var(--f-ui);--f-hand:'MaShan','WenKai',var(--f-ui);--f-mono:'Mono','Courier New',monospace}
[data-font=serif]{--f-text:'Noto Serif SC','Songti SC','STSong','Source Han Serif SC',serif;--f-disp:'Noto Serif SC','Songti SC','STSong',serif;--f-hand:'Noto Serif SC','Songti SC',serif;--f-mono:'Mono','Courier New',monospace}

/* ============ base ============ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--f-ui);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
input,textarea{font:inherit;color:inherit}
.hidden{display:none!important}
.row{display:flex;align-items:center}.gap8{gap:8px}.small{font-size:12px;color:var(--sub)}
.img{background-size:cover;background-position:center}
.press{transition:transform var(--d-fast) var(--spring-fast)}.press:active{transform:scale(.96)}
.glass{background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);border:1px solid var(--glass-b)}

/* ============ map + atmosphere ============ */
#map{position:fixed;inset:0;background:var(--map-bg)}
#map .amap-container,#map.amap-container{background:var(--map-bg)!important}
.amap-logo,.amap-copyright{opacity:.45;bottom:calc(var(--tab-h) + 4px)!important;transform:scale(.8);transform-origin:left bottom}
#hd::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(var(--sat) + 190px);background:var(--hd-fade);pointer-events:none;z-index:-1}

/* ============ header ============ */
#hd{position:fixed;left:0;right:0;top:0;z-index:20;padding:calc(var(--sat) + 14px) 18px 0;pointer-events:none}
#hd>*{pointer-events:auto}
.hd-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hd-t{font:500 23px/1.25 var(--f-disp);letter-spacing:.3px;color:var(--ink)}
.hd-s{font:13px/1.4 var(--f-text);color:var(--sub);margin-top:3px;display:flex;align-items:center;gap:5px}
.hd-av{flex:none;width:46px;height:46px;border-radius:50%;background:var(--ac-grad);border:3px solid #fff;box-shadow:0 3px 10px rgba(200,120,90,.3);display:flex;align-items:center;justify-content:center;font:20px var(--f-disp);color:#fff}
[data-layout=journal] .hd-t{font:34px/1.15 var(--f-hand);letter-spacing:2px}
[data-layout=journal] .hd-s{font:13px var(--f-mono);font-weight:700;color:var(--sub);letter-spacing:.5px}
.stamp{flex:none;width:84px;height:84px;margin:-8px -6px 0 0;transform:rotate(-12deg);opacity:.85;mix-blend-mode:multiply}
[data-layout=roll] .hd-k{font:700 11px var(--f-mono);letter-spacing:3px;color:#E9A040}
[data-layout=roll] .hd-t{font:600 27px/1.25 var(--f-disp);letter-spacing:2px;margin-top:2px}
[data-layout=roll] .hd-s{font:italic 16px 'GaramondI',Georgia,serif;color:var(--sub);margin-top:-1px}
.counter{flex:none;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3A322C,#120E0B);box-shadow:inset 0 0 0 2px #5A4E44,0 4px 10px rgba(0,0,0,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:4px}
.counter b{font:30px/1 'Pix',monospace;color:#FF9A3C;text-shadow:0 0 3px rgba(255,120,30,.9),0 0 8px rgba(255,110,20,.5);font-weight:400}
.counter span{font:8px var(--f-mono);color:#8F8170;letter-spacing:1px}
.dstamp{font-family:'Pix',monospace;color:#FF9A3C;letter-spacing:1px;text-shadow:0 0 3px rgba(255,120,30,.9),0 0 8px rgba(255,110,20,.5)}

/* ============ crumb (smart) ============ */
#crumb{position:fixed;left:16px;top:calc(var(--sat) + 14px);z-index:22;display:flex;align-items:center;gap:4px;padding:8px 14px 8px 10px;border-radius:20px;font:500 14px var(--f-ui);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 2px 10px rgba(120,100,80,.12);transition:opacity .3s,transform var(--d) var(--spring)}
#crumb .c0{color:var(--sub)}#crumb .sl{color:var(--mute);margin:0 2px}
body.crumbed #hd{opacity:0;transform:translateY(-8px);pointer-events:none}
#hd{transition:opacity .3s,transform var(--d) var(--spring)}

/* ============ segmented mode control ============ */
#seg{position:fixed;left:16px;top:calc(var(--sat) + 84px);z-index:21;display:flex;padding:3px;border-radius:20px;background:var(--seg-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-b);box-shadow:0 2px 10px rgba(120,100,80,.08)}
[data-layout=journal] #seg{top:calc(var(--sat) + 104px)}
[data-layout=roll] #seg{top:calc(var(--sat) + 112px)}
#seg button{position:relative;z-index:1;display:flex;align-items:center;gap:4px;height:32px;padding:0 11px;border-radius:16px;font:500 13px var(--f-ui);color:var(--seg-ink);transition:color .15s}
#seg button.on{color:var(--seg-on-ink)}
#seg .seg-k{position:absolute;z-index:0;top:3px;height:32px;border-radius:16px;background:var(--seg-on);box-shadow:0 2px 8px rgba(120,100,80,.16);transition:transform var(--d) var(--spring),width var(--d) var(--spring)}
[data-layout=journal] #seg{border-radius:3px;border:0;box-shadow:0 1px 2px rgba(60,40,20,.15),0 6px 14px -6px rgba(60,40,20,.3);transform:rotate(-1deg);background:#FFFDF6}
[data-layout=journal] #seg button{font:16px var(--f-hand);padding:0 13px}
[data-layout=journal] #seg button svg{display:none}
[data-layout=journal] #seg .seg-k{top:auto;bottom:7px;height:9px;border-radius:2px;background:rgba(232,158,140,.65);box-shadow:none;transform-origin:center}
[data-layout=roll] #seg button svg{display:none}
[data-layout=roll] #seg button{font:500 13px var(--f-disp);padding:0 13px}

/* ============ markers: glow dots ============ */
.mk{position:relative;width:0;height:0}
.dt{position:absolute;left:0;top:0;--s:calc(8px + var(--v,1)*2.2px);width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);border-radius:50%;
 background:radial-gradient(circle,var(--dot-core) 0 28%,rgb(var(--dot)) 72%);
 box-shadow:0 0 4px 1px rgba(var(--dot),.95),0 0 calc(10px + var(--v)*3px) calc(3px + var(--v)*1px) rgba(var(--dot),.55),0 0 calc(26px + var(--v)*8px) calc(8px + var(--v)*3px) rgba(var(--dot),.22);
 transition:transform var(--d) var(--spring),opacity .35s ease;will-change:transform,opacity}
.dt.ring::after{content:'';position:absolute;inset:-90%;border-radius:50%;border:1px solid rgba(var(--dot),.4)}
.dt.hot{animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{opacity:.82}}
.dt.born{animation:born 1.1s var(--spring-soft)}
.dt.born::before{content:'';position:absolute;inset:-40%;border-radius:50%;border:2px solid rgba(var(--dot),.8);animation:ripple 1.2s ease-out forwards}
@keyframes born{0%{transform:scale(.2)}35%{transform:scale(1.6)}100%{transform:scale(1)}}
@keyframes ripple{to{transform:scale(5);opacity:0}}
.mk-l{position:absolute;left:12px;top:-14px;white-space:nowrap;padding:5px 10px;border-radius:12px;background:rgba(255,255,255,.86);box-shadow:0 4px 12px rgba(80,120,170,.18);font:500 12px var(--f-ui);color:#43392F;transition:opacity .3s}
.mk-l b{color:#4A90E2;font-weight:600}

/* ============ markers: photo stacks ============ */
.pm{position:absolute;left:0;top:0}
.pm .pin{position:absolute;left:0;top:0;transform-origin:50% 100%;will-change:transform,opacity;transition:transform var(--d-soft) var(--spring-soft),opacity .3s ease;cursor:pointer}
.pm .teth{position:absolute;left:0;top:0;overflow:visible;transform-origin:0 0;transition:transform var(--d) var(--spring),opacity .25s}
.pm .teth path{fill:none;stroke-linecap:round}
.pm .pk{position:relative}
.pm .pr{position:absolute;left:0;top:0}
.pm .n{position:absolute;z-index:5;min-width:24px;height:24px;padding:0 6px;border-radius:12px;display:flex;align-items:center;justify-content:center;font:600 12px var(--f-ui)}
/* frame: round (C) */
[data-frame=round] .pm .pk{width:66px;height:60px}
[data-frame=round] .pm .pr{width:52px;height:52px;border-radius:50%;border:3px solid #fff;background:#fff center/cover;box-shadow:0 0 0 3px var(--rc,var(--cj)),0 6px 12px rgba(90,110,120,.28)}
[data-frame=round] .pm .pr.p0{left:4px;top:6px;z-index:3}
[data-frame=round] .pm .pr.p1{left:18px;top:1px;width:46px;height:46px;z-index:2;box-shadow:0 4px 10px rgba(90,110,120,.25)}
[data-frame=round] .pm .pr.p2{left:26px;top:-2px;width:40px;height:40px;z-index:1;box-shadow:0 4px 10px rgba(90,110,120,.2)}
[data-frame=round] .pm .one .pk{width:60px}
[data-frame=round] .pm .one .pr.p0{left:4px}
[data-frame=round] .pm .tip{position:absolute;left:23px;top:58px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid #fff;filter:drop-shadow(0 3px 3px rgba(90,110,120,.2))}
[data-frame=round] .pm .n{right:-2px;top:-4px;background:var(--ac);color:#fff;border:2px solid #fff}
[data-frame=round] .pm .teth path{stroke:rgba(255,255,255,.95);stroke-width:1.8;stroke-dasharray:1 4}
/* frame: polaroid (A) */
[data-frame=polaroid] .pm .pk{width:64px;height:66px}
[data-frame=polaroid] .pm .pr{width:56px;height:60px;padding:4px 4px 12px;background:#FFFDF8;box-shadow:0 1px 2px rgba(60,40,20,.18),0 8px 18px -6px rgba(60,40,20,.38)}
[data-frame=polaroid] .pm .pr i{display:block;width:100%;height:100%;background:#ddd center/cover;filter:saturate(.9)}
[data-frame=polaroid] .pm .pr.p0{z-index:3;transform:rotate(var(--r,-5deg))}
[data-frame=polaroid] .pm .pr.p0::after{content:'';position:absolute;left:50%;top:-8px;width:30px;height:14px;margin-left:-15px;background:var(--tape,rgba(150,190,200,.82));transform:rotate(-4deg);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 4px,transparent 4px 8px)}
[data-frame=polaroid] .pm .pr.p1{left:6px;top:2px;z-index:2;transform:rotate(7deg)}
[data-frame=polaroid] .pm .pr.p2{left:10px;top:4px;z-index:1;transform:rotate(14deg)}
[data-frame=polaroid] .pm .tip{position:absolute;left:25px;top:62px;width:6px;height:6px;border-radius:50%;background:#B8432F}
[data-frame=polaroid] .pm .n{right:-6px;top:-10px;background:#B8432F;color:#fff;font-family:var(--f-mono);transform:rotate(8deg)}
[data-frame=polaroid] .pm .teth path{stroke:#B8432F;stroke-width:1.1}
/* frame: print (B) */
[data-frame=print] .pm .pk{width:64px;height:70px}
[data-frame=print] .pm .pr{width:58px;height:66px;padding:3px 3px 10px;background:#FBF6EC;box-shadow:0 6px 14px rgba(30,20,10,.4)}
[data-frame=print] .pm .pr i{display:block;width:100%;height:100%;background:#999 center/cover;filter:sepia(.18) saturate(.9)}
[data-frame=print] .pm .pr.p0{z-index:3;transform:rotate(var(--r,-3deg))}
[data-frame=print] .pm .pr.p1{left:-6px;top:-4px;z-index:2;transform:rotate(-9deg)}
[data-frame=print] .pm .pr.p2{left:6px;top:-2px;z-index:1;transform:rotate(8deg)}
[data-frame=print] .pm .tip{position:absolute;left:25px;top:62px;width:8px;height:8px;background:#FBF6EC;transform:rotate(45deg)}
[data-frame=print] .pm .n{right:-10px;top:-10px;background:#1C1714;color:#FF9A3C;font:16px 'Pix',monospace;height:22px}
[data-frame=print] .pm .teth path{stroke:rgba(255,248,235,.95);stroke-width:1.2}

/* ============ view modes (body[data-view]) ============
   pin rests: photo = above the point; mix = floating at offset (--dx,--dy); dots = collapsed into the point */
.pm .pin{transform:translate(-33px,-72px) scale(1)}
body[data-view=mix] .pm .pin{transform:translate(calc(var(--dx) - 33px),calc(var(--dy) - 32px)) scale(.82)}
body[data-view=mix] .pm .tip{opacity:0}
.pm .teth{transform:scale(0);opacity:0}
body[data-view=mix] .pm .teth{transform:scale(1);opacity:1}
body[data-view=dots] .pm .pin{transform:translate(-33px,-34px) scale(.4);opacity:0;pointer-events:none}
body[data-view=photo] .dt{transform:scale(.4);opacity:0}
body[data-view=smart] .dt{opacity:calc(1 - var(--t,0));transform:scale(calc(1 - var(--t,0)*.6))}
body[data-view=smart] .pm .pin{opacity:var(--sv,0);transform:translate(-33px,-72px) translateY(calc((1 - var(--sv,0))*38px)) scale(calc(.4 + var(--sv,0)*.6))}
body[data-view=photo] .pm .pin{opacity:var(--sv,1);transform:translate(-33px,-72px) translateY(calc((1 - var(--sv,1))*30px)) scale(calc(.5 + var(--sv,1)*.5))}
body[data-view=photo].zooming .pm .pin{transition:none}
body.mz-hide .pm .pin{pointer-events:none}
body[data-view=smart].zooming .dt,body[data-view=smart].zooming .pm .pin{transition:none}
body[data-view=smart] .pm .pin[data-off]{pointer-events:none}
.pm.leave .pin{opacity:0!important;transform:translate(-33px,-50px) scale(.5)!important}
.pm.enter .pin{opacity:0!important;transform:translate(-33px,-40px) scale(.6)!important;transition:none!important}
body:not([data-view=smart]) .mk-l{opacity:0}
body[data-view=smart] .mk-l{opacity:calc(1 - var(--t,0)*2)}
.dt .hit{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%}

#hint-zoom{position:fixed;left:0;right:0;top:58%;z-index:6;text-align:center;font:12.5px var(--f-ui);color:var(--sub);pointer-events:none;transition:opacity .4s}

/* ============ home bottom ============ */
#home{position:fixed;left:0;right:0;bottom:var(--tab-h);z-index:30;transition:transform var(--d) var(--spring),opacity .3s}
body.sheet-min #home .hs{transform:translateY(calc(100% - 46px))}
/* soft sheet (C) */
.hs{background:var(--sheet);border-radius:30px 30px 0 0;box-shadow:0 -8px 30px rgba(120,100,80,.14);padding:9px 20px 16px;transition:transform var(--d) var(--spring)}
.grab{width:38px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 8px;display:block;filter:brightness(.85)}
[data-palette=peach] .grab{background:#E5DCCF}
.hs-l{font:17px/1.5 var(--f-text);color:var(--ink)}
.hs-l em{font-style:normal;color:var(--num);font-size:22px;margin:0 2px}
.lights{display:flex;gap:7px;margin-top:9px;flex-wrap:nowrap;overflow:hidden}
.lights i{flex:none;width:12px;height:12px;border-radius:50%;background:#E8E0D4}
.lights i.on{background:radial-gradient(circle,#fff 0 25%,rgb(var(--dot)) 75%);box-shadow:0 0 6px 2px rgba(var(--dot),.6)}
.rc{display:flex;gap:12px;align-items:center;margin-top:14px;background:var(--card);border-radius:22px;padding:9px;box-shadow:0 3px 14px rgba(120,100,80,.1)}
.rc .im{flex:none;width:64px;height:64px;border-radius:16px;background:#eee center/cover}
.rc .t{font:16px var(--f-text);display:flex;justify-content:space-between;gap:8px}
.rc .t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc .t small{flex:none;font-size:12px;color:var(--mute)}
.rc .q{font:13px var(--f-text);color:var(--sub);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg{display:inline-flex;align-items:center;gap:3px;font:11.5px var(--f-text);padding:2px 9px;border-radius:10px;white-space:nowrap}
.tgs{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
/* journal (A) */
.hj{position:relative;background:var(--sheet);padding:16px 0 14px;box-shadow:0 -6px 18px -8px rgba(60,40,20,.25)}
.hj::before{content:'';position:absolute;left:0;right:0;top:-10px;height:12px;background:var(--sheet);clip-path:polygon(0 60%,4% 30%,9% 70%,14% 20%,20% 60%,26% 35%,31% 75%,37% 25%,43% 65%,49% 30%,55% 70%,61% 20%,67% 60%,72% 30%,78% 75%,84% 25%,90% 65%,95% 35%,100% 60%,100% 100%,0 100%)}
.hj-h{display:flex;justify-content:space-between;align-items:baseline;padding:0 22px}
.hj-h b{font:22px var(--f-hand);font-weight:400}
.hj-h span{font:14px var(--f-hand);color:var(--sub)}
.polas{display:flex;gap:14px;overflow-x:auto;padding:16px 20px 8px;scrollbar-width:none;scroll-snap-type:x mandatory}
.polas::-webkit-scrollbar{display:none}
.pola{flex:none;width:122px;padding:7px 7px 30px;background:#FFFDF8;box-shadow:0 1px 2px rgba(60,40,20,.18),0 8px 18px -6px rgba(60,40,20,.35);position:relative;scroll-snap-align:start}
.pola .im{height:96px;background:#ddd center/cover}
.pola .c{position:absolute;left:4px;right:4px;bottom:7px;text-align:center;font:14px var(--f-text);color:#4A3B30;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tape{position:absolute;left:50%;top:-9px;width:58px;height:16px;margin-left:-29px;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 4px,transparent 4px 8px);clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,100% 0,96% 12%,100% 25%,96% 40%,100% 55%,96% 70%,100% 85%,97% 100%,0 100%,4% 85%,0 70%,4% 55%,0 40%,4% 25%)}
/* roll (B) */
.hr{background:#221B16;box-shadow:0 -10px 30px rgba(0,0,0,.4);position:relative;padding:20px 0 22px}
.holes{position:absolute;left:0;right:0;height:8px;background-image:linear-gradient(90deg,#E9DFCF 0 11px,transparent 11px 22px);background-size:22px 8px;background-position:8px 0;opacity:.85;border-radius:2px}
.hr .holes.t{top:6px}.hr .holes.b{bottom:6px}
.hr-k{display:flex;gap:18px;padding:0 18px;font:700 8px var(--f-mono);color:#E9A040;letter-spacing:1.5px;opacity:.9;white-space:nowrap;overflow:hidden}
.frames{display:flex;gap:8px;overflow-x:auto;padding:8px 16px 4px;scrollbar-width:none}
.frames::-webkit-scrollbar{display:none}
.frm{flex:none;width:116px}
.frm .im{height:86px;background:#555 center/cover;position:relative;filter:sepia(.15) saturate(.92)}
.frm .im .dstamp{position:absolute;right:5px;bottom:2px;font-size:13px}
.frm .c{font:12px var(--f-disp);color:#E8DCC8;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* stats card (smart) */
.st{margin:0 12px 10px;border-radius:28px;padding:16px 20px 18px;background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);box-shadow:var(--shadow);border:1px solid var(--glass-b)}
.st-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.st-h .l{font:16px var(--f-text)}
.st-h .y{font:500 12px var(--f-ui);color:var(--sub);padding:4px 10px;border-radius:12px;background:var(--line)}
.st-n{display:flex;justify-content:space-between;margin-top:14px}
.st-n b{display:block;font:600 24px var(--f-ui);font-variant-numeric:tabular-nums}
.st-n span{font:12px var(--f-ui);color:var(--sub)}
.st-p{display:flex;justify-content:space-between;align-items:center}
.st-p .t{font:600 17px var(--f-ui)}.st-p .s{font:12.5px var(--f-ui);color:var(--sub);margin-top:2px}
.avs{display:flex;margin-right:2px}.avs i{width:34px;height:34px;border-radius:50%;border:2px solid #fff;margin-left:-10px;background:#ddd center/cover}
.empty-h{text-align:center;padding:8px 0 4px}
.empty-h .t{font:19px var(--f-text)}.empty-h .d{font:13px/1.6 var(--f-text);color:var(--sub);margin-top:4px}
.empty-h .row{justify-content:center;gap:10px;margin-top:14px}

/* ============ tabbar ============ */
#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:55;height:var(--tab-h);padding:6px 14px var(--sab);display:flex;justify-content:space-between;align-items:flex-start;background:var(--tab-bg);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border-top:.5px solid var(--line)}
#tabbar button{width:62px;display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:4px;color:var(--tab-off);font:500 11px var(--f-text);transition:color .2s,transform var(--d-fast) var(--spring-fast)}
#tabbar button:active{transform:scale(.92)}
#tabbar button.on{color:var(--tab-on)}
#tabbar .fab{margin-top:-20px}
#tabbar .fab b{width:58px;height:58px;border-radius:22px;background:var(--ac-grad);box-shadow:0 8px 18px rgba(255,140,110,.45);display:flex;align-items:center;justify-content:center;border:3px solid #fff;color:#fff}
[data-layout=journal] #tabbar .fab b{border-radius:50%;width:64px;height:64px;border:4px solid #F7F0E3;box-shadow:0 0 0 2px #B8432F,0 6px 14px rgba(120,40,20,.35);font:22px var(--f-hand);color:#FFF3E6}
[data-layout=journal] #tabbar{background:#F7F0E3;border-top:1px dashed rgba(90,70,50,.25)}
[data-layout=journal] #tabbar button{font-family:var(--f-ui)}
[data-layout=roll] #tabbar .fab b{border-radius:50%;background:linear-gradient(145deg,#E8E2D8,#9A9288);padding:5px;border:0;box-shadow:0 4px 12px rgba(0,0,0,.5)}
[data-layout=roll] #tabbar .fab b i{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFB061,#E2662A);box-shadow:inset 0 -3px 6px rgba(120,40,0,.4)}
[data-layout=roll] #tabbar .fab span{color:#FF9A3C;font-size:11px;margin-top:3px}
[data-layout=roll] #tabbar{border-top:0}

/* ============ pages ============ */
.page{position:fixed;inset:0;z-index:50;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(var(--sat) + 16px) 20px calc(var(--tab-h) + 28px)}
.page.push{z-index:60;padding-bottom:calc(var(--sab) + 30px)}
.page.slide-in{animation:pushin var(--d) var(--spring) both}
.page.slide-out{animation:pushout .36s var(--spring) both}
.page.fade-in{animation:fadein .28s ease both}
@keyframes pushin{from{transform:translate3d(100%,0,0)}to{transform:none}}
@keyframes pushout{to{transform:translate3d(100%,0,0)}}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}}
[data-palette=peach] .page{background:linear-gradient(180deg,#FBEFE6 0%,#F8F3EA 45%,#EEF4EE 100%)}
[data-palette=kraft] .page{background-color:#F1E8D8;background-image:url(img/paper-light.png),radial-gradient(rgba(120,95,70,.14) 1px,transparent 1.2px);background-size:256px,16px 16px;background-blend-mode:multiply,normal}
.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.pg-h{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;z-index:2}
.h1{font:500 28px var(--f-disp);letter-spacing:.3px}
.sub{color:var(--sub)}
.wbtn{width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 2px 8px rgba(120,100,80,.08)}
[data-palette=darkroom] .wbtn{background:rgba(243,235,221,.1);box-shadow:none}
[data-palette=kraft] .wbtn{background:transparent;box-shadow:none}
.card{position:relative;background:var(--card);border-radius:22px;padding:16px;box-shadow:0 4px 18px rgba(140,110,90,.08)}
[data-palette=darkroom] .card{background:var(--bg2);color:var(--ink)}
[data-palette=kraft] .card{border-radius:4px;background:#FFFDF8;box-shadow:0 1px 2px rgba(60,40,20,.15),0 6px 14px -8px rgba(60,40,20,.3)}
.btn{height:50px;border-radius:16px;font:600 16px var(--f-ui);display:flex;align-items:center;justify-content:center;gap:6px;flex:1;transition:transform var(--d-fast) var(--spring-fast),opacity .2s}
.btn:active{transform:scale(.96)}
.btn.pri{background:var(--ac-grad);color:#fff;box-shadow:0 8px 18px -6px rgba(255,140,110,.6)}
[data-palette=darkroom] .btn.pri{box-shadow:0 8px 18px -6px rgba(226,102,42,.6)}
.btn.sec{background:var(--line)}
.btn:disabled{opacity:.6}
.lnk{color:var(--ac-ink);font-weight:600;font-size:13px}

/* ============ detail ============ */
#page-dt{padding:0;overflow-x:hidden}
.dt-top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--sat) + 10px) 16px 8px}
.dt-top .d{font:15px var(--f-text);color:var(--sub)}
.dt-body{padding:0 26px 30px;position:relative;z-index:2}
.hero{position:relative;margin:10px auto 0;width:300px;height:340px}
.hero .main{position:absolute;inset:0;background:#ddd center/cover;transition:opacity .35s}
.hero .sec{position:absolute;background:#ddd center/cover}
.chipf{position:absolute;display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:18px;font:13.5px var(--f-text);box-shadow:0 6px 16px rgba(140,110,90,.2);white-space:nowrap;z-index:3}
[data-frame=round] .hero .main{border-radius:150px 150px 26px 26px;border:6px solid #fff;box-shadow:0 18px 40px -12px rgba(140,100,80,.45)}
[data-frame=round] .hero .sec{right:-10px;bottom:-24px;width:92px;height:92px;border-radius:24px;border:4px solid #fff;transform:rotate(7deg);box-shadow:0 10px 20px -6px rgba(140,100,80,.4)}
[data-frame=round] .chipf.w{left:-22px;top:46px;background:#fff;transform:rotate(-6deg)}
[data-frame=round] .chipf.m{left:-30px;bottom:30px;background:#EEF0FB;border:2px solid #fff;transform:rotate(4deg)}
[data-frame=polaroid] .hero{width:338px;height:360px;margin-top:16px}
[data-frame=polaroid] .hero .pf{position:absolute;left:0;top:0;width:338px;padding:12px 12px 56px;background:#FFFDF8;transform:rotate(-2.2deg);box-shadow:0 2px 3px rgba(60,40,20,.15),0 14px 30px -10px rgba(60,40,20,.45)}
[data-frame=polaroid] .hero .main{position:relative;inset:auto;height:262px}
[data-frame=polaroid] .hero .pf .cap{position:absolute;left:16px;right:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;bottom:16px;text-align:center;font:17px var(--f-text);color:#4A3B30}
[data-frame=polaroid] .hero .sec{right:-8px;top:200px;width:130px;height:130px;border:7px solid #FFFDF8;border-bottom-width:24px;transform:rotate(6deg);box-shadow:0 10px 20px -6px rgba(60,40,20,.45);z-index:2}
[data-frame=polaroid] .hero .stamp{position:absolute;right:-26px;top:-28px;width:108px;height:108px;z-index:4}
[data-frame=polaroid] .chipf{display:none}
[data-frame=print] .hero{width:auto;height:430px;margin:0 -26px}
[data-frame=print] .hero .main{filter:sepia(.2) saturate(.92) contrast(1.02)}
[data-frame=print] .hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 50%,rgba(40,20,5,.45)),linear-gradient(rgba(0,0,0,.35),transparent 120px);pointer-events:none}
[data-frame=print] .hero .sec{display:none}
[data-frame=print] .hero .dstamp{position:absolute;right:18px;bottom:16px;font-size:22px;z-index:2}
[data-frame=print] .hero .holes{bottom:-12px;height:7px;z-index:3}
[data-frame=print] .hero .bar{position:absolute;left:0;right:0;bottom:-14px;height:14px;background:#1A1512;z-index:2}
[data-frame=print] .chipf{display:none}
[data-layout=roll] #page-dt{background:#F2EADC;color:#2A221C;--ink:#2A221C;--sub:#7E6F60;--mute:#9C8C7A;--line:#D8CBB6}
[data-layout=roll] #page-dt .dt-top{position:absolute;left:0;right:0}
[data-layout=roll] #page-dt .dt-top .wbtn{background:rgba(20,14,10,.35);color:#fff;border-radius:50%}
[data-layout=roll] #page-dt .dt-top .d{display:none}
.meta1{display:flex;align-items:center;gap:8px;margin-top:34px}
.meta1 .p{font:13px var(--f-text);color:var(--sub)}
.dt-t{font:500 28px/1.3 var(--f-disp);margin-top:6px;letter-spacing:.5px}
[data-layout=journal] .dt-t{font:600 30px/1.3 var(--f-text);letter-spacing:3px;margin-top:20px}
[data-layout=roll] .dt-t{font:600 27px/1.3 var(--f-disp);letter-spacing:1px}
.stars{display:flex;gap:3px;margin-top:4px}
.dt-note{margin-top:12px;background:rgba(255,255,255,.78);border-radius:22px;padding:14px 16px;font:15.5px/1.85 var(--f-text);box-shadow:0 4px 18px rgba(140,110,90,.08);white-space:pre-wrap}
[data-layout=journal] .dt-note{background:none;box-shadow:none;border-radius:0;padding:4px 0;font-size:16px;line-height:36px;background-image:linear-gradient(transparent 35px,rgba(90,70,50,.22) 35px,rgba(90,70,50,.22) 36px);background-size:100% 36px}
[data-layout=roll] .dt-note{background:none;box-shadow:none;padding:0;border-radius:0;font-size:14.5px;line-height:1.95;color:#3A3029}
.memo{display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px 14px;border-radius:18px;background:linear-gradient(90deg,#EAF3FF,#F3ECFB);font:13.5px/1.5 var(--f-text);color:#5A6B85}
.memo .orb{flex:none;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#fff 0 25%,rgb(var(--dot)) 75%);box-shadow:0 0 10px 3px rgba(var(--dot),.55)}
.memo b{color:#4A90E2}
.memo .tix b{color:inherit}
[data-layout=journal] .memo{background:#F6DCCB;border-radius:6px;color:#4A3B30;padding:0;overflow:hidden;align-items:stretch}
[data-layout=journal] .memo .orb{display:none}
.tix{flex:none;width:94px;white-space:nowrap;text-align:center;padding:10px 0;border-right:2px dashed rgba(184,67,47,.4);color:#B8432F}
.tix b{display:block;font:700 26px var(--f-mono)}.tix span{font-size:11px}
[data-layout=journal] .memo .tx{padding:10px 12px;align-self:center}
.tix{display:none}[data-layout=journal] .tix{display:block}
.grid4{display:flex;margin-top:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:12.5px var(--f-disp);color:#5A4C40}
.grid4>div{flex:1;padding:8px 0;text-align:center;border-right:1px solid var(--line)}.grid4>div:last-child{border:0}
.grid4 small{display:block;font:10px var(--f-mono);color:#9C8C7A;letter-spacing:1px}
.fr-k{display:flex;justify-content:space-between;font:700 10.5px var(--f-mono);letter-spacing:2.5px;color:#B5651D;margin-top:28px}
.fr-k span:last-child{letter-spacing:1px;color:#8E7F6E}
.fr-i{font:italic 16px 'GaramondI',Georgia,serif;color:#7E6F60;margin-top:-2px}
.chips2{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;align-items:center}
.chip2{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:18px;font:14px var(--f-text);background:#EEF0FB;box-shadow:0 2px 0 rgba(60,40,20,.1)}
.chip2.w{background:#FCEBC8}
.box-tag{padding:4px 12px;border:1.5px solid #5E8B6E;color:#4E7A4A;font:15px var(--f-hand);transform:rotate(-3deg);border-radius:2px}
.dt-ph{display:flex;gap:10px;overflow-x:auto;margin:18px -26px 0;padding:4px 26px 6px;scrollbar-width:none}
.dt-ph::-webkit-scrollbar{display:none}
.dt-ph .th{flex:none;width:72px;height:72px;border-radius:16px;background:#ddd center/cover;position:relative;border:2px solid transparent;transition:transform .3s var(--spring)}
.dt-ph .th.on{border-color:var(--ac)}
.dt-ph .th .cv{position:absolute;left:4px;bottom:4px;font:600 10px var(--f-ui);color:#fff;background:rgba(0,0,0,.45);padding:1px 6px;border-radius:8px}
[data-layout=journal] .dt-ph .th,[data-layout=roll] .dt-ph .th{border-radius:3px}
.dt-act{display:flex;gap:10px;margin-top:18px}
.dt-act .btn{height:44px;font-size:14px;border-radius:14px;background:var(--line)}
.dt-act .btn.cover{background:var(--ac-grad);color:#fff}
.dt-act .btn.del{color:#C0442B}

/* ============ film overlay ============ */
#film{position:fixed;inset:0;z-index:80;overflow:hidden;color:#fff;touch-action:none}
#film .f-bg{position:absolute;inset:0;background:rgba(40,30,22,.35);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);opacity:0;transition:opacity .45s ease}
#film .f-amb{position:absolute;inset:-60px;opacity:0;transition:opacity .45s ease}
#film .f-amb i{position:absolute;inset:0;background:center/cover;filter:blur(34px) saturate(1.2) brightness(.62);transform:scale(1.2);transition:opacity .4s ease}
#film .f-amb::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 20%,rgba(20,12,6,.55) 100%)}
#film.on .f-bg,#film.on .f-amb{opacity:1}
.f-head{position:absolute;left:30px;right:80px;top:calc(var(--sat) + 30px);opacity:0;transform:translateY(8px);transition:opacity .35s ease .08s,transform var(--d-soft) var(--spring-soft) .08s}
#film.on .f-head{opacity:1;transform:none}
.f-head .s{font:13px var(--f-ui);color:rgba(255,255,255,.72)}
.f-head .t{font:500 32px var(--f-text);margin-top:2px;letter-spacing:1px}
.f-head .d{font:14px var(--f-text);color:rgba(255,255,255,.78);margin-top:4px}
.f-mini{position:absolute;left:30px;top:calc(var(--sat) + 38px);font:600 17px var(--f-text);opacity:0;transform:translateY(6px);transition:opacity .25s,transform var(--d) var(--spring)}
.f-mini span{font:13px var(--f-ui);color:rgba(255,255,255,.6);font-weight:400;margin-left:6px}
.f-x{position:absolute;right:22px;top:calc(var(--sat) + 30px);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
#film.on .f-x{opacity:1}
.f-stage{position:absolute;left:0;right:0;top:calc(var(--sat) + 270px);transform-origin:50% 50%;will-change:transform}
.f-move{transition:transform var(--d-soft) var(--spring-soft)}
.emb{overflow:visible;width:100%}
.emb-c{display:flex;touch-action:pan-y pinch-zoom;align-items:center}
.fs{flex:0 0 250px;min-width:0;display:flex;justify-content:center}
.fr{position:relative;width:250px;height:266px;background:linear-gradient(180deg,#2A1E16,#1A120D 50%,#2A1E16);box-shadow:0 22px 46px -12px rgba(0,0,0,.6);will-change:transform;transform-origin:50% 50%;border-left:1px solid rgba(255,190,120,.08)}
.fr .ho{position:absolute;left:7px;right:4px;height:7px;background-image:linear-gradient(90deg,rgba(255,248,236,.92) 0 9px,transparent 9px 18.6px);background-size:18.6px 7px}
.fr .ho.t{top:6px}.fr .ho.b{bottom:6px}
.fr .ds{position:absolute;left:10px;right:10px;top:16px;display:flex;justify-content:space-between;align-items:center}
.fr .ds b{font:15px 'Pix',monospace;letter-spacing:1px;color:#FFB15E;text-shadow:0 0 4px rgba(255,140,40,.6);font-weight:400}
.fr .ds span{font:700 7px var(--f-mono);letter-spacing:1px;color:rgba(255,177,94,.55)}
.fr .ph{position:absolute;left:10px;top:34px;width:230px;height:180px;border-radius:2px;overflow:hidden;background:#2a2a2a}
.fr .ph img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none;pointer-events:none}
.fr .cap{position:absolute;left:6px;right:6px;top:219px;height:26px;padding:0 4px;display:flex;align-items:center;gap:4px;border-radius:6px;transition:background .2s}
.fr .cap span{flex:1;font:13.5px var(--f-text);color:#FFF7EA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr .cap svg{flex:none;transition:transform .3s var(--spring)}
.fr .dim{position:absolute;inset:0;background:#0c0806;opacity:0;pointer-events:none}
.fs:not(.is-sel) .cap svg{opacity:0}
#film.exp .fs.is-sel .cap{background:rgba(255,200,140,.16)}
#film.exp .fs.is-sel .cap svg{transform:rotate(180deg)}
.f-dots{position:absolute;left:0;right:0;top:calc(var(--sat) + 560px);display:flex;justify-content:center;gap:6px;transition:opacity .3s}
.f-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.4);transition:width var(--d) var(--spring),background .3s}
.f-dots i.on{width:22px;background:#fff}
.f-hint{position:absolute;left:0;right:0;top:calc(var(--sat) + 584px);text-align:center;font:13px var(--f-ui);color:rgba(255,255,255,.62);transition:opacity .3s}
.f-bar{position:absolute;left:50%;bottom:calc(var(--sab) + 40px);width:296px;margin-left:-148px;height:68px;border-radius:34px;display:flex;justify-content:space-around;align-items:center;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,.2);opacity:0;transform:translateY(20px);transition:opacity .3s,transform var(--d-soft) var(--spring-soft)}
#film.on .f-bar{opacity:1;transform:none}
.f-bar button{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.f-bar button:active{background:rgba(255,255,255,.15)}
.f-card{position:absolute;left:16px;right:16px;top:calc(var(--sat) + 460px);bottom:calc(var(--sab) + 18px);border-radius:30px;padding:10px 26px 20px;color:#4A4038;background:rgba(246,240,232,.92);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);transform:translateY(110%);transition:transform var(--d-soft) var(--spring-soft);overflow-y:auto}
.f-card .in{transition:opacity .18s ease}
#film.exp .f-card{transform:none}
#film.exp .f-stage{transform:translateY(-140px)}
#film.exp .f-head,#film.exp .f-dots,#film.exp .f-hint,#film.exp .f-bar{opacity:0;pointer-events:none}
#film.exp .f-mini{opacity:1;transform:none}
.f-card .k{display:flex;align-items:center;gap:8px;margin-top:8px}
.f-card .k .p{flex:1;font:13px var(--f-text);color:#A0958A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-card .nt{font:17px/1.85 var(--f-text);margin-top:12px;white-space:pre-wrap}
.f-card .chips2 .chip2{font-size:14px;box-shadow:none}
.f-card .chip2.t{background:rgba(120,100,80,.08);color:#6E655C}

/* ============ check-in ============ */
.ck .h1{margin-top:14px}
.search{display:flex;align-items:center;gap:8px;height:46px;border-radius:16px;padding:0 14px;background:var(--card);margin-top:14px;box-shadow:0 2px 10px rgba(120,100,80,.06)}
[data-palette=darkroom] .search{background:var(--bg2)}
.search input{flex:1;border:0;outline:0;background:none;font-size:15px}
.loc{gap:6px;font-size:12px;color:var(--sub);margin:10px 2px 6px}
.opts{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto;background:var(--card);border-radius:18px;padding:4px}
[data-palette=darkroom] .opts{background:var(--bg2)}
.opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;text-align:left;width:100%}
.opt.on{background:var(--line)}
.oi{flex:none;width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.on1{font:600 15px var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.od{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oa{flex:none;font-size:12px;color:var(--sub)}
.sec-t{font:600 15px var(--f-ui);margin:20px 0 10px}
.sec-t small{font-weight:400;color:var(--sub);font-size:12px;margin-left:6px}
.cchips{display:flex;flex-wrap:wrap;gap:8px}
.cchip{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 14px;border-radius:18px;background:var(--card);font:14px var(--f-text);box-shadow:0 1px 4px rgba(120,100,80,.06);transition:background .2s,color .2s,transform var(--d-fast) var(--spring-fast)}
[data-palette=darkroom] .cchip{background:var(--bg2)}
.cchip:active{transform:scale(.95)}
.cchip.on{background:var(--ink);color:var(--bg)}
.cchip.on svg{stroke:currentColor!important}
.temp{width:64px;height:36px;border-radius:18px;border:0;background:var(--card);text-align:center;font-size:14px;outline:0}
[data-palette=darkroom] .temp{background:var(--bg2)}
.photos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.photos .p,.photos label{aspect-ratio:1;border-radius:14px;position:relative}
.photos label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;color:var(--sub);background:var(--card);border:1.5px dashed var(--line);cursor:pointer}
.photos .rm{position:absolute;right:4px;top:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}
.photos .p.cv::after{content:'封面';position:absolute;left:4px;bottom:4px;font:600 10px var(--f-ui);color:#fff;background:var(--ac);padding:1px 6px;border-radius:8px}
.hint{gap:5px;font-size:12px;color:var(--sub);margin-top:8px}.hint.warn{color:#C27A45}
.ck-stars{display:flex;gap:4px}
.field{width:100%;min-height:84px;border:0;outline:0;border-radius:18px;padding:14px;background:var(--card);font:15px/1.7 var(--f-text);resize:none}
[data-palette=darkroom] .field{background:var(--bg2)}
.savebar{position:sticky;bottom:0;margin:22px -20px 0;padding:12px 20px calc(var(--sab) + 4px);background:linear-gradient(transparent,var(--bg) 30%)}
#pickbar{position:fixed;inset:0;z-index:70;pointer-events:none}
#crosshair{position:absolute;left:50%;top:45%;transform:translate(-50%,-100%);filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.pb-box{position:absolute;left:12px;right:12px;bottom:calc(var(--sab) + 16px);pointer-events:auto;padding:14px;border-radius:24px;background:var(--glass);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.pb-box input{height:44px;border-radius:14px;border:0;padding:0 14px;background:var(--card);outline:0}

/* ============ timeline / fav / me / settings ============ */
.tl-d{display:flex;align-items:center;gap:10px;margin:22px 0 12px}
.tl-d .n{font:600 30px/1 var(--f-ui);letter-spacing:-1px}
.tl-d .l{flex:1;height:1px;background:var(--line)}
.ent{margin-bottom:14px;padding:12px;cursor:pointer}
.ent .im{height:180px;border-radius:14px;background:#ddd center/cover}
[data-palette=kraft] .ent .im{border-radius:2px}
.ent .t{font:17px var(--f-text);margin-top:10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.ent .q{font:14px/1.6 var(--f-text);color:var(--sub);margin-top:4px}
.ent .m{font-size:12px;color:var(--mute);margin-top:6px;display:flex;gap:6px;align-items:center}
.empty-p{text-align:center;color:var(--sub);padding:80px 0;font:15px/1.8 var(--f-text)}
.me-top{display:flex;align-items:center;gap:14px}
.me-av{width:60px;height:60px;border-radius:50%;background:var(--ac-grad);border:3px solid #fff;display:flex;align-items:center;justify-content:center;font:24px var(--f-disp);color:#fff;box-shadow:0 4px 12px rgba(200,120,90,.25)}
.kv{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;text-align:center}
.kv b{display:block;font:600 22px var(--f-ui)}.kv span{font-size:12px;color:var(--sub)}
.li{display:flex;align-items:center;gap:12px;width:100%;padding:14px 4px;border-bottom:1px solid var(--line);text-align:left;font:15px var(--f-ui)}
.li:last-child{border:0}.li .r{margin-left:auto;color:var(--sub);font-size:13px;display:flex;align-items:center;gap:4px}
.li .ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.hm{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:3px;margin-top:12px}
.hm i{aspect-ratio:1;border-radius:3px;background:var(--line)}
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.th-c{text-align:center;transition:transform var(--d-fast) var(--spring-fast)}
.th-c:active{transform:scale(.96)}
.th-c .pv{aspect-ratio:240/400;border-radius:16px;background:#ddd top/cover;box-shadow:0 6px 16px -6px rgba(80,60,40,.35);border:3px solid transparent;transition:border-color .25s}
.th-c.on .pv{border-color:var(--ac)}
.th-c b{display:block;font:600 13px var(--f-ui);margin-top:8px}
.th-c span{display:block;font-size:11px;color:var(--sub);margin-top:2px;line-height:1.4}
.th-c .ck{display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--ac);color:#fff;align-items:center;justify-content:center;margin-top:6px;opacity:0;transform:scale(.5);transition:opacity .2s,transform var(--d) var(--spring-soft)}
.th-c.on .ck{opacity:1;transform:none}
.els{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.els span{font-size:11.5px;padding:4px 10px;border-radius:10px;background:var(--line);color:var(--sub)}
.sg{display:flex;gap:6px}
.sg button{flex:1;height:38px;border-radius:12px;background:var(--line);font-size:14px;transition:background .2s,color .2s}
.sg button.on{background:var(--ink);color:var(--bg)}
.nick{height:44px;border:0;outline:0;border-radius:14px;padding:0 14px;background:var(--line);width:100%;font-size:15px}

#toast{position:fixed;left:50%;top:calc(var(--sat) + 16px);z-index:200;transform:translate(-50%,-30px);opacity:0;padding:10px 18px;border-radius:20px;background:rgba(40,34,30,.86);color:#fff;font:500 14px var(--f-ui);pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .25s,transform var(--d) var(--spring);max-width:88vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
.theme-fade{animation:themefade .45s ease}
@keyframes themefade{from{opacity:.4}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.2s!important;transition-duration:.2s!important;transition-timing-function:ease!important}}

#page-dt{z-index:90}#page-ck{z-index:95}#pickbar{z-index:96}
.savebar .btn{width:100%}

/* ============ photo mosaic (mosaic.js) ============ */
.cl-lb{transform:translate(-50%,-50%);font:500 11px/1 var(--f-ui,-apple-system,sans-serif);color:var(--ink2,#7A6E64);white-space:nowrap;letter-spacing:.5px;text-shadow:0 0 3px rgba(255,255,255,.9),0 0 6px rgba(255,255,255,.8);opacity:var(--mz,0);pointer-events:none}
.cl-lb.on{color:#fff;font-weight:700;font-size:12.5px;text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 8px rgba(0,0,0,.35)}
.cl-lb b{display:inline-block;margin-left:3px;min-width:15px;padding:2px 4px;border-radius:8px;background:rgba(255,255,255,.92);color:var(--ink,#43392F);font-size:9.5px;text-shadow:none;text-align:center}
[data-palette=darkroom] .cl-lb{color:#A99783;text-shadow:0 0 4px #000}
#mz-title{position:fixed;left:22px;top:calc(var(--sat) + 136px);z-index:40;pointer-events:none;font-family:MaShan,WenKai,serif;font-size:58px;line-height:1;color:#F2A06A;letter-spacing:2px;
 text-shadow:0 2px 0 rgba(255,255,255,.9),0 6px 18px rgba(242,160,106,.35);opacity:0;transform:translateY(10px) rotate(-4deg);transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.3,1.2)}
#mz-title.on{opacity:1;transform:none}
[data-palette=kraft] #mz-title{color:#B8432F;text-shadow:0 2px 0 #FFFDF6,0 5px 14px rgba(184,67,47,.25)}
[data-palette=darkroom] #mz-title{color:#FF9A3C;font-family:GaramondI,"Noto Serif SC",serif;font-style:italic;text-shadow:0 0 18px rgba(255,154,60,.45)}
#mz-share{position:fixed;right:16px;top:calc(var(--sat) + 84px);z-index:41;width:38px;height:38px;border-radius:50%;border:0;display:grid;place-items:center;
 background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:0 4px 14px rgba(60,40,20,.14);color:var(--ink,#43392F);transition:transform .2s,opacity .25s}
#mz-share:active{transform:scale(.9)}
#mz-share.hidden{opacity:0;pointer-events:none;transform:scale(.8)}
[data-palette=darkroom] #mz-share{background:rgba(40,32,26,.8);color:#F3EBDD}
[data-palette=kraft] #mz-share{background:#FFFDF6;border-radius:6px;box-shadow:2px 3px 0 rgba(90,60,40,.18)}
[data-layout=journal] #mz-share{top:calc(var(--sat) + 104px)}[data-layout=journal] #mz-title{top:calc(var(--sat) + 156px)}
.mz-l{position:absolute;left:0;top:0;z-index:112;transform-origin:0 0;pointer-events:none;will-change:transform;visibility:hidden}

/* Map album: keep the map visible while browsing a place. */
#seg{display:none}
#tabbar .add-label{font:500 11px var(--f-ui);color:var(--tab-on)}
.ck-intro{font:14px/1.6 var(--f-ui);color:var(--sub);margin:6px 0 16px}


/* Additive browsing controls; existing map and film interactions are preserved. */
.recall-controls{display:flex;gap:12px;margin:16px 0 12px}
.recall-controls label{display:flex;flex:1;flex-direction:column;gap:6px;font-size:12px;color:var(--sub);min-width:0}
.recall-controls select{width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);color:var(--ink);font:14px var(--f-ui)}
.recall-views{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.recall-views button{min-height:44px;padding:0 12px;background:var(--bg2);border-radius:12px;font-size:13px;border:1px solid var(--line)}
.recall-views button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.recall-group{margin-top:12px;border:1px solid var(--line);border-radius:16px;padding:0 12px}
.recall-group summary{min-height:54px;padding:15px 0;cursor:pointer;font-size:15px}
.recall-group small{float:right;color:var(--sub);font-size:12px;margin-left:8px}
.recall-group .ent{margin-bottom:12px}
.recall-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.recall-photos button{min-width:0;text-align:left}.recall-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;display:block}
.recall-photos span{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 0}
.kv .stat-link{flex:1;min-width:0;min-height:64px;text-align:center}.kv .stat-link b{display:block;font:600 26px var(--f-ui)}.kv .stat-link span{display:block;font-size:12px;color:var(--sub)}
.recall-views button:focus-visible,.stat-link:focus-visible,.recall-group summary:focus-visible{outline:2px solid var(--ac-ink);outline-offset:3px}

/* Travel route editor — paper, quiet lines and personal photographs. */
#page-routes{z-index:65}
#page-routes>.pg-h{max-width:1120px;margin:auto;gap:12px;position:sticky;top:0;background:var(--bg);padding:8px 0;z-index:2}
.route-workspace{max-width:1120px;margin:20px auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:start}
.route-preview canvas{display:block;width:100%;height:auto;box-shadow:0 10px 35px rgba(40,50,30,.12);border-radius:3px}
.route-preview>.btn{width:100%;margin:16px 0 10px}.route-preview>.small{text-align:center;line-height:1.6}
.route-editor label{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;font-size:14px;font-weight:600}
.route-editor input{min-height:46px;width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg2);color:var(--ink);font-size:16px}
.route-city-results{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 18px}.route-city-results button{display:flex;gap:8px;align-items:center;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);font-size:13px}.route-city-results small{color:var(--sub);font-size:11px}
.route-stop{display:flex;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.route-number{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:12px;flex:none}
.route-stop-info{flex:1;min-width:0}.route-stop-info b{font-size:15px}.route-stop-info small{display:block;color:var(--sub);font-size:12px;margin-top:4px}.route-stop button{min-width:36px;min-height:44px;border-radius:10px;font-size:16px}.route-stop button:disabled{opacity:.25}.route-stop-info button{font-size:12px;color:var(--ac-ink);padding-right:12px}
.route-help{font-size:14px;line-height:1.7;color:var(--sub);max-width:1120px;margin:16px auto}.route-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;max-width:1120px;margin:24px auto}.route-saved{padding:24px;text-align:left;background:var(--bg2);border:1px solid var(--line);border-radius:18px;display:flex;gap:14px;flex-direction:column}.route-saved b{font:24px var(--f-text)}.route-saved span{font-size:13px;line-height:1.8}.route-saved small{color:var(--sub)}.route-saved .route-eyebrow{font:10px var(--f-ui);letter-spacing:.14em;color:var(--sub)}
#page-routes button:focus-visible,#page-routes input:focus-visible{outline:2px solid var(--ac-ink);outline-offset:3px}
@media(max-width:700px){.route-workspace{grid-template-columns:1fr;gap:26px;margin-top:12px}.route-preview{max-width:390px;width:100%;margin:auto}.route-stop{gap:4px}.route-list{grid-template-columns:1fr}#page-routes>.pg-h .h1{font-size:22px}}
#page-routes>.pg-h .btn{flex:none;width:auto;padding:0 18px;min-height:44px;margin-left:auto}
#page-routes>.pg-h>b{white-space:nowrap}

.ck-photo-info{margin-top:10px;font-size:13px;color:var(--sub)}
.ck-photo-info summary{cursor:pointer;color:var(--ac-ink)}
.ck-photo-info .row{justify-content:space-between;padding:8px 0;line-height:1.6}