/* Customer Account Center. Kept separate from the staff console. */
@font-face {
  font-family: Archivo;
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('/assets/fonts/spacemono-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body[data-surface='portal'] {
  color-scheme: light;
  --bg: #f0ede5;
  --bg-raised: #fffef9;
  --panel: #faf8f2;
  --panel-2: #eceee3;
  --panel-3: #e2e7d8;
  --line: #d8dbcd;
  --line-strong: #bbc2ae;
  --text: #252c25;
  --text-2: #4c5848;
  --text-3: #5f6959;
  --accent: #314b32;
  --accent-soft: #e3eadb;
  --green: #357047;
  --green-soft: #e1ecdd;
  --amber: #8c5b17;
  --amber-soft: #f4e9cf;
  --blue: #3f6275;
  --blue-soft: #e7eef0;
  --danger: #a33b2f;
  --radius: 16px;
  --radius-sm: 10px;
  --sidebar: 252px;
  --shadow: 0 24px 70px #20291f26;
  font-family: Archivo, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

html { color-scheme: light; background: #f0ede5; }
body::before { display: none; }
::selection { background: #d2dec5; color: #252c25; }
:focus-visible { outline: 3px solid #668348; outline-offset: 3px; }
.sidebar {
  color-scheme: dark;
  overflow-y: auto;
  color: #f0ede5;
  --line: #354033;
  --text: #f0ede5;
  --text-2: #d0d6c8;
  --text-3: #b5bead;
  --green: #b2ce91;
  padding: 28px 16px 22px;
  background: #1b251d;
  border-right: 0;
  backdrop-filter: none;
}
.wordmark { gap: 10px; min-height: 64px; padding: 0 8px 28px; }
.wordmark img { width: 36px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.wordmark > span { font-size: 22px; font-weight: 800; letter-spacing: -.7px; line-height: 1; }
.wordmark small { margin-top: 9px; font: 400 10px/1.3 'Space Mono', ui-monospace, monospace; letter-spacing: 1.2px; }
.primary-nav { gap: 6px; padding-top: 22px; border-top: 1px solid var(--line); }
.primary-nav a { min-height: 48px; gap: 13px; padding: 10px 14px; font-size: 15px; font-weight: 550; border-radius: 10px; }
.primary-nav a:hover { background: #2a362a; }
.primary-nav a.active { color: #20311f; background: #dce4ce; border-color: #dce4ce; box-shadow: none; font-weight: 650; }
.nav-icon { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; color: currentColor; }
.nav-icon svg { display: block; width: 20px; height: 20px; }
.active .nav-icon { color: inherit; }
.nav-count { min-width: 24px; color: #c6cfba; background: #34412f; font: 400 12px/1.4 'Space Mono', monospace; }
.active .nav-count { background: #c4d1b6; color: #20311f; }
.sidebar-foot { gap: 16px; padding: 28px 8px 0; }
.privacy-note { padding: 16px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; font-size: 13px; line-height: 1.65; }
.privacy-note strong { display: inline-block; margin-bottom: 4px; color: #e3e9da; font-size: 14px; font-weight: 600; }
.green-dot { box-shadow: none; }
.sidebar-foot > a { min-height: 28px; align-items: center; font-size: 13px; }
.legal-links { font-size: 13px; gap: 10px 18px; }
.legal-links a { display: inline-flex; align-items: center; min-height: 28px; }
.topbar { min-height: 92px; padding: 18px 36px; gap: 24px; background: #f7f5eedf; backdrop-filter: blur(16px); }
.workspace-picker { min-width: 0; flex: 1; gap: 4px; }
.workspace-picker span, .eyebrow { font: 400 11px/1.5 'Space Mono', ui-monospace, monospace; letter-spacing: 1.1px; }
.workspace-picker select { width: fit-content; max-width: 100%; min-width: 0; min-height: 32px; padding: 0 20px 0 0; font-size: 16px; font-weight: 650; text-overflow: ellipsis; }
.topbar-actions { flex-shrink: 0; gap: 16px; }
.system-pill { display: none; }
.profile-button { max-width: 280px; min-height: 46px; padding: 5px 12px 5px 6px; border-color: var(--line); background: var(--panel); border-radius: 999px; font-size: 14px; }
#profile-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 34px; height: 34px; color: #32492d; background: #dce4ce; border-radius: 50%; font-size: 13px; }
.mobile-nav-close { display: none; }
.icon-button { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; }
#content { width: min(1280px, 100%); padding: 38px 36px 64px; }
.page-header { align-items: center; gap: 24px; margin-bottom: 28px; }
.page-header h1 { margin: 8px 0 10px; font-size: clamp(30px, 3vw, 40px); font-weight: 650; letter-spacing: -1.3px; line-height: 1.12; }
.page-header p { max-width: 690px; font-size: 16px; line-height: 1.65; }
.page-actions { flex-shrink: 0; }
.button { min-height: 44px; padding: 10px 18px; border-radius: 9px; background: #faf8f2; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center; }
.button:hover { transform: none; border-color: #7d8c6f; background: #e8ecdf; }
.button.primary { background: #314b32; border-color: #314b32; color: #fffef9; box-shadow: none; }
.button.primary:hover { background: #213b25; border-color: #213b25; }
.button.danger { border-color: #d8b0a8; color: #963b30; background: #fcf3ef; }
.button.danger:hover { border-color: #a33b2f; background: #f4e1d9; }
.button.small { min-height: 44px; padding: 9px 14px; font-size: 14px; }
.button:disabled { opacity: .6; }
.text-button { min-height: 44px; padding: 8px 4px; color: #35542f; font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: #b9c8a9; text-underline-offset: 4px; }
.text-button:hover { color: #1f381b; text-decoration-color: currentColor; }
.panel { background: var(--panel); box-shadow: none; }
.panel + .panel { margin-top: 20px; }
.panel-header { min-height: 80px; padding: 20px 24px; gap: 18px; }
.panel-header h2, .panel-header h3 { font-size: 18px; font-weight: 650; line-height: 1.35; }
.panel-header p { margin-top: 5px; font-size: 14px; line-height: 1.5; }
.panel-body { padding: 24px; }
.panel-body > p { font-size: 16px; }
.panel-empty { padding: 48px 24px; font-size: 15px; }
.setup-next { border-color: #c9d2bc; background: #e1e8d6; }
.setup-next .panel-body { padding: 28px 30px; }
.setup-next .eyebrow { color: #4c6540; }
.setup-next h2 { margin: 10px 0 12px; font-size: 26px; font-weight: 650; line-height: 1.25; letter-spacing: -.6px; }
.setup-next p { max-width: 760px; margin: 12px 0; font-size: 16px; line-height: 1.65; }
.setup-next .setup-hint { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid #c4d0b5; font-size: 14px; }
.setup-access { font-size: 15px; }
.integration-row, .device-row, .member-row, .activity-row, .security-row { gap: 16px; padding: 20px 24px; }
.integration-row, .device-row { grid-template-columns: 44px minmax(0,1fr) auto auto; }
.member-row { grid-template-columns: 36px minmax(0,1fr) minmax(110px,auto) auto; }
.provider-logo, .device-logo { width: 44px; height: 44px; background: #edf0e5; border-color: #d5dcc9; font-size: 17px; }
.provider-logo.whatnot { color: #756019; }
.provider-logo.ebay-live { color: #365977; }
.provider-logo.tiktok-shop { color: #9c435b; }
.row-title strong { font-size: 16px; font-weight: 600; }
.row-title span { margin-top: 4px; font-size: 14px; line-height: 1.5; }
.status-pill, .role-pill, .plan-pill, .provider-pill, .mfa-pill { padding: 7px 10px; font: 500 12px/1.2 Archivo, sans-serif; letter-spacing: .2px; }
.status-pill.active, .status-pill.online, .mfa-pill { color: #355f37; border-color: #bbcead; background: #e1ecdd; }
.status-pill.pending, .status-pill.trial { color: #385d70; border-color: #c1d0d6; background: #e7eef0; }
.status-pill.reauthorization_required, .status-pill.suspended, .status-pill.past_due { color: #795017; border-color: #dfcc9f; background: #f4e9cf; }
.status-pill.offline, .status-pill.revoked { background: #eeeee5; color: #646d5d; }
.plan-pill.pro { color: #35542f; border-color: #becbad; background: #e3eadb; }
select.role-pill { min-height: 44px; padding: 8px 12px; font-size: 14px; text-transform: capitalize; }
.activity-time { padding-top: 3px; font: 400 12px/1.5 'Space Mono', monospace; }
.provider-grid { gap: 20px; }
.provider-card { padding: 24px; background: var(--panel); }
.provider-card::after { display: none; }
.provider-head { flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.provider-head > div { flex: 1; min-width: 110px; }
.provider-head .status-pill { margin-left: 0; }
.provider-card h3 { font-size: 18px; font-weight: 650; }
.provider-card p { min-height: 0; margin-top: 6px; font-size: 15px; line-height: 1.6; }
.provider-head p { font-size: 13px; }
.capability-list { min-height: 0; gap: 6px; margin: 20px 0; }
.capability-list span { max-width: 100%; overflow-wrap: anywhere; padding: 6px 8px; color: #53604a; background: #eef1e6; font: 400 12px/1.5 Archivo, sans-serif; }
.provider-actions { align-items: end; gap: 16px; }
.verified-at { max-width: 190px; font-size: 13px; line-height: 1.5; }
.settings-grid, .dashboard-grid { gap: 20px; }
.settings-grid > .panel, .dashboard-grid > .panel { margin-top: 0; }
.detail-row { min-height: 66px; padding: 16px 24px; gap: 24px; }
.detail-row > span:first-child { flex-shrink: 0; font-size: 14px; }
.detail-row > strong, .detail-row > span:last-child { min-width: 0; font-size: 14px; font-weight: 550; overflow-wrap: anywhere; }
.danger-zone { border-color: #d9bcb2; }
.danger-zone .panel-header { border-color: #e4d0c5; }
.danger-zone .panel-header h2 { color: #963b30; }
.danger-zone.linked { border-color: #ad5a46; box-shadow: 0 0 0 3px #ad5a461a; }
.commerce-offers { gap: 16px; margin: 24px 0; }
.commerce-offer.available { border-color: #94a87d; }
.commerce-offer .panel-body { padding: 28px 24px; }
.commerce-offer h2 { font-size: 21px; }
.commerce-price { font-size: clamp(36px,3vw,44px); font-weight: 650; }
.commerce-price span, .commerce-offer-detail, .commerce-stock, .commerce-note, .commerce-notice p { font-size: 15px; }
.commerce-offer .button.primary { background: #314b32; border-color: #314b32; color: #fffef9; }
.commerce-offer .button.primary:hover { background: #213b25; border-color: #213b25; }
.commerce-offer .button:disabled { opacity: 1; }
.commerce-notice { background: #e6eadc; padding: 24px; }
.commerce-notice strong { font-size: 18px; }
.commerce-notice p { line-height: 1.6; }
.field { gap: 8px; }
.field + .field { margin-top: 20px; }
.field label { font-size: 15px; font-weight: 600; }
.field small { font-size: 13px; line-height: 1.55; }
.field input, .field select, .field textarea, .search-input { min-height: 48px; padding: 11px 13px; border-color: #8a957d; font-size: 16px; background: #fffef9; }
.field input:focus, .field select:focus, .field textarea:focus, .search-input:focus { border-color: #668348; outline: 2px solid #668348; outline-offset: 2px; box-shadow: none; }
.form-actions { flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.dialog { width: min(560px, calc(100vw - 32px)); border-color: #c8cebc; background: #faf8f2; border-radius: 20px; }
.dialog::backdrop { background: #17221b91; backdrop-filter: blur(5px); }
.dialog form { padding: 32px; }
.dialog-close { width: 44px; height: 44px; top: 18px; right: 18px; background: #eeeee4; color: #4c5848; }
.dialog h2 { margin: 8px 44px 12px 0; font-size: 26px; line-height: 1.25; letter-spacing: -.6px; overflow-wrap: anywhere; }
.dialog .dialog-lead { font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.deletion-consent { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 12px; color: var(--text-2); font-size: 15px; line-height: 1.6; cursor: pointer; }
.deletion-consent input { flex: 0 0 22px; width: 22px; height: 22px; margin: 2px 0 0; accent-color: #314b32; }
.deletion-consent input:focus-visible { outline: 2px solid #668348; outline-offset: 3px; }
.dialog[open] [aria-busy="true"] { cursor: progress; }
.dialog-warning { padding: 16px; color: #795017; border-color: #dfcc9f; font-size: 14px; line-height: 1.6; }
.auth-screen { padding: 48px 24px; }
.auth-card { width: min(540px,100%); padding: 44px; background: #faf8f2; border-color: #d1d7c6; box-shadow: 0 24px 70px #2731210d; }
.auth-card > img { width: 40px; height: 54px; object-fit: contain; margin-bottom: 24px; }
.auth-card h1 { font-size: clamp(28px,4vw,36px); font-weight: 650; line-height: 1.15; letter-spacing: -1px; }
.auth-card > p:not(.eyebrow) { font-size: 16px; line-height: 1.7; }
.auth-card .button.wide { min-height: 50px; font-size: 16px; }
.trust-row { gap: 8px; margin-top: 24px; font-size: 13px; line-height: 1.6; }
.auth-legal { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.authorization-details { font-size: 14px; }
.authorization-details summary { padding: 12px 0; }
.authorization-details .mono-value { font-size: 12px; }
.desktop-link-card .signed-in-as, .desktop-link-card .handoff-status, .desktop-link-card > p.setup-hint { font-size: 14px; }
.mono-value { font-family: 'Space Mono', ui-monospace, monospace; }
.toast { padding: 18px; background: #faf8f2; }
.toast strong { font-size: 15px; }
.toast span { font-size: 14px; line-height: 1.5; }
.demo-banner { background: #e7eef0; border-color: #c1d0d6; color: #3f6275; font-size: 14px; }
.demo-banner strong { font: 600 12px/1.5 Archivo, sans-serif; letter-spacing: .5px; }
.loading .loader { margin: 0 auto 16px; }
.panel-copy { font-size: 16px; color: var(--text-2); }
.security-note, .security-note-last { font-size: 15px; }
.account-notice { border: 1px solid #dfcc9f; border-radius: 10px; padding: 16px; color: #795017; background: #f4e9cf; font-size: 15px; }
.setup-instructions { display: grid; gap: 16px; padding-left: 24px; color: var(--text-2); font-size: 16px; line-height: 1.65; }

@media (max-width: 1200px) {
  .page-header { align-items: flex-start; flex-direction: column; gap: 18px; }
  .topbar { padding-inline: 28px; }
  #content { padding-inline: 28px; }
  .commerce-offer .panel-body { padding: 24px 18px; }
}

@media (max-width: 960px) and (min-width: 761px) {
  .commerce-offers { grid-template-columns: 1fr; }
  .topbar-actions { max-width: 44%; }
  .profile-button { max-width: 100%; }
  .panel-header { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  body[data-surface='portal'] { --sidebar: min(292px,86vw); }
  .sidebar { visibility: hidden; overflow-y: auto; }
  .mobile-nav-close { display: grid; place-items: center; align-self: flex-end; margin-bottom: 18px; color: #f0ede5; background: #2a362a; border-color: #52614a; }
  body.nav-open .sidebar { visibility: visible; }
  .topbar { min-height: 76px; gap: 14px; padding: 12px 18px; }
  .topbar-actions { margin-left: auto; }
  .workspace-picker select { width: 100%; min-width: 0; max-width: 100%; font-size: 15px; }
  .profile-button { width: 44px; height: 44px; min-height: 44px; padding: 4px; border: 0; background: transparent; }
  #content { padding: 28px 18px 44px; }
  .page-header { margin-bottom: 24px; }
  .page-header h1 { font-size: 32px; }
  .page-header p { font-size: 16px; }
  .page-actions { width: auto; max-width: 100%; }
  .panel-header { min-height: 0; flex-wrap: wrap; padding: 20px; gap: 12px; }
  .panel-header h2 { font-size: 18px; }
  .panel-body, .setup-next .panel-body { padding: 24px 20px; }
  .setup-next h2 { font-size: 24px; }
  .integration-row, .device-row { grid-template-columns: 38px minmax(0,1fr) auto; gap: 12px; padding: 20px; }
  .integration-row > .button, .device-row > .button, .integration-row > .text-button, .device-row > .text-button { grid-column: 2 / -1; justify-self: start; }
  .provider-logo, .device-logo { width: 38px; height: 38px; }
  .row-title strong { white-space: normal; overflow-wrap: anywhere; font-size: 15px; }
  .row-title span { white-space: normal; overflow-wrap: anywhere; font-size: 13px; }
  .status-pill { font-size: 11px; padding: 6px 8px; }
  .member-row { grid-template-columns: 34px minmax(0,1fr) auto; padding: 20px; gap: 12px; }
  .member-row > .text-button { grid-column: 3; grid-row: 2; }
  .detail-row { align-items: flex-start; flex-direction: column; gap: 6px; padding: 16px 20px; }
  .detail-row > strong, .detail-row > span:last-child { text-align: left; max-width: 100%; }
  .provider-card { padding: 22px 20px; }
  .activity-row { grid-template-columns: 9px minmax(0,1fr); }
  .activity-time { grid-column: 2; }
  .dialog form { padding: 28px 22px; }
  .dialog .detail-row { padding-inline: 0; }
  .dialog h2 { font-size: 24px; }
  .commerce-offer .panel-body { padding: 26px 24px; }
  .auth-screen { padding: 24px 16px; }
  .auth-card { padding: 32px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

.dialog .setup-hint { font-size: 14px; line-height: 1.65; }