/* Shared client colors load after component styles. Admin uses its own theme. */
/* Keep the page width steady when routes or the settings drawer change overflow. */
html{scrollbar-gutter:stable}
/* Active labels and unread counts must not change the desktop navigation width. */
.reference-theme .desktop-nav>button,
.reference-theme .desktop-nav>button.active{font-weight:600}
.reference-theme .desktop-nav>button .count{
  position:absolute;
  top:12px;
  inset-inline-start:calc(100% - 4px);
}
body.reference-theme{
  color-scheme:light;
  --pink:#bd2858;
  --pink-light:#bd2858;
  --purple:#674964;
  --blue:#496cb3;
  --ink:#252935;
  --muted:#657184;
  --line:#dde1e6;
  --accent-hover:#a9214d;
  --accent-soft:#fff2f6;
  --accent-line:#e9bccd;
  --accent-ink:#902344;
  --surface:#fff;
  --surface-muted:#f7f8fa;
  --client-content-width:1200px;
  --client-page-gutter:30px;
  --success:#24734e;
  --success-soft:#eaf5ee;
  --warning:#805b1c;
  --warning-soft:#fff6df;
  --error:#b33345;
  --error-soft:#fff0f2;
  color:var(--ink);
}
/* Discovery, feed and benefits share one content width and responsive gutter. */
.reference-theme .client-main:not(.chat-mode):not(.profile-mode){
  padding-inline:var(--client-page-gutter);
}
.reference-theme .client-main:not(.chat-mode):not(.profile-mode)>:not(.discover-section){
  max-width:var(--client-content-width);
}
.reference-theme .discover-section{
  max-width:calc(var(--client-content-width) + 2 * var(--client-page-gutter));
  padding-inline:var(--client-page-gutter);
}
@media(max-width:760px){
  body.reference-theme{--client-page-gutter:18px}
}
.reference-theme .member-view .panel,
.reference-theme .member-view .modal,
.reference-theme .member-view .conversation-list{background:var(--surface)}
.reference-theme .member-view .modal{border-color:var(--line)}
.reference-theme .member-view .modal-backdrop{background:#20263199}
.reference-theme .member-view .avatar{background:#f2edf6;color:var(--purple)}
.reference-theme input,.reference-theme select,.reference-theme textarea{
  color:var(--ink);
  background-color:var(--surface);
  border-color:#cbd2dd;
  accent-color:var(--pink);
}
.reference-theme input::placeholder,.reference-theme textarea::placeholder{color:#748092;opacity:1}
.reference-theme input:focus,.reference-theme select:focus,.reference-theme textarea:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 3px #bd28581a;
}
.reference-theme .auth-modal input,.reference-theme .auth-modal select{color:#e5eaf1;background-color:#181d21;border-color:#707984}
.reference-theme .auth-modal input::placeholder{color:#a2adbc}
.reference-theme .button.pink:hover,.reference-theme .send-button:hover:not(:disabled){background:var(--accent-hover)}
.reference-theme .send-button{color:#fff}
.reference-theme .icon-button:hover{background:var(--accent-soft)}
.reference-theme .desktop-nav button.active:after,
.reference-theme .discovery-tabs>button.active:after,
.reference-theme .mobile-conversation-tabs>button.active:after{background:var(--pink)}
.reference-theme .mobile-nav button.active{color:var(--pink)}
.reference-theme .has-unread .desktop-nav button:has(.count),
.reference-theme .has-unread .mobile-nav button:has(.notification-dot){background:var(--accent-soft);color:var(--accent-ink)}
.reference-theme .conversation.conversation-unread{background:var(--accent-soft);border-left-color:var(--pink)}
.reference-theme .conversation.conversation-unread .conversation-copy strong{color:var(--accent-ink)}
.reference-theme .conversation.conversation-unread .conversation-copy p{color:#6f4557}
.reference-theme .chat-attention .chat-panel{outline-color:var(--accent-line)}
.reference-theme .chat-attention .chat-header{background:var(--accent-soft)}
.reference-theme .message-row.mine:not(.transfer-message) .message-bubble{background:#f5eaf0;border-color:#e5cfda;color:#473345}
.reference-theme .composer textarea{background:var(--surface-muted);color:var(--ink)}
.reference-theme .badge.approved,.reference-theme .badge.paid,.reference-theme .badge.closed{background:var(--success-soft);color:var(--success)}
.reference-theme .badge.pending,.reference-theme .badge.open{background:var(--warning-soft);color:var(--warning)}
.reference-theme .badge.rejected,.reference-theme .form-error{background:var(--error-soft);color:var(--error)}
.reference-theme .auth-modal .form-error{background:#492536;color:#ffc0d2}
.reference-theme .positive{color:var(--success)}
.reference-theme .inline-note{background:var(--accent-soft);color:#795065}
.reference-theme .legal-modal p,.reference-theme .ticket-card p{color:var(--muted)}
.reference-theme .ticket-reply{background:#f6f2f6;color:#51435e}
.reference-theme .package-workspace{
  --package-accent:var(--pink);
  --package-soft:var(--accent-soft);
  --package-line:var(--accent-line);
  --package-ink:var(--accent-ink);
}
.reference-theme .tier-selector>button.active{background:var(--pink);border-color:var(--pink);box-shadow:0 4px 10px #bd285826}
.reference-theme .tier-selector .tier-icon,.reference-theme .package-entitlements .icon{color:var(--pink)}
.reference-theme .tier-selector .active .tier-icon{color:#fff}
.reference-theme .system-notification.unread{background:var(--accent-soft);border-left-color:var(--pink)}
.reference-theme .notification-unread-dot{background:var(--pink)}
.reference-theme .notification-heading strong{color:var(--ink)}
.reference-theme .system-notification p{color:var(--muted)}
.reference-theme .system-pinned{background:#f6f3f8;border-bottom-color:#e4dce9}
.reference-theme .system-avatar{background:#f0eaf5!important;color:var(--purple)!important}
.reference-theme .notification-panel .chat-header{background:var(--surface)}
.reference-theme .system-notification>.text-button{color:var(--purple)}