/* PetPajtás app – Level-2 playful, mobile-first. Brand tokens from the landing. */
:root{
  --papir:#FFFDF7;
  --korall:#FF6B4A;
  --korall-melly:#E8532F;
  --menta:#23A896;
  --menta-halvany:#E0F5F1;
  --nap:#FFC53D;
  --nap-halvany:#FFF3D6;
  --szilva:#2E2A3B;
  --szilva-70:#57506B;
  --lila:#7C6FF0;
  --barack:#FFEFE6;
  --feher:#FFFFFF;
  --arnyek:0 14px 40px rgba(46,42,59,.10);
  --arnyek-sm:0 6px 18px rgba(46,42,59,.07);
  --radius:26px;
  --radius-sm:16px;
  --vonal:#EFE9DE;
  --lap-border:#EFEBFA;
  /* triázs lámpa-rendszer */
  --triazs-zold-bg:#E4F6EA;  --triazs-zold-fg:#1E7C43;  --triazs-zold-dot:#2EAA5D;
  --triazs-sarga-bg:#FFF3D6; --triazs-sarga-fg:#9A6B00; --triazs-sarga-dot:#F0A800;
  --triazs-piros-bg:#FDE4E1; --triazs-piros-fg:#B3261E; --triazs-piros-dot:#E3372D;
  --topbar-h:58px;
  --tabbar-h:64px;
  --partner-band-h:36px;
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--papir);
  color:var(--szilva);
  font-family:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif,"Noto Color Emoji";
  font-size:16px;line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.disp{font-family:"Baloo 2",system-ui,"Segoe UI",sans-serif,"Noto Color Emoji";font-weight:800;line-height:1.15;color:var(--szilva)}
h1{font-size:1.5rem}
h2{font-size:1.15rem}
h3{font-size:1.02rem;font-weight:700}
p{color:var(--szilva-70)}
img{max-width:100%;display:block}
small{font-size:.82rem}
.muted{color:var(--szilva-70)}
button{font-family:inherit}
a{color:var(--korall-melly);text-decoration:none}
:focus-visible{outline:3px solid var(--lila);outline-offset:2px;border-radius:10px}

/* ---------- top-bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  height:calc(var(--topbar-h) + var(--safe-top));
  padding-top:var(--safe-top);
  display:flex;align-items:center;gap:10px;
  padding-left:16px;padding-right:12px;
  background:rgba(255,253,247,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(46,42,59,.07);
}
.brand{display:flex;align-items:center;gap:8px;font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;font-size:1.15rem;color:var(--szilva)}
.brand-paw{width:32px;height:32px;background:var(--korall);border-radius:50%;display:grid;place-items:center;font-size:1rem;transform:rotate(-12deg)}
.pet-chip{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  background:var(--feher);border:1.5px solid var(--vonal);border-radius:999px;
  padding:5px 12px 5px 6px;cursor:pointer;box-shadow:var(--arnyek-sm);
  transition:transform .15s var(--bounce);
}
.pet-chip:hover{transform:translateY(-1px)}
.pet-chip-avatar{width:30px;height:30px;border-radius:50%;background:var(--nap-halvany);display:grid;place-items:center;font-size:1.1rem}
.pet-chip-name{font-weight:800;font-size:.92rem;max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pet-chip-caret{color:var(--szilva-70);font-size:.7rem}

/* ---------- partner co-brand ---------- */
/* "by [Name]" exkluziv tarsmarka a topbar brand mellett (mode=by) */
.brand-by{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  margin-left:2px;padding-left:10px;border-left:1.5px solid var(--vonal);
  font-family:"Baloo 2",system-ui,sans-serif;font-weight:700;font-size:.78rem;
  color:var(--szilva-70);white-space:nowrap;
}
.brand-by img{max-height:20px;max-width:92px;width:auto}
/* keskeny ajandek-sav a topbar alatt (webshop partner, normal mod) */
.partner-band{
  position:fixed;left:0;right:0;z-index:39;
  top:calc(var(--topbar-h) + var(--safe-top));
  height:var(--partner-band-h);
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:0 12px;background:var(--barack);border-bottom:1px solid var(--vonal);
  font-size:.78rem;color:var(--szilva);white-space:nowrap;overflow:hidden;
}
.partner-band img{max-height:22px;max-width:110px;width:auto;flex:none}
.partner-band b{font-family:"Baloo 2",system-ui,sans-serif;font-weight:700;color:var(--korall-melly)}
body.has-partner-band .app-root{
  padding-top:calc(var(--topbar-h) + var(--safe-top) + var(--partner-band-h) + 16px);
}
/* "Allatorvosilag ellenorzott" pecset (vet partner) */
.vet-stamp{align-items:center}
.vet-stamp .vet-seal{flex:none;display:block}
.vet-stamp img{width:auto}
.vet-stamp-sm{
  display:inline-flex;gap:8px;background:var(--feher);
  border:1px solid var(--lap-border);border-radius:999px;
  padding:5px 14px 5px 6px;box-shadow:var(--arnyek-sm);margin-bottom:14px;
}
.vet-stamp-sm .vet-seal{width:30px;height:30px}
.vet-stamp-sm-text{font-weight:800;font-size:.74rem;color:var(--menta);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.vet-stamp-sm img{max-height:16px;max-width:84px}
.vet-stamp-lg{
  display:flex;gap:14px;background:var(--menta-halvany);
  border:1.5px dashed var(--menta);border-radius:var(--radius-sm);
  padding:14px 16px;margin-top:12px;
}
.vet-stamp-lg .vet-seal{width:72px;height:72px}
.vet-stamp-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.vet-stamp-info b{font-family:"Baloo 2",system-ui,sans-serif;font-size:1rem;color:var(--szilva)}
.vet-stamp-info small{color:var(--szilva-70)}
.vet-stamp-info img{max-height:24px;max-width:150px;margin-top:2px}

/* ---------- app root / layout ---------- */
.app-root{
  min-height:100vh;
  padding:calc(var(--topbar-h) + var(--safe-top) + 16px) 16px calc(var(--tabbar-h) + var(--safe-bottom) + 24px);
  max-width:720px;margin:0 auto;
}
.module-view{animation:fadeUp .32s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- boot splash ---------- */
.boot-splash{text-align:center;padding-top:22vh;color:var(--szilva-70)}
.boot-paw{font-size:3rem;animation:pawpulse 1.2s var(--bounce) infinite}
@keyframes pawpulse{0%,100%{transform:scale(1) rotate(-8deg)}50%{transform:scale(1.15) rotate(8deg)}}

/* ---------- cards ---------- */
.card{
  background:var(--feher);border:1px solid var(--lap-border);border-radius:var(--radius-sm);
  padding:16px;box-shadow:var(--arnyek-sm);
  display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;
}
.card-soft{background:var(--menta-halvany);border-color:transparent}
.card-emoji{font-size:1.5rem;flex:none}
.card-lg{display:block;border-radius:var(--radius);padding:22px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:"Baloo 2",system-ui,sans-serif;font-weight:700;font-size:1rem;
  border:none;border-radius:999px;padding:13px 24px;cursor:pointer;
  transition:transform .16s var(--bounce),box-shadow .16s;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--korall);color:#fff;box-shadow:0 8px 20px rgba(255,107,74,.32)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,107,74,.4)}
.btn-ghost{background:var(--feher);color:var(--szilva);border:1.5px solid var(--vonal);box-shadow:var(--arnyek-sm)}
.btn-menta{background:var(--menta);color:#fff;box-shadow:0 8px 20px rgba(35,168,150,.28)}
.btn-lg{padding:16px 28px;font-size:1.08rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- home ---------- */
.premium-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--menta-halvany);color:var(--menta);
  border-radius:999px;padding:5px 14px;margin-bottom:14px;
  font-family:"Baloo 2",sans-serif,"Noto Color Emoji";font-weight:700;font-size:.85rem;
}
.home-account{margin-top:26px;text-align:center}
.home-account a{font-weight:700}
.home-hello{display:flex;gap:14px;align-items:center;margin-bottom:20px}
.home-hello-avatar{width:56px;height:56px;border-radius:50%;background:var(--nap-halvany);display:grid;place-items:center;font-size:1.8rem;flex:none;box-shadow:var(--arnyek-sm)}
.home-h2{margin:22px 0 12px}
.home-section{margin-bottom:6px}
.reminder-card.is-overdue{border-color:var(--triazs-piros-dot);background:var(--triazs-piros-bg)}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  background:var(--feher);border:1px solid var(--lap-border);border-radius:var(--radius-sm);
  padding:16px;cursor:pointer;box-shadow:var(--arnyek-sm);
  transition:transform .18s var(--bounce),box-shadow .18s;
}
.quick-card:hover{transform:translateY(-3px);box-shadow:var(--arnyek)}
.quick-card b{font-family:"Baloo 2",system-ui,sans-serif;font-size:.98rem}
.quick-card small{color:var(--szilva-70)}
.quick-emoji{font-size:1.7rem;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:6px;background:var(--barack)}
.quick-triage .quick-emoji{background:var(--menta-halvany)}
.quick-translate .quick-emoji{background:var(--nap-halvany)}
.quick-log .quick-emoji{background:#EFECFE}
.quick-cal .quick-emoji{background:var(--barack)}

.home-empty{text-align:center;padding:8vh 8px 0}
.home-empty-emoji{font-size:3.4rem;margin-bottom:8px;animation:pawpulse 1.4s var(--bounce) infinite}
.home-empty h1{margin-bottom:8px}
.home-empty p{max-width:22rem;margin:0 auto 22px}

/* ---------- placeholder (stub modules) ---------- */
.stub{text-align:center;padding:6vh 12px}
.stub-emoji{font-size:3rem;margin-bottom:10px}
.stub h2{margin-bottom:6px}
.stub .badge{display:inline-block;background:var(--nap-halvany);color:var(--korall-melly);font-weight:800;font-size:.75rem;border-radius:999px;padding:4px 12px;margin-top:14px;text-transform:uppercase;letter-spacing:.05em}

/* ---------- section header ---------- */
.view-head{margin-bottom:16px}
.view-head .eyebrow{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--menta);background:var(--menta-halvany);border-radius:999px;padding:5px 12px;margin-bottom:10px}

/* ---------- triázs lámpa ---------- */
.lampa{display:inline-flex;align-items:center;gap:7px;font-weight:800;border-radius:999px;padding:5px 14px;font-size:.8rem;margin-bottom:8px}
.lampa i{width:10px;height:10px;border-radius:50%;display:inline-block}
.lampa.a,.lampa.zold{background:var(--triazs-zold-bg);color:var(--triazs-zold-fg)} .lampa.a i,.lampa.zold i{background:var(--triazs-zold-dot)}
.lampa.b,.lampa.sarga{background:var(--triazs-sarga-bg);color:var(--triazs-sarga-fg)} .lampa.b i,.lampa.sarga i{background:var(--triazs-sarga-dot)}
.lampa.c,.lampa.piros{background:var(--triazs-piros-bg);color:var(--triazs-piros-fg)} .lampa.c i,.lampa.piros i{background:var(--triazs-piros-dot)}

/* ---------- chat bubbles ---------- */
.chatb{max-width:92%;border-radius:16px;padding:11px 14px;font-size:.94rem;line-height:1.5;margin-bottom:10px}
.chatb.user{background:var(--lila);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.chatb.ai{background:var(--feher);border:1px solid var(--lap-border);border-bottom-left-radius:4px;box-shadow:var(--arnyek-sm)}

/* ---------- forms ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-weight:800;font-size:.88rem;margin-bottom:6px}
.input,textarea.input,select.input{
  width:100%;border:1.5px solid var(--vonal);border-radius:14px;
  padding:12px 14px;font-size:1rem;font-family:inherit;background:var(--feher);color:var(--szilva);
}
textarea.input{border-radius:16px;min-height:96px;resize:vertical}
.input:focus{border-color:var(--menta);outline:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--menta-halvany);background:var(--papir);border-radius:999px;padding:8px 15px;font-weight:800;font-size:.9rem;cursor:pointer;color:var(--szilva);transition:.15s}
.chip:hover{border-color:var(--menta)}
.chip.on{background:var(--menta);border-color:var(--menta);color:#fff}

/* ---------- disclaimer ---------- */
.disclaimer{font-size:.8rem;color:var(--szilva-70);background:var(--nap-halvany);border-radius:12px;padding:10px 12px;margin-top:12px;line-height:1.4}

/* ---------- tabbar ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  height:calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  display:flex;background:rgba(255,253,247,.94);backdrop-filter:blur(12px);
  border-top:1px solid rgba(46,42,59,.08);
}
.tab{
  flex:1;background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--szilva-70);font-weight:700;padding:6px 2px;
  transition:color .15s;
}
.tab-icon{font-size:1.35rem;line-height:1;transition:transform .18s var(--bounce);filter:grayscale(.4) opacity(.7)}
.tab-label{font-size:.66rem;font-weight:800}
.tab.is-active{color:var(--korall-melly)}
.tab.is-active .tab-icon{transform:translateY(-2px) scale(1.12);filter:none}
.tab.is-active .tab-label{color:var(--korall-melly)}

/* ---------- install bar ---------- */
.install-bar{
  position:fixed;left:12px;right:12px;bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 10px);z-index:45;
  background:var(--szilva);color:#fff;border-radius:16px;padding:12px 14px;
  display:flex;align-items:center;gap:10px;box-shadow:0 12px 30px rgba(46,42,59,.3);
  font-size:.9rem;max-width:696px;margin:0 auto;
}
.install-bar[hidden]{display:none}
.install-bar span{flex:1}
.install-btn{background:var(--korall);color:#fff;border:none;border-radius:999px;padding:8px 16px;font-weight:800;cursor:pointer;font-family:"Baloo 2",system-ui,sans-serif}
.install-x{flex:none;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:rgba(255,255,255,.85);font-size:1.35rem;line-height:1;cursor:pointer;padding:6px;min-width:36px;min-height:36px;margin:-4px -4px -4px 0}

/* ---------- toast ---------- */
.toast-layer{position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 16px);z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toast{background:var(--szilva);color:#fff;border-radius:999px;padding:10px 18px;font-weight:700;font-size:.9rem;box-shadow:var(--arnyek);opacity:0;transform:translateY(12px);transition:.3s var(--bounce);max-width:100%}
.toast.in{opacity:1;transform:none}
.toast-siker{background:var(--menta)}
.toast-hiba{background:var(--korall-melly)}

/* ---------- modal ---------- */
.modal-layer{position:fixed;inset:0;z-index:70}
.modal-backdrop{position:absolute;inset:0;background:rgba(46,42,59,.5);display:flex;align-items:flex-end;justify-content:center;padding:0;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{background:var(--feher);width:100%;max-width:520px;border-radius:24px 24px 0 0;padding:24px 20px calc(20px + var(--safe-bottom));box-shadow:0 -10px 40px rgba(46,42,59,.25);animation:slideUp .28s var(--bounce)}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
.modal-title{margin-bottom:12px}
.modal-body{color:var(--szilva-70);margin-bottom:18px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.modal-actions .btn{flex:1;min-width:120px}

/* pet switcher list */
.pet-switch-list{display:flex;flex-direction:column;gap:8px}
.pet-switch-item{display:flex;align-items:center;gap:12px;text-align:left;background:var(--papir);border:1.5px solid var(--vonal);border-radius:16px;padding:12px 14px;cursor:pointer;font-family:inherit;color:var(--szilva)}
.pet-switch-item.is-active{border-color:var(--korall);background:var(--barack)}
.pet-switch-avatar{width:40px;height:40px;border-radius:50%;background:var(--nap-halvany);display:grid;place-items:center;font-size:1.3rem;flex:none}
.pet-switch-add{border-style:dashed}

/* ---------- spinner ---------- */
.pp-spinner{display:flex;gap:6px;justify-content:center;padding:16px}
.pp-spin-dot{width:9px;height:9px;border-radius:50%;background:var(--korall);animation:ppblink 1s infinite}
.pp-spin-dot:nth-child(2){animation-delay:.15s}
.pp-spin-dot:nth-child(3){animation-delay:.3s}
@keyframes ppblink{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}

/* ---------- misc ---------- */
.list-reset{list-style:none}
.row{display:flex;gap:10px}
.grow{flex:1}
.mt{margin-top:14px}.mb{margin-bottom:14px}
.center{text-align:center}

@media(min-width:560px){
  h1{font-size:1.75rem}
  .quick-grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}