/* ============================================================
   PetTracker — "storybook park-day" design system.
   White-label ready: every brand decision is a token below, so a
   partner park can re-skin the whole app by overriding one block
   (see the three built-in themes).
   ============================================================ */

:root, :root[data-theme="meadow"]{
  /* Sunny Meadow (default) — picnic-blanket warmth */
  --bg:#FFF6E9;
  --bg-blob-a:#FFD9C4; --bg-blob-b:#CDEBD8; --bg-blob-c:#FFE9A8;
  --card:#FFFFFF;
  --ink:#43322B; --ink-soft:#8A7466; --ink-faint:#B5A496;
  --primary:#FF7A59;          /* coral — buttons, markers */
  --primary-deep:#E55A39;
  --secondary:#5FB58F;        /* meadow mint — safe things */
  --accent:#FFC94D;           /* sunny — highlights, badges */
  --danger:#E4572E;
  --danger-soft:#FFE3D6;
  --safe-soft:#DDF0E4;
  --line:#F0E2CE;
  --header:linear-gradient(100deg,#FF9A6B 0%,#FF7A59 45%,#F9B54A 100%);
  --header-ink:#FFFFFF;
  --map-tint:none;
  --shadow:0 10px 30px -14px rgba(120,72,40,.35);
  --radius:22px;
}

:root[data-theme="starlight"]{
  /* Starlight Parade — evening-in-the-park magic */
  --bg:#1D2240;
  --bg-blob-a:#33305E; --bg-blob-b:#27406B; --bg-blob-c:#3D2E63;
  --card:#272D52;
  --ink:#F6F1FF; --ink-soft:#BBB3DC; --ink-faint:#8C86B8;
  --primary:#FFD166;
  --primary-deep:#EBB43C;
  --secondary:#9D8DF1;
  --accent:#FF8FAB;
  --danger:#FF6B6B;
  --danger-soft:#4A2B45;
  --safe-soft:#2E3E63;
  --line:#3A3F6B;
  --header:linear-gradient(100deg,#2B2F63 0%,#46337A 55%,#6C3F8F 100%);
  --header-ink:#FFEFC2;
  --map-tint:grayscale(.2) brightness(.92);
  --shadow:0 12px 34px -14px rgba(0,0,10,.7);
  --radius:22px;
}

:root[data-theme="safari"]{
  /* Safari Trail — expedition-day adventure */
  --bg:#F6F0DC;
  --bg-blob-a:#E4D9B0; --bg-blob-b:#CBDDB9; --bg-blob-c:#F3D9A4;
  --card:#FFFDF4;
  --ink:#33402A; --ink-soft:#6E7A5C; --ink-faint:#9DA688;
  --primary:#D9772F;
  --primary-deep:#B85E1D;
  --secondary:#4D7C4A;
  --accent:#E8B636;
  --danger:#C14B27;
  --danger-soft:#F4DFCB;
  --safe-soft:#E0EAD3;
  --line:#E3D9BC;
  --header:linear-gradient(100deg,#3F6B3C 0%,#4D7C4A 55%,#8FA53F 100%);
  --header-ink:#FBF3D7;
  --map-tint:sepia(.18) saturate(.95);
  --shadow:0 10px 30px -14px rgba(60,70,30,.4);
  --radius:22px;
}

/* ---------------- base ---------------- */
*{margin:0;box-sizing:border-box}
body{
  font-family:'Nunito',sans-serif;background:var(--bg);color:var(--ink);
  height:100vh;overflow:hidden;transition:background .4s;
}
.hidden{display:none!important}
::selection{background:var(--accent);color:var(--ink)}

/* floating background blobs + paw confetti pattern */
.bg-blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:drift 24s ease-in-out infinite alternate}
.blob.b1{width:480px;height:480px;background:var(--bg-blob-a);top:-140px;left:-100px}
.blob.b2{width:420px;height:420px;background:var(--bg-blob-b);bottom:-160px;right:-80px;animation-delay:-8s}
.blob.b3{width:300px;height:300px;background:var(--bg-blob-c);top:40%;left:55%;animation-delay:-16s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,-30px) scale(1.12)}}

.brand{font-family:'Baloo 2',cursive;font-weight:800;font-size:30px;letter-spacing:-.01em}
.brand.sm{font-size:21px;color:var(--header-ink)}
.paw{display:inline-block}
.paw.wag{animation:wag 2.6s ease-in-out infinite;transform-origin:60% 60%}
@keyframes wag{0%,100%{transform:rotate(0)}6%{transform:rotate(-14deg)}12%{transform:rotate(10deg)}18%{transform:rotate(0)}}

/* entrance */
.pop-in{animation:pop .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--d,0s)}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}

/* ---------------- auth ---------------- */
.auth{height:100vh;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.auth-card{
  width:380px;background:var(--card);border-radius:28px;padding:36px;
  box-shadow:var(--shadow);border:3px solid var(--line);text-align:center;
}
.tagline{color:var(--ink-soft);font-size:15px;margin:4px 0 22px;font-weight:600}
.tabs{display:flex;gap:8px;margin-bottom:18px}
.tab{
  flex:1;padding:10px;border:2px solid var(--line);background:transparent;border-radius:99px;
  cursor:pointer;font-weight:800;font-size:13.5px;font-family:'Nunito',sans-serif;color:var(--ink-soft);
  transition:all .2s;
}
.tab.active{background:var(--primary);color:#fff;border-color:var(--primary);transform:scale(1.03)}
form{display:flex;flex-direction:column;gap:11px}
input,select{
  padding:12px 16px;border:2px solid var(--line);border-radius:14px;background:var(--card);
  font-family:'Nunito',sans-serif;font-size:14.5px;color:var(--ink);font-weight:600;transition:border-color .2s;
}
input:focus{outline:none;border-color:var(--primary)}
input::placeholder{color:var(--ink-faint);font-weight:500}
.error{color:var(--danger);font-size:12.5px;min-height:16px;font-weight:700}
.auth-pets{margin-top:18px;font-size:22px;letter-spacing:10px;animation:bobble 3s ease-in-out infinite}
@keyframes bobble{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ---------------- buttons ---------------- */
.btn{
  border:none;border-radius:99px;padding:11px 18px;font-weight:800;cursor:pointer;
  font-size:13.5px;font-family:'Nunito',sans-serif;color:var(--ink);
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s;
}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 6px 18px -6px var(--primary)}
.btn.primary.big{padding:13px;font-size:15px}
.btn.ghost{background:transparent;border:2px solid var(--line);color:var(--header-ink)}
.btn.tiny{padding:5px 12px;font-size:11.5px;background:var(--bg);border:2px solid var(--line);color:var(--ink-soft)}
.btn.tiny:hover{border-color:var(--primary);color:var(--primary-deep)}
.btn.cmd{background:var(--bg);border:2px solid var(--line);font-size:12px;padding:9px 6px;border-radius:14px}
.btn.cmd:hover{border-color:var(--primary)}
.btn.cmd.danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.sm-btn{padding:6px 14px;font-size:12px}

/* ---------------- app frame ---------------- */
.app{display:flex;flex-direction:column;height:100vh;position:relative;z-index:1}
header{
  display:flex;align-items:center;gap:18px;padding:10px 18px;
  background:var(--header);color:var(--header-ink);
  border-bottom:4px solid rgba(255,255,255,.25);
}
.greeting{font-size:13.5px;font-weight:700;opacity:.92;flex:1}
.head-right{display:flex;gap:9px;align-items:center}
.head-right select{
  padding:6px 10px;font-size:12px;border-radius:99px;border:2px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.18);color:var(--header-ink);font-weight:700;cursor:pointer;
}
.head-right select option{color:#333}
.user{font-size:13px;font-weight:700;opacity:.9}
.badge{
  font-family:'IBM Plex Mono',monospace;font-size:10px;padding:4px 11px;border-radius:99px;
  background:var(--bg);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;font-weight:600;
}
.badge.amber{background:var(--accent);color:#5d4500}
.badge.green{background:var(--safe-soft);color:var(--secondary)}
.badge.red{background:var(--danger-soft);color:var(--danger)}

.layout{flex:1;display:grid;grid-template-columns:344px 1fr;min-height:0}
aside{overflow-y:auto;padding:14px;scrollbar-width:thin}
#map{min-height:0;filter:var(--map-tint);border-radius:26px 0 0 0;overflow:hidden}

/* ---------------- panels ---------------- */
.panel{
  background:var(--card);border-radius:var(--radius);padding:15px 17px;margin-bottom:13px;
  box-shadow:var(--shadow);border:2px solid var(--line);
}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.panel h2{font-family:'Baloo 2',cursive;font-size:16.5px;font-weight:700;color:var(--ink)}
.hint{
  font-size:12.5px;color:var(--primary-deep);background:var(--danger-soft);
  padding:8px 12px;border-radius:12px;margin-bottom:8px;font-weight:700;
}

/* pets */
.pet-list .pet{
  display:flex;gap:10px;align-items:center;padding:9px 8px;cursor:pointer;border-radius:16px;
  transition:background .15s,transform .15s;
}
.pet-list .pet:hover{background:var(--bg);transform:translateX(3px)}
.pet-list .pet.sel{background:var(--safe-soft);border:2px solid var(--secondary)}
.pet .avatar{
  width:42px;height:42px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:22px;flex:none;
  border:2.5px solid var(--card);box-shadow:0 3px 8px -3px rgba(0,0,0,.3);
}
.pet .info{flex:1;min-width:0}
.pet .nm{font-weight:800;font-size:14.5px}
.pet .sub{font-size:11px;color:var(--ink-soft);font-weight:600}
.pet .badge{flex:none}

/* device */
.dev-meta{font-size:12px;color:var(--ink-soft);line-height:1.9;margin-bottom:10px;font-weight:600}
.dev-meta b{color:var(--primary-deep)}
.cmd-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px}
.row-btns{display:flex;gap:6px;flex-wrap:wrap}
.share-out{font-size:12px;margin-top:9px;word-break:break-all;font-weight:600}
.share-out a{color:var(--primary-deep)}

/* lists */
.zone-list .zone,.reminder-list .rem,.member-list .mem{
  display:flex;justify-content:space-between;align-items:center;font-size:13px;
  padding:7px 6px;border-bottom:2px dashed var(--line);font-weight:600;
}
.zone .meta,.rem .meta,.mem .meta{font-size:10.5px;color:var(--ink-faint);display:block;font-weight:600}
.del{cursor:pointer;color:var(--ink-faint);background:none;border:none;font-size:14px;transition:color .15s,transform .15s}
.del:hover{color:var(--danger);transform:scale(1.25)}

/* alerts */
.alert-list{max-height:230px;overflow-y:auto}
.alert-list .alert{
  padding:8px 8px;border-bottom:2px dashed var(--line);font-size:12.5px;cursor:pointer;
  font-weight:600;border-radius:10px;transition:background .15s;
}
.alert-list .alert:hover{background:var(--bg)}
.alert-list .alert.unread{background:var(--danger-soft);border-left:4px solid var(--primary);margin-bottom:3px;border-bottom:none}
.alert .ts{font-size:10px;color:var(--ink-faint);display:block;font-weight:700}

/* empty states */
.hint.empty{background:var(--bg);color:var(--ink-soft);text-align:center;font-weight:700}

/* ---------------- map marker ---------------- */
.pet-marker{filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.pet-marker .pin{
  width:46px;height:46px;border-radius:50% 50% 50% 6px;background:var(--primary);
  transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;
  border:3px solid #fff;
}
.pet-marker .pin span{transform:rotate(45deg);font-size:21px}
.pet-marker.bounce .pin{animation:markerBounce .9s cubic-bezier(.34,1.56,.64,1)}
@keyframes markerBounce{0%{transform:rotate(-45deg) translate(8px,-8px)}55%{transform:rotate(-45deg) translate(-3px,3px)}100%{transform:rotate(-45deg)}}

/* ---------------- modal ---------------- */
.modal{position:fixed;inset:0;background:rgba(40,28,20,.5);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(3px)}
.modal-card{
  width:392px;background:var(--card);border-radius:26px;padding:26px;display:flex;flex-direction:column;gap:12px;
  border:3px solid var(--line);box-shadow:var(--shadow);
}
.modal-card h3{font-family:'Baloo 2',cursive;font-size:21px}
.modal-card label{font-size:12px;font-weight:800;color:var(--ink-soft);display:block;margin:7px 0 4px;text-transform:uppercase;letter-spacing:.05em}
.modal-card input,.modal-card select{width:100%}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:8px}
.modal .btn.ghost{color:var(--ink-soft)}

/* ---------------- toast ---------------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);
  background:var(--ink);color:var(--bg);padding:12px 26px;border-radius:99px;font-size:14px;
  font-weight:800;transition:transform .3s cubic-bezier(.34,1.56,.64,1);z-index:1200;max-width:90vw;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--danger);color:#fff}

/* ---------------- confetti ---------------- */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:1400;overflow:hidden}
.confetti-bit{position:absolute;top:-40px;font-size:22px;animation:fall linear forwards}
@keyframes fall{
  to{transform:translateY(110vh) rotate(540deg);opacity:.7}
}