@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');
:root {
    --vg-font-heading: 'Poppins', Arial, sans-serif;
    --vg-font-body: 'Nunito', Arial, sans-serif;
    --vg-primary: #801C49;
    --vg-primary-pressed: #6B163C;
    --vg-primary-light: #F5E4E8;
    --vg-secondary: #e6999f;
    --vg-secondary-light: #F7E8EA;
    --vg-canvas: #F7E8EA;
    --vg-navigation-surface: #F5E4E8;
    --vg-brand-vet: #243F32;
    --vg-brand-gest: #6B1E3A;
    --vg-brand-backdrop: linear-gradient(180deg, #F7E8EA 0%, #F5E4E8 55%, #F7E8EA 100%);
    --vg-surface: #ffffff;
    --vg-ink: #302C30;
    --vg-muted: #756D75;
    --vg-line: #eadfe4;
    --vg-success: #9bb79f;
    --vg-warning: #e5b86a;
    --vg-alert: #c95d67;
    --vg-teal: var(--vg-primary);
    --vg-mint: var(--vg-secondary);
    --vg-gold: var(--vg-warning);
    --vg-orange: var(--vg-secondary);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--vg-brand-backdrop) fixed; color: var(--vg-ink); font-family: var(--vg-font-body); }
body { min-width: 320px; }
h1, h2, h3, p { margin-top: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--vg-font-heading); font-weight: 600; } h1:focus { outline: none; } a { color: var(--vg-teal); }
strong, b, .section-kicker, .eyebrow, .vetgest-wordmark, .brand-splash-wordmark { font-family: var(--vg-font-heading); }
.today-page { display: grid; gap: 1.25rem; }
.section-kicker { display: block; color: var(--vg-teal); font-size: .69rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.today-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.today-intro h1 { margin: .35rem 0 .4rem; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.04; }
.today-intro p { max-width: 570px; margin: 0; color: var(--vg-muted); font-size: .96rem; }
.sample-tag, .demo-banner { display: inline-flex; align-items: center; gap: .45rem; }
.sample-tag { flex: 0 0 auto; padding: .45rem .65rem; border: 1px solid #c4ddd4; border-radius: 5px; color: var(--vg-teal); font-size: .75rem; font-weight: 700; }
.demo-banner { padding: .65rem .8rem; border-left: 3px solid var(--vg-gold); background: #fffdf3; color: #6f602f; font-size: .78rem; }
.demo-banner .mud-icon-root { font-size: 1rem; }
.pet-overview, .progress-section, .phase-highlight, .info-section, .guidance-section, .reminder-panel, .diary-panel, .visualization-panel { border: 1px solid var(--vg-line); background: var(--vg-surface); }
.pet-overview { display: flex; align-items: center; gap: 1rem; padding: 1rem; }
.pet-avatar, .phase-icon { display: grid; flex: 0 0 auto; place-items: center; color: var(--vg-teal); background: #e7f3ed; }
.pet-avatar { width: 56px; height: 56px; border-radius: 50%; }
.pet-identity { min-width: 0; flex: 1; } .pet-identity h2 { margin: 0 0 .2rem; font-size: 1.3rem; } .pet-identity p, .weight-stat span { margin: 0; color: var(--vg-muted); font-size: .82rem; }
.weight-stat { padding-left: 1rem; border-left: 1px solid var(--vg-line); text-align: right; } .weight-stat strong { display: block; margin-top: .2rem; font-size: 1.05rem; }
.progress-section { padding: 1.25rem; } .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .section-heading h2 { margin: .35rem 0 0; font-size: 1.35rem; } .section-heading h2 span { color: var(--vg-muted); font-family: var(--vg-font-body); font-size: .9rem; font-weight: 400; }
.days-left { color: var(--vg-orange); text-align: right; font-size: 1.3rem; line-height: 1.1; } .days-left small { color: var(--vg-muted); font-size: .66rem; font-weight: 400; }
.progress-track { height: 8px; margin: 1.1rem 0 .8rem; overflow: hidden; border-radius: 8px; background: #e7eeea; } .progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--vg-teal); }
.estimate-note { display: flex; align-items: flex-start; gap: .45rem; margin: 0; color: var(--vg-muted); font-size: .78rem; line-height: 1.5; } .estimate-note .mud-icon-root { flex: 0 0 auto; color: var(--vg-teal); font-size: 1rem; }
.phase-highlight { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-color: #b9d9cb; background: #edf7f1; } .phase-icon { width: 52px; height: 52px; border-radius: 50%; } .phase-content { min-width: 0; flex: 1; } .phase-heading-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; } .review-badge { padding: .25rem .5rem; border: 1px solid #9bc7b4; border-radius: 999px; color: var(--vg-teal); background: #f8fffb; font-size: .68rem; font-weight: 800; } .review-badge-muted { border-color: #d8cda8; color: #75643a; background: #fffdf3; } .phase-highlight h2 { margin: .3rem 0; font-size: 1.45rem; } .phase-highlight p, .info-section p, .visualization-panel p { margin: 0; color: var(--vg-muted); font-size: .87rem; line-height: 1.6; }
.today-grid, .action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .info-section, .guidance-section { padding: 1.25rem; } .info-section .section-heading .mud-icon-root, .guidance-section .section-heading > .mud-icon-root { color: var(--vg-teal); }
.guidance-section ul { display: grid; gap: .7rem; margin: 1rem 0 0; padding: 0; list-style: none; } .guidance-section li { display: flex; gap: .55rem; color: var(--vg-muted); font-size: .87rem; line-height: 1.4; } .guidance-section li strong { color: var(--vg-ink); } .guidance-section li .mud-icon-root { flex: 0 0 auto; color: var(--vg-teal); font-size: 1.05rem; } .content-unavailable { margin: 1rem 0 0; color: var(--vg-muted); font-size: .87rem; line-height: 1.5; } .care-content-meta { display: grid; gap: .35rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--vg-line); color: var(--vg-muted); font-size: .75rem; line-height: 1.5; } .care-content-meta p { margin: .25rem 0 0; }
.reminder-panel, .diary-panel { display: flex; align-items: center; gap: .8rem; padding: 1rem; } .reminder-panel > .mud-icon-root { color: var(--vg-orange); font-size: 1.8rem; } .reminder-panel > div, .diary-panel > div { min-width: 0; flex: 1; } .reminder-panel h2, .diary-panel h2 { margin: .3rem 0; font-size: 1.05rem; } .reminder-panel p, .diary-panel p { margin: 0; color: var(--vg-muted); font-size: .75rem; line-height: 1.4; } .diary-panel { border-color: #d9c9a9; background: #fffaf0; }
.alert-panel { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem; border: 1px solid; border-left-width: 4px; border-left-style: solid; } .alert-icon { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; } .alert-panel h2 { margin: .3rem 0; font-size: 1.05rem; } .alert-panel p { margin: 0; font-size: .82rem; line-height: 1.55; } .alert-panel .alert-list { margin: .3rem 0; padding: 0; list-style: none; display: grid; gap: .35rem; } .alert-panel .alert-list li { display: grid; gap: .1rem; } .alert-panel .alert-list li strong { font-size: .85rem; } .alert-panel .alert-list li span { font-size: .82rem; } .alert-panel .alert-disclaimer { margin-top: .5rem; font-size: .74rem; opacity: .85; }
.alert-panel--normal { border-color: #b7d9b9; border-left-color: #2e7d32; background: #f1f8f1; } .alert-panel--normal .alert-icon { background: #2e7d32; } .alert-panel--normal h2 { color: #245c26; } .alert-panel--normal p, .alert-panel--normal .alert-list li span, .alert-panel--normal .alert-disclaimer { color: #3f6b41; }
.alert-panel--attention { border-color: #e8d8ad; border-left-color: #b8860b; background: #fdf6e6; } .alert-panel--attention .alert-icon { background: #b8860b; } .alert-panel--attention h2 { color: #8a6508; } .alert-panel--attention p, .alert-panel--attention .alert-list li span, .alert-panel--attention .alert-disclaimer { color: #7a5c14; }
.alert-panel--emergency { border-color: #e3b2ae; border-left-color: var(--vg-alert); background: #fff4f2; } .alert-panel--emergency .alert-icon { background: var(--vg-alert); } .alert-panel--emergency h2 { color: #82352f; } .alert-panel--emergency p, .alert-panel--emergency .alert-list li span, .alert-panel--emergency .alert-disclaimer { color: #704c49; }
.visualization-panel { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem; overflow: hidden; background: #e8f0ee; } .visualization-copy { max-width: 550px; } .visualization-panel h2 { margin: .3rem 0 .45rem; font-size: 1.35rem; } .visualization-fallback { display: grid; flex: 0 0 145px; place-items: center; gap: .4rem; width: 145px; height: 110px; border: 1px dashed #91b6aa; color: var(--vg-teal); background: rgba(255,255,255,.45); font-family: var(--vg-font-body); font-size: .85rem; font-style: italic; }
.state-panel { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 260px; padding: 2rem; border: 1px solid var(--vg-line); background: var(--vg-surface); } .state-panel > div { display: grid; gap: .35rem; } .state-panel span { color: var(--vg-muted); font-size: .85rem; } .state-panel .mud-icon-root { color: var(--vg-teal); } .state-error { border-color: #e3b2ae; } .state-error .mud-icon-root { color: var(--vg-alert); }
.state-panel-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .4rem; }
.form-page, .pets-page { display: grid; gap: 1.25rem; max-width: 680px; margin: 0 auto; }
.diary-page { display: grid; gap: 1.25rem; max-width: 900px; margin: 0 auto; }
.diary-context, .diary-section { border: 1px solid var(--vg-line); background: var(--vg-surface); }
.diary-context { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; color: var(--vg-teal); }
.diary-context div { display: grid; gap: .15rem; color: var(--vg-ink); } .diary-context span { color: var(--vg-muted); font-size: .82rem; }
.diary-form { display: grid; gap: .85rem; padding: 1.25rem; border: 1px solid var(--vg-line); background: var(--vg-surface); }
.diary-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.diary-section { display: grid; gap: .9rem; padding: 1.25rem; } .diary-section .section-heading { align-items: center; }
.entry-count { color: var(--vg-muted); font-size: .8rem; } .empty-note { margin: 0; color: var(--vg-muted); font-size: .88rem; }
.table-wrap { overflow-x: auto; } .trend-table { width: 100%; border-collapse: collapse; font-size: .86rem; } .trend-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.trend-table th, .trend-table td { padding: .7rem .55rem; border-bottom: 1px solid var(--vg-line); text-align: left; } .trend-table th { font-weight: 800; } .trend-table thead th { color: var(--vg-muted); font-size: .75rem; }
.diary-timeline { display: grid; gap: .75rem; } .diary-entry { display: grid; grid-template-columns: 68px 1fr; gap: .9rem; padding: .85rem 0; border-top: 1px solid var(--vg-line); } .diary-entry-date { display: grid; align-content: start; justify-items: center; padding: .45rem; background: #edf7f1; color: var(--vg-teal); } .diary-entry-date strong { font-size: 1.35rem; } .diary-entry-date span { font-size: .75rem; text-transform: uppercase; } .diary-entry-date small { color: var(--vg-muted); }
.diary-entry-body { min-width: 0; } .entry-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .45rem; color: var(--vg-teal); font-size: .78rem; font-weight: 800; } .entry-meta span { padding-right: .45rem; border-right: 1px solid var(--vg-line); } .entry-meta span:last-child { border-right: 0; } .diary-entry-body p { margin: .35rem 0 0; color: var(--vg-muted); font-size: .86rem; line-height: 1.5; } .reference-note { display: flex; align-items: center; gap: .35rem; }
.exams-page { display: grid; gap: 1.25rem; max-width: 900px; margin: 0 auto; }
.vet-connection-page { display: grid; gap: 1.25rem; max-width: 980px; margin: 0 auto; }
.connection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.connection-form { display: grid; gap: .75rem; padding: 1.1rem; border: 1px solid var(--vg-line); background: var(--vg-surface); }
.connection-form h2 { margin: 0; font-size: 1.25rem; }
.connection-form p { margin: 0 0 .25rem; color: var(--vg-muted); font-size: .83rem; line-height: 1.45; }
.connection-list { display: grid; gap: .85rem; padding: 1.1rem; border: 1px solid var(--vg-line); background: var(--vg-surface); }
.connection-items { display: grid; gap: .7rem; }
.connection-item { display: flex; justify-content: space-between; align-items: flex-start; gap: .9rem; padding: .9rem; border: 1px solid var(--vg-line); background: #fff; }
.connection-item h3 { margin: .35rem 0; font-size: 1.1rem; }
.connection-item p { margin: .25rem 0 0; color: var(--vg-muted); font-size: .84rem; line-height: 1.45; }
.exams-notice { display: flex; align-items: flex-start; gap: .65rem; padding: .9rem 1rem; border: 1px solid #d8cda8; background: #fffdf3; color: #6f602f; font-size: .82rem; line-height: 1.5; }
.exams-notice .mud-icon-root { flex: 0 0 auto; color: var(--vg-gold); }
.exams-list { display: grid; gap: .8rem; }
.exam-item { display: grid; grid-template-columns: 76px 1fr; gap: .9rem; padding: 1rem; border: 1px solid var(--vg-line); border-left: 4px solid var(--vg-teal); background: var(--vg-surface); }
.exam-date { display: grid; align-content: start; justify-items: center; gap: .15rem; padding: .45rem .25rem; color: var(--vg-teal); background: #edf7f1; text-align: center; }
.exam-date strong { font-size: 1.1rem; }
.exam-date span { color: var(--vg-muted); font-size: .7rem; }
.exam-item h2 { margin: 0 0 .35rem; font-size: 1.2rem; }
.exam-item p { margin: .45rem 0 0; color: var(--vg-muted); font-size: .86rem; line-height: 1.5; }
.exam-meta { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; color: var(--vg-muted); font-size: .77rem; }
.exam-status { padding: .25rem .5rem; border-radius: 999px; font-weight: 800; }
.exam-status--past { color: #704c49; background: #fff4f2; }
.exam-status--soon { color: #7a5c14; background: #fdf6e6; }
.exam-status--upcoming { color: #245c26; background: #f1f8f1; }
.exam-disclaimer { margin: 0; padding-top: .9rem; border-top: 1px solid var(--vg-line); color: var(--vg-muted); font-size: .78rem; line-height: 1.55; }
.form-heading h1, .page-heading h1 { margin: .35rem 0 .45rem; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; }
.form-heading p, .page-heading p { margin: 0; color: var(--vg-muted); line-height: 1.55; }
.form-page form { display: grid; gap: .85rem; padding: 1.25rem; border: 1px solid var(--vg-line); background: var(--vg-surface); }
.form-page form .mud-alert { margin-bottom: .2rem; }
.button-inline-spinner { margin-right: .5rem; }
.password-checklist { display: grid; gap: .35rem; margin: -.1rem 0 .15rem; padding: 0; list-style: none; }
.password-rule { display: flex; align-items: center; gap: .35rem; font-size: .78rem; }
.password-rule .mud-icon-root { font-size: 1rem; }
.password-rule-pending { color: var(--vg-muted); }
.password-rule-pending .mud-icon-root { color: #8ca6a1; }
.password-rule-fail { color: #7a4945; }
.password-rule-fail .mud-icon-root { color: #c2544c; }
.password-rule-pass { color: #2d6d4c; }
.password-rule-pass .mud-icon-root { color: #3c8d61; }
.password-strength { display: grid; gap: .3rem; margin: -.25rem 0 .1rem; }
.password-strength-track { width: 100%; height: .42rem; overflow: hidden; border-radius: 999px; background: #e5ece8; }
.password-strength-fill { display: block; height: 100%; transition: width .2s ease; }
.password-strength-weak { background: #c2544c; }
.password-strength-medium { background: #cf8a3c; }
.password-strength-strong { background: #2f6f9d; }
.password-strength p { margin: 0; color: var(--vg-muted); font-size: .76rem; line-height: 1.45; }
.caps-lock-warning { display: flex; align-items: center; gap: .35rem; margin: 0; color: #7a5c14; font-size: .78rem; }
.caps-lock-warning .mud-icon-root { color: #cf8a3c; }
.form-footer { margin: 0; color: var(--vg-muted); font-size: .9rem; text-align: center; }
.form-hint { margin: -.35rem 0 .2rem; color: var(--vg-muted); font-size: .82rem; line-height: 1.5; }
.form-hint-warning { color: #7a5c14; }
.auth-success-panel { margin-top: .35rem; animation: authSuccessAppear .2s ease-out; }
@keyframes authSuccessAppear { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
.result-panel { display: grid; gap: 1.1rem; padding: 1.25rem; border: 1px solid #b9d9cb; background: #edf7f1; }
.result-panel h2 { margin: .3rem 0 0; font-size: 1.4rem; }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 0; }
.result-grid div { padding: .8rem; border: 1px solid #cfe3d8; background: rgba(255,255,255,.55); }
.result-grid dt { color: var(--vg-muted); font-size: .75rem; }
.result-grid dd { margin: .25rem 0 0; font-weight: 800; }
.result-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.pet-list { display: grid; gap: .8rem; }
.pet-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--vg-line); background: var(--vg-surface); }
.pet-card h2 { margin: 0 0 .2rem; font-size: 1.25rem; }
.pet-card p { margin: 0; color: var(--vg-muted); font-size: .85rem; }
.pet-status { margin-left: auto; color: var(--vg-teal); font-size: .78rem; font-weight: 800; }
.nav-button { width: 100%; border: 0; cursor: pointer; font: inherit; text-align: left; }
.mud-button-root { border-radius: 5px !important; text-transform: none !important; font-weight: 700 !important; } .mud-icon-button:focus-visible, .nav-link:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #e7b64a; outline-offset: 2px; }
@media (max-width: 640px) { .today-intro, .visualization-panel { display: block; } .sample-tag { margin-top: 1rem; } .today-grid, .action-grid { grid-template-columns: 1fr; } .visualization-fallback { margin-top: 1rem; width: 100%; height: 74px; } }
@media (max-width: 640px) { .page-heading { display: grid; align-items: start; } .page-heading .mud-button-root { width: 100%; } }
@media (max-width: 480px) { .result-grid { grid-template-columns: 1fr; } .result-actions .mud-button-root { width: 100%; } }
@media (max-width: 560px) { .diary-form-grid { grid-template-columns: 1fr; } .diary-entry { grid-template-columns: 54px 1fr; gap: .65rem; } .diary-entry-date strong { font-size: 1.1rem; } }
@media (max-width: 480px) { .exam-item { grid-template-columns: 1fr; } .exam-date { justify-items: start; display: flex; align-items: baseline; gap: .45rem; text-align: left; } }
@media (max-width: 760px) { .connection-grid { grid-template-columns: 1fr; } .connection-item { display: grid; } .connection-item .mud-button-root { width: 100%; } }
@media (max-width: 420px) { .pet-overview { flex-wrap: wrap; } .weight-stat { width: 100%; padding: .75rem 0 0; border-top: 1px solid var(--vg-line); border-left: 0; text-align: left; } }
#blazor-error-ui { display: none; position: fixed; right: 1rem; bottom: 1rem; left: 1rem; z-index: 1000; padding: .8rem 1rem; border-left: 4px solid var(--vg-alert); background: #fff4f2; box-shadow: 0 4px 18px rgba(25,54,51,.15); } #blazor-error-ui .dismiss { float: right; cursor: pointer; }
.brand-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--vg-brand-backdrop);
    color: #6B1E3A;
    opacity: 1;
    transition: opacity 500ms ease, transform 500ms ease;
    --brand-splash-waves-height: clamp(230px, 36vh, 380px);
}
.brand-splash--leaving { pointer-events: none; opacity: 0; transform: scale(1.025); }
.brand-splash-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: calc(var(--brand-splash-waves-height) * .7);
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: max(1.5rem, env(safe-area-inset-top)) 1.5rem 0;
    text-align: center;
}
.brand-splash-mark {
    display: block;
    width: min(70vw, 290px, calc(31vh * 301 / 227));
    height: auto;
    aspect-ratio: 301 / 227;
    object-fit: contain;
}
.brand-splash-wordmark {
    display: flex;
    align-items: center;
    margin: .5rem 0 .8rem;
    color: var(--vg-brand-gest);
    font-size: clamp(3.2rem, min(15vw, 8vh), 4.4rem);
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: 1;
}
.brand-splash-wordmark-vet { color: var(--vg-brand-vet); }
.brand-splash-heart {
    width: .26em;
    height: .24em;
    margin: .12em 0 0 .08em;
    fill: #A8506A;
}
.brand-splash-tagline {
    display: grid;
    gap: .55rem;
    margin: 0;
    color: #5F5559;
    font-size: clamp(.7rem, 3vw, .86rem);
    font-weight: 500;
    letter-spacing: .22em;
    line-height: 1.3;
    text-transform: uppercase;
}
.brand-waves {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}
.brand-waves > svg:first-child { display: block; width: 100%; height: 100%; }
.brand-waves-line { fill: none; stroke: #6B1E3A; stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.brand-waves-heart {
    position: absolute;
    top: calc(58 / 300 * 100%);
    left: 50%;
    width: 22px;
    height: 20px;
    fill: #EDD3D7;
    stroke: #6B1E3A;
    stroke-width: 1.6;
    transform: translate(-50%, -62%);
}
.brand-splash-waves { height: var(--brand-splash-waves-height); }
.brand-splash-motto {
    position: absolute;
    right: max(1.6rem, env(safe-area-inset-right));
    bottom: max(3.4rem, calc(2rem + env(safe-area-inset-bottom)));
    z-index: 1;
    margin: 0;
    color: #fff;
    font-size: clamp(.95rem, 4.2vw, 1.15rem);
    font-weight: 400;
    line-height: 1.45;
    text-align: right;
}
@media (min-width: 900px) {
    .brand-splash-motto { right: 8vw; }
}

/* VetGest design system: shared treatment for existing page components. */
:root {
    --vg-radius-card: 20px;
    --vg-radius-control: 12px;
    --vg-shadow-card: 0 8px 24px rgba(104, 46, 94, .07);
}

html, body { font-size: 16px; line-height: 1.55; }
h1, h2, h3, h4 { color: var(--vg-ink); }
.today-intro h1, .form-heading h1, .page-heading h1 { font-size: clamp(1.75rem, 6vw, 2rem); line-height: 1.25; }
.section-kicker { color: var(--vg-primary); letter-spacing: .08em; }

.app-content > article > section,
.today-page > section,
.today-page > article,
.form-page form,
.diary-form,
.diary-section,
.diary-context,
.connection-form,
.connection-list,
.connection-item,
.exam-item,
.pet-overview,
.progress-section,
.phase-highlight,
.info-section,
.guidance-section,
.reminder-panel,
.diary-panel,
.visualization-panel,
.state-panel,
.pet-card,
.result-panel {
    border-radius: var(--vg-radius-card);
}

.pet-overview,
.progress-section,
.info-section,
.guidance-section,
.reminder-panel,
.diary-panel,
.diary-context,
.diary-section,
.diary-form,
.connection-form,
.connection-list,
.connection-item,
.exam-item,
.form-page form,
.state-panel,
.pet-card {
    border-color: var(--vg-line);
    background-color: var(--vg-surface);
    box-shadow: var(--vg-shadow-card);
}

.phase-highlight { border-color: #e5cfdf; background: var(--vg-primary-light); }
.phase-icon, .pet-avatar { color: var(--vg-primary); background: var(--vg-secondary-light); }
.review-badge { border-color: #d6b7ce; color: var(--vg-primary); background: #fff; }
.visualization-panel { background: var(--vg-secondary-light); }
.diary-panel { border-color: #edd9dc; background: #fffafb; }
.diary-entry-date { border-radius: var(--vg-radius-control); color: var(--vg-primary); background: var(--vg-primary-light); }
.exam-item { border-left-color: var(--vg-primary); }
.exam-date { border-radius: var(--vg-radius-control); color: var(--vg-primary); background: var(--vg-primary-light); }
.diary-context { color: var(--vg-primary); }
.entry-meta { color: var(--vg-primary); }
.pet-status { color: var(--vg-primary); }

.mud-button-root {
    min-height: 44px;
    border-radius: 999px !important;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.mud-button-filled.mud-button-filled-primary { box-shadow: 0 4px 12px rgba(128, 28, 73, .18); }
.mud-button-filled.mud-button-filled-primary:hover:not(.mud-disabled),
.mud-button-filled.mud-button-filled-primary:active:not(.mud-disabled) { background-color: var(--vg-primary-pressed); }
.today-pet-camera.mud-icon-button:hover { background-color: var(--vg-primary-pressed); }
.mud-button-outlined { border-color: #d8c3d2; }
.mud-icon-button { border-radius: 999px; }
.mud-input-control, .mud-select, .mud-input-control input, .mud-input-control textarea {
    font-family: var(--vg-font-body);
}
.mud-input-outlined .mud-input-outlined-border { border-radius: var(--vg-radius-control); }
.mud-input-control .mud-input-underline {
    min-height: 48px;
    padding: 0 .75rem;
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-radius-control);
    background: var(--vg-surface);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.mud-input-control .mud-input-underline::before, .mud-input-control .mud-input-underline::after { display: none; }
.mud-input-control:focus-within .mud-input-underline {
    border-color: var(--vg-primary);
    box-shadow: 0 0 0 3px rgba(104, 46, 94, .12);
}
.mud-input-control input, .mud-input-control textarea, .mud-select-input { color: var(--vg-ink); }
.mud-dialog { border-radius: var(--vg-radius-card); box-shadow: 0 18px 56px rgba(51, 46, 50, .18); }
.mud-dialog-title { color: var(--vg-ink); font-family: 'Poppins', Arial, sans-serif; font-weight: 600; }
.mud-chip { border-radius: 999px; }
.mud-simple-table .mud-table-container th { background: var(--vg-primary-light); }
.chat-panel {
    border: 1px solid var(--vg-line) !important;
    border-radius: var(--vg-radius-card) !important;
    background: var(--vg-surface);
    box-shadow: var(--vg-shadow-card);
}
.chat-panel > div > div { border-radius: 16px !important; }

.pet-card, .connection-item, .exam-item { transition: box-shadow .18s ease, border-color .18s ease; }
.pet-card:hover, .connection-item:hover, .exam-item:hover {
    border-color: #d8c3d2;
    box-shadow: 0 10px 28px rgba(104, 46, 94, .1);
}
button:focus-visible, a:focus-visible, .mud-button-root:focus-visible, .mud-icon-button:focus-visible {
    outline-color: var(--vg-warning);
}

@media (max-width: 639.98px) {
    .app-content { padding-right: max(.875rem, env(safe-area-inset-right)); padding-left: max(.875rem, env(safe-area-inset-left)); }
    .page-heading { gap: .75rem; }
    .form-page form, .diary-form, .diary-section, .connection-form, .connection-list { padding: 1rem; }
    .mud-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Product screens: shared hierarchy and card rhythm across Tutor, Vet, and Admin. */
:root {
    --vg-shadow-card: 0 10px 30px rgba(72, 43, 66, .06);
    --vg-radius-card: 18px;
}

body { background: var(--vg-brand-backdrop) fixed; }
.app-content { width: 100%; }
.app-header { backdrop-filter: blur(12px); }
.header-status { color: var(--vg-muted); }

.today-page,
.pets-page,
.diary-page,
.vet-connection-page {
    width: 100%;
}

.today-page { gap: 1rem; }
.today-intro,
.page-heading,
.form-heading {
    color: var(--vg-ink);
}
.today-intro h1,
.page-heading h1,
.form-heading h1 {
    color: var(--vg-primary);
    font-weight: 700;
}
.page-heading { align-items: center; }
.page-heading > div,
.form-heading { min-width: 0; }
.page-heading p,
.form-heading p,
.today-intro p { max-width: 680px; }

.progress-section,
.pet-overview,
.phase-highlight,
.info-section,
.guidance-section,
.reminder-panel,
.diary-panel,
.diary-section,
.diary-form,
.diary-context,
.connection-form,
.connection-list,
.connection-item,
.exam-item,
.pet-card,
.result-panel,
.state-panel,
.form-page form {
    box-shadow: var(--vg-shadow-card);
}

.pet-overview,
.progress-section,
.info-section,
.guidance-section,
.reminder-panel,
.diary-panel,
.diary-section,
.diary-form,
.diary-context,
.connection-form,
.connection-list,
.connection-item,
.exam-item,
.pet-card,
.form-page form,
.state-panel {
    border-color: var(--vg-line);
    background-color: var(--vg-surface);
}

.pet-overview { padding: 1.15rem 1.25rem; }
.pet-avatar { color: var(--vg-primary); background: var(--vg-secondary-light); }
.progress-section { padding: clamp(1rem, 2.5vw, 1.5rem); }
.progress-track { height: 9px; background: #f1e8ee; }
.progress-track span { background: linear-gradient(90deg, var(--vg-primary), #a45284); }
.phase-highlight {
    border-color: #eed8e5;
    background: linear-gradient(115deg, #fbf0f5, #fffaf9);
}
.phase-icon { color: var(--vg-primary); background: #fff; }
.info-section,
.guidance-section,
.diary-section,
.diary-form,
.diary-context,
.connection-form,
.connection-list { padding: clamp(1rem, 2.5vw, 1.4rem); }
.reminder-panel,
.diary-panel { padding: 1.15rem; }
.diary-panel { border-color: #edd9dc; background: #fffafb; }

.form-page { gap: 1.15rem; }
.form-page form {
    gap: 1rem;
    padding: clamp(1.1rem, 3vw, 1.5rem);
}
.form-heading h1 { margin-bottom: .5rem; }
.form-footer { padding-top: .25rem; }
.form-footer a,
.form-page a { color: var(--vg-primary); font-weight: 600; }
.form-page a:hover,
.form-footer a:hover { color: #8e477e; }

.pet-card {
    min-height: 94px;
    padding: 1rem 1.15rem;
}
.pet-status {
    padding: .3rem .65rem;
    border-radius: 999px;
    background: #eef6ef;
}
.connection-item,
.exam-item { padding: 1rem 1.15rem; }
.exam-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: var(--vg-primary-light);
    color: var(--vg-primary);
    font-size: .75rem;
    font-weight: 700;
}
.connection-form h2,
.connection-list h2,
.diary-section h2 { color: var(--vg-primary); }
.state-panel {
    min-height: 150px;
    padding: 1.25rem;
}

.mud-button-root {
    min-height: 48px;
    font-weight: 600 !important;
}
.mud-icon-button { min-width: 48px; min-height: 48px; }
.mud-simple-table {
    overflow: hidden;
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-radius-card);
    background: var(--vg-surface);
    box-shadow: var(--vg-shadow-card);
}
.mud-simple-table .mud-table-container th {
    background: #faf1f6;
    color: var(--vg-primary);
}
.mud-simple-table .mud-table-container td,
.mud-simple-table .mud-table-container th {
    padding: .85rem 1rem;
}

.chat-panel {
    display: flex;
    min-height: 280px;
    max-height: min(58vh, 620px);
    flex-direction: column;
    gap: .75rem;
    overflow-y: auto;
    margin: .75rem 0;
    padding: 1rem;
}
.chat-message-row { display: flex; justify-content: flex-start; }
.chat-message-row--own { justify-content: flex-end; }
.chat-message {
    max-width: min(80%, 520px);
    padding: .7rem .9rem;
    border: 1px solid var(--vg-line);
    border-radius: 18px 18px 18px 5px;
    background: #fff;
    color: var(--vg-ink);
}
.chat-message--own {
    border-color: var(--vg-primary);
    border-radius: 18px 18px 5px 18px;
    background: var(--vg-primary);
    color: #fff;
}
.chat-message small { display: block; margin-bottom: .25rem; color: var(--vg-muted); font-size: .72rem; }
.chat-message--own small { color: #f4dce9; }
.chat-message-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-composer { display: flex; align-items: flex-start; gap: .7rem; }
.chat-composer .mud-input-control { flex: 1; min-width: 0; }
.chat-composer .mud-button-root { flex: 0 0 auto; }

.not-found-page {
    display: grid;
    justify-items: center;
    gap: .8rem;
    max-width: 560px;
    margin: clamp(2rem, 10vh, 6rem) auto;
    padding: clamp(1.5rem, 5vw, 3rem);
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-radius-card);
    background: var(--vg-surface);
    box-shadow: var(--vg-shadow-card);
    text-align: center;
}
.not-found-page h1 { margin: 0; color: var(--vg-primary); font-size: clamp(1.5rem, 5vw, 2rem); }
.not-found-page p { margin: 0 0 .4rem; color: var(--vg-muted); }
.not-found-icon {
    display: grid; place-items: center; width: 64px; height: 64px;
    border-radius: 50%; background: var(--vg-secondary-light); color: var(--vg-primary);
}
.not-found-icon .mud-icon-root { font-size: 2rem; }

@media (min-width: 900px) {
    .today-page { gap: 1.25rem; }
    .today-grid,
    .action-grid { gap: 1rem; }
    .form-page { max-width: 560px; }
    .pet-floating-selector { right: 1.5rem; bottom: 1.5rem; }
}

@media (max-width: 639.98px) {
    .page-heading { align-items: stretch; }
    .pet-card { gap: .75rem; }
    .pet-card .mud-icon-button { margin-left: auto; }
    .chat-panel { max-height: 55dvh; min-height: 220px; }
    .chat-message { max-width: 88%; }
    .chat-composer { align-items: flex-end; }
    .chat-composer .mud-button-root { min-width: 48px; padding-inline: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pet-card,
    .connection-item,
    .exam-item { transition: none; }
}

/* Public account screens use the VetGest pet mark and illustration from the mobile reference. */
.app-shell--auth { min-height: 100vh; min-height: 100dvh; background: var(--vg-brand-backdrop) fixed; }
.app-shell--auth .app-main { display: flex; min-height: 100vh; min-height: 100dvh; }
.app-shell--auth .app-content { display: flex; flex: 1; justify-content: center; max-width: none; min-width: 0; margin: 0; padding: 0; }
.auth-page {
    display: flex;
    width: min(100%, 440px);
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
    gap: .85rem;
    margin: 0 auto;
    padding: max(1.1rem, env(safe-area-inset-top)) 1.25rem max(.4rem, env(safe-area-inset-bottom));
    overflow: hidden;
    border: 1px solid rgba(234, 223, 228, .78);
    border-radius: 28px;
    background:
        radial-gradient(ellipse at 100% 0, rgba(240,220,233,.66), transparent 32%),
        linear-gradient(180deg, #fffaf8 0%, #fff7f4 76%, #fae8e4 100%);
    box-shadow: 0 18px 50px rgba(104,46,94,.08);
}
.auth-brand { display: flex; justify-content: center; padding: .35rem 0 0; }
.vetgest-brand { display: flex; flex-direction: column; align-items: center; gap: .05rem; color: var(--vg-primary); text-align: center; }
.vetgest-brand > img { display: block; width: clamp(112px, 35vw, 142px); height: 92px; object-fit: contain; }
.vetgest-brand-copy { display: grid; justify-items: center; line-height: 1; }
.vetgest-wordmark { color: var(--vg-brand-gest); font-size: clamp(2.1rem, 9vw, 2.65rem); font-weight: 700; letter-spacing: -.045em; }
.vetgest-wordmark strong { color: var(--vg-brand-vet); font-weight: 700; }
.auth-brand .vetgest-wordmark { font-weight: 500; }
.auth-brand .vetgest-wordmark strong { font-weight: inherit; }
.vetgest-tagline { margin-top: .28rem; color: #99566c; font-size: .53rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.vetgest-brand--compact { flex-direction: row; gap: .4rem; text-align: left; }
.vetgest-brand--compact > img { width: 34px; height: 30px; }
.vetgest-brand--compact .vetgest-brand-copy { display: block; }
.vetgest-brand--compact .vetgest-wordmark { font-size: 1.15rem; letter-spacing: .01em; }
.auth-page .form-heading { text-align: left; }
.auth-page .form-heading h1 { margin: .25rem 0; font-size: clamp(1.2rem, 5vw, 1.45rem); }
.auth-page .form-heading p { margin: 0; font-size: .78rem; }
.auth-page form { gap: .55rem; padding: 0; border: 0; background: transparent; box-shadow: none; }
.auth-field { display: grid; gap: .2rem; }
.auth-field-label { color: #4d3f46; font-size: .82rem; font-weight: 600; line-height: 1.35; }
.auth-page .mud-input-control { margin-top: 0; }
.auth-page .mud-input-control .mud-input-label { color: #4d3f46; font-size: .82rem; font-weight: 600; }
.auth-page .mud-input-control .mud-input-underline { min-height: 46px; padding-inline: .7rem; border: 1px solid #e8d9d7; border-radius: 12px; background: rgba(255,255,255,.9); }
.auth-page .mud-input-control .mud-input-underline:focus-within { border-color: var(--vg-primary); }
.auth-login-hint { margin: .45rem 0 .1rem; }
.auth-page .mud-button-filled-primary { background-color: var(--vg-primary); }
.auth-page .mud-button-root { width: 100%; }
.auth-page .auth-remember-session .mud-button-root { width: auto; }
.auth-remember-session .mud-typography { font-size: .85rem; }
.auth-page .mud-button-filled-primary { min-height: 46px; margin-top: .15rem; }
.auth-divider { display: flex; align-items: center; gap: .7rem; color: #9b858c; font-size: .7rem; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: #eadcdd; content: ""; }
.auth-register-prompt { display: grid; gap: .45rem; text-align: center; }
.auth-register-prompt > span { color: var(--vg-muted); font-size: .76rem; }
.auth-register-prompt .mud-button-root { min-height: 42px; border-color: #e6a9b5; color: #77324f; }
.auth-page--login .auth-safety-note { margin-top: .15rem; }
.auth-page--register { gap: .65rem; justify-content: center; }
.auth-page--register .auth-brand { padding-top: .1rem; }
.auth-page--register .vetgest-brand > img { width: 94px; height: 70px; }
.auth-page--register .vetgest-wordmark { font-size: 2rem; }
.auth-page--set-password { gap: 1rem; }
.auth-safety-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .45rem;
    color: var(--vg-muted);
    font-size: .74rem;
    line-height: 1.45;
    text-align: center;
}
.auth-safety-note .mud-icon-root { flex: 0 0 auto; color: var(--vg-primary); font-size: 1rem; }

@media (min-width: 640px) {
    .app-shell--auth { display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
    .app-shell--auth .app-main { width: 100%; min-height: 0; }
    .app-shell--auth .app-content { flex: initial; }
    .auth-page { min-height: min(820px, calc(100dvh - 2.5rem)); padding: 1.25rem 2rem .6rem; }
    .auth-page--register { min-height: min(900px, calc(100dvh - 2.5rem)); }
}

/* Login and register share the landing backdrop and brand waves. */
.app-shell--auth:has(.auth-waves) {
    position: relative;
    isolation: isolate;
    background: var(--vg-brand-backdrop);
}
.auth-waves {
    z-index: -1;
    height: clamp(110px, 16vh, 160px);
}
.app-shell--auth:has(.auth-waves) .auth-page {
    position: relative;
    padding-bottom: calc(clamp(110px, 16vh, 160px) + max(.5rem, env(safe-area-inset-bottom)));
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
@media (min-width: 640px) {
    .app-shell--auth:has(.auth-waves) { padding-bottom: calc(clamp(110px, 16vh, 160px) * .6); }
    .app-shell--auth:has(.auth-waves) .auth-page {
        min-height: 0;
        padding-bottom: 1rem;
        border: 1px solid rgba(255, 255, 255, .7);
        border-radius: 28px;
        background: rgba(250, 248, 246, .86);
        box-shadow: 0 18px 50px rgba(107, 30, 58, .12);
    }
}
@media (max-width: 320px) {
    body { min-width: 0; }
}

.today-page > .pregnancy-dashboard, .today-page > .selected-pregnancy-care {
    display: grid;
    gap: 1rem;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.pregnancy-dashboard { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.pregnancy-summary {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
    padding: 1rem;
    border: 2px solid transparent;
    border-radius: 22px;
    background: var(--vg-surface);
    color: var(--vg-ink);
    box-shadow: var(--vg-shadow-card);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.pregnancy-detail-summary { cursor: default; }
.diary-pet-selector { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: var(--vg-radius-card); background: var(--vg-surface); }
.diary-pet-selector strong { display: block; margin-top: .15rem; font-size: 1.05rem; color: var(--vg-ink); }
.diary-pet-selector .pet-photo { width: 56px; height: 56px; flex-basis: 56px; }
.pet-floating-selector { position: fixed; right: 1rem; bottom: calc(6rem + env(safe-area-inset-bottom)); z-index: 1250; display: grid; justify-items: end; gap: .6rem; }
.pet-floating-list { display: grid; gap: .5rem; max-height: calc(100dvh - 14rem); overflow-y: auto; margin: 0; padding: .25rem; list-style: none; }
.pet-floating-feedback { max-width: min(320px, calc(100vw - 2rem)); }
.pet-floating-option { display: flex; align-items: center; gap: .55rem; min-height: 48px; min-width: 170px; padding: .3rem .5rem .3rem .3rem; border: 1px solid var(--vg-line); border-radius: 999px; background: var(--vg-surface); color: var(--vg-ink); font: inherit; box-shadow: var(--vg-shadow-card); cursor: pointer; }
.pet-floating-option.is-selected { border-color: var(--vg-primary); background: var(--vg-primary-light); color: var(--vg-primary); }
.pet-floating-option:disabled { cursor: default; opacity: .72; }
.pet-floating-option:focus-visible { outline: 3px solid var(--vg-primary); outline-offset: 2px; }
.pet-floating-option-photo .pet-photo { width: 40px; height: 40px; flex-basis: 40px; }
.pet-floating-option-name { display: block; max-width: 180px; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.pregnancy-summary:focus-visible { outline: 3px solid var(--vg-primary); outline-offset: 3px; }
.pet-photo { position: relative; display: grid; place-items: center; flex: 0 0 76px; width: 76px; height: 76px; overflow: hidden; border-radius: 50%; background: var(--vg-secondary-light); color: var(--vg-primary); }
.pet-photo img, .pet-onboarding-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pet-photo-error { position: absolute; inset: auto 0 0; padding: .15rem; background: var(--vg-surface); font-size: .6rem; text-align: center; }
.pregnancy-summary-info { flex: 1; min-width: 0; }
.pregnancy-summary-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pregnancy-summary-heading h2 { margin: 0; overflow-wrap: anywhere; font-size: 1.05rem; }
.pregnancy-summary-heading .mud-icon-root { flex-shrink: 0; color: var(--vg-muted); }
.pregnancy-summary-info > p { margin: .15rem 0 .5rem; color: var(--vg-muted); font-size: .8rem; overflow-wrap: anywhere; }
.pregnancy-summary-progress { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem; font-size: .75rem; }
.pregnancy-summary-progress > span, .pregnancy-summary-info > small { color: var(--vg-muted); font-size: .72rem; }
.pregnancy-summary .progress-track { height: 7px; margin: .4rem 0 .3rem; }
.pregnancy-summary .progress-track span { background: linear-gradient(90deg, #c46e90, #de9db3); }
.selected-pregnancy-care > h2 { margin: .5rem 0 0; font-size: 1.2rem; }
.selected-pregnancy-care > .estimate-note { display: block; }
.pet-photo-picker { display: grid; justify-items: start; gap: .5rem; min-width: 0; }
.pet-photo-picker { position: relative; }
.pet-photo-picker .pet-photo-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pet-photo-select { padding: .6rem; border: 1px solid var(--vg-line); border-radius: 12px; background: var(--vg-surface); color: var(--vg-primary); font: inherit; cursor: pointer; }
.pet-photo-picker:has(.pet-photo-input:focus-visible) .pet-photo-select { outline: 3px solid var(--vg-primary); outline-offset: 2px; }
.pet-photo-picker .form-hint { margin: 0; }
.pet-onboarding {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 460px;
    min-height: min(700px, calc(100dvh - 180px));
    margin: 0 auto;
    padding: 1.25rem;
    border-radius: 24px;
    background: var(--vg-surface);
}
.pet-onboarding-header { position: relative; display: flex; align-items: center; min-height: 48px; }
.pet-onboarding-steps { display: flex; flex: 1; justify-content: center; padding: 0 48px 0 0; margin: 0; list-style: none; }
.pet-onboarding-steps li { position: relative; display: grid; place-items: center; width: 64px; color: var(--vg-muted); }
.pet-onboarding-steps li:not(:last-child)::after { position: absolute; top: 15px; left: 47px; width: 34px; height: 3px; background: #e6dce0; content: ""; }
.pet-onboarding-steps li > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e6dce0; font-family: var(--vg-font-heading); }
.pet-onboarding-steps .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pet-onboarding-steps .reached > span:first-child { background: #b85d7c; color: white; }
.pet-onboarding-steps [aria-current="step"] > span:first-child { box-shadow: 0 0 0 3px rgba(184,93,124,.15); }
.pet-onboarding h1 { margin: .25rem 0 .5rem; color: var(--vg-primary); font-size: clamp(1.25rem, 5vw, 1.65rem); }
.pet-onboarding h1:focus { outline: none; }
.pet-onboarding-form { display: flex; flex: 1; flex-direction: column; gap: 1rem; }
.pet-onboarding-fields { display: grid; min-inline-size: 0; gap: 1.1rem; padding: 0; margin: 0; border: 0; }
.pet-onboarding-field { display: grid; gap: .35rem; }
.pet-onboarding-field > label, .pet-onboarding-species legend { color: var(--vg-muted); font-size: 1rem; }
.pet-onboarding-species { min-inline-size: 0; padding: 0; margin: 0; border: 0; }
.pet-onboarding-species legend { margin-bottom: .65rem; }
.pet-onboarding .species-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pet-onboarding .species-choice { display: flex; min-height: 150px; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 1rem; border: 2px solid transparent; border-radius: 20px; background: rgba(255,255,255,.65); color: var(--vg-primary); }
.pet-onboarding .species-choice.selected { border-color: var(--vg-primary); background: var(--vg-primary-light); color: var(--vg-primary); box-shadow: none; }
.pet-onboarding .species-choice svg { width: 68px; height: 68px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pet-onboarding-avatar { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--vg-secondary-light); color: var(--vg-primary); }
.pet-onboarding-avatar .mud-icon-root { font-size: 3rem; }
.pet-onboarding-optional { margin: 0; color: var(--vg-muted); font-size: .85rem; }
.pet-onboarding-extra-dates { display: grid; gap: 1rem; }
.pet-onboarding-errors { color: #a4263e; font-size: .9rem; }
.pet-onboarding-errors p { margin: 0 0 .3rem; }
.pet-onboarding-footer { display: grid; gap: .4rem; margin-top: auto; padding-top: 2rem; }
.pet-onboarding-footer .mud-button-filled { min-height: 50px; border-radius: 20px !important; background: var(--vg-primary); }
.pets-page { max-width: 1080px; margin: 0 auto; }
.pet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pet-profile-card {
    position: relative;
    align-items: flex-start;
    min-height: 156px;
    padding: 1.15rem;
    border-radius: var(--vg-radius-card);
}
.pet-profile-card .pet-avatar { width: 58px; height: 58px; }
.pet-profile-info { flex: 1; min-width: 0; }
.pet-profile-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pet-profile-title h2 { font-size: 1.1rem; }
.pet-profile-link { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.pet-profile-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--vg-radius-card); cursor: pointer; }
.pet-profile-link:hover { color: var(--vg-primary); text-decoration: underline; }
.pet-profile-link:focus-visible { outline: none; }
.pet-profile-link:focus-visible::after { outline: 2px solid var(--vg-primary); outline-offset: 3px; }
.pet-profile-card .mud-button-root { position: relative; z-index: 2; }
.pet-profile-info p { margin: .2rem 0 .5rem; }
.pet-profile-info .mud-button-root { margin-left: -.5rem; }
.pet-status--inactive { background: #f2eeee; color: #6f6870; }
.pet-create-form { max-width: 650px; }
.pet-form-section {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: .85rem;
    margin: 0;
    padding: 0 0 1rem;
    border: 0;
    border-bottom: 1px solid var(--vg-line);
}
.pet-form-section legend {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: 0 0 .85rem;
    color: var(--vg-ink);
    font-size: 1rem;
    font-weight: 600;
}
.form-step {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--vg-primary-light);
    color: var(--vg-primary);
    font-size: .82rem;
    font-weight: 700;
}
.pet-form-section-content { display: grid; gap: .7rem; min-width: 0; }
.pet-form-section-content h2 { margin: 0; font-size: 1rem; }
.pet-form-section-content h2 small { color: var(--vg-muted); font-size: .75rem; font-weight: 400; }
.species-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.species-choice {
    display: grid;
    justify-items: center;
    gap: .25rem;
    min-height: 112px;
    padding: .9rem;
    border: 1px solid var(--vg-line);
    border-radius: 16px;
    background: #fff;
    color: var(--vg-ink);
    font: inherit;
    cursor: pointer;
}
.species-choice .mud-icon-root { color: var(--vg-primary); font-size: 1.8rem; }
.species-choice span { color: var(--vg-muted); font-size: .78rem; }
.species-choice.selected { border: 2px solid var(--vg-primary); background: var(--vg-primary-light); color: var(--vg-primary); box-shadow: 0 0 0 3px rgba(128,28,73,.08); }
.species-choice:focus-visible { outline: 3px solid var(--vg-warning); outline-offset: 2px; }
.pet-form-actions { display: flex; justify-content: flex-end; gap: .65rem; }

.pregnancy-page { max-width: 760px; }
.pregnancy-page .form-heading { text-align: left; }
.pregnancy-form { max-width: 760px; }
.pregnancy-form-section { display: grid; gap: .8rem; padding: 0 0 1rem; border: 0; border-bottom: 1px solid var(--vg-line); }
.pregnancy-section-heading { display: flex; align-items: flex-start; gap: .8rem; }
.pregnancy-section-heading h2 { margin: 0 0 .2rem; font-size: 1rem; }
.pregnancy-section-heading p { margin: 0; color: var(--vg-muted); font-size: .82rem; }
.pregnancy-form-footer { display: grid; gap: .7rem; }
.pregnancy-form-footer p { display: flex; gap: .45rem; margin: 0; color: var(--vg-muted); font-size: .8rem; }
.pregnancy-form-footer p .mud-icon-root { flex: 0 0 auto; color: var(--vg-primary); font-size: 1.1rem; }
.pregnancy-page .result-panel { padding: clamp(1rem, 3vw, 1.5rem); }

.diary-page { max-width: 1200px; }
.diary-context { display: flex; align-items: center; gap: .8rem; }
.diary-context > .mud-icon-root { color: var(--vg-primary); font-size: 1.7rem; }
.diary-workspace { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); align-items: start; gap: 1rem; }
.diary-form { display: grid; gap: .8rem; }
.diary-form .section-heading { align-items: center; }
.diary-form .section-heading h2 { margin: .2rem 0 0; font-size: 1.15rem; }
.diary-sidebar { display: grid; gap: 1rem; min-width: 0; }
.diary-sidebar .diary-section { min-width: 0; }
.diary-timeline { display: grid; gap: .8rem; }
.diary-entry { gap: .8rem; }
.diary-entry-body { min-width: 0; }
.trend-table { min-width: 400px; }
.diary-journal { gap: .85rem; min-width: 0; padding-bottom: 1.5rem; }
.diary-journal .diary-heading h1 { display: flex; align-items: center; gap: .6rem; margin: .2rem 0 0; color: var(--vg-primary); font-size: 1.65rem; letter-spacing: 0; }
.diary-journal .diary-heading h1 .mud-icon-root { font-size: 1.85rem; }
.diary-journal .diary-workspace { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
.diary-journal .diary-form { container-type: inline-size; min-width: 0; gap: .8rem; padding: 1rem; }
.diary-journal .diary-form-title { margin: 0; color: var(--vg-primary); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
.diary-journal .diary-fields { display: grid; min-width: 0; gap: 1rem; margin: 0; padding: 0; border: 0; }
.diary-journal .diary-choice-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.diary-journal .diary-choice-field legend { margin-bottom: .45rem; padding: 0; color: var(--vg-ink); font-size: .85rem; font-weight: 700; }
.diary-journal .diary-wellbeing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.diary-journal .diary-choice.mud-button-root { min-width: 0; min-height: 44px; padding: .45rem .3rem; border: 1px solid transparent; border-radius: 999px !important; color: var(--vg-muted); background: var(--vg-primary-light); font-family: var(--vg-font-body); font-size: .8rem; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.35; box-shadow: none; }
.diary-journal .diary-wellbeing .diary-choice { min-height: 64px; }
.diary-journal .diary-wellbeing .mud-button-label { flex-direction: column; gap: .25rem; }
.diary-journal .diary-choice .mud-button-icon-start { margin: 0; }
.diary-journal .diary-choice .mud-button-label { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.diary-journal .diary-choice.is-selected { color: #fff; background: var(--vg-primary); }
.diary-journal .diary-choice:hover:not(.mud-disabled) { border-color: var(--vg-primary); }
.diary-journal .diary-choice.is-selected:hover:not(.mud-disabled) { background: var(--vg-primary-pressed); }
.diary-journal .diary-choice:focus-visible { outline: 3px solid var(--vg-primary); outline-offset: 3px; }
.diary-journal .diary-intake-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.diary-journal .diary-segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 999px; background: var(--vg-primary-light); }
.diary-journal .diary-segments .diary-choice { min-height: 44px; padding: .45rem .15rem; background: transparent; font-size: .75rem; }
.diary-journal .diary-segments .mud-button-label { white-space: nowrap; overflow-wrap: normal; }
.diary-journal .diary-segments .diary-choice.is-selected { background: var(--vg-primary); }
.diary-journal .diary-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.diary-journal .diary-measurement-field { min-width: 0; }
.diary-journal .diary-measurement-field > label { display: block; margin-bottom: .35rem; font-size: .82rem; font-weight: 700; overflow-wrap: anywhere; }
.diary-journal .diary-measurement-field .mud-input-control { margin-top: 0; }
.diary-journal .mud-input-control { min-width: 0; }
.diary-journal .diary-details { background: transparent; border-bottom: 1px solid var(--vg-line); }
.diary-journal .diary-details .mud-expand-panel { background: transparent; }
.diary-journal .diary-details .mud-expand-panel-header { min-height: 44px; padding: .3rem 0; color: var(--vg-primary); font-size: .82rem; }
.diary-journal .diary-details .mud-expand-panel-content { padding: .5rem 0 1rem; }
.diary-journal .diary-extra-fields { display: grid; gap: .8rem; }
.diary-journal .diary-save.mud-button-root { min-height: 48px; font-size: 1rem; letter-spacing: 0; text-transform: none; }
.diary-journal .diary-sidebar { gap: .85rem; }
.diary-journal .diary-section { gap: .85rem; padding: 1rem; }
.diary-journal .diary-section h2 { display: flex; align-items: center; gap: .45rem; min-width: 0; margin: 0; font-size: 1rem; line-height: 1.4; letter-spacing: 0; }
.diary-journal .diary-section h2 .mud-icon-root { flex-shrink: 0; font-size: 1.35rem; }
.diary-journal .diary-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.diary-journal .diary-stats > div { min-width: 0; padding: .5rem .3rem; border-left: 2px solid var(--vg-line); }
.diary-journal .diary-stats dt { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; color: var(--vg-muted); font-size: .7rem; overflow-wrap: anywhere; }
.diary-journal .diary-stats dt .mud-icon-root { color: var(--vg-primary); font-size: 1.35rem; }
.diary-journal .diary-stats dd { margin: .35rem 0 0; font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }
.diary-journal .diary-stats small { display: block; margin-top: .2rem; color: var(--vg-muted); font-size: .65rem; font-weight: 400; overflow-wrap: anywhere; }
.diary-journal .diary-measurements { border-top: 1px solid var(--vg-line); padding-top: .65rem; min-width: 0; }
.diary-journal summary { min-height: 32px; color: var(--vg-primary); font-size: .8rem; cursor: pointer; }
.diary-journal summary:focus-visible { outline: 2px solid var(--vg-primary); outline-offset: 3px; }
.diary-journal .table-wrap { max-width: 100%; }
.diary-journal .trend-table { width: 100%; min-width: 0; font-size: .75rem; }
.diary-journal .trend-table th, .diary-journal .trend-table td { padding: .65rem .3rem; overflow-wrap: anywhere; }
.diary-journal .diary-history-heading { display: flex; align-items: center; justify-content: space-between; gap: .3rem; flex-wrap: wrap; }
.diary-journal .diary-history-heading .mud-button-root { min-height: 44px; padding: .35rem .25rem; font-size: .75rem; text-transform: none; letter-spacing: 0; }
.diary-journal .diary-timeline { gap: 0; padding-left: .5rem; }
.diary-journal .diary-entry { position: relative; grid-template-columns: 60px minmax(0, 1fr); gap: .65rem; margin-left: .1rem; padding: .3rem 0 .9rem .9rem; border: 0; border-left: 2px solid var(--vg-line); }
.diary-journal .diary-entry::before { content: ""; position: absolute; top: .8rem; left: -.35rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--vg-primary); }
.diary-journal .diary-entry:last-child { padding-bottom: .3rem; border-left-color: transparent; }
.diary-journal .diary-entry-date { justify-items: start; gap: .25rem; padding: .45rem 0; border-radius: 0; background: transparent; color: var(--vg-ink); }
.diary-journal .diary-entry-date time { font-size: .85rem; font-weight: 800; }
.diary-journal .diary-entry-date small { color: var(--vg-muted); font-size: .65rem; overflow-wrap: anywhere; }
.diary-journal .diary-entry-body { padding: .45rem 0 .7rem; border-bottom: 1px solid var(--vg-line); }
.diary-journal .diary-entry-body p { margin: 0 0 .4rem; overflow-wrap: anywhere; white-space: pre-wrap; font-size: .8rem; line-height: 1.5; }
.diary-journal .diary-entry-body .diary-entry-notes { color: var(--vg-ink); }
.diary-journal .entry-meta { gap: .45rem .7rem; margin: .45rem 0 0; color: var(--vg-ink); font-size: .73rem; font-weight: 600; }
.diary-journal .entry-meta span { display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; overflow-wrap: anywhere; }
.diary-journal .entry-meta .mud-icon-root { flex-shrink: 0; color: var(--vg-primary); font-size: 1rem; }
.diary-journal .diary-estimate { min-width: 0; padding: .2rem .25rem; }
.diary-journal .diary-estimate p { color: var(--vg-muted); font-size: .8rem; line-height: 1.6; overflow-wrap: anywhere; }
@media (min-width: 480px) {
    .diary-journal .diary-wellbeing .diary-choice { min-height: 44px; }
    .diary-journal .diary-wellbeing .mud-button-label { flex-direction: row; gap: .4rem; }
    .diary-journal .diary-stats dt { flex-direction: row; align-items: center; }
}
@media (min-width: 640px) {
    .diary-journal .diary-form, .diary-journal .diary-section { padding: 1.25rem; }
}
@container (min-width: 440px) {
    .diary-journal .diary-intake-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .diary-journal .diary-workspace { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 1rem; }
}
@media (max-width: 380px) {
    .diary-journal .diary-form-grid { grid-template-columns: minmax(0, 1fr); }
}
.exams-page { display: grid; gap: 1rem; max-width: 1000px; margin: 0 auto; }
.exams-notice {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .9rem 1rem;
    border: 1px solid #eed6dc;
    border-radius: 16px;
    background: #fff7f8;
    color: #6f5059;
    font-size: .82rem;
    line-height: 1.5;
}
.exams-notice .mud-icon-root { flex: 0 0 auto; color: var(--vg-primary); }
.exams-list { display: grid; gap: .75rem; }
.exams-list > .section-heading { align-items: center; }
.exam-item { grid-template-columns: 104px minmax(0, 1fr); border-left-width: 4px; }
.exam-date { min-height: 68px; }
.result-actions { gap: .5rem; }
.examination-record-section { display: grid; gap: .85rem; min-width: 0; padding: 1rem; border: 1px solid var(--vg-line); border-radius: 8px; background: var(--vg-surface); }
.examination-record-section > .section-heading { align-items: center; }
.examination-record-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.examination-record-form > :last-child { grid-column: 1 / -1; }
.examination-record-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.examination-record-list { display: grid; gap: .7rem; }
.examination-record-item { display: grid; grid-template-columns: minmax(120px, .28fr) minmax(0, 1fr); gap: .8rem; min-width: 0; padding: .9rem; border: 1px solid var(--vg-line); border-radius: 6px; background: var(--vg-surface); }
.examination-record-item > div:last-child { min-width: 0; }
.examination-record-item p { margin: .4rem 0 0; font-size: .84rem; line-height: 1.5; overflow-wrap: anywhere; }
.examination-parameters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .45rem; margin: .75rem 0; }
.examination-parameters > div { min-width: 0; padding: .55rem .65rem; border-left: 3px solid var(--vg-teal); background: var(--vg-soft); }
.examination-parameters dt { color: var(--vg-muted); font-size: .72rem; }
.examination-parameters dd { margin: .12rem 0 0; font-size: .84rem; font-weight: 700; overflow-wrap: anywhere; }
.examination-parameter-editor { display: grid; gap: .65rem; }
.examination-parameter-editor .section-heading { align-items: center; }
.examination-parameter-editor h3 { margin: 0; font-size: .95rem; }
.examination-parameter-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(110px, .55fr) 44px; align-items: center; gap: .5rem; }
.care-articles-section { display: grid; gap: .85rem; min-width: 0; }
.care-articles-section > .section-heading { align-items: center; }
.care-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.care-article-card.mud-button-root { display: grid; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--vg-line); border-radius: 6px; background: var(--vg-surface); color: var(--vg-ink); text-align: left; white-space: normal; }
.care-article-card.mud-button-root:hover { background: var(--vg-surface); box-shadow: 0 4px 14px rgba(35, 44, 43, .12); }
.care-article-card.mud-button-root:focus-visible { outline: 3px solid #e7b64a; outline-offset: 3px; }
.care-article-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--vg-soft); }
.care-article-card span { margin: .7rem .8rem 0; color: var(--vg-muted); font-size: .72rem; }
.care-article-card strong { margin: .25rem .8rem .85rem; font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; }
.care-article-page { display: grid; gap: 1rem; max-width: 860px; margin: 0 auto; }
.care-article-actions { display: flex; justify-content: flex-start; }
.care-article-content { min-width: 0; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--vg-line); border-radius: 8px; background: var(--vg-surface); }
.care-article-content header h1 { margin: .35rem 0 1rem; font-size: 1.8rem; line-height: 1.2; }
.care-article-content header img { display: block; width: 100%; max-height: 440px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: var(--vg-soft); }
.care-article-body { margin-top: 1.25rem; font-size: .98rem; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.care-article-references { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--vg-line); }
.care-article-references h2 { font-size: 1.05rem; }
.care-article-references ol { display: grid; gap: .5rem; padding-left: 1.25rem; font-size: .84rem; line-height: 1.55; }
.care-article-review { margin-top: 1.25rem; padding-top: .9rem; border-top: 1px solid var(--vg-line); color: var(--vg-muted); font-size: .78rem; }
.care-article-review p { margin: .4rem 0 0; }

.care-topics-grid { align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(9rem, 45%)), 1fr)); gap: .75rem; }
.care-topic-card.mud-button-root { min-width: 0; padding: .35rem; overflow: hidden; border: 1px solid var(--vg-line); border-radius: 8px !important; background: var(--vg-surface); color: var(--vg-ink); text-align: left; text-transform: none; letter-spacing: 0; }
.care-topic-card.mud-button-root.mud-disabled { color: var(--vg-ink); }
.care-topic-card .mud-button-label { display: block; width: 100%; min-width: 0; height: 100%; }
.care-topic-card-wide { grid-column: 1 / -1; }
.care-topic-media { aspect-ratio: 2 / 1; border-radius: 5px; }
.care-topic-copy { position: relative; padding: 1rem .35rem .5rem; }
.care-topic-icon { position: absolute; top: -1.2rem; left: .25rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 4px solid var(--vg-surface); border-radius: 50%; background: var(--vg-primary-light); color: var(--vg-primary); }
.care-topic-icon .mud-icon-root { font-size: 1.3rem; }
.care-topic-copy .section-heading { align-items: flex-start; gap: .15rem; }
.care-topic-copy .section-heading h2 { margin: .2rem 0 .35rem; overflow-wrap: anywhere; font-size: .85rem; line-height: 1.4; }
.care-topic-copy .section-heading .mud-icon-root { flex-shrink: 0; color: var(--vg-teal); }
.care-topic-copy p { margin: 0; color: var(--vg-muted); font-family: var(--vg-font-body); font-weight: 400; font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.care-topic-card.mud-button-root:hover:not(.mud-disabled) { background: var(--vg-surface); border-color: var(--vg-teal); }
.care-topic-card.mud-button-root:focus-visible { outline: 3px solid var(--vg-teal); outline-offset: 3px; }

.today-pet-profile { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: start; gap: .85rem; padding: 1rem; border: 1px solid var(--vg-line); border-radius: var(--vg-radius-card); background: var(--vg-surface); box-shadow: var(--vg-shadow-card); }
.today-pet-avatar { position: relative; width: 80px; }
.today-pet-avatar .pet-photo { width: 80px; height: 80px; }
.today-pet-avatar .mud-tooltip-root { position: absolute; right: -.35rem; bottom: -.4rem; }
.today-pet-camera.mud-icon-button { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 4px; border: 2px solid var(--vg-surface); background: var(--vg-primary); color: #fff; overflow: visible; }
.today-pet-camera.mud-icon-button::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.today-pet-camera .mud-icon-root { width: 16px; height: 16px; font-size: 16px; }
.today-pet-info { min-width: 0; }
.today-pet-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.today-pet-heading h2 { margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.today-pet-status { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .25rem .55rem; border-radius: 999px; background: #d9f1e4; color: #176245; font-size: .65rem; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.today-pet-status .mud-icon-root { flex: 0 0 auto; font-size: 1rem; }
.today-pet-status--overdue { background: #fdf0cf; color: #735107; }
.today-pet-info p { margin: .4rem 0 0; color: var(--vg-muted); font-size: .85rem; overflow-wrap: anywhere; }
.today-pet-progress-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem; margin-top: .8rem; font-size: .85rem; }
.today-pet-progress-label > span { color: var(--vg-muted); }
.today-pet-profile .progress-track { height: 8px; margin: .45rem 0; background: var(--vg-primary-light); }
.today-pet-profile .progress-track span { background: var(--vg-primary); }
.today-pet-due { display: flex; align-items: center; gap: .4rem; }
.today-pet-due .mud-icon-root { flex: 0 0 auto; font-size: 1.1rem; }
.selected-pregnancy-care { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 1rem; }
.selected-pregnancy-care .alert-panel > div:last-child { min-width: 0; overflow-wrap: anywhere; }
.today-phase { display: grid; grid-template-columns: minmax(100px, 32%) minmax(0, 1fr); gap: .85rem; padding: .65rem; border: 1px solid var(--vg-line); border-radius: var(--vg-radius-card); background: var(--vg-surface); }
.today-media { position: relative; min-width: 0; overflow: hidden; background: var(--vg-primary-light); }
.today-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.today-media-fallback { display: grid; place-items: center; width: 100%; height: 100%; min-height: inherit; background: linear-gradient(135deg, var(--vg-primary-light), var(--vg-secondary-light)); color: var(--vg-primary); }
.today-media-fallback > .mud-icon-root { width: 2.5rem; height: 2.5rem; opacity: .5; }
.today-phase-media { width: 100%; min-height: 180px; border-radius: 8px; }
.today-phase-media > img, .today-phase-media > .today-media-fallback { position: absolute; inset: 0; }
.today-phase-badge, .today-phase-range { position: absolute; left: .4rem; max-width: calc(100% - .8rem); padding: .25rem .45rem; border-radius: 5px; font-size: .65rem; font-weight: 800; overflow-wrap: anywhere; }
.today-phase-badge { top: .4rem; background: var(--vg-surface); color: var(--vg-primary); }
.today-phase-range { bottom: .4rem; background: var(--vg-primary); color: #fff; }
.today-phase-copy { display: flex; flex-direction: column; min-width: 0; padding: .4rem .1rem 0; }
.today-phase-copy .section-kicker { font-size: .65rem; letter-spacing: 0; }
.today-phase-copy h2 { margin: .35rem 0; font-size: 1.1rem; line-height: 1.3; color: var(--vg-primary); overflow-wrap: anywhere; }
.today-phase-copy p { margin: 0; color: var(--vg-muted); font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.today-phase-copy .today-phase-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: .6rem; }
.today-phase-action { display: flex; justify-content: flex-end; margin-top: auto; padding-top: .3rem; }
.today-phase-action .mud-icon-button { background: var(--vg-primary-light); }
.selected-pregnancy-care > .today-topics-heading { margin: .25rem .3rem -.25rem; color: var(--vg-primary); font-size: 1.2rem; line-height: 1.35; overflow-wrap: anywhere; }
.selected-pregnancy-care > .today-estimate { display: flex; padding: .25rem; }
@media (min-width: 600px) {
    .today-pet-profile { grid-template-columns: 120px minmax(0, 1fr); padding: 1.5rem; gap: 1.5rem; }
    .today-pet-avatar, .today-pet-avatar .pet-photo { width: 120px; }
    .today-pet-avatar .pet-photo { height: 120px; }
    .today-pet-heading h2 { font-size: 1.6rem; }
    .today-pet-status { font-size: .8rem; }
    .today-phase { gap: 1.25rem; padding: .85rem; }
    .today-phase-media { min-height: 220px; }
    .today-phase-copy h2 { font-size: 1.5rem; }
    .today-phase-copy p { font-size: .95rem; }
    .care-topic-copy { padding: 1rem .6rem .65rem; }
    .care-topic-copy .section-heading h2 { font-size: 1rem; }
    .care-topic-copy p { font-size: .9rem; }
}
@media (min-width: 1200px) { .care-topics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 359.98px) {
    .care-topics-grid { grid-template-columns: 1fr; }
    .today-pet-profile { grid-template-columns: 1fr; }
    .today-phase { grid-template-columns: 1fr; }
    .today-phase-media { min-height: 170px; aspect-ratio: 16 / 9; }
}

@media (max-width: 760px) {
    .pet-grid,
    .diary-workspace { grid-template-columns: 1fr; }
    .diary-sidebar { grid-row: 2; }
}

@media (max-width: 639.98px) {
    .auth-page { padding: 1rem; }
    .pet-profile-card { min-height: 142px; }
    .pet-form-section { grid-template-columns: 32px minmax(0, 1fr); gap: .6rem; }
    .form-step { width: 32px; height: 32px; }
    .pet-form-actions { display: grid; grid-template-columns: 1fr; }
    .pet-form-actions .mud-button-root { width: 100%; }
    .exam-item { grid-template-columns: 1fr; }
    .examination-record-form { grid-template-columns: 1fr; }
    .examination-record-form > :last-child { grid-column: auto; }
    .examination-parameter-row { grid-template-columns: repeat(2, minmax(0, 1fr)) 44px; }
    .examination-parameter-row > :nth-child(2) { grid-row: 2; }
    .examination-parameter-row > :nth-child(3) { grid-row: 2; grid-column: 2; }
    .examination-parameter-row > :nth-child(4) { grid-row: 1; grid-column: 3; }
    .examination-record-item { grid-template-columns: 1fr; gap: .45rem; }
    .care-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .care-article-grid { grid-template-columns: 1fr; }
    .care-article-content header h1 { font-size: 1.45rem; }
}

/* Vet and administration views use the same calm, card-based hierarchy as the mockup. */
.vet-patient-card,
.admin-account-card,
.patient-summary-grid > div {
    border: 1px solid var(--vg-line);
    border-radius: 18px;
    background: var(--vg-surface);
    box-shadow: 0 8px 24px rgba(72, 43, 66, .045);
}
.vet-patient-card {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(200px, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}
.vet-patient-identity,
.admin-account-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .8rem;
}
.vet-patient-avatar,
.admin-account-avatar {
    display: grid;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 15px;
    background: var(--vg-primary-light);
    color: var(--vg-primary);
}
.vet-patient-avatar .mud-icon-root,
.admin-account-avatar .mud-icon-root { font-size: 1.5rem; }
.vet-patient-identity .section-kicker { font-size: .6rem; }
.vet-patient-identity h3 { margin: .2rem 0; font-size: 1.1rem; }
.vet-patient-identity p { margin: 0; color: var(--vg-muted); font-size: .78rem; }
.vet-patient-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.vet-patient-meta > div,
.admin-account-meta > div { display: grid; gap: .2rem; min-width: 0; }
.vet-patient-meta span,
.admin-account-meta > div > span { color: var(--vg-muted); font-size: .7rem; }
.vet-patient-meta strong,
.admin-account-meta strong { overflow-wrap: anywhere; font-size: .83rem; }
.vet-patient-actions,
.admin-account-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; }
.vet-patient-actions .mud-button-root,
.admin-account-actions .mud-button-root { min-height: 44px; }
.patient-detail-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.patient-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; }
.patient-summary-grid > div { display: grid; align-content: center; gap: .25rem; min-width: 0; padding: .85rem 1rem; }
.patient-summary-grid > div > span { color: var(--vg-muted); font-size: .7rem; }
.patient-summary-grid > div > strong { overflow-wrap: anywhere; font-size: .9rem; }
.patient-summary-grid .patient-readonly-label { display: flex; flex-direction: row; align-items: center; gap: .5rem; color: var(--vg-primary); }
.patient-summary-grid .patient-readonly-label .mud-icon-root { font-size: 1.1rem; }
.patient-summary-grid .patient-readonly-label span { color: var(--vg-primary); font-weight: 700; }
.patient-diary-entries { display: grid; gap: .75rem; margin-top: 1rem; }
.patient-diary-entry { display: grid; grid-template-columns: minmax(145px, .28fr) minmax(0, 1fr); gap: 1rem; padding: 1rem; border: 1px solid var(--vg-line); border-radius: 16px; background: var(--vg-surface); }
.patient-diary-date { display: flex; align-items: flex-start; gap: .45rem; color: var(--vg-primary); }
.patient-diary-date .mud-icon-root { font-size: 1.15rem; }
.patient-diary-date strong { font-size: .88rem; }
.patient-diary-content { min-width: 0; }
.patient-diary-vitals { color: var(--vg-muted); font-size: .78rem; line-height: 1.6; }
.patient-diary-content p { margin: .45rem 0 0; font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }
.admin-account-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.admin-account-card { display: grid; align-content: start; gap: 1rem; min-width: 0; padding: 1rem; }
.admin-account-identity > div { min-width: 0; }
.admin-account-identity h2 { margin: 0 0 .15rem; overflow-wrap: anywhere; font-size: 1rem; }
.admin-account-identity > div > span { display: block; overflow-wrap: anywhere; color: var(--vg-muted); font-size: .76rem; }
.admin-account-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 40px; padding-top: .75rem; border-top: 1px solid var(--vg-line); }
.admin-account-status { display: inline-flex; align-items: center; min-height: 28px; padding: .25rem .65rem; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.admin-account-status.is-active { background: #e9f4eb; color: #2e6b3b; }
.admin-account-status.is-inactive { background: #fbe8ea; color: #8a3b4a; }
.admin-account-actions { justify-content: flex-start; padding-top: .7rem; border-top: 1px solid var(--vg-line); }
.admin-detail-header { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; padding: .8rem; border-radius: 16px; background: #fbf5f8; }
.admin-detail-header > div { display: grid; min-width: 0; gap: .1rem; }
.admin-detail-header strong { overflow-wrap: anywhere; font-size: .95rem; }
.admin-detail-header > div > span:last-child { overflow-wrap: anywhere; color: var(--vg-muted); font-size: .75rem; }
.admin-detail-fields { display: grid; gap: .55rem; }
.chat-workspace { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.chat-sidebar,
.chat-conversation { min-width: 0; overflow: hidden; border: 1px solid var(--vg-line); border-radius: 20px; background: var(--vg-surface); box-shadow: 0 8px 24px rgba(72, 43, 66, .045); }
.chat-sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem; border-bottom: 1px solid var(--vg-line); }
.chat-sidebar-heading h2 { margin: .2rem 0 0; font-size: 1.1rem; }
.chat-conversation-count,
.chat-unread-count { display: grid; flex: 0 0 auto; min-width: 24px; height: 24px; place-items: center; padding: 0 .35rem; border-radius: 999px; background: var(--vg-primary-light); color: var(--vg-primary); font-size: .72rem; font-weight: 700; }
.chat-conversation-list { display: grid; gap: .25rem; padding: .5rem; }
.chat-conversation-list > [role="listitem"] { min-width: 0; }
.chat-conversation-item { display: flex; width: 100%; min-height: 68px; align-items: center; gap: .65rem; padding: .65rem; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--vg-ink); font: inherit; text-align: left; cursor: pointer; }
.chat-conversation-item:hover { background: #fbf5f8; }
.chat-conversation-item.selected { border-color: #e4c8dc; background: #f8edf4; }
.chat-conversation-item:focus-visible { outline: 3px solid #e7b64a; outline-offset: 2px; }
.chat-contact-avatar { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--vg-primary-light); color: var(--vg-primary); }
.chat-contact-avatar .mud-icon-root { font-size: 1.35rem; }
.chat-conversation-copy { display: grid; flex: 1; min-width: 0; gap: .15rem; }
.chat-conversation-copy strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-conversation-copy small { color: var(--vg-muted); font-size: .68rem; }
.chat-conversation-header { display: flex; align-items: center; gap: .7rem; min-height: 68px; padding: .75rem 1rem; border-bottom: 1px solid var(--vg-line); }
.chat-conversation-header > div { display: grid; min-width: 0; gap: .1rem; }
.chat-conversation-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.chat-conversation-header > div > span { color: var(--vg-muted); font-size: .7rem; }
.chat-conversation { display: flex; min-height: 460px; flex-direction: column; gap: .65rem; padding-bottom: .8rem; }
.chat-conversation > .chat-conversation-header { margin-bottom: 0; }
.chat-conversation > .mud-alert { margin: 0 .8rem; }
.chat-conversation .chat-panel { min-height: 300px; max-height: min(58vh, 600px); flex: 1; margin: 0 .8rem; border-radius: 12px; background: #fdf9fb; }
.chat-conversation .chat-composer { margin: 0 .8rem; }

@media (max-width: 900px) {
    .vet-patient-card { grid-template-columns: minmax(0, 1fr) minmax(180px, 1fr); }
    .vet-patient-actions { grid-column: 1 / -1; justify-content: flex-start; padding-top: .75rem; border-top: 1px solid var(--vg-line); }
    .admin-account-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .chat-workspace { grid-template-columns: 1fr; }
    .chat-conversation-list { grid-auto-columns: minmax(205px, 72vw); grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x mandatory; }
    .chat-conversation-list > [role="listitem"] { scroll-snap-align: start; }
    .patient-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .vet-patient-card { grid-template-columns: 1fr; }
    .vet-patient-meta { grid-template-columns: 1fr 1fr; }
    .vet-patient-actions { grid-column: auto; }
    .vet-patient-actions .mud-button-root { flex: 1; }
    .patient-diary-entry { grid-template-columns: 1fr; gap: .5rem; }
    .patient-summary-grid { gap: .5rem; }
    .patient-summary-grid > div { padding: .7rem; }
    .chat-conversation { min-height: 390px; }
    .chat-conversation .chat-panel { min-height: 220px; max-height: 52dvh; }
    .chat-conversation .chat-composer { align-items: flex-end; }
}
@media (max-width: 380px) {
    .patient-detail-actions { display: grid; width: 100%; grid-template-columns: 1fr; }
    .patient-detail-actions .mud-button-root { width: 100%; }
}

.app-shell--auth:has(.public-landing) { background: #EDD3D6; }
html:has(.public-landing),
html:has(.public-landing) body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}
.app-shell--auth:has(.public-landing),
.app-shell--auth:has(.public-landing) .app-main {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}
.public-landing {
    position: relative;
    isolation: isolate;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    overflow: hidden;
    padding: max(2rem, env(safe-area-inset-top)) 1.5rem max(8rem, calc(6rem + env(safe-area-inset-bottom)));
    background: var(--vg-brand-backdrop);
    color: #77324f;
    text-align: center;
    animation: public-landing-enter 600ms ease both;
}
.public-landing-waves {
    z-index: -1;
    height: clamp(120px, 20vh, 190px);
}
.public-landing-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.public-landing-logo {
    display: block;
    width: 116px;
    height: 90px;
    object-fit: contain;
}
.public-landing-brand h1 {
    margin: .25rem 0 .35rem;
    color: var(--vg-brand-vet);
    font-size: clamp(2.75rem, 10vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.1;
}
.public-landing-brand h1 span { color: var(--vg-brand-gest); }
.public-landing-brand p {
    margin: 0;
    color: #7b5260;
    font-size: .85rem;
}
.public-landing-pets {
    display: block;
    width: min(100%, 380px);
    height: auto;
    aspect-ratio: 1503 / 1047;
    object-fit: contain;
}
.public-landing-copy h2 {
    margin: 0 0 .75rem;
    font-size: clamp(1.35rem, 5.5vw, 1.7rem);
    font-weight: 600;
    line-height: 1.35;
}
.public-landing-copy p {
    margin: 0;
    color: #735b65;
    font-size: .9rem;
    line-height: 1.65;
}
.public-landing-actions {
    display: grid;
    width: min(100%, 340px);
    gap: .85rem;
}
.public-landing-actions .mud-button-root {
    min-height: 48px;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
}
.public-landing-actions .mud-button-filled-primary { background: var(--vg-primary); }
.public-landing-actions .mud-button-outlined-primary { border-color: #a14e68; color: #77324f; }
.public-landing-actions .mud-button-root:focus-visible { outline: 3px solid #77324f; outline-offset: 4px; }
@media (max-width: 639.98px) {
    .public-landing {
        gap: clamp(.6rem, 1.8vh, 1.1rem);
        padding-top: max(clamp(1rem, 3vh, 2rem), env(safe-area-inset-top));
        padding-bottom: max(clamp(8rem, 20vh, 11rem), calc(clamp(6rem, 16vh, 9rem) + env(safe-area-inset-bottom)));
    }
    .public-landing-pets { width: min(100%, 280px, calc(24vh * 1503 / 1047)); }
}
@media (min-width: 640px) {
    .app-shell--auth:has(.public-landing) { padding: 0; }
    .public-landing {
        gap: 1rem;
        padding: 2rem 2rem max(10rem, calc(8rem + env(safe-area-inset-bottom)));
    }
    .public-landing-waves { height: clamp(110px, 16vh, 160px); }
    .public-landing-pets { width: min(100%, 320px, calc(28vh * 1503 / 1047)); }
}
@media (max-height: 800px) {
    .public-landing {
        gap: clamp(.5rem, 1.6vh, .9rem);
        padding-top: max(1rem, env(safe-area-inset-top));
        padding-bottom: max(7rem, calc(5.5rem + env(safe-area-inset-bottom)));
    }
    .public-landing-waves { height: 104px; }
    .public-landing-logo { width: 84px; height: 64px; }
    .public-landing-brand h1 { margin: .1rem 0 .2rem; font-size: clamp(2.25rem, 5.6vh, 2.75rem); }
    .public-landing-pets { width: min(100%, 280px, calc(19vh * 1503 / 1047)); }
    .public-landing-copy h2 { margin-bottom: .45rem; font-size: clamp(1.2rem, 3vh, 1.4rem); }
    .public-landing-copy p { font-size: .85rem; line-height: 1.5; }
}
@media (max-height: 600px) {
    .public-landing { padding-bottom: max(5.75rem, calc(4.5rem + env(safe-area-inset-bottom))); }
    .public-landing-waves { height: 88px; }
    .public-landing-logo { width: 64px; height: 50px; }
    .public-landing-brand h1 { font-size: 2rem; }
    .public-landing-pets { width: min(100%, 220px, calc(17vh * 1503 / 1047)); }
    .public-landing-copy h2 { font-size: 1.15rem; line-height: 1.25; }
    .public-landing-actions .mud-button-root { min-height: 44px; }
}
@keyframes public-landing-enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .brand-splash { transition-duration: 1ms; }
    .public-landing { animation-duration: 1ms; }
}