/* =====================================================================
   PAWTELIO DESIGN SYSTEM
   1. Tokens & reset  2. Shell  3. Primitives  4. Dashboard
   5. Directories  6. Calendar  7. Operations  8. Business
   9. Messaging  10. Settings & auth  11. Responsive & print
   No web fonts, external images, CSS framework or remote dependencies.
   ===================================================================== */
:root {
  color-scheme: light;
  --bg: #f6f7f4;
  --card: #ffffff;
  --ink: #283d32;
  --text: #47594e;
  --muted: #718075;
  --faint: #94a197;
  --border: #e5eae2;
  --soft: #f2f5ef;
  --accent: #3b7155;
  --accent-hover: #2b5a40;
  --on-accent: #ffffff;
  --mint: #eaf2e2;
  --mint-ink: #3f6443;
  --cream: #f2efe3;
  --peach: #f4e4d7;
  --lavender: #eeeaf5;
  --blue: #e5eef3;
  --danger: #a74d49;
  --shadow: 0 4px 22px #23382506;
  --radius: 16px;
  --sidebar-width: 242px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15241e; --card: #1d3027; --ink: #e7eee3; --text: #c1d1c3;
  --muted: #a3b5a6; --faint: #809687; --border: #31483a; --soft: #263d2f;
  --accent: #b2d89b; --accent-hover: #c4e5af; --on-accent: #203d28;
  --mint: #30482e; --mint-ink: #c2dfa7; --cream: #354330;
  --peach: #493b2e; --lavender: #373649; --blue: #2b4046; --danger: #ed9a92;
  --shadow: 0 4px 22px #00000012;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
button { color: inherit; }
button, input, select, textarea { outline-offset: 3px; }
:focus-visible { outline: 3px solid #87af6e; outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
svg { display: block; flex-shrink: 0; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4,p { margin: 0; }
h1,h2,h3,h4,strong { color: var(--ink); }
h1 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 650; letter-spacing: -.045em; line-height: 1.22; }
h2 { font-size: 18px; font-weight: 650; letter-spacing: -.025em; line-height: 1.4; }
h3 { font-size: 16.5px; font-weight: 650; letter-spacing: -.025em; line-height: 1.45; }
h4 { font-size: 14px; font-weight: 650; }
small { font-size: 13.5px; }
input,select,textarea { width: 100%; border: 1px solid var(--border); background: var(--card); color: var(--ink); border-radius: 10px; padding: 10px 14px; font-size: 14px; min-width: 0; transition: border-color .16s, box-shadow .16s; }
input:hover,select:hover,textarea:hover { border-color: var(--faint); }
input:focus,select:focus,textarea:focus { border-color: var(--accent); }
input::placeholder,textarea::placeholder { color: var(--faint); }
input[readonly] { background: var(--soft); color: var(--muted); }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; cursor: pointer; flex-shrink: 0; border-radius: 4px; }
textarea { resize: vertical; line-height: 1.65; }
select { cursor: pointer; padding-inline-end: 30px; }
::selection { background: #b9d49e70; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
.muted { color: var(--muted); }
.normal { font-weight: 400; }
.no-wrap { white-space: nowrap; }
.full-width { width: 100%; justify-content: center; }
.spaced { margin-top: 18px; }
.dot-separator { margin: 0 8px; opacity: .5; }
.icon { vertical-align: middle; }
/* Shell */
.app-shell { min-height: 100vh; }
.sidebar { width: var(--sidebar-width); background: #233f32; color: #c6d4c8; position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40; display: flex; flex-direction: column; }
[data-theme="dark"] .sidebar { background: #11281d; }
.sidebar-brand { height: 92px; padding: 25px 25px 22px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 650; letter-spacing: -.07em; color: var(--accent); }
.brand svg { width: 38px; height: 38px; }
.brand-paw { fill: var(--card); }
.brand-period { color: #b4cf93; }
.sidebar .brand { color: #f2f5e8; }
.sidebar .brand svg { color: #cee5ad; }
.sidebar .brand-paw { fill: #294633; }
.brand-small { font-size: 23px; }
.workspace-picker { margin: 0 17px 23px; padding: 12px 10px; border: 1px solid #49664e; border-radius: 10px; display: flex; align-items: center; gap: 8px; }
.workspace-icon { background: #3b5641; width: 29px; height: 29px; border-radius: 7px; display: grid; place-items: center; color: #e2eacd; }
.workspace-picker div { min-width: 0; flex: 1; }
.workspace-picker strong { color: #ecf1e4; font-size: 14px; display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-picker small { color: #bac9bb; font-size: 13.5px; display: block; margin-top: 1px; }
.sidebar-nav { flex: 1; overflow: auto; scrollbar-width: thin; scrollbar-color: #527157 transparent; padding: 0 14px 18px; }
.nav-group + .nav-group { margin-top: 22px; }
.nav-group > p { font-size: 11.5px; letter-spacing: .14em; font-weight: 650; color: #a0b69f; margin: 0 12px 9px; }
.nav-link { display: flex; align-items: center; gap: 11px; min-height: 39px; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; margin: 2px 0; transition: .18s; }
.nav-link:hover { background: #ffffff0c; color: white; }
.nav-link > .icon { color: #a8c1a7; }
.nav-link.active { background: #d6e8b6; color: #263f27; font-weight: 650; box-shadow: 0 2px 6px #00000008; }
.nav-link.active > .icon { color: #355331; }
.nav-link > span:not(.nav-badge) { flex: 1; }
.nav-badge { background: #48643c; color: #e6f0ce; font-size: 11.5px; min-width: 20px; min-height: 19px; border-radius: 5px; display: grid; place-items: center; padding: 1px 4px; }
.nav-link.active .nav-badge { color: #34512a; background: #b9d093; }
.sidebar-bottom { flex-shrink: 0; border-top: 1px solid #ffffff13; padding: 12px 14px 0; }
.sidebar-bottom-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px 17px; }
.sidebar-bottom-row a { display: flex; gap: 11px; align-items: center; font-size: 13.5px; }
.sidebar-user { display: flex; align-items: center; gap: 9px; border-top: 1px solid #ffffff17; margin: 0 -14px; padding: 18px 22px; }
.sidebar-user strong { color: #eaf0e3; display: block; font-size: 14px; font-weight: 600; }
.sidebar-user small { color: #b0c2ac; font-size: 13.5px; }
.sidebar-user > a { margin-inline-start: auto; }
.sidebar-user .avatar { width: 33px; height: 33px; font-size: 14px; background: #d9dfc2; color: #40553b; }
.main-shell { margin-inline-start: var(--sidebar-width); min-width: 0; }
.topbar { height: 76px; padding: 0 32px; background: var(--card); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.breadcrumb { display: flex; align-items: center; gap: 11px; font-size: 14px; white-space: nowrap; }
.breadcrumb strong { font-weight: 550; }
.breadcrumb-root { color: var(--muted); }
.breadcrumb > .icon { color: var(--faint); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-divider { height: 26px; width: 1px; background: var(--border); margin: 0 8px; }
.global-search { border: 0; background: none; padding: 5px; color: var(--muted); display: flex; align-items: center; gap: 10px; font-size: 14px; }
.global-search kbd { border: 1px solid var(--border); border-radius: 5px; font: inherit; font-size: 11.5px; padding: 2px 5px; margin-inline-start: 22px; }
.profile-trigger { background: none; border: 0; display: flex; align-items: center; gap: 8px; padding: 0 0 0 5px; }
.notification-trigger { position: relative; }
.notification-trigger > i { position: absolute; inset-block-start: 5px; inset-inline-end: 7px; width: 5px; height: 5px; background: #cf9c6c; border-radius: 50%; box-shadow: 0 0 0 2px var(--card); }
.main-content { padding: 30px 32px 24px; max-width: 1730px; margin: 0 auto; min-height: calc(100vh - 144px); outline: 0; }
.app-footer { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--muted); gap: 14px; padding: 16px 32px 22px; max-width: 1730px; margin: 0 auto; }
.app-footer strong { font-weight: 600; }
.app-footer > div { display: flex; gap: 14px; align-items: center; }
.app-footer a:hover { color: var(--accent); }
.demo-dot { width: 5px; height: 5px; background: #80a56b; border-radius: 50%; margin-inline-end: -9px; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 10000; background: var(--card); color: var(--ink); padding: 12px 20px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.mobile-menu,.mobile-close { display: none !important; }
/* Primitives */
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin-bottom: 25px; }
.page-description { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.eyebrow { color: var(--muted); font-size: 11.5px; letter-spacing: .13em; font-weight: 650; text-transform: uppercase; }
.page-head .eyebrow { margin-bottom: 8px; }
.page-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.page-actions > select { width: auto; min-width: 138px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 16px; border: 1px solid transparent; border-radius: 9px; font-size: 14px; font-weight: 550; line-height: 1.4; white-space: nowrap; transition: background .15s, transform .15s, border-color .15s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary { background: var(--card); border-color: var(--border); color: var(--ink); }
.btn-secondary:hover:not(:disabled) { background: var(--soft); border-color: var(--faint); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--mint); }
.btn-danger { background: #ad5850; color: #fff; border-color: #ad5850; }
.btn-sm { min-height: 32px; padding: 7px 11px; font-size: 13.5px; border-radius: 7px; }
.icon-btn { width: 33px; height: 33px; border: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: transparent; color: var(--muted); flex-shrink: 0; transition: .15s; }
.icon-btn:hover:not(:disabled) { background: var(--soft); color: var(--ink); }
.icon-btn.active { background: var(--card); color: var(--accent); box-shadow: 0 1px 4px #00000010; }
.text-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); border: 0; background: none; font-size: 13.5px; font-weight: 550; padding: 3px 0; white-space: nowrap; }
.text-btn:hover,.text-link:hover { text-decoration: underline; }
.text-link { color: var(--accent); font-weight: 550; border: 0; padding: 0; background: none; cursor: pointer; }
.date-chip { display: inline-flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font-size: 13.5px; white-space: nowrap; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.card-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 22px 23px 13px; }
.card-head h2 { font-size: 15px; }
.card-head p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.card-head > div { min-width: 0; }
.card-head .small-select { width: auto; font-size: 13.5px; padding: 7px 27px 7px 10px; flex-shrink: 0; }
.padded-card { padding: 22px 24px; }
.padded-card .card-head { padding: 0 0 18px; }
.padded-card > .muted { margin-bottom: 18px; }
.badge { border-radius: 6px; font-size: 11.5px; font-weight: 600; line-height: 1.4; font-weight: 550; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 5px 8px; }
.badge > i { width: 4px; height: 4px; background: currentColor; border-radius: 50%; }
.badge-green { background: #eaf3e5; color: #3c673e; }
.badge-amber { background: #faf0dc; color: #8b612d; }
.badge-purple { background: #f0eaf8; color: #7a5d9a; }
.badge-red { background: #fae9e5; color: #a04d43; }
.badge-neutral { background: #f0f2ef; color: #6b776c; }
[data-theme="dark"] .badge-green { background: #314e33; color: #c0dba2; }
[data-theme="dark"] .badge-amber { background: #4e4230; color: #e9ca8b; }
[data-theme="dark"] .badge-purple { background: #423752; color: #d4b9ee; }
[data-theme="dark"] .badge-red { background: #50332e; color: #f0b2a8; }
[data-theme="dark"] .badge-neutral { background: #354439; color: #c3d0c3; }
.avatar { width: 37px; height: 37px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600; flex-shrink: 0; letter-spacing: -.02em; border: 2px solid var(--card); }
.avatar-0 { background: #dbe8d0; color: #4e6d40; }
.avatar-1 { background: #eddac9; color: #855f43; }
.avatar-2 { background: #e4dcf0; color: #74598b; }
.avatar-3 { background: #d9e8ef; color: #4c7281; }
.avatar-4 { background: #f0dfb8; color: #8c713c; }
.avatar-5 { background: #e5dbd3; color: #79624f; }
.avatar-xs { width: 25px; height: 25px; font-size: 14px; }
.avatar-sm { width: 31px; height: 31px; font-size: 13.5px; }
.avatar-lg { width: 70px; height: 70px; font-size: 22px; }
.avatar-xl { width: 86px; height: 86px; font-size: 25px; }
.pet-art { display: block; width: 100%; height: 100%; }
.pet-avatar { width: 39px; height: 39px; border-radius: 11px; overflow: hidden; flex-shrink: 0; display: inline-flex; }
.pet-avatar-sm { width: 29px; height: 29px; border-radius: 8px; }
.entity { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.entity > span:not(.avatar):not(.pet-avatar):not(.product-icon) { display: flex; flex-direction: column; gap: 2px; }
.entity strong { font-size: 14px; font-weight: 600; }
.entity small { color: var(--muted); font-size: 11.5px; }
.entity:hover strong { color: var(--accent); }
.search-input { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 0 12px; width: 275px; height: 37px; color: var(--muted); }
.search-input input { padding: 9px 0; border: 0; box-shadow: none; font-size: 14px; background: transparent; }
.search-input input:focus { outline: none; }
.search-input:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-input button { background: none; border: none; padding: 0; color: var(--muted); }
.tabs { display: flex; gap: 3px; align-items: center; padding: 4px; background: var(--soft); border: 1px solid var(--border); border-radius: 9px; width: fit-content; flex-shrink: 0; }
.tabs > button { display: flex; align-items: center; gap: 6px; padding: 7px 13px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 14px; line-height: 1.5; white-space: nowrap; }
.tabs > button.active { background: var(--card); box-shadow: 0 1px 4px #263b2220; color: var(--ink); font-weight: 550; }
.tabs > button > span { background: var(--border); padding: 0 5px; border-radius: 4px; font-size: 11.5px; margin-inline-start: 2px; }
.tabs > button.active > span { background: var(--mint); color: var(--mint-ink); }
.notice { border: 1px solid var(--border); background: var(--soft); border-radius: 10px; display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; color: var(--muted); font-size: 14px; line-height: 1.7; margin-top: 22px; }
.notice > svg { margin-top: 1px; color: var(--accent); }
.notice.warning { background: var(--cream); }
.empty-state { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; }
.empty-state h3 { font-size: 16px; margin: 15px 0 5px; }
.empty-state p { font-size: 13.5px; color: var(--muted); max-width: 340px; }
.empty-state .btn { margin-top: 20px; }
.empty-icon { width: 65px; height: 65px; border-radius: 24px; background: var(--mint); color: var(--mint-ink); display: grid; place-items: center; transform: rotate(-6deg); }
.empty-icon svg { transform: rotate(6deg); }
.soft-icon { width: 39px; height: 39px; background: var(--mint); color: var(--mint-ink); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.soft-icon.amber { background: var(--cream); color: #9a7950; }
.soft-icon.purple { background: var(--lavender); color: #9981aa; }
.soft-icon.blue { background: var(--blue); color: #7193a2; }
.section-title { display: flex; justify-content: space-between; align-items: center; margin: 26px 0 16px; }
.section-title h2 { font-size: 18px; }
/* Tables */
.data-table { overflow: hidden; }
.table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 21px; }
.toolbar-actions { display: flex; align-items: center; gap: 9px; }
.toolbar-actions > select { width: auto; min-width: 125px; font-size: 13.5px; padding: 8px 28px 8px 10px; }
.table-scroll { position: relative; overflow-x: auto; scrollbar-width: thin; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: start; background: var(--soft); font-size: 13.5px; font-weight: 500; color: var(--muted); padding: 13px 18px; white-space: nowrap; border-block: 1px solid var(--border); }
td { padding: 15px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child > td { border-bottom: 0; }
tbody > tr:hover { background: color-mix(in srgb, var(--soft) 45%, transparent); }
tr.selected { background: var(--mint); }
.check-col { width: 40px; padding-inline-start: 21px; padding-inline-end: 0; }
.check-col input { width: 14px; height: 14px; vertical-align: middle; }
.sort-btn { border: 0; background: none; padding: 0; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 500; font-size: 13.5px; }
.sort-btn > svg { opacity: .4; }
.sort-btn:hover > svg { opacity: 1; }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 21px; font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--border); }
.pagination { display: flex; align-items: center; gap: 4px; }
.pagination > button:not(.icon-btn) { background: transparent; border: 1px solid transparent; width: 28px; height: 28px; border-radius: 7px; font-size: 13.5px; }
.pagination > button.active { background: var(--mint); border-color: var(--border); color: var(--accent); }
.pagination .icon-btn { width: 27px; height: 27px; }
.pagination .icon-btn > svg { width: 14px; }
.stacked-cell { display: flex; flex-direction: column; gap: 3px; }
.stacked-cell > small { color: var(--muted); font-size: 13.5px; }
.row-actions,.staff-cell { display: flex; align-items: center; gap: 7px; }
.row-actions .icon-btn { width: 29px; }
/* Dialogs, forms & overlays */
.modal { width: min(550px, calc(100vw - 28px)); max-height: calc(100dvh - 44px); border: 1px solid var(--border); border-radius: 19px; background: var(--card); color: var(--text); padding: 0; box-shadow: 0 30px 120px #0f261c40; overflow: auto; }
.modal-wide { width: min(760px, calc(100vw - 28px)); }
.modal::backdrop { background: #13271f72; backdrop-filter: blur(4px); }
.modal[open] { animation: modal-in .18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 24px 25px 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 20px; }
.modal-head p { color: var(--muted); font-size: 14px; margin-top: 5px; }
.modal-head .icon-btn { margin-top: -3px; margin-inline-end: -7px; }
.form-body { padding: 24px 25px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > span:first-child { font-size: 14px; font-weight: 550; color: var(--ink); }
/* Label beside an inline action, e.g. "Password" + "Forgot password?". */
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field-label-row > label, .field-label-row > span { font-size: 14px; font-weight: 550; color: var(--ink); }
.field b { color: var(--accent); font-weight: 500; }
.field small { color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.field-full { grid-column: 1 / -1; }
.field input,.field select,.field textarea { font-size: 13.5px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 25px; border-top: 1px solid var(--border); background: var(--soft); }
.form-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); padding: 11px 13px; border-radius: 8px; margin-top: 18px; font-size: 14px; }
.detail-top { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 23px; }
.detail-top .pet-avatar { width: 52px; height: 52px; }
.detail-top .entity strong { font-size: 17px; }
.detail-top .entity small { font-size: 14px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 23px 18px; margin: 22px 0; }
.detail-grid > div { display: flex; flex-direction: column; gap: 5px; }
.detail-grid small { color: var(--muted); font-size: 13.5px; }
.detail-grid strong { font-size: 13.5px; font-weight: 550; }
.soft-note { background: var(--soft); border-radius: 11px; padding: 17px; margin: 20px 0; }
.soft-note p { color: var(--muted); font-size: 13.5px; margin-top: 6px; line-height: 1.8; }
.toast-stack { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 10000; max-width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 8px 30px #0e21192a; border-radius: 12px; padding: 14px 16px; color: var(--ink); font-size: 13.5px; animation: modal-in .2s ease; }
.toast-dot { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--mint); color: var(--accent); flex-shrink: 0; }
.toast.error .toast-dot { background: #f5dad5; color: #9e4b45; }
.toast > button { border: 0; background: none; color: var(--muted); font-size: 20px; margin-inline-start: 12px; }
.popover-anchor { position: relative; }
.popover { position: absolute; inset-block-start: calc(100% + 16px); inset-inline-end: 0; z-index: 70; background: var(--card); border: 1px solid var(--border); border-radius: 15px; box-shadow: 0 16px 60px #10201925; overflow: hidden; }
.popover-dismiss { position: fixed; inset: 0; border: 0; background: transparent; cursor: default; z-index: 60; }
.notifications { width: 370px; }
.popover-head { padding: 19px 18px 13px; display: flex; justify-content: space-between; align-items: center; }
.popover-head h3 { font-size: 14px; }
.popover-head h3 > span { font-size: 13.5px; background: var(--soft); padding: 2px 6px; border-radius: 4px; margin-inline-start: 4px; }
.notification-row { display: flex; text-align: start; border: 0; border-top: 1px solid var(--border); background: var(--card); padding: 16px 18px; gap: 11px; width: 100%; align-items: flex-start; }
.notification-row.unread { background: var(--soft); }
.notification-row strong { display: block; font-size: 14px; font-weight: 550; }
.notification-row small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 3px; line-height: 1.65; }
.notification-row > i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.notification-row .soft-icon { width: 31px; height: 31px; border-radius: 9px; }
.notification-row .soft-icon svg { width: 16px; }
.popover-note { padding: 12px; text-align: center; color: var(--muted); font-size: 13.5px; }
.account-menu { width: 225px; padding: 8px; }
.account-menu > p { padding: 12px; border-bottom: 1px solid var(--border); margin-bottom: 7px; }
.account-menu strong,.account-menu small { display: block; }
.account-menu small { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.account-menu > a { display: flex; gap: 11px; align-items: center; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.account-menu > a:hover { background: var(--soft); }
.search-modal { width: min(585px, calc(100vw - 28px)); }
.search-modal .search-input { width: 100%; height: 43px; }
.command-results { max-height: 410px; overflow: auto; padding-top: 19px; }
.command-results > .eyebrow { margin: 0 5px 9px; }
.command-results > .eyebrow:not(:first-child) { margin-top: 15px; }
.command-results > button { background: none; border: 0; padding: 11px 10px; border-radius: 8px; display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; }
.command-results > button:hover { background: var(--soft); }
.command-results > button > span:not(.pet-avatar):not(.avatar) { flex: 1; }
.command-results > button > span small { display: block; color: var(--muted); }
/* Dashboards */
.dashboard-switch { display: flex; align-items: center; gap: 22px; margin-bottom: 21px; border-bottom: 1px solid var(--border); }
.dashboard-switch > a { padding: 0 0 12px; display: flex; gap: 7px; align-items: center; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dashboard-switch > a.active { color: var(--accent); font-weight: 600; border-color: var(--accent); }
.welcome-banner { display: flex; justify-content: space-between; align-items: center; padding: 30px 36px; height: 237px; border-radius: 17px; background: #f0efdf; position: relative; overflow: hidden; border: 1px solid #e8e7d3; margin-bottom: 23px; }
.welcome-copy { position: relative; z-index: 2; }
.hero-eyebrow { font-size: 14px; letter-spacing: .1em; font-weight: 650; color: #73845c; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.hero-eyebrow i { width: 4px; height: 4px; border-radius: 50%; background: #8a9e65; }
.welcome-copy h2 { font-size: 36px; font-weight: 550; line-height: 1.08; letter-spacing: -.05em; color: #354a32; }
.welcome-copy p { font-size: 14px; color: #758064; line-height: 1.7; margin-top: 12px; }
.welcome-copy p strong { font-weight: 600; color: #4d6240; }
.hero-link { display: inline-flex; align-items: center; gap: 12px; color: #49663d; font-size: 13.5px; font-weight: 650; margin-top: 14px; }
.hero-link:hover { gap: 17px; }
.hero-art { width: 440px; height: 236px; position: relative; flex-shrink: 0; margin-inline-end: 5px; }
.hero-doodles { width: 100%; height: 100%; position: absolute; inset: 0; }
.hero-pet { position: absolute; overflow: hidden; box-shadow: 0 15px 30px #3c4d2710; }
.hero-pet .pet-art { width: 100%; height: 100%; }
.hero-dog { width: 178px; height: 183px; inset-inline-start: 173px; top: 26px; border-radius: 85px 85px 38px 38px; transform: rotate(7deg); border: 8px solid #faf7e9; z-index: 2; }
.hero-cat { width: 145px; height: 156px; inset-inline-start: 58px; top: 65px; border-radius: 78px 78px 32px 32px; transform: rotate(-10deg); border: 7px solid #faf7e9; z-index: 1; }
.hero-art-badge { position: absolute; bottom: 8px; inset-inline-start: 117px; background: #fffffc; color: #667957; padding: 7px 13px; border-radius: 7px; font-size: 11.5px; font-weight: 550; transform: rotate(-4deg); z-index: 3; box-shadow: 0 5px 12px #454f2320; display: flex; gap: 8px; align-items: center; }
.hero-art-badge > span { color: #ca9c63; font-size: 17px; }
[data-theme="dark"] .welcome-banner { background: #38462e; border-color: #45533b; }
[data-theme="dark"] .welcome-copy h2 { color: #e8edcf; }
[data-theme="dark"] .welcome-copy p,[data-theme="dark"] .welcome-copy strong,[data-theme="dark"] .hero-eyebrow,[data-theme="dark"] .hero-link { color: #bccc9d; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 17px; margin-bottom: 23px; }
.metrics-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.metric-card { padding: 18px 20px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 13px; min-width: 0; box-shadow: var(--shadow); }
.metric-card.metric-featured { background: var(--mint); border-color: color-mix(in srgb, var(--mint) 80%, #84975f); }
.metric-top { display: flex; justify-content: space-between; align-items: center; gap: 5px; font-size: 13.5px; color: var(--text); }
.metric-icon { color: #739067; background: #f3f7ef; border-radius: 8px; width: 30px; height: 30px; display: grid; place-items: center; }
.metric-featured .metric-icon { background: #dce9cb; color: #5a7b46; }
.metric-icon.amber { color: #b99161; background: var(--cream); }
.metric-icon.purple { color: #9b80b0; background: var(--lavender); }
.metric-icon.blue { color: #7598a8; background: var(--blue); }
.metric-value { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 9px; }
.metric-value > strong { font-size: clamp(24px, 2.1vw, 31px); line-height: 1.25; letter-spacing: -.06em; font-weight: 600; }
.metric-card > p { margin-top: 12px; color: var(--muted); font-size: 11.5px; display: flex; align-items: center; gap: 5px; }
.metric-indicator { color: #6d8d58; }
.metric-indicator.amber { color: #ba955e; }
.metric-indicator.purple { color: #9c83b0; }
.metric-indicator.blue { color: #799caa; }
.sparkline { width: 68px; height: 30px; color: #86a66f; flex-shrink: 1; opacity: .85; }
.sparkline-amber { color: #c2a575; }
.sparkline-purple { color: #b19bca; }
.sparkline-blue { color: #93b5bd; }
.dashboard-main-grid { display: grid; grid-template-columns: minmax(0,1.82fr) minmax(280px,1fr); gap: 22px; margin-bottom: 23px; }
.revenue-card { min-height: 339px; }
.revenue-summary { padding: 0 23px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 5px 0 6px; }
.revenue-summary h3 { font-size: 28px; line-height: 1.4; letter-spacing: -.05em; font-weight: 600; }
.chart-inline-legend { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--muted); }
.chart-inline-legend > i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.chart-inline-legend > i.previous { background: #c4cdbb; margin-inline-start: 9px; }
.revenue-chart { width: 100%; padding: 0 16px 13px; }
.revenue-chart > svg { width: 100%; height: auto; }
.chart-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-label { fill: var(--muted); font-size: 13.5px; font-family: inherit; }
.chart-previous { stroke: #bac5ab; }
.agenda-list { padding: 0 21px 5px; }
.agenda-item { border: 0; border-bottom: 1px solid var(--border); width: 100%; background: transparent; text-align: start; padding: 16px 0; display: flex; align-items: center; gap: 10px; }
.agenda-item:last-child { border-bottom: 0; }
.agenda-item:hover .agenda-name strong { color: var(--accent); }
.agenda-time { min-width: 36px; font-size: 13.5px; text-align: center; color: var(--muted); margin-inline-end: 2px; }
.agenda-time > span { display: block; color: var(--ink); font-weight: 600; font-size: 14px; }
.agenda-time small { font-size: 14px; }
.agenda-time.current > span { color: var(--accent); }
.agenda-name { min-width: 0; flex: 1; }
.agenda-name strong { font-size: 14px; font-weight: 600; display: block; }
.agenda-name small { color: var(--muted); font-size: 11.5px; display: block; margin-top: 3px; }
.agenda-dot { width: 5px; height: 5px; background: #b5c999; border-radius: 50%; }
.agenda-dot.purple { background: #b398c8; }
.card-bottom-link { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--accent); border-top: 1px solid var(--border); padding: 14px; font-size: 13.5px; }
.card-bottom-link:hover { background: var(--soft); border-radius: 0 0 var(--radius) var(--radius); }
.dashboard-secondary-grid { display: grid; grid-template-columns: minmax(0,2.12fr) minmax(245px,1fr); gap: 22px; margin-bottom: 23px; }
.visitors-card { overflow: hidden; }
.dashboard-table th { font-size: 11.5px; padding: 10px 16px; background: transparent; }
.dashboard-table td { padding: 13px 16px; font-size: 13.5px; }
.dashboard-table .entity strong { font-size: 13.5px; }
.dashboard-table .entity small { font-size: 14px; }
.dashboard-table .badge { font-size: 14px; padding: 4px 6px; }
.dashboard-table .pet-avatar { width: 33px; height: 33px; border-radius: 9px; }
.dashboard-table .icon-btn { width: 23px; height: 25px; }
.dashboard-table .icon-btn > svg { width: 14px; }
.donut-wrap { width: 178px; margin: 1px auto 0; }
.donut-wrap svg { width: 100%; }
.donut-total { font-family: inherit; font-size: 26px; font-weight: 600; fill: var(--ink); letter-spacing: -.04em; }
.segment-0 { stroke: #799c67; }.segment-1 { stroke: #b6c997; }.segment-2 { stroke: #d9be95; }.segment-3 { stroke: #bab0d3; }.segment-4 { stroke: #83a9b6; }
.legend-0,.bar-0 { background: #799c67; }.legend-1,.bar-1 { background: #b6c997; }.legend-2,.bar-2 { background: #d9be95; }.legend-3,.bar-3 { background: #bab0d3; }.legend-4,.bar-4 { background: #83a9b6; }
.chart-legend { padding: 5px 25px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.chart-legend > div { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
.chart-legend i { width: 7px; height: 7px; border-radius: 2px; }
.chart-legend span { color: var(--muted); }
.chart-legend strong { margin-inline-start: auto; font-size: 13.5px; font-weight: 550; }
.service-donut .card-head { padding-bottom: 3px; }
.service-donut .donut-wrap { width: 175px; margin: 10px auto 8px; }
.dashboard-bottom-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(310px,1fr); gap: 22px; }
.mini-tasks { padding: 0 23px 12px; }
.mini-tasks > label { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.mini-tasks > label:last-child { border-bottom: 0; }
.mini-tasks > label > span:not(.badge) { flex: 1; }
.mini-tasks strong { display: block; font-size: 14px; font-weight: 550; }
.mini-tasks small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.mini-tasks .is-done strong { text-decoration: line-through; color: var(--muted); }
.adoption-spotlight { background: #ece8f0; border: 1px solid #e1dbe8; border-radius: var(--radius); padding: 27px 26px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; position: relative; }
.adoption-spotlight > div:first-child { z-index: 2; }
.adoption-spotlight .eyebrow { color: #8b7c95; font-size: 14px; }
.adoption-spotlight h2 { color: #56465b; font-size: 25px; font-weight: 550; line-height: 1.18; margin: 11px 0; letter-spacing: -.05em; }
.adoption-spotlight p { color: #8e8094; font-size: 13.5px; line-height: 1.8; }
.adoption-spotlight a { color: #675474; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; margin-top: 17px; }
.spotlight-art { width: 133px; height: 151px; position: absolute; inset-inline-end: -15px; top: 73px; border-radius: 80px 80px 0 0; overflow: hidden; border: 7px solid #f6f2f8; transform: rotate(9deg); }
.horizontal-bars { display: flex; flex-direction: column; gap: 21px; padding: 12px 24px 26px; }
.horizontal-bars > div > div { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 9px; }
.horizontal-bars strong { font-weight: 550; }
.bar-track { display: block; height: 8px; background: var(--soft); border-radius: 5px; overflow: hidden; }
.bar-track > i { height: 100%; display: block; border-radius: 5px; min-width: 0; }
.grooming-banner,.shelter-banner { border-radius: 17px; padding: 33px 40px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
.grooming-banner { background: var(--peach); }
.grooming-banner h2,.shelter-banner h2 { font-size: 37px; line-height: 1.14; font-weight: 550; letter-spacing: -.055em; margin: 12px 0; }
.grooming-banner p,.shelter-banner p { color: var(--muted); font-size: 13.5px; }
.grooming-banner .btn { margin-top: 20px; }
.grooming-art { position: relative; width: 215px; height: 225px; margin-inline-end: 45px; }
.grooming-art > .pet-art { border-radius: 100px 100px 30px 30px; border: 10px solid #fbf4e9; transform: rotate(7deg); }
.floating-scissors { position: absolute; top: 18px; inset-inline-start: -23px; width: 65px; height: 65px; border-radius: 21px; background: #fbf6ec; color: #a68960; transform: rotate(-15deg); display: grid; place-items: center; box-shadow: 0 10px 30px #75553d12; }
.studio-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-bottom: 24px; }
.studio-lane { background: var(--soft); }
.studio-lane .card-head { padding: 18px 18px 12px; }
.studio-lane .card-head h2 { font-size: 14px; }
.studio-list { padding: 0 13px 13px; display: flex; flex-direction: column; gap: 12px; }
.studio-pet { text-align: start; border: 1px solid var(--border); border-radius: 10px; padding: 15px; background: var(--card); }
.studio-pet > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; margin: 13px 0; color: var(--muted); }
.studio-pet > div strong { font-size: 11.5px; font-weight: 500; }
.lane-empty { text-align: center; color: var(--muted); padding: 38px 10px; }
.lane-empty svg { margin: 0 auto 14px; color: var(--faint); }
.lane-empty p { font-size: 14px; }
.team-mini { padding: 6px 22px 16px; }
.team-mini > div { display: flex; gap: 11px; align-items: center; padding: 13px 0; }
.team-mini > div > span:not(.avatar):not(.badge) { flex: 1; }
.team-mini strong,.team-mini small { display: block; }
.team-mini strong { font-size: 13.5px; font-weight: 550; }
.team-mini small { color: var(--muted); font-size: 13.5px; }
.shelter-banner { background: var(--mint); min-height: 260px; }
.shelter-art { position: relative; width: 375px; height: 205px; }
.shelter-art > .pet-art { position: absolute; width: 135px; height: 160px; border: 6px solid #f7f7ec; border-radius: 85px 85px 25px 25px; bottom: 2px; }
.shelter-art > .pet-art:first-child { inset-inline-start: 0; transform: rotate(-13deg); }
.shelter-art > .pet-art:nth-child(2) { inset-inline-start: 110px; bottom: 20px; }
.shelter-art > .pet-art:nth-child(3) { inset-inline-start: 221px; transform: rotate(12deg); }
.shelter-pets { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 19px; margin-bottom: 24px; }
.shelter-pet-card { overflow: hidden; transition: transform .2s; }
.shelter-pet-card:hover { transform: translateY(-4px); }
.shelter-pet-photo { height: 190px; position: relative; }
.shelter-pet-photo > .pet-art { object-fit: cover; }
.shelter-pet-photo > span { position: absolute; top: 13px; inset-inline-end: 13px; width: 30px; height: 30px; border-radius: 50%; background: #fffdf7d9; color: #877c6b; display: grid; place-items: center; }
.shelter-pet-card > div:last-child { padding: 17px 19px; }
.shelter-pet-card h3 { font-size: 18px; margin-bottom: 4px; }
.shelter-pet-card p { color: var(--muted); font-size: 13.5px; }
.shelter-pet-card p > span { margin: 0 5px; }
.community-note { text-align: center; padding: 15px 25px 26px; }
.community-note > svg { margin: 5px auto 17px; color: var(--accent); }
.large-soft-icon { display: grid; place-items: center; background: var(--mint); color: var(--mint-ink); border-radius: 24px; width: 75px; height: 75px; margin: 0 auto 15px; }
.community-note h3 { font-size: 20px; line-height: 1.35; }
.community-note p { font-size: 14px; line-height: 1.85; color: var(--muted); margin: 12px 0 18px; }
/* Pet & parent directories */
.directory-summary { border: 1px solid var(--border); border-radius: 14px; background: var(--card); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 22px 0; margin-bottom: 25px; }
.directory-summary > div { display: flex; align-items: center; gap: 13px; padding: 0 24px; border-inline-end: 1px solid var(--border); }
.directory-summary > div:last-child { border: 0; }
.directory-summary strong { display: block; font-size: 23px; line-height: 1.3; font-weight: 600; letter-spacing: -.04em; }
.directory-summary small { color: var(--muted); font-size: 13.5px; }
.directory-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.directory-toolbar > .muted { font-size: 14px; }
.view-toggle { background: var(--soft); border: 1px solid var(--border); padding: 3px; border-radius: 9px; display: flex; }
.view-toggle .icon-btn { width: 29px; height: 28px; border-radius: 6px; }
.view-toggle .icon-btn > svg { width: 16px; }
.directory-search-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 21px; }
.directory-search-row > .muted { font-size: 13.5px; }
.pet-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 23px; }
.pet-card { overflow: hidden; transition: border-color .18s, transform .18s; }
.pet-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); transform: translateY(-2px); }
.pet-card-art { height: 215px; position: relative; overflow: hidden; }
.pet-card-art > a { display: block; width: 100%; height: 100%; }
.pet-card-art .pet-art { transition: transform .4s; }
.pet-card:hover .pet-card-art .pet-art { transform: scale(1.035); }
.pet-card-art > .badge { position: absolute; top: 14px; inset-inline-start: 14px; background: #fffef2e6; color: #56624a; backdrop-filter: blur(4px); }
.pet-card-art > .icon-btn { position: absolute; top: 11px; inset-inline-end: 12px; width: 30px; height: 30px; background: #fffef2d9; color: #617054; border-radius: 50%; }
.pet-card-art > .icon-btn svg { width: 15px; }
.pet-card-body { padding: 19px 21px 0; }
.pet-card-title { display: flex; align-items: center; justify-content: space-between; }
.pet-card-title h3 { font-size: 21px; letter-spacing: -.035em; }
.pet-species { color: var(--muted); background: var(--soft); border-radius: 5px; padding: 3px 8px; font-size: 11.5px; }
.pet-card-body > p { color: var(--muted); font-size: 13.5px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet-card-body > p > span { margin: 0 6px; color: var(--faint); }
.pet-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.pet-tags > span { background: var(--soft); border: 1px solid var(--border); color: var(--muted); font-size: 11.5px; padding: 3px 8px; border-radius: 5px; }
.pet-card-owner { margin-top: 18px; padding: 13px 0; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.pet-card-owner > a { margin-inline-start: auto; color: var(--accent); }
.shelter-tiny-icon { display: grid; place-items: center; color: #89996c; background: var(--mint); width: 23px; height: 23px; border-radius: 50%; }
.grid-pagination { display: flex; gap: 9px; justify-content: flex-end; align-items: center; margin-top: 22px; }
.grid-pagination > span { font-size: 13.5px; color: var(--muted); margin-inline-end: 5px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 20px; }
.back-link:hover { color: var(--accent); }
.profile-banner { display: flex; align-items: center; padding: 24px; gap: 25px; margin-bottom: 24px; }
.profile-pet-art { width: 140px; height: 140px; border-radius: 23px; overflow: hidden; flex-shrink: 0; }
.profile-intro { flex: 1; }
.profile-intro > div:first-child { display: flex; align-items: center; gap: 15px; }
.profile-intro h1 { font-size: 37px; }
.profile-intro > p { color: var(--muted); font-size: 13.5px; margin: 6px 0; }
.profile-intro > p > span { margin: 0 9px; color: var(--faint); }
.profile-intro > small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 15px; }
.profile-actions { display: flex; flex-direction: column; gap: 9px; }
.profile-tabs { margin-bottom: 23px; }
.profile-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(275px,1fr); gap: 22px; }
.profile-grid > div > .card { margin-bottom: 22px; }
.body-copy { font-size: 14px; color: var(--muted); line-height: 1.9; }
.visit-timeline { padding: 0 22px 10px; }
.visit-timeline > button { width: 100%; display: flex; align-items: center; gap: 13px; border: none; border-bottom: 1px solid var(--border); background: none; text-align: start; padding: 17px 0; }
.visit-timeline > button:last-child { border-bottom: 0; }
.timeline-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 12px; background: var(--soft); color: var(--accent); }
.visit-timeline > button > span:nth-child(2) { flex: 1; }
.visit-timeline strong { display: block; font-size: 14px; font-weight: 550; }
.visit-timeline small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.owner-card { text-align: center; padding-bottom: 23px; }
.owner-card .card-head { text-align: start; padding-bottom: 20px; }
.owner-card > .avatar { margin: 5px 0 10px; }
.owner-card > h3 { font-size: 19px; }
.owner-card > p { color: var(--muted); font-size: 14px; margin: 4px 0 9px; }
.owner-card > .badge { margin-top: 8px; }
.owner-contact { display: flex; flex-direction: column; text-align: start; gap: 13px; border-block: 1px solid var(--border); margin: 23px; padding: 21px 0; }
.owner-contact > span { display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.owner-contact > span > svg { color: var(--faint); }
.owner-total { margin: 20px 22px 0; display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--border); padding-top: 20px; }
.owner-total small { color: var(--muted); }
.owner-total strong { font-size: 27px; letter-spacing: -.05em; }
.owner-card > .soft-note { margin: 15px 22px; text-align: start; }
.mini-pet-stack { display: flex; align-items: center; gap: 4px; }
.client-profile-grid { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.client-profile-grid .section-title { margin-top: 0; }
.client-pets-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 19px; }
.client-pets-grid .pet-card-art { height: 195px; }
/* Appointments & calendar */
.schedule-overview { display: flex; gap: 27px; align-items: center; padding: 17px 22px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.schedule-overview > span { display: flex; gap: 7px; align-items: center; font-size: 14px; color: var(--muted); }
.schedule-overview i { width: 7px; height: 7px; border-radius: 50%; margin-inline-end: 3px; }
.schedule-overview .demo-date { margin-inline-start: auto; font-size: 13.5px; }
.calendar-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 19px; }
.calendar-nav { display: flex; align-items: center; gap: 6px; }
.calendar-nav .btn { margin-inline-end: 4px; }
.calendar-nav h2 { font-size: 18px; margin-inline-start: 8px; white-space: nowrap; }
.calendar-toolbar .tabs > button { padding: 6px 10px; font-size: 13.5px; }
.calendar-month { overflow: hidden; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); text-align: center; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 13.5px; padding: 13px 0; background: var(--soft); }
.month-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.month-cell { min-height: 143px; padding: 9px 8px; border-inline-end: 1px solid var(--border); border-bottom: 1px solid var(--border); min-width: 0; }
.month-cell:nth-child(7n) { border-inline-end: 0; }
.month-cell:nth-last-child(-n+7) { border-bottom: 0; }
.month-cell.outside { background: color-mix(in srgb, var(--soft) 55%, var(--card)); opacity: .55; }
.month-cell.today { background: color-mix(in srgb, var(--mint) 30%, var(--card)); }
.month-cell-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.month-cell-top > button { background: none; border: 0; font-size: 14px; min-width: 25px; min-height: 25px; padding: 2px; display: grid; place-items: center; border-radius: 50%; }
.month-cell.today .month-cell-top > button:first-child { background: var(--accent); color: var(--on-accent); }
.day-add { color: var(--faint); opacity: 0; }
.month-cell:hover .day-add,.day-add:focus-visible { opacity: 1; }
.month-event { width: 100%; border: 0; border-inline-start: 2px solid currentColor; border-radius: 4px; font-size: 11.5px; text-align: start; display: flex; gap: 5px; align-items: center; padding: 4px 5px; margin-bottom: 4px; }
.month-event strong { color: inherit; font-size: 11.5px; font-weight: 500; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.month-event > span { font-size: 14px; }
.event-0 { background: #eaf2e1; color: #5e7948; }
.event-1 { background: #efe7f4; color: #87619c; }
.event-2 { background: #f7ebd9; color: #9b784b; }
.event-3 { background: #e4eef2; color: #648b98; }
[data-theme="dark"] .event-0 { background: #354c2e; color: #c0d7a5; }
[data-theme="dark"] .event-1 { background: #45364f; color: #d4b4df; }
[data-theme="dark"] .event-2 { background: #4c402c; color: #dfc498; }
[data-theme="dark"] .event-3 { background: #29414b; color: #acd0d9; }
.more-events { border: 0; background: none; color: var(--muted); font-size: 14px; padding: 3px 4px; }
.week-wrapper { overflow: hidden; }
.week-scroll { max-height: 675px; overflow: auto; scrollbar-width: thin; }
.week-header,.week-body { display: grid; grid-template-columns: 69px repeat(7,minmax(110px,1fr)); min-width: 840px; }
.week-header { position: sticky; top: 0; z-index: 3; background: var(--card); border-bottom: 1px solid var(--border); }
.week-header > button { border: 0; border-inline-start: 1px solid var(--border); background: none; padding: 11px; display: flex; flex-direction: column; align-items: center; color: var(--muted); gap: 4px; }
.week-header > button small { font-size: 13.5px; }
.week-header > button strong { font-size: 19px; font-weight: 550; border-radius: 50%; height: 31px; width: 31px; line-height: 31px; }
.week-header > button.today strong { color: var(--on-accent); background: var(--accent); }
.timezone-label { font-size: 14px; text-align: center; align-self: end; color: var(--faint); padding-bottom: 13px; letter-spacing: .08em; }
.week-times > span { height: 90px; display: block; text-align: center; font-size: 11.5px; color: var(--muted); padding-top: 7px; }
.week-day { position: relative; border-inline-start: 1px solid var(--border); height: 900px; }
.week-day.today { background: color-mix(in srgb, var(--mint) 18%, var(--card)); }
.week-slot { width: 100%; display: block; height: 90px; border: 0; border-bottom: 1px solid var(--border); background: transparent; }
.week-slot:hover { background: var(--soft); }
.week-event { position: absolute; inset-inline-start: 4px; inset-inline-end: 4px; height: 43px; border: 0; border-inline-start: 2px solid currentColor; border-radius: 5px; text-align: start; padding: 5px 6px; overflow: hidden; }
.week-event > strong { display: block; color: inherit; font-size: 13.5px; line-height: 1.45; font-weight: 600; padding-inline-end: 28px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.week-event > span { display: block; font-size: 14px; line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-event > small { font-size: 14px; position: absolute; top: 5px; inset-inline-end: 5px; opacity: .9; }
.event-cancelled { opacity: .45; text-decoration: line-through; }
.day-agenda { padding: 0 23px 18px; }
.day-agenda > button { display: flex; width: 100%; text-align: start; align-items: center; gap: 20px; padding: 18px 0; border: 0; background: none; border-bottom: 1px solid var(--border); }
.day-agenda > button:last-child { border-bottom: 0; }
.day-agenda > button > time { color: var(--muted); font-size: 14px; width: 70px; }
.day-agenda .entity { width: 195px; }
.day-service { flex: 1; font-size: 13.5px; }
.day-staff { width: 145px; color: var(--muted); font-size: 14px; }
.day-agenda > button > .icon { color: var(--faint); }
/* Boarding, adoption, team & tasks */
.boarding-summary { background: var(--mint); border: 1px solid var(--border); border-radius: 15px; display: grid; grid-template-columns: repeat(3,1fr); padding: 27px 0; margin-bottom: 24px; }
.boarding-summary > div { display: grid; grid-template-columns: 45px auto; align-items: center; padding: 0 29px; border-inline-end: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.boarding-summary > div:last-child { border: 0; }
.boarding-summary svg { grid-row: span 2; color: var(--mint-ink); opacity: .8; }
.boarding-summary strong { font-size: 26px; letter-spacing: -.03em; font-weight: 600; }
.boarding-summary span { color: var(--muted); font-size: 13.5px; }
.room-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.room-card { padding: 22px; }
.room-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 19px; }
.room-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 14px; }
.room-tone-0 { background: var(--lavender); color: #947fa3; }.room-tone-1 { background: var(--cream); color: #a38b58; }.room-tone-2 { background: var(--mint); color: #8aa16e; }
.room-card > h3 { font-size: 18px; }
.room-card > p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.room-pet { padding: 16px 0; margin-top: 10px; border-block: 1px solid var(--border); }
.stay-dates { display: flex; align-items: center; justify-content: space-between; padding: 19px 0; }
.stay-dates > span { display: flex; flex-direction: column; gap: 4px; }
.stay-dates small { color: var(--muted); font-size: 11.5px; }
.stay-dates strong { font-size: 14px; font-weight: 550; }
.stay-dates > svg { color: var(--faint); }
.empty-room { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; min-height: 186px; gap: 9px; color: var(--faint); }
.empty-room p { font-size: 14px; color: var(--muted); }
.empty-room .btn { margin-top: 6px; }
.empty-room small { font-size: 11.5px; }
.stays-list { margin-top: 24px; overflow: hidden; }
.adoption-note { background: var(--mint); border: 1px solid var(--border); border-radius: 13px; display: flex; gap: 15px; align-items: center; padding: 20px 23px; margin-bottom: 24px; }
.adoption-note > div { flex: 1; }
.adoption-note strong { font-size: 13.5px; font-weight: 550; }
.adoption-note p { color: var(--muted); font-size: 13.5px; margin-top: 5px; }
.kanban-scroll { overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.adoption-board { display: grid; grid-template-columns: repeat(4,minmax(227px,1fr)); gap: 17px; min-width: 959px; align-items: stretch; }
.kanban-lane { border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--soft) 80%, var(--bg)); min-height: 430px; transition: .15s; }
.kanban-lane.drag-over { background: var(--mint); outline: 2px dashed var(--accent); outline-offset: -3px; }
.kanban-head { display: flex; align-items: center; gap: 7px; padding: 17px 15px; }
.kanban-head > i { width: 7px; height: 7px; border-radius: 50%; }
.kanban-head h2 { font-size: 14px; font-weight: 600; }
.kanban-head > span { margin-inline-start: auto; font-size: 13.5px; color: var(--muted); width: 21px; height: 21px; text-align: center; line-height: 21px; border-radius: 5px; background: var(--border); }
.kanban-cards { padding: 0 11px 14px; display: flex; flex-direction: column; gap: 14px; }
.adoption-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: grab; }
.adoption-card:active { cursor: grabbing; }
.adoption-card-photo { height: 159px; position: relative; }
.adoption-card-photo > a { position: absolute; top: 10px; inset-inline-end: 10px; width: 28px; height: 28px; display: grid; place-items: center; color: #66765b; border-radius: 50%; background: #fffdf0db; }
.adoption-card-body { padding: 14px; }
.adoption-card-name { display: flex; justify-content: space-between; align-items: center; }
.adoption-card-name h3 { font-size: 19px; }
.adoption-card-name small { color: var(--muted); font-size: 11.5px; }
.adoption-card-body > p:not(.application-note) { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.applicant { display: flex; align-items: center; gap: 8px; padding: 14px 0 11px; }
.applicant small,.applicant strong { display: block; }
.applicant small { color: var(--muted); font-size: 14px; }
.applicant strong { font-size: 13.5px; font-weight: 550; }
.application-note { font-size: 13.5px; color: var(--muted); line-height: 1.75; min-height: 51px; }
.adoption-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; border-top: 1px solid var(--border); padding: 7px 0; }
.adoption-card-foot > span { display: flex; gap: 5px; align-items: center; color: var(--muted); font-size: 11.5px; }
.adoption-card-foot .icon-btn { width: 27px; height: 26px; }
.adoption-card-foot .icon-btn svg { width: 15px; }
.adoption-card-body > select { padding: 7px 26px 7px 8px; font-size: 13.5px; background: var(--soft); }
.kanban-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 90px 15px; text-align: center; color: var(--faint); border: 1px dashed var(--border); border-radius: 10px; }
.kanban-empty p { font-size: 13.5px; max-width: 140px; }
.service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; margin-top: 24px; }
.service-card { padding: 22px; }
.service-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 21px; }
.service-icon { width: 61px; height: 61px; display: grid; place-items: center; border-radius: 21px; }
.service-tone-0 { background: var(--mint); color: #7b9360; }.service-tone-1 { background: var(--lavender); color: #ad92b8; }.service-tone-2 { background: var(--cream); color: #b59766; }.service-tone-3 { background: var(--blue); color: #8faab8; }
.service-category { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.service-card > h3 { font-size: 19px; margin: 5px 0 9px; }
.service-card > p { font-size: 14px; color: var(--muted); min-height: 43px; }
.service-facts { display: flex; flex-direction: column; gap: 15px; padding: 17px 0 20px; }
.service-facts > span { font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.service-facts > strong { font-size: 23px; font-weight: 550; letter-spacing: -.04em; }
.service-facts > strong > small { font-size: 13.5px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.service-card-foot { border-top: 1px solid var(--border); }
.service-card-foot .toggle-row { padding: 17px 0 0; border: 0; }
.service-card-foot .toggle-row strong { font-size: 13.5px; font-weight: 500; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.toggle-row strong { font-size: 13.5px; font-weight: 550; display: block; }
.toggle-row small { font-size: 14px; color: var(--muted); display: block; margin-top: 5px; }
input.toggle { appearance: none; width: 34px; height: 20px; padding: 0; background: var(--faint); border: none; border-radius: 12px; position: relative; cursor: pointer; flex-shrink: 0; transition: background .18s; }
input.toggle::before { content: ''; width: 14px; height: 14px; background: white; border-radius: 50%; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; transition: inset-inline-start .18s; box-shadow: 0 1px 2px #00000018; }
input.toggle:checked { background: var(--accent); }
input.toggle:checked::before { inset-inline-start: 17px; }
.team-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.team-card { padding: 19px 23px 23px; text-align: center; }
.team-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.team-card > .avatar { margin: 0 0 13px; }
.team-card > h3 { font-size: 19px; }
.team-card > p { color: var(--muted); font-size: 14px; margin: 4px 0 7px; }
.team-email { font-size: 13.5px; color: var(--muted); }
.team-stats { display: flex; margin: 23px 0 19px; padding: 18px 0; border-block: 1px solid var(--border); }
.team-stats > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.team-stats > div + div { border-inline-start: 1px solid var(--border); }
.team-stats strong { font-size: 19px; font-weight: 550; }
.team-stats small { font-size: 11.5px; color: var(--muted); }
.team-card .field { text-align: start; }
.team-card .field select { font-size: 14px; }
.team-card .field > span { font-size: 13.5px; font-weight: 400; }
.task-list { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.task-card { padding: 23px; display: flex; gap: 17px; align-items: flex-start; }
.task-card > input { margin-top: 5px; }
.task-content { flex: 1; }
.task-content h3 { font-size: 14px; font-weight: 550; }
.task-content p { font-size: 14px; color: var(--muted); margin-top: 6px; }
.task-card.is-done .task-content h3 { text-decoration: line-through; color: var(--muted); }
.task-meta { display: flex; align-items: center; gap: 6px; margin-top: 15px; color: var(--muted); font-size: 11.5px; }
.task-meta > span:last-child { display: flex; align-items: center; gap: 6px; margin-inline-start: 15px; }
.task-actions { display: flex; gap: 2px; margin-top: -3px; }
.task-card > .badge { margin: 3px 9px 0; }
/* Inventory, invoices & reports */
.product-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; }
.product-tone-0 { background: var(--mint); color: #819569; }.product-tone-1 { background: var(--cream); color: #ad9062; }.product-tone-2 { background: var(--lavender); color: #9c86ad; }.product-tone-3 { background: var(--blue); color: #7698a6; }
.invoice-paper { max-width: 960px; margin: 0 auto; padding: 47px 48px 25px; }
.invoice-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 32px; border-bottom: 1px solid var(--border); }
.invoice-header > div { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.invoice-header h2 { font-size: 24px; letter-spacing: .08em; font-weight: 500; color: var(--faint); }
.invoice-header > div > strong { font-size: 14px; font-weight: 550; }
.invoice-addresses { display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 25px; padding: 32px 0 36px; }
.invoice-addresses .eyebrow { font-size: 14px; }
.invoice-addresses h3 { font-size: 14px; margin: 8px 0; }
.invoice-addresses p { color: var(--muted); font-size: 13.5px; line-height: 1.9; overflow-wrap: anywhere; }
.invoice-dates { padding-top: 13px; }
.invoice-dates > p { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; font-size: 13.5px; }
.invoice-dates strong { font-weight: 550; white-space: nowrap; }
.invoice-lines th { background: var(--mint); border: 0; font-size: 13.5px; }
.invoice-lines th:first-child { border-start-start-radius: 7px; border-end-start-radius: 7px; }
.invoice-lines th:last-child { border-start-end-radius: 7px; border-end-end-radius: 7px; }
.invoice-lines th:not(:first-child),.invoice-lines td:not(:first-child) { text-align: end; }
.invoice-lines td { font-size: 14px; padding: 20px 18px; }
.invoice-lower { display: grid; grid-template-columns: 1fr 285px; gap: 55px; margin-top: 29px; }
.invoice-note { padding-top: 8px; }
.invoice-note p { color: var(--muted); font-size: 14px; line-height: 1.9; margin: 8px 0 20px; }
.invoice-demo-label { font-size: 11.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 5px 7px; }
.invoice-totals > p { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 14px; color: var(--muted); }
.invoice-totals strong { font-weight: 550; }
.invoice-totals > p.invoice-grand-total { border-block: 1px solid var(--border); margin: 9px 0; padding: 15px 0; color: var(--ink); font-size: 15px; }
.invoice-grand-total > strong { font-size: 23px; letter-spacing: -.045em; }
.invoice-thanks { border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px 0 2px; margin-top: 42px; color: var(--faint); font-size: 13.5px; }
.report-summary-list > div { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.report-summary-list > div:last-child { border-bottom: 0; }
.report-summary-list strong { font-size: 14px; font-weight: 550; }
/* Messaging */
.messenger { display: grid; grid-template-columns: 305px 1fr; height: 672px; overflow: hidden; }
.inbox-sidebar { border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.inbox-title { display: flex; justify-content: space-between; align-items: center; padding: 24px 21px 17px; }
.inbox-title h2 { font-size: 14px; }
.inbox-title > span { background: var(--soft); font-size: 11.5px; padding: 3px 7px; border-radius: 5px; }
.inbox-search { padding: 0 18px 18px; }
.inbox-search > .search-input { width: 100%; height: 35px; }
.inbox-search input { font-size: 13.5px; }
.conversation-list { flex: 1; overflow: auto; }
.conversation-item { display: flex; width: 100%; border: 0; background: none; text-align: start; padding: 19px 19px; gap: 10px; border-block: 1px solid transparent; }
.conversation-item.selected { background: var(--mint); border-block-color: var(--border); }
.conversation-item:hover:not(.selected) { background: var(--soft); }
.conversation-item > span:not(.avatar) { min-width: 0; flex: 1; }
.conversation-name { display: flex; justify-content: space-between; align-items: center; }
.conversation-name strong { font-size: 14px; font-weight: 600; }
.conversation-name > i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.conversation-item small { display: block; font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.conversation-item time { display: block; font-size: 14px; color: var(--muted); margin-top: 6px; }
.inbox-footer { display: flex; justify-content: center; gap: 8px; align-items: center; padding: 17px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); }
.chat-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-head { display: flex; align-items: center; padding: 20px 24px; gap: 12px; border-bottom: 1px solid var(--border); }
.chat-head > span:not(.avatar) { flex: 1; }
.chat-head h2 { font-size: 14px; }
.chat-head p { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.chat-head p > span { margin: 0 5px; color: var(--faint); }
.chat-back { display: none; }
.chat-messages { padding: 25px; flex: 1; overflow: auto; background-image: radial-gradient(var(--border) .6px, transparent .6px); background-size: 17px 17px; }
.chat-date { display: block; width: fit-content; margin: 0 auto 32px; background: var(--soft); padding: 4px 11px; border-radius: 7px; font-size: 14px; color: var(--muted); }
.message-row { display: flex; align-items: flex-end; gap: 9px; margin-bottom: 23px; }
.message-row > div { max-width: 77%; min-width: 0; }
.message-bubble { border: 1px solid var(--border); padding: 12px 15px; border-radius: 13px 13px 13px 2px; font-size: 14px; line-height: 1.8; background: var(--card); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.message-time { color: var(--faint); font-size: 14px; display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.message-row.outgoing { justify-content: flex-end; }
.outgoing .message-bubble { background: var(--mint); border-color: color-mix(in srgb, var(--mint) 60%, var(--border)); border-radius: 13px 13px 2px 13px; }
.outgoing .message-time { justify-content: flex-end; }
.chat-compose { display: flex; gap: 12px; flex-wrap: wrap; padding: 18px 23px 12px; border-top: 1px solid var(--border); }
.chat-compose > textarea { width: auto; flex: 1; resize: none; border: 0; background: var(--soft); font-size: 14px; min-height: 60px; }
.chat-compose .btn { align-self: center; }
.chat-compose small { width: 100%; font-size: 14px; color: var(--muted); text-align: center; }
/* Settings, components, help */
.settings-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 26px; align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: 4px; }
.settings-nav > button { display: flex; width: 100%; align-items: center; gap: 11px; background: none; border: 0; padding: 14px 15px; border-radius: 9px; text-align: start; color: var(--muted); font-size: 13.5px; }
.settings-nav > button > svg:last-child { margin-inline-start: auto; opacity: .55; }
.settings-nav > button.active { background: var(--mint); color: var(--accent); font-weight: 550; }
.settings-main > .card { margin-bottom: 22px; }
.settings-card { padding: 27px 29px; }
.settings-card > .card-head { padding: 0 0 25px; border-bottom: 1px solid var(--border); margin-bottom: 25px; }
.settings-card .card-head h2 { font-size: 18px; }
.profile-settings-avatar { display: flex; align-items: center; gap: 20px; margin-bottom: 29px; }
.profile-settings-avatar strong { display: block; font-size: 17px; }
.profile-settings-avatar p { color: var(--muted); font-size: 14px; margin: 4px 0 9px; }
.settings-save { display: flex; justify-content: flex-end; padding-top: 23px; margin-top: 24px; border-top: 1px solid var(--border); }
.settings-section-label { font-size: 13.5px; font-weight: 550; margin-bottom: 15px; }
.theme-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.theme-option { padding: 7px; text-align: start; background: var(--card); border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.theme-option.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-preview { display: flex; width: 100%; height: 102px; background: #f4f5ee; border: 1px solid #e5e7dc; border-radius: 6px; overflow: hidden; }
.theme-preview > span { width: 22%; background: #294431; }
.theme-preview > div { padding: 10px 8px; flex: 1; }
.theme-preview > div > i { display: block; height: 7px; width: 60%; border-radius: 2px; background: #dce1d3; margin-bottom: 9px; }
.theme-preview > div > div { display: flex; gap: 4px; margin-bottom: 6px; }
.theme-preview b { display: block; height: 20px; border-radius: 3px; background: #fff; flex: 1; }
.theme-preview b:first-child { background: #dce9cd; }
.theme-preview em { display: block; width: 100%; height: 31px; border-radius: 3px; background: white; }
.theme-dark { background: #213226; border-color: #3c4d3b; }
.theme-dark > span { background: #102317; }
.theme-dark > div > i { background: #516548; }
.theme-dark b { background: #3a4d35; }
.theme-dark b:first-child { background: #526444; }
.theme-dark em { background: #33462e; }
.theme-system { background: linear-gradient(100deg,#f4f5ee 50%,#213226 51%); }
.theme-option > span { display: flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 11px 2px 4px; }
.theme-option > span > i { width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 50%; margin-inline-start: auto; display: grid; place-items: center; color: var(--on-accent); }
.theme-option.selected > span > i { background: var(--accent); border-color: var(--accent); }
.settings-divider { border-top: 1px solid var(--border); margin-top: 28px; }
.data-action { display: flex; align-items: center; gap: 15px; padding: 12px 0 24px; }
.data-action + .data-action { border-top: 1px solid var(--border); padding-top: 25px; }
.data-action > div { flex: 1; }
.data-action h3 { font-size: 14px; }
.data-action p { font-size: 13.5px; color: var(--muted); margin-top: 5px; }
.data-action .btn { font-size: 13.5px; }
.auth-demo-links { display: flex; flex-wrap: wrap; gap: 10px; }
.components-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.component-demo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
.component-demo + .component-demo { margin-top: 19px; }
.component-tab-copy { font-size: 13.5px; color: var(--muted); margin: 22px 0; }
.components-grid form > .btn { margin-top: 23px; }
.components-grid .notice:first-of-type { margin-top: 4px; }
.components-grid .notice { margin-bottom: 17px; }
.skeleton-demo { padding: 35px 20px; display: flex; flex-direction: column; gap: 18px; }
.skeleton-demo > div { height: 28px; background: linear-gradient(90deg,var(--soft),var(--border),var(--soft)); background-size: 200%; border-radius: 6px; animation: shimmer 1.8s linear infinite; }
.skeleton-demo > div:last-child { width: 65%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.help-hero { text-align: center; padding: 33px 30px 35px; background: var(--mint); border: 1px solid var(--border); border-radius: 18px; margin-bottom: 24px; }
.help-hero > .soft-icon { display: flex; margin: 0 auto 15px; width: 55px; height: 55px; background: var(--card); border-radius: 18px; }
.help-hero > .eyebrow { display: block; font-size: 14px; }
.help-hero h1 { font-size: 36px; margin: 10px 0 12px; }
.help-hero p { font-size: 13.5px; color: var(--muted); }
.help-search { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 10px; max-width: 430px; padding: 5px 15px; margin: 26px auto 0; color: var(--muted); }
.help-search input { border: none; font-size: 13.5px; padding-inline: 0; }
.help-search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.help-search input:focus { outline: none; }
.help-quick-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 24px; }
.help-quick-links > a { position: relative; padding: 26px; }
.help-quick-links > a > svg:first-child { color: var(--accent); margin-bottom: 18px; }
.help-quick-links > a > svg:last-child { position: absolute; top: 23px; inset-inline-end: 22px; color: var(--faint); }
.help-quick-links h3 { font-size: 15px; }
.help-quick-links p { color: var(--muted); font-size: 14px; margin-top: 5px; }
.help-quick-links a:hover { border-color: var(--accent); }
.faq-card { padding: 5px 0; }
.faq-card .card-head { padding: 22px 25px; }
.faq-card details { border-top: 1px solid var(--border); padding: 0 25px; }
.faq-card summary { display: flex; align-items: center; gap: 15px; justify-content: space-between; list-style: none; cursor: pointer; padding: 20px 0; color: var(--ink); font-weight: 550; font-size: 13.5px; }
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card summary > svg { color: var(--faint); }
.faq-card details[open] summary > svg { transform: rotate(45deg); }
.faq-card details > p { padding: 0 30px 23px 0; max-width: 840px; color: var(--muted); font-size: 13.5px; line-height: 1.9; }
/* Authentication & utility pages */
.auth-layout { display: grid; grid-template-columns: 46% 54%; min-height: 100dvh; background: var(--card); }
.auth-story { position: relative; min-height: 880px; padding: 44px 52px 28px; background: #e9edde; display: flex; flex-direction: column; overflow: hidden; }
.auth-story .brand { color: #3a593b; }
.auth-story .brand-paw { fill: #eff4e2; }
.auth-story-copy { position: relative; z-index: 2; margin: 80px 0 0; }
.auth-story-copy .eyebrow { color: #88916e; font-size: 11.5px; }
.auth-story-copy h1 { font-size: clamp(38px,4.1vw,65px); line-height: 1.06; font-weight: 550; letter-spacing: -.06em; color: #334d32; margin: 23px 0 21px; }
.auth-story-copy h1 > span { color: #88a266; }
.auth-story-copy > p { font-size: 14px; line-height: 1.85; color: #7f8a6c; max-width: 305px; }
.auth-art { position: relative; height: 286px; margin: 37px -30px 5px; }
.auth-art .hero-art { width: 440px; height: 236px; position: absolute; bottom: 20px; inset-inline-start: 50%; transform: translateX(-50%) scale(1.2); }
[dir="rtl"] .auth-art .hero-art { transform: translateX(50%) scale(1.2); }
.auth-story-foot { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; margin-top: auto; color: #788663; }
.auth-story-foot > span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.auth-story-foot > small { font-size: 14px; opacity: .8; margin-inline-start: 26px; }
.auth-main { display: flex; flex-direction: column; padding: 37px 48px 26px; }
.auth-top-link { text-align: end; }
.auth-top-link a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.auth-form-wrap { max-width: 380px; width: 100%; margin: auto; padding: 45px 0; }
.auth-form-wrap > .avatar { margin-bottom: 25px; }
.auth-form-wrap > .eyebrow { display: block; font-size: 14px; }
.auth-form-wrap h2 { font-size: 29px; line-height: 1.25; letter-spacing: -.055em; margin-top: 12px; font-weight: 600; }
.auth-subtitle { color: var(--muted); font-size: 13.5px; margin: 11px 0 29px; }
.auth-form-wrap form > .field { margin-bottom: 18px; }
.auth-form-wrap .field input { padding: 12px 13px; font-size: 13.5px; }
.password-input { position: relative; }
.password-input input { padding-inline-end: 47px !important; }
.password-input > .icon-btn { position: absolute; inset-inline-end: 6px; top: 6px; }
.password-input > .icon-btn svg { width: 17px; }
.auth-options { display: flex; align-items: center; justify-content: space-between; margin: 1px 0 21px; font-size: 13.5px; color: var(--muted); }
.auth-options a { color: var(--accent); font-weight: 500; }
.auth-form-wrap .btn { min-height: 43px; }
.auth-divider { position: relative; text-align: center; margin: 21px 0; color: var(--faint); font-size: 11.5px; }
.auth-divider::before { content: ''; width: 100%; height: 1px; background: var(--border); position: absolute; top: 50%; inset-inline-start: 0; }
.auth-divider > span { position: relative; background: var(--card); padding: 0 13px; }
.auth-switch { font-size: 13.5px; text-align: center; color: var(--muted); margin-top: 24px; }
.auth-switch a { color: var(--accent); font-weight: 550; margin-inline-start: 3px; }
.auth-checkbox { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.7; color: var(--muted); margin: 5px 0 22px; }
.auth-checkbox > input { margin-top: 2px; width: 14px; height: 14px; }
.auth-form-wrap .notice { font-size: 11.5px; padding: 11px 13px; line-height: 1.8; margin-top: 28px; }
.auth-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 11.5px; }
.auth-footer > span > span { margin: 0 7px; }
.auth-form-wrap .back-link { margin-top: 23px; }
.auth-success { border: 1px solid var(--border); background: var(--soft); padding: 27px; border-radius: 14px; text-align: center; }
.auth-success > span { width: 59px; height: 59px; display: grid; place-items: center; background: var(--mint); color: var(--accent); border-radius: 19px; margin: 0 auto 15px; }
.auth-success h3 { font-size: 18px; }
.auth-success p { font-size: 14px; line-height: 1.85; color: var(--muted); margin: 12px 0 22px; }
.not-found { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 50px 20px 65px; }
.not-found-art { width: 200px; height: 210px; border-radius: 100px 100px 38px 38px; overflow: hidden; transform: rotate(-7deg); border: 8px solid var(--card); box-shadow: 0 10px 40px #20341408; margin-bottom: 35px; }
.not-found h1 { font-size: 38px; margin: 15px 0; line-height: 1.2; }
.not-found > p { color: var(--muted); font-size: 13.5px; margin-bottom: 24px; }
.app-error { min-height: 100vh; display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.app-error > p { max-width: 430px; color: var(--muted); }
.app-error > div { display: flex; gap: 12px; }
/* Layout preferences, responsive behavior */
.compact .main-content { padding: 22px 24px; }
.compact .metric-card { padding: 13px 16px; }
.compact td { padding-top: 9px; padding-bottom: 9px; }
.compact .card-head { padding-top: 16px; }
.compact .pet-card-art { height: 176px; }
.compact .pet-card-body { padding-top: 13px; }
[dir="rtl"] .icon-btn > svg,[dir="rtl"] .back-link > svg,[dir="rtl"] .text-btn > svg,[dir="rtl"] .hero-link > svg { transform: scaleX(-1); }
@media(min-width:1700px) { :root { --sidebar-width: 250px; } .sidebar-brand { padding-inline: 31px; }.nav-link { min-height: 43px; font-size: 14px; }.main-content { padding: 37px 42px 28px; }.topbar { padding-inline: 42px; }.metric-value > strong { font-size: 34px; }.pet-card-art { height: 258px; }.hero-art { margin-inline-end: 60px; }.welcome-banner { height: 250px; }.welcome-copy h2 { font-size: 40px; }.revenue-card { min-height: 370px; }.agenda-item { padding-block: 21px; } }
@media(max-width:1250px) { :root { --sidebar-width: 214px; } .topbar { padding-inline: 24px; }.main-content { padding: 26px 24px 20px; }.app-footer { padding-inline: 24px; }.page-head { align-items: flex-start; }.page-actions { gap: 7px; }.date-chip { display: none; }.metrics-grid { gap: 12px; }.metric-card { padding: 15px 15px; }.metric-value > strong { font-size: 26px; }.sparkline { width: 53px; }.metric-card > p { font-size: 14px; }.metric-top { font-size: 11.5px; }.dashboard-main-grid { grid-template-columns: minmax(0,1.6fr) minmax(267px,1fr); gap: 18px; }.dashboard-secondary-grid { grid-template-columns: minmax(0,1.9fr) minmax(230px,1fr); gap: 18px; }.dashboard-bottom-grid { gap: 18px; grid-template-columns: minmax(0,1.5fr) minmax(270px,1fr); }.card-head { padding-inline: 19px; }.revenue-summary { padding-inline: 19px; }.chart-inline-legend { font-size: 14px; gap: 4px; }.chart-inline-legend > i.previous { margin-inline-start: 4px; }.welcome-banner { padding-inline: 28px; }.hero-art { width: 405px; margin-inline-end: -30px; }.welcome-copy h2 { font-size: 34px; }.directory-summary > div { padding-inline: 16px; }.pet-grid { gap: 17px; }.pet-card-art { height: 183px; }.pet-card-body { padding-inline: 16px; }.pet-card-body > p { font-size: 11.5px; }.directory-toolbar { flex-wrap: wrap; gap: 12px; }.tabs > button { padding-inline: 11px; }.table-toolbar { padding-inline: 17px; }.calendar-toolbar { flex-wrap: wrap; }.room-grid,.service-grid,.team-grid { gap: 17px; }.room-card,.service-card { padding: 18px; }.team-card { padding-inline: 18px; }.grooming-art { margin-inline-end: 0; }.shelter-art { transform: scale(.85); transform-origin: center; margin-inline-end: -20px; width: 340px; }.shelter-pets { gap: 15px; }.shelter-pet-photo { height: 155px; }.shelter-pet-card > div:last-child { padding: 15px; }.shelter-pet-card p { font-size: 11.5px; }.settings-layout { grid-template-columns: 180px minmax(0,1fr); gap: 20px; }.settings-card { padding: 23px; }.theme-option > span { font-size: 14px; }.theme-option > span > svg { display: none; }.messenger { grid-template-columns: 260px 1fr; }.chat-head { padding-inline: 20px; }.invoice-paper { padding: 35px 33px 22px; }.invoice-lower { gap: 25px; }.day-staff { display: none; }.pet-card-owner { font-size: 14px; }.client-profile-grid { grid-template-columns: 270px 1fr; }.auth-story { padding: 37px; }.auth-main { padding: 35px; }.auth-art .hero-art { transform: translateX(-50%) scale(1.05); }.dashboard-table td,.dashboard-table th { padding-inline: 11px; }.dashboard-table .entity { gap: 7px; }.dashboard-table .entity small { max-width: 75px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
@media(max-width:1050px) { .global-search > span { display: none; }.global-search kbd { margin-inline-start: 0; }.dashboard-main-grid { grid-template-columns: minmax(0,1fr) 270px; }.revenue-summary { flex-direction: column; align-items: flex-start; gap: 4px; }.revenue-summary h3 { font-size: 26px; }.revenue-chart { margin-top: 16px; padding-inline: 9px; }.revenue-card .card-head { flex-wrap: wrap; }.revenue-card .card-head > select { margin-top: 3px; }.dashboard-secondary-grid { grid-template-columns: 1fr; }.service-donut { display: grid; grid-template-columns: 1fr 180px 1fr; align-items: center; }.service-donut .card-head { padding: 20px; }.service-donut .donut-wrap { width: 150px; margin: 10px; }.service-donut .chart-legend { grid-template-columns: 1fr; padding: 20px; }.dashboard-bottom-grid { grid-template-columns: 1fr; }.adoption-spotlight { min-height: 235px; }.spotlight-art { width: 175px; height: 190px; inset-inline-end: 30px; top: 43px; }.welcome-banner { height: 221px; }.welcome-copy h2 { font-size: 31px; }.hero-art { transform: scale(.85); transform-origin: right center; width: 360px; margin-inline-start: -45px; }.hero-cat { inset-inline-start: 11px; }.hero-dog { inset-inline-start: 124px; }.hero-art-badge { inset-inline-start: 75px; }.metric-card > p { line-height: 1.6; }.metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.metric-card { padding: 17px 19px; }.metric-top { font-size: 14px; }.metric-value > strong { font-size: 30px; }.metric-card > p { font-size: 11.5px; }.sparkline { width: 88px; }.metrics-grid.three .metric-value > strong { font-size: 24px; }.metrics-grid.three .sparkline { display: none; }.directory-summary { padding: 17px 0; }.directory-summary > div { gap: 9px; padding-inline: 12px; }.directory-summary .soft-icon { width: 31px; height: 31px; border-radius: 10px; }.directory-summary .soft-icon > svg { width: 17px; }.directory-summary strong { font-size: 21px; }.directory-summary small { font-size: 14px; }.pet-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.pet-card-art { height: 213px; }.pet-card-body > p { font-size: 13.5px; }.room-grid,.service-grid,.team-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.profile-banner { gap: 18px; padding: 20px; }.profile-pet-art { width: 110px; height: 120px; }.profile-intro h1 { font-size: 30px; }.profile-intro > p { font-size: 13.5px; }.profile-intro > p > span { margin-inline: 4px; }.profile-actions .btn { font-size: 13.5px; padding-inline: 11px; }.profile-grid { grid-template-columns: minmax(0,1.2fr) minmax(250px,1fr); gap: 18px; }.profile-grid .visit-timeline .badge { display: none; }.invoice-addresses { gap: 15px; }.invoice-paper { padding-inline: 25px; }.invoice-addresses h3 { font-size: 13.5px; }.invoice-dates { padding-top: 9px; }.invoice-dates > p { flex-direction: column; gap: 0; }.client-profile-grid { grid-template-columns: 240px 1fr; gap: 18px; }.client-pets-grid { grid-template-columns: 1fr; }.client-pets-grid .pet-card-art { height: 210px; }.shelter-banner { padding: 30px; }.shelter-banner h2 { font-size: 31px; }.shelter-art { width: 280px; transform: scale(.72); margin-inline-start: -30px; transform-origin: left center; }.shelter-pets { grid-template-columns: repeat(2,minmax(0,1fr)); }.shelter-pet-photo { height: 200px; }.grooming-banner { padding: 30px; }.grooming-banner h2 { font-size: 33px; }.grooming-art { width: 170px; height: 200px; }.studio-grid { gap: 13px; }.studio-pet { padding: 11px; }.studio-pet .entity { gap: 7px; }.studio-pet .entity small { display: none; }.studio-pet > div { flex-direction: column; gap: 5px; align-items: flex-start; }.theme-options { grid-template-columns: 1fr; }.theme-option { display: flex; gap: 14px; align-items: center; }.theme-preview { width: 110px; height: 68px; flex-shrink: 0; }.theme-preview > div { padding: 6px; }.theme-preview em { height: 18px; }.theme-preview b { height: 12px; }.theme-option > span { font-size: 13.5px; padding-inline-end: 6px; flex: 1; }.theme-option > span > svg { display: block; }.settings-card { padding: 22px; }.data-action { flex-wrap: wrap; gap: 12px; }.data-action > .btn { margin-inline-start: 53px; }.components-grid { grid-template-columns: 1fr; }.help-quick-links { gap: 14px; }.help-quick-links > a { padding: 21px; }.help-quick-links h3 { font-size: 14px; }.help-quick-links p { font-size: 13.5px; }.messenger { grid-template-columns: 225px 1fr; }.conversation-item { padding-inline: 14px; }.conversation-name strong { font-size: 13.5px; }.conversation-item > .avatar { width: 31px; height: 31px; font-size: 13.5px; }.inbox-title { padding-inline: 17px; }.inbox-title h2 { font-size: 13.5px; }.chat-compose { padding-inline: 16px; }.chat-messages { padding: 20px 16px; }.chat-compose .btn { min-height: 35px; font-size: 13.5px; padding-inline: 11px; }.auth-story { padding: 32px; min-height: 820px; }.auth-story-copy { margin-top: 65px; }.auth-story-copy h1 { font-size: 44px; }.auth-art .hero-art { transform: translateX(-50%) scale(.9); width: 360px; }.auth-main { padding: 28px; }.auth-footer { font-size: 14px; flex-wrap: wrap; gap: 7px; } }
@media(max-width:880px) { :root { --sidebar-width: 0px; }.sidebar { width: 250px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; }.sidebar.is-open { transform: translateX(0); box-shadow: 20px 0 70px #10241735; }.sidebar .hero-art { transform: none; }[dir="rtl"] .sidebar { transform: translateX(100%); }[dir="rtl"] .sidebar.is-open { transform: translateX(0); }.mobile-menu { display: inline-flex !important; margin-inline-start: -7px; margin-inline-end: 2px; }.mobile-close { display: inline-flex !important; color: #d0dfc7; margin-inline-end: -13px; }.sidebar-backdrop { position: fixed; inset: 0; background: #10281c66; backdrop-filter: blur(2px); z-index: 39; border: 0; }.sidebar-brand { height: 86px; }.workspace-picker { margin-bottom: 19px; }.sidebar-nav .nav-group + .nav-group { margin-top: 15px; }.nav-link { min-height: 39px; }.sidebar-bottom { padding-top: 8px; }.sidebar-user { padding-block: 13px; }.topbar { height: 66px; padding-inline: 23px; }.main-content { min-height: calc(100vh - 130px); padding-top: 26px; }.main-shell { margin: 0; }.app-footer { flex-wrap: wrap; }.global-search > span { display: block; }.page-head h1 { font-size: 28px; }.welcome-banner { height: 230px; }.welcome-copy h2 { font-size: 35px; }.hero-art { transform: scale(.95); width: 400px; margin-inline-end: -22px; }.metrics-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }.metric-card { padding: 14px; }.metric-top { font-size: 11.5px; }.metric-value > strong { font-size: 26px; }.sparkline { width: 55px; }.metric-card > p { font-size: 14px; }.dashboard-main-grid { grid-template-columns: minmax(0,1.65fr) minmax(260px,1fr); }.revenue-card { min-height: 345px; }.revenue-card .card-head { flex-wrap: nowrap; }.revenue-card .card-head > select { margin-top: 0; }.service-donut { grid-template-columns: 1fr 170px 1fr; }.pet-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }.pet-card-art { height: 177px; }.pet-card-body > p { font-size: 11.5px; }.room-grid,.service-grid,.team-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.room-card,.service-card { padding: 17px; }.room-card > h3 { font-size: 16px; }.room-pet .entity { gap: 7px; }.room-pet .entity small { font-size: 14px; }.room-pet .pet-avatar { width: 32px; height: 32px; }.boarding-summary > div { padding-inline: 20px; }.team-card { padding-inline: 16px; }.team-card > h3 { font-size: 17px; }.settings-layout { grid-template-columns: 185px 1fr; }.theme-options { grid-template-columns: 1fr; }.messenger { grid-template-columns: 250px 1fr; }.auth-layout { grid-template-columns: 43% 57%; }.auth-story { padding: 31px 28px; }.auth-story-copy h1 { font-size: 38px; }.auth-story-copy > p { font-size: 13.5px; }.auth-art { margin-inline: -45px; }.auth-art .hero-art { transform: translateX(-50%) scale(.78); }.auth-form-wrap h2 { font-size: 27px; }.auth-main { padding-inline: 28px; }.auth-story .brand { font-size: 25px; }.auth-story .brand svg { width: 33px; height: 33px; } }
@media(max-width:700px) { .topbar { padding-inline: 19px; }.global-search > span,.global-search kbd { display: none; }.global-search { padding: 7px; }.topbar-actions { gap: 5px; }.topbar-divider { display: none; }.breadcrumb { font-size: 13.5px; gap: 8px; }.profile-trigger { padding-inline-start: 3px; }.profile-trigger > svg { display: none; }.main-content { padding: 23px 18px 20px; }.page-head { margin-bottom: 22px; gap: 16px; }.page-head h1 { font-size: 26px; }.page-description { font-size: 14px; max-width: 350px; }.page-actions > .btn { font-size: 13.5px; padding-inline: 11px; }.page-head .eyebrow { font-size: 14px; }.welcome-banner { height: 220px; padding: 25px; }.welcome-copy h2 { font-size: 31px; }.hero-eyebrow { font-size: 14px; }.welcome-copy p { font-size: 13.5px; }.hero-art { width: 340px; transform: scale(.8); margin-inline-start: -52px; margin-inline-end: -41px; }.hero-cat { inset-inline-start: 0; }.hero-dog { inset-inline-start: 111px; }.hero-art-badge { inset-inline-start: 55px; }.dashboard-main-grid { grid-template-columns: 1fr; gap: 18px; }.revenue-summary { flex-direction: row; align-items: center; }.chart-inline-legend { font-size: 11.5px; gap: 6px; }.revenue-card { min-height: auto; }.revenue-chart { margin-top: 0; padding-inline: 15px; }.agenda-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }.agenda-item:nth-last-child(-n+2) { border-bottom: 0; }.metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.metric-card { padding: 17px 18px; }.metric-top { font-size: 13.5px; }.metric-value > strong { font-size: 29px; }.metric-card > p { font-size: 11.5px; }.sparkline { width: 80px; }.dashboard-bottom-grid { margin-bottom: 0; }.service-donut { grid-template-columns: 1fr 155px 1fr; }.service-donut .card-head { padding: 18px; }.service-donut .card-head h2 { font-size: 14px; }.service-donut .card-head p { font-size: 11.5px; }.service-donut .chart-legend { padding-inline: 12px 18px; }.service-donut .chart-legend > div { font-size: 14px; }.service-donut .donut-wrap { width: 135px; }.pet-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }.pet-card-art { height: 200px; }.pet-card-body { padding-inline: 17px; }.pet-card-title h3 { font-size: 20px; }.directory-summary { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0; }.directory-summary > div { padding: 17px 20px; }.directory-summary > div:nth-child(2) { border-inline-end: 0; }.directory-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }.directory-summary .soft-icon { width: 38px; height: 38px; }.directory-summary small { font-size: 11.5px; }.directory-toolbar > .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-shrink: 1; }.directory-toolbar .toolbar-actions { margin-inline-start: auto; }.directory-search-row > .muted { font-size: 11.5px; }.search-input { width: 260px; }.directory-search-row > .search-input { width: 250px; }.room-grid,.service-grid,.team-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.table-toolbar { flex-wrap: wrap; }.table-toolbar .search-input { flex: 1; min-width: 200px; }.table-toolbar .toolbar-actions { margin-inline-start: auto; }.table-foot { flex-wrap: wrap; font-size: 11.5px; }.table-foot .pagination { margin-inline-start: auto; }.boarding-summary { padding-block: 22px; }.boarding-summary > div { padding-inline: 17px; grid-template-columns: 31px auto; }.boarding-summary > div svg { width: 20px; }.boarding-summary span { font-size: 14px; }.boarding-summary strong { font-size: 23px; }.profile-banner { flex-wrap: wrap; }.profile-intro { min-width: 180px; }.profile-actions { flex-direction: row; width: 100%; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 17px; }.profile-grid { grid-template-columns: 1fr; }.profile-grid > div:last-child { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }.profile-grid > div > .card { margin-bottom: 18px; }.profile-grid .owner-card h3 { font-size: 16px; }.profile-grid .owner-card .owner-contact { margin: 18px; }.profile-grid .owner-contact span { font-size: 13.5px; }.profile-grid .owner-card .card-head h2 { font-size: 14px; }.profile-grid .owner-card > .btn { font-size: 13.5px; }.profile-tabs { margin-bottom: 19px; }.client-profile-grid { grid-template-columns: 230px 1fr; }.client-pets-grid .pet-card-art { height: 205px; }.schedule-overview { gap: 15px 20px; padding: 15px 18px; }.schedule-overview > span { font-size: 13.5px; }.schedule-overview .demo-date { width: 100%; margin: 0; font-size: 11.5px; }.calendar-toolbar { gap: 17px; }.calendar-toolbar > .toolbar-actions { width: 100%; justify-content: space-between; }.month-cell { min-height: 124px; padding: 6px 4px; }.month-event { padding: 3px; gap: 3px; }.month-event > span { display: none; }.month-event strong { font-size: 14px; }.day-agenda { padding-inline: 17px; }.day-agenda > button { gap: 13px; }.day-agenda > button > time { width: 60px; font-size: 13.5px; }.day-agenda .entity { width: 170px; }.day-service { font-size: 13.5px; }.day-agenda .badge { font-size: 14px; }.day-agenda > button > .icon { display: none; }.adoption-note { padding: 18px; flex-wrap: wrap; }.adoption-note strong { font-size: 14px; }.adoption-note > .badge { margin-inline-start: 54px; }.adoption-note > div { min-width: 250px; }.task-card { padding: 19px; gap: 12px; }.task-content h3 { font-size: 14px; }.task-content p { font-size: 13.5px; }.task-actions { flex-direction: column; }.task-card > .badge { margin-inline: 0; font-size: 14px; }.task-meta { flex-wrap: wrap; }.task-meta > span:last-child { margin-inline-start: 4px; }.grooming-banner { padding: 27px; }.grooming-banner h2,.shelter-banner h2 { font-size: 30px; }.grooming-banner p { font-size: 13.5px; max-width: 230px; }.grooming-art { width: 160px; height: 177px; margin-inline-end: -5px; }.floating-scissors { width: 48px; height: 48px; border-radius: 15px; top: 0; inset-inline-start: -12px; }.floating-scissors > svg { width: 26px; }.studio-grid { grid-template-columns: 1fr; }.studio-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }.studio-pet > div { flex-direction: row; align-items: center; }.shelter-banner { min-height: 250px; padding: 27px; }.shelter-art { width: 230px; margin-inline-start: -30px; transform: scale(.65); }.shelter-pet-photo { height: 185px; }.invoice-paper { padding: 28px 24px 20px; }.invoice-addresses { grid-template-columns: 1fr 1fr; padding-bottom: 20px; }.invoice-dates { grid-column: 1 / -1; display: flex; gap: 25px; padding-top: 0; }.invoice-dates > p { flex: 1; font-size: 11.5px; }.invoice-header .brand { font-size: 24px; }.invoice-header .brand svg { width: 33px; height: 33px; }.invoice-header h2 { font-size: 21px; }.invoice-lower { gap: 23px; grid-template-columns: 1fr 200px; }.invoice-note p { font-size: 13.5px; }.invoice-demo-label { font-size: 14px; }.invoice-totals > p { font-size: 13.5px; }.invoice-grand-total strong { font-size: 21px; }.metrics-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }.metrics-grid.three .metric-card { padding: 13px; }.metrics-grid.three .metric-top { font-size: 14px; }.metrics-grid.three .metric-value > strong { font-size: 24px; }.metrics-grid.three .metric-icon { width: 25px; height: 25px; }.metrics-grid.three .metric-card > p { font-size: 14px; }.settings-layout { grid-template-columns: 1fr; }.settings-nav { flex-direction: row; overflow-x: auto; border-bottom: 1px solid var(--border); padding-bottom: 12px; }.settings-nav > button { flex: 0 0 auto; width: auto; padding: 10px 12px; gap: 7px; font-size: 13.5px; }.settings-nav > button > svg:first-child { width: 16px; }.settings-nav > button > svg:last-child { display: none; }.theme-options { grid-template-columns: repeat(3,minmax(0,1fr)); }.theme-option { display: block; }.theme-preview { width: 100%; height: 88px; }.theme-option > span { font-size: 14px; padding-inline: 1px; }.theme-option > span > svg { display: none; }.data-action { flex-wrap: nowrap; }.data-action > .btn { margin-inline-start: 0; }.help-quick-links { gap: 13px; }.help-quick-links > a { padding: 20px 17px; }.help-quick-links h3 { font-size: 13.5px; }.help-quick-links p { font-size: 11.5px; }.help-quick-links > a > svg:last-child { inset-inline-end: 13px; width: 16px; }.help-hero h1 { font-size: 31px; }.messenger { grid-template-columns: 225px 1fr; height: 665px; }.chat-head { gap: 9px; padding: 19px 16px; }.chat-head h2 { font-size: 13.5px; }.chat-head p { font-size: 11.5px; }.chat-head > .avatar { width: 31px; height: 31px; font-size: 13.5px; }.message-row > div { max-width: 86%; }.message-bubble { font-size: 13.5px; padding: 11px; }.chat-compose { gap: 8px; padding-inline: 12px; }.chat-compose .btn > svg { width: 15px; }.chat-compose .btn > span { display: none; }.chat-compose textarea { font-size: 13.5px; }.auth-layout { grid-template-columns: 1fr; }.auth-story { display: none; }.auth-main { min-height: 100dvh; padding: 28px 32px 23px; }.auth-top-link { margin-bottom: 12px; }.auth-form-wrap { max-width: 410px; padding: 42px 0; }.auth-form-wrap h2 { font-size: 32px; }.auth-footer { justify-content: center; flex-wrap: wrap; font-size: 11.5px; }.auth-form-wrap .notice { font-size: 13.5px; }.app-footer > div { gap: 10px; }.app-footer { font-size: 11.5px; padding-inline: 19px; } }
@media(max-width:480px) { .topbar { height: 61px; padding-inline: 15px; }.breadcrumb-root { display: none; }.breadcrumb > .icon { display: none; }.breadcrumb { gap: 3px; }.breadcrumb strong { font-size: 14px; }.topbar-actions { gap: 3px; }.global-search { padding: 4px; }.topbar .icon-btn { width: 30px; height: 30px; }.topbar .icon-btn > svg { width: 18px; }.profile-trigger .avatar { width: 28px; height: 28px; font-size: 11.5px; }.main-content { padding: 22px 15px 18px; }.page-head { flex-direction: column; align-items: flex-start; gap: 17px; }.page-head h1 { font-size: 27px; }.page-description { max-width: 330px; }.page-actions { width: 100%; flex-wrap: wrap; gap: 8px; }.page-actions > .btn { font-size: 14px; }.page-head .eyebrow { font-size: 14px; }.dashboard-switch { gap: 23px; margin-bottom: 17px; }.dashboard-switch > a { font-size: 13.5px; gap: 6px; padding-bottom: 10px; }.dashboard-switch > a > svg { width: 14px; }.welcome-banner { height: 253px; padding: 24px; align-items: flex-start; }.welcome-copy { width: 100%; }.welcome-copy h2 { font-size: 32px; max-width: 180px; margin-top: 12px; }.hero-eyebrow { font-size: 14px; letter-spacing: .08em; }.welcome-copy p { font-size: 11.5px; margin-top: 15px; max-width: 176px; }.hero-link { font-size: 11.5px; gap: 8px; }.welcome-banner .hero-art { position: absolute; width: 300px; height: 236px; inset-inline-end: -23px; bottom: -5px; margin: 0; transform: scale(.55); transform-origin: right bottom; }.welcome-banner .hero-dog { inset-inline-start: 109px; }.welcome-banner .hero-cat { inset-inline-start: -1px; }.welcome-banner .hero-art-badge { inset-inline-start: 45px; bottom: 4px; }.welcome-banner .hero-doodles { display: none; }[dir="rtl"] .welcome-banner .hero-art { transform-origin: left bottom; }.metrics-grid { gap: 12px; margin-bottom: 19px; }.metric-card { padding: 15px 14px; border-radius: 12px; }.metric-top { font-size: 11.5px; }.metric-icon { width: 26px; height: 26px; border-radius: 7px; }.metric-icon svg { width: 16px; }.metric-value > strong { font-size: 28px; }.sparkline { width: 48px; height: 27px; }.metric-card > p { font-size: 14px; gap: 3px; margin-top: 11px; line-height: 1.75; align-items: flex-start; }.metric-card > p > span { margin-top: 2px; }.metric-featured .metric-value > strong { font-size: 25px; }.revenue-card .card-head { padding: 18px 17px 11px; gap: 8px; }.card-head h2 { font-size: 14px; }.card-head p { font-size: 13.5px; }.revenue-card .card-head .small-select { font-size: 14px; padding: 6px 24px 6px 8px; }.revenue-summary { padding-inline: 17px; margin-top: 3px; gap: 5px; }.revenue-summary h3 { font-size: 25px; }.chart-inline-legend { font-size: 14px; gap: 4px; }.chart-inline-legend > i { width: 4px; height: 4px; }.chart-inline-legend > i.previous { margin-inline-start: 4px; }.revenue-chart { padding-inline: 6px; padding-bottom: 10px; }.revenue-chart > svg { min-height: 165px; }.agenda-list { grid-template-columns: 1fr; padding-inline: 18px; }.agenda-item { padding-block: 14px; }.agenda-item:nth-last-child(2) { border-bottom: 1px solid var(--border); }.card-head { padding: 19px 18px 13px; }.agenda-name strong { font-size: 13.5px; }.agenda-name small { font-size: 13.5px; }.agenda-time { width: 43px; }.service-donut { grid-template-columns: 135px 1fr; padding-bottom: 12px; }.service-donut .card-head { grid-column: 1 / -1; padding-bottom: 2px; }.service-donut .donut-wrap { margin: 5px 0 0 14px; width: 125px; }.service-donut .chart-legend { padding: 18px 23px 10px 15px; gap: 13px; }.service-donut .chart-legend > div { font-size: 13.5px; }.dashboard-table { min-width: 475px; }.dashboard-table td,.dashboard-table th { padding-inline: 15px; }.dashboard-table .entity small { max-width: none; }.visitors-card .card-head { gap: 5px; }.card-head .text-btn { font-size: 11.5px; }.mini-tasks { padding-inline: 18px; }.mini-tasks > label { gap: 10px; }.mini-tasks strong { font-size: 13.5px; }.mini-tasks small { font-size: 14px; }.mini-tasks .badge { font-size: 14px; }.adoption-spotlight { padding: 25px 24px; min-height: 247px; }.spotlight-art { width: 142px; height: 162px; top: 84px; inset-inline-end: -16px; }.directory-summary > div { padding: 16px 14px; gap: 11px; }.directory-summary .soft-icon { width: 35px; height: 35px; }.directory-summary strong { font-size: 22px; }.directory-summary small { font-size: 14px; }.directory-toolbar { margin-bottom: 18px; gap: 14px; }.directory-toolbar > .tabs { width: 100%; }.tabs { padding: 3px; gap: 1px; max-width: 100%; }.tabs > button { padding: 7px 9px; font-size: 11.5px; gap: 3px; }.tabs > button > span { font-size: 14px; margin-inline-start: 0; padding-inline: 4px; }.directory-toolbar .toolbar-actions { width: 100%; justify-content: space-between; }.directory-search-row { flex-wrap: wrap; gap: 9px; }.directory-search-row .search-input { width: 100%; }.directory-search-row > .muted { font-size: 11.5px; }.pet-grid { gap: 13px; }.pet-card-art { height: 145px; }.pet-card-art > .badge { top: 9px; inset-inline-start: 9px; font-size: 14px; gap: 3px; padding: 4px 6px; }.pet-card-art > .badge i { width: 3px; height: 3px; }.pet-card-art > .icon-btn { top: 7px; inset-inline-end: 7px; width: 25px; height: 25px; }.pet-card-art > .icon-btn svg { width: 13px; }.pet-card-body { padding: 13px 12px 0; }.pet-card-title h3 { font-size: 19px; }.pet-species { font-size: 14px; padding: 2px 5px; }.pet-card-body > p { font-size: 14px; margin-top: 5px; }.pet-card-body > p > span { margin: 0 3px; }.pet-tags { gap: 4px; margin-top: 10px; }.pet-tags > span { font-size: 14px; padding: 3px 6px; }.pet-card-owner { font-size: 14px; gap: 5px; padding: 10px 0; margin-top: 12px; }.pet-card-owner > span:not(.avatar):not(.shelter-tiny-icon) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.pet-card-owner .avatar-xs { width: 20px; height: 20px; font-size: 14px; }.pet-card-owner > a svg { width: 13px; height: 13px; }.shelter-tiny-icon { width: 19px; height: 19px; }.shelter-tiny-icon svg { width: 11px; }.table-toolbar { padding: 15px; }.table-toolbar .toolbar-actions { width: 100%; justify-content: flex-end; }.table-toolbar .toolbar-actions > select { margin-inline-end: auto; }.table-foot { padding: 13px 15px; }.table-foot > span { font-size: 14px; }.pagination > button:not(.icon-btn) { width: 25px; height: 25px; font-size: 11.5px; }.pagination { gap: 2px; }.table-scroll > table { min-width: 550px; }.invoice-paper .table-scroll > table { min-width: 375px; }.notice { font-size: 13.5px; padding: 12px 13px; gap: 9px; margin-top: 18px; }.notice > svg { width: 16px; }.profile-banner { padding: 18px; gap: 15px; }.profile-pet-art { width: 85px; height: 104px; border-radius: 17px; }.profile-intro { min-width: 0; }.profile-intro h1 { font-size: 29px; }.profile-intro > div:first-child { gap: 10px; }.profile-intro .badge { font-size: 14px; padding: 4px 6px; }.profile-intro > p { font-size: 11.5px; }.profile-intro > small { font-size: 14px; margin-top: 9px; }.profile-intro .pet-tags { margin-top: 8px; }.profile-actions { gap: 8px; }.profile-actions .btn { flex: 1; }.profile-grid > div:last-child { display: block; }.profile-grid .owner-card { padding-top: 0; }.profile-grid .owner-contact span { font-size: 14px; }.client-profile-grid { grid-template-columns: 1fr; }.client-pets-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.client-pets-grid .pet-card-art { height: 145px; }.client-profile-grid > .owner-card { padding-bottom: 22px; }.padded-card { padding: 20px; }.detail-grid { gap: 21px; }.schedule-overview { padding: 15px; gap: 12px 17px; }.schedule-overview > span { font-size: 11.5px; }.schedule-overview .demo-date { width: auto; margin-inline-start: 0; font-size: 14px; }.calendar-nav h2 { font-size: 18px; }.calendar-nav { gap: 5px; width: 100%; }.calendar-nav .icon-btn { width: 28px; }.calendar-toolbar .toolbar-actions { flex-wrap: wrap; gap: 12px; }.calendar-toolbar .toolbar-actions > select { width: 100%; }.calendar-toolbar .tabs { width: 100%; justify-content: space-between; }.calendar-toolbar .tabs > button { flex: 1; }.calendar-month { overflow-x: auto; }.calendar-weekdays,.month-grid { min-width: 570px; }.month-event > span { display: block; }.day-agenda > button { position: relative; gap: 11px; flex-wrap: wrap; padding: 16px 0; }.day-agenda .entity { width: auto; flex: 1; }.day-agenda .entity strong { font-size: 14px; }.day-agenda .entity small { font-size: 14px; }.day-agenda > button > time { font-size: 11.5px; width: 48px; }.day-service { flex: 0 0 100%; margin-inline-start: 60px; order: 3; margin-top: -4px; font-size: 11.5px; }.day-agenda .badge { font-size: 14px; padding: 4px 6px; }.day-agenda .pet-avatar { width: 32px; height: 32px; }.boarding-summary { grid-template-columns: 1fr; padding: 4px 20px; }.boarding-summary > div { border: 0; border-bottom: 1px solid var(--border); padding: 16px 0; grid-template-columns: 36px 37px 1fr; }.boarding-summary > div svg { grid-row: auto; }.boarding-summary > div > strong { font-size: 25px; }.boarding-summary > div > span { font-size: 13.5px; }.room-grid,.service-grid,.team-grid { grid-template-columns: 1fr; gap: 16px; }.room-card,.service-card { padding: 22px; }.room-card > h3 { font-size: 19px; }.room-pet .entity small { font-size: 13.5px; }.room-pet .pet-avatar { width: 42px; height: 42px; }.room-pet .entity strong { font-size: 14px; }.room-pet .entity { gap: 11px; }.room-card .empty-room { min-height: 145px; }.team-card { padding: 20px 23px 24px; }.team-card > h3 { font-size: 21px; }.team-card > p { font-size: 13.5px; }.team-email { font-size: 14px; }.team-grid .avatar-xl { width: 92px; height: 92px; font-size: 28px; }.adoption-note { gap: 10px; padding: 17px; }.adoption-note .soft-icon { width: 33px; height: 33px; }.adoption-note .soft-icon svg { width: 21px; }.adoption-note > div { min-width: 0; flex: 1; }.adoption-note strong { font-size: 13.5px; }.adoption-note p { font-size: 11.5px; }.adoption-note > .badge { margin-inline-start: 43px; font-size: 14px; }.adoption-board { min-width: 980px; gap: 14px; }.task-card { gap: 11px; padding: 17px; position: relative; flex-wrap: wrap; }.task-content { min-width: calc(100% - 44px); }.task-content h3 { font-size: 14px; padding-inline-end: 6px; }.task-content p { font-size: 13.5px; }.task-meta { gap: 5px; font-size: 14px; }.task-card > .badge { margin-inline-start: 27px; }.task-actions { flex-direction: row; margin-inline-start: auto; margin-top: 0; }.task-actions .icon-btn { width: 26px; height: 24px; }.task-actions .icon-btn svg { width: 15px; }.service-grid { margin-top: 19px; }.service-card > p { min-height: auto; }.service-facts { padding-top: 15px; }.service-card-top { margin-bottom: 15px; }.grooming-banner { position: relative; min-height: 300px; padding: 25px; align-items: flex-start; }.grooming-banner > div:first-child { z-index: 2; }.grooming-banner .eyebrow { font-size: 14px; }.grooming-banner h2 { font-size: 32px; margin-top: 17px; }.grooming-banner p { max-width: 174px; font-size: 13.5px; }.grooming-banner .btn { font-size: 13.5px; padding-inline: 12px; margin-top: 20px; }.grooming-art { position: absolute; width: 137px; height: 160px; bottom: 26px; inset-inline-end: -12px; opacity: .95; }.grooming-art > .pet-art { border-width: 6px; }.floating-scissors { width: 38px; height: 38px; border-radius: 13px; }.floating-scissors svg { width: 21px; }.studio-list { grid-template-columns: 1fr; }.studio-pet { padding: 15px; }.studio-pet .entity small { display: block; }.shelter-banner { min-height: 365px; padding: 25px; align-items: flex-start; position: relative; }.shelter-banner .eyebrow { font-size: 14px; }.shelter-banner h2 { font-size: 32px; }.shelter-banner > div:first-child { z-index: 2; }.shelter-banner p { font-size: 13.5px; }.shelter-banner .hero-link { margin-top: 11px; }.shelter-art { position: absolute; inset-inline-start: 50%; bottom: -10px; margin: 0; width: 375px; transform: translateX(-50%) scale(.68); transform-origin: bottom center; }[dir="rtl"] .shelter-art { transform: translateX(50%) scale(.68); }.shelter-pets { gap: 14px; }.shelter-pet-photo { height: 146px; }.shelter-pet-card > div:last-child { padding: 13px; }.shelter-pet-card h3 { font-size: 19px; }.shelter-pet-card p { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.shelter-pet-card p > span { margin: 0 3px; }.shelter-pet-photo > span { width: 26px; height: 26px; top: 9px; inset-inline-end: 9px; }.shelter-pet-photo > span svg { width: 14px; }.section-title { margin-top: 22px; }.section-title h2 { font-size: 17px; }.section-title .text-btn { font-size: 11.5px; }.metrics-grid.three { grid-template-columns: 1fr; }.metrics-grid.three .metric-card { padding: 17px 19px; }.metrics-grid.three .metric-top { font-size: 14px; }.metrics-grid.three .metric-value > strong { font-size: 31px; }.metrics-grid.three .sparkline { display: block; width: 95px; }.metrics-grid.three .metric-icon { width: 30px; height: 30px; }.metrics-grid.three .metric-card > p { font-size: 11.5px; }.invoice-paper { padding: 25px 20px 20px; }.invoice-header { padding-bottom: 25px; }.invoice-header .brand { font-size: 22px; gap: 8px; }.invoice-header .brand svg { width: 31px; height: 31px; }.invoice-header h2 { font-size: 17px; }.invoice-header > div > strong { font-size: 14px; }.invoice-addresses { padding-block: 23px; gap: 16px; }.invoice-addresses p { font-size: 11.5px; }.invoice-addresses h3 { font-size: 13.5px; }.invoice-dates { gap: 10px; }.invoice-dates > p { font-size: 14px; }.invoice-lower { grid-template-columns: 1fr; gap: 18px; margin-top: 21px; }.invoice-totals { grid-row: 1; }.invoice-totals > p { font-size: 14px; }.invoice-note { border-top: 1px solid var(--border); padding-top: 19px; }.invoice-thanks { margin-top: 27px; font-size: 11.5px; }.invoice-lines td { padding-inline: 12px; }.invoice-demo-label { display: inline-block; }.report-summary-list > div { font-size: 13.5px; }.messenger { display: block; height: calc(100dvh - 185px); min-height: 520px; }.inbox-sidebar { height: 100%; border: 0; }.inbox-title { padding: 21px 21px 15px; }.inbox-title h2 { font-size: 16px; }.inbox-search { padding-inline: 20px; }.inbox-search > .search-input { height: 39px; }.conversation-item { padding: 20px; }.conversation-item > .avatar { width: 41px; height: 41px; font-size: 14px; }.conversation-name strong { font-size: 13.5px; }.conversation-item small { font-size: 14px; }.conversation-item time { font-size: 11.5px; }.chat-panel { display: none; height: 100%; }.show-thread .inbox-sidebar { display: none; }.show-thread .chat-panel { display: flex; }.chat-back { display: inline-flex; width: 25px; margin-inline-start: -5px; }.chat-head { padding: 18px 17px; }.chat-head h2 { font-size: 14px; }.chat-head > span:not(.avatar) { min-width: 0; }.chat-head p { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 174px; }.chat-head > .avatar { width: 34px; height: 34px; font-size: 14px; }.chat-messages { padding: 23px 17px; }.message-bubble { font-size: 14px; }.chat-compose { padding: 16px 16px 12px; gap: 10px; }.chat-compose textarea { font-size: 14px; }.chat-compose .btn { min-width: 39px; }.chat-compose .btn svg { width: 17px; }.settings-layout { gap: 19px; }.settings-nav { gap: 3px; padding-bottom: 10px; }.settings-nav > button { padding: 10px; font-size: 11.5px; }.settings-nav > button > svg { width: 15px; }.settings-card { padding: 20px; }.settings-card > .card-head { padding-bottom: 19px; margin-bottom: 21px; }.settings-card .card-head h2 { font-size: 17px; }.profile-settings-avatar { gap: 16px; margin-bottom: 22px; }.profile-settings-avatar > .avatar { width: 68px; height: 68px; font-size: 22px; }.profile-settings-avatar strong { font-size: 16px; }.form-grid { grid-template-columns: 1fr; gap: 17px; }.field-full { grid-column: auto; }.field input,.field select { min-height: 42px; font-size: 14px; }.field > span:first-child { font-size: 13.5px; }.theme-options { grid-template-columns: 1fr; }.theme-option { display: flex; gap: 14px; }.theme-preview { width: 108px; height: 70px; }.theme-option > span { font-size: 13.5px; flex: 1; }.theme-option > span > svg { display: block; }.toggle-row { gap: 17px; padding-block: 20px; }.toggle-row strong { font-size: 14px; }.toggle-row small { font-size: 13.5px; }.data-action { flex-wrap: wrap; align-items: flex-start; gap: 11px; }.data-action > .soft-icon { width: 34px; height: 34px; }.data-action h3 { font-size: 14px; }.data-action > div { min-width: 200px; flex: 1; }.data-action > .btn { margin-inline-start: 45px; font-size: 13.5px; }.components-grid .component-demo { gap: 8px; }.components-grid .component-demo .btn { font-size: 13.5px; padding-inline: 13px; }.help-hero { padding: 27px 20px; }.help-hero > .eyebrow { font-size: 14px; }.help-hero h1 { font-size: 29px; }.help-hero p { font-size: 14px; }.help-search { margin-top: 23px; padding-inline: 12px; }.help-search input { font-size: 14px; }.help-quick-links { grid-template-columns: 1fr; gap: 13px; }.help-quick-links > a { padding: 20px 24px 20px 66px; position: relative; }.help-quick-links > a > svg:first-child { position: absolute; top: 23px; left: 23px; width: 25px; }.help-quick-links > a h3 { font-size: 14px; }.help-quick-links > a p { font-size: 13.5px; }.help-quick-links > a > svg:last-child { top: 28px; inset-inline-end: 20px; width: 17px; }[dir="rtl"] .help-quick-links > a { padding-inline: 66px 24px; }[dir="rtl"] .help-quick-links > a > svg:first-child { left: auto; right: 23px; }.faq-card .card-head { padding: 20px; }.faq-card details { padding-inline: 20px; }.faq-card summary { font-size: 14px; line-height: 1.75; padding: 19px 0; }.faq-card details > p { font-size: 14px; padding-inline-end: 0; }.auth-main { padding: 24px 24px 21px; }.auth-form-wrap { padding: 35px 0; }.auth-form-wrap h2 { font-size: 30px; }.auth-subtitle { font-size: 13.5px; margin-bottom: 27px; }.auth-form-wrap .field input { min-height: 46px; font-size: 14px; }.auth-form-wrap .field > span { font-size: 13.5px; }.auth-form-wrap .btn { min-height: 45px; font-size: 13.5px; }.auth-form-wrap .notice { font-size: 11.5px; }.auth-footer { font-size: 14px; }.auth-story-copy h1 { font-size: 38px; }.auth-top-link a { font-size: 13.5px; }.not-found { padding: 34px 10px 40px; }.not-found h1 { font-size: 32px; }.not-found-art { width: 175px; height: 190px; }.app-footer { padding: 15px 16px 21px; font-size: 14px; gap: 9px; }.app-footer > div { gap: 10px; font-size: 14px; }.modal { width: calc(100vw - 24px); max-height: calc(100dvh - 28px); border-radius: 16px; }.modal-head { padding: 21px 21px 17px; }.modal-head h2 { font-size: 20px; }.modal-head p { font-size: 13.5px; }.form-body { padding: 21px; }.modal-foot { padding: 17px 21px; }.detail-grid { gap: 20px 14px; }.detail-grid strong { font-size: 14px; }.detail-grid small { font-size: 11.5px; }.toast-stack { inset-inline-end: 16px; inset-block-end: 16px; }.toast { padding: 12px 13px; font-size: 14px; }.notifications { position: fixed; inset-inline: 12px; inset-block-start: 69px; width: auto; }.notification-row { padding: 15px 17px; }.account-menu { width: 215px; }.compact .main-content { padding: 19px 13px; }.compact .pet-card-art { height: 130px; }.compact .metric-card { padding: 12px; }.compact .metric-value > strong { font-size: 24px; } }
/* Keep the top bar inside narrow viewports: the breadcrumb truncates and the website link collapses to its icon. */
@media(max-width:560px) { .topbar > .breadcrumb { min-width: 0; overflow: hidden; }.topbar > .breadcrumb strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.topbar-actions { flex: 0 0 auto; }.topbar-website-btn > span { display: none; }.topbar-website-btn { padding: 6px 8px; }.tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }.tabs::-webkit-scrollbar { display: none; } }
@media(max-width:360px) { .page-head h1 { font-size: 25px; }.dashboard-switch { gap: 16px; }.welcome-banner { padding: 22px; }.welcome-copy h2 { font-size: 30px; }.welcome-banner .hero-art { transform: scale(.49); inset-inline-end: -16px; }.metric-value > strong { font-size: 25px; }.metric-featured .metric-value > strong { font-size: 23px; }.sparkline { width: 36px; }.metric-top { font-size: 14px; }.metric-card { padding-inline: 12px; }.metric-card > p { font-size: 14px; }.metric-icon { width: 23px; height: 23px; }.chart-inline-legend { font-size: 14px; }.pet-card-art { height: 130px; }.pet-card-title h3 { font-size: 17px; }.pet-card-body { padding-inline: 10px; }.pet-card-body > p { font-size: 14px; }.pet-tags > span { font-size: 14px; }.tabs > button { padding-inline: 7px; font-size: 14px; }.tabs > button > span { padding-inline: 3px; }.profile-intro h1 { font-size: 25px; }.profile-pet-art { width: 73px; height: 93px; }.profile-intro > p { font-size: 14px; }.profile-intro .badge { font-size: 14px; }.profile-intro > div:first-child { gap: 7px; }.profile-intro > small { font-size: 14px; }.service-donut { grid-template-columns: 127px 1fr; }.service-donut .chart-legend { padding-inline: 13px; }.help-hero h1 { font-size: 26px; }.data-action > div { min-width: 170px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
@media print { :root,:root[data-theme="dark"] { color-scheme: light; --card:#fff; --ink:#213327; --text:#374b3c; --muted:#617565; --border:#dde5d9; --soft:#f3f5ee; --mint:#eef2e7; --accent:#3b7155; }.sidebar,.topbar,.app-footer,.page-head,.back-link,.notice,.toast-stack,dialog,.skip-link { display:none !important; }.main-shell { margin:0; }.main-content { padding:0; }.invoice-paper { padding:25px; box-shadow:none; border:0; max-width:none; }.invoice-paper table { min-width:0 !important; }.invoice-lines { break-inside:avoid; }.invoice-lower { break-inside:avoid; }.invoice-addresses { grid-template-columns:1fr 1fr 1fr; }.invoice-dates { grid-column:auto; display:block; }.invoice-dates > p { display:flex; flex-direction:row; }.invoice-lower { grid-template-columns:1fr 260px; }.invoice-totals { grid-row:auto; }.table-scroll { overflow:visible; }body { background:white; }@page { margin:15mm; size:A4; } }

/* Self-contained developer guide and constrained scroll regions. */
.help-quick-links > button { text-align: start; color: inherit; cursor: pointer; }
.developer-guide { line-height: 1.8; }
.developer-guide h3 { margin-top: 24px; font-size: 15px; }
.developer-guide pre { background: var(--bg); padding: 18px; border: 1px solid var(--border); border-radius: 12px; overflow: auto; font-size: 13.5px; }
.developer-guide code { font-size: 13.5px; }

/* Topbar Website Link */
.topbar-website-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 8px;
  background: var(--soft);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--border);
  transition: all .16s ease;
  white-space: nowrap;
}
.topbar-website-btn:hover {
  background: var(--mint);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* =====================================================================
   PAWTELIO MARKETING LANDING PAGE STYLES
   ===================================================================== */
.landing-page {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.landing-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}

/* 1. Header / Navbar */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--card) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: all .2s ease;
}
.landing-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.landing-brand {
  display: flex;
  align-items: center;
}
.landing-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.landing-nav-links a {
  font-size: 14px;
  font-weight: 550;
  color: var(--muted);
  transition: color .15s;
}
.landing-nav-links a:hover {
  color: var(--accent);
}
.landing-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.landing-nav-actions .theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--soft);
  color: var(--muted);
}
.landing-nav-actions .theme-toggle:hover {
  color: var(--ink);
}
.landing-login-btn {
  font-size: 13.5px;
  font-weight: 600;
}
.landing-demo-btn {
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
}

/* === Hamburger button (hidden on desktop, shown on mobile) === */
.landing-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 8px;
  border: none;
  background: var(--soft);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  transition: background .15s;
}
.landing-hamburger:hover {
  background: var(--border);
}
.landing-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s;
  transform-origin: center;
}
/* Animate to X when open */
.landing-hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.landing-hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.landing-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* === Mobile menu overlay === */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: overlayFadeIn .2s ease;
}
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* === Mobile drawer === */
.mobile-menu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  width: min(320px, 88vw);
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 40px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  padding: 0;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.mobile-menu-drawer.is-open {
  transform: translateX(0);
}
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mobile-menu-close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
}
.mobile-menu-close:hover {
  background: var(--border);
  color: var(--ink);
}
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  flex: 1;
}
.mobile-menu-nav a {
  display: block;
  padding: 13px 14px;
  font-size: 16px;
  font-weight: 550;
  color: var(--text);
  border-radius: 10px;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.mobile-menu-nav a:hover {
  background: var(--soft);
  color: var(--accent);
}
.mobile-menu-cta {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.mobile-menu-theme {
  padding: 14px 20px 20px;
  flex-shrink: 0;
}
.mobile-theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-radius: 10px;
  background: var(--soft);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.mobile-theme-toggle:hover {
  background: var(--border);
  color: var(--ink);
}

/* 2. Hero Section */
.landing-hero {
  padding: 70px 0 60px;
  position: relative;
}
.landing-hero .landing-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.landing-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.landing-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 30px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 24px;
}
.badge-sparkle {
  color: #c9933e;
  display: inline-flex;
}
.badge-tag {
  background: var(--mint);
  color: var(--mint-ink);
  padding: 2px 7px;
  border-radius: 12px;
  font-size: 11px;
}
.landing-hero-title {
  font-size: clamp(36px, 3.8vw, 54px);
  line-height: 1.12;
  letter-spacing: -.04em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 20px;
}
.landing-hero-gradient {
  color: var(--accent);
  background: linear-gradient(135deg, var(--accent) 0%, #689950 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.landing-hero-subtitle {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 580px;
  margin-bottom: 32px;
}
.landing-hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.landing-hero-cta .btn-lg {
  min-height: 48px;
  padding: 12px 24px;
  font-size: 14.5px;
  font-weight: 600;
}
.landing-hero-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  width: 100%;
}
.hero-avatars {
  display: flex;
  align-items: center;
}
.hero-avatars > .avatar {
  margin-inline-end: -10px;
  border: 2px solid var(--card);
}
.hero-proof-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hero-stars {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #df9e38;
}
.hero-stars strong {
  font-size: 13px;
  color: var(--ink);
  margin-inline-start: 4px;
}
.hero-proof-text span {
  font-size: 12px;
  color: var(--muted);
}

/* Hero Preview Window */
.landing-hero-preview {
  position: relative;
}
.hero-preview-window {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 60px #1e332115;
  overflow: hidden;
  transition: transform .3s ease;
}
.hero-preview-window:hover {
  transform: translateY(-3px);
}
.preview-window-top {
  background: var(--soft);
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.window-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.window-controls .ctrl {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.window-controls .red { background: #ef6b63; }
.window-controls .yellow { background: #f5be4f; }
.window-controls .green { background: #62c554; }
.window-title-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
}
.window-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 600;
  font-size: 11px;
}
.live-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5ab144;
  box-shadow: 0 0 0 3px #5ab14433;
  animation: pulse-ring 2s infinite;
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 #5ab14455; }
  70% { box-shadow: 0 0 0 6px #5ab14400; }
  100% { box-shadow: 0 0 0 0 #5ab14400; }
}
.preview-window-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.preview-welcome-card {
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.preview-welcome-text h3 {
  font-size: 19px;
  font-weight: 650;
  margin: 4px 0 6px;
  color: var(--ink);
}
.preview-welcome-text p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 10px;
}
.preview-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.preview-welcome-art {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--card);
  flex-shrink: 0;
}
.preview-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.preview-metric {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.preview-metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11.5px;
}
.preview-metric strong {
  font-size: 17px;
  color: var(--ink);
}
.metric-trend {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.metric-trend.up {
  color: #3b7b4d;
  font-weight: 600;
}
.preview-appointments-peek {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--card);
}
.peek-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.peek-head strong {
  font-size: 13.5px;
}
.peek-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.peek-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--soft);
  border-radius: 8px;
}
.peek-time {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  min-width: 65px;
}
.peek-pet {
  flex: 1;
}
.peek-pet strong {
  font-size: 12.5px;
  display: block;
}
.peek-pet small {
  font-size: 11px;
  color: var(--muted);
}

/* Floating badges */
.floating-card {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 36px #10241718;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
  animation: float 4s ease-in-out infinite;
}
.floating-card.float-left {
  top: -18px;
  inset-inline-start: -24px;
}
.floating-card.float-right {
  bottom: -22px;
  inset-inline-end: -24px;
  animation-delay: 2s;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.float-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.float-icon.green {
  background: var(--mint);
  color: var(--accent);
}
.float-icon.amber {
  background: var(--cream);
  color: #b07e3a;
}
.floating-card strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
}
.floating-card small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

/* 3. Trust Stats Strip */
.landing-stats-strip {
  padding: 40px 0;
  background: var(--soft);
  border-block: 1px solid var(--border);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  text-align: center;
}
.stat-box h3 {
  font-size: clamp(32px, 2.5vw, 42px);
  font-weight: 700;
  letter-spacing: -.05em;
  color: var(--accent);
  margin-bottom: 4px;
}
.stat-box p {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--ink);
  margin-bottom: 3px;
}
.stat-box small {
  font-size: 12px;
  color: var(--muted);
}

/* Section Common Headings */
.section-head-center {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 50px;
}
.section-head-center .eyebrow {
  margin-bottom: 10px;
  display: block;
}
.section-head-center h2 {
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 14px;
}
.section-head-center p {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.65;
}

/* 4. Features Section */
.landing-features {
  padding: 90px 0;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: var(--shadow);
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px #19361e12;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.feature-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}
.feature-icon-box.green { background: var(--mint); color: var(--accent); }
.feature-icon-box.amber { background: var(--cream); color: #ad7c39; }
.feature-icon-box.purple { background: var(--lavender); color: #87609a; }
.feature-icon-box.blue { background: var(--blue); color: #5d8191; }
.feature-card h3 {
  font-size: 18px;
  font-weight: 650;
  color: var(--ink);
  margin-bottom: 10px;
}
.feature-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 20px;
}
.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 600;
  font-size: 13.5px;
}
.feature-link:hover {
  gap: 10px;
}

/* 5. Interactive Solution Tabs */
.landing-solutions {
  padding: 85px 0;
  background: var(--soft);
  border-block: 1px solid var(--border);
}
.solution-tabs-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.solution-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
  transition: all .16s ease;
}
.solution-tab-btn:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--soft) 50%, var(--card));
}
.solution-tab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 4px 14px #2b563833;
}
.solution-showcase-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 44px 48px;
  box-shadow: 0 16px 48px #1024170e;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}
.solution-details h3 {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  margin: 14px 0 12px;
  line-height: 1.25;
}
.solution-desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 24px;
}
.solution-highlights {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.highlight-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink);
  font-weight: 550;
}
.check-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.solution-metric-callout {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--soft);
  border-radius: 10px;
  color: var(--accent);
  font-size: 13.5px;
  margin-bottom: 28px;
}
.solution-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.solution-visual {
  display: flex;
  justify-content: center;
}
.solution-art-wrap {
  width: 280px;
  height: 280px;
  border-radius: 140px 140px 50px 50px;
  overflow: hidden;
  border: 10px solid var(--soft);
  position: relative;
  box-shadow: 0 16px 40px #243c2214;
}
.solution-art-badge {
  position: absolute;
  bottom: 16px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--card);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  box-shadow: 0 6px 18px #00000015;
  color: var(--accent);
}

/* 6. Testimonials */
.landing-testimonials {
  padding: 95px 0;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.testimonial-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  position: relative;
}
.testimonial-card.featured {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--mint) 25%, var(--card));
}
.testimonial-badge {
  position: absolute;
  top: -12px;
  inset-inline-end: 24px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 20px;
}
.testimonial-rating {
  display: flex;
  gap: 3px;
  color: #e29c36;
  margin-bottom: 18px;
}
.testimonial-quote {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text);
  font-style: italic;
  flex: 1;
  margin-bottom: 24px;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-author strong {
  display: block;
  font-size: 14px;
  color: var(--ink);
}
.testimonial-author small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* 7. Pricing */
.landing-pricing {
  padding: 90px 0;
  background: var(--soft);
  border-block: 1px solid var(--border);
}
.billing-switch-wrap {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}
.billing-switch {
  display: inline-flex;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.billing-btn {
  padding: 8px 18px;
  border: none;
  background: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .16s ease;
}
.billing-btn.active {
  background: var(--soft);
  color: var(--ink);
  box-shadow: 0 1px 4px #00000008;
}
.discount-pill {
  background: var(--mint);
  color: var(--mint-ink);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 6px;
}
.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
.pricing-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  position: relative;
}
.pricing-card.popular {
  border-color: var(--accent);
  box-shadow: 0 16px 42px #264a3118;
  transform: scale(1.02);
  z-index: 2;
}
.popular-badge {
  position: absolute;
  top: -13px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 5px 14px;
  border-radius: 20px;
}
.pricing-head h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 6px 0 8px;
}
.pricing-head p {
  font-size: 13.5px;
  color: var(--muted);
  min-height: 42px;
  line-height: 1.55;
}
.pricing-cost {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 20px 0 4px;
}
.pricing-cost strong {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--ink);
}
.pricing-cost span {
  font-size: 14px;
  color: var(--muted);
}
.billing-annual-note {
  font-size: 12px;
  color: var(--accent);
  font-weight: 550;
  display: block;
}
.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 0;
  border-block: 1px solid var(--border);
  margin: 24px 0;
  flex: 1;
}
.p-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text);
}
.p-feat svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* 8. FAQ */
.landing-faq {
  padding: 95px 0;
}
.faq-accordion-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s;
}
.faq-item.open {
  border-color: var(--accent);
}
.faq-question-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  text-align: start;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.faq-toggle-icon {
  color: var(--muted);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.faq-item.open .faq-toggle-icon {
  transform: rotate(45deg);
  color: var(--accent);
}
.faq-answer {
  padding: 0 24px 22px;
}
.faq-answer p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

/* 9. Pre-Footer Call to Action */
.landing-cta-banner {
  padding: 40px 0 80px;
}
.cta-box {
  background: linear-gradient(135deg, color-mix(in srgb, var(--mint) 65%, var(--card)) 0%, color-mix(in srgb, var(--cream) 70%, var(--card)) 100%);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 56px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
.cta-content {
  max-width: 600px;
  z-index: 2;
}
.cta-content h2 {
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.15;
  letter-spacing: -.04em;
  font-weight: 700;
  color: var(--ink);
  margin: 12px 0 16px;
}
.cta-content p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 30px;
}
.cta-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cta-art {
  width: 240px;
  height: 240px;
  border-radius: 120px 120px 40px 40px;
  overflow: hidden;
  border: 8px solid var(--card);
  box-shadow: 0 16px 40px #1e361b18;
  flex-shrink: 0;
}

/* 10. Footer */
.landing-footer {
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 70px 0 35px;
  margin-top: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 50px;
}
.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 340px;
}
.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  width: fit-content;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.footer-col a {
  font-size: 13.5px;
  color: var(--muted);
  transition: color .15s;
}
.footer-col a:hover {
  color: var(--accent);
}
.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-bottom-links a:hover {
  color: var(--accent);
}

/* =====================================================================
   UPGRADED AUTHENTICATION SUITE STYLES
   ===================================================================== */
.demo-accounts-card {
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 22px;
}
.demo-accounts-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--accent);
  margin-bottom: 10px;
}
.demo-buttons-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.demo-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  transition: all .15s ease;
}
.demo-pill-btn:hover {
  background: var(--mint);
  border-color: var(--accent);
  color: var(--accent);
}
.field-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.password-strength-wrap {
  margin-top: 8px;
}
.strength-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 5px;
}
.strength-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  transition: background .2s ease;
}
.strength-bar.active.red { background: #d9534f; }
.strength-bar.active.amber { background: #f0ad4e; }
.strength-bar.active.mint { background: #68a35e; }
.strength-bar.active.green { background: #3b7155; }
.strength-label {
  font-size: 11.5px;
  color: var(--muted);
}
.otp-field-group {
  margin-bottom: 22px;
}
.otp-inputs-row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin: 10px 0;
}
.otp-box {
  width: 48px;
  height: 54px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
}
.otp-box:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Narrow screens: let the auth column shrink instead of being held open by the
   fixed-width code boxes, and let the six boxes share the remaining width. */
@media(max-width:560px) {
  .auth-layout, .auth-main, .auth-form-wrap, .auth-form { min-width: 0; }
  .auth-main { padding-inline: 16px; }
  .otp-inputs-row { gap: 6px; }
  .otp-box { width: auto; flex: 1 1 0; min-width: 0; font-size: 19px; }
}
.otp-resend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}
.lock-avatar-wrap {
  position: relative;
  width: fit-content;
  margin: 0 auto 20px;
}
.lock-status-badge {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  border: 2px solid var(--card);
}
.auth-nav-strip {
  margin: 20px 0 10px;
  padding: 12px 14px;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.strip-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.strip-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.strip-links a {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: all .15s ease;
}
.strip-links a:hover,
.strip-links a.active {
  background: var(--mint);
  border-color: var(--accent);
  color: var(--accent);
}
.auth-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 20px;
  background: #dfe5d2;
  color: #3f5539;
  font-size: 11.5px;
  font-weight: 600;
}
.auth-quote {
  padding-top: 14px;
}
.auth-quote p {
  font-size: 13.5px;
  color: #4a5c43;
  font-style: italic;
  margin-bottom: 4px;
}
.auth-quote small {
  font-size: 11.5px;
  color: #63775c;
}
.auth-back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.demo-badge-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  background: var(--soft);
  color: var(--accent);
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* Responsive adjustments for Landing Page */
@media (max-width: 1050px) {
  .landing-hero .landing-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .features-grid,
  .testimonials-grid,
  .pricing-cards-grid {
    grid-template-columns: 1fr;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .solution-showcase-box {
    grid-template-columns: 1fr;
    padding: 32px 28px;
  }
  .solution-visual {
    order: -1;
  }
  .solution-art-wrap {
    width: 220px;
    height: 220px;
  }
  .cta-box {
    flex-direction: column;
    padding: 40px 32px;
    text-align: center;
  }
  .cta-buttons {
    justify-content: center;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  /* Show hamburger, hide desktop-only nav items */
  .landing-hamburger {
    display: flex;
  }
  .landing-nav-links {
    display: none;
  }
  /* Hide the Sign-in and Demo buttons in topbar (they appear in drawer) */
  .landing-login-btn,
  .landing-demo-btn {
    display: none;
  }
  /* Tighten nav padding */
  .landing-nav-inner {
    padding: 12px 16px;
  }
  /* Keep only theme toggle + hamburger visible in actions */
  .landing-nav-actions .theme-toggle {
    width: 38px;
    height: 38px;
  }
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .pricing-card.popular {
    transform: none;
  }
  .landing-container {
    padding: 0 20px;
  }
  .field-grid-2 {
    grid-template-columns: 1fr;
  }
  /* Hero: make the preview image not overflow */
  .landing-hero-preview {
    display: none;
  }
  .landing-hero .landing-container {
    grid-template-columns: 1fr;
  }
  .landing-hero-title {
    font-size: clamp(28px, 8vw, 42px);
  }
  .landing-hero-cta {
    flex-direction: column;
    width: 100%;
  }
  .landing-hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
}