/* ==========================================================================
   SurveyTo - Unified UI theme
   Brings every member page in line with the Withdraw page design:
   slate typography, white panels with a hairline border, soft shadows,
   orange primary actions, blue accents. Visual only.
   Selectors are prefixed with `body` so they win over each page's own
   inline <style> block (which is printed later in the document).
   ========================================================================== */

:root {
  --ui-bg: #f4f6fb;
  --ui-panel: #ffffff;
  --ui-line: #e7ecf3;
  --ui-line-2: #e2e8f0;
  --ui-ink: #0f172a;
  --ui-ink-2: #1e293b;
  --ui-text: #334155;
  --ui-muted: #64748b;
  --ui-faint: #94a3b8;
  --ui-blue: #005bbb;
  --ui-blue-soft: #eef4ff;
  --ui-orange: #ff7b00;
  --ui-orange-2: #ff5200;
  --ui-green: #16a34a;
  --ui-radius: 16px;
  --ui-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
  --ui-shadow-lg: 0 10px 30px rgba(15, 23, 42, .10);
}

body { background: var(--ui-bg); color: var(--ui-text); }
body #main, body .main { background: transparent !important; }

/* ---------- Page title ---------- */
body .pagetitle h1 {
  color: var(--ui-ink) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
}
body .pagetitle .breadcrumb { background: transparent; }
body .breadcrumb-item,
body .breadcrumb-item a,
body .breadcrumb-item.active { color: var(--ui-muted) !important; font-weight: 500 !important; }
body .breadcrumb-item a:hover { color: var(--ui-blue) !important; }

/* ---------- Panels ---------- */
body #main .card {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: box-shadow .2s ease !important;
}
body #main .card:hover { transform: none !important; box-shadow: var(--ui-shadow) !important; }
body #main .card .card { box-shadow: none !important; }

body #main .card-title {
  color: var(--ui-ink) !important;
  font-weight: 700 !important;
  letter-spacing: -.005em;
}
body #main .card-title span { color: var(--ui-faint); }
body #main .card-header,
body #main .card-footer {
  background: #f8fafc !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-muted) !important;
}

/* ---------- Forms ---------- */
body #main .form-control,
body #main .form-select {
  border: 1px solid var(--ui-line-2) !important;
  background-color: #f8fafc !important;
  border-radius: 10px;
  color: var(--ui-ink-2);
  box-shadow: none;
}
body #main .form-control:focus,
body #main .form-select:focus {
  background-color: #fff !important;
  border-color: var(--ui-blue) !important;
  box-shadow: 0 0 0 4px rgba(0, 91, 187, .10) !important;
}
body #main .form-control::placeholder { color: var(--ui-faint); }
body #main .input-group-text {
  background: #f1f5f9 !important;
  border: 1px solid var(--ui-line-2) !important;
  color: var(--ui-muted) !important;
  border-radius: 10px;
}
body #main .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body #main .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body #main .form-label,
body #main label.col-form-label { color: var(--ui-ink-2); font-weight: 600; }

/* ---------- Buttons ---------- */
body #main .btn { border-radius: 12px; font-weight: 700; }
body #main .btn-primary {
  background: linear-gradient(135deg, var(--ui-orange), var(--ui-orange-2)) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(255, 123, 0, .28) !important;
}
body #main .btn-primary:hover:not(:disabled) { filter: brightness(1.04); box-shadow: 0 8px 22px rgba(255, 123, 0, .36) !important; }
body #main .btn-success {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(22, 163, 74, .25) !important;
}
body #main .btn-secondary {
  background: var(--ui-ink-2) !important;
  border: 0 !important;
  color: #fff !important;
}
body #main .btn:active:not(:disabled) { transform: scale(.98); }

/* ---------- Tables (desktop look) ---------- */
body #main .table { color: var(--ui-text); --bs-table-bg: transparent; }
body #main .table > thead > tr > th,
body #main .table > thead > tr > td {
  background: #f8fafc !important;
  color: var(--ui-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-line) !important;
  padding: 12px 14px !important;
  white-space: nowrap;
}
body #main .table > thead > tr > th:first-child { border-top-left-radius: 10px; }
body #main .table > thead > tr > th:last-child { border-top-right-radius: 10px; }
body #main .table > tbody > tr > * {
  border-color: #f1f5f9 !important;
  vertical-align: middle;
}
body #main .table > tbody > tr:hover { transform: none !important; }
body #main .table-primary,
body #main .table-primary > tr > * { --bs-table-bg: transparent; --bs-table-striped-bg: #f8fafc; color: var(--ui-text) !important; }

/* ---------- Badges & alerts ---------- */
body #main .badge {
  border-radius: 999px;
  font-weight: 700;
  padding: .38em .75em;
  letter-spacing: .01em;
}
body #main .alert {
  border: 1px solid transparent;
  border-left-width: 4px !important;
  border-radius: 12px;
}
body #main .alert-info    { background: #eff6ff !important; border-color: #bfdbfe !important; border-left-color: var(--ui-blue) !important; color: #1e3a8a !important; }
body #main .alert-success { background: #f0fdf4 !important; border-color: #bbf7d0 !important; border-left-color: var(--ui-green) !important; color: #14532d !important; }
body #main .alert-warning { background: #fffbeb !important; border-color: #fde68a !important; border-left-color: #f59e0b !important; color: #78350f !important; }
body #main .alert-danger  { background: #fef2f2 !important; border-color: #fecaca !important; border-left-color: #dc2626 !important; color: #7f1d1d !important; }
body #main .alert-light   { background: #f8fafc !important; border-color: var(--ui-line) !important; border-left-color: var(--ui-line-2) !important; color: var(--ui-muted) !important; }

/* ---------- Pagination ---------- */
body #main .page-link { border-color: var(--ui-line); color: var(--ui-ink-2); }
body #main .page-item.active .page-link { background: var(--ui-blue); border-color: var(--ui-blue); color: #fff; }

/* ---------- Sidebar ---------- */
body .sidebar-nav .nav-heading { color: var(--ui-faint) !important; letter-spacing: .06em; }
body .sidebar-nav .nav-link { color: var(--ui-ink-2) !important; border-radius: 10px; }
body .sidebar-nav .nav-link i { color: var(--ui-muted); }
body .sidebar-nav .nav-link:hover { background: #f1f5f9 !important; color: var(--ui-ink) !important; }
body .sidebar-nav .nav-link:not(.collapsed) {
  background: linear-gradient(135deg, var(--ui-orange), var(--ui-orange-2)) !important;
  border-left: 0 !important;
  box-shadow: 0 6px 16px rgba(255, 123, 0, .25);
}
body .nav-content a { color: var(--ui-muted) !important; }
body .nav-content a.active, body .nav-content a:hover { color: var(--ui-orange) !important; background: transparent !important; }

/* ---------- Shared "hero" panel (withdraw style) ---------- */
body .ui-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: var(--ui-radius);
  color: #fff;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .15);
  margin-bottom: 20px;
}
body .ui-hero::after {
  content: '';
  position: absolute;
  top: -55%;
  right: -12%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 91, 187, .28) 0%, rgba(255, 123, 0, .16) 100%);
  pointer-events: none;
}
body .ui-hero > * { position: relative; z-index: 1; }
body .ui-hero-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ui-faint);
  font-weight: 700;
}
body .ui-hero-value { font-size: 2.1rem; font-weight: 800; line-height: 1.15; color: #fff; letter-spacing: -.02em; }
body .ui-hero-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
body .ui-hero-stat {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 8px 14px;
  min-width: 0;
}
body .ui-hero-stat b { display: block; font-size: 16px; color: #fff; line-height: 1.2; }
body .ui-hero-stat span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--ui-faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
body .ui-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--ui-orange), var(--ui-orange-2));
  color: #fff !important;
  font-weight: 800;
  padding: 12px 22px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(255, 123, 0, .35);
  white-space: nowrap;
}
body .ui-hero-cta:hover { filter: brightness(1.05); }

/* ---------- Section heading (offers/surveys style) ---------- */
body .ui-section-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
body .ui-section-head .ui-ic {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: rgba(255, 123, 0, .12); color: var(--ui-orange);
}
body .ui-section-head h4 { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--ui-ink-2); line-height: 1.2; }
body .ui-section-head p { margin: 2px 0 0; font-size: .85rem; color: var(--ui-muted); }

@media (max-width: 768px) {
  body .ui-hero { padding: 18px 16px; margin-bottom: 14px; border-radius: 14px; }
  body .ui-hero-value { font-size: 1.75rem; }
  body .ui-hero-stats { gap: 8px; margin-top: 12px; }
  body .ui-hero-stat { flex: 1 1 0; padding: 8px 10px; }
  body .ui-hero-stat b { font-size: 14.5px; }
  body .ui-hero-stat span { font-size: 10px; }
  body .ui-hero-cta { width: 100%; margin-top: 14px; padding: 13px 18px; }
  body .ui-section-head h4 { font-size: 1.08rem; }
  body .ui-section-head p { font-size: .8rem; }
}

/* ==========================================================================
   Contests
   ========================================================================== */
body #main.contest-page .contest-card { display: flex; flex-direction: column; height: calc(100% - 20px); margin-bottom: 20px; text-align: left !important; }
body #main.contest-page .contest-card .card-body { flex: 1; display: flex; flex-direction: column; padding: 16px 18px 18px !important; text-align: center; }
body #main.contest-page .contest-card .card-body > .btn { margin-top: auto; }
body #main.contest-page .card-header.card-title {
  background: #fff !important;
  color: var(--ui-ink) !important;
  border-bottom: 1px solid var(--ui-line) !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 14px 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
body #main.contest-page .contest-ic {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 123, 0, .12); color: var(--ui-orange); font-size: 17px;
}
body #main.contest-page .contest-card .card-body .card-title { font-size: 16px !important; padding: 6px 0 12px !important; }
body #main.contest-page .contest-card .card-body .card-title b { color: var(--ui-orange) !important; }
body #main.contest-page .contest-card .btn { width: 100%; padding: 12px 18px !important; font-size: 15px !important; border-radius: 12px !important; transform: none !important; }
body #main.contest-page .contest-card p.card-title.text-info { padding: 12px 0 0 !important; margin: 0; }
body #main.contest-page .contest-card p.card-title.text-info small { color: var(--ui-muted) !important; font-weight: 600; }
body #main.contest-page .contest-card .card-footer { background: #f8fafc !important; border-radius: 0 0 16px 16px !important; padding: 10px 16px !important; }
body #main.contest-page .contest-card .card-footer .row { --bs-gutter-x: 8px; }
body #main.contest-page .contest-card .card-footer .row > div { width: 50%; flex: 0 0 50%; }
body #main.contest-page .contest-card .card-footer .row > div:last-child { text-align: right; }
body #main.contest-page .contest-card .card-footer small { color: var(--ui-ink-2); font-weight: 700; }
body #main.contest-page .contest-card .card-footer i { color: var(--ui-orange) !important; }
body #main.contest-page .contest-card .alert { text-align: left; font-size: 14px; }

/* ==========================================================================
   Activities list
   ========================================================================== */
body #main .table:has(.activity-modern) { border-spacing: 0 !important; border-collapse: collapse !important; }
body #main tr.activity-modern {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  transform: none !important;
}
body #main tr.activity-modern > td {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  --bs-table-accent-bg: transparent !important;
}
body #main tr.activity-modern:last-child > td { border-bottom: 0 !important; }
body #main tr.activity-modern:hover > td { background: #f8fafc !important; }
body #main tr.activity-modern.activity-unread > td,
body #main tr.activity-modern.unread-activity > td { background: #fff7ed !important; }
body #main tr.activity-modern.activity-unread > td:first-child { box-shadow: inset 3px 0 0 var(--ui-orange) !important; }
body #main .activity-modern-icon { width: 64px; padding: 14px 6px 14px 12px !important; }
body #main .activity-modern-icon-wrap {
  width: 42px; height: 42px; border-radius: 12px; font-size: 19px;
  background: #f1f5f9; box-shadow: none;
}
body #main .activity-modern-icon-wrap.text-success { background: #dcfce7; }
body #main .activity-modern-icon-wrap.text-primary { background: #dbeafe; }
body #main .activity-modern-icon-wrap.text-danger  { background: #fee2e2; }
body #main .activity-modern-icon-wrap.text-warning { background: #fef3c7; }
body #main .activity-modern-icon-wrap.text-info    { background: #cffafe; }
body #main .activity-glow { display: none; }
body #main .activity-modern-body { padding: 14px 12px 14px 4px !important; }
body #main .activity-modern-text { font-size: 14.5px; font-weight: 500; color: var(--ui-ink-2); line-height: 1.45; }
body #main .activity-modern-text b { font-weight: 800; }
body #main .activity-modern-meta { font-size: 12px; color: var(--ui-muted); opacity: 1; margin-top: 4px; }
body #main .activity-new { background: var(--ui-orange); color: #fff; border-radius: 999px; }

/* Dashboard "Recent Activity" timeline */
body #main .activity .activity-item {
  background: #f8fafc !important;
  border: 1px solid #eef2f7 !important;
  border-left: 3px solid var(--ui-orange) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
body #main .card > .filter a {
  background: var(--ui-blue-soft) !important;
  color: var(--ui-blue) !important;
  font-weight: 700;
}
body #main .card > .filter a:hover { background: var(--ui-blue) !important; color: #fff !important; }

/* ==========================================================================
   v2 — Typography, header, WebView
   ========================================================================== */
body,
body h1, body h2, body h3, body h4, body h5, body h6,
body .card-title, body .pagetitle h1, body .sidebar, body .header,
body .btn, body .form-control, body .form-select, body .badge,
body .section-title, body .task-title, body .mobilenav-label {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body .bi, body .bx { font-family: inherit; }
body .bi::before { font-family: "bootstrap-icons" !important; }
body .bx { font-family: "boxicons" !important; }

/* Header */
body .header {
  background: rgba(255, 255, 255, .88) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--ui-line) !important;
}
body .header .toggle-sidebar-btn { color: var(--ui-ink-2); }
body .header-nav .nav-icon { color: var(--ui-ink-2); }
body .header-nav .nav-profile img { border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ui-line); }
body .header-nav .nav-profile span { color: var(--ui-ink-2); }
body .hdr-balance {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff4ea;
  border: 1px solid #ffe1c6;
  color: #c2410c !important;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  transition: background .2s ease;
}
body .hdr-balance i { font-size: 15px; }
body .hdr-balance:hover { background: #ffe8d4; }
body .header-nav .profile { border: 1px solid var(--ui-line); border-radius: 16px; box-shadow: var(--ui-shadow-lg); padding: 6px; }
body .header-nav .profile .dropdown-item { border-radius: 10px; }
body .header-nav .profile .dropdown-header h6 { font-weight: 800; color: var(--ui-ink); }

/* Interaction polish */
body a, body button, body .btn, body .mobilenav-link, body .partner-card-custom, body .method-card { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (hover: none) {
  body #main .card:hover, body .partner-card-custom:hover, body .app-card-custom:hover,
  body .survey-card-custom:hover, body .method-card:hover { transform: none !important; }
}
body :focus-visible { outline: 3px solid rgba(255, 123, 0, .35); outline-offset: 2px; }
::selection { background: rgba(255, 123, 0, .2); }

/* Notch / safe areas (viewport-fit=cover) */
body .header { padding-top: env(safe-area-inset-top, 0px); height: calc(60px + env(safe-area-inset-top, 0px)); }
body #main { margin-top: calc(60px + env(safe-area-inset-top, 0px)); }
body .sidebar { top: calc(60px + env(safe-area-inset-top, 0px)); }

/* In-app WebView: native-feeling surface */
html.in-app, html.in-app body { overscroll-behavior-y: none; }
html.in-app body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.in-app input, html.in-app textarea, html.in-app [contenteditable],
html.in-app .chat-messages, html.in-app #chatArea, html.in-app .aff-page, html.in-app #my_ref_code,
html.in-app .table, html.in-app p, html.in-app .alert { -webkit-user-select: text; user-select: text; }
html.in-app .back-to-top { display: none !important; }

@media (max-width: 768px) {
  body .header { height: calc(56px + env(safe-area-inset-top, 0px)); }
  body #main { margin-top: calc(56px + env(safe-area-inset-top, 0px)); }
  body .sidebar { top: calc(56px + env(safe-area-inset-top, 0px)); }
  body .hdr-balance { padding: 7px 10px; font-size: 13px; margin-right: 2px; }
  body .hdr-balance i { display: none; }
  body .header-nav .nav-icon { padding: 8px 6px; }
}
@media (max-width: 360px) {
  body .hdr-balance { font-size: 12px; padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Page title block (used by list pages)
   ========================================================================== */
body .pagetitle { margin-bottom: 16px; }
body .pagetitle h1 { font-size: 24px !important; }

/* ==========================================================================
   v2 — Mobile page title in header, tabs, empty states, long text pages
   ========================================================================== */
body .hdr-title { display: none; }
@media (max-width: 768px) {
  body .header .logo.has-title { display: none !important; }
  body .hdr-title {
    display: block;
    font-weight: 800;
    font-size: 17px;
    color: var(--ui-ink);
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 44vw;
    padding-left: 2px;
  }
  body .pagetitle .breadcrumb { display: none; }
  body .pagetitle h1 { font-size: 20px !important; }
}

/* Segmented tabs */
body .ui-tabs {
  display: flex; gap: 6px; padding: 5px; margin: 0 0 16px;
  background: #fff; border: 1px solid var(--ui-line); border-radius: 14px;
  overflow-x: auto; scrollbar-width: none;
}
body .ui-tabs::-webkit-scrollbar { display: none; }
body .ui-tab {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border-radius: 10px; white-space: nowrap;
  font-weight: 700; font-size: 14px; color: var(--ui-muted) !important;
}
body .ui-tab:hover { background: #f8fafc; color: var(--ui-ink) !important; }
body .ui-tab.active { background: var(--ui-ink-2); color: #fff !important; box-shadow: 0 4px 12px rgba(15, 23, 42, .18); }
@media (max-width: 768px) { body .ui-tab { padding: 9px 12px; font-size: 13px; } }

/* Empty table rows ("There is nothing here yet!") */
body #main .table td[colspan] {
  padding: 34px 16px !important;
  text-align: center !important;
  color: var(--ui-muted) !important;
  font-weight: 600;
  background: transparent !important;
}

/* Long legal / text pages */
body #main .card-body ol li,
body #main .card-body ul li { line-height: 1.65; }
body #main .card-body p { line-height: 1.7; }

/* Table wrapper cards keep rounded corners */
body #main .table-responsive.card { overflow: hidden; }
body #main .table-responsive.card > .table { margin-bottom: 0; }
body #main .pagination { margin: 14px 0 6px; }

/* ==========================================================================
   Chat
   ========================================================================== */
body #main .chat-card { overflow: hidden; }
body .chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ui-line); background: #fff; }
body .chat-head-ic { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,123,0,.12); color: var(--ui-orange); font-size: 18px; }
body .chat-head b { display: block; color: var(--ui-ink); font-size: 15px; }
body .chat-head small { color: var(--ui-muted); font-size: 12px; }
body .chat-messages { background: #f8fafc !important; padding: 12px !important; }
body .chat-messages .message { padding: 4px 2px !important; margin-bottom: 6px !important; background: transparent !important; }
body .chat-messages .message-content-wrapper {
  background: #fff; border: 1px solid var(--ui-line); border-radius: 4px 14px 14px 14px;
  padding: 8px 12px; max-width: calc(100% - 50px); box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
body .chat-messages .message-username { font-weight: 800; color: var(--ui-ink-2); }
body .chat-messages .message-time { width: auto !important; font-size: 11px !important; color: var(--ui-faint) !important; order: 3; margin: 2px 0 0 8px !important; }
body .chat-input { background: #fff !important; border-top: 1px solid var(--ui-line); padding: 10px 12px !important; gap: 8px; }
body .chat-input .form-control { border-radius: 999px !important; height: 46px; padding-left: 18px; }
body .chat-input #sendButton { width: 46px; height: 46px; border-radius: 50% !important; padding: 0; flex-shrink: 0; }
body .chat-admin-link {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
  background: #fff; border: 1px solid var(--ui-line); border-radius: 14px; padding: 14px 16px;
  color: var(--ui-ink-2) !important; font-weight: 700; font-size: 14px;
}
body .chat-admin-link > i:first-child { color: var(--ui-blue); font-size: 20px; }
body .chat-admin-link:hover { border-color: #cbd5e1; }
@media (max-width: 768px) {
  body .chat-messages { height: calc(100dvh - 360px) !important; }
}

/* Account profile hero */
body .acc-hero .acc-avatar { width: 56px; height: 56px; border-radius: 16px; border: 2px solid rgba(255,255,255,.2); flex-shrink: 0; }
body .acc-hero .acc-name { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .acc-hero .acc-mail { font-size: 13px; color: var(--ui-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .acc-hero .acc-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
body .acc-hero .acc-actions .ui-hero-cta { margin-top: 0; flex: 1 1 auto; width: auto; }
body .acc-hero .acc-logout {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto;
  padding: 12px 18px; border-radius: 12px; font-weight: 700; color: #fff !important;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
}
body .acc-hero .acc-logout:hover { background: rgba(255,255,255,.14); }
@media (min-width: 769px) { body .acc-hero .acc-actions .ui-hero-cta { flex: 0 0 auto; } }

/* Guest header actions (FAQ, TOS, Contact... when logged out) */
body .guest-actions { display: flex; align-items: center; gap: 8px; padding-right: 12px; }
body .guest-btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 14px; border-radius: 12px; font-weight: 700; font-size: 14px; }
body .guest-btn-ghost { color: var(--ui-ink-2) !important; border: 1px solid var(--ui-line); background: #fff; }
body .guest-btn-primary { color: #fff !important; background: linear-gradient(135deg, var(--ui-orange), var(--ui-orange-2)); box-shadow: 0 6px 14px rgba(255,123,0,.25); }
@media (max-width: 768px) { body .guest-actions { padding-right: 4px; gap: 6px; } body .guest-btn { height: 36px; padding: 0 12px; font-size: 13px; } }