/* NadoMogu · 2026-09-18
   Shared product system. Existing route markup, state classes and hidden
   behavior remain authoritative; this sheet changes presentation only. */
:root {
  --brand: #224be8;
  --brand-strong: #1739bf;
  --brand-wash: #edf1ff;
  --accent: #224be8;
  --accent-strong: #1739bf;
  --accent-hover: #1739bf;
  --accent-wash: #edf1ff;
  --accent-ink: #fff;
  --ink: #151b20;
  --muted: #626b74;
  --line: #e0e4e8;
  --page: #f5f6f8;
  --hero: #fff;
  --shadow: 0 14px 40px rgb(21 27 32 / 8%);
  --wow-lime: #d8f36a;
}
body {
  color: var(--ink);
  background: var(--page);
  font-family: "Manrope", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body :is(h1,h2,h3,h4,p,a,button,input,select,textarea,label,legend,dt,dd,span,strong,small,summary,li) {
  letter-spacing: 0;
}
body ::selection { color: #151b20; background: #dce5ff; }
body :is(a,button,input,select,textarea,summary):focus-visible {
  outline: 3px solid rgb(34 75 232 / 38%);
  outline-offset: 3px;
}
body :is(input,select,textarea) { caret-color: var(--brand); }

/* Header and global actions. Keep the existing sticky height and menu logic. */
body .topbar {
  border-bottom: 1px solid var(--line);
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
}
body .topbar__inner { gap: 38px; }
body .main-nav { gap: 28px; color: #626b74; font-size: 13px; }
body .main-nav a { transition: color .16s ease; }
body .main-nav a:hover,
body .main-nav .is-active { color: var(--ink); }
body .main-nav .is-active::after { height: 2px; background: var(--brand); }
body .topbar__actions { gap: 10px; }
body .button,
body .p-dialog .button,
body .nado-product .button {
  min-height: 46px;
  padding: 0 18px;
  gap: 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: none;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
body .button:hover:not(:disabled) { transform: none; }
body .button--primary,
body .nado-product .button--primary,
body .p-dialog .button--primary,
body .topbar__guest-actions .button--small {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: none;
}
body .button--primary:hover:not(:disabled),
body .nado-product .button--primary:hover:not(:disabled),
body .p-dialog .button--primary:hover:not(:disabled),
body .topbar__guest-actions .button--small:hover {
  color: #fff;
  border-color: var(--brand-strong);
  background: var(--brand-strong);
}
body .button--outline,
body .nado-product .button--outline,
body .p-dialog .button--outline {
  color: var(--ink);
  border-color: #d5dbe1;
  background: #fff;
  box-shadow: none;
}
body .button--outline:hover:not(:disabled),
body .nado-product .button--outline:hover:not(:disabled),
body .p-dialog .button--outline:hover:not(:disabled) {
  color: var(--ink);
  border-color: #a9b2bd;
  background: #f5f7f9;
}
body .button--small { min-height: 44px; padding-inline: 15px; }
body .topbar__create { color: var(--brand); border-color: #d7dffb; background: #edf1ff; }
body .topbar__create:hover:not(:disabled) { color: #fff; border-color: var(--brand); background: var(--brand); }
body :is(.icon-action,.account-menu-trigger,.menu-button,.filter-trigger,.chat-back) { border-radius: 8px; }
body .icon-action:hover,
body .icon-action:focus-visible { color: var(--brand); background: #f0f3f8; }
body .account-link__avatar { color: #374558; background: #eef1f5; }
body .header-popover__panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgb(21 27 32 / 12%);
}
body .header-popover__heading h2 { font-size: 16px; }
body .header-popover__panel--profile nav a { border-radius: 6px; }
body .mobile-menu { box-shadow: 0 14px 30px rgb(21 27 32 / 7%); }

/* Stable typography and restrained workspace structure. */
body .nado-product { --p-ink: #151b20; --p-muted: #626b74; --p-line: #e0e4e8; --p-wash: #f5f6f8; }
body .workspace-main,
body[data-page] .workspace-main { background: #f5f6f8; }
body .workspace-main:not(.workspace-main--messages) { padding-top: 38px; padding-bottom: 64px; }
body .workspace-main--guest { min-height: calc(100dvh - 80px); }
body .page-heading { gap: 24px; margin-bottom: 28px; }
body .page-heading h1,
body[data-page] .page-heading h1,
body .nado-product .page-heading h1,
body .account-content > .page-heading h1 {
  color: #151b20;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
}
body .page-heading > div > p:not(.eyebrow) { max-width: 64ch; color: #626b74; font-size: 14px; line-height: 1.65; }
body .eyebrow { color: #626b74; font-size: 11px; font-weight: 700; line-height: 1.5; text-transform: uppercase; }
body :is(.app-card,.nado-product .app-card,.account-rail,.account-list-surface,.workspace-list-surface,.workspace-summary,.registration-card,.p-chat-layout,.deal-focus__header,.deal-focus__aside) {
  border-color: var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}
body .app-card,
body .nado-product .app-card { padding: 24px; }
body .app-card h2,
body .nado-product .app-card h2 { color: #151b20; font-size: 20px; line-height: 1.35; }
body .app-card h3,
body .nado-product .app-card h3 { color: #151b20; font-size: 16px; line-height: 1.4; }
body .app-card > p { color: #626b74; font-size: 14px; line-height: 1.65; }
body .p-large,
body .balance-number { font-size: 40px; font-variant-numeric: tabular-nums; }
body .route-budget { border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
body :is(.p-grid,.profile-columns,.profile-content,.support-layout,.settings-grid) { gap: 24px; }
body .p-stack { gap: 24px; }
body .back-link { margin-bottom: 20px; color: #626b74; font-size: 13px; }
body .back-link:hover { color: var(--brand); }

/* Inputs retain their native type, explicit invalid states and JS hooks. */
body .field > span,
body .nado-product .field > span,
body .p-dialog .field > span,
body .form-label { color: #454e58; font-size: 13px; font-weight: 600; }
body .field > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body .field > select,
body .field > textarea,
body .nado-product .field > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body .nado-product .field > select,
body .nado-product .field > textarea,
body .p-dialog .field > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body .p-dialog .field > select,
body .p-dialog .field > textarea,
body .form-input,
body .code-inputs input {
  min-height: 48px;
  border: 1px solid #d8dde3;
  border-radius: 8px;
  color: #151b20;
  background-color: #fff;
  font-size: 16px;
  box-shadow: none;
}
body .field > input::placeholder,
body .field > textarea::placeholder,
body .form-input::placeholder { color: #68737e; font-weight: 400; }
body .field > input:focus,
body .field > select:focus,
body .field > textarea:focus,
body .form-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(34 75 232 / 10%);
}
body :is(input,textarea,select)[aria-invalid="true"] { border-color: #b7463d; }
body input[type="checkbox"],
body input[type="radio"] { accent-color: var(--brand); }
body .field > small,
body .form-hint { color: #626b74; font-size: 12px; line-height: 1.6; }
body :is(.upload-field,.ai-shortcut,.example-list button,.p-preview) { border-color: #d8dde3; border-radius: 8px; color: #45515e; background: #f8f9fb; }
body .ai-shortcut:hover { color: var(--brand); border-color: #b5c4fa; background: #edf1ff; }
body .p-note { border-color: #d5dffb; border-radius: 8px; color: #344a79; background: #f1f4fc; }
body .p-note--error { border-color: #edc0b5; color: #8e3929; background: #fff3ef; }
body .p-form-error { border: 1px solid #edc0b5; border-radius: 8px; }
body :is(.inline-info,.payment-boundary,.freeze-note) { border-radius: 8px; }

/* Lists, navigation and workflow steps use one clear active color. */
body .account-workspace { gap: 32px; }
body .account-rail { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
body .account-identity { padding-inline: 10px; border-color: var(--line); }
body .account-identity__avatar { color: #394656; background: #e9edf3; }
body .account-navigation__desktop { padding: 12px 16px 12px 0; }
body .account-nav-group h2 { color: #6d7680; font-size: 10px; }
body .account-nav-group a { border-radius: 6px; }
body .account-nav-group a[aria-current],
body .account-nav-group a[aria-current] b { color: var(--brand); background: #e9efff; }
body .account-list-surface > .restore-tabs { border-radius: 8px 8px 0 0; }
body .restore-tabs a { min-height: 48px; color: #626b74; font-size: 13px; }
body .restore-tabs a[aria-current] { color: var(--brand); border-bottom-color: var(--brand); }
body .restore-tabs a[aria-current] .restore-tab-count { color: var(--brand); background: #e6ecff; }
body .p-tabs a { min-height: 44px; border-radius: 6px; }
body .p-tabs a[aria-current="page"] { color: var(--brand); background: #e9efff; }
body .workspace-summary { border-width: 0 0 1px; border-radius: 0; background: transparent; margin-bottom: 26px; }
body .workspace-summary > div { padding: 4px 22px 22px; }
body .workspace-summary > div:first-child { padding-left: 0; }
body .workspace-summary > div + div { border-left-color: var(--line); }
body .workspace-summary strong { margin-top: 7px; color: var(--ink); font-size: 26px; }
body .nado-product .workspace-record h3,
body .nado-product .account-record h3 { color: var(--ink); font-size: 21px; line-height: 1.35; }
body .workspace-record__price strong { color: var(--ink); font-size: 23px; }
body .deal-list-surface .workspace-record--deal .workspace-record__facts > div { padding: 0; border: 0; border-radius: 0; background: none; }
body .nado-product .restore-stepper li { font-size: 13px; }
body .nado-product .restore-stepper li > span { width: 32px; height: 32px; }
body .nado-product .restore-stepper li[aria-current] > span { color: #fff; border-color: var(--brand); background: var(--brand); }
body .p-stepper li { border-radius: 6px; background: #eceff3; }
body .p-stepper li[aria-current="step"] { color: var(--brand); background: #e9efff; }
body .p-status { border-radius: 6px; }
body .nado-product .p-status { border-radius: 6px; }
body .p-status--agreed,
body .p-status--matched,
body .p-status--answered,
body .p-status--open { color: #2b5598; background: #edf2fb; }
body .quick-link { min-height: 106px; border-radius: 8px; }
body .quick-link:hover { color: var(--brand); border-color: #acbdf5; background: #f9faff; transform: none; }
body .profile-mark { color: #475564; background: #e9eef4; }
body .p-avatar { color: #3d4c61; background: #edf1f6; }
body .pro-card,
body .nado-product .pro-card { background: #edf1ff; }
body .notification-list article.is-unread { background: #f1f4fc; }
body .p-table th { color: #626b74; background: #f5f6f8; }
body .p-table td { border-bottom-color: var(--line); }
body .legal-article { max-width: 850px; padding: 34px; border: 0; border-radius: 0; }
body .legal-article p { max-width: 74ch; font-size: 15px; line-height: 1.8; }

/* Dialogs, authentication and conversations share the same material. */
body .modal,
body .modal--filters,
body .p-dialog { border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 22px 80px rgb(21 27 32 / 18%); }
body .modal--auth { padding: 32px; }
body .modal h2,
body .registration-card__top h2 { color: var(--ink); font-size: 26px; line-height: 1.3; }
body .modal h2 { padding-right: 25px; }
body .modal-backdrop { background: rgb(21 27 32 / 40%); backdrop-filter: blur(4px); }
body .p-dialog::backdrop { background: rgb(21 27 32 / 40%); backdrop-filter: blur(4px); }
body .modal__close { border-radius: 6px; color: #626b74; }
body .modal__close:hover { color: #151b20; background: #f0f2f5; }
body .modal p:not(.eyebrow) { color: #626b74; font-size: 14px; line-height: 1.65; }
body .registration-card { padding: 30px; }
body .auth-stage__copy h1 { color: var(--ink); font-size: 44px; line-height: 1.15; }
body .auth-progress li { border-radius: 6px; }
body .auth-progress li.is-active { color: var(--brand); background: #edf1ff; }
body .auth-progress li.is-active::before,
body .auth-progress li.is-complete::before { border-color: var(--brand); color: #fff; background: var(--brand); }
body .auth-phone-summary { background: #f5f6f8; }
body .chat-list { border-right-color: var(--line); background: #f5f6f8; }
body .restore-messages .chat-list h1 { font-size: 24px; }
body .restore-messages .chat-search { border: 1px solid #d8dde3; border-radius: 8px; background: #fff; }
body .restore-messages .chat-tabs a { min-height: 44px; border-radius: 6px; }
body .restore-messages .chat-tabs a[aria-current] { color: var(--brand); background: #e8eeff; }
body .chat-preview.is-active,
body .p-chat-preview.is-active { background: #e9efff; }
body .restore-preview-avatar { border-color: #dce1e7; color: #485668; background: #edf1f5; }
body .chat-context,
body .restore-messages .chat-context { border-radius: 8px; border-color: var(--line); background: #f7f8fa; }
body .restore-message-bubble,
body .p-message > div { border-radius: 8px; background: #f1f3f6; }
body .restore-message.is-mine .restore-message-bubble,
body .p-message.is-mine > div { border-radius: 8px; background: #e9efff; }
body .restore-messages .restore-compose-row textarea { border: 1px solid #d8dde3; border-radius: 8px; background: #fff; }
body .restore-attach,
body .restore-chat-tools-panel,
body .restore-message-menu > div { border-radius: 8px; }
body .restore-messages .restore-summary { border-radius: 8px; border-color: #d8e1f8; background: #f0f4ff; }
body .toast { border-radius: 8px; }

/* The footer is quiet and distinct from operational surfaces. */
body .site-footer { border-top-color: var(--line); color: #626b74; background: #edf0f3; }
body .site-footer__inner { padding-top: 40px; padding-bottom: 36px; }
body .footer-details summary,
body .site-footer__heading { color: #151b20; font-size: 12px; }
body .site-footer__nav { font-size: 13px; }
body .site-footer__nav a,
body .site-footer__legal a { min-height: 40px; }
body .site-footer__intro p { color: #56616c; }
body .site-footer__intro small,
body .site-footer__bottom-inner { color: #626b74; }
body .store-button { border-radius: 8px; border-color: #d7dde3; box-shadow: none; }
body .site-footer__bottom { border-top-color: #d9dfe5; }

@media (max-width: 1120px) {
  body .topbar__inner { gap: 24px; }
  body .main-nav { gap: 18px; }
  body .account-workspace { gap: 24px; }
}
@media (max-width: 820px) {
  body .topbar__inner { gap: 16px; }
  body .topbar__actions { gap: 6px; }
  body .workspace-main:not(.workspace-main--messages) { padding-top: 26px; padding-bottom: 44px; }
  body .page-heading h1,
  body[data-page] .page-heading h1,
  body .nado-product .page-heading h1,
  body .account-content > .page-heading h1 { font-size: 29px; }
  body .account-rail { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
  body .account-navigation > summary { min-height: 60px; }
  body .account-navigation__body { padding: 0 10px 10px; }
  body .auth-stage__copy h1 { font-size: 36px; }
  body .workspace-summary > div { padding: 4px 14px 18px; }
  body .workspace-summary strong { font-size: 23px; }
}
@media (max-width: 560px) {
  body .topbar__inner { gap: 12px; }
  body .topbar__actions { gap: 4px; }
  body .topbar__guest-actions { gap: 8px; }
  body .topbar__guest-actions .button--small { padding-inline: 14px; font-size: 12px; }
  body .topbar__create { min-height: 44px; padding-inline: 10px; font-size: 12px; }
  body .workspace-main:not(.workspace-main--messages) { padding-top: 24px; padding-bottom: 38px; }
  body .page-heading { margin-bottom: 22px; }
  body .page-heading h1,
  body[data-page] .page-heading h1,
  body .nado-product .page-heading h1,
  body .account-content > .page-heading h1 { font-size: 27px; }
  body .page-heading > div > p:not(.eyebrow) { font-size: 13px; }
  body .app-card,
  body .nado-product .app-card { padding: 18px; }
  body .app-card h2,
  body .nado-product .app-card h2 { font-size: 19px; }
  body :is(.p-grid,.profile-columns,.profile-content,.support-layout,.settings-grid,.p-stack) { gap: 18px; }
  body .workspace-summary > div { padding: 12px 10px; }
  body .workspace-summary > div:first-child { padding-left: 10px; }
  body .workspace-summary strong { font-size: 22px; }
  body .nado-product .workspace-record h3,
  body .nado-product .account-record h3 { font-size: 19px; }
  body .nado-product .restore-stepper li { font-size: 12px; }
  body .modal--auth,
  body .registration-card { padding: 26px 20px; }
  body .modal h2,
  body .registration-card__top h2 { font-size: 23px; }
  body .modal--auth { max-height: calc(100dvh - 28px); }
  body .legal-article { padding: 22px 18px; }
  body .site-footer__inner { padding-top: 28px; padding-bottom: 24px; }
  body .site-footer__nav a,
  body .site-footer__legal a { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  body .button,
  body .main-nav a { transition: none; }
}
/* All collapsible footer widths show an explicit direction marker. */
@media(max-width:820px){
 body .footer-details summary {cursor:pointer;gap:12px;}
 body .footer-details summary::after {content:'';display:inline-block;position:static;width:16px;height:16px;flex:0 0 16px;margin:0;border:0;transform:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23224be8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;}
 body .footer-details[open] summary::after {content:'';transform:rotate(180deg);}
}
body .nado-product > .app-shell > .app-card + .app-card {margin-top:16px;}
@media(max-width:640px){body .topbar__actions .menu-button,body .topbar__actions .topbar__create {min-height:44px;}body .topbar__actions .menu-button {min-width:44px;width:44px;}}