* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #0f1116; color: #e6e8ee; }
.muted { color: #8b93a7; } .small { font-size: 12px; } .pad { padding: 12px; }
.grow { flex: 1; } .err { color: #ff6b6b; min-height: 18px; font-size: 13px; margin-top: 6px; }
a { color: #7aa2ff; text-decoration: none; } a:hover { text-decoration: underline; }

button { background: #3c5cff; color: #fff; border: 0; border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 14px; }
button:hover { filter: brightness(1.08); } button:disabled { opacity: .45; cursor: default; }
button.ghost { background: #232838; } button.danger { background: #b3343a; }
input, select { background: #181c27; border: 1px solid #2a3142; color: #e6e8ee; border-radius: 8px; padding: 9px 10px; font-size: 14px; width: 100%; }

.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.card { background: #161a24; border: 1px solid #232838; border-radius: 12px; padding: 16px; margin: 14px; }
.login { width: 320px; display: flex; flex-direction: column; gap: 10px; }
.login h1 { margin: 0; } .login p { margin: 0 0 6px; }

.topbar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #161a24; border-bottom: 1px solid #232838; position: relative; }
.pill { background: #232838; border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.cnt { background: rgba(255,255,255,.18); border-radius: 999px; padding: 0 7px; font-size: 12px; margin-left: 4px; }

/* ☰ dropdown menu (mobile) */
.menu { display: none; position: absolute; top: calc(100% + 4px); left: 8px; z-index: 70;
  flex-direction: column; gap: 2px; min-width: 200px; padding: 6px;
  background: #161a24; border: 1px solid #2a3142; border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.55); }
.menu.open { display: flex; }
.menuitem { display: block; width: 100%; text-align: left; background: transparent; color: #e6e8ee;
  border: 0; border-radius: 7px; padding: 10px 11px; font-size: 14px; cursor: pointer; }
.menuitem:hover { background: #232838; text-decoration: none; }
.menuitem.danger { color: #ff8a8f; }
.menuearn { padding: 6px 11px 9px; font-size: 12px; color: #9aa3ba; border-bottom: 1px solid #232838; margin-bottom: 4px; }

/* console fills the viewport robustly: header (natural height) + layout (rest).
   dvh handles mobile browser chrome; avoids the old magic "100vh - 52px". */
body.console { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.layout { display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - 52px); }
body.console .layout { height: auto; flex: 1 1 auto; min-height: 0; }
.only-mobile { display: none; }
.qbackdrop { display: none; }
#menuBtn { font-size: 18px; line-height: 1; padding: 6px 10px; }
.queue { border-right: 1px solid #232838; overflow-y: auto; padding: 12px; }
.queue h3 { margin: 4px 0 12px; display: flex; gap: 8px; align-items: center; }
.qrow { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid #232838; border-radius: 10px; margin-bottom: 8px; }
.qinfo { display: flex; flex-direction: column; flex: 1; gap: 2px; } .qinfo b { font-size: 14px; }
.qrow button { padding: 6px 10px; font-size: 13px; }

.chats { display: flex; flex-direction: column; min-width: 0; }
.tabs { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #232838; overflow-x: auto; }
.tab { background: #232838; position: relative; }
.tab.active { background: #3c5cff; }
.tab .badge { background: #ff6b6b; border-radius: 999px; font-size: 11px; padding: 0 6px; margin-left: 6px; }
.panels { flex: 1; position: relative; min-height: 0; }
.empty { display: flex; height: 100%; align-items: center; justify-content: center; }
.panel { position: absolute; inset: 0; display: none; flex-direction: column; }
.phead { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #232838; }
.msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.msg { display: flex; } .msg.in { justify-content: flex-start; } .msg.out { justify-content: flex-end; }
.bub { max-width: 70%; padding: 8px 11px; border-radius: 12px; font-size: 14px; line-height: 1.35; word-wrap: break-word; }
.msg.in .bub { background: #232838; border-bottom-left-radius: 4px; }
.msg.out .bub { background: #2f49c8; border-bottom-right-radius: 4px; }
.bub .t { display: block; font-size: 10px; color: #aeb6cc; margin-top: 3px; text-align: right; }
.composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #232838; }
.composer input { flex: 1; }

.admin { max-width: 1000px; margin: 0 auto; }
.stats { display: flex; gap: 14px; } .stat { background: #181c27; border-radius: 10px; padding: 12px 18px; text-align: center; }
.stat b { font-size: 22px; display: block; } .stat span { color: #8b93a7; font-size: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid2 label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #b9c0d4; }
.grid2 fieldset { grid-column: 1 / -1; border: 1px solid #2a3142; border-radius: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid2 fieldset legend { color: #8b93a7; font-size: 12px; }
.grid2 > button { grid-column: 1 / -1; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #232838; }
.rowbtns { display: flex; gap: 6px; } .rowbtns button { padding: 5px 9px; font-size: 12px; }

.qbar { border-top: 1px solid #232838; padding: 9px 14px; background: #12151f; display: flex; flex-direction: column; gap: 7px; }
.qbar:empty { display: none; }
.bot { background: #2a3142; color: #9fb0ff; border-radius: 4px; padding: 1px 6px; font-size: 11px; }
.newbadge { background: #1f7a3d; color: #d6ffe2; border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 600; }
.qrow.qnew { border-color: #2e7d46; box-shadow: inset 3px 0 0 #36c06a; }
.msg.sys { justify-content: center; }
.sysnote { background: rgba(31,122,61,.18); border: 1px solid #2e7d46; color: #b7ffcd; border-radius: 8px; padding: 5px 11px; font-size: 12px; }
.media { max-width: 220px; max-height: 240px; border-radius: 8px; display: block; margin-top: 4px; }
.attach { cursor: pointer; font-size: 18px; padding: 0 8px; display: flex; align-items: center; user-select: none; }
.datehdr { margin: 14px 0 6px; font-size: 12px; color: #8b93a7; text-transform: uppercase; letter-spacing: .04em; }
.chatrow { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid #232838; border-radius: 8px; margin-bottom: 6px; cursor: pointer; }
.chatrow:hover { border-color: #3c5cff; }
.chatrow .gift { color: #36c06a; font-weight: 600; }
.chatrow.gifted { border-color: #2c7a4b; background: rgba(54,192,106,.09); }
.chatrow.gifted:hover { border-color: #36c06a; }
.daytbl td .gift { font-weight: 600; }
.daytbl .dayview { padding: 4px 10px; white-space: nowrap; }
.cid { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.histnav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.histnav .msel { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; background: #0f1320; color: #e7ebf3; border: 1px solid #232838; }
.histnav .mstep { white-space: nowrap; }
.histnav .mstep[disabled] { opacity: .4; cursor: default; }
body.admin-ui .histnav .msel { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.transcript { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.editgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.editgrid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #b9c0d4; }
.editgrid .full { grid-column: 1 / -1; }
#fbgate { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.fbbox { background: #161a24; border: 1px solid #2e7d46; border-radius: 12px; padding: 18px 20px; min-width: 320px; max-width: 92vw; }
.fbbox h3 { margin: 0 0 4px; }
.fbrow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #232838; border-radius: 8px; margin-top: 8px; }
.fbrow button { padding: 6px 12px; font-size: 16px; background: #232838; }
#histgate, #profgate, #refgate, #earngate, #pwgate { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 900; }

/* toast notifications (e.g. "your money is sent") */
#toasts { position: fixed; top: 14px; right: 14px; left: auto; display: flex; flex-direction: column; gap: 8px; z-index: 1200; max-width: min(92vw, 380px); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #161a24; color: #e7ebf3; border: 1px solid #232838; box-shadow: 0 8px 24px rgba(0,0,0,.45); font-size: 14px; line-height: 1.35; animation: toastin .25s ease; }
.toast.ok { border-color: #2c7a4b; background: #11271b; }
.toast.err { border-color: #7a2c2c; background: #2a1414; }
.toast .tclose { background: none; border: none; color: inherit; opacity: .6; cursor: pointer; padding: 0 2px; font-size: 14px; }
.toast .tclose:hover { opacity: 1; }
.toast.out { animation: toastout .25s ease forwards; }
@keyframes toastin { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes toastout { to { opacity: 0; transform: translateX(20px); } }
.histbox { background: #161a24; border: 1px solid #232838; border-radius: 12px; width: 560px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column; }
.histhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #232838; }
.hhttl { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hhttl b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.histhead .hclose { flex: none; }
.histbody { padding: 12px 16px; overflow-y: auto; }
.histbody h4 { margin: 8px 0; }
.hback { margin-bottom: 6px; }
.qinfo2 { font-size: 13px; line-height: 1.4; }
.qactions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qactions button { padding: 6px 11px; font-size: 13px; }

/* ============================ MOBILE ============================ */
@media (max-width: 820px) {
  .only-mobile { display: inline-flex; }

  /* topbar wraps instead of overflowing; trim non-essentials */
  .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; }
  /* hidden on mobile — on the console these now live inside the ☰ menu.
     Scoped to the console so admin/staff pages (no ☰ menu) keep their Log out button. */
  body.console .topbar #stats, body.console .topbar #who, body.console .topbar #profBtn,
  body.console .topbar #histBtn, body.console .topbar #earnBtn, body.console .topbar #refBtn, body.console .topbar #passBtn,
  body.console .topbar #adminLink, body.console .topbar #logout { display: none; }

  /* tap targets a bit bigger */
  button { padding: 9px 13px; }

  /* CONSOLE: single column; the queue becomes an off-canvas drawer */
  .layout { grid-template-columns: 1fr; }
  .queue {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 330px);
    z-index: 60; background: #12141c; border-right: 1px solid #232838;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 2px 0 18px rgba(0,0,0,.45); padding-top: 8px;
  }
  .layout.queue-open .queue { transform: translateX(0); }
  .layout.queue-open .qbackdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55;
  }
  #queueClose { font-size: 16px; padding: 4px 9px; margin-left: auto; }

  /* chat fills the screen */
  .chats { width: 100%; }
  .bub { max-width: 85%; }
  .media { max-width: min(72vw, 240px); }
  .phead { padding: 9px 12px; }
  .msgs { padding: 12px 10px; }
  .composer { padding: 9px 10px; gap: 6px; }
  .tabs { padding: 6px 10px; }

  /* ADMIN / STAFF: stack forms, let wide tables scroll inside their card */
  .card { margin: 10px; padding: 12px; overflow-x: auto; }
  .stats { flex-wrap: wrap; gap: 10px; }
  .stat { flex: 1 1 calc(50% - 10px); min-width: 120px; }
  .grid2, .editgrid { grid-template-columns: 1fr; }
  .grid2 fieldset, .editgrid fieldset { grid-template-columns: 1fr !important; }
  table { font-size: 13px; }
  th, td { padding: 7px 6px; }

  /* modals fit small screens */
  .fbbox { min-width: 0; width: min(420px, 92vw); }
  .login { width: min(92vw, 340px); }

  /* history / earnings / referrals modals: use nearly the whole screen */
  .histbox { width: 96vw; max-width: 96vw; max-height: 92vh; }
  .histhead { padding: 11px 13px; flex-wrap: wrap; gap: 4px 10px; }
  .histbody { padding: 10px 12px; }
  /* tables inside modals can't grow the page, so let them scroll sideways */
  .histbody table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .histbody .stats { gap: 8px; }

  /* month switcher stays on one line, select takes the slack */
  .histnav .mstep { padding: 8px 9px; font-size: 13px; }

  /* chat rows wrap instead of overflowing; id truncates */
  .chatrow { flex-wrap: wrap; gap: 4px 8px; }
  .cid { max-width: 110px; }

  /* toasts: bottom of screen, full width, thumb-reachable, clear of the topbar */
  #toasts { top: auto; bottom: 12px; left: 10px; right: 10px; max-width: none; }
  .toast { animation: toastinUp .25s ease; }
  .toast.out { animation: toastoutDown .25s ease forwards; }
}

@keyframes toastinUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes toastoutDown { to { opacity: 0; transform: translateY(20px); } }

@media (max-width: 380px) {
  .stat { flex-basis: 100%; }
  .bub { max-width: 90%; }
}

/* ============================================================================
   PROFESSIONAL LIGHT THEME — scoped to admin / staff / login pages only.
   The operator console (body.console) stays dark and is untouched.
   ========================================================================== */
body.admin-ui, body.auth-ui {
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --border: #e5e9f0;
  --border-strong: #d3dae5;
  --text: #1c2533;
  --muted: #687588;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft: #eef3ff;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --ok: #15a34a;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md: 0 10px 30px rgba(16,24,40,.12);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* links */
body.admin-ui a, body.auth-ui a { color: var(--primary); font-weight: 500; }
body.admin-ui a:hover, body.auth-ui a:hover { color: var(--primary-hover); text-decoration: none; }
body.admin-ui .muted, body.auth-ui .muted { color: var(--muted); }
body.admin-ui .err, body.auth-ui .err { color: var(--danger); font-weight: 500; }

/* buttons */
body.admin-ui button, body.auth-ui button {
  background: var(--primary); color: #fff; border: 1px solid transparent; border-radius: 9px;
  padding: 9px 15px; font-size: 13.5px; font-weight: 550; box-shadow: var(--shadow-sm);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body.admin-ui button:hover, body.auth-ui button:hover { background: var(--primary-hover); filter: none; }
body.admin-ui button:disabled, body.auth-ui button:disabled { opacity: .5; box-shadow: none; }
body.admin-ui button.ghost {
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: none;
}
body.admin-ui button.ghost:hover { background: var(--surface-2); border-color: var(--muted); }
body.admin-ui button.danger { background: var(--danger); }
body.admin-ui button.danger:hover { background: var(--danger-hover); }

/* inputs */
body.admin-ui input, body.admin-ui select, body.auth-ui input {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
  border-radius: 9px; padding: 9px 11px; font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.admin-ui input:focus, body.admin-ui select:focus, body.auth-ui input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
body.admin-ui input::placeholder, body.auth-ui input::placeholder { color: #9aa4b5; }

/* topbar */
body.admin-ui .topbar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm); padding: 13px 24px; gap: 16px;
}
body.admin-ui .topbar strong { font-size: 16px; letter-spacing: -.01em; }
body.admin-ui .topbar a { color: var(--muted); font-weight: 500; }
body.admin-ui .topbar a:hover { color: var(--text); }

/* page container + cards — full width with comfortable gutters (not a narrow column) */
body.admin-ui .admin { max-width: none; margin: 0; padding: 8px 20px 48px; }
body.admin-ui .card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 22px 24px; margin: 18px;
}
body.admin-ui .card h3 {
  margin: 0 0 18px; font-size: 15px; font-weight: 650; color: var(--text); letter-spacing: -.01em;
}

/* stat tiles */
body.admin-ui .stats { gap: 14px; flex-wrap: wrap; }
body.admin-ui .stat {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 15px 20px; box-shadow: none; min-width: 130px;
}
body.admin-ui .stat b { color: var(--text); font-size: 25px; font-weight: 700; letter-spacing: -.02em; }
body.admin-ui .stat span { color: var(--muted); font-size: 12px; }
/* "My earnings" — the business owner's revenue line, set apart from staff/queue counters */
body.admin-ui .stat.money { border-color: var(--ok); background: #f0faf3; }
body.admin-ui .stat.money b { color: #1c7d46; }
.stat.money { border: 1px solid #2c7a4b; background: rgba(54,192,106,.10); }
.stat.money b { color: #36c06a; }

/* forms */
body.admin-ui .grid2 label, body.admin-ui .editgrid label { color: var(--text); font-weight: 500; font-size: 13px; }
body.admin-ui .grid2 fieldset, body.admin-ui .editgrid fieldset {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 14px;
}
body.admin-ui fieldset legend { color: var(--muted); font-weight: 600; padding: 0 6px; }

/* tables */
body.admin-ui table { font-size: 13.5px; }
body.admin-ui thead th {
  background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); padding: 11px 10px;
}
body.admin-ui tbody td { border-bottom: 1px solid var(--border); padding: 11px 10px; color: var(--text); }
body.admin-ui tbody tr { transition: background .12s ease; }
body.admin-ui tbody tr:hover { background: var(--surface-2); }
body.admin-ui tbody tr:last-child td { border-bottom: 0; }
body.admin-ui .rowbtns { gap: 6px; flex-wrap: wrap; }
body.admin-ui .rowbtns button { padding: 5px 10px; font-size: 12px; }

/* history rows + transcripts (staff detail) */
body.admin-ui .datehdr { color: var(--muted); }
body.admin-ui .chatrow { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
body.admin-ui .chatrow:hover { border-color: var(--primary); background: var(--primary-soft); }
body.admin-ui .chatrow .gift { color: var(--ok); font-weight: 600; }
body.admin-ui .chatrow.gifted { border-color: var(--ok); background: #f0faf3; }
body.admin-ui .chatrow.gifted:hover { border-color: var(--ok); background: #e7f7ed; }
body.admin-ui .transcript { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
body.admin-ui .msg.in .bub { background: #eef1f6; color: var(--text); border-bottom-left-radius: 4px; }
body.admin-ui .msg.out .bub { background: var(--primary); color: #fff; }
body.admin-ui .bub .t { color: rgba(20,28,42,.45); }
body.admin-ui .msg.out .bub .t { color: rgba(255,255,255,.75); }
body.admin-ui .sysnote { background: #ecfdf3; border: 1px solid #aaeec5; color: #067a48; }

/* sign-in page */
body.auth-ui {
  background: radial-gradient(1100px 560px at 50% -12%, #ffffff 0%, #eef1f7 55%, #e6eaf2 100%);
}
body.auth-ui .login {
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
  border-radius: 16px; padding: 30px 28px; gap: 14px; width: 348px;
}
body.auth-ui .login h1 { color: var(--text); letter-spacing: -.02em; font-size: 26px; }
body.auth-ui .login p { color: var(--muted); }
body.auth-ui .login button { padding: 11px; font-size: 14.5px; margin-top: 4px; }

/* ============================================================================
   BUZZMAN THEME (Sep 2026) — the operator console, sign-in and admin pages share
   the Buzzman portal's look: Manrope, light surfaces, green actions.
   Everything below only restyles; no layout logic or class names changed.
   ========================================================================== */
body.console, body.auth-ui, body.admin-ui {
  --green: #00B86D; --green-d: #059862; --green-t: #e7f8f0; --green-ink: #046a45;
  --bg: #f3f5f7; --surface: #fff; --raised: #fbfcfd; --line: #e7eaee; --line-2: #eff2f5;
  --txt: #1a1e24; --txt-2: #5a6472; --txt-3: #98a1ad; --warn: #e8920c; --bad: #cf1322; --info: #2563eb;
  --shadow: 0 1px 2px rgba(20,28,40,.04), 0 6px 20px -8px rgba(20,28,40,.10); --shadow-lg: 0 12px 40px -12px rgba(20,28,40,.22);
  --primary: #00B86D; --primary-hover: #059862; --primary-soft: #e7f8f0; --ok: #00B86D;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.01em;
  background: var(--bg); color: var(--txt); -webkit-font-smoothing: antialiased;
}
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.brand .mark { width: 26px; height: 26px; border-radius: 7px; font-weight: 800; font-size: 14px; color: #04351f; background: linear-gradient(135deg, #00B86D, #00d4aa); display: inline-flex; align-items: center; justify-content: center; }
.av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: 0; }
.av.sm { width: 22px; height: 22px; font-size: 10px; }

/* ---- shared controls on the console */
body.console .muted { color: var(--txt-2); } body.console .small { font-size: 12px; }
body.console a { color: var(--info); font-weight: 600; }
body.console button { background: var(--green); color: #fff; border: 1px solid transparent; border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700; transition: background .13s, border-color .13s, transform .1s; }
body.console button:hover { background: var(--green-d); filter: none; }
body.console button:active { transform: translateY(1px); }
body.console button:disabled { opacity: .45; }
body.console button.ghost { background: var(--surface); color: var(--txt); border-color: var(--line); font-weight: 600; }
body.console button.ghost:hover { background: var(--line-2); border-color: #d7dbe1; }
body.console button.danger { background: var(--bad); }
body.console input, body.console select { background: var(--surface); border: 1px solid var(--line); color: var(--txt); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 14px; }
body.console input:focus, body.console select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,184,109,.12); }
body.console .err { color: var(--bad); font-weight: 600; }
body.console .pill { background: var(--green-t); color: var(--green-ink); font-weight: 700; font-size: 12px; padding: 3px 10px; font-variant-numeric: tabular-nums; }

/* ---- top bar */
body.console .topbar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 18px; min-height: 56px; gap: 10px; }
body.console .topbar #stats { background: var(--line-2); border-radius: 8px; padding: 6px 12px; color: var(--txt-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
body.console .topbar #who { color: var(--txt); font-weight: 700; font-size: 13px; }
body.console .topbar button.ghost { padding: 7px 11px; font-size: 12.5px; }
body.console .topbar #logout { color: var(--txt-2); }
body.console .menu { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); border-radius: 12px; padding: 6px; }
body.console .menuitem { color: var(--txt); font-weight: 600; background: transparent; border: 0; }
body.console .menuitem:hover { background: var(--line-2); }
body.console .menuitem.danger { color: var(--bad); background: transparent; }
body.console .menuearn { color: var(--txt-2); border-bottom: 1px solid var(--line-2); }

/* ---- waiting list */
body.console .layout { grid-template-columns: 324px 1fr; }
body.console .queue { background: var(--surface); border-right: 1px solid var(--line); padding: 14px 12px; }
body.console .queue h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--txt-3); font-weight: 700; margin: 2px 4px 12px; }
body.console .queue h3 .pill { letter-spacing: 0; }
body.console .qrow { border: 1px solid var(--line); border-radius: 12px; padding: 10px 10px 10px 11px; gap: 10px; background: var(--surface); transition: border-color .13s, box-shadow .13s; align-items: flex-start; }
body.console .qrow:hover { border-color: #cfe9dc; box-shadow: var(--shadow); }
body.console .qrow .av { margin-top: 1px; }
body.console .qrow button { align-self: center; padding: 7px 14px; }
body.console .qinfo { gap: 3px; min-width: 0; display: block; line-height: 1.35; }
body.console .qinfo b { font-size: 13.5px; font-weight: 700; margin-right: 4px; }
body.console .qinfo > span.muted { display: block; color: var(--txt-2); font-size: 11.5px; font-weight: 500; }
body.console .bot { background: #eef1f5; color: var(--txt-2); border-radius: 5px; padding: 1px 6px; font-size: 10.5px; font-weight: 700; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0; vertical-align: 1px; }
body.console .newbadge { background: var(--green-t); color: var(--green-ink); border: 1px solid #a9e5cd; border-radius: 20px; padding: 0 8px; font-size: 10.5px; font-weight: 700; }
body.console .qrow.qnew { border-color: #a9e5cd; background: #f7fcfa; box-shadow: inset 3px 0 0 var(--green); }

/* ---- open chats */
body.console .chats { background: var(--bg); }
body.console .tabs { background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px 14px; gap: 8px; }
body.console .tab { background: var(--surface); color: var(--txt-2); border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px 4px 5px; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
body.console .tab:hover { background: var(--line-2); }
body.console .tab.active { background: var(--green-t); border-color: #a9e5cd; color: var(--green-ink); font-weight: 700; }
body.console .tab .badge { background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 700; padding: 0 6px; margin-left: 0; }
body.console .empty { color: var(--txt-3); font-weight: 600; }
body.console .phead { background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 16px; }
body.console .pwho { display: flex; align-items: center; gap: 11px; min-width: 0; }
body.console .pwho b { font-size: 15px; font-weight: 800; }
body.console .pwho .pmeta { display: block; color: var(--txt-2); font-weight: 500; margin-top: 1px; }
body.console .phead .end { color: var(--bad); border-color: #ffccc7; background: #fff; }
body.console .phead .end:hover { background: #fff1f0; border-color: #ffa39e; }
body.console .msgs { background: #eef1f4; padding: 16px 18px; gap: 5px; }
body.console .bub { max-width: 66%; padding: 7px 11px 6px; border-radius: 12px; font-size: 14px; line-height: 1.4; box-shadow: 0 1px 1px rgba(20,25,40,.06); white-space: pre-wrap; overflow-wrap: anywhere; }
body.console .msg.in .bub { background: var(--surface); color: var(--txt); border-bottom-left-radius: 4px; }
body.console .msg.out .bub { background: #d9f5e6; color: #0b3d2a; border-bottom-right-radius: 4px; }
body.console .bub .t { color: var(--txt-3); font-size: 10.5px; margin-top: 2px; }
body.console .msg.out .bub .t { color: #3f7a5f; }
body.console .sysnote { background: #fdf3e3; border: 1px solid #f0dcb2; color: #8a5900; font-weight: 700; border-radius: 8px; }
body.console .media { border-radius: 9px; }
body.console .qbar { background: var(--surface); border-top: 1px solid var(--line); padding: 11px 16px; box-shadow: inset 3px 0 0 #7c5cff; }
body.console .qinfo2 { font-size: 13px; color: var(--txt); }
body.console .qinfo2 b { color: #6a4df0; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
body.console .composer { background: var(--surface); border-top: 1px solid var(--line); padding: 10px 14px; align-items: center; }
body.console .composer input.msgtext { border-radius: 20px; padding: 10px 16px; background: var(--raised); }
body.console .composer button { border-radius: 20px; padding: 10px 20px; }
body.console .attach { color: var(--txt-3); width: 38px; height: 38px; border-radius: 50%; justify-content: center; padding: 0; }
body.console .attach:hover { background: var(--line-2); color: var(--txt); }

/* ---- overlays: rate the chat, history, earnings, referrals, profile */
body.console #fbgate, body.console #histgate, body.console #profgate, body.console #refgate, body.console #earngate, body.console #pwgate { background: rgba(20,25,40,.45); }
body.console .fbbox, body.console .histbox { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); color: var(--txt); }
body.console .fbbox h3 { font-size: 16px; font-weight: 800; }
body.console .fbrow { border: 1px solid var(--line); border-radius: 10px; }
body.console .fbrow button { background: var(--surface); border: 1px solid var(--line); color: var(--txt); }
body.console .fbrow button:hover { background: var(--green-t); border-color: #a9e5cd; }
body.console .histhead { border-bottom: 1px solid var(--line); padding: 14px 18px; }
body.console .histhead b { font-size: 15px; font-weight: 800; }
body.console .histbody { padding: 16px 18px; }
body.console table { font-size: 13px; }
body.console thead th { text-transform: uppercase; font-size: 10.5px; letter-spacing: .5px; font-weight: 700; color: var(--txt-3); background: #f7f8fa; border-bottom: 1px solid var(--line); padding: 10px 12px; }
body.console tbody td { border-bottom: 1px solid var(--line-2); padding: 10px 12px; }
body.console tbody tr:last-child td { border-bottom: 0; }
body.console .histbody table { border: 1px solid var(--line); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
body.console .stats { gap: 10px; flex-wrap: wrap; }
body.console .stat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; text-align: left; flex: 1 1 140px; }
body.console .stat b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
body.console .stat span { color: var(--txt-3); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
body.console .datehdr { color: var(--txt-3); font-weight: 700; font-size: 11px; letter-spacing: .06em; }
body.console .chatrow { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
body.console .chatrow:hover { border-color: #a9e5cd; background: #f7fcfa; }
body.console .chatrow .gift, body.console .daytbl td .gift { color: #8a5900; background: #fdf3e3; border: 1px solid #f0dcb2; border-radius: 6px; padding: 0 8px; font-size: 11.5px; font-weight: 700; }
body.console .chatrow.gifted { border-color: #f0dcb2; background: #fffbf3; }
body.console .chatrow.gifted:hover { border-color: #e8c98a; }
body.console .histnav .msel { background: var(--surface); color: var(--txt); border: 1px solid var(--line); }
body.console .transcript { background: #eef1f4; border-radius: 10px; padding: 12px; }
body.console .editgrid label { color: var(--txt-2); font-weight: 600; font-size: 12px; }
body.console .toast { background: var(--surface); color: var(--txt); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-weight: 600; }
body.console .toast.ok { border-color: #a9e5cd; background: #f3fbf7; }
body.console .toast.err { border-color: #ffccc7; background: #fff1f0; }

/* ---- sign-in + admin pages pick up the same green and font */
body.auth-ui { background: radial-gradient(1100px 560px at 50% -12%, #ffffff 0%, #eef3f1 55%, #e6efeb 100%); }
body.auth-ui .login h1 { font-size: 22px; font-weight: 800; }
body.auth-ui .login .brand .mark { width: 32px; height: 32px; font-size: 16px; border-radius: 9px; }
body.auth-ui .login button, body.admin-ui button { font-weight: 700; }
body.admin-ui .topbar strong { font-size: 15px; }

@media (max-width: 820px) {
  body.console .layout { grid-template-columns: 1fr; }
  body.console .topbar { padding: 8px 12px; min-height: 0; }
  body.console .queue { background: var(--surface); box-shadow: var(--shadow-lg); }
  body.console .layout.queue-open .qbackdrop { background: rgba(20,25,40,.45); }
  body.console #waitBtn { margin-left: auto; }
  body.console .bub { max-width: 84%; }
  body.console .msgs { padding: 12px 10px; }
  body.console .composer button { padding: 10px 16px; }
}

/* ---- earnings & withdrawals */
body.console .histbox.wide { width: 680px; }
body.console .payform { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--raised); }
body.console .payform label, body.console .payquote label { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--txt-2); }
body.console .payact { display: flex; gap: 8px; justify-content: flex-end; }
body.console .payaddr { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
body.console .payaddr b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; letter-spacing: 0; }
body.console .waitc { color: #8a5900; font-weight: 600; }
body.console .paynote { border: 1px solid var(--line); background: var(--line-2); color: var(--txt-2); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }
body.console .paynote.good { border-color: #a9e5cd; background: #f3fbf7; color: var(--green-ink); }
body.console .paynote.bad, body.console .paynote.warn { border-color: #f0dcb2; background: #fdf3e3; color: #8a5900; }
body.console .payquote { border: 1px solid #a9e5cd; background: #f7fcfa; border-radius: 12px; padding: 16px; display: grid; gap: 10px; }
body.console .pq-big { font-size: 28px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
body.console table.pq { border: 0; font-size: 13px; } body.console table.pq td { border: 0; padding: 3px 0; } body.console table.pq td:first-child { color: var(--txt-2); width: 46%; } body.console table.pq td:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
body.console .pst { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 9px; border: 1px solid var(--line); background: var(--line-2); color: var(--txt-2); white-space: nowrap; }
body.console .pst.ok { color: #0a7d54; border-color: #a9e5cd; background: var(--green-t); } body.console .pst.go { color: #1d4fd7; border-color: #c7d7fb; background: #eef3ff; }
body.console .pst.wait { color: #8a5900; border-color: #f0dcb2; background: #fdf3e3; } body.console .pst.no { color: #cf1322; border-color: #ffccc7; background: #fff1f0; }
body.console .histbody .datehdr { margin-top: 18px; }