:root {
  --ink: #20312b;
  --muted: #708179;
  --muted-light: #99a9a2;
  --green: #24664f;
  --green-dark: #174b3a;
  --green-soft: #eaf5ef;
  --green-pale: #f4f8f5;
  --coral: #d27d4d;
  --coral-soft: #fbeee6;
  --blue-soft: #e7f0f4;
  --line: #e2ebe6;
  --paper: #fbfcfa;
  --white: #ffffff;
  --shadow: 0 18px 45px rgba(27, 60, 48, .10);
  --shadow-soft: 0 8px 22px rgba(27, 60, 48, .06);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.site-header, .org-topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 5.5vw; background: rgba(251, 252, 250, .96); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--green); color: #fff; font-weight: 800; letter-spacing: -.04em; }
.brand-word { font-size: 17px; font-weight: 780; letter-spacing: -.04em; color: var(--green-dark); }
.public-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; margin-right: 38px; font-size: 13px; color: #677a71; }
.public-nav a { transition: color .2s ease; }
.public-nav a:hover { color: var(--green); }
.header-actions, .org-top-actions { display: flex; align-items: center; gap: 12px; }
.header-user { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; color: var(--green-dark); background: transparent; font-size: 11px; font-weight: 720; }
.header-user small { color: var(--muted); font-size: 9px; font-weight: 500; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid transparent; font-weight: 720; font-size: 13px; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--green); color: #fff; box-shadow: 0 8px 17px rgba(36, 102, 79, .18); }
.button-primary:hover { background: var(--green-dark); }
.button-secondary { background: var(--green-soft); color: var(--green); }
.button-ghost { background: transparent; color: var(--green); border-color: var(--line); }
.button-ghost:hover { background: var(--green-pale); border-color: #c7ddd2; }
.button-light { background: #fff; color: var(--green-dark); }
.button-small { min-height: 36px; padding: 0 13px; font-size: 12px; }
.button-full { width: 100%; }
.icon { display: inline-grid; place-items: center; line-height: 1; font-size: 15px; }
.icon-arrow { font-size: 17px; }
.icon-chevron { font-size: 20px; line-height: .5; }
.avatar-button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 0; background: #e9d7c7; color: #704e39; font-weight: 800; font-size: 12px; }

.hero-section { min-height: 620px; display: grid; grid-template-columns: 1.02fr .98fr; gap: 4vw; align-items: center; max-width: 1220px; margin: 0 auto; padding: 72px 5.5vw 78px; }
.hero-copy { max-width: 590px; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-copy h1 { margin: 17px 0 18px; color: var(--green-dark); font-size: clamp(44px, 5.8vw, 76px); line-height: 1.05; letter-spacing: -.075em; font-weight: 760; }
h1, h2, h3, p { text-wrap: balance; }
.hero-copy h1 em, .story-intro h2 em { color: var(--coral); font-style: normal; }
.hero-copy > p { max-width: 420px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 31px; }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-weight: 720; font-size: 13px; border: 0; background: transparent; padding: 0; }
.text-link:hover { color: var(--coral); }
.trust-line { display: flex; align-items: center; gap: 12px; margin-top: 44px; color: var(--muted); font-size: 12px; }
.trust-line strong { color: var(--ink); }
.trust-avatars { display: flex; padding-left: 4px; }
.trust-avatars i { display: grid; place-items: center; width: 27px; height: 27px; margin-left: -4px; border: 2px solid var(--paper); border-radius: 50%; background: #e8d7c9; color: #725441; font-size: 10px; font-style: normal; font-weight: 750; }
.trust-avatars i:nth-child(2) { background: #d4e4ec; color: #476b78; }
.trust-avatars i:nth-child(3) { background: #d8e9d9; color: #507354; }
.hero-visual { min-height: 455px; position: relative; display: grid; place-items: center; }
.hero-visual:before { content: ''; width: 78%; height: 78%; position: absolute; right: 4%; bottom: 5%; border-radius: 42% 58% 46% 54%; background: var(--green-soft); }
.hero-photo-frame { width: min(100%, 440px); aspect-ratio: 4 / 4.7; position: relative; z-index: 1; overflow: hidden; border-radius: 14px 14px 64px 14px; background: #e7d8c8; box-shadow: var(--shadow); transform: rotate(2.2deg); }
.hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-note { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: rgba(255,255,255,.94); border: 1px solid rgba(225, 235, 230, .9); border-radius: 9px; box-shadow: var(--shadow-soft); font-size: 11px; color: var(--muted); }
.hero-note strong { color: var(--green-dark); }
.note-top { top: 20%; left: -2%; }
.note-bottom { right: -3%; bottom: 14%; color: var(--green); }
.note-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.note-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--coral); background: var(--coral-soft); }
.quick-stats { max-width: 1110px; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 auto; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quick-stats div { display: flex; align-items: baseline; justify-content: center; gap: 9px; border-right: 1px solid var(--line); }
.quick-stats div:last-child { border: 0; }
.quick-stats strong { font-size: 24px; letter-spacing: -.06em; color: var(--green-dark); }
.quick-stats span { color: var(--muted); font-size: 11px; }
.section-wrap { max-width: 1220px; margin: 0 auto; padding: 102px 5.5vw; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 28px; }
.section-heading h2, .story-intro h2, .volunteer-banner h2 { margin: 10px 0 0; color: var(--green-dark); font-size: clamp(28px, 3vw, 40px); line-height: 1.15; letter-spacing: -.06em; }
.discover-toolbar { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-bottom: 28px; }
.search-box { display: flex; align-items: center; gap: 9px; flex: 1; height: 39px; padding: 0 12px; border: 1px solid transparent; border-radius: 7px; background: var(--green-pale); color: var(--muted-light); }
.search-box:focus-within { border-color: #b9d6c8; background: #fff; }
.search-box input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.search-box input::placeholder { color: var(--muted-light); }
.select-box { display: flex; align-items: center; gap: 8px; height: 39px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 11px; }
.select-box select { appearance: none; border: 0; outline: 0; background: transparent; color: var(--ink); font-weight: 720; }
.select-box .icon { color: var(--muted-light); }
.filter-tabs { display: flex; gap: 3px; padding: 3px; background: var(--green-pale); border-radius: 7px; }
.filter-tab { min-height: 33px; padding: 0 12px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-size: 11px; }
.filter-tab.active { background: #fff; color: var(--green); box-shadow: 0 2px 6px rgba(22, 67, 50, .08); font-weight: 750; }
.animal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.animal-card { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 3px 14px rgba(32, 69, 54, .03); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.animal-card:hover, .animal-card:focus { outline: 0; border-color: #bad6c8; box-shadow: var(--shadow-soft); transform: translateY(-4px); }
.animal-image-wrap { position: relative; aspect-ratio: 1.15; overflow: hidden; background: #e7d8c8; }
.animal-image { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.animal-card:hover .animal-image { transform: scale(1.04); }
.animal-status { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 5px; color: var(--green); background: rgba(234, 245, 239, .93); font-size: 10px; font-weight: 750; }
.status-care { color: #9b5b34; background: rgba(251, 238, 230, .95); }
.icon-button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #fff; color: var(--muted); }
.icon-button:hover { color: var(--coral); background: var(--coral-soft); }
.favorite-button { position: absolute; top: 10px; right: 10px; }
.favorite-button .icon-heart { font-size: 19px; }
.animal-card-body { padding: 16px; }
.animal-card-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.animal-card-title h3 { margin: 0; color: var(--green-dark); font-size: 19px; letter-spacing: -.05em; }
.animal-card-title span, .animal-meta { color: var(--muted); font-size: 11px; }
.animal-meta { margin: 7px 0 12px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 5px; color: #63756d; background: var(--green-pale); font-size: 10px; }
.tag-green { color: var(--green); background: var(--green-soft); }
.empty-state { grid-column: 1 / -1; display: grid; justify-items: center; padding: 70px 20px; text-align: center; border: 1px dashed #cbdcd3; border-radius: 10px; background: var(--green-pale); }
.empty-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--green); background: #fff; font-size: 22px; }
.empty-state h3 { margin: 15px 0 5px; color: var(--green-dark); }
.empty-state p { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.story-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: center; }
.story-intro > p { max-width: 390px; margin: 22px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.story-steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.story-step { display: grid; grid-template-columns: 48px 130px 1fr; gap: 15px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--line); }
.story-step > span { color: var(--coral); font-size: 12px; font-weight: 800; }
.story-step h3 { margin: 0; color: var(--green-dark); font-size: 17px; }
.story-step p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.org-section { padding-top: 45px; }
.org-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.org-card { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.org-card h3 { margin: 0 0 5px; color: var(--green-dark); font-size: 13px; }
.org-card p { margin: 0; color: var(--muted); font-size: 11px; }
.org-avatar { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 11px; color: var(--green); background: var(--green-soft); font-size: 13px; font-weight: 800; }
.org-avatar-blue { color: #4e6d78; background: var(--blue-soft); }
.org-avatar-coral { color: #a86540; background: var(--coral-soft); }
.org-arrow { margin-left: auto; color: var(--muted-light); }
.volunteer-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 260px; margin-top: 40px; padding-top: 60px; padding-bottom: 60px; border-radius: 14px; background: var(--green-dark); }
.volunteer-banner h2 { color: #fff; font-size: 34px; }
.volunteer-banner .eyebrow { color: #9bc9b3; }
.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 28px 5.5vw; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.site-footer p { margin: 0; }

.org-shell { min-height: 100vh; background: #f5f8f6; }
.org-topbar { min-height: 72px; background: #fff; }
.workspace-label { margin-left: 2px; padding-left: 14px; border-left: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.notification-button { position: relative; width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); }
.notification-button span { position: absolute; top: 5px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
.profile-chip { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; text-align: left; }
.profile-chip strong, .profile-chip small { display: block; }
.profile-chip strong { color: var(--green-dark); font-size: 11px; }
.profile-chip small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.profile-chip > .icon { color: var(--muted-light); }
.org-layout { display: grid; grid-template-columns: 228px 1fr; min-height: calc(100vh - 72px); }
.org-sidebar { display: flex; flex-direction: column; padding: 24px 14px 18px; border-right: 1px solid var(--line); background: #fff; }
.org-profile { display: flex; align-items: center; gap: 10px; padding: 8px 10px 24px; color: var(--green-dark); }
.org-profile strong { display: block; font-size: 11px; line-height: 1.5; }
.org-profile > .icon { margin-left: auto; color: var(--muted-light); }
.verified-badge { display: inline-flex; margin-top: 5px; padding: 2px 5px; border-radius: 4px; color: var(--green); background: var(--green-soft); font-size: 8px; font-weight: 750; }
.org-nav { display: grid; gap: 4px; }
.org-nav-item { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 12px; text-align: left; }
.org-nav-item:hover, .org-nav-item.active { color: var(--green); background: var(--green-soft); font-weight: 750; }
.nav-glyph { display: grid; place-items: center; width: 18px; color: currentColor; font-size: 15px; }
.nav-count { display: grid; place-items: center; min-width: 18px; height: 18px; margin-left: auto; border-radius: 50%; color: #a65f37; background: var(--coral-soft); font-size: 9px; }
.sidebar-help { display: flex; align-items: center; gap: 9px; width: calc(100% - 10px); margin: auto 5px 15px; padding: 11px 10px; border: 0; border-radius: 7px; color: inherit; background: var(--green-pale); text-align: left; }
.help-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--green); background: #fff; font-weight: 800; font-size: 12px; }
.sidebar-help strong, .sidebar-help small { display: block; }
.sidebar-help strong { color: var(--green-dark); font-size: 10px; }
.sidebar-help small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.sidebar-help .icon { margin-left: auto; color: var(--muted-light); }
.sidebar-footer { display: flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--muted-light); font-size: 9px; }
.sidebar-footer > span:last-child { margin-left: auto; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #5eaf79; }
.org-content { max-width: 1280px; margin: 0 auto; padding: 42px 4vw 80px; }
.page-title-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.page-title-row h1 { margin: 8px 0 3px; color: var(--green-dark); font-size: 31px; letter-spacing: -.06em; }
.page-title-row p { margin: 0; color: var(--muted); font-size: 12px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metric-card { padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.metric-card-green { border-color: #cae3d5; background: var(--green-soft); }
.metric-card-warm { border-color: #f1ddd1; background: #fff8f4; }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }
.metric-icon { color: var(--green); font-size: 15px; }
.metric-card strong { display: block; margin: 17px 0 7px; color: var(--green-dark); font-size: 30px; letter-spacing: -.07em; }
.metric-card small { color: var(--muted); font-size: 10px; }
.metric-card small b { color: var(--green); }
.dashboard-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 12px; margin-top: 12px; }
.panel { border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 6px 0 0; color: var(--green-dark); font-size: 17px; letter-spacing: -.04em; }
.panel-heading .text-link { font-size: 11px; }
.reminder-list { padding: 2px 20px; }
.reminder-item { display: grid; grid-template-columns: 34px 1fr auto 15px; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.reminder-item { width: 100%; border-top: 0; border-left: 0; border-right: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.reminder-item:last-child { border-bottom: 0; }
.reminder-item:hover, .reminder-item:focus { outline: 0; background: var(--green-pale); }
.reminder-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font-size: 11px; font-weight: 800; }
.avatar-peach, .mini-peach { color: #9a6547; background: #f1ddcf; }
.avatar-blue, .mini-blue { color: #557887; background: #dceaf0; }
.avatar-green, .mini-green { color: #5b7a5f; background: #dcead9; }
.reminder-item strong { display: block; color: var(--ink); font-size: 11px; }
.reminder-item p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.mini-badge { padding: 4px 7px; border-radius: 4px; color: var(--green); background: var(--green-soft); font-size: 9px; font-weight: 750; }
.badge-coral { color: #a1603d; background: var(--coral-soft); }
.reminder-item > .icon { color: var(--muted-light); }
.activity-list { padding: 7px 20px 14px; }
.activity-list > div { display: grid; grid-template-columns: 11px 1fr; gap: 10px; padding: 14px 0; }
.activity-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; }
.dot-green { background: #73b48b; }.dot-coral { background: #d98b60; }.dot-blue { background: #7eafc0; }
.activity-list p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.activity-list p strong, .activity-list p b { color: var(--ink); }
.activity-list small { display: block; color: var(--muted-light); font-size: 9px; }
.upcoming-panel { margin-top: 12px; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); padding: 17px 20px 20px; }
.week-strip div { position: relative; display: grid; justify-items: center; gap: 6px; padding: 8px 0; border-right: 1px solid var(--line); }
.week-strip div:last-child { border: 0; }
.week-strip span { color: var(--muted); font-size: 10px; }.week-strip strong { color: var(--green-dark); font-size: 18px; }.week-strip em { width: 4px; height: 4px; border-radius: 50%; background: var(--coral); }.week-strip em.is-today { width: 6px; height: 6px; background: var(--green); }
.toolbar-panel { display: flex; align-items: center; gap: 9px; padding: 11px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.search-box-wide { max-width: 330px; }.filter-control { display: inline-flex; align-items: center; gap: 8px; min-height: 39px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #fff; font-size: 11px; }.filter-control .icon { font-size: 18px; color: var(--muted-light); }
.toolbar-panel .button { margin-left: auto; }
.table-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.table-heading, .animal-row { display: grid; grid-template-columns: 2.1fr 1.2fr 1.1fr .8fr 35px; align-items: center; gap: 14px; padding: 0 20px; }
.table-heading { min-height: 42px; color: var(--muted); background: var(--green-pale); font-size: 10px; }.table-heading small { color: var(--muted-light); }
.animal-row { min-height: 69px; border-top: 1px solid var(--line); font-size: 11px; }.row-animal { display: flex; align-items: center; gap: 10px; }.row-animal img { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; }.row-animal strong, .row-animal small { display: block; }.row-animal strong { color: var(--ink); font-size: 11px; }.row-animal small, .row-meta { margin-top: 4px; color: var(--muted); font-size: 9px; }.status-pill { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 5px 7px; border-radius: 4px; color: var(--green); background: var(--green-soft); font-size: 9px; }.status-pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }.pill-warm { color: #9a5d37; background: var(--coral-soft); }.pill-warm i { background: var(--coral); }.visibility { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }.visibility i { width: 6px; height: 6px; border-radius: 50%; background: #75b88f; }.row-menu { border: 0; background: transparent; color: var(--muted-light); font-weight: 800; }.schedule-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }.schedule-summary > div { padding: 14px 17px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.schedule-summary span { display: block; color: var(--muted); font-size: 10px; }.schedule-summary strong { display: block; margin-top: 7px; color: var(--green-dark); font-size: 23px; }.text-coral { color: var(--coral) !important; }.segmented { display: flex; gap: 3px; padding: 3px; border-radius: 6px; background: var(--green-pale); }.segmented button { min-height: 27px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 10px; }.segmented button.active { color: var(--green); background: #fff; font-weight: 750; }.shift-list { padding: 0 20px; }.shift-item { display: grid; grid-template-columns: 58px 70px 1fr 145px 72px; gap: 14px; align-items: center; min-height: 84px; border-bottom: 1px solid var(--line); }.shift-item:last-child { border: 0; }.shift-date strong, .shift-date span { display: block; }.shift-date strong { color: var(--green-dark); font-size: 20px; }.shift-date span { margin-top: 2px; color: var(--muted); font-size: 10px; }.shift-time { color: var(--green-dark); font-size: 11px; font-weight: 730; }.shift-time small { color: var(--muted); font-weight: 500; }.shift-detail strong, .shift-detail span { display: block; }.shift-detail strong { color: var(--ink); font-size: 11px; }.shift-detail span { margin-top: 4px; color: var(--muted); font-size: 9px; }.shift-people { display: flex; align-items: center; }.shift-people i { display: grid; place-items: center; width: 25px; height: 25px; margin-left: -4px; border: 2px solid #fff; border-radius: 50%; color: #6c4f40; background: #e7d6c9; font-size: 9px; font-style: normal; }.shift-people i:nth-child(2) { color: #4d6f7a; background: #daeaf0; }.shift-people i:nth-child(3) { color: #5e7a61; background: #deebdc; }.shift-people .muted-avatar { color: var(--muted); background: var(--green-pale); }.shift-people span { margin-left: 7px; color: var(--muted); font-size: 9px; }.shift-state { width: max-content; padding: 5px 7px; border-radius: 4px; font-size: 9px; font-weight: 750; }.state-confirmed { color: var(--green); background: var(--green-soft); }.state-pending { color: #9a5d37; background: var(--coral-soft); }.application-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.application-column { min-height: 420px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #f7faf8; }.column-title { display: flex; justify-content: space-between; padding: 4px 5px 14px; color: var(--green-dark); font-size: 12px; }.column-title b { display: grid; place-items: center; min-width: 19px; height: 19px; border-radius: 50%; color: var(--green); background: var(--green-soft); font-size: 9px; }.application-card { padding: 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 3px 10px rgba(32, 69, 54, .03); }.application-card-top, .application-footer { display: flex; justify-content: space-between; align-items: center; }.animal-mini { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; color: var(--green); background: var(--green-soft); font-size: 10px; font-weight: 800; }.application-card > strong { display: block; margin-top: 13px; color: var(--ink); font-size: 11px; }.application-card > p { margin: 6px 0 15px; color: var(--muted); font-size: 10px; }.application-footer { padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }.application-footer .icon { color: var(--green); }
.settings-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; }.field-count { padding: 5px 7px; border-radius: 4px; color: var(--green); background: var(--green-soft); font-size: 9px; }.panel-description { margin: 0; padding: 15px 20px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 11px; line-height: 1.6; }.field-list { padding: 0 20px; }.field-item { display: grid; grid-template-columns: 16px 30px 1fr auto 30px; gap: 10px; align-items: center; min-height: 70px; border-bottom: 1px solid var(--line); }.field-item:last-child { border: 0; }.drag-handle { color: var(--muted-light); letter-spacing: -4px; }.field-type-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: var(--green); background: var(--green-soft); font-size: 13px; font-weight: 800; }.field-copy strong, .field-copy span { display: block; }.field-copy strong { color: var(--ink); font-size: 11px; }.field-copy span { margin-top: 4px; color: var(--muted); font-size: 9px; }.field-required { color: var(--muted-light); font-size: 9px; }.field-preview { padding-bottom: 18px; }.field-preview > .eyebrow, .field-preview > h2 { margin-left: 20px; margin-right: 20px; }.field-preview h2 { margin-top: 6px; color: var(--green-dark); font-size: 17px; }.preview-card { margin: 18px 20px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--green-pale); }.preview-top { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; }.preview-badge { padding: 4px 6px; border-radius: 4px; color: var(--green); background: var(--green-soft); }.preview-animal { display: flex; align-items: center; gap: 10px; padding: 15px 0; }.preview-animal img { width: 42px; height: 42px; object-fit: cover; border-radius: 9px; }.preview-animal strong, .preview-animal span { display: block; }.preview-animal strong { color: var(--green-dark); font-size: 13px; }.preview-animal span { margin-top: 4px; color: var(--muted); font-size: 9px; }.preview-field { padding: 10px 0; border-top: 1px solid var(--line); }.preview-field > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; }.preview-field p { margin: 0; color: var(--ink); font-size: 10px; }.settings-grid .button-full { width: calc(100% - 40px); margin: 0 20px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(27, 53, 43, .45); backdrop-filter: blur(5px); }
.modal { position: relative; width: min(100%, 470px); max-height: min(90vh, 720px); overflow: auto; border-radius: 12px; background: #fff; box-shadow: 0 24px 80px rgba(17, 47, 35, .25); }.modal-close { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.88); font-size: 22px; }.modal-animal .modal-hero-image { width: 100%; height: 260px; object-fit: cover; }.modal-animal-content { padding: 24px; }.modal-title-line { display: flex; align-items: start; justify-content: space-between; gap: 15px; }.modal h2 { margin: 8px 0 0; color: var(--green-dark); font-size: 28px; letter-spacing: -.06em; }.modal-lead { margin: 18px 0; color: var(--muted); font-size: 13px; line-height: 1.75; }.modal-facts { display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.modal-facts span { padding-left: 12px; border-left: 1px solid var(--line); color: var(--muted); font-size: 10px; }.modal-facts span:first-child { padding-left: 0; border-left: 0; }.modal-facts b { display: block; margin-bottom: 5px; color: var(--ink); font-size: 11px; }.modal-animal-content .tag-row { margin: 17px 0 22px; }.modal-field, .modal-apply { padding: 28px; }.modal-field h2, .modal-apply > h2 { margin-top: 8px; font-size: 25px; }.modal-subtitle { margin: 10px 0 22px; color: var(--muted); font-size: 12px; line-height: 1.65; }.modal form { display: grid; gap: 14px; }.modal label { display: grid; gap: 7px; color: var(--ink); font-size: 11px; font-weight: 720; }.modal input, .modal select, .modal textarea { width: 100%; border: 1px solid var(--line); border-radius: 7px; outline: 0; padding: 10px 11px; color: var(--ink); background: var(--green-pale); font-size: 12px; }.modal textarea { resize: vertical; }.modal input:focus, .modal select:focus, .modal textarea:focus { border-color: #a8ccb9; background: #fff; box-shadow: 0 0 0 3px var(--green-soft); }.checkbox-label { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px !important; color: var(--muted) !important; font-size: 10px !important; font-weight: 500 !important; }.checkbox-label input { width: 15px; height: 15px; margin: 0; accent-color: var(--green); }.modal-animal { overflow: hidden; }.modal-animal.modal-animal-content { padding: 0; }.modal-animal .modal-animal-content { padding: 24px; }.modal-animal .animal-status { position: static; }.modal-animal .modal-title-line > .animal-status { margin-top: 19px; }.modal-apply .modal-animal { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }.modal-apply .modal-animal img { width: 58px; height: 58px; object-fit: cover; border-radius: 9px; }.modal-apply .modal-animal h2 { margin: 4px 0; font-size: 20px; }.modal-apply .modal-animal p { margin: 0; color: var(--muted); font-size: 10px; }
.toast { position: fixed; left: 50%; bottom: 25px; z-index: 60; display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 15px; transform: translateX(-50%); border: 1px solid #cfe2d7; border-radius: 8px; color: var(--green-dark); background: #fff; box-shadow: var(--shadow); font-size: 12px; }.toast .icon { width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--green); font-size: 11px; }

@media (max-width: 980px) { .public-nav { gap: 15px; margin-right: 18px; }.hero-section { gap: 30px; }.hero-copy h1 { font-size: 56px; }.note-top { left: -7%; }.note-bottom { right: -8%; }.org-layout { grid-template-columns: 190px 1fr; }.org-sidebar { padding-left: 8px; padding-right: 8px; }.org-content { padding-left: 28px; padding-right: 28px; }.dashboard-grid, .settings-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .site-header { min-height: 64px; padding: 0 18px; }.public-nav { display: none; }.header-actions .button { display: none; }.hero-section { min-height: unset; grid-template-columns: 1fr; padding: 58px 18px 40px; }.hero-copy h1 { font-size: 51px; }.hero-copy > p { font-size: 14px; }.hero-visual { min-height: 390px; margin-top: 18px; }.hero-photo-frame { width: min(80vw, 350px); }.note-top { left: 2%; }.note-bottom { right: 0; bottom: 9%; }.quick-stats { grid-template-columns: repeat(2, 1fr); margin: 0 18px; gap: 0; }.quick-stats div { justify-content: flex-start; padding: 14px 12px; }.quick-stats div:nth-child(2) { border-right: 0; }.quick-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.section-wrap { padding: 68px 18px; }.section-heading { align-items: start; flex-direction: column; margin-bottom: 22px; }.section-heading > .text-link { align-self: end; }.discover-toolbar { align-items: stretch; flex-wrap: wrap; }.search-box { flex: 1 1 100%; }.select-box { flex: 1; }.filter-tabs { flex: 1; }.filter-tab { flex: 1; }.animal-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }.animal-card-body { padding: 12px; }.animal-card-title h3 { font-size: 16px; }.animal-card-title span, .animal-meta { font-size: 10px; }.tag { font-size: 9px; }.story-section { grid-template-columns: 1fr; gap: 34px; }.story-step { grid-template-columns: 37px 82px 1fr; gap: 8px; }.story-step p { font-size: 11px; }.org-grid { grid-template-columns: 1fr; }.volunteer-banner { align-items: start; flex-direction: column; margin-left: 18px; margin-right: 18px; padding: 35px 25px; }.volunteer-banner h2 { font-size: 28px; }.site-footer { align-items: start; flex-direction: column; gap: 13px; padding: 26px 18px; }.org-topbar { padding: 0 15px; }.workspace-label, .org-top-actions .button, .profile-chip > span:not(.avatar-button), .profile-chip > .icon { display: none; }.org-layout { display: block; }.org-sidebar { position: sticky; top: 71px; z-index: 9; display: block; padding: 7px 10px; border-right: 0; border-bottom: 1px solid var(--line); }.org-profile, .sidebar-help, .sidebar-footer { display: none; }.org-nav { display: flex; gap: 2px; overflow-x: auto; }.org-nav-item { flex: 0 0 auto; min-height: 35px; padding: 0 10px; font-size: 10px; }.org-nav-item .nav-glyph { display: none; }.nav-count { margin-left: 4px; }.org-content { padding: 28px 15px 60px; }.page-title-row { align-items: start; flex-direction: column; margin-bottom: 22px; }.page-title-row h1 { font-size: 27px; }.metric-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }.metric-card { padding: 14px; }.metric-card strong { margin-top: 13px; font-size: 25px; }.dashboard-grid { grid-template-columns: 1fr; }.toolbar-panel { flex-wrap: wrap; }.search-box-wide { max-width: none; flex: 1 1 100%; }.toolbar-panel .button { margin-left: 0; }.table-panel { overflow-x: auto; }.table-heading, .animal-row { min-width: 620px; }.schedule-summary { grid-template-columns: repeat(2, 1fr); }.shift-list { overflow-x: auto; }.shift-item { min-width: 650px; }.schedule-panel { overflow: hidden; }.application-board { grid-template-columns: 1fr; }.application-column { min-height: unset; }.field-item { grid-template-columns: 12px 30px 1fr auto 26px; }.modal-backdrop { padding: 12px; }.modal-animal .modal-hero-image { height: 230px; } }
@media (max-width: 450px) { .hero-actions { align-items: stretch; flex-direction: column; gap: 14px; }.hero-actions .button { width: max-content; }.trust-line { align-items: start; flex-direction: column; gap: 8px; margin-top: 30px; }.animal-grid { grid-template-columns: 1fr; }.animal-image-wrap { aspect-ratio: 1.4; }.quick-stats strong { font-size: 20px; }.quick-stats span { font-size: 10px; }.modal-facts { gap: 8px; }.modal-facts span { padding-left: 8px; font-size: 9px; }.modal-facts b { font-size: 10px; } }

.shift-item { grid-template-columns: 58px 70px minmax(180px, 1fr) 145px minmax(106px, auto); }
.shift-people .shift-avatar-blue { color: #4d6f7a; background: #daeaf0; }
.shift-people .shift-avatar-green { color: #5e7a61; background: #deebdc; }
.shift-state-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.state-leave { color: #687b73; background: #edf1ef; }
.shift-actions { display: flex; justify-content: flex-end; gap: 5px; }
.shift-action { display: inline-flex; align-items: center; gap: 4px; min-height: 25px; padding: 0 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--green); background: #fff; font-size: 9px; font-weight: 720; }
.shift-action:hover { border-color: #b9d6c8; background: var(--green-soft); }
.shift-action-leave { color: #9a5d37; }
.shift-action-leave:hover { border-color: #f0cdbb; background: var(--coral-soft); }
.application-board { grid-template-columns: repeat(4, 1fr); }
.application-card { cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.application-card:hover, .application-card:focus { outline: 0; border-color: #bad6c8; box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.application-empty { display: grid; place-items: center; min-height: 98px; border: 1px dashed #d5e2dc; border-radius: 7px; color: var(--muted-light); font-size: 10px; }
.mini-muted { color: var(--muted); background: #edf1ef; }
.modal-application { padding: 28px; }
.application-modal-title { display: flex; align-items: center; gap: 11px; margin-top: 19px; }
.application-modal-title h2 { margin: 0; font-size: 22px; }
.application-status-label { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.application-redacted { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--green-pale); }
.application-redacted span, .application-redacted strong, .application-redacted p { display: block; }
.application-redacted span { color: var(--muted); font-size: 9px; }
.application-redacted strong { margin-top: 7px; color: var(--ink); font-size: 12px; }
.application-redacted p { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.application-modal-actions { display: grid; gap: 8px; margin-top: 20px; }
.modal-complete-note { margin: 20px 0 0; padding: 12px; border-radius: 7px; color: var(--green); background: var(--green-soft); font-size: 11px; line-height: 1.6; }

@media (max-width: 760px) {
  .application-board { grid-template-columns: 1fr; }
  .shift-item { min-width: 720px; }
}

.brand-button { padding: 0; border: 0; background: transparent; text-align: left; }
.public-nav button { padding: 0; border: 0; color: #677a71; background: transparent; font-size: 13px; }
.public-nav button:hover { color: var(--green); }
.directory-main { min-height: calc(100vh - 76px); background: #f7faf8; }
.directory-intro { padding-top: 78px; padding-bottom: 40px; }
.directory-intro h1 { margin: 12px 0 10px; color: var(--green-dark); font-size: clamp(34px, 4vw, 55px); letter-spacing: -.07em; }
.directory-intro p { max-width: 520px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.directory-section { padding-top: 15px; }
.directory-toolbar { display: flex; align-items: center; gap: 10px; padding: 11px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.directory-toolbar .search-box { min-width: 180px; }
.directory-toolbar .filter-tabs { margin-left: auto; }
.directory-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 15px; color: var(--muted); font-size: 11px; }
.directory-result-heading strong { color: var(--green-dark); font-size: 15px; }
.org-directory-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.org-card-interactive { cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.org-card-interactive:hover, .org-card-interactive:focus { outline: 0; border-color: #bad6c8; box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.modal-form { padding: 28px; }
.modal-form h2 { margin-top: 8px; }
.modal-form .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.organization-modal { padding: 28px; }
.organization-modal-mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 13px; color: var(--green); background: var(--green-soft); font-size: 17px; font-weight: 800; }
.organization-modal h2 { margin-top: 8px; font-size: 25px; }
.organization-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.organization-facts span { color: var(--muted); font-size: 9px; }
.organization-facts b { display: block; margin-bottom: 5px; color: var(--ink); font-size: 10px; }
.organization-modal-list { padding: 15px 0 20px; }
.organization-modal-list span, .organization-modal-list strong { display: block; }
.organization-modal-list span { color: var(--muted); font-size: 9px; }.organization-modal-list strong { margin-top: 6px; color: var(--green-dark); font-size: 12px; }
.table-empty { padding: 42px 20px; color: var(--muted); background: var(--green-pale); font-size: 11px; text-align: center; }

@media (max-width: 760px) {
  .public-nav button { font-size: 11px; }
  .directory-intro { padding-top: 52px; padding-bottom: 30px; }
  .directory-intro h1 { font-size: 36px; }
  .directory-toolbar { align-items: stretch; flex-wrap: wrap; }
  .directory-toolbar .search-box { flex: 1 1 100%; }
  .directory-toolbar .select-box { flex: 1; }
  .directory-toolbar .filter-tabs { flex: 1; margin-left: 0; }
  .directory-result-heading { align-items: start; flex-direction: column; gap: 4px; }
  .org-directory-grid { grid-template-columns: 1fr; }
  .modal-form .form-row, .organization-facts { grid-template-columns: 1fr; }
}

.modal-organization { padding: 28px; }
.modal-organization h2 { overflow-wrap: anywhere; }
.organization-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.organization-facts span { min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.organization-modal-list strong { overflow-wrap: anywhere; line-height: 1.5; }
.modal-login, .modal-help { padding: 28px; }
.modal-login h2, .modal-help h2 { margin-top: 8px; }
.form-error { margin: -3px 0 0; color: #b75d42; font-size: 11px; }
.demo-login { padding-top: 21px; margin-top: 21px; border-top: 1px solid var(--line); }
.demo-login-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--green-dark); font-size: 11px; font-weight: 750; }
.demo-login-heading small { color: var(--muted-light); font-size: 9px; font-weight: 500; }
.demo-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.demo-account { display: grid; gap: 5px; min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--green-pale); text-align: left; }
.demo-account:hover, .demo-account:focus { outline: 0; border-color: #b9d6c8; background: var(--green-soft); }
.demo-account strong { color: var(--green-dark); font-size: 10px; }
.demo-account span { overflow-wrap: anywhere; color: var(--muted); font-size: 9px; }
.demo-account small, .demo-login-note { color: var(--muted-light); font-size: 9px; line-height: 1.55; }
.demo-login-note { margin: 10px 0 0; }
.modal-help { width: min(100%, 660px); }
.modal-reminders { padding: 28px; }
.modal-reminders h2 { margin-top: 8px; }
.reminder-detail-list { margin-top: 22px; border-top: 1px solid var(--line); }
.reminder-detail-item { display: grid; grid-template-columns: 34px 1fr 15px; gap: 10px; align-items: center; width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.reminder-detail-item:hover, .reminder-detail-item:focus { outline: 0; background: var(--green-pale); }
.reminder-detail-item strong, .reminder-detail-item small { display: block; }
.reminder-detail-item strong { color: var(--ink); font-size: 11px; }
.reminder-detail-item small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.reminder-detail-item > .icon { color: var(--muted-light); }
.help-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.help-topic { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--green-pale); }
.help-topic-icon { display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; border-radius: 7px; color: var(--green); background: var(--green-soft); font-size: 12px; font-weight: 800; }
.help-topic strong, .help-topic p { display: block; }
.help-topic strong { color: var(--green-dark); font-size: 11px; }
.help-topic p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.help-support { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 19px; margin-top: 18px; border-top: 1px solid var(--line); }
.help-support strong { display: block; margin-top: 7px; color: var(--green-dark); font-size: 13px; }
.help-support p { max-width: 390px; margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.profile-logout { color: var(--muted); font-size: 9px; }

@media (max-width: 760px) {
  .header-user > span:not(.avatar-button), .header-user small, .profile-logout { display: none; }
  .modal-organization, .modal-login, .modal-help, .modal-reminders { padding: 22px; }
  .demo-account-grid, .help-topic-grid { grid-template-columns: 1fr; }
  .help-support { align-items: stretch; flex-direction: column; }
  .help-support .button { width: 100%; }
  .organization-facts { grid-template-columns: 1fr; }
}