/* The Quick Consult: app shell.
   Part 1 (this block): tiny additive rules for NEW elements only (terms checkbox, forgot link...).
   Part 2: the Android-app look, active ONLY inside @media (max-width: 820px), (display-mode: standalone). */
.terms-check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.45;font-weight:400;cursor:pointer}
.terms-check input[type=checkbox]{width:20px;height:20px;min-width:20px;margin:1px 0 0;padding:0;flex:none;accent-color:#0A0F26}
.terms-check a,.terms-continue a{text-decoration:underline}
.terms-continue{text-align:center;margin:10px 0 0;line-height:1.4}
.auth-forgot{text-align:center;margin:14px 0 0;font-size:.92rem}
.auth-forgot form{margin:0}
.link-button{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.auth-sheet { width: 100%; display: flex; flex-direction: column; align-items: center; }
.auth-tag, .auth-tabs { display: none; }
/* desktop: the app-only name/headline wrapper in booking rows must look exactly like plain text */
.qa-who { display: inline; font-weight: inherit; }
.qa-who b { font-weight: inherit; font-size: inherit; }
.qa-who small { display: none; }

/* ============================================================================================
   Part 2: the Android-app look. Only active on phones / the installed app.
   Rules start with ":root body" so they win over the older mobile rules in style.css.
   Tokens mirror android-app/.../ui/Theme.kt (QC object), light and dark.
   ============================================================================================ */
.auth-logo-light, .qa-hero, .qa-bar, .qa-nav, .qa-only, .qa-cat, .qa-online, .qa-count, .notif-back { display: none; }

@media (max-width: 820px), (display-mode: standalone) {
:root {
  --qa-navy: #0A0F26; --qa-yellow: #FCC800; --qa-bg: #F4F5F9; --qa-card: #FFFFFF; --qa-soft: #E8EBF5;
  --qa-ink: #111827; --qa-muted: #6B7280; --qa-line: #E5E7EB; --qa-field: #CBD0DA;
  --qa-hero: #0A0F26; --qa-navy-soft: #161D3A; --qa-accent: #0A0F26; --qa-hero-muted: #B8BED6;
  --qa-green: #16A34A; --qa-green-bg: #E7F6EC; --qa-green-fg: #166534;
  --qa-red: #DC2626; --qa-red-bg: #FDECEC; --qa-red-fg: #DC2626;
  --qa-amber-bg: #FFF4D1; --qa-amber-fg: #8A6A00;
  --qa-yellow-off: #F1E3A6; --qa-yellow-off-fg: #7A6A2A;
  --qa-nav-h: 64px;
  --qa-sab: env(safe-area-inset-bottom, 0px);
  --qa-sat: env(safe-area-inset-top, 0px);
  /* the older site tokens, remapped so existing components pick the app palette up */
  --navy: var(--qa-ink); --navy-soft: var(--qa-muted); --line: var(--qa-line);
  --paper: var(--qa-bg); --paper-raised: var(--qa-bg);
  --radius: 12px; --radius-lg: 16px;
  --success: var(--qa-green-fg); --danger: var(--qa-red);
  --font-display: Roboto, -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-body: Roboto, -apple-system, "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --qa-bg: #0B0F1D; --qa-card: #151A2C; --qa-soft: #242B47; --qa-ink: #E9ECF6; --qa-muted: #98A1BD;
  --qa-line: #283050; --qa-field: #3B4570; --qa-hero: #2B3768; --qa-navy-soft: #212A4B; --qa-accent: #E9EDFF;
  --qa-green-bg: #123424; --qa-green-fg: #6EE7A6; --qa-red-bg: #3A1C22; --qa-red-fg: #FF8A80;
  --qa-amber-bg: #3A3217; --qa-amber-fg: #F6D979; --qa-yellow-off: #4A4120; --qa-yellow-off-fg: #B9A64E;
  --success: #6EE7A6; --danger: #FF8A80;
  color-scheme: dark;
}

/* ---------- page base ---------- */
:root { font-size: 100%; }
:root body {
  background: var(--qa-bg); color: var(--qa-ink); font-size: 14.5px; line-height: 1.5;
  font-family: var(--font-body); -webkit-tap-highlight-color: transparent;
  padding-top: 0; overscroll-behavior-y: none;
}
:root body.has-fixed-header, :root body.has-app-nav, :root body.impersonating.has-fixed-header { padding-top: 0; }
:root body.qa-in { padding-bottom: calc(var(--qa-nav-h) + var(--qa-sab) + 8px); }
:root body h1 { font-size: 22px; line-height: 1.25; letter-spacing: 0; }
:root body h2 { font-size: 19px; line-height: 1.3; letter-spacing: 0; }
:root body h3 { font-size: 16.5px; line-height: 1.3; letter-spacing: 0; }
:root body h4 { font-size: 15px; }
:root body p, :root body li { font-size: 14.5px; }
:root body .small, :root body small { font-size: 13px; }
:root body .muted { color: var(--qa-muted); }
:root body .eyebrow { font-size: 12px; letter-spacing: .04em; }
:root body.qa-in .section-tight .eyebrow, :root body.qa-in .section-head .eyebrow { display: none; }
:root body .container { padding-left: 16px; padding-right: 16px; }
:root body section, :root body .has-app-nav section { padding: 18px 0; }
:root body .section-tight, :root body .has-app-nav .section-tight { padding: 14px 0 20px; }
:root body a { color: inherit; }
:root body .contact-side-card, :root body .contact-side-card a, :root body .contact-side-card p, :root body .contact-side-card li, :root body .contact-side-card span { color: #fff; }
:root body .contact-side-card .eyebrow { color: var(--qa-yellow); }
:root body ::selection { background: var(--qa-yellow); color: #0A0F26; }

/* ---------- old site chrome off, app chrome on ---------- */
:root body.has-app-nav > section, :root body.has-app-nav > main { animation: none; transform: none; }
:root body.qa-in .topbar, :root body.qa-in .app-tabbar, :root body.qa-in .app-sheet-backdrop, :root body.qa-in .site-footer, :root body.qa-in .ptr { display: none !important; }
:root body.qa-in .admin-main > .admin-topbar, :root body.qa-in .dash-appbar, :root body.qa-in .admin-sidebar, :root body.qa-in .dash-backdrop, :root body.qa-in .admin-topbar.qa-hide, :root body.qa-in .dash-menu-btn { display: none !important; }
:root body .nav-toggle, :root body .mobile-menu { display: none !important; }
:root body .qa-hero, :root body .qa-bar, :root body .qa-nav { display: block; }
:root body .qa-cat { display: inline; }

/* top bar (white, back arrow + small title) */
:root body .qa-bar {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 6px;
  min-height: calc(56px + var(--qa-sat)); padding: var(--qa-sat) 12px 0 8px; background: var(--qa-card);
  border-bottom: 1px solid var(--qa-line);
}
:root body .qa-bar .qa-title { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 700; line-height: 24px; color: var(--qa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 8px; }
:root body .qa-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--qa-ink); flex: none; }
:root body .qa-back svg, :root body .notif-back svg { width: 24px; height: 24px; fill: currentColor; }
:root body .qa-bar .notif-bell { margin-left: auto; }

/* home hero (navy, rounded bottom) */
:root body .qa-hero {
  background: var(--qa-navy); color: #fff; padding: calc(var(--qa-sat) + 16px) 18px 22px;
  border-radius: 0 0 30px 30px;
}
:root body .qa-hero-row { display: flex; align-items: center; gap: 10px; }
:root body .qa-hero-greet { flex: 1; min-width: 0; display: flex; flex-direction: column; }
:root body .qa-hero-greet small { color: var(--qa-hero-muted); font-size: 14px; line-height: 1.3; }
:root body .qa-hero-greet strong { color: #fff; font-size: 20px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root body .qa-credit { display: flex; flex-direction: column; align-items: flex-end; background: var(--qa-navy-soft); border-radius: 14px; padding: 7px 13px; text-decoration: none; color: #fff; flex: none; }
:root body .qa-credit small { color: var(--qa-hero-muted); font-size: 11px; line-height: 1.3; white-space: pre; }
:root body .qa-credit b { color: var(--qa-yellow); font-size: 14px; font-weight: 700; line-height: 1.3; }
:root body .qa-search { position: relative; display: flex; align-items: center; margin-top: 18px; background: var(--qa-card); border-radius: 16px; height: 52px; padding: 0 6px 0 14px; border: 2px solid transparent; }
:root body .qa-search:focus-within { border-color: var(--qa-yellow); }
:root body .qa-search svg { width: 22px; height: 22px; fill: var(--qa-muted); flex: none; }
:root body .qa-search input { flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; height: 48px !important; min-height: 0 !important; padding: 0 10px !important; font-size: 15px !important; color: var(--qa-ink); border-radius: 0 !important; }
:root body .qa-search input::placeholder { color: var(--qa-muted); opacity: 1; }
:root body .qa-search input::-webkit-search-cancel-button { display: none; }
:root body .qa-search button { border: 0; background: transparent; color: var(--qa-accent); font-weight: 700; font-size: 14px; padding: 0 12px; height: 44px; cursor: pointer; display: none; }
:root body .qa-search:focus-within button, :root body .qa-search.has-text button { display: block; }

/* bell with count badge */
:root body .notif-bell { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--qa-navy-soft); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: pointer; padding: 0; }
:root body .qa-bar .notif-bell { background: transparent; color: var(--qa-ink); }
:root body .notif-bell svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root body .notif-badge { position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--qa-yellow); color: #0A0F26; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; border: 0; }
:root body .notif-badge[hidden] { display: none; }

/* bottom navigation: yellow pill behind the active icon */
:root body .qa-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; justify-content: space-around; align-items: flex-start;
  height: calc(var(--qa-nav-h) + var(--qa-sab)); padding: 8px 4px var(--qa-sab); background: var(--qa-card);
  border-top: 1px solid var(--qa-line);
}
:root body .qa-tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--qa-muted); font-size: 11.5px; font-weight: 500; }
:root body .qa-pill { display: flex; align-items: center; justify-content: center; width: 64px; height: 32px; border-radius: 16px; }
:root body .qa-pill svg { width: 24px; height: 24px; fill: currentColor; }
:root body .qa-label { line-height: 1.2; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root body .qa-tab.active { color: var(--qa-ink); font-weight: 700; }
:root body .qa-tab.active .qa-pill { background: var(--qa-yellow); color: #0A0F26; }

/* ---------- buttons: all 50px tall, radius 14 ---------- */
:root body .btn, :root body .btn-google {
  min-height: 50px; height: auto; padding: 0 18px; border-radius: 14px; font-size: 15px; font-weight: 700; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; text-transform: none; letter-spacing: 0;
  border: 1.5px solid transparent; box-shadow: none; transition: transform .1s ease, background .15s ease;
}
:root body .btn:active { transform: scale(.98); }
:root body .btn-signal { background: var(--qa-yellow); border-color: var(--qa-yellow); color: #0A0F26; }
:root body .btn-signal:hover { background: var(--qa-yellow); border-color: var(--qa-yellow); }
:root body .btn-primary { background: var(--qa-hero); border-color: var(--qa-hero); color: #fff; }
:root body .btn-primary:hover { background: var(--qa-hero); border-color: var(--qa-hero); }
:root body .btn-ghost { background: var(--qa-card); border-color: var(--qa-field); color: var(--qa-ink); }
:root body .btn-ghost:hover { background: var(--qa-card); border-color: var(--qa-field); }
:root body .btn[disabled], :root body .btn.disabled, :root body button.btn:disabled { background: var(--qa-yellow-off); border-color: var(--qa-yellow-off); color: var(--qa-yellow-off-fg); opacity: 1; }
:root body .btn-block { width: 100%; display: flex; }
:root body .btn svg { width: 18px; height: 18px; }
:root body .btn-danger, :root body .btn.danger { background: var(--qa-card); border-color: var(--qa-red); color: var(--qa-red); }

/* Google: white pill, grey border, four-colour G, dark text (dark variant #131314) */
:root body .btn-google { width: 100%; border-radius: 999px; background: #fff; color: #1F1F1F; border: 1px solid #747775; font-weight: 500; font-size: 15px; font-family: Roboto, Arial, sans-serif; gap: 12px; min-height: 50px; }
:root body .btn-google:hover { background: #fff; border-color: #747775; }
:root body .btn-google svg { width: 20px; height: 20px; }
:root[data-theme="dark"] body .btn-google { background: #131314; color: #E3E3E3; border-color: #8E918F; }

/* ---------- cards ---------- */
:root body .card, :root body .admin-panel, :root body .form-panel, :root body .profile-card, :root body .hero-panel, :root body .stat-tile, :root body .sidebar, :root body .testimonial-card, :root body .blog-card, :root body .partner-card, :root body .auth-panel, :root body .credit-pack {
  background: var(--qa-card); border: 1px solid var(--qa-line); border-radius: 18px; box-shadow: none; color: var(--qa-ink);
}
:root body .admin-panel { padding: 16px; margin-bottom: 14px; }
:root body .stat-tile { padding: 14px 16px; }
:root body .stat-tile:hover { transform: none; box-shadow: none; border-color: var(--qa-line); }
:root body .stat-tile b { font-size: 22px; color: var(--qa-ink); }
:root body .stat-tile span { color: var(--qa-muted); font-size: 13px; }
:root body .stat-tile-a, :root body .stat-tile-b, :root body .stat-tile-c, :root body .stat-tile-d { background: var(--qa-card); }
:root body .stat-tiles { gap: 10px; margin-bottom: 14px; }

/* ---------- forms ---------- */
:root body .field { margin-bottom: 14px; }
:root body .field label, :root body label { font-size: 13px; font-weight: 600; color: var(--qa-ink); margin-bottom: 6px; display: block; letter-spacing: 0; text-transform: none; }
:root body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), :root body select, :root body textarea {
  width: 100%; min-height: 52px; border-radius: 12px; border: 1px solid var(--qa-field); background: var(--qa-card); color: var(--qa-ink);
  font-size: 16px; padding: 12px 14px; box-shadow: none; outline: 0;
}
:root body textarea { min-height: 110px; }
:root body input:focus, :root body select:focus, :root body textarea:focus { border-color: var(--qa-yellow); box-shadow: 0 0 0 2px var(--qa-yellow); outline: 0; }
:root body input::placeholder, :root body textarea::placeholder { color: var(--qa-muted); opacity: 1; }
:root body input[type="checkbox"], :root body input[type="radio"] { width: 20px; height: 20px; accent-color: var(--qa-hero); }
:root body .password-toggle-btn { color: var(--qa-muted); width: 44px; height: 44px; right: 2px; }
:root body .field-password-wrap input { padding-right: 48px; }
:root body .terms-check { font-size: 13.5px; color: var(--qa-ink); }
:root body .terms-check input[type="checkbox"] { width: 20px; min-width: 20px; height: 20px; min-height: 0; }
:root body .alert { background: var(--qa-red-bg); color: var(--qa-red-fg); border: 0; border-left: 0; border-radius: 12px; padding: 12px 14px; font-size: 14px; }
:root body .alert-success { background: var(--qa-green-bg); color: var(--qa-green-fg); }

/* ---------- chips and badges ---------- */
:root body .badge { border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 700; }
:root body .badge-yes { background: var(--qa-hero); color: var(--qa-yellow); }
:root body .badge-no { background: var(--qa-red-bg); color: var(--qa-red-fg); }
:root body .badge-pending { background: var(--qa-amber-bg); color: var(--qa-amber-fg); }
:root body .empty-state { padding: 28px 12px; }
:root body .empty-state-title { font-size: 15.5px; color: var(--qa-ink); }
}

/* ============ experts directory + expert cards ============ */
@media (max-width: 820px), (display-mode: standalone) {
:root body .qa-only { display: block; }
:root body .qa-count { color: var(--qa-muted); font-size: 13.5px; margin: 6px 2px 10px; }

/* find-an-expert page: no hero text, search on top, chips, rows */
:root body.qa-in .section-head, :root body .directory-layout .sidebar h4, :root body .directory-layout .sidebar hr, :root body .directory-layout .sidebar-select,
:root body .directory-layout .sidebar > select, :root body .directory-layout .sidebar > input, :root body .directory-layout .sidebar > p, :root body .directory-layout .category-blurb { display: none; }
:root body .directory-layout { display: block; }
:root body .directory-layout .sidebar-column { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; position: static; margin: 0 -16px; padding: 12px 16px 10px; background: var(--qa-card); border-bottom: 1px solid var(--qa-line); gap: 12px 8px; }
:root body .directory-search-bar { flex: 0 0 100%; }
:root body .directory-search-bar { margin: 0; position: relative; }
:root body .directory-search-bar #searchInput { padding-left: 44px; background: var(--qa-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat 12px center / 22px; border-color: var(--qa-line); }
:root[data-theme="dark"] body .directory-search-bar #searchInput { background-color: var(--qa-soft); }
:root body .directory-layout .sidebar { display: contents; border: 0; background: none; padding: 0; }
:root body .directory-layout .sidebar-list { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0 -16px 0 0; padding: 0 16px 0 0; flex: 1 1 0; min-width: 0; scrollbar-width: none; order: 3; }
:root body .directory-layout .sidebar-list::-webkit-scrollbar { display: none; }
:root body .directory-layout .sidebar-list li { flex: none; }
:root body .directory-layout .sidebar-list a { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--qa-field); background: var(--qa-card); color: var(--qa-ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
:root body .directory-layout .sidebar-list a .count { display: none; }
:root body .directory-layout .sidebar-list a.active { background: var(--qa-hero); border-color: var(--qa-hero); color: #fff; }
:root body .directory-layout .filter-check { order: 2; flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--qa-field); background: var(--qa-card); font-size: 14px; font-weight: 600; margin: 0; }
:root body .directory-layout .filter-check input { display: none; }
:root body .directory-layout .filter-check:has(input:checked) { background: var(--qa-hero); border-color: var(--qa-hero); color: #fff; }
:root body #resultsContainer { padding-top: 6px; }
:root body #resultsContainer .grid { display: flex; flex-direction: column; gap: 12px; }

/* expert card: column + centred by default, ROW in the directory list */
:root body .consultant-card { background: var(--qa-card); border: 1px solid var(--qa-line); border-radius: 18px; box-shadow: none; transform: none; color: var(--qa-ink); }
:root body .consultant-card:hover { box-shadow: none; transform: none; }
:root body .consultant-card:hover .consultant-rate { background: none; color: inherit; margin: 0; padding: 0; }
:root body .qa-expert { flex-direction: column; align-items: center; text-align: center; padding: 16px 12px; gap: 12px; }
:root body .qa-expert .consultant-body { align-items: center; width: 100%; }
:root body .qa-expert .consultant-name { justify-content: center; }
:root body .qa-expert .consultant-meta { justify-content: center; }
:root body .qa-expert .consultant-rate { justify-content: center; }
:root body #resultsContainer .consultant-card.qa-expert, :root body .directory-layout .consultant-card.qa-expert { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 14px; }
:root body #resultsContainer .qa-expert .consultant-body { align-items: stretch; }
:root body #resultsContainer .qa-expert .consultant-name, :root body #resultsContainer .qa-expert .consultant-meta, :root body #resultsContainer .qa-expert .consultant-rate { justify-content: flex-start; }
:root body .consultant-card:not(.qa-expert) .consultant-photo-wrap { border-radius: 0; }
:root body .consultant-card:not(.qa-expert) .consultant-body { padding: 14px; }
:root body .qa-expert .consultant-photo-wrap { aspect-ratio: 1; width: 84px; height: 84px; flex: none; border-radius: 50%; overflow: visible; background: var(--qa-navy); position: relative; }
:root body .qa-expert .consultant-photo-wrap img { border-radius: 50%; }
:root body .consultant-card:hover .consultant-photo-wrap img { transform: none; }
:root body .qa-expert .consultant-photo-fallback { border-radius: 50%; font-size: 0; color: transparent; background: var(--qa-navy); }
:root body .qa-expert .consultant-photo-fallback::after { content: attr(data-ini); font-size: 30px; font-weight: 800; color: var(--qa-yellow); letter-spacing: .5px; }
:root body .qa-expert .consultant-status-pill { top: auto; left: auto; right: 0; bottom: 0; width: 20px; height: 20px; padding: 0; font-size: 0; border-radius: 50%; background: var(--qa-green); border: 3px solid var(--qa-card); box-sizing: border-box; }
:root body .qa-expert .featured-badge { display: none; }
:root body .qa-expert .consultant-body { padding: 0; gap: 2px; min-width: 0; }
:root body .qa-expert .consultant-name { font-size: 15.5px; font-weight: 700; color: var(--qa-ink); display: flex; align-items: center; gap: 5px; }
:root body .qa-expert .consultant-body > p.small { font-size: 13.5px; color: var(--qa-muted) !important; font-weight: 400 !important; }
:root body .qa-expert .consultant-meta { gap: 0; font-size: 13px; color: var(--qa-muted); flex-wrap: nowrap; align-items: center; }
:root body .qa-expert .consultant-meta span:first-child { color: var(--qa-ink); font-weight: 600; }
:root body .qa-expert .consultant-meta span:first-child::first-letter { color: var(--qa-ink); }
:root body .qa-expert .consultant-meta span:nth-child(2) { display: none; }
:root body .qa-expert .consultant-meta .qa-cat::before { content: "\00b7"; margin: 0 7px; }
:root body .qa-expert .consultant-meta .qa-cat:empty { display: none; }
:root body .qa-expert .consultant-rate { border: 0; padding: 4px 0 0; margin: 0; font-size: 14.5px; font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--qa-ink); }
:root body .qa-expert .consultant-rate .muted { color: var(--qa-ink); font-weight: 700; font-size: 14.5px; }
:root body .qa-online { display: inline-block; background: var(--qa-green-bg); color: var(--qa-green-fg); font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
}

/* ============ shared app components: chips, booking cards, info box, menus, home, explore, account ============ */
@media (max-width: 820px), (display-mode: standalone) {
:root body .btn.qa-only, :root body a.btn.qa-only { display: inline-flex; }
:root body .qa-desk > .admin-panel, :root body.qa-role-client .qa-desk .stat-tiles { display: none; }
:root body .qa-sub { color: var(--qa-muted); margin: -6px 0 14px; }

/* chips */
:root body .qa-chip, :root body .qa-tabs .qa-chip { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--qa-field); background: var(--qa-card); color: var(--qa-ink); font: 600 14px/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; }
:root body .qa-chip.active { background: var(--qa-hero); border-color: var(--qa-hero); color: #fff; }
:root body .qa-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
:root body .qa-chips::-webkit-scrollbar, :root body .qa-hscroll::-webkit-scrollbar { display: none; }
:root body .qa-tabs { display: flex; gap: 8px; margin: -14px -16px 14px; padding: 12px 16px; background: var(--qa-card); border-bottom: 1px solid var(--qa-line); }

/* section headings */
:root body .qa-sec { font-size: 18px; font-weight: 700; margin: 22px 0 10px; color: var(--qa-ink); }
:root body .qa-sechead { display: flex; align-items: baseline; justify-content: space-between; margin-top: 22px; }
:root body .qa-sechead .qa-sec { margin: 0 0 10px; }
:root body .qa-sechead a { font-size: 14px; font-weight: 600; color: var(--qa-ink); text-decoration: none; }

/* home */
:root body .qa-home > .qa-bcard.hero { margin-top: 18px; }
:root body .qa-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 2px; }
:root body .qa-tiles a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; background: var(--qa-card); border: 1px solid var(--qa-line); border-radius: 16px; text-decoration: none; color: var(--qa-ink); }
:root body .qa-tiles b { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; }
:root body .qa-ticon { width: 38px; height: 38px; border-radius: 50%; background: var(--qa-hero); display: inline-flex; align-items: center; justify-content: center; }
:root body .qa-ticon svg { width: 20px; height: 20px; fill: var(--qa-yellow); }
:root body .qa-empty { text-align: center; background: var(--qa-card); border: 1px solid var(--qa-line); border-radius: 18px; padding: 26px 18px; margin-top: 18px; }
:root body .qa-empty b { display: block; font-size: 15.5px; }
:root body .qa-empty p { color: var(--qa-muted); margin: 6px 0 16px; font-size: 14px; }
:root body .qa-empty .btn { min-width: 62%; }
:root body .qa-hscroll { scroll-padding-left: 16px; display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
:root body .qa-hscroll .consultant-card { flex: 0 0 172px; scroll-snap-align: start; }
:root body .qa-hscroll .consultant-photo-wrap { width: 84px; height: 84px; }
:root body .qa-hscroll .consultant-body { align-items: center; width: 100%; }
:root body .qa-hscroll .consultant-name { justify-content: center; font-size: 15px; }
:root body .qa-hscroll .consultant-body > p.small { display: none; }
:root body .qa-hscroll .consultant-rate { justify-content: center; font-size: 13px; }
:root body .qa-hscroll .consultant-rate .muted { font-size: 13px; }
:root body .qa-hscroll .qa-online { display: none; }
:root body .qa-hscroll .consultant-meta { justify-content: center; }
:root body .qa-hscroll .consultant-meta .qa-cat { display: none; }

/* booking card (home + bookings list) */
:root body .qa-bcard { background: var(--qa-card); border: 1px solid var(--qa-line); border-radius: 20px; padding: 14px; margin-bottom: 12px; display: grid; gap: 12px; }
:root body .qa-bcard.hero { background: var(--qa-hero); border-color: var(--qa-hero); color: #fff; border-radius: 22px; padding: 18px; }
:root body .qa-bcard-label { margin: 0; color: var(--qa-yellow); font-weight: 700; font-size: 13px; }
:root body .qa-bcard-top { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
:root body .qa-avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--qa-navy); color: var(--qa-yellow); font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; object-fit: cover; }
:root body .qa-bcard.hero .qa-avatar { width: 56px; height: 56px; background: var(--qa-navy-soft); }
:root body .qa-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
:root body .qa-who b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; }
:root body .qa-who small { font-size: 13px; color: var(--qa-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root body .qa-bcard.hero .qa-who b { font-size: 18px; }
:root body .qa-bcard.hero .qa-who small, :root body .qa-bcard-info { color: var(--qa-hero-muted); }
:root body .qa-bcard-info { margin: -6px 0 0 68px; font-size: 13.5px; }
:root body .qa-pillstatus { flex: none; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--qa-soft); color: var(--qa-ink); }
:root body .qa-pillstatus.ok { background: var(--qa-hero); color: var(--qa-yellow); }
:root body .qa-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--qa-bg); border-radius: 14px; padding: 12px 14px; }
:root[data-theme="dark"] body .qa-info { background: var(--qa-soft); }
:root body .qa-info div { display: flex; flex-direction: column; min-width: 0; }
:root body .qa-info b { font-size: 14.5px; font-weight: 700; }
:root body .qa-info span { font-size: 13px; color: var(--qa-muted); }
:root body .qa-info strong { font-size: 14.5px; font-weight: 700; white-space: nowrap; }

/* tables become booking cards */
:root body table.responsive-table, :root body table.responsive-table tbody { display: block; width: 100%; }
:root body table.responsive-table thead { display: none; }
:root body table.responsive-table tr { display: grid; grid-template-columns: 1fr; gap: 12px; background: var(--qa-card); border: 1px solid var(--qa-line); border-radius: 20px; padding: 14px; margin: 0 0 12px; box-shadow: none; }
:root body table.responsive-table td { display: block; padding: 0; border: 0; text-align: left; font-size: 14px; min-width: 0; }
:root body table.responsive-table td { grid-column: 1 / -1; grid-row: auto; }
:root body table.responsive-table td::before { content: none; }
:root body table.responsive-table td[data-label] { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--qa-line); }
:root body table.responsive-table td[data-label]::before { content: attr(data-label); display: block; color: var(--qa-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
:root body table.responsive-table td[data-col="name"] { display: flex; align-items: center; gap: 12px; padding-right: 0; font-weight: 700; font-size: 15px; }
:root body table.responsive-table td[data-col="name"][data-ini]::before { content: attr(data-ini); width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--qa-navy); color: var(--qa-yellow); font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; text-transform: none; letter-spacing: 0; }
:root body table.responsive-table td[data-col="status"] { position: absolute; }
:root body .qa-bookings table.responsive-table tr { position: relative; }
:root body .qa-bookings td[data-col="status"] { top: 22px; right: 16px; }
:root body .qa-bookings .qa-plain { display: none !important; }
:root body .qa-bookings td[data-col="info"] { display: block; }
:root body .qa-bookings td[data-col="actions"] { display: flex !important; gap: 10px; flex-wrap: wrap; order: 3; }
:root body .qa-bookings table.responsive-table td[data-col="name"] { order: 1; padding-right: 108px; }
:root body .qa-bookings td[data-col="info"] { order: 2; }
:root body .book-another-bar { display: none; }
:root body .qa-bookings { background: none; border: 0; padding: 0; margin: 0; }
:root body .qa-bookings td[data-col="actions"] form:has(input[value="cancel"]) { order: 2; flex: 1 1 30%; }
:root body .qa-bookings td[data-col="actions"] .btn-join { order: 1; }
:root body .qa-bookings td[data-col="actions"] > a:not(.btn-join), :root body .qa-bookings td[data-col="actions"] form:not(:has(input[value="cancel"])) { order: 3; flex: 1 1 42%; }
:root body .qa-bookings td[data-col="actions"] > * { flex: 1 1 auto; }
:root body .qa-bookings td[data-col="actions"] form { flex: 1 1 auto; display: flex; }
:root body .qa-bookings td[data-col="actions"] form .btn { width: 100%; }
:root body .qa-bookings td[data-col="actions"] .btn-join { background: var(--qa-hero); color: #fff; border-color: var(--qa-hero); flex: 2 1 55%; box-shadow: none; min-height: 50px; font-size: 15px; }
:root body tr.qa-off { display: none !important; }
:root body .qa-tab-empty { text-align: center; color: var(--qa-muted); padding: 40px 0; }
:root body .qa-tab-empty[hidden] { display: none; }
:root body .badge { white-space: nowrap; }

/* explore hub */
:root body .qa-explore { display: grid; gap: 12px; }
:root body .qa-xcard { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: var(--qa-hero); color: #fff; text-decoration: none; }
:root body .qa-xicon { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--qa-navy-soft); display: inline-flex; align-items: center; justify-content: center; }
:root body .qa-xicon svg { width: 26px; height: 26px; fill: var(--qa-yellow); }
:root body .qa-xtext { flex: 1; display: flex; flex-direction: column; min-width: 0; }
:root body .qa-xtext b { font-size: 16.5px; font-weight: 700; }
:root body .qa-xtext small { color: var(--qa-hero-muted); font-size: 13.5px; margin-top: 3px; line-height: 1.4; }
:root body .qa-chev { width: 24px; height: 24px; fill: var(--qa-yellow); flex: none; }
:root body .qa-xcard.urgent { background: var(--qa-card); border: 1px solid var(--qa-line); color: var(--qa-ink); }
:root body .qa-xcard.urgent .qa-xicon { background: var(--qa-red-bg); }
:root body .qa-xcard.urgent .qa-xicon svg { fill: var(--qa-red-fg); }
:root body .qa-xcard.urgent .qa-xtext small { color: var(--qa-muted); }
:root body .qa-xcard.urgent .qa-chev { fill: var(--qa-muted); }

/* account hub */
:root body .qa-acc-hero { margin: -16px -16px 18px; padding: calc(var(--qa-sat) + 24px) 16px 24px; background: var(--qa-navy); border-radius: 0 0 28px 28px; color: #fff; display: flex !important; flex-direction: column; align-items: center; text-align: center; }
:root body .qa-acc-hero .qa-avatar { width: 84px; height: 84px; font-size: 30px; background: var(--qa-navy-soft); margin-bottom: 10px; }
:root body .qa-acc-hero strong { color: #fff; font-size: 19px; font-weight: 800; }
:root body .qa-acc-hero small { color: var(--qa-hero-muted); font-size: 13px; }
:root body .qa-creditcard { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--qa-card); border: 1px solid var(--qa-line); border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; text-decoration: none; color: var(--qa-ink); }
:root body .qa-creditcard small { display: block; color: var(--qa-muted); font-size: 13px; }
:root body .qa-creditcard b { font-size: 20px; font-weight: 800; color: var(--qa-accent); }
:root body .qa-creditcard .btn { min-height: 44px; flex: none; }
:root body .qa-menu { background: var(--qa-card); border: 1px solid var(--qa-line); border-radius: 18px; overflow: hidden; }
:root body .qa-row { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 16px; text-decoration: none; color: var(--qa-ink); font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--qa-line); cursor: pointer; list-style: none; }
:root body .qa-row::-webkit-details-marker { display: none; }
:root body .qa-row span { flex: 1; }
:root body .qa-row svg { width: 24px; height: 24px; fill: var(--qa-muted); flex: none; }
:root body .qa-menu > :last-child, :root body .qa-menu > :last-child.qa-row { border-bottom: 0; }
:root body .qa-det[open] > summary svg { transform: rotate(90deg); }
:root body .qa-det-body { padding: 4px 16px 14px; border-bottom: 1px solid var(--qa-line); display: grid; gap: 8px; }
:root body .qa-det-body p { margin: 4px 0 4px; }
:root body .qa-opt { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 16px; border-radius: 14px; background: var(--qa-bg); border: 1px solid var(--qa-line); color: var(--qa-ink); font: 600 15px var(--font-body); text-decoration: none; cursor: pointer; }
:root body .qa-opt i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--qa-field); }
:root body .qa-opt.on i { border-color: var(--qa-accent); box-shadow: inset 0 0 0 4px var(--qa-bg), inset 0 0 0 10px var(--qa-accent); }
:root body .qa-signout { display: block; margin-top: 14px; padding: 16px; text-align: center; background: var(--qa-card); border: 1px solid var(--qa-line); border-radius: 18px; color: var(--qa-red-fg); font-weight: 700; text-decoration: none; }
:root body .qa-del { text-align: center; margin: 14px 0 4px; }
:root body .qa-del a { color: var(--qa-red-fg); font-weight: 600; font-size: 14px; text-decoration: none; padding: 10px; display: inline-block; }
:root body .qa-ver { text-align: center; color: var(--qa-muted); font-size: 12px; margin: 4px 0 8px; }
}

/* ============ sign in / create account / forgot password (navy header + white sheet) ============ */
@media (max-width: 820px), (display-mode: standalone) {
:root body:has(.auth-sheet) { background: var(--qa-navy); }
:root body:has(.auth-sheet) .topbar, :root body:has(.auth-sheet) .app-tabbar, :root body:has(.auth-sheet) .site-footer, :root body:has(.auth-sheet) .app-sheet-backdrop { display: none !important; }
:root body:has(.auth-sheet) section { padding: 0; background: transparent; }
:root body:has(.auth-sheet) .container { padding: 0; max-width: none; }
:root body .auth-shell:has(.auth-sheet) { max-width: none; align-items: stretch; text-align: left; margin: 0; min-height: 100vh; min-height: 100dvh; }
:root body .auth-logo, :root body .auth-shell .eyebrow { display: none; }
:root body .auth-logo-light { display: block; height: 46px; width: auto; margin: calc(var(--qa-sat) + 26px) auto 8px; }
:root body .auth-tag { display: block; color: var(--qa-hero-muted); text-align: center; margin: 0 16px 24px; font-size: 14px; }
:root body .auth-sheet { flex: 1; background: var(--qa-card); border-radius: 30px 30px 0 0; padding: 16px 16px calc(28px + var(--qa-sab)); align-items: stretch; }
:root body .auth-tabs { display: flex; gap: 4px; padding: 4px; background: var(--qa-bg); border: 1px solid var(--qa-line); border-radius: 16px; }
:root body .auth-tabs a { flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 600; font-size: 14.5px; color: var(--qa-muted); text-decoration: none; }
:root body .auth-tabs a.on { background: var(--qa-card); color: var(--qa-ink); box-shadow: 0 1px 4px rgba(0,0,0,.12); font-weight: 700; }
:root body .auth-heading { font-size: 21px; font-weight: 700; margin: 20px 0 4px; text-align: center; color: var(--qa-ink); }
:root body .auth-subtext { color: var(--qa-muted); text-align: center; margin: 0 auto 18px; font-size: 14px; max-width: 34ch; }
:root body .auth-sheet > .alert { margin: 12px 0 0; }
:root body .auth-panel { background: transparent; border: 0; box-shadow: none; padding: 0; display: flex; flex-direction: column; margin-top: 6px; }
:root body .auth-sheet .auth-panel > form { order: 1; }
:root body .auth-sheet .auth-panel > .auth-divider { order: 2; }
:root body .auth-sheet .auth-panel > .btn-google { order: 3; }
:root body .auth-sheet .auth-panel > .terms-continue { order: 4; }
:root body .auth-divider { margin: 18px 0; color: var(--qa-muted); }
:root body .auth-footer { text-align: center; color: var(--qa-muted); margin: 18px 0 0; font-size: 14px; }
:root body .auth-footer a { color: var(--qa-ink); border-bottom: 2px solid var(--qa-yellow); }
:root body .auth-forgot { margin: 14px 0 0; }
:root body .auth-forgot a { color: var(--qa-ink); font-weight: 600; text-decoration: none; }
:root body .terms-continue { color: var(--qa-muted); }
:root body .terms-consent { margin: 4px 0 16px; }
}

/* ============ expert profile ============ */
@media (max-width: 820px), (display-mode: standalone) {
:root body .qa-profhero { display: flex !important; flex-direction: column; align-items: center; text-align: center; position: relative; background: var(--qa-navy); color: #fff; border-radius: 0 0 30px 30px; padding: calc(var(--qa-sat) + 56px) 20px 22px; }
:root body .qa-herobtn { position: absolute; top: calc(var(--qa-sat) + 10px); width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(255,255,255,.1); text-decoration: none; margin: 0; padding: 0; border: 0; }
:root body .qa-herobtn.back { left: 12px; }
:root body .qa-herobtn.heart { right: 12px; background: transparent; }
:root body .qa-herobtn button { background: none; border: 0; color: #fff; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
:root body .qa-herobtn svg { width: 26px; height: 26px; fill: currentColor; }
:root body .qa-herobtn svg.on { fill: var(--qa-yellow); }
:root body .qa-avatar.big { width: 140px; height: 140px; font-size: 48px; background: var(--qa-navy-soft); margin-bottom: 14px; box-shadow: 0 0 0 0 transparent; }
:root body .qa-profhero h1 { color: #fff; font-size: 22px; font-weight: 800; margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
:root body .qa-seal { width: 24px; height: 24px; display: inline-block; flex: none; }
:root body .qa-profhero p { color: var(--qa-hero-muted); margin: 3px 0 12px; font-size: 14.5px; }
:root body .qa-profinfo { padding: 14px 16px 0; margin: 0; }
:root body .qa-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
:root body .qa-stats div { background: var(--qa-card); border: 1px solid var(--qa-line); border-radius: 16px; padding: 12px 6px; text-align: center; display: flex; flex-direction: column; }
:root body .qa-stats b { font-size: 17px; font-weight: 800; }
:root body .qa-stats span { font-size: 12.5px; color: var(--qa-muted); }
/* the original header pieces are replaced by the hero above */
:root body .profile-cover, :root body .profile-photo, :root body .profile-name-row, :root body .profile-body > .lede, :root body .profile-body > p.small, :root body .profile-stats, :root body .trust-badges, :root body .social-row { display: none; }
:root body .hero-grid { display: block; }
:root body .profile-card { background: transparent; border: 0; border-radius: 0; margin: 0; }
:root body .profile-body { padding: 0; }
:root body .profile-body h3 { font-size: 18px; margin: 20px 0 8px; font-weight: 700; }
:root body .job-content { font-size: 14.5px; color: var(--qa-ink); }
:root body .tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
:root body .tag-item { background: var(--qa-card); border: 1px solid var(--qa-line); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 600; color: var(--qa-ink); }
:root body .qa-facts { display: block; background: var(--qa-card); border: 1px solid var(--qa-line); border-radius: 18px; padding: 8px 16px; margin: 22px 0 0; }
:root body .qa-facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 7px 0; }
:root body .qa-facts span { color: var(--qa-muted); font-size: 14px; }
:root body .qa-facts b { font-weight: 600; font-size: 14px; }
:root body .review-list { display: grid; gap: 10px; }
:root body .review-item { background: var(--qa-card); border: 1px solid var(--qa-line); border-radius: 18px; padding: 14px; box-shadow: none; }
:root body .review-item-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
:root body .review-verified-chip { display: none; }
:root body .review-stars { color: var(--qa-yellow); letter-spacing: 1px; }
/* sticky booking bar */
:root body .profile-book-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; background: var(--qa-card); border: 0; border-top: 1px solid var(--qa-line); border-radius: 0; padding: 10px 16px calc(10px + var(--qa-sab)); margin: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: center; box-shadow: none; }
:root body.qa-in .profile-book-panel { bottom: calc(var(--qa-nav-h) + var(--qa-sab)); padding-bottom: 10px; }
:root body .profile-book-panel > .tag, :root body .profile-book-panel .row, :root body .profile-book-panel form, :root body .profile-book-panel > .alert, :root body .profile-book-panel > p.small:last-of-type, :root body .profile-book-panel > a.btn-ghost { display: none; }
:root body .profile-book-panel h2 { grid-column: 1; grid-row: 1; font-size: 17px; margin: 0; }
:root body .profile-book-panel > p.small.muted.mt-0 { grid-column: 1; grid-row: 2; margin: 0; font-size: 12.5px; }
:root body .profile-book-panel > a.btn-signal { grid-column: 2; grid-row: 1 / span 2; margin: 0 !important; min-width: 168px; }
:root body:has(.profile-book-panel) { padding-bottom: calc(var(--qa-nav-h) + var(--qa-sab) + 84px); }
:root body:not(.qa-in):has(.profile-book-panel) { padding-bottom: 84px; }
}

/* ============ forms in panels, booking, partners/jobs, notifications, call room ============ */
@media (max-width: 820px), (display-mode: standalone) {
:root body form > .btn, :root body form > button.btn, :root body .admin-panel form .btn:not(.btn-sm):only-child { width: 100%; }
:root body .admin-panel form > .btn-signal, :root body .admin-panel form > button[type=submit].btn { width: 100%; }
:root body .hint, :root body .field .hint { font-size: 12.5px; color: var(--qa-muted); }
:root body .small.muted, :root body .muted { color: var(--qa-muted); }

/* radio cards: selected = navy card, white text (like the app's Video call / Audio call) */
:root body .radio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
:root body .radio-card { position: relative; display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 10px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--qa-line); border-radius: 16px; background: var(--qa-card); color: var(--qa-ink); font-weight: 600; cursor: pointer; }
:root body .radio-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
:root body .radio-card:has(input:checked), :root body .radio-card.checked { background: var(--qa-hero); border-color: var(--qa-hero); color: #fff; }
:root body .radio-card:has(input:checked) .small, :root body .radio-card:has(input:checked) .muted, :root body .radio-card:has(input:checked) .hint { color: var(--qa-hero-muted); }
:root body .radio-card:has(input[type="checkbox"]) { background: var(--qa-card); }
:root body .radio-card:has(input[type="checkbox"]:checked) { background: var(--qa-card); color: var(--qa-ink); border-color: var(--qa-hero); }
:root body .radio-card input[type="checkbox"] { position: static; opacity: 1; pointer-events: auto; }
:root body .plan-option.checked, :root body .plan-option.checked *, :root body .quiz-option:has(input:checked), :root body .quiz-option:has(input:checked) * { color: #fff; }
:root body .plan-option.checked, :root body .quiz-option:has(input:checked) { background: var(--qa-hero); }

/* time slots and day chips */
:root body .slot-grid { display: flex; flex-wrap: wrap; gap: 10px; }
:root body .slot-chip { min-height: 44px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--qa-line); background: var(--qa-card); color: var(--qa-ink); font: 600 14px var(--font-body); }
:root body .slot-chip.selected, :root body .slot-chip:hover { background: var(--qa-hero); border-color: var(--qa-hero); color: #fff; }
:root body .slot-chip:disabled, :root body .slot-chip.taken { background: var(--qa-bg); color: var(--qa-muted); opacity: .6; }
:root body .summary-line, :root body .summary-total { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; }
:root body .summary-total { border-top: 1px solid var(--qa-line); margin-top: 6px; padding-top: 10px; font-weight: 800; font-size: 16px; }
:root body .secure-badge { color: var(--qa-muted); font-size: 12.5px; text-align: center; margin-top: 10px; }
:root body #bookingForm > .btn-signal { position: sticky; bottom: calc(var(--qa-nav-h) + var(--qa-sab) + 10px); z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
:root body .hero-panel { padding: 16px; }
:root body .trust-badge { border-radius: 999px; background: var(--qa-green-bg); color: var(--qa-green-fg); border: 0; font-size: 13px; padding: 8px 14px; }

/* partners / jobs / blog cards: white app cards instead of tinted ones */
:root body .partner-card, :root body .job-card, :root body .career-card, :root body .blog-card, :root body .card { padding: 16px; }
:root body .job-card, :root body .career-card, :root body [class*="career-"][class$="card"], :root body .careers-list > a, :root body .careers-list > div { background: var(--qa-card); }
:root body .tag, :root body .tag-item, :root body .partner-category, :root body .job-type { border-radius: 999px; }
:root body .directory-search-bar input, :root body .search-bar input { border-radius: 14px; }
:root body .partner-category-tile { background: var(--qa-hero); color: #fff; }

/* urgent help hero */
:root body .urgent-hero, :root body .urgent-panel { background: var(--qa-navy); color: #fff; border-radius: 0 0 28px 28px; }

/* notifications: full screen page like the app */
:root body .notif-panel { position: fixed; inset: 0; width: auto; max-width: none; height: auto; max-height: none; z-index: 200; background: var(--qa-bg); border: 0; border-radius: 0; box-shadow: none; overflow-y: auto; padding: 0 0 calc(24px + var(--qa-sab)); transform: none; display: block; }
:root body .notif-panel[hidden] { display: none; }
:root body .notif-panel-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: var(--qa-sat) 12px 0 8px; min-height: calc(56px + var(--qa-sat)); background: var(--qa-card); border-bottom: 1px solid var(--qa-line); }
:root body .notif-panel-head strong { flex: 1; font-size: 18px; font-weight: 700; padding-left: 8px; }
:root body .notif-back { display: inline-flex; width: 44px; height: 44px; border: 0; background: none; color: var(--qa-ink); align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; padding: 0; }
:root body .notif-close { display: none; }
:root body .notif-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px 0; }
:root body .notif-actions[hidden] { display: none; }
:root body .notif-actions .btn { min-height: 40px; border: 0; background: transparent; padding: 0 8px; font-size: 14px; }
:root body .notif-list { display: grid; gap: 10px; padding: 10px 16px; }
:root body .notif-item { position: relative; background: var(--qa-card); border: 1px solid var(--qa-line); border-radius: 18px; padding: 14px 14px 14px 68px; }
:root body .notif-item::before { content: ""; position: absolute; left: 14px; top: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--qa-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230A0F26'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1z'/%3E%3C/svg%3E") no-repeat center / 22px; }
:root body .notif-head { display: grid; gap: 2px; text-align: left; background: none; border: 0; padding: 0; width: 100%; color: var(--qa-ink); cursor: pointer; font: inherit; }
:root body .notif-head strong { font-size: 15px; }
:root body .notif-body { color: var(--qa-muted); font-size: 14px; }
:root body .notif-head small { color: var(--qa-muted); font-size: 13px; }
:root body .notif-item.unread { border-color: var(--qa-yellow); }
:root body .notif-item-actions { display: none; gap: 8px; margin-top: 10px; }
:root body .notif-item.expanded .notif-item-actions { display: flex; }
:root body .notif-empty { text-align: center; color: var(--qa-muted); padding: 40px 0; }

/* the live call room (own page): navy, round controls, safe areas */
:root body .call-shell { background: #0A0F26; height: 100vh; height: 100dvh; }
:root body .call-header { padding: calc(var(--qa-sat) + 10px) 16px 10px; font-size: 14px; background: #0A0F26; }
:root body .call-timer { font-size: 16px; }
:root body .call-controls { background: #0A0F26; padding: 12px 12px calc(12px + var(--qa-sab)); gap: 10px; flex-wrap: nowrap; }
:root body .call-control-btn { width: 54px; height: 54px; background: rgba(255,255,255,.16); min-height: 0; }
:root body .call-hangup { background: #DC2626; }
:root body .call-control-btn.active { background: var(--qa-yellow); }
:root body .call-chat-panel { background: #0A0F26; }
:root body .call-timeup-card { background: #161D3A; border-radius: 22px; }
}

/* ============ dark mode: components that use var(--navy) as a BACKGROUND stay deep blue ============ */
@media (max-width: 820px), (display-mode: standalone) {
:root[data-theme="dark"] body .btn-primary, :root[data-theme="dark"] body .section-dark, :root[data-theme="dark"] body .contact-side-card, :root[data-theme="dark"] body .partner-category-tile, :root[data-theme="dark"] body .consultant-photo-wrap, :root[data-theme="dark"] body .consultant-photo-fallback, :root[data-theme="dark"] body .partner-logo-fallback,
:root[data-theme="dark"] body .profile-cover, :root[data-theme="dark"] body .site-footer, :root[data-theme="dark"] body .admin-avatar-fallback, :root[data-theme="dark"] body .apply-step-num, :root[data-theme="dark"] body .plan-option.checked, :root[data-theme="dark"] body .quiz-option:has(input:checked), :root[data-theme="dark"] body .slot-chip.selected,
:root[data-theme="dark"] body .lang-links a.active, :root[data-theme="dark"] body .profile-lang .lang-links a.active, :root[data-theme="dark"] body .nav-toggle-line, :root[data-theme="dark"] body .sidebar-list a.active, :root[data-theme="dark"] body .carousel-arrow:hover, :root[data-theme="dark"] body .pattern-dark { background: var(--qa-hero); color: #fff; }
:root[data-theme="dark"] body .call-shell, :root[data-theme="dark"] body .call-controls, :root[data-theme="dark"] body .call-header { background: #0A0F26; }
:root[data-theme="dark"] body .consultant-photo-fallback::after { color: var(--qa-yellow); }
:root[data-theme="dark"] body .consultant-name-check svg path:first-child { fill: #E9EDFF; }
:root[data-theme="dark"] body .consultant-name-check svg path:last-child { fill: #0B0F1D; }
:root[data-theme="dark"] body .qa-bar, :root[data-theme="dark"] body .qa-nav, :root[data-theme="dark"] body .notif-panel-head { background: var(--qa-card); }
:root[data-theme="dark"] body .qa-hero, :root[data-theme="dark"] body .qa-acc-hero, :root[data-theme="dark"] body .qa-profhero, :root[data-theme="dark"] body .auth-sheet-top { background: #0A0F26; }
:root[data-theme="dark"] body .card, :root[data-theme="dark"] body .admin-panel, :root[data-theme="dark"] body .form-panel, :root[data-theme="dark"] body .profile-card, :root[data-theme="dark"] body .hero-panel, :root[data-theme="dark"] body .stat-tile, :root[data-theme="dark"] body .sidebar, :root[data-theme="dark"] body .testimonial-card, :root[data-theme="dark"] body .blog-card, :root[data-theme="dark"] body .partner-card, :root[data-theme="dark"] body .auth-panel, :root[data-theme="dark"] body .credit-pack,
:root[data-theme="dark"] body .consultant-card, :root[data-theme="dark"] body .alert, :root[data-theme="dark"] body .stat-tile, :root[data-theme="dark"] body .field-link, :root[data-theme="dark"] body .admin-modal-card, :root[data-theme="dark"] body .partner-logo, :root[data-theme="dark"] body .responsive-table tr, :root[data-theme="dark"] body .talk-chip, :root[data-theme="dark"] body .lang-btn, :root[data-theme="dark"] body .lang-list, :root[data-theme="dark"] body .slot-chip, :root[data-theme="dark"] body .segmented-toggle label.checked {
  background: var(--qa-card); border-color: var(--qa-line); color: var(--qa-ink);
}
:root[data-theme="dark"] body .profile-card { background: transparent; border: 0; }
:root[data-theme="dark"] body .alert { background: var(--qa-red-bg); color: var(--qa-red-fg); }
:root[data-theme="dark"] body .alert-success { background: var(--qa-green-bg); color: var(--qa-green-fg); }
:root[data-theme="dark"] body input:not([type="checkbox"]):not([type="radio"]), :root[data-theme="dark"] body select, :root[data-theme="dark"] body textarea { background: var(--qa-card); color: var(--qa-ink); border-color: var(--qa-field); }
:root[data-theme="dark"] body select option { background: var(--qa-card); color: var(--qa-ink); }
:root[data-theme="dark"] body .auth-sheet { background: var(--qa-card); }
:root[data-theme="dark"] body .btn-primary { background: var(--qa-hero); border-color: var(--qa-hero); }
:root[data-theme="dark"] body h1, :root[data-theme="dark"] body h2, :root[data-theme="dark"] body h3, :root[data-theme="dark"] body h4, :root[data-theme="dark"] body strong, :root[data-theme="dark"] body b, :root[data-theme="dark"] body label { color: var(--qa-ink); }
:root[data-theme="dark"] body .qa-hero *, :root[data-theme="dark"] body .qa-acc-hero *, :root[data-theme="dark"] body .qa-profhero *, :root[data-theme="dark"] body .qa-bcard.hero *, :root[data-theme="dark"] body .qa-xcard:not(.urgent) *, :root[data-theme="dark"] body .call-shell * { color: inherit; }
:root[data-theme="dark"] body .qa-hero, :root[data-theme="dark"] body .qa-acc-hero, :root[data-theme="dark"] body .qa-profhero, :root[data-theme="dark"] body .qa-bcard.hero, :root[data-theme="dark"] body .qa-xcard:not(.urgent) { color: #fff; }
:root[data-theme="dark"] body .btn-signal, :root[data-theme="dark"] body .qa-tab.active .qa-pill, :root[data-theme="dark"] body .btn-signal * { color: #0A0F26 !important; }
:root[data-theme="dark"] body .qa-bcard.hero .qa-bcard-label, :root[data-theme="dark"] body .qa-credit b, :root[data-theme="dark"] body .qa-herobtn svg.on { color: var(--qa-yellow); }
:root[data-theme="dark"] body img { filter: none; }
}
@media (max-width: 820px), (display-mode: standalone) {
:root body .qa-sechead a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin-top: -8px; }
:root body .auth-forgot a, :root body .auth-footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
:root body .auth-footer a { border-bottom: 0; box-shadow: inset 0 -2px 0 var(--qa-yellow); }
:root body .terms-continue { line-height: 2.4; }
:root body .terms-continue a { padding: 8px 0; }
:root body .qa-del a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ============ install prompt = bottom sheet ============ */
@media (max-width: 820px), (display-mode: standalone) {
.pwa-banner { display: none !important; }
:root body .qa-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s ease; z-index: 300; }
:root body .qa-sheet-backdrop.show { opacity: 1; }
:root body .qa-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 310; background: var(--qa-card); color: var(--qa-ink); border-radius: 28px 28px 0 0; padding: 12px 20px calc(20px + var(--qa-sab)); text-align: center; transform: translateY(105%); transition: transform .3s ease; box-shadow: 0 -10px 40px rgba(0,0,0,.25); display: grid; gap: 10px; justify-items: center; }
:root body .qa-sheet.show { transform: none; }
:root body .qa-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--qa-line); }
:root body .qa-sheet-icon { width: 64px; height: 64px; border-radius: 16px; margin-top: 6px; }
:root body .qa-sheet h2 { font-size: 19px; margin: 4px 0 0; }
:root body .qa-sheet p { color: var(--qa-muted); margin: 0 0 6px; font-size: 14.5px; max-width: 32ch; }
:root body .qa-sheet .btn { width: 100%; max-width: 420px; }
}

/* Signed-out pages keep the site's fixed top bar and the site's own header height (58px) so content starts below it.
   Signed-in pages hide that bar and use the app bar instead, so they reserve nothing. */
@media (max-width: 820px), (display-mode: standalone) {
  :root body.qa-in { --header-height: 0px; }
  :root body.has-fixed-header:not(.qa-in), :root body.has-app-nav:not(.qa-in) { padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px)); }
  :root body.impersonating.has-fixed-header:not(.qa-in) { padding-top: calc(var(--header-height) + 36px + env(safe-area-inset-top, 0px)); }
}

/* ---- Booking and form polish (phone / installed app) ---- */
@media (max-width: 820px), (display-mode: standalone) {
  /* Video / Audio tabs: compact and centred, not tall boxes with text in the corner */
  :root body .radio-row { gap: 10px; }
  :root body .radio-row .radio-card { min-height: 48px; padding: 0 14px; justify-content: center; text-align: center; flex-wrap: nowrap; font-size: 14px; line-height: 1.2; border-radius: 14px; }

  /* Any label that holds a checkbox: box and words on one line, box centred on the text */
  :root body .radio-card:has(input[type="checkbox"]), :root body label:has(> input[type="checkbox"]:not(.qa-cal-native)) {
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 12px; text-align: left;
    font-size: 14px; font-weight: 600; line-height: 1.35; min-height: 0;
  }
  :root body .radio-card:has(input[type="checkbox"]) { min-height: 54px; padding: 10px 14px; }
  :root body .radio-card input[type="checkbox"], :root body label > input[type="checkbox"] {
    flex: 0 0 auto; width: 22px; height: 22px; min-width: 22px; min-height: 0; margin: 0 !important; padding: 0; accent-color: var(--qa-hero);
  }
  :root body .radio-card:has(input[type="checkbox"]) .small, :root body label:has(> input[type="checkbox"]) .small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; line-height: 1.4; }

  /* "Certified secure" and the explanation panel under the form get room to breathe */
  :root body .secure-badge { margin: 16px 0 6px; padding-bottom: 4px; }
  :root body:has(#bookingForm) .hero-panel { margin-top: 24px; margin-bottom: 8px; }

  /* Month calendar for the booking date */
  :root body .qa-cal-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
  :root body .qa-cal { background: var(--qa-card); border: 1px solid var(--qa-line); border-radius: 18px; padding: 12px 10px 10px; margin-top: 2px; }
  :root body .qa-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 8px; }
  :root body .qa-cal-title { font-size: 15px; font-weight: 700; color: var(--qa-ink); text-transform: capitalize; }
  :root body .qa-cal-nav { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--qa-soft, #F2F4F8); display: grid; place-items: center; cursor: pointer; padding: 0; }
  :root body .qa-cal-nav svg { width: 22px; height: 22px; fill: var(--qa-ink); }
  :root body .qa-cal-nav:disabled { opacity: .35; cursor: default; }
  :root body .qa-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 2px; text-align: center; }
  :root body .qa-cal-dow { font-size: 11.5px; font-weight: 600; color: var(--qa-muted); padding: 4px 0 6px; text-transform: uppercase; letter-spacing: .02em; }
  :root body .qa-cal-day { height: 42px; border: 0; border-radius: 50%; background: transparent; color: var(--qa-ink); font-size: 14.5px; font-weight: 600; cursor: pointer; padding: 0; margin: 0 auto; width: 42px; max-width: 100%; }
  :root body .qa-cal-day.today { box-shadow: inset 0 0 0 1.5px var(--qa-yellow); }
  :root body .qa-cal-day.selected { background: var(--qa-hero); color: #fff; box-shadow: none; }
  :root body .qa-cal-day:disabled { color: var(--qa-muted); opacity: .4; cursor: default; }
  :root body .qa-cal-day:not(:disabled):not(.selected):active { background: var(--qa-soft, #F2F4F8); }
}

@media (max-width: 820px), (display-mode: standalone) {
  /* days the expert cannot be booked: greyed, crossed out, not tappable */
  :root body .qa-cal-day.unavail { color: #B42318; background: rgba(180,35,24,.07); opacity: .55; text-decoration: line-through; cursor: not-allowed; }
  :root body .qa-cal-legend { display: flex; gap: 16px; justify-content: center; padding: 10px 0 2px; font-size: 12px; color: var(--qa-muted); }
  :root body .qa-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
  :root body .qa-cal-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
  :root body .qa-cal-legend .lg-free { background: var(--qa-hero); }
  :root body .qa-cal-legend .lg-off { background: rgba(180,35,24,.25); }
}

/* Search boxes draw their own magnifier: switch off any built-in one the browser adds (it showed as a second icon). */
:root body .qa-search input, :root body .directory-search-bar input, :root body .search-bar input {
  -webkit-appearance: none; appearance: none;
}
:root body input::-webkit-search-decoration, :root body input::-webkit-search-cancel-button,
:root body input::-webkit-search-results-button, :root body input::-webkit-search-results-decoration { display: none; -webkit-appearance: none; }

@media (max-width: 820px), (display-mode: standalone) {
  /* The calendar already shows which days are open, so the "Available days: ..." sentence is not needed under it. */
  :root body .qa-dow-hint { display: none; }
  /* Days the expert cannot be booked: red, dormant, not tappable */
  :root body .qa-cal-day.unavail { color: #D92D20; background: rgba(217,45,32,.12); opacity: 1; text-decoration: none; font-weight: 700; cursor: not-allowed; pointer-events: none; }
  :root body .qa-cal-legend .lg-off { background: #D92D20; }
  :root[data-theme="dark"] body .qa-cal-day.unavail { color: #FF8A80; background: rgba(255,138,128,.16); }
}

/* Booking wording: the app's labels on phones, the website's own labels on desktop */
.qa-app { display: none; }
@media (max-width: 820px), (display-mode: standalone) {
  :root body .qa-desk { display: none; }
  :root body .qa-app { display: inline; }
  /* Video / Audio cards like the app: name on top, price for the chosen length underneath */
  :root body .radio-row .radio-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 62px; padding: 10px 14px; text-align: left; }
  :root body .radio-row .radio-card .qa-price { font-size: 12.5px; font-weight: 400; line-height: 1.3; color: var(--qa-muted); }
  /* Duration chips; the number box and its hint step aside */
  :root body .qa-has-chips #duration, :root body .qa-has-chips .hint { display: none; }
  :root body .qa-dur { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
  :root body .qa-dur::-webkit-scrollbar { display: none; }
  :root body .qa-dur-chip { flex: 0 0 auto; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--qa-field, var(--qa-line)); background: var(--qa-card); color: var(--qa-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
  :root body .qa-dur-chip.on { background: var(--qa-hero); border-color: var(--qa-hero); color: #fff; }
}

@media (max-width: 820px), (display-mode: standalone) {
  /* Summary rows the page hides until needed (promo, recording) must stay hidden */
  :root body .summary-line[hidden], :root body .summary-total[hidden] { display: none !important; }
}

/* ============ Session details, reschedule (phone / installed app) ============ */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .sd { display: grid; gap: 14px; }
  :root body .sd .qa-bcard { margin: 0; }
  :root body .sd h3 { font-size: 16.5px; font-weight: 700; margin: 0; }
  :root body .sd .qa-bcard-top .qa-avatar { width: 52px; height: 52px; }
  :root body .sd-amt { color: var(--qa-accent); font-weight: 800; }
  :root body .sd-note small, :root body .sd-help { display: block; color: var(--qa-muted); font-size: 13px; margin: 0; }
  :root body .sd-note p { margin: 2px 0 0; }
  :root body .sd-actions { display: grid; gap: 10px; }
  :root body .sd-row { display: flex; gap: 10px; }
  :root body .sd-row > *, :root body .sd-row form { flex: 1 1 0; min-width: 0; }
  :root body .sd-row .btn, :root body .sd-row form .btn { width: 100%; }
  :root body .sd-row:empty { display: none; }
  :root body .sd-card { gap: 8px; }
  :root body .sd-pay { display: flex; justify-content: space-between; gap: 12px; color: var(--qa-muted); }
  :root body .sd-pay b { color: var(--qa-accent); font-weight: 600; }
  :root body .sd-pay.strong { color: var(--qa-ink); font-weight: 700; }
  :root body .sd-pay.strong b { font-weight: 800; }
  :root body .sd-line { border: 0; border-top: 1px solid var(--qa-line); margin: 2px 0; width: 100%; }
  :root body .sd-nrow { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; background: var(--qa-bg); padding: 12px; }
  :root body .sd-nrow.mine { background: var(--qa-amber-bg); }
  :root body .sd-nrow form { margin: 0; }
  :root body .sd-nrow small { color: var(--qa-muted); font-size: 12.5px; }
  :root body .sd-nrow p { margin: 0; }
  :root body .sd-nrow p.done { color: var(--qa-muted); }
  :root body .sd-tick { border: 0; background: none; padding: 0; width: 24px; height: 24px; color: var(--qa-muted); cursor: pointer; display: block; }
  :root body .sd-tick.on { color: var(--qa-accent); }
  :root body .sd-tick svg { width: 24px; height: 24px; fill: currentColor; }
  :root body .sd-noteform { margin-top: 4px; }
  :root body .sd-noteform .field { margin-bottom: 8px; }
  :root body .sd-noterow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  :root body .sd-noterow .btn { min-height: 44px; }
  :root body .sd-chk { margin: 0; display: flex; align-items: center; gap: 8px; }
  :root body .sd-report { text-align: center; margin: 4px 0 16px; }
  :root body .sd-report a { color: var(--qa-accent); font-weight: 600; display: inline-block; padding: 12px; }
  :root body .sd-modal { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 20px; }
  :root body .sd-modal[hidden] { display: none; }
  :root body .sd-box { width: 100%; max-width: 420px; background: var(--qa-card); border-radius: 24px; padding: 22px 20px 16px; max-height: 90vh; overflow: auto; color: var(--qa-ink); }
  :root body .sd-box h3 { font-size: 20px; margin: 0 0 10px; }
  :root body .sd-box > p { color: var(--qa-muted); margin: 0 0 12px; }
  :root body .sd-modal-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
  :root body .sd-modal-btns .btn { flex: 1; }
  :root[data-theme="dark"] body .sd-nrow.mine { background: var(--qa-amber-bg); }
}
@media (max-width: 820px), (display-mode: standalone) {
  :root body .sd-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
  :root body .sd-days::-webkit-scrollbar { display: none; }
  :root body .sd-day { flex: 0 0 56px; border: 1px solid var(--qa-line); background: var(--qa-card); color: var(--qa-ink); border-radius: 14px; padding: 9px 0; display: flex; flex-direction: column; align-items: center; cursor: pointer; font-family: inherit; }
  :root body .sd-day small { font-size: 11px; color: var(--qa-muted); }
  :root body .sd-day b { font-size: 18px; font-weight: 800; }
  :root body .sd-day.on { background: var(--qa-hero); border-color: var(--qa-hero); color: #fff; }
  :root body .sd-day.on small { color: var(--qa-hero-muted); }
  :root body .sd-times { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; min-height: 48px; }
  :root body .sd-time { border: 1px solid var(--qa-line); background: var(--qa-card); color: var(--qa-ink); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
  :root body .sd-time.on { background: var(--qa-hero); border-color: var(--qa-hero); color: #fff; }
  :root body .sd-rs-btns .btn:first-child { flex: 1; } :root body .sd-rs-btns .btn:last-child { flex: 1.7; }
}
@media (max-width: 820px), (display-mode: standalone) {
  :root body .sd { grid-template-columns: minmax(0, 1fr); }
  :root body .sd > * { min-width: 0; }
  :root body .sd-rs-btns { margin-top: 0; }
}

/* ---- Bookings list = the app's booking cards ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .qa-bookings .qa-xtra { display: none !important; }
  :root body .qa-bookings .qa-open { position: absolute; inset: 0; z-index: 1; border-radius: 20px; }
  :root body .qa-bookings td[data-col="actions"] { position: relative; z-index: 2; }
  :root body .qa-bookings td[data-col="actions"] > .qa-rate { order: 1; background: var(--qa-hero); color: #fff; border-color: var(--qa-hero); flex: 2 1 55%; }
  :root body .qa-bookings td[data-col="actions"]:empty { display: none !important; }
  :root body .qa-bookings td[data-col="name"] .qa-who small { display: block; }
  /* status pills as in the app: Confirmed navy/yellow, Completed soft, Cancelled red, Awaiting payment amber */
  :root body .badge.qa-st-completed { background: var(--qa-soft); color: var(--qa-accent); }
  :root body .qa-pillstatus.st-completed { background: var(--qa-soft); color: var(--qa-accent); }
  :root body .qa-pillstatus.st-cancelled { background: var(--qa-red-bg); color: var(--qa-red-fg); }
  :root body .qa-pillstatus.st-pending_payment { background: var(--qa-amber-bg); color: var(--qa-amber-fg); }
  :root body .qa-pillstatus.st-confirmed { background: var(--qa-hero); color: var(--qa-yellow); }
  /* empty box (title, hint, button) */
  :root body .qa-tab-empty { text-align: center; padding: 40px 32px; color: var(--qa-muted); }
  :root body .qa-tab-empty b { display: block; font-size: 16.5px; color: var(--qa-ink); font-weight: 700; }
  :root body .qa-tab-empty p { margin: 6px 0 0; font-size: 14.5px; color: var(--qa-muted); }
  :root body .qa-tab-empty .btn { margin-top: 18px; width: 220px; max-width: 100%; }
  :root body .qa-tab-empty .btn[hidden] { display: none; }
}
:root body table.responsive-table td[data-col="name"] .qa-who small { font-weight: 400; }

/* ---- Expert profile like the app ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .qa-online.off { background: #2A3156; color: #B8BED6; }
  :root body .qa-herobtn svg.on { fill: var(--qa-red); }
  :root body .job-content, :root body .job-content p, :root body .job-content li { color: var(--qa-ink); }
  :root body .qa-facts b { font-weight: 500; }
  :root body .qa-facts { padding: 14px 16px; }
  :root body .qa-facts > div { padding: 3px 0; }
  :root body .tag-item { border-color: transparent; color: var(--qa-accent); }
  :root body .profile-book-panel > p.small.muted.mt-0 { grid-row: 1; }
  :root body .profile-book-panel h2 { grid-row: 2; font-weight: 800; color: var(--qa-accent); }
  :root body .profile-book-panel h2 .qa-app { font-weight: 800; }
  :root body .review-item > p { color: var(--qa-ink); }
}

/* ---- Home like the app ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .qa-home > .qa-tiles + .qa-sec, :root body .qa-home > .qa-tiles + .qa-empty { margin-top: 22px; }
  :root body .qa-home > .qa-bcard.hero { margin-top: 0; }
  :root body .qa-home .qa-sec { margin-top: 22px; }
  :root body .qa-home .qa-sechead .qa-sec { margin-top: 0; }
  :root body .qa-home > .qa-sec:first-child { margin-top: 18px; }
  :root body .qa-bcard.hero .qa-who small { color: var(--qa-hero-muted); white-space: normal; }
  :root body .qa-bcard.hero .qa-who small + small { font-size: 13px; }
  :root body .qa-bcard.hero .qa-who b { font-size: 18px; }
  :root body .qa-bcard.hero .qa-bcard-top { margin: 2px 0 4px; }
  :root body .qa-bcard .qa-info { text-decoration: none; color: var(--qa-ink); }
  :root body .qa-acts { display: flex; gap: 10px; }
  :root body .qa-acts > a.btn, :root body .qa-acts > form { flex: 1 1 0; min-width: 0; }
  :root body .qa-acts > form:last-child:not(:first-child) { flex: 0 0 auto; }
  :root body .qa-acts form .btn { width: 100%; }
  :root body .qa-acts > a.btn { padding: 0 8px; }
  :root body .qa-fx { flex: 0 0 172px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; background: var(--qa-card); border: 1px solid var(--qa-line); border-radius: 18px; padding: 16px 12px; text-decoration: none; color: var(--qa-ink); text-align: center; min-width: 0; }
  :root body .qa-fx-ph { position: relative; width: 84px; height: 84px; display: block; }
  :root body .qa-fx-ph .qa-avatar { width: 84px; height: 84px; font-size: 30px; }
  :root body .qa-dot { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--qa-green); border: 3px solid var(--qa-card); box-sizing: border-box; }
  :root body .qa-fx-name { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 12px; max-width: 100%; }
  :root body .qa-fx-name b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root body .qa-fx small { color: var(--qa-muted); font-size: 13px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root body .qa-fx-rate { display: flex; align-items: center; gap: 3px; margin-top: 8px; font-size: 13px; }
  :root body .qa-fx-rate svg { width: 16px; height: 16px; fill: var(--qa-yellow); }
  :root body .qa-fx-rate b { font-weight: 700; } :root body .qa-fx-rate i { font-style: normal; color: var(--qa-muted); }
  :root body .qa-fx-price { margin-top: 6px; font-weight: 700; font-size: 13px; color: var(--qa-accent); white-space: nowrap; }
  :root body .qa-seal.sm { width: 15px; height: 15px; flex: none; }
  :root body .qa-seal.sm .s { fill: var(--qa-accent); } :root body .qa-seal.sm .t { fill: var(--qa-card); }
  :root[data-theme="dark"] body .qa-seal.sm .s { fill: var(--qa-yellow); } :root[data-theme="dark"] body .qa-seal.sm .t { fill: #0B1020; }
  :root body .qa-avatar.xl { width: 84px; height: 84px; }
}
@media (max-width: 820px), (display-mode: standalone) { :root body .qa-bcard .qa-who small { display: block; } }

/* ---- Payments and receipts ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .sd-pay-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--qa-ink); cursor: pointer; margin: 0 0 10px; padding: 14px; }
  :root body .sd .sd-pay-row { margin: 0; }
  :root body .sd-pr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  :root body .sd-pr-main b { font-size: 14px; font-weight: 700; }
  :root body .sd-pr-main small { color: var(--qa-muted); font-size: 13px; margin-top: 2px; }
  :root body .sd-pr-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  :root body .sd-pr-side b { font-size: 14px; font-weight: 800; color: var(--qa-accent); }
  :root body .sd-pr-side .qa-pillstatus { padding: 3px 10px; font-size: 12px; }
  :root body .sd-rc-t { display: block; font-weight: 700; margin-bottom: 4px; }
  :root body .sd-rc-when { margin: 6px 0 0; }
  :root body #sdRcBody { display: grid; gap: 6px; margin-bottom: 8px; }
}

/* ---- Language screen and Appearance dialog ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .sd-lang { display: flex; flex-direction: row; align-items: center; justify-content: space-between; text-decoration: none; color: var(--qa-ink); padding: 16px; }
  :root body .sd-lang b { font-weight: 600; font-size: 15px; }
  :root body .sd-lang i, :root body .sd-radio i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--qa-muted); box-sizing: border-box; flex: none; }
  :root body .sd-lang.on i, :root body .sd-radio.on i { border-color: var(--qa-accent); box-shadow: inset 0 0 0 3px var(--qa-card), inset 0 0 0 10px var(--qa-accent); }
  :root body .sd-radio { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 12px 0; font: inherit; color: var(--qa-ink); cursor: pointer; text-align: left; min-height: 0; }
  :root body .sd-box .sd-radio.qa-opt { border: 0; background: none; }
}

/* desktop: wrapper for desktop-only blocks must not change layout; phone: hidden */
.qa-deskw { display: contents; }
/* ---- Credit and invites ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .qa-deskw { display: none; }
  :root body .sd-hero { background: var(--qa-hero); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; }
  :root body .sd-hero small { color: var(--qa-hero-muted); font-size: 13px; }
  :root body .sd-hero b { color: var(--qa-yellow); font-size: 28px; font-weight: 800; line-height: 1.3; }
  :root body .sd-hero small:last-child { margin-top: 4px; }
  :root body .sd > .qa-sec { margin: 8px 0 0; }
  :root body .sd-pack { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 16px; }
  :root body .sd-pack-i { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
  :root body .sd-pack-i small { color: var(--qa-muted); font-size: 13px; }
  :root body .sd-pack-i b { font-size: 19px; font-weight: 800; color: var(--qa-accent); }
  :root body .sd-pack-i .qa-pillstatus { margin-top: 6px; }
  :root body .sd-pack .btn { flex: none; width: auto; }
  :root body .sd-invite { padding: 18px; gap: 10px; }
  :root body .sd-help { color: var(--qa-muted); font-size: 14px; margin: 0; }
  :root body .sd-code { display: flex; align-items: center; background: var(--qa-bg); border-radius: 12px; padding: 12px 14px; }
  :root[data-theme="dark"] body .sd-code { background: var(--qa-soft); }
  :root body .sd-code b { flex: 1; font-weight: 800; color: var(--qa-accent); letter-spacing: 1.5px; }
  :root body .sd-code button { border: 0; background: none; color: var(--qa-accent); font-weight: 700; font-size: 15px; padding: 6px; cursor: pointer; font-family: inherit; }
}
@media (max-width: 820px), (display-mode: standalone) {
  :root body .sd-pack-i .qa-pillstatus { white-space: nowrap; }
  :root body .sd-pack .btn { white-space: nowrap; padding: 0 14px; }
}

/* ---- Notifications inbox like the app ---- */
.notif-hclear { display: none; }
@media (max-width: 820px), (display-mode: standalone) {
  :root body .notif-hclear { display: inline-flex; border: 0; background: none; color: var(--qa-ink); font: 600 14px var(--font-body); padding: 8px; cursor: pointer; min-height: 40px; align-items: center; }
  :root body .notif-actions, :root body .notif-actions[hidden] { display: none; }
  :root body .notif-item.unread { border-color: var(--qa-line); }
  :root body .notif-item:not(.unread)::before { background-color: var(--qa-bg); }
  :root body .notif-item { padding: 14px 14px 14px 66px; }
  :root body .notif-empty b { display: block; font-size: 16.5px; color: var(--qa-ink); }
  :root body .notif-empty span { display: block; margin-top: 6px; font-size: 14.5px; padding: 0 32px; }
  :root body .notif-list { gap: 10px; padding: 16px; }
}

/* ---- Experts list like the app ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .qa-expert { position: relative; }
  :root body .qa-heart { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; display: block; cursor: pointer; color: var(--qa-muted); }
  :root body .qa-heart svg { width: 26px; height: 26px; fill: currentColor; display: block; }
  :root body .qa-heart .f { display: none; }
  :root body .qa-heart.on { color: var(--qa-red); }
  :root body .qa-heart.on .f { display: block; } :root body .qa-heart.on .o { display: none; }
  :root body .qa-expert .qa-app { display: inline-flex; align-items: center; gap: 3px; }
  :root body .qa-expert .consultant-meta .qa-app b { color: var(--qa-ink); font-weight: 700; }
  :root body .qa-expert .consultant-meta .qa-app i { font-style: normal; color: var(--qa-muted); font-weight: 400; }
  :root body .qa-star { width: 16px; height: 16px; fill: var(--qa-yellow); }
  :root body .qa-expert .consultant-rate .small.muted .qa-app { display: inline; }
  :root body #resultsContainer .qa-expert .consultant-body { padding-right: 34px; }
  :root body .directory-search-bar #searchInput { background-color: var(--qa-bg); border-color: var(--qa-line); }
  :root[data-theme="dark"] body .directory-search-bar #searchInput { background-color: var(--qa-bg); }
}
@media (max-width: 820px), (display-mode: standalone) {
  :root body .qa-expert .consultant-meta .qa-app { display: inline-flex !important; }
  :root body #resultsContainer .qa-expert .consultant-body { padding-right: 0; }
  :root body #resultsContainer .qa-expert .consultant-name { padding-right: 30px; }
  :root body .qa-expert .consultant-rate { flex-wrap: nowrap; }
  :root body .qa-expert .consultant-rate .muted { white-space: nowrap; }
}
@media (max-width: 820px), (display-mode: standalone) {
  :root body .qa-hide { display: none !important; }
}

/* ---- Therapy and support + shared filter chips for the new phone pages ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .sd-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
  :root body .sd-chips::-webkit-scrollbar { display: none; }
  :root body .sd-chip { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--qa-field); background: var(--qa-card); color: var(--qa-ink); font: 600 14px/1 var(--font-body); text-decoration: none; white-space: nowrap; }
  :root body .sd-chip.on { background: var(--qa-hero); border-color: var(--qa-hero); color: #fff; }
  :root body .sd-h { font-size: 16.5px; font-weight: 700; margin: 6px 0 -4px; }
  :root body .sd-danger { display: flex; align-items: center; gap: 12px; background: var(--qa-hero); border-radius: 16px; padding: 14px; text-decoration: none; color: #fff; }
  :root body .sd-danger svg { width: 22px; height: 22px; fill: var(--qa-yellow); flex: none; }
  :root body .sd-danger span { flex: 1; display: flex; flex-direction: column; }
  :root body .sd-danger b { font-size: 14px; font-weight: 700; color: #fff; }
  :root body .sd-danger small { font-size: 13px; color: var(--qa-hero-muted); }
  :root body .sd-list { display: grid; gap: 12px; margin-top: 6px; }
}

/* ---- Trusted partners like the app ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .partner-card { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: center; padding: 16px; }
  :root body .partner-card > .partner-logo, :root body .partner-card > .partner-logo-fallback { grid-column: 1; grid-row: 1 / span 2; width: 54px; height: 54px; border-radius: 14px; }
  :root body .partner-card > .partner-logo-fallback { border-radius: 50%; font-size: 0; color: transparent; background: var(--qa-navy) !important; }
  :root body .partner-card > .partner-logo-fallback::after { content: attr(data-ini); font-size: 20px; font-weight: 800; color: var(--qa-yellow); }
  :root body .partner-card > .partner-name { grid-column: 2; grid-row: 1; align-self: end; font-size: 15.5px; font-weight: 700; background-image: none; width: auto; }
  :root body .partner-card > .partner-category-chip { grid-column: 2; grid-row: 2; align-self: start; margin-top: 4px; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; background: var(--qa-bg); color: var(--qa-accent); border-radius: 999px; padding: 4px 12px; }
  :root[data-theme="dark"] body .partner-card > .partner-category-chip { background: var(--qa-soft); }
  :root body .partner-card > .partner-desc, :root body .partner-card > .partner-contact, :root body .partner-card > .partner-actions { grid-column: 1 / -1; }
  :root body .partner-card > .partner-desc { margin-top: 12px; color: var(--qa-muted); font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  :root body .partner-card > .partner-desc p { color: var(--qa-muted); font-size: 14.5px; margin: 0; }
  :root body .partner-card > .partner-contact { margin-top: 4px; font-size: 14.5px; gap: 0; }
  :root body .partner-card > .partner-contact a, :root body .partner-card > .partner-contact span { color: var(--qa-ink); padding-top: 8px; }
  :root body .partner-card > .partner-actions { margin-top: 14px; padding-top: 0; }
  :root body .partner-card > .featured-badge { display: inline-block; position: static; grid-column: 2; grid-row: 2; justify-self: end; align-self: start; margin-top: 4px; background: var(--qa-yellow); color: #0A0F26; border-radius: 999px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; }
  :root body .partner-card .consultant-name-check { display: inline-block; vertical-align: middle; }
  :root body .partner-name .consultant-name-check svg { width: 16px; height: 16px; }
}
@media (max-width: 820px), (display-mode: standalone) {
  :root body .partner-card > .partner-category-chip { justify-self: start; }
  :root body .directory-search-bar #partnerSearchInput, :root body #careerSearchInput { padding-left: 44px; background-color: var(--qa-bg); border-color: var(--qa-line); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; background-size: 22px; }
}

/* ---- Jobs like the app ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .job-card { position: relative; padding: 16px; display: flex; flex-direction: column; gap: 0; }
  :root body .job-card .job-card-head { display: flex; align-items: center; gap: 12px; }
  :root body .job-card .job-card-head::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
  :root body .job-card .partner-logo, :root body .job-card .partner-logo-fallback { width: 48px; height: 48px; flex: none; border-radius: 12px; }
  :root body .job-card .job-title { font-size: 15.5px; font-weight: 700; line-height: 1.3; background-image: none; }
  :root body .job-card .job-card-head p { font-size: 14px; color: var(--qa-muted); margin: 0; }
  :root body .job-card .job-meta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; align-items: center; }
  :root body .job-card .partner-category-chip, :root body .job-card .job-loc { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; background: var(--qa-bg); color: var(--qa-accent); border-radius: 999px; padding: 4px 12px; }
  :root body .job-card .job-loc { color: var(--qa-muted); }
  :root[data-theme="dark"] body .job-card .partner-category-chip, :root[data-theme="dark"] body .job-card .job-loc { background: var(--qa-soft); }
  :root body .job-card .job-sum { margin-top: 10px; color: var(--qa-muted); font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  :root body .job-card .job-deadline { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--qa-accent); }
  :root body .job-card:not(.job-card-closed) .partner-actions { display: none; }
  :root body .job-card-closed .job-title { color: var(--qa-muted); }
  :root body #careerSearchForm { max-width: none !important; margin: 0 -16px 14px !important; padding: 12px 16px; background: var(--qa-card); border-bottom: 1px solid var(--qa-line); }
  :root body #careerResultsContainer .grid { gap: 12px; }
}

/* ---- Job details like the app ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .sd-jobhead { display: flex; align-items: center; gap: 14px; }
  :root body .sd-jobhead .qa-avatar { width: 56px; height: 56px; font-size: 20px; border-radius: 50%; }
  :root body .sd-jobhead h2 { font-size: 19px; margin: 0; line-height: 1.3; }
  :root body .sd-jobhead small { color: var(--qa-muted); font-size: 14.5px; }
  :root body .sd-pills { display: flex; flex-wrap: wrap; gap: 6px; }
  :root body .sd-pill { background: var(--qa-card); color: var(--qa-accent); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
  :root body .sd-pill.mute { color: var(--qa-muted); }
  :root body .sd-deadline { margin: 0; color: var(--qa-accent); font-weight: 600; font-size: 14.5px; }
  :root body .sd-sec { gap: 6px; }
  :root body .sd-sec h3 { font-size: 16.5px; margin: 0; }
  :root body .sd-body p { margin: 0 0 3px; font-size: 14.5px; color: var(--qa-ink); }
  :root body .sd-body .sd-sub b { font-weight: 700; display: block; margin-top: 4px; }
  :root body .sd-gap { height: 5px; }
  :root body .sd-ul { margin: 0 0 3px; padding-left: 4px; list-style: none; }
  :root body .sd-ul li { position: relative; padding-left: 16px; margin-bottom: 3px; font-size: 14.5px; color: var(--qa-ink); }
  :root body .sd-ul li::before { content: "\2022"; position: absolute; left: 0; color: var(--qa-muted); }
  :root body .sd-addr { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; }
  :root body .sd-addr svg { width: 16px; height: 16px; fill: var(--qa-muted); flex: none; }
  :root body .sd-applybar { position: fixed; left: 0; right: 0; bottom: calc(var(--qa-nav-h) + var(--qa-sab)); z-index: 65; background: var(--qa-card); padding: 12px 16px; border-top: 1px solid var(--qa-line); }
  :root body.qa-in:has(.sd-applybar) { padding-bottom: calc(var(--qa-nav-h) + var(--qa-sab) + 84px); }
}
@media (max-width: 820px), (display-mode: standalone) { :root body .sd.sd-job { padding: 16px 16px 8px; } :root body .sd-jobhead h2 { font-size: 17.5px; } }

/* ---- Urgent help like the app ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .sd-urgent { margin: 0 -0px; }
  :root body .sd-uhero { background: var(--qa-navy); border-radius: 0 0 28px 28px; padding: 24px 24px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; color: #fff; }
  :root body .sd-uicon { width: 52px; height: 52px; border-radius: 50%; background: var(--qa-yellow); display: grid; place-items: center; margin-bottom: 14px; }
  :root body .sd-uicon svg { width: 28px; height: 28px; fill: #0A0F26; }
  :root body .sd-uhero h1 { color: #fff; font-size: 21px; font-weight: 800; line-height: 1.3; margin: 0; }
  :root body .sd-uhero p { color: #C9CEE3; margin: 10px 0 0; font-size: 14.5px; }
  :root body .sd-ubody { padding: 16px; display: grid; gap: 12px; text-align: center; }
  :root body .sd-ubody h2 { font-size: 16.5px; font-weight: 700; margin: 6px 0 0; }
  :root body .sd-nums { display: flex; flex-wrap: wrap; gap: 14px 10px; padding: 14px; }
  :root body .sd-nums > div { flex: 1 1 calc(33% - 10px); min-width: 90px; display: flex; flex-direction: column; align-items: center; }
  :root body .sd-nums a { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--qa-hero); border-radius: 14px; padding: 14px 0; text-decoration: none; }
  :root body .sd-nums svg { width: 16px; height: 16px; fill: var(--qa-yellow); }
  :root body .sd-nums b { color: #fff; font-size: 18px; font-weight: 800; }
  :root body .sd-nums small { color: var(--qa-muted); font-size: 13px; margin-top: 6px; line-height: 1.3; }
  :root body .sd-ufoot { color: var(--qa-muted); font-size: 13px; margin: 0; }
  :root body .sd-uafter { padding: 18px; gap: 12px; margin-top: 6px; }
  :root body .sd-uafter p { margin: 0; }
}

/* ---- Edit profile like the app ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body p.qa-app, :root body div.qa-app { display: block; }
  :root body .sd-photocard { align-items: center; padding: 20px 16px; gap: 0; display: flex; flex-direction: column; }
  :root body .sd-ph { position: relative; display: block; width: 96px; height: 96px; margin: 0; cursor: pointer; }
  :root body .sd-ph .qa-avatar { width: 96px; height: 96px; font-size: 34px; }
  :root body .sd-ph i { position: absolute; right: 0; bottom: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--qa-yellow); display: grid; place-items: center; }
  :root body .sd-ph i svg { width: 17px; height: 17px; fill: #0A0F26; }
  :root body .sd-phlink { margin: 10px 0 0; color: var(--qa-accent); font-weight: 600; font-size: 14px; padding: 4px; cursor: pointer; }
  :root body .sd-photocard small { color: var(--qa-muted); font-size: 13px; }
  :root body .sd.sd-photo { margin-bottom: 14px; }
  :root body .hero-grid > .admin-panel { margin-bottom: 14px; padding: 18px; }
  :root body .hero-grid > .admin-panel > h3 { margin: 0 0 12px; }
  :root body .hero-grid > .admin-panel > h3:has(+ .sd-sub2) { margin-bottom: 2px; }
  :root body .sd-sub2 { color: var(--qa-muted); font-size: 13px; margin: 0 0 12px; }
  :root body .btn-pw { background: var(--qa-yellow); border-color: var(--qa-yellow); color: #0A0F26; }
  :root[data-theme="dark"] body .btn-pw { background: var(--qa-yellow); border-color: var(--qa-yellow); color: #0A0F26; }
  :root body .sd-linkbtn { color: var(--qa-accent); font-weight: 600; }
  :root body .hero-grid form > .btn-ghost.btn-sm:has(.sd-linkbtn) { border: 0; background: none; min-height: 0; padding: 4px; justify-content: flex-start; }
  :root body .sd-twostep { display: flex; flex-direction: row; align-items: center; justify-content: space-between; text-decoration: none; color: var(--qa-ink); padding: 18px; margin: 14px 0; }
  :root body .sd-twostep span { display: flex; flex-direction: column; }
  :root body .sd-twostep b { font-size: 16.5px; }
  :root body .sd-twostep small { color: var(--qa-muted); font-size: 13px; }
  :root body .sd-twostep i { font-style: normal; color: var(--qa-accent); font-weight: 700; }
}

/* ---- Security like the app ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .sd-sec2 { padding: 18px; gap: 12px; }
  :root body .sd-sec2 h3 { margin: 0; font-size: 16.5px; }
  :root body .sd-sec2 .sd-help { margin: 2px 0 0; font-size: 13px; }
  :root body .sd-sec2 .sd-steps { font-size: 14.5px; margin: 0; }
  :root body .qa-pillstatus.st-off { background: var(--qa-bg); color: var(--qa-muted); }
  :root body .sd-key { background: var(--qa-bg); border-radius: 12px; padding: 14px; font-weight: 800; color: var(--qa-accent); font-size: 15px; letter-spacing: 1px; word-spacing: 2px; }
  :root[data-theme="dark"] body .sd-key { background: var(--qa-soft); }
  :root body .sd-secform .field { margin-bottom: 12px; }
}
@media (max-width: 820px), (display-mode: standalone) { :root body .sd-sec2 .qa-pillstatus { justify-self: start; } }

/* ---- Terms and Privacy like the app (white page, small "last updated", accent headings) ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body:has(.legal-page) { background: var(--qa-card); }
  :root body .legal-page > h1, :root body .legal-page > .eyebrow { display: none; }
  :root body .legal-page > p.muted { font-size: 13px; margin: 0 0 6px; }
  :root body .legal-page p, :root body .legal-page li { font-size: 14px; line-height: 1.5; color: var(--qa-ink); margin: 8px 0 0; }
  :root body .legal-page > p.muted { color: var(--qa-muted); margin-top: 0; }
  :root body .legal-page h2, :root body .legal-page h3 { font-size: 16.5px; font-weight: 700; color: var(--qa-accent); margin: 22px 0 6px; }
  :root body .legal-page a { color: var(--qa-accent); text-decoration: underline; }
}

/* ---- Rate a session (the app's dialog as a page) ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .sd-rate .qa-bcard { padding: 20px; gap: 14px; }
  :root body .sd-rate h3 { font-size: 19px; margin: 0; }
  :root body .sd-stars { display: flex; gap: 6px; margin: 14px 0; }
  :root body .sd-stars button { border: 0; background: none; padding: 0; width: 40px; height: 40px; color: var(--qa-line); cursor: pointer; min-height: 0; }
  :root body .sd-stars button.on { color: var(--qa-yellow); }
  :root body .sd-stars svg { width: 40px; height: 40px; fill: currentColor; }
  :root body .sd-row2 { display: flex; gap: 10px; }
  :root body .sd-row2 > * { flex: 1; }
}
@media (max-width: 820px), (display-mode: standalone) { :root body .qa-bookings td[data-col="actions"] > .qa-rate { order: 1 !important; } }

/* ---- Expert side like the app ---- */
.qa-onlinecard { display: none; }
@media (max-width: 820px), (display-mode: standalone) {
  :root body .qa-onlinecard { display: flex; align-items: center; gap: 12px; margin-top: 16px; background: var(--qa-navy-soft); border-radius: 16px; padding: 14px; }
  :root body .qa-onlinecard > div { flex: 1; display: flex; flex-direction: column; }
  :root body .qa-onlinecard b { color: #fff; font-size: 14.5px; }
  :root body .qa-onlinecard small { color: var(--qa-hero-muted); font-size: 12px; }
  :root body .qa-switch { position: relative; width: 52px; height: 32px; flex: none; display: block; margin: 0; }
  :root body .qa-switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; min-height: 0; }
  :root body .qa-switch i { position: absolute; inset: 0; border-radius: 16px; background: #3A4170; transition: background .15s; }
  :root body .qa-switch i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .15s; }
  :root body .qa-switch input:checked + i { background: var(--qa-yellow); }
  :root body .qa-switch input:checked + i::after { transform: translateX(20px); background: #0A0F26; }
  :root body .sd-banner { background: var(--qa-amber-bg); gap: 4px; padding: 16px; margin-top: 4px; }
  :root body .sd-banner b { font-size: 15px; } :root body .sd-banner p { color: var(--qa-amber-fg); margin: 4px 0 10px; font-size: 14px; }
  :root body .sd-banner .btn { align-self: flex-start; }
  :root body .sd-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 10px; }
  :root body .sd-tile { background: var(--qa-card); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; min-width: 0; }
  :root body .sd-tile small { color: var(--qa-muted); font-size: 12px; }
  :root body .sd-tile b { color: var(--qa-accent); font-size: 16px; font-weight: 800; margin-top: 4px; white-space: nowrap; }
  :root body .sd-tile.hi { background: var(--qa-hero); } :root body .sd-tile.hi small { color: var(--qa-hero-muted); } :root body .sd-tile.hi b { color: var(--qa-yellow); }
  :root body .sd-tile.t3 { grid-column: span 1; }
  :root body .sd-tiles .sd-tile.t3:nth-last-child(1) { grid-column: 1 / -1; }
  :root body .sd-chart h3, :root body .sd .qa-bcard h3 { font-size: 16.5px; margin: 0; }
  :root body .sd-bars { display: flex; align-items: flex-end; justify-content: space-around; height: 170px; padding-top: 14px; }
  :root body .sd-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
  :root body .sd-bars i { display: block; width: 26px; background: var(--qa-yellow); border-radius: 5px 5px 0 0; }
  :root body .sd-bars small { font-size: 11px; color: var(--qa-muted); margin-top: 6px; } :root body .sd-bars small.v { font-size: 9px; margin: 0 0 2px; }
  :root body .sd-payout { display: flex; align-items: center; gap: 10px; }
  :root body .sd-payout span { flex: 1; display: flex; flex-direction: column; } :root body .sd-payout b { font-size: 14px; } :root body .sd-payout small { color: var(--qa-muted); font-size: 13px; }
  :root body .sd-payout strong { font-weight: 800; color: var(--qa-accent); }
  :root body .sd-prof { display: flex; flex-direction: row; align-items: center; gap: 14px; margin: 0 0 14px; padding: 16px; }
  :root body .sd-prof .qa-avatar { width: 56px; height: 56px; }
  :root body .sd-prof .qa-who b { white-space: normal; }
  :root body .sd-prof .qa-who i { font-style: normal; align-self: flex-start; margin-top: 6px; padding: 3px 10px; font-size: 12px; }
}
@media (max-width: 820px), (display-mode: standalone) {
  :root body .sd-tiles { grid-template-columns: repeat(6, 1fr); }
  :root body .sd-tile { grid-column: span 3; }
  :root body .sd-tile.t3, :root body .sd-tiles .sd-tile.t3:nth-last-child(1) { grid-column: span 2; }
}

/* ---- Edit expert profile + weekly hours like the app ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .sd-xform { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); padding-bottom: 80px; }
  :root body .sd-grp { padding: 16px; gap: 0; }
  :root body .sd-grp h3 { margin: 0 0 12px; font-size: 16.5px; }
  :root body .sd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  :root body .sd-seg { display: flex; gap: 8px; margin-bottom: 12px; }
  :root body .sd-seg label { margin: 0; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--qa-field); background: var(--qa-card); font: 600 14px/1 var(--font-body); cursor: pointer; }
  :root body .sd-seg label.on { background: var(--qa-hero); border-color: var(--qa-hero); color: #fff; }
  :root body .sd-seg input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; min-height: 0; }
  :root body .sd-sw { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 0; font-weight: 500; font-size: 15px; }
  :root body .sd-sw span { flex: 1; }
  :root body .sd-sw input { position: absolute; right: 0; opacity: 0; width: 52px; height: 32px; margin: 0; cursor: pointer; z-index: 2; min-height: 0; }
  :root body .sd-sw i { position: relative; width: 52px; height: 32px; border-radius: 16px; border: 2px solid var(--qa-line); box-sizing: border-box; flex: none; transition: background .15s; }
  :root body .sd-sw i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--qa-muted); transition: transform .15s; }
  :root body .sd-sw input:checked + i { background: var(--qa-yellow); border-color: var(--qa-yellow); }
  :root body .sd-sw input:checked + i::after { transform: translateX(20px); background: #0A0F26; }
  :root body .sd-day-top { display: flex; align-items: center; justify-content: space-between; }
  :root body .sd-day-top b { font-size: 15px; }
  :root body .sd-day-top .sd-sw { padding: 0; }
  :root body .sd-day-times { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  :root body .sd-day-times input { width: auto; flex: 1; min-height: 40px; padding: 6px 10px; font-size: 14px; font-weight: 600; background: var(--qa-bg); border-radius: 10px; }
  :root body .sd-day-times span { color: var(--qa-muted); }
  :root body .sd-hday .sd-off { display: none; margin-top: 6px; }
  :root body .sd-hday.off .sd-day-times { display: none; }
  :root body .sd-hday.off .sd-off { display: block; }
  :root body .sd-savebar { position: fixed; left: 0; right: 0; bottom: calc(var(--qa-nav-h) + var(--qa-sab)); background: var(--qa-card); padding: 12px 16px; border-top: 1px solid var(--qa-line); z-index: 65; }
}
@media (max-width: 820px), (display-mode: standalone) {
  :root body .sd-doc { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 14px; }
  :root body .sd-doc span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  :root body .sd-doc a { text-decoration: none; } :root body .sd-doc b { font-size: 14.5px; font-weight: 600; word-break: break-all; }
  :root body .sd-doc small { color: var(--qa-muted); font-size: 13px; }
  :root body .sd-doc form { margin: 0; }
  :root body .sd-trash { border: 0; background: none; width: 44px; height: 44px; padding: 10px; color: var(--qa-red); cursor: pointer; min-height: 0; }
  :root body .sd-trash svg { width: 24px; height: 24px; fill: currentColor; }
}
@media (max-width: 820px), (display-mode: standalone) { :root body .qa-bcard > * { min-width: 0; } :root body .sd-grp > form { min-width: 0; } }

/* ---- Call room wording and end screen like the app ---- */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .chat-empty-hint { display: block; color: #98A1BD; font-size: 13px; padding: 12px 0; margin: 0; }
  :root body .call-chat-messages:has(.chat-msg) .chat-empty-hint { display: none; }
  :root body .sd-wait { display: block; text-align: center; }
  :root body .sd-wait b { display: block; font-size: 34px; letter-spacing: 1px; margin: 4px 0 10px; }
  :root body .sd-endreview { display: grid; gap: 10px; }
  :root body .sd-endreview textarea { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); min-height: 70px; }
  :root body .sd-endreview .sd-stars button { color: rgba(255,255,255,.2); }
  :root body .sd-endreview .sd-stars button.on { color: var(--qa-yellow); }
}
@media (max-width: 820px), (display-mode: standalone) { :root body:has(.sd-wait) { background: #0A0F26; color: #fff; } :root body:has(.sd-wait) h1, :root body:has(.sd-wait) .sd-wait b { color: #fff; } :root body:has(.sd-wait) .sd-wait p { color: #B8BED6; } }
@media (max-width: 820px), (display-mode: standalone) { :root body .sd-pwhint { text-align: center; color: var(--qa-muted); font-size: 13px; margin: 8px 0 0; } }
:root[data-theme="dark"] body .qa-bcard.hero .qa-avatar, :root[data-theme="dark"] body .qa-bcard.hero .qa-avatar.xl { color: var(--qa-yellow); } :root[data-theme="dark"] body .sd-hero b, :root[data-theme="dark"] body .qa-fx-rate b { color: inherit; } :root[data-theme="dark"] body .sd-hero b { color: var(--qa-yellow); } :root[data-theme="dark"] body .sd-uhero h1 { color: #fff; } :root[data-theme="dark"] body .sd-nums b { color: #fff; } :root[data-theme="dark"] body .qa-pillstatus.st-confirmed, :root[data-theme="dark"] body .qa-onlinecard b { color: var(--qa-yellow); } :root[data-theme="dark"] body .qa-onlinecard b { color: #fff; }

@media (max-width: 820px), (display-mode: standalone) {
  /* Custom top-up amount card (credit page) */
  :root body .sd-custom label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; color: var(--qa-ink); }
  :root body .sd-custom-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--qa-field, var(--qa-line)); border-radius: 12px; padding: 0 14px; background: var(--qa-card); height: 52px; }
  :root body .sd-custom-row:focus-within { border-color: var(--qa-hero); }
  :root body .sd-cur { font-weight: 700; color: var(--qa-muted); }
  :root body .sd-custom-row input { flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; height: 48px !important; min-height: 0 !important; padding: 0 !important; font-size: 18px !important; font-weight: 700; color: var(--qa-ink); }
  :root body .sd-custom .btn { margin-top: 12px; }
}

/* Add credit page: smaller type on phones and in the installed app */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .sd:has(.sd-custom) .sd-hero small { font-size: 12px; }
  :root body .sd:has(.sd-custom) .sd-hero b { font-size: 22px; }
  :root body .sd:has(.sd-custom) > .qa-sec { font-size: 15px; }
  :root body .sd:has(.sd-custom) .sd-pack-i small { font-size: 11px; }
  :root body .sd:has(.sd-custom) .sd-pack-i b { font-size: 15px; }
  :root body .sd:has(.sd-custom) .sd-help { font-size: 12px; line-height: 1.4; }
  :root body .sd:has(.sd-custom) .sd-custom label { font-size: 13px; margin-bottom: 6px; }
  :root body .sd:has(.sd-custom) .sd-custom-row { height: 46px; }
  :root body .sd:has(.sd-custom) .sd-cur { font-size: 13px; }
  :root body .sd:has(.sd-custom) .sd-custom-row input { font-size: 14px !important; font-weight: 600; height: 42px !important; }
  :root body .sd:has(.sd-custom) .sd-custom-row input::placeholder { font-size: 13px; font-weight: 400; }
  :root body .sd:has(.sd-custom) .sd-code b { font-size: 13px; }
  :root body .sd:has(.sd-custom) .sd-code button { font-size: 12px; }
  :root body .sd:has(.sd-custom) .btn { font-size: 13px; }
  :root body .sd:has(.sd-custom) .qa-pillstatus { font-size: 11px; }
}


/* Credit page: every Pay button the same width */
@media (max-width: 820px), (display-mode: standalone) {
  :root body .sd-pack .btn { min-width: 156px; justify-content: center; text-align: center; }
  :root body .pd-banner { margin: 0 0 14px; }
  :root body .pd-banner a { color: #fff !important; background: var(--qa-hero, #0A0F26); }
  :root body .sd > * + * { margin-top: 12px; }
}