@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root { --cream:#fbf9f8; --surface:#fff; --soft:#f5f3f3; --ink:#1b1c1c; --muted:#3e494a; --teal:#00666e; --teal-deep:#1d8089; --cyan:#9af0fa; --orange:#fe9e66; --rust:#944a19; --red:#ba1a1a; --red-soft:#ffdad6; --line:#bdc9ca; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:'Be Vietnam Pro',sans-serif; }
h1,h2,h3,h4 { font-family:'Plus Jakarta Sans',sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
.page-shell { min-height:100vh; display:flex; flex-direction:column; }
.container { width:min(1200px,calc(100% - 32px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border-bottom:1px solid rgba(189,201,202,.45); }
.header-inner { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:inline-flex; align-items:center; gap:8px; color:var(--teal); font:700 21px 'Plus Jakarta Sans',sans-serif; }
.brand .material-symbols-outlined { color:var(--orange); font-size:28px; }
.brand-name { display:inline-flex; }
.brand-name span:last-child { color:#f27b19; }
.cloud-notice { position:relative; z-index:45; display:flex; justify-content:center; padding:12px 18px; color:#07545b; background:#e2f4f3; text-align:center; font-size:13px; font-weight:600; }
.cloud-notice.error { color:#7c2d12; background:#fff0e5; }
.cloud-notice[hidden] { display:none; }
body[data-page="panel"]:not(.cloud-ready) .dashboard-layout { display:none; }
.desktop-nav { display:none; align-items:center; gap:24px; color:var(--muted); font-size:14px; font-weight:600; }
.desktop-nav a:hover,.text-link:hover { color:var(--teal); }
.nav-actions { display:flex; align-items:center; gap:8px; }
.icon-btn { width:40px; height:40px; display:grid; place-items:center; border:0; background:transparent; color:var(--teal); cursor:pointer; border-radius:50%; }
.icon-btn:hover { background:var(--soft); }
main { flex:1; }
.hero { background:var(--soft); position:relative; overflow:hidden; padding:56px 0 64px; }
.hero::before { content:''; position:absolute; inset:0; opacity:.35; background-image:radial-gradient(var(--cyan) 1px,transparent 1px); background-size:24px 24px; }
.hero-grid { position:relative; display:grid; gap:40px; align-items:center; }
.hero-trust { display:flex; flex-wrap:wrap; gap:14px 22px; margin-top:24px; color:var(--muted); font-size:12px; font-weight:600; }
.hero-trust span { display:inline-flex; align-items:center; gap:6px; }
.hero-trust .material-symbols-outlined { color:var(--teal); font-size:18px; }
.eyebrow,.status-chip { display:inline-flex; align-items:center; gap:7px; width:max-content; border-radius:999px; padding:7px 12px; font-size:12px; font-weight:700; }
.eyebrow { color:var(--teal); background:rgba(29,128,137,.14); }
.hero h1 { font-size:clamp(2rem,7vw,3.5rem); line-height:1.12; margin:18px 0; max-width:680px; }
.lead { color:var(--muted); font-size:17px; line-height:1.7; max-width:650px; }
.button-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 20px; border:1px solid transparent; border-radius:9px; cursor:pointer; font-weight:700; font-size:14px; transition:.2s ease; }
.btn-primary { color:#fff; background:var(--teal); box-shadow:0 5px 14px rgba(0,102,110,.16); }
.btn-primary:hover { background:var(--teal-deep); transform:translateY(-1px); }
.btn-secondary { color:var(--teal); border-color:var(--teal); background:transparent; }
.btn-secondary:hover { background:rgba(0,102,110,.07); }
.btn-danger { background:var(--red); color:#fff; }
.hero-media { position:relative; border-radius:18px; overflow:hidden; box-shadow:0 18px 45px rgba(0,60,65,.12); }
.hero-media img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.media-note { position:absolute; left:16px; right:16px; bottom:16px; display:flex; align-items:center; gap:12px; padding:13px; border-radius:12px; background:rgba(255,255,255,.91); backdrop-filter:blur(10px); font-size:13px; }
.media-note .material-symbols-outlined { color:var(--teal); }
.section { padding:64px 0; }
.section-heading { text-align:center; max-width:720px; margin:0 auto 36px; }
.section-heading h2 { font-size:clamp(1.65rem,5vw,2.2rem); margin:0 0 10px; }
.section-heading p,.muted { color:var(--muted); line-height:1.65; }
.card-grid { display:grid; grid-template-columns:1fr; gap:20px; }
.card-grid.four { grid-template-columns:1fr; }
.health-section { background:#fff; }
.health-card .material-symbols-outlined { display:grid; place-items:center; width:48px; height:48px; margin-bottom:18px; border-radius:14px; color:var(--teal); background:rgba(154,240,250,.35); font-size:26px; }
.health-card h3 { margin-bottom:8px; }
.health-card p { color:var(--muted); font-size:13px; line-height:1.65; }
.health-note { display:flex; align-items:flex-start; gap:10px; margin-top:22px; padding:14px 16px; border-radius:10px; color:var(--muted); background:var(--soft); font-size:12px; line-height:1.6; }
.health-note .material-symbols-outlined { flex:0 0 auto; color:var(--teal); }
.health-note p { margin:0; }
.mission-section { background:var(--soft); }
.mission-card { display:grid; gap:18px; align-items:center; max-width:900px; padding:28px; border:1px solid rgba(0,102,110,.12); border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(45,139,148,.07); }
.mission-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:16px; color:#e65478; background:rgba(230,84,120,.1); }
.mission-icon .material-symbols-outlined { font-size:30px; }
.mission-card h2 { margin:10px 0; font-size:clamp(1.5rem,4vw,2rem); }
.mission-card p { margin:0; color:var(--muted); line-height:1.7; }
.card { background:var(--surface); border:1px solid rgba(0,102,110,.12); border-radius:14px; padding:24px; box-shadow:0 8px 24px rgba(45,139,148,.07); }
.step-number { width:44px; height:44px; display:grid; place-items:center; margin-bottom:18px; border-radius:12px; color:var(--teal); background:rgba(154,240,250,.45); font:700 20px 'Plus Jakarta Sans',sans-serif; }
.card h3 { margin:0 0 8px; font-size:20px; }
.card p { margin:0; color:var(--muted); line-height:1.65; }
.photo-strip { aspect-ratio:4/3; margin-top:20px; border-radius:9px; overflow:hidden; background:var(--soft); }
.photo-strip img { width:100%; height:100%; object-fit:contain; background:var(--soft); }
.site-footer { margin-top:auto; padding:28px 0 88px; border-top:1px solid rgba(189,201,202,.4); background:#fff; }
.footer-inner { display:flex; flex-direction:column; gap:18px; color:var(--muted); font-size:12px; }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; }
.mobile-nav { position:fixed; left:0; right:0; bottom:0; z-index:25; display:flex; justify-content:space-around; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); border-top:1px solid rgba(189,201,202,.5); box-shadow:0 -4px 16px rgba(0,0,0,.06); }
.mobile-nav a { display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 9px; border-radius:10px; color:var(--muted); font-size:10px; font-weight:600; }
.mobile-nav a.active { color:#fff; background:var(--teal-deep); }
.page-title { padding:44px 0 28px; text-align:center; }
.page-title h1 { margin:0 0 12px; font-size:clamp(1.9rem,6vw,2.7rem); }
.form-card { max-width:820px; margin:0 auto 64px; padding:22px; background:#fff; border:1px solid rgba(0,102,110,.12); border-radius:14px; box-shadow:0 8px 24px rgba(45,139,148,.07); }
.form-grid { display:grid; gap:18px; }
.form-field label { display:block; margin-bottom:7px; color:var(--muted); font-size:13px; font-weight:700; }
.form-field input,.form-field select,.form-field textarea { width:100%; border:1px solid var(--line); border-radius:8px; padding:12px 13px; color:var(--ink); background:#fff; outline:0; }
.form-field textarea { min-height:120px; resize:vertical; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,102,110,.12); }
.upload { display:grid; place-items:center; min-height:130px; border:2px dashed rgba(0,102,110,.35); border-radius:9px; color:var(--teal); text-align:center; cursor:pointer; background:var(--soft); }
.upload input { display:none; }
.form-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:24px; padding-top:20px; border-top:1px solid rgba(189,201,202,.45); }
.profile-wrap { max-width:620px; margin:0 auto 64px; background:#fff; box-shadow:0 10px 28px rgba(45,139,148,.1); }
.pet-profile-link { display:block; }
.pet-profile-link:hover h3 { color:var(--teal); }
[data-public-pet-profile] { max-width:620px; margin-inline:auto; padding-top:42px; }
[data-public-pet-profile][hidden] { display:none; }
[data-public-pet-profile] .profile-photo { border-radius:14px 14px 0 0; overflow:hidden; }
[data-public-pet-profile] .profile-photo img { aspect-ratio:4/3; }
[data-public-pet-profile] .profile-content { background:#fff; border:1px solid rgba(0,102,110,.12); border-top:0; border-radius:0 0 14px 14px; box-shadow:0 8px 24px rgba(45,139,148,.07); }
[data-public-pet-profile] .profile-content h1 { margin:0; font-size:32px; }
.profile-only > *:not(main),.profile-only main > *:not([data-public-pet-profile]) { display:none; }
.profile-only main { min-height:100vh; }
.profile-only [data-public-pet-profile] { padding:32px 16px 64px; }
.lost-banner { display:flex; justify-content:center; align-items:center; gap:8px; padding:13px 16px; color:#fff; background:var(--red); font:700 17px 'Plus Jakarta Sans',sans-serif; text-align:center; }
.profile-photo { position:relative; }
.profile-photo img { display:block; width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--soft); }
.profile-caption { position:absolute; left:0; right:0; bottom:0; padding:28px 20px 18px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.65)); }
.profile-caption h1 { margin:0 0 3px; font-size:32px; }
.profile-content { display:grid; gap:22px; padding:22px; }
.profile-actions { display:flex; flex-wrap:wrap; gap:10px; }
.profile-actions .btn { flex:1 1 180px; }
.profile-content h2 { margin:0 0 7px; color:var(--teal); font-size:13px; letter-spacing:.06em; }
.profile-content p,.profile-content li { color:var(--muted); line-height:1.6; }
.profile-content ul { margin:0; padding-left:20px; }
.action-stack { display:grid; gap:10px; }
.whatsapp { background:#25d366; color:#fff; }
.dashboard-layout { display:flex; min-height:100vh; }
.dashboard-sidebar { display:none; width:250px; flex:0 0 250px; padding:24px 14px; background:var(--soft); border-right:1px solid rgba(189,201,202,.45); }
.dashboard-sidebar .admin-nav { display:grid; gap:7px; margin-top:26px; }
.admin-nav-button { display:flex; align-items:center; gap:10px; width:100%; padding:12px; border:0; border-radius:8px; color:var(--muted); background:transparent; text-align:left; font-size:14px; font-weight:600; cursor:pointer; }
.admin-nav-button.active,.admin-nav-button:hover { color:#fff; background:var(--teal-deep); }
.admin-view { display:none; }
.admin-view.active { display:block; animation:admin-view-in .18s ease-out; }
.dashboard-mobile-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.dashboard-number { display:block; margin:14px 0 4px; color:var(--teal); font:700 32px 'Plus Jakarta Sans',sans-serif; }
.acquisition-card { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:24px; }
@keyframes admin-view-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.dashboard-sidebar nav { display:grid; gap:7px; margin-top:26px; }
.dashboard-sidebar a { display:flex; align-items:center; gap:10px; padding:12px; border-radius:8px; color:var(--muted); font-size:14px; font-weight:600; }
.dashboard-sidebar a.active,.dashboard-sidebar a:hover { color:#fff; background:var(--teal-deep); }
.dashboard-main { flex:1; min-width:0; padding:24px 16px 88px; }
.dashboard-header { display:flex; flex-direction:column; gap:16px; margin-bottom:24px; }
.dashboard-header h1 { margin:0 0 6px; font-size:clamp(1.7rem,5vw,2.2rem); }
.search { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.stats { display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:28px; }
.stat strong { display:block; margin-top:8px; color:var(--teal); font:700 34px 'Plus Jakarta Sans',sans-serif; }
.stat.alert strong { color:var(--red); }
.stat.success strong { color:var(--rust); }
.report-grid { display:grid; grid-template-columns:1fr; gap:18px; }
.report-card { padding:0; overflow:hidden; }
.report-card img { display:block; width:100%; height:220px; object-fit:contain; background:var(--soft); }
.report-card .photo-strip img { height:100%; }
.photo-strip img { height:100%; object-fit:contain; background:var(--soft); }
.report-body { padding:18px; }
.report-body h3 { margin:0 0 4px; }
.report-body p { margin:0 0 12px; color:var(--muted); font-size:13px; }
.report-meta { display:grid; gap:6px; color:var(--muted); font-size:13px; }
.status-chip { color:#fff; background:var(--red); }
.status-chip.seen { background:var(--rust); }
.report-head { display:flex; align-items:start; justify-content:space-between; gap:10px; }
.report-badges { display:grid; justify-items:end; gap:6px; flex:0 0 auto; }
.size-chip { width:max-content; border-radius:999px; padding:6px 10px; color:var(--teal); background:rgba(0,102,110,.1); font-size:11px; font-weight:700; }
.upload.has-preview { padding:12px; gap:10px; }
.upload-preview { display:block; width:auto !important; max-width:100%; max-height:240px; object-fit:contain; border-radius:8px; background:#fff; }
.size-catalog { background:#fff; }
.size-catalog-grid { display:grid; grid-template-columns:1fr; gap:18px; }
.size-card { position:relative; overflow:hidden; padding:24px; border:1px solid rgba(0,102,110,.14); border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(45,139,148,.07); }
.size-card::after { position:absolute; right:-28px; top:-38px; width:110px; height:110px; border-radius:50%; background:var(--size-accent); opacity:.1; content:''; }
.size-card-icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:18px; border-radius:14px; color:var(--size-accent); background:color-mix(in srgb,var(--size-accent),transparent 88%); }
.size-card-icon .material-symbols-outlined { font-size:28px; }
.size-card-label { color:var(--size-accent); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.size-card h3 { margin:8px 0; font-size:22px; }
.size-card p { min-height:48px; color:var(--muted); font-size:14px; line-height:1.6; }
.size-card .text-link { display:inline-flex; align-items:center; gap:5px; color:var(--size-accent); font-size:13px; font-weight:700; }
.size-small { --size-accent:#e65478; }
.size-medium { --size-accent:#008e9b; }
.size-large { --size-accent:#ed8219; }
.modal-backdrop { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; background:rgba(27,28,28,.52); backdrop-filter:blur(8px); }
.modal { width:min(100%,420px); padding:24px; border-radius:14px; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.modal h2 { margin:0 0 8px; }
.modal p { color:var(--muted); font-size:14px; line-height:1.5; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.error-message { min-height:20px; color:var(--red); font-size:13px; }
.toast { position:fixed; right:16px; bottom:82px; z-index:70; max-width:calc(100% - 32px); padding:13px 16px; border-radius:9px; color:#fff; background:var(--teal); box-shadow:0 8px 24px rgba(0,0,0,.16); }
.admin-columns { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr); gap:20px; align-items:start; }
.admin-columns .form-card h2,.admin-request-panel h2 { margin:0 0 16px; font-size:20px; }
.request-list { display:grid; gap:10px; }
.request-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:center; padding:14px 0; border-bottom:1px solid rgba(189,201,202,.45); }
.request-item:last-child { border-bottom:0; }
.request-item strong { font-size:14px; }
.request-item p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.request-status { width:max-content; padding:5px 8px; border-radius:999px; color:#fff; background:var(--orange); font-size:11px; font-weight:700; }
.request-status.approved { background:var(--teal); }
.request-status.rejected { background:var(--red); }
.medical-fields { margin-top:20px; padding:18px; border:1px solid rgba(0,102,110,.15); border-radius:10px; }
.medical-fields legend { padding:0 8px; color:var(--teal); font-weight:700; }
.medical-note { margin:14px 0 0; font-size:12px; }
.public-toggle { display:flex !important; align-items:center; gap:7px; margin-top:9px; color:var(--teal) !important; cursor:pointer; }
.public-toggle input { width:auto !important; accent-color:var(--teal); }
.private-note { display:block; margin-top:9px; color:var(--muted); font-size:12px; font-weight:600; }
.owner-list-heading { margin:24px 0 8px; font-size:20px; font-family:'Plus Jakarta Sans',sans-serif; }
.public-medical { padding-top:8px; border-top:1px solid rgba(189,201,202,.45); }
.public-medical h2 { margin-top:14px; }
.request-actions { grid-column:1 / -1; display:flex; gap:8px; }
.btn-small { min-height:34px; padding:0 12px; font-size:12px; }
.empty-state { padding:12px 0; font-size:13px; }
.admin-mobile-nav { overflow-x:auto; justify-content:flex-start; gap:4px; }
.admin-mobile-nav .admin-nav-button { flex:0 0 auto; min-width:66px; flex-direction:column; gap:2px; padding:6px 8px; font-size:10px; }
.admin-mobile-nav .material-symbols-outlined { font-size:20px; }
.public-exit { margin-top:8px; color:var(--teal) !important; }
.owner-directory { margin-top:20px; }
.owner-directory h2 { margin:0; font-size:20px; }
.cover-editor { display:grid; gap:18px; max-width:760px; margin:0; }
.cover-editor input[type="file"] { margin-top:12px; }
.cover-preview { display:block; width:100%; max-height:360px; object-fit:cover; border-radius:10px; background:var(--soft); }
.cover-preview[hidden] { display:none; }
.cover-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.qr-result { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; margin:20px 0 0; }
.qr-result h2 { margin:10px 0 0; font-size:20px; }
.qr-output { display:grid; place-items:center; min-width:220px; min-height:220px; padding:10px; background:#fff; border:1px solid var(--line); }
.qr-result .button-row { grid-column:1 / -1; margin-top:0; }
@media (min-width:640px) { .container { width:min(1200px,calc(100% - 48px)); } .card-grid,.stats { grid-template-columns:repeat(2,1fr); } .card-grid.four { grid-template-columns:repeat(2,1fr); } .form-card { padding:34px; } .form-grid.two { grid-template-columns:repeat(2,1fr); } .mission-card { grid-template-columns:auto 1fr; padding:36px; } }
@media (min-width:640px) { .size-catalog-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px) { .desktop-nav { display:flex; } .mobile-nav { display:none; } .hero { padding:80px 0; } .hero-grid { grid-template-columns:1.05fr .95fr; } .card-grid.three,.report-grid { grid-template-columns:repeat(3,1fr); } .card-grid.four { grid-template-columns:repeat(4,1fr); } .footer-inner { flex-direction:row; justify-content:space-between; align-items:center; } .site-footer { padding-bottom:28px; } .dashboard-sidebar { display:flex; flex-direction:column; } .dashboard-mobile-header { display:none; } .dashboard-main { padding:36px; } .dashboard-header { flex-direction:row; align-items:center; justify-content:space-between; } .search { width:min(380px,100%); } .stats { grid-template-columns:repeat(3,1fr); } }
@media (max-width:899px) { .admin-columns { grid-template-columns:1fr; } }
@media (max-width:639px) { .acquisition-card { align-items:stretch; flex-direction:column; } .request-item { grid-template-columns:1fr auto; } .request-status { align-self:start; } }
@media (max-width:639px) { .qr-result { grid-template-columns:1fr; } .qr-output { justify-self:center; } }
@media print { body * { visibility:hidden; } [data-qr-result], [data-qr-result] * { visibility:visible; } [data-qr-result] { position:absolute; inset:0; box-shadow:none; } [data-qr-result] .button-row { display:none; } }