*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#FF704D;--primary-dark:#D95132;--primary-light:#FFF0EB;
  /* --primary-ink is the orange used for text and icons. The brand orange is
     too light to read comfortably on white, so text uses a darker shade while
     fills and borders keep the brand colour. */
  --primary-ink:#B93F25;
  --accent:#4F7C68;--bg:#FFF8F3;--card:#FFFFFF;
  /* --text2 darkened so secondary copy is readable on white and on the warm bg. */
  --text:#24352E;--text2:#66756E;--border:#E8DED7;
  --shadow:0 4px 18px rgba(36,53,46,.07);--shadow-lg:0 12px 36px rgba(36,53,46,.16);
  --r:20px;--r-sm:12px;--nav:72px;--hdr:64px;
  --green:#2ECC71;--red:#E74C3C;--yellow:#F39C12;--blue:#3498DB;
  --on-primary:#FFFFFF;--media-surface:#101712;--on-media:#FFFFFF;
}
html,body{height:100%;overflow:hidden;background:var(--bg);font-family:'Figtree',sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;font-size:18px}
/* Native form controls do not reliably inherit text colour. Keep typed text,
   placeholders and the caret readable against the active theme everywhere. */
input,textarea,select{color:var(--text);background-color:var(--card);caret-color:var(--primary);color-scheme:light}
input::placeholder,textarea::placeholder{color:var(--text2);opacity:1}
[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select{color-scheme:dark}
#app{display:none;flex-direction:column;height:100vh;height:100dvh;height:var(--appvh,100dvh);max-width:430px;margin:0 auto;background:var(--bg);position:relative;overflow:hidden}

/* HEADER */
#hdr{height:var(--hdr);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--accent) 14%,transparent);display:flex;align-items:center;justify-content:space-between;padding:0 18px;flex-shrink:0;z-index:100}
.logo{font-family:'Outfit',sans-serif;font-size:25px;font-weight:800;color:var(--primary-ink);letter-spacing:0}
.logo span{color:var(--text)}
.logo-img{display:block;flex-shrink:0}
.hdr-acts{display:flex;gap:5px}
.icn-btn{width:40px;height:40px;border-radius:50%;border:none;background:transparent;color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease}
.icn-btn:hover{background:var(--primary-light);color:var(--primary-ink)}
.icn-btn.primary-icon{background:var(--primary);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 28%,transparent)}
.icn-btn:active{transform:scale(.9);box-shadow:none}
.pp-icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ui-icon,.ni-icon{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* Shared visual language for Post, Story, Reel, Live and Event creators */
.creator-fullscreen{position:fixed;inset:0;z-index:800;background:var(--bg);flex-direction:column;overflow:hidden;color:var(--text)}
.creator-surface{background:var(--card);color:var(--text)}
.creator-hdr{min-height:60px;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--card) 94%,transparent);flex-shrink:0}
.creator-hdr-inset{margin:0 -18px 14px;padding-inline:18px}
.creator-title{min-width:0;display:flex;align-items:center;gap:10px;font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;color:var(--text);letter-spacing:0}
.creator-title-icon{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;background:var(--primary-light);color:var(--accent)}
.creator-title-icon .ui-icon{width:21px;height:21px}
.creator-icon-btn{width:40px;height:40px;min-width:40px;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--text);font-family:inherit;font-size:17px;cursor:pointer;transition:transform .16s,background-color .16s,border-color .16s}
.creator-icon-btn:active,.creator-header-action:active,.creator-media-btn:active,.creator-primary:active,.creator-secondary:active{transform:scale(.96)}
.creator-header-action{min-width:58px;min-height:40px;border:0;border-radius:var(--r-sm);padding:0 10px;background:var(--primary-light);color:var(--primary-ink);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
.creator-label{display:block;margin:16px 0 7px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;color:var(--text2);letter-spacing:0;text-transform:none}
.creator-field{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--text);font-family:inherit;font-size:16px;line-height:1.45;outline:none;resize:vertical}
.creator-field:focus{border-color:var(--primary);background:var(--card)}
.creator-media-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:8px}
.creator-media-btn{min-height:50px;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;gap:8px;background:var(--bg);color:var(--text);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:transform .16s,background-color .16s,border-color .16s}
.creator-media-btn:hover{border-color:var(--primary);background:var(--primary-light)}
.creator-media-btn .ui-icon{width:20px;height:20px;color:var(--accent)}
.creator-media-btn.creator-danger{grid-column:1/-1;color:var(--red)}
.creator-primary{width:100%;min-height:52px;margin-top:18px;border:0;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:var(--primary);color:var(--on-primary);font-family:'Figtree',sans-serif;font-size:17px;font-weight:700;letter-spacing:0;cursor:pointer;box-shadow:0 5px 16px color-mix(in srgb,var(--primary) 30%,transparent);transition:transform .16s,box-shadow .16s,opacity .16s}
.creator-primary[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.creator-secondary{width:100%;min-height:48px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:transparent;color:inherit;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer}
.creator-overlay{position:fixed;inset:0;z-index:5200;background:color-mix(in srgb,var(--text) 56%,transparent);align-items:flex-end;justify-content:center}
.creator-event-card{width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:var(--card);color:var(--text);border-radius:var(--r) var(--r) 0 0;padding:12px 18px calc(28px + env(safe-area-inset-bottom));box-shadow:var(--shadow-lg)}
.creator-drag{width:40px;height:4px;border-radius:999px;background:var(--border);margin:0 auto 8px}
@media (min-width:600px){.creator-overlay{align-items:center;padding:24px}.creator-event-card{border-radius:var(--r);max-height:min(820px,92vh)}}

/* MAIN */
#main{flex:1;min-height:0;overflow:hidden;position:relative}
.screen{display:none;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px}
.screen.active{display:block}

/* BOTTOM NAV */
#nav{height:calc(var(--nav) + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(18px);border-top:1px solid color-mix(in srgb,var(--accent) 14%,transparent);display:flex;align-items:center;justify-content:space-around;padding:0 4px;padding-bottom:env(safe-area-inset-bottom);flex-shrink:0;z-index:100}
.ni{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:8px 2px;border:none;background:none;position:relative;min-width:0;min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ni:focus{outline:none}
.ni:focus-visible{outline:3px solid var(--primary);outline-offset:-3px;border-radius:12px}
.cm-item:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
#nav[aria-hidden="true"]{pointer-events:none}

.ni-icon{color:var(--accent);transition:transform .18s,color .18s;stroke-width:2}
.ni-lbl{font-size:10px;font-weight:700;color:var(--text2);transition:color .18s;font-family:'Outfit',sans-serif;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* Very narrow phones (320–360px): shrink labels so all six fit without clipping */
@media (max-width:360px){.ni-lbl{font-size:9px;letter-spacing:-.2px}.ni{padding:8px 0}#nav{padding:0}}

.ni.active .ni-icon{transform:translateY(-1px);color:var(--primary);stroke-width:2.5}
.ni.active .ni-lbl{color:var(--primary-ink);font-weight:700}
.ni-dot{display:none}

/* STORIES */
.stories{display:flex;gap:12px;padding:12px 16px;overflow-x:auto;scrollbar-width:none;background:var(--card);border-bottom:1px solid var(--border)}
.stories::-webkit-scrollbar{display:none}
.s-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;flex-shrink:0}
.s-ring{width:58px;height:58px;border-radius:50%;padding:2.5px;background:linear-gradient(135deg,var(--primary),var(--accent))}
.s-ring.seen{background:var(--border)}
.s-ring.add{background:var(--primary-light);border:2px dashed var(--primary)}
.s-av{width:100%;height:100%;border-radius:50%;border:2.5px solid var(--card);background:var(--border);display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden}
.s-name{font-size:12px;color:var(--text);max-width:58px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* Password strength hints */
.pwhint{padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;background:var(--border);color:var(--text2);transition:all .2s}
.pwhint.ok{background:#E8F8F0;color:#1a8a4a}

/* FEED POSTS */
.feed-posts{padding:18px 16px 24px;display:flex;flex-direction:column;gap:24px}
.post{background:var(--card);border:1px solid color-mix(in srgb,var(--accent) 10%,transparent);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.post-hdr{display:flex;align-items:center;gap:12px;padding:16px}
.p-av{width:40px;height:40px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:25px;flex-shrink:0}
.p-meta{flex:1;min-width:0}
.p-dog{font-family:'Outfit',sans-serif;font-size:17px;font-weight:700;letter-spacing:0;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-owner{font-size:13px;color:var(--text2);font-weight:500;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-loc{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-loc .ui-icon{width:14px;height:14px;stroke-width:2;color:var(--text2)}
.p-more{font-size:21px;color:var(--text2);cursor:pointer;padding:4px}
.p-img{width:100%;aspect-ratio:1;overflow:hidden;position:relative}
.p-img img{width:100%;height:100%;object-fit:cover;display:block}
.p-acts{display:flex;align-items:center;padding:12px 16px 6px;gap:18px}
.p-btn{border:none;background:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:15px;color:var(--text2);font-family:'Figtree',sans-serif;padding:6px 0;transition:color .16s,transform .16s}
.p-btn:active{transform:scale(.9)}
.p-btn.liked{color:var(--red)}

.p-save{margin-left:auto}
.p-likes{padding:2px 14px;font-size:14px;font-weight:600}
.p-cap{padding:4px 16px 10px;font-size:15px;line-height:1.55}
.p-cap strong{font-weight:600}
.p-time{padding:0 14px 12px;font-size:12px;color:var(--text2)}


/* ── Single dog avatar ── */
.p-av-dog{width:46px;height:46px;border-radius:50%;flex-shrink:0;border:2.5px solid var(--primary);position:relative}
.p-av-dog>img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
/* small owner circle tucked into the corner of the dog avatar */
.p-av-owner{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;overflow:hidden;border:2px solid var(--card);background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.p-av-owner img{width:100%;height:100%;object-fit:cover;display:block}


/* Availability dates */
.sdates{font-size:13px;color:var(--primary-ink);font-weight:600;margin:4px 0 6px}

/* Walker tab */
.walker-card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.walker-hdr{display:flex;gap:12px;align-items:center;padding:14px 14px 10px}
.walker-av{width:48px;height:48px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0}
.walker-info{flex:1}
.walker-name{font-size:16px;font-weight:700}
.walker-loc{font-size:13px;color:var(--text2);margin-top:1px}
.walker-rat{font-size:13px;color:#F5A623;margin-top:2px}
.walker-dates{font-size:13px;color:var(--primary-ink);font-weight:600;margin-top:3px}
.walker-price{font-size:15px;font-weight:800;color:var(--primary-ink);margin-top:2px}
.walker-desc{font-size:14px;color:var(--text2);padding:0 14px 10px;line-height:1.5}
/* 24h availability grid */
.walker-avail{padding:0 14px 14px}
.walker-avail-title{font-size:13px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.hour-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.hour-cell{padding:5px 2px;text-align:center;border-radius:6px;font-size:10px;font-weight:700;cursor:pointer;transition:all .15s;border:1px solid var(--border);background:var(--bg);color:var(--text2);user-select:none}
.hour-cell.avail{background:#E8F8F0;border-color:#2ECC71;color:#1a8a4a}
.hour-cell.sel{background:var(--primary);border-color:var(--primary);color:white}
.walker-footer{display:flex;gap:10px;padding:0 14px 14px;align-items:center}
.btn-book{flex:1;padding:11px;background:var(--primary);color:white;border:none;border-radius:var(--r-sm);font-family:Poppins,sans-serif;font-size:15px;font-weight:700;cursor:pointer}

/* HOST */
.scard{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px;margin-bottom:12px;display:flex;gap:12px;align-items:flex-start}
.sav{width:58px;height:58px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0}
.sinfo{flex:1}
.sname{font-size:16px;font-weight:600}
.sloc{font-size:13px;color:var(--text2);margin-bottom:3px}
.srat{font-size:14px;color:var(--yellow);margin-bottom:5px}
.sdesc{font-size:13px;color:var(--text2);line-height:1.4;margin-bottom:6px}
.sprice{font-size:15px;font-weight:700;color:var(--primary-ink)}
.btn-contact{padding:8px 14px;background:var(--primary);color:white;border:none;border-radius:var(--r-sm);font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;cursor:pointer;align-self:center;white-space:nowrap}

/* SERVICES */
.services-header{padding:20px 16px 6px;text-align:center}
.services-header h2{font-size:23px;font-weight:800;color:var(--text);letter-spacing:-0.3px}
.services-header p{font-size:14px;color:var(--text2);margin-top:4px}
.services-grid{padding:10px 16px 20px;display:grid;gap:12px}
.service-card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 16px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--primary),var(--accent))}
.service-icon{width:52px;height:52px;border-radius:14px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0}
.service-icon .ui-icon{width:26px;height:26px;color:var(--primary)}
.service-info{flex:1;min-width:0}
.service-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:3px}
.service-desc{font-size:13px;color:var(--text2);line-height:1.45}
.coming-soon{display:inline-block;margin-top:8px;padding:5px 10px;border-radius:20px;background:var(--primary-light);color:var(--primary-ink);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px}
.service-card.tap:active{transform:scale(0.98)}


/* HOST */
.scard{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px;margin-bottom:12px;display:flex;gap:12px;align-items:flex-start}
.sav{width:58px;height:58px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0}
.sinfo{flex:1}
.sname{font-size:16px;font-weight:600}
.sloc{font-size:13px;color:var(--text2);margin-bottom:3px}
.srat{font-size:14px;color:var(--yellow);margin-bottom:5px}
.sdesc{font-size:13px;color:var(--text2);line-height:1.4;margin-bottom:6px}
.sprice{font-size:15px;font-weight:700;color:var(--primary-ink)}
.btn-contact{padding:8px 14px;background:var(--primary);color:white;border:none;border-radius:var(--r-sm);font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;cursor:pointer;align-self:center;white-space:nowrap}

/* MY PACK */
.pack-hdr{background:linear-gradient(135deg,var(--primary),#FF8C5A);padding:24px 20px 20px;color:white;display:flex;align-items:center;gap:14px}
.my-av{width:70px;height:70px;border-radius:50%;border:3px solid rgba(255,255,255,.7);background:rgba(255,255,255,.25);font-size:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.my-av img,.dual-av img{width:100%;height:100%;object-fit:cover;display:block}
.my-name{font-size:21px;font-weight:700}
.my-stats{display:flex;gap:20px;margin-top:5px}
.my-stat{display:flex;flex-direction:column;align-items:center}
.my-sn{font-size:18px;font-weight:700}
.my-sl{font-size:12px;opacity:.85;margin-top:5px}
.sec-title{padding:16px 16px 8px;font-size:17px;font-weight:700}
.dcard{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);margin:0 16px 12px;overflow:hidden;cursor:pointer}
.dcard-top{display:flex;align-items:center;gap:12px;padding:14px}
.dthumb{width:65px;height:65px;border-radius:14px;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:37px;flex-shrink:0;overflow:hidden}
.dbi{flex:1;min-width:0}
.dnrow{display:flex;align-items:center;gap:6px}
.dname{font-size:17px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dgender{font-size:16px}
.dbreed{font-size:14px;color:var(--primary-ink);font-weight:500}
.dage{font-size:13px;color:var(--text2)}
.dcard-badges{display:flex;gap:6px;padding:0 14px 12px;flex-wrap:wrap}
.dcard-actions{padding:0 14px 14px}
.dcard-health{width:100%;min-height:44px;border:1.5px solid color-mix(in srgb,var(--accent) 42%,var(--border));border-radius:var(--r-sm);background:color-mix(in srgb,var(--accent) 10%,var(--card));color:var(--text);display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:transform .18s,background .18s,border-color .18s}
.dcard-health .ui-icon{color:var(--accent)}
.dcard-health:active{transform:scale(.98);background:color-mix(in srgb,var(--accent) 17%,var(--card))}
.dcard-health:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.bdg{padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}
.bdg-g{background:#E8F8F0;color:var(--green)}
.bdg-b{background:#EAF4FF;color:var(--blue)}
.bdg-o{background:var(--primary-light);color:var(--primary-ink)}
.add-dog{margin:0 16px 16px;padding:14px;border-radius:var(--r);border:2px dashed var(--primary);background:var(--primary-light);display:flex;align-items:center;justify-content:center;gap:8px;font-family:'Poppins',sans-serif;font-size:16px;font-weight:600;color:var(--primary-ink);cursor:pointer;width:calc(100% - 32px)}

/* ACTIVITY CARDS (My Pack) */
.tip-card{background:var(--card);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:14px;margin-bottom:10px;display:flex;gap:12px;align-items:flex-start}
.tip-ic{width:42px;height:42px;border-radius:12px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0}
.tip-t{font-size:15px;font-weight:600;margin-bottom:3px}
.tip-d{font-size:13px;color:var(--text2);line-height:1.4}

/* MODAL */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:none;align-items:flex-end;justify-content:center}
.overlay.open{display:flex}
.modal{background:var(--card);border-radius:24px 24px 0 0;width:100%;max-width:430px;max-height:90vh;overflow-y:auto;padding:20px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.mhandle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px}
.mtitle{font-size:21px;font-weight:700;margin-bottom:16px}
.drow{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:15px}
.drow:last-child{border-bottom:none}
.dlbl{color:var(--text2)}
.dval{font-weight:600}
.vacc-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px}
.vacc-ok{width:18px;height:18px;border-radius:50%;background:var(--green);color:white;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}

/* Bottom sheets built on the .cs-hdr pattern had no card shell defined at
   all — they rendered transparent and full-bleed over the page. */
.create-sheet.sheet-card{inset:auto 0 0 0;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;max-width:430px;margin:0 auto;background:var(--card);border-radius:24px 24px 0 0;max-height:90vh;overflow-y:auto;box-shadow:0 -8px 32px rgba(0,0,0,.22);padding-bottom:env(safe-area-inset-bottom)}
.cs-hdr{display:flex;align-items:center;gap:8px;padding:13px 14px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);z-index:3;flex-shrink:0}
.cs-title{flex:1;font-size:18px;font-weight:700;text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-title .ui-icon{display:inline;width:19px;height:19px;vertical-align:-4px;margin-right:5px}
.cs-x,.cs-close{width:32px;height:32px;flex-shrink:0;border:none;background:var(--primary-light);color:var(--text);border-radius:50%;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cs-close{order:2}
.cs-next{flex-shrink:0;border:none;background:none;color:var(--primary-ink);font-family:'Poppins',sans-serif;font-size:16px;font-weight:700;cursor:pointer;padding:6px 6px}

.dcard-edit{width:44px;height:44px;flex-shrink:0;border:none;border-radius:50%;background:var(--primary-light);color:var(--primary-ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.dcard-edit .ui-icon{width:20px;height:20px}
.dcard-edit:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.dcard-edit:active{transform:scale(.9)}

/* DOG PROFILE EDITING */
.de-sec{padding:14px 16px;border-bottom:8px solid var(--bg)}
.de-sec-t{font-size:14px;font-weight:800;color:var(--text2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px}
.de-f{margin-bottom:12px}
.de-f:last-child{margin-bottom:0}
.de-f label{display:block;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:5px}
.de-f input,.de-f select,.de-f textarea{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:'Poppins',sans-serif;font-size:15px;background:var(--card);color:var(--text)}
.de-f input:focus,.de-f select:focus,.de-f textarea:focus{outline:none;border-color:var(--primary)}
.de-f textarea{resize:vertical;line-height:1.5}
.de-f.err input,.de-f.err select{border-color:var(--red)}
.de-row{display:flex;gap:10px}
.de-row>.de-f{flex:1}
.de-hint{font-size:12px;color:var(--text2);margin-top:4px}
.de-photo{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.de-photo-img{width:76px;height:76px;border-radius:18px;overflow:hidden;background:var(--border);flex-shrink:0;border:2px solid var(--primary)}
.de-photo-img img{width:100%;height:100%;object-fit:cover;display:block}
.de-photo-btns{display:flex;flex-direction:column;gap:6px;flex:1}
.de-mini{padding:8px 12px;border:1.5px solid var(--border);background:var(--card);border-radius:var(--r-sm);font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;color:var(--text);cursor:pointer}
.de-chip{padding:7px 13px;border-radius:20px;border:1.5px solid var(--border);background:var(--card);font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;color:var(--text2);cursor:pointer;transition:all .15s}
.de-chip.sel{background:var(--primary-light);border-color:var(--primary);color:var(--primary-ink)}
.de-chips{display:flex;flex-wrap:wrap;gap:7px}
.de-toggle{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border)}
.de-toggle:last-child{border-bottom:none}
.de-toggle-l{font-size:15px;font-weight:600}
.de-toggle-d{font-size:13px;color:var(--text2);margin-top:2px}
/* Vaccination records */
.vax-card{border:1.5px solid var(--border);border-radius:var(--r-sm);padding:11px 12px;margin-bottom:9px;background:var(--card)}
.vax-card-top{display:flex;align-items:center;gap:8px}
.vax-card-name{flex:1;font-size:15px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vax-card-sub{font-size:13px;color:var(--text2);margin-top:3px;line-height:1.45}
.vax-card-acts{display:flex;gap:6px;margin-top:9px}
.vax-card-acts button{flex:1;padding:6px;border-radius:8px;border:1.5px solid var(--border);background:var(--card);font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;cursor:pointer;color:var(--text)}
.vax-card-acts .vax-del{color:var(--red);border-color:#F5C6C0}
.vax-add{width:100%;padding:12px;border:2px dashed var(--primary);background:var(--primary-light);border-radius:var(--r-sm);color:var(--primary-ink);font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;cursor:pointer}
.h-rec-badge.overdue{background:#FEE8E8;color:#c0392b}
/* Vaccination display in the dog modal */
.vax-item{border-bottom:1px solid var(--border);padding:10px 0}
.vax-item:last-child{border-bottom:none}
.vax-item-top{display:flex;align-items:center;gap:8px}
.vax-item-name{flex:1;font-size:14px;font-weight:600}
.vax-item-sub{font-size:13px;color:var(--text2);margin-top:3px}
.vax-item-note{font-size:13px;color:var(--text2);margin-top:4px;font-style:italic}
.de-save-bar{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--border);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));display:flex;gap:10px}
.de-save-bar button{flex:1;padding:12px;border-radius:var(--r-sm);font-family:'Figtree',sans-serif;font-size:16px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:transparent;color:var(--text2);transition:transform .16s,background-color .16s,box-shadow .16s}
.de-save-bar .de-save{background:var(--primary);border-color:var(--primary);color:#fff;flex:2;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 28%,transparent)}
.de-save-bar .de-save .ui-icon{width:18px;height:18px}
.de-save-bar button:active{transform:scale(.97)}

#story-reel-btn{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:6px;padding:11px 20px;border:none;border-radius:30px;background:rgba(255,255,255,.94);color:#1A1A2E;font-family:'Poppins',sans-serif;font-size:16px;font-weight:700;cursor:pointer;z-index:20;box-shadow:0 4px 18px rgba(0,0,0,.3)}
#story-reel-btn:active{transform:translateX(-50%) scale(.95)}
.s-item{position:relative}
/* Instagram-style: your face in the ring, a + badge on the corner */
.s-add-badge{position:absolute;right:-2px;top:39px;bottom:auto;width:21px;height:21px;min-width:21px;min-height:21px;border-radius:50%;background:var(--primary);color:#fff;border:2.5px solid var(--card);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;line-height:1;padding:0;cursor:pointer;font-family:'Poppins',sans-serif}
.s-add-badge:active{transform:scale(.88)}
.s-ring.unseen-self{background:linear-gradient(135deg,var(--primary),var(--accent))}
.s-ring.own{background:var(--border)}
#my-story-rings{display:contents}
#my-story-rings .s-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* Reels back button (Reels left the bottom nav) */
.reel-back{position:absolute;top:12px;left:12px;width:38px;height:38px;border-radius:50%;border:none;background:rgba(0,0,0,.42);color:#fff;font-size:23px;cursor:pointer;z-index:60;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.reel-back:active{transform:scale(.9)}

/* PUBLIC DOG PROFILE */
.prof-top{display:flex;align-items:center;gap:20px;padding:18px 16px 12px}
.prof-av{width:86px;height:86px;border-radius:50%;overflow:hidden;flex-shrink:0;border:3px solid var(--primary);background:var(--border)}
.prof-av img{width:100%;height:100%;object-fit:cover;display:block}
.prof-stats{flex:1;display:flex;justify-content:space-around;text-align:center}
.prof-stat-n{font-size:20px;font-weight:800}
.prof-stat-l{font-size:13px;color:var(--text2);margin-top:1px}
.prof-rel-hint{margin:6px 16px 0;font-size:12.5px;line-height:1.5;color:var(--text2)}
.prof-meta{padding:0 16px}
.prof-name{font-size:18px;font-weight:700}
.prof-breed{font-size:14px;color:var(--primary-ink);font-weight:600;margin-top:1px}
.prof-sub{font-size:14px;color:var(--text2);margin-top:3px;line-height:1.5}
.prof-bio{font-size:14px;line-height:1.55;margin-top:8px}
.prof-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.prof-acts{display:flex;gap:8px;padding:14px 16px 4px}
.prof-btn{flex:1;padding:9px;border-radius:var(--r-sm);font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;cursor:pointer;border:1.5px solid var(--border);background:var(--card);color:var(--text);transition:all .18s}
.prof-btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.prof-btn.primary.following{background:var(--card);border-color:var(--border);color:var(--text)}
.prof-btn:active{transform:scale(.97)}
.prof-tabbar{display:flex;border-top:1px solid var(--border);margin-top:16px}
.prof-tab{flex:1;padding:11px;text-align:center;font-size:17px;border-bottom:2px solid var(--primary);color:var(--primary-ink)}
.prof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding-bottom:20px}
.prof-cell{aspect-ratio:1;overflow:hidden;cursor:pointer;background:var(--border)}
.prof-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .15s}
.prof-cell:active img{opacity:.75}
.prof-empty{padding:44px 16px;text-align:center;color:var(--text2);font-size:15px}
/* Tappable identity affordances */
.p-av-dog,.p-dog,.reel-av,.reel-username,.story-av,.story-name,.mname,.mimg{cursor:pointer}

/* FAB */
.fab{position:fixed;bottom:calc(var(--nav) + 16px);right:16px;width:52px;height:52px;border-radius:50%;background:var(--primary);color:white;border:none;font-size:28px;cursor:pointer;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;z-index:50;transition:transform .2s}
.fab:active{transform:scale(.9)}

/* TOAST */
.toast{position:fixed;bottom:calc(var(--nav) + 18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(26px);opacity:0;background:rgba(26,26,46,.94);color:white;padding:11px 18px;border-radius:22px;font-size:15px;font-weight:500;line-height:1.4;z-index:2000;transition:transform .28s cubic-bezier(.34,1.4,.64,1),opacity .22s;width:max-content;max-width:min(340px,calc(100% - 40px));text-align:center;pointer-events:none;box-shadow:0 6px 22px rgba(0,0,0,.28)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
/* Actionable banner — distinct from the passive toast, and tappable */
.banner{position:fixed;bottom:calc(var(--nav) + 18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(30px);opacity:0;width:max-content;max-width:calc(100% - 32px);background:linear-gradient(135deg,var(--primary),#FF8C5A);color:#fff;padding:12px 20px;border-radius:26px;font-size:16px;font-weight:700;z-index:1990;cursor:pointer;box-shadow:0 8px 26px rgba(255,107,53,.42);transition:transform .3s cubic-bezier(.34,1.4,.64,1),opacity .22s;text-align:center}
.banner.show{transform:translateX(-50%) translateY(0);opacity:1}
/* keep the passive toast clear of an actionable banner */
.toast.above-banner{bottom:calc(var(--nav) + 76px + env(safe-area-inset-bottom))}
.btn-go.sent{background:var(--border);color:var(--text2)}
.btn-go.matched{background:linear-gradient(135deg,#2ECC71,#27AE60)}

/* divider */
.divider{height:8px;background:var(--bg)}

/* ══════════════════════════════════════
   DARK MODE
══════════════════════════════════════ */
[data-theme="dark"]{
  --bg:#0F0F1A;--card:#1A1A2E;--text:#F0F0FF;--text2:#9999BB;
  /* On dark surfaces the brand orange already reads well as text. */
  --primary-ink:#FF8250;
  --border:#2A2A42;--primary-light:#2A1A0F;--shadow:0 2px 16px rgba(0,0,0,.3);
  --shadow-lg:0 8px 32px rgba(0,0,0,.5);
}

/* ══════════════════════════════════════
   PANELS & OVERLAYS
══════════════════════════════════════ */
.panel{position:fixed;top:0;right:-100%;width:100%;max-width:430px;height:100%;background:var(--card);z-index:500;display:flex;flex-direction:column;transition:right .3s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 24px rgba(0,0,0,.18)}
.panel.open{right:0}
/* A closed slide-in panel must not be reachable by keyboard or screen reader. */
.panel:not(.open){visibility:hidden;pointer-events:none;transition:right .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s}
.panel.open{transition:right .3s cubic-bezier(.4,0,.2,1),visibility 0s}
/* Minimum comfortable tap target (WCAG 2.5.5) for small icon controls. */
button,.icon-btn,.panel-back,[role="button"]{min-height:44px;min-width:44px;-webkit-tap-highlight-color:transparent}
button{transition:transform .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease}
button:not(:disabled):active{transform:scale(.97)}
button.rec-doc-chip,button.chip,button.dir-tag,button.tag{min-height:32px;min-width:32px}

.panel-hdr{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 16px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--card)}
.panel-back{width:34px;height:34px;border-radius:50%;border:none;background:var(--primary-light);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--primary-ink)}
.panel-title{font-family:'Outfit',sans-serif;font-size:20px;font-weight:700;flex:1;color:var(--text)}
.panel-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.conv-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.conv-item:active{background:var(--primary-light)}
.conv-av{width:48px;height:48px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;position:relative}
.conv-badge{position:absolute;bottom:0;right:0;width:14px;height:14px;border-radius:50%;background:var(--green);border:2px solid var(--card)}
.conv-info{flex:1;min-width:0}
.conv-name{font-size:15px;font-weight:600;margin-bottom:2px;color:var(--text)}
.conv-last{font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.conv-time{font-size:12px;color:var(--text2)}
.conv-unread{width:18px;height:18px;border-radius:50%;background:var(--primary);color:white;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.chat-view{display:none;flex-direction:column;height:100%}
.chat-view.open{display:flex}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:75%;padding:10px 13px;border-radius:18px;font-size:15px;line-height:1.45}
.msg.them{background:var(--border);color:var(--text);border-bottom-left-radius:4px;align-self:flex-start}
.msg.me{background:var(--primary);color:white;border-bottom-right-radius:4px;align-self:flex-end}
.msg-time{font-size:12px;color:var(--text2);text-align:center;margin:4px 0}
.chat-input-row{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:var(--card);flex-shrink:0;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.chat-input{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:22px;font-family:'Poppins',sans-serif;font-size:15px;background:var(--bg);color:var(--text);outline:none}
.chat-input:focus{border-color:var(--primary)}
.chat-send{width:38px;height:38px;border-radius:50%;background:var(--primary);border:none;color:white;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.notif-panel{position:fixed;top:calc(-110%);left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:var(--card);z-index:600;border-radius:0 0 20px 20px;box-shadow:var(--shadow-lg);transition:top .35s cubic-bezier(.4,0,.2,1);max-height:80vh;overflow-y:auto}
.notif-panel.open{top:0}
.notif-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);z-index:1}
.notif-hdr-title{font-size:18px;font-weight:700;color:var(--text)}
.notif-close{border:none;background:var(--border);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:16px;color:var(--text)}
.notif-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);align-items:flex-start}
.notif-item.unread{background:var(--primary-light)}
.notif-ic{width:40px;height:40px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0}
.notif-text{flex:1;font-size:14px;line-height:1.5;color:var(--text)}
.notif-text strong{font-weight:600}
.notif-t{font-size:12px;color:var(--text2);margin-top:3px}
.notif-overlay{position:fixed;inset:0;z-index:590;display:none}
.notif-overlay.open{display:block}
.dim-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:490;display:none}
.dim-overlay.open{display:block}
.create-sheet{position:fixed;inset:0;z-index:700;display:none;align-items:flex-end;justify-content:center}
.create-sheet.open{display:flex}
.create-bg{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.create-box{background:var(--card);border-radius:24px 24px 0 0;width:100%;max-width:430px;padding:20px;padding-bottom:calc(20px + env(safe-area-inset-bottom));position:relative;z-index:1;max-height:90vh;overflow-y:auto}
.create-preview{width:100%;aspect-ratio:1;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:92px;margin-bottom:14px;cursor:pointer;position:relative;overflow:hidden;transition:opacity .2s}
.create-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.create-preview-emoji{position:relative;z-index:1;pointer-events:none}
.create-preview-hint{position:absolute;bottom:8px;z-index:2;font-size:13px;color:rgba(255,255,255,.9);background:rgba(0,0,0,.35);padding:3px 10px;border-radius:20px}
.create-preview-clear{position:absolute;top:8px;right:8px;z-index:3;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);color:white;border:none;font-size:16px;cursor:pointer;display:none;align-items:center;justify-content:center}
.post-media-btns{display:flex;gap:8px;margin-bottom:14px}
.post-media-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--bg);cursor:pointer;font-family:'Poppins',sans-serif;transition:all .15s}
.post-media-btn:active{transform:scale(.96)}
.post-media-btn.active{border-color:var(--primary);background:var(--primary-light)}
.post-media-btn-ic{font-size:25px}
.post-media-btn-lbl{font-size:12px;font-weight:600;color:var(--text2)}
.post-media-btn.active .post-media-btn-lbl{color:var(--primary-ink)}
.emoji-pick-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ep-opt{width:44px;height:44px;border-radius:10px;border:2px solid var(--border);background:var(--bg);font-size:25px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.ep-opt.sel{border-color:var(--primary);background:var(--primary-light)}
.create-caption{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:'Poppins',sans-serif;font-size:15px;background:var(--bg);color:var(--text);outline:none;resize:none;height:80px;line-height:1.5;margin-bottom:14px}
.create-caption:focus{border-color:var(--primary)}
.create-loc{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:'Poppins',sans-serif;font-size:15px;background:var(--bg);color:var(--text);outline:none;margin-bottom:16px}
.create-loc:focus{border-color:var(--primary)}
.story-viewer{position:fixed;inset:0;z-index:800;background:#000;display:none;flex-direction:column}
.story-viewer.open{display:flex}
.story-progress{display:flex;gap:4px;padding:12px 12px 8px;flex-shrink:0}
.story-seg{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.story-fill{height:100%;background:white;width:0%;transition:width linear}
.story-top{display:flex;align-items:center;gap:10px;padding:0 12px 8px;flex-shrink:0}
.story-av{width:36px;height:36px;border-radius:50%;border:2px solid white;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:23px}
.story-name{font-size:16px;font-weight:600;color:white;flex:1}
.story-close{color:white;font-size:28px;background:none;border:none;cursor:pointer;padding:4px}
.story-content{flex:1;display:flex;align-items:center;justify-content:center;font-size:138px;position:relative}
.story-caption{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:white;font-size:16px;font-weight:500;padding:0 20px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.comments-sheet{position:fixed;inset:0;z-index:700;display:none;align-items:flex-end;justify-content:center}
.comments-sheet.open{display:flex}
.comments-bg{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.comments-box{background:var(--card);border-radius:24px 24px 0 0;width:100%;max-width:430px;max-height:85vh;display:flex;flex-direction:column;position:relative;z-index:1}
.comments-list{flex:1;overflow-y:auto;padding:0 16px}
.comment-item{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--border)}
.c-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.c-av{width:34px;height:34px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;overflow:hidden}
.c-body{flex:1}
.c-name{font-size:14px;font-weight:600;margin-bottom:2px;color:var(--text)}
.c-text{font-size:14px;color:var(--text);line-height:1.45}
.c-time{font-size:12px;color:var(--text2);margin-top:3px}
.comment-input-row{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border);flex-shrink:0;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.comment-input{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:22px;font-family:'Poppins',sans-serif;font-size:15px;background:var(--bg);color:var(--text);outline:none}
.comment-input:focus{border-color:var(--primary)}
.comment-send{width:36px;height:36px;border-radius:50%;background:var(--primary);border:none;color:white;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mcard{transition:transform .25s,opacity .25s;position:relative}
.swipe-hint{position:absolute;top:16px;padding:4px 12px;border-radius:20px;font-size:18px;font-weight:800;border:3px solid;opacity:0;transition:opacity .15s;pointer-events:none;z-index:2;background:rgba(0,0,0,.25);backdrop-filter:blur(4px)}
.swipe-nope{color:#E74C3C;border-color:#E74C3C;left:16px;transform:rotate(-12deg)}
.swipe-like{color:#2ECC71;border-color:#2ECC71;right:16px;transform:rotate(12deg)}
.swipe-super{color:#3498DB;border-color:#3498DB;left:50%;margin-left:-46px;top:auto;bottom:18px;transform:none}
/* Tinder-style deck */
#mate-deck{position:relative;margin-bottom:14px;touch-action:pan-y}
#mate-deck .mcard{position:absolute;inset:0;margin:0;will-change:transform;display:flex;flex-direction:column}
#mate-deck .mcard .mimg{flex:1;aspect-ratio:auto;min-height:0}
#mate-deck .mcard.gone{display:none!important}
#mate-deck .mcard:not(.top){pointer-events:none}
#mate-deck .mcard.dragging{transition:none}
.deck-empty{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:30px 20px;text-align:center}
.deck-empty .de-emoji{font-size:51px}
.deck-empty .de-t{font-weight:700;margin:8px 0 4px}
.deck-empty .de-s{font-size:14px;color:var(--text2);margin-bottom:14px}
.deck-bar{display:flex;align-items:center;justify-content:center;gap:14px;padding:2px 0 6px}
.deck-btn{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--border);background:var(--card);box-shadow:var(--shadow);font-size:25px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.deck-btn:active{transform:scale(.9)}
.deck-btn.sm{width:44px;height:44px;font-size:18px}
.deck-btn.pass{color:#E74C3C}
.deck-btn.like{color:#E91E63}
.deck-btn.super{color:#3498DB}
.deck-btn[disabled]{opacity:.4;cursor:default}
.deck-count{text-align:center;font-size:13px;color:var(--text2);margin-bottom:8px}

@keyframes heartBurst{0%{transform:scale(0) rotate(-15deg);opacity:1}50%{transform:scale(1.5) rotate(5deg);opacity:1}100%{transform:scale(1) rotate(0deg);opacity:0}}
.heart-burst{position:fixed;pointer-events:none;font-size:69px;z-index:9000;animation:heartBurst .7s ease forwards}
/* add-dog modal */
.add-dog-modal{position:fixed;inset:0;z-index:700;display:none;align-items:flex-end;justify-content:center}
.add-dog-modal.open{display:flex}

/* ══════════════════════════════════════
   CO-OWNER
══════════════════════════════════════ */
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
/* Two-avatar display in My Pack */
.dual-av{display:flex;align-items:center;flex-shrink:0}
.dual-av .av1,.dual-av .av2{width:52px;height:52px;border-radius:50%;border:3px solid rgba(255,255,255,.7);background:rgba(255,255,255,.25);font-size:28px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dual-av .av2{margin-left:-16px}
.owner-names{font-size:18px;font-weight:700;line-height:1.25}
.owner-sub{font-size:13px;opacity:.8;margin-top:2px}

/* ══════════════════════════════════════
   TERMS & CONDITIONS MODAL
══════════════════════════════════════ */
.legal-modal{position:fixed;inset:0;z-index:1500;background:var(--card);display:none;flex-direction:column;max-width:430px;left:50%;transform:translateX(-50%)}
.legal-modal.open{display:flex}
.legal-hdr{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--primary);color:white}
.legal-hdr-title{font-size:17px;font-weight:700;flex:1}
.legal-close{background:rgba(255,255,255,.2);border:none;color:white;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:18px}
.legal-body{flex:1;overflow-y:auto;padding:20px;-webkit-overflow-scrolling:touch}
.legal-body h2{font-size:18px;font-weight:700;margin:0 0 4px;color:var(--primary-ink)}
.legal-body h3{font-size:15px;font-weight:700;margin:18px 0 6px;color:var(--text)}
.legal-body p{font-size:14px;color:var(--text2);line-height:1.65;margin-bottom:10px}
.legal-body ul{margin:0 0 10px 16px}
.legal-body li{font-size:14px;color:var(--text2);line-height:1.65;margin-bottom:4px}
.legal-date{font-size:13px;color:var(--text2);margin-bottom:20px}
.legal-footer{padding:14px 16px;border-top:1px solid var(--border);flex-shrink:0;background:var(--card)}

/* Post options sheet */
.post-opt{display:flex;align-items:center;gap:14px;padding:15px 4px;border:none;background:none;width:100%;text-align:left;font-family:'Poppins',sans-serif;font-size:16px;font-weight:500;color:var(--text);cursor:pointer;border-bottom:1px solid var(--border)}
.post-opt:last-child{border-bottom:none}
.post-opt-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
.post-opt.danger{color:var(--red)}
.post-opt.danger .post-opt-ic{background:#FDDCDC}

/* Multi-dog form cards */
.dog-form-card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin-bottom:16px;border:1.5px solid var(--border)}
.dog-form-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dog-form-num{font-size:16px;font-weight:700;color:var(--primary-ink)}
.dog-form-remove{background:var(--border);border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:16px;color:var(--text2);display:flex;align-items:center;justify-content:center;transition:background .2s}
.dog-form-remove:hover{background:#FDDCDC;color:var(--red)}

/* Day chips (availability) */
.day-chip{display:flex;align-items:center;cursor:pointer}
.day-chip input{display:none}
.day-chip span{padding:6px 12px;border-radius:20px;border:1.5px solid var(--border);background:var(--card);font-size:14px;font-weight:500;color:var(--text2);transition:all .2s;user-select:none}
.day-chip input:checked+span{background:var(--primary);border-color:var(--primary);color:white}

/* Agreement checkboxes */
.agree-box{background:var(--bg);border-radius:var(--r-sm);padding:14px;margin:14px 0 6px;border:1.5px solid var(--border);transition:border-color .2s}
.agree-box.agreed{border-color:var(--green);background:#E8F8F0}
.agree-row{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.agree-check{width:20px;height:20px;accent-color:var(--primary);cursor:pointer;flex-shrink:0;margin-top:1px}
.agree-text{font-size:14px;color:var(--text);line-height:1.5}
.agree-text a{color:var(--primary-ink);font-weight:600;text-decoration:underline;cursor:pointer}
.agree-err{font-size:13px;color:var(--red);margin-top:6px;display:none;padding-left:32px}
.agree-err.show{display:block}
.scroll-prompt{font-size:13px;color:var(--text2);text-align:center;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:4px}
.scroll-prompt.hidden{display:none}

/* ══════════════════════════════════════
   AUTH GATE
══════════════════════════════════════ */
#auth-gate{position:fixed;inset:0;z-index:9999;display:flex;min-width:0;height:100vh;height:100dvh;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(160deg,#FF6B35 0%,#FF8C5A 50%,#FFB347 100%)}
.auth-screen{display:none;width:100%;height:100%;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.auth-screen.active{display:flex}
/* While the cookie card sits at the bottom it must not cover the last controls
   on the sign-in and registration screens. */
body.pp-consent-on .auth-screen{padding-bottom:190px}
body.pp-install-on #signin,body.pp-install-on #register,body.pp-install-on #auth-welcome{padding-bottom:280px}
body.pp-install-on.pp-consent-on #signin,body.pp-install-on.pp-consent-on #register,body.pp-install-on.pp-consent-on #auth-welcome{padding-bottom:400px}
body.pp-consent-on .screen{padding-bottom:150px}
body.pp-consent-above-nav #pp-consent{bottom:calc(var(--nav) + env(safe-area-inset-bottom))}
body.pp-consent-above-nav #pp-consent-chip{bottom:calc(var(--nav) + 12px + env(safe-area-inset-bottom))}

/* SPLASH */
#splash{align-items:center;justify-content:center;gap:12px;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));overflow:hidden;background:linear-gradient(160deg,#FF6B35,#FF8C5A,#FFB347);text-align:center}
.splash-paw{font-size:83px;animation:bounce 1s ease infinite alternate}
.splash-paw img{width:80px;height:80px;max-width:22vw;max-height:22vw}
@keyframes bounce{from{transform:translateY(0) scale(1)}to{transform:translateY(-14px) scale(1.07)}}
.splash-title{font-size:41px;font-weight:800;color:white;letter-spacing:0}
.splash-sub{width:100%;max-width:340px;font-size:16px;color:rgba(255,255,255,.88);font-weight:400;line-height:1.55;text-wrap:balance}
.splash-sub .link-btn{max-width:100%;white-space:normal;line-height:1.4}
.splash-dots{display:flex;gap:8px;margin-top:20px}
.splash-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4)}
.splash-dot.on{background:white;width:24px;border-radius:4px;transition:all .3s}
@media (max-width:420px),(max-height:700px){
  #splash{gap:9px}
  .splash-paw img{width:68px;height:68px}
  .splash-title{font-size:36px}
  .splash-sub{font-size:15px;line-height:1.45}
  .splash-dots{margin-top:10px}
  #splash>button{margin-top:18px!important;width:min(100%,300px);padding:13px 24px!important}
  #splash>div:last-child{margin-top:7px!important;font-size:13px!important}
}

/* SIGN-IN */
#signin{background:var(--bg)}
.auth-hero{background:linear-gradient(135deg,#FF6B35,#FF8C5A);padding:40px 24px 32px;text-align:center;color:white}
.auth-logo{font-size:32px;font-weight:800;letter-spacing:-0.5px;margin-bottom:4px}
.auth-logo span{color:rgba(255,255,255,.7)}
.auth-tagline{font-size:15px;opacity:.85}
.auth-form{background:var(--card);border-radius:24px 24px 0 0;margin-top:-18px;padding:28px 24px;flex:1}
.auth-form-title{font-size:23px;font-weight:700;margin-bottom:4px}
.auth-form-sub{font-size:14px;color:var(--text2);margin-bottom:22px}
.auth-value{display:flex;flex-direction:column;gap:8px;margin:-8px 0 20px;padding:14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--primary-light);color:var(--text);font-size:13px;line-height:1.45}
.auth-value strong{font-size:14px;color:var(--primary-ink)}
.auth-value-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.auth-value-grid span{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text2);font-weight:600}
.auth-value-grid b{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:var(--card);color:var(--accent);font-size:12px}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--text2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:'Poppins',sans-serif;font-size:16px;color:var(--text);background:var(--bg);outline:none;transition:border-color .2s;-webkit-appearance:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);background:var(--card);color:var(--text)}
.field textarea{resize:none;height:80px;line-height:1.5}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field.err input,.field.err select{border-color:var(--red)}
.err-msg{font-size:13px;color:var(--red);margin-top:4px;display:none}
.field.err .err-msg{display:block}
.de-f.err .err-msg{display:block}
.photo-status{display:none;margin:8px 0 12px;padding:9px 11px;border-radius:var(--r-sm);background:var(--primary-light);color:var(--primary-ink);font-size:13px;line-height:1.4}
.photo-status.show{display:block}
.live-camera-retry{margin-top:12px;min-height:44px;padding:10px 16px;border:0;border-radius:var(--r-sm);background:var(--card);color:var(--primary-ink);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
.panel-back-labelled{width:auto;padding:0 10px;gap:5px;border-radius:999px;font-size:14px;font-weight:700}
.panel-back-labelled span{display:inline}
button[disabled]{opacity:.6;cursor:not-allowed}
.auth-msg{display:none;margin:0 0 14px;padding:12px 14px;border-radius:12px;font-size:15px;line-height:1.45;font-weight:500}
.auth-msg.show{display:block}
.auth-msg.error{background:rgba(239,68,68,.12);color:#b91c1c;border:1px solid rgba(239,68,68,.28)}
.auth-msg.success{background:rgba(34,197,94,.12);color:#15803d;border:1px solid rgba(34,197,94,.28)}
.auth-msg.info{background:rgba(255,107,53,.12);color:#c2410c;border:1px solid rgba(255,107,53,.28)}
.auth-msg .auth-msg-act{display:inline-block;margin-top:8px;font-weight:700;text-decoration:underline;cursor:pointer}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-family:'Figtree',sans-serif;font-size:12px;font-weight:700;color:var(--primary-ink);min-width:48px}
.pw-toggle:active{transform:translateY(-50%) scale(.94)}
.btn-primary{width:100%;padding:15px;border-radius:var(--r-sm);border:none;background:var(--primary);color:white;font-family:'Figtree',sans-serif;font-size:17px;font-weight:700;cursor:pointer;transition:transform .16s,box-shadow .16s,background-color .16s;box-shadow:0 5px 16px color-mix(in srgb,var(--primary) 32%,transparent)}
.btn-primary:active{transform:scale(.98)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}
.auth-switch{text-align:center;margin-top:18px;font-size:15px;color:var(--text2)}
.auth-switch a{color:var(--primary-ink);font-weight:600;cursor:pointer;text-decoration:none}
.divider-or{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--text2);font-size:14px}
.divider-or::before,.divider-or::after{content:'';flex:1;height:1px;background:var(--border)}

/* REGISTER */
#register{background:var(--bg)}
.reg-hdr{background:linear-gradient(135deg,#FF6B35,#FF8C5A);padding:20px 20px 16px;color:white;display:flex;align-items:center;gap:10px;flex-shrink:0}
.reg-back{background:rgba(255,255,255,.25);border:none;color:white;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:21px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.reg-hdr-text{flex:1}
.reg-hdr-title{font-size:18px;font-weight:700}
.reg-hdr-step{font-size:13px;opacity:.8}
.step-bar{display:flex;gap:6px;padding:0 20px;margin-top:12px}
.step-seg{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.35);transition:background .3s}
.step-seg.done{background:white}
.reg-body{flex:1;overflow-y:auto;padding:20px}
.reg-section-title{font-size:18px;font-weight:700;margin-bottom:4px}
.reg-section-sub{font-size:14px;color:var(--text2);margin-bottom:20px}

/* Avatar picker */
.avatar-picker{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.av-opt{width:50px;height:50px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:30px;cursor:pointer;border:2.5px solid transparent;transition:all .2s}
.av-opt.sel{border-color:var(--primary);background:var(--primary-light)}

/* Gender toggle */
.gender-row{display:flex;gap:10px}
.gender-btn{flex:1;padding:11px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--card);font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;color:var(--text2);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}
.gender-btn.sel{background:var(--primary-light);border-color:var(--primary);color:var(--primary-ink)}

/* Vaccine checkboxes */
.vacc-checks{display:flex;flex-direction:column;gap:10px}
.vacc-check{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border-radius:var(--r-sm);box-shadow:var(--shadow);cursor:pointer}
.vacc-check input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}
.vacc-check-label{font-size:15px;font-weight:500}
.vacc-check-date{font-size:13px;color:var(--text2);margin-left:auto}

/* Looking-for toggle */
.toggle-row{display:flex;align-items:center;justify-content:space-between;background:var(--card);padding:14px;border-radius:var(--r-sm);box-shadow:var(--shadow);margin-bottom:10px}
.toggle-lbl{font-size:15px;font-weight:500}
.toggle-sub{font-size:13px;color:var(--text2)}
.toggle-sw{position:relative;width:44px;height:24px;flex-shrink:0}
.toggle-sw input{opacity:0;width:0;height:0}
.toggle-sw .slider{position:absolute;inset:0;background:var(--border);border-radius:12px;cursor:pointer;transition:.3s}
.toggle-sw .slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:white;border-radius:50%;transition:.3s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.toggle-sw input:checked+.slider{background:var(--primary)}
.toggle-sw input:checked+.slider::before{transform:translateX(20px)}
/* Div-based toggle knob */
.toggle-knob{width:44px;height:24px;background:var(--border);border-radius:12px;position:relative;transition:background .25s;flex-shrink:0}
.toggle-knob::after{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:white;border-radius:50%;transition:transform .25s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.toggle-knob.on{background:var(--primary)}
.toggle-knob.on::after{transform:translateX(20px)}

/* Welcome screen */
#auth-welcome{background:linear-gradient(160deg,#FF6B35,#FF8C5A,#FFB347);align-items:center;justify-content:center;text-align:center;padding:32px;gap:14px;color:white}
.welcome-icon{font-size:80px;animation:bounce 1s ease infinite alternate}
.welcome-title{font-size:30px;font-weight:800}
.welcome-msg{font-size:16px;opacity:.85;line-height:1.6;max-width:280px}
.btn-white{padding:15px 40px;border-radius:var(--r-sm);border:none;background:white;color:var(--primary-ink);font-family:'Poppins',sans-serif;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.15);margin-top:10px}
.install-card{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:940;background:var(--card);color:var(--text);border:1px solid var(--border);box-shadow:0 14px 40px rgba(36,53,46,.22);border-radius:var(--r);padding:18px 16px;margin-top:0;max-width:340px;width:calc(100% - 40px);display:none;flex-direction:column;align-items:center;gap:10px;text-align:center}
body.pp-consent-on .install-card{bottom:calc(210px + env(safe-area-inset-bottom))}
.install-card.show{display:flex}
.install-icon{font-size:41px}
.install-title{font-size:20px;font-weight:700}
.install-text{font-size:14px;color:var(--text2);line-height:1.5}
.btn-install{padding:12px 28px;border-radius:var(--r-sm);border:none;background:var(--primary);color:var(--on-primary);font-family:'Poppins',sans-serif;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px color-mix(in srgb,var(--primary) 30%,transparent);width:100%;min-height:48px}
.btn-install-skip{padding:8px 16px;border:none;background:transparent;color:var(--text2);font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;cursor:pointer}
.btn-install-disable{padding:6px 16px;border:none;background:transparent;color:var(--text2);font-family:'Poppins',sans-serif;font-size:12px;font-weight:500;cursor:pointer;text-decoration:underline;opacity:.75}
.btn-install-disable:hover{opacity:1}
@media (min-width:768px){
  #auth-gate{width:100%;max-width:430px;left:50%;transform:translateX(-50%)}
}


/* ══════════════════════════════════════
   REELS
══════════════════════════════════════ */
#s-reels{padding-bottom:0;background:#000;overflow:hidden}
/* Immersive mode: reels take the whole app surface */
#app.reels-immersive #hdr,#app.reels-immersive #nav{display:none}
.reels-container{height:100%;overflow-y:scroll;overflow-x:hidden;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;display:flex;flex-direction:column;touch-action:pan-y}
.reels-container::-webkit-scrollbar{display:none}
.reel{height:100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.reel-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#111;transition:opacity .35s ease,transform 6s ease-out;transform:scale(1.04)}
.reel.playing .reel-bg{transform:scale(1.12)}
.reel-emoji{font-size:150px;animation:reelFloat 3s ease-in-out infinite alternate;transition:opacity .3s}
@keyframes reelFloat{from{transform:translateY(0) scale(1)}to{transform:translateY(-22px) scale(1.12)}}
@keyframes reelSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes reelBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-28px)}}
@keyframes reelWiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes reelPop{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
/* Top chrome: back / title / create */
.reels-topbar{position:absolute;top:0;left:0;right:0;z-index:60;padding:calc(env(safe-area-inset-top) + 10px) 14px 8px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);pointer-events:none}
.reels-topbar > *{pointer-events:all}
.reels-title{flex:1;text-align:center;color:#fff;font-size:17px;font-weight:800;letter-spacing:.3px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.reel-round{width:44px;height:44px;border-radius:50%;border:none;background:transparent;color:#fff;font-size:21px;cursor:pointer;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7));transition:transform .15s;flex-shrink:0}
.reel-round:active{transform:scale(.9)}
.reel-round.primary{background:var(--primary);box-shadow:0 4px 16px rgba(255,107,53,.5)}
/* Scene progress bar */
.reel-progress{position:absolute;top:calc(env(safe-area-inset-top) + 58px);left:14px;right:14px;display:flex;gap:4px;z-index:55;pointer-events:none}
.rp-seg{flex:1;height:3px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden}
.rp-fill{height:100%;background:#fff;width:0%;border-radius:2px}
/* Tap zones for scene navigation */
.reel-tap-zone{position:absolute;inset:0;z-index:3;pointer-events:none}
.reel-tap-prev{position:absolute;left:0;top:70px;bottom:190px;width:35%;pointer-events:all;cursor:pointer;touch-action:pan-y}
.reel-tap-next{position:absolute;right:70px;top:70px;bottom:190px;width:45%;pointer-events:all;cursor:pointer;touch-action:pan-y}
/* Scene counter pill */
.reel-scene-pill{position:absolute;top:calc(env(safe-area-inset-top) + 70px);right:14px;z-index:55;display:inline-flex;align-items:center;gap:4px;background:rgba(0,0,0,.45);border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600;color:rgba(255,255,255,.9);backdrop-filter:blur(6px)}
.reel-paused-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);z-index:56;font-size:53px;color:#fff;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;text-shadow:0 4px 18px rgba(0,0,0,.55)}
.reel.paused .reel-paused-badge{opacity:.92;transform:translate(-50%,-50%) scale(1)}
.reel-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 26%,rgba(0,0,0,.1) 58%,rgba(0,0,0,.25) 100%)}
.reel-bottom{position:absolute;bottom:0;left:0;right:76px;padding:16px 16px calc(env(safe-area-inset-bottom) + 28px);color:white;z-index:4}
.reel-user{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.reel-av{width:38px;height:38px;border-radius:50%;border:2px solid white;display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0;overflow:hidden;background:rgba(255,255,255,.15)}
.reel-username{font-size:16px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.reel-follow-btn{border:1.5px solid white;background:transparent;color:white;padding:5px 14px;border-radius:20px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Poppins',sans-serif;margin-left:2px;transition:all .2s}
.reel-follow-btn.following{background:var(--primary);border-color:var(--primary)}
.reel-caption{font-size:16px;line-height:1.5;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.reel-caption.expanded{-webkit-line-clamp:unset;display:block}
.reel-tags{font-size:14px;font-weight:600;color:rgba(255,255,255,.92);margin-bottom:10px}
.reel-music{font-size:13px;display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.35);border-radius:20px;padding:5px 11px;max-width:100%;backdrop-filter:blur(6px)}
.reel-music-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reel-music-disc{display:inline-flex;align-items:center;justify-content:center}
.reel-music-disc .ui-icon{width:16px;height:16px}
.reel-actions{position:absolute;right:6px;bottom:calc(env(safe-area-inset-bottom) + 18px);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:5;width:60px}
.reel-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:60px;min-width:60px;height:52px;min-height:52px;color:white;cursor:pointer;border:none;background:transparent;font-size:28px;line-height:1;padding:0;transition:transform .15s;position:relative;z-index:5;filter:drop-shadow(0 1px 3px rgba(0,0,0,.8))}
.reel-btn .bi,.reel-btn > span:first-child{width:40px;height:36px;min-width:40px;flex-shrink:0;border-radius:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;backdrop-filter:none}
.reel-btn .bi .ui-icon{width:30px;height:30px;stroke-width:2}
.reel-btn:active{transform:scale(.85)}
.reel-btn-lbl{font-size:12px;font-weight:700;color:white;font-family:'Figtree',sans-serif;text-shadow:0 1px 4px rgba(0,0,0,.85);width:60px;text-align:center;white-space:nowrap;line-height:1}
.reel-btn-icon-only{height:44px;min-height:44px}
.reel-btn.liked{color:#E74C3C}
/* Swipe-up hint on first reel */
.reel-hint{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 10px);transition:opacity .3s;left:0;right:0;text-align:center;font-size:12px;font-weight:600;color:rgba(255,255,255,.75);z-index:6;animation:reelHint 2.2s ease-in-out infinite;pointer-events:none}
@keyframes reelHint{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(-6px);opacity:1}}

/* New Reel creation sheet */
.reel-scenes-block{position:relative;isolation:isolate;background:var(--card);padding:2px 0 14px;border-bottom:1px solid var(--border)}
.reel-scenes-heading{padding:0 16px 7px;font-size:14px;font-weight:600;color:var(--text2)}
.reel-scene-strip{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:4px 16px 6px;min-height:120px;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative;background:var(--card)}
.reel-scene-strip::-webkit-scrollbar{display:none}
.reel-scene-thumb{min-width:80px;height:110px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;border:2px solid var(--border);position:relative;flex-shrink:0;font-size:37px;transition:border-color .2s}
.reel-scene-thumb.sel{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-light)}
.reel-scene-remove{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.55);color:white;border:none;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;line-height:1}
.reel-scene-add{min-width:80px;height:110px;border-radius:12px;border:2px dashed var(--primary);background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:32px;cursor:pointer;flex-shrink:0;color:var(--primary-ink);transition:background .2s}
.reel-scene-add:active{background:var(--border)}
.reel-sc-lbl{font-size:10px;font-weight:600;color:var(--text2)}
.reel-colors{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.reel-col-opt{width:32px;height:32px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:border-color .15s;flex-shrink:0}
.reel-col-opt.sel{border-color:var(--text)}
.reel-music-pick{display:flex;flex-direction:column;gap:6px;max-height:140px;overflow-y:auto;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:6px}
.reel-music-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:15px;transition:background .15s}
.reel-music-opt.sel{background:var(--primary-light);color:var(--primary-ink);font-weight:600}
.reel-music-opt:active{background:var(--border)}
.reel-scene-editor{position:relative;isolation:isolate;padding:16px;background:var(--card)}
.reel-emoji-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;margin-bottom:12px;max-height:96px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px}

/* ══════════════════════════════════════
   SEARCH
══════════════════════════════════════ */
#s-search{padding-bottom:0}
.search-bar-wrap{padding:10px 16px;position:sticky;top:0;background:var(--card);z-index:10;border-bottom:1px solid var(--border)}
.search-bar{display:flex;align-items:center;gap:10px;background:var(--bg);border:1.5px solid var(--border);border-radius:22px;padding:10px 14px;transition:border-color .2s}
.search-bar:focus-within{border-color:var(--primary)}
.search-bar input{flex:1;border:none;background:transparent;font-family:'Poppins',sans-serif;font-size:16px;color:var(--text);outline:none}
.search-clr{background:none;border:none;color:var(--text2);cursor:pointer;font-size:18px;padding:0;display:none}
.breed-tags{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
.breed-tag{padding:6px 14px;background:var(--card);border:1.5px solid var(--border);border-radius:20px;font-size:14px;font-weight:500;cursor:pointer;color:var(--text);transition:all .2s;white-space:nowrap}
.breed-tag:active{background:var(--primary-light);border-color:var(--primary);color:var(--primary-ink)}
.search-user-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.search-user-item:active{background:var(--primary-light)}
.search-av{width:48px;height:48px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
.search-info{flex:1;min-width:0}
.search-name{font-size:16px;font-weight:600;color:var(--text)}
.search-sub{font-size:14px;color:var(--text2)}
.dir-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.dir-tag{font-size:12px;line-height:1;padding:5px 9px;border-radius:999px;background:var(--card2,#f4f1ee);color:var(--text2);border:1px solid rgba(0,0,0,.06);white-space:nowrap}
.follow-btn{padding:7px 16px;border-radius:20px;border:1.5px solid var(--primary);background:var(--primary);color:white;font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .2s}
.follow-btn.following{background:transparent;color:var(--primary-ink)}

/* ══════════════════════════════════════
   NOTIFICATIONS (full screen)
══════════════════════════════════════ */
#s-notifications{padding-bottom:0}
.notif-s-hdr{padding:16px;font-size:21px;font-weight:700;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);z-index:10}
.notif-sec-lbl{padding:12px 16px 6px;font-size:14px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;background:var(--bg)}
.notif-fi{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);transition:background .15s}
.notif-fi.unread{background:var(--primary-light)}
.notif-fi-av{width:46px;height:46px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;position:relative}
.notif-type-dot{position:absolute;bottom:-1px;right:-1px;width:18px;height:18px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:10px;border:2px solid var(--card)}
.notif-fi-body{flex:1;min-width:0}
.notif-fi-text{font-size:15px;line-height:1.45;color:var(--text)}
.notif-fi-text strong{font-weight:600}
.notif-fi-time{font-size:13px;color:var(--text2);margin-top:2px}
.notif-fi-btns{display:flex;gap:8px;margin-top:7px}
.notif-accept{padding:6px 18px;border-radius:20px;background:var(--primary);color:white;border:none;font-size:14px;font-weight:700;cursor:pointer;font-family:'Poppins',sans-serif}
.notif-decline{padding:6px 18px;border-radius:20px;background:var(--border);color:var(--text);border:none;font-size:14px;font-weight:600;cursor:pointer;font-family:'Poppins',sans-serif}
.notif-thumb{width:44px;height:44px;border-radius:8px;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;margin-left:auto}
.nav-badge{position:absolute;top:4px;right:calc(50% - 18px);width:8px;height:8px;background:var(--red);border-radius:50%;border:2px solid var(--card);display:none}
.nav-badge.show{display:block}

/* ══════════════════════════════════════
   FOLLOW BUTTON (in feed)
══════════════════════════════════════ */
.p-follow{font-size:14px;font-weight:600;color:var(--primary-ink);background:none;border:none;cursor:pointer;padding:0 0 0 6px;font-family:'Poppins',sans-serif;white-space:nowrap}
.p-follow.following{color:var(--text2)}

/* ══════════════════════════════════════
   PHOTO UPLOAD (dog registration)
══════════════════════════════════════ */
.dog-photo-pick{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:14px}
.dog-photo-preview{width:80px;height:80px;border-radius:50%;border:3px solid var(--primary);display:flex;align-items:center;justify-content:center;font-size:41px;background:var(--primary-light);cursor:pointer;overflow:hidden;position:relative;flex-shrink:0}
.dog-photo-preview img{width:100%;height:100%;object-fit:cover}
.dog-photo-opts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.dog-photo-btn{padding:6px 12px;border-radius:20px;background:var(--card);border:1.5px solid var(--border);font-size:14px;font-weight:500;cursor:pointer;font-family:'Poppins',sans-serif;color:var(--text);display:flex;align-items:center;gap:5px;transition:all .2s}
.dog-photo-btn:active{background:var(--primary-light);border-color:var(--primary);color:var(--primary-ink)}
.notif-fi-av img,.notif-thumb img,.search-av img,.notif-ic img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ── Following bar label ── */
.following-hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 6px;background:var(--card)}
.following-hdr-title{font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;color:var(--text);text-transform:none;letter-spacing:0}
.following-hdr-link{font-size:13px;color:var(--primary-ink);font-weight:600;cursor:pointer}

/* ── Create menu overlay ── */
.create-menu-ov{position:fixed;inset:0;z-index:750;background:color-mix(in srgb,var(--text) 52%,transparent);display:none;align-items:flex-end;justify-content:center}
.create-menu-ov.open{display:flex}
.create-menu-sheet{background:var(--card);border-radius:24px 24px 0 0;padding:16px 20px calc(28px + env(safe-area-inset-bottom));width:100%;max-width:430px}
.cm-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 18px}
.cm-title{font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;color:var(--text);text-align:left;margin:0 2px 14px;letter-spacing:0}
.cm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cm-item{min-height:76px;border:1px solid var(--border);border-radius:var(--r);padding:12px;cursor:pointer;display:flex;align-items:center;gap:11px;background:var(--card);color:var(--text);text-align:left;transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease}
.cm-item:hover{background:var(--primary-light);border-color:var(--primary)}
.cm-item:active{transform:scale(.97);box-shadow:none}
.cm-icon{width:42px;height:42px;border-radius:50%;background:var(--primary-light);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:0 0 42px}
.cm-icon .ui-icon{width:22px;height:22px;stroke-width:2}
.cm-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.cm-label{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;color:var(--text);line-height:1.2}
.cm-sub{font-family:'Figtree',sans-serif;font-size:12px;line-height:1.3;color:var(--text2);text-align:left}
@media (max-width:360px){.cm-grid{grid-template-columns:1fr}.cm-item:last-child{grid-column:auto}}

/* ═══════════════ LIVE ═══════════════ */
#live-overlay{position:fixed;inset:0;z-index:4000;display:none;flex-direction:column;max-width:430px;margin:0 auto;background:#0b0b14;color:#fff;overflow:hidden}
#live-overlay.on{display:flex}
#live-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:#0b0b14}
.live-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(160deg,#2b1b4d,#c2410c 70%,#FF6B35);text-align:center;padding:24px}
.live-fallback .lf-emoji{font-size:71px}
.live-fallback .lf-txt{font-size:15px;opacity:.85;max-width:240px;line-height:1.5}
.live-scrim-top{position:absolute;left:0;right:0;top:0;height:190px;background:linear-gradient(180deg,rgba(0,0,0,.65),transparent);pointer-events:none}
.live-scrim-bot{position:absolute;left:0;right:0;bottom:0;height:300px;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);pointer-events:none}
.live-top{position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;right:12px;display:flex;align-items:center;gap:8px;z-index:5}
.live-badge{display:flex;align-items:center;gap:6px;background:var(--red);padding:6px 10px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.5px}
.live-dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:livePulse 1.1s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.25}}
.live-chip{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);padding:6px 10px;border-radius:999px;font-size:14px;font-weight:700}
.live-x{margin-left:auto;width:34px;height:34px;border-radius:50%;border:none;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);color:#fff;font-size:17px;cursor:pointer}
.live-host{position:absolute;top:calc(58px + env(safe-area-inset-top));left:12px;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.38);backdrop-filter:blur(8px);padding:5px 12px 5px 6px;border-radius:999px;z-index:5;font-size:14px;font-weight:700}
.live-host .lh-av{width:26px;height:26px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:15px}
.live-chat{position:absolute;left:12px;right:76px;bottom:74px;max-height:44%;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;z-index:5}
.lc-msg{background:rgba(0,0,0,.4);backdrop-filter:blur(6px);padding:6px 10px;border-radius:12px;font-size:14px;line-height:1.4;align-self:flex-start;max-width:100%;animation:lcIn .28s ease}
.lc-msg b{color:var(--accent);font-weight:700;margin-right:5px}
.lc-msg.sys{background:rgba(255,107,53,.28);color:#ffe4d6;font-weight:600}
@keyframes lcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.live-bar{position:absolute;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;z-index:6}
.live-bar input{flex:1;min-width:0;padding:11px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.4);backdrop-filter:blur(8px);color:#fff;font-family:'Poppins',sans-serif;font-size:15px;outline:none}
.live-bar input::placeholder{color:rgba(255,255,255,.6)}
.live-round{width:42px;height:42px;flex-shrink:0;border-radius:50%;border:none;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);color:#fff;font-size:20px;cursor:pointer;transition:transform .12s}
.live-round:active{transform:scale(.88)}
.live-round.heart{background:rgba(231,76,60,.85)}
.live-rail{position:absolute;right:12px;bottom:130px;display:flex;flex-direction:column;gap:12px;z-index:5;align-items:center}
.live-rail .lr-lab{font-size:12px;font-weight:700;text-align:center;margin-top:2px}
#live-hearts{position:absolute;inset:0;pointer-events:none;z-index:7;overflow:hidden}
.fly-heart{position:absolute;bottom:120px;font-size:25px;animation:flyUp 2.6s ease-out forwards}
@keyframes flyUp{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-320px) translateX(var(--dx,20px)) scale(1.25)}}
/* Pre-live setup + summary cards */
.live-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:26px;background:color-mix(in srgb,var(--media-surface) 88%,transparent);color:var(--on-media);backdrop-filter:blur(14px);z-index:10;text-align:left}
.live-setup-hdr{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center}.live-setup-hdr .creator-title-icon{background:color-mix(in srgb,var(--primary) 22%,transparent);color:var(--primary)}
.live-card h3{font-size:25px;font-weight:800}
.live-card p{font-size:15px;color:color-mix(in srgb,var(--on-media) 75%,transparent);line-height:1.5;text-align:center}
.live-card input{padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font-family:'Poppins',sans-serif;font-size:16px;outline:none}
.live-btn{padding:14px;border-radius:var(--r-sm);border:none;background:var(--primary);color:var(--card);font-family:'Figtree',sans-serif;font-size:17px;font-weight:700;cursor:pointer}
.live-btn.ghost{background:color-mix(in srgb,var(--on-media) 12%,transparent);border-color:color-mix(in srgb,var(--on-media) 24%,transparent);color:var(--on-media)}
.live-stats{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:6px 0}
.live-stat{background:rgba(255,255,255,.08);border-radius:14px;padding:12px 16px;min-width:80px}
.live-stat .n{font-size:23px;font-weight:800}
.live-stat .l{font-size:12px;color:rgba(255,255,255,.6);font-weight:600;letter-spacing:.4px}

/* Reels music picker + mute control */
.reel-music{cursor:pointer}
.reel-music.muted{opacity:.6}
.nr-music-actions{display:flex;gap:8px;margin-top:8px}
.nr-music-actions button{flex:1;padding:9px 10px;border-radius:var(--r-sm);border:1.5px dashed var(--border);background:var(--bg);font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;color:var(--text);cursor:pointer}
.nr-music-actions button:active{background:var(--primary-light)}
.reel-music-opt{justify-content:space-between}
.reel-music-opt .mo-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.reel-music-opt .mo-play{width:26px;height:26px;flex-shrink:0;border-radius:50%;border:none;background:var(--primary-light);color:var(--primary-ink);font-size:13px;cursor:pointer}
.mo-badge{font-size:10px;font-weight:800;letter-spacing:.4px;background:var(--accent);color:#04302c;padding:2px 6px;border-radius:6px;flex-shrink:0}

.link-btn{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--primary-ink);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.link-btn:hover{color:var(--primary)}
.link-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}



.pp-step{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:16px;margin-bottom:14px;box-shadow:0 6px 20px rgba(20,12,8,.06)}
.pp-step-h{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:900;margin-bottom:12px}
.pp-step-n{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#ff8f5c);color:#fff;font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center}
.pp-div{height:1px;background:var(--border);margin:16px -4px 14px}
.pp-pick{display:flex;gap:10px}
.pp-pick-b{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--bg);border:2px solid var(--border);border-radius:18px;padding:14px 13px;cursor:pointer;font-family:inherit;color:var(--text);transition:.18s;-webkit-tap-highlight-color:transparent}
.pp-pick-b b{font-size:15px;font-weight:900}
.pp-pick-b small{font-size:12.5px;color:var(--text2);line-height:1.3}
.pp-pick-e{font-size:26px}
.pp-pick-e .ui-icon{width:24px;height:24px;color:var(--primary)}
.ws-tab .ui-icon{width:15px;height:15px;display:inline-block;vertical-align:-2px;margin-right:5px}
.pp-pick-b.on{border-color:var(--primary);background:rgba(255,107,53,.09);box-shadow:0 6px 18px rgba(255,107,53,.18)}
.pp-hint{font-size:12.5px;color:var(--text2);margin-top:9px}
.pp-lbl{font-size:13px;font-weight:800;color:var(--text2);margin-bottom:7px}
.pp-more{font-size:13px}
.pp-more>summary{cursor:pointer;font-weight:800;color:var(--primary-ink);list-style:none;padding:10px 14px;border:1.5px solid var(--border);border-radius:20px;display:inline-block;white-space:nowrap;min-height:42px;line-height:22px;-webkit-tap-highlight-color:transparent}
.pp-more>summary::-webkit-details-marker{display:none}
.pp-timerow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.pp-time{flex:1 1 110px;min-width:0;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font-size:15px;font-family:inherit}
/* ── Exact-hours slot cards + 24h timeline ── */
.pp-slot{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;background:color-mix(in srgb,var(--primary) 5%,var(--card));border:1.5px solid var(--border);border-radius:16px;padding:10px 10px 10px 12px;margin-bottom:8px;overflow:hidden}
.pp-slot-n{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
.pp-slot-fields{flex:1 1 auto;display:flex;align-items:center;gap:6px;min-width:0}
.pp-slot-fields input{flex:1 1 0;min-width:0;padding:11px 8px;border:1.5px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font-size:15.5px;font-weight:700;font-family:inherit;text-align:center;min-height:46px}
.pp-slot-fields input:focus{outline:none;border-color:var(--primary)}
.pp-slot-arrow{flex:0 0 auto;color:var(--text2);font-weight:900;font-size:14px}
.pp-slot-x{flex:0 0 36px;width:36px;height:36px;border:none;border-radius:12px;background:transparent;color:var(--text2);font-size:16px;cursor:pointer;font-family:inherit}
.pp-slot-x:hover{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary-ink)}
.pp-slot-add{width:100%;min-height:46px;margin-top:2px;border:1.5px dashed color-mix(in srgb,var(--primary) 45%,var(--border));border-radius:14px;background:transparent;color:var(--primary-ink);font-family:inherit;font-size:14.5px;font-weight:800;cursor:pointer}
.pp-slot-save{flex:0 0 auto;min-height:40px;padding:0 12px;border:1.5px solid var(--primary);border-radius:12px;background:var(--card);color:var(--primary-ink);font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap}
.pp-slot-save:active{transform:scale(.95)}
.pp-slot-save.dirty{background:var(--primary);color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)}

@media (max-width:520px){
  .pp-slot{display:grid;grid-template-columns:24px minmax(0,1fr) 44px;align-items:center;gap:8px;overflow:visible}
  .pp-slot-n{grid-column:1;grid-row:1}
  .pp-slot-fields{grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);width:100%;gap:4px}
  .pp-slot-fields input{width:100%;min-width:0;box-sizing:border-box;padding:9px 2px;font-size:13.5px;min-height:44px;letter-spacing:0}
  .pp-slot-fields input::-webkit-calendar-picker-indicator{margin-left:0;flex:none}
  .pp-slot-arrow{font-size:12px;padding:0 1px}
  .pp-slot-x{grid-column:3;grid-row:1;width:44px;height:44px}
  .pp-slot-save{grid-column:2 / 4;grid-row:2;width:100%;min-height:44px}
}
.pp-cal{border:1px solid var(--border);border-radius:16px;padding:10px 10px 12px;background:var(--card)}
.pp-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.pp-cal-head b{font-size:15.5px}
.pp-cal-nav{width:38px;height:38px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:20px;font-family:inherit;cursor:pointer}
.pp-cal-dow,.pp-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.pp-cal-dow span{text-align:center;font-size:12px;font-weight:800;color:var(--text2);padding:2px 0}
.pp-cal-d{min-height:44px;width:100%;border-radius:12px;border:1px solid transparent;background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pp-cal-d.mute{opacity:.28;cursor:default;background:transparent}
.pp-cal-d.today{border-color:var(--primary)}
.pp-cal-d.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.pp-cal-d.rep{background:color-mix(in srgb,var(--primary) 78%,transparent);border-color:var(--primary);color:#fff}
.pp-cal-cell{position:relative;display:flex}
.pp-cal-chk{position:absolute;top:2px;right:2px;width:17px;height:17px;border-radius:6px;border:1.5px solid color-mix(in srgb,var(--text) 30%,transparent);background:var(--card);color:var(--primary-ink);font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:900}
.pp-cal-d.on+.pp-cal-chk{background:#fff;border-color:#fff}
.pp-cal-d.view{outline:2px solid var(--primary);outline-offset:1px}
.pp-hours-viz{margin-top:14px}
.pp-dcard{border:1px solid var(--border);border-radius:16px;padding:10px;margin-top:8px;background:var(--card)}
.pp-dcard-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;font-size:14.5px}


.pp-hv-track{position:relative;height:34px;border-radius:10px;background:linear-gradient(90deg,color-mix(in srgb,var(--text) 8%,transparent),color-mix(in srgb,var(--text) 8%,transparent));overflow:hidden}
.pp-hv-night{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--text) 6%,transparent)}
.pp-hv-bar{position:absolute;top:5px;bottom:5px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#ff9a6a);box-shadow:0 2px 8px color-mix(in srgb,var(--primary) 35%,transparent)}
.pp-hv-tick{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--text) 12%,transparent)}
.pp-hv-axis{display:flex;justify-content:space-between;margin-top:5px;font-size:11.5px;font-weight:700;color:var(--text2)}
.pp-hv-empty{font-size:12.5px;color:var(--text2);text-align:center;padding:9px 0}
.pp-cta{padding:15px 12px;font-size:16px;font-weight:900;min-height:52px}
.pp-cta2{padding:13px 12px;font-size:15px;font-weight:800;min-height:48px}
.pp-orrow{display:flex;align-items:center;gap:10px;margin-top:10px}
.pp-auto{display:flex;align-items:center;gap:6px;flex:0 0 auto;font-size:13px;font-weight:800;color:var(--text2);white-space:nowrap;min-height:48px}
.pp-auto input{accent-color:var(--primary);width:22px;height:22px}
.pp-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pp-filt-btn{flex:1 1 150px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:2px solid var(--border);background:var(--card);color:var(--text);border-radius:16px;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;padding:8px 12px;-webkit-tap-highlight-color:transparent}
.pp-filt-btn small{font-size:12px;font-weight:600;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pp-fs{display:none;position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.45);align-items:flex-end;justify-content:center}
.pp-fs.on{display:flex}
.pp-fs-card{width:100%;max-width:430px;background:var(--card);border-radius:24px 24px 0 0;padding:14px 16px calc(18px + env(safe-area-inset-bottom));max-height:88vh;overflow-y:auto;box-shadow:0 -8px 32px rgba(0,0,0,.25)}
.pp-fs-h{display:flex;align-items:center;justify-content:space-between;font-size:19px;margin-bottom:8px}
.pp-fs-lbl{font-size:13.5px;font-weight:800;color:var(--text2);margin:16px 0 8px}
.pp-fs-opts{display:flex;flex-direction:column;gap:9px}
.pp-fs-opts>button{width:100%;min-height:54px;border-radius:16px;border:2px solid var(--border);background:var(--bg);color:var(--text);font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent}
.pp-fs-opts>button.on{border-color:var(--primary);background:rgba(255,107,53,.1);color:var(--primary-ink)}
.pp-fs-range{width:100%;height:52px;accent-color:var(--primary);-webkit-appearance:none;appearance:none;background:transparent;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent;margin:0}
.pp-fs-range::-webkit-slider-runnable-track{height:10px;border-radius:6px;background:var(--border)}
.pp-fs-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:34px;height:34px;margin-top:-12px;border-radius:50%;background:var(--primary);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.pp-fs-range::-moz-range-track{height:10px;border-radius:6px;background:var(--border)}
.pp-fs-range::-moz-range-thumb{width:30px;height:30px;border:3px solid #fff;border-radius:50%;background:var(--primary)}
.pp-fs-done{width:100%;min-height:54px;margin-top:16px;border:none;border-radius:16px;background:var(--primary);color:#fff;font-family:inherit;font-size:17px;font-weight:800;cursor:pointer}

.pp-wrap{flex-wrap:wrap;overflow:visible}
#play-sheet .ws-chip{padding:10px 15px;font-size:13.5px;min-height:42px}
#play-sheet .ws-tab{padding:12px 6px;min-height:46px;font-size:14px}
.pp-days{gap:6px;flex-wrap:nowrap}
.pp-days .wsc-day{font-size:13px;font-weight:800;padding:12px 0;border-radius:12px;border:1.5px solid var(--border);-webkit-tap-highlight-color:transparent}
.pp-days .wsc-day.on{border-color:var(--primary)}
@media (max-width:400px){
  .pp-pick{flex-direction:column}
  .pp-pick-b{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap;padding:13px}
  .pp-pick-b small{flex:1 1 100%}
  .pp-step{padding:14px 13px;border-radius:20px}
  .pp-days .wsc-day{font-size:12px;padding:11px 0}
}



.ws-hero{background:linear-gradient(150deg,#FF6B35 0%,#ff8f5c 55%,#ffb07a 100%);color:#fff;padding:14px 18px 22px;border-radius:0 0 26px 26px;position:relative;overflow:hidden}
.ws-hero:after{content:"🐾";position:absolute;right:-6px;bottom:-18px;font-size:126px;opacity:.13;transform:rotate(-12deg)}
.ws-hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ws-icon-btn{width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-size:21px;font-weight:800;cursor:pointer;backdrop-filter:blur(4px)}
.ws-hero-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.ws-hero-title{font-size:29px;line-height:1.15;font-weight:800;margin:4px 0 12px}
.ws-hero-meta{display:flex;gap:7px;flex-wrap:wrap;position:relative;z-index:1}
.ws-pill{background:#fff;color:#d24f18;font-size:13px;font-weight:800;padding:5px 11px;border-radius:20px}
.ws-pill-soft{background:rgba(255,255,255,.2);color:#fff}
.ws-body{padding:16px 14px 32px}
.ws-seg{display:flex;gap:4px;background:var(--card);border:1px solid var(--border);padding:4px;border-radius:22px;margin-bottom:12px}
.ws-tab{flex:1;border:0;background:transparent;color:var(--text2);padding:9px 6px;border-radius:18px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;transition:.2s}
.ws-tab.on{background:linear-gradient(135deg,var(--primary),#ff8f5c);color:#fff;box-shadow:0 4px 12px rgba(255,107,53,.32)}
.ws-chiprow{display:flex;gap:7px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.ws-chiprow::-webkit-scrollbar{display:none}
.ws-chip{border:1.5px solid var(--border);background:var(--card);color:var(--text2);padding:7px 14px;border-radius:20px;font-size:13px;font-weight:700;cursor:pointer;flex-shrink:0;font-family:inherit}
.ws-chip.on{background:rgba(255,107,53,.12);border-color:var(--primary);color:var(--primary-ink)}
.ws-search{display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--border);border-radius:16px;padding:6px 8px 6px 12px}
.ws-search-ico{font-size:15px;opacity:.6}
.ws-search input{flex:1;min-width:0;border:0;background:transparent;font-family:inherit;font-size:15px;color:var(--text);outline:none}
.ws-search-go{border:0;background:var(--primary);color:#fff;padding:9px 15px;border-radius:12px;font-weight:800;font-size:14px;cursor:pointer;font-family:inherit}
.ws-search-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:7px 2px 14px}
.ws-search-foot span{font-size:13px;color:var(--text2)}
.ws-search-foot button{border:0;background:transparent;color:var(--primary-ink);font-size:13px;font-weight:800;cursor:pointer;font-family:inherit}
.wsc{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:14px;margin-bottom:12px;box-shadow:0 6px 20px rgba(20,12,8,.06)}
.wsc-top{display:flex;gap:12px;align-items:flex-start}
.wsc-av{width:56px;height:56px;border-radius:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:31px;background:linear-gradient(135deg,rgba(255,107,53,.16),rgba(255,176,122,.28));overflow:hidden}
.wsc-av img{width:100%;height:100%;object-fit:cover}
.wsc-name{font-size:17px;font-weight:800;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wsc-role{font-size:13px;font-weight:700;color:var(--primary-ink);margin-top:2px}
.wsc-sub{font-size:13px;color:var(--text2);margin-top:3px}
.wsc-km{background:var(--bg);border:1px solid var(--border);color:var(--text2);font-size:12px;font-weight:800;padding:4px 9px;border-radius:20px;white-space:nowrap}
.wsc-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.wsc-tag{background:var(--bg);border:1px solid var(--border);font-size:12px;font-weight:700;color:var(--text2);padding:4px 9px;border-radius:9px}
.wsc-av-block{margin-top:12px;background:var(--bg);border-radius:14px;padding:11px}
.wsc-badge{font-size:12px;font-weight:800;padding:4px 9px;border-radius:20px;color:#fff}
.wsc-days{display:flex;gap:4px;margin-top:9px}
.wsc-day{flex:1;text-align:center;font-size:11px;font-weight:800;padding:5px 0;border-radius:8px;background:var(--card);color:var(--text2);opacity:.45}
.wsc-day.on{background:rgba(255,107,53,.15);color:var(--primary-ink);opacity:1}
.wsc-day.today{outline:1.5px solid var(--primary)}
.wsc-foot{display:flex;gap:8px;margin-top:12px}
.wsc-foot button{flex:1;padding:11px 8px;border-radius:14px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit}
.wsc-msg{border:0;background:linear-gradient(135deg,var(--primary),#ff8f5c);color:#fff;box-shadow:0 4px 12px rgba(255,107,53,.28)}
.wsc-req{border:1.5px solid var(--border);background:transparent;color:var(--text)}



  .health-hdr{background:var(--card);padding:16px 16px 18px;border-bottom:1px solid var(--border);color:var(--text)}
  .health-hdr-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
  .health-hdr-title{font-family:'Outfit',sans-serif;font-size:21px;font-weight:800;display:flex;align-items:center;gap:9px;white-space:nowrap}
  .health-title-icon{width:36px;height:36px;border-radius:10px;background:var(--primary-light);color:var(--primary-ink);display:grid;place-items:center}
  .health-title-icon .ui-icon{width:20px;height:20px}
  .health-hdr-sub{font-size:14px;color:var(--text2);line-height:1.45}
  .health-back{grid-column:1;grid-row:1;justify-self:start;min-width:44px;min-height:44px;padding:0 10px;border:0;border-radius:var(--r-sm);background:var(--primary-light);color:var(--primary-ink);font-family:inherit;font-size:14px;font-weight:800;cursor:pointer}
  .health-back:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
  .health-select-dog{display:flex;gap:10px;padding:14px 16px;overflow-x:auto;scrollbar-width:none;background:var(--card);border-bottom:1px solid var(--border)}
  .health-select-dog[hidden]{display:none!important}
  .health-select-dog::-webkit-scrollbar{display:none}
  .hdog-chip{display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg);cursor:pointer;flex-shrink:0;font-size:14px;font-weight:600;transition:all .2s;font-family:Poppins,sans-serif}
  .hdog-chip.active{background:#E8F8F0;border-color:#2ECC71;color:#1a8a4a}
  .hdog-chip-av{width:26px;height:26px;border-radius:50%;overflow:hidden;flex-shrink:0}
  .hdog-chip-av img{width:100%;height:100%;object-fit:cover}
  .health-stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:14px 16px}
  .h-stat{min-width:0;background:var(--card);border:1px solid color-mix(in srgb,var(--accent) 16%,var(--border));border-radius:var(--r-sm);padding:11px 5px;text-align:center}
  .h-stat-icon{width:34px;height:34px;margin:0 auto 5px;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,var(--card));color:var(--accent);display:grid;place-items:center}
  .h-stat-icon .ui-icon{width:19px;height:19px}
  .h-stat-val{font-size:20px;font-weight:800;color:var(--text)}
  .h-stat-lbl{font-size:10px;color:var(--text2);margin-top:2px;line-height:1.2;min-height:24px;display:flex;align-items:center;justify-content:center}
  .health-section{padding:0 16px 8px}
  .health-section-title{font-size:16px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
  .health-section-label{display:flex;align-items:center;gap:8px;min-width:0}
  .health-section-label .ui-icon{width:19px;height:19px;color:var(--accent)}
  .health-section-link{min-height:44px;border:0;background:transparent;display:flex;align-items:center;gap:4px;padding:0 4px;font-family:inherit;font-size:14px;color:var(--primary-ink);font-weight:700;cursor:pointer}
  .health-section-link .ui-icon{width:17px;height:17px}
  .health-record-card{background:var(--card);border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));border-radius:var(--r-sm);box-shadow:var(--shadow);margin-bottom:10px;overflow:hidden}
  .health-record-hdr{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}
  .h-rec-ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent)}
  .h-rec-ic .ui-icon{width:21px;height:21px}
  .h-rec-ic.green{background:#E8F8F0}
  .h-rec-ic.blue{background:#EAF4FF}
  .h-rec-ic.orange{background:var(--primary-light)}
  .h-rec-ic.yellow{background:#FFF8E1}
  .h-rec-ic.red{background:#FEE8E8}
  .h-rec-info{flex:1}
  .h-rec-title{font-size:15px;font-weight:600}
  .h-rec-date{font-size:12px;color:var(--text2);margin-top:1px}
  .h-rec-badge{padding:3px 9px;border-radius:20px;font-size:12px;font-weight:700}
  .h-rec-badge.ok{background:#E8F8F0;color:#1a8a4a}
  .h-rec-badge.due{background:#FFF8E1;color:#c27a00}
  .h-rec-badge.done{background:#EAF4FF;color:#1a6bbf}
  .health-record-body{padding:0 14px 12px;border-top:1px solid var(--border);display:none}
  .health-record-body.open{display:block}
  .h-body-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-size:14px}
  .h-body-row:last-child{border-bottom:none}
  .h-body-lbl{color:var(--text2)}
  .h-body-val{font-weight:600}
  .h-rec-edit{border:none;background:var(--primary-light);color:var(--primary-ink);width:40px;height:40px;border-radius:50%;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
  .h-rec-edit .ui-icon{width:18px;height:18px}
  .h-rec-edit:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  .h-rec-body-acts{display:flex;gap:8px;padding-top:10px}
  .h-rec-body-acts button{flex:1;min-height:44px;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:var(--card);font-family:Figtree,sans-serif;font-size:14px;font-weight:600;cursor:pointer;color:var(--text);display:flex;align-items:center;justify-content:center;gap:6px}
  .h-rec-body-acts .ui-icon{width:17px;height:17px}
  .h-rec-body-acts button.danger{border-color:#f3b6b6;color:#c0392b}
  .h-upload-zone{margin:0 16px 16px;border:2px dashed var(--primary);border-radius:var(--r);padding:24px 16px;text-align:center;background:var(--primary-light);cursor:pointer;transition:all .2s}
  .h-upload-zone:active{transform:scale(.98)}
  .h-upload-ic{font-size:41px;margin-bottom:8px}
  .h-upload-title{font-size:16px;font-weight:700;color:var(--primary-ink);margin-bottom:4px}
  .h-upload-sub{font-size:13px;color:var(--text2);line-height:1.5}
  .h-upload-types{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
  .h-upload-type{padding:4px 10px;background:var(--card);border:1px solid var(--border);border-radius:20px;font-size:12px;font-weight:600;color:var(--text2)}
  


      .rec-docs{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
      .rec-doc{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--bg2,transparent)}
      .rec-doc-thumb{width:38px;height:38px;border-radius:8px;object-fit:cover;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
      .rec-doc-meta{flex:1;min-width:0}
      .rec-doc-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .rec-doc-sub{font-size:13px;color:var(--text2)}
      .rec-doc button{background:none;border:none;font-size:16px;cursor:pointer;padding:4px 6px}
      .rec-err-box{background:#FEF2F2;border:1px solid #FCA5A5;color:#B91C1C;border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:12px}
      .rec-err-box ul{margin:6px 0 0;padding-left:18px}
      .rec-doc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
      .rec-doc-chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;padding:4px 9px;border-radius:999px;border:1px solid var(--border);background:none;cursor:pointer;color:var(--text)}
    


/* Instagram-style story viewer */
.story-viewer{touch-action:none;user-select:none;-webkit-user-select:none}
.story-viewer .story-progress{gap:3px}
.story-seg .story-fill{transition:none}
.sv-time{font-size:13px;color:rgba(255,255,255,.75);font-weight:500;margin-left:6px}
.story-top .story-av{overflow:hidden;padding:0}
.story-top .story-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.sv-menu{color:#fff;background:none;border:none;font-size:23px;cursor:pointer;padding:4px}
.story-content{overflow:hidden}
.sv-media{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.sv-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 22%,transparent 62%,rgba(0,0,0,.55))}
.sv-emoji{position:relative;font-size:138px;text-shadow:0 8px 30px rgba(0,0,0,.4)}
.story-caption{z-index:3;bottom:86px}
.sv-paused{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;font-size:15px;font-weight:700;color:#fff;background:rgba(0,0,0,.45);padding:8px 16px;border-radius:24px;backdrop-filter:blur(6px);display:none}
.story-viewer.paused .sv-paused{display:block}
.sv-hint{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.92);color:#222;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.95;transition:opacity .2s,transform .15s;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.sv-hint:hover{opacity:1;transform:translateY(-50%) scale(1.08)}
.sv-hint.l{left:12px}.sv-hint.r{right:12px}
/* On phones, stories swipe like Instagram — no arrow buttons */
@media (max-width:640px){.sv-hint{display:none}}
.sv-footer{position:absolute;left:0;right:0;bottom:0;z-index:8;display:flex;align-items:center;gap:8px;padding:12px 12px 16px;background:linear-gradient(to top,rgba(0,0,0,.6),transparent)}
.sv-reply{flex:1;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:24px;padding:11px 16px;font-family:'Poppins',sans-serif;font-size:15px;outline:none}
.sv-reply::placeholder{color:rgba(255,255,255,.7)}
.sv-fbtn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;width:40px;height:40px;border-radius:50%;font-size:20px;cursor:pointer;flex-shrink:0}
.sv-fbtn:active{transform:scale(.92)}
.sv-heart{position:absolute;bottom:70px;z-index:9;font-size:30px;pointer-events:none;animation:svFloat 1.5s ease-out forwards}
@keyframes svFloat{0%{opacity:1;transform:translateY(0) scale(.6)}30%{transform:translateY(-60px) scale(1.1)}100%{opacity:0;transform:translateY(-190px) scale(.9)}}
.sv-viewers{position:absolute;bottom:24px;left:14px;z-index:8;color:#fff;font-size:14px;font-weight:600;background:rgba(0,0,0,.4);padding:7px 13px;border-radius:20px}
#story-reel-btn{bottom:132px}
.story-caption{line-height:1.45}
.sv-ctrls{display:flex;align-items:center;gap:6px;padding:0 12px 6px;position:relative;z-index:9}
/* Published stories look like Instagram: no playback/edit bar (play, seconds, mute, volume, like, share).
   Those controls belong to the story composer only. */
.story-viewer .sv-ctrls{display:none}
.sv-ctrl{background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:20px;
  height:30px;min-width:34px;padding:0 10px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Poppins',sans-serif}
.sv-ctrl:active{transform:scale(.94)}
.sv-ctrls select.sv-ctrl{padding:0 6px}
.sv-ctrls .sp{flex:1}
.sv-vol{width:64px;accent-color:#fff}
.sv-ctrl.liked{background:rgba(255,59,110,.85);border-color:rgba(255,255,255,.5)}
.sv-priv{position:absolute;top:74px;right:14px;z-index:9;color:#fff;font-size:13px;font-weight:700;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);padding:5px 10px;border-radius:20px;
  cursor:pointer;font-family:'Poppins',sans-serif}
/* visible keyboard focus for every story-viewer control */
.sv-ctrl:focus-visible,.sv-vol:focus-visible,.sv-priv:focus-visible,.sv-fbtn:focus-visible,
.sv-menu:focus-visible,.story-close:focus-visible,.sv-reply:focus-visible{
  outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px rgba(0,0,0,.45)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}





/* ── Messaging / filters / settings additions ── */
.icn-btn{position:relative}
.hdr-dot{position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:var(--red,#E74C3C);border:2px solid var(--card)}
.mfilter-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.mfilter-bar::-webkit-scrollbar{display:none}
.mf-btn{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:20px;border:1.5px solid var(--primary);background:var(--primary-light);color:var(--primary-ink);font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;cursor:pointer}
.mf-chip{flex-shrink:0;padding:6px 11px;border-radius:20px;background:var(--bg);border:1px solid var(--border);font-size:13px;color:var(--text2);white-space:nowrap}
.mf-clear{flex-shrink:0;background:none;border:none;color:var(--text2);font-size:13px;font-family:'Poppins',sans-serif;cursor:pointer;text-decoration:underline}
.fopt-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.fopt{padding:9px 13px;border-radius:20px;border:1.5px solid var(--border);background:var(--card);font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;color:var(--text2);cursor:pointer}
.fopt.sel{border-color:var(--primary);background:var(--primary-light);color:var(--primary-ink)}
.f-lbl{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);margin-bottom:8px}
.no-results{padding:26px 16px;text-align:center;color:var(--text2);font-size:14px}
.set-sec{padding:20px 16px;border-bottom:1px solid var(--border)}
.set-sec h4{margin:0 0 14px;font-family:'Outfit',sans-serif;font-size:17px;font-weight:700}
.panel-save-text{border:0;background:transparent;color:var(--primary-ink);font-family:'Figtree',sans-serif;font-size:15px;font-weight:700;cursor:pointer;padding:0 4px}
.feed-tab{display:flex;align-items:center;justify-content:center;gap:7px;font-family:'Figtree',sans-serif}
.feed-tab .ui-icon{width:18px;height:18px}

/* Warm Modern Feed — shared type and rhythm */
h1,h2,h3,h4,h5,h6,.mtitle,.cs-title,.reg-hdr-title,.reg-section-title,.auth-form-title,.service-title,.sec-title,.notif-s-hdr,.wsc-name,.ws-hero-title{font-family:'Outfit',sans-serif;letter-spacing:0}
input,select,textarea,.field input,.field select,.field textarea,.de-f input,.de-f select,.de-f textarea,.chat-input,.create-caption,.create-loc,.fopt,.follow-btn,.prof-btn,.de-mini,.vax-add{font-family:'Figtree',sans-serif}
.de-sec{padding:20px 16px;border-bottom:8px solid var(--bg)}
.de-sec-t{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;color:var(--text);text-transform:none;letter-spacing:0;margin-bottom:16px}
.de-f{margin-bottom:16px}.de-f label{font-size:13px;font-weight:700;margin-bottom:7px}
.de-f input,.de-f select,.de-f textarea{padding:12px 13px;font-size:16px}
.de-mini{min-height:44px;text-align:left;color:var(--accent)}
.stories{gap:14px;padding:14px 16px 16px}
.auth-form{padding:30px 24px}.auth-form-title{font-size:24px}.auth-form-sub{margin-bottom:24px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.set-in{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:'Poppins',sans-serif;font-size:15px;background:var(--bg);color:var(--text);outline:none;box-sizing:border-box}
.set-in:focus{border-color:var(--primary)}
.set-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.set-row:last-child{border-bottom:none}
.set-row .sr-t{flex:1;min-width:0}
.sr-t b{font-size:15px;font-weight:600;display:block}
.sr-t span{font-size:13px;color:var(--text2)}
.sw{width:36px;height:20px;border-radius:10px;background:var(--border);border:none;position:relative;flex-shrink:0;cursor:pointer;transition:background .2s;box-shadow:none;min-width:0;min-height:0;padding:0}
.sw.on{background:var(--primary)}
.sw:after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.sw.on:after{transform:translateX(16px)}
.sw:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.set-sec .fopt-row .fopt{padding:6px 10px;font-size:13px;border-radius:18px}
.conv-item.unread-row .conv-name{font-weight:700}
.msg-typing{align-self:flex-start;font-size:14px;color:var(--text2);padding:4px 6px}



#pp-auth-dim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:6000;display:none}
#pp-auth-dim.open{display:block}
#pp-auth{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);width:min(340px,92vw);background:var(--card,#fff);border-radius:20px;z-index:6001;padding:22px;display:none;box-shadow:0 20px 60px rgba(0,0,0,.3);opacity:0;transition:opacity .2s,transform .2s}
#pp-auth.open{display:block;opacity:1;transform:translate(-50%,-50%) scale(1)}
#pp-auth h3{font-size:21px;font-weight:800;margin-bottom:4px}
#pp-auth p.sub{font-size:14px;color:var(--text2);line-height:1.5;margin-bottom:14px}
.pp-in{width:100%;padding:12px 13px;border:1.6px solid var(--border);border-radius:12px;font-family:'Poppins',sans-serif;font-size:16px;margin-bottom:10px;outline:none}
.pp-in:focus{border-color:var(--primary)}
.pp-btn{width:100%;padding:13px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--primary),#FF8C5A);color:#fff;font-family:'Poppins',sans-serif;font-size:16px;font-weight:700;cursor:pointer}
.pp-alt{width:100%;padding:11px;margin-top:8px;background:none;border:1.5px solid var(--border);border-radius:12px;font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;color:var(--text2);cursor:pointer}
#pp-auth-msg{font-size:14px;margin-bottom:10px;min-height:16px;color:var(--primary-ink);font-weight:600}
.pp-chat-actions{display:flex;gap:6px;align-items:center}
.pp-chat-actions button{background:none;border:none;font-size:18px;cursor:pointer;padding:4px}
.msg.me img,.msg.them img{display:block;max-width:190px;border-radius:12px}
.msg.photo{padding:4px!important;background:rgba(0,0,0,.04)!important}
.pp-an-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.pp-an-row:last-child{border-bottom:none}
.pp-an-th{width:38px;height:52px;border-radius:8px;background-size:cover;background-position:center;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:21px}
.pp-an-bar{height:6px;border-radius:4px;background:linear-gradient(90deg,var(--primary),#FF8C5A);margin-top:5px}
.pp-sync{font-size:13px;color:var(--text2);margin-top:6px}



.pp-search-row{padding:10px 14px;border-bottom:1px solid rgba(0,0,0,.06);display:flex;gap:8px;align-items:center;background:#fff}
.pp-search-row input{flex:1;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:9px 14px;font-size:15px;outline:none;font-family:inherit}
.pp-search-row input:focus{border-color:var(--primary,#FF7A45)}
.pp-search-clear{border:none;background:transparent;font-size:18px;cursor:pointer;color:#888}
#pp-search-results{flex:1;overflow-y:auto;display:none}
.pp-sr{padding:12px 14px;border-bottom:1px solid rgba(0,0,0,.05);cursor:pointer}
.pp-sr:active{background:rgba(0,0,0,.04)}
.pp-sr-name{font-size:14px;font-weight:700;color:var(--primary,#FF7A45);margin-bottom:3px}
.pp-sr-text{font-size:15px;color:#333;line-height:1.4}
.pp-sr-text mark{background:#FFE9A8;border-radius:3px;padding:0 2px}
.pp-sr-meta{font-size:13px;color:#999;margin-top:3px}
.pp-sr-empty{padding:28px 18px;text-align:center;color:#999;font-size:15px}
.msg.pp-hit{outline:2px solid #FFC94A;outline-offset:2px}
.pp-gif-sheet{position:fixed;left:0;right:0;bottom:0;z-index:12000;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.2);transform:translateY(110%);transition:transform .28s ease;max-height:74vh;display:flex;flex-direction:column}
.pp-gif-sheet.open{transform:translateY(0)}
.pp-gif-dim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:11999;opacity:0;pointer-events:none;transition:opacity .25s}
.pp-gif-dim.open{opacity:1;pointer-events:auto}
.pp-gif-hdr{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.07)}
.pp-gif-hdr h4{margin:0;font-size:17px;flex:1}
.pp-gif-hdr button{border:none;background:transparent;font-size:18px;cursor:pointer}
.pp-gif-body{overflow-y:auto;padding:12px}
.pp-gif-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pp-gif-grid button{border:none;padding:0;border-radius:12px;overflow:hidden;background:#f2f2f2;cursor:pointer;aspect-ratio:1/1}
.pp-gif-grid img{width:100%;height:100%;object-fit:cover;display:block}
.pp-gif-tools{display:flex;gap:8px;margin-top:12px}
.pp-gif-tools input{flex:1;border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:9px 12px;font-size:15px;font-family:inherit}
.pp-gif-tools button{border:none;border-radius:10px;padding:9px 14px;background:var(--primary,#FF7A45);color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.pp-card-safety{position:absolute;top:56px;right:12px;z-index:6;border:none;border-radius:999px;width:34px;height:34px;background:rgba(0,0,0,.45);color:#fff;font-size:18px;backdrop-filter:blur(6px);cursor:pointer}
.pp-ob-dim{position:fixed;inset:0;background:color-mix(in srgb,var(--text) 76%,transparent);z-index:13000;display:none;align-items:flex-end;justify-content:center;padding:16px}
.pp-ob-dim.open{display:flex}
body:has(#pp-ob.open) #pp-consent-chip{display:none!important}
.pp-ob-card{background:var(--card);border-radius:var(--r) var(--r) 0 0;max-width:430px;width:calc(100% + 32px);padding:26px 20px calc(20px + env(safe-area-inset-bottom));text-align:left;box-shadow:var(--shadow-lg);position:relative;margin:-16px}
.pp-ob-x{position:absolute;top:8px;right:8px;min-width:44px;min-height:44px;border:none;background:none;color:var(--text2);font-size:16px;cursor:pointer}
@media (min-width:900px){#app{max-width:520px;height:min(100dvh,940px);margin:max(0px,calc((100dvh - 940px)/2)) auto;border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,.18)}body{background:#F3ECE6}}
.pp-ob-kicker{color:var(--primary-ink);font-size:12px;font-weight:800;margin-bottom:6px}
.pp-ob-card h3{margin:0 34px 6px 0;font:700 24px/1.2 Outfit,sans-serif;color:var(--text)}
.pp-ob-card>p{margin:0;font-size:15px;line-height:1.5;color:var(--text2)}
.pp-ob-progress{display:flex;align-items:center;gap:12px;margin:17px 0 12px;color:var(--text2);font-size:12px;font-weight:700}
.pp-ob-progress>div{height:6px;flex:1;background:var(--border);border-radius:999px;overflow:hidden}
.pp-ob-progress i{display:block;height:100%;width:0;background:var(--accent);border-radius:inherit;transition:width .2s ease}
.pp-ob-list{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.pp-ob-step{display:flex;align-items:center;gap:11px;min-height:66px;border-bottom:1px solid var(--border)}
.pp-ob-check{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border:1.5px solid var(--border);border-radius:50%;color:var(--text2);font-weight:800;font-size:13px}
.pp-ob-step.done .pp-ob-check{background:var(--accent);border-color:var(--accent);color:var(--card)}
.pp-ob-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}
.pp-ob-copy strong{color:var(--text);font-size:15px}.pp-ob-copy small{color:var(--text2);font-size:12px;line-height:1.35}
.pp-ob-step>button{border:0;background:var(--primary-light);color:var(--primary-ink);padding:8px 10px;border-radius:var(--r-sm);font:700 12px Figtree,sans-serif;white-space:nowrap;cursor:pointer}
.pp-ob-btns{display:flex;gap:10px;margin-top:16px}
.pp-ob-btns button{flex:1;border:none;border-radius:12px;padding:12px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit}
.pp-ob-skip{background:var(--bg);color:var(--text2)}
.pp-ob-next{background:var(--primary);color:var(--card)}
@media (min-width:600px){.pp-ob-dim{align-items:center;padding:24px}.pp-ob-card{border-radius:var(--r);width:100%;margin:0;max-width:460px}}
@media (prefers-reduced-motion:reduce){.pp-ob-progress i{transition:none}}



.ppv-dim{position:fixed;inset:0;background:rgba(20,12,8,.72);z-index:14000;display:none;align-items:center;justify-content:center;padding:22px}
.ppv-dim.open{display:flex}
.ppv-card{background:#fff;border-radius:20px;max-width:340px;width:100%;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.ppv-card h3{margin:0 0 6px;font-size:20px;font-weight:800}
.ppv-card p{margin:0 0 12px;font-size:15px;line-height:1.55;color:#666}
.ppv-card input{width:100%;padding:11px 12px;border:1.6px solid rgba(0,0,0,.12);border-radius:11px;font-family:inherit;font-size:16px;margin-bottom:9px;outline:none}
.ppv-card input:focus{border-color:var(--primary,#FF7A45)}
.ppv-card input[aria-invalid="true"]{border-color:var(--danger,#B42318)}
.ppv-label{display:block;font-size:13px;font-weight:700;color:var(--text);margin:0 0 6px}
.ppv-msg{font-size:14px;font-weight:600;color:var(--primary,#FF7A45);min-height:16px;margin-bottom:8px}
.ppv-go{width:100%;border:none;border-radius:12px;padding:12px;background:linear-gradient(135deg,var(--primary,#FF7A45),#FF8C5A);color:#fff;font-weight:700;font-size:16px;font-family:inherit;cursor:pointer}
.ppv-go:disabled{opacity:.62;cursor:wait}
.ppv-alt{width:100%;margin-top:8px;border:1.5px solid rgba(0,0,0,.12);background:none;border-radius:12px;padding:10px;font-weight:600;font-size:15px;color:#666;font-family:inherit;cursor:pointer}
.ppv-success-mark{display:grid;place-items:center;width:46px;height:46px;margin:0 0 14px;border-radius:50%;background:var(--success-soft,#E7F2ED);color:var(--secondary,#4F7C68);font-size:25px;font-weight:800}
.ppv-loading{width:28px;height:28px;margin:18px auto 2px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:ppv-spin .8s linear infinite}
@keyframes ppv-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ppv-loading{animation-duration:1.8s}}
.pp-ticks{font-size:12px;color:#9a9a9a;text-align:right;margin:-2px 4px 4px 0}
.pp-ticks.read{color:#3897f0;font-weight:700}
.pp-link{background:none;border:none;color:var(--primary,#FF7A45);font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;padding:6px 0}



/* ═══════════ Story composer (Instagram-style) ═══════════ */
#sc{position:fixed;inset:0;z-index:1400;background:var(--bg);display:none;flex-direction:column;color:var(--text)}
#sc.open{display:flex}
.sc-stage{position:relative;min-height:260px;max-height:52vh;flex:1;border-radius:var(--r);overflow:hidden;background:var(--media-surface,#15151c);
  background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
.sc-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:15px;text-align:center;padding:24px 30px;color:var(--on-media,#fff);opacity:.85}
.sc-meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px}
.sc-thumbs{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding:2px}
.sc-thumb{position:relative;flex:0 0 56px;width:56px;height:56px;border-radius:12px;overflow:hidden;border:2px solid transparent;cursor:pointer;background:var(--media-surface,#15151c)}
.sc-thumb.on{border-color:var(--accent)}
.sc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sc-thumb-x{position:absolute;top:2px;right:2px;width:18px;height:18px;min-width:18px;min-height:18px;padding:0;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:10px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sc-meta-note{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text2)}
.sc-meta-note .ui-icon{width:16px;height:16px}
.sc-cover-btn{min-height:40px;display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--border);border-radius:999px;padding:6px 14px;background:var(--card);color:var(--text);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .16s,background-color .16s,border-color .16s}
.sc-cover-btn .ui-icon{width:16px;height:16px;color:var(--accent)}
.sc-cover-btn:active{transform:scale(.96)}
.sc-cover-btn.on{border-color:var(--primary);background:var(--primary-light);color:var(--primary-ink)}
.sc-capL{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#fff;font-size:17px;font-weight:600;
  padding:8px 16px;text-shadow:0 1px 6px rgba(0,0,0,.6);pointer-events:none;z-index:4;white-space:pre-wrap;
  background:rgba(0,0,0,.42);margin:0 14px;border-radius:14px}

/* ── Story composer layout polish ── */
#sc{height:100%;height:100dvh;padding-bottom:env(safe-area-inset-bottom,0)}
#sc .creator-title{flex:1;justify-content:center}
.sc-stage{box-shadow:var(--shadow)}
@media (max-height:700px){
  .sc-stage{min-height:200px;max-height:44vh}
}



.bc-wrap{position:relative;display:block}
.bc-panel{position:fixed;left:0;width:100%;max-width:430px;margin:0 auto;z-index:100000;background:var(--card,#fff);border:1.5px solid var(--primary,#FF6B35);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);max-height:260px;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;display:none;font-family:'Poppins',sans-serif}
.bc-panel.open{display:block}
.bc-panel .bc-item{padding:14px 16px;font-size:16px;color:var(--text,#222);cursor:pointer;border-bottom:1px solid var(--border,#eee);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-panel .bc-item:last-child{border-bottom:none}
.bc-panel .bc-item.on,.bc-panel .bc-item:active{background:var(--primary-light,#FFF1EA);color:var(--primary,#FF6B35);font-weight:600}
.bc-panel .bc-empty{padding:14px 16px;font-size:15px;color:var(--text-light,#888)}
.bc-caret{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:none;background:transparent;color:var(--primary,#FF6B35);font-size:18px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;touch-action:manipulation}



#dm-entry{display:flex;align-items:center;gap:12px;margin:14px 16px 4px;padding:14px;border-radius:20px;cursor:pointer;
  background:linear-gradient(140deg,#FF6B35,#ff9c68);color:#fff;box-shadow:0 8px 22px rgba(255,107,53,.28)}
.dm-entry-ic{font-size:26px;flex-shrink:0}
.dm-entry-t{font-size:17px;font-weight:800}
.dm-entry-d{font-size:13px;opacity:.92;line-height:1.35;margin-top:2px}
.dm-entry-go{margin-left:auto;font-size:22px;font-weight:800;opacity:.9}
#dm-sheet{display:none;position:fixed;inset:0;z-index:900;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch}
.dm-field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.dm-field label{font-size:13px;font-weight:800;color:var(--text2)}
.dm-field input,.dm-field select{border:1.5px solid var(--border);background:var(--card);color:var(--text);
  border-radius:14px;padding:11px 12px;font-family:inherit;font-size:15px;outline:none;min-height:46px}
.dm-row{display:flex;gap:10px}
.dm-row .dm-field{flex:1}
.dm-btn{border:0;background:var(--primary);color:#fff;border-radius:14px;padding:13px 16px;font-weight:800;
  font-size:15px;font-family:inherit;cursor:pointer;width:100%;min-height:48px}
.dm-btn.ghost{background:var(--card);color:var(--primary-ink);border:1.5px solid var(--border)}
.dm-acts{display:flex;gap:8px;margin-top:12px}
.dm-acts button{flex:1;min-height:46px;border-radius:14px;border:0;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer}
.dm-swap{background:rgba(255,107,53,.12);color:var(--primary-ink);border:1.5px solid var(--primary) !important}
.dm-chat{background:var(--primary);color:#fff}
.dm-note{font-size:12.5px;color:var(--text2);line-height:1.45;margin:14px 2px 0;text-align:center}
#dm-pick{display:none;position:fixed;inset:0;z-index:960;background:rgba(0,0,0,.45);align-items:flex-end}
#dm-pick.on{display:flex}
.dm-pick-card{width:100%;background:var(--bg);border-radius:22px 22px 0 0;padding:16px 16px 24px;max-height:80vh;overflow-y:auto}
.dm-pick-dog{display:flex;align-items:center;gap:12px;padding:12px;border:1.5px solid var(--border);border-radius:16px;
  background:var(--card);margin-bottom:9px;cursor:pointer;min-height:60px}
.dm-pick-av{width:44px;height:44px;border-radius:14px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:24px;background:rgba(255,107,53,.14)}
.dm-pick-av img{width:100%;height:100%;object-fit:cover}



.pp-t24{display:inline-flex;align-items:center;gap:2px;min-width:0;max-width:100%}
.pp-t24 select{flex:1 1 0;min-width:0;width:100%;padding:9px 2px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font-size:15px;font-weight:700;text-align:center}
.pp-slot-fields .pp-t24{width:100%;min-width:0}
.pp-t24 b{opacity:.6;font-weight:800}



  .pp-ev-l{display:block;margin:14px 2px 7px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;color:var(--text2)}
  .pp-ev-i{width:100%;box-sizing:border-box;min-height:50px;padding:12px 14px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--bg);color:var(--text);font-family:inherit;font-size:16px;outline:none}
  .pp-ev-i:focus{border-color:var(--primary);background:var(--card)}
  .pp-ev-card{background:var(--card);border:1px solid var(--border);border-radius:16px;margin:14px 16px;overflow:hidden}



.pp-skel-row{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:14px;margin-bottom:10px}
.pp-skel{background:linear-gradient(90deg,var(--border) 25%,rgba(0,0,0,.04) 37%,var(--border) 63%);background-size:400% 100%;animation:ppShimmer 1.3s ease-in-out infinite;border-radius:8px}
@keyframes ppShimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.pp-loc-cta{cursor:pointer}

/* Community events live under Play Nearby, alongside Looking for and Host. */
.pp-events-sheet{position:fixed;inset:0;z-index:900;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch}
.pp-events-body{padding:14px 0 28px}
.pp-events-create{width:calc(100% - 32px);margin:0 16px}
.pp-events-note{margin:10px 18px 2px;font-size:13px;line-height:1.5;color:var(--text2)}
.pp-events-empty{padding:36px 24px;text-align:center;color:var(--text2);font-size:14px;line-height:1.5}
.pp-events-empty-title{font-weight:700;color:var(--text);font-size:17px;margin-bottom:6px}



#pp-consent{position:fixed;inset-inline:0;bottom:0;z-index:100000;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom));pointer-events:none;font-family:'Poppins',sans-serif}
#pp-consent .pp-consent-card{pointer-events:auto;max-width:28rem;margin:0 auto;display:flex;flex-direction:column;gap:12px;border-radius:16px;border:1px solid #F0E6DC;background:#fff;padding:16px;box-shadow:0 8px 32px rgba(0,0,0,.14)}
#pp-consent p{flex:1;font-size:14px;color:#1A1A2E;margin:0}
#pp-consent .pp-consent-row{display:flex;align-items:flex-start;gap:8px}
#pp-consent .pp-consent-btns{display:flex;gap:8px}
#pp-consent button{cursor:pointer;font-family:inherit}
#pp-consent .pp-consent-decline{flex:1;border-radius:12px;border:1px solid #F0E6DC;background:#fff;padding:8px 12px;font-size:14px;font-weight:600;color:#1A1A2E}
#pp-consent .pp-consent-accept{flex:1;border-radius:12px;border:none;background:#FF6B35;padding:8px 12px;font-size:14px;font-weight:600;color:#fff}
#pp-consent .pp-consent-min{flex-shrink:0;width:28px;height:28px;border:none;background:none;color:#888899;font-size:14px}
#pp-consent-chip{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:100000;width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%;border:1px solid var(--border);background:var(--card);box-shadow:0 1px 8px rgba(26,26,46,.10);cursor:pointer;display:none;align-items:center;justify-content:center;color:var(--accent,#E2725B);padding:0;transition:transform .15s,box-shadow .15s}
#pp-consent-chip:hover{transform:translateY(-1px);box-shadow:0 3px 12px rgba(26,26,46,.14)}
#pp-consent-chip:active{transform:scale(.94)}
#pp-consent-chip .ui-icon{width:15px;height:15px;stroke-width:2}
#pp-consent .pp-consent-ic{width:18px;height:18px;display:inline-block;vertical-align:-3px;color:var(--accent,#E2725B);margin-right:2px}
#pp-consent .pp-consent-min{display:inline-flex;align-items:center;justify-content:center}
#pp-consent .pp-consent-min .ui-icon{width:16px;height:16px}
/* Header: keep all six actions visible inside the 430px app column */
.hdr-acts{gap:6px}
#hdr .icn-btn{width:40px;height:40px;min-width:40px;min-height:40px;font-size:17px;flex-shrink:0}
#hdr .logo{flex-shrink:0}
@media (max-width:430px){
  #hdr{padding:0 12px}
  #hdr .logo{font-size:18px;gap:6px}
  .hdr-acts{gap:4px}
  #hdr .icn-btn{width:36px;height:36px;min-width:36px;min-height:36px;font-size:16px}
}

/* ══════════════════════════════════════
   KEYBOARD FOCUS + MOBILE INPUT SIZING
   A single visible focus ring for every interactive element, so the app can be
   used entirely from a keyboard. :focus-visible keeps it off mouse clicks.
══════════════════════════════════════ */
:where(a[href],button,[role="button"],[role="tab"],input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:3px solid var(--primary);
  outline-offset:2px;
  border-radius:8px;
}
/* Inside dark overlays (story viewer, reels) the ring needs a light halo. */
.sv-wrap :focus-visible,.reels :focus-visible{box-shadow:0 0 0 5px rgba(255,255,255,.35)}

/* iOS zooms the whole page in when a focused field is under 16px. Every field
   is at least 16px so tapping an input never rescales the app. */
input,select,textarea,
.de-f input,.de-f select,.de-f textarea,
.dm-field input,.dm-field select,
.field input,.field select,.field textarea{font-size:16px}

/* Visitors who ask their device for less motion get a still app: transitions,
   animations and smooth scrolling are reduced to near-instant. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto !important}
}

/* ══════════════════════════════════════════════════════════════
   Focus visibility — every control shows where you are when using a
   keyboard, on both light and dark backgrounds.
   ══════════════════════════════════════════════════════════════ */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
[role="button"]:focus-visible,[role="tab"]:focus-visible,
[role="link"]:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--primary);
  outline-offset:2px;
  border-radius:10px;
}
/* On photos, videos and dark panels the coral ring alone can disappear, so a
   white halo sits behind it. */
.reels :focus-visible,.sv-wrap :focus-visible,.live-wrap :focus-visible,
.creator-hdr-dark :focus-visible,.creator-overlay :focus-visible{
  outline:3px solid #fff;
  box-shadow:0 0 0 6px rgba(255,112,77,.55);
}
/* Never remove the ring, whatever a component sets. */
:focus-visible{outline-style:solid !important}

/* ── Unified line-icon usage in inline labels, rows and empty states ── */
.pc-src-ic{display:inline-flex;align-items:center;justify-content:center;color:inherit}
.pc-src-ic .ui-icon{width:24px;height:24px}
.pp-inline-ic{display:inline-flex;align-items:center;gap:8px}
.pp-inline-ic .ui-icon{width:19px;height:19px}
.pp-row-ic{display:inline-flex;align-items:center;justify-content:center}
.pp-row-ic .ui-icon{width:20px;height:20px}
.pp-icon-plain{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--primary)}
.pp-empty-ic{display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--primary)}
.pp-empty-ic .ui-icon{width:44px;height:44px;stroke-width:1.6}
.sec-title{display:flex;align-items:center;gap:9px}
.sec-title .ui-icon{width:19px;height:19px;color:var(--primary)}
.tip-ic .ui-icon,.notif-ic .ui-icon{width:22px;height:22px;color:var(--primary)}
.notif-hdr-title{display:flex;align-items:center;gap:9px}
.notif-hdr-title .ui-icon{width:20px;height:20px}
.sv-ctrl{display:inline-flex;align-items:center;gap:6px}
.sv-ctrl .ui-icon,.sv-fbtn .ui-icon,.live-round .ui-icon,.reel-round .ui-icon,.chat-send .ui-icon,.comment-send .ui-icon{width:20px;height:20px}
.sv-paused{display:inline-flex;align-items:center;gap:8px}
#story-reel-btn{display:inline-flex;align-items:center;gap:8px}
.reels-title{display:flex;align-items:center;gap:8px}
.de-hint .ui-icon,.vax-add .ui-icon,.de-mini .ui-icon,.fopt .ui-icon{width:18px;height:18px;flex-shrink:0}
.vax-add,.de-mini,.fopt{display:inline-flex;align-items:center;gap:8px;justify-content:center}
.set-sec h4{display:flex;align-items:center;gap:9px}
.set-sec h4 .ui-icon{width:19px;height:19px;color:var(--primary)}
.p-btn .bi{font-size:0;display:inline-flex;align-items:center}
.p-btn .bi .ui-icon{width:23px;height:23px}
.bi-on .ui-icon{fill:var(--primary);color:var(--primary)}
.reel-btn .bi{display:inline-flex;align-items:center;justify-content:center}
.pp-mini-ic{display:inline-flex;align-items:center;justify-content:center;color:var(--text2)}
.pp-mini-ic .ui-icon{width:15px;height:15px}
.rec-doc-thumb .ui-icon{width:24px;height:24px;color:var(--text2)}
.rec-doc button .ui-icon,.rec-doc-chip .ui-icon{width:17px;height:17px}
.rec-doc-chip{display:inline-flex;align-items:center;gap:6px}
.dog-photo-btn{display:inline-flex;align-items:center;gap:7px;justify-content:center}
.dog-photo-btn .ui-icon{width:18px;height:18px}
.post-opt .ui-icon{width:20px;height:20px}
.reel-paused-badge .ui-icon{width:34px;height:34px}
.live-round.muted .ui-icon{opacity:.5}
.notif-fi-av .ui-icon{width:22px;height:22px;color:var(--primary)}

/* PawPal 47 — the cookie and install cards must never cover a sheet's
   primary button (Share Post, Share to your story, Publish reel…). */
body.pp-overlay-open #pp-consent,
body.pp-overlay-open #pp-consent-chip,
body.pp-overlay-open .install-card{display:none !important}

/* Desktop: keep full-screen surfaces (story/reel viewer, creators, messages)
   inside the same centred mobile column as the app itself. */
@media (min-width:900px){
  .creator-fullscreen,.story-viewer,#sc,#dm-sheet,.pp-events-sheet{
    max-width:520px;width:100%;left:50%;right:auto;transform:translateX(-50%);
    top:max(0px,calc((100dvh - 940px)/2));bottom:auto;height:min(100dvh,940px);
    border-radius:24px;overflow:hidden;
    box-shadow:0 24px 80px rgba(0,0,0,.18)}
  #live-overlay{max-width:520px}
}

/* Sign out: outlined danger button, line icon */
.pp-signout{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:10px 22px;border-radius:999px;border:1.5px solid color-mix(in oklab,var(--danger,#d64545) 55%,transparent);background:transparent;color:var(--danger,#d64545);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.pp-signout:hover{background:color-mix(in oklab,var(--danger,#d64545) 10%,transparent)}
.pp-signout .ui-icon{width:17px;height:17px}