@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
:root { --ink:#26342d; --muted:#728078; --orange:#f97316; --cream:#fffaf2; --line:#e9e5de; --green:#dff3e3; }
* { box-sizing:border-box; }
body { margin:0; background:#f4f5f1; color:var(--ink); font-family:"Zen Maru Gothic","DM Sans",sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.auth-gate { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:22px; overflow:auto; background:linear-gradient(145deg,#fff1dc,#e5f2e4); }.auth-gate[hidden] { display:none; }.auth-card { width:min(100%,410px); padding:29px; border-radius:25px; background:#fff; box-shadow:0 14px 40px #41513c25; }.auth-paw { width:52px; height:52px; display:grid; place-items:center; margin-bottom:17px; border-radius:17px; background:#fff1dc; font-size:28px; }.auth-card h1 { margin:0; font-size:26px; line-height:1.42; letter-spacing:-1px; }.auth-description { margin:11px 0 21px; color:var(--muted); font-size:12px; line-height:1.7; }.auth-form { display:grid; gap:13px; }.auth-form h2 { margin:0; font-size:16px; }.auth-switch { border:0; padding:5px 0 0; background:transparent; color:#a66128; font-size:11px; text-decoration:underline; }.auth-help { margin:0; color:var(--muted); font-size:11px; line-height:1.6; }.auth-message { min-height:18px; margin:11px 0 0; color:#c45136; font-size:11px; }.auth-legal { margin:18px 0 0; color:var(--muted); text-align:center; font-size:10px; }.auth-legal button { border:0; padding:0; background:transparent; color:#6b766d; text-decoration:underline; font-size:10px; }
.app-shell { width:min(100%,700px); min-height:100vh; margin:0 auto; background:#fff; padding-bottom:86px; }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid #f1ede7; position:sticky; top:0; z-index:3; background:#ffffffed; backdrop-filter:blur(12px); }
.brand { color:var(--ink); text-decoration:none; font-size:20px; font-weight:700; letter-spacing:-.5px; }.brand span { color:var(--orange); }
.primary-button { color:#fff; background:var(--orange); border:0; border-radius:999px; padding:11px 17px; font-weight:700; box-shadow:0 5px 12px #f9731640; }.primary-button:active { transform:translateY(1px); }.full { width:100%; margin-top:8px; padding:14px; }
.view { display:none; padding:24px; }.view.active { display:block; }.hero { min-height:200px; background:linear-gradient(125deg,#fff3d6,#ffe5c3); border-radius:28px; padding:28px; display:flex; justify-content:space-between; align-items:center; overflow:hidden; }.eyebrow { margin:0 0 5px; color:#d76717; letter-spacing:1.3px; font-family:"DM Sans"; font-size:11px; font-weight:700; }.hero h1,.view h1 { font-size:29px; line-height:1.4; margin:0; letter-spacing:-1px; }.pet-avatar { width:104px; height:104px; border-radius:50%; background:#fff8e8; display:grid; place-items:center; font-size:59px; transform:rotate(-8deg); }.feed-heading { display:flex; align-items:baseline; justify-content:space-between; margin:30px 2px 14px; }.feed-heading h2,.view h2 { font-size:19px; margin:0; }.feed-heading span,.muted { color:var(--muted); font-size:13px; }.feed { display:grid; gap:16px; }.post { border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; }.post-header { display:flex; align-items:center; padding:14px; gap:10px; }.mini-avatar { width:35px; height:35px; border-radius:50%; background:linear-gradient(140deg,#ffe1b5,#f0ae70); display:grid; place-items:center; }.mini-avatar::after { content:"🐶"; font-size:20px; }.post-header strong,.post-header span { display:block; }.post-header strong { font-size:13px; }.post-meta { font-size:11px; color:var(--muted); margin-top:1px; }.more { margin-left:auto; border:0; background:transparent; color:var(--muted); letter-spacing:1px; }.post-image { aspect-ratio:16/9; background:linear-gradient(160deg,#c3e5e5,#7fbab0); background-size:cover; background-position:center; position:relative; }.post-image:empty::after { content:"🐕"; font-size:80px; position:absolute; left:45%; bottom:13%; }.post-body { padding:14px 15px 13px; }.caption { margin:0 0 10px; font-size:14px; line-height:1.65; }.route-summary { display:flex; gap:6px; align-items:center; background:#f5f8f3; border-radius:9px; padding:8px; font-size:12px; color:#4e6256; }.post-actions { display:flex; gap:18px; margin-top:13px; }.post-actions button { border:0; background:transparent; color:#58665e; padding:0; font-size:12px; }.like-button.liked { color:#e95a65; font-weight:700; }
.back-button,.text-button { border:0; background:transparent; color:#637167; padding:0; font-size:13px; }.back-button { margin-bottom:18px; }.view > h1 + .muted { line-height:1.7; margin:8px 0 18px; }.map-card { border-radius:20px; overflow:hidden; position:relative; border:1px solid #dce9dc; }.map-card #route-map { height:300px; width:100%; z-index:0; }.map-note { position:absolute; right:10px; bottom:10px; font-size:11px; padding:6px 9px; background:#fffffff0; border-radius:8px; color:#537159; z-index:500; }.record-controls { display:flex; justify-content:space-between; margin:12px 2px 20px; }.secondary-button { border:1px solid #d7e0d7; background:#fff; border-radius:999px; padding:9px 13px; color:#41624a; font-weight:700; font-size:13px; }form { display:grid; gap:14px; }label { display:grid; gap:6px; font-size:13px; font-weight:700; }input[type=text],textarea { width:100%; border:1px solid #dddcd6; border-radius:11px; padding:11px; color:var(--ink); outline-color:var(--orange); background:#fff; resize:vertical; }.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.camera-button { display:flex; align-items:center; justify-content:center; gap:9px; border:1.5px dashed #e1c6a7; background:#fffaf4; color:#8b653b; border-radius:12px; padding:14px; font-weight:700; }.camera-button span { font-size:19px; }.photo-preview { height:160px; border-radius:12px; background-size:cover; background-position:center; }.camera-dialog { width:min(94vw,480px); padding:0; border:0; border-radius:20px; background:#19221d; color:#fff; overflow:hidden; }.camera-dialog::backdrop { background:#142017b8; }.camera-topbar { display:flex; justify-content:space-between; align-items:center; padding:15px 17px; font-size:14px; }.camera-topbar button { border:0; background:transparent; color:#fff; font-size:28px; line-height:1; }.camera-stage { position:relative; min-height:280px; background:#0c120e; display:grid; place-items:center; }.camera-stage video { width:100%; max-height:66vh; object-fit:cover; }.camera-stage p { position:absolute; color:#d8e2d8; font-size:13px; }.camera-actions { min-height:80px; display:flex; align-items:center; justify-content:center; gap:18px; padding:13px; }.camera-actions > button:not(.shutter) { border:0; background:transparent; color:#fff; font-size:13px; }.camera-actions .primary-button { color:#fff; background:var(--orange); padding:9px 13px; }.shutter { width:55px; height:55px; border-radius:50%; background:#fff; border:4px solid #8f9a91; padding:5px; }.shutter span { display:block; width:100%; height:100%; border-radius:50%; background:var(--orange); }
.profile-hero { display:flex; align-items:center; gap:17px; padding:17px 0 22px; }.profile-avatar { height:75px; width:75px; border-radius:50%; display:grid; place-items:center; background:#ffe4c3; font-size:40px; }.profile-hero h1 { line-height:1; }.profile-stats { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line); padding:15px 0; margin-bottom:25px; }.profile-stats div { display:grid; text-align:center; border-right:1px solid var(--line); }.profile-stats div:last-child { border:0; }.profile-stats strong { font-family:"DM Sans"; font-size:21px; }.profile-stats span { color:var(--muted); font-size:11px; }.profile-view h2 { margin-bottom:14px; }
.bottom-nav { width:min(100%,700px); position:fixed; bottom:0; left:50%; transform:translateX(-50%); height:68px; background:#fffefdf5; backdrop-filter:blur(10px); border-top:1px solid #eeeae4; display:flex; justify-content:space-around; z-index:4; }.nav-item { min-width:90px; padding:8px 15px 6px; display:grid; place-items:center; gap:1px; background:transparent; border:0; color:#98a299; font-size:10px; }.nav-item span { font-size:21px; line-height:22px; }.nav-item.selected { color:var(--orange); font-weight:700; }#toast { position:fixed; left:50%; bottom:85px; transform:translate(-50%,20px); background:#26342d; color:#fff; padding:10px 14px; border-radius:999px; font-size:12px; opacity:0; transition:.25s; pointer-events:none; z-index:6; white-space:nowrap; }#toast.show { opacity:1; transform:translate(-50%,0); }.privacy-note { margin:15px 2px -14px; padding:10px 12px; border-radius:10px; background:#f2f8f1; color:#52705a; font-size:11px; line-height:1.55; }
@media (max-width:440px) { .topbar,.view { padding-left:17px; padding-right:17px; }.topbar { height:65px; }.topbar .primary-button { padding:9px 12px; font-size:12px; }.hero { min-height:176px; padding:23px; }.hero h1,.view h1 { font-size:25px; }.pet-avatar { width:85px;height:85px;font-size:48px; }.map-card #route-map { height:250px; }.post-image { aspect-ratio:1.45; } }
.album-card { width:100%; margin-top:17px; display:flex; align-items:center; gap:11px; text-align:left; color:#424735; border:1px solid #eadfb9; border-radius:15px; background:linear-gradient(105deg,#fff9e9,#f8f2dd); padding:14px; }.album-card > span:first-child { font-size:26px; }.album-card strong,.album-card small { display:block; }.album-card strong { font-size:13px; }.album-card small { margin-top:3px; color:#7c7b6b; font-size:11px; }.album-card b { margin-left:auto; font-size:24px; font-weight:400; }.premium-hero { padding:25px; border-radius:22px; background:linear-gradient(145deg,#384f43,#1f3028); color:#fff; }.premium-hero .eyebrow { color:#f8c66c; }.premium-hero h1 { font-size:27px; line-height:1.35; }.premium-hero p:last-child { margin:12px 0 0; color:#e2ebe4; font-size:12px; line-height:1.7; }.album-preview { min-height:148px; margin:18px 0 25px; padding:18px; border:1px solid #e5dfd5; border-radius:16px; background:#fffdf8; }.album-preview .month { color:#bd7a32; font-family:"DM Sans"; font-size:11px; font-weight:700; letter-spacing:1px; }.album-preview h3 { margin:5px 0 10px; font-size:18px; }.album-preview p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }.album-preview.locked { display:grid; place-items:center; text-align:center; color:#6e725d; }.album-preview.locked span { font-size:25px; }.plan-card { width:100%; display:flex; align-items:center; justify-content:space-between; position:relative; text-align:left; border:1px solid #dfddd5; border-radius:14px; background:#fff; padding:15px; margin-top:10px; color:var(--ink); }.plan-card:hover { border-color:#e79d4e; }.plan-card span:not(.plan-badge) strong,.plan-card span:not(.plan-badge) small { display:block; }.plan-card span:not(.plan-badge) strong { font-size:14px; }.plan-card span:not(.plan-badge) small,.plan-card b small { color:var(--muted); font-size:11px; font-weight:400; }.plan-card b { font-family:"DM Sans"; font-size:16px; }.plan-badge { position:absolute; right:12px; top:-9px; background:#f97316; color:#fff; border-radius:99px; padding:2px 7px; font-size:10px; }.payment-note { color:var(--muted); font-size:11px; line-height:1.6; }.active-plan { padding:14px; border-radius:12px; background:#e4f4e5; color:#366140; font-weight:700; font-size:14px; }#premium-active p { color:var(--muted); font-size:12px; }
.album-sample { margin:20px -24px 26px; padding:19px 24px 22px; background:#f5f2ea; }.sample-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:12px; }.sample-heading h2 { margin:0; font-size:17px; }.sample-heading span { color:#8a8f83; font-size:10px; }.album-pages { display:flex; gap:12px; overflow-x:auto; padding:2px 0 7px; scroll-snap-type:x mandatory; }.album-page { flex:0 0 180px; min-height:237px; padding:16px; border-radius:4px 15px 15px 4px; box-shadow:5px 7px 14px #796f5f24; scroll-snap-align:start; display:flex; flex-direction:column; }.album-page span,.album-page small { font-family:"DM Sans"; font-size:10px; letter-spacing:.7px; }.album-page strong { font-size:18px; line-height:1.45; }.album-cover { position:relative; overflow:hidden; color:#fff9ea; background:linear-gradient(150deg,#a76a32,#553b2a); }.album-cover span { color:#ffd78d; }.album-cover strong { margin-top:20px; font-size:22px; }.album-cover i { margin:auto; align-self:center; font-size:57px; font-style:normal; transform:rotate(-8deg); }.album-cover small { color:#ffe4b1; }.album-walk { background:#fffef7; color:#35413a; }.sample-photo { height:89px; display:grid; place-items:center; margin:-16px -16px 13px; background:linear-gradient(145deg,#abced6,#e8b375); font-size:50px; }.album-walk span { color:#a77845; }.album-walk strong { margin-top:8px; font-size:16px; }.album-walk p { margin-top:auto; padding-top:9px; border-top:1px solid #e9e1d7; font-family:"DM Sans"; font-size:11px; }.album-summary { color:#3d513a; background:linear-gradient(140deg,#dcecd8,#f8f5de); }.album-summary span { color:#718d69; }.album-summary strong { margin:18px 0 11px; font-size:22px; }.album-summary div { font-family:"DM Sans"; font-size:13px; }.album-summary b { font-size:34px; }.album-summary p { margin-top:auto; font-size:10px; line-height:1.6; }
.pet-form { margin:0 0 24px; padding:16px; border:1px solid var(--line); border-radius:15px; background:#fffdf9; }.form-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:13px; }.form-heading h2 { font-size:16px; }.form-heading span { color:var(--muted); font-size:10px; }.pet-form fieldset { border:0; padding:0; margin:0; }.pet-form legend { font-size:13px; font-weight:700; margin:4px 0 8px; }.icon-options { display:flex; gap:8px; }.icon-options label { display:block; }.icon-options input { position:absolute; opacity:0; }.icon-options span { width:42px; height:42px; display:grid; place-items:center; border:1px solid #e3e1dc; border-radius:50%; background:#fff; font-size:23px; }.icon-options input:checked + span { border:2px solid var(--orange); background:#fff4e7; }.pet-form .secondary-button { margin-top:14px; }
.icon-photo-picker { margin-top:13px; display:flex; align-items:center; justify-content:space-between; border:1.5px dashed #e1c6a7; background:#fffaf4; border-radius:10px; padding:10px 12px; color:#8b653b; cursor:pointer; }.icon-photo-picker input { display:none; }.icon-photo-picker span { color:#8b653b; font-size:12px; font-weight:400; }.pet-photo-preview { width:58px; height:58px; margin-top:10px; border-radius:50%; background-size:cover; background-position:center; border:2px solid #f2a85f; }
.ad-banner { position:relative; display:flex; align-items:center; gap:10px; margin:0 0 20px; padding:14px; overflow:hidden; border:1px solid #e6ded0; border-radius:14px; background:linear-gradient(105deg,#fff7e9,#f4e9d7); color:#5f4930; text-decoration:none; }.ad-label { position:absolute; top:7px; left:8px; color:#997958; font-family:"DM Sans"; font-size:9px; letter-spacing:.5px; }.ad-copy { display:grid; gap:3px; margin-left:13px; }.ad-copy strong { font-size:13px; }.ad-copy small { color:#8b7965; font-size:10px; }.ad-product { margin-left:auto; font-size:29px; transform:rotate(-12deg); }.ad-arrow { color:#9a8062; font-size:23px; }
#nav-pet-name { font-size:10px; }.profile-avatar.has-photo { background-size:cover; background-position:center; }
.logout-button { margin:-10px 0 16px; border:0; background:transparent; color:#9a6b55; padding:0; font-size:11px; text-decoration:underline; }
.policy-dialog { width:min(92vw,560px); max-height:78vh; border:0; border-radius:18px; padding:0; color:var(--ink); box-shadow:0 18px 55px #26342d38; }.policy-dialog::backdrop { background:#26342d88; }.policy-head { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding:17px 19px; border-bottom:1px solid var(--line); background:#fff; font-size:16px; }.policy-head button { border:0; background:transparent; color:var(--muted); font-size:26px; line-height:1; }.policy-content { padding:17px 19px 25px; overflow:auto; font-size:12px; line-height:1.8; }.policy-content p { margin:0 0 14px; }.policy-content h3 { margin:20px 0 5px; font-size:13px; }
.auth-legal a { color:#6b766d; text-decoration:underline; }.site-legal { width:min(100%,700px); margin:0 auto; padding:0 24px 92px; background:#fff; color:var(--muted); font-size:10px; text-align:center; }.site-legal a { color:#65746a; }
.today-weather { display:grid; grid-template-columns:auto 1fr; column-gap:9px; align-items:center; width:max-content; max-width:100%; margin-top:14px; padding:8px 10px; border-radius:12px; background:#fffaf0b8; color:#57675d; }.today-weather span { grid-row:span 2; color:#98734c; font-family:"DM Sans"; font-size:11px; font-weight:700; }.today-weather strong { font-size:13px; }.today-weather small { font-size:10px; line-height:1.5; }