/* Scoobycares pet parent app (app.scoobycares.com) */

:root {
    --brand: #0f6fa8;
    --brand-dark: #0c5f94;
    --brand-soft: #eaf7ff;
    --ink: #102033;
    --ink-2: #52627a;
    --line: #dfeaf2;
    --bg: #f5fbff;
    --card: #ffffff;
    --ok: #1f9d6b;
    --warn: #c77c0e;
    --bad: #d14343;
    --radius: 16px;
    --shadow: 0 8px 25px rgba(22, 71, 103, .07);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
}

a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; letter-spacing: -.01em; font-weight: 600; }
h1 { font-weight: 600; letter-spacing: -.4px; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }

/* ---------- Top bar ---------- */

.topbar {
    position: sticky; top: 0; z-index: 10;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.topbar-inner {
    max-width: 1080px; margin: 0 auto; padding: 10px 16px;
    display: flex; align-items: center; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { height: 38px; width: auto; }
.brand span { font-size: 1.02rem; font-weight: 700; letter-spacing: -.2px; line-height: 1.1; }
.brand small { display: block; font-weight: 500; font-size: .72rem; color: var(--brand-dark); margin-top: -2px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
    padding: 8px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 500; font-size: .92rem;
    display: flex; align-items: center; gap: 6px;
}
.nav a:hover { background: var(--brand-soft); text-decoration: none; }
.nav a.on { color: var(--brand-dark); background: var(--brand-soft); }

/* Phone: nav moves to a bottom bar */
@media (max-width: 720px) {
    /* backdrop-filter would pin the fixed bottom bar inside the top bar */
    .topbar { backdrop-filter: none; background: #fff; }
    .nav {
        position: fixed; left: 0; right: 0; bottom: 0; margin: 0;
        background: #fff; border-top: 1px solid var(--line);
        justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .nav a { flex-direction: column; gap: 2px; font-size: .72rem; padding: 6px 8px; }
    .nav a i { font-size: 1.05rem; }
    body.has-nav { padding-bottom: 72px; }
}

/* ---------- Layout ---------- */

.page { max-width: 1080px; margin: 0 auto; padding: 20px 16px 40px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.section { margin-top: 28px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-head h2 { margin: 0; }

.card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px; box-shadow: var(--shadow); min-width: 0;
}
.card.flat { box-shadow: none; }

.hero {
    background: linear-gradient(135deg, #fafdff 0%, #f3faff 48%, #ffffff 100%);
    border: 1px solid var(--line); border-radius: 20px; padding: 22px;
}

/* ---------- Bits ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: 12px; padding: 10px 16px;
    font: inherit; font-weight: 600; cursor: pointer; text-align: center;
    background: var(--brand); color: #fff;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn { box-shadow: 0 8px 18px rgba(15, 111, 168, .18); }
.btn.ghost { box-shadow: none; }
.btn.ghost { background: #fff; color: var(--brand-dark); border-color: #bfe2f6; }
.btn.ghost:hover { background: var(--brand-soft); }
.btn.block { width: 100%; }
.btn.sm { padding: 7px 12px; font-size: .86rem; border-radius: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px;
    background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; font-size: .86rem;
}
.chip:hover { background: #dcefff; text-decoration: none; }
button.chip { border: 0; font: inherit; font-weight: 600; font-size: .86rem; cursor: pointer; }
.chip.plain { background: #f1f5f8; color: var(--ink-2); font-weight: 500; }

.tag {
    display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600;
    background: #f1f5f8; color: var(--ink-2);
}
.tag.ok { background: #e3f6ee; color: var(--ok); }
.tag.warn { background: #fdf1de; color: var(--warn); }
.tag.bad { background: #fde8e8; color: var(--bad); }
.tag.brand { background: var(--brand-soft); color: var(--brand-dark); }

.pet-card { display: flex; gap: 14px; align-items: center; color: var(--ink); }
.pet-card:hover { text-decoration: none; border-color: #bfe2f6; }
.avatar {
    width: 52px; height: 52px; border-radius: 14px; flex: none;
    display: grid; place-items: center; font-size: 1.4rem; background: var(--brand-soft); color: var(--brand-dark);
    overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 12px 0; border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; }
.list li:first-child { border-top: 0; }
.list .when { min-width: 74px; font-weight: 600; font-size: .86rem; color: var(--brand-dark); }
.list .grow { flex: 1; min-width: 0; }

.clinic-head { display: flex; gap: 14px; align-items: center; }
.clinic-head img, .clinic-logo {
    width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex: none;
    background: var(--brand-soft); display: grid; place-items: center; color: var(--brand-dark); font-size: 1.3rem;
}

.alert { border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: .92rem; }
.alert.error { background: #fde8e8; color: #8f2424; }
.alert.success { background: #e3f6ee; color: #12623f; }
.alert.info { background: var(--brand-soft); color: #145a83; }

.empty { text-align: center; padding: 28px 16px; color: var(--ink-2); }
.empty i { font-size: 2rem; color: var(--brand); margin-bottom: 8px; display: block; }

/* ---------- Forms ---------- */

label { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 6px; }
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=search], input[type=number], input[type=date], input:not([type]), select, textarea {
    width: 100%; padding: 11px 13px; border: 1px solid #cfdfe9; border-radius: 12px; font: inherit;
    background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid #bfe2f6; border-color: var(--brand); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.check input { margin-top: 4px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-width: 0; }

.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .brand { justify-content: center; margin-bottom: 14px; font-size: 1.15rem; }

.search-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.search-bar input { flex: 1 1 220px; }

.timeline-item { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.timeline-item:first-child { border-top: 0; }
.timeline-icon {
    width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand-dark);
}

.faq details { border-top: 1px solid var(--line); padding: 10px 0; }
.faq details:first-child { border-top: 0; }
.faq summary { cursor: pointer; font-weight: 600; }

.doctor { display: flex; gap: 12px; align-items: flex-start; }
.doctor + .doctor { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ink: #e6f0f6; --ink-2: #a3b6c3; --line: #23343f; --bg: #0f1a21; --card: #15232c;
        --brand-soft: #173447; --shadow: none;
    }
    :root:not([data-theme="light"]) .topbar { background: rgba(21, 35, 44, .94); }
    :root:not([data-theme="light"]) .nav { background: #15232c; }
    :root:not([data-theme="light"]) .hero { background: linear-gradient(135deg, #173447 0%, #15232c 70%); }
    :root:not([data-theme="light"]) input, :root:not([data-theme="light"]) select,
    :root:not([data-theme="light"]) textarea { background: #0f1a21; color: var(--ink); border-color: #2c4352; }
    :root:not([data-theme="light"]) .btn.ghost { background: transparent; border-color: #2c4352; }
    :root:not([data-theme="light"]) .chip.plain, :root:not([data-theme="light"]) .tag { background: #1d2f3a; }
}


/* ---------- Home (ScoobyPaw AI) ---------- */

.greet {
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 26px 28px; border-radius: 26px; border: 1px solid var(--line);
    background: linear-gradient(135deg, #fafdff 0%, #eef7fe 55%, #ffffff 100%);
}
.greet::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; right: -80px; top: -140px; background: rgba(103, 183, 232, .14); }
.greet::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; left: -70px; bottom: -110px; background: rgba(255, 240, 218, .9); }
.greet > * { position: relative; z-index: 1; }
.greet p { margin: 8px 0 0; color: var(--ink-2); }
.greet h1 { font-size: clamp(1.5rem, 4.2vw, 2.1rem); line-height: 1.2; margin: 0; font-weight: 600; letter-spacing: -.6px; }
.greet h1 .grad { color: var(--brand); }
.greet img { width: clamp(96px, 22vw, 150px); flex: none; filter: drop-shadow(0 14px 24px rgba(31, 134, 196, .2)); margin-right: -6px; }
.prompts { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 6px; scrollbar-width: none; }
.prompts::-webkit-scrollbar { display: none; }
.prompts a { flex: none; padding: 10px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--ink); font-size: .92rem; white-space: nowrap; }
.prompts a:hover { background: #dcefff; text-decoration: none; }
.ai-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.ai-card {
    display: block; border-radius: 22px; padding: 18px; background: linear-gradient(145deg, #f7fcff, #ffffff);
    border: 1px solid var(--line); color: var(--ink); min-height: 150px; position: relative; overflow: hidden;
}
.ai-card:hover { text-decoration: none; border-color: #bfe2f6; }
.ai-card .ic { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--brand-dark); font-size: 1.15rem; box-shadow: 0 4px 14px rgba(16, 33, 43, .06); }
.ai-card h3 { margin: 26px 0 4px; font-size: 1.05rem; font-weight: 600; }
.ai-card p { margin: 0; font-size: .86rem; color: var(--ink-2); }
.ai-card.wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; min-height: 0; background: linear-gradient(145deg, #fffaf2, #ffffff); }
.ai-card.wide .ic { color: #b7791f; }
.ai-card.wide h3 { margin: 0 0 4px; }
.ai-card.wide .go { margin-left: auto; padding: 8px 14px; border-radius: 10px; background: #fff; font-weight: 600; font-size: .86rem; white-space: nowrap; }
@media (max-width: 420px) { .ai-card { min-height: 140px; padding: 16px; } .ai-card h3 { margin-top: 20px; font-size: 1.02rem; } .ai-card.wide .go { display: none; } }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ai-card { background: #15232c; }
    :root:not([data-theme="light"]) .ai-card .ic, :root:not([data-theme="light"]) .ai-card.wide .go { background: #1d2f3a; }
}


/* ---------- Motion & polish (all pet parent pages) ---------- */
.ai-card, .card, .pet-card, .chip, .btn, .prompts a { transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease, border-color .22s ease, background .2s ease; }
.ai-card:hover, a.card:hover, .pet-card:hover { transform: translateY(-3px); box-shadow: 0 18px 45px rgba(22, 71, 103, .10); }
.btn:hover, .chip:hover, .prompts a:hover { transform: translateY(-1px); }
.ai-card .ic { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.ai-card:hover .ic { transform: translateY(-2px) rotate(-6deg); }
.ai-card.talk .ic { background: var(--brand); color: #fff; box-shadow: 0 8px 18px rgba(15, 111, 168, .25); }
.ai-card.talk { background: linear-gradient(145deg, #e9f5fd, #ffffff); }
.greet img { animation: none; }
@media (prefers-reduced-motion: no-preference) {
    .page > * { opacity: 0; animation: pageRise .6s cubic-bezier(.2, .7, .2, 1) forwards; }
    .page > *:nth-child(2) { animation-delay: .06s; } .page > *:nth-child(3) { animation-delay: .12s; }
    .page > *:nth-child(4) { animation-delay: .18s; } .page > *:nth-child(5) { animation-delay: .24s; }
    .page > *:nth-child(6) { animation-delay: .3s; } .page > *:nth-child(n+7) { animation-delay: .36s; }
    .greet img { animation: pugBob 5s ease-in-out infinite; }
    @keyframes pageRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes pugBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-2deg); } }
}
@media (max-width: 720px) {
    .greet { padding: 20px; border-radius: 22px; }
}

/* ---------- Sign in / sign up ---------- */
.auth-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 28px; align-items: center; max-width: 960px; margin: 16px auto; }
.auth-split .auth-card { max-width: 440px; width: 100%; justify-self: center; }
.auth-side {
    position: relative; overflow: hidden; border-radius: 28px; padding: 34px 30px 0; border: 1px solid var(--line);
    background: linear-gradient(150deg, #eef7fe 0%, #fafdff 60%, #fff6ea 100%); min-height: 520px;
    display: flex; flex-direction: column;
}
.auth-side::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: -90px; top: -90px; background: rgba(103, 183, 232, .16); }
.auth-side h2 { position: relative; font-size: 1.5rem; font-weight: 600; letter-spacing: -.5px; }
.auth-side ul { position: relative; list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; color: var(--ink-2); }
.auth-side li { padding-left: 28px; position: relative; }
.auth-side li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: #eaf8f0; color: #2fa66a; font-size: 11px; display: grid; place-items: center; font-weight: 700; }
.auth-side img { order: 3; width: 72%; max-width: 300px; margin: auto auto 0; filter: drop-shadow(0 18px 28px rgba(15, 111, 168, .18)); }
.auth-card .card { padding: 26px; border-radius: 22px; }
.auth-card h1 { font-size: 1.6rem; }
@media (prefers-reduced-motion: no-preference) { .auth-side img { animation: pugBob 5s ease-in-out infinite; } }
@media (max-width: 820px) {
    .auth-split { grid-template-columns: minmax(0, 1fr); }
    .auth-side { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; }
    .auth-side img { order: 0; width: 76px; margin: 0; }
    .auth-side ul { display: none; }
    .auth-side h2 { font-size: 1.1rem; margin: 0; }
}

/* Pre-launch: "Launching soon" chip */
.launch-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 14px 6px 6px;
  border-radius: 999px; background: #fff; border: 1px solid rgba(15, 111, 168, .18); color: #102033; font-size: .88rem;
  font-weight: 500; text-decoration: none; box-shadow: 0 6px 18px rgba(16, 32, 51, .06); }
.launch-chip b { padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #0f6fa8, #67b7e8); color: #fff;
  font-weight: 600; font-size: .78rem; }
.launch-chip span { transition: transform .2s ease; }
.launch-chip:hover span { transform: translateX(3px); }

/* Sign-up consents (each one separate) */
.consents { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 4px; margin: 16px 0 0; background: #fbfdff; }
.consents legend { padding: 0 6px; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.consents .check { font-size: .86rem; line-height: 1.45; padding: 8px 0; border-bottom: 1px dashed var(--line); margin: 0; }
.consents .check:last-child { border-bottom: 0; }
.consents .check em { font-style: normal; font-size: .74rem; color: var(--ink-2); background: var(--brand-soft); padding: 1px 7px; border-radius: 99px; white-space: nowrap; }
.consents .check.optional em { background: #eef5ea; color: #2c6b3c; }

/* Sign-up: read each policy before agreeing */
.consent-hint { margin: 0 0 4px; font-size: .8rem; color: var(--ink-2); }
.consents .consent { display: flex; align-items: center; gap: 10px; border-bottom: 1px dashed var(--line); }
.consents .consent:last-of-type { border-bottom: 0; }
.consents .consent .check { flex: 1; border: 0; }
.read-btn { flex: none; border: 1px solid #bfe2f6; background: #fff; color: var(--brand-dark); border-radius: 99px; padding: 5px 12px;
    font: 500 .8rem/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
.read-btn:hover { background: var(--brand-soft); }
.read-btn .read-txt, .consent.is-read .read-btn .unread-txt { display: none; }
.consent.is-read .read-btn .read-txt { display: inline; }
.consent.is-read .read-btn { border-color: #bfe6cf; color: #1f7a4d; background: #eefaf3; }
.consent[data-doc]:not(.is-read) .check input { opacity: .55; }
.doc-modal { width: min(720px, calc(100vw - 24px)); max-height: min(86vh, 860px); padding: 0; border: 0; border-radius: 22px;
    box-shadow: 0 40px 90px rgba(16, 32, 51, .35); display: none; flex-direction: column; overflow: hidden; color: var(--ink); }
.doc-modal[open] { display: flex; animation: doc-in .22s ease both; }
.doc-modal::backdrop { background: rgba(16, 32, 51, .45); backdrop-filter: blur(3px); }
.doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px 12px; border-bottom: 1px solid var(--line); }
.doc-head small { color: var(--brand); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.doc-head h2 { margin: 2px 0 0; font-size: 1.3rem; font-weight: 600; }
.doc-x { border: 0; background: #f2f7fb; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 15px; color: var(--ink); flex: none; }
.doc-progress { height: 3px; background: #eef4f9; } .doc-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0f6fa8, #67b7e8); transition: width .1s linear; }
.doc-body { overflow-y: auto; padding: 8px 22px 18px; font-size: .92rem; line-height: 1.7; flex: 1; outline: none; }
.doc-body h2 { font-size: 1.05rem; font-weight: 600; margin: 22px 0 6px; }
.doc-body table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.doc-body th, .doc-body td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-body .lg-summary, .doc-body .lg-box { border: 1px solid #d8ecf8; background: #f3faff; border-radius: 14px; padding: 12px 16px; margin: 12px 0; }
.doc-body .lg-warn { border-color: #f6d9a8; background: #fff8ec; }
.doc-body .lg-scroll { overflow-x: auto; }
.doc-end { text-align: center; color: var(--ink-2); font-size: .8rem; margin: 22px 0 4px; }
.doc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px 16px; border-top: 1px solid var(--line); background: #fbfdff; }
.doc-hint { font-size: .82rem; color: var(--ink-2); }
.doc-foot .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
@keyframes doc-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
    .doc-modal { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
    .doc-foot { flex-direction: column; align-items: stretch; text-align: center; }
    .doc-foot .btn { width: 100%; }
}
.doc-full { display: inline-block; margin-top: 4px; font-size: .8rem; color: var(--brand); }

/* ---- Sign-up / sign-in polish (phones + Safari) ---- */
.auth-hi { position: relative; z-index: 1; min-width: 0; }
.auth-hi h2 { color: var(--ink); -webkit-text-fill-color: var(--ink); }
.auth-sub { display: none; margin: 2px 0 0; color: var(--ink-2); font-size: .86rem; }
.auth-side > * { position: relative; z-index: 1; }
.auth-side::before { z-index: 0; pointer-events: none; }
@media (max-width: 820px) {
    .auth-side { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; min-height: 0;
        background: linear-gradient(135deg, #e8f5fe 0%, #f7fbff 70%, #fff 100%); }
    .auth-side::before { display: none; }
    .auth-side img { order: 0; flex: none; width: 64px; height: 64px; object-fit: contain; margin: 0; border-radius: 50%;
        background: #fff; padding: 4px; box-shadow: 0 6px 16px rgba(15, 111, 168, .14); filter: none; animation: none; }
    .auth-hi h2 { font-size: 1.12rem; margin: 0; line-height: 1.25; }
    .auth-sub { display: block; }
}

.early-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; font-size: .88rem; color: var(--ink); }
.early-note b { flex: none; white-space: nowrap; padding: 4px 11px; border-radius: 999px; font-size: .76rem; font-weight: 600; color: #fff;
    background: linear-gradient(135deg, #0f6fa8, #67b7e8); }

/* consent rows: checkbox | text, "Read" button under the text - same in every browser */
.consents .consent { display: block; padding: 4px 0; }
.consents .consent .check { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 8px 0 6px; }
.consents .check input[type=checkbox] { -webkit-appearance: checkbox; appearance: auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); }
.consents .check span { min-width: 0; }
.consents .read-btn { margin: 0 0 8px 30px; }
.consents .read-btn { padding: 4px 12px; font-size: .78rem; }
@media (max-width: 480px) {
    .auth-card .card { padding: 20px 16px; }
    .consents { padding: 10px 12px 4px; margin-left: -4px; margin-right: -4px; }
    .consents .read-btn { margin-left: 30px; }
}

/* ScoobyPaw AI always uses its light brand theme (iPhone/Android dark mode too) */
:root[data-theme="light"] { color-scheme: light; }

/* Find: vets / groomers / boarding / shops */
.find-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; scrollbar-width: none; }
.find-tabs::-webkit-scrollbar { display: none; }
.find-tabs a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.find-tabs a.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.find-card { display: flex; flex-direction: column; }
.find-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }


/* =========================================================
   Look & feel polish (23 Oct 2026)
   ========================================================= */

/* Paw cursor - outline normally, filled on anything you can tap. Text fields keep the text cursor. */
html, body { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2228%22%20height=%2228%22%20viewBox=%220%200%2032%2032%22%3E%3Cg%20fill=%22%23ffffff%22%20stroke=%22%230f6fa8%22%20stroke-width=%221.6%22%3E%3Cellipse%20cx=%227%22%20cy=%2213%22%20rx=%223.2%22%20ry=%224.1%22%20transform=%22rotate%28-20%207%2013%29%22/%3E%3Cellipse%20cx=%2212.8%22%20cy=%227.2%22%20rx=%223.3%22%20ry=%224.3%22%20transform=%22rotate%28-6%2012.8%207.2%29%22/%3E%3Cellipse%20cx=%2219.6%22%20cy=%227.2%22%20rx=%223.3%22%20ry=%224.3%22%20transform=%22rotate%286%2019.6%207.2%29%22/%3E%3Cellipse%20cx=%2225.4%22%20cy=%2213%22%20rx=%223.2%22%20ry=%224.1%22%20transform=%22rotate%2820%2025.4%2013%29%22/%3E%3Cpath%20d=%22M16.2%2014.5c-4.6%200-9%205.6-9%209.6%200%203.2%202.6%204.4%205%204.4%201.7%200%202.6-.8%204-.8s2.3.8%204%20.8c2.4%200%205-1.2%205-4.4%200-4-4.4-9.6-9-9.6z%22/%3E%3C/g%3E%3C/svg%3E") 6 4, auto; }
a, button, summary, label, select, [role="button"], .btn, .chip, .ai-card, .pet-card, .prompts a, input[type="checkbox"], input[type="radio"] {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2228%22%20height=%2228%22%20viewBox=%220%200%2032%2032%22%3E%3Cg%20fill=%22%230f6fa8%22%20stroke=%22%23ffffff%22%20stroke-width=%221.6%22%3E%3Cellipse%20cx=%227%22%20cy=%2213%22%20rx=%223.2%22%20ry=%224.1%22%20transform=%22rotate%28-20%207%2013%29%22/%3E%3Cellipse%20cx=%2212.8%22%20cy=%227.2%22%20rx=%223.3%22%20ry=%224.3%22%20transform=%22rotate%28-6%2012.8%207.2%29%22/%3E%3Cellipse%20cx=%2219.6%22%20cy=%227.2%22%20rx=%223.3%22%20ry=%224.3%22%20transform=%22rotate%286%2019.6%207.2%29%22/%3E%3Cellipse%20cx=%2225.4%22%20cy=%2213%22%20rx=%223.2%22%20ry=%224.1%22%20transform=%22rotate%2820%2025.4%2013%29%22/%3E%3Cpath%20d=%22M16.2%2014.5c-4.6%200-9%205.6-9%209.6%200%203.2%202.6%204.4%205%204.4%201.7%200%202.6-.8%204-.8s2.3.8%204%20.8c2.4%200%205-1.2%205-4.4%200-4-4.4-9.6-9-9.6z%22/%3E%3C/g%3E%3C/svg%3E") 6 4, pointer;
}
input:not([type="checkbox"]):not([type="radio"]), textarea, [contenteditable="true"] { cursor: text; }

/* Calm background with a soft glow */
body {
    background:
        radial-gradient(900px 420px at 100% -10%, rgba(103, 183, 232, .16), transparent 60%),
        radial-gradient(700px 380px at -10% 10%, rgba(255, 226, 186, .28), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(15, 111, 168, .18); }
.page { padding-top: 26px; animation: sp-in .35s ease both; }
@keyframes sp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .page { animation: none; } }

/* Headings */
h1, h2, h3 { font-weight: 700; color: var(--ink); }
h2 { font-size: 1.2rem; letter-spacing: -.2px; }
.section { margin-top: 34px; }
.section-head { align-items: center; }

/* Top bar: glass + thin shadow */
.topbar { background: rgba(255, 255, 255, .82); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); box-shadow: 0 1px 0 rgba(16, 33, 43, .02), 0 8px 24px -18px rgba(16, 33, 43, .18); }
.nav a { border-radius: 999px; font-weight: 600; }
.nav a.on { background: var(--brand); color: #fff; box-shadow: 0 6px 14px -6px rgba(15, 111, 168, .55); }
.nav a.on:hover { background: var(--brand-dark); }

/* Cards */
.card, .ai-card, .hero { border-radius: 22px; border-color: rgba(191, 226, 246, .7); }
.card { box-shadow: 0 1px 2px rgba(16, 33, 43, .04), 0 12px 32px -18px rgba(22, 71, 103, .22); }
.greet { box-shadow: 0 1px 2px rgba(16, 33, 43, .04), 0 18px 40px -26px rgba(22, 71, 103, .35); }

/* Quick question chips: white pills with a soft border; edges fade when they scroll */
.prompts { padding: 16px 2px 8px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); }
.prompts a { background: #fff; border: 1px solid var(--line); border-radius: 999px; font-weight: 500; box-shadow: 0 4px 12px -8px rgba(22, 71, 103, .3); }
.prompts a:hover { background: var(--brand-soft); border-color: #bfe2f6; }

/* Buttons */
.btn { border-radius: 999px; padding: 11px 20px; letter-spacing: .1px; }
.btn.sm { border-radius: 999px; padding: 8px 14px; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid rgba(15, 111, 168, .35); outline-offset: 2px; }
.btn:active { transform: translateY(0) scale(.98); }

/* Empty states: the icon rule must not stretch icons inside buttons */
.empty { padding: 34px 18px; }
.empty .btn i { font-size: 1em; display: inline; margin: 0; color: inherit; }
.empty p { max-width: 420px; margin: 0 auto 16px; }

/* Pet cards */
.pet-card { display: flex; align-items: center; gap: 14px; }
.pet-card .avatar { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 1.7rem; background: linear-gradient(145deg, #eaf7ff, #fff6ea); flex: none; }

/* Forms */
input, select, textarea { border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(15, 111, 168, .12); }

/* Phone */
@media (max-width: 720px) {
    .page { padding: 18px 14px 28px; }
    .nav { background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 -10px 30px -20px rgba(16, 33, 43, .35); border-top: 1px solid rgba(223, 234, 242, .8); }
    .nav a { border-radius: 14px; min-width: 52px; font-weight: 600; }
    .nav a.on { background: var(--brand-soft); color: var(--brand-dark); box-shadow: none; }
    body.has-nav { padding-bottom: 88px; }
    .greet { border-radius: 24px; }
    .section-head .btn.sm { padding: 7px 12px; }
    .ai-card h3 { margin-top: 18px; }
}
/* Touch screens have no cursor */
@media (hover: none) { html, body, a, button { cursor: auto; } }
.nav a span { white-space: nowrap; }
@media (max-width: 720px) {
    .nav a { min-width: 0; padding: 6px 4px; font-size: .68rem; flex: 1; }
}

/* =========================================================
   Home v2 (23 Oct 2026): ask bar, services, pet tiles
   ========================================================= */
.hero2 { padding: 30px 32px; align-items: center; }
.hero2-text { flex: 1; min-width: 0; }
.hello-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .78rem; font-weight: 700; color: var(--brand-dark); margin-bottom: 12px; box-shadow: 0 4px 12px -8px rgba(22, 71, 103, .35); }
.hero2 h1 { font-size: clamp(1.55rem, 3.6vw, 2.25rem); font-weight: 800; letter-spacing: -.8px; max-width: 620px; }
.hero2 img { width: clamp(110px, 18vw, 190px); align-self: flex-end; margin-bottom: -30px; }
.ask-bar { margin-top: 18px; display: flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid #cfe6f5; border-radius: 999px; padding: 6px 6px 6px 16px; box-shadow: 0 14px 34px -20px rgba(15, 111, 168, .55); max-width: 640px; transition: border-color .15s, box-shadow .15s; }
.ask-bar:focus-within { border-color: var(--brand); box-shadow: 0 0 0 5px rgba(15, 111, 168, .12), 0 14px 34px -20px rgba(15, 111, 168, .55); }
.ask-bar .lead { color: var(--brand); }
.ask-bar input[type=text] { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent; padding: 10px 6px; font-size: 1rem; }
.ask-bar .mic, .ask-bar .send { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 0; font-size: 1rem; }
.ask-bar .mic { background: var(--brand-soft); color: var(--brand-dark); }
.ask-bar .mic:hover { background: #d6ecfb; text-decoration: none; }
.ask-bar .send { background: var(--brand); color: #fff; box-shadow: 0 8px 18px -8px rgba(15, 111, 168, .8); }
.ask-bar .send:hover { background: var(--brand-dark); }
.hero2 .prompts { max-width: 660px; padding-bottom: 0; }

.services { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.svc { --c: #0f6fa8; --s: #eaf7ff; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); color: var(--ink); box-shadow: 0 10px 26px -20px rgba(22, 71, 103, .4); transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s, border-color .2s; }
.svc:hover { text-decoration: none; transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 35%, #fff); box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--c) 60%, transparent); }
.svc .ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--s); color: var(--c); font-size: 1.15rem; margin-bottom: 8px; transition: transform .25s; }
.svc:hover .ic { transform: rotate(-8deg) scale(1.05); }
.svc b { font-size: .98rem; }
.svc small { color: var(--ink-2); font-size: .8rem; }
.c-blue { --c: #0f6fa8; --s: #e6f3fc; } .c-violet { --c: #6d4fd8; --s: #efebfd; } .c-green { --c: #13875a; --s: #e5f6ee; }
.c-pink { --c: #c2417a; --s: #fcebf3; } .c-amber { --c: #b26a00; --s: #fdf2df; } .c-teal { --c: #0f7f86; --s: #e2f5f6; }

.pets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pet-tile { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); color: var(--ink); box-shadow: 0 10px 26px -20px rgba(22, 71, 103, .4); transition: transform .2s, box-shadow .2s, border-color .2s; }
.pet-tile:hover { text-decoration: none; transform: translateY(-2px); border-color: #bfe2f6; box-shadow: 0 18px 36px -22px rgba(22, 71, 103, .5); }
.pet-ava { width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; background: linear-gradient(145deg, #e6f3fc, #fff1dd); box-shadow: inset 0 0 0 3px #fff, 0 6px 16px -10px rgba(22, 71, 103, .5); }
.pet-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pet-info b { font-size: 1.05rem; }
.pet-info small { color: var(--ink-2); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet-info .clinics { color: var(--brand-dark); }
.pet-tile .go { color: #9fb6c6; }
.pet-tile.add { border-style: dashed; border-color: #bcd9ec; background: rgba(255, 255, 255, .6); box-shadow: none; }
.pet-tile.add .pet-ava { background: var(--brand-soft); color: var(--brand); font-size: 1.2rem; }

@media (max-width: 900px) { .services { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
    .hero2 { padding: 22px 18px 18px; flex-direction: column; align-items: stretch; }
    .hero2 img { position: absolute; right: -6px; top: 8px; width: 92px; margin: 0; opacity: .95; }
    .hero2 h1 { padding-right: 84px; font-size: 1.45rem; }
    .ask-bar { padding: 5px 5px 5px 14px; }
    .ask-bar .mic, .ask-bar .send { width: 38px; height: 38px; }
    .services { gap: 10px; }
    .svc { padding: 13px 12px; border-radius: 18px; }
    .svc small { display: none; }
    .svc .ic { width: 40px; height: 40px; border-radius: 13px; margin-bottom: 4px; }
    .svc b { font-size: .88rem; }
}

/* =========================================================
   Health (walks, heat, diet, medicines)
   ========================================================= */
.hl-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.hl-head h1 { margin: 0; font-weight: 800; }
.card.hl-walk, .card.hl-heat, .card.hl-diet, .card.hl-meds { margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.hl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hl-row h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.hl-walk h2 i { color: #13875a; } .hl-heat h2 i { color: #b0336b; } .hl-diet h2 i { color: #a35f00; } .hl-meds h2 i { color: #5b3fc4; }
.hl-ring-row { display: flex; align-items: center; gap: 18px; }
.hl-ring { --p: 0; width: 112px; height: 112px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(#13875a calc(var(--p) * 1%), #e5f6ee 0); }
.hl-ring > div { width: 88px; height: 88px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hl-ring strong { font-size: 1.35rem; } .hl-ring span { font-size: .75rem; color: var(--ink-2); }
.hl-stats { display: flex; flex-direction: column; gap: 6px; } .hl-stats .ok { color: #13764f; font-weight: 600; }
.hl-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hl-kind { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 6px; font-size: .86rem; font-weight: 700; background: #fff; }
.hl-kind:has(input:checked) { border-color: #13875a; background: #e5f6ee; }
.hl-kind input { accent-color: #13875a; }
.btn.hl-go { width: 100%; margin-top: 10px; background: #13875a; padding: 14px; font-size: 1.02rem; box-shadow: 0 10px 22px -12px rgba(19, 135, 90, .8); }
.btn.hl-go:hover { background: #0f6e49; }
.center { text-align: center; }
.hl-live { display: flex; align-items: center; gap: 12px; background: #13875a; color: #fff; border-radius: 18px; padding: 14px 16px; }
.hl-live > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hl-live strong { font-size: 1.3rem; } .hl-live .lbl { font-size: .78rem; color: #c9f0dc; font-weight: 600; }
.btn.hl-end { background: #fff; color: #13764f; box-shadow: none; }
.btn.hl-end:hover { background: #e5f6ee; }
.hl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #eef4f8; }
.hl-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eef4f8; }
.hl-list .ic { width: 34px; height: 34px; border-radius: 10px; background: #e5f6ee; color: #13764f; display: grid; place-items: center; }
.hl-list .grow, .hl-med .grow { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hl-list small, .hl-med small { color: var(--ink-2); font-size: .8rem; }
.hl-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.hl-week span { display: flex; flex-direction: column; padding: 6px 0; border-radius: 12px; font-weight: 700; font-size: .9rem; }
.hl-week small { font-size: .68rem; color: var(--ink-2); font-weight: 500; }
.hl-week span.on { background: #fcebf3; color: #b0336b; } .hl-week span.today { outline: 2px solid #b0336b; }
.btn.hl-pink { background: #b0336b; box-shadow: none; } .btn.hl-pink:hover { background: #932757; }
.btn.hl-violet { background: #5b3fc4; box-shadow: none; } .btn.hl-violet:hover { background: #452ea0; }
.hl-diet-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.hl-med { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 1px solid #eef4f8; border-radius: 14px; padding: 12px; }
.hl-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-slots form { margin: 0; }
.hl-plus { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; background: #102033; color: #fff; border-radius: 16px; padding: 12px 16px; margin-top: 4px; }
.hl-plus .soon { font-size: .66rem; font-weight: 800; background: #ffd27a; color: #102033; border-radius: 999px; padding: 3px 8px; }
.hl-plus .grow { flex: 1; font-size: .82rem; color: #c4d3de; }

/* =========================================================
   Adopt + Pet friends
   ========================================================= */
.ad-hero { background: linear-gradient(135deg, #fff7ec, #ffffff) !important; border-color: #f1e3cc !important; }
.ad-hero h1 { font-weight: 800; } .ad-hero p { max-width: 560px; }
.ad-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.btn.ad-btn { background: #a35f00; box-shadow: 0 10px 22px -12px rgba(163, 95, 0, .8); } .btn.ad-btn:hover { background: #874e00; }
.ad-filters { display: flex; flex-direction: column; gap: 12px; }
.ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ad-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 26px -20px rgba(22, 71, 103, .4); }
.ad-card img, .ad-photo { width: 100%; height: 170px; object-fit: cover; }
.ad-photo { display: grid; place-items: center; background: linear-gradient(145deg, #fdf2df, #fff8ee); color: #a35f00; font-size: 2.4rem; }
.ad-photo.fr { background: linear-gradient(145deg, #efebfd, #f8f6ff); font-size: 3rem; }
.ad-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ad-body form { margin-top: auto; }
.ad-name { font-size: 1.08rem; }
.ad-how ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.fr-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #ece7fd; border-radius: 999px; padding: 4px; max-width: 420px; }
.fr-tabs a { text-align: center; padding: 10px; border-radius: 999px; font-weight: 700; color: #5b3fc4; }
.fr-tabs a.on { background: #fff; color: var(--ink); box-shadow: 0 4px 12px -8px rgba(22, 71, 103, .5); }
.fr-tabs a:hover { text-decoration: none; }
.btn.fr-btn { background: #5b3fc4; box-shadow: 0 10px 22px -12px rgba(91, 63, 196, .8); } .btn.fr-btn:hover { background: #452ea0; }
.fr-safe { margin-top: 14px; border-color: #e6e0fb; background: #f8f6ff; }
.fr-safe strong { color: #5b3fc4; }
.fr-box { margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.fr-box h2 { margin: 0; }
.fr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid #eef4f8; padding-top: 10px; }
.fr-row .grow { flex: 1; min-width: 160px; }
.fr-answer { display: flex; gap: 6px; margin: 0; }
.pet-ava.sm { width: 40px; height: 40px; font-size: 1.2rem; }
.ok-text { color: #13764f; }

/* Find a vet: specialities, doctors, visit buttons */
.spec-row { display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; scrollbar-width: none; }
.spec-row::-webkit-scrollbar { display: none; }
.spec-row a { flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: .84rem; }
.spec-row a.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.spec-row a:hover { text-decoration: none; }
.doc-row { display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid #eef4f8; margin-top: 12px; padding-top: 12px; }
.doc-ava { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #f1f5f8; color: var(--ink-2); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.doc-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.doc-info small { color: var(--ink-2); }
.doc-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.doc-modes.n1 { grid-template-columns: 1fr; } .doc-modes.n2 { grid-template-columns: 1fr 1fr; }
.doc-modes a { display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 14px; padding: 10px 4px; font-size: .8rem; font-weight: 700; }
.doc-modes a:hover { text-decoration: none; filter: brightness(.96); }
.doc-modes .v-clinic { background: var(--brand); color: #fff; }
.doc-modes .v-online { background: #efebfd; color: #5b3fc4; }
.doc-modes .v-home { background: #e5f6ee; color: #13764f; }

/* Home: pet families + health strip */
.fam-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fam { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; color: var(--ink); border: 1px solid; }
.fam:hover { text-decoration: none; transform: translateY(-2px); }
.fam .ic { width: 48px; height: 48px; flex: none; border-radius: 16px; background: #fff; display: grid; place-items: center; font-size: 1.2rem; }
.fam .t { display: flex; flex-direction: column; flex: 1; } .fam small { color: var(--ink-2); }
.fam.adopt { background: #fff7ec; border-color: #f6dfbd; } .fam.adopt .ic, .fam.adopt .go { color: #a35f00; }
.fam.friends { background: #f3efff; border-color: #ddd4fb; } .fam.friends .ic, .fam.friends .go { color: #5b3fc4; }
.hh-walk { display: flex; align-items: center; gap: 14px; background: #13875a; color: #fff; border-radius: 22px; padding: 16px 18px; }
.hh-walk:hover { text-decoration: none; background: #0f6e49; }
.hh-walk .t { display: flex; flex-direction: column; flex: 1; } .hh-walk small { color: #c9f0dc; font-weight: 600; }
.hh-walk strong { font-size: 1.7rem; } .hh-walk .go { background: #fff; color: #13764f; border-radius: 999px; padding: 10px 16px; font-weight: 800; }
.hh-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.hh-mini a { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.hh-mini a:hover { text-decoration: none; border-color: #bfe2f6; }
.hh-mini .k { font-size: .68rem; font-weight: 800; letter-spacing: .3px; } .hh-mini .v { color: #5b3fc4; } .hh-mini .a { color: #a35f00; } .hh-mini .p { color: #b0336b; }
@media (max-width: 720px) { .fam-grid { grid-template-columns: 1fr; } }

/* Care calendar, weight, senior, special days, season, emergency, food checker */
.season-tip { display: flex; gap: 12px; align-items: flex-start; background: #fff8e8; border: 1px solid #f6dfbd; border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; }
.season-tip i { color: #a35f00; font-size: 1.2rem; margin-top: 2px; }
.season-tip div { display: flex; flex-direction: column; gap: 2px; } .season-tip span { font-size: .88rem; color: var(--ink-2); }
.card.hl-care, .card.hl-weight, .card.hl-senior, .card.hl-dates { margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.hl-care h2 i { color: #0f7f86; } .hl-weight h2 i { color: var(--brand); } .hl-senior h2 i { color: #c2417a; } .hl-dates h2 i { color: #a35f00; }
.care-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; border: 1px solid #eef4f8; border-radius: 14px; padding: 12px; margin: 0; }
.care-row.late { border-color: #f3c3c3; background: #fff6f6; }
.care-row .grow { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.care-row small { color: var(--ink-2); } .care-row.late small { color: #b42318; font-weight: 600; }
.care-row .every { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 500; color: var(--ink-2); margin: 4px 0 0; }
.care-row .every input { width: 70px !important; padding: 5px 8px !important; }
.care-btns { display: flex; gap: 6px; }
.btn.care-go { background: #0f7f86; box-shadow: none; } .btn.care-go:hover { background: #0b666c; }
.wchart { width: 100%; height: auto; max-height: 160px; background: #f7fbfe; border-radius: 12px; }
.wdates { display: flex; justify-content: space-between; }
.up { color: #b26a00; } .down { color: #13764f; }
.inline-form { display: flex; gap: 8px; margin: 0; } .inline-form input { flex: 1; }
.sr { position: absolute; left: -9999px; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
.checks i { color: #c2417a; margin-right: 6px; }
.btn.emergency { background: #c62828; box-shadow: 0 10px 22px -12px rgba(198, 40, 40, .8); }
.btn.emergency:hover { background: #a61f1f; }
.em-hero { background: #c62828; color: #fff; border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.em-hero h1 { margin: 0; color: #fff; font-weight: 800; } .em-hero p { margin: 0; color: #ffdede; }
.em-hero .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.em-hero .btn { background: #fff; color: #c62828; box-shadow: none; }
.em-vet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.em-vet .grow { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.em-aid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.em-aid .card h3 { display: flex; gap: 8px; align-items: center; } .em-aid .card i { color: #c62828; }
.em-aid ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.food-res { display: flex; flex-direction: column; gap: 10px; }
.food { display: flex; flex-direction: column; gap: 6px; }
.verdicts { display: flex; gap: 8px; flex-wrap: wrap; }
.v { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 12px; font-size: .84rem; font-weight: 700; }
.v.ok { background: #e5f6ee; color: #13764f; } .v.warn { background: #fdf2df; color: #8a5200; } .v.bad { background: #fde8e8; color: #b42318; }
.bday { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #fff1dd, #fcebf3); border: 1px solid #f6dfbd; border-radius: 18px; padding: 14px 16px; margin-top: 14px; }
.bday b { font-size: 1.05rem; }
.home-quick { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* =========================================================
   Home v3 - calm, editorial (23 Oct 2026)
   ========================================================= */
body { background: #f6f4ef; background-image: none; }
.topbar { background: rgba(246, 244, 239, .86); }
.hx { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.hx-main { position: relative; overflow: hidden; background: #0f2a3d; color: #fff; border-radius: 28px; padding: 36px 36px 30px; display: flex; flex-direction: column; justify-content: center; }
.hx-main::after { content: ""; position: absolute; right: -90px; top: -90px; width: 280px; height: 280px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 0 0 40px rgba(255, 255, 255, .025), 0 0 0 80px rgba(255, 255, 255, .02); }
.hx-kicker { margin: 0 0 10px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #9fc3db; font-weight: 600; }
.hx-title { margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.12; letter-spacing: -.02em; color: #fff; max-width: 560px; }
.hx-ask { margin-top: 24px; display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 16px; padding: 6px 6px 6px 18px; max-width: 580px; position: relative; z-index: 1; }
.hx-ask input[type=text] { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent; padding: 11px 4px; font-size: 1rem; color: #14212b; }
.hx-mic, .hx-send { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; border: 0; }
.hx-mic { background: #f1f4f6; color: #0f2a3d; } .hx-mic:hover { background: #e6ecf0; text-decoration: none; }
.hx-send { background: #0f6fa8; color: #fff; } .hx-send:hover { background: #0c5f94; }
.hx-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; position: relative; z-index: 1; }
.hx-links a { color: #d7e8f3; font-size: .85rem; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); }
.hx-links a:hover { background: rgba(255, 255, 255, .08); text-decoration: none; color: #fff; }
.hx-links a.sos { border-color: rgba(255, 120, 120, .45); color: #ffc9c9; }
.hx-links a.sos:hover { background: rgba(255, 90, 90, .14); }

.hx-today { background: #fff; border: 1px solid #e8e4dc; border-radius: 28px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.td-head { display: flex; align-items: center; gap: 12px; }
.td-head > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.td-head b { font-size: 1.1rem; } .td-head small { color: #6b7780; }
.td-ava { width: 48px; height: 48px; border-radius: 50%; background: #f3efe6; display: grid; place-items: center; font-size: 1.5rem; flex: none; }
.td-open { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e8e4dc; display: grid; place-items: center; color: #14212b; }
.td-open:hover { background: #f6f4ef; text-decoration: none; }
.td-walk { display: flex; align-items: center; gap: 14px; background: #f6f4ef; border-radius: 18px; padding: 14px; color: #14212b; }
.td-walk:hover { text-decoration: none; background: #efece4; }
.td-walk .ring { --p: 0; width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(#1f8a5c calc(var(--p) * 1%), #e3ddd0 0); }
.td-walk .ring span { width: 44px; height: 44px; border-radius: 50%; background: #f6f4ef; display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.td-walk .t { display: flex; flex-direction: column; flex: 1; line-height: 1.25; } .td-walk small { color: #6b7780; font-size: .76rem; }
.td-walk strong { font-size: 1.4rem; letter-spacing: -.02em; }
.td-walk .go { font-size: .82rem; font-weight: 700; color: #fff; background: #1f8a5c; border-radius: 999px; padding: 8px 13px; white-space: nowrap; }
.td-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.td-list li { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid #f0ece4; font-size: .9rem; }
.td-list li i { width: 18px; text-align: center; color: #8a949b; } .td-list li span { flex: 1; color: #4a5560; }
.td-list li.warn i, .td-list li.warn b { color: #b45309; } .td-list li.party i { color: #c2417a; }
.td-pug { width: 92px; align-self: center; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .12)); }
.td-empty-t { text-align: center; font-size: 1.1rem; } .td-empty-s { text-align: center; color: #6b7780; }

.note { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 18px; border-radius: 18px; background: #fbf6ea; border: 1px solid #efe3c6; }
.note i { color: #b26a00; margin-top: 3px; } .note p { margin: 0; font-size: .9rem; color: #4a4636; }

.sx { margin-top: 34px; }
.sx-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.sx-head h2 { margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 1.45rem; letter-spacing: -.01em; }
.sx-head a { font-size: .86rem; font-weight: 600; color: #0c5f94; }
.sx-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.sx-grid a { background: #fff; border: 1px solid #e8e4dc; border-radius: 20px; padding: 18px 16px; display: flex; flex-direction: column; gap: 3px; color: #14212b; transition: border-color .2s, transform .2s, box-shadow .2s; }
.sx-grid a:hover { text-decoration: none; border-color: #cfc7b6; transform: translateY(-2px); box-shadow: 0 14px 30px -24px rgba(20, 33, 43, .5); }
.sx-grid .ic { width: 40px; height: 40px; border-radius: 12px; background: #f3efe6; color: #0f2a3d; display: grid; place-items: center; margin-bottom: 10px; }
.sx-grid b { font-size: .95rem; } .sx-grid small { color: #6b7780; font-size: .8rem; }

.fx { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fx-card { border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 6px; color: #14212b; border: 1px solid; min-height: 170px; transition: transform .2s; }
.fx-card:hover { text-decoration: none; transform: translateY(-2px); }
.fx-card small { font-size: .7rem; letter-spacing: .14em; font-weight: 700; }
.fx-card b { font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 1.35rem; line-height: 1.2; }
.fx-card span { color: #4a5560; font-size: .9rem; max-width: 380px; }
.fx-card em { margin-top: auto; font-style: normal; font-weight: 700; font-size: .88rem; padding-top: 10px; }
.fx-card.adopt { background: #fbf3e6; border-color: #f0dfc2; } .fx-card.adopt small, .fx-card.adopt em { color: #9a5a00; }
.fx-card.friends { background: #f1eefb; border-color: #ddd6f5; } .fx-card.friends small, .fx-card.friends em { color: #5b3fc4; }

.px { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.px-card { background: #fff; border: 1px solid #e8e4dc; border-radius: 22px; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: #14212b; }
.px-card:hover { text-decoration: none; border-color: #cfc7b6; }
.px-ava { width: 52px; height: 52px; border-radius: 50%; background: #f3efe6; display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 10px; }
.px-card b { font-size: 1.05rem; } .px-card small { color: #6b7780; font-size: .82rem; } .px-card .cl { color: #0c5f94; }

.plus-band { margin-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-radius: 20px; background: #14212b; color: #c9d4db; font-size: .9rem; }
.plus-band b { color: #fff; margin-right: 6px; } .plus-band em { font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #14212b; background: #f2d28b; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }

@media (max-width: 900px) {
    .hx { grid-template-columns: 1fr; }
    .sx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .hx-main { padding: 26px 20px 22px; border-radius: 24px; }
    .hx-today { border-radius: 24px; padding: 18px; }
    .sx-grid { gap: 10px; } .sx-grid a { padding: 14px 12px; border-radius: 18px; } .sx-grid small { display: none; }
    .sx-grid .ic { margin-bottom: 6px; }
    .fx { grid-template-columns: 1fr; } .fx-card { min-height: 0; padding: 20px; }
    .px { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plus-band { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Home v4 polish (23 Oct 2026)
   ========================================================= */
.hx-main { background: radial-gradient(120% 140% at 100% 0%, #1b4a69 0%, #0f2a3d 55%, #0c2233 100%); padding-right: 200px; min-height: 300px; }
.hx-main::after { display: none; }
.hx-pug { position: absolute; right: 18px; bottom: -8px; width: 190px; opacity: .95; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); pointer-events: none; }
.hx-title em { font-style: italic; color: #f2d28b; }
.hx-ask { box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .6); }
.hx-ask .lead { color: #0f6fa8; margin-right: 2px; }
.td-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #9a8f78; font-weight: 700; }
.td-rows { margin: 0; display: flex; flex-direction: column; }
.td-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; border-top: 1px solid #f0ece4; font-size: .88rem; }
.td-rows dt { display: flex; align-items: center; gap: 10px; color: #4a5560; margin: 0; }
.td-rows dt i { width: 18px; text-align: center; color: #9aa3a9; }
.td-rows dd { margin: 0; font-weight: 600; color: #14212b; text-align: right; }
.td-rows dd a { font-weight: 600; }
.td-rows .warn dt i, .td-rows .warn dd { color: #b45309; }
.td-rows .party dt i { color: #c2417a; }
.td-walk .go i { font-size: .7rem; margin-right: 3px; }
.td-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin: auto 0; }
.td-empty small { color: #6b7780; max-width: 260px; }
.note { align-items: center; }
.note-ic { width: 34px; height: 34px; border-radius: 10px; background: #f3e4bf; display: grid; place-items: center; flex: none; }
.note-ic i { margin: 0; }
.note p b { margin-right: 6px; color: #3d3624; }
.eyebrow { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: #9a8f78; font-weight: 700; margin-bottom: 2px; }
.sx-head { align-items: flex-end; }
.sx-head a i { font-size: .75rem; margin-left: 3px; }
.sx-grid a { position: relative; }
.sx-grid .arr { position: absolute; right: 14px; top: 18px; font-size: .78rem; color: #c3bba9; transition: transform .2s, color .2s; }
.sx-grid a:hover .arr { transform: translateX(3px); color: #14212b; }
.sx-grid .ic { background: var(--s, #f3efe6); color: var(--c, #0f2a3d); }
.t-blue { --c: #0f6fa8; --s: #e7f1f8; } .t-violet { --c: #5b3fc4; --s: #efebfb; } .t-green { --c: #1f7a52; --s: #e6f3ec; }
.t-rose { --c: #b4366c; --s: #f9e9f0; } .t-amber { --c: #9a5a00; --s: #f8eedb; } .t-teal { --c: #0e7076; --s: #e2f2f2; }
.agenda { background: #fff; border: 1px solid #e8e4dc; border-radius: 22px; overflow: hidden; }
.ag { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: #14212b; border-top: 1px solid #f0ece4; }
.ag:first-child { border-top: 0; }
a.ag:hover { background: #faf8f3; text-decoration: none; }
.ag-date { width: 48px; height: 52px; flex: none; border-radius: 12px; background: #e7f1f8; color: #0c5f94; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ag-date b { font-size: 1.2rem; } .ag-date small { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
.ag-date.vax { background: #efebfb; color: #5b3fc4; }
.ag-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ag-main small { color: #6b7780; font-size: .82rem; }
.pill { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 5px 11px; background: #f3efe6; color: #6b5f45; white-space: nowrap; }
.pill.ok { background: #e6f3ec; color: #1f7a52; } .pill.wait { background: #f8eedb; color: #9a5a00; }
.pill.book { background: #0f6fa8; color: #fff; } .pill.book:hover { text-decoration: none; background: #0c5f94; }
.fx-card { position: relative; overflow: hidden; }
.fx-art { position: absolute; right: -14px; bottom: -22px; font-size: 7.5rem; opacity: .09; transform: rotate(-12deg); }
.fx-card.adopt .fx-art { color: #9a5a00; } .fx-card.friends .fx-art { color: #5b3fc4; }
.px { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.px-card { padding: 0; overflow: hidden; }
.px-top { display: flex; align-items: center; gap: 14px; padding: 18px; color: #14212b; width: 100%; }
.px-top:hover { text-decoration: none; background: #faf8f3; }
.px-top > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.px-ava { margin: 0; background: linear-gradient(145deg, #f3efe6, #e7f1f8); box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px #e8e4dc; }
.px-acts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #f0ece4; width: 100%; }
.px-acts a { padding: 11px 6px; text-align: center; font-size: .8rem; font-weight: 600; color: #4a5560; border-left: 1px solid #f0ece4; }
.px-acts a:first-child { border-left: 0; }
.px-acts a:hover { background: #faf8f3; color: #14212b; text-decoration: none; }
.px-acts i { margin-right: 4px; color: #9aa3a9; }
.cx { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.cx-card { background: #fff; border: 1px solid #e8e4dc; border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.cx-top { display: flex; align-items: center; gap: 12px; color: #14212b; }
.cx-top:hover { text-decoration: none; } .cx-top:hover .arr { transform: translateX(3px); }
.cx-top img, .cx-logo { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex: none; }
.cx-logo { background: #e7f1f8; color: #0f6fa8; display: grid; place-items: center; }
.cx-top > span { flex: 1; display: flex; flex-direction: column; } .cx-top small { color: #6b7780; }
.cx-top .arr { color: #c3bba9; transition: transform .2s; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-chips a { font-size: .8rem; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: #e7f1f8; color: #0c5f94; }
.cx-chips a:hover { text-decoration: none; background: #d6e8f4; }
.cx-chips.plain a { background: #f6f4ef; color: #4a5560; font-weight: 500; }
.plus-band { background: linear-gradient(120deg, #14212b, #1d3446); padding: 20px 24px; }
.pb-t { display: flex; flex-direction: column; gap: 2px; } .pb-t b { font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 1.15rem; }
@media (max-width: 900px) { .hx-main { padding-right: 36px; } .hx-pug { width: 130px; opacity: .25; } }
@media (max-width: 720px) {
    .hx-main { padding: 26px 20px 22px; min-height: 0; }
    .hx-pug { width: 110px; right: -8px; top: 6px; bottom: auto; opacity: .9; }
    .hx-title { padding-right: 80px; }
    .sx-grid .arr { display: none; }
    .ag { padding: 12px 14px; gap: 12px; }
    .cx { grid-template-columns: 1fr; }
    .px { grid-template-columns: 1fr; }
}

/* =========================================================
   Home colours: back to ScoobyPaw light blue + navy + white
   (layout unchanged)
   ========================================================= */
body { background: #f5fbff; }
.topbar { background: rgba(255, 255, 255, .9); }
.hx-main { background: radial-gradient(120% 140% at 100% 0%, #1d6fa3 0%, #0f3f63 50%, #0b2e4a 100%); }
.hx-title em { color: #9fdcff; }
.hx-kicker { color: #a9d6f2; }
.hx-today, .sx-grid a, .agenda, .px-card, .cx-card { border-color: #dfeaf2; }
.hx-today { box-shadow: 0 14px 34px -26px rgba(15, 63, 99, .45); }
.td-label, .eyebrow { color: #4f7da0; }
.td-ava, .px-ava { background: #eaf5fd; }
.td-open { border-color: #dfeaf2; } .td-open:hover { background: #eaf5fd; }
.td-walk { background: #eef7fd; } .td-walk:hover { background: #e2f1fb; }
.td-walk .ring { background: conic-gradient(#0f6fa8 calc(var(--p) * 1%), #d4e7f4 0); }
.td-walk .ring span { background: #eef7fd; }
.td-walk .go { background: #0f6fa8; }
.td-rows > div, .ag, .px-acts, .px-acts a { border-color: #e8f1f7; }
.td-rows dt i, .px-acts i { color: #7fa6c2; }
.note { background: #eaf5fd; border-color: #cfe6f5; }
.note-ic { background: #d6ecfb; } .note-ic i { color: #0f6fa8; }
.note p, .note p b { color: #24435a; }
.sx-grid a:hover { border-color: #b9d9ef; box-shadow: 0 14px 30px -24px rgba(15, 63, 99, .5); }
.sx-grid .ic, .t-blue, .t-violet, .t-green, .t-rose, .t-amber, .t-teal { --c: #0f5f8f; --s: #e4f2fc; }
.sx-grid .arr { color: #a9c7dc; }
.fx-card.adopt { background: #eaf5fd; border-color: #cfe6f5; }
.fx-card.friends { background: #ffffff; border-color: #dfeaf2; }
.fx-card.adopt small, .fx-card.adopt em, .fx-card.friends small, .fx-card.friends em { color: #0f6fa8; }
.fx-card.adopt .fx-art, .fx-card.friends .fx-art { color: #0f6fa8; }
.px-top:hover, .px-acts a:hover, a.ag:hover { background: #f3f9fd; }
.ag-date, .ag-date.vax { background: #e4f2fc; color: #0f5f8f; }
.pill { background: #eef5fa; color: #4a6478; } .pill.wait { background: #e4f2fc; color: #0f5f8f; }
.cx-chips.plain a { background: #f3f8fc; }
.cx-top .arr { color: #a9c7dc; }
.plus-band { background: linear-gradient(120deg, #0b2e4a, #0f3f63); }
.plus-band em { background: #9fdcff; color: #0b2e4a; }
.td-rows .warn dt i, .td-rows .warn dd { color: #b45309; }

/* =========================================================
   Home: original ScoobyPaw light-blue look (no navy hero)
   ========================================================= */
.hx-main { background: linear-gradient(135deg, #fafdff 0%, #eef7fe 55%, #ffffff 100%); color: var(--ink); border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(16, 33, 43, .04), 0 18px 40px -26px rgba(22, 71, 103, .35); }
.hx-main::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; right: -80px; top: -140px; background: rgba(103, 183, 232, .14); }
.hx-main::after { display: block; content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; left: -70px; bottom: -110px; background: rgba(214, 236, 251, .9); border: 0; box-shadow: none; right: auto; top: auto; }
.hx-main > * { position: relative; z-index: 1; }
.hx-pug { position: absolute; z-index: 1; filter: drop-shadow(0 14px 24px rgba(31, 134, 196, .2)); }
.hx-kicker { color: var(--brand-dark); }
.hx-title, .sx-head h2, .fx-card b, .pb-t b { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 800; letter-spacing: -.6px; }
.hx-title { color: var(--ink); }
.hx-title em { font-style: normal; color: var(--brand); }
.sx-head h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.2px; }
.fx-card b { font-size: 1.2rem; font-weight: 700; letter-spacing: -.2px; }
.hx-ask { border: 1.5px solid #cfe6f5; box-shadow: 0 14px 34px -20px rgba(15, 111, 168, .45); }
.hx-mic { background: var(--brand-soft); color: var(--brand-dark); }
.hx-links a { color: var(--ink); background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 12px -8px rgba(22, 71, 103, .3); }
.hx-links a:hover { background: var(--brand-soft); color: var(--ink); }
.hx-links a.sos { color: #c62828; border-color: #f3c3c3; background: #fff; }
.hx-links a.sos:hover { background: #fff1f1; }
.plus-band { background: linear-gradient(120deg, #eaf5fd, #ffffff); border: 1px solid #cfe6f5; color: var(--ink-2); }
.plus-band b { color: var(--ink); }
.plus-band em { background: var(--brand); color: #fff; }

/* Phone: the menu is a bottom bar. A blurred (backdrop-filter) top bar traps
   position:fixed children inside it, which pulled the menu up to the top. */
@media (max-width: 720px) {
    .topbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #fff; }
    .nav { position: fixed !important; top: auto !important; bottom: 0; left: 0; right: 0; z-index: 50; }
}

/* Bell, bookings, notifications */
.bell { position: relative; order: 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); border: 1px solid var(--line); background: #fff; flex: none; }
.bell:hover { background: var(--brand-soft); text-decoration: none; }
.bell-n { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #d14343; color: #fff; font-size: .66rem; font-weight: 800; display: grid; place-items: center; }
.topbar-inner .nav { order: 2; }
.bk-row { flex-wrap: wrap; } .bk-cancel { margin: 0; }
.nt-row { margin: 0; } .nt-row .ag-main small { line-height: 1.4; } .nt-time { color: #8aa0b2 !important; font-size: .74rem !important; }
.nt-dot { width: 9px; height: 9px; border-radius: 50%; background: transparent; flex: none; }
.nt-row.unread { background: #f3f9fd; } .nt-row.unread .nt-dot { background: var(--brand); }
@media (max-width: 720px) { .bell { margin-left: auto; } }

/* Refer a friend */
.refer-box { text-align: left; background: #eaf5fd; border: 1px solid #cfe6f5; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.rf-t { font-size: 1.05rem; } .rf-o { margin: 0; color: #24435a; font-size: .9rem; }
.rf-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1.5px dashed #9fc9e6; border-radius: 14px; padding: 10px 12px; }
.rf-code span { font-size: .78rem; color: #52627a; } .rf-code strong { font-size: 1.35rem; letter-spacing: .12em; color: #0c5f94; flex: 1; }
.rf-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rf-btn, .rf-wa { border: 0; border-radius: 999px; padding: 10px 16px; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.rf-btn { background: #0f6fa8; color: #fff; } .rf-btn.ghost { background: #fff; color: #0c5f94; border: 1px solid #cfe6f5; }
.rf-wa { background: #1f9d55; color: #fff; } .rf-wa:hover { text-decoration: none; background: #18834a; }
.rf-n { margin: 0; font-size: .82rem; color: #52627a; }
.refer-strip { margin-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 22px; border-radius: 20px; background: #fff; border: 1px solid #dfeaf2; color: #24435a; }
.refer-strip:hover { text-decoration: none; border-color: #b9d9ef; }
.refer-strip b { color: #102033; margin-right: 6px; } .refer-strip em { font-style: normal; font-weight: 700; color: #0f6fa8; }
.refer-strip + .plus-band { margin-top: 14px; }

/* More services: 5 per row, coming-soon tiles and page */
.sx-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sx-grid a.soon small { color: #0f6fa8; font-weight: 600; }
.soon-card { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.soon-card h1 { margin: 4px 0 0; }
.soon-ic { width: 56px; height: 56px; border-radius: 18px; background: #e4f2fc; color: #0f5f8f; display: grid; place-items: center; font-size: 1.4rem; }
.soon-badge { align-self: flex-start; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: #0f6fa8; color: #fff; border-radius: 999px; padding: 4px 10px; }
.soon-card .checks i { color: #0f6fa8; }
@media (max-width: 900px) { .sx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Refer box: invite preview + add a friend's code */
.refer-box .rf-msg{margin:0;background:#fff;border:1px dashed #cfe6f5;border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.5;color:#334155;white-space:pre-line;overflow-wrap:anywhere}
.refer-box .rf-add{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.refer-box .rf-add label{font-size:13px;font-weight:600;color:#0b2545}
.refer-box .rf-add div{display:flex;gap:8px}
.refer-box .rf-add input{flex:1;min-width:0;padding:9px 12px;border:1px solid #cfe6f5;border-radius:10px;text-transform:uppercase;font:inherit;background:#fff}