/* Shared public, Mini App and staff primitives. Keep risk colours semantic. */
:root {
  --cs-font-sans: Inter, 'Noto Sans', 'Noto Sans SC', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cs-text: #172b27; --cs-text-muted: #52635e; --cs-body: #344740;
  --cs-bg: #f4f7f6; --cs-page-bg: #f4f7f6; --cs-surface: #fff;
  --cs-brand: #087f5b; --cs-brand-hover: #066447; --cs-brand-border: #087f5b;
  --cs-border-card: #dce5e0; --cs-radius: 16px; --cs-control-radius: 10px;
  --cs-shadow: 0 4px 20px #163d2d08;
  --cs-small: .8125rem; --cs-label: .875rem; --cs-copy: 1rem;
}
html { scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--cs-font-sans); font-size: var(--cs-copy); line-height: 1.6; }
button, input, textarea, select { font-family: var(--cs-font-sans); }
body :is(h1,h2,h3,h4) { font-family: var(--cs-font-sans); line-height: 1.3; text-wrap: balance; }
body :is(.section-title,.card h2,.user-reviews h2) { font-size: 1.25rem; font-weight: 700; }
body :is(.review-content,.co-prose,.details,.review .body) { font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
body :is(.card,.auth-card,.review-card,.stat-card) { border-radius: var(--cs-radius); box-shadow: var(--cs-shadow); }
body :is(.btn,.form-control,.auth-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden])) {
  font-family: var(--cs-font-sans); border-radius: var(--cs-control-radius);
}
body :is(.form-control,.auth-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden])) {
  min-height: 48px; width: 100%; border: 1px solid var(--cs-border-card);
  padding: 12px 14px; font-size: 16px !important; line-height: 1.5;
  color: var(--cs-text); background: var(--cs-surface);
}
body .btn { min-height: 44px; font-size: .9375rem; font-weight: 600; }
body .btn-primary { background: var(--cs-brand); border-color: var(--cs-brand); color: white; }
body .btn-primary:hover { background: var(--cs-brand-hover); }
body :is(label,.form-group label) { font-size: var(--cs-label); line-height: 1.5; }
body :is(.review-date,.review-footer,.username,.stat-content p) { color: var(--cs-text-muted); font-size: var(--cs-label); }
body .user-info h1 { font-size: clamp(1.5rem,3vw,2rem); overflow-wrap: anywhere; }
body :is(.avatar-placeholder,.stat-icon) { background: var(--cs-brand); }
body .role-badge { background: #e5f4ed; color: #076346; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 3px solid #087f5b; outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .6; }
.cs-miniapp {
  --bg: var(--tg-theme-bg-color, #f4f7f6); --text: var(--tg-theme-text-color, #172b27);
  --hint: var(--tg-theme-hint-color, #52635e); --btn: var(--tg-theme-button-color, #087f5b);
  --card: var(--tg-theme-secondary-bg-color, #fff); --radius: 16px;
  max-width: 760px; margin-inline: auto; line-height: 1.6;
}
.cs-miniapp :is(.hero h1,.done h2) { font-size: 1.5rem; line-height: 1.3; }
.cs-miniapp :is(.hero .meta,.hero p,.row,.review .who,.rating-text,.photo-hint,.field-title) { font-size: .875rem; line-height: 1.5; }
.cs-miniapp :is(input,textarea,select) { font-size: 16px; }
.cs-miniapp .bottom { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.cs-miniapp .cs-recovery { padding: 24px; text-align: center; }
.cs-miniapp .cs-recovery a { display: inline-flex; align-items: center; min-height: 44px; color: var(--btn); font-weight: 600; }
.staff-body { --tblr-font-sans-serif: var(--cs-font-sans); font-family: var(--cs-font-sans); }
@media (max-width: 600px) {
  body :is(.section-title,.card h2,.user-reviews h2) { font-size: 1.125rem; }
  body .auth-card { padding: 20px; }
  body .user-header { gap: 16px; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.cs-miniapp .cs-recovery h1 { font-size: 1.5rem; }

/* Long company names and handles must remain readable on narrow screens. */
body .biz-approved__title { max-width: 100%; overflow-wrap: anywhere; }
body :is(.biz-approved__handle,.biz-approved__code,.biz-approved__url) { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  body .biz-profile-head { padding-top: 2rem; }
  body .biz-head-row { width: 100%; }
}