:root {
  color-scheme: light;
  --bg: #f4efe9;
  --surface: #fffdf9;
  --surface-alt: #e8eee7;
  --primary: #758d71;
  --primary-strong: #4e6752;
  --coffee: #c8b7a6;
  --text: #26332b;
  --muted: #6f7a72;
  --line: rgba(74, 94, 78, 0.16);
  --danger: #9a584d;
  --shadow: 0 20px 50px rgba(38, 51, 43, 0.12);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--text); background: var(--bg); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.loading-screen,
.signin-screen {
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(48px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom));
  display: grid;
  place-content: center;
  text-align: center;
}

.loading-screen { gap: 14px; color: var(--muted); }
.loading-screen p { margin: 0; }
.brand-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: white;
  background: var(--primary);
  box-shadow: var(--shadow);
  font-family: ui-serif, "Songti SC", serif;
  font-size: 30px;
  font-weight: 700;
}

.signin-card {
  width: min(100%, 420px);
  padding: 34px 26px 26px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.signin-card h1 { margin: 20px 0 8px; font-family: ui-serif, "Songti SC", serif; font-size: 30px; }
.signin-card > p { margin: 0 auto 24px; max-width: 300px; color: var(--muted); line-height: 1.65; }
.privacy-note { margin-top: 18px; display: block; color: var(--muted); font-size: 12px; line-height: 1.55; }

.primary-button,
.secondary-button,
.text-button {
  min-height: 48px;
  border-radius: 15px;
  cursor: pointer;
  font-weight: 750;
}
.primary-button { width: 100%; border: 0; color: white; background: var(--primary); }
.primary-button:focus-visible,
.secondary-button:focus-visible,
.text-button:focus-visible,
.nav-button:focus-visible { outline: 3px solid rgba(117, 141, 113, .35); outline-offset: 2px; }
.secondary-button { padding: 0 16px; border: 1px solid var(--line); color: var(--primary-strong); background: var(--surface); }
.text-button { padding: 0 12px; border: 0; color: var(--primary-strong); background: transparent; }

.app-shell { min-height: 100vh; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.app-header {
  position: sticky;
  z-index: 10;
  top: 0;
  padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(18px);
}
.brand-row { min-width: 0; display: flex; align-items: center; gap: 11px; }
.brand-row .brand-mark { width: 42px; height: 42px; margin: 0; border-radius: 15px; font-size: 20px; box-shadow: none; }
.brand-copy { min-width: 0; }
.brand-copy strong, .brand-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy strong { font-family: ui-serif, "Songti SC", serif; font-size: 18px; }
.brand-copy small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.role-badge { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; color: var(--primary-strong); background: var(--surface-alt); font-size: 11px; font-weight: 750; }

.page { width: min(100%, 760px); margin: 0 auto; padding: 22px 18px 34px; }
.hero {
  padding: 24px 22px;
  border-radius: 24px;
  color: #f8f5ef;
  background: linear-gradient(145deg, #26332b, #415448);
  box-shadow: var(--shadow);
}
.hero-kicker { margin: 0 0 7px; color: #d7e1d5; font-size: 12px; font-weight: 750; }
.hero h1 { margin: 0; font-family: ui-serif, "Songti SC", serif; font-size: clamp(25px, 7vw, 34px); }
.hero p { margin: 10px 0 0; color: #d7ddd7; line-height: 1.65; }
.profile-hero { display: flex; align-items: center; gap: 13px; }
.profile-hero h1 { line-height: 1.1; }
.profile-hero p { margin-top: 4px; font-size: 12px; }
.profile-initial { width: 54px; height: 54px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 19px; background: rgba(255,255,255,.1); font-family: ui-serif, "Songti SC", serif; font-size: 23px; font-weight: 750; }
.age-row { margin-top: 18px; padding: 14px 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 16px; background: rgba(255,255,255,.08); }
.age-row strong { font-size: 18px; }
.age-row span { color: #d7ddd7; font-size: 11px; text-align: right; }
.status-row { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.status-chip { padding: 7px 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: #eef3ed; background: rgba(255,255,255,.08); font-size: 11px; }

.notice { margin-top: 18px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface-alt); line-height: 1.55; }
.notice strong { display: block; margin-bottom: 3px; font-size: 14px; }
.notice span { color: var(--muted); font-size: 12px; }

.section-heading { margin: 28px 2px 12px; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.section-heading h2 { margin: 0; font-family: ui-serif, "Songti SC", serif; font-size: 21px; }
.section-heading span { color: var(--muted); font-size: 11px; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.summary-card { min-height: 110px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; color: inherit; background: var(--surface); text-align: left; }
button.summary-card { cursor: pointer; }
button.summary-card:active { transform: translateY(1px); }
.summary-card span, .summary-card small { display: block; color: var(--muted); }
.summary-card span { font-size: 12px; }
.summary-card strong { display: block; margin: 10px 0 3px; color: var(--primary-strong); font-size: 26px; }
.summary-card small { font-size: 10px; }

.record-list { display: grid; gap: 10px; }
.record-card { padding: 15px 16px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.record-card strong, .record-card span, .record-card small { display: block; }
.record-card span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.record-card small { margin-top: 8px; color: var(--primary-strong); font-size: 11px; }
.certificate-card { position: relative; padding-right: 112px; }
.certificate-card .record-status { position: absolute; top: 14px; right: 14px; width: auto; margin: 0; padding: 5px 8px; border-radius: 999px; color: var(--primary-strong); background: var(--surface-alt); font-size: 10px; font-weight: 750; }
.certificate-card .record-status.expiring { color: #8b5148; background: #f4dfd9; }
.empty-state { padding: 28px 18px; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); background: var(--surface); text-align: center; line-height: 1.6; }

.account-panel { display: grid; gap: 12px; }
.account-card { padding: 18px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }
.account-card span, .account-card strong { display: block; }
.account-card span { color: var(--muted); font-size: 11px; }
.account-card strong { margin-top: 5px; overflow-wrap: anywhere; }
.account-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.account-actions .danger { color: var(--danger); }

.bottom-nav {
  position: fixed;
  z-index: 12;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(20px);
}
.nav-button { min-height: 54px; padding: 6px 2px; display: grid; place-items: center; gap: 2px; border: 0; border-radius: 14px; color: var(--muted); background: transparent; font-size: 10px; cursor: pointer; }
.nav-button span:first-child { font-size: 18px; line-height: 1; }
.nav-button.active { color: white; background: var(--primary); font-weight: 750; }

.error-card { max-width: 420px; margin: 20vh auto 0; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.error-card h1 { margin: 0 0 8px; font-size: 22px; }
.error-card p { margin: 0 0 18px; color: var(--muted); line-height: 1.6; }

@media (min-width: 720px) {
  .page { padding-top: 34px; }
  .summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bottom-nav { right: 50%; left: auto; bottom: 18px; width: 520px; transform: translateX(50%); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
  .app-shell { padding-bottom: 112px; }
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --bg: #26332b; --surface: #303f35; --surface-alt: #3b4d40; --primary: #758d71; --primary-strong: #b6cbb2; --coffee: #c8b7a6; --text: #f2eee8; --muted: #bdc6bd; --line: rgba(235,240,234,.12); --shadow: 0 22px 54px rgba(0,0,0,.28); }
  .hero { background: linear-gradient(145deg, #1d2721, #35473a); }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4efe9;
  --surface: #fffdf9;
  --surface-alt: #e8eee7;
  --primary: #758d71;
  --primary-strong: #4e6752;
  --coffee: #c8b7a6;
  --text: #26332b;
  --muted: #6f7a72;
  --line: rgba(74, 94, 78, 0.16);
  --danger: #9a584d;
  --shadow: 0 20px 50px rgba(38, 51, 43, 0.12);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #26332b;
  --surface: #303f35;
  --surface-alt: #3b4d40;
  --primary: #758d71;
  --primary-strong: #b6cbb2;
  --coffee: #c8b7a6;
  --text: #f2eee8;
  --muted: #bdc6bd;
  --line: rgba(235,240,234,.12);
  --danger: #e5a399;
  --shadow: 0 22px 54px rgba(0,0,0,.28);
}

body.modal-open { overflow: hidden; }
[hidden] { display: none !important; }
.product-page { overflow-x: hidden; }
.eyebrow, .screen-head p, .detail-kicker { margin: 0; color: var(--primary-strong); font-size: 12px; font-weight: 800; }
.welcome-block { padding: 3px 1px 22px; }
.welcome-copy { margin: 5px 0 18px; color: var(--muted); font-size: 14px; }
.profile-row { padding: 16px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.profile-avatar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--primary); font-family: ui-serif, "Songti SC", serif; font-size: 19px; font-weight: 800; }
.profile-row > div:nth-child(2), .profile-age { display: flex; flex-direction: column; gap: 3px; }
.profile-row span { color: var(--muted); font-size: 10px; }
.profile-age { padding-left: 12px; border-left: 1px solid var(--line); text-align: right; }
.profile-age strong { color: var(--primary-strong); font-size: 17px; }

.growth-card { margin-bottom: 28px; padding: 17px 15px 13px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }
.card-title-row, .screen-head, .detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-title-row h2, .week-section h2 { margin: 2px 0 0; font-family: ui-serif, "Songti SC", serif; font-size: 23px; }
.small-add, .top-add-button { min-height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 20px; color: white; background: var(--primary); font-size: 12px; font-weight: 800; cursor: pointer; }
.segmented { margin: 13px 0 10px; padding: 3px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 12px; background: var(--surface-alt); }
.segmented button { min-height: 36px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-weight: 750; cursor: pointer; }
.segmented button.selected { color: white; background: var(--primary); }
.growth-current { padding: 0 4px 2px; display: flex; align-items: baseline; justify-content: space-between; }
.growth-current span { color: var(--muted); font-size: 10px; }
.growth-current strong { font-size: 19px; }
.growth-current.height strong { color: #91ad88; }
.growth-current.weight strong { color: #d9a36c; }
.growth-current small { font-size: 10px; }
.chart-wrap { width: 100%; overflow: hidden; }
.chart-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-grid { stroke: var(--line); stroke-width: .8; stroke-dasharray: 3 5; }
.chart-label { fill: var(--muted); font-size: 8px; }
.chart-age { fill: var(--text); font-size: 9px; font-weight: 750; }
.chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-line.height { stroke: #91ad88; }
.chart-line.weight { stroke: #d9a36c; }
.chart-dot { fill: var(--surface); stroke-width: 2.4; cursor: pointer; }
.chart-dot.height { stroke: #91ad88; }
.chart-dot.weight { stroke: #d9a36c; }
.chart-tooltip rect { fill: var(--bg); stroke: var(--line); filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.chart-tooltip text { fill: var(--text); font-size: 9px; font-weight: 700; }
.chart-tooltip .value { fill: var(--primary-strong); font-size: 11px; }
.chart-tooltip .date { fill: var(--muted); font-size: 7px; font-weight: 500; }
.growth-foot { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; }

.week-section { padding-bottom: 10px; }
.task-list { margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.task-row { width: 100%; min-height: 72px; padding: 10px 13px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid var(--line); color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.task-row:last-child { border-bottom: 0; }
.task-row.done { opacity: .58; }
.task-row.done .task-copy strong { text-decoration: line-through; }
.task-row:has(.task-check) { grid-template-columns: 28px auto minmax(0, 1fr) auto; }
.task-check { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--primary); border-radius: 50%; color: white; background: var(--primary); font-size: 12px; }
.task-row:not(.done) .task-check { color: transparent; background: transparent; }
.date-badge, .task-copy { display: flex; flex-direction: column; gap: 3px; }
.date-badge { color: var(--primary-strong); font-size: 11px; font-weight: 800; }
.date-badge small, .task-copy small { color: var(--muted); font-size: 10px; }
.task-copy { min-width: 0; }
.task-copy strong, .task-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outline-button { width: 100%; min-height: 46px; margin-top: 10px; border: 1px solid var(--primary); border-radius: 14px; color: var(--primary-strong); background: transparent; font-weight: 750; cursor: pointer; }
.text-action { min-height: 36px; border: 0; color: var(--primary-strong); background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }

.screen-head { margin: 2px 1px 16px; align-items: flex-end; }
.screen-head h1 { margin: 2px 0 0; font-family: ui-serif, "Songti SC", serif; font-size: 30px; }
.search-box { min-height: 48px; margin-bottom: 12px; padding: 0 13px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.search-box span { color: var(--muted); font-size: 20px; }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; font-size: 16px; }
.filter-row { margin: 0 -18px 15px; padding: 0 18px 2px; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-row button { min-height: 38px; padding: 0 11px; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 19px; color: var(--muted); background: var(--surface); font-size: 11px; font-weight: 750; cursor: pointer; }
.filter-row button.selected { border-color: var(--primary); color: white; background: var(--primary); }
.filter-row small { min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, currentColor 12%, transparent); font-size: 9px; }
.list-stack { display: grid; gap: 10px; }
.list-card { width: 100%; min-height: 91px; padding: 13px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: var(--surface); text-align: left; cursor: pointer; }
.list-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--primary); font-size: 12px; font-weight: 800; }
.list-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.list-copy strong, .list-copy small, .list-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-copy strong { font-size: 14px; }
.list-copy small, .list-copy em { color: var(--muted); font-size: 10px; font-style: normal; }
.certificate-list-card { grid-template-columns: 42px minmax(0, 1fr) auto auto; }
.status-pill { display: inline-flex; width: fit-content; padding: 5px 8px; border-radius: 999px; color: var(--primary-strong); background: var(--surface-alt); font-size: 10px; font-weight: 800; white-space: nowrap; }
.status-current { color: white; background: var(--primary); }
.status-applying { color: white; background: #a87343; }
.status-stopped, .status-inactive { opacity: .65; }
.status-expiring, .status-review { color: white; background: #a87343; }

.detail-toolbar { min-height: 42px; margin-bottom: 13px; justify-content: flex-start; }
.detail-toolbar span { font-size: 13px; font-weight: 750; }
.back-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: var(--surface); font-size: 28px; line-height: 1; cursor: pointer; }
.detail-page > h1 { margin: 5px 0 10px; font-family: ui-serif, "Songti SC", serif; font-size: clamp(25px, 7vw, 31px); overflow-wrap: anywhere; }
.detail-section { margin-top: 24px; padding-top: 19px; border-top: 1px solid var(--line); }
.detail-section h2 { margin: 0 0 9px; font-size: 16px; }
.detail-section p { margin: 0 0 7px; line-height: 1.65; }
.detail-section small { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; }
.detail-section a { color: var(--primary-strong); font-weight: 750; text-underline-offset: 3px; }
.contact-line { color: var(--primary-strong); }
.edit-form, .modal-form { display: grid; gap: 13px; }
.edit-form label, .modal-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.edit-form input, .edit-form textarea, .edit-form select, .modal-form input, .modal-form textarea, .modal-form select {
  width: 100%;
  min-height: 46px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: 0;
  color: var(--text);
  background: var(--surface);
  font: inherit;
  font-size: 16px;
}
.edit-form textarea, .modal-form textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.edit-form input:focus, .edit-form textarea:focus, .modal-form input:focus, .modal-form textarea:focus { border-color: var(--primary); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.full-button { width: 100%; margin-top: 11px; }
.danger-button, .danger-filled { width: 100%; min-height: 46px; margin-top: 11px; border-radius: 13px; color: var(--danger); background: transparent; border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); font-weight: 750; cursor: pointer; }
.danger-filled { color: white; background: #9a584d; border-color: #9a584d; }
.record-identity { margin-top: 18px; padding: 14px; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.record-identity span, .record-identity small { color: var(--muted); font-size: 10px; }

.task-view-switch { margin-top: 0; }
.period-nav { margin: 4px 0 13px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; text-align: center; }
.period-nav button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: var(--surface); font-size: 24px; cursor: pointer; }
.period-nav button:last-child { justify-self: end; }
.period-nav strong { font-family: ui-serif, "Songti SC", serif; font-size: 19px; }
.calendar-list { margin-top: 12px; }
.month-grid { padding: 11px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.month-weekdays, .month-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.month-weekdays span { padding: 4px 0 7px; color: var(--muted); font-size: 10px; }
.month-days span { position: relative; min-height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; }
.month-days span.today { color: white; background: var(--primary); font-weight: 800; }
.month-days i { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--coffee); font-size: 8px; font-style: normal; }

.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-grid button { padding: 10px; display: grid; grid-template-columns: 38px 1fr; align-items: center; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: var(--surface); text-align: left; cursor: pointer; }
.theme-grid button.selected { border: 2px solid var(--primary); padding: 9px; }
.theme-grid strong, .theme-grid small { padding-left: 8px; }
.theme-grid small { color: var(--muted); font-size: 10px; }
.theme-preview { grid-row: 1 / span 2; width: 38px; height: 46px; border: 1px solid var(--line); border-radius: 9px; }
.theme-preview.light { background: #fbfaf7; border-color: #758d71; }
.theme-preview.dark { background: #26332b; border-color: #758d71; }

.modal-overlay { position: fixed; z-index: 30; inset: 0; padding: max(22px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom)); display: grid; place-items: center; background: rgba(16, 24, 19, .7); backdrop-filter: blur(5px); }
.modal-card { width: min(100%, 500px); max-height: min(82vh, 720px); padding: 21px; overflow-y: auto; border: 1px solid var(--line); border-radius: 23px; color: var(--text); background: var(--bg); box-shadow: 0 24px 70px rgba(0,0,0,.38); overscroll-behavior: contain; }
.modal-card > header { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-card > header p { margin: 0 0 3px; color: var(--primary-strong); font-size: 10px; font-weight: 800; }
.modal-card > header h2 { margin: 0; font-family: ui-serif, "Songti SC", serif; font-size: 23px; }
.modal-card > header button { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: var(--surface); font-size: 22px; cursor: pointer; }
.dialog-copy { margin: 0 0 18px; color: var(--muted); line-height: 1.65; }
.dialog-copy.center { text-align: center; }
.task-dialog-meta { margin: -5px 0 14px; color: var(--primary-strong); font-size: 12px; font-weight: 750; }
.feedback-symbol { width: 52px; height: 52px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--primary); font-size: 24px; }
.feedback-card > header { display: none; }
.feedback-card { text-align: center; }

@media (max-width: 430px) {
  .page { padding-right: 15px; padding-left: 15px; }
  .filter-row { margin-right: -15px; margin-left: -15px; padding-right: 15px; padding-left: 15px; }
  .profile-row { grid-template-columns: 44px minmax(0, 1fr); }
  .profile-age { grid-column: 2; padding: 8px 0 0; border-top: 1px solid var(--line); border-left: 0; text-align: left; }
  .field-pair { grid-template-columns: 1fr; }
  .certificate-list-card { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .certificate-list-card .status-pill { display: none; }
}

@media (min-width: 720px) {
  .product-page { padding-top: 28px; }
  .modal-card { max-height: min(84vh, 760px); }
}