/* Page frame the artifact host used to provide around the app: safe-area padding, no body margin, [hidden] always wins. */
:root{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: phone-first app column (max 680px) under a full-bleed sea-blue hero with swimming turtles, fish and an octopus that ends in rolling waves; a sandy seabed closes the page; three tabs in a fixed bottom bar; photos as day-grouped moment cards; a dark deep-sea stage for viewing. */
:root{
  --paper:#EAF6FA;
  --card:#FFFFFF;
  --sunk:#DCEFF6;
  --line:#C3E1EC;
  --ink:#0E2B3C;
  --ink-2:#416577;
  --ink-3:#4E7284;
  --sawah:#17789F;
  --sawah-soft:#D3ECF6;
  --bougain:#D2406B;
  --bougain-soft:#FDDDE6;
  --on-bougain:#FFFFFF;
  --frangi:#F6BE4F;
  --frangi-soft:#FFF1CF;
  --on-frangi:#3A2705;
  --lagoon:#0F8A94;
  --danger:#B8392C;
  --hero:#11719F;
  --hero-2:#1C87B6;
  --hero-3:#3AA5CF;
  --hero-ink:#FFFFFF;
  --hero-ink-2:#D6F1FB;
  --hero-accent:#FFD66B;
  --sand:#F6E7C2;
  --sand-2:#EBD59B;
  --stage:#040E15;
  --stage-2:#0B1A24;
  --stage-line:#1B3342;
  --stage-ink:#EAF5FA;
  --stage-ink-2:#9BB8C6;
  --stage-love:#FF6C9F;
  --scrim:rgba(4,14,21,.58);
  --scrim-ink:#FFFFFF;
  --online:#2FBF7A;
  --shadow:0 1px 2px rgba(14,43,60,.05),0 10px 28px -16px rgba(14,43,60,.3);
  --f-display:"Caprasimo","Cooper Black",Georgia,serif;
  --f-body:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-card:18px;
  --r-img:12px;
  --col:680px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#071A24; --card:#0D2A38; --sunk:#12384A; --line:#1B4559;
    --ink:#E4F4FA; --ink-2:#A2C6D5; --ink-3:#82ACBD;
    --sawah:#6CCBEF; --sawah-soft:#12384A;
    --bougain:#FF6C9F; --bougain-soft:#3B1828; --on-bougain:#2A0716;
    --frangi:#F6C85F; --frangi-soft:#34301A; --on-frangi:#2A1C02;
    --lagoon:#5FD6D0; --danger:#FF8A7A;
    --hero:#0A3D58; --hero-2:#11506F; --hero-3:#1A6A8F; --hero-ink:#F2FBFF; --hero-ink-2:#A8D4E4; --hero-accent:#FFD66B;
    --sand:#1F4A57; --sand-2:#2A5C6A;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 30px -16px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#071A24; --card:#0D2A38; --sunk:#12384A; --line:#1B4559;
  --ink:#E4F4FA; --ink-2:#A2C6D5; --ink-3:#82ACBD;
  --sawah:#6CCBEF; --sawah-soft:#12384A;
  --bougain:#FF6C9F; --bougain-soft:#3B1828; --on-bougain:#2A0716;
  --frangi:#F6C85F; --frangi-soft:#34301A; --on-frangi:#2A1C02;
  --lagoon:#5FD6D0; --danger:#FF8A7A;
  --hero:#0A3D58; --hero-2:#11506F; --hero-3:#1A6A8F; --hero-ink:#F2FBFF; --hero-ink-2:#A8D4E4; --hero-accent:#FFD66B;
  --sand:#1F4A57; --sand-2:#2A5C6A;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 30px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;padding-bottom:calc(100px + env(safe-area-inset-bottom,0px));-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--hero);z-index:45}
body.locked{overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2.5px solid var(--lagoon);outline-offset:2px}
h1,h2,h3,p{margin:0}
.wrap{max-width:var(--col);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
img.broken{visibility:hidden}
.tile.bad,.place-cover.bad{cursor:pointer}
.tile.bad::after{content:"Photo didn\2019t load" "\A" "Tap to retry" "\A" attr(data-err);white-space:pre;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font:600 12px/1.45 var(--f-body);color:var(--ink-3, #8a8a80)}
.muted{color:var(--ink-2)}
.small{font-size:13px;line-height:1.5}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--hero);color:var(--hero-ink);overflow:hidden;isolation:isolate}
.hero-pattern{position:absolute;inset:0;z-index:-1;background:var(--hero-ink);opacity:.065;-webkit-mask-image:var(--flower-mask);mask-image:var(--flower-mask);-webkit-mask-size:180px 180px;mask-size:180px 180px}
.hero-inner{position:relative;z-index:1;padding-block:16px 70px}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;flex-wrap:wrap;position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.logo svg{width:32px;height:auto;display:block}
.greet{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--hero-ink-2)}
.title{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,12vw,62px);line-height:.98;letter-spacing:-.005em;margin-top:26px;text-wrap:balance;position:relative}
.title .hl{color:var(--hero-accent)}
.hero-sub{margin-top:10px;color:var(--hero-ink-2);font-size:13.5px;font-weight:600}
.status{margin-top:20px;display:grid;gap:3px;position:relative}
.status-kicker{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--hero-accent)}
.status-main{font-size:21px;font-weight:800;line-height:1.25;text-wrap:balance}
.status-sub{font-size:13.5px;color:var(--hero-ink-2);font-weight:500}
.livedot{width:8px;height:8px;border-radius:50%;background:var(--online);flex:none;animation:pulse 1.8s ease-out infinite}
.clocks{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.clock{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);border-radius:16px;padding:10px 12px;display:flex;align-items:center;gap:10px;min-width:0}
.clock .ic{width:22px;height:22px;color:var(--hero-accent)}
.clock-city{font-size:12px;color:var(--hero-ink-2);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clock-time{font-size:19px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.clock-diff{margin-top:9px;font-size:12.5px;color:var(--hero-ink-2);font-weight:500}
.terraces{position:absolute;z-index:2;left:0;bottom:-1px;width:100%;height:50px;display:block;overflow:hidden}
.terraces .t1{fill:var(--hero-3);animation:sway 7s ease-in-out infinite alternate}
.terraces .t2{fill:var(--sunk);animation:sway 9s ease-in-out -3s infinite alternate-reverse}
.terraces .t3{fill:var(--paper)}
@keyframes sway{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
/* swimmers in the hero */
.sea-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sea-deco svg{display:block;width:100%;height:auto;overflow:visible}
.sea-deco::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 85% -10%,rgba(255,255,255,.28),rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.12))}
.d-turtle{position:absolute;right:max(10px,env(safe-area-inset-right,0px));top:56px;width:96px;animation:bob 6.5s ease-in-out infinite}
.d-fish{position:absolute;left:-60px;width:34px;animation:swim var(--t,26s) linear var(--d,0s) infinite;--rx:120px}
.d-fish > svg{animation:wobble 1.8s ease-in-out infinite alternate}
.d-bub{position:absolute;bottom:34px;width:var(--w,10px);opacity:0;animation:rise var(--t,9s) ease-in var(--d,0s) infinite}
.d-octo{position:absolute;left:18px;bottom:6px;width:70px;animation:peek 5.5s ease-in-out infinite}
.d-star{position:absolute;right:34px;bottom:26px;width:34px;animation:twirl 7s ease-in-out infinite alternate}
@keyframes bob{50%{transform:translateY(-8px) rotate(-3deg)}}
@keyframes swim{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 120px))}}
@keyframes wobble{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.85}100%{transform:translateY(-240px) scale(1.1);opacity:0}}
@keyframes peek{50%{transform:translateY(-7px)}}
@keyframes twirl{from{transform:rotate(-12deg)}to{transform:rotate(14deg)}}
@media (prefers-reduced-motion: reduce){.sea-deco *,.terraces path,.seabed *{animation:none!important}.d-fish{transform:translateX(var(--rx))}.d-bub{opacity:.7}}
/* seabed at the end of the page */
.seabed{position:relative;margin-top:34px;margin-bottom:calc(-1 * (100px + env(safe-area-inset-bottom,0px)));pointer-events:none}
.seabed-top{display:block;width:100%;height:46px}
.seabed-top path{fill:var(--sand)}
.seabed-body{background:var(--sand);height:calc(34px + 100px + env(safe-area-inset-bottom,0px))}
.seabed .sb{position:absolute}
.sb-octo{left:10%;top:-14px;width:68px;animation:peek 5s ease-in-out infinite}
.sb-star1{left:48%;top:8px;width:34px;transform:rotate(-14deg)}
.sb-star2{right:12%;top:26px;width:26px;transform:rotate(18deg)}
.sb-fish{left:70%;top:-30px;width:34px;animation:bob 5s ease-in-out infinite}
.sb-turtle{right:6%;top:-24px;width:64px;animation:bob 7s ease-in-out infinite}
.sb-shell{left:30%;top:26px;width:20px;opacity:.8}
.sb-note{position:absolute;left:0;right:0;top:64px;text-align:center;font-size:12.5px;font-weight:700;color:var(--ink-2);letter-spacing:.02em}
.presence{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border-radius:999px;padding:4px 4px 4px 12px;font-size:12.5px;font-weight:700;color:var(--hero-ink);min-height:34px;max-width:100%}
.presence > span:not(.pdot){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.presence.solo{padding-right:12px}
.pdot{width:8px;height:8px;border-radius:50%;background:var(--hero-ink-2);flex:none}
.pdot.on{background:var(--online);animation:pulse 1.8s ease-out infinite}
.wave-btn{border:0;background:var(--frangi);color:var(--on-frangi);font-weight:800;font-size:12px;border-radius:999px;padding:6px 11px 6px 8px;display:inline-flex;gap:5px;align-items:center;flex:none}
.wave-btn .ic{width:16px;height:16px}
.wave-btn:disabled{opacity:.55}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(51,179,110,.55)}100%{box-shadow:0 0 0 9px rgba(51,179,110,0)}}

/* ---------- shared bits ---------- */
main{padding-block:6px 20px}
.tab{display:grid;gap:18px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.sec-head h2{font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1.1}
.sec-head .meta{color:var(--ink-2);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:700;font-size:14.5px;text-decoration:none;line-height:1.2}
.btn .ic{width:18px;height:18px}
.btn.primary{background:var(--bougain);border-color:var(--bougain);color:var(--on-bougain)}
.btn.green{background:var(--sawah);border-color:var(--sawah);color:var(--card)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:var(--card)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:default}
.chip-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.chip-btn .ic{width:18px;height:18px}
.chip-btn:disabled{cursor:default}
.chip-btn.wa{border-color:transparent;background:#E3F6EA;color:#0B6B3A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip-btn.wa{background:#143A2A;color:#7FE0A8}}
:root[data-theme="dark"] .chip-btn.wa{background:#143A2A;color:#7FE0A8}
.heart.on{color:var(--bougain);background:var(--bougain-soft);border-color:transparent}
.heart.on .ic,.love.on .ic{fill:currentColor}
.heart.pop .ic,.love.pop .ic{animation:pop .35s ease-out}
@keyframes pop{40%{transform:scale(1.35)}100%{transform:scale(1)}}
.input{width:100%;min-height:46px;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:10px 12px;font-size:16px;line-height:1.4}
textarea.input{resize:vertical;min-height:64px}
.label{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inline-form{display:flex;gap:8px;flex-wrap:wrap}
.inline-form .input{flex:1 1 180px;width:auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;display:grid;gap:12px;min-width:0}
.card h3{font-size:17px;font-weight:800;line-height:1.3;display:flex;align-items:center;gap:8px}
.card h3 .ic{color:var(--sawah)}
.prompt{background:var(--frangi-soft);border-color:transparent}
.prompt h3{font-family:var(--f-display);font-weight:400;font-size:22px}

/* ---------- moments ---------- */
.feed{display:grid;gap:26px}
.day{display:grid;gap:12px}
.day-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:1px}
.day-n{grid-row:span 2;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--frangi);color:var(--on-frangi);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.day-n b{display:block;font-size:19px;letter-spacing:0;margin-top:1px}
.day-n.off{background:var(--sunk);color:var(--ink-2)}
.day-n .ic{width:22px;height:22px}
.day-title{font-family:var(--f-display);font-weight:400;font-size:21px;line-height:1.15;text-wrap:balance;min-width:0}
.day-count{grid-row:span 2;font-size:12.5px;color:var(--ink-2);font-weight:700;white-space:nowrap}
.day-date{font-size:12.5px;color:var(--ink-2);font-weight:600}
.new-banner{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:var(--bougain-soft);color:var(--ink);border-radius:14px;padding:12px 14px;font-weight:700;font-size:14px}
.new-banner .ic{color:var(--bougain);width:22px;height:22px}
.moment{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:12px;display:grid;gap:10px;box-shadow:var(--shadow);scroll-margin-top:16px;min-width:0}
.m-head{display:flex;align-items:center;gap:10px;min-width:0}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800;font-size:13.5px;color:var(--card);background:var(--who,var(--sawah))}
.m-who{min-width:0;flex:1;line-height:1.35}
.m-line{font-size:14.5px;overflow-wrap:anywhere}
.m-line b{font-weight:800}
.m-time{font-size:12.5px;color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums}
.place-link{border:0;background:none;padding:0;font-weight:700;color:var(--sawah);text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:2px;text-underline-offset:3px;text-align:left}
.badge-new{flex:none;background:var(--bougain-soft);color:var(--bougain);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:999px}
.mosaic{display:grid;gap:3px;border-radius:var(--r-img);overflow:hidden;background:var(--sunk)}
.tile{position:relative;display:block;width:100%;height:100%;min-width:0;min-height:0;border:0;padding:0;margin:0;background:var(--sunk);overflow:hidden}
.tile img{display:block;width:100%;height:100%;object-fit:cover}
.tile:focus-visible{outline-offset:-3px}
.mosaic.n1 .tile{aspect-ratio:var(--ar,4/3);max-height:72vh}
.mosaic.n2{grid-template-columns:1fr 1fr}
.mosaic.n2 .tile{aspect-ratio:4/5}
.mosaic.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:4/3}
.mosaic.n3 .tile:first-child{grid-row:span 2}
.mosaic.n4{grid-template-columns:1fr 1fr}
.mosaic.n4 .tile{aspect-ratio:1}
.more{position:absolute;inset:0;display:grid;place-items:center;background:var(--scrim);color:var(--scrim-ink);font-weight:800;font-size:22px}
.m-cap{font-size:15px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.m-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.loved{font-size:12.5px;color:var(--ink-2);font-weight:600;margin-left:2px}
.empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:34px 18px;border:1.5px dashed var(--line);border-radius:var(--r-card)}
.empty .pet{display:block;width:92px;margin-bottom:4px;animation:peek 5s ease-in-out infinite}
.empty .pet svg{display:block;width:100%;height:auto}
.empty h3{font-family:var(--f-display);font-weight:400;font-size:22px}
.empty p{color:var(--ink-2);max-width:34ch}
.empty .btn{margin-top:6px}
.empty.small{padding:26px 16px}
.empty.small .ic{width:30px;height:30px;color:var(--ink-3)}
.skel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:12px;display:grid;gap:10px}
.sk{background:var(--sunk);border-radius:8px;animation:shimmer 1.4s ease-in-out infinite alternate}
.sk.l1{height:14px;width:45%}.sk.l2{height:12px;width:70%}.sk.b{aspect-ratio:4/3;border-radius:var(--r-img)}
@keyframes shimmer{from{opacity:.55}to{opacity:1}}

/* ---------- places ---------- */
.places{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:600px){.places{grid-template-columns:repeat(3,minmax(0,1fr))}}
.place{display:grid;align-content:start;gap:6px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:8px 8px 12px;box-shadow:var(--shadow);min-width:0;color:var(--ink)}
.place-cover{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--sawah-soft);color:var(--sawah);isolation:isolate}
.place-cover::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sawah);opacity:.09;-webkit-mask-image:var(--flower-mask);mask-image:var(--flower-mask);-webkit-mask-size:120px 120px;mask-size:120px 120px}
.place-cover > .ic{width:36%;height:36%;stroke-width:1.3}
.place-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.place-count{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border-radius:999px;background:var(--scrim);color:var(--scrim-ink);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.place-count .ic{width:14px;height:14px}
.place-count.none{background:var(--card);color:var(--ink-2);padding:3px 9px}
.place-name{font-weight:800;font-size:14.5px;line-height:1.25;padding-inline:4px;overflow-wrap:anywhere}
.place-area{font-size:12.5px;color:var(--ink-2);line-height:1.35;padding-inline:4px}
.pd{display:grid;gap:16px}
.back{justify-self:start;display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:6px 4px;color:var(--sawah);font-weight:800;font-size:14px}
.pd-head{display:flex;gap:14px;align-items:center;min-width:0}
.pd-ic{width:54px;height:54px;border-radius:16px;background:var(--sawah-soft);color:var(--sawah);display:grid;place-items:center;flex:none}
.pd-ic .ic{width:28px;height:28px}
.pd-head h2{font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1.08;text-wrap:balance;overflow-wrap:anywhere}
.pd-head p{color:var(--ink-2);font-weight:600;font-size:13.5px;margin-top:3px}
.pd-note{background:var(--frangi-soft);border-radius:12px;padding:10px 12px;font-size:14px;font-weight:600}
.pd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;border-radius:var(--r-img);overflow:hidden}
.pd-grid .tile{aspect-ratio:1}

/* ---------- trip ---------- */
.days{display:grid}
.tday{display:grid;grid-template-columns:46px minmax(0,1fr);gap:12px;position:relative;padding-bottom:24px}
.tday::before{content:"";position:absolute;left:22px;top:50px;bottom:4px;width:2px;border-radius:2px;background:var(--line)}
.tday:last-child{padding-bottom:4px}
.tday:last-child::before{display:none}
.tday-n{width:46px;height:46px;border-radius:14px;background:var(--sawah-soft);color:var(--sawah);display:grid;place-items:center;align-content:center;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.tday-n b{display:block;font-size:19px;letter-spacing:0;margin-top:1px}
.tday.today .tday-n{background:var(--frangi);color:var(--on-frangi)}
.tday-body{display:grid;gap:8px;min-width:0}
.tday-date{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink-2);min-height:20px}
.today-chip{background:var(--frangi-soft);color:var(--ink);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 8px}
.tday h3{font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1.15;text-wrap:balance}
.tday-events{display:grid;gap:8px}
.tday-events:empty{display:none}
.ev{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;color:var(--ink);text-align:left;width:100%}
.ev-ic{width:34px;height:34px;border-radius:10px;background:var(--sawah-soft);color:var(--sawah);display:grid;place-items:center}
.ev-ic .ic{width:19px;height:19px}
.ev-main{min-width:0;display:grid;gap:4px}
.ev-title{font-weight:800;font-size:14px}
.ev-title span{font-weight:600;color:var(--ink-2)}
.legs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:start;margin-top:2px}
.leg{display:grid;gap:1px;min-width:0}
.leg.to{text-align:right}
.leg-time{font-weight:800;font-size:18px;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.leg-time sup{font-size:10px;font-weight:800;color:var(--bougain);margin-left:2px}
.leg-place{font-size:13px;font-weight:700;color:var(--ink-2)}
.leg-alt{font-size:12px;color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums}
.leg-arrow{color:var(--ink-3);padding-top:3px}
.ev-line{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.ev-tip{font-size:13px;color:var(--ink-2)}
.ev.link{cursor:pointer}
.ev.link .ev-go{justify-self:start;font-size:13px;font-weight:700;color:var(--sawah)}
.strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.strip .tile{flex:none;width:68px;height:68px;border-radius:10px}
.trip-cards{display:grid;gap:14px}
.card-head{display:flex;gap:12px;align-items:flex-start}
.card-head > .ic{width:34px;height:34px;padding:7px;border-radius:10px;background:var(--sawah-soft);color:var(--sawah)}
.card-head h3{font-size:16.5px}
.addr{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.phone-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.phone{font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;user-select:all}
.money-in{position:relative}
.money-in .input{padding-right:56px;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.money-in span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-weight:800;font-size:13px;letter-spacing:.06em}
.quick{display:flex;gap:6px;flex-wrap:wrap}
.money-out{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-height:34px;font-variant-numeric:tabular-nums}
.money-out b{font-size:26px;font-weight:800;color:var(--sawah)}
.money-out span{font-size:15px;font-weight:700;color:var(--ink-2)}
.tips{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tips li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px}
.tip-ic{width:36px;height:36px;border-radius:10px;background:var(--sawah-soft);color:var(--sawah);display:grid;place-items:center}
.tips b{font-size:14.5px}
.tips p{font-size:14px;color:var(--ink-2);line-height:1.5}
.foot{font-size:12.5px;color:var(--ink-3);text-align:center;max-width:46ch;margin-inline:auto}

/* ---------- bottom bar, fab, toasts ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar-in{max-width:var(--col);margin-inline:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.tabbtn{position:relative;display:grid;justify-items:center;gap:2px;padding:9px 4px 10px;border:0;background:none;color:var(--ink-3);font-size:11.5px;font-weight:800;letter-spacing:.02em}
.tabbtn .ic{width:24px;height:24px}
.tabbtn[aria-current="page"]{color:var(--sawah)}
.tabbtn[aria-current="page"]::before{content:"";position:absolute;top:-1px;left:32%;right:32%;height:3px;border-radius:0 0 3px 3px;background:var(--sawah)}
.tdot{position:absolute;top:7px;left:calc(50% + 7px);width:10px;height:10px;border-radius:50%;background:var(--bougain);border:2px solid var(--card)}
.fab{position:fixed;z-index:31;right:max(16px,env(safe-area-inset-right,0px),calc((100vw - var(--col)) / 2 + 16px));bottom:calc(78px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:8px;height:54px;padding:0 22px 0 17px;border-radius:999px;border:0;background:var(--bougain);color:var(--on-bougain);font-weight:800;font-size:15px;box-shadow:0 12px 26px -10px rgba(210,64,107,.55),0 2px 5px rgba(0,0,0,.14)}
.fab .ic{width:22px;height:22px;stroke-width:2.2}
.toasts{position:fixed;z-index:80;left:0;right:0;bottom:calc(142px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body.locked .toasts{bottom:auto;top:calc(66px + env(safe-area-inset-top,0px))}
.toast{pointer-events:auto;max-width:min(460px,100%);background:var(--hero);color:var(--hero-ink);border-radius:14px;padding:11px 14px;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;line-height:1.4;box-shadow:0 12px 30px -12px rgba(0,0,0,.45);animation:toastIn .22s ease-out}
.toast.love{background:var(--bougain);color:var(--on-bougain)}
.toast button{border:0;background:none;color:var(--frangi);font-weight:800;padding:4px 2px;flex:none}
.toast.love button{color:var(--on-bougain);text-decoration:underline}
.toast.out{opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.uploadbar{position:fixed;z-index:75;left:50%;transform:translateX(-50%);top:calc(10px + env(safe-area-inset-top,0px));width:min(460px,calc(100% - 32px));background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:11px 14px;display:grid;gap:8px;box-shadow:var(--shadow)}
.up-row{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px}
.up-row .ic{color:var(--bougain)}
.up-track{height:5px;border-radius:5px;background:var(--sunk);overflow:hidden}
.up-track span{display:block;height:100%;width:0;background:var(--bougain);border-radius:5px;transition:width .3s}
.petals{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}
.petal{position:absolute;top:-48px;width:34px;height:34px;animation:fall var(--d,3s) var(--delay,0s) cubic-bezier(.35,.1,.6,1) forwards}
.petal svg{width:100%;height:auto;display:block}
@keyframes fall{from{transform:translate(0,0) rotate(0deg) scale(var(--s,1))}to{transform:translate(var(--x,0px),112vh) rotate(var(--r,240deg)) scale(var(--s,1))}}

/* ---------- upload sheet ---------- */
.sheet{position:fixed;inset:0;z-index:55;display:flex;align-items:flex-end;justify-content:center;background:var(--scrim)}
.sheet-card{width:100%;max-width:560px;max-height:92%;overflow:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);border-radius:22px 22px 0 0;padding-block:10px calc(18px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;gap:16px;animation:sheetIn .24s ease-out}
@media (min-width:640px){.sheet{align-items:center}.sheet-card{border-radius:22px;padding-bottom:20px}}
@keyframes sheetIn{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.grab{width:42px;height:5px;border-radius:3px;background:var(--line);justify-self:center}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet-head h2{font-family:var(--f-display);font-weight:400;font-size:24px}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;flex:none}
.previews{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.prev{position:relative;flex:none;width:86px;height:86px;border-radius:12px;overflow:hidden;background:var(--sunk)}
.prev img{width:100%;height:100%;object-fit:cover;display:block}
.prev button{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:0;background:var(--scrim);color:var(--scrim-ink);display:grid;place-items:center;padding:0}
.prev button .ic{width:15px;height:15px;stroke-width:2.4}
.prev.add{display:grid;place-items:center;border:1.5px dashed var(--line);background:var(--card);color:var(--ink-2)}
.prev.add .ic{width:26px;height:26px}
.field{display:grid;gap:8px}
.pchips{display:flex;flex-wrap:wrap;gap:8px}
.pchip{display:inline-flex;align-items:center;gap:6px;min-height:38px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:0 13px 0 10px;font-weight:700;font-size:13.5px}
.pchip .ic{width:17px;height:17px;color:var(--sawah)}
.pchip[aria-pressed="true"]{background:var(--sawah);border-color:var(--sawah);color:var(--card)}
.pchip[aria-pressed="true"] .ic{color:var(--card)}
.btn.big{min-height:52px;font-size:16px}
.sheet-note{font-size:12.5px;color:var(--ink-3);text-align:center}

/* ---------- viewer ---------- */
.viewer{position:fixed;inset:0;z-index:50;background:var(--stage);color:var(--stage-ink);display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.v-top{display:flex;align-items:center;gap:10px;padding-block:8px;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
.v-ibtn{width:42px;height:42px;border-radius:50%;border:0;background:var(--stage-2);color:var(--stage-ink);display:grid;place-items:center;flex:none}
.v-ibtn:disabled{opacity:.3;cursor:default}
.v-title{flex:1;min-width:0;text-align:center;display:grid;justify-items:center;line-height:1.25}
.v-placebtn{border:0;background:none;padding:0;color:var(--stage-ink);font-weight:800;font-size:14.5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-title small{color:var(--stage-ink-2);font-weight:700;font-size:12px;font-variant-numeric:tabular-nums;min-height:15px}
.v-stage{position:relative;min-height:0;overflow:hidden;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.v-stage::before{content:"";position:absolute;inset:-40px;background:var(--vbg,none) center / cover no-repeat;filter:blur(30px) brightness(.42) saturate(1.2);transition:background-image .2s}
.v-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.v-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:var(--scrim);color:var(--scrim-ink);display:grid;place-items:center}
.v-nav.prev{left:max(10px,env(safe-area-inset-left,0px))}
.v-nav.next{right:max(10px,env(safe-area-inset-right,0px))}
.v-nav:disabled{opacity:0;pointer-events:none}
@media (hover:none){.v-nav{display:none}}
.burst{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;color:var(--stage-love);opacity:0;pointer-events:none}
.burst .ic{width:100%;height:100%;fill:currentColor;stroke:none}
.burst.go{animation:burst .75s ease-out}
@keyframes burst{0%{opacity:0;transform:scale(.4)}25%{opacity:.95;transform:scale(1.12)}60%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}
.v-panel{background:var(--stage-2);border-top:1px solid var(--stage-line);max-height:46vh;overflow:auto;overscroll-behavior:contain;padding-block:14px 0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;gap:12px;align-content:start}
@media (min-width:900px){
  .viewer{grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto minmax(0,1fr)}
  .v-top{grid-column:1 / -1}
  .v-panel{grid-column:2;grid-row:2;max-height:none;border-top:0;border-left:1px solid var(--stage-line)}
}
.v-meta{display:flex;gap:10px;align-items:center;min-width:0}
.v-meta .avatar{color:var(--stage-2)}
.v-who{min-width:0;line-height:1.35;font-size:14.5px;overflow-wrap:anywhere}
.v-who b{font-weight:800}
.v-when{font-size:12.5px;color:var(--stage-ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.v-meta .place-link{color:var(--stage-ink);text-decoration-color:var(--stage-line)}
.v-cap{font-size:15px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.v-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.love{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 15px 0 12px;border-radius:999px;border:1px solid var(--stage-line);background:transparent;color:var(--stage-ink);font-weight:800;font-size:14px}
.love.on{color:var(--stage-love);border-color:var(--stage-love)}
.love:disabled{opacity:.6;cursor:default}
.v-loved{font-size:12.5px;color:var(--stage-ink-2);font-weight:600}
.v-notes{display:grid;gap:12px}
.v-hint{font-size:13px;color:var(--stage-ink-2)}
.note{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start}
.note .avatar{width:28px;height:28px;font-size:11.5px;color:var(--stage-2)}
.note-body{min-width:0;font-size:14.5px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.note-body b{font-weight:800;margin-right:6px}
.note-time{display:block;color:var(--stage-ink-2);font-size:12px;font-weight:600;white-space:normal}
.note-del{border:0;background:none;color:var(--stage-ink-2);padding:4px;border-radius:8px;font-size:12px;font-weight:800;display:grid;place-items:center;min-width:28px;min-height:28px}
.note-del .ic{width:15px;height:15px}
.note-del.armed{color:var(--stage-ink);background:var(--danger)}
.v-compose{position:sticky;bottom:0;display:flex;gap:8px;background:var(--stage-2);padding-block:6px 14px}
.v-compose input{flex:1;min-width:0;min-height:44px;border-radius:999px;border:1px solid var(--stage-line);background:var(--stage);color:var(--stage-ink);padding:0 16px;font-size:16px}
.v-compose button{width:44px;height:44px;border-radius:50%;border:0;background:var(--stage-love);color:var(--stage);display:grid;place-items:center;flex:none}
.v-edit{display:grid;gap:8px}
.v-edit .label{color:var(--stage-ink-2)}
.v-edit .input{background:var(--stage);border-color:var(--stage-line);color:var(--stage-ink)}
.v-edit .btn{background:var(--stage);border-color:var(--stage-line);color:var(--stage-ink)}
.v-edit .btn.primary{background:var(--stage-love);border-color:var(--stage-love);color:var(--stage)}
.link-danger{border:0;background:none;padding:6px 0;color:var(--stage-love);font-weight:700;font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
.v-confirm{background:var(--stage);border:1px solid var(--stage-line);border-radius:14px;padding:12px;display:grid;gap:10px;font-size:14px;font-weight:600}
.v-confirm .btn.ghost{color:var(--stage-ink);border-color:var(--stage-line)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---------- videos ---------- */
.vbadge{position:absolute;left:6px;bottom:6px;display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 5px;border-radius:999px;background:var(--scrim);color:var(--scrim-ink);font-size:11.5px;font-weight:800;line-height:1.5;font-variant-numeric:tabular-nums;pointer-events:none}
.vbadge .ic{width:14px;height:14px;fill:currentColor;stroke:none}
.vbadge.solo{padding:3px}
.strip .vbadge{left:4px;bottom:4px;padding:1px 6px 1px 3px;font-size:10.5px}
.prev video{width:100%;height:100%;object-fit:cover;display:block}
.v-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:transparent}

/* ---------- sign-in ---------- */
.signout{border:0;background:none;padding:6px;color:var(--ink-3);font-weight:700;font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.login{position:fixed;inset:0;z-index:100;overflow:auto;background:var(--hero);color:var(--hero-ink);display:grid;align-content:center;justify-items:center;isolation:isolate;padding:calc(24px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(90px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.login .hero-pattern{position:fixed}
.login .terraces{position:fixed;height:70px}
.login-card{width:min(400px,100%);display:grid;gap:14px;position:relative;z-index:3}
.login-card .logo{width:58px;height:58px}
.login-card .logo svg{width:44px}
.login-card .title{margin-top:4px}
.login-card .hero-sub{margin-top:-6px;margin-bottom:6px}
.login-card .label{color:var(--hero-ink-2)}
.login-card .field{gap:6px}
.login-card .input{border-color:transparent;background:var(--card);color:var(--ink)}
.login-card .btn{margin-top:6px}
.login-err{min-height:21px;font-size:14px;font-weight:700;color:var(--hero-accent)}
.login.busy .btn{opacity:.7}