/* ============ Themes (CSS custom properties) ============ */
:root,[data-theme="cream"]{
  /* น้องครีม — sampled from the owner's cat */
  --cream:#FBF5EC; --bg-rgb:251,245,236; --surface:#FFFFFF; --surface-rgb:255,255,255;
  --cream2:#F1E6D6; --latte:#E6D6C1; --fawn:#C9B39A; --taupe:#967F68;
  --ink:#3A2B22; --ink2:#6E5646; --line:#E9DCCB;
  --caramel:#BF9B6F; --caramel-d:#9A6533; --ear:#E7CECB; --blush:#D99A94; --rose:#B35F57; --rose-d:#A8524D;
  --amber:#E2B04A; --amber-l:#F8EBC8; --amber-d:#7A5A12; --accent-rgb:226,176,74; --on-accent:#3A2B22;
  --dot:#6F87A3; --dot-rgb:111,135,163; --sage-l:#EEF1E2; --sage-d:#4F5A35; --sage-bd:#B9C69A;
  --grad:linear-gradient(135deg,#B35F57 0%,#A8663F 55%,#9A6533 100%); --grad-text:linear-gradient(120deg,#9A6533 0%,#B35F57 100%);
  --btn-fg:#FFFFFF; --btn-glow-rgb:154,101,51; --shadow-rgb:94,70,54; --shadow-dk-rgb:58,43,34;
  --toast-bg:#3A2B22; --toast-fg:#FBF5EC;
  --map-bg:#EFE6DA; --map-filter:saturate(.42) sepia(.38) hue-rotate(-6deg) brightness(1.05) contrast(.9); --map-op:.86;
  --glow1:#F3DAD5; --glow2:#E2E8EF; --blob1:#EFCFC9; --blob2:#D5DEE8; --blob3:#F5DFA6;
  --handle:#DCCBB6; --upload-bd:#D9A9A3; --upload-bg2:#FBEFEC; --seg-bg:#EFE3D3;
  --m0:#E8B4AE; --m1:#D4AE7E; --m2:#E5C068; --m3:#B7C39A; --m4:#AFBFD0; --m5:#CDB89E; --m6:#D99A94; --m7:#C9A98A;
  --lg1:#C9B39A; --lg2:#BF9B6F; --lg3:#9A6533; --l-ear:#E7A9A3; --l-face:#FBF5EC; --l-stripe:#967F68; --l-bridge:#E6D6C1;
  --l-eye1:#E2B04A; --l-eye2:#C99A35; --l-eye3:#7E8B5A; --l-pupil:#3A2B22; --l-blush:#E7A9A3; --l-nose:#C97C74; --l-mouth:#6E5646; --l-whisker:#C9B39A;
  color-scheme:light;
}
[data-theme="orange"]{
  /* ส้มลายเสือ — orange tabby, green eyes */
  --cream:#FFF7EF; --bg-rgb:255,247,239; --surface:#FFFFFF; --surface-rgb:255,255,255;
  --cream2:#FFE9D5; --latte:#FBD9BC; --fawn:#F2B988; --taupe:#C9763D;
  --ink:#3B2416; --ink2:#7A4A2C; --line:#F6DDC6;
  --caramel:#F08A3E; --caramel-d:#C2511A; --ear:#FFD9CB; --blush:#FF9F7F; --rose:#E0533F; --rose-d:#B83A28;
  --amber:#7DBB5C; --amber-l:#E7F4DD; --amber-d:#3B6B25; --accent-rgb:125,187,92; --on-accent:#1C3410;
  --dot:#4F86D6; --dot-rgb:79,134,214; --sage-l:#EAF5E1; --sage-d:#3B6B25; --sage-bd:#B5DB9E;
  --grad:linear-gradient(135deg,#CF521E 0%,#BC4519 55%,#A33A15 100%); --grad-text:linear-gradient(120deg,#E0612A 0%,#B8441A 100%);
  --btn-fg:#FFFFFF; --btn-glow-rgb:210,90,30; --shadow-rgb:150,80,30; --shadow-dk-rgb:70,35,10;
  --toast-bg:#3B2416; --toast-fg:#FFF7EF;
  --map-bg:#FBEBDD; --map-filter:saturate(.55) sepia(.32) hue-rotate(-14deg) brightness(1.06) contrast(.9); --map-op:.88;
  --glow1:#FFD6BE; --glow2:#FFEAB8; --blob1:#FFC5A3; --blob2:#FFE2A6; --blob3:#D9EFC7;
  --handle:#F2C9A8; --upload-bd:#F5B48C; --upload-bg2:#FFF0E4; --seg-bg:#FCE3CC;
  --m0:#F59A5B; --m1:#FFC48A; --m2:#F7B267; --m3:#FFB4A2; --m4:#E8A66A; --m5:#A7D38F; --m6:#FFD27F; --m7:#F28C6B;
  --lg1:#FFB46E; --lg2:#F08A3E; --lg3:#C2511A; --l-ear:#FFC1AE; --l-face:#FFF4E6; --l-stripe:#E07A35; --l-bridge:#FFD9B5;
  --l-eye1:#CDE07A; --l-eye2:#8FBF4A; --l-eye3:#5F8A35; --l-pupil:#3B2416; --l-blush:#FFB49A; --l-nose:#E77A6A; --l-mouth:#7A4A2C; --l-whisker:#F2B988;
  color-scheme:light;
}
[data-theme="dark"]{
  /* ดำตาเหลือง — black cat, gold eyes */
  --cream:#141218; --bg-rgb:20,18,24; --surface:#221F28; --surface-rgb:34,31,40;
  --cream2:#2C2833; --latte:#3A3442; --fawn:#5A5263; --taupe:#8C8296;
  --ink:#F5EFE6; --ink2:#BDB3AA; --line:#36313E;
  --caramel:#F2C14E; --caramel-d:#F5C443; --ear:#3B2B35; --blush:#E58C9A; --rose:#FF7A8A; --rose-d:#FF93A1;
  --amber:#F5C443; --amber-l:#382E16; --amber-d:#F7D27A; --accent-rgb:245,196,67; --on-accent:#1A1610;
  --dot:#7FA8FF; --dot-rgb:127,168,255; --sage-l:#1E2A22; --sage-d:#A9D7A0; --sage-bd:#3E5A42;
  --grad:linear-gradient(135deg,#F8D46A 0%,#F0B23E 55%,#E0912C 100%); --grad-text:linear-gradient(120deg,#F8D46A 0%,#F0A34A 100%);
  --btn-fg:#1E1710; --btn-glow-rgb:240,180,60; --shadow-rgb:0,0,0; --shadow-dk-rgb:0,0,0;
  --toast-bg:#2E2A35; --toast-fg:#F5EFE6;
  --map-bg:#1B1A20; --map-filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.88) saturate(.35) sepia(.1); --map-op:.92;
  --glow1:#3A2E14; --glow2:#272042; --blob1:#4A3A16; --blob2:#2E2550; --blob3:#3B2A1A;
  --handle:#45404E; --upload-bd:#5E4E2C; --upload-bg2:#1C1A21; --seg-bg:#2C2833;
  --m0:#F5C443; --m1:#E8A23A; --m2:#C9B6FF; --m3:#FF93A1; --m4:#7FD1C1; --m5:#9FB8FF; --m6:#F2DFA0; --m7:#BDB3AA;
  --lg1:#4A4452; --lg2:#2E2A35; --lg3:#17151B; --l-ear:#C77A88; --l-face:#2A2630; --l-stripe:#2A2630; --l-bridge:#2A2630;
  --l-eye1:#FFE07A; --l-eye2:#F5B83A; --l-eye3:#B9C25A; --l-pupil:#0E0D11; --l-blush:#6A3E4C; --l-nose:#E58C9A; --l-mouth:#BDB3AA; --l-whisker:#8C8296;
  color-scheme:dark;
}
[data-theme="siamese"]{
  /* วิเชียรมาศ — Siamese: ivory, seal-brown points, sapphire eyes */
  --cream:#F8F4EE; --bg-rgb:248,244,238; --surface:#FFFFFF; --surface-rgb:255,255,255;
  --cream2:#EEE6DB; --latte:#E3D6C6; --fawn:#BFA894; --taupe:#7A6252;
  --ink:#2A1F1A; --ink2:#66544A; --line:#E6DCD0;
  --caramel:#8C6A55; --caramel-d:#5C3F31; --ear:#EBD3CC; --blush:#D9A49B; --rose:#C2575A; --rose-d:#A9474B;
  --amber:#3672CF; --amber-l:#E1ECFB; --amber-d:#23549E; --accent-rgb:54,114,207; --on-accent:#FFFFFF;
  --dot:#3672CF; --dot-rgb:54,114,207; --sage-l:#E8F0FA; --sage-d:#2A4F86; --sage-bd:#B7CDEF;
  --grad:linear-gradient(135deg,#6B4A3A 0%,#4A3228 55%,#2F211B 100%); --grad-text:linear-gradient(120deg,#5C3F31 0%,#3672CF 100%);
  --btn-fg:#FFF8F0; --btn-glow-rgb:74,50,40; --shadow-rgb:70,50,40; --shadow-dk-rgb:42,31,26;
  --toast-bg:#2A1F1A; --toast-fg:#F8F4EE;
  --map-bg:#F1ECE5; --map-filter:saturate(.35) sepia(.2) hue-rotate(-5deg) brightness(1.06) contrast(.9); --map-op:.85;
  --glow1:#E9DCCF; --glow2:#DCE7F8; --blob1:#E6D5C6; --blob2:#CFDDF5; --blob3:#D9C4B3;
  --handle:#D8CBBE; --upload-bd:#C9AE9C; --upload-bg2:#F6EFE8; --seg-bg:#ECE3D8;
  --m0:#8C6A55; --m1:#C9B39F; --m2:#6F95D6; --m3:#A98A76; --m4:#D9A49B; --m5:#9DB7E3; --m6:#5C3F31; --m7:#BFA894;
  --lg1:#A3826C; --lg2:#6B4A3A; --lg3:#3A2820; --l-ear:#D9A49B; --l-face:#F8F1E8; --l-stripe:#F8F1E8; --l-bridge:#9C7A64;
  --l-eye1:#8FC0FF; --l-eye2:#3672CF; --l-eye3:#23549E; --l-pupil:#1E1612; --l-blush:#EBC3BA; --l-nose:#8C5E55; --l-mouth:#5C3F31; --l-whisker:#BFA894;
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--cream);color:var(--ink);font-family:var(--font);font-weight:400;overflow:hidden}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,textarea{font:inherit;color:inherit}
.muted{color:var(--ink2);margin:.15rem 0 0;font-size:.9rem;font-weight:300}

/* Wordmark */
.wordmark{font-family:var(--brand);font-weight:700;font-size:1.25rem;line-height:1;letter-spacing:-.01em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;display:flex;flex-direction:column}
.wordmark span{font-size:.62em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-top:2px;opacity:.95}
.wordmark.big{font-size:3.3rem;align-items:center;margin:.2rem 0 .4rem}
.wordmark.big span{font-size:.36em;letter-spacing:.3em;margin-top:6px}

/* Splash */
.splash{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 80% at 20% 0%,var(--glow1) 0%,transparent 60%),radial-gradient(100% 70% at 100% 100%,var(--glow2) 0%,transparent 60%),var(--cream);
  transition:opacity .6s ease, transform .7s cubic-bezier(.7,0,.3,1)}
.splash.hide{opacity:0;transform:scale(1.08);pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55}
.b1{width:260px;height:260px;background:var(--blob1);top:-60px;left:-70px;animation:drift 9s ease-in-out infinite}
.b2{width:300px;height:300px;background:var(--blob2);bottom:-90px;right:-90px;animation:drift 11s ease-in-out infinite reverse}
.b3{width:180px;height:180px;background:var(--blob3);top:40%;right:-60px;animation:drift 8s ease-in-out infinite}
@keyframes drift{50%{transform:translate(20px,26px) scale(1.08)}}
.splash-inner{position:relative;text-align:center;padding:24px;display:flex;flex-direction:column;align-items:center;max-width:420px}
.splash-logo{width:104px;height:122px;display:block;filter:drop-shadow(0 14px 22px rgba(var(--btn-glow-rgb),.38));animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-3deg)}}
.tagline{font-size:1.15rem;line-height:1.55;margin:.3rem 0 1.4rem;color:var(--ink)}
.tagline b{font-weight:500;color:var(--coral)}
.splash-stats{display:flex;gap:10px;margin-bottom:1.6rem}
.splash-stats div{background:rgba(var(--surface-rgb),.75);backdrop-filter:blur(8px);border:1px solid var(--surface);border-radius:18px;padding:10px 16px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-width:84px}
.splash-stats b{font-family:var(--brand);font-size:1.35rem;color:var(--coral);font-weight:600}
.splash-stats small{font-size:.78rem;color:var(--ink2)}
.splash-note{font-size:.78rem;color:var(--ink2);margin-top:1rem}
.float-cats .fc{position:absolute;width:86px;height:86px;object-fit:cover;border-radius:50%;border:4px solid var(--surface);box-shadow:var(--shadow);animation:bob 4s ease-in-out infinite}
.fc1{top:6%;left:6%;transform:rotate(-8deg)} .fc2{top:10%;right:7%;width:70px!important;height:70px!important;animation-delay:-1s!important}
.fc3{bottom:3%;left:7%;width:66px!important;height:66px!important;animation-delay:-2s!important} .fc4{bottom:2.5%;right:8%;animation-delay:-3s!important}

/* Buttons */
.btn-primary{background:var(--grad);color:var(--btn-fg);font-weight:500;border-radius:999px;padding:14px 26px;font-size:1.05rem;
  box-shadow:0 12px 26px -8px rgba(var(--btn-glow-rgb),.55),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .15s, box-shadow .2s;position:relative;overflow:hidden}
.btn-primary:active{transform:scale(.96)}
.btn-primary.xl{padding:17px 38px;font-size:1.15rem}
.btn-primary.block{width:100%;margin-top:6px}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translateX(-100%);animation:shine 3.5s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(100%)}}
.btn-primary[disabled]{filter:grayscale(.4);opacity:.7}
.paw-ico{display:inline-block;animation:wiggle 1.6s ease-in-out infinite}
@keyframes wiggle{50%{transform:rotate(18deg)}}
.icon-btn{width:38px;height:38px;border-radius:50%;background:var(--cream2);display:grid;place-items:center;font-size:.95rem;color:var(--ink2);flex:none}

/* App layout */
.app{position:fixed;inset:0}
#map{position:absolute;inset:0;background:var(--map-bg)}
.leaflet-tile-pane{filter:var(--map-filter);opacity:var(--map-op);transition:filter .5s}
.glass{background:rgba(var(--bg-rgb),.84);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(var(--surface-rgb),.9);box-shadow:var(--shadow)}
.topbar{position:absolute;z-index:1000;top:calc(12px + env(safe-area-inset-top,0px));left:12px;right:12px;border-radius:22px;padding:10px 12px 10px 10px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:8px}
.brand-logo{width:34px;height:40px;display:block}
.demo-pill{font-size:.72rem;padding:5px 10px;border-radius:999px;background:var(--amber-l);color:var(--amber-d);border:1px dashed var(--amber);white-space:nowrap}
.chips{position:absolute;z-index:1000;top:calc(84px + env(safe-area-inset-top,0px));left:0;right:0;display:flex;gap:8px;padding:0 12px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:8px 14px;border-radius:999px;background:rgba(var(--surface-rgb),.92);box-shadow:var(--shadow-sm);font-size:.88rem;border:1px solid var(--surface);transition:all .2s}
.chip.active{background:var(--amber);color:var(--on-accent);border-color:var(--surface);font-weight:500;box-shadow:0 6px 16px -6px rgba(var(--accent-rgb),.5)}
.locate{position:absolute;z-index:1000;right:12px;bottom:calc(214px + var(--safe-b));width:46px;height:46px;border-radius:16px;display:grid;place-items:center;color:var(--coral)}

/* Tray */
.tray{position:absolute;z-index:1000;left:0;right:0;bottom:0;padding-bottom:calc(14px + var(--safe-b));pointer-events:none}
.carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 16px 14px;scrollbar-width:none;pointer-events:auto}
.carousel::-webkit-scrollbar{display:none}
.card{flex:none;width:236px;scroll-snap-align:center;background:var(--surface);border-radius:22px;padding:8px;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow);border:2px solid transparent;transition:transform .25s,border-color .25s;text-align:left}
.card.active{border-color:var(--amber);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.25),var(--shadow);transform:translateY(-4px)}
.card img{width:64px;height:64px;border-radius:16px;object-fit:cover;flex:none}
.card .ct{min-width:0;flex:1}
.card b{display:block;font-weight:500;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card small{display:block;color:var(--ink2);font-size:.78rem;font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .meta{display:flex;gap:4px;white-space:nowrap;margin-top:4px;font-size:.75rem;color:var(--ink2)}
.card .meta .h{color:var(--coral)}
.badge-new{font-size:.62rem;background:var(--sage-l);color:var(--sage-d);border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:2px}
.fab{pointer-events:auto;display:flex;align-items:center;gap:8px;margin:2px auto 0;background:var(--grad);color:var(--btn-fg);font-weight:500;font-size:1.08rem;padding:15px 30px;border-radius:999px;
  box-shadow:0 14px 30px -8px rgba(var(--btn-glow-rgb),.6),0 0 0 6px rgba(var(--surface-rgb),.7);transition:transform .15s}
.fab:active{transform:scale(.95)}
.fab-paw{font-size:1.2rem;display:inline-block;animation:wiggle 1.8s ease-in-out infinite}
.empty{pointer-events:auto;margin:0 16px 12px;background:var(--surface);border-radius:22px;padding:16px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow)}
.empty .logo{width:46px;height:54px;flex:none} .empty b{font-weight:500} .empty small{display:block;color:var(--ink2);font-weight:300}

/* Markers */
.leaflet-container{font-family:var(--font)}
.cat-marker{width:58px!important;height:66px!important}
.cm{position:relative;width:58px;height:66px;transform-origin:50% 100%;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.cm .head{position:absolute;left:5px;top:10px;width:48px;height:48px;border-radius:50%;background:var(--c);padding:4px;box-shadow:0 8px 16px -6px rgba(var(--shadow-dk-rgb),.45)}
.cm .head img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2px solid var(--surface)}
.cm .ear{position:absolute;top:2px;width:20px;height:22px;background:var(--c);border-radius:4px 14px 2px 14px}
.cm .ear.l{left:6px;transform:rotate(-12deg);border-radius:3px 16px 4px 16px}
.cm .ear.r{right:6px;transform:scaleX(-1) rotate(-12deg);border-radius:3px 16px 4px 16px}
.cm .ear::after{content:"";position:absolute;inset:5px 6px 6px 5px;background:rgba(255,255,255,.55);border-radius:2px 10px 2px 10px}
.cm .tip{position:absolute;left:23px;bottom:0;width:12px;height:12px;background:var(--c);transform:rotate(45deg);border-radius:2px}
.cm .cnt{position:absolute;right:-4px;top:40px;background:var(--surface);color:var(--coral);font-size:.66rem;font-weight:500;border-radius:999px;padding:1px 6px;box-shadow:var(--shadow-sm)}
.cat-marker.active .cm{transform:scale(1.22)}
.cat-marker.active{z-index:9999!important}
.cm.drop{animation:drop .9s cubic-bezier(.3,1.5,.5,1)}
@keyframes drop{0%{transform:translateY(-120px) scale(.6);opacity:0}60%{transform:translateY(0) scale(1.15,.85);opacity:1}80%{transform:scale(.95,1.05)}100%{transform:none}}
.cat-marker:hover .cm{animation:hop .5s}
@keyframes hop{40%{transform:translateY(-8px)}}
.me-dot{width:18px!important;height:18px!important}
.me-dot div{width:18px;height:18px;border-radius:50%;background:var(--dot);border:3px solid var(--surface);box-shadow:0 0 0 6px rgba(var(--dot-rgb),.28)}
.leaflet-control-attribution{font-size:9px!important;background:rgba(var(--surface-rgb),.7)!important;border-radius:8px 0 0 0}
.leaflet-control-zoom{display:none}

/* Sheets */
.scrim{position:absolute;inset:0;z-index:1100;background:rgba(var(--shadow-dk-rgb),.32);opacity:0;pointer-events:none;transition:opacity .35s}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{position:absolute;z-index:1200;left:0;right:0;bottom:0;max-height:86%;background:var(--cream);border-radius:30px 30px 0 0;box-shadow:var(--shadow-lg);
  transform:translateY(105%);transition:transform .5s cubic-bezier(.2,.9,.25,1.05);display:flex;flex-direction:column}
.sheet.open{transform:translateY(0)}
.handle{width:44px;height:5px;border-radius:9px;background:var(--handle);margin:10px auto 4px;flex:none}
.sheet-body{overflow-y:auto;padding:6px 18px calc(22px + var(--safe-b));overscroll-behavior:contain}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:4px 0 14px}
.sheet h2{margin:0;font-weight:500;font-size:1.45rem}

/* Cat detail */
.hero{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shadow);margin-top:4px}
.hero img{width:100%;height:100%;object-fit:cover;display:block}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(40,28,20,.66))}
.hero .over{position:absolute;z-index:1;left:16px;right:16px;bottom:14px;color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.hero h3{margin:0;font-size:1.9rem;font-weight:500;line-height:1.1;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.hero .area{font-size:.9rem;opacity:.95;font-weight:300;display:flex;align-items:center;gap:4px;margin-top:4px}
.hero .demo-pill{position:absolute;z-index:1;top:12px;left:12px}
.hero .close{position:absolute;z-index:1;top:10px;right:10px;background:rgba(var(--surface-rgb),.85);backdrop-filter:blur(6px)}
.heart{display:flex;align-items:center;gap:6px;background:var(--surface);color:var(--coral);border-radius:999px;padding:9px 15px 9px 12px;font-weight:500;box-shadow:var(--shadow);flex:none}
.heart svg{width:22px;height:22px;transition:transform .2s}
.heart.on{background:var(--grad);color:var(--btn-fg)}
.heart.pop svg{animation:pop .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes pop{30%{transform:scale(1.6) rotate(-10deg)}}
.floaty{position:fixed;z-index:3000;pointer-events:none;font-size:20px;animation:floatup 1s ease-out forwards}
@keyframes floatup{to{transform:translate(var(--dx),-90px) scale(1.4);opacity:0}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.stat{background:var(--surface);border-radius:18px;padding:10px;text-align:center;box-shadow:var(--shadow-sm)}
.stat b{display:block;font-family:var(--brand);font-weight:600;font-size:1.2rem;color:var(--ink)}
.stat small{color:var(--ink2);font-size:.75rem;font-weight:300}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tagrow span{font-size:.8rem;padding:4px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.safety{display:flex;gap:8px;align-items:flex-start;background:var(--sage-l);color:var(--sage-d);border-radius:16px;padding:10px 12px;font-size:.82rem;line-height:1.5;margin:8px 0 0;font-weight:300}
.safety b{font-weight:500}
.sec-title{display:flex;justify-content:space-between;align-items:center;margin:18px 0 10px}
.sec-title h4{margin:0;font-weight:500;font-size:1.05rem}
.sec-title small{color:var(--ink2);font-weight:300}
.timeline{display:flex;flex-direction:column;gap:10px}
.ci{display:flex;gap:12px;background:var(--surface);border-radius:20px;padding:10px;box-shadow:var(--shadow-sm);align-items:center}
.ci img{width:62px;height:62px;border-radius:14px;object-fit:cover;flex:none}
.ci .who{display:flex;align-items:center;gap:6px;font-weight:500;font-size:.92rem}
.ava{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;color:#fff;background:var(--c,var(--blush));flex:none}
.ci p{margin:2px 0 0;font-size:.85rem;font-weight:300;color:var(--ink)}
.ci time{font-size:.74rem;color:var(--ink2);font-weight:300}

.ci.fresh{animation:flash 1.6s}
@keyframes flash{0%{box-shadow:0 0 0 3px var(--coral)}100%{box-shadow:var(--shadow-sm)}}
.btn-soft{width:100%;margin-top:14px;padding:13px;border-radius:999px;background:var(--surface);border:2px solid var(--ear);color:var(--coral);font-weight:500}

/* Form */
.upload{display:block;position:relative;border-radius:24px;border:2px dashed var(--upload-bd);background:linear-gradient(180deg,var(--surface) 0%,var(--upload-bg2) 100%);aspect-ratio:16/10;cursor:pointer;overflow:hidden;transition:border-color .2s}
.upload:hover{border-color:var(--coral)}
.upload-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.upload-empty b{font-weight:500;margin-top:8px}
.upload-empty small{color:var(--ink2);font-weight:300;font-size:.82rem}
.upload-art{position:relative}
.upload-art .logo{width:60px;height:71px;display:block;animation:bob 3s ease-in-out infinite}
.upload-art .cam{position:absolute;right:-14px;bottom:-2px;background:var(--surface);border-radius:50%;width:32px;height:32px;display:grid;place-items:center;box-shadow:var(--shadow-sm);font-size:16px}
.upload-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:fadein .4s}
@keyframes fadein{from{opacity:0;transform:scale(1.04)}}
.upload-change{position:absolute;right:10px;bottom:10px;background:rgba(var(--surface-rgb),.9);border-radius:999px;padding:6px 12px;font-size:.8rem;box-shadow:var(--shadow-sm)}
.upload.has{border-style:solid;border-color:var(--surface);box-shadow:var(--shadow)}
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--seg-bg);border-radius:999px;padding:4px;margin:16px 0 4px}
.seg-btn{position:relative;z-index:1;padding:10px;border-radius:999px;font-size:.92rem;transition:color .25s;color:var(--ink2)}
.seg-btn.active{color:var(--ink);font-weight:500}
.seg-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:var(--surface);border-radius:999px;box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.seg.old .seg-ind{transform:translateX(100%)}
.field{display:block;margin-top:14px}
.field>span{display:block;font-size:.85rem;color:var(--ink2);margin:0 0 6px 4px}
.field input,.field textarea{width:100%;border:2px solid transparent;background:var(--surface);border-radius:16px;padding:13px 15px;font-size:1rem;outline:none;box-shadow:var(--shadow-sm);transition:border-color .2s;resize:none}
.field input:focus,.field textarea:focus{border-color:var(--amber);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.22)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:7px 13px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);font-size:.86rem;transition:all .2s}
.tag.on{background:var(--ear);border-color:var(--coral);color:var(--rose-d);transform:scale(1.04)}
.near-list{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.near{flex:none;width:84px;text-align:center;font-size:.8rem;border-radius:18px;padding:6px;background:var(--surface);border:2px solid transparent;box-shadow:var(--shadow-sm)}
.near img{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 4px}
.near small{display:block;color:var(--ink2);font-size:.68rem;font-weight:300}
.near.on{border-color:var(--coral);background:var(--upload-bg2)}
.loc-btn{width:100%;display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:16px;padding:13px 15px;box-shadow:var(--shadow-sm);text-align:left;border:2px solid transparent}
.loc-btn.ok{border-color:var(--sage-bd)}
.loc-dot{width:14px;height:14px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 5px rgba(var(--dot-rgb),.22);flex:none}
.loc-btn.busy .loc-dot{animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(var(--dot-rgb),.05)}}
.form-hint{text-align:center;color:var(--rose-d);font-size:.85rem;min-height:1.2em;margin:8px 0 0}

/* Toast + confetti */
.toast{position:absolute;z-index:1500;left:50%;top:calc(80px + env(safe-area-inset-top,0px));transform:translate(-50%,-30px);opacity:0;background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-size:.95rem;box-shadow:var(--shadow-lg);transition:all .4s cubic-bezier(.3,1.4,.5,1);white-space:nowrap;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:4000;overflow:hidden}
.paw{position:absolute;top:-30px;font-size:22px;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(var(--rot));}}

/* Desktop */
@media (min-width:820px){
  .topbar{right:auto;width:400px;left:20px;top:20px}
  .chips{left:20px;right:auto;top:94px;padding:0}
  .sheet{left:20px;right:auto;width:420px;bottom:20px;top:20px;max-height:none;border-radius:30px;transform:translateX(-120%)}
  .sheet.open{transform:none}
  .handle{display:none}
  .scrim{background:transparent}
  .tray{left:auto;right:20px;bottom:20px;width:min(760px,calc(100% - 480px))}
  .carousel{padding:6px 4px 14px}
  .locate{right:20px;bottom:200px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.map-fade{position:absolute;inset:0;z-index:500;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--bg-rgb),.86) 0%,rgba(var(--bg-rgb),0) 22%,rgba(var(--bg-rgb),0) 70%,rgba(var(--bg-rgb),.92) 100%)}

:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.near.on{border-color:var(--amber)!important;background:var(--amber-l)!important}
.tag.on{background:var(--amber-l)!important;border-color:var(--amber)!important;color:var(--amber-d)!important}
.loc-btn.ok{border-color:var(--sage-bd)}
.stat b{color:var(--caramel-d)}
.splash-stats b{color:var(--caramel-d)}
.tagline b{color:var(--rose)}
.heart{color:var(--rose-d)}
.card .meta .h{color:var(--rose-d)}
.cm .cnt{color:var(--rose-d)}
.toast{background:var(--toast-bg);color:var(--toast-fg)}
.toast .star{color:var(--amber)}
.paw svg{display:block}
.btn-primary,.fab{text-shadow:0 1px 1px rgba(var(--shadow-dk-rgb),.25)}
.svg-paw{width:1.15em;height:1.15em;vertical-align:-3px;display:inline-block}
.sparkle{position:absolute;color:var(--amber);font-size:18px;animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(.6) rotate(30deg);opacity:.4}}
.splash .s1{top:28%;left:16%}.splash .s2{top:22%;right:18%;animation-delay:-.8s}.splash .s3{bottom:30%;left:12%;animation-delay:-1.5s}.splash .s4{bottom:34%;right:14%;animation-delay:-.3s}
.demo-pill{background:var(--amber-l);color:var(--amber-d);border-color:var(--amber)}
.ava{color:var(--ink)}

:root{--r:22px; --font:'Mitr',system-ui,sans-serif; --brand:'Fredoka','Mitr',system-ui,sans-serif; --safe-b:env(safe-area-inset-bottom,0px);
  --coral:var(--rose); --peach:var(--blush); --mint:var(--sage-l)}
/* Logo (inline SVG, recolors with theme) */
.logo{display:block}
.logo .a{stop-color:var(--lg1)} .logo .b{stop-color:var(--lg2)} .logo .c{stop-color:var(--lg3)}
.logo .e1{stop-color:var(--l-eye1)} .logo .e2{stop-color:var(--l-eye2)} .logo .e3{stop-color:var(--l-eye3)}
.logo .ear{fill:var(--l-ear)} .logo .face{fill:var(--l-face)} .logo .str{stroke:var(--l-stripe)} .logo .brg{fill:var(--l-bridge)}
.logo .pup{fill:var(--l-pupil)} .logo .bl{fill:var(--l-blush)} .logo .nose{fill:var(--l-nose);stroke:var(--l-nose)} .logo .mo{stroke:var(--l-mouth)} .logo .wh{stroke:var(--l-whisker)}
/* Theme picker */
.top-right{display:flex;align-items:center;gap:8px}
.theme-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow-sm);border:2px solid var(--line);position:relative;transition:transform .2s}
.theme-btn:active{transform:scale(.92)}
.theme-btn .dots{width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--caramel-d) 0 25%,var(--rose) 0 50%,var(--amber) 0 75%,var(--latte) 0)}
.theme-btn .dots::after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--surface)}
.theme-btn:hover{transform:rotate(-12deg) scale(1.05)}
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 6px}
.tcard{position:relative;text-align:left;border-radius:22px;padding:10px;background:var(--cream);color:var(--ink);border:2px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .2s,border-color .2s,box-shadow .2s;overflow:hidden}
.tcard:active{transform:scale(.97)}
.tcard .prev{position:relative;height:96px;border-radius:16px;background:radial-gradient(90% 90% at 0% 0%,var(--glow1),transparent 70%),radial-gradient(90% 90% at 100% 100%,var(--glow2),transparent 70%),var(--cream2);display:grid;place-items:center;overflow:hidden}
.tcard .prev .logo{width:48px;height:57px;filter:drop-shadow(0 6px 10px rgba(var(--btn-glow-rgb),.35))}
.tcard .prev .mini{position:absolute;left:8px;right:8px;bottom:8px;height:12px;border-radius:999px;background:var(--grad)}
.tcard .sw{display:flex;gap:4px;margin:8px 0 6px}
.tcard .sw i{width:16px;height:16px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line)}
.tcard b{display:block;font-weight:500;font-size:1rem}
.tcard small{display:block;color:var(--ink2);font-weight:300;font-size:.74rem;line-height:1.3}
.tcard .check{position:absolute;top:16px;right:16px;width:24px;height:24px;border-radius:50%;background:var(--amber);color:var(--on-accent);display:grid;place-items:center;font-size:.8rem;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.tcard.on{border-color:var(--amber);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.22),var(--shadow)}
.tcard.on .check{transform:scale(1)}
#themeSheet .sheet-body{padding-bottom:calc(26px + var(--safe-b))}
html.theming,html.theming *{transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s ease,stroke .45s ease,stop-color .45s ease,box-shadow .45s ease!important}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
@media (min-width:820px){ #themeSheet{top:auto;bottom:auto;top:84px;max-height:calc(100% - 104px)} }