/* =====================================================================
   Tick Done — Phase 9.3 Native Mobile Experience
   Mobile-first. Native-feeling app shell (top bar, tab bar, bottom
   sheets), dynamic landing page, dark mode and desktop sidebar.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
 --on-brand:#fff;--accent:#ff8a5b;--brand:#0b7a52;--brand-2:#096443;--brand-ink:#07563a;--mint:#ddf5e8;--mint-2:#c3ecd6;
 --coral:#ff8a5b;--sun:#f5c26b;--sky:#e7effb;--lilac:#eeeafa;--peach:#fff0e6;--rose:#fae8ed;--sand:#f8f0d9;
 --ink:#10221f;--text:#23332f;--muted:#5b6b66;--faint:#8e9aa2;
 --bg:#f5f7f2;--surface:#ffffff;--surface-2:#eef2ee;--surface-3:#e6ebe6;--line:#e3e8e3;
 --danger:#d0493f;--danger-bg:#fdeceb;--ok:#1f8a5b;
 --shadow-1:0 1px 2px rgba(16,34,31,.04),0 4px 14px rgba(16,34,31,.05);
 --shadow-2:0 10px 30px rgba(16,34,31,.10);
 --radius:18px;--radius-sm:12px;--radius-lg:24px;
 --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --display:"Manrope",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
 --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
 --tabbar-h:64px;--ease:cubic-bezier(.2,.9,.25,1);
 color-scheme:light;
}
body.dark,html.dark-pre body{
 --on-brand:#0b2018;--brand:#2fd08a;--brand-2:#1fae72;--brand-ink:#9ff0c6;--mint:#173a33;--mint-2:#1f4a41;
 --sky:#1c2a3d;--lilac:#26223a;--peach:#36281f;--rose:#3a2229;--sand:#352f1e;
 --ink:#eef4f1;--text:#d3ddd9;--muted:#93a39d;--faint:#6d7d77;
 --bg:#0c1412;--surface:#151f1c;--surface-2:#1c2925;--surface-3:#24332e;--line:#24322d;
 --danger:#ff8b80;--danger-bg:#3b1d1b;
 --shadow-1:0 1px 2px rgba(0,0,0,.3);--shadow-2:0 10px 30px rgba(0,0,0,.45);
 color-scheme:dark;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;min-height:100dvh}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
img{max-width:100%}
a{color:var(--brand)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ico{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
body[data-screen="app"]{overscroll-behavior-y:none;background:var(--bg)}

/* ---------- 3. Buttons ---------- */
.primary,.quiet,.light,.danger-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:12px 18px;min-height:46px;font-weight:700;font-size:15px;letter-spacing:-.1px;transition:transform .15s var(--ease),background .2s,box-shadow .2s,opacity .2s}
.primary{background:var(--brand);color:var(--on-brand);box-shadow:0 6px 16px rgba(11,122,82,.25)}
body.dark .primary{color:#06221d}
.quiet{background:var(--surface-2);color:var(--ink)}
.light{background:#fff;color:#123b34}
.primary.danger{background:var(--danger)!important;color:#fff!important;box-shadow:none}
.primary:active,.quiet:active,.light:active,.icon-btn:active,.tab:active,.fab:active,.chip:active,.card-press:active{transform:scale(.96)}
.primary:disabled{opacity:.55}
.block{width:100%}
.lg{min-height:54px;font-size:16px;border-radius:16px}
.compact{min-height:36px!important;padding:8px 12px!important;font-size:13px!important;border-radius:11px!important}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--ink);transition:transform .15s,background .2s}
.icon-btn .ico{width:22px;height:22px}
.icon-btn.soft{background:var(--surface-2);width:34px;height:34px}
.icon-btn.soft .ico{width:18px;height:18px}
.link{border:0;background:none;color:var(--brand);font-weight:700;font-size:14px;padding:6px 0}
.text-action{border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:600;padding:4px 0}
.text-action.selected{color:var(--brand)}
.pill-btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:10px 16px;font-weight:700;font-size:14px}
.pill-btn.light{background:#fff;color:#123b34}
.pill-btn .ico{width:18px;height:18px}

/* ---------- 4. Splash ---------- */
.splash{position:fixed;inset:0;z-index:9999;display:grid;place-content:center;justify-items:center;gap:14px;background:var(--bg);transition:opacity .4s ease,visibility .4s}
.splash.gone{opacity:0;visibility:hidden}
.splash-mark{width:80px;height:80px;border-radius:20px;display:block;box-shadow:0 18px 40px rgba(16,34,31,.28);animation:pulse 1.6s ease-in-out infinite}
.splash-name{font:800 24px var(--display);color:var(--ink);letter-spacing:-.8px}.splash-name span{color:var(--brand)}
@keyframes pulse{50%{transform:scale(.94)}}

.brand-mark{display:inline-block;flex:none;width:34px;height:34px;border-radius:9px;box-shadow:0 6px 14px rgba(16,34,31,.22)}
.wordmark{font-family:var(--display);font-weight:800;letter-spacing:-.04em;text-transform:lowercase}.wordmark b{color:var(--brand);font-weight:800}
body.dark .brand-mark .bm-bg,body.dark .splash-mark .bm-bg{fill:#1A3530}
.brand-mark.sm{width:28px;height:28px;border-radius:8px}

/* =====================================================================
   5. LANDING PAGE
   ===================================================================== */
.landing{--on-brand:#fff;--brand:#0b7a52;--brand-2:#096443;--mint:#ddf5e8;color-scheme:light;--l-ink:#10221f;--l-muted:#5b6b66;--l-paper:#f5f7f2;position:relative;min-height:100dvh;background:var(--l-paper);color:var(--l-ink);overflow:clip;font-family:var(--font)}
.landing em{font-style:normal}
.aurora{position:absolute;inset:0 0 auto 0;height:980px;pointer-events:none;overflow:hidden;z-index:0}
.aurora i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:520px;height:520px;background:#bfead9;top:-160px;left:-140px}
.aurora i:nth-child(2){width:420px;height:420px;background:#ffd9c2;top:120px;right:-160px;animation-delay:-6s}
.aurora i:nth-child(3){width:380px;height:380px;background:#d8e4ff;top:520px;left:30%;animation-delay:-11s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.08)}100%{transform:translate(-30px,60px) scale(.95)}}

.l-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;height:calc(64px + var(--safe-top));padding:var(--safe-top) 18px 0;transition:background .3s,box-shadow .3s}
.l-nav.scrolled{background:rgba(246,248,244,.82);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);box-shadow:0 1px 0 rgba(15,34,48,.07)}
.l-brand{display:inline-flex;align-items:center;gap:9px;color:var(--l-ink);text-decoration:none;font:800 20px var(--display);letter-spacing:-.6px}
.l-brand b{color:var(--brand)}
.l-links{display:none;gap:28px;margin-left:auto}
.l-links a{color:#4b5c66;text-decoration:none;font-weight:600;font-size:14px}
.l-links a:hover{color:var(--brand)}
.l-nav-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.l-ghost{border:0;background:transparent;color:var(--l-ink);font-weight:700;font-size:15px;padding:10px 12px;border-radius:12px}
.l-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:16px 24px;min-height:54px;background:var(--l-ink);color:#fff;font-weight:700;font-size:16px;letter-spacing:-.2px;box-shadow:0 10px 24px rgba(15,34,48,.18);transition:transform .2s var(--ease),box-shadow .2s}
.l-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,34,48,.22)}
.l-btn:active{transform:scale(.97)}
.l-btn.small{min-height:40px;padding:9px 16px;font-size:14px;display:none}
.l-btn.ghost{background:rgba(255,255,255,.7);color:var(--l-ink);box-shadow:inset 0 0 0 1px rgba(15,34,48,.1)}
.l-btn.mint{background:#bdf0dc;color:#0d3b33;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.l-btn.ghost.dk{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.l-btn .ico{width:18px;height:18px}

.l-hero{position:relative;z-index:1;display:grid;gap:28px;padding:22px 20px 30px;max-width:1200px;margin:0 auto}
.l-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(11,122,82,.18);color:#1d6f63;font-size:12px;font-weight:700}
.l-pill i{width:8px;height:8px;border-radius:50%;background:#2ab08f;box-shadow:0 0 0 0 rgba(42,176,143,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(42,176,143,0)}100%{box-shadow:0 0 0 0 rgba(42,176,143,0)}}
.l-hero h1{font:800 clamp(38px,10.6vw,84px)/1 var(--display);letter-spacing:-.045em;margin:20px 0 16px;color:var(--l-ink)}
.rotator{display:inline-block;position:relative;color:var(--brand);min-width:4ch}
.rot-word{display:inline-block;background:linear-gradient(100deg,#0b7a52,#27b394 45%,#ff8a63);-webkit-background-clip:text;background-clip:text;color:transparent;animation:word-in .55s var(--ease)}
.rot-word.out{animation:word-out .35s ease forwards}
@keyframes word-in{from{opacity:0;transform:translateY(.45em) rotateX(-40deg);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes word-out{to{opacity:0;transform:translateY(-.4em);filter:blur(4px)}}
.l-lead{font-size:17px;line-height:1.6;color:var(--l-muted);margin:0;max-width:540px}
.l-cta{display:grid;gap:10px;margin-top:26px}
.l-checks{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;padding:0;margin:20px 0 0;color:#46625a;font-size:13px;font-weight:600}
.l-checks li{display:inline-flex;align-items:center;gap:6px}
.l-checks .ico{width:16px;height:16px;color:var(--brand);stroke-width:2.6}

/* Hero device */
.l-hero-device{position:relative;display:grid;place-items:center;height:640px;margin-top:0}
.orbit{position:absolute;border:1.5px dashed rgba(11,122,82,.22);border-radius:50%;animation:spin 40s linear infinite}
.orbit.o1{width:420px;height:420px}.orbit.o2{width:560px;height:560px;animation-duration:70s;animation-direction:reverse;border-color:rgba(255,122,89,.18)}
@keyframes spin{to{transform:rotate(360deg)}}
.float-chip{position:absolute;z-index:3;padding:10px 14px;border-radius:16px;background:#fff;box-shadow:0 14px 30px rgba(15,34,48,.13);font-weight:700;font-size:13px;color:#203645;white-space:nowrap;animation:bob 6s ease-in-out infinite}
.fc1{top:6px;left:max(0px,calc(50% - 200px));animation-delay:-1s}
.fc2{top:46%;right:max(0px,calc(50% - 205px));animation-delay:-3s}
.fc3{bottom:14px;left:max(4px,calc(50% - 190px));animation-delay:-4.5s}
@keyframes bob{50%{transform:translateY(-12px)}}
.device{position:relative;z-index:2;width:268px;height:548px;border-radius:46px;padding:11px;background:#0f1a22;box-shadow:0 40px 80px rgba(15,34,48,.28),inset 0 0 0 2px #2a3742;transform:rotate(-3deg);animation:device-float 8s ease-in-out infinite}
@keyframes device-float{50%{transform:rotate(-1deg) translateY(-8px)}}
.device-island{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:20px;background:#0f1a22;z-index:3}
.device-screen{position:relative;height:100%;border-radius:36px;background:#f5f7f2;overflow:hidden;padding:12px 14px 0;font-family:var(--font)}
.d-status{display:flex;justify-content:space-between;align-items:center;padding:4px 10px 0;font-size:11px;color:#10221f}
.d-status span{font-size:8px;letter-spacing:1px}
.d-head{display:flex;justify-content:space-between;align-items:center;margin:20px 0 12px}
.d-head small{display:block;font-size:8px;letter-spacing:1.2px;color:#6d8a80;font-weight:800}
.d-head b{font:800 19px var(--display);letter-spacing:-.5px;color:#10221f}
.d-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#ffd9c2;color:#8a4b2c;font-weight:800;font-size:12px}
.d-hero{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px;border-radius:18px;background:linear-gradient(135deg,#123d36,#1b7464);color:#fff}
.d-hero small{font-size:7px;letter-spacing:1.2px;color:#a9e6d3;font-weight:800}
.d-hero b{display:block;font:800 16px var(--display);margin:3px 0}
.d-hero em{font-size:9px;color:#cfe6de}
.d-ring{position:relative;width:52px;height:52px}
.d-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.d-ring circle{fill:none;stroke:rgba(255,255,255,.18);stroke-width:5}
.d-ring circle.v{stroke:#bdf0dc;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:75.4;transition:stroke-dashoffset .8s var(--ease)}
.d-ring i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:800}
.d-list{display:grid;gap:7px;margin-top:12px}
.d-item{display:flex;align-items:center;gap:9px;padding:9px;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(15,34,48,.05);transition:transform .3s var(--ease),background .3s}
.d-item.pop{transform:scale(1.04)}
.d-emo{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:14px;flex:0 0 30px}
.d-item div{flex:1;min-width:0}
.d-item b{display:block;font-size:10.5px;color:#13283a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-item small{font-size:8.5px;color:#8a979e}
.d-check{width:20px;height:20px;border-radius:50%;border:2px solid #cfd8d3;flex:0 0 20px;position:relative;transition:.3s}
.d-item.done .d-check{background:#0b7a52;border-color:#0b7a52}
.d-item.done .d-check::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.d-item.done b{color:#8a979e;text-decoration:line-through}
.d-tabs{position:absolute;left:0;right:0;bottom:0;height:62px;display:flex;justify-content:space-around;align-items:center;padding-bottom:10px;background:rgba(255,255,255,.92);border-top:1px solid #e6ebe6}
.d-tabs i{width:18px;height:18px;border-radius:6px;background:#d7dfdb}.d-tabs i.on{background:#0b7a52}
.d-tabs b{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:#0b7a52;color:#fff;font-size:20px;transform:translateY(-8px);box-shadow:0 6px 14px rgba(11,122,82,.35)}
.d-toast{position:absolute;left:50%;bottom:78px;transform:translate(-50%,20px);opacity:0;padding:9px 14px;border-radius:12px;background:#10221f;color:#fff;font-size:10px;font-weight:700;white-space:nowrap;transition:.4s var(--ease)}
.d-toast.show{opacity:1;transform:translate(-50%,0)}

/* Marquee */
.l-marquee{position:relative;z-index:1;display:grid;gap:10px;padding:18px 0 8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq{overflow:hidden}
.mq-track{display:flex;gap:10px;width:max-content;animation:marquee 38s linear infinite}
.mq.rev .mq-track{animation-direction:reverse;animation-duration:44s}
.mq span{padding:11px 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #e3e9e4;font-size:14px;font-weight:600;color:#3f5650;white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Sections */
.l-section{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:72px 20px}
.l-kicker{font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--brand)}
.l-kicker.dk{color:#9fe6cf}
.l-h2{font:800 clamp(34px,8.5vw,56px)/1.04 var(--display);letter-spacing:-.04em;margin:12px 0 28px;color:var(--l-ink)}
.l-h2 em{color:var(--brand)}
.l-features{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.l-features::-webkit-scrollbar{display:none}
.f-card{position:relative;flex:0 0 82%;scroll-snap-align:center;min-height:400px;border-radius:28px;padding:24px;overflow:hidden;display:flex;flex-direction:column}
.f-num{font:800 12px var(--display);letter-spacing:1px;opacity:.55}
.f-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:rgba(255,255,255,.75);margin:14px 0 18px}
.f-card h3{font:800 25px/1.12 var(--display);letter-spacing:-.6px;margin:0 0 10px;color:#13283a}
.f-card p{font-size:15px;line-height:1.55;color:#4f6169;margin:0}
.f-ideas{background:linear-gradient(160deg,#dff3ea,#c3ecd6)}
.f-share{background:linear-gradient(160deg,#fdeee2,#f9dcc6)}
.f-plan{background:linear-gradient(160deg,#e8eefb,#d6e1f8)}
.f-memory{background:linear-gradient(160deg,#fbe9ef,#f5d3de)}
.f-stack{display:grid;gap:8px;margin-top:auto;padding-top:20px}
.f-stack div{padding:12px 14px;border-radius:14px;background:#fff;box-shadow:0 6px 16px rgba(15,34,48,.07);font-size:14px}
.f-stack div:nth-child(2){margin-left:18px}.f-stack div:nth-child(3){margin-left:36px}
.f-avatars{display:flex;margin-top:auto;padding-top:20px}
.f-avatars i{width:52px;height:52px;margin-right:-12px;border-radius:50%;border:3px solid #fbe6d6;display:grid;place-items:center;font-style:normal;font-weight:800;color:#fff;background:#e7a07f}
.f-avatars i:nth-child(2){background:#7fae98}.f-avatars i:nth-child(3){background:#c7975e}.f-avatars i:nth-child(4){background:#fff;color:#5f7a6d}
.f-cal{display:flex;gap:8px;margin-top:auto;padding:14px;border-radius:16px;background:#fff;justify-content:space-between}
.f-cal i{font-style:normal;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#4c6380}
.f-cal i.on{background:var(--brand);color:var(--on-brand);animation:pulse 2s infinite}
.f-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:auto}
.f-tiles i{aspect-ratio:1;border-radius:14px;display:grid;place-items:center;background:#fff;font-style:normal;font-size:22px}
.l-dots{display:flex;justify-content:center;gap:6px;margin-top:6px}
.l-dots i{width:7px;height:7px;border-radius:5px;background:#cfd9d4;transition:.3s}
.l-dots i.on{width:22px;background:var(--brand)}

.l-how{position:relative;z-index:1;background:#0f2a2f;color:#fff;border-radius:32px 32px 0 0}
.l-how .l-h2{color:#fff}.l-how .l-h2 em{color:#9fe6cf}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative}
.timeline::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:linear-gradient(#2a6d62,#9fe6cf)}
.timeline li{position:relative;display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:22px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.t-dot{position:relative;z-index:1;flex:0 0 30px;width:30px;height:30px;margin-left:-2px;border-radius:50%;display:grid;place-items:center;background:#9fe6cf;color:#0f2a2f;font-weight:800}
.timeline h3{font:800 20px var(--display);margin:2px 0 6px}
.timeline p{margin:0;color:#b8cdcb;line-height:1.55;font-size:15px}

.l-install{padding-top:0;background:#0f2a2f;max-width:none}
.install-card{max-width:1160px;margin:0 auto;display:grid;gap:26px;padding:28px 22px;border-radius:28px;background:linear-gradient(150deg,#16424a,#1a6a5c);color:#fff;overflow:hidden}
.install-card .l-h2{color:#fff;margin-bottom:14px}.install-card .l-h2 em{color:#bdf0dc}
.install-copy>p{color:#cfe3df;line-height:1.6;font-size:15px;margin:0 0 20px}
.seg.dk{background:rgba(255,255,255,.12)}
.seg.dk button{color:#d7ebe6}
.seg.dk button.active{background:#fff;color:#0f3b34}
.install-steps{list-style:none;margin:16px 0 20px;padding:0;display:grid;gap:8px;counter-reset:s}
.install-steps li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.08);font-size:14px;line-height:1.45;color:#e8f3f0;animation:fade-up .35s var(--ease) both}
.install-steps li::before{content:counter(s);flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#bdf0dc;color:#0d3b33;font-weight:800;font-size:12px}
.install-steps b{color:#fff}
.install-actions{display:grid;gap:10px}
.install-art{display:grid;place-items:center;padding:10px 0}
.homescreen{width:220px;padding:18px 14px 70px;border-radius:34px;background:linear-gradient(160deg,#cfe7dd,#a9d4c3);position:relative;transform:rotate(5deg);box-shadow:0 30px 60px rgba(0,0,0,.3)}
.hs-widget{padding:14px;border-radius:18px;background:linear-gradient(140deg,#123d46,#24806f);display:grid;gap:18px}
.hs-widget small{font-size:8px;letter-spacing:1px;color:#b8e5d6;font-weight:800}.hs-widget b{font:800 20px/1.1 var(--display)}
.hs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 6px;margin-top:16px}
.hs-grid span{display:grid;justify-items:center;gap:4px}
.hs-grid i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.85);font-style:normal;font-size:18px}
.hs-grid em{font-size:7.5px;color:#24463c;font-weight:600}
.hs-grid .ll i{background:none;overflow:hidden;box-shadow:0 0 0 3px rgba(255,255,255,.75);animation:pulse 2.4s infinite}
.hs-dock{position:absolute;left:12px;right:12px;bottom:12px;padding:10px;border-radius:20px;background:rgba(255,255,255,.55);display:flex;justify-content:space-around}
.hs-dock i{width:30px;height:30px;border-radius:9px;background:#fff}

.l-faq{padding-top:72px}
.faq-list{display:grid;gap:10px}
.faq-list details{border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px #e3e9e4;padding:0 18px;transition:box-shadow .2s}
.faq-list details[open]{box-shadow:inset 0 0 0 1.5px var(--brand),0 8px 22px rgba(15,34,48,.06)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:60px;font-weight:700;font-size:16px;color:#183040}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--brand);font-size:20px;transition:transform .3s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list p{margin:0 0 18px;color:#5c6d76;line-height:1.6;font-size:15px}

.l-final{position:relative;z-index:1;padding:20px 14px 0}
.l-final-inner{max-width:1160px;margin:0 auto;text-align:center;padding:60px 22px;border-radius:32px;background:radial-gradient(120% 100% at 50% 0%,#1d7a69,#0f2a2f);color:#fff;overflow:hidden;position:relative}
.l-final-inner::before{content:"✦";position:absolute;top:18px;right:26px;font-size:42px;color:#9fe6cf;opacity:.5;animation:spin 14s linear infinite}
.l-final h2{font:800 clamp(40px,11vw,68px)/1 var(--display);letter-spacing:-.045em;margin:14px 0}
.l-final h2 em{color:#bdf0dc}
.l-final p{color:#cfe3df;max-width:420px;margin:0 auto 24px;line-height:1.6}
.l-final small{display:block;margin-top:14px;color:#9fbdb6;font-size:13px}
.l-footer{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:30px 20px calc(110px + var(--safe-bottom));display:flex;flex-wrap:wrap;align-items:center;gap:14px;color:#6d7d77;font-size:14px}
.l-footer>span{width:100%}
.l-footer div{display:flex;gap:18px}
.l-footer a,.l-footer button{border:0;background:none;color:#40544d;font-weight:700;text-decoration:none;padding:0;font-size:14px}
.l-footer small{width:100%;font-size:12px;color:#93a29c}
.l-sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:12px 16px calc(12px + var(--safe-bottom));transform:translateY(130%);transition:transform .4s var(--ease)}
.l-sticky.show{transform:none}
.l-sticky .l-btn{width:100%;box-shadow:0 12px 30px rgba(15,34,48,.35)}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media(min-width:700px){
 .l-btn.small{display:inline-flex}
 .l-cta{display:flex;flex-wrap:wrap}
 .f-card{flex-basis:46%}
 .install-actions{display:flex}
}
@media(min-width:1000px){
 .l-nav{padding:0 36px}
 .l-links{display:flex}
 .l-nav-actions{margin-left:16px}
 .l-hero{grid-template-columns:1.05fr .95fr;align-items:center;padding:60px 36px 50px;min-height:680px}
 .l-hero-device{height:620px}
 .l-section{padding:110px 36px}
 .l-features{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0}
 .f-card{min-height:440px}
 .l-dots{display:none}
 .timeline{grid-template-columns:repeat(3,1fr);gap:18px}
 .timeline::before{left:40px;right:40px;top:38px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,#2a6d62,#9fe6cf)}
 .timeline li{flex-direction:column;padding:24px}
 .l-install{padding:0 36px 110px}
 .install-card{grid-template-columns:1.1fr .9fr;padding:56px;align-items:center}
 .faq-list{grid-template-columns:1fr 1fr}
 .l-final{padding:0 36px}
 .l-footer{padding:36px;flex-wrap:nowrap}.l-footer>span{width:auto;margin-right:auto}.l-footer small{width:auto}
 .l-sticky{display:none}
}

/* =====================================================================
   6. WELCOME (installed app, signed out)
   ===================================================================== */
.welcome{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg);padding:calc(var(--safe-top) + 20px) 0 calc(var(--safe-bottom) + 20px)}
.welcome-track{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.welcome-track::-webkit-scrollbar{display:none}
.w-slide{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 32px}
.w-art{position:relative;width:240px;height:240px;border-radius:50%;display:grid;place-items:center;margin-bottom:34px}
.w-art.a1{background:radial-gradient(circle,#d8f2e7,#e9f6f0 60%,transparent 70%)}
.w-art.a2{background:radial-gradient(circle,#fde3d3,#fdf0e8 60%,transparent 70%)}
.w-art.a3{background:radial-gradient(circle,#dde6fb,#edf2fc 60%,transparent 70%)}
body.dark .w-art{filter:brightness(.55) saturate(1.2)}
.w-art span{font-size:74px;animation:bob 5s ease-in-out infinite}
.w-art i{position:absolute;font-style:normal;font-size:30px;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow-2);animation:bob 6s ease-in-out infinite}
.w-art i:nth-of-type(1){top:6px;right:8px;animation-delay:-1s}.w-art i:nth-of-type(2){bottom:20px;right:-6px;animation-delay:-2.5s}.w-art i:nth-of-type(3){bottom:34px;left:-4px;animation-delay:-4s}
.w-slide h2{font:800 32px/1.08 var(--display);letter-spacing:-.04em;color:var(--ink);margin:0 0 12px}
.w-slide p{color:var(--muted);font-size:16px;line-height:1.55;margin:0;max-width:320px}
.w-dots{display:flex;justify-content:center;gap:6px;margin:18px 0 22px}
.w-dots i{width:7px;height:7px;border-radius:5px;background:var(--surface-3);transition:.3s}
.w-dots i.on{width:22px;background:var(--brand)}
.w-actions{display:grid;gap:10px;padding:0 22px}
.w-actions button{min-height:54px;font-size:16px;border-radius:16px}

/* =====================================================================
   7. AUTH
   ===================================================================== */
.auth{position:fixed;inset:0;z-index:50;overflow-y:auto;background:var(--bg);padding:calc(var(--safe-top) + 6px) 0 calc(var(--safe-bottom) + 24px)}
.auth::before{content:"";position:fixed;top:-200px;right:-160px;width:420px;height:420px;border-radius:50%;background:var(--mint);filter:blur(40px);opacity:.8;pointer-events:none}
.auth-top{position:relative;height:48px;display:flex;align-items:center;padding:0 8px}
.auth-card{position:relative;max-width:440px;margin:0 auto;padding:8px 22px 0;display:flex;flex-direction:column}
.auth-mark{width:56px;height:56px;border-radius:15px;display:block;box-shadow:0 12px 28px rgba(16,34,31,.25);margin:6px 0 22px}
body.dark .auth-mark .bm-bg{fill:#1A3530}
.auth-card h1{font:800 32px/1.1 var(--display);letter-spacing:-.04em;color:var(--ink);margin:0 0 8px}
.auth-card>p{color:var(--muted);font-size:15px;line-height:1.5;margin:0 0 22px}
.auth-card .seg{margin-bottom:6px}
.auth-msg{min-height:0;margin:10px 0 0;font-size:14px;color:var(--ok);line-height:1.45}
.auth-msg:empty{display:none}
.auth-msg.is-error{color:var(--danger)}
.auth-forgot{align-self:flex-end;border:0;background:none;color:var(--brand);font-weight:700;font-size:14px;padding:10px 0 0}
.auth-card .primary{margin-top:18px}
.auth-switch{border:0;background:none;color:var(--muted);font-weight:600;font-size:14px;padding:16px 0 4px}
.auth-foot{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--faint);font-size:12px;margin-top:12px;text-align:center}
.auth-foot .ico{width:14px;height:14px}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:50px}
.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;color:var(--muted);display:grid;place-items:center}

/* ---------- Form fields (shared) ---------- */
.field{display:grid;gap:7px;margin-top:14px;min-width:0}
.field>span{font-size:13px;font-weight:700;color:var(--muted)}
.field>span i{font-weight:500;font-style:normal;color:var(--faint)}
.field input,.field select,.field textarea,.dialog-fields input,.dialog-fields select,.dialog-fields textarea{width:100%;min-width:0;min-height:50px;border:1.5px solid transparent;border-radius:14px;background:var(--surface-2);padding:13px 15px;font-size:16px;color:var(--ink);outline:none;transition:border-color .2s,background .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.field select,.dialog-fields select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237b8a90' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}
.field textarea,.dialog-fields textarea{min-height:110px;resize:vertical;line-height:1.45}
.field input:focus,.field select:focus,.field textarea:focus,.dialog-fields input:focus,.dialog-fields select:focus,.dialog-fields textarea:focus{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent)}
.field input::placeholder,.dialog-fields ::placeholder{color:var(--faint)}
.field.big input{min-height:58px;font-size:19px;font-weight:600;background:transparent;border-bottom:1.5px solid var(--line);border-radius:0;padding:12px 2px}
.field.big input:focus{box-shadow:none;background:transparent}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
input[type=date],input[type=datetime-local]{min-height:50px}

/* Segmented control */
.seg{display:flex;gap:2px;padding:3px;border-radius:13px;background:var(--surface-2);overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg>button,.seg>label{flex:1;position:relative;border:0;background:transparent;border-radius:10px;padding:9px 10px;min-height:38px;font-size:14px;font-weight:650;color:var(--muted);white-space:nowrap;display:grid;place-items:center;transition:background .25s var(--ease),color .2s,box-shadow .25s}
.seg>button.active{background:var(--surface);color:var(--ink);box-shadow:0 2px 6px rgba(16,34,31,.10)}
body.dark .seg>button.active{background:var(--surface-3)}
.radio-seg input{position:absolute;opacity:0;pointer-events:none}
.radio-seg label span{font-size:13px}
.radio-seg label:has(input:checked){background:var(--surface);color:var(--ink);box-shadow:0 2px 6px rgba(16,34,31,.10)}
body.dark .radio-seg label:has(input:checked){background:var(--surface-3)}

/* Chips */
.chips-scroll{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none;scroll-snap-type:x proximity}
.chips-scroll::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;scroll-snap-align:start;border:0;border-radius:999px;padding:9px 14px;min-height:38px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font-size:14px;font-weight:600;transition:.2s}
.chip.active{background:var(--ink);color:var(--bg);box-shadow:none}
.cat-picker{display:flex;flex-wrap:wrap;gap:8px}
.cat-picker label{position:relative}
.cat-picker input{position:absolute;opacity:0;pointer-events:none}
.cat-picker span{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;min-height:42px;border-radius:999px;background:var(--surface-2);font-size:14px;font-weight:600;color:var(--text);transition:.2s;cursor:pointer}
.cat-picker input:checked+span{background:var(--mint);color:var(--brand-ink);box-shadow:inset 0 0 0 1.5px var(--brand)}
.cat-picker input:focus-visible+span{outline:2px solid var(--brand)}

/* =====================================================================
   8. APP SHELL
   ===================================================================== */
.app{min-height:100dvh}
.sidebar{display:none}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:4px;height:calc(54px + var(--safe-top));padding:var(--safe-top) 10px 0 14px;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 .5px 0 transparent;transition:box-shadow .25s}
.topbar.scrolled{box-shadow:0 .5px 0 var(--line)}
.topbar .back-btn{margin-left:-8px;color:var(--brand)}
.topbar .back-btn .ico{width:26px;height:26px;stroke-width:2.4}
.topbar-center{flex:1;min-width:0;display:grid}
.topbar-center>*{grid-area:1/1;align-self:center;transition:opacity .25s,transform .25s var(--ease)}
.topbar-brand{display:flex;align-items:center;gap:8px;font:800 19px var(--display);letter-spacing:-.5px;color:var(--ink)}
.topbar-brand b{color:var(--brand)}
.topbar-title{font-weight:700;font-size:17px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(6px);pointer-events:none}
.topbar.scrolled .topbar-brand,.topbar.pushed .topbar-brand{opacity:0;transform:translateY(-6px);pointer-events:none}
.topbar.scrolled .topbar-title,.topbar.pushed .topbar-title{opacity:1;transform:none}
.topbar-actions{display:flex;align-items:center;gap:4px}
.topbar .dot,.tab .dot{position:absolute;top:8px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 2px var(--bg)}
.avatar-btn{width:36px;height:36px;margin-left:4px;border:0;border-radius:50%;background:linear-gradient(135deg,#ffcfb5,#f7a98a);color:#6f3519;font-weight:800;font-size:15px;display:grid;place-items:center;transition:transform .15s}
.avatar-btn:active{transform:scale(.92)}

.ptr{position:fixed;left:50%;top:calc(var(--safe-top) + 50px);z-index:39;width:38px;height:38px;margin-left:-19px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--brand);box-shadow:var(--shadow-2);transform:translateY(-70px) scale(.6);opacity:0;pointer-events:none}
.ptr.spin .ico{animation:spin .8s linear infinite}

.screen{padding:0 16px calc(var(--tabbar-h) + var(--safe-bottom) + 32px);max-width:760px;margin:0 auto;min-height:calc(100dvh - 54px)}
.screen.enter{animation:screen-in .32s var(--ease)}
.screen.enter-push{animation:screen-push .34s var(--ease)}
.screen.enter-pop{animation:screen-pop .34s var(--ease)}
@keyframes screen-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes screen-push{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes screen-pop{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
.large-title{padding:6px 2px 16px}
.large-title small{display:block;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.large-title h1{font:800 32px/1.08 var(--display);letter-spacing:-.035em;color:var(--ink);margin:4px 0 0}
.large-title h1 em{font-style:normal;color:var(--brand)}
.large-title p{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--muted)}
.large-title p:empty{display:none}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;height:calc(var(--tabbar-h) + var(--safe-bottom));padding:0 6px var(--safe-bottom);background:color-mix(in srgb,var(--surface) 84%,transparent);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);box-shadow:0 -.5px 0 var(--line)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--tabbar-h);border:0;background:none;color:var(--muted);transition:color .2s,transform .15s}
.tab small{font-size:11px;font-weight:650;letter-spacing:-.1px}
.tab-ico{display:grid;place-items:center;width:58px;height:30px;border-radius:15px;transition:background .3s var(--ease)}
.tab .ico{width:23px;height:23px;transition:transform .3s var(--ease)}
.tab.active{color:var(--brand-ink)}
body:not(.dark) .tab.active{color:var(--brand-2)}
.tab.active .tab-ico{background:var(--mint)}
.tab.active .ico{stroke-width:2.3}
.tab .dot{top:6px;right:calc(50% - 20px)}
.fab{justify-self:center;width:54px;height:54px;border:0;border-radius:18px;display:grid;place-items:center;background:linear-gradient(140deg,var(--brand),var(--brand-2));color:var(--on-brand);box-shadow:0 10px 22px rgba(11,122,82,.38);transform:translateY(-10px);transition:transform .2s var(--ease)}
.fab .ico{width:26px;height:26px;stroke-width:2.6}
body.dark .fab{color:#05231d}

/* =====================================================================
   9. COMPONENTS
   ===================================================================== */
.section{margin-top:26px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.section-head h3{font:800 20px var(--display);letter-spacing:-.4px;color:var(--ink);margin:0}
.section-head small{color:var(--muted);font-weight:600}
.page-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.page-actions p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.page-actions .primary,.page-actions .quiet{flex:0 0 auto;min-height:42px;padding:10px 14px;font-size:14px}
.page-actions .ico{width:18px;height:18px}
.stack{display:grid;gap:10px}
.empty{display:grid;justify-items:center;gap:8px;padding:32px 22px;text-align:center;color:var(--muted);font-size:14px;line-height:1.5;background:var(--surface);border-radius:var(--radius);box-shadow:inset 0 0 0 1.5px var(--line);border:0}
.empty .e-ico{font-size:34px;line-height:1}
.empty b{color:var(--ink);font-size:16px}
.field-hint{font-size:13px;color:var(--muted);line-height:1.45;margin:0;font-weight:500}
.h-scroll{display:flex;gap:12px;overflow-x:auto;margin:0 -16px;padding:2px 16px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.h-scroll::-webkit-scrollbar{display:none}

/* Home hero */
.home-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;padding:22px 20px;border-radius:26px;background:linear-gradient(135deg,#123d36 0%,#17695b 60%,#0b7a52 100%);color:#fff;box-shadow:0 18px 36px rgba(18,61,54,.22)}
.home-hero::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-80px;top:-90px;background:radial-gradient(circle,rgba(189,240,220,.35),transparent 70%)}
.home-hero::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;left:-60px;bottom:-90px;background:radial-gradient(circle,rgba(255,170,130,.25),transparent 70%)}
.home-hero-copy{position:relative;z-index:1;flex:1;min-width:0}
.home-hero small{font-size:12px;font-weight:700;letter-spacing:.6px;color:#a9e6d3;text-transform:uppercase}
.home-hero h2{font:800 23px/1.15 var(--display);letter-spacing:-.5px;margin:6px 0 6px}
.home-hero p{margin:0 0 14px;color:#cfe6de;font-size:14px}
.ring{position:relative;z-index:1;flex:0 0 88px;width:88px;height:88px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8}
.ring-track{stroke:rgba(255,255,255,.16)}
.ring-value{stroke:#bdf0dc;stroke-linecap:round;transition:stroke-dashoffset 1.1s var(--ease)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 20px var(--display)}

.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
.qa{display:grid;justify-items:center;gap:7px;border:0;background:none;padding:4px 0;color:var(--text);font-size:12.5px;font-weight:650}
.qa span{width:56px;height:56px;border-radius:19px;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow-1);color:var(--brand);transition:transform .15s}
.qa span .ico{width:24px;height:24px}
.qa:active span{transform:scale(.92)}
.qa:nth-child(2) span{color:#e06a45}.qa:nth-child(3) span{color:#4a72c9}.qa:nth-child(4) span{color:#c0892a}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.stat{border:0;text-align:left;padding:14px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-1);color:var(--text);min-width:0}
.stat strong{display:block;font:800 26px var(--display);letter-spacing:-.8px;color:var(--ink)}
.stat small{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.collection{flex:0 0 150px;scroll-snap-align:start;border:0;padding:0;text-align:left;border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-1);color:var(--text);transition:transform .15s}
.collection:active{transform:scale(.96)}
.collection .visual{height:96px;display:grid;place-items:center;font-size:40px}
.collection div:last-child{padding:12px 14px 14px}
.collection b{display:block;font-size:15px;color:var(--ink)}
.collection small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}

/* Upcoming / list rows */
.list-group{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden}
.row-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border:0;width:100%;text-align:left;background:none;color:var(--text);position:relative}
.row-item+.row-item::before{content:"";position:absolute;top:0;left:70px;right:0;height:.5px;background:var(--line)}
.datebox{flex:0 0 46px;height:50px;border-radius:13px;background:var(--mint);color:var(--brand-ink);display:grid;place-content:center;text-align:center;font:800 18px/1 var(--display)}
.datebox small{display:block;font:700 10px var(--font);text-transform:uppercase;margin-top:3px;letter-spacing:.5px}
.itemcopy{flex:1;min-width:0}
.itemcopy b{display:block;font-size:15px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itemcopy small{display:block;font-size:13px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-item>.ico{color:var(--faint)}

/* Experience card */
.exp-list{display:grid;gap:10px}
.exp-card{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-1);animation:fade-up .35s var(--ease) both}
.exp-card:nth-child(2){animation-delay:.03s}.exp-card:nth-child(3){animation-delay:.06s}.exp-card:nth-child(4){animation-delay:.09s}.exp-card:nth-child(5){animation-delay:.12s}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.exp-check{flex:0 0 28px;width:28px;height:28px;margin-top:1px;border-radius:50%;border:2px solid var(--surface-3);background:transparent;display:grid;place-items:center;color:transparent;transition:background .25s,border-color .25s,transform .2s var(--ease)}
.exp-check .ico{width:16px;height:16px;stroke-width:3}
.exp-check.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
body.dark .exp-check.on{color:#06221d}
.exp-check:active{transform:scale(.85)}
.exp-check.static{pointer-events:none}
.exp-body{flex:1;min-width:0}
.exp-body>b{display:block;font-size:16px;font-weight:650;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.exp-card.done .exp-body>b{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--faint)}
.exp-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;background:var(--surface-2);font-size:12px;font-weight:650;color:var(--muted)}
.tag .ico{width:13px;height:13px}
.tag.hi{background:#fdeae4;color:#c2552f}
body.dark .tag.hi{background:#3a221a;color:#ffa685}
.exp-notes{margin:8px 0 0;font-size:14px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
.exp-social{display:flex;gap:16px;margin-top:10px}
.exp-social button{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:4px 0;color:var(--muted);font-size:13px;font-weight:650}
.exp-social .ico{width:17px;height:17px}
.exp-social button.selected{color:var(--coral)}
.exp-social button.selected .ico{fill:currentColor}
.exp-more{margin:-6px -8px 0 0;color:var(--muted)}

.list-switcher{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.list-pill{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:40px;border:0;border-radius:999px;padding:8px 12px 8px 14px;background:var(--surface);box-shadow:var(--shadow-1);font-weight:700;font-size:15px;color:var(--ink)}
.list-pill span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-pill .ico{width:18px;height:18px;color:var(--muted)}
.list-switcher .icon-btn{margin-left:auto;background:var(--surface);box-shadow:var(--shadow-1);width:40px;height:40px}
.list-switcher .icon-btn .ico{width:19px;height:19px}
.role-tag{font-size:12px;font-weight:700;color:var(--muted);background:var(--surface-2);padding:5px 9px;border-radius:999px}
.tools{display:grid;gap:12px;margin-bottom:16px}

/* Calendar */
.cal{padding:14px;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-1)}
.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.calendar-toolbar h3{font:800 18px var(--display);color:var(--ink);margin:0}
.calendar-toolbar button{width:38px;height:38px;border:0;border-radius:50%;background:var(--surface-2);color:var(--ink);display:grid;place-items:center}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.calendar-weekday{text-align:center;color:var(--faint);font-size:12px;font-weight:700;padding:6px 0}
.cal-day{position:relative;aspect-ratio:1/1.05;border:0;border-radius:12px;background:none;display:grid;place-items:center;align-content:center;gap:3px;font-size:15px;font-weight:600;color:var(--ink);min-width:0}
.cal-day.muted{color:var(--faint);opacity:.55}
.cal-day.today span{color:var(--brand);font-weight:800}
.cal-day.sel{background:var(--ink);color:var(--bg)}
.cal-day.sel span{color:var(--bg)!important}
.cal-dots{display:flex;gap:3px;height:5px}
.cal-dots i{width:5px;height:5px;border-radius:50%;background:var(--brand)}
.cal-dots i.ev{background:#5a82d6}.cal-dots i.dn{background:var(--faint)}
.cal-day.sel .cal-dots i{background:var(--bg)}
.cal-agenda{margin-top:18px}
.calendar-event{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border:0;text-align:left;background:none;color:var(--text);position:relative}
.calendar-event+.calendar-event::before{content:"";position:absolute;top:0;left:52px;right:0;height:.5px;background:var(--line)}
.calendar-event .ce-ico{flex:0 0 28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--mint);font-size:14px}
.calendar-event.calendar-event-social .ce-ico{background:var(--sky);color:#4a72c9}
.calendar-event .ce-ico .ico{width:16px;height:16px}
.calendar-event b{display:block;font-size:15px;font-weight:650;color:var(--ink)}
.calendar-event small{color:var(--muted);font-size:13px}
.calendar-event.done b{text-decoration:line-through;color:var(--muted)}

/* =====================================================================
   10. SOCIAL
   ===================================================================== */
.social-panel{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:16px;margin:0 0 14px}
.social-panel h3{display:flex;align-items:center;gap:8px;font:800 17px var(--display);color:var(--ink);margin:0 0 6px}
.social-panel h3 span{font:700 12px var(--font);color:var(--muted);background:var(--surface-2);padding:3px 8px;border-radius:999px}
.avatar{flex:0 0 42px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#d6f0e6,#dfe8fa);color:#1f6e63;font:800 16px var(--display)}
body.dark .avatar{background:linear-gradient(135deg,#1f4a41,#24324a);color:#bdf0dc}
.avatar.lg{width:56px;height:56px;flex-basis:56px;font-size:22px}
.friend-row,.feed-card,.notification-row,.attendee-row{display:flex;align-items:center;gap:12px;padding:12px 0;min-width:0}
.friend-row+.friend-row,.feed-card+.feed-card,.notification-row+.notification-row,.attendee-row+.attendee-row{box-shadow:0 -.5px 0 var(--line)}
.friend-copy,.feed-copy,.notification-copy{flex:1;min-width:0}
.friend-copy b,.feed-copy b,.notification-copy b{display:block;font-size:15px;color:var(--ink);font-weight:650}
.friend-copy small,.feed-copy small,.notification-copy small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.feed-card{align-items:flex-start}
.feed-copy p,.notification-copy p{font-size:14px;line-height:1.45;color:var(--text);margin:3px 0;overflow-wrap:anywhere}
.friend-state{font-size:12px;font-weight:700;color:var(--brand);background:var(--mint);padding:5px 10px;border-radius:999px}
.req-actions{display:flex;gap:6px}
.notification-row{align-items:flex-start;cursor:pointer}
.notification-row.read{opacity:.6}
.notification-icon{flex:0 0 40px;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--mint);color:var(--brand)}
.notification-icon .ico{width:19px;height:19px}
.unread-dot{flex:0 0 10px;width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--coral)}
.group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.group-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:16px;border:0;text-align:left;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-1);color:var(--text)}
.group-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:22px;margin-bottom:8px}
.group-card small{font-size:11px;letter-spacing:.6px;font-weight:800;color:var(--brand)}
.group-card h3{font:800 16px var(--display);color:var(--ink);margin:0;overflow-wrap:anywhere}
.group-card p{font-size:13px;color:var(--muted);margin:0}
.friend-choice{display:flex!important;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surface-2);font-size:15px;font-weight:600;color:var(--ink)}
.friend-choice input{width:22px!important;height:22px;min-height:0!important;accent-color:var(--brand);-webkit-appearance:auto!important;appearance:auto!important;padding:0!important}
.friend-choice small{display:block;color:var(--muted);font-size:12px;font-weight:500}
.group-invite-choices{display:grid;gap:8px}
.group-invite-choices>b{font-size:13px;color:var(--muted)}
.milestone-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.milestone-card{display:grid;gap:4px;padding:14px;border-radius:16px;background:var(--surface-2);min-width:0}
.milestone-card>span{font-size:26px;filter:grayscale(1);opacity:.55}
.milestone-card b{font-size:14px;color:var(--ink)}
.milestone-card small{font-size:12.5px;line-height:1.4;color:var(--muted)}
.milestone-card i{font-size:11px;font-style:normal;font-weight:800;color:var(--faint);text-transform:uppercase;letter-spacing:.5px}
.milestone-card.earned{background:var(--mint);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 35%,transparent)}
.milestone-card.earned>span{filter:none;opacity:1}
.milestone-card.earned i{color:var(--brand)}

/* =====================================================================
   11. EVENTS
   ===================================================================== */
.event-grid{display:grid;gap:10px}
.event-card{display:flex;align-items:center;gap:14px;width:100%;padding:14px;border:0;text-align:left;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-1);color:var(--text);transition:transform .15s}
.event-card:active{transform:scale(.98)}
.event-card.past{opacity:.65}
.event-date{flex:0 0 54px;height:60px;border-radius:15px;display:grid;align-content:center;justify-items:center;background:linear-gradient(160deg,var(--mint),var(--mint-2));color:var(--brand-ink)}
.event-date b{font:800 22px/1 var(--display)}
.event-date small{font-size:11px;font-weight:800;text-transform:uppercase;margin-top:3px}
.event-card-copy{flex:1;min-width:0}
.event-card-copy>small{font-size:11px;letter-spacing:.6px;font-weight:800;color:var(--brand);text-transform:uppercase}
.event-card-copy h3{font-size:16px;font-weight:700;color:var(--ink);margin:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-card-copy p{font-size:13px;color:var(--muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-arrow{color:var(--faint)}
.event-hero{position:relative;overflow:hidden;margin:0 -16px 16px;padding:8px 20px 22px;background:linear-gradient(160deg,#123d36,#1d7a69);color:#fff}
.event-hero::after{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-100px;border-radius:50%;background:radial-gradient(circle,rgba(189,240,220,.3),transparent 70%)}
.event-hero>*{position:relative;z-index:1}
.event-hero>small{font-size:11px;letter-spacing:1.2px;color:#a9e6d3;font-weight:800}
.event-hero h2{font:800 30px/1.08 var(--display);letter-spacing:-.6px;margin:8px 0 12px;overflow-wrap:anywhere}
.event-hero p{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.5;color:#d6e9e3;margin:6px 0;overflow-wrap:anywhere}
.event-hero p .ico{width:17px;height:17px;margin-top:2px;flex:0 0 17px;color:#a9e6d3}
.event-hero .desc{display:block;color:#e6f2ee;margin-top:12px}
.event-quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
.eqa{display:grid;justify-items:center;gap:6px;border:0;background:none;color:#e6f2ee;font-size:12px;font-weight:650;padding:0}
.eqa span{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.14);transition:transform .15s}
.eqa:active span{transform:scale(.9)}
.rsvp-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:14px;margin-bottom:14px}
.rsvp-card>b{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:0 0 10px 2px}
.rsvp-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rsvp-actions button{min-height:46px;border:0;border-radius:13px;background:var(--surface-2);color:var(--text);font-weight:700;font-size:14px;transition:.2s}
.rsvp-actions button.selected{background:var(--brand);color:var(--on-brand)}
body.dark .rsvp-actions button.selected{color:#06221d}
.attendee-summary{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.attendee-summary span{font-size:12px;font-weight:650;color:var(--muted);background:var(--surface-2);padding:5px 10px;border-radius:999px;text-transform:capitalize}
.event-admin-actions{display:flex;gap:8px;margin-top:12px}
.event-admin-actions button{flex:1}
.event-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.event-section-head h3{margin:0}
.event-section-head .field-hint{display:block;margin-top:3px}
.poll-card{padding:12px 0;box-shadow:0 -.5px 0 var(--line)}
.poll-card>b{display:block;font-size:15px;color:var(--ink)}
.poll-card>small{font-size:12px;color:var(--muted)}
.poll-options{display:grid;gap:8px;margin-top:10px}
.poll-option{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:46px;padding:11px 14px;border:0;border-radius:13px;background:var(--surface-2);color:var(--text);text-align:left;font-size:14px;font-weight:600}
.poll-option span,.poll-option b{position:relative;z-index:1}
.poll-option i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--brand) 18%,transparent);transition:width .6s var(--ease);pointer-events:none}
.poll-option.selected{box-shadow:inset 0 0 0 1.5px var(--brand);color:var(--ink)}
.poll-option:disabled{opacity:.85}
.agenda-row{display:flex;gap:12px;padding:12px 0;box-shadow:0 -.5px 0 var(--line)}
.agenda-number{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--brand-ink);font-weight:800;font-size:13px}
.agenda-row>div{min-width:0}
.agenda-row b{font-size:15px;color:var(--ink)}
.agenda-row small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.agenda-row p{font-size:14px;line-height:1.45;margin:6px 0 0}
.attendee-row span:nth-child(2){flex:1;font-weight:600;color:var(--ink)}
.attendee-row small{font-size:12px;font-weight:700;color:var(--muted);text-transform:capitalize;background:var(--surface-2);padding:4px 9px;border-radius:999px}
.event-comment-list{display:grid;gap:8px;margin:10px 0}
.event-comment-list article{background:var(--surface-2);border-radius:16px 16px 16px 4px;padding:10px 13px}
.event-comment-list p{margin:0;font-size:14px;line-height:1.45;white-space:pre-wrap;color:var(--text)}
.event-comment-list small{font-size:12px;color:var(--muted)}
.budget-total{display:grid;gap:2px;padding:16px;margin:12px 0;border-radius:16px;background:var(--surface-2)}
.budget-total small,.budget-total span{font-size:13px;color:var(--muted)}
.budget-total b{font:800 28px var(--display);color:var(--ink);letter-spacing:-.5px}
.budget-subhead{font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin:18px 0 4px}
.budget-row,.booking-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;box-shadow:0 -.5px 0 var(--line)}
.budget-row>div{min-width:0;display:grid;gap:2px}
.budget-row b{font-size:15px;color:var(--ink);font-weight:650}
.budget-row small{font-size:13px;color:var(--muted)}
.budget-row>strong{font-size:15px;white-space:nowrap}
.positive{color:var(--ok)}.negative{color:var(--danger)}
body.dark .positive{color:#78d2b8}
.booking-card{align-items:flex-start}
.booking-main{min-width:0;flex:1}
.booking-main>b{font-size:15px;color:var(--ink)}
.booking-main>small{display:block;font-size:13px;color:var(--muted);margin:3px 0}
.booking-main p{font-size:14px;margin:4px 0;overflow-wrap:anywhere}
.booking-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.booking-side a{font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.event-album{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:12px;border-radius:14px;overflow:hidden}
.event-album figure{margin:0;min-width:0;position:relative}
.event-album img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--surface-2)}
.event-album figcaption{display:none}
.invitation-manager{background:linear-gradient(160deg,var(--surface),color-mix(in srgb,var(--mint) 55%,var(--surface)))}
.invite-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}
.invite-stats>div{display:grid;gap:2px;padding:12px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.invite-stats b{font:800 24px var(--display);color:var(--brand-ink)}
.invite-stats small{font-size:12px;font-weight:700;color:var(--text)}
.invite-stats em{font-style:normal;font-size:11px;color:var(--muted)}
.invite-tools{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.invite-list,.guest-response-list{display:grid;gap:8px;margin-top:10px}
.invite-row,.guest-response-row{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:13px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.invite-row>div:first-child,.guest-response-row>div:first-child{display:grid;gap:3px;min-width:0}
.invite-row b,.guest-response-row b{font-size:15px;color:var(--ink)}
.invite-row small,.guest-response-row small{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.invite-row-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.guest-response-row{flex-direction:row;align-items:flex-start;justify-content:space-between}
.guest-status{font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px;white-space:nowrap;background:var(--surface-2);color:var(--muted)}
.guest-status.attending{background:#e3f3e9;color:#24744e}.guest-status.maybe{background:#fff3dc;color:#946d27}.guest-status.declined{background:#fbe9e7;color:#a54e43}

/* =====================================================================
   12. SHEETS & DIALOGS
   ===================================================================== */
.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:calc(100dvh - var(--safe-top) - 18px);height:auto;padding:0;border:0;border-radius:26px 26px 0 0;background:var(--surface);color:var(--text);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 -10px 40px rgba(0,0,0,.18)}
.sheet[open]{animation:sheet-up .38s var(--ease)}
.sheet.closing{animation:sheet-down .24s ease-in forwards}
.sheet::backdrop{background:rgba(6,16,14,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:fade .3s ease}
.sheet.closing::backdrop{animation:fade-out .24s ease forwards}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes sheet-down{to{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
.sheet form,.action-sheet>div:last-child{padding:0 18px calc(18px + var(--safe-bottom))}
.grab{position:sticky;top:0;z-index:3;height:24px;margin:0 -18px;background:var(--surface);display:grid;place-items:center;touch-action:none}
.grab::after{content:"";width:38px;height:5px;border-radius:3px;background:var(--surface-3)}
.action-sheet>.grab{margin:0}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:2px 0 6px}
.sheet-head small{font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--brand)}
.sheet-head h2{font:800 23px/1.15 var(--display);letter-spacing:-.4px;color:var(--ink);margin:4px 0 0;overflow-wrap:anywhere}
.sheet-head p{font-size:14px;color:var(--muted);line-height:1.45;margin:6px 0 0}
.sheet-head p:empty{display:none}
.dialog-fields{display:grid;gap:14px;margin-top:10px}
.dialog-fields>label,.dialog-fields section>label{display:grid;gap:7px;font-size:13px;font-weight:700;color:var(--muted);min-width:0}
.dialog-fields section{display:grid;gap:12px}
.dialog-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dialog-row label{display:grid;gap:7px;font-size:13px;font-weight:700;color:var(--muted);min-width:0}
.dialog-error{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--danger-bg);color:var(--danger);font-size:14px}
.dialog-error:empty{display:none}
.sheet-actions{position:sticky;bottom:0;z-index:2;display:flex;gap:10px;margin:18px -18px calc(-18px - var(--safe-bottom));padding:12px 18px calc(12px + var(--safe-bottom));background:var(--surface);box-shadow:0 -.5px 0 var(--line)}
.sheet-actions button{flex:1;min-height:50px}
.sheet-actions .primary{flex:1.6}
.dialog-section-title{font:800 16px var(--display);color:var(--ink);margin:6px 0 0}
.memory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.memory-card{margin:0;border-radius:14px;overflow:hidden;background:var(--surface-2)}
.memory-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.memory-card figcaption{padding:8px 10px;font-size:13px;color:var(--text)}
.memory-card figcaption small{display:block;color:var(--muted);font-size:12px}
.memory-missing{aspect-ratio:4/3;display:grid;place-items:center;color:var(--muted);font-size:12px}
.review-list,.comment-list{display:grid;gap:8px;max-height:220px;overflow:auto}
.review-card,.comment-entry{border-radius:14px;background:var(--surface-2);padding:11px 13px}
.review-card p,.comment-entry p{font-size:14px;line-height:1.45;margin:4px 0;color:var(--text);white-space:pre-wrap}
.review-card small,.comment-entry small{font-size:12px;color:var(--muted)}
.review-stars{color:#e0a020;letter-spacing:2px}
.occurrence-list{display:grid;gap:6px;max-height:340px;overflow:auto}
.occurrence-row{display:grid!important;grid-template-columns:24px 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surface-2);font-size:15px!important;color:var(--ink)!important}
.occurrence-row input{width:22px!important;height:22px;min-height:0!important;accent-color:var(--brand);-webkit-appearance:auto!important;appearance:auto!important;padding:0!important}
.occurrence-row small{font-size:12px;color:var(--muted)}
input[type=file]{padding:12px!important;font-size:14px!important}

/* Action sheet */
.sheet-title{padding:2px 4px 10px;font-size:13px;font-weight:700;color:var(--muted);text-align:center}
.sheet-profile{display:flex;align-items:center;gap:14px;padding:6px 4px 16px}
.sheet-profile b{display:block;font-size:18px;color:var(--ink)}
.sheet-profile small{display:block;color:var(--muted);font-size:13px;margin-top:2px;overflow-wrap:anywhere}
.sheet-profile em{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:12px;font-weight:700;color:var(--brand);margin-top:6px}
.sheet-profile em::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.sheet-profile em.err{color:var(--danger)}
.as-group{border-radius:16px;background:var(--surface-2);overflow:hidden}
body.dark .as-group{background:var(--surface-2)}
.as-group+.as-group{margin-top:10px}
.as-btn{display:flex;align-items:center;gap:14px;width:100%;min-height:54px;padding:12px 16px;border:0;background:none;text-align:left;font-size:16px;font-weight:600;color:var(--ink);position:relative}
.as-btn+.as-btn::before{content:"";position:absolute;top:0;left:50px;right:0;height:.5px;background:var(--line)}
.as-btn .ico{width:21px;height:21px;color:var(--muted)}
.as-btn .as-emoji{width:21px;text-align:center}
.as-btn.danger{color:var(--danger)}.as-btn.danger .ico{color:var(--danger)}
.as-btn .as-check{margin-left:auto;color:var(--brand)}
.as-btn:active{background:var(--surface-3)}
.as-btn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-btn small{color:var(--muted);font-size:13px;font-weight:500}
.as-cancel{margin-top:10px;width:100%;min-height:54px;border:0;border-radius:16px;background:var(--surface-2);font-weight:700;font-size:16px;color:var(--ink)}
.guide-steps{display:grid;gap:10px;margin:14px 0 18px}
.guide-steps article{display:flex;gap:12px;align-items:flex-start;padding:13px;border-radius:14px;background:var(--surface-2)}
.guide-steps article>b{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--on-brand);font-size:13px}
.guide-steps strong{font-size:15px;color:var(--ink)}
.guide-steps p{font-size:14px;line-height:1.45;color:var(--muted);margin:3px 0 0}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 16px);z-index:9000;max-width:calc(100vw - 32px);padding:13px 18px;border-radius:16px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;text-align:center;box-shadow:var(--shadow-2);opacity:0;transform:translate(-50%,16px) scale(.96);transition:opacity .25s,transform .35s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
body:not([data-screen="app"]) .toast{bottom:calc(var(--safe-bottom) + 24px)}

/* =====================================================================
   13. TABLET & DESKTOP
   ===================================================================== */
@media(min-width:600px){
 .screen{padding-left:24px;padding-right:24px}
 .h-scroll,.chips-scroll{margin:0 -24px;padding-left:24px;padding-right:24px}
 .event-hero{margin:0 -24px 16px;padding-left:28px;padding-right:28px}
 .group-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .milestone-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .memory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .sheet{left:50%;right:auto;width:min(560px,100vw);transform:translateX(-50%)}
 .sheet[open]{animation:sheet-up-c .38s var(--ease)}
 .sheet.closing{animation:sheet-down-c .24s ease-in forwards}
 @keyframes sheet-up-c{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
 @keyframes sheet-down-c{to{transform:translate(-50%,100%)}}
}
@media(min-width:1024px){
 :root{--tabbar-h:0px}
 .tabbar{display:none}
 .sidebar{position:fixed;inset:0 auto 0 0;z-index:50;width:250px;display:flex;flex-direction:column;gap:6px;padding:22px 14px;background:var(--surface);box-shadow:.5px 0 0 var(--line);overflow-y:auto}
 .sb-brand{display:flex;align-items:center;gap:10px;font:800 21px var(--display);letter-spacing:-.6px;color:var(--ink);padding:0 8px 18px}
 .sb-brand b{color:var(--brand)}
 .sb-nav{display:grid;gap:2px}
 .sb-nav button{display:flex;align-items:center;gap:12px;min-height:42px;padding:9px 12px;border:0;border-radius:12px;background:none;text-align:left;font-size:15px;font-weight:600;color:var(--muted)}
 .sb-nav button:hover{background:var(--surface-2);color:var(--ink)}
 .sb-nav button.active{background:var(--mint);color:var(--brand-ink)}
 .sb-label{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--faint);padding:18px 12px 6px}
 .nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--coral);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
 .sb-foot{margin-top:auto;display:grid;gap:8px;padding-top:16px}
 .sb-foot .ico{width:18px;height:18px}
 .app-main{margin-left:250px}
 .topbar{padding:0 24px}
 .topbar-brand{opacity:0!important}
 .topbar-title{opacity:1;transform:none}
 .screen{max-width:1040px;padding:8px 40px 60px}
 .large-title h1{font-size:38px}
 .h-scroll,.chips-scroll{margin:0;padding:2px 0 8px}
 .event-hero{margin:0 0 18px;border-radius:26px;padding:28px}
 .home-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start}
 .home-grid>div{min-width:0}
 .home-grid .section:first-child{margin-top:0}
 .home-hero{padding:30px}
 .exp-list{grid-template-columns:1fr 1fr}
 .event-grid{grid-template-columns:1fr 1fr}
 .cal-agenda{margin-top:22px}
 .sheet{inset:0;margin:auto;width:min(560px,calc(100vw - 48px));max-height:min(86vh,860px);border-radius:26px;transform:none}
 .sheet[open]{animation:pop-in .26s var(--ease)}
 .sheet.closing{animation:pop-out .18s ease forwards}
 @keyframes pop-in{from{opacity:0;transform:scale(.96) translateY(10px)}}
 @keyframes pop-out{to{opacity:0;transform:scale(.97)}}
 .grab{height:14px}.grab::after{display:none}
 .toast{bottom:28px}
}

/* =====================================================================
   14. MOTION PREFERENCES
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .reveal{opacity:1;transform:none}
}

/* =====================================================================
   15. INVITATION DESIGNER (Phase 9.4)
   ===================================================================== */
.sheet.editor{inset:0;left:0;right:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;transform:none;overflow:hidden;background:var(--bg);padding:0}
.sheet.editor[open]{display:flex;flex-direction:column;animation:ed-in .32s var(--ease)}
.sheet.editor.closing{animation:ed-out .2s ease forwards}
@keyframes ed-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes ed-out{to{opacity:0;transform:translateY(24px)}}
.ed-top{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:calc(var(--safe-top) + 6px) 10px 8px 6px;background:var(--surface);box-shadow:0 .5px 0 var(--line);z-index:3}
.ed-txt{border:0;background:none;color:var(--brand);font-weight:650;font-size:16px;padding:10px 8px}
.ed-title{flex:1;min-width:0;text-align:center}
.ed-title b{display:block;font-size:16px;color:var(--ink)}
.ed-title small{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.ed-title small.dirty{color:var(--coral)}
.ed-top .primary{min-height:38px!important;padding:8px 16px!important}
.ed-body{flex:1;min-height:0;display:flex;flex-direction:column}
.ed-stage{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px 18px 28px;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--brand) 9%,var(--bg)),var(--bg) 70%)}
.ed-canvas{max-width:440px;margin:0 auto}
.ed-canvas .inv{box-shadow:0 18px 50px rgba(20,30,40,.18)}
.ed-canvas .inv a,.ed-canvas .inv button{pointer-events:none}
.ed-canvas .inv-photo{cursor:pointer;pointer-events:auto}
.ed-panel{flex:0 0 auto;height:min(47dvh,460px);display:flex;flex-direction:column;background:var(--surface);border-radius:22px 22px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.08);z-index:2;transition:height .3s var(--ease)}
.editor.previewing .ed-panel{height:0;overflow:hidden}
.editor.previewing .ed-stage{padding-bottom:calc(28px + var(--safe-bottom))}
.ed-tabs{flex:0 0 auto;display:grid;grid-template-columns:repeat(5,1fr);padding:6px 6px 0;border-bottom:.5px solid var(--line)}
.ed-tabs button{display:grid;justify-items:center;gap:3px;border:0;background:none;padding:8px 2px 9px;font-size:11.5px;font-weight:650;color:var(--muted);position:relative}
.ed-tabs button .ico{width:21px;height:21px}
.ed-tabs button.active{color:var(--brand)}
.ed-tabs button.active::after{content:"";position:absolute;left:28%;right:28%;bottom:-.5px;height:3px;border-radius:3px 3px 0 0;background:var(--brand)}
.ed-pane{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px calc(20px + var(--safe-bottom))}
.ed-sec+.ed-sec{margin-top:20px}
.ed-sec h4{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font-size:13px;font-weight:750;color:var(--ink);letter-spacing:.01em}
.ed-sec h4 small{font-weight:600;color:var(--muted)}
.ed-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
.ed-chips::-webkit-scrollbar{display:none}
.ed-chips button{flex:0 0 auto;border:0;border-radius:999px;padding:8px 13px;min-height:36px;background:var(--surface-2);font-size:13.5px;font-weight:650;color:var(--text)}
.ed-chips button.active{background:var(--ink);color:var(--bg)}
.ed-tpls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.ed-tpl{border:0;padding:0;background:none;text-align:left;color:var(--text);min-width:0}
.ed-thumb{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,transform .2s}
.ed-tpl.active .ed-thumb{box-shadow:0 0 0 3px var(--brand)}
.ed-tpl:active .ed-thumb{transform:scale(.97)}
.scale-in{position:absolute;top:0;left:0;width:360px;transform-origin:0 0;pointer-events:none}
.scale-in .inv{border-radius:0;box-shadow:none}
.ed-tpl span{display:flex;justify-content:space-between;align-items:center;padding:7px 2px 0;font-size:13px;font-weight:650}
.ed-tpl span i{font-style:normal;color:var(--brand);font-size:12px}
.ed-photo-row{display:flex;gap:14px;align-items:center}
.ed-photo-thumb{flex:0 0 84px;height:84px;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:var(--surface-2);font-size:26px;color:var(--muted)}
.ed-photo-thumb img{width:100%;height:100%;object-fit:cover}
.ed-photo-actions{display:flex;flex-wrap:wrap;gap:8px}
.ed-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ed-opts button{display:grid;justify-items:center;gap:6px;border:0;border-radius:14px;padding:12px 6px;background:var(--surface-2);font-size:12.5px;font-weight:650;color:var(--text)}
.ed-opts button i{font-style:normal;font-size:20px;line-height:1;height:22px;color:var(--muted)}
.ed-opts button.active{background:var(--mint);color:var(--brand-ink);box-shadow:inset 0 0 0 1.5px var(--brand)}
.ed-opts button.active i{color:var(--brand)}
.ed-range{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:10px;margin:6px 0 12px;font-size:13px;font-weight:650;color:var(--muted)}
.ed-range input{width:100%;accent-color:var(--brand);height:28px}
.ed-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ed-gallery>div,.ed-add{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--surface-2)}
.ed-gallery img{width:100%;height:100%;object-fit:cover;display:block}
.ed-gallery .ed-x{position:absolute;top:4px;right:4px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;padding:0}
.ed-gallery .ed-x .ico{width:14px;height:14px}
.ed-add{border:1.5px dashed var(--faint);display:grid;place-items:center;color:var(--muted);font-size:24px}
.ed-field{display:grid;gap:6px;margin-bottom:12px;font-size:12.5px;font-weight:700;color:var(--muted)}
.ed-field input,.ed-field textarea{width:100%;min-height:46px;border:1.5px solid transparent;border-radius:12px;background:var(--surface-2);padding:11px 13px;font-size:16px;color:var(--ink);outline:none;font-family:inherit}
.ed-field textarea{min-height:96px;resize:vertical;line-height:1.45}
.ed-field input:focus,.ed-field textarea:focus{border-color:var(--brand);background:var(--surface)}
.ed-fonts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ed-fonts button{border:0;border-radius:14px;padding:12px;background:var(--surface-2);text-align:left;color:var(--ink);min-width:0}
.ed-fonts button b{display:block;font-size:26px;font-weight:600;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-fonts button small{font-size:12px;color:var(--muted);font-weight:600}
.ed-fonts button.active{background:var(--mint);box-shadow:inset 0 0 0 1.5px var(--brand)}
.ed-palettes{display:flex;gap:10px;flex-wrap:wrap}
.ed-pal{display:flex;border:0;padding:5px;border-radius:999px;background:var(--surface-2);gap:0}
.ed-pal i{width:22px;height:22px;border-radius:50%;margin-left:-6px;box-shadow:0 0 0 2px var(--surface-2)}
.ed-pal i:first-child{margin-left:0}
.ed-pal.active{box-shadow:inset 0 0 0 2px var(--brand)}
.ed-colors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ed-colors label{display:grid;justify-items:center;gap:5px;font-size:11px;font-weight:650;color:var(--muted);text-align:center}
.ed-colors input{width:44px;height:44px;border:0;border-radius:50%;padding:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:0 0 0 1px var(--line)}
.ed-colors input::-webkit-color-swatch-wrapper{padding:0}
.ed-colors input::-webkit-color-swatch{border:0;border-radius:50%}
.ed-colors input::-moz-color-swatch{border:0;border-radius:50%}
.ed-toggle{display:flex;align-items:center;gap:12px;padding:12px 0;box-shadow:0 -.5px 0 var(--line)}
.ed-toggle:first-of-type{box-shadow:none}
.ed-toggle div{flex:1;min-width:0}
.ed-toggle b{display:block;font-size:15px;color:var(--ink);font-weight:650}
.ed-toggle small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.switch{position:relative;flex:0 0 50px;width:50px;height:30px}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:15px;background:var(--surface-3);transition:background .25s}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:transform .25s var(--ease)}
.switch input:checked+span{background:var(--brand)}
.switch input:checked+span::after{transform:translateX(20px)}
.ed-busy{position:absolute;inset:0;z-index:10;display:grid;place-content:center;justify-items:center;gap:14px;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(4px);color:var(--ink)}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--surface-3);border-top-color:var(--brand);animation:spin .8s linear infinite}
.ed-tip{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;background:var(--mint);color:var(--brand-ink);font-size:13px;line-height:1.45;margin-top:14px}

/* Invitation preview on the event screen */
.inv-design-card{display:flex;gap:14px;align-items:center;padding:12px;margin:12px 0 4px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.inv-mini{position:relative;flex:0 0 96px;height:128px;border-radius:12px;overflow:hidden;background:var(--surface-2);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.inv-design-card>div:last-child{flex:1;min-width:0;display:grid;gap:4px;justify-items:start}
.inv-design-card b{font-size:15px;color:var(--ink)}
.inv-design-card small{font-size:12.5px;color:var(--muted);line-height:1.4}
.inv-design-card .primary{margin-top:6px}

@media(min-width:900px){
 .ed-body{flex-direction:row}
 .ed-stage{padding:32px}
 .ed-panel{height:auto;width:400px;border-radius:0;box-shadow:-.5px 0 0 var(--line)}
 .editor.previewing .ed-panel{width:0;height:auto}
 .ed-tpls{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.editor .toast{bottom:auto;top:calc(var(--safe-top) + 64px)}
.send-head{display:flex;align-items:center;gap:12px;padding:2px 4px 14px}
.send-head>div{min-width:0}
.send-head b{display:block;font-size:16px;color:var(--ink)}
.send-head small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.send-head .avatar .ico{width:20px;height:20px}

/* ---------- Phase 9.5: live alerts ---------- */
.live-banner{position:fixed;z-index:9500;top:calc(var(--safe-top) + 8px);left:50%;width:min(480px,calc(100vw - 20px));display:flex;align-items:center;gap:12px;padding:12px 14px;border:0;border-radius:20px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 14px 40px rgba(0,0,0,.18),0 0 0 .5px var(--line);text-align:left;color:var(--text);transform:translate(-50%,calc(-100% - 30px));transition:transform .45s var(--ease)}
.live-banner.show{transform:translate(-50%,0)}
.live-banner .notification-icon{flex:0 0 40px}
.lb-copy{flex:1;min-width:0}
.lb-copy b{display:block;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-copy small{display:block;font-size:13px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-banner em{align-self:flex-start;font-style:normal;font-size:11.5px;color:var(--faint);font-weight:600}
.alerts-card{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:14px;border-radius:var(--radius);background:linear-gradient(135deg,var(--mint),color-mix(in srgb,var(--mint) 40%,var(--surface)));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 20%,transparent)}
.alerts-card>div{flex:1;min-width:0}
.alerts-card b{display:block;font-size:15px;color:var(--ink)}
.alerts-card small{display:block;font-size:13px;color:var(--muted);line-height:1.4;margin-top:2px}
.alerts-card.on{background:var(--surface);box-shadow:var(--shadow-1)}
.alerts-card.denied{background:var(--danger-bg);box-shadow:none}
.alerts-card .notification-icon{background:var(--surface);flex:0 0 40px}

/* =====================================================================
   16. LANDING — invitation showcase & live demo (Phase 9.6)
   ===================================================================== */
.l-sub{margin:-12px 0 30px;max-width:620px;font-size:17px;line-height:1.6;color:var(--l-muted)}
.ld{display:grid;gap:28px}
.ld-stage{position:relative;display:grid;justify-items:center;gap:14px;padding:22px 14px 18px;border-radius:32px;background:radial-gradient(120% 90% at 50% 0%,#ffffff,#e8efe9);box-shadow:inset 0 0 0 1px #e1e8e2}
.ld-card{width:min(100%,272px);transition:transform .35s var(--ease)}
.ld-card .inv{border-radius:22px 22px 0 0;box-shadow:none}
.ld-card .inv-cover{min-height:300px;padding:30px 20px 28px}
.ld-card .inv-cover-inner{gap:16px}
.ld-card{border-radius:22px;overflow:hidden;box-shadow:0 30px 60px rgba(15,34,48,.18)}
.ld-rsvp{display:grid;gap:10px;padding:16px 18px 18px;text-align:center}
.ld-rsvp b{font-size:20px;font-weight:600}
.ld-rsvp div{display:flex;gap:8px}
.ld-rsvp span{flex:1;padding:10px 6px;border-radius:999px;font:700 13px var(--font)}
.ld-play{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:12px 18px;min-height:46px;background:#fff;color:var(--l-ink);font-weight:700;font-size:14.5px;box-shadow:0 6px 18px rgba(15,34,48,.1);cursor:pointer}
.ld-play .ico{width:18px;height:18px;color:var(--brand)}
.ld-env{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:18px;border-radius:32px;background:radial-gradient(120% 90% at 50% 10%,color-mix(in srgb,var(--ec,#fff) 70%,#fff),color-mix(in srgb,var(--ea,#0b7a52) 22%,#f3efe8));opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.ld-env.show{opacity:1;visibility:visible}
.ld-env.gone{opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.ld-env p{margin:0;font-size:14px;font-weight:600;color:var(--ei,#10221f);opacity:.75}
.ld-env-box{position:relative;width:min(280px,72vw);aspect-ratio:3/2;perspective:800px}
.ld-env-box>span{position:absolute;inset:0;border-radius:10px}
.ld-env-box .b{background:color-mix(in srgb,var(--ea) 75%,#000 12%);box-shadow:0 26px 50px rgba(0,0,0,.22)}
.ld-env-box .c{inset:8px 12px auto 12px;height:92%;background:var(--ec);border-radius:8px;display:grid;place-content:center;text-align:center;padding:10px;color:var(--ei);transition:transform .9s cubic-bezier(.3,.9,.3,1) .3s}
.ld-env-box .c small{font:700 9px var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--ea)}
.ld-env-box .c b{font:800 18px/1.15 var(--display);margin-top:6px}
.ld-env-box .f{z-index:2;background:linear-gradient(160deg,color-mix(in srgb,var(--ea) 85%,#fff),var(--ea));clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%)}
.ld-env-box .fl{z-index:3;background:linear-gradient(180deg,color-mix(in srgb,var(--ea) 70%,#000 30%),color-mix(in srgb,var(--ea) 82%,#000 18%));clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:50% 0;transition:transform .55s cubic-bezier(.4,0,.2,1),z-index 0s .27s}
.ld-env-box .s{z-index:4;inset:auto;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#b7414b,#6d1f2a);color:#fff;font:700 22px var(--display);box-shadow:0 4px 12px rgba(0,0,0,.3);transition:transform .35s,opacity .35s}
.ld-env.open .s{transform:scale(.4);opacity:0}
.ld-env.open .fl{transform:rotateX(180deg);z-index:1}
.ld-env.open .c{transform:translateY(-58%)}

.ld-controls{display:flex;flex-direction:column;gap:14px;min-width:0}
.ld-step{display:flex;align-items:center;gap:10px;margin-top:6px}
.ld-step span{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--l-ink);color:#fff;font-size:13px;font-weight:800}
.ld-step b{font-size:16px;color:var(--l-ink)}
.ld-step small{margin-left:auto;font-size:13px;font-weight:700;color:var(--brand)}
.ld-chips{display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:2px 20px 4px;scrollbar-width:none}
.ld-chips::-webkit-scrollbar{display:none}
.ld-chips button{flex:0 0 auto;border:0;border-radius:999px;padding:10px 15px;min-height:42px;background:#fff;box-shadow:inset 0 0 0 1px #dde5df;font-weight:650;font-size:14.5px;color:#2f4650;cursor:pointer;transition:.2s}
.ld-chips button.active{background:var(--l-ink);color:#fff;box-shadow:none}
.ld-field{display:grid;gap:6px}
.ld-field span{font-size:12.5px;font-weight:700;color:var(--l-muted)}
.ld-field input{min-height:52px;border:1.5px solid #dde5df;border-radius:14px;background:#fff;padding:12px 15px;font-size:17px;font-weight:600;color:var(--l-ink);outline:none}
.ld-field input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(11,122,82,.14)}
.ld-tpls{display:flex;gap:10px;overflow-x:auto;margin:0 -20px;padding:4px 20px 8px;scroll-snap-type:x proximity;scrollbar-width:none}
.ld-tpls::-webkit-scrollbar{display:none}
.ld-tpl{flex:0 0 104px;scroll-snap-align:start;border:0;padding:0;background:none;text-align:left;cursor:pointer}
.ld-thumb{position:relative;display:block;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#eef2ee;box-shadow:inset 0 0 0 1px #dde5df;transition:box-shadow .2s,transform .2s}
.ld-thumb .scale-in{position:absolute;top:0;left:0;width:360px;transform-origin:0 0;pointer-events:none}
.ld-thumb .inv{border-radius:0;box-shadow:none}
.ld-tpl.active .ld-thumb{box-shadow:0 0 0 3px var(--brand);transform:translateY(-2px)}
.ld-tpl em{display:block;padding-top:6px;font-style:normal;font-size:12px;font-weight:650;color:#3f5650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld-row{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end}
.ld-label{display:block;font-size:12.5px;font-weight:700;color:var(--l-muted);margin-bottom:7px}
.ld-pals{display:flex;gap:10px}
.ld-pal{width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;box-shadow:0 0 0 1px #dde5df;transition:box-shadow .2s}
.ld-pal.active{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--brand)}
.ld-seg{background:#e8eee9}
.ld-seg button{min-height:40px;font-size:13.5px;color:#4b5f66}
.ld-seg button.active{background:#fff;color:var(--l-ink)}
.ld-cta{display:grid;gap:10px;margin-top:10px}
.ld-cta small{font-size:13px;color:var(--l-muted);text-align:center}
@media(min-width:700px){.ld-cta{justify-items:start}.ld-cta small{text-align:left}}
@media(min-width:1000px){
 .ld{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
 .ld-stage{position:sticky;top:90px;padding:40px 30px 30px}
 .ld-card{width:330px}
 .ld-chips,.ld-tpls{margin:0;padding-left:0;padding-right:0;flex-wrap:wrap}
 .ld-tpls{flex-wrap:nowrap;overflow-x:auto}
 .ld-tpl{flex-basis:112px}
}

/* ---------- Phase 9.7: group links, deletes ---------- */
.auth-join{display:flex;gap:12px;align-items:flex-start;padding:14px;margin:0 0 18px;border-radius:16px;background:var(--mint);color:var(--brand-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 25%,transparent)}
.auth-join>span{font-size:24px;line-height:1}
.auth-join b{display:block;font-size:15px;color:var(--ink)}
.auth-join small{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4}
.group-card{padding:0;gap:0;overflow:hidden}
.gc-open{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:16px 16px 12px;border:0;background:none;text-align:left;color:var(--text);min-width:0}
.gc-invite{margin:0 12px 12px;align-self:stretch}
.gc-invite .ico{width:16px;height:16px}
.invite-row-actions .icon-btn{margin-left:auto;width:36px;height:36px;background:var(--surface-2)}
.invite-row-actions .icon-btn .ico{width:18px;height:18px}

/* =====================================================================
   17. EXPERIENCES (Phase 9.8)
   ===================================================================== */
.xp-hero{position:relative;overflow:hidden;margin:0 -16px 16px;padding:10px 20px 20px;background:linear-gradient(180deg,var(--xc),color-mix(in srgb,var(--xc) 35%,var(--bg)))}
.xp-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.xp-emoji{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;font-size:34px;background:var(--surface);box-shadow:var(--shadow-1)}
.xp-status{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--surface);font-size:12.5px;font-weight:700;color:var(--muted)}
.xp-status.done{background:var(--brand);color:var(--on-brand)}
body.dark .xp-status.done{color:#06221d}
.xp-status .ico{width:15px;height:15px;stroke-width:3}
.xp-kicker{display:block;margin-top:16px;font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.xp-hero h2{font:800 30px/1.1 var(--display);letter-spacing:-.6px;color:var(--ink);margin:6px 0 10px;overflow-wrap:anywhere}
.xp-hero .tag{background:var(--surface)}
.xp-notes{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.xp-by{margin:10px 0 0;font-size:13px;color:var(--muted)}
.xp-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:18px}
.xpa{display:grid;justify-items:center;gap:6px;border:0;background:none;padding:0;color:var(--ink);font-size:12.5px;font-weight:650}
.xpa span{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow-1);font-size:22px;color:var(--brand);transition:transform .15s,background .2s}
.xpa span .ico{width:22px;height:22px}
.xpa:active span{transform:scale(.9)}
.xpa.on span{background:var(--brand);color:var(--on-brand)}
body.dark .xpa.on span{color:#06221d}
.xp-people{display:flex;flex-wrap:wrap;gap:14px 10px;margin-top:10px}
.xp-person{display:grid;justify-items:center;gap:5px;width:64px;text-align:center}
.xp-person b{font-size:12px;font-weight:650;color:var(--text);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp-row{display:flex;align-items:center;gap:12px;padding:11px 0;color:var(--text);text-decoration:none}
.xp-row+.xp-row{box-shadow:0 -.5px 0 var(--line)}
.xp-row>div{flex:1;min-width:0}
.xp-row small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.xp-row b{display:block;font-size:15px;color:var(--ink);font-weight:650;overflow-wrap:anywhere}
.xp-row>.ico{color:var(--faint)}
.event-comment-list article.mine{background:var(--mint);border-radius:16px 16px 4px 16px;margin-left:36px}
.event-comment-list article:not(.mine){margin-right:36px}
.xp-compose{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.xp-compose textarea{flex:1;min-height:46px;max-height:140px;resize:none;border:1.5px solid transparent;border-radius:16px;background:var(--surface-2);padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);outline:none;line-height:1.35}
.xp-compose textarea:focus{border-color:var(--brand);background:var(--surface)}
.xp-compose .primary{flex:0 0 46px;width:46px;min-height:46px;padding:0;border-radius:50%}
.xp-footer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 10px}
.xp-footer .quiet{font-size:13.5px;padding:10px 6px}
.xp-footer .ico{width:17px;height:17px}
.xp-chip{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:7px 12px;border:0;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-size:12.5px;font-weight:700}
.xp-chip .ico{width:15px;height:15px}
.exp-card{cursor:pointer}
.in-btn span{font-size:15px;line-height:1}
.exp-social .in-btn.selected{color:var(--brand)}
.list-search{display:flex;gap:8px;min-width:0;margin:-4px 0 14px}
.list-search select{max-width:40%}
.ls-box{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:13px;background:var(--surface);box-shadow:var(--shadow-1);color:var(--muted)}
.ls-box .ico{width:18px;height:18px}
.ls-box input{flex:1;min-width:0;width:100%;border:0;background:none;outline:none;font-size:16px;color:var(--ink);-webkit-appearance:none;appearance:none}
.list-search select{flex:0 0 auto;min-height:44px;border:0;border-radius:13px;background:var(--surface);box-shadow:var(--shadow-1);padding:0 12px;font-size:14px;font-weight:650;color:var(--ink)}
.more-details{margin-top:14px;border-radius:14px;background:var(--surface-2);padding:0 14px}
.more-details summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;font-size:14px;font-weight:700;color:var(--brand)}
.more-details summary::-webkit-details-marker{display:none}
.more-details summary::before{content:"+";width:22px;font-size:18px}
.more-details[open] summary::before{content:"–"}
.more-details[open]{padding-bottom:14px}
.more-details .field input,.more-details .field select{background:var(--surface)}
@media(min-width:600px){.xp-hero{margin:0 -24px 16px;padding-left:28px;padding-right:28px}}
@media(min-width:1024px){.xp-hero{margin:0 0 18px;border-radius:26px;padding:28px}}

/* =====================================================================
   18. PLAN TOGETHER (Phase 9.9)
   ===================================================================== */
.avatar.xs{width:24px;height:24px;flex:0 0 24px;font-size:11px;box-shadow:0 0 0 2px var(--surface)}
.next-up{display:flex;align-items:center;gap:12px;width:100%;margin:12px 0 2px;padding:12px 14px;border:0;border-radius:16px;background:var(--mint);color:var(--ink);text-align:left}
.next-up>span{font-size:24px}
.next-up div{flex:1;min-width:0}
.next-up small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--brand-ink)}
.next-up b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next-up .ico{color:var(--brand)}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.plan-tile{position:relative;display:grid;justify-items:start;gap:2px;min-height:104px;padding:12px;border:0;border-radius:18px;background:var(--surface-2);color:var(--ink);text-align:left;transition:transform .15s,background .2s}
.plan-tile:active{transform:scale(.96)}
.pt-emo{font-size:24px;line-height:1;margin-bottom:auto;padding-bottom:10px}
.plan-tile b{font-size:14px;font-weight:750}
.plan-tile small{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pt-badge{position:absolute;top:10px;right:10px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#e8553a;color:#fff;font:800 11px/20px var(--font);font-style:normal;text-align:center}
.pt-bar{display:block;width:100%;height:5px;border-radius:9px;background:color-mix(in srgb,var(--brand) 16%,transparent);overflow:hidden;margin-top:6px}
.pt-bar.lg{height:8px;min-height:0;border-radius:9px}
.pt-bar i{display:block;height:100%;border-radius:inherit;background:var(--brand);transition:width .5s var(--ease)}
.tool-context{display:flex;align-items:center;gap:12px;width:100%;padding:4px 0 12px;border:0;background:none;text-align:left;color:var(--ink)}
.xp-emoji.sm{width:44px;height:44px;border-radius:15px;font-size:22px;box-shadow:none}
.tool-context div{min-width:0}
.tool-context small{display:block;font-size:12px;color:var(--muted);font-weight:700}
.tool-context b{display:block;font:800 17px/1.2 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 16px;padding:2px 16px 4px;position:sticky;top:calc(54px + var(--safe-top));z-index:5;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.tool-tabs::-webkit-scrollbar{display:none}
.tool-tabs button{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border:0;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font-size:13.5px;font-weight:700}
.tool-tabs button.active{background:var(--ink);color:var(--bg);box-shadow:none}
.tool-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:2px 0 14px}
.tool-head h2{margin:0;font:800 26px/1.15 var(--display);letter-spacing:-.4px;color:var(--ink)}
.tool-head p{margin:4px 0 0;font-size:14px;color:var(--muted)}
.tool-head .primary{flex:0 0 auto;margin-top:2px}
.tool-body .empty .primary{margin-top:6px}
.poll-starters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}
.link-btn{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:6px 0;color:var(--brand);font-size:14px;font-weight:700}
.link-btn .ico{width:16px;height:16px}
.icon-btn.sm{width:32px;height:32px;flex:0 0 32px;color:var(--muted)}
.icon-btn.sm .ico{width:17px;height:17px}
.route-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;text-decoration:none}
/* Itinerary */
.it-day{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:14px 14px 6px;margin-bottom:14px}
.it-day-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.it-day-head small{font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--brand)}
.it-day-head h3{margin:2px 0 0;font-size:16px;color:var(--ink)}
.it-day-head a{text-decoration:none}
.it-list{list-style:none;margin:0;padding:0}
.it-stop{position:relative;display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:start;padding:10px 0}
.it-stop::before{content:"";position:absolute;left:70px;top:0;bottom:0;width:2px;background:var(--line)}
.it-stop:first-child::before{top:18px}.it-stop:last-child::before{bottom:calc(100% - 18px)}
.it-stop::after{content:"";position:absolute;left:66px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--surface)}
.it-time{font-size:12.5px;font-weight:800;color:var(--ink);padding-top:2px;text-align:right;padding-right:8px}
.it-card{padding-left:16px;min-width:0}
.it-card b{display:block;font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.it-card p{margin:4px 0 0;font-size:13.5px;color:var(--text);line-height:1.45;white-space:pre-wrap}
.it-loc{display:inline-flex;align-items:center;gap:4px;margin-top:3px;font-size:13px;font-weight:650;color:var(--brand);text-decoration:none;overflow-wrap:anywhere}
.it-loc .ico{width:14px;height:14px;flex:0 0 14px}
/* Polls */
.ipoll{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:14px;margin-bottom:12px}
.ipoll.closed{opacity:.92}
.ipoll-head{display:flex;align-items:flex-start;gap:10px}
.ipoll-kind{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);font-size:19px}
.ipoll-head div{flex:1;min-width:0}
.ipoll-head b{display:block;font-size:15.5px;color:var(--ink);overflow-wrap:anywhere}
.ipoll-head small{font-size:12.5px;color:var(--muted)}
.ipoll-opts{display:grid;gap:8px;margin-top:12px}
.ipoll-opt{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-align:left;overflow:hidden;font-size:14.5px}
.ipoll-opt>i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--brand) 12%,transparent);transition:width .45s var(--ease);z-index:0}
.ipoll-opt>*:not(i){position:relative;z-index:1}
.ipoll-opt.mine{border-color:var(--brand)}
.ipoll-opt.win{border-color:#e0a526;background:#fff8e6}
body.dark .ipoll-opt.win{background:#2f2817}
.ipoll-opt:disabled{color:var(--ink);cursor:default}
.io-check{width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--line)}
.ipoll-opt.mine .io-check{background:var(--brand);color:var(--on-brand);box-shadow:none}
.io-check .ico{width:13px;height:13px;stroke-width:3.5}
.io-label{flex:1;min-width:0;font-weight:650;overflow-wrap:anywhere}
.io-who{display:flex}.io-who .avatar+.avatar{margin-left:-7px}
.ipoll-opt>b{font-size:14px;min-width:16px;text-align:right}
.ipoll-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.ipoll-foot:empty{display:none}
.poll-kind{display:flex;flex-wrap:wrap;gap:6px}
.poll-kind label{position:relative;display:inline-flex;align-items:center;min-height:38px;padding:0 13px;border-radius:999px;background:var(--surface-2);font-size:13.5px;font-weight:700;color:var(--text);cursor:pointer}
.poll-kind label:has(input:checked){background:var(--ink);color:var(--bg)}
.poll-opts-field{display:grid;gap:8px}
.poll-opts-field #pollOpts{display:grid;gap:8px}
.field-label{font-size:13px;font-weight:700;color:var(--muted)}
/* Checklist */
.task-progress{display:grid;gap:8px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:14px;margin-bottom:12px}
.task-progress div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.task-progress b{font-size:15px;color:var(--ink)}
.task-progress small{font-size:13px;color:var(--muted);font-weight:600}
.task-add{display:flex;gap:8px;margin-bottom:10px}
.task-add input{flex:1;min-width:0;min-height:48px;border:1.5px solid transparent;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-1);padding:0 14px;font-size:16px;color:var(--ink);outline:none}
.task-add input:focus{border-color:var(--brand)}
.task-add .primary{flex:0 0 48px;width:48px;min-height:48px;padding:0;border-radius:14px}
.task-ideas{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:2px 16px;align-items:center}
.task-ideas::-webkit-scrollbar{display:none}
.task-ideas small{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-right:2px}
.task-ideas .chip{min-height:34px;padding:7px 12px;font-size:13px}
.task-list{list-style:none;margin:0 0 12px;padding:4px 14px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-1)}
.task{display:flex;align-items:center;gap:10px;min-height:54px;padding:6px 0}
.task+.task{box-shadow:0 -.5px 0 var(--line)}
.task-check{width:28px;height:28px;flex:0 0 28px;border-radius:9px;border:2px solid var(--faint);background:none;display:grid;place-items:center;color:#fff;transition:.2s}
.task.done .task-check{background:var(--brand);border-color:var(--brand)}
.task-check .ico{width:16px;height:16px;stroke-width:3.5}
.task-body{flex:1;min-width:0}
.task-body b{display:block;font-size:15px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.task.done .task-body b{text-decoration:line-through;color:var(--muted)}
.task-body small{font-size:12px;color:var(--muted)}
.task-who{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 8px;border:0;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12.5px;font-weight:700;max-width:110px}
.task-who.set{color:var(--ink);padding-left:4px}
.task-who .ico{width:16px;height:16px}
.task-who .avatar.xs{box-shadow:none}
/* Budget */
.budget-hero{display:grid;gap:2px;padding:18px;border-radius:22px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;margin-bottom:12px}
.budget-hero small{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;opacity:.85}
.budget-hero b{font:800 34px/1.1 var(--display);letter-spacing:-.6px}
.budget-hero>span{font-size:13.5px;opacity:.9}
.bh-me{justify-self:start;margin-top:10px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.18);font-size:13.5px;font-weight:750}
.bh-me.pos{background:#fff;color:var(--brand-2)}
.bh-me.neg{background:#ffe2d9;color:#b4421f}
.bh-est{margin-top:10px}.bh-est small{text-transform:none;letter-spacing:0;font-weight:650}
.bh-est .pt-bar{background:rgba(255,255,255,.25)}.bh-est .pt-bar i{background:#fff}
body.dark .budget-hero{color:#06221d}body.dark .bh-me{background:rgba(0,0,0,.15)}
.settle{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:4px 14px 10px;margin-bottom:12px}
.settle-row{display:flex;align-items:center;gap:10px;padding:8px 0}
.settle-row .avatar.xs{width:34px;height:34px;flex-basis:34px;font-size:13px}
.settle-row div{flex:1;min-width:0}.settle-row b{display:block;font-size:14.5px;color:var(--ink)}.settle-row small{font-size:13px;color:var(--muted);font-weight:650}
.settle-done{text-align:center;font-weight:700;color:var(--brand);margin:4px 0 14px}
.budget-row .icon-btn.sm{margin-left:4px}
.budget-row.settlement b{color:var(--brand)}
.split-pick{border:0;padding:0;margin:0;display:grid;gap:6px}
.split-pick legend{display:flex;width:100%;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:var(--muted);padding:0;margin-bottom:6px}
.split-person{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:12px;background:var(--surface-2);font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer}
.split-person input{width:20px!important;min-height:20px!important;height:20px;padding:0!important;accent-color:var(--brand);-webkit-appearance:auto!important;appearance:auto!important}
.split-person span{display:flex;align-items:center;gap:8px}
.check-row{display:flex!important;align-items:center;gap:10px;font-size:14px!important;color:var(--ink)!important;font-weight:600!important}
.check-row input{width:20px!important;min-height:20px!important;height:20px;padding:0!important;accent-color:var(--brand);-webkit-appearance:auto!important;appearance:auto!important}
/* Bookings */
.booking-total{display:flex;gap:10px;margin-bottom:12px}
.booking-total div{flex:1;padding:12px 14px;border-radius:16px;background:var(--mint)}
.booking-total small{display:block;font-size:12px;font-weight:800;color:var(--brand-ink);text-transform:uppercase;letter-spacing:.4px}
.booking-total b{font:800 22px var(--display);color:var(--ink)}
.ibook{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:14px;margin-bottom:12px}
.ibook-top{display:flex;align-items:center;gap:10px}
.ibook-emo{width:42px;height:42px;flex:0 0 42px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);font-size:21px}
.ibook-top div{flex:1;min-width:0}
.ibook-top small{display:block;font-size:12px;color:var(--muted);font-weight:700}
.ibook-top b{display:block;font-size:15.5px;color:var(--ink);overflow-wrap:anywhere}
.ibook-top strong{font-size:15px;color:var(--ink)}
.ibook-when{display:flex;align-items:center;gap:7px;margin:10px 0 0;font-size:13.5px;color:var(--text);text-decoration:none;font-weight:600}
a.ibook-when{color:var(--brand)}
.ibook-when .ico{width:15px;height:15px;flex:0 0 15px}
.ibook-notes{margin:8px 0 0;font-size:13.5px;color:var(--muted);white-space:pre-wrap;line-height:1.45}
.ibook-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;box-shadow:0 -1px 0 var(--line)}
.ibook-foot a{text-decoration:none}
.code-chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1.5px dashed var(--brand);border-radius:10px;background:var(--mint);color:var(--brand-ink);font:800 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.8px}
.code-chip .ico{width:15px;height:15px}
/* Album */
.album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;border-radius:16px;overflow:hidden}
.album-ph{position:relative;padding:0;border:0;background:var(--surface-2);aspect-ratio:1;overflow:hidden}
.album-ph img{width:100%;height:100%;object-fit:cover;display:block}
.album-ph span{position:absolute;right:6px;bottom:6px}
.as-photo{margin:0 0 10px;text-align:center}
.as-photo img{max-width:100%;max-height:52vh;border-radius:16px;display:block;margin:0 auto;object-fit:contain;background:var(--surface-2)}
.as-photo figcaption{margin-top:8px;font-size:13px;color:var(--muted)}
.event-album[data-xp-tool]{cursor:pointer}
/* Place search */
.ps-wrap{position:relative;display:block}
.ps-wrap>input{padding-left:40px!important}
.ps-pin{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;opacity:.8}
.ps-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:var(--surface);border-radius:16px;box-shadow:0 14px 40px rgba(10,30,40,.18),0 0 0 1px var(--line);padding:6px;max-height:320px;overflow:auto;text-transform:none;letter-spacing:0}
.ps-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 10px;border:0;border-radius:11px;background:none;text-align:left;color:var(--ink)}
.ps-opt:hover,.ps-opt.on{background:var(--surface-2)}
.ps-emo{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:10px;background:var(--surface-2);font-size:16px}
.ps-opt span:last-child{min-width:0}
.ps-opt b{display:block;font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-opt small{display:block;font-size:12.5px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-note{display:flex;align-items:center;gap:8px;padding:12px 10px;font-size:13.5px;color:var(--muted);font-weight:500}
.ps-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--brand);animation:psSpin .7s linear infinite}
@keyframes psSpin{to{transform:rotate(360deg)}}
.ps-attr{padding:6px 10px 4px;font-size:11px;color:var(--faint);text-align:right;font-weight:500}
.ps-attr a{color:inherit}
button.xp-row{width:100%;border:0;background:none;text-align:left;font:inherit}
@media(min-width:600px){.plan-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.tool-tabs{margin-left:0;margin-right:0;padding-left:0}}

/* =====================================================================
   19. TODAY (Phase 10.0)
   ===================================================================== */
.today-head{padding:4px 2px 14px}
.today-head small{font-size:13px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--brand)}
.today-head h2{margin:4px 0 6px;font:800 30px/1.1 var(--display);letter-spacing:-.6px;color:var(--ink)}
.today-head p{margin:0;font-size:15px;color:var(--muted);line-height:1.4}
.today-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:14px 14px 10px;margin-bottom:14px}
.tc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.tc-head h3{display:flex;align-items:center;gap:8px;margin:0;font-size:16px;color:var(--ink)}
.tc-head h3 .ico{width:18px;height:18px;color:var(--brand)}
.tc-head>small{min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:var(--mint);color:var(--brand-ink);font:800 12px/24px var(--font);text-align:center}
.tc-empty{margin:4px 0 6px;color:var(--muted);font-size:14.5px}
.agenda{display:grid}
.ag-row{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 0;border:0;background:none;text-align:left;color:var(--ink);width:100%}
.ag-row+.ag-row{box-shadow:0 -.5px 0 var(--line)}
.ag-time{width:66px;flex:0 0 66px;font-size:13px;font-weight:800;color:var(--brand-ink)}
.ag-emo,.need-emo{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:11px;background:var(--surface-2);font-size:17px}
.ag-copy,.need-copy{flex:1;min-width:0;display:block;text-align:left}
.ag-copy b,.need-copy b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.ag-copy small,.need-copy small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-row>.ico,.need-row>.ico{width:18px;height:18px;color:var(--faint)}
.need-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:4px 0}
.need-row+.need-row{box-shadow:0 -.5px 0 var(--line)}
.need-copy{border:0;background:none;padding:6px 0;color:var(--ink)}
.task-check.on{background:var(--brand);border-color:var(--brand)}
.cd-scroll{gap:10px}
.cd-card{flex:0 0 132px;display:grid;justify-items:start;gap:0;padding:14px;border:0;border-radius:20px;background:var(--surface);box-shadow:var(--shadow-1);text-align:left;color:var(--ink)}
.cd-card:first-child{background:linear-gradient(140deg,#123d36,#0b7a52);color:#fff}
.cd-emo{font-size:20px;margin-bottom:6px}
.cd-num{font:800 32px/1 var(--display);letter-spacing:-1px}
.cd-card small{font-size:12px;font-weight:700;opacity:.7;min-height:15px}
.cd-title{margin-top:8px;font-size:13.5px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.idea-card .idea-body{display:flex;align-items:center;gap:12px;width:100%;padding:6px 0;border:0;background:none;text-align:left;color:var(--ink)}
.idea-emo{width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border-radius:16px;font-size:26px}
.idea-body b{display:block;font-size:16.5px;font-weight:750}
.idea-body small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.idea-actions{display:flex;gap:8px;margin:10px 0 4px}
.idea-actions .quiet{flex:1;justify-content:center}
.today-sub{margin:26px 2px 12px;font:800 20px var(--display);color:var(--ink)}
.digest-card{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:4px 12px}
.dg-actions{grid-column:2;display:flex;align-items:center;gap:14px;margin-top:8px}
/* Swipe actions */
.swipe-row{position:relative;border-radius:var(--radius)}
.swipe-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-radius:var(--radius);opacity:0;font-size:14px;font-weight:800;color:#fff;transition:background .2s}
.swipe-bg span{display:flex;align-items:center;gap:6px;opacity:.65;transition:transform .2s,opacity .2s}
.swipe-bg .ico{width:18px;height:18px}
.swipe-row.sw-right .swipe-bg{opacity:1;background:var(--brand)}
.swipe-row.sw-left .swipe-bg{opacity:1;background:#5c6b74}
.swipe-row.sw-right .sb-more,.swipe-row.sw-left .sb-done{visibility:hidden}
.swipe-row.sw-go .swipe-bg span{opacity:1;transform:scale(1.08)}
.swipe-row.sw-go.sw-left .swipe-bg{background:#3f4c54}
.swipe-row .exp-card{position:relative;z-index:1}
@media(min-width:900px){.today-head h2{font-size:36px}}

/* =====================================================================
   20. GOALS, ON THIS DAY, YEAR IN REVIEW, FEEDBACK (Phase 10.1)
   ===================================================================== */
.goal-row{display:flex;align-items:center;gap:12px;min-height:64px;padding:6px 0}
.goal-row+.goal-row{box-shadow:0 -.5px 0 var(--line)}
.goal-check{width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:2.5px dashed color-mix(in srgb,var(--brand) 45%,var(--line));background:var(--surface-2);display:grid;place-items:center;font-size:21px;transition:transform .2s var(--ease),background .2s}
.goal-check:active{transform:scale(.88)}
.goal-check.on{border:0;background:var(--brand);color:var(--on-brand);animation:goalPop .45s var(--ease)}
.goal-check .ico{width:22px;height:22px;stroke-width:3.2}
@keyframes goalPop{40%{transform:scale(1.18)}}
.goal-copy{flex:1;min-width:0;border:0;background:none;padding:2px 0;text-align:left;color:var(--ink)}
.goal-copy b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal-copy small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.goal-row.done .goal-copy b{color:var(--brand-ink)}
.goal-dots{display:flex;gap:4px;margin-top:6px}
.goal-dots i{width:16px;height:6px;border-radius:4px;background:var(--line)}
.goal-dots.weekly i{width:22px}
.goal-dots i.on{background:var(--brand)}
.goal-dots i.today{box-shadow:0 0 0 1.5px var(--brand) inset}
.goal-dots i.today.on{box-shadow:none}
.goal-foot{display:flex;justify-content:space-between;margin-top:4px}
.goal-ideas{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.goal-ideas.center{justify-content:center}
.goal-ideas .chip{min-height:34px;padding:6px 11px;font-size:13px}
.goal-ideas .chip.active{background:var(--ink);color:var(--bg)}
.goal-title-row{grid-template-columns:72px 1fr!important}
.emoji-field input{text-align:center;font-size:22px}
.leaderboard{list-style:none;margin:8px 0 2px;padding:10px 0 0;box-shadow:0 -.5px 0 var(--line);display:grid;gap:4px}
.leaderboard li{display:flex;align-items:center;gap:9px;min-height:40px;padding:0 8px;border-radius:12px}
.leaderboard li.me{background:var(--mint)}
.lb-rank{width:24px;text-align:center;font-weight:800;font-size:15px}
.leaderboard b{flex:1;font-size:14.5px;color:var(--ink)}
.leaderboard li>small{font-size:12.5px;color:var(--muted);font-weight:700}
.leaderboard strong{font-size:16px;color:var(--ink)}
.leaderboard strong small{font-size:11px;color:var(--muted);font-weight:600}
.goal-history{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;gap:3px;justify-content:center;padding:4px 0}
.goal-history i{width:14px;height:14px;border-radius:4px;background:var(--surface-2)}
.goal-history i.on{background:var(--brand)}
.goal-history-cap{text-align:center;margin:8px 0 4px;font-size:12.5px;color:var(--muted)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.confetti i{position:absolute;top:-12px;left:var(--x);width:8px;height:14px;border-radius:2px;animation:confettiFall var(--d) ease-in forwards}
@keyframes confettiFall{to{transform:translateY(105vh) rotate(var(--r));opacity:.7}}
.otd{display:flex;align-items:center;gap:14px;cursor:pointer;padding:12px}
.otd img,.otd-emo{width:76px;height:76px;flex:0 0 76px;border-radius:16px;object-fit:cover;display:grid;place-items:center;font-size:34px}
.otd small{display:block;font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.3px}
.otd b{display:block;font-size:16px;color:var(--ink);margin:3px 0}
.otd span{font-size:12.5px;color:var(--muted)}
.rv-teaser{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:14px;padding:16px;border:0;border-radius:20px;background:linear-gradient(120deg,#2b1b5a,#7c3a8f 55%,#e2725b);color:#fff;text-align:left}
.rv-teaser>span{font-size:28px}.rv-teaser div{flex:1}.rv-teaser b{display:block;font-size:16px}.rv-teaser small{opacity:.85}
.today-foot{display:flex;justify-content:center;gap:22px;margin:4px 0 10px}
.rv-hero{padding:26px 22px;border-radius:26px;background:linear-gradient(140deg,#2b1b5a 0%,#7c3a8f 55%,#e2725b 100%);color:#fff;margin-bottom:12px}
.rv-hero small{font-size:12px;font-weight:800;letter-spacing:1px;opacity:.85}
.rv-hero h2{margin:8px 0 6px;font:800 30px/1.1 var(--display);letter-spacing:-.6px}
.rv-hero p{margin:0;opacity:.9}
.rv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.rv-card{display:grid;gap:2px;padding:16px;border-radius:20px;color:var(--ink);animation:fade-up .45s var(--ease) both}
.rv-card.wide{grid-column:1/-1}
.rv-card b{font:800 28px/1.1 var(--display);letter-spacing:-.5px}
.rv-card span{font-size:13.5px;font-weight:700}
.rv-card small{font-size:12px;color:var(--muted)}
.rv-card.c1{background:var(--mint)}.rv-card.c2{background:var(--peach)}.rv-card.c3{background:var(--sky)}.rv-card.c4{background:var(--sand)}.rv-card.c5{background:var(--lilac)}.rv-card.c6{background:var(--rose)}
.rv-card:nth-child(2){animation-delay:.06s}.rv-card:nth-child(3){animation-delay:.12s}.rv-card:nth-child(4){animation-delay:.18s}.rv-card:nth-child(5){animation-delay:.24s}.rv-card:nth-child(6){animation-delay:.3s}
.rv-bars{display:grid;gap:10px;padding:4px 0}
.rv-bars div{display:grid;grid-template-columns:130px 1fr 28px;align-items:center;gap:10px;font-size:13.5px}
.rv-bars em{height:10px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.rv-bars em i{display:block;height:100%;border-radius:inherit;filter:saturate(1.6) brightness(.92)}
.rv-bars b{text-align:right}
.primary.block{width:100%;justify-content:center;margin:6px 0 20px}

/* =====================================================================
   21. DESIGN PASS (Phase 10.2)
   ===================================================================== */
/* Category icon set */
.cat-ico{width:15px;height:15px;flex:0 0 auto;stroke-width:2;vertical-align:-2px}
.cat-ico.lg{width:30px;height:30px;stroke-width:1.7}
.cat-ico.xl{width:38px;height:38px;stroke-width:1.5}
.cat-tag{display:inline-flex;align-items:center;gap:5px}
.chip .cat-ico{margin-right:5px}
.cat-picker span{display:inline-flex;align-items:center;gap:7px}
.cat-picker .cat-ico{width:17px;height:17px}
.collection .visual{color:var(--ink)}
.xp-emoji,.idea-emo,.otd-emo{color:var(--ink)}
/* Covers */
.exp-thumb{width:58px;height:58px;flex:0 0 58px;border-radius:14px;object-fit:cover;background:var(--surface-2);align-self:center}
.xp-hero.has-cover{padding-top:0}
.xp-cover{display:block;max-width:none;width:calc(100% + 40px);margin:0 -20px 14px;height:230px;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.xp-hero.has-cover .xp-top{margin-top:-58px;position:relative}
@media(min-width:600px){.xp-cover{width:calc(100% + 56px);margin:0 -28px 14px;height:280px}}
@media(min-width:1024px){.xp-hero.has-cover{padding-top:0}.xp-cover{border-radius:26px 26px 0 0;margin-top:0}}
/* Shared-element transition: card → experience */
::view-transition-old(xp-hero),::view-transition-new(xp-hero){animation-duration:.38s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
/* Skeletons */
.sk{position:relative;overflow:hidden;background:color-mix(in srgb,var(--ink) 7%,transparent);border-radius:14px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 60%,transparent),transparent);animation:skShimmer 1.2s infinite}
@keyframes skShimmer{to{transform:translateX(100%)}}
.sk-line{height:14px;margin:10px 0}.sk-line.w60{width:60%}
.sk-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.sk-btn{height:64px;border-radius:16px}
.sk-card{height:120px;margin-bottom:14px;border-radius:var(--radius)}.sk-card.tall{height:220px}
.sk-hero{height:180px;border-radius:26px;margin-bottom:12px}
/* Accessibility */
:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 75%,transparent);outline-offset:2px}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}
html[data-text=large] #screen,html[data-text=large] dialog{zoom:1.1}
html[data-text=xlarge] #screen,html[data-text=xlarge] dialog{zoom:1.22}
html[data-text=xlarge] .tabbar small{font-size:12px}
@media(prefers-contrast:more){:root{--muted:#3f4b52;--line:#c3ccd0}body.dark{--muted:#c2ccc8}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.sk::after{animation:none}}
/* Wide screens: Today in two columns */
@media(min-width:1100px){
 .today-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start}
 .tg-side{position:sticky;top:84px}
 .tg-side .cd-scroll{flex-wrap:wrap;overflow:visible}
 .tg-side .cd-card{flex:1 1 140px}
 .exp-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1500px){.exp-list{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* =====================================================================
   22. WEEKEND, SAVINGS, CALENDAR SYNC, OFFLINE, AI (Phase 10.3)
   ===================================================================== */
.wk-forecast{display:flex;gap:8px;margin:4px 0 8px}
.wk-forecast>div{flex:1;display:grid;justify-items:center;gap:1px;padding:10px 6px;border-radius:16px;background:linear-gradient(160deg,var(--sky),var(--surface-2))}
.wk-forecast small{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase}
.wk-forecast span{font-size:26px;line-height:1.2}
.wk-forecast b{font:800 20px var(--display);color:var(--ink)}
.wk-forecast em{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:600}
.wk-row{display:flex;align-items:center;gap:10px;min-height:54px}
.wk-row+.wk-row,.wk-forecast+.wk-row{box-shadow:0 -.5px 0 var(--line)}
.wk-row .need-copy b{display:flex;align-items:center;gap:6px}
.tc-head .link-btn .ico{width:14px;height:14px}
.save-card{display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--radius);background:linear-gradient(135deg,#fff4e0,#ffe9ef);margin-bottom:10px;color:#3a2a1a}
body.dark .save-card{background:linear-gradient(135deg,#3a2e1c,#3a2230);color:var(--ink)}
.save-card.empty-save>span{font-size:30px}
.save-card.empty-save div{flex:1}.save-card b{display:block;font-size:15px}.save-card small{font-size:12.5px;opacity:.8}
.save-ring{--p:0;width:62px;height:62px;flex:0 0 62px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(closest-side,var(--surface) 76%,transparent 78% 100%),conic-gradient(#e2725b calc(var(--p)*1%),color-mix(in srgb,#e2725b 18%,transparent) 0)}
.save-ring b{font-size:13.5px;color:var(--ink)}
.save-ring.sm{width:40px;height:40px;flex-basis:40px}.save-ring.sm b{font-size:10.5px}
.save-copy{flex:1;min-width:0}.save-copy small{font-weight:800;letter-spacing:.3px}
.save-copy b{font:800 19px var(--display)}.save-copy b em{font:600 13px var(--font);font-style:normal;opacity:.75}
.save-copy span{display:block;font-size:12.5px;margin-top:2px;opacity:.85}
.save-card{flex-wrap:wrap}
.save-actions{display:flex;align-items:center;gap:6px;width:100%;justify-content:flex-end;margin-top:-6px}
.save-actions .primary{flex:1;justify-content:center}
.save-people{display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 14px}
.save-people>span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-1);font-size:12.5px}
.save-quick{display:flex;gap:6px;flex-wrap:wrap}
.sheet-note{margin:0 4px 12px;font-size:13.5px;color:var(--muted);line-height:1.45}
#offlineBar{position:fixed;left:0;right:0;top:calc(var(--safe-top) + 56px);z-index:60;display:flex;justify-content:center;gap:12px;align-items:center;min-height:32px;padding:6px 14px;background:#33302c;color:#fff;font-size:12.5px;font-weight:650}
body.is-offline #screen{padding-top:36px}
@media(min-width:1024px){#offlineBar{left:250px;top:calc(var(--safe-top) + 60px)}}
#offlineBar[hidden]{display:none}
#offlineBar b{color:#f5c26b}
.ai-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:6px 0 14px;border:0;border-radius:16px;background:linear-gradient(120deg,#5b3cc4,#9b4dca 55%,#e2725b);color:#fff;font-size:15px;font-weight:750;box-shadow:0 10px 24px rgba(91,60,196,.25)}
.ai-group{border:0;margin:0 0 6px;padding:0;display:grid;gap:4px}
.ai-group legend{font-size:13px;font-weight:800;color:var(--muted);padding:0;margin-bottom:6px}
.ai-pick{display:flex!important;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:12px;background:var(--surface-2);cursor:pointer}
.ai-pick input{width:20px!important;min-height:20px!important;height:20px;padding:0!important;margin-top:1px;accent-color:var(--brand);-webkit-appearance:auto!important;appearance:auto!important}
.ai-pick b{display:block;font-size:14.5px;color:var(--ink);font-weight:650}
.ai-pick small{display:block;font-size:12.5px;color:var(--muted);font-weight:500}
.ai-cost{display:flex;justify-content:space-between;padding:6px 10px;font-size:14px}
.ai-tips{padding:12px;border-radius:14px;background:var(--mint);font-size:13.5px}
.ai-tips p{margin:6px 0 0}
.opt{font-weight:500;color:var(--faint)}

/* Upload progress (Phase 10 photo fix) */
#uploadTray{position:fixed;left:12px;right:12px;bottom:calc(var(--safe-bottom) + 88px);z-index:70;padding:12px 14px;border-radius:18px;background:var(--surface);box-shadow:0 14px 40px rgba(10,30,40,.22),0 0 0 1px var(--line);transform:translateY(20px);opacity:0;pointer-events:none;transition:transform .3s var(--ease),opacity .25s}
#uploadTray.show{transform:none;opacity:1;pointer-events:auto}
#uploadTray.bad{box-shadow:0 14px 40px rgba(10,30,40,.22),0 0 0 1.5px #e8a33a}
.ut-row{display:flex;align-items:center;gap:12px}
.ut-copy{flex:1;min-width:0}
.ut-copy b{display:block;font-size:14.5px;color:var(--ink)}
.ut-copy small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#uploadTray.bad .ut-copy small{white-space:normal}
.ut-icon{font-size:22px}
.ut-spin{width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:3px solid color-mix(in srgb,var(--brand) 20%,transparent);border-top-color:var(--brand);animation:psSpin .8s linear infinite;display:inline-block}
.ut-bar{display:block;height:6px;margin-top:10px;border-radius:9px;background:color-mix(in srgb,var(--brand) 14%,transparent);overflow:hidden}
.ut-bar i{display:block;height:100%;border-radius:inherit;background:var(--brand);transition:width .4s var(--ease)}
.ut-hint{display:block;margin-top:6px;font-size:11.5px;color:var(--faint)}
@media(min-width:1024px){#uploadTray{left:auto;right:24px;bottom:24px;width:380px}}
.up-tile{position:relative}
.up-tile img{filter:saturate(.6) brightness(.85)}
.up-tile.done img{filter:none}
.up-noimg{display:grid;place-items:center;width:100%;height:100%;font-size:26px}
.up-state{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px}
.up-state .ut-spin{border-color:rgba(255,255,255,.35);border-top-color:#fff}
.up-tile.waiting .up-state{background:rgba(0,0,0,.25)}
.up-tile.done .up-state{place-items:end;padding:6px}
.up-tile.done .up-state .ico{width:22px;height:22px;padding:3px;border-radius:50%;background:var(--brand);stroke-width:3.4}
.up-tile.failed .up-state{background:rgba(180,60,40,.55)}
.up-inline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;border-radius:14px;background:var(--mint);margin:6px 0}
.up-inline b{font-size:14px;color:var(--ink)}
.up-inline .ut-bar{flex:1 0 100%;margin-top:0}

/* Phase 11 — launch */
.auth-terms{display:block;margin-top:12px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.45}
.auth-terms a{color:var(--brand);font-weight:700}
.l-footer div a{margin:0 6px}
.del-list{margin:0 0 12px;padding-left:18px;display:grid;gap:8px;font-size:14px;line-height:1.45}
.del-list li.warn{color:#a3401f}
body.dark .del-list li.warn{color:#ff9a7a}

.hs-mark{width:100%;height:100%;display:block}