:root{--pd:#FF9EC4;--ld:#B69AFB;--cream:#FFF8F0;--paper:#FFFDF9;--plum:#4A3B52;--soft:#8B7B94;--line:#F0E2EC;--g1:#FFEAF4;--g2:#EAE1FF;--g3:#DFFBF0;--pink:#FFD6E8;--sh:0 12px 34px rgba(120,90,140,.16)}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%}
body{font-family:'Quicksand',sans-serif;color:var(--plum);min-height:100%;min-height:100dvh;overflow-x:hidden;position:relative;background:var(--cream)}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 15% 10%,var(--g1),transparent 45%),
             radial-gradient(circle at 85% 20%,var(--g2),transparent 40%),
             radial-gradient(circle at 50% 90%,var(--g3),transparent 45%),
             var(--cream)}
h1,h2,h3,.brand,.days,button{font-family:'Baloo 2',cursive}
.hide{display:none!important}.center{text-align:center}.pad{padding:30px}.big{font-size:3rem}
input:not([type=checkbox]):not([type=file]):not([type=range]),textarea,select{font:inherit;font-weight:600;color:inherit;border:2px solid var(--line);background:var(--cream);border-radius:16px;padding:11px 15px;width:100%;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--ld)}
textarea{resize:vertical;min-height:70px}
button{font-weight:700;border:0;cursor:pointer;transition:transform .15s;-webkit-tap-highlight-color:transparent}
button:hover{transform:translateY(-2px)}
.calc-btn{width:100%;padding:12px;border-radius:18px;font-size:1.02rem;color:#fff;background:linear-gradient(135deg,var(--pd),var(--ld));box-shadow:0 10px 20px rgba(150,120,200,.25)}.calc-btn.sm{width:auto;padding:10px 22px}
.soft,.pill{background:var(--pink);color:var(--plum);padding:9px 17px;border-radius:18px}
.btn-clear{background:#FFD8D8;color:#A24545;padding:8px 16px;border-radius:20px}.rnd{border-radius:50%;width:44px;height:44px;padding:0;flex-shrink:0}
.err{color:#d0443a;min-height:1.3em;font-weight:700;font-size:.9rem}
#auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:20px}
.auth-card{width:min(92vw,380px);background:var(--paper);border-radius:32px;box-shadow:var(--sh);padding:34px 28px;text-align:center;display:flex;flex-direction:column;gap:12px}.auth-card p{color:var(--soft);font-weight:600}

/* header + bottom bar */
header{display:flex;align-items:center;justify-content:center;padding:14px 5vw 6px;position:relative}
.brand{font-size:1.3rem;font-weight:800;display:flex;gap:8px}
.bottom-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:center;gap:6px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--cream) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(120,90,140,.1);
}
.bottom-bar #nav{
  position:static;flex:1;overflow-x:auto;justify-content:flex-start;
  padding:0;background:transparent;gap:6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.bottom-bar #nav::-webkit-scrollbar{display:none}
.gear{width:42px;height:42px;border-radius:50%;background:var(--paper);box-shadow:0 3px 12px rgba(120,90,140,.14);font-size:1.15rem;display:grid;place-items:center;color:var(--soft);padding:0;flex-shrink:0}
.gear-menu{position:absolute;bottom:58px;right:10px;z-index:70;background:var(--paper);border-radius:20px;box-shadow:var(--sh);padding:14px;width:min(92vw,300px);display:flex;flex-direction:column;gap:8px}
.gear-sec{font-size:.78rem;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.04em}
.gear-themes{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gear-themes button{display:flex;align-items:center;gap:5px;background:var(--cream);color:var(--plum);padding:8px 10px;border-radius:12px;font-size:.82rem;text-align:left}
.gear-themes i{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.gear-div{height:1px;background:var(--line);margin:4px 0}
.gear-lo{background:#FFE0E0;color:#A24545;padding:10px;border-radius:14px;font-size:.9rem}

#nav{
  display:flex;gap:4px;overflow-x:auto;justify-content:space-between;
  -webkit-overflow-scrolling:touch;
}
#nav button{
  --nav-lift:0px;--nav-scale:1;
  white-space:nowrap;background:var(--paper);color:var(--soft);
  width:44px;height:44px;padding:0;border-radius:50%;
  box-shadow:0 3px 10px rgba(120,90,140,.1);
  display:grid;place-items:center;flex-shrink:0;
  transform:translate3d(0,var(--nav-lift),0) scale(var(--nav-scale));
  transition:transform .2s cubic-bezier(.22,1,.36,1),
              box-shadow .2s ease,
              background-color .2s ease,
              color .2s ease;
  contain:layout style;
  -webkit-tap-highlight-color:transparent;
}
#nav button .nav-ico{
  font-size:1.25rem;line-height:1;
  transform:translateZ(0);
}
#nav button:hover{
  --nav-lift:-4px;--nav-scale:1.08;
  box-shadow:0 8px 18px rgba(120,90,140,.2);
  color:var(--plum);
}
#nav button:active{
  --nav-lift:-1px;--nav-scale:.96;
  transition-duration:.08s;
}
#nav button.on{
  background:linear-gradient(135deg,var(--pd),var(--ld));color:#fff;
  box-shadow:0 4px 14px rgba(150,100,160,.35);
}
#nav button.on:hover{
  box-shadow:0 10px 22px rgba(150,100,160,.4);
  color:#fff;
}
.gear{
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease,color .2s ease;
  contain:layout style;
  -webkit-tap-highlight-color:transparent;
}
.gear:hover{transform:translate3d(0,-3px,0) rotate(20deg);box-shadow:0 8px 16px rgba(120,90,140,.18);color:var(--pd)}
.gear:active{transform:scale(.94);transition-duration:.08s}
/* Tippy theme */
.tippy-box[data-theme~='couple']{
  background:linear-gradient(135deg,var(--plum),#5a4568);
  color:#fff;font:700 .8rem Quicksand,sans-serif;
  border-radius:12px;padding:2px 4px;
  box-shadow:0 8px 22px rgba(60,40,80,.28);
  letter-spacing:.02em;
}
.tippy-box[data-theme~='couple'][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--plum)}
.tippy-box[data-theme~='couple'][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--plum)}
.tippy-box[data-theme~='couple'] .tippy-content{padding:6px 10px}
@media (hover:none){
  #nav button:hover{--nav-lift:0px;--nav-scale:1;box-shadow:0 3px 10px rgba(120,90,140,.1);color:var(--soft)}
  #nav button.on:hover{color:#fff;box-shadow:0 4px 14px rgba(150,100,160,.35)}
}
@media (prefers-reduced-motion:reduce){
  #nav button,.gear{transition:none}
}
@media (hover:none){
  #nav button:hover{transform:none;box-shadow:0 3px 10px rgba(120,90,140,.1)}
  #nav button:hover .nav-ico{transform:none}
}
.view{display:none;max-width:960px;margin:0 auto;padding:18px 4vw 100px}.view.on{display:block;animation:fin .35s ease}
footer{padding-bottom:90px}
@keyframes fin{from{opacity:0;transform:translateY(8px)}}
.head{text-align:center;margin-bottom:20px}.head h2{font-size:clamp(1.5rem,4vw,2.1rem)}.head p{color:var(--soft);font-weight:600;margin-top:4px;font-size:.92rem}
.card{background:var(--paper);border-radius:28px;box-shadow:var(--sh);border:1px solid var(--line);padding:24px clamp(16px,4vw,32px);margin:0 auto 20px;display:flex;flex-direction:column;gap:12px}.card h3{font-size:1.25rem}
.bar{display:flex;gap:8px;align-items:center}.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--pink);color:var(--plum);border-radius:999px;padding:6px 14px;font-weight:700}.chip input{width:auto;padding:6px 10px;border-radius:10px}.chip b{cursor:pointer;opacity:.6}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);font-weight:600}.li small{display:block;color:var(--soft);font-size:.75rem}.li input[type=checkbox]{accent-color:var(--pd);width:18px;height:18px}.x{cursor:pointer;color:var(--soft);font-size:1.2rem}
.lock{background:var(--g2);border-radius:16px;padding:12px}.q{font:700 1.15rem 'Baloo 2';color:var(--pd)}

/* home */
.hero{text-align:center;padding:10px 0}.script{font-family:'Dancing Script',cursive;font-weight:700;font-size:clamp(2.6rem,9vw,4.4rem);line-height:1.1;color:var(--pd)}
.days{font-size:clamp(5rem,20vw,10rem);line-height:.95;font-weight:800;background:linear-gradient(135deg,var(--pd),var(--ld));-webkit-background-clip:text;background-clip:text;color:transparent}
.days small{display:block;font:700 1.1rem Quicksand;color:var(--soft);-webkit-text-fill-color:var(--soft);margin-top:8px}
.count{display:inline-block;margin:6px 0;padding:10px 22px;border-radius:20px;background:var(--paper);box-shadow:var(--sh);font-weight:700}.count b{color:var(--pd);font-size:1.3rem}
.find{margin:8px 0;padding:10px 20px;background:var(--g3);color:var(--plum);border-radius:20px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-top:26px}
.tile{background:var(--paper);color:var(--plum);border-radius:24px;padding:18px 8px;box-shadow:var(--sh);font-size:1rem}.tile span{display:block;font-size:2rem}

/* ---- MONTHLY NOTE (đẹp, một tờ/tháng) ---- */
.nbar{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.nbar input{width:auto!important}
.note-stage{display:flex;justify-content:center;padding:8px 0 24px}
.month-paper{
  width:min(94vw,580px);min-height:480px;
  background:#FFFEF7;
  border-radius:4px 4px 8px 8px;
  box-shadow:
    0 1px 0 #fff inset,
    0 0 0 1px rgba(180,160,140,.2),
    0 12px 40px rgba(90,60,40,.14),
    0 4px 12px rgba(90,60,40,.08);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  background-image:
    linear-gradient(90deg,transparent 0,transparent 52px,rgba(220,100,120,.28) 52px,rgba(220,100,120,.28) 53.5px,transparent 53.5px),
    repeating-linear-gradient(#FFFEF7,#FFFEF7 31px,#E8DFD0 31px,#E8DFD0 32px);
  background-size:100% 100%,100% 32px;
  background-position:0 0,0 64px;
}
.month-paper::before{
  content:'';position:absolute;top:0;left:0;right:0;height:8px;
  background:linear-gradient(90deg,#E8B4C8,#C9B6E4,#B8D4E8,#D4E8C8,#F0D4B8);
  opacity:.7;
}
.mp-top{display:flex;justify-content:space-between;align-items:baseline;padding:22px 24px 8px 64px;position:relative;z-index:1}
.mp-month{font:700 1.7rem 'Dancing Script',cursive;color:#C45A7A;letter-spacing:.02em}
.mp-status{font-size:.8rem;color:var(--soft);font-weight:600}
.mp-lines{
  flex:1;outline:none;padding:4px 28px 16px 64px;
  font:400 1.2rem/32px 'Patrick Hand',cursive;color:#4A3B32;
  min-height:320px;white-space:pre-wrap;word-break:break-word;
  caret-color:#C45A7A;position:relative;z-index:1;
}
.mp-lines:empty::before,.mp-lines[data-empty="true"]::before{
  content:attr(data-placeholder);opacity:.35;pointer-events:none;
}
.mp-foot{padding:8px 24px 16px 64px;font-size:.78rem;color:#A09080;font-weight:600}

/* ---- ALBUM ---- */
.alb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.alb{background:var(--paper);border-radius:22px;padding:12px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:4px;text-align:left;color:var(--plum)}
.alb .cover{aspect-ratio:3/4;border-radius:14px;background:var(--g2);display:grid;place-items:center;font-size:2.2rem;overflow:hidden}
.alb .cover img{width:100%;height:100%;object-fit:cover}
.alb b{margin-top:6px;font-size:.95rem}.alb small{color:var(--soft);font:700 .78rem Quicksand}
.alb.new{align-items:center;justify-content:center;border:2px dashed var(--pd);background:transparent;box-shadow:none;font-size:1.8rem;min-height:200px;color:var(--pd);aspect-ratio:3/4}

#tb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin-bottom:14px}
#tb .soft{font-size:.82rem;padding:7px 12px}#tb .soft.on{background:linear-gradient(135deg,var(--pd),var(--ld));color:#fff}
.sw{width:26px;height:26px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px #0003;padding:0}.sw.on{outline:2.5px solid var(--pd)}

.book-stage{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px}
.pages{--pg1:#FAF7F2;--pg2:#FFFEFB;--pgc:#3D3429;--ink:#2C2418;--accent:#8B6B4A;
  margin:0 auto;max-width:900px}

/* photo frame base */
.pf{position:relative;overflow:hidden;background:#ddd;cursor:pointer}
.pf-inner{position:absolute;inset:0;overflow:hidden}
.pf-inner img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
  object-position:var(--ox,50%) var(--oy,50%);
  transform:rotate(var(--rot,0deg)) scale(var(--sc,1));
  transform-origin:center center}
.pf > img{width:100%;height:100%;object-fit:cover;display:block}
.pf .pe,.pf .pr,.pf .pc,.pf .pd{position:absolute;background:#0009;color:#fff;border-radius:8px;padding:2px 7px;font-size:.72rem;opacity:0;transition:.15s;z-index:2;line-height:1.4}
.pf .pe{top:6px;left:6px}
.pf .pr{top:6px;left:34px}
.pf .pc{top:6px;left:62px;color:#ffd56a}
.pf .pd{top:6px;right:6px;padding:0 7px}
.pf:hover .pe,.pf:hover .pr,.pf:hover .pc,.pf:hover .pd,.pf:focus .pe{opacity:1}
.pf{cursor:pointer}
.pf::after{content:'Đổi ảnh';position:absolute;bottom:6px;right:6px;background:#0008;color:#fff;font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:8px;opacity:0;z-index:2;font-family:Quicksand,sans-serif;pointer-events:none}
.pf:hover::after{opacity:.9}
.pf.is-cover::after{content:'★ bìa · Đổi ảnh'}
.pf.is-cover{outline:2px solid var(--pd);outline-offset:2px}
.pf.is-cover::after{content:'★ bìa';position:absolute;bottom:6px;left:6px;right:auto;background:var(--pd);color:#fff;font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:8px;z-index:2;font-family:Quicksand,sans-serif;opacity:1}

/* ========== LAYOUT TEMPLATES ========== */

.book-stage{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px}
.pages{margin:0 auto;max-width:920px}

/* shared sheets */
.mag-sheet,.mo-sheet,.el-sheet,.st-sheet,.sp-sheet,.lv-sheet,.as-sheet{
  background:var(--pg2);padding:clamp(12px,3vw,28px);border-radius:4px;
  box-shadow:0 10px 36px rgba(60,40,30,.1);margin-bottom:18px}

/* 1. Book */
.lay-book .spread-row{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){
  .lay-book .spread-row{grid-template-columns:1fr 1fr;gap:0}
  .lay-book .page:nth-child(odd){border-radius:4px 0 0 4px}
  .lay-book .page:nth-child(even){border-radius:0 4px 4px 0}
}
.lay-book .page{background:var(--pg1);padding:6%;min-height:240px;box-shadow:0 8px 28px rgba(60,40,30,.12);border-radius:4px}
.lay-book .page:nth-child(even){background:var(--pg2)}
.lay-book .cover-p{display:grid;place-content:center;text-align:center;aspect-ratio:3/4;background:linear-gradient(160deg,var(--pg1),var(--pg2));position:relative;overflow:hidden}
.lay-book .cover-p .ct{font:700 clamp(1.5rem,4.5vw,2.6rem) 'Playfair Display',serif;color:var(--ink)}
.lay-book .cover-p .cs{font:400 .95rem 'Cormorant Garamond',serif;color:var(--accent);margin-top:6px}
.lay-book .cover-p .cover-img{position:absolute;inset:0;border-radius:0;height:100%;width:100%}
.lay-book .cover-p .cover-img .pf-inner{position:absolute;inset:0}
.lay-book .cover-p .cover-img img{height:100%;width:100%}
.lay-book .cover-meta{position:absolute;inset:0;background:linear-gradient(transparent 45%,#0009);display:grid;place-content:end center;padding:12%;text-align:center;pointer-events:none}
.lay-book .cover-meta .ct{color:#fff;text-shadow:0 2px 8px #0008}
.lay-book .cover-meta .cs{color:#fffc}
.lay-book .slot{display:grid;gap:10px;height:100%}
.lay-book .s1{grid-template:1fr/1fr}
.lay-book .s2{grid-template:1fr 1fr/1fr}
.lay-book .s3{grid-template:1fr 1fr/1fr 1fr}.lay-book .s3 .pf:first-child{grid-row:1/3}
.lay-book .s4{grid-template:1fr 1fr/1fr 1fr}
.lay-book .cap{font:600 1.05rem 'Dancing Script',cursive;color:var(--accent);margin-bottom:6px}
.lay-book .s1 .pf{aspect-ratio:3/4}.lay-book .s2 .pf{aspect-ratio:4/3}
.lay-book .s3 .pf,.lay-book .s4 .pf{aspect-ratio:1}
.lay-book .s3 .pf:first-child{aspect-ratio:auto;min-height:100%}

/* 2. Magazine */
.lay-mag .mag-top{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(10px,2.5vw,24px);margin-bottom:16px;align-items:start}
.lay-mag .mag-top .pf{aspect-ratio:4/5;border-radius:2px}
.lay-mag .mag-txt h3{font:700 clamp(1.5rem,4.5vw,2.4rem) 'Playfair Display',serif;color:var(--ink);margin-bottom:10px}
.lay-mag .mag-txt p{font:400 .95rem/1.65 'Cormorant Garamond',serif;color:var(--accent)}
.lay-mag .mag-bar{width:4px;background:var(--accent);border-radius:2px;min-height:60px;margin-bottom:8px}
.lay-mag .mag-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.lay-mag .mag-grid .pf{aspect-ratio:4/3;border-radius:2px}
@media(max-width:520px){
  .lay-mag .mag-top{grid-template-columns:1fr 1fr;gap:8px}
  .lay-mag .mag-txt h3{font-size:1.15rem}
  .lay-mag .mag-txt p{font-size:.82rem;line-height:1.45}
  .lay-mag .mag-bar{display:none}
}

/* 3. Moment */
.lay-moment .mo-head{display:grid;grid-template-columns:1fr 1.25fr;gap:12px;margin-bottom:12px}
.lay-moment .mo-quote{border:1.5px solid var(--line);border-radius:12px;padding:12px;font:italic .92rem/1.55 'Cormorant Garamond',serif;color:var(--accent)}
.lay-moment .mo-title{font:700 clamp(1.4rem,3.5vw,2.2rem) 'Playfair Display',serif;color:var(--ink);margin-bottom:8px}
.lay-moment .mo-head .pf{aspect-ratio:16/10;border-radius:2px}
.lay-moment .mo-mid{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;margin-bottom:10px}
.lay-moment .mo-mid .pf:first-child{aspect-ratio:4/3}.lay-moment .mo-mid .pf:last-child{aspect-ratio:3/4}
.lay-moment .mo-bot{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lay-moment .mo-bot .pf{aspect-ratio:16/10;border-radius:2px}
@media(max-width:520px){
  .lay-moment .mo-head{grid-template-columns:1fr 1fr;gap:8px}
  .lay-moment .mo-mid{grid-template-columns:1fr 1fr}
  .lay-moment .mo-mid .pf:last-child{aspect-ratio:4/3}
  .lay-moment .mo-title{font-size:1.1rem}
  .lay-moment .mo-quote{font-size:.8rem;padding:8px}
}

/* 4. Elegant */
.lay-elegant .el-sheet{text-align:center}
.lay-elegant .el-title{font:700 clamp(1.35rem,4vw,2.2rem) 'Playfair Display',serif;letter-spacing:.1em;color:var(--ink);margin-bottom:4px}
.lay-elegant .el-sub{font:500 .85rem 'Cormorant Garamond',serif;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin-bottom:16px}
.lay-elegant .el-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.lay-elegant .el-row .pf{aspect-ratio:1;border-radius:2px}
.lay-elegant .el-hero{aspect-ratio:16/10;margin-bottom:12px;border-radius:2px}
.lay-elegant .el-cap{font:italic .95rem/1.65 'Cormorant Garamond',serif;color:var(--accent);max-width:36em;margin:8px auto 0}
.lay-elegant .el-div{height:1px;background:var(--line);margin:18px 0}
@media(max-width:480px){
  .lay-elegant .el-row{grid-template-columns:1fr 1fr}
  .lay-elegant .el-row .pf:nth-child(3){grid-column:1/-1;aspect-ratio:16/9}
}

/* 5. Story */
.lay-story .st-sheet{background:var(--pg2);border-radius:2px;overflow:hidden;box-shadow:0 10px 36px rgba(60,40,30,.1);margin-bottom:16px}
.lay-story .st-hero{aspect-ratio:4/5;max-height:65vh}
.lay-story .st-body{padding:clamp(14px,3vw,28px);text-align:center}
.lay-story .st-title{font:700 clamp(1.3rem,3.5vw,1.9rem) 'Playfair Display',serif;color:var(--ink);margin-bottom:8px}
.lay-story .st-txt{font:italic 1rem/1.65 'Cormorant Garamond',serif;color:var(--accent)}
.lay-story .st-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.lay-story .st-grid .pf{aspect-ratio:1}

/* 6. Spine */
.lay-spine .sp-sheet{display:grid;grid-template-columns:auto 1fr auto;gap:0;background:var(--pg2);border-radius:2px;overflow:hidden;box-shadow:0 10px 36px rgba(60,40,30,.1);min-height:300px;margin-bottom:14px}
.lay-spine .sp-label{writing-mode:vertical-rl;transform:rotate(180deg);padding:14px 8px;font:700 .8rem 'Quicksand';letter-spacing:.12em;color:var(--accent);background:var(--pg1);display:flex;align-items:center;justify-content:center}
.lay-spine .sp-main{display:grid;grid-template-rows:1.3fr auto;gap:8px;padding:10px}
.lay-spine .sp-main>.pf{aspect-ratio:4/3;border-radius:2px}
.lay-spine .sp-side{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lay-spine .sp-side .pf{aspect-ratio:4/3}
.lay-spine .sp-hearts{display:flex;align-items:center;justify-content:center;padding:8px;color:#E8A0B0;font-size:1rem}
.lay-spine .sp-more{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 10px 10px}
.lay-spine .sp-more .pf{aspect-ratio:4/3}
@media(max-width:480px){
  .lay-spine .sp-sheet{grid-template-columns:auto 1fr}
  .lay-spine .sp-hearts{display:none}
  .lay-spine .sp-label{font-size:.7rem;padding:10px 6px}
}

/* 7. Love */
.lay-love .lv-sheet{background:#FFFEFB;padding:clamp(12px,3vw,24px);border-radius:2px;box-shadow:0 10px 36px rgba(60,40,30,.1);text-align:center;margin-bottom:14px}
.lay-love .lv-hero{aspect-ratio:16/9;border-radius:2px;margin-bottom:12px}
.lay-love .lv-hearts{color:#E8A0B0;font-size:1.2rem;letter-spacing:6px;margin-bottom:4px}
.lay-love .lv-title{font:700 clamp(1.3rem,3.5vw,2rem) 'Playfair Display',serif;letter-spacing:.12em;color:var(--ink);margin-bottom:8px}
.lay-love .lv-txt{font:italic .95rem/1.6 'Cormorant Garamond',serif;color:var(--accent);max-width:34em;margin:0 auto 12px}
.lay-love .lv-bot{aspect-ratio:16/9;border-radius:2px;max-width:640px;margin:0 auto}
.lay-love .lv-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.lay-love .lv-grid .pf{aspect-ratio:4/3;border-radius:2px}

/* 8. Asymm */
.lay-asymm .as-sheet{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;background:var(--pg2);padding:clamp(12px,2.5vw,22px);border-radius:2px;box-shadow:0 10px 36px rgba(60,40,30,.1);margin-bottom:14px}
.lay-asymm .as-left{display:flex;flex-direction:column;gap:10px}
.lay-asymm .as-title{font:700 clamp(1.2rem,3vw,1.85rem) 'Playfair Display',serif;color:var(--ink);letter-spacing:.03em}
.lay-asymm .as-left>.pf{aspect-ratio:3/4;border-radius:2px;flex:1}
.lay-asymm .as-right{display:grid;grid-template-rows:auto 1fr auto;gap:8px}
.lay-asymm .as-right .pf{border-radius:2px}
.lay-asymm .as-right .pf:nth-child(1){aspect-ratio:4/3}
.lay-asymm .as-right .pf:nth-child(2){aspect-ratio:1;min-height:100px}
.lay-asymm .as-right .pf:nth-child(3){aspect-ratio:3/4}
.lay-asymm .as-bot{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.lay-asymm .as-bot .pf{aspect-ratio:4/3;border-radius:2px}
.lay-asymm .as-cap{grid-column:1/-1;text-align:center;font:italic .95rem/1.55 'Cormorant Garamond',serif;color:var(--accent);margin-top:6px}
@media(max-width:520px){
  .lay-asymm .as-sheet{grid-template-columns:1fr 1fr;gap:8px}
  .lay-asymm .as-bot{grid-template-columns:1fr 1fr}
  .lay-asymm .as-title{font-size:1.05rem}
}

/* 9. Polaroid */
.lay-pola .pola-wall{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:12px;background:var(--pg1);border-radius:14px}
.lay-pola .pf{width:min(42vw,190px);padding:8px 8px 26px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.12);border-radius:2px}
.lay-pola .pf img{aspect-ratio:1;height:auto;border-radius:0}
.lay-pola .pf:nth-child(3n+1){transform:rotate(-2deg)}
.lay-pola .pf:nth-child(3n+2){transform:rotate(1.4deg)}
.lay-pola .pf:nth-child(3n){transform:rotate(-1deg)}

/* 10. Masonry */
.lay-mason .mason-wall{columns:2 140px;column-gap:10px;padding:10px;background:var(--pg1);border-radius:12px}
.lay-mason .pf{break-inside:avoid;margin-bottom:10px;border-radius:4px}
.lay-mason .pf.land{aspect-ratio:16/10}
.lay-mason .pf.port{aspect-ratio:3/4}
.lay-mason .pf.sq{aspect-ratio:1}
@media(min-width:700px){.lay-mason .mason-wall{columns:3 150px}}

/* 11. Grid */
.lay-grid .grid-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;padding:10px;background:var(--pg1);border-radius:12px}
.lay-grid .pf{aspect-ratio:1;border-radius:6px}


/* album transitions */
.pages-in{animation:pgIn .55s cubic-bezier(.22,1,.36,1) both}
.pages-out{animation:pgOut .18s ease both}
@keyframes pgIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes pgOut{from{opacity:1}to{opacity:0;transform:scale(.99)}}
.lay-book .page{animation:pageRise .5s cubic-bezier(.22,1,.36,1) both}
.lay-book .page:nth-child(1){animation-delay:.02s}
.lay-book .page:nth-child(2){animation-delay:.06s}
.lay-book .page:nth-child(3){animation-delay:.1s}
.lay-book .page:nth-child(4){animation-delay:.14s}
.lay-book .page:nth-child(5){animation-delay:.18s}
.lay-book .page:nth-child(n+6){animation-delay:.22s}
@keyframes pageRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.mag-sheet,.mo-sheet,.el-sheet,.st-sheet,.sp-sheet,.lv-sheet,.as-sheet{animation:sheetIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes sheetIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pola-wall .pf,.mason-wall .pf,.grid-wall .pf{animation:cardIn .45s cubic-bezier(.22,1,.36,1) both}
.pola-wall .pf:nth-child(1),.grid-wall .pf:nth-child(1),.mason-wall .pf:nth-child(1){animation-delay:.02s}
.pola-wall .pf:nth-child(2),.grid-wall .pf:nth-child(2){animation-delay:.05s}
.pola-wall .pf:nth-child(3),.grid-wall .pf:nth-child(3){animation-delay:.08s}
.pola-wall .pf:nth-child(4),.grid-wall .pf:nth-child(4){animation-delay:.11s}
.pola-wall .pf:nth-child(n+5),.grid-wall .pf:nth-child(n+5){animation-delay:.14s}
@keyframes cardIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}


/* ===== COUPLE CUTE SCRAPBOOK ===== */
.cute-nav{display:flex;gap:6px;overflow-x:auto;padding:8px 4px 14px;margin-bottom:8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.cute-nav-btn{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:1.5px solid #F0D0DC;border-radius:14px;padding:8px 10px;min-width:64px;color:#8A5A6A;box-shadow:0 2px 8px rgba(200,120,140,.1)}
.cute-nav-btn b{font-size:.78rem}.cute-nav-btn small{font-size:.62rem;font-weight:600;opacity:.75;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cute-nav-btn.on{background:linear-gradient(135deg,#FFB6C8,#E8A0D0);color:#fff;border-color:transparent}
.cn-dot{font-size:.6rem;background:#FFE0EA;color:#C06080;border-radius:999px;padding:1px 6px;font-weight:700}
.cn-dot.ok{background:#D4F0D4;color:#3A8A4A}.cn-dot.mid{background:#FFF0C0;color:#A08030}.cn-dot.txt{background:#E8E0FF;color:#7060A0}

.cute-book{display:flex;flex-direction:column;gap:20px;max-width:420px;margin:0 auto}
.cute-page{position:relative;background:linear-gradient(180deg,#FFF9FB,#FFF5F8);border-radius:18px;padding:18px 16px 22px;box-shadow:0 10px 32px rgba(180,100,120,.14),0 0 0 1px rgba(240,180,200,.35);overflow:hidden;animation:sheetIn .5s cubic-bezier(.22,1,.36,1) both}
.cute-page::before{content:'';position:absolute;inset:8px;border:1.5px dashed rgba(220,160,180,.35);border-radius:14px;pointer-events:none}
.cp-num{font:700 .68rem Quicksand;color:#D090A8;letter-spacing:.06em;margin-bottom:8px;position:relative;z-index:1}
.cp-title{font:700 1.25rem 'Dancing Script',cursive;color:#C45A7A;text-align:center;margin-bottom:12px;position:relative;z-index:1}
.cp-badge{font:700 1.6rem 'Dancing Script',cursive;color:#C45A7A;text-align:center;margin-bottom:6px;position:relative;z-index:1}
.cute-edit{outline:none;font:400 .95rem/1.55 'Patrick Hand',cursive;color:#6A4A58;white-space:pre-wrap;position:relative;z-index:1}
.cute-edit:focus{background:rgba(255,240,245,.6);border-radius:8px}

.cute-empty{display:grid;place-items:center;background:#FFE8F0;border:2px dashed #F0B0C8;color:#D080A0;font-weight:700;font-size:.85rem;min-height:100px;cursor:pointer}
.cute-empty:hover{background:#FFD6E8}

/* 01 cover */
.cp-cover{text-align:center;min-height:420px;display:flex;flex-direction:column}
.cp-cover-photo{flex:1;min-height:260px;border-radius:16px;overflow:hidden;margin:10px 0;position:relative;z-index:1}
.cp-cover-photo .pf,.cp-cover-photo .cover-hero{height:100%;min-height:260px;aspect-ratio:3/4}
.cp-doodles{font-size:1.2rem;opacity:.7}

/* 02 letter */
.cp-paper{background:#FFFEF9;border-radius:4px;padding:20px 18px;box-shadow:0 4px 16px rgba(120,80,60,.1);position:relative;z-index:1;min-height:200px}
.cp-paper.soft{background:#FFF5F8}
.cp-tape{position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotate(-2deg);width:70px;height:18px;background:repeating-linear-gradient(45deg,#FFB6C8 0 6px,#fff8 6px 12px);border-radius:2px;opacity:.85}

/* 03 meet polaroids */
.cp-pola-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;z-index:1}
.cp-pola{background:#fff;padding:8px 8px 28px;box-shadow:0 4px 14px rgba(0,0,0,.1);border-radius:3px}
.cp-pola:nth-child(1){transform:rotate(-2deg)}.cp-pola:nth-child(2){transform:rotate(1.5deg)}.cp-pola:nth-child(3){grid-column:1/-1;max-width:70%;margin:0 auto;transform:rotate(-1deg)}
.cp-pola .pf{aspect-ratio:1;border-radius:0}
.cp-cap{display:block;text-align:center;font:600 .78rem 'Dancing Script',cursive;color:#C45A7A;margin-top:4px}

/* 04 date grid */
.cp-grid4{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative;z-index:1;margin-bottom:10px}
.cp-grid4 .pf{aspect-ratio:1;border-radius:10px}

/* 05 stack */
.cp-stack{position:relative;height:280px;z-index:1;margin:8px 0}
.cp-stack-item{position:absolute;width:55%;}
.cp-stack-item .pf{aspect-ratio:3/4;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.cp-stack-item.r0{left:8%;top:10%;transform:rotate(-6deg);z-index:1}
.cp-stack-item.r1{right:8%;top:0;transform:rotate(4deg);z-index:2}
.cp-stack-item.r2{left:22%;bottom:0;width:58%;transform:rotate(-2deg);z-index:3}

/* 06 travel */
.cp-travel-body{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;position:relative;z-index:1}
.cp-check{background:#fff;border-radius:12px;padding:12px;font-size:.9rem}
.cp-travel-ph{display:flex;flex-direction:column;gap:8px}
.cp-travel-ph .pf{aspect-ratio:4/3;border-radius:10px}
@media(max-width:400px){.cp-travel-body{grid-template-columns:1fr}}

/* 07 love letter heart */
.cp-heart-frame{width:min(70%,220px);margin:0 auto 14px;aspect-ratio:1;border-radius:50%;overflow:hidden;border:4px solid #FFD0E0;box-shadow:0 8px 24px rgba(200,100,130,.2);position:relative;z-index:1}
.cp-heart-frame .pf{height:100%;aspect-ratio:1}

/* 09 then now */
.cp-then-now{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;position:relative;z-index:1;margin-bottom:12px}
.cp-then-now .pf{aspect-ratio:3/4;border-radius:12px}
.cp-tag{display:block;text-align:center;font:700 .75rem Quicksand;color:#C45A7A;margin-bottom:4px}
.cp-arrow{font-size:1.4rem;color:#E8A0B0;font-weight:800}

/* 10 little */
.cp-little-body{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;position:relative;z-index:1}
.cp-list{background:#fff;border-radius:12px;padding:12px;font-size:.9rem}
.cp-little-ph{display:flex;flex-direction:column;gap:8px}
.cp-little-ph .pf{aspect-ratio:1;border-radius:12px}
@media(max-width:400px){.cp-little-body{grid-template-columns:1fr}}

/* 11 playlist */
.cp-play{text-align:center}
.cp-cassette{font-size:2.4rem;margin:8px 0}
.cp-tracks{text-align:left;background:#fff;border-radius:14px;padding:16px;font:600 .92rem/1.7 Quicksand;color:#6A4A58;position:relative;z-index:1;box-shadow:0 4px 14px rgba(0,0,0,.06)}

/* 12 adventure */
.cp-adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:1;margin-bottom:10px}
.cp-adv-grid .pf:first-child{grid-column:1/-1;aspect-ratio:16/10;border-radius:12px}
.cp-adv-grid .pf{aspect-ratio:1;border-radius:12px}

/* 13 details */
.cp-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative;z-index:1}
.cp-detail-grid .pf:first-child{grid-row:1/3;aspect-ratio:3/4;border-radius:12px}
.cp-detail-grid .pf{aspect-ratio:1;border-radius:12px}

/* 14 thanks */
.cp-thanks{padding:0;overflow:hidden;min-height:380px}
.cp-thanks-bg{position:absolute;inset:0}
.cp-thanks-bg .pf,.cp-thanks-bg .thanks-hero{height:100%;border-radius:0}
.cp-thanks-txt{position:relative;z-index:2;background:linear-gradient(transparent,rgba(40,20,30,.72));color:#fff;padding:120px 20px 28px;text-align:center;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end}
.cp-thanks-txt h3{font:700 1.5rem 'Dancing Script',cursive;margin-bottom:10px}
.cp-thanks-txt .cute-edit{color:#fff;font-size:1rem}

/* 15 back */
.cp-back-inner{text-align:center;padding:48px 16px;position:relative;z-index:1}
.cp-bears{font-size:2rem;margin-bottom:12px}
.cp-back-inner h2{font:700 1.8rem 'Dancing Script',cursive;color:#C45A7A;margin-bottom:8px}
.cp-barcode{margin-top:28px;opacity:.35;letter-spacing:2px;font-size:.8rem}

.pages.lay-cute{max-width:440px}


/* ===== PHOTO MOTION ===== */
html.no-motion .pf .pf-inner img,
html.no-motion .tr-pola,
html.no-motion .pf.anim-ken .pf-inner img,
html.no-motion .pf.anim-float .pf-inner img,
html.no-motion .pf.anim-zoom .pf-inner img,
html.no-motion .pf.anim-pan .pf-inner img{animation:none!important}

@media (prefers-reduced-motion: no-preference){
  .pf.anim-ken .pf-inner img{animation:kenBurns 18s ease-in-out infinite alternate}
  .pf.anim-float .pf-inner img{animation:imgFloat 7s ease-in-out infinite}
  .pf.anim-zoom .pf-inner img{animation:imgZoom 12s ease-in-out infinite alternate}
  .pf.anim-pan .pf-inner img{animation:imgPan 14s ease-in-out infinite alternate}
}
@keyframes kenBurns{
  0%{transform:rotate(var(--rot,0deg)) scale(calc(var(--sc,1)*1.0)); object-position:var(--ox,50%) var(--oy,50%)}
  100%{transform:rotate(var(--rot,0deg)) scale(calc(var(--sc,1)*1.12)); object-position:calc(var(--ox,50%) + 6%) calc(var(--oy,50%) - 4%)}
}
@keyframes imgFloat{
  0%,100%{transform:rotate(var(--rot,0deg)) scale(var(--sc,1)) translateY(0)}
  50%{transform:rotate(var(--rot,0deg)) scale(var(--sc,1)) translateY(-6px)}
}
@keyframes imgZoom{
  0%{transform:rotate(var(--rot,0deg)) scale(var(--sc,1))}
  100%{transform:rotate(var(--rot,0deg)) scale(calc(var(--sc,1)*1.1))}
}
@keyframes imgPan{
  0%{object-position:calc(var(--ox,50%) - 8%) var(--oy,50%); transform:rotate(var(--rot,0deg)) scale(calc(var(--sc,1)*1.08))}
  100%{object-position:calc(var(--ox,50%) + 8%) var(--oy,50%); transform:rotate(var(--rot,0deg)) scale(calc(var(--sc,1)*1.08))}
}
/* pause motion while editing */
.crop-view img{animation:none!important}

/* ===== TRAVEL ALBUM ===== */
.pages[data-paper=sky]{--pg1:#E8F4FC;--pg2:#F7FBFE;--ink:#1E3A5F;--accent:#4A7A9B}
.travel-book{display:flex;flex-direction:column;gap:18px;max-width:520px;margin:0 auto}
.tr-page{background:var(--pg2);border-radius:16px;padding:18px 16px 22px;box-shadow:0 10px 32px rgba(60,100,140,.12),0 0 0 1px rgba(140,180,210,.25);position:relative;overflow:hidden;animation:sheetIn .55s cubic-bezier(.22,1,.36,1) both}
.tr-h{font:700 1.15rem 'Playfair Display',serif;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.tr-h::before{content:'';width:6px;height:6px;border-radius:50%;background:#5B9BD5}
.tr-edit{outline:none;font:500 .92rem/1.55 Quicksand,sans-serif;color:var(--accent);white-space:pre-wrap}
.tr-edit:focus{background:rgba(200,230,255,.35);border-radius:8px}

.tr-cover{text-align:center}
.tr-stamp{display:inline-block;font:800 .68rem Quicksand;letter-spacing:.14em;color:#5B9BD5;border:2px dashed #5B9BD5;padding:4px 12px;border-radius:6px;margin-bottom:10px;transform:rotate(-3deg)}
.tr-title{font:700 clamp(1.5rem,5vw,2rem) 'Playfair Display',serif;color:var(--ink);margin-bottom:6px}
.tr-cover-ph{margin:12px 0;border-radius:14px;overflow:hidden;min-height:240px}
.tr-cover-ph .pf,.tr-hero{aspect-ratio:16/11;min-height:220px;border-radius:14px}
.tr-route-line{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;font-size:1.1rem}
.tr-route-line i{flex:0 0 36px;height:2px;background:linear-gradient(90deg,#5B9BD5,#E8A0B0);border-radius:2px}

.tr-timeline{position:relative;padding-left:18px}
.tr-timeline::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:linear-gradient(#5B9BD5,#E8A0B0)}
.tr-stop{position:relative;padding:0 0 16px 16px}
.tr-dot{position:absolute;left:-16px;top:6px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid #5B9BD5;box-shadow:0 0 0 3px rgba(91,155,213,.2)}
.tr-stop-body{background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 3px 12px rgba(60,100,140,.08)}
.tr-stop-body b{display:block;color:var(--ink);font-size:.9rem}
.tr-stop-body span{font-size:.8rem;color:var(--accent);font-weight:600}
.tr-mini{margin-top:8px;aspect-ratio:16/10;border-radius:8px;max-height:100px}

.tr-cinematic{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tr-cine-item .pf{aspect-ratio:1;border-radius:10px}
.tr-cine-item.big{grid-column:1/-1}
.tr-cine-item.big .pf{aspect-ratio:16/9;border-radius:12px}

.tr-food-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tr-food-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 3px 12px rgba(60,100,140,.08);text-align:center}
.tr-food-card .pf{aspect-ratio:4/3;border-radius:0}
.tr-food-card .tr-edit{padding:8px;font-size:.82rem}

.tr-pola-wall{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:6px 0}
.tr-pola{background:#fff;padding:8px 8px 26px;box-shadow:0 4px 14px rgba(0,0,0,.1);width:min(42%,150px);border-radius:2px}
.tr-pola .pf{aspect-ratio:1;border-radius:0}
.tr-pola-cap{display:block;text-align:center;font:700 .72rem Quicksand;color:#5B9BD5;margin-top:4px}
.tr-pola.r0{transform:rotate(-3deg)}.tr-pola.r1{transform:rotate(2deg)}.tr-pola.r2{transform:rotate(-1.5deg)}.tr-pola.r3{transform:rotate(3deg)}.tr-pola.r4{transform:rotate(-2deg)}
@media (prefers-reduced-motion: no-preference){
  .tr-pola{animation:polaWiggle 6s ease-in-out infinite}
  .tr-pola.r1{animation-delay:.4s}.tr-pola.r2{animation-delay:.8s}.tr-pola.r3{animation-delay:1.2s}
}
@keyframes polaWiggle{
  0%,100%{transform:rotate(var(--base,-2deg))}
  50%{transform:rotate(calc(var(--base,-2deg) + 1.5deg))}
}

.tr-end{padding:0;min-height:320px;display:grid}
.tr-end-ph{position:absolute;inset:0}
.tr-end-ph .pf{height:100%;border-radius:0;aspect-ratio:auto}
.tr-end-txt{position:relative;z-index:2;background:linear-gradient(transparent 20%,rgba(20,40,60,.78));color:#fff;padding:100px 20px 28px;text-align:center;display:flex;flex-direction:column;justify-content:flex-end;min-height:320px}
.tr-end-txt h3{font:700 1.35rem 'Playfair Display',serif;margin-bottom:10px}
.tr-end-txt .tr-edit{color:#fff;font-size:.95rem}

.pages.lay-travel{max-width:540px}

/* paper color themes for album */
.pages[data-paper=cream]{--pg1:#FAF3E8;--pg2:#FFFEF9;--ink:#3D3429;--accent:#8B6B4A}
.pages[data-paper=blush]{--pg1:#FDF0F0;--pg2:#FFFBFA;--ink:#4A3035;--accent:#A06B7A}
.pages[data-paper=sage]{--pg1:#EEF4EC;--pg2:#FAFDF9;--ink:#2E3D2C;--accent:#5A7A58}
.pages[data-paper=slate]{--pg1:#E8ECF0;--pg2:#F7F9FB;--ink:#2A3038;--accent:#5A6A7A}
.pages[data-paper=night]{--pg1:#1E1A28;--pg2:#2A2438;--ink:#F0EAF8;--accent:#B8A0D0}
.pages[data-paper=pink]{--pg1:#FFF0F5;--pg2:#FFFBFC;--ink:#5A3A4A;--accent:#D48AA0}

/* empty state */
.alb-empty{text-align:center;padding:40px 20px;color:var(--soft);font-weight:600}

/* crop overlay */
.crop{position:fixed;inset:0;z-index:100;background:#000c;display:grid;place-items:center;padding:16px}
.crop-box{background:var(--paper);border-radius:20px;width:min(96vw,520px);overflow:hidden;box-shadow:var(--sh)}
.crop-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.crop-head button{background:none;color:var(--soft);font-size:1.2rem;padding:4px 8px}
.crop-view{overflow:hidden;background:#1a1a1a;position:relative;touch-action:none;margin:12px auto;border-radius:6px;
  box-shadow:0 0 0 2px rgba(255,255,255,.35),0 8px 28px #0008}
.crop-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:grab;user-select:none;-webkit-user-drag:none;will-change:transform,object-position}
.crop-view img:active{cursor:grabbing}
.crop-tools{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.crop-tools label{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.9rem}
.crop-tools input[type=range]{flex:1;accent-color:var(--pd)}
.crop-hint{font-size:.8rem;color:var(--soft);font-weight:600}

/* chat */
.chatbox{padding:0;overflow:hidden;height:min(78vh,680px);height:min(78dvh,680px);gap:0;display:flex;flex-direction:column;position:relative}
.chat-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(10px) brightness(.92);transform:scale(1.08);z-index:0;pointer-events:none;opacity:0;transition:opacity .3s}
.chat-bg.on{opacity:1}
.chatbox::after{content:'';position:absolute;inset:0;background:color-mix(in srgb,var(--cream) 55%,transparent);z-index:0;pointer-events:none}
.cfull{display:flex;flex-direction:column;height:100%;min-height:0;flex:1;position:relative;z-index:1}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);flex-shrink:0;gap:8px}
.chat-peer{display:flex;align-items:center;gap:10px;min-width:0}
.chat-peer b{display:block;font-size:.95rem;line-height:1.2}
.chat-peer small{color:var(--soft);font-size:.72rem;font-weight:600}
.chat-acts{display:flex;gap:4px;flex-shrink:0}
.av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--pd),var(--ld));color:#fff;display:grid;place-items:center;font-size:1.1rem;overflow:hidden;flex-shrink:0;box-shadow:0 2px 8px rgba(120,80,120,.2)}
.av img{width:100%;height:100%;object-fit:cover}.av.big{width:72px;height:72px;font-size:1.8rem;margin:0 auto 10px}
#msgs{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:14px 12px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.m-row{display:flex;align-items:flex-end;gap:8px;max-width:92%}
.m-row.me{align-self:flex-end;flex-direction:row-reverse}
.m-row .av{width:28px;height:28px;font-size:.75rem}
.m{max-width:100%;padding:9px 14px 5px;background:color-mix(in srgb,var(--paper) 92%,transparent);border-radius:20px 20px 20px 6px;box-shadow:0 3px 10px rgba(0,0,0,.07);font-weight:600;word-break:break-word;backdrop-filter:blur(4px)}
.m-row.me .m{background:linear-gradient(135deg,var(--pd),var(--ld));color:#fff;border-radius:20px 20px 6px 20px}
.m img{max-width:100%;max-height:260px;width:auto;border-radius:12px;display:block;margin-bottom:4px;object-fit:cover}
.m audio{width:min(220px,70vw);margin:4px 0;height:32px}
.m.love{border:2px solid var(--pd)}.m .meta{display:flex;gap:6px;align-items:center;justify-content:flex-end;font-size:.65rem;opacity:.65;margin-top:2px}
.m-row.me .m .meta{color:#fffc}
.m.pending{opacity:.75}.m.pending .meta{font-style:italic}
.m .seen{color:#7ec8ff}.m-row.me .m .seen{color:#e8f6ff}
.more-msg{align-self:center;margin:6px 0 10px;font-size:.85rem}
.emo{display:flex;gap:6px;padding:8px 14px 0;background:color-mix(in srgb,var(--paper) 90%,transparent);overflow-x:auto;flex-shrink:0}.emo button{background:var(--cream);border-radius:999px;padding:3px 11px;font-size:1.15rem}
.cbar{display:flex;gap:6px;padding:10px 12px;background:color-mix(in srgb,var(--paper) 92%,transparent);align-items:center;flex-shrink:0;backdrop-filter:blur(8px)}.cbar input{border-radius:999px}
#rec-btn.rec-on{background:#ff6b8a;color:#fff;animation:recPulse 1s ease infinite}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 #ff6b8a88}50%{box-shadow:0 0 0 8px #ff6b8a00}}

/* floating chat fab */
.chat-fab{position:fixed;z-index:80;width:56px;height:56px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--pd),var(--ld));color:#fff;font-size:1.5rem;box-shadow:0 8px 24px rgba(150,100,160,.4);cursor:grab;touch-action:none;display:grid;place-items:center;user-select:none}
.chat-fab:active{cursor:grabbing}.chat-fab.dragging{opacity:.92;transform:scale(1.06)}
.chat-fab .badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;background:#e44;color:#fff;border-radius:999px;font-size:.65rem;font-weight:800;display:grid;place-items:center;padding:0 4px}
@keyframes msgGlowFab{0%,100%{box-shadow:0 8px 24px rgba(150,100,160,.4)}50%{box-shadow:0 0 0 10px rgba(255,158,196,0),0 0 22px 6px var(--pink,#FF9EC4)}}
.chat-fab.new-msg{animation:msgGlowFab 1.1s ease-in-out infinite}
@keyframes msgGlowNav{0%,100%{background:transparent}50%{background:var(--pink,#FF9EC4)}}
#nav button.new-msg .nav-ico{animation:msgGlowNav 1.1s ease-in-out infinite;border-radius:50%}

/* call ui */
.call-ui{position:fixed;inset:0;z-index:120;background:#0a0a12ee;display:grid;place-items:center;padding:16px}
.call-card{position:relative;width:min(96vw,380px);min-height:420px;border-radius:28px;overflow:hidden;background:#1a1528;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:24px;box-shadow:0 20px 60px #0008}
#call-remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111}
#call-local{position:absolute;width:100px;height:140px;right:12px;top:12px;border-radius:14px;object-fit:cover;background:#222;border:2px solid #fff4;z-index:2}
.call-info{position:relative;z-index:3;text-align:center;color:#fff;margin-bottom:20px;text-shadow:0 2px 8px #0008}
.call-info b{display:block;font-size:1.2rem;margin-bottom:4px}
.call-info small{opacity:.8;font-weight:600}
.call-btns{position:relative;z-index:3;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.call-reject,.call-accept{width:58px;height:58px;border-radius:50%;border:0;font-size:1.4rem;cursor:pointer}
.call-reject{background:#e44545;color:#fff}.call-accept{background:#2ecc71;color:#fff}
.call-ui.voice #call-remote,.call-ui.voice #call-local{display:none}
.call-ui.voice .call-card{background:radial-gradient(circle at 50% 30%,#3a2a55,#1a1528)}

#toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:var(--plum);color:var(--paper);padding:10px 20px;border-radius:20px;font-weight:700;opacity:0;transition:.3s;pointer-events:none;z-index:99;max-width:90vw;text-align:center}#toast.on{opacity:1}
.spin{font:800 2.6rem 'Baloo 2';text-align:center;padding:10px;color:var(--pd)}
footer{text-align:center;margin:30px 0 20px;color:var(--soft);font-weight:600}footer span{color:var(--pd)}
@media(max-width:720px){
  .brand{font-size:1.05rem}
  .chatbox{height:calc(100dvh - 200px);max-height:none}
  .chat-head{padding:8px 10px}
  .chat-acts .rnd{width:36px;height:36px;font-size:.9rem}
  .month-paper{min-height:420px}
}
.chip input{width:auto!important}.soft.on{background:linear-gradient(135deg,var(--pd),var(--ld));color:#fff}

/* ===== AUDIO VOICE NOTE ===== */
.voice-note{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:4px 0;
  min-width:180px;max-width:min(280px,80vw);
}
.voice-note .vn-play{
  width:36px;height:36px;border-radius:50%;border:0;
  background:linear-gradient(135deg,var(--pd),var(--ld));color:#fff;
  font-size:1rem;display:grid;place-items:center;flex-shrink:0;
  cursor:pointer;box-shadow:0 3px 10px rgba(150,100,160,.3);
}
.m-row.me .voice-note .vn-play{background:rgba(255,255,255,.28);box-shadow:none}
.voice-note .vn-wave{
  flex:1;height:28px;display:flex;align-items:center;gap:2px;min-width:60px;
}
.voice-note .vn-wave i{
  display:block;width:3px;border-radius:2px;background:currentColor;opacity:.55;
  animation:vnBar 1.1s ease-in-out infinite;
}
.voice-note .vn-wave i:nth-child(1){height:8px;animation-delay:0s}
.voice-note .vn-wave i:nth-child(2){height:14px;animation-delay:.1s}
.voice-note .vn-wave i:nth-child(3){height:20px;animation-delay:.2s}
.voice-note .vn-wave i:nth-child(4){height:12px;animation-delay:.3s}
.voice-note .vn-wave i:nth-child(5){height:18px;animation-delay:.15s}
.voice-note .vn-wave i:nth-child(6){height:10px;animation-delay:.25s}
.voice-note .vn-wave i:nth-child(7){height:16px;animation-delay:.05s}
.voice-note.playing .vn-wave i{opacity:.9}
.voice-note:not(.playing) .vn-wave i{animation:none;opacity:.4}
@keyframes vnBar{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1.15)}}
.voice-note audio{
  width:100%;height:32px;margin-top:2px;
  border-radius:16px;display:block;
}
.m-row.me .voice-note audio{filter:brightness(1.08)}

/* blur control pop */
.blur-pop{
  position:absolute;top:52px;right:8px;z-index:20;
  background:var(--paper);border-radius:16px;padding:12px 14px;
  box-shadow:var(--sh);width:200px;display:flex;flex-direction:column;gap:8px;
  animation:fin .2s ease;
}
.blur-pop label{font-size:.82rem;font-weight:700;color:var(--soft);display:flex;justify-content:space-between}
.blur-pop input[type=range]{width:100%;accent-color:var(--pd)}

/* ===== MINI CHAT POPUP ===== */
.mini-chat{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:flex-end;justify-content:flex-end;
  padding:12px 12px 90px;pointer-events:none;
}
.mini-chat:not(.hide){pointer-events:auto}
.mini-chat-card{
  width:min(94vw,360px);height:min(62vh,520px);
  background:var(--paper);border-radius:24px;
  box-shadow:0 16px 48px rgba(80,50,100,.28),0 0 0 1px rgba(180,140,180,.15);
  display:flex;flex-direction:column;overflow:hidden;
  transform-origin:bottom right;
  animation:miniIn .32s cubic-bezier(.22,1,.36,1) both;
}
.mini-chat.closing .mini-chat-card{animation:miniOut .22s ease both}
@keyframes miniIn{
  from{opacity:0;transform:translateY(24px) scale(.92)}
  to{opacity:1;transform:none}
}
@keyframes miniOut{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(16px) scale(.94)}
}
.mini-chat-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;background:color-mix(in srgb,var(--paper) 92%,transparent);
  border-bottom:1px solid var(--line);flex-shrink:0;gap:8px;
}
.mini-chat-acts{display:flex;gap:4px}
.mini-msgs{
  flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:12px;display:flex;flex-direction:column;gap:8px;
  background:color-mix(in srgb,var(--cream) 70%,transparent);
}
.mini-msgs .m-row{max-width:95%}
.mini-msgs .m{font-size:.9rem;padding:8px 12px 4px}
.mini-msgs .av{width:24px;height:24px;font-size:.7rem}
.mini-cbar{
  display:flex;gap:6px;padding:10px;align-items:center;flex-shrink:0;
  background:var(--paper);border-top:1px solid var(--line);
}
.mini-cbar input{
  flex:1;border-radius:999px;padding:9px 14px;font-size:.92rem;
  border:2px solid var(--line);background:var(--cream);outline:none;
}
.mini-cbar input:focus{border-color:var(--ld)}
.mini-cbar .rnd{width:40px;height:40px}
.mini-cbar .send{width:40px;height:40px;padding:0;border-radius:50%}

/* chat-bg blur uses CSS var */
.chat-bg{filter:blur(var(--chat-blur,10px)) brightness(.92)}

/* ===== NOTE TABS + DAY PAPER + DIGEST ===== */
.note-tabs{
  display:flex;gap:8px;justify-content:center;margin-bottom:16px;
}
.note-tab{
  background:var(--paper);color:var(--soft);padding:9px 20px;border-radius:999px;
  box-shadow:0 3px 10px rgba(120,90,140,.1);font-size:.95rem;
}
.note-tab.on{background:linear-gradient(135deg,var(--pd),var(--ld));color:#fff}

.day-paper{
  width:min(94vw,580px);min-height:420px;
  background:#F7FCF9;
  border-radius:4px 4px 8px 8px;
  box-shadow:
    0 1px 0 #fff inset,
    0 0 0 1px rgba(120,160,140,.18),
    0 12px 40px rgba(60,100,80,.12),
    0 4px 12px rgba(60,100,80,.06);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  background-image:
    linear-gradient(90deg,transparent 0,transparent 48px,rgba(100,160,140,.22) 48px,rgba(100,160,140,.22) 49.5px,transparent 49.5px),
    repeating-linear-gradient(#F7FCF9,#F7FCF9 31px,#D5E8DC 31px,#D5E8DC 32px);
  background-size:100% 100%,100% 32px;
  background-position:0 0,0 60px;
}
.day-paper::before{
  content:'';position:absolute;top:0;left:0;right:0;height:8px;
  background:linear-gradient(90deg,#A8D8C0,#B8D4E8,#D4C8E8,#F0C8D8,#C8E8D0);
  opacity:.75;
}
.day-paper .mp-top{padding-left:58px}
.day-paper .mp-month{color:#3A8A6A}
.day-paper .mp-lines{padding-left:58px;caret-color:#3A8A6A;color:#2E4A3A}
.day-paper .mp-foot{padding-left:58px;color:#7A9A88}

.month-digest{
  padding:4px 20px 8px 52px;position:relative;z-index:1;
  max-height:300px;overflow-y:auto;
}
.digest-empty{
  font:500 .9rem/1.5 Quicksand,sans-serif;color:#B8A090;padding:12px 8px 16px;
}
.digest-empty b{color:#C45A7A}
.digest-day{
  margin-bottom:12px;padding-bottom:10px;
  border-bottom:1px dashed rgba(200,160,140,.35);
}
.digest-day:last-child{border-bottom:none}
.digest-date{
  font:700 .95rem 'Dancing Script',cursive;color:#C45A7A;
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
}
.digest-dot{
  width:8px;height:8px;border-radius:50%;background:var(--pd);flex-shrink:0;
  box-shadow:0 0 0 3px rgba(255,158,196,.25);
}
.digest-body{
  padding-left:16px;font:400 1.05rem/1.55 'Patrick Hand',cursive;color:#4A3B32;
}
.digest-line{display:flex;align-items:flex-start;gap:8px;padding:2px 0}
.digest-line.done span:last-child{text-decoration:line-through;opacity:.55}
.digest-tick{
  flex-shrink:0;width:18px;text-align:center;color:#C45A7A;
  font-weight:700;font-family:Quicksand,sans-serif;font-size:.9rem;line-height:1.55;
}
.digest-line.done .digest-tick{color:#6AAB7A}

.jp-divider{
  display:flex;align-items:center;gap:12px;
  padding:6px 24px 4px 52px;position:relative;z-index:1;
}
.jp-divider::before,.jp-divider::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,140,120,.4),transparent);
}
.jp-divider span{
  font:700 .72rem Quicksand,sans-serif;color:#C4A090;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
}
.month-paper .mp-lines.month-free{min-height:140px}

@media(max-width:520px){
  .day-paper .mp-top,.day-paper .mp-lines,.day-paper .mp-foot{padding-left:48px}
  .month-digest{padding-left:40px;padding-right:14px;max-height:240px}
  .jp-divider{padding-left:40px;padding-right:14px}
}

/* note tools (tick) */
.note-tools{
  display:flex;gap:8px;justify-content:center;align-items:center;
  flex-wrap:wrap;margin-bottom:12px;
}
.note-tools .soft{font-size:.85rem;padding:8px 14px}
.note-tools-hint{font-size:.78rem;color:var(--soft);font-weight:600}

/* ===== STICKY DAY NOTE (giống tờ note ảnh) ===== */
.sticky-day{
  position:relative;
  width:min(92vw,520px);
  min-height:280px;
  background:#FFF9E9;
  border-radius:6px 6px 40px 6px/6px 6px 60px 6px;
  box-shadow:0 18px 34px rgba(200,160,90,.28),0 2px 0 rgba(255,255,255,.6) inset;
  padding:36px 22px 20px;
  margin:0 auto;
  transform:rotate(-.8deg);
}
.sticky-pin{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FF9EC4,#E4568F 70%);
  box-shadow:0 4px 6px rgba(0,0,0,.25);z-index:3;
}
.sticky-photo{
  position:absolute;top:-18px;right:-14px;
  width:92px;height:auto;max-width:28vw;
  object-fit:cover;aspect-ratio:3/4;
  border-radius:10px;border:5px solid #fff;
  box-shadow:0 8px 18px rgba(120,90,60,.28);
  transform:rotate(9deg);z-index:5;background:#fff;
  cursor:pointer;
}
.sticky-photo-btn{
  position:absolute;top:8px;right:8px;z-index:6;
  width:36px;height:36px;border-radius:50%;
  background:var(--pink);color:var(--plum);border:0;
  font-size:1rem;cursor:pointer;
  box-shadow:0 3px 10px rgba(120,90,140,.2);
}
.sticky-photo-btn.has-photo{top:auto;bottom:8px;right:8px;opacity:.85}
.sticky-date{
  font:700 1.15rem 'Dancing Script',cursive;color:#C45A7A;
  margin-bottom:12px;padding-right:40px;
}
.sticky-list{display:flex;flex-direction:column;min-height:160px;gap:2px}
.sticky-line{
  display:flex;align-items:flex-start;gap:10px;padding:7px 2px;
  border-bottom:1px dashed rgba(180,140,60,.3);
}
.sticky-line:last-child{border-bottom:1px dashed transparent}
.sticky-check{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;margin-top:2px;flex-shrink:0;
  border:2px solid #D8BF87;border-radius:7px;cursor:pointer;
  background:#FFFEF8;position:relative;
  transition:background .15s,border-color .15s;
}
.sticky-check:checked{background:var(--pd);border-color:var(--pd)}
.sticky-check:checked::after{
  content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg);
}
.sticky-text{
  flex:1;outline:none;font-family:Quicksand,sans-serif;font-weight:600;
  font-size:1.02rem;color:#5B4A1F;line-height:24px;min-height:24px;
  word-break:break-word;
}
.sticky-text[data-empty="true"]::before{content:attr(data-placeholder);color:#C9B98A}
.sticky-line.checked .sticky-text{text-decoration:line-through;color:#B8A878;opacity:.7}
.sticky-foot{
  display:flex;align-items:center;justify-content:space-between;margin-top:14px;
}
.sticky-foot #day-status{font-size:.8rem;color:#9A8757;font-weight:700}
.btn-clear.sm{padding:6px 14px;font-size:.82rem;border-radius:16px}
.note-tip{text-align:center;color:var(--soft);font-size:.82rem;margin-top:14px;font-weight:600}

.digest-photo{
  width:64px;height:80px;object-fit:cover;border-radius:8px;
  border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.12);
  float:right;margin:0 0 8px 10px;transform:rotate(4deg);
}

/* ===== CHAT GEAR POP ===== */
.chat-gear-pop,.blur-pop{
  position:fixed;z-index:200;
  background:var(--paper);border-radius:18px;padding:14px 16px;
  box-shadow:0 16px 40px rgba(80,50,100,.28),0 0 0 1px rgba(180,140,180,.2);
  width:min(240px,92vw);
  display:flex;flex-direction:column;gap:10px;
  animation:fin .2s ease;
}
.cgp-div{height:1px;background:var(--line);margin:2px 0}
.cgp-title{font:700 .95rem 'Baloo 2',cursive;color:var(--plum)}
.cgp-btn{width:100%;text-align:center;font-size:.85rem}
.cgp-label{font-size:.82rem;font-weight:700;color:var(--soft);display:flex;justify-content:space-between}
.chat-gear-pop input[type=range]{width:100%;accent-color:var(--pd)}
.cgp-hint{font-size:.72rem;color:var(--soft);font-weight:600;margin:0}

@media(max-width:520px){
  .sticky-photo{width:72px;top:-14px;right:-8px}
  .sticky-day{padding:32px 16px 16px}
}

/* chat font size */
#msgs .m, .mini-msgs .m{font-size:var(--chat-fs,1em)}
.cgp-fs-row{display:flex;gap:8px}
.cgp-fs{flex:1;padding:8px 6px;font-size:.9rem}

/* day calendar */
.day-cal{
  width:min(92vw,520px);margin:0 auto 16px;
  background:var(--paper);border-radius:20px;
  box-shadow:var(--sh);padding:14px 16px 16px;
  border:1px solid var(--line);
}
.cal-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;gap:8px;
}
.cal-head b{font-family:'Baloo 2',cursive;font-size:1.05rem}
.cal-week{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
  margin-bottom:6px;text-align:center;
  font-size:.72rem;font-weight:700;color:var(--soft);
}
.cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
}
.cal-empty{min-height:36px}
.cal-day{
  min-height:36px;border-radius:12px;border:0;
  background:var(--cream);color:var(--plum);
  font-weight:700;font-size:.9rem;cursor:pointer;
  position:relative;
}
.cal-day:hover{transform:none;background:var(--g1)}
.cal-day.today{outline:2px solid var(--pd);outline-offset:0}
.cal-day.on{
  background:linear-gradient(135deg,var(--pd),var(--ld));color:#fff;
}
.cal-day.has::after{
  content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--pd);
}
.cal-day.on.has::after{background:#fff}

.nav-tip{
  position:fixed;z-index:200;pointer-events:none;
  background:linear-gradient(135deg,var(--plum),#5a4568);color:#fff;
  padding:8px 14px;border-radius:12px;
  font:700 .8rem Quicksand,sans-serif;
  opacity:0;transform:translateY(6px) scale(.94);
  transition:opacity .18s ease,transform .18s ease;
  box-shadow:0 8px 20px rgba(60,40,80,.28);white-space:nowrap;
}
.nav-tip.on{opacity:1;transform:none}
.nav-tip::after{
  content:'';position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--plum);border-bottom:0;
}

/* ===== FUN / GIẢI TRÍ ===== */
.fun-hint{color:var(--soft);font-size:.85rem;font-weight:600;margin:0}
.fun-meta{color:var(--soft);font-size:.8rem;font-weight:600;min-height:1.2em}
.watch-stage{
  position:relative;width:100%;aspect-ratio:16/9;
  background:#111;border-radius:16px;overflow:hidden;
  margin:8px 0;box-shadow:var(--sh);
}
.watch-stage iframe,.watch-stage video{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  background:#000;
}
.watch-acts{justify-content:flex-start}

/* sleep calculator */
.sleep-card{overflow:hidden}
.sleep-tabs{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:8px 0 12px;
}
.sleep-tab{
  flex:1;min-width:140px;padding:12px 14px;border-radius:999px;font-size:.92rem;
  background:var(--cream);color:var(--soft);box-shadow:0 4px 14px rgba(120,90,140,.08);
}
.sleep-tab.on{
  background:linear-gradient(135deg,#A78BFA,#F472B6);color:#fff;
  box-shadow:0 8px 20px rgba(167,139,250,.35);
}
.sleep-now{text-align:center;color:var(--soft);font-weight:600;margin-bottom:12px}
.sleep-now b{color:var(--plum);font-size:1.15rem}
.sleep-calc-btn{width:100%;margin-bottom:12px}
.sleep-wake-bar{margin-bottom:12px;justify-content:center}
.sleep-list{display:flex;flex-direction:column;gap:10px}
.sleep-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;text-align:left;padding:14px 16px;border-radius:18px;
  background:var(--cream);color:var(--plum);border:1px solid var(--line);
  box-shadow:0 3px 12px rgba(120,90,140,.06);font-weight:700;
}
.sleep-row:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(120,90,140,.12)}
.sleep-row.suggest{
  background:linear-gradient(135deg,#FFE4F0,#F3E8FF);
  border-color:transparent;
}
.sleep-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.95rem}
.sleep-paw{font-size:1.1rem}
.sleep-tag{
  font-size:.68rem;background:linear-gradient(135deg,var(--pd),var(--ld));
  color:#fff;padding:2px 8px;border-radius:999px;font-weight:800;
}
.sleep-time{font:800 1.15rem 'Baloo 2',cursive;color:var(--plum);flex-shrink:0}
.sleep-note{text-align:center;color:var(--soft);font-size:.8rem;font-weight:600;margin-top:12px}
.sleep-alarms{margin-top:14px;padding-top:10px;border-top:1px dashed var(--line)}
.sleep-alarm-item{
  display:flex;align-items:center;gap:8px;padding:8px 0;font-weight:700;
}
.sleep-alarm-item small{color:var(--soft);font-weight:600}
.watch-vol-label{
  min-width:64px;text-align:center;font-weight:700;font-size:.85rem;color:var(--soft);
}
.watch-acts{flex-wrap:wrap}

.watch-empty{
  position:absolute;inset:0;display:grid;place-items:center;
  color:#aaa;font:600 .95rem Quicksand,sans-serif;padding:20px;text-align:center;
}
.rps-board{text-align:center;padding:8px 0}
.rps-row{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;font-weight:700}
.rps-res{font:700 1.15rem 'Baloo 2',cursive;color:var(--pd);margin-top:8px}
.rps-btn{font-size:1rem}
.tot-pair{
  display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;
  margin:8px 0;
}
.tot-opt{
  background:var(--cream);border:2px solid var(--line);border-radius:18px;
  padding:18px 12px;font:700 1rem Quicksand,sans-serif;color:var(--plum);
  min-height:72px;display:grid;place-items:center;text-align:center;
  transition:border-color .2s,transform .2s,background .2s;
}
.tot-opt:hover{border-color:var(--pd);transform:translateY(-2px)}
.tot-or{align-self:center;font:800 .9rem 'Baloo 2',cursive;color:var(--soft)}
.tot-result{text-align:center;font-weight:600;margin-top:6px}
.tod-card{
  background:linear-gradient(135deg,var(--g1),var(--g2));
  border-radius:18px;padding:20px 16px;text-align:center;
  font:700 1.05rem Quicksand,sans-serif;color:var(--plum);
  min-height:64px;display:grid;place-items:center;
}
@media(max-width:520px){
  .tot-pair{grid-template-columns:1fr;gap:8px}
  .tot-or{justify-self:center}
}

/* more fun games */
.guess-board{text-align:center;font-weight:600;padding:6px 0}
.word-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.word-chip{
  background:var(--cream);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;font-weight:700;font-size:.9rem;
}
.word-chip small{color:var(--soft);font-weight:600;margin-left:4px}
.timer-display{text-align:center;padding:10px 0}
.timer-num{
  font:800 clamp(2.4rem,10vw,3.6rem) 'Baloo 2',cursive;
  color:var(--pd);letter-spacing:.04em;
}
.timer-num.run{animation:timerPulse 1s ease-in-out infinite}
@keyframes timerPulse{50%{transform:scale(1.04)}}
.secret-box{text-align:center;padding:10px 0}
.secret-open{
  background:linear-gradient(135deg,var(--g1),var(--g2));
  border-radius:16px;padding:16px;font-weight:700;white-space:pre-wrap;
}

/* Fun menu + caro */
.fun-menu{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px;max-width:720px;margin:0 auto 20px;
}
.fun-item{
  background:var(--paper);border-radius:22px;padding:18px 14px;
  box-shadow:var(--sh);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;color:var(--plum);
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s;
}
.fun-item:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(120,90,140,.18)}
.fun-ico{font-size:2rem;line-height:1}
.fun-name{font:700 1rem 'Baloo 2',cursive}
.fun-sub{font-size:.78rem;color:var(--soft);font-weight:600}
.fun-back{margin:0 0 12px 4vw}
.fun-status{font:700 1.05rem Quicksand,sans-serif;color:var(--pd);margin-bottom:10px}
.fun-hint{color:var(--soft);font-size:.85rem;font-weight:600}
.caro-board{
  display:grid;grid-template-columns:repeat(15,1fr);gap:1px;
  width:min(92vw,420px);margin:0 auto 12px;
  background:#e8d5c4;border-radius:8px;padding:4px;
  box-shadow:inset 0 0 0 2px #c4a484;
}
.caro-cell{
  aspect-ratio:1;border:0;border-radius:2px;
  background:#f7efe6;color:var(--plum);
  font:800 clamp(.55rem,2.2vw,.85rem) Quicksand,sans-serif;
  padding:0;cursor:pointer;
  transition:background .12s;
}
.caro-cell:hover:not(:disabled){background:#ffe8f0}
.caro-cell:disabled{cursor:default;opacity:1}
.caro-cell.x{color:#d64545}
.caro-cell.o{color:#3a7bd5}


/* ===== ADMIN PANEL ===== */
.admin-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(20,12,30,.55);
  display:grid;place-items:center;padding:16px;
  backdrop-filter:blur(6px);
}
.admin-panel{
  width:min(96vw,560px);max-height:min(90dvh,720px);
  background:var(--paper);border-radius:24px;box-shadow:var(--sh);
  display:flex;flex-direction:column;overflow:hidden;
}
.admin-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,#2a1f3d,#4a3b52);color:#fff;
}
.admin-head b{font:800 1.05rem 'Baloo 2',cursive}
.admin-head button{background:rgba(255,255,255,.15);color:#fff;border-radius:12px;padding:6px 12px}
.admin-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap}
.admin-tab{
  background:var(--cream);color:var(--soft);padding:8px 14px;border-radius:999px;font-size:.85rem;
}
.admin-tab.on{background:linear-gradient(135deg,var(--pd),var(--ld));color:#fff}
.admin-user{
  background:var(--cream);border-radius:16px;padding:12px 14px;border:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;
}
.admin-user .row-line{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.admin-user code{
  font-family:ui-monospace,monospace;font-size:.85rem;background:#fff;padding:2px 8px;border-radius:8px;
  word-break:break-all;
}
.admin-meta{font-size:.78rem;color:var(--soft);font-weight:600}
.admin-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.admin-actions button{font-size:.78rem;padding:6px 10px}
.admin-empty{text-align:center;color:var(--soft);padding:24px;font-weight:600}
.admin-stat{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;
}
.admin-stat .box{
  background:var(--cream);border-radius:14px;padding:12px;text-align:center;border:1px solid var(--line);
}
.admin-stat .box b{display:block;font:800 1.4rem 'Baloo 2',cursive;color:var(--pd)}
.admin-stat .box span{font-size:.75rem;color:var(--soft);font-weight:700}
.admin-warn{
  background:#FFF3E0;color:#8A5A20;border-radius:12px;padding:10px 12px;font-size:.82rem;font-weight:600;
}
.admin-login-box{
  width:min(92vw,340px);background:var(--paper);border-radius:22px;padding:24px 20px;
  box-shadow:var(--sh);display:flex;flex-direction:column;gap:12px;text-align:center;
}
.admin-login-box input{text-align:center;letter-spacing:.2em;font-weight:800}