/* GENERATED by scripts/sync-study-ui.mjs. Edit packages/study-ui, then sync. */
/* Study visual system v2. Semantic teaching colors and original character/brand assets
   remain owned by their applications. No network fonts or root service worker. */
:root {
  color-scheme: light;
  --study-page: #f7f5ef;
  --study-surface: #fffefa;
  --study-heading: #243f38;
  --study-text: #34483f;
  --study-muted: #59665d;
  --study-action: #294f43;
  --study-action-hover: #203f35;
  --study-action-pressed: #19382f;
  --study-selected: #eaf0e9;
  --study-accent: #a9553b;
  --study-line: #dadfd5;
  --study-boundary: #7a8980;
  --study-focus: #356f62;
  --study-error: #963f32;
  --study-error-surface: #faeeea;
  --study-warning: #80522b;
  --study-warning-surface: #f3e8dc;
  --study-radius-control: 12px;
  --study-radius-panel: 16px;
  --study-font: 'Lab Sans', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --study-font-system: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --study-focus-ring: 3px solid var(--study-focus);
}



html { background: var(--study-page); -webkit-text-size-adjust: 100%; }
body { background: var(--study-page); color: var(--study-text); font-family: var(--study-font); font-synthesis: none; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3 { color: var(--study-heading); font-weight: 700; text-wrap: balance; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible { outline: var(--study-focus-ring); outline-offset: 3px; }
::selection { color: var(--study-heading); background: var(--study-selected); }

/* Shared account state colors continue to communicate the existing contract. */
.family-account-pill {
  --fs-pill-line: var(--study-boundary);
  --fs-pill-surface: var(--study-surface);
  --fs-pill-ink: var(--study-text);
  min-height: 44px;
  box-shadow: none;
}
.family-dialog {
  --fs-paper: var(--study-surface);
  --fs-text: var(--study-text);
  --fs-muted: var(--study-muted);
  --fs-rule: var(--study-line);
  --fs-accent: var(--study-action);
  border: 1px solid var(--study-line);
  border-radius: var(--study-radius-panel);
  box-shadow: 0 16px 48px #243f3820;
}
.family-dialog h2 { font-weight: 700; font-size: 26px; }
.family-dialog p, .family-dialog label, .family-section > strong, .family-link { font-size: 14px; letter-spacing: 0; }
.family-dialog p { line-height: 1.7; }
.family-dialog input[type], .family-dialog select {
  min-height: 48px;
  border-color: var(--study-boundary);
  border-radius: var(--study-radius-control);
  background: var(--study-surface);
}
.family-primary, .family-secondary, .family-danger {
  min-height: 48px;
  border-radius: var(--study-radius-control);
  font-size: 16px;
}
.family-secondary { background: var(--study-surface); border-color: var(--study-boundary); }
.family-primary:hover { background: var(--study-action-hover); }
.family-dialog-close { width: 44px; height: 44px; background: var(--study-surface); }
.family-error { background: var(--study-error-surface); color: var(--study-error) !important; }
.family-account-pill.pending-enable { border-color:var(--study-action); color:var(--study-action); }
.family-account-pill.pending-enable i { background:var(--study-action); }
.global-feedback-corner { background: var(--study-surface); color: var(--study-action); border-color: var(--study-boundary); box-shadow: none; backdrop-filter: none; }
.site-footer { color: var(--study-muted); border-color: var(--study-line); background: var(--study-page); }

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

/* Keep the feedback destination readable on small screens too. */
@media(max-width:680px) {
  .global-feedback-corner b { display:inline; font-size:12px; font-weight:700; }
  .global-feedback-corner { gap:5px; padding:0 12px; min-height:44px; }
}

/* Static family, feedback and staff pages use the same reading and form system. */
:root {
  --accent:var(--study-action); --accent-dark:var(--study-action-hover); --accent-soft:var(--study-selected);
  --green:var(--study-action); --green-dark:var(--study-action-hover); --dark:var(--study-action-hover);
  --ink:var(--study-heading); --ink-2:var(--study-text); --ink-3:var(--study-muted); --muted:var(--study-muted);
  --line:var(--study-line); --paper:var(--study-surface); --cream:var(--study-page); --mint:var(--study-selected); --shadow:none;
  --danger:var(--study-error); --danger-soft:var(--study-error-surface); --red:var(--study-error);
  font-family:var(--study-font-system); color:var(--study-text);
}
body { background:var(--study-page); font-family:var(--study-font-system); }
.shell > *, .card, .table-wrap { min-width:0; }
.table-wrap { max-width:100%; }
.hero h1 { overflow-wrap:anywhere; }
.topbar,.mobile-header { background:var(--study-page); border-color:var(--study-line); backdrop-filter:none; }
h1,.page-header h1 { font-size:36px; line-height:1.4; letter-spacing:0; }
h2 { font-size:24px; line-height:1.4; }
.eyebrow { color:var(--study-muted); font-size:13px; font-weight:700; letter-spacing:.06em; }
.card,.form-card,.panel,.metric-card,.modal { background:var(--study-surface); border-radius:16px; border:1px solid var(--study-line); box-shadow:none; }
.form-card { padding:32px; }
.card { padding:24px; }
button,input,select,textarea { border-radius:12px; }
input:not([type='checkbox']):not([type='radio']),select,textarea { border-color:var(--study-boundary); background:var(--study-surface); color:var(--study-text); font-size:16px; }
input:not([type='checkbox']):not([type='radio']),select { min-height:48px; }
button,.submit { min-height:44px; font-weight:700; box-shadow:none; }
button.primary,.submit { min-height:48px; background:var(--study-action); color:var(--study-surface); font-size:16px; }
button.primary:hover,.submit:hover { background:var(--study-action-hover); }
label,.muted,.note,.privacy,.child small,.form-error { font-size:14px; }
.muted,.note,.privacy,label em,label small { color:var(--study-muted); line-height:1.75; }
.form-error { color:var(--study-error); }
.danger-zone { background:var(--study-error-surface); border-color:var(--study-error); }
button.danger { background:var(--study-error); }
dialog { background:var(--study-surface); border:1px solid var(--study-line); border-radius:16px; box-shadow:0 16px 48px #243f3820; }
.intro { padding-top:0; }
.intro h1 { margin:12px 0 20px; font-size:40px; line-height:1.4; letter-spacing:0; }
.intro h1 span { color:var(--study-accent); }
.promise span { background:var(--study-selected); color:var(--study-action); font-size:13px; font-weight:400; }
.rating { background:var(--study-surface); border-color:var(--study-boundary); border-radius:12px; color:var(--study-muted); }
.rating small { font-size:12px; }
.rating:hover,.rating.active { transform:none; border-color:var(--study-action); background:var(--study-selected); color:var(--study-action); }
.success > div { background:var(--study-selected); }
.metric-card b { font-variant-numeric:tabular-nums; font-size:32px; }
.study-admin .sidebar { background:var(--study-action); }
.study-admin .page-header h1 { font-size:32px; }
.study-admin .nav-item.active { background:var(--study-surface); }
.study-admin .text-button,.study-admin .icon-button { min-height:44px; }
.study-admin .sidebar .danger-text { color:#ffd0cc; }
.study-admin .table-action { min-height:44px; }
@media(max-width:640px) {
  h1,.page-header h1,.intro h1 { font-size:28px; }
  h2 { font-size:22px; }
  .card,.form-card { padding:20px; }
  .rating small { font-size:11px; }
  .intro h1 { margin:8px 0 14px; }
}
.service-footer { width:min(1180px,calc(100% - 36px)); margin:24px auto 0; padding:24px 0 72px; border-top:1px solid var(--study-line); color:var(--study-muted); font-size:14px; line-height:1.7; }
.service-signature { display:flex; gap:14px; align-items:center; }
.service-logos { display:flex; flex:none; gap:12px; align-items:center; }
.service-logos img { width:24px; height:24px; object-fit:contain; }
.service-signature b { font-size:14px; }
.service-signature p { margin:4px 0 0; }
.service-footer nav { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:16px; }
.service-footer a { color:var(--study-muted); text-decoration:none; }
.service-footer a:hover { color:var(--study-action); text-decoration:underline; }
.study-admin .login-card { background:var(--study-surface); border-radius:16px; box-shadow:none; }
.study-admin .login-card h1 { font-size:32px; line-height:1.4; }
.study-admin .button.primary { box-shadow:none; border-radius:12px; }
.study-admin .button.secondary { border-color:var(--study-boundary); }
@media(max-width:640px) { .study-admin .login-card h1 { font-size:28px; } }