/* Shared visual language for the website, community, and management pages. */
:root {
  --ui-blue: #315eea;
  --ui-blue-hover: #234ad0;
  --ui-blue-soft: #edf3ff;
  --ui-ink: #1a2942;
  --ui-muted: #61718a;
  --ui-border: #dfe6f1;
  --ui-radius: 14px;
  --ui-shadow: 0 8px 28px rgb(32 54 90 / 6%);
  --ui-ease: cubic-bezier(.2, .8, .2, 1);
}

:is(.site-ui, .admin-ui, .promo-ui) {
  color: var(--ui-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(ellipse at 12% 0, #eaf0ff 0, transparent 42rem), #f6f8fc;
}

:is(.site-ui, .admin-ui, .promo-ui) ::selection { color: #183e9f; background: #dce7ff; }
:is(.site-ui, .admin-ui, .promo-ui) :is(button, a, input, select, textarea, summary) { -webkit-tap-highlight-color: transparent; }
:is(.site-ui, .admin-ui, .promo-ui) :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid #93b4ff;
  outline-offset: 3px;
}
:is(.site-ui, .admin-ui, .promo-ui) button { touch-action: manipulation; }

/* Buttons: one shape, a clear primary action, and readable secondary actions. */
.site-ui :is(.primary-button, .secondary-button, .account-login-button, .text-button, .quick-action-button),
.promo-ui .button,
.admin-ui :is(.heading-actions button, .tool-card button, .diagnostics-heading button, .invitation-result button, .shared-format-review-toolbar button, .shared-format-review-card button) {
  min-height: 42px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 180ms ease, transform 180ms var(--ui-ease);
}
.site-ui .primary-button,
.promo-ui .button-primary,
.admin-ui #refresh-button {
  min-height: 42px;
  border-radius: 12px;
  color: #fff;
  border: 1px solid #315eea;
  background: linear-gradient(180deg, #4270f5, #315eea);
  box-shadow: 0 3px 5px rgb(38 74 169 / 10%), inset 0 1px 0 rgb(255 255 255 / 18%);
  text-shadow: 0 1px 1px rgb(16 44 120 / 12%);
}
.site-ui :is(.secondary-button, .account-login-button, .quick-action-button),
.promo-ui .button-secondary {
  color: #344b72;
  border: 1px solid #d5dfef;
  background: #fff;
  box-shadow: 0 1px 2px rgb(27 49 88 / 3%);
}
.site-ui .text-button {
  min-height: 34px;
  padding: 6px 10px;
  color: #3d5c91;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}
.site-ui :is(.danger-button, .secondary-button.danger),
.admin-ui button.reject {
  color: #b32940;
  border-color: #efc8d0;
  background: #fff6f7;
  box-shadow: none;
}
.site-ui :is(.primary-button, .secondary-button, .account-login-button, .quick-action-button):disabled,
.promo-ui .button:disabled {
  color: #6c7b92;
  border-color: #dfe6f0;
  background: #edf1f7;
  box-shadow: none;
  text-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}
.site-ui [data-ui-busy="true"],
.promo-ui [aria-busy="true"],
.admin-ui button[aria-busy="true"] { cursor: progress; }
.site-ui .primary-button.is-busy { color: #fff; border-color: #315eea; background: #315eea; }
.site-ui :is(.primary-button, .secondary-button, .text-button, .account-login-button):not(:disabled):active,
.promo-ui .button:not(:disabled):active { transform: translateY(1px) scale(.99); }
.site-ui .attention-action { animation: none; }
.site-ui .compact-button { min-height: 36px; padding: 8px 12px; font-size: 12px; }
.site-ui .auth-close-button {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-height: 36px;
  place-items: center;
  padding: 0;
  color: #6b7b92;
  border: 1px solid #e1e7f0;
  border-radius: 11px;
  background: #f8faff;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

/* A calmer page frame, with a consistent brand and document surface. */
.site-ui .app-shell { border-color: #dce4f0; border-radius: 26px; box-shadow: 0 20px 70px rgb(35 58 105 / 8%); }
.site-ui .topbar { background: rgb(255 255 255 / 96%); border-bottom-color: #e7ecf4; }
.site-ui .brand-mark,
.admin-ui .admin-brand > span,
.promo-ui .brand-mark {
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(145deg, #426cef, #274cba);
  box-shadow: 0 5px 12px rgb(49 94 234 / 17%);
}
.site-ui .brand-mark::after { border-color: #fff; }
.site-ui .version-badge { color: #48649a; background: #eff3fb; border-color: #e0e7f3; }
.site-ui .topnav .nav-cta { color: #fff; background: #203352; border-radius: 12px; box-shadow: 0 3px 8px rgb(28 46 79 / 10%); }
.site-ui .homepage-hero { background: radial-gradient(ellipse at 82% 6%, #f0f5ff 0, transparent 60%), #fafcff; }
.site-ui .homepage-hero .hero-copy h1 { color: #172940; }
.site-ui .homepage-hero .hero-copy h1 span { color: #315eea; }
.site-ui .homepage-hero .upload-card { border-color: #d7e2f3; border-radius: 22px; box-shadow: 0 12px 36px rgb(42 69 116 / 8%); }
.site-ui .homepage-hero .drop-zone { border: 1.5px dashed #becff1; border-radius: 17px; background: linear-gradient(150deg, #f4f7ff, #fafcff); }
.site-ui .homepage-hero .drop-zone.ready { border-color: #7c9dee; background: #f0f5ff; }
.site-ui .homepage-hero .drop-zone.dragover { border-color: #315eea; background: #eaf1ff; }
.site-ui .homepage-hero .upload-file-icon { border-radius: 13px; box-shadow: 0 9px 20px rgb(49 94 234 / 17%); }
.site-ui .homepage-hero .upload-button { min-height: 48px; font-size: 14px; }
.site-ui .homepage-payment-notice { border-radius: 12px; background: #eff8f5; color: #246f57; border-color: #d5eade; border-left-color: #399d7a; }
.site-ui .hero-invite-prompt.is-public-share { border-color: #dce6f6; border-left: 1px solid #dce6f6; background: #f2f6ff; border-radius: 15px; }
.site-ui .homepage-entry-options button { border-radius: 13px; border-color: #dde5f1; background: #fff; }
.site-ui .homepage-entry-options button[aria-pressed="true"] { background: #edf3ff; border-color: #7f9fea; box-shadow: inset 0 0 0 1px #7f9fea; }
.site-ui .homepage-hero .steps span { color: #64748b; border-color: #e1e8f2; box-shadow: none; }
.site-ui .homepage-hero .steps b { background: #eaf0ff; color: #315eea; box-shadow: none; }
.site-ui .homepage-hero .maker-note { border-color: #dde6f5; border-left-color: #7c9ef1; background: rgb(255 255 255 / 85%); }
.site-ui .shared-format-library-entry { border-radius: 21px; border-color: #dce5f2; background: linear-gradient(115deg, #f1f5ff, #fff 68%); box-shadow: var(--ui-shadow); }
.site-ui .shared-format-library-entry h2 { color: #203352; }

/* Form controls retain native keyboard and select behavior. */
.site-ui :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea),
.admin-ui :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: #d6e0ee;
  border-radius: 11px;
  color: #263a56;
  background-color: #fff;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.site-ui :is(input, select, textarea):focus-visible,
.admin-ui :is(input, select, textarea):focus-visible { border-color: #7799ea; outline: 2px solid #c3d4ff; outline-offset: 1px; box-shadow: 0 0 0 4px rgb(49 94 234 / 6%); }
.site-ui :is(input, textarea)::placeholder,
.admin-ui :is(input, textarea)::placeholder { color: #8a98ad; opacity: 1; }
.site-ui :is(input[type="checkbox"], input[type="radio"]),
.admin-ui :is(input[type="checkbox"], input[type="radio"]) { accent-color: #315eea; }
.site-ui .card { border-color: #dfe6f1; border-radius: 21px; box-shadow: var(--ui-shadow); }
.site-ui .format-source-option { border-radius: 14px; border-color: #dce4f1; }
.site-ui .format-source-option:has(input:checked) { border-color: #8daaf0; background: #f1f5ff; box-shadow: inset 0 0 0 1px #c0d1f7; }
.site-ui :is(.custom-guided-header, .custom-saved-profile, .document-risk-card, .processing-options, .school-requirement-review, .result-section-details) { border-color: #dfe6f2; border-radius: 14px; }
.site-ui :is(.custom-entry-tabs, .shared-format-sort-tabs) { padding: 4px; border: 1px solid #e0e7f2; border-radius: 13px; background: #f0f3f9; gap: 4px; }
.site-ui :is(.custom-entry-tabs button, .shared-format-sort-tab) { min-height: 36px; color: #61718a; border: 1px solid transparent; border-radius: 9px; background: transparent; box-shadow: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
.site-ui :is(.custom-entry-tabs button[aria-selected="true"], .shared-format-sort-tab.is-active) { color: #284fa9; border-color: #e0e7f2; background: #fff; box-shadow: 0 2px 6px rgb(32 54 90 / 7%); }
.site-ui :is(.workflow-actions, .format-workflow-actions) { border-top-color: #e5ebf4; }
.site-ui .progress-bar { background: linear-gradient(90deg, #315eea, #6d91fa); }
.site-ui .toast-region { border-radius: 14px; box-shadow: 0 12px 32px rgb(18 37 70 / 16%); }

/* Community and dialogs: a visible close action and a shared card hierarchy. */
.site-ui :is(.auth-dialog, .shared-format-dialog, .confirm-dialog) { border: 1px solid rgb(255 255 255 / 85%); border-radius: 24px; box-shadow: 0 24px 90px rgb(15 34 67 / 24%); }
.site-ui :is(.auth-dialog, .shared-format-dialog, .confirm-dialog)::backdrop { background: rgb(20 36 62 / 42%); backdrop-filter: blur(5px); }
.site-ui .shared-format-dialog > .shared-format-dialog-head { position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid #edf0f6; }
.site-ui .shared-format-dialog-head h2 { color: #203352; letter-spacing: -.025em; }
.site-ui .shared-format-community-actions { margin: 14px 24px 0; padding: 12px 14px; border-color: #e1e8f4; border-radius: 14px; background: #f7f9fe; }
.site-ui .shared-format-dialog > .shared-format-source-tabs { gap: 4px; margin: 18px 24px 4px; padding: 5px; border: 1px solid #dfe6f1; border-radius: 14px; background: #f0f3f9; }
.site-ui .shared-format-source-tabs button { flex: 1; color: #62718a; border: 1px solid transparent; border-radius: 10px; background: transparent; box-shadow: none; }
.site-ui .shared-format-source-tabs button.is-active { color: #284fa9; border-color: #dee6f3; background: #fff; box-shadow: 0 2px 6px rgb(32 54 90 / 6%); }
.site-ui .shared-format-filter-panel { border-color: #e0e7f2; border-radius: 14px; background: #fafbfe; }
.site-ui .shared-format-card { min-height: 0; align-self: start; border: 1px solid #e0e7f2; border-radius: 18px; box-shadow: 0 3px 12px rgb(32 54 90 / 4%); }
.site-ui .platform-format-card { border-color: #d9e4f5; }
.site-ui .shared-format-card-head h3 { color: #213652; line-height: 1.55; font-size: 16px; }
.site-ui .shared-format-badge { padding: 5px 8px; color: #8b621b; border-radius: 8px; background: #fff6e7; line-height: 1.5; }
.site-ui .shared-format-badge.is-platform { color: #355ea1; background: #ecf3ff; }
.site-ui .shared-format-meta span { color: #63728a; border-radius: 7px; background: #f0f3f8; }
.site-ui .shared-format-trust-summary { gap: 6px; }
.site-ui .shared-format-trust-summary span { padding: 7px 5px; color: #65758d; border-color: #e4eaf4; border-radius: 8px; background: #f8faff; font-size: 12px; }
.site-ui .shared-format-detail { padding: 14px; border-color: #dce5f4; background: #f5f8ff; border-radius: 13px; }
.site-ui .shared-format-detail .school-requirement-section { margin-top: 10px; padding: 11px; border: 1px solid #e0e7f2; border-radius: 11px; background: #fff; }
.site-ui .shared-format-detail .school-requirement-section strong { color: #304d78; }
.site-ui .shared-format-detail .school-requirement-section li { color: #566b89; border-color: #e0e7f2; background: #f8faff; }
.site-ui .shared-format-card-actions { flex-wrap: wrap; padding-top: 4px; }
.site-ui .shared-format-card-actions small { flex: 1 1 150px; font-size: 12px; line-height: 1.6; }
.site-ui :is(.shared-format-card-actions, .shared-format-detail-actions) .primary-button { width: auto; margin: 0; }
.site-ui .shared-format-library-status { color: #66758d; font-size: 13px; line-height: 1.75; }
.site-ui :is(.shared-format-library-status.is-error, .error-text) { color: #b32940; }
.site-ui .shared-format-vote { min-height: 36px; border-radius: 10px; background: #fff; }
.site-ui .shared-format-vote.is-up.is-active { color: #237253; border-color: #add8c4; background: #edf8f2; }
.site-ui .shared-format-vote.is-down.is-active { color: #b32940; border-color: #efc8d0; background: #fff4f6; }

/* Management and promotion use the same surfaces and controls. */
.admin-ui .admin-topbar { border-bottom-color: #e1e7f1; box-shadow: 0 2px 12px rgb(32 54 90 / 3%); }
.admin-ui :is(.metric-card, .panel, .tool-card, .feedback-item, .action-center article) { border-color: #dfe6f1; border-radius: 17px; box-shadow: 0 4px 16px rgb(32 54 90 / 4%); }
.admin-ui .metric-card.primary { border-color: #cbd9f6; background: linear-gradient(135deg, #f0f5ff, #fff); }
.admin-ui .metric-card > strong { color: #233b62; font-variant-numeric: tabular-nums; }
.admin-ui .admin-nav a { border-radius: 10px; }
.admin-ui .admin-nav a.is-active { color: #284fa9; background: #eaf1ff; }
.admin-ui .summary-card { border-color: #dfe6f1; border-radius: 14px; }
.admin-ui .summary-card.is-active { border-color: #adc3f5; background: #edf3ff; }
.admin-ui .feedback-actions { border-radius: 13px; background: #f7f9fd; }
.promo-ui .hero { border-color: #e0e7f2; background: radial-gradient(ellipse at 90% 12%, #ecf2ff, transparent 65%), #fff; box-shadow: 0 16px 50px rgb(32 54 90 / 7%); }
.promo-ui .button { min-height: 46px; }
.promo-ui .hero::after { opacity: .55; }

@media (hover: hover) and (pointer: fine) {
  .site-ui .primary-button:not(:disabled):hover,
  .promo-ui .button-primary:not(:disabled):hover { border-color: #234ad0; background: linear-gradient(180deg, #3965ed, #264ed7); box-shadow: 0 6px 16px rgb(49 94 234 / 20%); transform: translateY(-1px); }
  .site-ui :is(.secondary-button, .account-login-button, .quick-action-button):not(:disabled):hover,
  .promo-ui .button-secondary:not(:disabled):hover { border-color: #a8bde6; background: #f6f9ff; color: #284fa9; transform: translateY(-1px); }
  .site-ui .text-button:not(:disabled):hover { color: #284fa9; background: #edf3ff; border-color: #e0e8f7; }
  .site-ui :is(.danger-button, .secondary-button.danger):not(:disabled):hover { color: #9a2035; border-color: #e5a5b2; background: #ffedf1; }
  .site-ui .auth-close-button:hover { color: #294b83; border-color: #bfd0eb; background: #edf3ff; }
  .site-ui .shared-format-card:hover { border-color: #bccded; box-shadow: 0 8px 24px rgb(32 54 90 / 8%); }
  .site-ui .homepage-entry-options button:hover { border-color: #aebfe1; background: #f8faff; }
  .site-ui .shared-format-source-tabs button:hover { background: #f8faff; }
}

@media (max-width: 760px) {
  .site-ui .shared-format-community-actions { margin-inline: 18px; padding: 12px; }
  .site-ui .shared-format-dialog > .shared-format-source-tabs { margin-inline: 18px; }
  .site-ui .shared-format-source-tabs button { padding-inline: 6px; font-size: 12px; }
  .site-ui .shared-format-dialog-head h2 { font-size: 22px; line-height: 1.4; }
  .site-ui .shared-format-card-head h3 { font-size: 15px; }
  .site-ui :is(.primary-button, .secondary-button, .account-login-button, .quick-action-button) { min-height: 44px; }
  .site-ui .shared-format-dialog .compact-button { min-height: 40px; }
  .site-ui .shared-format-card-actions small { flex-basis: auto; }
  .site-ui :is(.shared-format-card-actions, .shared-format-detail-actions) .primary-button { width: 100%; }
}
@media (max-width: 560px) {
  .site-ui .app-shell { border-radius: 0; }
  .site-ui .homepage-hero .upload-card { border-radius: 19px; }
  .site-ui .homepage-entry-options button { border-radius: 11px; }
  .site-ui :is(.auth-dialog, .shared-format-dialog, .confirm-dialog) { border-radius: 20px; }
  .site-ui .shared-format-dialog-head { gap: 10px; }
  .site-ui .shared-format-dialog-head > div { min-width: 0; }
  .site-ui .shared-format-dialog-head p { font-size: 12px; line-height: 1.7; }
  .site-ui .shared-format-library-entry { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.site-ui, .admin-ui, .promo-ui) :is(button, .button, .link-button) { transition: none; }
  .site-ui :is(.primary-button, .secondary-button, .account-login-button):hover,
  .promo-ui .button:hover { transform: none; }
}
@media (forced-colors: active) {
  :is(.site-ui, .admin-ui, .promo-ui) :is(button, .button) { border: 1px solid ButtonText; box-shadow: none; }
}