/* Homepage theme for sign-in, the dashboard, and checkout. */
body.auth-page,
body.dashboard,
body.sm-theme {
  --ink: #17171a;
  --muted: #6b6874;
  --line: rgba(0, 0, 0, .08);
  --paper: #fbfbfd;
  --card: #fff;
  --butter: #f6d272;
  --surface: #fff;
  --surface-2: #f4f4f6;
  --border: rgba(0, 0, 0, .08);
  --accent: #17171a;
  --danger: #d92d20;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
}

.sm-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.02em;
  text-decoration: none;
}
.sm-lockup img { width: 26px; height: 26px; object-fit: contain; display: block; }
.sm-lockup-side { margin: 4px 8px 18px; }

body.auth-page {
  background:
    linear-gradient(rgba(23, 23, 26, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 23, 26, .035) 1px, transparent 1px),
    #fbfbfd;
  background-size: 28px 28px, 28px 28px, auto;
}
body.auth-page .auth-screen { padding: 28px 16px; }
body.auth-page .auth-card {
  width: min(420px, 100%);
  padding: 36px 28px 28px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 60px -36px rgba(0, 0, 0, .45);
  text-align: center;
}
body.auth-page .sm-lockup { margin: 0 auto 22px; }
body.auth-page .auth-card h2 {
  color: var(--ink);
  font-size: clamp(28px, 4vw, 34px);
  font-weight: 680;
  letter-spacing: -.04em;
  margin: 0 0 22px;
}
body.auth-page .google-btn {
  height: 48px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  box-shadow: none;
}
body.auth-page .google-btn:hover { background: #f7f7f8; }
body.auth-page .auth-divider { color: var(--muted); }
body.auth-page .auth-divider::before,
body.auth-page .auth-divider::after { background: var(--line); }
body.auth-page .auth-label,
body.auth-page .auth-label-row,
body.auth-page .field-title { color: var(--ink); }
body.auth-page .auth-card input {
  height: 46px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
}
body.auth-page .auth-card input:focus { border-color: #17171a; outline: none; }
body.auth-page #toggle-password { color: var(--muted); background: transparent; }
body.auth-page .auth-inline-link { color: var(--ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
body.auth-page .auth-footer,
body.auth-page .forgot-note,
body.auth-page .approve-copy { color: var(--muted); }
body.auth-page .approve-account { color: var(--ink); }
body.auth-page .auth-submit,
body.auth-page #approve-desktop {
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: #17171a;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .7);
}
body.auth-page .auth-submit:hover,
body.auth-page #approve-desktop:hover { background: #2a2a2e; filter: none; }

body.dashboard {
  background: #fbfbfd;
  color: var(--ink);
}
body.dashboard #app { background: transparent; }
body.dashboard .side {
  background: rgba(255, 255, 255, .92);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
body.dashboard .side .tab {
  color: #3c3a44;
  border-radius: 999px;
  font-weight: 550;
}
body.dashboard .side .tab.active,
body.dashboard .side .tab:hover { background: #f3f3f5; color: var(--ink); border-color: transparent; }
body.dashboard .side .tab.active { background: #17171a; color: #fff; }
body.dashboard .side-label { color: #8a8793; letter-spacing: .08em; }
body.dashboard .side-status { border-top-color: var(--line); }
body.dashboard h2,
body.dashboard h3,
body.dashboard .account,
body.dashboard .account-person,
body.dashboard .field-title,
body.dashboard .profile-copy strong { color: var(--ink); }
body.dashboard p,
body.dashboard .item-meta,
body.dashboard label,
body.dashboard .dash-sub,
body.dashboard .home-note,
body.dashboard .hint,
body.dashboard .account-mail { color: var(--muted); }
body.dashboard button {
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 999px;
}
body.dashboard button:hover { border-color: rgba(0, 0, 0, .28); background: #f7f7f8; }
body.dashboard button.primary,
body.dashboard .dash-mail {
  background: #17171a;
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}
body.dashboard button.primary:hover,
body.dashboard .dash-mail:hover { background: #2a2a2e; }
body.dashboard button.ghost,
body.dashboard button.text-link { color: var(--ink); }
body.dashboard button.danger { color: var(--danger); border-color: rgba(217, 45, 32, .28); background: #fff; }
body.dashboard .item,
body.dashboard .panel,
body.dashboard .provider,
body.dashboard .dash-cards article,
body.dashboard .profile-roster,
body.dashboard .session-panel,
body.dashboard .profile-form,
body.dashboard .call-pane,
body.dashboard .call-setup,
body.dashboard .call-dialog-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  color: var(--ink);
}
body.dashboard .dash-mark,
body.dashboard .avatar { background: #f6d272; color: #3d3410; }
body.dashboard .avatar.add { background: #f6f6f8; color: var(--ink); border-color: rgba(0, 0, 0, .16); }
body.dashboard .chip.cyan { background: #f6d272; color: #3d3410; border-color: transparent; }
body.dashboard .chip.navy { background: #17171a; }
body.dashboard #home-credit-count,
body.dashboard #credit-available,
body.dashboard #account-credit-count,
body.dashboard .home-balance-line { color: var(--ink); }
body.dashboard .profile-row { color: var(--ink); border-bottom-color: var(--line); }
body.dashboard .profile-row:hover { background: #f7f7f8; }
body.dashboard .profile-copy span,
body.dashboard .profile-file { color: var(--muted); }
body.dashboard input,
body.dashboard textarea,
body.dashboard select {
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 14px;
}
body.dashboard input:focus,
body.dashboard textarea:focus,
body.dashboard select:focus { border-color: #17171a; }
body.dashboard .attach { border-color: rgba(0, 0, 0, .16); color: var(--ink); border-radius: 999px; }
body.dashboard .attach:hover { border-color: #17171a; background: #f7f7f8; }
body.dashboard .document-row { background: #f7f7f8; border-color: var(--line); }
body.dashboard .documents { border-top-color: var(--line); }
body.dashboard .session-table th { background: #f6f6f8; color: #8a8793; }
body.dashboard .session-table td { border-top-color: var(--line); color: var(--ink); }
body.dashboard .session-table .when { color: var(--muted); }
body.dashboard .session-table .mins { color: var(--ink); }
body.dashboard .call-head { border-bottom-color: var(--line); }
body.dashboard #call-clock,
body.dashboard .call-line.them span,
body.dashboard .call-state.ok { color: var(--ink); }
body.dashboard .call-line span,
body.dashboard .call-empty,
body.dashboard .call-note,
body.dashboard .call-state { color: var(--muted); }
body.dashboard .call-ask { border-top-color: var(--line); }
body.dashboard .call-dialog { background: rgba(23, 23, 26, .42); }
body.dashboard .legal-links a,
body.dashboard .text-link { color: var(--ink); }
body.dashboard .session-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
body.dashboard .session-all { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
body.dashboard .session-all input,
body.dashboard .session-check input { width: auto; margin: 0; }
body.dashboard .session-item { gap: 12px; flex-wrap: wrap; }
body.dashboard .session-item .item-main { min-width: 0; flex: 1 1 240px; }
body.dashboard .session-check { display: flex; align-items: flex-start; padding-top: 2px; margin: 0; }
body.dashboard .session-actions { display: flex; gap: 8px; flex: none; }
body.dashboard .session-actions button { padding: 8px 14px; }
body.dashboard .dash-menu { border-bottom-color: var(--line); box-shadow: 0 16px 32px rgba(0, 0, 0, .08); }
@media (max-width: 760px) {
  body.dashboard .side { border-bottom-color: var(--line); }
  body.dashboard .sm-lockup-side { margin: 0; }
}

body.sm-theme header {
  height: auto;
  min-height: 64px;
  padding: 14px 28px;
  border-bottom: 1px solid transparent;
  background: rgba(251, 251, 253, .86);
  backdrop-filter: blur(16px);
  color: var(--ink);
}
body.sm-theme .header-link { color: var(--muted); font-weight: 550; }
body.sm-theme .header-link:hover { color: var(--ink); }
body.sm-theme .pricing { max-width: 760px; }
body.sm-theme .pricing h1,
body.sm-theme .pricing h2 { color: var(--ink); letter-spacing: -.04em; }
body.sm-theme .pricing-intro p,
body.sm-theme .hour-label,
body.sm-theme .purchase-note { color: var(--muted); }
body.sm-theme .purchase-note a { color: var(--ink); }
body.sm-theme .tier {
  width: min(460px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 24px 60px -40px rgba(0, 0, 0, .45);
  color: var(--ink);
}
body.sm-theme .tier.featured { border-color: var(--line); }
body.sm-theme .hour-stepper {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 16px;
}
body.sm-theme .hour-stepper button,
body.sm-theme .hour-stepper input { color: var(--ink); background: transparent; }
body.sm-theme .hour-presets button { border-radius: 999px; background: #fff; color: var(--ink); }
body.sm-theme .hour-presets button[aria-pressed="true"] { background: #17171a; color: #fff; border-color: transparent; }
body.sm-theme .order-summary { background: #f6f6f8; border-radius: 18px; }
body.sm-theme .order-summary h3,
body.sm-theme .order-row span { color: var(--muted); }
body.sm-theme .order-row.total { border-top-color: var(--line); }
body.sm-theme .order-row.total strong { color: var(--ink); }
body.sm-theme #buy-pack,
body.sm-theme .welcome-link {
  border-radius: 999px;
  background: #17171a;
  color: #fff;
  border: 0;
  text-decoration: none;
}
body.sm-theme #buy-pack:hover,
body.sm-theme .welcome-link:hover { background: #2a2a2e; }
body.sm-theme #toast { background: #17171a; color: #fff; border-color: transparent; }