:root {
    --app-bg:#faf8f3;
    --app-surface:#ffffff;
    --app-ink:#142f3d;
    --app-muted:#66757d;
    --app-primary:#0d4661;
    --app-primary-dark:#082f43;
    --app-secondary:#c7aa75;
    --app-secondary-dark:#98783f;
    --app-sand:#efe8dc;
    --app-border:#ddd9d0;
    --app-danger:#8b1e2d;
    --mobile-nav-height:76px;
}
* { box-sizing:border-box; }
html { overflow-x:hidden; }
body {
    min-height:100vh;
    margin:0;
    overflow-x:hidden;
    color:var(--app-ink);
    background:var(--app-bg);
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
}
a { color:var(--app-primary); }
img { max-width:100%; }
.app-main { padding-top:clamp(1.25rem,3vw,2.5rem); padding-bottom:2rem; }
.navbar-shell { position:relative; z-index:1030; }
.navbar-app { min-height:72px; background:var(--app-primary-dark); box-shadow:0 2px 14px rgba(8,47,67,.16); }
.navbar-logo { width:48px; height:48px; object-fit:contain; border-radius:15px; background:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.24); }
.brand-copy { display:flex; flex-direction:column; line-height:1; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.brand-copy strong { margin-top:.2rem; font-size:1.05rem; letter-spacing:.01em; text-transform:none; }
.navbar-app .nav-link { min-height:44px; display:flex; align-items:center; border-radius:12px; padding:.55rem .8rem; color:rgba(255,255,255,.84); font-weight:650; }
.navbar-app .nav-link:hover,.navbar-app .nav-link:focus-visible,.navbar-app .nav-link.active { color:#fff; background:rgba(255,255,255,.14); }
.navbar-admin-access { gap:.4rem; border:1px solid rgba(236,212,165,.42); color:#f2ddb2 !important; }
.navbar-admin-access svg,.navbar-admin-mobile svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.navbar-admin-access:hover,.navbar-admin-access:focus-visible,.navbar-admin-access.is-active { border-color:rgba(236,212,165,.78); color:#fff !important; background:rgba(199,170,117,.2) !important; }
.navbar-admin-mobile { display:none; }
.mobile-bottom-nav { display:none; }
.screen-header,.page-header {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1.35rem;
}
.screen-header h1,.page-header h1 { margin:0; color:#111; font-size:clamp(2rem,5vw,3rem); font-weight:800; letter-spacing:-.035em; }
.screen-header p,.page-header p { margin:.35rem 0 0; color:var(--app-muted); }
.screen-kicker,.eyebrow,.status-kicker {
    display:block;
    margin-bottom:.3rem;
    color:var(--app-secondary-dark);
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}
.surface-card,.card {
    border:1px solid rgba(20,47,61,.08);
    border-radius:20px;
    background:var(--app-surface);
    box-shadow:0 8px 28px rgba(20,47,61,.07);
}
.btn {
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.35rem;
    border-width:1.5px;
    border-radius:14px;
    padding:.62rem 1rem;
    font-weight:720;
    transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease;
}
.btn-sm { min-height:38px; border-radius:11px; padding:.42rem .7rem; }
.btn-touch { min-height:48px; }
.btn-primary {
    color:#fff !important;
    background-color:#0d4661 !important;
    border-color:#082f43 !important;
    box-shadow:0 5px 14px rgba(8,47,67,.2);
}
.btn-primary:hover,.btn-primary:focus-visible { color:#fff !important; background:#082f43 !important; transform:translateY(-1px); }
.btn-gold { color:#172e39 !important; background:#d6c092 !important; border-color:#b89c65 !important; box-shadow:0 5px 14px rgba(152,120,63,.18); }
.btn-gold:hover,.btn-gold:focus-visible { color:#fff !important; background:#98783f !important; border-color:#80622f !important; transform:translateY(-1px); }
.btn-outline-primary { color:#0b415d !important; background:#fff !important; border:2px solid #0d4661 !important; }
.btn-outline-primary:hover,.btn-outline-primary:focus-visible { color:#fff !important; background:#0d4661 !important; }
.btn-outline-danger { color:#8b1e2d !important; background:#fff !important; border:2px solid #a52738 !important; }
.btn-outline-danger:hover,.btn-outline-danger:focus-visible { color:#fff !important; background:#8b1e2d !important; }
.btn-outline-secondary { color:#30434b !important; background:#fff !important; border:2px solid #687a82 !important; }
.btn-outline-secondary:hover,.btn-outline-secondary:focus-visible { color:#fff !important; background:#30434b !important; }
.btn-light { color:var(--app-primary-dark) !important; background:#fff !important; border:2px solid #fff !important; }
.btn-terracotta { color:#fff !important; background:#9c552d !important; border:2px solid #83431f !important; }
.btn:focus-visible,.page-link:focus-visible,.nav-link:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
    outline:3px solid #d39b43;
    outline-offset:3px;
    box-shadow:none !important;
}
.btn:active:not(:disabled),.navbar-admin-mobile:active,.mobile-nav-item:active { transform:translateY(1px) scale(.98); }
.search-panel { margin-bottom:1rem; }
.search-row { display:flex; gap:.65rem; }
.search-box {
    min-height:52px;
    flex:1;
    display:flex;
    align-items:center;
    gap:.7rem;
    padding:0 1rem;
    border:1px solid #d8d8d5;
    border-radius:15px;
    background:#f0f0ef;
}
.search-box svg,.filter-toggle svg { width:24px; height:24px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.search-box svg { color:#778087; }
.search-box input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:#172e39; font-size:1rem; }
.search-box input::placeholder { color:#7b8285; opacity:1; }
.filter-toggle { width:52px; min-width:52px; min-height:52px; display:grid; place-items:center; border:1px solid #d8d8d5; border-radius:15px; color:var(--app-primary); background:#f0f0ef; }
.filter-toggle:hover,.filter-toggle:focus-visible { color:#fff; background:var(--app-primary); }
.filter-drawer { margin-top:.8rem; padding:1rem; border:1px solid var(--app-border); border-radius:18px; background:#fff; }
.filter-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1rem; }
.results-counter { margin:.75rem 0 1rem; color:#53666f; font-size:.9rem; font-weight:650; }
.app-card-grid { display:grid; gap:1rem; grid-template-columns:1fr; }
.entity-card {
    min-width:0;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(20,47,61,.09);
    border-radius:18px;
    background:#fff;
    box-shadow:0 7px 22px rgba(20,47,61,.08);
    transition:transform .18s ease,box-shadow .18s ease;
}
.entity-card:hover,.entity-card:focus-within { transform:translateY(-3px); box-shadow:0 12px 28px rgba(20,47,61,.13); }
.entity-card-photo { position:relative; aspect-ratio:1/1; overflow:hidden; background:#ece9e3; }
.entity-card-photo img { width:100%; height:100%; display:block; object-fit:cover; }
.entity-card-body { min-width:0; padding:.9rem; }
.entity-card-title { margin:0; color:#121212; font-size:1.18rem; font-weight:800; line-height:1.15; }
.entity-card-title a { color:inherit; text-decoration:none; }
.entity-card-subtitle,.entity-card-meta { margin:.28rem 0 0; color:var(--app-muted); font-size:.92rem; line-height:1.35; overflow-wrap:anywhere; }
.entity-card-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; position:relative; z-index:3; }
.entity-card-actions form { margin:0; }
.entity-card .status-kicker { margin:0 0 .35rem; font-size:.68rem; }
.entity-card-body>.status-pill { margin-bottom:.55rem; }
.status-pill {
    display:inline-flex;
    align-items:center;
    width:max-content;
    max-width:100%;
    min-height:28px;
    padding:.3rem .62rem;
    border-radius:999px;
    color:#263c43;
    background:#ece8df;
    font-size:.74rem;
    font-weight:800;
    line-height:1.1;
}
.entity-card-photo>.status-pill { position:absolute; left:.6rem; bottom:.6rem; z-index:2; box-shadow:0 2px 10px rgba(0,0,0,.18); }
.status-active { color:#155b3b; background:#dff3e8; }
.status-inactive { color:#4c5b62; background:#e7ebed; }
.status-pending { color:#72520f; background:#fff0c5; }
.status-danger,.status-lost { color:#fff; background:#9b2635; }
.owner-entity-card .entity-card-photo { aspect-ratio:4/3; }
.empty-state { padding:clamp(2rem,6vw,4rem) 1.25rem; text-align:center; color:var(--app-muted); }
.empty-state h2 { color:var(--app-ink); font-size:1.25rem; }
.empty-icon { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 1rem; border-radius:50%; color:var(--app-primary); background:var(--app-sand); font-size:1.7rem; }
.page-link { min-height:42px; min-width:42px; display:flex; align-items:center; justify-content:center; color:var(--app-primary); border-color:#aab6bb; background:#fff; font-weight:700; }
.page-item.active .page-link { color:#fff; background:var(--app-primary); border-color:var(--app-primary-dark); }
.page-item.disabled .page-link { color:#6b767b; background:#eef1f2; }
.pagination-responsive { flex-wrap:wrap; gap:.2rem; }
.back-link { min-height:44px; width:max-content; display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1rem; color:var(--app-primary); font-weight:750; text-decoration:none; }
.pet-profile-hero { display:grid; gap:1.25rem; margin-bottom:1.25rem; }
.pet-profile-image { position:relative; overflow:hidden; border-radius:24px; background:#ece9e3; box-shadow:0 10px 30px rgba(20,47,61,.12); }
.pet-profile-image>img { width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pet-profile-image>.status-pill { position:absolute; left:1rem; bottom:1rem; }
.pet-profile-heading { align-self:center; }
.pet-profile-heading h1,.owner-profile-header h1 { margin:0; color:#111; font-size:clamp(2.2rem,7vw,4.2rem); font-weight:850; letter-spacing:-.045em; line-height:.95; overflow-wrap:anywhere; }
.pet-profile-heading>p,.owner-profile-header>p { margin:.65rem 0 1rem; color:var(--app-muted); font-size:1.08rem; }
.detail-actions { display:flex; flex-wrap:wrap; gap:.55rem; }
.detail-actions form { display:flex; }
.detail-navigation { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.25rem; }
.detail-section { margin-top:1.25rem; }
.detail-section.surface-card { padding:clamp(1.1rem,4vw,2rem); }
.section-title-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.section-title-row h2,.form-section h2 { margin:0; color:#111; font-size:clamp(1.35rem,4vw,1.8rem); font-weight:800; }
.detail-rows { margin:0; }
.detail-rows>div { display:grid; grid-template-columns:minmax(110px,42%) minmax(0,1fr); align-items:start; gap:1rem; padding:.85rem 0; border-bottom:1px solid #e6e3dc; }
.detail-rows>div:last-child { border-bottom:0; }
.detail-rows dt { color:#68767c; font-weight:600; }
.detail-rows dd { min-width:0; margin:0; color:#151515; text-align:right; font-weight:650; overflow-wrap:anywhere; }
.owner-profile-header { text-align:center; margin:0 auto 1.5rem; }
.owner-avatar { width:168px; height:168px; display:block; margin:0 auto 1rem; object-fit:cover; border:8px solid #eee8dd; border-radius:50%; box-shadow:0 8px 25px rgba(20,47,61,.1); }
.photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.photo-card { overflow:hidden; border:1px solid var(--app-border); border-radius:16px; background:#fff; }
.photo-card>img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.photo-card-actions { display:flex; flex-wrap:wrap; gap:.4rem; padding:.65rem; }
.photo-card-actions form { display:flex; }
.upload-panel,.photo-field { display:grid; gap:1rem; padding:1rem; align-items:center; }
.upload-panel .image-preview,.photo-field .image-preview { width:100%; max-width:230px; margin:auto; }
.pet-photo-preview-wrap { display:grid; place-items:center; width:100%; max-width:230px; aspect-ratio:1/1; margin:auto; }
.pet-photo-preview-wrap .image-preview { grid-area:1/1; }
.pet-photo-avatar { display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,var(--app-secondary),var(--app-primary)); font-weight:900; text-transform:uppercase; }
.pet-photo-avatar-form { width:100%; height:100%; border:5px solid #fff; border-radius:18px; font-size:clamp(2rem,8vw,4rem); box-shadow:0 8px 25px rgba(20,47,61,.12); }
.pet-photo-avatar-detail { width:100%; height:100%; aspect-ratio:4/3; font-size:clamp(3rem,12vw,7rem); }
.pet-photo-avatar-list { width:100%; height:100%; font-size:clamp(2.5rem,10vw,5rem); }
.lost-card-details { margin:.85rem 0 0; }
.lost-card-details>div { display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:.55rem; padding:.42rem 0; border-top:1px solid #ece8df; }
.lost-card-details dt { color:var(--app-muted); font-size:.78rem; font-weight:750; }
.lost-card-details dd { min-width:0; margin:0; color:var(--app-ink); font-size:.86rem; font-weight:650; overflow-wrap:anywhere; }
.lost-card-contact { position:relative; z-index:3; display:flex; flex-direction:column; align-items:flex-start; gap:.22rem; margin-top:.75rem; padding:.7rem; border-radius:12px; background:var(--app-sand); overflow-wrap:anywhere; }
.lost-card-contact span { color:#53666f; font-size:.72rem; font-weight:800; text-transform:uppercase; }
.lost-card-contact a { font-size:.84rem; font-weight:700; }
.lost-page-size { width:100%; min-height:52px; margin-top:.65rem; }
.pet-entity-card .btn-sm,.detail-page .btn-sm { min-height:44px; }
.stack-list { display:grid; gap:.75rem; }
.stack-item { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1rem; }
.stack-item p,.stack-item small { display:block; margin:.25rem 0 0; color:var(--app-muted); }
.stack-actions { display:flex; flex-wrap:wrap; gap:.4rem; }
.stack-actions form { display:flex; }
.form-page { max-width:1060px; }
.app-form { display:grid; gap:1rem; }
.form-section { padding:clamp(1rem,4vw,1.6rem); }
.form-section h2 { margin-bottom:1rem; }
.form-control,.form-select { min-height:48px; border:1.5px solid #b8c1c4; border-radius:12px; color:#172e39; background-color:#fff; }
textarea.form-control { min-height:110px; }
.form-control:focus,.form-select:focus { border-color:var(--app-primary); box-shadow:0 0 0 .2rem rgba(13,70,97,.12); }
.form-label { color:#263c45; font-weight:720; }
.form-text { color:#637279; }
.invalid-feedback,.text-danger { font-weight:650; }
.required::after { content:" *"; color:#a31d32; }
.switch-row { min-height:48px; display:flex; align-items:center; gap:.55rem; padding:.7rem .85rem .7rem 3.25rem; border:1px solid var(--app-border); border-radius:12px; background:#faf9f6; }
.switch-row .form-check-input { width:2.7rem; height:1.45rem; margin-left:-2.65rem; }
.form-actions { position:sticky; bottom:.5rem; z-index:20; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:.55rem; padding:.7rem; border:1px solid rgba(20,47,61,.1); border-radius:17px; background:rgba(250,248,243,.94); box-shadow:0 8px 25px rgba(20,47,61,.1); backdrop-filter:blur(10px); }
.record-photo,.image-preview { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:18px; background:#edf1ef; }
.pet-thumb { width:58px; height:58px; object-fit:cover; border-radius:14px; }
.responsive-table { overflow-x:auto; }
.table-actions { white-space:nowrap; text-align:right; }
.table a:not(.btn),.detail-list a,.list-group-item-action { color:#0a4765; font-weight:650; }
.hero { min-height:500px; display:flex; align-items:end; position:relative; overflow:hidden; border-radius:26px; background-position:center; background-size:cover; box-shadow:0 18px 40px rgba(20,47,61,.15); }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,35,49,.94),rgba(5,35,49,.18)); }
.hero-content { position:relative; max-width:760px; padding:clamp(1.5rem,6vw,4.5rem); color:#fff; }
.hero-content h1 { font-size:clamp(2.3rem,7vw,4.8rem); font-weight:850; line-height:.95; letter-spacing:-.04em; }
.hero-kicker { color:#ecd4a5; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:1.2rem; }
.stat-card { border-top:4px solid var(--app-secondary); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.stat-card:hover,.stat-card:focus-within { border-top-color:var(--app-secondary-dark); box-shadow:0 14px 34px rgba(20,47,61,.12); transform:translateY(-3px); }
.stat-card .display-6 { color:var(--app-primary); font-weight:800; }
.stat-label { color:var(--app-muted); font-size:.78rem; font-weight:750; text-transform:uppercase; }
.feature-card { height:300px; position:relative; display:block; overflow:hidden; border-radius:20px; color:#fff; box-shadow:0 9px 26px rgba(20,47,61,.13); }
.feature-card img { width:100%; height:100%; object-fit:cover; transition:transform .42s cubic-bezier(.2,.7,.25,1),filter .25s ease; }
.feature-card { transition:transform .22s ease,box-shadow .22s ease; }
.feature-card:hover,.feature-card:focus-visible { color:#fff; box-shadow:0 16px 36px rgba(20,47,61,.19); transform:translateY(-3px); }
.feature-card:hover img,.feature-card:focus-visible img { filter:brightness(.96); transform:scale(1.025); }
.feature-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,34,47,.92),transparent 70%); }
.feature-overlay { position:absolute; z-index:2; inset:auto 0 0; display:flex; flex-direction:column; padding:1.3rem; }
.gallery-preview img { width:100%; height:100%; min-height:340px; object-fit:cover; transition:transform .42s cubic-bezier(.2,.7,.25,1); }
.gallery-preview:hover img { transform:scale(1.018); }
.gallery-tile { width:100%; min-height:280px; position:relative; overflow:hidden; border:0; border-radius:18px; padding:0; background:#ddd; }
.gallery-tile img { width:100%; min-height:280px; object-fit:cover; }
.gallery-caption { position:absolute; inset:auto 0 0; padding:3rem 1rem 1rem; color:#fff; text-align:left; background:linear-gradient(transparent,rgba(4,29,40,.92)); }
.gallery-caption strong,.gallery-caption span { display:block; }
.gallery-modal-image { width:100%; max-height:78vh; object-fit:contain; background:#101719; }
.app-footer { color:#fff; background:var(--app-primary-dark); }
.footer-logo { width:54px; height:54px; object-fit:contain; border-radius:50%; background:#fff; }
.footer-link { color:#fff; }

/* Interfaz viva: reloj residente y entrada progresiva de elementos del inicio. */
.hero>.live-clock {
    position:absolute;
    z-index:2;
    top:clamp(1rem,3vw,2rem);
    right:clamp(1rem,3vw,2rem);
}
.live-clock {
    width:max-content;
    min-width:205px;
    display:grid;
    grid-template-columns:1fr;
    border:1px solid rgba(255,255,255,.28);
    border-radius:18px;
    padding:.75rem .9rem;
    color:#fff;
    background:rgba(7,42,57,.63);
    box-shadow:0 12px 30px rgba(4,25,34,.16);
    backdrop-filter:blur(13px);
}
.live-clock-label { display:flex; align-items:center; gap:.35rem; color:#ead5ab; font-size:.65rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.live-clock-label svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.live-clock-time { display:flex; align-items:baseline; margin:.12rem 0 0; color:inherit; font-size:clamp(1.85rem,3vw,2.45rem); font-variant-numeric:tabular-nums; font-weight:780; letter-spacing:-.055em; line-height:1; }
.live-clock-separator { margin:0 .05em; opacity:.8; }
.live-clock-seconds { margin-left:.12rem; font-size:.35em; font-weight:650; letter-spacing:0; opacity:.68; }
.live-clock-date { margin-top:.3rem; color:rgba(255,255,255,.84); font-size:.75rem; font-weight:620; line-height:1.2; }
.live-clock-date-compact { display:none; }
.live-clock.is-ticking .live-clock-time { animation:liveClockTick .24s cubic-bezier(.2,.75,.25,1); }
@keyframes liveClockTick { 0% { opacity:.5; transform:translateY(3px); } 100% { opacity:1; transform:none; } }

@keyframes uiElementReveal {
    from { opacity:0; transform:translateY(20px) scale(.97); }
    to { opacity:1; transform:none; }
}
.ui-motion-fallback .ui-reveal { opacity:0; transform:translateY(20px) scale(.97); }
.ui-motion-fallback .ui-reveal.is-revealed { animation:uiElementReveal .52s cubic-bezier(.2,.72,.24,1) var(--ui-reveal-delay,0ms) both; }
@supports (animation-timeline:view()) and (animation-range:entry 0% cover 24%) {
    .ui-motion-scroll .ui-reveal {
        animation:uiElementReveal linear both;
        animation-timeline:view();
        animation-range:entry 0% cover 24%;
    }
}

@media (min-width:360px) {
    .pet-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:576px) {
    .owner-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .lost-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .upload-panel,.photo-field { grid-template-columns:minmax(160px,230px) minmax(0,1fr); }
}
@media (min-width:768px) {
    .pet-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pet-profile-hero { grid-template-columns:minmax(320px,1.2fr) minmax(280px,.8fr); }
    .photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .lost-search-form { display:grid; grid-template-columns:minmax(0,1fr) 10rem; gap:.65rem; }
    .lost-page-size { margin-top:0; }
}
@media (min-width:992px) {
    .pet-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .lost-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1200px) {
    .pet-card-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .owner-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .compact-grid.pet-card-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:991.98px) {
    body { padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 12px); }
    .navbar-app { min-height:64px; background:#fff; box-shadow:0 1px 12px rgba(20,47,61,.08); }
    .navbar-app .container { justify-content:center; }
    .navbar-brand { color:#111 !important; }
    .navbar-logo { width:42px; height:42px; }
    .brand-copy span { color:var(--app-muted); }
    .navbar-toggler,.navbar-collapse { display:none !important; }
    .navbar-admin-mobile { min-width:68px; min-height:48px; position:absolute; right:max(10px,env(safe-area-inset-right)); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1px; border-radius:12px; padding:.3rem .4rem; color:#765c2c; background:#f7f1e5; font-size:.58rem; font-weight:800; text-decoration:none; }
    .navbar-admin-mobile svg { width:20px; height:20px; }
    .navbar-admin-mobile:hover,.navbar-admin-mobile:focus-visible { color:var(--app-primary); background:#eee5d5; }
    .mobile-bottom-nav {
        position:fixed;
        z-index:1050;
        left:0;
        right:0;
        bottom:0;
        height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        padding:6px max(6px,env(safe-area-inset-left)) env(safe-area-inset-bottom) max(6px,env(safe-area-inset-right));
        border-top:1px solid #d9d7d1;
        background:rgba(255,255,255,.97);
        box-shadow:0 -6px 24px rgba(20,47,61,.09);
        backdrop-filter:blur(14px);
    }
    .mobile-nav-item { min-width:0; min-height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:12px; color:#657177; font-size:.68rem; font-weight:650; text-decoration:none; text-align:center; }
    .mobile-nav-item svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .mobile-nav-item.active { color:#8a692e; background:#f7f1e5; }
    .mobile-nav-item.active span { font-weight:800; }
    .app-footer { display:none; }
    .form-actions { bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 6px); }
}
@media (max-width:767.98px) {
    .app-main { padding-left:1rem; padding-right:1rem; }
    .screen-header,.page-header { align-items:center; }
    .screen-header h1,.page-header h1 { font-size:2rem; }
    .screen-header .btn { flex:0 0 auto; padding-inline:.8rem; }
    .detail-actions .btn,.detail-actions form { flex:1 1 135px; }
    .detail-actions form .btn { width:100%; }
    .section-title-row { align-items:flex-start; }
    .section-title-row>.btn { flex:0 0 auto; }
    .responsive-table { overflow:visible; }
    .responsive-records,.responsive-records tbody,.responsive-records tr,.responsive-records td { display:block; width:100%; }
    .responsive-records thead { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }
    .responsive-records tbody { display:grid; gap:1rem; padding:1rem; }
    .responsive-records tbody tr { padding:.4rem 1rem .9rem; border:1px solid var(--app-border); border-radius:17px; background:#fff; }
    .responsive-records tbody td { padding:.65rem 0; border:0; border-bottom:1px solid #e7e4de; text-align:left; white-space:normal; }
    .responsive-records tbody td:last-child { border-bottom:0; }
    .responsive-records tbody td::before { content:attr(data-label); display:block; margin-bottom:.25rem; color:var(--app-muted); font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
    .table-actions { min-width:0; white-space:normal; }
}
@media (max-width:575.98px) {
    .filter-actions,.form-actions { display:grid; grid-template-columns:1fr 1fr; }
    .filter-actions .btn:last-child,.form-actions .btn-primary { grid-column:1/-1; }
    .form-actions .me-auto { margin-right:0 !important; }
    .detail-rows>div { grid-template-columns:minmax(96px,40%) minmax(0,1fr); gap:.65rem; }
    .detail-rows dt,.detail-rows dd { font-size:.94rem; }
    .stack-item { flex-direction:column; }
    .stack-actions { width:100%; }
    .detail-navigation { display:grid; grid-template-columns:1fr; }
    .hero { min-height:430px; border-radius:20px; }
    .hero>.live-clock { top:.8rem; right:.8rem; }
    .live-clock { min-width:0; border-radius:14px; padding:.55rem .65rem; }
    .live-clock-label { font-size:.55rem; }
    .live-clock-time { font-size:1.6rem; }
    .live-clock-seconds,.live-clock-date-full { display:none; }
    .live-clock-date-compact { display:block; margin-top:.16rem; font-size:.65rem; }
}
@media (max-width:359.98px) {
    .pet-card-grid { grid-template-columns:1fr; }
    .screen-header { align-items:flex-start; flex-direction:column; }
    .screen-header .btn { width:100%; }
    .search-row { gap:.4rem; }
    .filter-toggle { width:48px; min-width:48px; }
    .detail-rows>div { display:block; }
    .detail-rows dd { margin-top:.3rem; text-align:left; }
    .photo-grid { grid-template-columns:1fr; }
    .mobile-nav-item { font-size:.62rem; }
}
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
    .ui-reveal,.ui-motion-fallback .ui-reveal { opacity:1 !important; transform:none !important; }
}