:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #4b5563;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --danger: #dc2626;
  --success: #15803d;
  --border: #e5e7eb;
  --shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  /* One UI stack app-wide (avoid mixing serif / monospace for body UI). */
  --font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-myanmar: "Myanmar Text", "Padauk", "Noto Sans Myanmar", var(--font-sans);
  /* Money and stock figures: red accent (tbody / inputs / main board values). */
  --amount-color: #b91c1c;
  /* MAIN shell columns (2D + 3D): keep parity between tabs. */
  --main-board-shell-left-min: 11rem;
  --main-board-shell-left-max: 14rem;
  --main-board-shell-right-min: 6.5rem;
  --main-board-shell-right-max: 9rem;
  /* UX-10 / UX-10c — shared desktop canvas min (2D + 3D MAIN same width). */
  --sys2d-desktop-canvas-min: calc(var(--main-board-shell-left-min) + (4 * 10.5rem + 3 * 0.18rem) + var(--main-board-shell-right-min) + 1rem);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: linear-gradient(160deg, #eef4ff 0%, var(--bg) 55%);
  color: var(--text);
  min-height: 100vh;
  scrollbar-gutter: stable both-edges;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

/* Typography — one UI stack (Segoe UI / system-ui); Myanmar only on Burmese prose */
body.app-logged-in,
body.app-logged-in .legacy-dashboard,
body.app-logged-in .admin-page,
body.app-logged-in .legacy-card,
body.app-logged-in .summary-page,
body.app-logged-in .agent-summary-page,
body.app-logged-in .main-board-shell,
body.app-logged-in .member-intake-root,
body.app-logged-in .table-wrap table,
body.app-logged-in .agent-summary-grid-table {
  font-family: var(--font-sans);
  font-synthesis: none;
}

body.app-logged-in [lang="my"],
body.app-logged-in .summary-page__w-num-scope,
body.app-logged-in .agent-summary-page__win-hint,
body.app-logged-in .member-manual-comment-row,
body.app-logged-in .member-manual-comment-label {
  font-family: var(--font-myanmar);
}

body.app-logged-in .agent-summary-grid-table,
body.app-logged-in .member-chat-grid,
body.app-logged-in .main-board-shell .mb-cell,
body.app-logged-in .member-na-value,
body.app-logged-in input[type="text"],
body.app-logged-in input[type="password"],
body.app-logged-in input[type="number"] {
  font-variant-numeric: tabular-nums;
}

.app-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
}

/* UX-14: optional fallback mode by policy — keep desktop canvas on touch devices via pan + pinch. */
@media (max-width: 1023px), ((hover: none) and (pointer: coarse)) {
  body.app-role-admin.app-logged-in,
  body.app-role-agent.app-logged-in {
    overflow-x: auto !important;
    touch-action: pan-x pan-y pinch-zoom !important;
  }

  body.app-role-admin.app-logged-in .app-shell,
  body.app-role-agent.app-logged-in .app-shell {
    width: 1200px !important;
    min-width: 1200px !important;
    max-width: 1200px !important;
  }

  body.app-role-admin.app-logged-in .container,
  body.app-role-agent.app-logged-in .container,
  body.app-role-admin.app-logged-in #adminDashboard,
  body.app-role-agent.app-logged-in #agentDashboard {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.topbar h1 {
  margin: 0;
  font-size: 1.35rem;
}

.container {
  display: grid;
  gap: 1rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1rem;
}

.auth-card {
  max-width: 460px;
  margin: 3rem auto 0;
}

.auth-card--minimal {
  margin-top: min(12vh, 4rem);
}

.login-remember-group {
  margin-top: 0.25rem;
}

.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: #334155;
}

.login-remember input[type="checkbox"] {
  width: 0.9rem;
  height: 0.9rem;
}

.login-remember__label {
  user-select: none;
}

.login-device-panel {
  margin: 0.35rem 0 0.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  overflow: hidden;
}

.login-device-panel__title {
  margin: 0;
  padding: 0.4rem 0.65rem 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}

.login-device-panel__body {
  max-height: 6.75rem;
  overflow-y: auto;
  padding: 0.35rem 0.65rem 0.45rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #475569;
  -webkit-overflow-scrolling: touch;
}

.login-device-panel__line {
  margin: 0.2rem 0;
  padding: 0.2rem 0.45rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.login-device-panel__line--hint {
  background: #ecfdf5;
  border-color: #99f6e4;
  color: #0f766e;
}

.login-device-panel__line--empty {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-style: italic;
  padding: 0;
}

.login-device-panel__actions {
  padding: 0 0.5rem 0.5rem;
}

.login-member-context {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: #ecfdf5;
  color: #0f766e;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
}

.login-member-context.hidden {
  display: none;
}

/* S-05 — Viber/FB in-app: prompt to open member link in Chrome first */
.member-inapp-browser-gate {
  margin: 0 0 1rem;
  padding: 1rem 1rem 0.85rem;
  border-radius: 12px;
  border: 2px solid #f97316;
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.15);
}

.member-inapp-browser-gate.hidden {
  display: none !important;
}

.member-inapp-browser-gate__title {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  font-weight: 800;
  color: #9a3412;
  line-height: 1.3;
}

.member-inapp-browser-gate__lead {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #7c2d12;
}

.member-inapp-browser-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.member-inapp-browser-gate__continue {
  font-size: 0.78rem;
  opacity: 0.92;
}

.member-inapp-browser-gate__status {
  margin: 0.65rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  min-height: 1.2rem;
}

.member-inapp-browser-gate__status--ok {
  color: #047857;
  font-weight: 600;
}

.member-inapp-browser-gate__status--warn {
  color: #b45309;
}

body.member-inapp-browser-gate-active #loginForm.hidden {
  display: none !important;
}

.login-entry-split {
  margin-top: 0.35rem;
}

.login-entry-split.hidden {
  display: none;
}

.login-entry-split__row {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 100%;
}

.login-entry-split__prefix {
  flex: 0 0 auto;
  padding: 0.55rem 0.65rem;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  color: #111827;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-right: 0;
  border-radius: 0.375rem 0 0 0.375rem;
  user-select: none;
}

.login-entry-split__row input {
  flex: 1 1 auto;
  min-width: 4.5rem;
  border-radius: 0 0.375rem 0.375rem 0;
}

#loginUsernameGroup #username.hidden {
  display: none;
}

#loginUsernameGroup label[for="username"].hidden {
  display: none;
}

body:not(.app-logged-in) .app-shell > header.topbar {
  display: none;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.9rem;
}

label {
  margin-bottom: 0.35rem;
  color: #374151;
  font-weight: 600;
  font-size: 0.92rem;
}

input,
select {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  font-size: 0.95rem;
  background-color: #fff;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.grid-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.form-actions {
  grid-column: 1 / -1;
}

.login-open-main-row {
  margin-bottom: 0.5rem;
}

.login-staff-bypass {
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.login-staff-bypass.hidden {
  display: none;
}

.login-staff-bypass__hint {
  font-size: 0.82rem;
  line-height: 1.35;
}

.login-entry-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  margin: 0 0 1rem;
}

.login-entry-links__item {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f766e;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

.login-entry-links__item:hover {
  background: #ecfeff;
  border-color: #99f6e4;
}

.login-entry-links__item.is-active {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
}

.login-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: #374151;
  cursor: pointer;
  line-height: 1.35;
}

.login-checkbox-label input[type="checkbox"] {
  width: auto;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.btn {
  border: 0;
  border-radius: 10px;
  padding: 0.65rem 0.95rem;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s ease;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-secondary {
  background: #111827;
  color: #fff;
}

.btn-secondary:hover {
  background: #374151;
}

.btn-danger {
  background: #dc2626;
  color: #fff;
}

.btn-danger:hover {
  background: #b91c1c;
}

.system-pause-btn--active {
  background: #dc2626 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.28), 0 0 14px rgba(220, 38, 38, 0.45);
}

.system-pause-btn--active:hover {
  background: #ef4444 !important;
}

.main-board-rt-status {
  margin: 0.35rem 0 0.5rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
  line-height: 1.35;
  border-radius: 6px;
  min-height: 1.2em;
}

.main-board-rt-status.hidden {
  display: none;
}

.main-board-rt-status--ok {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #6ee7b7;
}

.main-board-rt-status--warn {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

#sys3dSystemPauseBtn,
#adminMainBoardPage #adminMainBoardSystemPauseBtn {
  padding: 0.3rem 0.5rem;
  font-size: 0.74rem;
  line-height: 1;
  border-radius: 7px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Admin 2D MAIN footer grand boxes — 3D parity (box 1 + box 3 at 3/5 width) */
#adminMainBoardPage .main-board-grand-input--7 {
  width: calc((14ch + 0.7rem) * 0.6);
  max-width: 100%;
}

#adminMainBoardPage .main-board-grand-input--5 {
  width: calc((10ch + 0.7rem) * 0.6);
}

#adminMainBoardPage .agent-main-board-grand-sum-wrap {
  overflow: visible;
}

#mainBoardSystemPauseDialog,
#agentMainBoardSystemPauseDialog,
#sys3dSystemPauseDialog {
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  width: min(92vw, 420px);
  text-align: center;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.56), rgba(239, 68, 68, 0.34));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  box-shadow: 0 16px 36px rgba(239, 68, 68, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  animation: sysPauseDialogDrop 160ms ease-out;
}

@keyframes sysPauseDialogDrop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.message {
  min-height: 1.2rem;
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.message.error {
  color: var(--danger);
}

.message.success {
  color: var(--success);
}

.muted {
  color: var(--muted);
}

.hidden {
  display: none !important;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

th,
td {
  text-align: left;
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0.5rem;
  font-size: 0.92rem;
}

th {
  color: #374151;
  font-weight: 700;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.8rem;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.subnav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pill {
  border: 1px solid var(--border);
  background: #fff;
  color: #111827;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}

.pill:hover {
  border-color: #cbd5e1;
}

.pill-active {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.accordion {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.acc-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0.9rem;
  border: 0;
  background: #f8fafc;
  cursor: pointer;
  font-weight: 800;
  color: #111827;
}

.acc-trigger:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.acc-chevron {
  transition: transform 0.18s ease;
}

.acc-trigger[aria-expanded="true"] .acc-chevron {
  transform: rotate(180deg);
}

.acc-panel-inner {
  padding: 0.75rem 0.9rem;
  display: grid;
  gap: 0.45rem;
}

.link-btn {
  text-align: left;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  font-weight: 600;
  color: #111827;
}

.link-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.legacy-dashboard {
  border: 1px solid #9ca3af;
  background: #dce7f7;
  border-radius: 6px;
  overflow: hidden;
}

.legacy-topbar {
  background: linear-gradient(180deg, #0f3567 0%, #071c3d 100%);
  color: #fff;
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 0.7rem;
  border-bottom: 2px solid #1e3a8a;
}

.legacy-logo {
  font-weight: 800;
  color: #f59e0b;
  font-size: 1.2rem;
}

.legacy-ticker {
  background: #243b6b;
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  font-size: 0.85rem;
  color: #facc15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legacy-right-tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
}

.legacy-signout {
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.legacy-body {
  display: grid;
  grid-template-columns: 178px 1fr;
  min-height: 520px;
}

/* Agent: duplicate title removed — hide global topbar; agent bar = ACCOUNT | MAIN + tools only */
body.app-role-agent .app-shell > header.topbar {
  display: none;
}

/* Admin: IBET ADMIN legacy topbar only (no duplicate User Management Dashboard row) */
body.app-role-admin .app-shell > header.topbar {
  display: none;
}

/* Member: no global "User Management Dashboard" title — nav + meta strip only */
body.app-role-member .app-shell > header.topbar {
  display: none;
}

/* Agent: topbar = IBET + ACCOUNT|MAIN | ticker | tools */
.legacy-dashboard--agent .legacy-topbar--agent {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.55rem 0.8rem;
  width: 100%;
  padding: 0.4rem 0.7rem;
}

/* UX-18: on mobile/narrow screens, keep IBET heading topbar pinned at top. */
@media (max-width: 1023px), ((hover: none) and (pointer: coarse)) {
  body.app-logged-in.app-role-admin .legacy-dashboard--admin .legacy-topbar--admin,
  body.app-logged-in.app-role-agent .legacy-dashboard--agent .legacy-topbar--agent {
    position: sticky;
    top: 0;
    z-index: 85;
    box-shadow: 0 2px 6px rgba(2, 6, 23, 0.22);
  }
}

.legacy-dashboard--agent .legacy-topbar-agent-brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.legacy-dashboard--agent .legacy-topbar-agent-brand .legacy-logo {
  flex-shrink: 0;
}

.legacy-dashboard--agent .agent-topbar-root-tabs {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  overflow: visible;
  background: rgba(15, 23, 42, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.legacy-dashboard--agent .agent-topbar-root-tab {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0.32rem 0.55rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: #94a3b8;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 1.85rem;
  white-space: nowrap;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.2s ease,
    text-shadow 0.2s ease;
}

.legacy-dashboard--agent .agent-topbar-root-tab + .agent-topbar-root-tab {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.legacy-dashboard--agent .agent-topbar-root-tab:not(.is-active):hover {
  color: #e2e8f0;
  background: rgba(51, 65, 85, 0.45);
}

.legacy-dashboard--agent .agent-topbar-root-tab.is-active {
  position: relative;
  z-index: 1;
  color: #0f172a;
  background: linear-gradient(180deg, #fff9c4 0%, #fde047 38%, #facc15 72%, #eab308 100%);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.75);
  box-shadow:
    0 0 10px rgba(250, 204, 21, 0.95),
    0 0 22px rgba(250, 204, 21, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(180, 83, 9, 0.25);
}

.legacy-dashboard--agent .agent-topbar-root-tab.is-active:focus-visible {
  outline: 2px solid #fef08a;
  outline-offset: 2px;
}

.legacy-dashboard--agent .agent-topbar-root-tab--3d:not(.is-active) {
  color: #94a3b8;
}

.agent-main-board-3d-placeholder {
  margin: 0.5rem;
  max-width: 36rem;
}

.agent-main-board-3d-placeholder h2 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.legacy-dashboard--agent .legacy-ticker--agent {
  min-width: 0;
  background: #243b6b;
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  font-size: 0.85rem;
  color: #facc15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  line-height: 1.35;
}

.legacy-dashboard--agent .legacy-topbar--agent .legacy-right-tools {
  justify-self: end;
}

/* Admin + agent: topbar — title absolute top; IBET/tabs/tools on bottom row (W-09) */
.legacy-dashboard--admin .legacy-topbar--admin,
.legacy-dashboard--agent .legacy-topbar--agent {
  --admin-topbar-btn-h: 1.34rem;
  --admin-topbar-title-h: 0.72rem;
  --admin-topbar-pad-top: 0.92rem;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand . tools";
  grid-template-rows: minmax(var(--admin-topbar-btn-h), auto);
  align-items: end;
  align-content: end;
  column-gap: 0.5rem;
  width: 100%;
  padding: var(--admin-topbar-pad-top) 0.55rem 0.1rem;
  min-height: calc(var(--admin-topbar-pad-top) + var(--admin-topbar-btn-h) + 0.1rem);
  height: auto;
  max-height: none;
  box-sizing: border-box;
  border-bottom: 1px solid #1e3a8a;
  overflow: visible;
}

.legacy-dashboard--admin .legacy-topbar-admin-brand,
.legacy-dashboard--agent .legacy-topbar-admin-brand {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.35rem 0.45rem;
  min-width: 0;
  align-self: end;
  grid-area: brand;
  height: var(--admin-topbar-btn-h);
  margin: 0;
}

.legacy-dashboard--admin .legacy-topbar-admin-title,
.legacy-dashboard--agent .legacy-topbar-admin-title {
  position: absolute;
  top: 0.12rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 0.64rem;
  color: #facc15;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  height: auto;
  pointer-events: none;
}

.legacy-dashboard--admin .legacy-topbar-admin-tools,
.legacy-dashboard--agent .legacy-topbar-admin-tools {
  grid-area: tools;
  justify-self: end;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  height: var(--admin-topbar-btn-h);
  max-height: var(--admin-topbar-btn-h);
  font-size: 0.74rem;
  line-height: 1;
}

.legacy-dashboard--admin .legacy-topbar-admin-tools > span,
.legacy-dashboard--agent .legacy-topbar-admin-tools > span {
  display: inline-flex;
  align-items: center;
  height: var(--admin-topbar-btn-h);
  line-height: 1;
}

.legacy-dashboard--admin .legacy-topbar-admin-tools .legacy-signout,
.legacy-dashboard--agent .legacy-topbar-admin-tools .legacy-signout {
  margin: 0;
  padding: 0 0.48rem;
  min-height: 0;
  height: var(--admin-topbar-btn-h);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  font-size: 0.66rem;
  line-height: 1;
  border-radius: 4px;
}

.legacy-dashboard--admin .legacy-topbar-admin-brand .legacy-logo,
.legacy-dashboard--agent .legacy-topbar-admin-brand .legacy-logo {
  flex-shrink: 0;
  font-size: 0.76rem;
  line-height: 1;
  height: var(--admin-topbar-btn-h);
  display: inline-flex;
  align-items: center;
}

.legacy-dashboard--admin .admin-topbar-root-tabs,
.legacy-dashboard--agent .admin-topbar-root-tabs {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  gap: 0.42rem;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.legacy-dashboard--admin .admin-topbar-root-tab,
.legacy-dashboard--agent .admin-topbar-root-tab {
  appearance: none;
  border: 1px solid #b7dfc5;
  margin: 0;
  padding: 0 0.82rem;
  border-radius: 5px;
  font: inherit;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: #14532d;
  background: #b7d7bf;
  opacity: 0.9;
  cursor: pointer;
  touch-action: manipulation;
  box-sizing: border-box;
  height: var(--admin-topbar-btn-h);
  min-height: 0;
  min-width: 5.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 0 0 0 transparent;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.legacy-dashboard--admin .admin-topbar-root-tab + .admin-topbar-root-tab,
.legacy-dashboard--agent .admin-topbar-root-tab + .admin-topbar-root-tab {
  border-left: 1px solid #b7dfc5;
  margin-left: -1px;
}

.legacy-dashboard--admin .admin-topbar-root-tab:not(.is-active):hover,
.legacy-dashboard--agent .admin-topbar-root-tab:not(.is-active):hover {
  color: #14532d;
  background: #c3e6cb;
  border-color: #9fd4ad;
}

.legacy-dashboard--admin .admin-topbar-root-tab.is-active,
.legacy-dashboard--agent .admin-topbar-root-tab.is-active {
  position: relative;
  z-index: 1;
  color: #022c22;
  background: #f0fdf4;
  border-color: #10b981;
  opacity: 1;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 3px rgba(16, 185, 129, 0.34);
}

.legacy-dashboard--admin .admin-topbar-root-tab.is-active:focus-visible,
.legacy-dashboard--agent .admin-topbar-root-tab.is-active:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 2px;
}

.legacy-dashboard--admin .admin-topbar-root-tab--3d:not(.is-active),
.legacy-dashboard--agent .admin-topbar-root-tab--3d:not(.is-active) {
  color: #14532d;
}

.admin-main-board-3d-placeholder {
  margin: 0.5rem;
  max-width: 36rem;
}

.admin-main-board-3d-placeholder h2 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.legacy-dashboard--admin {
  --admin-nav-sidebar-w: 148px;
  display: flex;
  flex-direction: column;
  background: #eef2f7;
  border-color: #c5ced8;
}

.legacy-dashboard--admin .legacy-topbar--admin {
  flex: 0 0 auto;
}

.legacy-dashboard--admin .legacy-body--admin {
  display: grid;
  grid-template-columns: var(--admin-nav-sidebar-w) minmax(0, 1fr);
  grid-template-areas: "sidebar main";
  flex: 1 1 auto;
  min-height: 520px;
  align-items: stretch;
}

.legacy-dashboard--admin .legacy-sidebar--admin {
  grid-area: sidebar;
  width: var(--admin-nav-sidebar-w);
  max-width: var(--admin-nav-sidebar-w);
  min-width: var(--admin-nav-sidebar-w);
  align-self: stretch;
}

.legacy-dashboard--admin .legacy-body--admin .legacy-content {
  grid-area: main;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 0.35rem 0.45rem;
}

/* Agent dashboard shell — same flex + sidebar grid as admin (W-09) */
.legacy-dashboard--agent {
  --admin-nav-sidebar-w: 148px;
  display: flex;
  flex-direction: column;
  background: #eef2f7;
  border-color: #c5ced8;
}

.legacy-dashboard--agent .legacy-topbar--agent {
  flex: 0 0 auto;
}

.legacy-dashboard--agent .legacy-body--agent {
  display: grid;
  grid-template-columns: var(--admin-nav-sidebar-w) minmax(0, 1fr);
  grid-template-areas: "sidebar main";
  flex: 1 1 auto;
  min-height: 520px;
  align-items: stretch;
}

.legacy-dashboard--agent .legacy-sidebar--agent {
  grid-area: sidebar;
  width: var(--admin-nav-sidebar-w);
  max-width: var(--admin-nav-sidebar-w);
  min-width: var(--admin-nav-sidebar-w);
  align-self: stretch;
}

.legacy-dashboard--agent .legacy-body--agent .legacy-content {
  grid-area: main;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 0.35rem 0.45rem;
}

/* Admin + agent sidebar — Windows Explorer tree (W-09); must beat .legacy-sidebar blue below */
.legacy-dashboard--admin .legacy-sidebar.legacy-sidebar--admin,
.legacy-dashboard--agent .legacy-sidebar.legacy-sidebar--agent {
  background: #f7f8fa;
  border-right: 1px solid #e6e8ec;
  padding: 0.2rem 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.legacy-sidebar--admin .admin-win-tree , .legacy-sidebar--agent .admin-win-tree {
  display: block;
  width: 100%;
}

.legacy-sidebar--admin .admin-win-tree__list,
.legacy-sidebar--agent .admin-win-tree__list {
  list-style: none;
  margin: 0;
  padding: 0.15rem 0;
}

.legacy-sidebar--admin .admin-win-tree__node , .legacy-sidebar--agent .admin-win-tree__node {
  margin: 0;
  padding: 0;
}

/* Reset global .legacy-menu-item bar style inside admin tree sidebar */
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row {
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  color: #4a5568;
  font-size: 0.74rem;
  font-weight: 400;
  padding: 0.16rem 0.22rem 0.16rem 0.12rem;
  min-height: 1.5rem;
  cursor: default;
  position: static;
}

.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.with-submenu {
  padding-right: 0.35rem;
}

.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.with-submenu[aria-expanded="true"] {
  box-shadow: none;
}

.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.active:not([class*="legacy-nav-toggle--"]) {
  background: #e3ebf3;
  font-weight: 600;
}

.legacy-sidebar--admin .admin-win-tree__row,
.legacy-sidebar--agent .admin-win-tree__row {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  width: 100%;
  min-height: 1.5rem;
  margin: 0;
  padding: 0.16rem 0.22rem 0.16rem 0.12rem;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  color: #4a5568;
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  cursor: default;
}

.legacy-sidebar--admin .admin-win-tree__row:hover , .legacy-sidebar--agent .admin-win-tree__row:hover {
  background: #eef3f8;
}

.legacy-sidebar--admin .admin-win-tree__row.active:not([class*="legacy-nav-toggle--"]) , .legacy-sidebar--agent .admin-win-tree__row.active:not([class*="legacy-nav-toggle--"]) {
  background: #e3ebf3;
  font-weight: 600;
}

.legacy-sidebar--admin .admin-win-tree__row.with-submenu::after , .legacy-sidebar--agent .admin-win-tree__row.with-submenu::after {
  display: none;
}

.legacy-sidebar--admin .admin-win-tree__caret , .legacy-sidebar--agent .admin-win-tree__caret {
  flex: 0 0 0.8rem;
  width: 0.8rem;
  height: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9a9a9a;
  font-size: 0.58rem;
  line-height: 1;
  user-select: none;
}

.legacy-sidebar--admin .admin-win-tree__row--branch .admin-win-tree__caret::before , .legacy-sidebar--agent .admin-win-tree__row--branch .admin-win-tree__caret::before {
  content: "▶";
}

.legacy-sidebar--admin .admin-win-tree__row--branch[aria-expanded="true"] .admin-win-tree__caret::before , .legacy-sidebar--agent .admin-win-tree__row--branch[aria-expanded="true"] .admin-win-tree__caret::before {
  content: "▼";
  font-size: 0.52rem;
}

.legacy-sidebar--admin .admin-win-tree__row--leaf .admin-win-tree__caret::before , .legacy-sidebar--agent .admin-win-tree__row--leaf .admin-win-tree__caret::before {
  content: "";
}

.legacy-sidebar--admin .admin-win-tree__label , .legacy-sidebar--agent .admin-win-tree__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-sidebar--admin .admin-win-tree__children , .legacy-sidebar--agent .admin-win-tree__children {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.legacy-sidebar--admin .admin-win-tree__children.hidden , .legacy-sidebar--agent .admin-win-tree__children.hidden {
  display: none;
}

.legacy-sidebar--admin .legacy-nav-panel, .legacy-sidebar--agent .legacy-nav-panel--period,
.legacy-sidebar--admin .legacy-nav-panel, .legacy-sidebar--agent .legacy-nav-panel--member,
.legacy-sidebar--admin .legacy-nav-panel, .legacy-sidebar--agent .legacy-nav-panel--summary,
.legacy-sidebar--admin .legacy-nav-panel, .legacy-sidebar--agent .legacy-nav-panel--report,
.legacy-sidebar--admin .legacy-nav-panel, .legacy-sidebar--agent .legacy-nav-panel--delete-data,
.legacy-sidebar--admin .legacy-nav-panel, .legacy-sidebar--agent .legacy-nav-panel--payment {
  border-left: 0;
}

.legacy-sidebar--admin .legacy-nav-toggle, .legacy-sidebar--agent .legacy-nav-toggle {
  border-left: 0;
}

.legacy-sidebar--admin .admin-win-tree__leaf , .legacy-sidebar--agent .admin-win-tree__leaf {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 1.45rem;
  margin: 0;
  padding: 0.14rem 0.2rem 0.14rem 1.28rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #4a5568;
  font-size: 0.74rem;
  font-weight: 400;
  text-align: left;
  cursor: default;
}

.legacy-sidebar--admin .legacy-submenu-item[data-stock-subpage],
.legacy-sidebar--admin .legacy-submenu-item[data-admin-subpage] {
  cursor: pointer;
}

.legacy-sidebar--admin .admin-win-tree__leaf::before , .legacy-sidebar--agent .admin-win-tree__leaf::before {
  content: "";
  position: absolute;
  left: 0.82rem;
  width: 0.5rem;
  height: 0.62rem;
  background: linear-gradient(180deg, #4a90d9 0%, #2b6cb0 100%);
  border-radius: 1px;
  opacity: 0.85;
  pointer-events: none;
}

.legacy-sidebar--admin .admin-win-tree__leaf , .legacy-sidebar--agent .admin-win-tree__leaf {
  position: relative;
}

.legacy-sidebar--admin .admin-win-tree__leaf:hover , .legacy-sidebar--agent .admin-win-tree__leaf:hover {
  background: #eef3f8;
}

.legacy-sidebar--admin .admin-win-tree__leaf.active , .legacy-sidebar--agent .admin-win-tree__leaf.active {
  background: #e3ebf3;
  box-shadow: none;
  border: 0;
  font-weight: 600;
}

/* Admin dashboard tree — section heading tints (PERIOD, MEMBER, …) */
.legacy-sidebar--admin .admin-win-tree__node + .admin-win-tree__node , .legacy-sidebar--agent .admin-win-tree__node + .admin-win-tree__node {
  margin-top: 0.04rem;
}

.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--account, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--account,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--account {
  background: #f1f5f9;
  color: #475569;
}

.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--period, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--period,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--period {
  background: #e8f0fc;
  color: #1e40af;
}

.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--member, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--member,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--member {
  background: #e8f5e9;
  color: #166534;
}

.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--summary, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--summary,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--summary {
  background: #fff8e6;
  color: #92400e;
}

.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--report, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--report,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--report {
  background: #ede9fe;
  color: #5b21b6;
}

.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--delete-data, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--delete-data,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--delete-data {
  background: #feeaea;
  color: #991b1b;
}

.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--payment, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--payment,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--payment {
  background: #e6f7f5;
  color: #0f766e;
}

.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--account:hover, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--account:hover,
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--period:hover, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--period:hover,
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--member:hover, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--member:hover,
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--summary:hover, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--summary:hover,
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--report:hover, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--report:hover,
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--delete-data:hover, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--delete-data:hover,
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--payment:hover, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--payment:hover,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--account:hover,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--period:hover,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--member:hover,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--summary:hover,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--report:hover,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--delete-data:hover,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--payment:hover {
  filter: brightness(0.97);
}

.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--period[aria-expanded="true"], .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--period[aria-expanded="true"],
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--member[aria-expanded="true"], .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--member[aria-expanded="true"],
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--summary[aria-expanded="true"], .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--summary[aria-expanded="true"],
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--report[aria-expanded="true"], .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--report[aria-expanded="true"],
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--delete-data[aria-expanded="true"], .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--delete-data[aria-expanded="true"],
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--payment[aria-expanded="true"], .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--payment[aria-expanded="true"],
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.with-submenu.legacy-nav-toggle--period[aria-expanded="true"],
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.with-submenu.legacy-nav-toggle--member[aria-expanded="true"],
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.with-submenu.legacy-nav-toggle--summary[aria-expanded="true"],
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.with-submenu.legacy-nav-toggle--report[aria-expanded="true"],
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.with-submenu.legacy-nav-toggle--delete-data[aria-expanded="true"],
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.with-submenu.legacy-nav-toggle--payment[aria-expanded="true"] {
  filter: brightness(0.94);
  font-weight: 600;
}

.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--account.active, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--account.active,
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--period.active, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--period.active,
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--member.active, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--member.active,
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--summary.active, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--summary.active,
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--report.active, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--report.active,
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--delete-data.active, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--delete-data.active,
.legacy-sidebar--admin .admin-win-tree__row.legacy-nav-toggle--payment.active, .legacy-sidebar--agent .admin-win-tree__row.legacy-nav-toggle--payment.active,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--account.active,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--period.active,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--member.active,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--summary.active,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--report.active,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--delete-data.active,
.legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row.legacy-nav-toggle--payment.active {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
  font-weight: 600;
}

/* Admin MAIN tab: hide left sidebar (W-09) */
.legacy-dashboard--admin.legacy-dashboard--admin--nav-hidden .legacy-sidebar--admin {
  display: none;
}

.legacy-dashboard--admin.legacy-dashboard--admin--nav-hidden .legacy-body--admin {
  grid-template-columns: 1fr;
}

.legacy-dashboard--admin.legacy-dashboard--admin--nav-hidden #adminMainBoardPage .main-board-shell {
  --main-board-shell-cols: minmax(var(--main-board-shell-left-min), 1.2fr) minmax(0, 5.5fr)
    minmax(var(--main-board-shell-right-min), 1fr);
  grid-template-columns: var(--main-board-shell-cols) !important;
}

.legacy-dashboard--agent .agent-account-shell.legacy-card {
  margin-bottom: 0.35rem;
}

.legacy-dashboard--agent .agent-account-subnav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  border: 1px solid #a9bad2;
  border-radius: 6px;
  overflow: hidden;
  margin: 0 0 0.45rem;
}

.legacy-dashboard--agent .agent-account-subnav .agent-account-subnav__btn {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 0;
  border-right: 1px solid #cbd5e1;
  justify-content: center;
  text-align: center;
}

.legacy-dashboard--agent .agent-account-subnav .agent-account-subnav__btn:last-child {
  border-right: 0;
}

.legacy-dashboard--agent .agent-account-subnav .agent-account-subnav__btn.active {
  border-radius: 0;
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.35);
}

/* Agent MAIN tab: hide left sidebar; ACCOUNT and other pages show sidebar (W-09) */
.legacy-dashboard--agent.legacy-dashboard--agent--nav-hidden .legacy-sidebar--agent {
  display: none;
}

.legacy-dashboard--agent.legacy-dashboard--agent--nav-hidden .legacy-body--agent {
  grid-template-columns: 1fr;
}

.legacy-dashboard--agent.legacy-dashboard--agent--nav-hidden #agentMainBoardPage .main-board-shell,
.legacy-dashboard--agent.legacy-dashboard--agent--nav-hidden #agentMainBoard3dPage .sys3d-board-shell.main-board-shell {
  --main-board-shell-cols: minmax(var(--main-board-shell-left-min), 1.2fr) minmax(0, 5.5fr)
    minmax(var(--main-board-shell-right-min), 1fr);
  grid-template-columns: var(--main-board-shell-cols) !important;
}

#agentDashboard:has(#agentMainBoardPage:not(.hidden)) .admin-main-board-page-head,
#agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) .admin-main-board-page-head {
  display: none;
}

/* Agent root tabs (dashboard | 2D main | 3D main): same viewport shell as admin 3D MAIN */
#agentDashboard:has(#agentMainBoardPage:not(.hidden)) .legacy-sidebar,
#agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) .legacy-sidebar,
.legacy-dashboard--agent.legacy-dashboard--agent--nav-hidden .legacy-sidebar--agent {
  display: none;
}

/* Agent dashboard tab: keep Windows tree sidebar visible (W-09) */
#agentDashboard[data-agent-root-view="dashboard"] .legacy-sidebar--agent {
  display: flex;
  flex-direction: column;
}

#agentDashboard[data-agent-root-view="dashboard"] .legacy-body--agent {
  display: grid;
  grid-template-columns: var(--admin-nav-sidebar-w) minmax(0, 1fr);
  grid-template-areas: "sidebar main";
}

#agentDashboard:has(#agentMainBoardPage:not(.hidden)) .legacy-body,
#agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) .legacy-body,
.legacy-dashboard--agent.legacy-dashboard--agent--nav-hidden .legacy-body--agent {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: none;
  grid-template-areas: none;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

#agentDashboard:has(#agentMainBoardPage:not(.hidden)) #agentMainBoardPage .main-board-shell,
#agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) #agentMainBoard3dPage .sys3d-board-shell.main-board-shell,
.legacy-dashboard--agent.legacy-dashboard--agent--nav-hidden #agentMainBoardPage .main-board-shell,
.legacy-dashboard--agent.legacy-dashboard--agent--nav-hidden #agentMainBoard3dPage .sys3d-board-shell.main-board-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  justify-items: stretch;
  --main-board-shell-cols: minmax(var(--main-board-shell-left-min), 1.2fr) minmax(0, 5.5fr)
    minmax(var(--main-board-shell-right-min), 1fr);
  grid-template-columns: var(--main-board-shell-cols) !important;
}

#agentDashboard:has(#agentMainBoardPage:not(.hidden)) .legacy-body,
#agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) .legacy-body {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

#agentDashboard:has(#agentMainBoardPage:not(.hidden)) .legacy-content,
#agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) .legacy-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0.08rem 0.12rem 0.1rem 0;
  overflow: hidden;
  align-items: stretch;
  background: #eef2f7;
}

/* MAIN tab: never stack member/stock pages under the board (scroll bleed) */
#adminDashboard:has(#adminMainBoardPage:not(.hidden)) .legacy-content > .admin-page:not(#adminMainBoardPage),
#adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) .legacy-content > .admin-page:not(#adminMainBoard3dPage),
#agentDashboard:has(#agentMainBoardPage:not(.hidden)) .legacy-content > .admin-page:not(#agentMainBoardPage),
#agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) .legacy-content > .admin-page:not(#agentMainBoard3dPage) {
  display: none !important;
}

/* Admin root tabs (dashboard | 2D main | 3D main): shared viewport shell — match 2D main */
#adminDashboard:has(#adminMainBoardPage:not(.hidden)) .legacy-sidebar,
#adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) .legacy-sidebar,
.legacy-dashboard--admin.legacy-dashboard--admin--nav-hidden .legacy-sidebar--admin {
  display: none;
}

/* Admin dashboard tab: keep Windows tree sidebar visible (W-09) */
#adminDashboard[data-admin-root-view="dashboard"] .legacy-sidebar--admin {
  display: flex;
  flex-direction: column;
}

#adminDashboard[data-admin-root-view="dashboard"] .legacy-body--admin {
  display: grid;
  grid-template-columns: var(--admin-nav-sidebar-w) minmax(0, 1fr);
  grid-template-areas: "sidebar main";
}

#adminDashboard:has(#adminMainBoardPage:not(.hidden)) .legacy-body,
#adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) .legacy-body,
.legacy-dashboard--admin.legacy-dashboard--admin--nav-hidden .legacy-body--admin {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: none;
  grid-template-areas: none;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

#adminDashboard:has(#adminMainBoardPage:not(.hidden)) #adminMainBoardPage .main-board-shell,
#adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) #adminMainBoard3dPage .sys3d-board-shell.main-board-shell,
.legacy-dashboard--admin.legacy-dashboard--admin--nav-hidden #adminMainBoardPage .main-board-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  justify-items: stretch;
  /* UX-10u — fr rails: extra viewport width shared by list + grid + Login % (not capped at rem max) */
  --main-board-shell-cols: minmax(var(--main-board-shell-left-min), 1.2fr) minmax(0, 5.5fr)
    minmax(var(--main-board-shell-right-min), 1fr);
  grid-template-columns: var(--main-board-shell-cols) !important;
}

#adminDashboard:has(#adminMainBoardPage:not(.hidden)) .admin-main-board-page-head,
#adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) .admin-main-board-page-head {
  display: none;
}

/* UX-10u — desktop MAIN full width (no pointer:fine gate — touch laptops still stretch) */
@media (min-width: 1024px) {
  #adminDashboard:has(#adminMainBoardPage:not(.hidden)),
  #adminDashboard:has(#adminMainBoard3dPage:not(.hidden)),
  #agentDashboard:has(#agentMainBoardPage:not(.hidden)),
  #agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) {
    width: 100%;
    max-width: none;
    --main-board-shell-left-min: 14rem;
    --main-board-shell-right-min: 9rem;
    --agent-mb-four-cols: repeat(4, minmax(0, 1fr));
    --agent-mb-four-gap: 0.24rem;
  }

  #adminDashboard:has(#adminMainBoardPage:not(.hidden)) .legacy-content,
  #adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) .legacy-content,
  #agentDashboard:has(#agentMainBoardPage:not(.hidden)) .legacy-content,
  #agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) .legacy-content,
  #adminDashboard:has(#adminMainBoardPage:not(.hidden)) #adminMainBoardPage,
  #adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) #adminMainBoard3dPage,
  #agentDashboard:has(#agentMainBoardPage:not(.hidden)) #agentMainBoardPage,
  #agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) #agentMainBoard3dPage {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  #adminDashboard:has(#adminMainBoardPage:not(.hidden)) .legacy-content,
  #adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) .legacy-content,
  #agentDashboard:has(#agentMainBoardPage:not(.hidden)) .legacy-content,
  #agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) .legacy-content {
    padding-left: 0;
    padding-right: 0;
  }

  #adminMainBoardPage .main-board-four-grid,
  #agentMainBoardPage .main-board-four-grid,
  #adminMainBoard3dPage .main-board-four-grid,
  #agentMainBoard3dPage .main-board-four-grid {
    width: 100%;
    grid-template-columns: var(--agent-mb-four-cols);
  }

  #adminMainBoardPage .main-board-side-sum--sold-pct,
  #agentMainBoardPage .main-board-side-sum--sold-pct,
  #adminMainBoard3dPage .main-board-side-sum--sold-pct,
  #agentMainBoard3dPage .main-board-side-sum--sold-pct {
    max-width: none;
    min-width: var(--main-board-shell-right-min);
  }
}

/* W-09 — Admin/agent: window-style shell (desktop = viewport lock; phone = pan + pinch — UX-04/UX-14).
   Member intake stays mobile-first (UX-07); do not apply W-09 to app-role-member. */
/* W-09 viewport lock — desktop pointer only; UX-04 mobile scroll block follows ~line 2010 */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
body.app-role-admin:is(
    :has(#adminMainBoardPage:not(.hidden)),
    :has(#adminMainBoard3dPage:not(.hidden)),
    :has(#adminDashboard[data-admin-root-view="dashboard"]),
    :has(#adminDashboard.admin-dashboard--stock-workspace)
  ) {
  overflow: hidden;
  height: 100dvh;
}

body.app-role-admin .app-shell:is(
    :has(#adminMainBoardPage:not(.hidden)),
    :has(#adminMainBoard3dPage:not(.hidden)),
    :has(#adminDashboard[data-admin-root-view="dashboard"]),
    :has(#adminDashboard.admin-dashboard--stock-workspace)
  ) {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

body.app-role-admin .app-shell:is(
    :has(#adminMainBoardPage:not(.hidden)),
    :has(#adminMainBoard3dPage:not(.hidden)),
    :has(#adminDashboard[data-admin-root-view="dashboard"]),
    :has(#adminDashboard.admin-dashboard--stock-workspace)
  )
  > header.topbar {
  display: none;
}

body.app-role-admin .app-shell:is(
    :has(#adminMainBoardPage:not(.hidden)),
    :has(#adminMainBoard3dPage:not(.hidden)),
    :has(#adminDashboard[data-admin-root-view="dashboard"]),
    :has(#adminDashboard.admin-dashboard--stock-workspace)
  )
  .container {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

#adminDashboard:is(
    :has(#adminMainBoardPage:not(.hidden)),
    :has(#adminMainBoard3dPage:not(.hidden)),
    [data-admin-root-view="dashboard"],
    .admin-dashboard--stock-workspace
  ) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  border-radius: 0;
  background: #eef2f7;
}

#adminDashboard:is(
    :has(#adminMainBoardPage:not(.hidden)),
    :has(#adminMainBoard3dPage:not(.hidden)),
    [data-admin-root-view="dashboard"]
  )
  .legacy-topbar {
  flex-shrink: 0;
}

#adminDashboard:has(#adminMainBoardPage:not(.hidden)) .legacy-body,
#adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) .legacy-body {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

#adminDashboard[data-admin-root-view="dashboard"] .legacy-body--admin {
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow: hidden;
}

#adminDashboard:has(#adminMainBoardPage:not(.hidden)) .legacy-content,
#adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) .legacy-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0.08rem 0.12rem 0.1rem 0;
  overflow: hidden;
  align-items: stretch;
  background: #eef2f7;
}

#adminDashboard[data-admin-root-view="dashboard"] .legacy-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0.08rem 0.12rem 0.1rem 0;
  overflow: auto;
  align-items: stretch;
  background: #eef2f7;
}

/* W-09b — Admin + agent SUMMARY / REPORT / DELETE / PAYMENT: PC MAIN parity */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  #adminDashboard.admin-dashboard--stock-workspace .legacy-sidebar--admin,
  #agentDashboard.agent-dashboard--stock-workspace .legacy-sidebar--agent {
    display: none !important;
  }

  #adminDashboard.admin-dashboard--stock-workspace .legacy-body--admin,
  #agentDashboard.agent-dashboard--stock-workspace .legacy-body--agent {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: none;
    grid-template-areas: none;
    width: 100%;
    overflow: hidden;
  }

  #adminDashboard.admin-dashboard--stock-workspace .legacy-content,
  #agentDashboard.agent-dashboard--stock-workspace .legacy-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0.08rem 0.12rem 0.1rem 0;
    overflow: auto;
    align-items: stretch;
    background: #eef2f7;
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }

  #adminDashboard.admin-dashboard--stock-workspace .admin-page:not(.hidden),
  #agentDashboard.agent-dashboard--stock-workspace .admin-page:not(.hidden) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
  }

  #adminDashboard.admin-dashboard--stock-workspace .admin-page:not(.hidden) > .legacy-section-title,
  #agentDashboard.agent-dashboard--stock-workspace .admin-page:not(.hidden) > .legacy-section-title {
    display: none;
  }

  #adminDashboard.admin-dashboard--stock-workspace .admin-page:not(.hidden) > .legacy-card.summary-page,
  #adminDashboard.admin-dashboard--stock-workspace .admin-page:not(.hidden) > .legacy-card.agent-summary-page,
  #adminDashboard.admin-dashboard--stock-workspace .admin-page:not(.hidden) > .legacy-card.delete-data-card,
  #adminDashboard.admin-dashboard--stock-workspace .admin-page:not(.hidden) > .legacy-card.admin-payment-card,
  #adminDashboard.admin-dashboard--stock-workspace .admin-page:not(.hidden) > .legacy-card.agent-payment-card,
  #agentDashboard.agent-dashboard--stock-workspace .admin-page:not(.hidden) > .legacy-card.summary-page,
  #agentDashboard.agent-dashboard--stock-workspace .admin-page:not(.hidden) > .legacy-card.agent-summary-page,
  #agentDashboard.agent-dashboard--stock-workspace .admin-page:not(.hidden) > .legacy-card.agent-payment-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 0;
    max-width: none;
  }

  #adminDashboard.admin-dashboard--stock-workspace .summary-page__grid-wrap,
  #adminDashboard.admin-dashboard--stock-workspace .agent-summary-page__wrap,
  #adminDashboard.admin-dashboard--stock-workspace .report-week-report-panel,
  #adminDashboard.admin-dashboard--stock-workspace .report-members-accordion-mount,
  #adminDashboard.admin-dashboard--stock-workspace .admin-agent-report-accordion-mount,
  #adminDashboard.admin-dashboard--stock-workspace .agent-payment-table-mount,
  #agentDashboard.agent-dashboard--stock-workspace .summary-page__grid-wrap,
  #agentDashboard.agent-dashboard--stock-workspace .agent-summary-page__wrap,
  #agentDashboard.agent-dashboard--stock-workspace .report-week-report-panel,
  #agentDashboard.agent-dashboard--stock-workspace .report-members-accordion-mount,
  #agentDashboard.agent-dashboard--stock-workspace .admin-agent-report-accordion-mount,
  #agentDashboard.agent-dashboard--stock-workspace .agent-payment-table-mount {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  #adminDashboard.admin-dashboard--stock-workspace .member-report-page,
  #agentDashboard.agent-dashboard--stock-workspace .member-report-page {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #adminDashboard.admin-dashboard--stock-workspace .report-week-nav-mount,
  #adminDashboard.admin-dashboard--stock-workspace .agent-summary-page__head,
  #adminDashboard.admin-dashboard--stock-workspace .agent-summary-page__win-hint,
  #adminDashboard.admin-dashboard--stock-workspace .summary-page__head,
  #adminDashboard.admin-dashboard--stock-workspace .summary-page__win-bar,
  #adminDashboard.admin-dashboard--stock-workspace .summary-page__w-num-scope,
  #adminDashboard.admin-dashboard--stock-workspace .summary-page__actions,
  #adminDashboard.admin-dashboard--stock-workspace .summary-page > .message,
  #adminDashboard.admin-dashboard--stock-workspace .agent-summary-page > .message,
  #adminDashboard.admin-dashboard--stock-workspace .admin-payment-card > .message,
  #adminDashboard.admin-dashboard--stock-workspace .admin-payment-card__hint,
  #adminDashboard.admin-dashboard--stock-workspace .agent-payment-card__title,
  #agentDashboard.agent-dashboard--stock-workspace .report-week-nav-mount,
  #agentDashboard.agent-dashboard--stock-workspace .agent-summary-page__head,
  #agentDashboard.agent-dashboard--stock-workspace .agent-summary-page__win-hint,
  #agentDashboard.agent-dashboard--stock-workspace .summary-page__head,
  #agentDashboard.agent-dashboard--stock-workspace .summary-page__win-bar,
  #agentDashboard.agent-dashboard--stock-workspace .summary-page__w-num-scope,
  #agentDashboard.agent-dashboard--stock-workspace .summary-page__actions,
  #agentDashboard.agent-dashboard--stock-workspace .summary-page > .message,
  #agentDashboard.agent-dashboard--stock-workspace .agent-summary-page > .message,
  #agentDashboard.agent-dashboard--stock-workspace .agent-payment-card > .message,
  #agentDashboard.agent-dashboard--stock-workspace .agent-payment-card__hint,
  #agentDashboard.agent-dashboard--stock-workspace .agent-payment-card__title {
    flex-shrink: 0;
  }

  /* DELETE (admin only) — stacked cards; page body scrolls */
  #adminDashboard.admin-dashboard--stock-workspace #adminStockDeleteDataPage:not(.hidden) {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.45rem;
  }

  #adminDashboard.admin-dashboard--stock-workspace #adminStockDeleteDataPage:not(.hidden) > .legacy-card.delete-data-card {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
  }

  #adminDashboard.admin-dashboard--stock-workspace .delete-data-card,
  #adminDashboard.admin-dashboard--stock-workspace .admin-payment-card,
  #adminDashboard.admin-dashboard--stock-workspace .agent-payment-card,
  #agentDashboard.agent-dashboard--stock-workspace .agent-payment-card {
    max-width: none;
  }

  /* PERIOD — stacked boxes; page body scrolls */
  #adminDashboard.admin-dashboard--stock-workspace #adminStockPeriodPage:not(.hidden),
  #adminDashboard.admin-dashboard--stock-workspace #adminStockPeriod3dPage:not(.hidden),
  #adminDashboard.admin-dashboard--stock-workspace #adminStockPeriodSimplePage:not(.hidden),
  #adminDashboard.admin-dashboard--stock-workspace #adminStockWeekSetupPage:not(.hidden),
  #adminDashboard.admin-dashboard--stock-workspace #adminStockDayPeriodPage:not(.hidden),
  #agentDashboard.agent-dashboard--stock-workspace #adminStockPeriodPage:not(.hidden),
  #agentDashboard.agent-dashboard--stock-workspace #adminStockPeriod3dPage:not(.hidden) {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    gap: 0.45rem;
  }

  #adminDashboard.admin-dashboard--stock-workspace .period-page-readiness,
  #adminDashboard.admin-dashboard--stock-workspace .period-page-stack,
  #agentDashboard.agent-dashboard--stock-workspace .period-page-readiness,
  #agentDashboard.agent-dashboard--stock-workspace .period-page-stack {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
  }

  /* MEMBER — list / agent settings / member create */
  #adminDashboard.admin-dashboard--stock-workspace #adminMemberListPage:not(.hidden),
  #adminDashboard.admin-dashboard--stock-workspace #adminAgentListPage:not(.hidden),
  #adminDashboard.admin-dashboard--stock-workspace #agentMemberCreatePage:not(.hidden),
  #agentDashboard.agent-dashboard--stock-workspace #agentMemberCreatePage:not(.hidden),
  #agentDashboard.agent-dashboard--stock-workspace #agentMainPage:not(.hidden) {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    gap: 0.45rem;
  }

  #adminDashboard.admin-dashboard--stock-workspace #adminMemberListPage:not(.hidden) > .legacy-card,
  #adminDashboard.admin-dashboard--stock-workspace #adminAgentListPage:not(.hidden) > .legacy-card.agent-mgmt-card,
  #adminDashboard.admin-dashboard--stock-workspace #agentMemberCreatePage:not(.hidden) > .legacy-card.agent-mgmt-card,
  #agentDashboard.agent-dashboard--stock-workspace #agentMemberCreatePage:not(.hidden) > .legacy-card.agent-mgmt-card {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
    max-width: none;
  }

  #adminDashboard.admin-dashboard--stock-workspace #adminMemberListPage .summary-page__grid-wrap,
  #adminDashboard.admin-dashboard--stock-workspace #adminAgentListPage .summary-page__grid-wrap,
  #adminDashboard.admin-dashboard--stock-workspace #agentMemberCreatePage .summary-page__grid-wrap,
  #agentDashboard.agent-dashboard--stock-workspace #agentMemberCreatePage .summary-page__grid-wrap {
    flex: 0 0 auto;
    min-height: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Agent dashboard tab — same viewport shell as admin dashboard (W-09) */
body.app-role-agent:is(
    :has(#agentMainBoardPage:not(.hidden)),
    :has(#agentMainBoard3dPage:not(.hidden)),
    :has(#agentDashboard[data-agent-root-view="dashboard"]),
    :has(#agentDashboard.agent-dashboard--stock-workspace)
  ) {
  overflow: hidden;
  height: 100dvh;
}

body.app-role-agent .app-shell:is(
    :has(#agentMainBoardPage:not(.hidden)),
    :has(#agentMainBoard3dPage:not(.hidden)),
    :has(#agentDashboard[data-agent-root-view="dashboard"]),
    :has(#agentDashboard.agent-dashboard--stock-workspace)
  ) {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

body.app-role-agent .app-shell:is(
    :has(#agentMainBoardPage:not(.hidden)),
    :has(#agentMainBoard3dPage:not(.hidden)),
    :has(#agentDashboard[data-agent-root-view="dashboard"]),
    :has(#agentDashboard.agent-dashboard--stock-workspace)
  )
  > header.topbar {
  display: none;
}

body.app-role-agent .app-shell:is(
    :has(#agentMainBoardPage:not(.hidden)),
    :has(#agentMainBoard3dPage:not(.hidden)),
    :has(#agentDashboard[data-agent-root-view="dashboard"]),
    :has(#agentDashboard.agent-dashboard--stock-workspace)
  )
  .container {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

#agentDashboard:is(
    :has(#agentMainBoardPage:not(.hidden)),
    :has(#agentMainBoard3dPage:not(.hidden)),
    [data-agent-root-view="dashboard"],
    .agent-dashboard--stock-workspace
  ) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  border-radius: 0;
  background: #eef2f7;
}

#agentDashboard:is(
    :has(#agentMainBoardPage:not(.hidden)),
    :has(#agentMainBoard3dPage:not(.hidden)),
    [data-agent-root-view="dashboard"],
    .agent-dashboard--stock-workspace
  )
  .legacy-topbar {
  flex-shrink: 0;
}

#agentDashboard[data-agent-root-view="dashboard"] .legacy-body--agent {
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow: hidden;
}

#agentDashboard[data-agent-root-view="dashboard"] .legacy-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0.08rem 0.12rem 0.1rem 0;
  overflow: auto;
  align-items: stretch;
  background: #eef2f7;
}

#agentMainPage .agent-profile-feed-card--dashboard {
  margin-top: 0.35rem;
  flex-shrink: 0;
}

} /* end W-09 desktop viewport lock (opened before body.app-role-admin:is) */

/* Agent MAIN (2D / 3D): lock to viewport — full grid visible without page scroll (parity with admin) */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
body.app-role-agent:has(#agentMainBoardPage:not(.hidden)),
body.app-role-agent:has(#agentMainBoard3dPage:not(.hidden)) {
  overflow: hidden;
  height: 100dvh;
}

body.app-role-agent .app-shell:has(#agentMainBoardPage:not(.hidden)),
body.app-role-agent .app-shell:has(#agentMainBoard3dPage:not(.hidden)) {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

.legacy-dashboard--agent:has(#agentMainBoardPage:not(.hidden)),
.legacy-dashboard--agent:has(#agentMainBoard3dPage:not(.hidden)) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.legacy-dashboard--agent:has(#agentMainBoardPage:not(.hidden)) .legacy-topbar--agent,
.legacy-dashboard--agent:has(#agentMainBoard3dPage:not(.hidden)) .legacy-topbar--agent {
  flex-shrink: 0;
}

.legacy-dashboard--agent .legacy-body--agent:has(#agentMainBoardPage:not(.hidden)),
.legacy-dashboard--agent .legacy-body--agent:has(#agentMainBoard3dPage:not(.hidden)) {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

} /* end agent MAIN desktop viewport lock */

#agentMainPage,
#adminMainPage,
#agentMainBoardPage,
#adminMainBoardPage,
#adminMainBoard3dPage,
#agentMainBoard3dPage {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  align-self: stretch;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  --agent-mb-four-cols: repeat(4, minmax(10.5rem, 1fr));
  --agent-mb-four-gap: 0.18rem;
  --agent-mb-cell-cols: minmax(3.5ch, max-content) minmax(0, 1fr) minmax(0, 1fr);
}

#adminMainPage,
#agentMainPage,
#adminMainBoardPage,
#agentMainBoardPage {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

#adminMainBoard3dPage,
#agentMainBoard3dPage {
  --agent-mb-cell-cols: minmax(4.2ch, max-content) minmax(0, 1fr) minmax(0, 1fr);
}

/* 2D MAIN: same flex mount chain as 3D (.sys3d-main-board-mount) */
#adminMainBoardPage > .main-board-shell,
#agentMainBoardPage > .main-board-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

#adminMainBoard3dPage .sys3d-main-board-mount,
#agentMainBoard3dPage .sys3d-main-board-mount {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#adminMainBoard3dPage .sys3d-main-board-mount .sys3d-board-shell,
#agentMainBoard3dPage .sys3d-main-board-mount .sys3d-board-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

#adminMainBoard3dPage .sys3d-board-shell.main-board-shell,
#agentMainBoard3dPage .sys3d-board-shell.main-board-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

#agentMainBoard3dPage .sys3d-board-shell.main-board-shell,
#adminMainBoard3dPage .sys3d-board-shell.main-board-shell {
  --main-board-shell-cols: minmax(var(--main-board-shell-left-min), 1.2fr) minmax(0, 5.5fr)
    minmax(var(--main-board-shell-right-min), 1fr);
}

#adminMainBoard3dPage .sys3d-board-shell .main-board-aside,
#agentMainBoard3dPage .sys3d-board-shell .main-board-aside,
#agentMainBoard3dPage .sys3d-board-shell .main-board-main,
#adminMainBoard3dPage .sys3d-board-shell .main-board-main,
#adminMainBoard3dPage .sys3d-board-shell .main-board-side-sum,
#agentMainBoard3dPage .sys3d-board-shell .main-board-side-sum {
  overflow: hidden;
}

#adminMainBoard3dPage .sys3d-board-shell .main-board-side-sum,
#agentMainBoard3dPage .sys3d-board-shell .main-board-side-sum {
  min-height: 0;
  align-self: stretch;
}

#adminMainBoard3dPage #sys3dUserList.main-board-user-list,
#agentMainBoard3dPage #sys3dUserList.main-board-user-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#adminMainBoard3dPage .sys3d-board-shell .main-board-agent-header-row,
#agentMainBoard3dPage .sys3d-board-shell .main-board-agent-header-row {
  position: relative;
  z-index: 2;
}

#adminMainBoard3dPage .sys3d-board-shell .main-board-agent-title-btn,
#adminMainBoard3dPage .sys3d-board-shell .main-board-agent-caret-btn,
#agentMainBoard3dPage .sys3d-board-shell .main-board-agent-title-btn,
#agentMainBoard3dPage .sys3d-board-shell .main-board-agent-caret-btn {
  position: relative;
  z-index: 1;
}

#adminMainBoard3dPage .sys3d-board-main.main-board-main,
#agentMainBoard3dPage .sys3d-board-main.main-board-main {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#adminMainBoard3dPage .main-board-grid-host,
#agentMainBoard3dPage .main-board-grid-host {
  container-type: size;
  container-name: agent-mb-grid;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#adminMainBoard3dPage .main-board-four-grid,
#agentMainBoard3dPage .main-board-four-grid {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  gap: var(--agent-mb-four-gap);
  align-items: stretch;
  grid-template-columns: var(--agent-mb-four-cols);
}

#adminMainBoard3dPage .main-board-mini-wrap,
#agentMainBoard3dPage .main-board-mini-wrap {
  min-height: 0;
  height: 100%;
}

#adminMainBoard3dPage .mb-block-grid,
#agentMainBoard3dPage .mb-block-grid {
  font-family: var(--font-sans);
  font-size: clamp(0.62rem, 0.38rem + 1.05cqh, 0.95rem);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  grid-template-rows: auto repeat(25, minmax(0, 1fr));
}

#agentMainBoardPage .mb-row,
#adminMainBoardPage .mb-row,
#adminMainBoard3dPage .mb-row,
#agentMainBoard3dPage .mb-row {
  grid-template-columns: var(--agent-mb-cell-cols);
}

#adminMainBoard3dPage .mb-row-data .mb-cell,
#agentMainBoard3dPage .mb-row-data .mb-cell {
  padding: clamp(0.02rem, 0.22cqh, 0.14rem) 0.08rem;
}

#adminMainBoard3dPage .mb-row-head .mb-cell,
#agentMainBoard3dPage .mb-row-head .mb-cell {
  padding: clamp(0.04rem, 0.28cqh, 0.12rem) 0.08rem;
}

#adminMainBoard3dPage .mb-row-data .mb-lim,
#agentMainBoard3dPage .mb-row-data .mb-lim {
  cursor: pointer;
}

#agentMainBoardPage .main-board-shell,
#adminMainBoardPage .main-board-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

#agentMainBoardPage .main-board-aside,
#adminMainBoardPage .main-board-aside,
#agentMainBoardPage .main-board-side-sum,
#adminMainBoardPage .main-board-side-sum {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
}

#agentMainBoardPage .main-board-user-list,
#adminMainBoardPage .main-board-user-list,
#agentMainBoardPage #agentMainBoardUserList.main-board-user-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#agentMainBoardPage .main-board-main,
#adminMainBoardPage .main-board-main {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#agentMainBoardPage .main-board-main-head,
#adminMainBoardPage .main-board-main-head,
#agentMainBoard3dPage .main-board-main-head,
#adminMainBoard3dPage .main-board-main-head {
  flex-shrink: 0;
  margin-bottom: 0.1rem;
  padding: 0.04rem 0;
  min-height: 0;
}

#agentMainBoardPage .main-board-grid-host,
#adminMainBoardPage .main-board-grid-host {
  container-type: normal;
  flex: 1 1 0%;
  min-height: min(28rem, 52vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#agentMainBoardPage .main-board-four-grid,
#adminMainBoardPage .main-board-four-grid {
  display: grid;
  flex: 1 1 0%;
  min-height: min(18rem, 45vh);
  height: 100%;
  gap: var(--agent-mb-four-gap);
  align-items: stretch;
  grid-template-columns: var(--agent-mb-four-cols);
}

#agentMainBoardPage .main-board-mini-wrap,
#adminMainBoardPage .main-board-mini-wrap {
  min-height: 0;
  height: 100%;
}

#agentMainBoardPage .mb-block-grid,
#adminMainBoardPage .mb-block-grid {
  font-family: var(--font-sans);
  font-size: clamp(0.62rem, 0.38rem + 1.05cqh, 0.95rem);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  grid-template-rows: auto repeat(25, minmax(1.05em, 1fr));
}

#agentMainBoardPage .main-board-main-head,
#adminMainBoardPage .main-board-main-head,
#adminMainBoardPage .main-board-aside,
#agentMainBoardPage .main-board-side-sum,
#adminMainBoardPage .main-board-side-sum,
#agentMainBoardPage .main-board-bottom-strip--agent,
#adminMainBoardPage .main-board-bottom-strip--agent,
#agentMainBoardPage .agent-main-board-grand-sum-wrap,
#adminMainBoardPage .agent-main-board-grand-sum-wrap,
#adminMainBoard3dPage .sys3d-board-shell .main-board-aside,
#agentMainBoard3dPage .sys3d-board-shell .main-board-main,
#adminMainBoard3dPage .sys3d-board-shell .main-board-side-sum,
#agentMainBoard3dPage .sys3d-board-shell .main-board-side-sum,
#adminMainBoard3dPage .sys3d-board-shell .main-board-user-list[aria-label*="အစဉ်"],
#adminMainBoard3dPage .sys3d-board-shell .main-board-user-list[aria-label*="Agent"] {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

#agentMainBoardPage .main-board-division-inline[title],
#adminMainBoardPage .main-board-division-inline[title],
#agentMainBoardPage .main-board-limit-input,
#adminMainBoardPage .main-board-limit-input,
#agentMainBoardPage .main-board-division-trigger,
#adminMainBoardPage .main-board-division-trigger,
#agentMainBoardPage .main-board-grand-input,
#adminMainBoardPage .main-board-grand-input,
#adminMainBoard3dPage .main-board-grand-input,
#agentMainBoard3dPage .main-board-grand-input {
  font-family: var(--font-sans);
}

#adminMainBoard3dPage .main-board-limit-input,
#agentMainBoard3dPage .main-board-limit-input,
#adminMainBoard3dPage .main-board-division-trigger,
#agentMainBoard3dPage .main-board-division-trigger {
  font-family: var(--font-sans);
}

#agentMainBoardPage [title*="ဘောက်"],
#adminMainBoardPage [title*="ဘောက်"],
#adminMainBoardPage .main-board-user-list[aria-label*="အစဉ်"] {
  font-family: var(--font-myanmar);
}

#agentMainBoardPage .mb-row-data .mb-cell,
#adminMainBoardPage .mb-row-data .mb-cell {
  padding: clamp(0.02rem, 0.22cqh, 0.14rem) 0.08rem;
}

#agentMainBoardPage .mb-row-head .mb-cell,
#adminMainBoardPage .mb-row-head .mb-cell {
  padding: clamp(0.04rem, 0.28cqh, 0.12rem) 0.08rem;
}

#agentMainBoardPage .agent-main-board-grand-sum-wrap,
#adminMainBoardPage .agent-main-board-grand-sum-wrap,
#adminMainBoard3dPage .agent-main-board-grand-sum-wrap,
#agentMainBoard3dPage .agent-main-board-grand-sum-wrap,
#agentMainBoardPage .main-board-main > .agent-main-board-grand-sum-wrap,
#adminMainBoardPage .main-board-main > .agent-main-board-grand-sum-wrap,
#agentMainBoard3dPage .sys3d-board-main > .agent-main-board-grand-sum-wrap,
#adminMainBoard3dPage .sys3d-board-main > .agent-main-board-grand-sum-wrap {
  flex: 0 0 auto;
  flex-shrink: 0;
  height: auto;
  max-height: none;
  margin-top: 0.08rem;
  font-size: clamp(0.5rem, 0.32rem + 0.75cqh, 0.78rem);
}

/* Legacy: footer still inside grid host until page refresh */
.main-board-grid-host > .agent-main-board-grand-sum-wrap {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
}

.main-board-grid-host > .main-board-four-grid {
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
}

#agentMainBoardPage .main-board-bottom-strip--agent,
#adminMainBoardPage .main-board-bottom-strip--agent {
  display: none;
}

/* Footer totals: same 4-block grid as 00–99; block 4 uses No | Limit | Over sub-columns */
#agentMainBoardPage .agent-main-board-footer-grid,
#adminMainBoardPage .agent-main-board-footer-grid,
#adminMainBoard3dPage .agent-main-board-footer-grid,
#agentMainBoard3dPage .agent-main-board-footer-grid {
  display: grid;
  grid-template-columns: var(--agent-mb-four-cols);
  gap: var(--agent-mb-four-gap);
  align-items: center;
  padding: 0.08rem 0.28rem;
  background: #f8fafc;
}

#agentMainBoardPage .agent-main-board-footer-lead,
#adminMainBoardPage .agent-main-board-footer-lead,
#adminMainBoard3dPage .agent-main-board-footer-lead,
#agentMainBoard3dPage .agent-main-board-footer-lead {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
  min-width: 0;
}

#agentMainBoardPage .agent-main-board-grand-sum-inputs,
#adminMainBoardPage .agent-main-board-grand-sum-inputs,
#adminMainBoard3dPage .agent-main-board-grand-sum-inputs,
#agentMainBoard3dPage .agent-main-board-grand-sum-inputs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

#adminMainBoardPage .agent-main-board-grand-sum-inputs.sys3d-grand-sum-inputs,
#adminMainBoardPage .main-board-2d-grand-sum-inputs {
  flex-wrap: nowrap;
}

#agentMainBoardPage .agent-main-board-footer-block,
#adminMainBoardPage .agent-main-board-footer-block,
#adminMainBoard3dPage .agent-main-board-footer-block,
#agentMainBoard3dPage .agent-main-board-footer-block {
  grid-column: 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
  justify-content: center;
}

#agentMainBoardPage .agent-main-board-footer-cols,
#adminMainBoardPage .agent-main-board-footer-cols,
#adminMainBoard3dPage .agent-main-board-footer-cols,
#agentMainBoard3dPage .agent-main-board-footer-cols {
  display: grid;
  grid-template-columns: var(--agent-mb-cell-cols);
  align-items: baseline;
  width: 100%;
  min-width: 0;
  line-height: 1.12;
}

#agentMainBoardPage .agent-main-board-footer-cell--no,
#adminMainBoardPage .agent-main-board-footer-cell--no,
#adminMainBoard3dPage .agent-main-board-footer-cell--no,
#agentMainBoard3dPage .agent-main-board-footer-cell--no {
  text-align: center;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
}

#agentMainBoardPage .agent-main-board-footer-cell--lim,
#adminMainBoardPage .agent-main-board-footer-cell--lim,
#agentMainBoardPage .agent-main-board-footer-cell--ov,
#adminMainBoardPage .agent-main-board-footer-cell--ov,
#adminMainBoard3dPage .agent-main-board-footer-cell--lim,
#agentMainBoard3dPage .agent-main-board-footer-cell--lim,
#adminMainBoard3dPage .agent-main-board-footer-cell--ov,
#agentMainBoard3dPage .agent-main-board-footer-cell--ov {
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding-right: 0.32rem;
  color: var(--amount-color);
}

#agentMainBoardPage .agent-main-board-footer-cell--ov .agent-main-board-total-slash,
#adminMainBoardPage .agent-main-board-footer-cell--ov .agent-main-board-total-slash,
#adminMainBoard3dPage .agent-main-board-footer-cell--ov .agent-main-board-total-slash,
#agentMainBoard3dPage .agent-main-board-footer-cell--ov .agent-main-board-total-slash {
  font-weight: 600;
  color: #64748b;
  margin-right: 0.15rem;
}

#agentMainBoardPage .agent-main-board-total-eq,
#adminMainBoardPage .agent-main-board-total-eq,
#agentMainBoardPage .agent-main-board-avg-eq,
#adminMainBoardPage .agent-main-board-avg-eq,
#adminMainBoard3dPage .agent-main-board-total-eq,
#agentMainBoard3dPage .agent-main-board-total-eq,
#adminMainBoard3dPage .agent-main-board-avg-eq,
#agentMainBoard3dPage .agent-main-board-avg-eq {
  font-weight: 600;
  color: #64748b;
  margin-left: 0.1rem;
}

#agentMainBoardPage .agent-main-board-footer-cols--avg .agent-main-board-footer-cell--no,
#adminMainBoardPage .agent-main-board-footer-cols--avg .agent-main-board-footer-cell--no,
#adminMainBoard3dPage .agent-main-board-footer-cols--avg .agent-main-board-footer-cell--no,
#agentMainBoard3dPage .agent-main-board-footer-cols--avg .agent-main-board-footer-cell--no {
  font-weight: 700;
}

#agentMainBoardPage .agent-main-board-footer-cols--avg .agent-main-board-footer-cell--lim,
#adminMainBoardPage .agent-main-board-footer-cols--avg .agent-main-board-footer-cell--lim,
#adminMainBoard3dPage .agent-main-board-footer-cols--avg .agent-main-board-footer-cell--lim,
#agentMainBoard3dPage .agent-main-board-footer-cols--avg .agent-main-board-footer-cell--lim {
  color: #0f172a;
}

/* UX-04b: after W-09 / MAIN overflow rules — restore page scroll on phones (dashboard + MAIN + 3D MAIN) */
@media (max-width: 1023px), ((hover: none) and (pointer: coarse)) {
  #adminDashboard:has(#adminMainBoardPage:not(.hidden)) .legacy-body,
  #adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) .legacy-body,
  #agentDashboard:has(#agentMainBoardPage:not(.hidden)) .legacy-body,
  #agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) .legacy-body,
  .legacy-dashboard--agent:has(#agentMainBoardPage:not(.hidden)) .legacy-body--agent,
  .legacy-dashboard--agent:has(#agentMainBoard3dPage:not(.hidden)) .legacy-body--agent {
    overflow: visible;
    min-height: auto;
  }

  #adminDashboard:has(#adminMainBoardPage:not(.hidden)) .legacy-content,
  #adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) .legacy-content,
  #agentDashboard:has(#agentMainBoardPage:not(.hidden)) .legacy-content,
  #agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) .legacy-content,
  .legacy-dashboard--agent:has(#agentMainBoardPage:not(.hidden)) .legacy-content,
  .legacy-dashboard--agent:has(#agentMainBoard3dPage:not(.hidden)) .legacy-content {
    overflow: visible;
    height: auto;
    max-height: none;
    display: block;
    -webkit-overflow-scrolling: touch;
  }

  #adminMainBoardPage,
  #agentMainBoardPage,
  #adminMainBoard3dPage,
  #agentMainBoard3dPage {
    overflow: visible;
    height: auto;
    max-height: none;
    display: block;
    min-height: auto;
    -webkit-overflow-scrolling: touch;
  }

  #adminMainBoardPage .main-board-shell,
  #agentMainBoardPage .main-board-shell,
  #adminMainBoard3dPage .sys3d-main-board-mount .sys3d-board-shell.main-board-shell,
  #agentMainBoard3dPage .sys3d-main-board-mount .sys3d-board-shell.main-board-shell {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  #adminMainBoardPage .main-board-grid-host,
  #agentMainBoardPage .main-board-grid-host,
  #adminMainBoard3dPage .main-board-grid-host,
  #agentMainBoard3dPage .main-board-grid-host {
    overflow: visible;
    container-type: normal;
    min-height: 20rem;
    max-height: none;
    flex: none;
    -webkit-overflow-scrolling: touch;
  }

  #adminMainBoard3dPage .sys3d-main-board-mount,
  #agentMainBoard3dPage .sys3d-main-board-mount {
    overflow: visible;
    min-height: auto;
  }
}

/* Desktop MAIN: 00–99 table fills viewport (no page scroll); UX-04 unlocks below 1024px */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.app-role-admin.app-logged-in:is(
      :has(#adminMainBoardPage:not(.hidden)),
      :has(#adminMainBoard3dPage:not(.hidden)),
      :has(#adminDashboard[data-admin-root-view="dashboard"]),
      :has(#adminDashboard.admin-dashboard--stock-workspace)
    ),
  body.app-role-agent.app-logged-in:is(
      :has(#agentMainBoardPage:not(.hidden)),
      :has(#agentMainBoard3dPage:not(.hidden)),
      :has(#agentDashboard[data-agent-root-view="dashboard"]),
    :has(#agentDashboard.agent-dashboard--stock-workspace)
    ) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  body.app-role-admin.app-logged-in .app-shell:is(
      :has(#adminMainBoardPage:not(.hidden)),
      :has(#adminMainBoard3dPage:not(.hidden)),
      :has(#adminDashboard[data-admin-root-view="dashboard"]),
      :has(#adminDashboard.admin-dashboard--stock-workspace)
    ),
  body.app-role-agent.app-logged-in .app-shell:is(
      :has(#agentMainBoardPage:not(.hidden)),
      :has(#agentMainBoard3dPage:not(.hidden)),
      :has(#agentDashboard[data-agent-root-view="dashboard"]),
    :has(#agentDashboard.agent-dashboard--stock-workspace)
    ) {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  body.app-role-admin.app-logged-in .app-shell:is(
      :has(#adminMainBoardPage:not(.hidden)),
      :has(#adminMainBoard3dPage:not(.hidden)),
      :has(#adminDashboard[data-admin-root-view="dashboard"]),
      :has(#adminDashboard.admin-dashboard--stock-workspace)
    )
    .container,
  body.app-role-agent.app-logged-in .app-shell:is(
      :has(#agentMainBoardPage:not(.hidden)),
      :has(#agentMainBoard3dPage:not(.hidden)),
      :has(#agentDashboard[data-agent-root-view="dashboard"]),
    :has(#agentDashboard.agent-dashboard--stock-workspace)
    )
    .container {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  #adminDashboard:is(
      :has(#adminMainBoardPage:not(.hidden)),
      :has(#adminMainBoard3dPage:not(.hidden)),
      [data-admin-root-view="dashboard"],
      .admin-dashboard--stock-workspace
    ),
  #agentDashboard:is(
      :has(#agentMainBoardPage:not(.hidden)),
      :has(#agentMainBoard3dPage:not(.hidden)),
      [data-agent-root-view="dashboard"],
      .agent-dashboard--stock-workspace
    ),
  .legacy-dashboard--agent:has(#agentMainBoardPage:not(.hidden)),
  .legacy-dashboard--agent:has(#agentMainBoard3dPage:not(.hidden)) {
    height: 100%;
    max-height: 100%;
  }

  .legacy-dashboard--agent .legacy-content:has(#agentMainBoardPage:not(.hidden)),
  .legacy-dashboard--agent .legacy-content:has(#agentMainBoard3dPage:not(.hidden)) {
    padding: 0.06rem 0.1rem 0.08rem;
  }

  #adminMainPage,
  #agentMainPage,
  #adminMainBoardPage,
  #adminMainBoard3dPage,
  #agentMainBoardPage,
  #agentMainBoard3dPage {
    --agent-mb-four-cols: repeat(4, minmax(10.5rem, 1fr));
    --agent-mb-four-gap: 0.18rem;
    height: 100%;
    max-height: 100%;
  }

  #adminMainBoardPage .main-board-shell,
  #agentMainBoardPage .main-board-shell,
  #adminMainBoard3dPage .sys3d-main-board-mount .sys3d-board-shell.main-board-shell,
  #agentMainBoard3dPage .sys3d-main-board-mount .sys3d-board-shell.main-board-shell {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    grid-template-rows: minmax(0, 1fr);
  }

  #adminMainBoardPage .main-board-aside,
  #agentMainBoardPage .main-board-aside {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
    overflow: hidden;
  }

  #adminMainBoardPage #mainBoardUserList.main-board-user-list,
  #agentMainBoardPage #agentMainBoardUserList.main-board-user-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  #adminMainBoardPage .main-board-side-sum,
  #agentMainBoardPage .main-board-side-sum {
    min-height: 0;
    align-self: stretch;
    overflow: hidden;
  }

  #adminMainBoardPage .main-board-main,
  #agentMainBoardPage .main-board-main {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-height: 100%;
    overflow: hidden;
  }

  #adminMainBoardPage .main-board-four-grid,
  #agentMainBoardPage .main-board-four-grid,
  #adminMainBoard3dPage .main-board-four-grid,
  #agentMainBoard3dPage .main-board-four-grid {
    display: grid;
    overflow: hidden;
    min-height: min(18rem, 45vh);
    height: 100%;
  }

  #adminMainBoardPage .main-board-mini-wrap,
  #agentMainBoardPage .main-board-mini-wrap {
    min-height: min(16rem, 42vh);
  }

  #adminMainBoardPage .mb-block-grid,
  #agentMainBoardPage .mb-block-grid {
    min-height: min(16rem, 42vh);
  }

  #adminMainBoardPage .main-board-main > .agent-main-board-grand-sum-wrap,
  #agentMainBoardPage .main-board-main > .agent-main-board-grand-sum-wrap,
  #adminMainBoard3dPage .sys3d-board-main > .agent-main-board-grand-sum-wrap,
  #agentMainBoard3dPage .sys3d-board-main > .agent-main-board-grand-sum-wrap {
    flex: 0 0 auto;
    height: auto;
  }

  #adminMainBoardPage .main-board-grid-host,
  #agentMainBoardPage .main-board-grid-host,
  #adminMainBoard3dPage .main-board-grid-host,
  #agentMainBoard3dPage .main-board-grid-host {
    overflow: hidden;
    flex: 1 1 0%;
    min-height: min(28rem, 52vh);
    container-type: normal;
  }

  #adminMainBoardPage .main-board-side-sum__scroll,
  #agentMainBoardPage .main-board-side-sum__scroll {
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* UX-10u — desktop MAIN (pointer:fine): tighter shell gap */
  #adminDashboard:has(#adminMainBoardPage:not(.hidden)) #adminMainBoardPage .main-board-shell,
  #adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) #adminMainBoard3dPage .sys3d-board-shell.main-board-shell,
  #agentDashboard:has(#agentMainBoardPage:not(.hidden)) #agentMainBoardPage .main-board-shell,
  #agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) #agentMainBoard3dPage .sys3d-board-shell.main-board-shell,
  #adminMainBoard3dPage .sys3d-main-board-mount .sys3d-board-shell.main-board-shell:not(.sys3d-board-shell--purchaser-view):not(.sys3d-board-shell--purchaser-entry-active),
  #agentMainBoard3dPage .sys3d-main-board-mount .sys3d-board-shell.main-board-shell:not(.sys3d-board-shell--purchaser-view):not(.sys3d-board-shell--purchaser-entry-active) {
    gap: 0.28rem;
  }
}

/* Agent sidebar: ACCOUNT submenu (Profile/Member) + other nav items */
.legacy-sidebar--agent {
  display: flex;
  flex-direction: column;
}

.legacy-sidebar--agent .agent-sidebar-account-submenu {
  margin: 0.28rem 0.32rem 0.35rem;
  border-radius: 6px;
}

.legacy-sidebar--agent .agent-sidebar-account-submenu.hidden {
  display: none;
}

/* Agent (and legacy) sidebar — not admin Windows tree */
.legacy-sidebar:not(.legacy-sidebar--admin) {
  background: #6f86a9;
  border-right: 2px solid #8ea5c7;
}

.legacy-menu-item {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #b8c7db;
  background: #e8edf7;
  color: #1f2a44;
  text-align: left;
  font-size: 0.96rem;
  font-weight: 700;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
}

.legacy-menu-item.active {
  background: #d8e4f6;
}

.legacy-menu-item.with-submenu {
  position: relative;
  padding-right: 1.65rem;
}

.legacy-menu-item.with-submenu::after {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.68rem;
  opacity: 0.8;
  content: "▸";
}

.legacy-menu-item.with-submenu[aria-expanded="true"]::after {
  content: "▾";
}

.legacy-menu-item.with-submenu[aria-expanded="true"] {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0%, #dbeafe 55%, #cfe2ff 100%);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.14);
}

.legacy-nav-toggle {
  border-left: 4px solid #64748b;
}

.legacy-nav-toggle--account {
  border-left-color: #475569;
}

.legacy-nav-toggle--period {
  border-left-color: #0f766e;
}

.legacy-nav-toggle--member {
  border-left-color: #1d4ed8;
}

.legacy-nav-toggle--summary {
  border-left-color: #b45309;
}

.legacy-nav-toggle--report {
  border-left-color: #6d28d9;
}

.legacy-nav-toggle--delete-data {
  border-left-color: #9f1239;
}

.legacy-nav-toggle--payment {
  border-left-color: #b91c1c;
}

.legacy-nav-panel {
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: 0 0 6px 6px;
}

.legacy-nav-panel--period {
  background: linear-gradient(180deg, #ecfdf5 0%, #e2e8f0 100%);
  border-left-color: #0f766e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.legacy-nav-panel--member {
  background: linear-gradient(180deg, #eff6ff 0%, #e2e8f0 100%);
  border-left-color: #1d4ed8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.legacy-nav-panel--summary {
  background: linear-gradient(180deg, #fffbeb 0%, #e2e8f0 100%);
  border-left-color: #b45309;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.legacy-nav-panel--report {
  background: linear-gradient(180deg, #f5f3ff 0%, #e2e8f0 100%);
  border-left-color: #6d28d9;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.legacy-nav-panel--delete-data {
  background: linear-gradient(180deg, #fff1f2 0%, #e2e8f0 100%);
  border-left-color: #9f1239;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.legacy-nav-panel--payment {
  background: linear-gradient(180deg, #fef2f2 0%, #e2e8f0 100%);
  border-left-color: #b91c1c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.legacy-submenu-group {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.25rem;
  padding-top: 0.3rem;
  border-top: 1px dashed rgba(15, 23, 42, 0.2);
}

.legacy-submenu-group-label {
  margin: 0;
  padding: 0.1rem 0.25rem 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
}

.legacy-submenu {
  background: #e9effa;
  padding: 0.35rem 0.55rem;
  display: grid;
  gap: 0.2rem;
}

.legacy-submenu-item {
  border: 0;
  background: transparent;
  text-align: left;
  color: #1f2a44;
  font-weight: 600;
  cursor: pointer;
}

.legacy-submenu-item.active {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35), 0 1px 3px rgba(15, 23, 42, 0.12);
  font-weight: 700;
}

.legacy-content {
  background: #fff;
  padding: 0.25rem;
  overflow-x: auto;
}

.legacy-section-title {
  background: linear-gradient(180deg, #0f3567 0%, #102b5d 100%);
  color: #facc15;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.35rem 0.55rem;
  margin-bottom: 0.45rem;
}

/* Admin: sidebar shows section — hide duplicate yellow section bars */
#adminDashboard .legacy-section-title {
  display: none;
}

#adminStockPeriodPage > .legacy-section-title,
#adminStockPeriod3dPage > .legacy-section-title,
#adminStockSummaryPage > .legacy-section-title,
#adminStockSummary3dPage > .legacy-section-title,
#adminStockReportPage > .legacy-section-title,
#adminStockAdminAgentReportPage > .legacy-section-title,
#adminStockAdminMemberReportPage > .legacy-section-title {
  display: block;
}

#adminStockPeriod3dPage > .legacy-section-title--3d,
#adminStockSummary3dPage > .legacy-section-title--3d {
  background: linear-gradient(180deg, #5b21b6 0%, #4c1d95 100%);
  color: #ede9fe;
}

/* Admin MAIN (embedded): MAIN title + Logout one row */
.admin-main-board-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #0f3567 0%, #102b5d 100%);
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.3rem;
  border-radius: 0.25rem;
  min-height: 0;
}

.admin-main-board-page-head__mark {
  color: #facc15;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  line-height: 1.15;
}

.admin-main-board-page-head__logout {
  flex-shrink: 0;
  padding: 0.2rem 0.42rem;
  font-size: 0.72rem;
  line-height: 1.15;
}

.main-board-bottom-strip--minimal {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.legacy-section-subtitle {
  background: #0f3567;
  color: #fff;
  padding: 0.35rem 0.55rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.legacy-main-grid {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 0.35rem;
}

.legacy-card {
  border: 1px solid #a9bad2;
  background: #fff;
  padding: 0.35rem;
  margin-bottom: 0.35rem;
}

.legacy-profile-table {
  width: 100%;
  border-collapse: collapse;
}

.legacy-profile-table th,
.legacy-profile-table td {
  border: 1px solid #cfd8e6;
  padding: 0.3rem;
  font-size: 0.9rem;
}

.legacy-profile-table th {
  width: 64%;
  background: #eaf0ff;
}

.legacy-messages {
  max-height: 340px;
  overflow: auto;
  font-size: 0.9rem;
}

.detail-item {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem;
}

.detail-item strong {
  display: block;
  margin-bottom: 0.2rem;
}

@media (max-width: 800px) {
  .grid-form,
  .details-grid {
    grid-template-columns: 1fr;
  }

  .admin-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-shell {
    padding: 0.8rem;
  }

  .topbar h1 {
    font-size: 1.1rem;
  }

  .auth-card {
    margin-top: 1rem;
  }

  .legacy-topbar {
    grid-template-columns: 1fr;
  }

  .legacy-dashboard--agent .legacy-topbar--agent {
    grid-template-columns: 1fr;
  }

  .legacy-body {
    grid-template-columns: 1fr;
  }

  .legacy-dashboard--agent .legacy-body--agent {
    grid-template-columns: 1fr;
  }

  .legacy-main-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Realtime / member online --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.small-status {
  font-size: 0.85rem;
  margin: 0.25rem 0 0.5rem;
}

.member-hero {
  text-align: center;
}

.member-period-center {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.05rem;
  border: 2px dashed var(--border);
}

.member-period-center.period-open {
  border-color: #22c55e;
  background: #ecfdf3;
  color: #14532d;
}

.member-period-center.period-closed {
  border-color: #f97316;
  background: #fff7ed;
  color: #9a3412;
}

.member-period-center.period-offline {
  border-style: solid;
  background: #f8fafc;
  color: #334155;
  font-weight: 600;
  font-size: 0.95rem;
}

.member-running-period-line {
  margin: 0.5rem 0 0;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1e40af;
  line-height: 1.35;
  text-align: center;
}

/* Member meta strip: login (left) | date center | period (right) */
.member-meta-strip {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr auto;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.2rem;
  padding: 0.38rem 0.55rem;
  margin: 0;
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
}

.member-meta-strip__user {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
  font-weight: 800;
  font-size: 0.88rem;
  color: #0f172a;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28vw;
}

.member-meta-strip__date {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  min-width: 0;
  font-weight: 800;
  font-size: clamp(0.76rem, 2.4vw, 0.9rem);
  font-variant-numeric: tabular-nums;
  color: #1e3a8a;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
}

.member-meta-strip__period {
  grid-column: 3;
  justify-self: end;
  min-width: 0;
  max-width: 9.5rem;
}

.member-period-status-chip {
  font-size: clamp(0.58rem, 1.65vw, 0.7rem);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  padding: 0.24rem 0.46rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  max-width: 12.5rem;
}

.member-period-status-chip--running,
.member-period-status-chip--open {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.member-period-status-chip--closed {
  background: #ffedd5;
  border-color: #fdba74;
  color: #9a3412;
}

.member-period-status-chip--pending {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}

.member-period-status-chip--paused {
  background: #fef2f2;
  border-color: #f87171;
  color: #b91c1c;
}

.member-period-status-chip--wait {
  background: #fef9c3;
  border-color: #fde047;
  color: #854d0e;
}

.member-period-status-chip--offline {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

@media (max-width: 520px) {
  .member-meta-strip__user {
    max-width: 22vw;
  }

  .member-meta-strip__period {
    max-width: 7.5rem;
    font-size: 0.58rem;
  }
}

/* Member page nav: intake cluster 2D|3D + records entry (frame; 3D/records later). */
.member-page-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.65rem;
  padding: 0.38rem 0.55rem;
  margin: 0;
  flex: 0 0 auto;
}

.member-page-nav__intake {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
}

.member-page-nav__seg {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0.42rem 1.05rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  color: #475569;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 2.25rem;
}

.member-page-nav__seg + .member-page-nav__seg {
  border-left: 1px solid #cbd5e1;
}

.member-page-nav__seg.is-active {
  background: #0d9488;
  color: #fff;
}

.member-page-nav__seg:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.member-page-nav__menu {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.38rem 0.65rem;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 2.25rem;
}

.member-page-nav__menu:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.member-page-nav__menu:not(:disabled):hover,
.member-page-nav__menu.is-active {
  border-color: #0d9488;
  color: #0f766e;
}

.member-page-nav__menu.is-active {
  background: #f0fdfa;
}

.member-page-nav__menu-icon {
  flex-shrink: 0;
  display: block;
  font-size: 1rem;
  line-height: 1;
}

.member-page-nav__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  flex: 0 0 auto;
}

.member-page-nav__logout {
  flex: 0 0 auto;
  white-space: nowrap;
}

.member-page-stack {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.member-page-pane {
  flex: 1 1 auto;
  min-height: 0;
  display: none;
  flex-direction: column;
  overflow: visible;
}

.member-page-pane.is-active {
  display: flex;
}

.member-page-pane--intake .member-input-card--viber {
  flex: 1 1 auto;
  min-height: 0;
}

.member-page-placeholder {
  flex: 1 1 auto;
  min-height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
    justify-content: center;
  gap: 0.35rem;
  padding: 1.25rem 1rem;
  text-align: center;
}

.member-page-placeholder--records {
  align-items: stretch;
  text-align: left;
}

.member-page-placeholder__back {
  align-self: flex-start;
  margin-bottom: 0.25rem;
}

.member-page-placeholder__title {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  color: #0f172a;
}

.member-page-placeholder__hint {
  margin: 0;
  max-width: 18rem;
}

.member-page-placeholder__filter-frame {
  display: inline-flex;
  margin-top: 0.75rem;
  align-self: center;
  opacity: 0.55;
  pointer-events: none;
}

body.app-role-member.member-page--menu .member-composer-dock,
body.app-role-member.member-page--records .member-composer-dock {
  visibility: hidden;
  pointer-events: none;
}

.member-page-pane--menu {
  overflow: visible;
}

.member-menu-page {
  padding: 0.55rem 0.65rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.member-menu-section--week-lay {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.member-menu-section {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.member-menu-section + .member-menu-section {
  padding-top: 0.65rem;
  border-top: 1px solid #e2e8f0;
}

.member-menu-section__title {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.member-menu-profile-details {
  display: block;
}

.member-menu-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem 0.65rem;
  align-items: start;
}

.member-menu-profile-grid__col {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.member-menu-profile-line {
  font-size: 0.8rem;
  line-height: 1.3;
  color: #334155;
  word-break: break-word;
}

.member-menu-profile-divider {
  margin: 0.45rem 0 0.5rem;
  border: 0;
  border-top: 1px solid #cbd5e1;
}

.member-menu-section--guide {
  gap: 0.35rem;
}

.member-menu-section--guide .member-guide-panel {
  max-height: none;
  overflow: visible;
  padding: 0;
}

.member-menu-feed-legend-grid {
  gap: 0.28rem 0.65rem;
}

.member-menu-feed-legend-line {
  display: flex;
  align-items: baseline;
    flex-wrap: wrap;
  gap: 0.12rem;
}

.member-menu-feed-legend-line--red-label {
  color: var(--amount-color);
  font-weight: 600;
}

.member-menu-feed-legend-line--blue-label {
  color: #1d4ed8;
  font-weight: 600;
}

.member-menu-feed-legend-line--delete {
  display: grid;
  grid-template-columns: minmax(3.75rem, auto) 1fr;
  gap: 0.35rem 0.65rem;
  align-items: baseline;
  margin-top: 0.12rem;
}

.member-menu-feed-legend-line__lbl {
  white-space: nowrap;
}

.member-menu-feed-legend-line__val {
  min-width: 0;
  word-break: break-word;
}

.member-menu-legend-ticks {
  font-weight: 700;
  letter-spacing: -0.08em;
  white-space: nowrap;
}

.member-menu-legend-spinner {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid #d1d5db;
  border-top-color: #4b5563;
  border-radius: 50%;
  animation: member-delivery-spin 0.75s linear infinite;
  vertical-align: -0.12em;
  flex: 0 0 auto;
}

.member-menu-legend-ticks--reach {
  color: #6b7280;
}

.member-menu-legend-ticks--accept {
  color: #1d4ed8;
}

.member-menu-legend-ticks--failed {
  color: #b91c1c;
  font-weight: 700;
  letter-spacing: 0;
}

.member-menu-legend-ticks__tick2 {
  margin-inline-start: -0.15em;
}

.member-menu-section__action {
  align-self: flex-start;
  margin-top: 0.15rem;
}

.member-menu-section__message.message {
  margin: 0.1rem 0 0;
  min-height: 1.1rem;
}

.member-menu-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  text-align: left;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.member-menu-link:not(:disabled):hover {
  border-color: #0d9488;
  background: #f0fdfa;
}

.member-menu-link:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.member-menu-link__label {
  font-weight: 700;
  font-size: 0.88rem;
  color: #0f172a;
}

.member-menu-link__hint {
  font-size: 0.74rem;
}

/* UX-13 — Member usage guide (embedded in Menu) */
.member-guide-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.member-guide-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

.member-guide-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.2rem;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.member-guide-tabs__seg {
  flex: 1 1 0;
  margin: 0;
  padding: 0.45rem 0.5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  touch-action: manipulation;
}

.member-guide-tabs__seg.is-active {
  background: #fff;
  color: #0f766e;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.member-guide-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.member-guide-toc {
  margin: 0 0 0.15rem;
  padding: 0.5rem 0.55rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.member-guide-toc__heading {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
}

.member-guide-toc__list {
  margin: 0;
  padding: 0 0 0 1rem;
  columns: 2;
  column-gap: 0.75rem;
  font-size: 0.74rem;
  line-height: 1.45;
}

.member-guide-toc__list a {
  color: #0d9488;
  text-decoration: none;
  word-break: break-word;
}

.member-guide-toc__list a:hover {
  text-decoration: underline;
}

.member-guide-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.member-guide-card__title {
  padding: 0.52rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  list-style: none;
  line-height: 1.35;
  background: #f1f5f9;
  border-inline-start: 3px solid #94a3b8;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.member-guide-card__title::-webkit-details-marker {
  display: none;
}

.member-guide-card__title::before {
  content: "▸ ";
  color: currentColor;
  opacity: 0.72;
  font-size: 0.72rem;
}

.member-guide-card[open] .member-guide-card__title::before {
  content: "▾ ";
}

.member-guide-card[open] .member-guide-card__title {
  border-bottom: 1px solid #e2e8f0;
}

/* UX-13 — 2D guide accordion title colours */
#memberGuideMount2d > details.member-guide-card:nth-of-type(6n + 1) .member-guide-card__title {
  background: #ccfbf1;
  color: #0f766e;
  border-inline-start-color: #14b8a6;
}

#memberGuideMount2d > details.member-guide-card:nth-of-type(6n + 2) .member-guide-card__title {
  background: #d1fae5;
  color: #047857;
  border-inline-start-color: #10b981;
}

#memberGuideMount2d > details.member-guide-card:nth-of-type(6n + 3) .member-guide-card__title {
  background: #ecfdf5;
  color: #065f46;
  border-inline-start-color: #34d399;
}

#memberGuideMount2d > details.member-guide-card:nth-of-type(6n + 4) .member-guide-card__title {
  background: #e0f2fe;
  color: #0369a1;
  border-inline-start-color: #38bdf8;
}

#memberGuideMount2d > details.member-guide-card:nth-of-type(6n + 5) .member-guide-card__title {
  background: #fef3c7;
  color: #b45309;
  border-inline-start-color: #fbbf24;
}

#memberGuideMount2d > details.member-guide-card:nth-of-type(6n + 6) .member-guide-card__title {
  background: #fce7f3;
  color: #be185d;
  border-inline-start-color: #f472b6;
}

/* UX-13 — 3D guide accordion title colours */
#memberGuideMount3d > details.member-guide-card:nth-of-type(6n + 1) .member-guide-card__title {
  background: #ede9fe;
  color: #5b21b6;
  border-inline-start-color: #8b5cf6;
}

#memberGuideMount3d > details.member-guide-card:nth-of-type(6n + 2) .member-guide-card__title {
  background: #e0e7ff;
  color: #4338ca;
  border-inline-start-color: #6366f1;
}

#memberGuideMount3d > details.member-guide-card:nth-of-type(6n + 3) .member-guide-card__title {
  background: #dbeafe;
  color: #1d4ed8;
  border-inline-start-color: #3b82f6;
}

#memberGuideMount3d > details.member-guide-card:nth-of-type(6n + 4) .member-guide-card__title {
  background: #cffafe;
  color: #0e7490;
  border-inline-start-color: #22d3ee;
}

#memberGuideMount3d > details.member-guide-card:nth-of-type(6n + 5) .member-guide-card__title {
  background: #fae8ff;
  color: #86198f;
  border-inline-start-color: #d946ef;
}

#memberGuideMount3d > details.member-guide-card:nth-of-type(6n + 6) .member-guide-card__title {
  background: #f3e8ff;
  color: #6b21a8;
  border-inline-start-color: #a855f7;
}

.member-guide-card__body {
  padding: 0 0.6rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-top: 1px solid #f1f5f9;
}

.member-guide-inline-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(12.8rem, 1fr));
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.1rem;
}

.member-guide-inline-panel {
  border: 1px solid #dbe4ee;
  border-radius: 0.65rem;
  background: #f8fafc;
  min-width: 12.8rem;
}

.member-guide-inline-panel__title {
  margin: 0;
  padding: 0.42rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #0f172a;
  border-bottom: 1px solid #dbe4ee;
  background: #eef2f7;
}

.member-guide-inline-panel__body {
  padding: 0.46rem 0.55rem 0.52rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #334155;
}

.member-guide-block__lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: none;
  margin-bottom: 0.12rem;
}

.member-guide-block__val {
  font-size: 0.78rem;
  line-height: 1.4;
  color: #334155;
}

.member-guide-block__val p {
  margin: 0 0 0.25rem;
}

.member-guide-block__val p:last-child {
  margin-bottom: 0;
}

.member-guide-ol,
.member-guide-ul {
  margin: 0;
  padding-left: 1.1rem;
}

.member-guide-ol {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  list-style-type: decimal;
  list-style-position: outside;
}

.member-guide-kbd {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-radius: 0.25rem;
  border: 1px solid #94a3b8;
  background: #f8fafc;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}

.member-guide-composer {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  background: #ecfdf5;
  border: 1px solid #99f6e4;
  font-family: ui-monospace, monospace;
  font-size: 0.76rem;
  font-weight: 600;
  color: #0f766e;
}

.member-guide-warn {
  margin: 0;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  font-size: 0.76rem;
  line-height: 1.35;
  color: #9a3412;
}

.member-guide-warn--top {
  margin-bottom: 0.35rem;
}

.member-guide-mock-feed {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
}

.member-guide-mock-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  font-size: 0.76rem;
  font-family: ui-monospace, monospace;
}

.member-guide-mock-row__num {
  color: var(--amount-color, #b91c1c);
  font-weight: 600;
}

.member-guide-mock-row__amt {
  color: #1e293b;
  font-weight: 600;
}

.member-guide-mock-row__extra {
  font-size: 0.7rem;
  color: #64748b;
}

.member-guide-swatch {
  display: inline-block;
  padding: 0 0.25rem;
  border-radius: 4px;
  font-weight: 600;
}

.member-guide-swatch--red {
  color: var(--amount-color, #b91c1c);
}

.member-guide-swatch--blue {
  color: #1d4ed8;
}

/* UX-13 — R simple vs dual amount side-by-side */
.member-guide-r-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 0.85rem;
  align-items: start;
}

.member-guide-r-col {
  min-width: 0;
  padding: 0.5rem 0.45rem 0.35rem;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fafafa;
}

.member-guide-r-col__title {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.3;
  color: #0f766e;
  text-align: center;
}

.member-guide-r-col .member-guide-block__lbl {
  font-size: 0.68rem;
}

.member-guide-r-col .member-guide-composer {
  font-size: 0.7rem;
}

.member-guide-r-col .member-guide-mock-feed {
  padding: 0.28rem 0.35rem;
}

.member-guide-r-col .member-guide-mock-row {
  font-size: 0.7rem;
}

@media (max-width: 520px) {
  .member-guide-r-compare {
    grid-template-columns: 1fr;
  }
}

.member-menu-week-lay__picker {
  margin-bottom: 0.65rem;
}

.member-menu-week-lay__picker .report-week-picker-block {
  margin: 0;
}

.member-menu-week-lay__table {
  margin-top: 0.35rem;
}

.member-records-3d-shell .member-menu-week-lay__wrap--3d-records {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.member-menu-week-lay-table--3d-records {
  min-width: 52rem;
}

.member-menu-week-lay-col--period {
  min-width: 7.5rem;
}

.member-menu-week-lay-col--w1amt,
.member-menu-week-lay-col--p1amt,
.member-menu-week-lay-col--w2amt,
.member-menu-week-lay-col--p2amt,
.member-menu-week-lay-col--totalpaid {
  min-width: 4.25rem;
}

.member-menu-week-lay-table__period {
  text-align: left;
  font-size: 0.8125rem;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-menu-week-lay-table--3d-records .report-live-tag {
  font-size: 0.6875rem;
  margin-left: 0.15rem;
}

.member-records-3d-shell {
  margin-top: 0.35rem;
}

.member-records-week-shell {
  margin-top: 0.35rem;
}

.member-records-week-shell .member-menu-week-lay__wrap {
  margin-top: 0;
}

.member-menu-week-lay-shell {
  margin-top: 0;
}

.member-records-panel {
  padding: 0.75rem 0.85rem 1rem;
}

.member-records-panel__back {
  margin-bottom: 0.5rem;
}

.member-records-panel__title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.member-records-panel__hint {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
}

.member-records-panel__period-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.member-records-panel__period-select {
  width: 100%;
  max-width: 100%;
  padding: 0.4rem 0.5rem;
  font-size: 0.95rem;
}

.member-records-feed-host {
  min-height: 6rem;
  max-height: min(52vh, 28rem);
  overflow: auto;
  border: 1px solid var(--border, #ccc);
  border-radius: 0.35rem;
  background: var(--surface, #fff);
}

.member-intake-root--history .member-chat-feed--history {
  min-height: 5rem;
  max-height: none;
}

.member-menu-week-lay-mount {
  min-height: 2rem;
  min-width: 0;
}

.member-menu-week-lay__name {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  font-weight: 700;
  font-style: italic;
  color: #dc2626;
  text-align: center;
}

.member-menu-week-lay__week {
  margin: 0 0 0.45rem;
  font-size: 0.74rem;
  text-align: center;
}

.member-menu-week-lay__tools {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.35rem;
}

.member-menu-week-lay__wrap {
  border-top: 2px solid #dc2626;
  border-bottom: 2px solid #dc2626;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  display: block;
  cursor: zoom-in;
}

.member-menu-week-lay-table {
  width: max-content;
  min-width: 34rem;
  max-width: none;
  margin: 0;
  border-collapse: collapse;
  font-size: clamp(0.58rem, 2.35vw, 0.72rem);
  table-layout: fixed;
}

.member-menu-week-lay-col--day {
  width: 10%;
}

.member-menu-week-lay-col--time {
  width: 10%;
}

.member-menu-week-lay-col--wnum {
  width: 5%;
}

.member-menu-week-lay-col--sold {
  width: 18%;
}

.member-menu-week-lay-col--mb-ratio {
  width: 5%;
}

.member-menu-week-lay-table__mb-ratio {
  font-weight: 800;
  color: #0d9488;
}

.summary-sold-mb-ratio {
  display: inline-block;
  margin-inline-start: 0.28rem;
  padding: 0.06rem 0.38rem;
  border-radius: 6px;
  font-size: 0.78em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: #0f766e;
  background: rgba(45, 212, 191, 0.22);
  border: 1px solid rgba(13, 148, 136, 0.35);
  vertical-align: middle;
}

.member-menu-week-lay-col--com {
  width: 5%;
}

.member-menu-week-lay-col--payment {
  width: 20%;
}

.member-menu-week-lay-col--wamt {
  width: 10%;
}

.member-menu-week-lay-col--share {
  width: 20%;
}

.member-menu-week-lay-col--total {
  width: 20%;
}

.member-menu-week-lay-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: flex;
  align-items: center;
    justify-content: center;
  padding: 0.75rem;
}

.member-menu-week-lay-fullscreen.hidden {
  display: none !important;
}

.member-menu-week-lay-fullscreen__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.55);
}

.member-menu-week-lay-fullscreen__card {
  position: relative;
  width: min(98vw, 74rem);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.65rem;
}

.member-menu-week-lay-fullscreen__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.member-menu-week-lay-fullscreen__title {
  margin: 0;
  font-size: 1rem;
}

.member-menu-week-lay-fullscreen__body {
  overflow: auto;
  max-height: calc(94vh - 4.2rem);
  padding-right: 0.1rem;
}

.member-menu-week-lay-fullscreen .member-menu-week-lay__wrap {
  max-height: calc(94vh - 12rem);
  overflow: auto;
  cursor: default;
}

.member-menu-week-lay-table th,
.member-menu-week-lay-table td {
  border: 1px solid #0f172a;
  padding: 0.28rem 0.2rem;
  text-align: center;
  vertical-align: middle;
}

.member-menu-week-lay-table thead th {
  font-weight: 800;
  background: #fff;
  color: #0f172a;
}

.member-menu-week-lay-table__day,
.member-menu-week-lay-table__time {
  font-weight: 700;
  text-transform: uppercase;
}

.member-menu-week-lay-table__wnum {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.member-menu-week-lay-table__num {
  font-variant-numeric: tabular-nums;
}

.member-menu-week-lay-table__row--live td {
  background: #f0fdfa;
}

.member-menu-week-lay-table__foot td {
  font-weight: 800;
  background: #fef9c3;
  border-top: 2px solid #dc2626;
  border-bottom: 2px solid #dc2626;
}

.member-menu-week-lay-table__payment--live {
  color: #0f766e;
  font-weight: 800;
}

.member-menu-week-lay-table__payment--saved {
  color: #0f172a;
  font-weight: 800;
}

.member-menu-week-lay-table__foot-total {
  font-size: 0.8rem;
}

.member-menu-week-lay-table__empty {
  padding: 0.65rem;
  text-align: center;
}

.member-menu-week-lay__payment-note {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  text-align: center;
}

/* Admin ACCOUNT → My Profile week summary (Agent all per period) */
.admin-profile-week-lay-card__hint {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  line-height: 1.3;
}

.admin-profile-week-lay-card .legacy-section-subtitle {
  margin-bottom: 0.15rem;
}

.admin-profile-week-lay-mount {
  min-height: 0;
  overflow: hidden;
}

.agent-profile-week-context {
  margin: 0 0 0.35rem;
  padding: 0.28rem 0.35rem;
  border-bottom: 1px solid #e2e8f0;
  min-height: 1.85rem;
}

.agent-profile-week-context__strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.agent-profile-week-context__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  flex: 0 0 auto;
  white-space: nowrap;
}

.agent-profile-week-context__lbl {
  font-weight: 600;
  font-size: 0.72rem;
  color: #475569;
}

.agent-profile-week-context__val {
  font-weight: 600;
  font-size: 0.82rem;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.agent-profile-week-context__period {
  color: #1e40af;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.admin-profile-week-lay-card .agent-profile-week-context .main-board-period-status {
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-profile-week-lay-card {
  overflow: hidden;
}

.admin-profile-week-lay-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.admin-profile-week-lay__picker {
  margin: 0 0 0.35rem;
}

.profile-week-arrow-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin: 0 0 0.35rem;
  padding: 0.2rem 0;
}

.profile-week-arrow-nav__btn {
  box-sizing: border-box;
  min-width: 3.5rem;
  min-height: 3rem;
  padding: 0.4rem 0.85rem;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
  border: 2px solid #475569;
  border-radius: 0.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.14);
  flex-shrink: 0;
}

.profile-week-arrow-nav__btn:hover:not(:disabled) {
  color: #020617;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border-color: #334155;
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.18);
}

.profile-week-arrow-nav__btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.profile-week-arrow-nav__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.profile-week-arrow-nav__label {
  margin: 0;
  flex: 1 1 auto;
  min-width: 9rem;
  max-width: 100%;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

/* Member menu / records — horizontal compact week stepper (not tall ‹ › blocks). */
.profile-week-arrow-nav--compact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  margin: 0 0 0.25rem;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

.profile-week-arrow-nav--compact .profile-week-arrow-nav__btn {
  box-sizing: border-box;
  width: 2.15rem;
  min-width: 2.15rem;
  height: 2.15rem;
  min-height: 2.15rem;
  padding: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-width: 1px;
  border-radius: 0.4rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

.profile-week-arrow-nav--compact .profile-week-arrow-nav__label {
  flex: none;
  min-width: 0;
  max-width: none;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0 0.1rem;
}

.member-menu-week-lay__table--busy {
  opacity: 0.72;
  pointer-events: none;
}

.member-menu-week-lay__loading {
  margin: 0.35rem 0;
  font-size: 0.82rem;
}

.admin-profile-week-lay__picker .report-week-picker-block {
  margin: 0;
}

.admin-profile-week-lay__picker .report-week-list-wrap {
    max-width: 100%;
  margin: 0 0 0.1rem;
}

.admin-profile-week-lay__picker .report-week-selected-title {
  display: none;
}

.admin-profile-week-lay__picker .report-week-list-table {
  font-size: 0.78rem;
}

.admin-profile-week-lay__picker .report-week-list-table thead th {
  padding: 0.22rem 0.35rem;
}

.admin-profile-week-lay__picker .report-week-list-table__cell {
  padding: 0.24rem 0.35rem;
}

.admin-profile-week-lay__table {
  margin: 0;
  padding: 0;
  min-height: 11.5rem;
}

.admin-profile-week-lay__table--busy {
  opacity: 0.72;
  pointer-events: none;
}

.admin-profile-week-lay__loading {
  margin: 0.35rem 0;
  font-size: 0.82rem;
}

.admin-profile-week-lay__wrap {
  border: 2px solid #dc2626;
  margin-top: 0;
  overflow: hidden;
}

.admin-profile-week-lay-card .table-wrap.admin-profile-week-lay__wrap {
  overflow-x: hidden;
  overflow-y: hidden;
}

.admin-profile-week-lay-table {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 0.68rem;
  table-layout: fixed;
}

/* Narrow cols vs equal 12.5% baseline: day −30%, time/w num −50%, com% −60%; rest wider */
.admin-profile-week-lay-col--day {
  width: 8%;
}

.admin-profile-week-lay-col--time {
  width: 5.5%;
}

.admin-profile-week-lay-col--wnum {
  width: 5.5%;
}

.admin-profile-week-lay-col--com {
  width: 4.5%;
}

.admin-profile-week-lay-col--sold {
  width: 19%;
}

.admin-profile-week-lay-col--payment {
  width: 16.5%;
}

.admin-profile-week-lay-col--wamt {
  width: 10%;
}

.admin-profile-week-lay-col--total {
  width: 21%;
}

.admin-profile-week-lay-table th,
.admin-profile-week-lay-table td {
  border: 1px solid #0f172a;
  padding: 0.16rem 0.15rem;
  text-align: center;
  vertical-align: middle;
  line-height: 1.2;
}

.admin-profile-week-lay-table tbody td {
  padding-top: 0.14rem;
  padding-bottom: 0.14rem;
}

.admin-profile-week-lay-table__th-day,
.admin-profile-week-lay-table__day {
  padding-left: 0.12rem;
  padding-right: 0.12rem;
}

.admin-profile-week-lay-table__th-time,
.admin-profile-week-lay-table__time {
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

.admin-profile-week-lay-table__th-wnum,
.admin-profile-week-lay-table__wnum {
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

.admin-profile-week-lay-table__th-com,
.admin-profile-week-lay-table__com {
  padding-left: 0.08rem;
  padding-right: 0.08rem;
  font-size: 0.68rem;
}

.admin-profile-week-lay-table thead th {
  font-weight: 800;
  background: #fff;
  color: #0f172a;
  text-transform: lowercase;
}

.admin-profile-week-lay-table__day,
.admin-profile-week-lay-table__time {
  font-weight: 700;
  text-transform: uppercase;
}

.admin-profile-week-lay-table__wnum {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.admin-profile-week-lay-table__num {
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
}

.admin-profile-week-lay-table__row--live td {
  background: #f0fdfa;
}

.admin-profile-week-lay-table__foot td {
  font-weight: 800;
  background: #fef9c3;
  border-top: 2px solid #dc2626;
  border-bottom: 2px solid #dc2626;
}

.admin-profile-week-lay-table__foot-total {
  font-size: 0.8rem;
}

.admin-profile-week-lay-table__empty {
  padding: 0.65rem;
  text-align: center;
}

/* Agent PAYMENT ledger (W-08) */
.agent-payment-v2 {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.agent-payment-v2__field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.agent-payment-v2__field--member {
  max-width: 20rem;
}

.agent-payment-v2__field--comment {
  flex: 1 1 10rem;
  min-width: 8rem;
}

.agent-payment-v2__label {
  font-size: 0.75rem;
  color: var(--muted, #666);
  text-transform: lowercase;
}

.agent-payment-v2__select,
.agent-payment-v2__input {
  font: inherit;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border, #ccc);
  border-radius: 4px;
  background: var(--input-bg, #fff);
}

.agent-payment-v2__form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border, #ddd);
  border-radius: 6px;
  background: var(--card-subtle, #fafafa);
}

.agent-payment-v2__form-label {
  font-size: 0.8125rem;
  font-weight: 600;
}

.agent-payment-v2__form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.55rem;
}

.agent-payment-v2__save {
  align-self: flex-end;
  min-height: 2.1rem;
}

.agent-payment-ledger-wrap,
.agent-payment-summary-wrap {
  overflow-x: auto;
}

.agent-payment-ledger-table {
  min-width: 28rem;
}

.agent-payment-ledger__date,
.agent-payment-ledger__type,
.agent-payment-ledger__comment {
  text-align: left;
  font-size: 0.8125rem;
}

.agent-payment-ledger__foot-label {
  font-weight: 600;
  text-align: right;
}

.agent-payment-ledger__foot-total {
  font-weight: 700;
}

.agent-payment-summary-block {
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border, #ddd);
}

.agent-payment-summary__title {
  margin: 0 0 0.45rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.agent-payment-summary__name {
  text-align: left;
}

.agent-payment-card__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.agent-payment-card__hint {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  line-height: 1.35;
}

.agent-payment-table-mount {
  overflow-x: auto;
}

.agent-payment-table-wrap {
  border: 2px solid #0f172a;
}

.agent-payment-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.8rem;
  table-layout: fixed;
}

.agent-payment-table th,
.agent-payment-table td {
  border: 1px solid #0f172a;
  padding: 0.35rem 0.4rem;
  vertical-align: middle;
}

.agent-payment-table thead th {
  font-weight: 800;
  text-align: center;
  background: #f8fafc;
  text-transform: lowercase;
}

.agent-payment-table__name {
  font-weight: 700;
  text-align: start;
  width: 18%;
}

.agent-payment-table__name--admin {
  color: #1d4ed8;
  font-weight: 800;
}

.agent-payment-table__name--member {
  text-align: start;
  padding-left: 0.55rem;
}

.agent-payment-table__section-label {
  text-align: start;
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f1f5f9;
  color: #334155;
  padding: 0.35rem 0.5rem;
  border-top: 2px solid #94a3b8;
}

.agent-payment-table__cell-pay,
.agent-payment-table__cell-inout,
.agent-payment-table__cell-comment {
  text-align: center;
}

.agent-payment-inout {
  width: 100%;
  max-width: 5rem;
  font-size: 0.78rem;
  padding: 0.2rem 0.25rem;
}

.agent-payment-amount {
  width: 100%;
  max-width: 7rem;
  font-size: 0.78rem;
  padding: 0.2rem 0.35rem;
  text-align: end;
}

.agent-payment-amount:disabled {
  background: #f1f5f9;
  cursor: not-allowed;
}

.agent-payment-comment {
  width: 100%;
  font-size: 0.78rem;
  padding: 0.2rem 0.35rem;
}

.agent-payment-table__num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.agent-payment-table__total {
  font-weight: 800;
  background: #fef9c3;
}

.agent-payment-table__empty {
  text-align: center;
  padding: 0.75rem;
}

body.member-profile-drawer-open {
  overflow: hidden;
}

/* Member profile drawer (user / member page) */
.member-profile-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0.26s;
}

.member-profile-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

.member-profile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.member-profile-drawer.is-open .member-profile-drawer__backdrop {
  opacity: 1;
}

.member-profile-drawer__sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100vw - 0.35rem, 23.5rem);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-radius: 0.65rem 0 0 0.65rem;
  box-shadow: -10px 0 36px rgba(15, 23, 42, 0.2);
  transform: translateX(105%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  outline: none;
}

.member-profile-drawer.is-open .member-profile-drawer__sheet {
  transform: translateX(0);
}

.member-profile-drawer__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.52rem 0.62rem;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.member-profile-drawer__head-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.member-profile-shell--drawer {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: #fff;
}

/* Member profile: sidebar + panels */
.member-profile-shell {
  display: grid;
  grid-template-columns: minmax(7.25rem, 9.25rem) 1fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.5rem 0.6rem;
  margin: 0;
}

.member-profile-sidebar {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #f8fafc;
  padding: 0.42rem 0.38rem;
}

.member-profile-sidebar__title {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 0.38rem 0.12rem;
}

.member-profile-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 0.26rem;
}

.member-profile-nav__btn {
  width: 100%;
  margin: 0;
  padding: 0.36rem 0.48rem;
  border: 1px solid transparent;
  border-radius: 0.35rem;
  background: transparent;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
}

.member-profile-nav__btn:hover:not(:disabled) {
  background: #e2e8f0;
}

.member-profile-nav__btn.is-active {
  background: #fff;
  border-color: #93c5fd;
  color: #1d4ed8;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.12);
}

.member-profile-nav__btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.member-profile-nav__btn--sub {
  font-size: 0.74rem;
  font-weight: 600;
  color: #64748b;
  padding-left: 0.58rem;
}

.member-profile-main {
  min-width: 0;
}

.member-profile-panel {
  display: none;
  padding: 0.1rem 0.05rem;
}

.member-profile-panel.is-visible {
  display: block;
}

@media (max-width: 600px) {
  .member-profile-shell {
    grid-template-columns: 1fr;
  }

  .member-profile-sidebar__nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .member-profile-nav__btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

.member-input-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.member-input-form input {
  flex: 1 1 200px;
}

.feed-title {
  margin: 1rem 0 0.4rem;
  font-size: 0.95rem;
}

.live-feed {
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem;
  background: #fafafa;
  font-size: 0.9rem;
}

.agent-live-feed-list {
  max-height: 280px;
  overflow: auto;
}

.agent-live-feed-row {
  padding: 0.38rem 0.28rem;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.88rem;
  line-height: 1.38;
}

.agent-live-feed-row:last-child {
  border-bottom: none;
}

.agent-live-feed-member {
  font-weight: 600;
  color: #1e3a8a;
  margin-right: 0.35rem;
}

.agent-live-feed-line {
  color: #334155;
  word-break: break-word;
}

.live-entry-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  grid-template-rows: auto auto;
  gap: 0.15rem 0.5rem;
  padding: 0.45rem 0.35rem;
  border-bottom: 1px solid #e5e7eb;
}

.live-entry-row:last-child {
  border-bottom: none;
}

.live-entry-time {
  grid-row: 1 / span 2;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  align-self: start;
}

.live-entry-who {
  font-weight: 600;
  color: #374151;
}

.live-entry-raw {
  grid-column: 2;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.acc-panel-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.acc-panel-divider {
  height: 1px;
  background: var(--border);
  margin: 0.35rem 0;
}

.running-period-panel {
  margin-top: 0.65rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

.running-period-heading {
  font-weight: 800;
  font-size: 0.92rem;
  color: #0f3567;
  margin: 0 0 0.35rem;
  font-family: var(--font-sans);
}

.running-period-line {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1e40af;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.running-period-note {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
}

.period-workflow-hint {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
}

.admin-period-calc-block {
  margin: 0.5rem 0 0;
}

.admin-period-calc-intro {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  line-height: 1.45;
}

.admin-period-calc-block .btn {
  margin-top: 0.15rem;
}

/* Summary & Report (and other stock figures): negative amounts → red */
.stock-figure-negative {
  color: var(--amount-color);
  font-weight: 700;
}

.admin-stock-scope-note {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #475569;
}

/* Summary pages — MYPRJ frmpsummary / frmusersummary style (web layout) */
.summary-page {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.summary-page__head {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #e2e8f0;
}

.summary-page__subform {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid #e8edf3;
}

.summary-page__subform-title {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #334155;
}

.summary-page__period-nav-mount {
  margin: 0 0 0.45rem;
}

.summary-period-arrow-nav .profile-week-arrow-nav__label {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #334155;
  text-align: center;
  flex: 1 1 auto;
  min-width: 0;
}

.summary-page__subform--correction .summary-period-arrow-nav .profile-week-arrow-nav__label {
  color: #0f766e;
}

.summary-page__actions--wnum-fix {
  margin-top: 0.45rem;
}

.summary-page__actions--resummarize {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}

.summary-page__resummarize-lbl {
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155;
}

.summary-page__resummarize-select {
  min-width: 12rem;
  max-width: min(22rem, 100%);
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
}

.summary-page__resummarize-period-label {
  margin: 0.25rem 0 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f766e;
}

.summary-page__subform--correction .summary-page__subform-title {
  color: #0f766e;
}

.summary-page__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.25rem;
  font-size: 0.92rem;
}

.summary-page__kv {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.summary-page__kv--push {
  margin-inline-start: auto;
}

.summary-page__k {
  font-weight: 700;
  color: #334155;
}

.summary-page__v {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}

.summary-page__running-period,
.agent-summary-page__running-period {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}

.summary-page__weekday {
  margin-inline-start: 0.35rem;
  font-weight: 600;
  font-size: 0.88em;
  letter-spacing: 0.06em;
  color: #1d4ed8;
}

.summary-page__v--pill {
  display: inline-block;
  min-width: 2.25rem;
  padding: 0.12rem 0.45rem;
  text-align: center;
  border-radius: 999px;
  background: #1e3a8a;
  color: #e0f2fe;
  font-weight: 800;
}

.summary-page__grid-wrap {
  max-height: min(52vh, 420px);
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fafbfc;
}

#adminStockSummaryPage .agent-summary-grid-table {
  min-width: 56rem;
}

#adminStockSummaryPage .admin-summary-agent-name-btn {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.12em;
}

#adminStockSummaryPage .admin-summary-agent-name-btn:hover {
  text-decoration-color: currentColor;
}

#adminStockSummaryPage .admin-summary-agent-name-btn:focus-visible {
  outline: 2px solid var(--focus-ring, #2563eb);
  outline-offset: 2px;
  border-radius: 2px;
}

#adminStockSummaryPage .summary-page__kv--push .summary-page__k {
  font-weight: 400;
}

#adminStockSummaryPage #adminSummaryWinNum.summary-page__v--pill {
  font-weight: 400;
}

#adminStockSummaryPage .summary-page__table .summary-page__win-num-col {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  text-align: center;
  letter-spacing: 0;
  box-sizing: border-box;
}

#adminStockSummaryPage .summary-page__table thead th.summary-page__win-num-col {
  min-width: 2.5rem;
  max-width: 4.5rem;
  padding-left: 0.08rem;
  padding-right: 0.08rem;
  font-weight: 400;
}

#adminStockSummaryPage .summary-page__table tbody td.summary-page__win-num-col {
  width: 1.85rem;
  min-width: 1.65rem;
  max-width: 2rem;
  padding-left: 0.02rem;
  padding-right: 0.02rem;
  font-weight: 400;
}

#adminStockSummaryPage .summary-page__table thead th:nth-child(5),
#adminStockSummaryPage .summary-page__table tbody td:nth-child(5) {
  padding-left: 0.32rem;
}

.summary-page__table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.summary-page__day-period-cell {
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: #334155;
  white-space: nowrap;
  min-width: 3.25rem;
}

.summary-page__table--wide {
  min-width: 72rem;
}

.summary-page__table--agent-grid {
  min-width: 42rem;
}

.summary-page__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f5f9;
  border-bottom: 2px solid #cbd5e1;
  padding: 0.45rem 0.35rem;
  text-align: start;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
}

.summary-page__period-line {
  margin: 0 0 0.4rem;
  font-size: 0.84rem;
  line-height: 1.45;
}

.summary-page__win-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin: 0 0 0.55rem;
  padding: 0.5rem 0.55rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.summary-page__win-bar-label {
  font-weight: 800;
  font-size: 0.88rem;
  color: #1e293b;
}

.summary-page__win-input {
  width: 4.75rem;
  padding: 0.4rem 0.35rem;
  border-radius: 8px;
  border: 1px solid #94a3b8;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

#adminSummaryResummarizePeriodKeyInput {
  width: 13.5rem;
  text-align: left;
  font-weight: 700;
}

#admin3dSummaryResummarizePeriodKeyInput {
  width: 14.5rem;
  text-align: left;
  font-weight: 700;
}

.summary-page__win-saved {
  font-size: 0.78rem;
  flex: 1 1 10rem;
  min-width: 0;
}

.summary-page__win-bar--readonly {
  opacity: 0.85;
  align-items: center;
}

/* Admin Summary: one type rhythm (sizes/weights) + no placeholder in W num input */
#adminStockSummaryPage .summary-page {
  gap: 0.28rem;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.45;
}

#adminStockSummaryPage .summary-page__meta-row {
  font-size: 0.875rem;
  align-items: center;
}

#adminStockSummaryPage .summary-page__k {
  font-weight: 600;
  font-size: 0.875rem;
}

#adminStockSummaryPage .summary-page__v {
  font-weight: 500;
  font-size: 0.875rem;
}

#adminStockSummaryPage .summary-page__weekday {
  margin-inline-start: 0.28rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

#adminStockSummaryPage .summary-page__win-bar-label {
  font-weight: 600;
  font-size: 0.875rem;
}

#adminStockSummaryPage .summary-page__win-input {
  font-size: 0.875rem;
  font-weight: 500;
}

#adminStockSummaryPage .summary-page__win-saved {
  font-size: 0.8125rem;
  font-weight: 400;
}

#adminStockSummaryPage .summary-page__table {
  font-size: 0.9375rem;
}

#adminStockSummaryPage .summary-page__table thead th {
  font-weight: 600;
  font-size: 0.9375rem;
}

#adminStockSummaryPage .summary-page__table .summary-page__day-period-cell {
  font-weight: 500;
}

#adminStockSummaryPage .summary-page__actions .btn {
  font-size: 0.8125rem;
}

#adminStockSummaryPage .summary-page__head {
  padding-bottom: 0.12rem;
}

#adminStockSummaryPage .summary-page__win-bar {
  margin: 0 0 0.1rem;
  padding: 0.32rem 0.4rem;
}

#adminStockSummaryPage .summary-page__w-num-scope {
  margin: 0.12rem 0 0.22rem;
  max-width: 52rem;
  font-size: 0.78rem;
  line-height: 1.42;
}

#adminStockSummaryPage #adminWinNumMessage {
  margin: 0;
  min-height: 0;
  line-height: 1.25;
}

/* SUMMARY action buttons — dim / lit / done (member Send parity, UX-09ad) */
#adminStockSummaryPage .summary-action-btn {
  font-weight: 700;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

#adminStockSummaryPage .summary-action-btn--dim:not(:disabled),
#adminStockSummaryPage .summary-action-btn--dim:disabled {
  opacity: 1;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: rgba(226, 232, 240, 0.95);
  color: #b8c4d0;
  box-shadow: inset 0 1px 2px rgba(148, 163, 184, 0.08);
  cursor: not-allowed;
}

#adminStockSummaryPage .summary-action-btn--lit:not(:disabled) {
  border-color: rgba(52, 178, 154, 0.45);
  background: linear-gradient(180deg, #ecfdf8 0%, #a7f0d8 52%, #86e8c8 100%);
  color: #1f6b5c;
  box-shadow:
    0 4px 14px rgba(94, 181, 165, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.88) inset;
  cursor: pointer;
}

#adminStockSummaryPage .summary-action-btn--lit:not(:disabled):hover {
  background: linear-gradient(180deg, #f0fdf9 0%, #9ae8cf 100%);
  border-color: rgba(94, 181, 165, 0.48);
  color: #1a5f52;
}

#adminStockSummaryPage .summary-action-btn--done:not(:disabled),
#adminStockSummaryPage .summary-action-btn--done:disabled {
  opacity: 1;
  border-color: rgba(34, 197, 94, 0.35);
  background: linear-gradient(180deg, #f0fdf4 0%, #bbf7d0 55%, #86efac 100%);
  color: #166534;
  box-shadow:
    0 2px 10px rgba(34, 197, 94, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  cursor: default;
}

#adminStockSummaryPage #adminSummarySummarizeBtn.summary-action-btn--lit:not(:disabled) {
  border-color: rgba(59, 130, 246, 0.42);
  background: linear-gradient(180deg, #eff6ff 0%, #93c5fd 52%, #60a5fa 100%);
  color: #1e40af;
  box-shadow:
    0 4px 14px rgba(59, 130, 246, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.88) inset;
}

#adminStockSummaryPage #adminSummarySummarizeBtn.summary-action-btn--lit:not(:disabled):hover {
  background: linear-gradient(180deg, #f8fbff 0%, #7cb8fd 100%);
  border-color: rgba(59, 130, 246, 0.5);
  color: #1d4ed8;
}

#adminStockSummaryPage .summary-page__win-input--locked {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #94a3b8;
  cursor: not-allowed;
}

#adminStockSummaryPage #adminWinNumModifyBtn {
  white-space: nowrap;
  font-size: 0.78rem;
  padding-inline: 0.55rem;
}

#adminStockSummaryPage #adminWinNumMessage:empty {
  display: none;
}

#adminStockSummaryPage .summary-page__grid-wrap {
  margin-top: 0;
}

/* ——— Agent SUMMARY: grid fills card width; col % = px/759 (70+70+30+30+23+81+30+59+65+47+23+70+71+90) ——— */
#agentStockSummaryPage .agent-summary-page,
#adminStockReportPage .agent-summary-page {
  gap: 0.45rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

#agentStockSummaryPage .agent-summary-page__head,
#adminStockReportPage .agent-summary-page__head {
  padding-bottom: 0.2rem;
  border-bottom: 1px solid #e2e8f0;
}

#agentStockSummaryPage .agent-summary-page__meta,
#adminStockReportPage .agent-summary-page__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.85rem;
}

#agentStockSummaryPage .agent-summary-page__meta-item--push,
#adminStockReportPage .agent-summary-page__meta-item--push {
  margin-inline-start: auto;
}

#agentStockSummaryPage .agent-summary-page__lbl,
#adminStockReportPage .agent-summary-page__lbl {
  font-weight: 600;
  color: #475569;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-inline-end: 0.2rem;
}

#agentStockSummaryPage .agent-summary-page__val,
#adminStockReportPage .agent-summary-page__val {
  font-weight: 600;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

#agentStockSummaryPage .agent-summary-page__slot,
#adminStockReportPage .agent-summary-page__slot {
  font-weight: 700;
  font-size: 0.78rem;
  color: #1e40af;
  letter-spacing: 0.03em;
}

#agentStockSummaryPage .agent-summary-page__win-hint,
#adminStockReportPage .agent-summary-page__win-hint {
  margin: 0 0 0.5rem;
  padding: 0.48rem 0.55rem;
  border-radius: 8px;
  border: 1px dashed #f59e0b;
  background: #fffbeb;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #713f12;
}

#agentStockSummaryPage .agent-summary-page__win-hint.hidden,
#adminStockReportPage .agent-summary-page__win-hint.hidden {
  display: none !important;
}

#agentStockSummaryPage .agent-summary-page__wrap,
#adminStockReportPage .agent-summary-page__wrap {
  margin-top: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#agentStockReportPage .admin-agent-report-user-panel .table-wrap.summary-page__grid-wrap,
#agentStockAgentReportPage .admin-agent-report-user-panel .table-wrap.summary-page__grid-wrap,
#adminStockAdminAgentReportPage .admin-agent-report-user-panel .table-wrap.summary-page__grid-wrap {
  margin-top: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#agentStockSummaryPage .agent-summary-grid-table,
#adminStockSummaryPage .agent-summary-grid-table,
#adminStockReportPage .agent-summary-grid-table,
#agentStockReportPage .agent-summary-grid-table,
#agentStockAgentReportPage .agent-summary-grid-table,
#adminStockAdminAgentReportPage .agent-summary-grid-table {
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
}

#agentStockReportPage .agent-summary-grid-table,
#agentStockAgentReportPage .agent-summary-grid-table,
#adminStockAdminAgentReportPage .agent-summary-grid-table {
  color: #0f172a;
}

#agentStockSummaryPage .agent-summary-grid-table thead th,
#adminStockSummaryPage .agent-summary-grid-table thead th,
#adminStockReportPage .agent-summary-grid-table thead th,
#agentStockReportPage .agent-summary-grid-table thead th,
#agentStockAgentReportPage .agent-summary-grid-table thead th,
#adminStockAdminAgentReportPage .agent-summary-grid-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.28rem 0.1rem;
  background: #f1f5f9;
  border-bottom: 2px solid #94a3b8;
  font-weight: 700;
  color: inherit;
  font-size: inherit;
  text-align: center;
  vertical-align: middle;
  line-height: 1.15;
  text-transform: none;
  hyphens: auto;
  overflow: hidden;
}

/* w num column: Latin digits — same UI font as amounts (not Myanmar stack) */
.agent-summary-grid-table thead th.agent-summary-grid-table__th--wnum,
.agent-summary-grid-table tbody td.agent-summary-grid-table__td--wnum {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  letter-spacing: 0.04em;
  color: #0f172a;
}

.agent-summary-grid-table thead th.agent-summary-grid-table__th--wnum {
  font-size: 0.75rem;
  font-weight: 600;
  padding-left: 0.12rem;
  padding-right: 0.12rem;
}

.agent-summary-grid-table tbody td.agent-summary-grid-table__td--wnum.muted {
  color: #64748b;
  font-weight: 500;
}

#adminStockSummaryPage .summary-page__win-input,
#adminStockSummaryPage #adminSummaryWinNum.summary-page__v--pill,
#agentStockSummaryPage #agentSummaryWinNumPill.summary-page__v--pill,
#adminStockReportPage #adminReportPageWinPill.summary-page__v--pill {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

/* Agent SUMMARY — W num: plain text (no pill background; admin keeps blue pill). */
#agentStockSummaryPage #agentSummaryWinNumPill.summary-page__v--pill {
  background: none;
  color: #0f172a;
  font-weight: 600;
  border-radius: 0;
  padding: 0;
  min-width: 0;
}

#agentStockSummaryPage .agent-summary-grid-table thead th.agent-summary-grid-table__th--num,
#adminStockSummaryPage .agent-summary-grid-table thead th.agent-summary-grid-table__th--num,
#adminStockReportPage .agent-summary-grid-table thead th.agent-summary-grid-table__th--num,
#agentStockReportPage .agent-summary-grid-table thead th.agent-summary-grid-table__th--num,
#agentStockAgentReportPage .agent-summary-grid-table thead th.agent-summary-grid-table__th--num,
#adminStockAdminAgentReportPage .agent-summary-grid-table thead th.agent-summary-grid-table__th--num {
  text-align: end;
  padding-right: 0.18rem;
}

#agentStockSummaryPage .agent-summary-grid-table tbody td,
#adminStockSummaryPage .agent-summary-grid-table tbody td,
#adminStockReportPage .agent-summary-grid-table tbody td,
#agentStockReportPage .agent-summary-grid-table tbody td,
#agentStockAgentReportPage .agent-summary-grid-table tbody td,
#adminStockAdminAgentReportPage .agent-summary-grid-table tbody td {
  padding: 0.22rem 0.1rem;
  border-bottom: 1px solid #e8edf3;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  font-size: inherit;
}

#agentStockSummaryPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--text,
#adminStockSummaryPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--text,
#adminStockReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--text,
#agentStockReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--text,
#agentStockAgentReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--text,
#adminStockAdminAgentReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--text {
  text-align: start;
  padding-left: 0.12rem;
}

/* Prior-period Summarize snapshots stacked under live SUMMARY rows (R-07). */
#agentStockSummaryPage .agent-summary-grid-table__row--saved td,
#adminStockSummaryPage .agent-summary-grid-table__row--saved td {
  background: #f8fafc;
  color: #475569;
  font-size: 0.92em;
}

#agentStockSummaryPage .agent-summary-grid-table__row--saved td.agent-summary-grid-table__td--text,
#adminStockSummaryPage .agent-summary-grid-table__row--saved td.agent-summary-grid-table__td--text {
  padding-left: 1.1rem;
}

#agentStockSummaryPage .agent-summary-grid-table__row--saved.agent-summary-grid-table__totals td,
#adminStockSummaryPage .agent-summary-grid-table__row--saved.agent-summary-grid-table__totals td {
  background: #f1f5f9;
  font-weight: 600;
}

/* Live current-period row at bottom of member REPORT table (R-07). */
#agentStockReportPage tr.member-report-live-row td,
#adminStockAdminMemberReportPage tr.member-report-live-row td {
  background: #eff6ff;
  color: #0f172a;
}

#agentStockSummaryPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num,
#adminStockSummaryPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num,
#adminStockReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num,
#agentStockReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num,
#agentStockAgentReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num,
#adminStockAdminAgentReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  padding-right: 0.12rem;
  font-weight: 500;
  color: #0f172a;
}

#agentStockSummaryPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.stock-figure-negative,
#adminStockSummaryPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.stock-figure-negative,
#adminStockReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.stock-figure-negative,
#agentStockReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.stock-figure-negative,
#agentStockAgentReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.stock-figure-negative,
#adminStockAdminAgentReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.stock-figure-negative {
  color: var(--amount-color);
  font-weight: 700;
}

#agentStockSummaryPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.muted,
#adminStockSummaryPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.muted,
#adminStockReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.muted,
#agentStockReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.muted,
#agentStockAgentReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.muted,
#agentStockSummaryPage .agent-summary-grid-table tbody td.muted,
#adminStockSummaryPage .agent-summary-grid-table tbody td.muted,
#adminStockReportPage .agent-summary-grid-table tbody td.muted,
#agentStockReportPage .agent-summary-grid-table tbody td.muted,
#agentStockAgentReportPage .agent-summary-grid-table tbody td.muted,
#adminStockAdminAgentReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.muted,
#adminStockAdminAgentReportPage .agent-summary-grid-table tbody td.muted {
  color: #64748b !important;
  font-weight: 500;
}

#agentStockSummaryPage .agent-summary-grid-table__empty,
#adminStockSummaryPage .agent-summary-grid-table__empty,
#adminStockReportPage .agent-summary-grid-table__empty,
#agentStockReportPage .agent-summary-grid-table__empty,
#agentStockAgentReportPage .agent-summary-grid-table__empty,
#adminStockAdminAgentReportPage .agent-summary-grid-table__empty {
  text-align: center !important;
  padding: 0.65rem 0.5rem !important;
  font-size: 0.8125rem;
}

#agentStockSummaryPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td,
#adminStockSummaryPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td,
#adminStockReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td,
#agentStockReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td,
#agentStockAgentReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td,
#adminStockAdminAgentReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td {
  border-top: 2px solid #64748b;
  background: #e2e8f0 !important;
  font-weight: 500;
  color: #0f172a;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
}

#agentStockSummaryPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num,
#adminStockSummaryPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num,
#adminStockReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num,
#agentStockReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num,
#agentStockAgentReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num,
#adminStockAdminAgentReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num {
  color: #0f172a;
}

#agentStockSummaryPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num.stock-figure-negative,
#adminStockSummaryPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num.stock-figure-negative,
#adminStockReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num.stock-figure-negative,
#agentStockReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num.stock-figure-negative,
#agentStockAgentReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__row--period td,
#adminStockAdminAgentReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__row--period td {
  background: #fff;
}

#agentStockAgentReportPage .agent-summary-grid-table tbody tr[data-report-week-total="1"] td,
#agentStockReportPage .agent-summary-grid-table tbody tr[data-report-week-total="1"] td,
#adminStockAdminAgentReportPage .agent-summary-grid-table tbody tr[data-report-week-total="1"] td,
#adminStockAdminMemberReportPage .agent-summary-grid-table tbody tr[data-report-week-total="1"] td {
  border-top: 2px solid #1e293b;
}

#agentStockAgentReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num.stock-figure-negative,
#adminStockAdminAgentReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num.stock-figure-negative {
  color: var(--amount-color);
  font-weight: 700;
}

/* Global final rule: any Summary/Report negative number must be red (including total rows). */
.agent-summary-grid-table td.stock-figure-negative,
.agent-summary-grid-table td.agent-summary-grid-table__td--num.stock-figure-negative,
.agent-summary-grid-table--sheet td.stock-figure-negative,
.summary-page__table td.summary-page__num.stock-figure-negative,
.agent-payment-table__num.stock-figure-negative,
.member-menu-week-lay-table__num.stock-figure-negative {
  color: var(--amount-color) !important;
  font-weight: 700;
}

#agentStockSummaryPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals .agent-summary-grid-table__totals-label,
#adminStockSummaryPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals .agent-summary-grid-table__totals-label,
#adminStockReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals .agent-summary-grid-table__totals-label,
#agentStockReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals .agent-summary-grid-table__totals-label,
#agentStockAgentReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals .agent-summary-grid-table__totals-label,
#adminStockAdminAgentReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals .agent-summary-grid-table__totals-label {
  font-weight: 500;
}

.agent-summary-grid-table tbody tr.agent-summary-grid-table__totals .agent-summary-grid-table__totals-label-sub {
  display: inline;
  font-weight: 700;
  font-size: 0.92em;
}

/* Admin global footer: short label; avoid ellipsis / odd selection in narrow name column */
#adminStockSummaryPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td:first-child,
#adminStockReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td:first-child {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  user-select: none;
  -webkit-user-select: none;
}

.agent-summary-grid-table tbody tr.agent-summary-grid-table__totals .agent-summary-grid-table__totals-label--rollup-compact {
  font-weight: 700;
  line-height: 1.25;
}

#agentStockSummaryPage .agent-summary-grid-table tbody tr:nth-child(even):not(.agent-summary-grid-table__totals):not(.summary-page__hint-row) td,
#adminStockSummaryPage .agent-summary-grid-table tbody tr:nth-child(even):not(.agent-summary-grid-table__totals):not(.summary-page__hint-row) td,
#adminStockReportPage .agent-summary-grid-table tbody tr:nth-child(even):not(.agent-summary-grid-table__totals):not(.summary-page__hint-row) td,
#agentStockReportPage .agent-summary-grid-table tbody tr:nth-child(even):not(.agent-summary-grid-table__totals):not(.summary-page__hint-row) td,
#agentStockAgentReportPage .agent-summary-grid-table tbody tr:nth-child(even):not(.agent-summary-grid-table__totals):not(.summary-page__hint-row) td,
#adminStockAdminAgentReportPage .agent-summary-grid-table tbody tr:nth-child(even):not(.agent-summary-grid-table__totals):not(.summary-page__hint-row) td {
  background: rgba(248, 250, 252, 0.92);
}

/* Agent + Admin SUMMARY grid: no fixed text colours (inherit from page / browser defaults). */
#agentStockSummaryPage .agent-summary-grid-table thead th,
#adminStockSummaryPage .agent-summary-grid-table thead th,
#adminStockReportPage .agent-summary-grid-table thead th,
#agentStockReportPage .agent-summary-grid-table thead th,
#agentStockAgentReportPage .agent-summary-grid-table thead th {
  color: unset;
}

#agentStockSummaryPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num,
#adminStockSummaryPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num,
#adminStockReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num,
#agentStockReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num,
#agentStockAgentReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num {
  color: unset;
}

#agentStockSummaryPage .agent-summary-grid-table tbody td.muted,
#agentStockSummaryPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.muted,
#adminStockSummaryPage .agent-summary-grid-table tbody td.muted,
#adminStockSummaryPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.muted,
#adminStockReportPage .agent-summary-grid-table tbody td.muted,
#adminStockReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.muted,
#agentStockReportPage .agent-summary-grid-table tbody td.muted,
#agentStockReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.muted,
#agentStockAgentReportPage .agent-summary-grid-table tbody td.muted,
#agentStockAgentReportPage .agent-summary-grid-table tbody td.agent-summary-grid-table__td--num.muted {
  color: unset !important;
}

#agentStockSummaryPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td,
#agentStockSummaryPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num,
#adminStockSummaryPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td,
#adminStockSummaryPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num,
#adminStockReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td,
#adminStockReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num,
#agentStockReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td,
#agentStockReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num,
#agentStockAgentReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td,
#agentStockAgentReportPage .agent-summary-grid-table tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num {
  color: unset;
}

/* Spreadsheet-style summary grid (MYPRJ summary table parity) */
.agent-summary-grid-table--sheet {
  border-radius: 0;
  border: 1px solid #000;
  font-size: 0.8125rem;
  color: #000;
}

.agent-summary-grid-table--sheet thead th,
.agent-summary-grid-table--sheet tbody td {
  border: 1px solid #000;
  padding: 0.2rem 0.32rem;
  vertical-align: middle;
}

.agent-summary-grid-table--sheet thead th {
  background: #fff;
  font-weight: 700;
  color: #000;
  border-bottom: 1px solid #000;
  white-space: nowrap;
  text-align: center;
}

.agent-summary-grid-table--sheet thead th.agent-summary-grid-table__th--text {
  text-align: center;
}

.agent-summary-grid-table--sheet tbody td.agent-summary-grid-table__td--text {
  text-align: left;
  font-weight: 500;
}

.agent-summary-grid-table--sheet thead th.agent-summary-grid-table__th--num,
.agent-summary-grid-table--sheet tbody td.agent-summary-grid-table__td--num,
.agent-summary-grid-table--sheet thead th.agent-summary-grid-table__th--wnum,
.agent-summary-grid-table--sheet tbody td.agent-summary-grid-table__td--wnum,
.agent-summary-grid-table--sheet tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--num,
.agent-summary-grid-table--sheet tbody tr.agent-summary-grid-table__totals td.agent-summary-grid-table__td--wnum,
#agentStockSummaryPage .agent-summary-grid-table--sheet tbody td.agent-summary-grid-table__td--num,
#adminStockSummaryPage .agent-summary-grid-table--sheet tbody td.agent-summary-grid-table__td--num,
#adminStockReportPage .agent-summary-grid-table--sheet tbody td.agent-summary-grid-table__td--num,
#agentStockReportPage .agent-summary-grid-table--sheet tbody td.agent-summary-grid-table__td--num,
#agentStockAgentReportPage .agent-summary-grid-table--sheet tbody td.agent-summary-grid-table__td--num,
#adminStockAdminAgentReportPage .agent-summary-grid-table--sheet tbody td.agent-summary-grid-table__td--num {
  text-align: center !important;
  font-variant-numeric: tabular-nums;
  padding-left: 0.32rem;
  padding-right: 0.32rem;
}

.agent-summary-grid-table--sheet tbody tr:nth-child(even):not(.agent-summary-grid-table__totals):not(.summary-page__hint-row) td {
  background: #fff !important;
}

.agent-summary-grid-table--sheet tbody tr.agent-summary-grid-table__row--saved td {
  background: #f9fafb !important;
}

.agent-summary-grid-table--sheet tbody tr.agent-summary-grid-table__totals td {
  background: #fff2cc !important;
  border-top: 2px solid #000 !important;
  font-weight: 700;
  color: #000 !important;
}

.agent-summary-grid-table--sheet tbody td.stock-figure-negative {
  color: #c00000 !important;
  font-weight: 700;
}

.agent-summary-grid-table--sheet tbody td:nth-child(14).stock-figure-negative {
  background: #c6efce !important;
}

.agent-summary-grid-table--sheet tbody tr.agent-summary-grid-table__totals td:nth-child(14).stock-figure-negative {
  background: #c6efce !important;
}

.agent-summary-grid-table--sheet tbody tr.agent-summary-grid-table__row--pad td {
  background: #fff !important;
  min-height: 1.28rem;
  height: 1.28rem;
}

.agent-summary-grid-table__td--pad {
  border-color: #000;
}

#adminStockReportPage .agent-summary-page__wrap,
#adminStockAdminAgentReportPage .agent-summary-page__wrap,
#adminStockAdminMemberReportPage .agent-summary-page__wrap,
#adminStockReportPage .report-week-report-panel .agent-summary-grid-table--sheet,
#adminStockAdminAgentReportPage .report-week-report-panel .agent-summary-grid-table--sheet,
#adminStockAdminMemberReportPage .report-week-report-panel .agent-summary-grid-table--sheet,
#agentStockAgentReportPage .report-week-report-panel .agent-summary-grid-table--sheet,
#agentStockReportPage .report-week-report-panel .agent-summary-grid-table--sheet {
  width: 100%;
}

#agentStockAgentReportPage .agent-summary-page__wrap,
#agentStockReportPage .agent-summary-page__wrap,
#adminStockAdminAgentReportPage .agent-summary-page__wrap,
#adminStockAdminMemberReportPage .agent-summary-page__wrap,
#adminMemberListPage .summary-page__grid-wrap,
#adminStockPeriodSimplePage .period-simple-created-wrap,
#adminStockPeriodSimplePage .period-simple-schedule-wrap,
#agentMemberCreatePage .summary-page__grid-wrap,
.agent-payment-table-wrap.summary-page__grid-wrap {
  width: 100%;
}

/* Sheet grid — mgmt lists, week picker, payment (cells without explicit BEM) */
.agent-summary-grid-table--sheet th:not([class*="agent-summary-grid-table__"]),
.agent-summary-grid-table--sheet td:not([class*="agent-summary-grid-table__"]) {
  border: 1px solid #000;
  padding: 0.2rem 0.32rem;
  vertical-align: middle;
}

.agent-summary-grid-table--sheet thead th:not([class*="agent-summary-grid-table__"]) {
  background: #fff;
  font-weight: 700;
  text-align: center;
}

.agent-mgmt-list-table.agent-summary-grid-table--sheet th,
.agent-mgmt-list-table.agent-summary-grid-table--sheet td {
  border: 1px solid #000;
  border-bottom: 1px solid #000;
}

.agent-payment-table.agent-summary-grid-table--sheet .agent-payment-table__total {
  background: #fef9c3;
  font-weight: 800;
}

.report-week-list-table.agent-summary-grid-table--sheet .report-week-list-table__cell {
  border-bottom: 1px solid #000;
  text-decoration: none;
  padding: 0.35rem 0.5rem;
}

.report-week-list-table.agent-summary-grid-table--sheet .report-week-list-table__row:hover {
  background: #eff6ff;
}

.report-week-list-table.agent-summary-grid-table--sheet .report-week-list-table__row.is-active {
  background: #dbeafe;
  font-weight: 700;
}

.report-week-list-table.agent-summary-grid-table--sheet thead th {
  border-bottom: 2px solid #000;
}

#agentStockSummaryPage .summary-page__actions .btn,
#adminStockSummaryPage .summary-page__actions .btn,
#adminStockReportPage .summary-page__actions .btn {
  font-size: 0.8125rem;
}

#agentStockSummaryPage .summary-page__agent-member-hint,
#adminStockReportPage .summary-page__agent-member-hint,
#agentStockAgentReportPage .summary-page__agent-member-hint,
#agentStockReportPage .summary-page__agent-member-hint,
#adminStockAdminAgentReportPage .summary-page__agent-member-hint,
#adminStockAdminMemberReportPage .summary-page__agent-member-hint {
  margin: 0.35rem 0 0.2rem;
  font-size: 0.78rem;
  line-height: 1.42;
  font-weight: 500;
  color: #475569;
  max-width: 56rem;
}

.summary-page__win-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  padding: 0.42rem 0.65rem;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: #e0f2fe;
  background: #1e3a8a;
  border: 1px solid #172554;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  user-select: none;
}

.summary-page__win-readonly-note {
  font-size: 0.78rem;
  line-height: 1.35;
  flex: 1 1 12rem;
  min-width: 0;
}

.summary-page__hint-row td {
  border-top: 1px dashed #cbd5e1 !important;
  background: #fffbeb !important;
}

#adminStockReportPage > .legacy-section-title {
  margin-bottom: 0.18rem;
}

#adminStockReportPage .admin-report-toolbar-card {
  margin-top: 0;
  margin-bottom: 0.35rem;
  padding: 0.22rem 0.28rem;
}

.admin-report-toolbar-card {
  margin-bottom: 0.5rem;
}

.admin-report-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  padding: 0.45rem 0.35rem;
}

#adminStockReportPage .admin-report-toolbar {
  padding: 0.28rem 0.25rem;
}

.admin-report-toolbar__btn.is-active {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.admin-admin-report-section {
  margin-top: 0.75rem;
}

#adminStockReportPage .admin-admin-report-section {
  margin-top: 0.35rem;
  padding: 0.28rem 0.32rem;
}

.admin-admin-report-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.35rem;
}

#adminStockReportPage .admin-admin-report-section__head {
  margin-bottom: 0.22rem;
}

.admin-admin-report-section__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.summary-page__table--admin-period-report {
  min-width: 44rem;
}

.summary-page__table--admin-period-report .summary-page__admin-report-period-cell {
  max-width: 22rem;
  font-size: 0.88rem;
  white-space: nowrap;
}

.summary-page__table--admin-period-report th.summary-page__admin-report-win-col,
.summary-page__table--admin-period-report td.summary-page__admin-report-win-col {
  width: 2.05rem;
  min-width: 1.85rem;
  max-width: 2.35rem;
  box-sizing: border-box;
  padding-left: 0.02rem;
  padding-right: 0.12rem;
  text-align: start;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.summary-page__table--admin-period-report tbody tr.summary-page__admin-report-totals td {
  border-top: 2px solid #94a3b8;
  background: #eef2f7 !important;
  font-weight: 600;
  font-size: inherit;
  padding-top: 0.42rem;
  padding-bottom: 0.42rem;
}

.summary-page__table--admin-period-report tbody tr.summary-page__admin-report-totals .summary-page__num {
  font-weight: 700;
}

.summary-page__table--admin-agent-by-agent {
  min-width: 42rem;
  font-size: 0.9rem;
  color: #0f172a;
}

.summary-page__table--admin-agent-by-agent thead th,
.summary-page__table--admin-agent-by-agent tbody td {
  font-size: inherit;
  color: #0f172a;
}

.summary-page__table--admin-agent-by-agent tbody td.summary-page__num {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: #0f172a;
}

.summary-page__table--admin-agent-by-agent tbody td.summary-page__num.muted,
.summary-page__table--admin-agent-by-agent tbody td.muted {
  color: #64748b;
  font-weight: 500;
}

.summary-page__table--admin-agent-by-agent tbody td.summary-page__num.stock-figure-negative {
  color: var(--amount-color);
  font-weight: 700;
}

.summary-page__table--admin-agent-by-agent tbody tr.summary-page__agent-by-agent-totals td {
  border-top: 2px solid #64748b;
  background: #e2e8f0 !important;
  font-weight: 500;
  font-size: inherit;
  color: #0f172a;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
}

.summary-page__table--admin-agent-by-agent tbody tr.summary-page__agent-by-agent-totals td.summary-page__agent-by-agent-totals-lead {
  text-align: start;
}

.summary-page__table--admin-agent-by-agent tbody tr.summary-page__agent-by-agent-totals .summary-page__agent-by-agent-totals-label {
  font-weight: 500;
  color: #0f172a;
}

.summary-page__table--admin-agent-by-agent tbody tr.summary-page__agent-by-agent-totals td.summary-page__num {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: #0f172a;
}

.summary-page__table--admin-agent-by-agent tbody tr.summary-page__agent-by-agent-totals td.summary-page__num.muted {
  color: #64748b;
  font-weight: 500;
}

.admin-agent-report-accordion-mount {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin-agent-report-accordion-hint strong {
  font-weight: 700;
}

.report-week-nav-mount .report-week-arrow-nav {
  margin-bottom: 0.5rem;
}

.report-week-nav-mount .report-week-selected-title {
  margin: 0;
}

.report-week-nav-mount {
  margin: 0 0 1rem;
}

.report-week-picker-block {
  margin: 0;
}

.report-week-list-wrap {
  max-width: 22rem;
  margin-bottom: 0.65rem;
}

.report-week-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  background: #fff;
}

.report-week-list-table thead th {
  text-align: start;
  font-weight: 700;
  padding: 0.45rem 0.65rem;
  border-bottom: 2px solid #94a3b8;
  background: #f1f5f9;
}

.report-week-list-table__row {
  cursor: pointer;
}

.report-week-list-table__row:hover {
  background: #eff6ff;
}

.report-week-list-table__row.is-active {
  background: #dbeafe;
  font-weight: 700;
}

.report-week-list-table__row.is-active .report-week-list-table__cell {
  color: var(--primary-dark);
}

.report-week-list-table__cell {
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid #cbd5e1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.report-week-selected-title {
  margin: 0 0 0.75rem;
  padding: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  border-bottom: 1px solid #cbd5e1;
}

.report-week-list__tag {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}

.report-week-report-panel {
  margin-top: 0.25rem;
}

.delete-data-card {
  max-width: 36rem;
  margin-bottom: 1rem;
}

.delete-data-card--3d {
  margin-top: 0.35rem;
}

.delete-data-plane-title {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.delete-data-plane-title--3d {
  color: #6b4fa8;
}

.delete-data-intro {
  margin: 0 0 1rem;
}

.delete-data-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #cbd5e1;
}

.delete-data-tab {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  background: #f8fafc;
  font: inherit;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
}

.delete-data-tab:hover {
  background: #f1f5f9;
}

.delete-data-tab.is-active {
  background: #fff;
  color: #9f1239;
  border-bottom-color: #9f1239;
}

.delete-data-range-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-bottom: 0.75rem;
  padding: 0.85rem 1rem;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

.delete-data-range-panel.is-summary-mode {
  background: #eef2ff;
  border-color: #a5b4fc;
}

.delete-data-range-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.delete-data-range-label {
  font-weight: 700;
  min-width: 2.5rem;
}

.delete-data-date-input {
  font: inherit;
  padding: 0.35rem 0.5rem;
  border: 1px solid #94a3b8;
  border-radius: 4px;
}

.delete-data-period-panel {
  margin-bottom: 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #f8fafc;
}

.delete-data-period-select {
  flex: 1;
  min-width: 0;
  width: 100%;
  font: inherit;
  padding: 0.35rem 0.5rem;
  border: 1px solid #94a3b8;
  border-radius: 4px;
  background: #fff;
}

.delete-data-period-note {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

.delete-data-mode-hint {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
}

.delete-data-actions {
  margin-top: 0.25rem;
}

.delete-data-quick-wipe {
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 2px dashed #cbd5e1;
}

.delete-data-quick-wipe-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: #9f1239;
}

.delete-data-quick-wipe-hint {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
}

.delete-data-quick-wipe-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
}

.delete-data-quick-wipe-actions .btn {
  width: 100%;
}

.login-live-url-hint {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.login-live-url-hint a {
  font-weight: 700;
}

.member-install-panel {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #f0fdfa;
}

.member-install-panel.hidden {
  display: none;
}

.member-install-panel__title {
  margin: 0 0 0.35rem;
  font-weight: 700;
  color: #0f766e;
}

.member-install-panel__hint {
  margin: 0 0 0.65rem;
  font-size: 0.92rem;
}

.member-install-panel__url {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  word-break: break-all;
}

.member-install-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.member-install-steps {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.88rem;
}

.member-home-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid #a7f3d0;
  background: #ecfdf5;
}

.member-home-banner.hidden {
  display: none;
}

.member-home-banner__text {
  margin: 0;
  flex: 1 1 12rem;
  font-size: 0.9rem;
}

.member-home-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.member-home-banner__status {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
}

.member-home-banner__status--ok {
  color: #047857;
}

.member-home-banner__status--warn {
  color: #b45309;
}

.member-home-banner__link-reveal {
  flex: 1 1 100%;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.4rem 0.5rem;
  font-size: 0.78rem;
  border: 1px solid #6ee7b7;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
}

#loginSection {
  position: relative;
  z-index: 13100;
}

.login-build-label {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: #94a3b8;
  text-align: center;
}

.login-member-install-panel {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #f0fdfa;
}

.login-member-install-panel__title {
  margin: 0 0 0.35rem;
  font-weight: 700;
  color: #0f766e;
}

.login-member-install-panel__hint {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.login-member-install-panel__status {
  margin: 0.35rem 0 0;
}

.login-member-install-panel__inapp {
  margin: 0.35rem 0;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #9a3412;
}

.login-member-install-panel__steps {
  margin: 0.35rem 0 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #065f46;
}

.login-member-install-panel__url {
  width: 100%;
  margin: 0.35rem 0 0;
  font-size: 0.68rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.member-shortcut-link {
  margin: 0.5rem 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid #99f6e4;
  background: linear-gradient(180deg, #f0fdfa 0%, #ecfeff 100%);
}

.member-shortcut-link--compact {
  margin: 0.35rem 0 0.55rem;
}

.member-shortcut-link--create-hint {
  border-style: dashed;
}

.member-shortcut-link__title {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #0f766e;
}

.member-shortcut-link__hint {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  line-height: 1.4;
}

.member-shortcut-link__url {
  width: 100%;
  margin: 0 0 0.35rem;
  font-size: 0.65rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid #5eead4;
  border-radius: 8px;
  background: #fff;
}

.member-shortcut-link__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.sys2d-install-link-card__pattern {
  margin: 0 0 0.35rem;
  font-size: 0.62rem;
  line-height: 1.35;
  word-break: break-all;
}

.member-entry-link-cell {
  max-width: 14rem;
  font-size: 0.62rem;
  line-height: 1.35;
}

.member-entry-link-cell__a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.2rem;
  word-break: break-all;
}

.login-member-install-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.member-install-modal {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.78);
}

.member-install-modal.hidden {
  display: none;
}

body.member-install-modal-open {
  overflow: hidden;
}

.member-install-modal__card {
  width: 100%;
  max-width: 22rem;
  margin: 0;
  padding: 1.15rem 1.2rem;
  border: 2px solid #14b8a6;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.member-install-modal__title {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  color: #0f766e;
}

.member-install-modal__lead {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
}

.member-install-modal__user {
  margin: 0 0 0.85rem;
  font-weight: 700;
  color: #134e4a;
}

.member-install-modal__primary {
  width: 100%;
  margin-bottom: 0.65rem;
  font-size: 1.05rem;
  padding: 0.65rem 1rem;
}

.member-install-modal__ios-steps {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

.member-install-modal__ios-note {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
}

.member-install-modal__skip {
  width: 100%;
}

.main-board-define-modal {
  position: fixed;
  inset: 0;
  z-index: 12500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.main-board-define-modal.hidden {
  display: none;
}

.main-board-define-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  border: none;
  padding: 0;
  cursor: default;
}

.main-board-define-modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 20rem;
  margin: 0;
  padding: 1.1rem 1.15rem;
}

.main-board-define-modal__title {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
}

.main-board-define-modal__hint {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.main-board-define-modal__field {
  margin-bottom: 0.85rem;
}

.main-board-define-modal__field .main-board-limit-input {
  width: 100%;
  max-width: none;
}

.main-board-define-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

body.main-board-define-modal-open {
  overflow: hidden;
}

.password-change-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, 0.72);
}

.password-change-overlay.hidden {
  display: none;
}

body.password-change-active {
  overflow: hidden;
}

.password-change-card {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin: 0;
}

.password-change-close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font-size: 1.2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.password-change-close:hover {
  background: #f3f4f6;
}

.password-change-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.password-change-user {
  margin: 0 0 1rem;
  font-weight: 700;
  color: #0f766e;
}

.period-page-readiness {
  max-width: 52rem;
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border: 2px solid #94a3b8;
  border-radius: 8px;
  background: #f8fafc;
}

.period-page-readiness-list {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
  font-size: 0.92rem;
}

.period-page-readiness-list li {
  margin-bottom: 0.35rem;
}

.period-page-readiness-list li.is-ok {
  color: #047857;
}

.period-page-readiness-list li.is-warn {
  color: #b45309;
}

.period-page-readiness-list li.is-fail {
  color: #b91c1c;
}

.period-page-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 52rem;
}

#adminPeriodSetupForm.period-page-setup {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

#periodPageBoxWeekCreate,
#periodPageBoxPeriodCreate {
  display: block;
}

#adminDashboard .period-page-readiness,
#adminDashboard .period-page-stack,
#agentDashboard .period-page-readiness,
#agentDashboard .period-page-stack {
  width: 100%;
  max-width: none;
}

#adminStockPeriodPage .period-page-readiness,
#adminStockPeriodPage .period-page-stack,
#adminStockPeriod3dPage .period-page-readiness,
#adminStockPeriod3dPage .period-page-stack,
#agentStockPeriodPage .period-page-readiness,
#agentStockPeriodPage .period-page-stack,
#agentStockPeriod3dPage .period-page-readiness,
#agentStockPeriod3dPage .period-page-stack {
  width: 100% !important;
  max-width: none !important;
}

.period-page-box {
  border: 2px solid #94a3b8;
  border-radius: 8px;
  padding: 1rem 1.1rem 1.1rem;
  background: #fff;
}

.period-page-box__title {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: underline;
  color: #0f172a;
}

.period-page-box__note {
  margin: 0.35rem 0 0.65rem;
  font-size: 0.88rem;
}

.period-page-inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin-bottom: 0.55rem;
}

.period-page-inline-lbl {
  font-weight: 700;
  min-width: 8.5rem;
  color: #0f172a;
}

.period-page-inline-input--short {
  flex: 0 1 auto;
  min-width: 4.5rem;
  max-width: 8rem;
}

.period-page-inline-row--meta {
  gap: 0.35rem 0.5rem;
}

.period-page-inline-lbl--meta {
  min-width: auto;
  font-size: 0.92rem;
}

.period-page-inline-input--meta {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding: 0.3rem 0.4rem;
  font-size: 0.92rem;
  text-align: center;
}

.period-page-inline-input--date {
  max-width: 6.75rem;
}

.period-page-inline-input--day {
  max-width: 3.25rem;
}

.period-page-inline-input--period {
  max-width: 3.5rem;
}

.period-page-inline-lbl--tight {
  min-width: auto;
}

.period-page-week-chain {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.period-page-box__intro {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  line-height: 1.4;
}

.period-week-round-grid-mount {
  margin: 0 0 0.65rem;
}

.period-week-round-grid {
  display: grid;
  gap: 0.12rem;
  padding: 0.45rem 0.5rem;
  border: 2px solid #64748b;
  border-radius: 6px;
  background: #fff;
  max-width: 28rem;
}

.period-week-round-grid.is-complete {
  border-color: #16a34a;
  background: #f0fdf4;
}

.period-week-round-grid.is-incomplete {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.period-week-round-grid__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(2.6rem, 1fr));
  gap: 0.2rem;
  text-align: center;
}

.period-week-round-grid__row--head {
  margin-bottom: 0.08rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid #cbd5e1;
}

.period-week-round-grid__day {
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #0f172a;
}

.period-week-round-grid__slot {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
}

.period-week-round-grid__slot.is-on {
  color: #1d4ed8;
  font-weight: 700;
}

.period-week-round-grid__slot.is-off {
  color: #cbd5e1;
  font-weight: 500;
}

.period-week-round-grid__status {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
}

.period-week-round-grid__status.is-complete {
  color: #166534;
}

.period-week-round-grid__status.is-incomplete {
  color: #b45309;
}

.period-week-round-grid__empty {
  margin: 0;
  font-size: 0.84rem;
}

.period-page-inline-row--running {
  margin-top: 0.15rem;
}

.period-running-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.25rem;
  margin: 0.15rem 0 0.55rem;
}

.period-running-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 11rem;
  min-width: min(100%, 11rem);
  max-width: 22rem;
}

.period-running-field__lbl {
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.25;
  color: #0f172a;
}

.period-running-field .period-page-inline-input {
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.period-running-field .period-page-inline-input--status {
  max-width: none;
}

.period-page-inline-input--status {
  max-width: 10rem;
  flex: 0 1 auto;
}

.period-page-inline-input--status.period-page-inline-input--connecting {
  color: #b45309;
}

.period-page-inline-input--status.period-page-inline-input--open {
  color: #15803d;
  font-weight: 600;
}

.period-page-inline-input--status.period-page-inline-input--closed,
.period-page-inline-input--status.period-page-inline-input--pending {
  color: #b45309;
  font-weight: 600;
}

.period-page-inline-input {
  flex: 1;
  min-width: 12rem;
  max-width: 22rem;
  padding: 0.4rem 0.55rem;
  font: inherit;
  border: 2px solid #64748b;
  border-radius: 4px;
  background: #f8fafc;
}

.period-page-inline-select {
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-weight: 600;
  border: 2px solid #64748b;
  border-radius: 4px;
  min-width: 4.5rem;
}

.period-page-inline-sep {
  font-weight: 700;
  color: #334155;
  flex: 0 0 auto;
}

/* WEEK create / Period create — label - box on one line, narrow controls */
#periodPageBoxWeekCreate .period-page-inline-row--compact,
#periodPageBoxPeriodCreate .period-page-inline-row--compact {
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin-bottom: 0.4rem;
}

#periodPageBoxWeekCreate .period-page-inline-lbl--compact,
#periodPageBoxPeriodCreate .period-page-inline-lbl--compact {
  min-width: auto;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}

#periodPageBoxWeekCreate .period-page-inline-select--dow {
  flex: 0 0 auto;
  min-width: 0;
  width: 4.1rem;
  padding: 0.2rem 0.3rem;
  font-size: 0.86rem;
}

#periodPageBoxPeriodCreate .period-page-inline-input--compact {
  flex: 0 0 auto;
  min-width: 0;
  width: 4.5rem;
  max-width: 6rem;
  padding: 0.28rem 0.4rem;
  font-size: 0.86rem;
}

#periodPageBoxPeriodCreate .period-page-inline-input--time {
  flex: 0 0 auto;
  min-width: 0;
  width: 6.25rem;
  max-width: 7rem;
  padding: 0.22rem 0.35rem;
  font-size: 0.86rem;
}

.period-page-box__actions {
  margin-top: 0.65rem;
}

/* Agent dashboard: PERIOD pages are view-only (no Recheck / reset / Create / Update). */
body.sys2d-agent-period-readonly #agentDashboard .period-page-box__actions,
body.sys2d-agent-period-readonly #agentDashboard #periodPageReadinessPanel .period-page-box__actions {
  display: none !important;
}

body.sys2d-agent-period-readonly #agentDashboard #periodPageBoxWeekCreate,
body.sys2d-agent-period-readonly #agentDashboard #periodPageBoxPeriodCreate {
  display: none !important;
}

body.sys2d-agent-period-readonly #agentDashboard .period-setup-control--readonly {
  cursor: default;
  pointer-events: none;
}

body.sys2d-agent-period-readonly #agentDashboard .period-sketch-tick-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  min-height: 1.35rem;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--color-text, #111);
}

body.sys2d-agent-period-readonly #agentDashboard .period-sketch-tick-display.is-off {
  opacity: 0.2;
}

.period-page-box__actions--end {
  display: flex;
  justify-content: flex-end;
}

.period-page-box__actions--split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}

.period-page-sketch-mount {
  margin: 0;
}

.period-sketch-week-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.85rem;
}

.period-sketch-week-lbl {
  font-weight: 700;
  min-width: 6.5rem;
}

.period-sketch-week-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  padding: 0.45rem 0.65rem;
  border: 2px solid #64748b;
  border-radius: 4px;
  background: #f8fafc;
}

.period-sketch-week-day {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  cursor: pointer;
}

.period-sketch-matrix-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.65rem;
}

.period-sketch-matrix-lbl {
  font-weight: 700;
  min-width: 6.5rem;
  padding-top: 0.35rem;
}

.period-sketch-table {
  border-collapse: collapse;
  font-size: 0.95rem;
  background: #fff;
}

.period-sketch-table th,
.period-sketch-table td {
  border: 1px solid #64748b;
  padding: 0.35rem 0.55rem;
  text-align: center;
  min-width: 2.6rem;
}

.period-sketch-table th {
  background: #f1f5f9;
  font-weight: 700;
}

.period-sketch-table__lead {
  text-align: start;
  font-weight: 700;
  background: #f8fafc;
}

.period-sketch-tick-btn {
  border: 0;
  background: transparent;
  padding: 0.15rem 0.35rem;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.period-sketch-tick-btn.is-off .period-sketch-tick {
  opacity: 0.2;
}

.period-sketch-tick {
  color: #0f766e;
}

.period-page-created-rows {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.period-page-created-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #f8fafc;
}

.period-page-created-row .period-page-inline-lbl {
  min-width: auto;
  font-size: 0.92rem;
}

.period-page-created-row .period-page-inline-input {
  flex: 0 1 auto;
  min-width: 5rem;
  max-width: 10rem;
}

.report-member-picker-mount {
  margin: 0 0 0.75rem;
  max-width: 28rem;
}

.report-member-picker__select {
  width: 100%;
  max-width: 100%;
}

.report-week-table-mount {
  margin-top: 0.35rem;
}

.member-report-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.member-report-stack__list {
  max-width: 22rem;
}

.member-report-detail-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.member-report-detail-panel.hidden {
  display: none !important;
}

.member-report-detail-panel__blocks {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.member-report-index-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
}

.member-report-index-table th,
.member-report-index-table td {
  padding: 0.42rem 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  text-align: start;
}

.member-report-index-table__th--num,
.member-report-index-table td.member-report-index-table__credit {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.member-report-index-table thead th {
  background: #f1f5f9;
  font-weight: 600;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
}

.member-report-index-table tbody tr[data-member-report-pick] {
  cursor: pointer;
}

.member-report-index-table tbody tr[data-member-report-pick]:hover {
  background: #f8fafc;
}

.member-report-index-table tbody tr.is-selected {
  background: #eff6ff;
  outline: 1px solid #93c5fd;
  outline-offset: -1px;
}

.member-report-index-table tbody tr:last-child td {
  border-bottom: 0;
}

.member-report-period-blocks {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 0.5rem;
}

.member-report-period-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.member-report-period-lead-table {
  width: auto;
  min-width: 14rem;
  max-width: 22rem;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 0;
  background: #fff;
}

.member-report-period-lead-table th,
.member-report-period-lead-table td {
  padding: 0.38rem 0.55rem;
  border: 2px solid #dc2626;
  text-align: start;
  font-weight: 600;
  color: #1d4ed8;
}

.member-report-period-lead-table th.member-report-period-lead-table__credit,
.member-report-period-lead-table td.member-report-period-lead-table__credit {
  text-align: end;
  font-variant-numeric: tabular-nums;
  border-left-width: 1px;
}

.member-report-period-lead-table tbody tr[data-member-report-pick] {
  cursor: pointer;
  font-weight: 500;
  color: #0f172a;
}

.member-report-period-lead-table tbody tr[data-member-report-pick]:hover {
  background: #f8fafc;
}

.member-report-period-lead-table tbody tr.is-selected {
  background: #eff6ff;
}

.member-report-period-lead-table tbody tr.is-selected td {
  color: #1e3a8a;
}

.member-report-period-block .table-wrap.summary-page__grid-wrap {
  margin-top: 0;
  border-top: 0;
}

.member-report-period-block tr.member-report-row--picked td {
  background: #eff6ff;
}

.member-report-period-block tr.member-report-row--picked td:first-child {
  box-shadow: inset 3px 0 0 #2563eb;
}

.admin-agent-report-user-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.admin-agent-report-user-item {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.admin-agent-report-user-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.52rem 0.75rem;
  border: 0;
  background: #f8fafc;
  cursor: pointer;
  text-align: start;
  font: inherit;
  font-weight: 600;
  color: #0f172a;
  transition: background 0.15s ease;
}

.admin-agent-report-user-toggle:hover {
  background: #eff6ff;
}

.admin-agent-report-user-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

.admin-agent-report-user-item.is-open .admin-agent-report-user-toggle {
  background: #e0e7ff;
}

.admin-agent-report-user-toggle__text {
  min-width: 0;
  flex: 1 1 auto;
}

.admin-agent-report-user-toggle__main {
  display: block;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.admin-agent-report-user-toggle__sub {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  margin-top: 0.1rem;
}

.admin-agent-report-user-toggle__chev {
  flex: 0 0 auto;
  width: 1.1rem;
  text-align: center;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1;
}

.admin-agent-report-user-toggle__chev::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.18s ease;
}

.admin-agent-report-user-item.is-open .admin-agent-report-user-toggle__chev::before {
  transform: rotate(90deg);
}

.admin-agent-report-user-panel {
  border-top: 1px solid #e2e8f0;
  padding: 0.45rem 0.4rem 0.6rem;
  background: #fafbfc;
}

.admin-agent-report-user-panel[hidden] {
  display: none !important;
}

/* REPORT ledger — name row: thin accent only; opened panel stays white */
.admin-agent-report-user-item[data-agent-report-user] {
  border-color: #cbd5e1;
  border-left: 3px solid rgba(96, 165, 250, 0.55);
  background: #fff;
}

.admin-agent-report-user-item[data-agent-report-user] .admin-agent-report-user-toggle {
  background: #f8fafc;
  color: #0f172a;
}

.admin-agent-report-user-item[data-agent-report-user] .admin-agent-report-user-toggle:hover {
  background: #f1f5f9;
}

.admin-agent-report-user-item[data-agent-report-user].is-open .admin-agent-report-user-toggle {
  background: #eef2ff;
  color: #0f172a;
}

.admin-agent-report-user-item[data-agent-report-user] .admin-agent-report-user-panel {
  background: #fff;
  border-top-color: #e2e8f0;
}

.admin-agent-report-user-item[data-member-report-user] {
  border-color: #cbd5e1;
  border-left: 3px solid rgba(94, 181, 165, 0.5);
  background: #fff;
}

.admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle {
  background: #f8fafc;
  color: #0f172a;
}

.admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle:hover {
  background: #f1f5f9;
}

.admin-agent-report-user-item[data-member-report-user].is-open .admin-agent-report-user-toggle {
  background: #f1f5f9;
  color: #0f172a;
}

.admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-panel {
  background: #fff;
  border-top-color: #e2e8f0;
}

/* Member report — compact name rows (~half height) */
#agentStockReportPage .admin-agent-report-user-list {
  gap: 0.14rem;
}

#agentStockReportPage .admin-agent-report-user-item[data-member-report-user] {
  border-radius: 6px;
}

#agentStockReportPage .admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle {
  padding: 0.24rem 0.55rem;
  gap: 0.35rem;
}

#agentStockReportPage .admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle__main {
  font-size: 0.86rem;
  line-height: 1.2;
}

#agentStockReportPage .admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle__sub {
  font-size: 0.72rem;
  font-weight: 500;
  margin-top: 0;
  line-height: 1.2;
}

#agentStockReportPage .admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle__chev {
  width: 0.9rem;
  font-size: 0.62rem;
}

/* Admin REPORT — By agent / By member: compact accordion rows (parity with agent Member report) */
#adminStockAdminAgentReportPage .admin-agent-report-user-list,
#adminStockAdminMemberReportPage .admin-agent-report-user-list,
#adminStockAdminAgentReport3dPage .admin-agent-report-user-list,
#adminStockAdminMemberReport3dPage .admin-agent-report-user-list,
#agentStockReport3dPage .admin-agent-report-user-list {
  gap: 0.14rem;
}

#adminStockAdminAgentReportPage .admin-agent-report-user-item[data-agent-report-user],
#adminStockAdminMemberReportPage .admin-agent-report-user-item[data-member-report-user],
#adminStockAdminAgentReport3dPage .admin-agent-report-user-item[data-agent-report-user],
#adminStockAdminMemberReport3dPage .admin-agent-report-user-item[data-member-report-user],
#agentStockReport3dPage .admin-agent-report-user-item[data-member-report-user] {
  border-radius: 6px;
}

#adminStockAdminAgentReportPage .admin-agent-report-user-item[data-agent-report-user] .admin-agent-report-user-toggle,
#adminStockAdminMemberReportPage .admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle,
#adminStockAdminAgentReport3dPage .admin-agent-report-user-item[data-agent-report-user] .admin-agent-report-user-toggle,
#adminStockAdminMemberReport3dPage .admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle,
#agentStockReport3dPage .admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle {
  padding: 0.24rem 0.55rem;
  gap: 0.35rem;
}

#adminStockAdminAgentReportPage .admin-agent-report-user-item[data-agent-report-user] .admin-agent-report-user-toggle__main,
#adminStockAdminMemberReportPage .admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle__main,
#adminStockAdminAgentReport3dPage .admin-agent-report-user-item[data-agent-report-user] .admin-agent-report-user-toggle__main,
#adminStockAdminMemberReport3dPage .admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle__main,
#agentStockReport3dPage .admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle__main {
  font-size: 0.86rem;
  line-height: 1.2;
}

#adminStockAdminAgentReportPage .admin-agent-report-user-item[data-agent-report-user] .admin-agent-report-user-toggle__sub,
#adminStockAdminMemberReportPage .admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle__sub,
#adminStockAdminAgentReport3dPage .admin-agent-report-user-item[data-agent-report-user] .admin-agent-report-user-toggle__sub,
#adminStockAdminMemberReport3dPage .admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle__sub,
#agentStockReport3dPage .admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle__sub {
  font-size: 0.72rem;
  font-weight: 500;
  margin-top: 0;
  line-height: 1.2;
}

#adminStockAdminAgentReportPage .admin-agent-report-user-item[data-agent-report-user] .admin-agent-report-user-toggle__chev,
#adminStockAdminMemberReportPage .admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle__chev,
#adminStockAdminAgentReport3dPage .admin-agent-report-user-item[data-agent-report-user] .admin-agent-report-user-toggle__chev,
#adminStockAdminMemberReport3dPage .admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle__chev,
#agentStockReport3dPage .admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-toggle__chev {
  width: 0.9rem;
  font-size: 0.62rem;
}

.admin-agent-report-user-item[data-agent-report-user] .admin-agent-report-user-panel .table-wrap,
.admin-agent-report-user-item[data-member-report-user] .admin-agent-report-user-panel .table-wrap {
  background: #fff;
}

.summary-page__period-cell {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-page__agent-period-report td,
.summary-page__admin-period-report td {
  border-top: 2px solid #64748b !important;
  background: #e2e8f0 !important;
  font-weight: 600;
  color: #0f172a;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.summary-page__agent-period-report .summary-page__num,
.summary-page__admin-period-report .summary-page__num {
  font-weight: 800;
}

.summary-page__table tbody td {
  padding: 0.38rem 0.35rem;
  border-bottom: 1px solid #e8edf3;
  vertical-align: middle;
}

.summary-page__table tbody tr:nth-child(even) td {
  background: rgba(248, 250, 252, 0.85);
}

.summary-page__num,
.summary-page__table .summary-page__num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* Stock / summary tables: monetary columns in tbody (not muted placeholders).
   Agent-by-agent report grids use normal body colour; negative rows use .stock-figure-negative. */
.summary-page__table:not(.summary-page__table--admin-agent-by-agent) tbody td.summary-page__num:not(.muted) {
  color: var(--amount-color);
}

.summary-page__table tbody td.summary-page__num.stock-figure-negative {
  color: #7f1d1d;
  font-weight: 800;
}

.summary-page__empty {
  text-align: center;
  padding: 1rem 0.75rem !important;
}

.summary-page__totals--gross {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 1rem;
}

.summary-page__gross-label {
  font-weight: 800;
  font-size: 0.95rem;
  color: #0f172a;
}

.summary-page__metric-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex: 1 1 auto;
  justify-content: flex-start;
}

.summary-metric {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 4.5rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.summary-metric--emph {
  border-color: #3b82f6;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
}

.summary-metric__l {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.summary-metric__v {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: var(--amount-color);
}

.summary-page__totals--net {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.summary-page__net-label {
  font-weight: 800;
  font-size: 0.95rem;
  color: #0f172a;
}

.summary-page__net-value {
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 0.25rem 0.55rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  min-width: 6rem;
  text-align: end;
}

.summary-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.summary-page--agent .summary-page__title-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: #14532d;
  background: linear-gradient(180deg, #bbf7d0 0%, #86efac 100%);
  border: 1px solid #22c55e;
}

.summary-page__agent-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 1rem;
}

.summary-page__select-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
}

.summary-page__select {
  min-width: 8.5rem;
  padding: 0.38rem 0.45rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 0.88rem;
  background: #fff;
}

.summary-page__nav-mini {
  display: flex;
  gap: 0.35rem;
  margin-inline-start: auto;
}

.summary-page__agent-credits {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: flex-end;
  padding: 0.5rem 0.25rem 0;
  border-top: 1px solid #e2e8f0;
}

.summary-page__credit-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  min-width: 8rem;
}

.summary-page__credit-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #b91c1c;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.summary-page__credit-value {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: #14532d;
  color: #dcfce7;
  min-width: 5.5rem;
  text-align: end;
}

/* Member intake (DESIGN-NOTES §10): partial vs zero row — wire when UI exists */
.member-intake-line-partial {
  color: #1565c0;
  font-weight: 600;
}

.member-intake-line-zero {
  color: #c62828;
  font-weight: 600;
}

code {
  font-size: 0.88em;
  background: #f1f5f9;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
}

/* Week setup (admin PERIOD) */
.week-setup-card {
  max-width: 920px;
}

.week-setup-back {
  margin-bottom: 0.75rem;
}

.week-setup-intro {
  margin-bottom: 1rem;
  line-height: 1.45;
}

.week-setup-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 720px) {
  .week-setup-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.week-day-cell {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.45rem;
  background: #fafbfc;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}

.week-day-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: #1e3a5f;
}

.week-day-toggle {
  font-size: 0.78rem;
  color: #374151;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.week-day-toggle input {
  width: auto;
  margin: 0;
}

.week-setup-actions {
  margin-top: 0.25rem;
}

.week-setup-result-wrap {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.week-working-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.35rem;
  padding: 0.75rem 1rem;
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  font-size: 0.95rem;
}

.working-days-label,
.open-days-label {
  font-weight: 700;
  color: #1e3a8a;
}

.working-days-sep,
.open-days-sep {
  color: var(--muted);
  font-weight: 600;
}

.day-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.25rem 0.45rem;
  background: #fff;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  font-weight: 700;
  color: #1d4ed8;
}

/* Day / Period setup */
.day-period-card {
  max-width: 960px;
}

.day-period-back {
  margin-bottom: 0.75rem;
}

.day-period-intro {
  margin-bottom: 1rem;
  line-height: 1.45;
}

.day-period-built-mount {
  margin-bottom: 1rem;
}

.day-period-subtitle {
  margin-bottom: 0.4rem;
}

.day-period-subtitle-spaced {
  margin: 1.25rem 0 0.4rem;
}

.day-period-open-row,
.day-period-apply-row {
  display: grid;
  grid-template-columns: repeat(var(--day-period-cols, 5), minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.day-period-day-cell {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.35rem 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 2.35rem;
  background: #fafbfc;
}

.day-period-open-cell {
  background: #ecfdf5;
  border-color: #6ee7b7;
  min-height: 2.75rem;
}

.day-period-apply-cell {
  background: #eff6ff;
  border-color: #93c5fd;
}

.day-period-day-label {
  font-weight: 800;
  font-size: 0.9rem;
  color: #14532d;
}

.day-period-tick {
  font-size: 1.1rem;
  font-weight: 800;
  color: #15803d;
  line-height: 1;
}

.day-period-apply-cell .day-period-tick {
  color: #1d4ed8;
}

.day-period-tick-toggle {
  margin: 0;
  padding: 0.12rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  line-height: 1;
}

.day-period-tick-toggle:hover {
  background: rgba(37, 99, 235, 0.12);
}

.day-period-tick-toggle:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.day-period-tick-toggle.is-off .day-period-tick {
  opacity: 0.12;
}

.day-period-tick-toggle.is-off {
  box-shadow: inset 0 0 0 1px #cbd5e1;
  border-radius: 8px;
}

.day-period-after-week {
  margin-top: 0.75rem;
}

.day-period-block {
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.day-period-block-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: #1e3a8a;
}

.day-period-meta {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
}

.day-period-name {
  font-weight: 700;
}

.day-period-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.day-period-form-heading {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

/* Admin MAIN board (00–99 grid) */
.main-board-shell {
  --main-board-shell-cols: minmax(200px, 240px) minmax(0, 1fr)
    minmax(var(--main-board-shell-right-min), var(--main-board-shell-right-max));
  display: grid;
  grid-template-columns: var(--main-board-shell-cols);
  grid-template-rows: minmax(0, 1fr);
  gap: 0.5rem;
  align-items: stretch;
}

#adminDashboard:has(#adminMainBoardPage:not(.hidden)) #adminMainBoardPage > .main-board-shell,
#adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) #adminMainBoard3dPage .sys3d-board-shell.main-board-shell,
#agentDashboard:has(#agentMainBoardPage:not(.hidden)) #agentMainBoardPage > .main-board-shell,
#agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) #agentMainBoard3dPage .sys3d-board-shell.main-board-shell {
  --main-board-shell-cols: minmax(var(--main-board-shell-left-min), 1.2fr) minmax(0, 5.5fr)
    minmax(var(--main-board-shell-right-min), 1fr);
  grid-template-columns: var(--main-board-shell-cols) !important;
}

.main-board-shell > * {
  min-height: 0;
}

@media (max-width: 900px) {
  .main-board-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  /* 2D MAIN: keep desktop 3-column shell on phones — pan/scroll instead of stack (3D parity: 4×10.5rem) */
  #adminMainBoardPage .main-board-shell,
  #agentMainBoardPage .main-board-shell {
    --main-board-center-min: calc(4 * 10.5rem + 3 * 0.18rem);
    grid-template-columns: minmax(9.5rem, 11rem) minmax(var(--main-board-center-min), 1fr) minmax(5.1rem, 6.2rem);
    grid-template-rows: minmax(0, 1fr);
  }

  .main-board-side-sum {
    min-height: 8rem;
    max-height: 14rem;
  }

  #adminMainBoardPage .main-board-side-sum,
  #agentMainBoardPage .main-board-side-sum {
    min-height: 10rem;
    max-height: none;
  }
}

.main-board-aside {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.4rem 0.45rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.main-board-aside-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 800;
  font-family: var(--font-sans);
}

.main-board-user-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(70vh, 560px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.main-board-agent-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.main-board-agent-block:not(.collapsed) {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.main-board-agent-block.collapsed .main-board-agent-members {
  display: none;
}

.main-board-agent-header-row {
  display: flex;
  align-items: stretch;
  gap: 0.1rem;
  width: 100%;
  background: #f8fafc;
}

.main-board-agent-caret-btn {
  flex: 0 0 auto;
  min-width: 1.75rem;
  margin: 0;
  padding: 0.22rem 0.2rem;
  border: 0;
  border-radius: 4px 0 0 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.main-board-agent-caret-btn:hover {
  background: #e0e7ff;
}

.main-board-agent-caret-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -1px;
}

.main-board-agent-title-btn {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0.38rem 0.45rem 0.38rem 0.2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.main-board-agent-title-btn:hover {
  background: #eef2ff;
}

.main-board-agent-title-btn.selected {
  background: #eff6ff;
  box-shadow: inset 0 0 0 2px #2563eb44;
}

.main-board-agent-orphan-label {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.38rem 0.45rem 0.38rem 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* Legacy: agent row was one button; kept for any older markup */
.main-board-agent-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 0.38rem 0.45rem;
  border: 0;
  border-radius: 0;
  background: #f8fafc;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.main-board-agent-header:hover {
  background: #eef2ff;
}

/* Explorer-style expand chevron (collapsed = right, expanded = down) */
.main-board-agent-caret {
  flex: 0 0 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  font-size: 0;
  line-height: 0;
  color: #475569;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.main-board-agent-caret::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 0.24rem solid transparent;
  border-bottom: 0.24rem solid transparent;
  border-left: 0.38rem solid currentColor;
  border-right: 0;
  transition: transform 0.12s ease, border 0.12s ease;
}

.main-board-agent-block:not(.collapsed) > .main-board-agent-header-row .main-board-agent-caret::before {
  border-top: 0.38rem solid currentColor;
  border-bottom: 0;
  border-left: 0.24rem solid transparent;
  border-right: 0.24rem solid transparent;
  margin-top: 0.06rem;
}

.main-board-agent-title {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 0.86rem;
  color: #1f2937;
}

.main-board-agent-meta {
  flex: 0 1 auto;
  max-width: 42%;
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-board-agent-member-count {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.05rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: #475569;
  background: #e2e8f0;
  border-radius: 999px;
}

.main-board-aside-hint {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  line-height: 1.3;
}

.main-board-agent-members {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.35rem 0.35rem 0.45rem 0.5rem;
  background: #fafafa;
  border-top: 1px solid var(--border);
}

.main-board-agent-members.main-board-agent-dropdown {
  max-height: min(40vh, 280px);
  overflow-y: auto;
  border-left: 3px solid #a5b4fc;
  margin-left: 0.12rem;
  padding-left: 0.45rem;
}

.main-board-user-group-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.main-board-user-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.32rem 0.4rem;
  background: #fff;
  cursor: pointer;
  font-size: 0.82rem;
}

.main-board-user-row--member {
  margin-left: 0.35rem;
  border-left: 3px solid #cbd5e1;
}

.main-board-user-row--all {
  background: #f0fdf4;
  border-color: #86efac;
}

.main-board-all-agents-btn {
  width: 100%;
  margin-bottom: 0.4rem;
  font-weight: 800;
}

.main-board-user-row:hover {
  background: #eef2ff;
}

.main-board-user-row.selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 1px #2563eb33;
}

.main-board-user-name {
  font-weight: 700;
  color: #1f2937;
}

.main-board-user-meta {
  font-size: 0.72rem;
}

.main-board-empty {
  margin: 0;
  font-size: 0.78rem;
}

.main-board-no-members {
  padding: 0.15rem 0;
}

.main-board-aside-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.main-board-aside-actions .btn-compact {
  text-align: center;
  justify-content: center;
}

/* Admin MAIN customer list: tighter rows, text still readable (agent member list unchanged). */
.main-board-aside--dense-list {
  --mb-caret-col: 1.48rem;
  --mb-title-pad-start: 0.14rem;
  --mb-agent-row-bg: #e8eeff;
  --mb-agent-row-border: #c7d2fe;
  --mb-agent-row-bg-hover: #dbe4ff;
  --mb-member-row-bg: #f3f6f4;
  --mb-member-row-border: #d8e3dc;
  --mb-member-panel-bg: #f8faf9;
}

.main-board-aside--dense-list .main-board-aside-title {
  margin-bottom: 0.22rem;
  font-size: 0.88rem;
}

.main-board-aside--dense-list .main-board-user-list {
  gap: 0.18rem;
}

.main-board-aside--dense-list .main-board-all-agents-btn {
  margin-bottom: 0.2rem;
  padding: 0.1rem 0.34rem;
  min-height: 0;
  height: 1.48rem;
  font-size: 0.78rem;
  line-height: 1.1;
}

.main-board-aside--dense-list .main-board-agent-header-row {
  gap: 0.08rem;
  align-items: center;
  background: transparent;
  border-bottom: 0;
}

.main-board-aside--dense-list .main-board-agent-caret-btn {
  min-width: 1.48rem;
  min-height: 0;
  height: 1.48rem;
  padding: 0.1rem 0.1rem;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.main-board-aside--dense-list .main-board-agent-caret-btn:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.main-board-aside--dense-list .main-board-agent-title-btn,
.main-board-aside--dense-list .main-board-agent-orphan-label {
  padding: 0.12rem 0.34rem 0.12rem 0.14rem;
  min-height: 0;
  height: 1.48rem;
  border-radius: 4px;
  border: 1px solid var(--mb-agent-row-border);
  background: var(--mb-agent-row-bg);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.main-board-aside--dense-list .main-board-agent-title-btn:hover {
  background: var(--mb-agent-row-bg-hover);
  border-color: #a5b4fc;
}

.main-board-aside--dense-list .main-board-agent-title-btn.selected {
  background: #dbeafe;
  border-color: #60a5fa;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.22), 0 1px 2px rgba(37, 99, 235, 0.12);
}

.main-board-aside--dense-list .main-board-agent-orphan-label .main-board-agent-meta {
  font-size: 0.7rem;
  line-height: 1.2;
}

.main-board-aside--dense-list .main-board-agent-caret {
  flex-basis: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  color: #334155;
}

.main-board-aside--dense-list .main-board-agent-block:not(.collapsed) > .main-board-agent-header-row {
  border-bottom: 1px solid #e2e8f0;
}

.main-board-aside--dense-list .main-board-agent-members.main-board-agent-dropdown {
  max-height: min(28vh, 220px);
}

.main-board-aside--dense-list .main-board-agent-title-btn--one-line {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0.2rem;
}

/* Admin / agent MAIN lists: green dot when user is logged in (Firestore `sys2d_presence`). */
.main-board-presence-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.2rem;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.main-board-presence-dot.is-active {
  opacity: 1;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.38);
}

.main-board-aside--dense-list .main-board-agent-meta--row {
  display: inline-flex;
  align-items: baseline;
  gap: 0.22rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.main-board-aside--dense-list .main-board-agent-title {
  font-size: 0.78rem;
  line-height: 1.1;
  font-weight: 700;
}

.main-board-aside--dense-list .main-board-agent-meta-prefix {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 700;
  color: #1e3a5f;
  flex-shrink: 0;
}

.main-board-aside--dense-list .main-board-agent-meta--login,
.main-board-aside--dense-list .main-board-agent-meta-suffix {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.main-board-aside--dense-list .main-board-agent-meta--login {
  font-weight: 700;
  color: #1e3a5f;
}

.main-board-aside--dense-list .main-board-agent-meta-suffix {
  font-weight: 800;
  color: var(--amount-color);
}

.main-board-aside--dense-list .main-board-agent-display-name {
  font-size: 0.66rem;
  font-weight: 500;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.main-board-aside--dense-list .main-board-agent-member-count {
  padding: 0 0.28rem;
  font-size: 0.64rem;
  line-height: 1.35;
}

.main-board-aside--dense-list .main-board-agent-members {
  gap: 0.1rem;
  padding: 0.14rem 0.18rem 0.16rem 0.18rem;
  background: var(--mb-member-panel-bg);
  border-top: 1px solid #e8eeef;
}

.main-board-aside--dense-list .main-board-agent-members.main-board-agent-dropdown:not(.main-board-agent-members--align-login) {
  margin-left: 0.12rem;
  padding-left: 0.28rem;
  border-left-width: 2px;
}

/* Agent tree: members nested under agent login (toggle via title/caret) */
.main-board-aside--dense-list .main-board-agent-members--tree.main-board-agent-dropdown {
  margin: 0.06rem 0 0.08rem;
  padding: 0.08rem 0 0.1rem calc(0.65rem + var(--mb-agent-prefix-ch, 0) * 0.45em);
  border-left: none;
  border-top: 0;
  background: transparent;
  max-height: min(28vh, 220px);
  overflow-y: auto;
}

.main-board-aside--dense-list .main-board-agent-block.collapsed .main-board-agent-members--tree {
  display: none;
}

.main-board-aside--dense-list .main-board-user-row {
  padding: 0.1rem 0.3rem;
  gap: 0;
  font-size: 0.76rem;
  line-height: 1.1;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.main-board-aside--dense-list .main-board-user-row:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* Member: borderless text button (full login, indented under agent) */
.main-board-aside--dense-list .main-board-user-row.main-board-member-btn {
  margin-left: 0;
  padding: 0.05rem 0.35rem;
  min-height: 0;
  height: auto;
  gap: 0;
  line-height: 1.15;
  border: none;
  border-radius: 4px;
  background: var(--mb-member-row-bg);
  box-shadow: none;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.main-board-aside--dense-list .main-board-member-btn::before {
  content: none;
}

.main-board-aside--dense-list .main-board-member-btn:hover {
  background: #e8efe9;
  border: none;
  box-shadow: none;
}

.main-board-aside--dense-list .main-board-member-btn__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #475569;
  text-align: center;
}

.main-board-aside--dense-list .main-board-member-btn.selected {
  border: none;
  background: #ecfdf5;
  box-shadow: none;
}

.main-board-aside--dense-list .main-board-member-btn.selected::before {
  border-color: #34d399;
}

.main-board-aside--dense-list .main-board-member-btn.selected .main-board-member-btn__label {
  color: #166534;
  font-weight: 500;
}

.main-board-aside--dense-list .main-board-user-name:not(.main-board-user-name--login-only) {
  line-height: 1.15;
  font-size: 0.78rem;
}

.main-board-aside--dense-list .main-board-user-meta {
  font-size: 0.68rem;
  line-height: 1.12;
}

.main-board-aside--dense-list .main-board-empty {
  font-size: 0.74rem;
}

/* MAIN aside — Windows Explorer tree (parity with admin dashboard sidebar) */
.main-board-aside--win-tree {
  background: #f7f8fa;
  border-color: #e6e8ec;
  padding: 0.28rem 0.2rem 0.35rem;
}

.main-board-aside--win-tree .main-board-aside-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 0.15rem;
  padding: 0 0.15rem;
}

.main-board-aside--win-tree .main-board-aside-hint {
  font-size: 0.68rem;
  margin-bottom: 0.22rem;
  padding: 0 0.12rem;
  color: #94a3b8;
}

.main-board-aside--win-tree .main-board-user-list {
  gap: 0;
  padding: 0.05rem 0;
}

.main-board-aside--win-tree .main-board-agent-block {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
}

.main-board-aside--win-tree .main-board-agent-block:not(.collapsed) {
  box-shadow: none;
}

.main-board-aside--win-tree .main-board-agent-header-row {
  gap: 0.06rem;
  min-height: 1.5rem;
  align-items: center;
  background: transparent;
  border-bottom: 0;
}

.main-board-aside--win-tree .main-board-agent-caret-btn {
  min-width: 1rem;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.main-board-aside--win-tree .main-board-agent-caret-btn:hover {
  background: #eef3f8;
}

.main-board-aside--win-tree .main-board-agent-caret {
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  color: #9a9a9a;
}

.main-board-aside--win-tree .main-board-agent-caret::before {
  content: "▶";
  display: inline;
  width: auto;
  height: auto;
  border: 0;
  font-size: 0.58rem;
  line-height: 1;
  margin: 0;
}

.main-board-aside--win-tree .main-board-agent-block:not(.collapsed) > .main-board-agent-header-row .main-board-agent-caret::before {
  content: "▼";
  font-size: 0.52rem;
  border: 0;
  margin: 0;
}

.main-board-aside--win-tree .main-board-agent-title-btn,
.main-board-aside--win-tree .main-board-agent-orphan-label {
  min-height: 1.5rem;
  height: auto;
  padding: 0.16rem 0.22rem 0.16rem 0.06rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 400;
}

.main-board-aside--win-tree .main-board-agent-title-btn:hover,
.main-board-aside--win-tree .main-board-agent-orphan-label:hover {
  background: #eef3f8;
  border: 0;
  box-shadow: none;
}

.main-board-aside--win-tree .main-board-agent-title-btn.selected {
  background: #e3ebf3;
  border: 0;
  box-shadow: none;
  font-weight: 600;
}

/* Agent list: subtle row tint (after generic transparent rules) */
.main-board-aside--win-tree {
  --mb-win-agent-bg: #e8f5e9;
  --mb-win-agent-bg-hover: #dcefe4;
  --mb-win-agent-bg-selected: #d4edda;
  --mb-win-all-agents-bg: #fff4e6;
  --mb-win-all-agents-bg-hover: #ffeccc;
  --mb-win-all-agents-bg-selected: #ffd9a8;
  --mb-win-member-bg: #f0f7f4;
  --mb-win-member-bg-hover: #e4f0eb;
  --mb-win-member-bg-selected: #d7ebe3;
}

.main-board-aside--win-tree.main-board-aside--dense-list {
  --mb-win-agent-bg: var(--mb-agent-row-bg);
  --mb-win-agent-bg-hover: var(--mb-agent-row-bg-hover);
  --mb-win-agent-bg-selected: #dbeafe;
  --mb-win-all-agents-bg: #ede9fe;
  --mb-win-all-agents-bg-hover: #e0e7ff;
  --mb-win-all-agents-bg-selected: #c7d2fe;
  --mb-win-member-bg: var(--mb-member-row-bg);
  --mb-win-member-bg-hover: #e8efe9;
  --mb-win-member-bg-selected: #ecfdf5;
}

.main-board-aside--win-tree .main-board-agent-block:not(.main-board-orphan-block) {
  margin-bottom: 0.05rem;
}

.main-board-aside--win-tree .main-board-agent-block:not(.main-board-orphan-block) > .main-board-agent-header-row {
  background: var(--mb-win-agent-bg);
}

.main-board-aside--win-tree .main-board-agent-block:not(.main-board-orphan-block) .main-board-agent-title-btn,
.main-board-aside--win-tree .main-board-agent-block:not(.main-board-orphan-block) .main-board-agent-caret-btn {
  background: var(--mb-win-agent-bg);
}

.main-board-aside--win-tree .main-board-agent-block:not(.main-board-orphan-block) .main-board-agent-title-btn:hover,
.main-board-aside--win-tree .main-board-agent-block:not(.main-board-orphan-block) .main-board-agent-caret-btn:hover {
  background: var(--mb-win-agent-bg-hover);
  border: 0;
  box-shadow: none;
}

.main-board-aside--win-tree .main-board-agent-block:not(.main-board-orphan-block) .main-board-agent-title-btn.selected {
  background: var(--mb-win-agent-bg-selected);
  border: 0;
  box-shadow: none;
  font-weight: 600;
}

.main-board-aside--win-tree .main-board-agent-title {
  font-size: 0.74rem;
  font-weight: 600;
  color: #4a5568;
}

.main-board-aside--win-tree .main-board-agent-meta--login,
.main-board-aside--win-tree .main-board-agent-meta-prefix,
.main-board-aside--win-tree .main-board-agent-meta-suffix {
  font-size: 0.74rem;
  font-weight: 500;
  color: #4a5568;
}

.main-board-aside--win-tree .main-board-agent-member-count {
  background: #eceff3;
  color: #64748b;
  font-weight: 600;
}

.main-board-aside--win-tree .main-board-agent-members,
.main-board-aside--win-tree .main-board-agent-members.main-board-agent-dropdown,
.main-board-aside--win-tree.main-board-aside--dense-list .main-board-agent-members--tree.main-board-agent-dropdown {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  max-height: min(32vh, 240px);
}

.main-board-aside--win-tree .main-board-agent-members--tree.main-board-agent-dropdown {
  padding: 0 0 0.06rem calc(1rem + var(--mb-agent-prefix-ch, 0) * 0.35em);
}

.main-board-aside--win-tree .main-board-all-agents-btn,
.main-board-aside--win-tree .main-board-user-row.main-board-user-row--all {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 1.5rem;
  margin: 0 0 0.06rem;
  padding: 0.16rem 0.22rem 0.16rem 1rem;
  border: 0;
  border-radius: 0;
  background: var(--mb-win-all-agents-bg);
  box-shadow: none;
  font-size: 0.74rem;
  font-weight: 600;
  color: #4a5568;
  text-align: left;
}

.main-board-aside--win-tree .main-board-all-agents-btn::before,
.main-board-aside--win-tree .main-board-user-row.main-board-user-row--all::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  width: 0.5rem;
  height: 0.62rem;
  background: linear-gradient(180deg, #4a90d9 0%, #2b6cb0 100%);
  border-radius: 1px;
  opacity: 0.85;
}

.main-board-aside--win-tree .main-board-all-agents-btn,
.main-board-aside--win-tree .main-board-user-row.main-board-user-row--all {
  position: relative;
}

.main-board-aside--win-tree .main-board-all-agents-btn:hover,
.main-board-aside--win-tree .main-board-user-row.main-board-user-row--all:hover {
  background: var(--mb-win-all-agents-bg-hover);
  border: 0;
}

.main-board-aside--win-tree .main-board-all-agents-btn.selected,
.main-board-aside--win-tree .main-board-user-row.main-board-user-row--all.selected {
  background: var(--mb-win-all-agents-bg-selected);
  border: 0;
  font-weight: 700;
}

.main-board-aside--win-tree .main-board-member-btn,
.main-board-aside--win-tree .main-board-user-row.main-board-member-btn {
  min-height: 1.45rem;
  margin: 0 0 0.03rem;
  padding: 0.14rem 0.2rem;
  border: 0;
  border-radius: 0;
  background: var(--mb-win-member-bg);
  box-shadow: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.main-board-aside--win-tree .main-board-member-btn::before {
  content: none;
}

.main-board-aside--win-tree .main-board-member-btn:hover,
.main-board-aside--win-tree .main-board-user-row.main-board-member-btn:hover {
  background: var(--mb-win-member-bg-hover);
  border: 0;
}

.main-board-aside--win-tree .main-board-member-btn.selected,
.main-board-aside--win-tree .main-board-user-row.main-board-member-btn.selected {
  background: var(--mb-win-member-bg-selected);
  border: 0;
}

.main-board-aside--win-tree .main-board-member-btn.selected .main-board-member-btn__label {
  color: #334155;
  font-weight: 600;
}

.main-board-aside--win-tree .main-board-member-btn__label,
.main-board-aside--win-tree .main-board-agent-members .main-board-user-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0.74rem;
  font-weight: 400;
  color: #4a5568;
  text-align: center;
}

/* 2D/3D MAIN: glass-like split colors for agent vs member rows */
.main-board-aside--win-tree .main-board-agent-title-btn {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(147, 197, 253, 0.12)) !important;
  border: 1px solid rgba(59, 130, 246, 0.24) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.main-board-aside--win-tree .main-board-agent-title-btn:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(147, 197, 253, 0.18)) !important;
}

.main-board-aside--win-tree .main-board-agent-title-btn.selected {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.35), rgba(96, 165, 250, 0.2)) !important;
  border-color: rgba(37, 99, 235, 0.42) !important;
}

.main-board-aside--win-tree .main-board-member-btn,
.main-board-aside--win-tree .main-board-user-row.main-board-member-btn {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(110, 231, 183, 0.1)) !important;
  border: 1px solid rgba(16, 185, 129, 0.24) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.main-board-aside--win-tree .main-board-member-btn:hover,
.main-board-aside--win-tree .main-board-user-row.main-board-member-btn:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.28), rgba(110, 231, 183, 0.16)) !important;
}

.main-board-aside--win-tree .main-board-member-btn.selected,
.main-board-aside--win-tree .main-board-user-row.main-board-member-btn.selected {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.34), rgba(52, 211, 153, 0.2)) !important;
  border-color: rgba(5, 150, 105, 0.42) !important;
}

/* UX-17: admin/agent 2D/3D MAIN selection should be visually obvious in agent/member list. */
#adminMainBoardPage .main-board-aside--win-tree .main-board-user-row.selected,
#adminMainBoardPage .main-board-aside--win-tree .main-board-agent-title-btn.selected,
#adminMainBoard3dPage .main-board-aside--win-tree .main-board-user-row.selected,
#adminMainBoard3dPage .main-board-aside--win-tree .main-board-agent-title-btn.selected,
#agentMainBoardPage .main-board-aside--win-tree .main-board-user-row.selected,
#agentMainBoardPage .main-board-aside--win-tree .main-board-agent-title-btn.selected,
#agentMainBoard3dPage .main-board-aside--win-tree .main-board-user-row.selected,
#agentMainBoard3dPage .main-board-aside--win-tree .main-board-agent-title-btn.selected {
  box-shadow: inset 0 0 0 2px rgba(250, 204, 21, 0.86), 0 0 0 1px rgba(146, 64, 14, 0.18),
    0 2px 7px rgba(15, 23, 42, 0.2) !important;
  filter: saturate(1.12) brightness(1.02);
}

#adminMainBoardPage .main-board-aside--win-tree .main-board-user-row.selected .main-board-user-name,
#adminMainBoardPage .main-board-aside--win-tree .main-board-user-row.selected .main-board-member-btn__label,
#adminMainBoardPage .main-board-aside--win-tree .main-board-agent-title-btn.selected .main-board-agent-title,
#adminMainBoard3dPage .main-board-aside--win-tree .main-board-user-row.selected .main-board-user-name,
#adminMainBoard3dPage .main-board-aside--win-tree .main-board-user-row.selected .main-board-member-btn__label,
#adminMainBoard3dPage .main-board-aside--win-tree .main-board-agent-title-btn.selected .main-board-agent-title,
#agentMainBoardPage .main-board-aside--win-tree .main-board-user-row.selected .main-board-user-name,
#agentMainBoardPage .main-board-aside--win-tree .main-board-user-row.selected .main-board-member-btn__label,
#agentMainBoardPage .main-board-aside--win-tree .main-board-agent-title-btn.selected .main-board-agent-title,
#agentMainBoard3dPage .main-board-aside--win-tree .main-board-user-row.selected .main-board-user-name,
#agentMainBoard3dPage .main-board-aside--win-tree .main-board-user-row.selected .main-board-member-btn__label,
#agentMainBoard3dPage .main-board-aside--win-tree .main-board-agent-title-btn.selected .main-board-agent-title {
  color: #0f172a;
  font-weight: 800;
}

.main-board-aside--win-tree .main-board-agent-delete-btn {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.12rem 0.35rem;
  font-size: 0.62rem;
  min-height: 0;
  height: auto;
  align-self: center;
}

.main-board-aside--win-tree .main-board-empty,
.main-board-aside--win-tree .main-board-no-members {
  padding: 0.2rem 0.35rem 0.2rem 1rem;
  font-size: 0.72rem;
}

/* Agent MAIN member rows — same Explorer leaf style */
.main-board-aside--win-tree:not(.main-board-aside--dense-list) .main-board-user-row {
  position: relative;
  width: 100%;
  min-height: 1.45rem;
  margin: 0;
  padding: 0.14rem 0.2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.74rem;
  color: #4a5568;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.main-board-aside--win-tree:not(.main-board-aside--dense-list) .main-board-user-row--all {
  padding-left: 1rem;
  text-align: left;
  justify-content: flex-start;
}

.main-board-aside--win-tree:not(.main-board-aside--dense-list) .main-board-user-row--all::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  width: 0.5rem;
  height: 0.62rem;
  background: linear-gradient(180deg, #4a90d9 0%, #2b6cb0 100%);
  border-radius: 1px;
  opacity: 0.85;
}

.main-board-aside--win-tree:not(.main-board-aside--dense-list) .main-board-user-row--member {
  background: var(--mb-win-member-bg);
  margin-bottom: 0.03rem;
}

.main-board-aside--win-tree:not(.main-board-aside--dense-list) .main-board-user-row--member:hover {
  background: var(--mb-win-member-bg-hover);
}

.main-board-aside--win-tree:not(.main-board-aside--dense-list) .main-board-user-row--member.selected {
  background: var(--mb-win-member-bg-selected);
}

.main-board-aside--win-tree:not(.main-board-aside--dense-list) .main-board-user-row--member::before {
  content: none;
}

.main-board-aside--win-tree:not(.main-board-aside--dense-list) .main-board-user-row--member .main-board-user-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.main-board-aside--win-tree:not(.main-board-aside--dense-list) .main-board-user-row:hover {
  background: #eef3f8;
  border: 0;
  box-shadow: none;
}

.main-board-aside--win-tree:not(.main-board-aside--dense-list) .main-board-user-row.selected {
  background: #e3ebf3;
  border: 0;
  box-shadow: none;
  font-weight: 600;
}

/* Agent MAIN: flat member list (legacy card rows) */
.main-board-aside:not(.main-board-aside--dense-list):not(.main-board-aside--win-tree) .main-board-user-row {
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 0.34rem 0.48rem;
  font-size: 0.84rem;
  line-height: 1.22;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.main-board-aside:not(.main-board-aside--dense-list):not(.main-board-aside--win-tree) .main-board-user-row:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.main-board-aside:not(.main-board-aside--dense-list):not(.main-board-aside--win-tree) .main-board-user-row.selected {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.22);
}

.main-board-main {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.35rem 0.5rem 0.45rem;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.main-board-main-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  padding: 0.12rem 0;
  margin-bottom: 0.28rem;
  min-height: 1.55rem;
  flex-shrink: 0;
  overflow: visible;
}

/* UX-16: admin/agent MAIN header controls should stay one row. */
#adminMainBoardPage .main-board-main-head,
#agentMainBoardPage .main-board-main-head,
#adminMainBoard3dPage .main-board-main-head,
#agentMainBoard3dPage .main-board-main-head {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

#adminMainBoardPage .main-board-head-left,
#agentMainBoardPage .main-board-head-left,
#adminMainBoard3dPage .main-board-head-left,
#agentMainBoard3dPage .main-board-head-left {
  flex-wrap: nowrap;
}

.main-board-head-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.85rem;
}

.btn-main-nav-toggle {
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  line-height: 1.2;
  white-space: nowrap;
}

.main-board-head-right {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  overflow: visible;
}

.main-board-head-left .main-board-strip-item,
.main-board-head-right .main-board-strip-item {
  font-size: 0.8rem;
  line-height: 1.12;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.main-board-strip-item--period-status .main-board-period-status {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.main-board-period-status--open {
  color: #15803d;
}

.main-board-period-status--pending {
  color: #b45309;
}

.main-board-period-status--unknown {
  color: #64748b;
}

.main-board-strip-item--agent-name #agentMainBoardAgentNameSpan {
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* MAIN (admin/agent, 2D/3D): keep labels default, make value text blue. */
#adminMainBoardPage #mainBoardDateSpan,
#adminMainBoardPage #mainBoardTimeSpan,
#adminMainBoard3dPage [data-sys3d-date],
#adminMainBoard3dPage [data-sys3d-time],
#agentMainBoardPage #agentMainBoardDateSpan,
#agentMainBoardPage #agentMainBoardTimeSpan,
#agentMainBoard3dPage [data-sys3d-date],
#agentMainBoard3dPage [data-sys3d-time] {
  color: #1d4ed8;
  font-weight: 700;
}

.main-board-limit-field {
  white-space: nowrap;
}

.main-board-division-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

.main-board-division-label {
  font-size: 0.72rem;
  color: #4b5563;
  font-weight: 600;
}

.main-board-division-box {
  position: relative;
  flex: 0 0 auto;
}

.main-board-division-trigger {
  box-sizing: border-box;
  width: 2.85rem;
  min-width: 2.85rem;
  max-width: 2.85rem;
  padding: 0.2rem 0.15rem;
  font-size: 0.8rem;
  line-height: 1.12;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--amount-color);
  font-weight: 600;
}

.main-board-division-trigger:hover {
  background: #f9fafb;
}

.main-board-division-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.main-board-division-option {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0.28rem 0.35rem;
  font-size: 0.8rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-align: center;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
}

.main-board-division-option:last-child {
  border-bottom: none;
}

.main-board-division-option:hover {
  background: #f3f4f6;
}

.main-board-division-option.is-selected {
  background: #e0f2fe;
  font-weight: 700;
  color: #0c4a6e;
}

.btn-main-head-define {
  padding: 0.26rem 0.58rem;
  font-size: 0.8rem;
  line-height: 1.12;
  align-self: center;
}

@media (max-width: 540px) {
  .main-board-head-right {
    width: 100%;
    justify-content: flex-end;
  }
}

.main-board-bottom-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  margin-top: 0.45rem;
  margin-bottom: 0;
  flex-shrink: 0;
}

.main-board-bottom-strip .main-board-totals:first-of-type {
  margin-left: auto;
}

.main-board-strip-item {
  font-size: 0.86rem;
}

.main-board-limit-input {
  width: 4.5rem;
  margin-left: 0.2rem;
  appearance: textfield;
  -moz-appearance: textfield;
  color: var(--amount-color);
  font-weight: 600;
}

input.main-board-limit-input::-webkit-outer-spin-button,
input.main-board-limit-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.main-board-main-head .main-board-limit-input {
  padding: 0.22rem 0.38rem;
  font-size: 0.8rem;
  line-height: 1.12;
}

.main-board-totals {
  font-variant-numeric: tabular-nums;
}

/* MYPRJ lblototal: over sum emphasized */
.main-board-over-total-val {
  color: #b91c1c;
  font-weight: 800;
}

/* Agent MAIN: footer line — Total = sum(Limit 00–99) / sum(Over 00–99) */
.agent-main-board-grand-sum-wrap {
  flex: 0 0 auto;
  flex-shrink: 0;
  height: auto;
  max-height: none;
  margin-top: 0.1rem;
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
  font-size: clamp(0.66rem, 0.38rem + 0.75vh, 0.92rem);
}

.agent-main-board-grand-sum-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.65rem;
  padding: 0.35rem 0.5rem;
  background: #f8fafc;
}

.agent-main-board-grand-sum-inputs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  flex: 0 1 auto;
  min-width: 0;
}

.main-board-grand-input {
  box-sizing: border-box;
  margin: 0;
  padding: 0.18rem 0.28rem;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-size: clamp(0.66rem, 0.38rem + 0.75vh, 0.9rem);
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.1;
  color: #0f172a;
}

#adminMainBoardPage .main-board-grand-input,
#agentMainBoardPage .main-board-grand-input,
#adminMainBoard3dPage .main-board-grand-input,
#agentMainBoard3dPage .main-board-grand-input {
  padding: 0.16rem 0.24rem;
}

.main-board-grand-input[readonly] {
  background: #f1f5f9;
  color: var(--amount-color);
  font-weight: 600;
  cursor: default;
}

.main-board-grand-input--7 {
  width: calc(14ch + 0.7rem);
  max-width: 100%;
}

.main-board-grand-input--2 {
  width: calc(3ch + 0.7rem);
}

.main-board-grand-input--3 {
  width: calc(4ch + 0.7rem);
  max-width: 100%;
}

.main-board-grand-input--5 {
  width: calc(10ch + 0.7rem);
}

.agent-main-board-total-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.12rem 0.2rem;
  padding: 0.35rem 0.5rem;
  background: #f8fafc;
  font-variant-numeric: tabular-nums;
}

.agent-main-board-total-line--right {
  flex: 0 0 auto;
  margin-left: auto;
  justify-content: flex-end;
  align-items: baseline;
  text-align: right;
  gap: 0;
  padding: 0;
  background: transparent;
  white-space: nowrap;
}

.agent-main-board-total-label {
  font-weight: 800;
  color: #0f172a;
}

.agent-main-board-total-eq,
.agent-main-board-total-slash {
  font-weight: 600;
  color: #64748b;
}

.agent-main-board-total-lim {
  font-weight: 800;
  color: var(--amount-color);
  text-align: right;
}

.agent-main-board-total-ov {
  font-weight: 800;
  color: var(--amount-color);
  text-align: right;
}

.main-board-cus-main {
  flex-shrink: 0;
}

/* Admin 2D MAIN: right Login | Bet % | Sold column */
.main-board-side-sum {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-board-side-sum--sold-pct {
  --mb-side-pct-ch: 4;
  min-width: var(--main-board-shell-right-min);
  max-width: var(--main-board-shell-right-max);
}

#adminMainBoardPage .main-board-side-sum--sold-pct .main-board-side-sum__scroll {
  overflow-x: auto;
  overflow-y: auto;
}

#adminMainBoardPage .main-board-side-sum--sold-pct .mb-side-sum__inner {
  width: max-content;
  min-width: 100%;
}

.mb-side-sum__head,
.mb-side-sum__row {
  display: grid;
  grid-template-columns: minmax(6ch, max-content) calc(var(--mb-side-pct-ch) * 1ch) minmax(6ch, max-content);
  gap: 0.12rem 0.35rem;
  align-items: center;
  width: max-content;
  min-width: 100%;
}

.mb-side-sum__head {
  padding: 0.2rem 0.28rem 0.15rem;
  margin: 0;
  font-size: clamp(0.68rem, 0.4rem + 0.85vh, 0.88rem);
  font-weight: 700;
  color: #1f2937;
  background: #fecdd3;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 2;
}

.mb-side-sum__head .mb-side-sum__col--sold {
  text-align: right;
  color: var(--amount-color);
}

.mb-side-sum__row {
  font-size: clamp(0.66rem, 0.38rem + 0.8vh, 0.86rem);
  padding: 0.06rem 0.2rem;
  min-height: 1.15em;
}

.mb-side-sum__row--agent {
  flex: 1 1 auto;
  min-width: 0;
}

.mb-side-sum__row--member {
  padding-left: calc(var(--mb-agent-prefix-ch, 0) * 1ch + 0.35rem);
}

.mb-side-sum__col--login {
  white-space: nowrap;
}

.mb-side-sum__col--pct {
  text-align: center;
  min-width: calc(var(--mb-side-pct-ch) * 1ch);
}

.mb-side-sum__col--sold {
  text-align: right;
  color: var(--amount-color);
  font-weight: 600;
  white-space: nowrap;
}

.main-board-side-sum__tree {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.12rem 0.2rem 0.2rem;
  width: max-content;
  min-width: 100%;
}

.mb-side-sum__block .main-board-agent-header-row.mb-side-sum__agent-head {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.mb-side-sum__block .main-board-agent-caret-btn {
  flex: 0 0 auto;
}

.mb-side-sum__members .mb-side-sum__row--member:nth-child(even) {
  background: #f8fafc;
}

.mb-side-sum__no-members {
  padding: 0.2rem 0.35rem;
  font-size: 0.72rem;
}

.main-board-side-sum__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.main-board-side-sum__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: clamp(0.68rem, 0.4rem + 0.85vh, 0.92rem);
  font-variant-numeric: tabular-nums;
}

.main-board-side-sum__table thead th {
  background: #fecdd3;
  color: #1f2937;
  font-weight: 700;
  text-align: center;
  padding: 0.2rem 0.28rem;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 1;
}

.main-board-side-sum__table thead th:last-child {
  text-align: right;
  color: var(--amount-color);
}

.main-board-side-sum__table tbody td {
  padding: 0.14rem 0.28rem;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  word-break: break-word;
}

.main-board-side-sum__table tbody td:first-child {
  text-align: left;
  color: #0f172a;
}

.main-board-side-sum__table tbody td:last-child {
  text-align: right;
  color: var(--amount-color);
  font-weight: 600;
}

.main-board-side-sum__table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.main-board-grid-host {
  overflow: auto;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.main-board-four-grid {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(10.5rem, 1fr));
  gap: 0.3rem;
  align-items: stretch;
}

@media (max-width: 1100px) {
  .main-board-four-grid {
    grid-template-columns: repeat(2, minmax(10.5rem, 1fr));
  }
}

.main-board-mini-wrap {
  min-width: 0;
  width: 100%;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* VB6-style blocks: narrow No., Limit/Over split 50/50 (CSS grid per row — avoids table column collapse) */
.mb-block-grid {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
  /* Scale text with viewport height so tall screens use larger digits */
  font-size: clamp(0.72rem, 0.42rem + 0.95vh, 1.05rem);
  display: grid;
  grid-template-rows: auto repeat(25, minmax(0, 1fr));
}

.mb-row {
  display: grid;
  grid-template-columns: minmax(3.5ch, max-content) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  min-height: 0;
}

.mb-row-head .mb-cell {
  background: #fecdd3;
  color: #1f2937;
  font-weight: 700;
  padding: 0.16rem 0.1rem;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

.mb-row-head .mb-cell.mb-h-no {
  text-align: center;
}

.mb-row-head .mb-cell:not(.mb-h-no) {
  text-align: right;
  padding-right: 0.32rem;
}

.mb-row-head .mb-cell.mb-h-lim {
  color: #0f172a;
}

.mb-row-head .mb-cell.mb-h-ov {
  color: var(--amount-color);
}

.mb-row-data .mb-cell {
  padding: clamp(0.04rem, 0.35vh, 0.22rem) 0.12rem;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  white-space: nowrap;
  min-width: 0;
}

.mb-row-data .mb-cell:last-child {
  border-right: none;
}

.mb-row-stripe .mb-cell {
  background: #fafafa;
}

.mb-row-data .mb-no {
  background: #dbeafe;
  color: #1e40af;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding-left: 0.18rem;
  padding-right: 0.18rem;
}

.mb-row-data .mb-lim {
  text-align: right;
  color: #0f172a;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mb-row-data .mb-ov {
  text-align: right;
  color: var(--amount-color);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.btn-compact {
  padding: 0.38rem 0.55rem;
  font-size: 0.78rem;
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.main-board-standalone-body {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-board-standalone-body .app-shell.main-board-standalone-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  width: 100%;
  max-width: none;
  padding: 0.2rem 0.35rem 0.25rem;
  box-sizing: border-box;
  overflow: hidden;
}

.main-board-standalone-wrap {
  max-width: none;
  width: 100%;
}

.main-board-standalone-topbar {
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.25rem;
}

.main-board-standalone-topbar--unified {
  background: linear-gradient(180deg, #0f3567 0%, #102b5d 100%);
  border-radius: 0.25rem;
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.3rem;
  justify-content: space-between;
  min-height: 0;
}

.main-board-standalone-main-mark {
  margin: 0;
  color: #facc15;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  line-height: 1.15;
}

.main-board-standalone-topbar--unified .topbar-actions .btn {
  padding: 0.2rem 0.42rem;
  font-size: 0.72rem;
  line-height: 1.15;
}

.main-board-standalone-main.container {
  max-width: none;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
}

.main-board-standalone-body .main-board-standalone-topbar {
  flex-shrink: 0;
}

.main-board-standalone-body #adminMainBoardPage {
  flex: 1 1 auto;
  min-height: 0;
}

.main-board-standalone-body .main-board-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
  --main-board-shell-cols: minmax(var(--main-board-shell-left-min), var(--main-board-shell-left-max))
    minmax(0, 1fr) minmax(var(--main-board-shell-right-min), var(--main-board-shell-right-max));
  grid-template-columns: var(--main-board-shell-cols);
  gap: 0.35rem;
}

.main-board-standalone-body .main-board-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.main-board-standalone-body .main-board-grid-host {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}

.main-board-standalone-body .main-board-user-list {
  max-height: none;
}

/* —— APP_SPEC member intake (Viber-style + custom keyboard) —— */
.member-dashboard-layout {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: calc(100dvh - 5.5rem);
}

.member-dashboard-layout .member-input-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.member-input-card--viber {
  padding: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.member-input-card--viber .member-intake-host {
  min-height: 0;
}

.member-intake-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.member-hero--compact {
  padding: 0.55rem 0.75rem;
}

.member-hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
}

.member-hero-title {
  margin: 0;
  font-size: 1rem;
}

.member-hero-name {
  font-weight: 600;
}

.member-hero-status {
  margin: 0.2rem 0 0;
}

.member-period-center--inline {
  margin: 0.25rem 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #334155;
}

body.app-role-member .member-hero-status {
  color: #374151;
  font-weight: 500;
}

.member-profile-details {
  padding: 0.5rem 0.75rem;
}

.member-profile-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}

.member-input-footer-msg {
  margin: 0;
  padding: 0.25rem 0.5rem 0.35rem;
  font-size: 0.78rem;
  flex: 0 0 auto;
}

.member-hero-status.member-hero-status--period-closed {
  color: #b91c1c;
  font-weight: 700;
}

.member-input-card--viber .member-input-footer-msg:empty,
.member-composer-status-msg:empty {
  display: none;
  margin: 0;
  padding: 0;
  min-height: 0;
}

/* Status line lives in fixed composer — always visible above number/amount bar. */
.member-composer-status-msg {
  margin: 0;
  padding: 0.2rem 0.35rem 0.15rem;
  font-size: 0.78rem;
  line-height: 1.3;
  flex: 0 0 auto;
}

.member-intake-root {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  min-height: 0;
}

.member-intake-root--viber {
  height: 100%;
  min-height: 0;
}

.member-intake-body--viber {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.member-intake-body--viber .member-intake-maincol {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.member-period-total-box.member-period-total--chip {
  align-self: flex-start;
  margin: 0.05rem 0.1rem 0.12rem;
  padding: 0.18rem 0.5rem;
  font-size: 0.72rem;
  border-radius: 999px;
  background: #fffbeb;
  border: 1px solid #e5e7eb;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--amount-color);
}

.member-period-total-box.member-period-total--chip.member-period-total--dock {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  margin-left: auto;
  margin-right: 0.1rem;
  text-align: right;
}

.member-composer-input-block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  padding-top: 0;
}

/* Status (max limit, errors) + All Total — one row flush above NUMBER/AMOUNT bar */
.member-composer-bar-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.member-composer-bar-meta .member-input-footer-msg,
.member-composer-bar-meta .member-composer-status-msg {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 0.62rem;
  line-height: 1.1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-composer-bar-meta .member-composer-status-msg.error {
  font-weight: 600;
}

.member-period-total-box.member-period-total--chip.member-period-total--on-bar.member-period-total--line {
  position: static;
  flex: 0 0 auto;
  align-self: baseline;
  width: auto;
  max-width: 55%;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: auto;
  line-height: 1.15;
  border: none;
  background: transparent;
  border-radius: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: right;
  pointer-events: none;
  white-space: nowrap;
}

.member-intake-body--viber .member-chat-feed {
  flex: 1 1 auto;
  min-height: 8rem;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  border: none;
  border-radius: 0;
  background: #fff;
}

.member-composer-dock {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  padding-top: 0.12rem;
  padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
  padding-bottom: calc(0.12rem + env(safe-area-inset-bottom, 0px));
  padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
  background: #ececec;
  border-top: 1px solid #d4d4d4;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06);
}

.member-input-bar-row--pill {
  align-items: stretch;
  direction: ltr;
  background: #f5f5f5;
  border-radius: 999px;
  padding: 0.28rem 0.18rem 0.05rem 0.22rem;
  border: 1px solid #e0e0e0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.member-composer-input-block .member-input-bar-row--pill {
  margin-top: 0;
  padding-top: 0.08rem;
}

/* Amount + R: one natural text line (no flex-grow gap); scrolls together when long. */
.member-na-amt-line {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
  touch-action: manipulation;
  text-align: start;
}

.member-na-amt-line::-webkit-scrollbar {
  display: none;
}

.member-na-amt-line .member-na-value--amt {
  display: inline-block;
  vertical-align: baseline;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
}

.member-na-amt-line .member-na-value--amt-after-r {
  display: inline-block;
  vertical-align: baseline;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
  margin-inline-start: 0.28rem;
}

.member-na-amt-line .member-na-value--amt-after-r[hidden] {
  display: none !important;
}

.member-r-inline-badge {
  display: inline-block;
  vertical-align: baseline;
  margin: 0 0.28rem;
  padding: 0;
  font-size: calc(1.5rem - 2px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: #15803d;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.member-r-inline-badge[hidden] {
  display: none !important;
}

.member-input-bar-row--pill .member-na-number,
.member-input-bar-row--pill .member-na-amount {
  border: none;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.28);
  padding: 0.04rem 0.12rem 0.04rem;
}

.member-input-bar-row--pill .member-na-number.member-composer-field--focus {
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35);
}

.member-input-bar-row--pill .member-na-amount.member-composer-field--focus {
  box-shadow: 0 0 0 1px rgba(100, 116, 139, 0.4);
}

.member-input-bar-row--pill .member-na-amount--locked {
  background: #fff;
  border-style: solid;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.28);
}

.member-input-bar-row--pill .member-na-amount--locked .member-na-label--amt,
.member-input-bar-row--pill .member-na-amount--locked .member-na-value--amt {
  color: inherit;
}

.member-input-bar-row--pill:focus-visible {
  outline: 2px solid #3390ec;
  outline-offset: 2px;
}

.member-keyboard-panel {
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  overflow: hidden;
  transition:
    max-height 0.28s ease,
    opacity 0.22s ease,
    margin 0.22s ease;
}

.member-keyboard-panel--collapsed {
  max-height: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  opacity: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  pointer-events: none;
}

.member-composer--keyboard-open .member-keyboard-panel:not(.member-keyboard-panel--collapsed) {
  max-height: min(50dvh, 470px);
  opacity: 1;
  pointer-events: auto;
}

.member-composer--keyboard-open .member-keyboard-panel {
  margin-top: 0;
}

.member-period-total-box {
  align-self: center;
  padding: 0.35rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.4rem;
  background: #fffbeb;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--amount-color);
}

.member-chat-feed {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  overflow-anchor: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.45rem;
  padding: 0.4rem 0.5rem;
  background: #fafafa;
  font-variant-numeric: tabular-nums;
}

/* UX-12: member-only recall label column (local; not on server) */
.member-recall-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0.28rem 0.35rem 0.32rem;
  border-top: 1px solid #e5e7eb;
  background: #f8fafc;
}

.member-recall-bar__btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  max-width: 100%;
  margin: 0;
  padding: 0.2rem 0.45rem;
  border: 1px solid #c7d2fe;
  border-radius: 0.45rem;
  background: #eef2ff;
  color: #312e81;
  font: inherit;
  font-size: 0.74rem;
  line-height: 1.25;
  cursor: pointer;
  touch-action: manipulation;
}

.member-recall-bar__hint {
  font-weight: 600;
  white-space: nowrap;
}

.member-recall-bar__val {
  font-weight: 700;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-recall-bar__val--empty {
  font-weight: 500;
  color: #64748b;
}

.member-recall-bar__note {
  font-size: 0.66rem;
  line-height: 1.2;
}

.member-recall-bar__total {
  flex: 0 0 auto;
  margin-inline-start: auto;
  padding-inline-end: 0.9rem;
  align-self: center;
  max-width: 48%;
}

.member-recall-dialog {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.75rem;
  box-sizing: border-box;
}

/* User system alert/confirm — title "system" (not browser IP/origin chrome). */
.sys2d-user-dialog {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top, 0)) max(1rem, env(safe-area-inset-right, 0))
    max(1rem, env(safe-area-inset-bottom, 0)) max(1rem, env(safe-area-inset-left, 0));
  box-sizing: border-box;
}

.sys2d-user-dialog.hidden {
  display: none !important;
}

.sys2d-user-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}

.sys2d-user-dialog__panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 22rem);
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  text-align: center;
}

.sys2d-user-dialog__title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  text-transform: lowercase;
  color: #0f172a;
}

.sys2d-user-dialog__body {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #334155;
  white-space: pre-wrap;
  word-break: break-word;
}

.sys2d-user-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

body.sys2d-user-dialog-open {
  overflow: hidden;
}

.member-recall-dialog.hidden {
  display: none !important;
}

.member-recall-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.member-recall-dialog__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 22rem);
  margin-bottom: env(safe-area-inset-bottom, 0);
  padding: 0.7rem 0.85rem 0.8rem;
}

.member-recall-dialog__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.member-recall-dialog__hint {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
}

.member-recall-dialog__input {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.55rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.45rem;
  font: inherit;
  font-size: 1rem;
}

.member-recall-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.member-chat-grid--recall:not(.member-chat-grid--3d) {
  --member-feed-recall-col: minmax(2rem, 3.5rem);
  --member-feed-col-gap: 1.1rem;
}

.member-chat-grid--recall .member-chat-cell--recall {
  text-align: start;
  font-size: 0.72rem;
  font-weight: 600;
  color: #4338ca;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-chat-grid--recall .member-chat-row--selected .member-chat-cell--recall {
  color: #1e1b4b;
}

/* UX-12 — recall bar above composer (not inside scrollable feed column) */
body.app-role-member:not(.member-page--3d) .member-composer-dock > .member-recall-bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border-top: none;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 0.22rem max(0.35rem, env(safe-area-inset-right, 0px)) 0.24rem
    max(0.35rem, env(safe-area-inset-left, 0px));
}

body.app-role-member:not(.member-page--3d) .member-recall-bar__lead {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 1 auto;
  min-width: 0;
}

body.app-role-member:not(.member-page--3d) .member-recall-bar__total {
  flex: 0 0 auto;
  margin: 0;
  margin-inline-start: auto;
  max-width: none;
  align-self: center;
  text-align: right;
  padding-inline-end: 0;
}

@media (max-width: 540px) {
  body.app-role-member:not(.member-page--3d) .member-chat-feed {
    overflow-x: auto;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

  body.app-role-member:not(.member-page--3d) .member-chat-grid--recall:not(.member-chat-grid--3d) {
    --member-feed-recall-col: minmax(1.75rem, 2.85rem);
    --member-feed-col-gap: 0.72rem;
    font-size: 0.7rem;
    line-height: 1.2;
  }

  body.app-role-member:not(.member-page--3d) .member-chat-grid--recall .member-chat-cell--time {
    font-size: 0.68rem;
    overflow: visible;
    text-overflow: clip;
  }

  body.app-role-member:not(.member-page--3d) .member-chat-grid--recall .member-chat-cell--ok {
    padding-inline-start: 0.08rem;
  }

  body.app-role-member:not(.member-page--3d) .member-composer-dock > .member-recall-bar {
    flex-wrap: nowrap;
    gap: 0.35rem;
    padding-block: 0.18rem;
  }

  body.app-role-member:not(.member-page--3d) .member-recall-bar__note {
    display: none;
  }

  body.app-role-member:not(.member-page--3d) .member-recall-bar__lead {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 58%;
  }

  body.app-role-member:not(.member-page--3d) .member-recall-bar__btn {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  body.app-role-member:not(.member-page--3d) .member-recall-bar__val {
    max-width: min(42vw, 9rem);
  }

  body.app-role-member:not(.member-page--3d) .member-recall-bar__total {
    margin-inline-start: auto;
    padding-inline-end: max(0.35rem, env(safe-area-inset-right, 0px));
    font-size: 0.68rem;
  }
}

/* 2D feed: parent grid + display:contents rows (3D-I01 / member-feed-line parity) */
body.app-role-member:not(.member-page--3d) .member-chat-grid:not(.member-chat-grid--3d) {
  --member-feed-amt-col: 7.5ch;
  --member-feed-time-col-min: 11ch;
  --member-feed-gap-num-amt: 0.15rem;
  --member-feed-gap-amt-com: 0.85rem;
  --member-feed-gap-com-time: 0.28rem;
  --member-feed-gap-time-ok: 0.65rem;
  --member-feed-ok-pad-end: 0.65rem;
  display: grid;
  grid-template-columns: max-content var(--member-feed-amt-col) max-content max-content max-content;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin-inline-start: auto;
  margin-inline-end: 0;
  padding-inline-end: max(0.35rem, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

body.app-role-member:not(.member-page--3d) .member-chat-grid--recall:not(.member-chat-grid--3d) {
  grid-template-columns: minmax(2rem, 3.5rem) max-content var(--member-feed-amt-col) max-content max-content
    max-content;
}

body.app-role-member:not(.member-page--3d) .member-chat-grid:not(.member-chat-grid--3d) .member-feed-line--2d {
  display: contents;
}

body.app-role-member:not(.member-page--3d)
  .member-chat-grid:not(.member-chat-grid--3d)
  .member-feed-line--2d:last-child
  .member-chat-cell {
  border-bottom: none;
}

body.app-role-member:not(.member-page--3d) .member-chat-grid:not(.member-chat-grid--3d) .member-chat-cell {
  width: max-content;
  max-width: 100%;
  min-width: min-content;
  box-sizing: border-box;
  border-bottom: 1px solid #e5e7eb;
  padding-block: 0.22rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
  -webkit-user-select: text;
}

body.app-role-member:not(.member-page--3d) .member-chat-grid:not(.member-chat-grid--3d) .member-chat-cell--num {
  width: 100%;
  justify-self: stretch;
  text-align: end;
  color: var(--text);
}

body.app-role-member:not(.member-page--3d) .member-chat-grid:not(.member-chat-grid--3d) .member-chat-cell--amt {
  width: 100%;
  justify-self: stretch;
  text-align: end;
  color: var(--text);
  padding-inline-start: var(--member-feed-gap-num-amt);
}

/* M-03 cap tint — whole row, strong colour (overrides default cell + delivery tick colours) */
body.app-role-member:not(.member-page--3d)
  .member-chat-grid:not(.member-chat-grid--3d)
  .member-chat-row--alloc-partial
  .member-chat-cell {
  color: #1e40af !important;
  font-weight: 600;
}

body.app-role-member:not(.member-page--3d)
  .member-chat-grid:not(.member-chat-grid--3d)
  .member-chat-row--alloc-partial
  .member-delivery,
body.app-role-member:not(.member-page--3d)
  .member-chat-grid:not(.member-chat-grid--3d)
  .member-chat-row--alloc-partial
  .member-delivery__tick2 {
  color: #1e40af !important;
}

body.app-role-member:not(.member-page--3d)
  .member-chat-grid:not(.member-chat-grid--3d)
  .member-chat-row--alloc-zero
  .member-chat-cell {
  color: #991b1b !important;
  font-weight: 600;
}

body.app-role-member:not(.member-page--3d)
  .member-chat-grid:not(.member-chat-grid--3d)
  .member-chat-row--alloc-zero
  .member-delivery,
body.app-role-member:not(.member-page--3d)
  .member-chat-grid:not(.member-chat-grid--3d)
  .member-chat-row--alloc-zero
  .member-delivery__tick2 {
  color: #991b1b !important;
}

body.app-role-member:not(.member-page--3d) .member-chat-grid:not(.member-chat-grid--3d) .member-chat-cell--com {
  width: max-content;
  max-width: 100%;
  justify-self: end;
  text-align: end;
  font-family: var(--font-myanmar);
  padding-inline-start: var(--member-feed-gap-amt-com);
}

body.app-role-member:not(.member-page--3d) .member-chat-grid:not(.member-chat-grid--3d) .member-chat-cell--time {
  width: max-content;
  max-width: 100%;
  justify-self: end;
  text-align: end;
  color: var(--text);
  overflow: visible;
  text-overflow: clip;
  padding-inline-start: var(--member-feed-gap-com-time);
}

body.app-role-member:not(.member-page--3d) .member-chat-grid:not(.member-chat-grid--3d) .member-chat-cell--ok {
  text-align: start;
  font-weight: 700;
  overflow: visible;
  text-overflow: clip;
  padding-inline-start: var(--member-feed-gap-time-ok);
  padding-inline-end: var(--member-feed-ok-pad-end);
}

body.app-role-member:not(.member-page--3d) .member-chat-grid--recall:not(.member-chat-grid--3d) .member-chat-cell--recall {
  width: 100%;
  justify-self: stretch;
  text-align: start;
  font-size: 0.72rem;
  font-weight: 600;
  color: #4338ca;
}

.member-chat-grid .member-chat-cell--num,
.member-chat-grid .member-chat-cell--amt {
  color: var(--text);
  text-align: end;
}

.member-chat-grid .member-chat-cell--com {
  text-align: start;
  font-family: var(--font-myanmar);
}

.member-chat-grid .member-chat-cell--ok {
  text-align: start;
}

.member-manual-comment-row {
  margin: 0.2rem 0.35rem 0.15rem;
  padding: 0 0.1rem;
}

.member-chat-grid .member-chat-cell--ok {
  font-weight: 700;
  overflow: visible;
  text-overflow: clip;
}

/* Viber-style delivery ticks (member feed) */
.member-delivery {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: -0.08em;
  white-space: nowrap;
}

.member-delivery__tick2 {
  margin-inline-start: -0.15em;
}

.member-delivery--sending {
  color: #6b7280;
}

.member-delivery-spinner {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid #d1d5db;
  border-top-color: #4b5563;
  border-radius: 50%;
  animation: member-delivery-spin 0.75s linear infinite;
  vertical-align: middle;
}

.member-delivery--received {
  color: #6b7280;
}

.member-delivery--ok,
.member-chat-cell--ok .member-delivery--ok {
  color: #1d4ed8 !important;
  font-weight: 700;
  font-size: 1rem;
}

.member-delivery--ok .member-delivery__tick2,
.member-chat-cell--ok .member-delivery--ok .member-delivery__tick2 {
  color: #2563eb !important;
}

@keyframes member-delivery-spin {
  to {
    transform: rotate(360deg);
  }
}

.member-delivery--failed {
  color: #b91c1c;
  letter-spacing: 0;
}


/* Partial allocation (လျှော့နဲရရှိ): whole row strong blue */
.member-chat-grid .member-chat-row--alloc-partial .member-chat-cell {
  color: #1e40af !important;
  font-weight: 600;
}

.member-chat-grid .member-chat-row--alloc-partial .member-delivery,
.member-chat-grid .member-chat-row--alloc-partial .member-delivery__tick2 {
  color: #1e40af !important;
}

.member-chat-grid .member-chat-row--alloc-partial .member-chat-cell--ok {
  font-weight: 700;
}

/* Zero allocation (max bet reached): whole row strong red */
.member-chat-grid .member-chat-row--alloc-zero .member-chat-cell {
  color: #991b1b !important;
  font-weight: 600;
}

.member-chat-grid .member-chat-row--alloc-zero .member-delivery,
.member-chat-grid .member-chat-row--alloc-zero .member-delivery__tick2 {
  color: #991b1b !important;
}

.member-chat-grid .member-chat-row--alloc-zero .member-chat-cell--ok {
  font-weight: 700;
}

.member-chat-grid .member-chat-row--deletable {
  cursor: default;
}

body.app-role-member:not(.member-page--3d)
  .member-chat-grid:not(.member-chat-grid--3d)
  .member-chat-row--deletable:active
  .member-chat-cell {
  background: #eef2ff;
}

.member-feed-select-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 0 0 auto;
  min-height: 2.2rem;
  padding: 0.35rem 0.55rem;
  background: #1e3a5f;
  color: #f8fafc;
  border-radius: 0.35rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.member-feed-select-bar.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.member-feed-select-bar__label {
  font-size: 0.78rem;
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
}

.member-feed-select-bar__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.member-intake-root--select-mode .member-composer-dock {
  opacity: 0.42;
  pointer-events: none;
}

.member-intake-root--select-mode .member-keyboard-panel {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body.app-role-member .member-intake-root--select-mode .member-intake-maincol {
  overflow: hidden;
  min-height: 0;
}

body.app-role-member .member-intake-root--select-mode .member-chat-feed {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.member-chat-grid .member-chat-row--selectable {
  cursor: pointer;
}

body.app-role-member:not(.member-page--3d)
  .member-chat-grid:not(.member-chat-grid--3d)
  .member-chat-row--selected
  .member-chat-cell {
  background: #dbeafe !important;
  font-weight: 600;
}

body.app-role-member:not(.member-page--3d)
  .member-chat-grid:not(.member-chat-grid--3d):not(.member-chat-grid--recall)
  .member-chat-row--selected
  .member-chat-cell--num {
  box-shadow: inset 3px 0 0 #2563eb;
}

body.app-role-member:not(.member-page--3d)
  .member-chat-grid--recall:not(.member-chat-grid--3d)
  .member-chat-row--selected
  .member-chat-cell--recall {
  box-shadow: inset 3px 0 0 #2563eb;
}

.member-chat-grid .member-chat-row--selected .member-chat-cell {
  font-weight: 600;
}

.member-intake-composer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* NUMBER / AMOUNT + Viber-style send (2D — UX-08f: num/amt/send row 2.6rem, send width 5.4rem) */
.member-input-bar-row.member-input-bar-row--pill:not(.member-input-bar-row--3d) {
  display: grid;
  grid-template-columns: minmax(2.5rem, 28%) 1fr 5.4rem;
  column-gap: 0.4rem;
  align-items: end;
  min-height: 2.6rem;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
}

.member-composer-num-slot {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 6.75rem;
  height: 100%;
  margin-inline-end: 0.1rem;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 11;
  isolation: isolate;
}

.member-composer-num-hit {
  position: absolute;
  inset: -8px -6px;
  z-index: 100;
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(248, 250, 252, 0.02);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

#memberNumSlot.member-composer-num-slot {
  position: relative;
  display: flex;
  align-items: stretch;
  align-self: end;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 2.6rem;
  max-height: 2.6rem;
  height: 2.6rem;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 11;
  pointer-events: auto;
  touch-action: manipulation;
  isolation: isolate;
}

#memberNumSlot .member-na-number {
  pointer-events: none;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.member-composer-amt-slot {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 6.75rem;
  height: 100%;
  margin-inline-start: 0;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 1;
}

.member-composer-amt-hit {
  position: absolute;
  inset: -8px -6px;
  z-index: 100;
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(248, 250, 252, 0.02);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

#memberAmtSlot.member-composer-amt-slot {
  position: relative;
  display: flex;
  align-items: stretch;
  align-self: end;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 2.6rem;
  max-height: 2.6rem;
  height: 2.6rem;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 12;
  pointer-events: auto;
  touch-action: manipulation;
  isolation: isolate;
}

#memberAmtSlot .member-na-amount {
  pointer-events: none;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

#memberFldAmount .member-na-label--amt,
#memberFldAmount .member-na-amt-line,
#memberFldAmount .member-na-value--amt,
#memberFldAmount .member-na-value--amt-after-r,
#memberFldAmount .member-r-inline-badge {
  pointer-events: none;
}

#memberFldNumber .member-na-label,
#memberFldNumber .member-na-value-num-pair,
#memberFldNumber .member-na-digit-slot {
  pointer-events: none;
}

.member-input-bar-row:not(.member-input-bar-row--3d) .member-na-number,
.member-input-bar-row:not(.member-input-bar-row--3d) .member-na-amount {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: end;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 2.6rem;
  max-height: 2.6rem;
  height: 2.6rem;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
  pointer-events: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.member-input-bar-row .member-na-number {
  margin-inline-end: 0.1rem;
  padding: 0.04rem 0.18rem 0.04rem;
}

#memberFldAmount {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: end;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 2.6rem;
  max-height: 2.6rem;
  height: 2.6rem;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
  pointer-events: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#memberFldNumber {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  cursor: pointer;
  pointer-events: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.member-input-bar-row--pill .member-na-amount {
  padding-inline: 0.15rem;
}

.member-input-bar-row .member-na-amount {
  align-items: flex-start;
  text-align: left;
}

.member-input-bar-row .member-na-number .member-na-label {
  margin-bottom: 0;
  font-size: 0.48rem;
  line-height: 1.05;
}

.member-input-bar-row .member-na-amount .member-na-label--amt {
  font-size: 0.48rem;
  letter-spacing: 0.04em;
  margin-bottom: 0;
  line-height: 1.05;
  align-self: flex-start;
  text-align: left;
  width: 100%;
}

.member-input-bar-row .member-na-number .member-na-value,
.member-input-bar-row .member-na-number .member-na-value-num-pair,
.member-input-bar-row .member-na-number .member-na-digit-slot {
  font-size: calc(0.95rem - 2px);
  min-height: 0.72rem;
  line-height: 1.1;
}

.member-input-bar-row .member-na-number .member-na-value-num-pair,
.member-input-bar-row .member-na-number #memberNumDisplay,
.member-input-bar-row .member-na-number #member3dNumDisplay,
.member-input-bar-row .member-na-number .member-na-value:not(.member-na-value-num-pair) {
  width: 100%;
  max-width: 100%;
  justify-content: flex-end;
  text-align: right;
}

.member-input-bar-row .member-na-number .member-khway-preview,
.member-input-bar-row .member-na-number .member-khway-preview__digits,
.member-input-bar-row .member-na-number .member-khway-preview__tag {
  font-size: calc(0.95rem - 2px);
  font-weight: 700;
  line-height: 1.2;
}

.member-input-bar-row .member-na-number .member-khway-preview__tag {
  color: #1e3a8a;
}

.member-input-bar-row .member-na-number .member-khway-preview {
  width: 100%;
  text-align: right;
}

.member-input-bar-row .member-na-amount .member-na-amt-line {
  text-align: left;
  direction: ltr;
}

.member-input-bar-row .member-na-number .member-na-digit-slot {
  padding-bottom: 0.08rem;
}

.member-input-bar-row .member-na-amount .member-na-value--amt,
.member-input-bar-row .member-na-amount .member-na-value--amt-after-r {
  font-size: calc(0.92rem - 2px);
  line-height: 1.1;
  min-height: 0.72rem;
  color: var(--text);
}

.member-input-bar-row .member-r-inline-badge {
  font-size: calc(1.08rem - 2px);
  font-weight: 400;
}

.member-input-bar-row .member-na-amount .member-na-value--amt.member-na-value--empty,
.member-input-bar-row .member-na-amount .member-na-value--amt-after-r.member-na-value--empty {
  color: #64748b;
}

/* Send — same glass pill family as member-kb-key / Enter (not solid blue disc) */
#memberSendBtn.member-composer-send {
  width: 5.4rem;
  height: 2.6rem;
  min-width: 5.4rem;
  min-height: 2.6rem;
  align-self: end;
}

.member-composer-send {
  align-self: center;
  justify-self: end;
  position: relative;
  z-index: 3;
  width: 6.75rem;
  height: 6.75rem;
  min-width: 6.75rem;
  min-height: 6.75rem;
  box-sizing: border-box;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  color: #b8c4d0;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 2px rgba(148, 163, 184, 0.1),
    inset 0 1px 2px rgba(148, 163, 184, 0.06);
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform: translateY(0);
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease,
    transform 0.12s ease;
}

.member-composer-send__icon {
  display: block;
  width: 0.92rem;
  height: 0.92rem;
  margin-inline-start: 0.08rem;
  flex-shrink: 0;
  fill: currentColor;
  filter: none;
  opacity: 0.88;
  transform: translateX(0.05rem);
}

.member-composer-send.member-composer-send--ready:not(:disabled):not(.member-kb-dim) {
  border-color: rgba(52, 178, 154, 0.45);
  background: linear-gradient(180deg, #ecfdf8 0%, #a7f0d8 52%, #86e8c8 100%);
  color: #1f6b5c;
  box-shadow:
    0 4px 14px rgba(94, 181, 165, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.88) inset;
}

.member-composer-send.member-composer-send--ready:not(:disabled):not(.member-kb-dim) .member-composer-send__icon {
  opacity: 1;
}

.member-composer-send:hover:not(:disabled):not(.member-kb-dim) {
  transform: translateY(-0.5px);
}

.member-composer-send.member-composer-send--ready:not(:disabled):not(.member-kb-dim):hover {
  background: linear-gradient(180deg, #f0fdf9 0%, #9ae8cf 100%);
  border-color: rgba(94, 181, 165, 0.48);
  color: #1a5f52;
  box-shadow:
    0 4px 12px rgba(94, 181, 165, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.member-composer-send:active:not(:disabled):not(.member-kb-dim) {
  transform: translateY(0.5px) scale(0.99);
}

.member-composer-send.member-composer-send--ready:not(:disabled):not(.member-kb-dim):active {
  background: linear-gradient(180deg, #d8f3ea 0%, #c5ebdf 100%);
  box-shadow: 0 1px 4px rgba(148, 163, 184, 0.12) inset;
}

.member-composer-send:focus-visible {
  outline: none;
  box-shadow:
    0 1px 2px rgba(148, 163, 184, 0.1),
    0 0 0 3px rgba(186, 230, 253, 0.55);
}

.member-composer-send:disabled {
  opacity: 1;
  cursor: not-allowed;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: rgba(226, 232, 240, 0.9);
  color: #b8c4d0;
  box-shadow: inset 0 1px 2px rgba(148, 163, 184, 0.06);
  filter: none;
}

.member-composer-send.member-kb-dim:not(:disabled) {
  opacity: 1;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid rgba(226, 232, 240, 0.9);
  color: #b8c4d0;
  box-shadow: inset 0 1px 2px rgba(148, 163, 184, 0.06);
  transform: none;
}

.member-composer-send.member-kb-dim:not(:disabled) .member-composer-send__icon {
  opacity: 0.88;
}

.member-na-number,
.member-na-amount {
  border-radius: 0.45rem;
  padding: 0.45rem 0.55rem 0.35rem;
  background: #fff;
  border: 2px solid #e5e7eb;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.member-input-bar-row .member-na-number .member-na-value:not(.member-na-value-num-pair) {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
  max-width: 100%;
}

.member-input-bar-row .member-na-number .member-na-value:not(.member-na-value-num-pair)::-webkit-scrollbar {
  display: none;
}

.member-na-number--active {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
}

.member-na-amount--active {
  border-color: #64748b;
  box-shadow: 0 0 0 1px rgba(100, 116, 139, 0.2);
}

/* Locked until category tag — stable typography (no .member-kb-dim opacity flicker) */
.member-na-amount--locked {
  background: #f1f5f9;
  border-color: #e2e8f0;
  border-style: dashed;
  box-shadow: none;
}

.member-na-amount--locked .member-na-label--amt {
  color: #94a3b8;
}

.member-na-amount--locked .member-na-value--amt {
  color: #94a3b8;
  border-bottom-color: #cbd5e1;
}

.member-na-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #2563eb;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.member-na-label--amt {
  color: #9ca3af;
}

.member-na-amount .member-na-label {
  color: #9ca3af;
}

.member-na-number--active .member-na-label {
  color: #2563eb;
}

.member-na-amount--active .member-na-label--amt {
  color: #64748b;
}

.member-na-value {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--amount-color);
  min-height: 1.5rem;
  line-height: 1.35;
  border-bottom: 2px solid #2563eb;
  padding-bottom: 0.1rem;
}

/* Two empty slots until digits are typed (no "00" placeholder). */
.member-na-khway-hint {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  margin-top: 0.15rem;
  line-height: 1.2;
}

.member-na-khway-preview {
  display: block;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--text);
}

.member-na-khway-preview[hidden] {
  display: none !important;
}

.member-na-value--khway {
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  border-bottom-color: #2563eb;
  color: var(--text);
}

.member-na-number--active .member-na-value--khway {
  color: var(--text);
}

.member-na-value-num-pair {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.42rem;
  border-bottom: none;
  padding-bottom: 0;
  box-shadow: none;
}

.member-na-digit-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: auto;
  min-height: 1.35rem;
  text-align: center;
  font-size: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  border-bottom: none;
  padding-bottom: 0;
  color: #111827;
}

/* Empty slots: no visible _ _ placeholders */
.member-na-digit-slot--blank {
  display: none !important;
  width: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
}

.member-na-digit-slot--tag {
  display: inline-flex !important;
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  padding: 0;
  font-size: inherit;
  line-height: 1.35;
  color: #1e3a8a;
  border-bottom: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* Digit + Group B tag suffix (fallback two-slot path): keep tag adjacent to digit */
.member-na-digit-slot:not(.member-na-digit-slot--tag):not(.member-na-digit-slot--blank)
  + .member-na-digit-slot--tag {
  flex: 0 0 auto;
  justify-content: flex-start;
}

.member-na-digit-slot--tag::-webkit-scrollbar {
  display: none;
}

.member-input-bar-row .member-na-number .member-na-value-num-pair {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  justify-content: flex-end;
}

.member-na-amount .member-na-value {
  border-bottom-color: transparent;
}

.member-na-amount--active .member-na-value--amt {
  border-bottom-color: #94a3b8;
}

/* Amount digits: stable stack; composer uses body text (red reserved for feed/totals) */
.member-na-amount .member-na-value--amt,
.member-na-amount .member-na-value--amt-after-r {
  font-family: var(--font-sans);
  font-size: calc(1.5rem - 2px);
  font-weight: 700;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.member-na-amount .member-na-value--amt.member-na-value--empty,
.member-na-amount .member-na-value--amt-after-r.member-na-value--empty {
  color: #94a3b8;
  font-weight: 700;
}

.member-na-value--empty:not(.member-na-value--amt) {
  color: #64748b;
}

.member-manual-comment-label {
  font-size: 0.75rem;
  color: #6b7280;
}

.member-manual-comment-input {
  width: 100%;
  padding: 0.35rem 0.45rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.35rem;
  font-size: 0.9rem;
}

.member-kb-comment-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.member-kb-row--cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
  justify-content: space-between;
}

.member-kb-row--cats-wide .member-kb-key--cat {
  flex: 1 1 18%;
  min-width: 2.75rem;
}

.member-na-value.member-na-value--khway-full {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding-inline-start: 0;
  padding-inline-end: 0.12rem;
  box-sizing: border-box;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.member-na-value--khway-full .member-na-digit-slot {
  display: none !important;
}

/* Digits + ခွေ cluster on the right; digits grow leftward before tag (font = category tag, UX-08c) */
.member-khway-preview {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  font-size: calc(1.1rem - 2px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  gap: 0.28rem;
  direction: ltr;
}

.member-khway-preview__digits {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: end;
}

.member-khway-preview__tag {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #1e3a8a;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.member-khway-preview:not(:has(.member-khway-preview__digits)) {
  justify-content: flex-end;
}

.member-khway-preview.hidden {
  display: none !important;
}

/* Member keypad — soft pastel tray with light mint wash */
.member-kb-numpad {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  background: linear-gradient(180deg, #f4fbf8 0%, #e9f5f1 58%, #e2f0eb 100%);
  border: 1px solid rgba(125, 196, 176, 0.32);
  border-radius: 18px;
  padding: 0.4rem 0.45rem 0.36rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 4px 16px rgba(94, 181, 165, 0.12);
}

.member-kb-numrow {
  display: flex;
  gap: 0.28rem;
  justify-content: stretch;
}

.member-kb-numrow .member-kb-key--num {
  flex: 1 1 33%;
}

.member-kb-numrow--r0e .member-kb-key {
  flex: 1 1 33%;
  min-height: 2.4rem;
  font-size: calc(1.1rem + 1px);
  font-weight: 700;
}

/* 4×4 digit pad: Clear/R col4; Send spans rows 3–4 on the right. */
.member-kb-digit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, minmax(2.28rem, auto));
  gap: 0.26rem;
}

.member-kb-digit-grid > .member-kb-key {
  min-width: 0;
  min-height: 2.28rem;
}

.member-kb-digit-grid .member-kb-key--enter-span {
  grid-column: 4;
  grid-row: 3 / span 2;
  min-height: 100%;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-kb-key {
  box-sizing: border-box;
  position: relative;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:
    0 1px 2px rgba(148, 163, 184, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
  color: #05DF72;
  font-size: calc(1rem + 1px);
  cursor: pointer;
  touch-action: manipulation;
  font-family: inherit;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(0);
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease,
    transform 0.12s ease;
}

.member-kb-key:focus-visible {
  outline: none;
  box-shadow:
    0 1px 2px rgba(148, 163, 184, 0.14),
    0 0 0 3px rgba(186, 230, 253, 0.65);
}

.member-kb-key:hover:not(:disabled) {
  transform: translateY(-0.5px);
  border-color: rgba(203, 213, 225, 0.95);
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  color: #475569;
  box-shadow:
    0 3px 10px rgba(148, 163, 184, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.member-kb-key:active:not(:disabled) {
  transform: translateY(0.5px) scale(0.99);
  box-shadow:
    0 1px 3px rgba(148, 163, 184, 0.1) inset,
    0 1px 2px rgba(148, 163, 184, 0.08);
}

/* Numpad keys — white + soft mint tint */
.member-kb-numpad .member-kb-key:not(:disabled) {
  background: linear-gradient(180deg, #ffffff 0%, #edf9f5 100%);
  border-color: rgba(134, 203, 186, 0.42);
  color: #05DF72;
  text-shadow: none;
  box-shadow:
    0 2px 6px rgba(94, 181, 165, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
}

.member-kb-numpad .member-kb-key:not(:disabled):hover {
  background: linear-gradient(180deg, #ffffff 0%, #dff5ee 100%);
  border-color: rgba(94, 181, 165, 0.48);
  color: #05DF72;
  box-shadow:
    0 4px 12px rgba(94, 181, 165, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.member-kb-numpad .member-kb-key:not(:disabled):active {
  background: linear-gradient(180deg, #d8f3ea 0%, #c5ebdf 100%);
  color: #05DF72;
}

#memberKbGroupA .member-kb-key--cat[data-tag-group="K"] {
  font-size: calc(0.72rem + 1px);
  font-weight: 600;
  line-height: 1.15;
}

.member-kb-key--cat {
  flex: 1 1 17%;
  min-width: 2.4rem;
  padding: 0.44rem 0.28rem;
  font-size: calc(0.72rem + 1px);
  line-height: 1.15;
  border-radius: 999px;
  font-weight: 600;
  background: linear-gradient(180deg, #ffffff 0%, #f3f0ff 100%);
  border-color: rgba(186, 196, 230, 0.65);
  color: #05DF72;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
}

.member-kb-key__hint {
  font-size: calc(0.58rem + 1px);
  font-weight: 700;
  line-height: 1;
  color: #05DF72;
  letter-spacing: 0.02em;
}

.member-kb-key--cat.is-selected .member-kb-key__hint,
.member-kb-key--cat-neighbor.is-selected .member-kb-key__hint {
  color: #1d4ed8;
}

.member-kb-key--cat-neighbor.is-selected {
  border-color: rgba(59, 130, 246, 0.55);
}

.member-kb-key--hide .member-kb-key__hide-sub {
  font-size: calc(0.62rem + 1px);
  font-weight: 700;
  opacity: 0.85;
}

.member-kb-numpad .member-kb-key--cat:not(:disabled):hover {
  background: linear-gradient(180deg, #ffffff 0%, #e8eeff 100%);
  border-color: rgba(147, 170, 230, 0.65);
  color: #4a5f8f;
}

#memberKbGroupA .member-kb-key--cat.is-selected,
#memberKbGroupA .member-kb-key--cat.is-selected:disabled {
  background: linear-gradient(180deg, #f0f7ff 0%, #cfe4ff 52%, #b8d9fe 100%);
  border-color: rgba(96, 165, 250, 0.55);
  color: #2f5f9a;
  font-weight: 600;
  filter: none;
  opacity: 1;
  text-shadow: none;
  box-shadow:
    0 3px 10px rgba(96, 165, 250, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.88) inset;
}

.member-kb-key--num {
  min-height: 2.62rem;
  font-size: calc(1.12rem + 1px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* UX-20b: optional larger 2D keys (structure unchanged). UX-20c dock overrides below. */
body.app-role-member.member-kb-size-large:not(.member-page--3d) .member-kb-numpad {
  gap: 0.34rem;
  padding: 0.44rem 0.5rem calc(0.36rem + env(safe-area-inset-bottom, 0px));
}

body.app-role-member.member-kb-size-large:not(.member-page--3d) .member-composer--keyboard-open
  .member-keyboard-panel:not(.member-keyboard-panel--collapsed) {
  max-height: min(58dvh, 540px);
}

body.app-role-member.member-kb-size-large:not(.member-page--3d) .member-kb-digit-grid {
  grid-template-rows: repeat(4, minmax(3rem, auto));
  gap: 0.4rem;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d) .member-kb-digit-grid > .member-kb-key {
  min-height: 3rem;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d) .member-kb-numrow--r0e .member-kb-key {
  min-height: 3.05rem;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d) .member-kb-key {
  font-size: 1.16rem;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d) .member-kb-key--num {
  min-height: 3.05rem;
  font-size: 1.38rem;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d) .member-kb-key--cat {
  min-height: 2.78rem;
  font-size: 0.86rem;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d) .member-kb-key--enter,
body.app-role-member.member-kb-size-large:not(.member-page--3d) .member-kb-key--action {
  min-height: 2.95rem;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d) .member-kb-key__hint {
  font-size: 0.7rem;
}

.member-kb-key--r {
  font-weight: 600;
  color: #4a8f7c;
  background: linear-gradient(180deg, #ffffff 0%, #e8f8f2 100%);
  border-color: rgba(125, 196, 176, 0.5);
}

.member-kb-key--r.member-kb-key--r-ready:not(:disabled):not(.member-kb-dim) {
  background: linear-gradient(180deg, #ecfdf8 0%, #a7f0d8 52%, #86e8c8 100%);
  border-color: rgba(52, 178, 154, 0.45);
  color: #1f6b5c;
  font-weight: 700;
  box-shadow:
    0 4px 14px rgba(94, 181, 165, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.88) inset;
}

.member-kb-key--r.member-kb-key--r-ready:not(:disabled):not(.member-kb-dim):hover {
  background: linear-gradient(180deg, #f0fdf9 0%, #9ae8cf 100%);
}

.member-kb-key--r.is-selected:not(:disabled) {
  background: linear-gradient(180deg, #e8faf4 0%, #b8ebd8 100%);
  border-color: rgba(94, 181, 165, 0.55);
  color: #2f6f5f;
  box-shadow:
    0 3px 10px rgba(94, 181, 165, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

/* R active on entry: soft locked-in */
.member-kb-key.member-kb-key--r.is-selected:disabled,
.member-kb-key.member-kb-key--r.is-selected.member-kb-dim {
  opacity: 1;
  cursor: not-allowed;
  background: linear-gradient(180deg, #e8edf2 0%, #dde3ea 100%);
  border: 1px solid rgba(203, 213, 225, 0.9);
  color: #94a3b8;
  text-shadow: none;
  box-shadow: inset 0 1px 3px rgba(148, 163, 184, 0.12);
  filter: none;
  transform: none;
}

/* Unavailable keys — flat, pale */
.member-kb-key:disabled {
  opacity: 1;
  cursor: not-allowed;
  color: #b8c4d0;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid rgba(226, 232, 240, 0.85);
  text-shadow: none;
  box-shadow: inset 0 1px 2px rgba(148, 163, 184, 0.06);
  filter: none;
  transform: none;
}

.member-kb-key:disabled:hover {
  border-color: rgba(226, 232, 240, 0.85);
  box-shadow: inset 0 1px 2px rgba(148, 163, 184, 0.06);
}

.member-kb-key--enter {
  min-height: 2.95rem;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.member-kb-key--enter:active:not(:disabled) {
  transform: translateY(0.5px) scale(0.992);
  box-shadow: 0 1px 4px rgba(148, 163, 184, 0.12) inset;
}

.member-kb-key--enter:focus-visible {
  box-shadow:
    0 1px 2px rgba(148, 163, 184, 0.1),
    0 0 0 3px rgba(186, 230, 253, 0.55);
}

.member-kb-key--enter:disabled,
.member-kb-key--enter.member-kb-dim:not(.member-kb-key--enter-ready) {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid rgba(226, 232, 240, 0.9);
  color: #b8c4d0;
  filter: none;
  text-shadow: none;
  box-shadow: inset 0 1px 2px rgba(148, 163, 184, 0.06);
  min-height: 2.5rem;
  transform: none;
}

.member-kb-key--enter.member-kb-key--enter-ready:not(.member-kb-dim) {
  background: linear-gradient(180deg, #ecfdf8 0%, #a7f0d8 52%, #86e8c8 100%);
  border-color: rgba(52, 178, 154, 0.45);
  color: #1f6b5c;
  font-weight: 600;
  text-shadow: none;
  box-shadow:
    0 4px 14px rgba(94, 181, 165, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.88) inset;
}

.member-kb-key--enter.member-kb-key--enter-ready:not(.member-kb-dim):hover {
  transform: translateY(-0.5px);
  background: linear-gradient(180deg, #f0fdf9 0%, #9ae8cf 100%);
}

.member-kb-key--enter.member-kb-key--enter-ready:not(.member-kb-dim):active {
  transform: translateY(0.5px) scale(0.99);
}

.member-kb-enter-icon {
  font-size: 1.48rem;
  line-height: 1;
  font-weight: 700;
  filter: none;
  opacity: 0.88;
}

.member-kb-actionrow {
  display: flex;
  gap: 0.38rem;
  margin-top: 0.22rem;
  padding-top: 0.38rem;
  border-top: 1px solid rgba(226, 232, 240, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.member-kb-key--action {
  flex: 1 1 33%;
  min-height: 2.48rem;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 12px;
  color: #5f7388;
}

.member-kb-numpad .member-kb-key--action[data-act="clear"]:not(:disabled) {
  background: linear-gradient(180deg, #fffef8 0%, #fef3c7 100%);
  border-color: rgba(251, 191, 36, 0.35);
  color: #92702a;
}

.member-kb-numpad .member-kb-key--action[data-act="clear"]:not(:disabled):hover {
  background: linear-gradient(180deg, #fffef8 0%, #fde68a 100%);
  border-color: rgba(245, 158, 11, 0.4);
}

.member-kb-numpad .member-kb-key--action[data-act="hide"]:not(:disabled) {
  background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%);
  border-color: rgba(165, 180, 252, 0.45);
  color: #5b6b9a;
}

.member-kb-numpad .member-kb-key--action[data-act="bk"]:not(:disabled) {
  background: linear-gradient(180deg, #ffffff 0%, #f5f0ff 100%);
  border-color: rgba(192, 168, 230, 0.42);
  color: #6b5f8f;
}

.member-kb-numpad .member-kb-key--action.member-kb-key--bk-lit:not(:disabled) {
  background: linear-gradient(180deg, #faf5ff 0%, #e9d8fd 100%);
  border-color: rgba(167, 139, 250, 0.45);
  color: #6d4f9a;
}

.member-kb-key--action[data-act="bk"]:disabled {
  color: #94a3b8;
}

.member-kb-key--hide {
  font-weight: 700;
}

/* Non-button elements with .member-kb-dim (amount field uses --locked instead) */
.member-kb-dim:not(.member-kb-key):not(.member-na-amount) {
  opacity: 0.5;
  filter: grayscale(0.2);
}

@media (max-width: 520px) {
  .member-kb-key--cat {
    font-size: 0.62rem;
    min-width: 2rem;
  }

  .member-na-value:not(.member-na-value--amt) {
    font-size: calc(1.15rem - 2px);
  }

  .member-na-amount .member-na-value--amt,
  .member-na-amount .member-na-value--amt-after-r {
    font-size: calc(1.35rem - 2px);
  }
}

/* Logged-in (admin / agent / member): safe areas, full-width shell, usable on phones */
body.app-logged-in {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

body.app-logged-in .app-shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0.45rem;
  padding-top: max(0.45rem, env(safe-area-inset-top, 0px));
  padding-right: max(0.45rem, env(safe-area-inset-right, 0px));
  padding-bottom: max(0.45rem, env(safe-area-inset-bottom, 0px));
  padding-left: max(0.45rem, env(safe-area-inset-left, 0px));
}

/* MAIN tab: flush left — beat generic .app-shell padding above (2D + 3D MAIN) */
body.app-role-admin.app-logged-in:has(#adminMainBoardPage:not(.hidden)) .app-shell,
body.app-role-admin.app-logged-in:has(#adminMainBoard3dPage:not(.hidden)) .app-shell,
body.app-role-agent.app-logged-in:has(#agentMainBoardPage:not(.hidden)) .app-shell,
body.app-role-agent.app-logged-in:has(#agentMainBoard3dPage:not(.hidden)) .app-shell {
  padding: 0;
  padding-top: max(0, env(safe-area-inset-top, 0px));
  padding-right: max(0, env(safe-area-inset-right, 0px));
  padding-bottom: max(0, env(safe-area-inset-bottom, 0px));
  padding-left: max(0, env(safe-area-inset-left, 0px));
}

body.app-role-admin.app-logged-in:has(#adminMainBoardPage:not(.hidden)) .container,
body.app-role-admin.app-logged-in:has(#adminMainBoard3dPage:not(.hidden)) .container,
body.app-role-agent.app-logged-in:has(#agentMainBoardPage:not(.hidden)) .container,
body.app-role-agent.app-logged-in:has(#agentMainBoard3dPage:not(.hidden)) .container {
  gap: 0;
}

body.app-logged-in .topbar {
  flex: 0 0 auto;
  margin-bottom: 0.4rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}

body.app-logged-in .topbar h1 {
  font-size: clamp(0.88rem, 3.6vw, 1.15rem);
  line-height: 1.25;
  flex: 1 1 8rem;
  min-width: 0;
}

body.app-logged-in .topbar-actions .btn {
  min-height: 2.75rem;
  padding: 0.45rem 0.9rem;
  touch-action: manipulation;
}

body.app-logged-in .container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* Admin + agent: wide tables pan inside .table-wrap; allow browser pinch-zoom (UX-04). */
body.app-role-admin.app-logged-in .table-wrap,
body.app-role-agent.app-logged-in .table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

body.app-role-admin.app-logged-in .legacy-card,
body.app-role-agent.app-logged-in .legacy-card {
  max-width: 100%;
}

/* UX-04: Admin + agent on phones / touch — pan/scroll; pinch zoom in/out; MAIN unlocks */
@media (max-width: 1023px), ((hover: none) and (pointer: coarse)) {
  html {
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.app-role-admin.app-logged-in,
  body.app-role-agent.app-logged-in {
    display: block;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: var(--sys2d-vv-height, 100svh);
    max-height: none;
    overscroll-behavior: auto;
    touch-action: pan-x pan-y pinch-zoom;
  }

  body.app-role-admin.app-logged-in .app-shell,
  body.app-role-agent.app-logged-in .app-shell,
  body.app-role-admin.app-logged-in .container,
  body.app-role-agent.app-logged-in .container {
    display: block;
    flex: none;
    overflow: visible;
    min-height: auto;
    height: auto;
    max-height: none;
  }

  /* UX-10 — slightly wider shell on phone (2D + 3D admin/agent) */
  body.app-role-admin.app-logged-in .app-shell,
  body.app-role-agent.app-logged-in .app-shell {
    padding: max(0.18rem, env(safe-area-inset-top, 0px))
      max(0.18rem, env(safe-area-inset-right, 0px))
      max(0.18rem, env(safe-area-inset-bottom, 0px))
      max(0.18rem, env(safe-area-inset-left, 0px));
  }

  body.app-role-admin.app-logged-in:has(#adminMainBoardPage:not(.hidden)) .app-shell,
  body.app-role-admin.app-logged-in:has(#adminMainBoard3dPage:not(.hidden)) .app-shell,
  body.app-role-admin.app-logged-in:has(#adminDashboard.admin-dashboard--stock-workspace) .app-shell,
  body.app-role-agent.app-logged-in:has(#agentMainBoardPage:not(.hidden)) .app-shell,
  body.app-role-agent.app-logged-in:has(#agentMainBoard3dPage:not(.hidden)) .app-shell,
  body.app-role-agent.app-logged-in:has(#agentDashboard.agent-dashboard--stock-workspace) .app-shell {
    padding: 0;
    padding-top: max(0, env(safe-area-inset-top, 0px));
    padding-right: max(0, env(safe-area-inset-right, 0px));
    padding-bottom: max(0, env(safe-area-inset-bottom, 0px));
    padding-left: max(0, env(safe-area-inset-left, 0px));
  }

  #adminDashboard,
  #agentDashboard,
  .legacy-dashboard--admin,
  .legacy-dashboard--agent {
    display: block;
    overflow: visible;
    min-height: auto;
    height: auto;
    max-height: none;
  }

  .legacy-dashboard--agent .legacy-body--agent {
    display: block;
    min-height: auto;
    overflow: visible;
  }

  /* Admin dashboard: keep left Windows tree sidebar beside content (not stacked full-width rows) */
  .legacy-dashboard--admin:not(.legacy-dashboard--admin--nav-hidden) {
    --admin-nav-sidebar-w: min(132px, 28vw);
  }

  .legacy-dashboard--admin:not(.legacy-dashboard--admin--nav-hidden) .legacy-body--admin {
    display: grid;
    grid-template-columns: var(--admin-nav-sidebar-w) minmax(0, 1fr);
    grid-template-areas: "sidebar main";
    min-height: 0;
    overflow: visible;
  }

  .legacy-dashboard--admin:not(.legacy-dashboard--admin--nav-hidden) .legacy-sidebar--admin {
    grid-area: sidebar;
    width: var(--admin-nav-sidebar-w);
    min-width: var(--admin-nav-sidebar-w);
    max-width: var(--admin-nav-sidebar-w);
    align-self: stretch;
  }

  .legacy-dashboard--admin:not(.legacy-dashboard--admin--nav-hidden) .legacy-body--admin .legacy-content {
    grid-area: main;
    min-width: 0;
  }

  .legacy-dashboard--agent:not(.legacy-dashboard--agent--nav-hidden) {
    --admin-nav-sidebar-w: min(132px, 28vw);
  }

  .legacy-dashboard--agent:not(.legacy-dashboard--agent--nav-hidden) .legacy-body--agent {
    display: grid;
    grid-template-columns: var(--admin-nav-sidebar-w) minmax(0, 1fr);
    grid-template-areas: "sidebar main";
    min-height: 0;
    overflow: visible;
  }

  .legacy-dashboard--agent:not(.legacy-dashboard--agent--nav-hidden) .legacy-sidebar--agent {
    grid-area: sidebar;
    width: var(--admin-nav-sidebar-w);
    min-width: var(--admin-nav-sidebar-w);
    max-width: var(--admin-nav-sidebar-w);
    align-self: stretch;
  }

  .legacy-dashboard--agent:not(.legacy-dashboard--agent--nav-hidden) .legacy-body--agent .legacy-content {
    grid-area: main;
    min-width: 0;
  }

  .legacy-dashboard--admin .legacy-content,
  .legacy-dashboard--agent .legacy-content {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    max-width: 100%;
  }

  .legacy-dashboard--agent .legacy-topbar--agent {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .legacy-dashboard--admin .legacy-topbar--admin {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand tools";
    --admin-topbar-pad-top: 0.85rem;
    padding: var(--admin-topbar-pad-top) 0.5rem 0.18rem;
    column-gap: 0.4rem;
  }

  .legacy-dashboard--admin .legacy-topbar-admin-brand {
    grid-area: brand;
    flex-wrap: wrap;
    align-self: end;
  }

  .legacy-dashboard--admin .legacy-topbar-admin-tools {
    grid-area: tools;
    align-self: end;
  }

  .legacy-dashboard--admin .legacy-topbar-admin-title {
    top: 0.1rem;
    font-size: 0.62rem;
  }

  .legacy-dashboard--admin .admin-topbar-root-tab {
    min-width: 5rem;
    padding: 0.36rem 0.85rem;
  }

  .legacy-dashboard--admin .admin-topbar-root-tabs {
    gap: 0.32rem;
  }

  .admin-profile-week-lay-card .admin-profile-week-lay__wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  .member-menu-week-lay__wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y pinch-zoom;
  }

  .member-menu-week-lay-table {
    min-width: 36rem;
  }

  /* MAIN + stock workspace parity: pan inside shell instead of 100dvh viewport lock */
  body.app-role-admin:is(
      :has(#adminMainBoardPage:not(.hidden)),
      :has(#adminMainBoard3dPage:not(.hidden)),
      :has(#adminDashboard[data-admin-root-view="dashboard"]),
      :has(#adminDashboard.admin-dashboard--stock-workspace)
    ),
  body.app-role-agent:is(
      :has(#agentMainBoardPage:not(.hidden)),
      :has(#agentMainBoard3dPage:not(.hidden)),
      :has(#agentDashboard[data-agent-root-view="dashboard"]),
      :has(#agentDashboard.agent-dashboard--stock-workspace)
    ) {
    overflow: auto;
    height: auto;
    min-height: 100dvh;
    max-height: none;
  }

  body.app-role-admin .app-shell:is(
      :has(#adminMainBoardPage:not(.hidden)),
      :has(#adminMainBoard3dPage:not(.hidden)),
      :has(#adminDashboard[data-admin-root-view="dashboard"]),
      :has(#adminDashboard.admin-dashboard--stock-workspace)
    ),
  body.app-role-agent .app-shell:is(
      :has(#agentMainBoardPage:not(.hidden)),
      :has(#agentMainBoard3dPage:not(.hidden)),
      :has(#agentDashboard[data-agent-root-view="dashboard"]),
      :has(#agentDashboard.agent-dashboard--stock-workspace)
    ) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  body.app-role-admin .app-shell:is(
      :has(#adminMainBoardPage:not(.hidden)),
      :has(#adminMainBoard3dPage:not(.hidden)),
      :has(#adminDashboard[data-admin-root-view="dashboard"]),
      :has(#adminDashboard.admin-dashboard--stock-workspace)
    )
    .container,
  body.app-role-agent .app-shell:is(
      :has(#agentMainBoardPage:not(.hidden)),
      :has(#agentMainBoard3dPage:not(.hidden)),
      :has(#agentDashboard[data-agent-root-view="dashboard"]),
      :has(#agentDashboard.agent-dashboard--stock-workspace)
    )
    .container {
    height: auto;
    max-height: none;
    overflow: visible;
    display: block;
  }

  #adminDashboard:is(
      :has(#adminMainBoardPage:not(.hidden)),
      :has(#adminMainBoard3dPage:not(.hidden)),
      [data-admin-root-view="dashboard"],
      .admin-dashboard--stock-workspace
    ),
  #agentDashboard:is(
      :has(#agentMainBoardPage:not(.hidden)),
      :has(#agentMainBoard3dPage:not(.hidden)),
      [data-agent-root-view="dashboard"],
      .agent-dashboard--stock-workspace
    ),
  .legacy-dashboard--agent:has(#agentMainBoardPage:not(.hidden)),
  .legacy-dashboard--agent:has(#agentMainBoard3dPage:not(.hidden)) {
    overflow: visible;
    height: auto;
    max-height: none;
    display: block;
  }

  #adminDashboard:has(#adminMainBoardPage:not(.hidden)) .legacy-body,
  #adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) .legacy-body,
  .legacy-dashboard--agent:has(#agentMainBoardPage:not(.hidden)) .legacy-body--agent,
  .legacy-dashboard--agent:has(#agentMainBoard3dPage:not(.hidden)) .legacy-body--agent {
    overflow: visible;
    min-height: auto;
  }

  #adminDashboard:has(#adminMainBoardPage:not(.hidden)) .legacy-content,
  #adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) .legacy-content,
  #adminDashboard[data-admin-root-view="dashboard"] .legacy-content,
  #adminDashboard.admin-dashboard--stock-workspace .legacy-content,
  .legacy-dashboard--agent .legacy-content:has(#agentMainBoardPage:not(.hidden)),
  .legacy-dashboard--agent .legacy-content:has(#agentMainBoard3dPage:not(.hidden)),
  #agentDashboard[data-agent-root-view="dashboard"] .legacy-content,
  #agentDashboard.agent-dashboard--stock-workspace .legacy-content {
    overflow: auto;
    height: auto;
    max-height: none;
    display: block;
    -webkit-overflow-scrolling: touch;
  }

  #adminMainBoardPage,
  #agentMainBoardPage,
  #adminMainBoard3dPage,
  #agentMainBoard3dPage,
  #adminMainPage,
  #agentMainPage {
    overflow: auto;
    min-height: auto;
    height: auto;
    max-height: none;
    display: block;
    -webkit-overflow-scrolling: touch;
  }

  #adminMainBoardPage,
  #agentMainBoardPage,
  #adminMainBoard3dPage,
  #agentMainBoard3dPage {
    --agent-mb-four-cols: repeat(4, minmax(10.5rem, 1fr));
    --agent-mb-four-gap: 0.18rem;
    --main-board-center-min: calc(4 * 10.5rem + 3 * var(--agent-mb-four-gap));
    --main-board-canvas-min: var(--sys2d-desktop-canvas-min);
  }

  #adminMainBoardPage .main-board-shell,
  #agentMainBoardPage .main-board-shell,
  #adminMainBoard3dPage .sys3d-main-board-mount .sys3d-board-shell.main-board-shell,
  #agentMainBoard3dPage .sys3d-main-board-mount .sys3d-board-shell.main-board-shell {
    display: grid;
    --main-board-shell-cols: minmax(var(--main-board-shell-left-min), var(--main-board-shell-left-max))
      minmax(var(--main-board-center-min), 1fr) minmax(var(--main-board-shell-right-min), var(--main-board-shell-right-max));
    grid-template-columns: var(--main-board-shell-cols) !important;
    grid-template-rows: minmax(0, 1fr);
    width: max(100%, var(--main-board-canvas-min));
    min-width: var(--main-board-canvas-min);
    max-width: none;
    margin: 0;
    justify-items: stretch;
    height: auto;
    min-height: min(85vh, 40rem);
    max-height: none;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
  }

  #adminMainBoardPage,
  #agentMainBoardPage,
  #adminMainBoard3dPage .sys3d-main-board-mount,
  #agentMainBoard3dPage .sys3d-main-board-mount {
    width: max(100%, var(--main-board-canvas-min));
    min-width: var(--main-board-canvas-min);
    max-width: none;
    overflow: visible;
  }

  /* UX-10b — period / member / summary / report / delete / payment: MAIN canvas pan on phone */
  #adminDashboard.admin-dashboard--stock-workspace,
  #agentDashboard.agent-dashboard--stock-workspace {
    --sys2d-workspace-canvas-min: var(--sys2d-desktop-canvas-min);
  }

  /* UX-10z — stock pages: desktop-width canvas; class from syncStockWorkspacePanCanvasClass */
  #adminDashboard.admin-dashboard--stock-workspace .admin-page.sys2d-pan-canvas,
  #agentDashboard.agent-dashboard--stock-workspace .admin-page.sys2d-pan-canvas {
    width: max(100%, var(--sys2d-workspace-canvas-min));
    min-width: var(--sys2d-workspace-canvas-min);
    max-width: none;
    box-sizing: border-box;
    touch-action: pan-x pan-y pinch-zoom;
  }

  #adminDashboard.admin-dashboard--stock-workspace .legacy-content,
  #agentDashboard.agent-dashboard--stock-workspace .legacy-content {
    touch-action: pan-x pan-y pinch-zoom;
  }

  #adminDashboard.admin-dashboard--stock-workspace .admin-page:not(.hidden),
  #agentDashboard.agent-dashboard--stock-workspace .admin-page:not(.hidden) {
    width: max(100%, var(--sys2d-workspace-canvas-min));
    min-width: var(--sys2d-workspace-canvas-min);
    max-width: none;
    box-sizing: border-box;
  }

  #adminDashboard.admin-dashboard--stock-workspace .period-page-readiness,
  #adminDashboard.admin-dashboard--stock-workspace .period-page-stack,
  #adminDashboard.admin-dashboard--stock-workspace #periodWeekRoundGridMount,
  #adminDashboard.admin-dashboard--stock-workspace .admin-agent-report-user-list,
  #adminDashboard.admin-dashboard--stock-workspace #adminMemberReportAccordionMount,
  #adminDashboard.admin-dashboard--stock-workspace #adminAgentReportByAgentMount,
  #adminDashboard.admin-dashboard--stock-workspace #adminReportPageGridBody,
  #adminDashboard.admin-dashboard--stock-workspace #admin3dReportTableMount,
  #adminDashboard.admin-dashboard--stock-workspace #admin3dAgentReportMount,
  #adminDashboard.admin-dashboard--stock-workspace #admin3dMemberReportMount,
  #adminDashboard.admin-dashboard--stock-workspace .admin-profile-week-lay-shell,
  #adminDashboard.admin-dashboard--stock-workspace #adminAgentMemberTreePanel,
  #agentDashboard.agent-dashboard--stock-workspace .period-page-readiness,
  #agentDashboard.agent-dashboard--stock-workspace .period-page-stack,
  #agentDashboard.agent-dashboard--stock-workspace #periodWeekRoundGridMount,
  #agentDashboard.agent-dashboard--stock-workspace .admin-agent-report-user-list,
  #agentDashboard.agent-dashboard--stock-workspace #agentMembersReportAccordionMount,
  #agentDashboard.agent-dashboard--stock-workspace #agentMemberAllReportTableMount,
  #agentDashboard.agent-dashboard--stock-workspace #agent3dMembersReportMount,
  #agentDashboard.agent-dashboard--stock-workspace #agent3dMemberAllReportMount,
  #agentDashboard.agent-dashboard--stock-workspace .admin-profile-week-lay-shell,
  #agentDashboard.agent-dashboard--stock-workspace #agentMainPage.sys2d-pan-canvas,
  #adminDashboard.admin-dashboard--stock-workspace .summary-page__grid-wrap,
  #adminDashboard.admin-dashboard--stock-workspace .agent-summary-page__wrap,
  #adminDashboard.admin-dashboard--stock-workspace .report-week-report-panel,
  #adminDashboard.admin-dashboard--stock-workspace .report-members-accordion-mount,
  #adminDashboard.admin-dashboard--stock-workspace .admin-agent-report-accordion-mount,
  #adminDashboard.admin-dashboard--stock-workspace .member-report-page,
  #adminDashboard.admin-dashboard--stock-workspace .agent-payment-table-mount,
  #adminDashboard.admin-dashboard--stock-workspace .agent-payment-table-wrap,
  #adminDashboard.admin-dashboard--stock-workspace .admin-agent-settings-table-wrap,
  #adminDashboard.admin-dashboard--stock-workspace .delete-data-card,
  #adminDashboard.admin-dashboard--stock-workspace .admin-payment-card,
  #adminDashboard.admin-dashboard--stock-workspace .agent-payment-card,
  #adminDashboard.admin-dashboard--stock-workspace .agent-mgmt-card,
  #agentDashboard.agent-dashboard--stock-workspace .summary-page__grid-wrap,
  #agentDashboard.agent-dashboard--stock-workspace .agent-summary-page__wrap,
  #agentDashboard.agent-dashboard--stock-workspace .report-week-report-panel,
  #agentDashboard.agent-dashboard--stock-workspace .report-members-accordion-mount,
  #agentDashboard.agent-dashboard--stock-workspace .admin-agent-report-accordion-mount,
  #agentDashboard.agent-dashboard--stock-workspace .member-report-page,
  #agentDashboard.agent-dashboard--stock-workspace .agent-payment-table-mount,
  #agentDashboard.agent-dashboard--stock-workspace .agent-payment-table-wrap,
  #agentDashboard.admin-dashboard--stock-workspace .agent-summary-grid-table,
  #agentDashboard.agent-dashboard--stock-workspace .agent-summary-grid-table {
    width: max(100%, var(--sys2d-workspace-canvas-min));
    min-width: var(--sys2d-workspace-canvas-min);
    max-width: none;
  }

  #adminMainBoardPage .main-board-aside,
  #agentMainBoardPage .main-board-aside,
  #adminMainBoardPage .main-board-main,
  #agentMainBoardPage .main-board-main,
  #adminMainBoardPage .main-board-side-sum,
  #agentMainBoardPage .main-board-side-sum,
  #adminMainBoard3dPage .sys3d-board-shell .main-board-aside,
  #agentMainBoard3dPage .sys3d-board-shell .main-board-aside,
  #adminMainBoard3dPage .sys3d-board-shell .main-board-main,
  #agentMainBoard3dPage .sys3d-board-shell .main-board-main,
  #adminMainBoard3dPage .sys3d-board-shell .main-board-side-sum,
  #agentMainBoard3dPage .sys3d-board-shell .main-board-side-sum {
    overflow: visible;
    min-height: 12rem;
    max-height: none;
  }

  #adminMainBoardPage .main-board-main,
  #agentMainBoardPage .main-board-main,
  #adminMainBoard3dPage .sys3d-board-shell .main-board-main,
  #agentMainBoard3dPage .sys3d-board-shell .main-board-main {
    min-width: var(--main-board-center-min);
  }

  #adminMainBoardPage .main-board-grid-host,
  #agentMainBoardPage .main-board-grid-host,
  #adminMainBoard3dPage .main-board-grid-host,
  #agentMainBoard3dPage .main-board-grid-host {
    container-type: normal;
    overflow: visible;
    min-width: var(--main-board-center-min);
    min-height: 20rem;
    max-height: none;
    flex: none;
  }

  #adminMainBoardPage .main-board-four-grid,
  #agentMainBoardPage .main-board-four-grid,
  #adminMainBoard3dPage .main-board-four-grid,
  #agentMainBoard3dPage .main-board-four-grid {
    grid-template-columns: var(--agent-mb-four-cols);
    gap: var(--agent-mb-four-gap);
    min-width: var(--main-board-center-min);
    min-height: 16rem;
    overflow: visible;
  }

  #adminMainBoardPage .agent-main-board-footer-grid,
  #agentMainBoardPage .agent-main-board-footer-grid,
  #adminMainBoard3dPage .agent-main-board-footer-grid,
  #agentMainBoard3dPage .agent-main-board-footer-grid {
    grid-template-columns: var(--agent-mb-four-cols);
    gap: var(--agent-mb-four-gap);
    min-width: var(--main-board-center-min);
    min-height: 0;
    overflow: visible;
  }

  #adminMainBoard3dPage .agent-main-board-footer-lead,
  #agentMainBoard3dPage .agent-main-board-footer-lead {
    grid-column: 1 / 4;
    grid-row: auto;
  }

  #adminMainBoard3dPage .agent-main-board-footer-block,
  #agentMainBoard3dPage .agent-main-board-footer-block {
    grid-column: 4;
    grid-row: auto;
  }

  #adminMainBoardPage .main-board-main > .agent-main-board-grand-sum-wrap,
  #agentMainBoardPage .main-board-main > .agent-main-board-grand-sum-wrap,
  #adminMainBoard3dPage .sys3d-board-main > .agent-main-board-grand-sum-wrap,
  #agentMainBoard3dPage .sys3d-board-main > .agent-main-board-grand-sum-wrap {
    width: 100%;
    min-width: var(--main-board-center-min);
    height: auto;
    max-height: none;
  }

  #adminMainBoardPage .agent-main-board-footer-lead,
  #agentMainBoardPage .agent-main-board-footer-lead {
    grid-column: 1 / 4;
  }

  #adminMainBoardPage .agent-main-board-footer-block,
  #agentMainBoardPage .agent-main-board-footer-block {
    grid-column: 4;
  }

  #adminMainBoard3dPage .sys3d-board-shell .main-board-aside,
  #agentMainBoard3dPage .sys3d-board-shell .main-board-aside {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }

  /* UX-10 — phone: pan to full Login | % | Sold column (shell must not clip) */
  #adminDashboard:has(#adminMainBoardPage:not(.hidden)) .legacy-content,
  #adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) .legacy-content,
  #agentDashboard:has(#agentMainBoardPage:not(.hidden)) .legacy-content,
  #agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) .legacy-content {
    overflow-x: auto !important;
    overflow-y: auto;
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }

  body.app-role-admin.app-logged-in #adminDashboard:has(#adminMainBoardPage:not(.hidden)) #adminMainBoardPage,
  body.app-role-admin.app-logged-in #adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) #adminMainBoard3dPage,
  body.app-role-agent.app-logged-in #agentDashboard:has(#agentMainBoardPage:not(.hidden)) #agentMainBoardPage,
  body.app-role-agent.app-logged-in #agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) #agentMainBoard3dPage {
    display: block;
    width: max(100%, var(--main-board-canvas-min));
    min-width: var(--main-board-canvas-min);
    max-width: none;
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    scroll-padding-inline-end: max(0.5rem, env(safe-area-inset-right, 0px));
  }

  body.app-role-admin.app-logged-in #adminDashboard:has(#adminMainBoardPage:not(.hidden)) #adminMainBoardPage .main-board-shell,
  body.app-role-agent.app-logged-in #agentDashboard:has(#agentMainBoardPage:not(.hidden)) #agentMainBoardPage .main-board-shell {
    overflow: visible !important;
    width: 100%;
    min-width: var(--main-board-canvas-min);
    --main-board-shell-cols: minmax(9.5rem, 11rem) minmax(var(--main-board-center-min), 1fr) minmax(5.1rem, 6.2rem);
  }

  body.app-role-admin.app-logged-in #adminDashboard:has(#adminMainBoard3dPage:not(.hidden)) #adminMainBoard3dPage .sys3d-board-shell.main-board-shell,
  body.app-role-agent.app-logged-in #agentDashboard:has(#agentMainBoard3dPage:not(.hidden)) #agentMainBoard3dPage .sys3d-board-shell.main-board-shell {
    overflow: visible !important;
    width: 100%;
    min-width: var(--main-board-canvas-min);
    --main-board-shell-cols: minmax(9.5rem, 11rem) minmax(var(--main-board-center-min), 1fr) minmax(5.1rem, 6.2rem);
  }

  #adminMainBoardPage .main-board-side-sum,
  #agentMainBoardPage .main-board-side-sum,
  #adminMainBoardPage .main-board-side-sum--sold-pct,
  #agentMainBoardPage .main-board-side-sum--sold-pct {
    overflow-x: auto;
    overflow-y: auto;
    min-width: 5.1rem;
    max-width: 6.2rem;
    flex-shrink: 0;
  }

  #adminMainBoardPage .main-board-side-sum--sold-pct .main-board-side-sum__scroll,
  #agentMainBoardPage .main-board-side-sum--sold-pct .main-board-side-sum__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Member: Menu/records scroll; 2D/3D intake locks viewport (feed scrolls inside, composer fixed). */
body.app-role-member.app-logged-in {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: auto;
  min-height: 100dvh;
  max-height: none;
  overscroll-behavior-y: auto;
  scroll-padding-bottom: 0;
}

body.app-role-member.app-logged-in:not(.member-page--menu):not(.member-page--records) {
  overflow: hidden;
  height: 100dvh;
  height: 100svh;
  max-height: 100dvh;
  max-height: 100svh;
  overscroll-behavior: none;
}

body.app-role-member.member-page--menu .member-menu-week-lay__wrap {
  touch-action: pan-x pan-y;
}

body.app-role-member.app-logged-in .app-shell,
body.app-role-member.app-logged-in .container {
  display: block;
  flex: none;
  overflow: visible;
  min-height: auto;
  height: auto;
  max-height: none;
}

body.app-role-member #memberDashboard,
body.app-role-member .member-dashboard-layout {
  display: flex;
  flex-direction: column;
  flex: none;
  min-height: auto;
  height: auto;
  overflow: visible;
}

body.app-role-member .member-dashboard-layout {
  gap: 0.22rem;
}

body.app-role-member.app-logged-in:not(.member-page--menu):not(.member-page--records) #memberDashboard {
  height: 100dvh;
  height: 100svh;
  max-height: 100dvh;
  max-height: 100svh;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

body.app-role-member.app-logged-in:not(.member-page--menu):not(.member-page--records) .member-dashboard-layout {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
  box-sizing: border-box;
}

body.app-role-member.app-logged-in:not(.member-page--menu):not(.member-page--records) .member-page-stack {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* UX-07: Member 2D/3D on phone/touch — stable viewport shell + browser pinch zoom in/out */
@media (max-width: 1023px), ((hover: none) and (pointer: coarse)) {
  html:has(body.app-role-member.app-logged-in) {
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.app-role-member.app-logged-in {
    touch-action: pan-x pan-y pinch-zoom;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.app-role-member.app-logged-in:not(.member-page--menu):not(.member-page--records) {
    height: var(--sys2d-vv-height, var(--member-vv-height, 100svh));
    max-height: var(--sys2d-vv-height, var(--member-vv-height, 100svh));
    min-height: var(--sys2d-vv-height, var(--member-vv-height, 100svh));
    overflow: hidden;
  }

  body.app-role-member.app-logged-in:not(.member-page--menu):not(.member-page--records) #memberDashboard {
    height: var(--sys2d-vv-height, var(--member-vv-height, 100svh));
    max-height: var(--sys2d-vv-height, var(--member-vv-height, 100svh));
  }

  body.app-role-member.app-logged-in .app-shell,
  body.app-role-member.app-logged-in .container,
  body.app-role-member.app-logged-in #memberDashboard,
  body.app-role-member.app-logged-in .member-dashboard-layout,
  body.app-role-member.app-logged-in .member-page-stack,
  body.app-role-member.app-logged-in .member-intake-root,
  body.app-role-member.app-logged-in .member-intake-host {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  body.app-role-member.member-page--menu,
  body.app-role-member.member-page--records {
    height: auto;
    min-height: 100svh;
    max-height: none;
    overflow-y: auto;
  }

  body.app-role-member .member-chat-feed {
    touch-action: pan-y pinch-zoom;
  }

  body.app-role-member .member-kb-key,
  body.app-role-member .member-composer-send,
  body.app-role-member .member-page-nav__seg,
  body.app-role-member .member-page-nav__menu,
  body.app-role-member .member-composer-amt-hit {
    touch-action: manipulation;
  }
}

/* UX-07d: force member mobile fit even under desktop-mode viewport quirks. */
body.sys2d-mobile-device.app-role-member.app-logged-in {
  touch-action: pan-x pan-y pinch-zoom;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body.sys2d-mobile-device.app-role-member.app-logged-in .app-shell,
body.sys2d-mobile-device.app-role-member.app-logged-in .container,
body.sys2d-mobile-device.app-role-member.app-logged-in #memberDashboard,
body.sys2d-mobile-device.app-role-member.app-logged-in .member-dashboard-layout,
body.sys2d-mobile-device.app-role-member.app-logged-in .member-page-stack,
body.sys2d-mobile-device.app-role-member.app-logged-in .member-intake-root,
body.sys2d-mobile-device.app-role-member.app-logged-in .member-intake-host {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden;
  box-sizing: border-box;
}

body.sys2d-mobile-device.app-role-member.app-logged-in:not(.member-page--menu):not(.member-page--records) {
  height: var(--sys2d-vv-height, var(--member-vv-height, 100svh));
  max-height: var(--sys2d-vv-height, var(--member-vv-height, 100svh));
  min-height: var(--sys2d-vv-height, var(--member-vv-height, 100svh));
  overflow: hidden;
}

body.sys2d-mobile-device.app-role-member.app-logged-in:not(.member-page--menu):not(.member-page--records) #memberDashboard {
  height: var(--sys2d-vv-height, var(--member-vv-height, 100svh));
  max-height: var(--sys2d-vv-height, var(--member-vv-height, 100svh));
}

/* UX-21b: browsers that still render member page tiny get adaptive zoom-fit at dashboard level. */
body.sys2d-mobile-device.sys2d-member-force-fit.app-role-member.app-logged-in .app-shell {
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.sys2d-mobile-device.sys2d-member-force-fit.app-role-member.app-logged-in #memberDashboard,
body.sys2d-mobile-device.sys2d-member-force-fit.app-role-member.app-logged-in .member-page-stack,
body.sys2d-mobile-device.sys2d-member-force-fit.app-role-member.app-logged-in .member-page-pane,
body.sys2d-mobile-device.sys2d-member-force-fit.app-role-member.app-logged-in .member-dashboard-layout,
body.sys2d-mobile-device.sys2d-member-force-fit.app-role-member.app-logged-in .member-intake-host,
body.sys2d-mobile-device.sys2d-member-force-fit.app-role-member.app-logged-in .member-intake-root {
  width: calc(100vw / var(--sys2d-member-force-zoom, 1)) !important;
  max-width: calc(100vw / var(--sys2d-member-force-zoom, 1)) !important;
  min-width: 0 !important;
}

body.sys2d-mobile-device.sys2d-member-force-fit.app-role-member.app-logged-in #memberDashboard {
  zoom: var(--sys2d-member-force-zoom, 1);
}

/* UX-07b: Agent mobile — screen fit + pinch zoom (parity with member UX-07) */
@media (max-width: 1023px), ((hover: none) and (pointer: coarse)) {
  html:has(body.app-role-agent.app-logged-in) {
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.app-role-agent.app-logged-in .app-shell,
  body.app-role-agent.app-logged-in .container,
  body.app-role-agent.app-logged-in #agentDashboard,
  body.app-role-agent.app-logged-in .legacy-dashboard--agent,
  body.app-role-agent.app-logged-in .legacy-body--agent,
  body.app-role-agent.app-logged-in .legacy-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.app-role-agent.app-logged-in .legacy-content,
  body.app-role-agent.app-logged-in .table-wrap,
  body.app-role-agent.app-logged-in .main-board-shell,
  body.app-role-agent.app-logged-in .main-board-grid-host,
  body.app-role-agent.app-logged-in:has(#agentDashboard.agent-dashboard--stock-workspace) .admin-page:not(.hidden),
  body.app-role-agent.app-logged-in:has(#agentDashboard.agent-dashboard--stock-workspace) .summary-page__grid-wrap,
  body.app-role-agent.app-logged-in:has(#agentDashboard.agent-dashboard--stock-workspace) .agent-summary-page__wrap,
  body.app-role-agent.app-logged-in:has(#agentDashboard.agent-dashboard--stock-workspace) .report-week-report-panel,
  body.app-role-agent.app-logged-in:has(#agentDashboard.agent-dashboard--stock-workspace) .period-page-stack {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
  }

  body.app-role-agent.app-logged-in .agent-topbar-root-tab,
  body.app-role-agent.app-logged-in .legacy-menu-item,
  body.app-role-agent.app-logged-in .legacy-submenu-item,
  body.app-role-agent.app-logged-in .legacy-signout,
  body.app-role-agent.app-logged-in .btn {
    touch-action: manipulation;
  }

  body.app-role-agent:is(
      :has(#agentMainBoardPage:not(.hidden)),
      :has(#agentMainBoard3dPage:not(.hidden))
    ) {
    min-height: var(--sys2d-vv-height, 100svh);
  }
}

/* UX-07c: Admin mobile — screen fit + pinch zoom (parity with member UX-07 / agent UX-07b) */
@media (max-width: 1023px), ((hover: none) and (pointer: coarse)) {
  html:has(body.app-role-admin.app-logged-in) {
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.app-role-admin.app-logged-in .app-shell,
  body.app-role-admin.app-logged-in .container,
  body.app-role-admin.app-logged-in #adminDashboard,
  body.app-role-admin.app-logged-in .legacy-dashboard--admin,
  body.app-role-admin.app-logged-in .legacy-body--admin,
  body.app-role-admin.app-logged-in .legacy-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.app-role-admin.app-logged-in .legacy-content,
  body.app-role-admin.app-logged-in .table-wrap,
  body.app-role-admin.app-logged-in .main-board-shell,
  body.app-role-admin.app-logged-in .main-board-grid-host,
  body.app-role-admin.app-logged-in .admin-profile-week-lay__wrap,
  body.app-role-admin.app-logged-in:has(#adminDashboard.admin-dashboard--stock-workspace) .admin-page:not(.hidden),
  body.app-role-admin.app-logged-in:has(#adminDashboard.admin-dashboard--stock-workspace) .summary-page__grid-wrap,
  body.app-role-admin.app-logged-in:has(#adminDashboard.admin-dashboard--stock-workspace) .agent-summary-page__wrap,
  body.app-role-admin.app-logged-in:has(#adminDashboard.admin-dashboard--stock-workspace) .report-week-report-panel,
  body.app-role-admin.app-logged-in:has(#adminDashboard.admin-dashboard--stock-workspace) .period-page-stack {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
  }

  body.app-role-admin.app-logged-in .admin-topbar-root-tab,
  body.app-role-admin.app-logged-in .legacy-menu-item,
  body.app-role-admin.app-logged-in .legacy-submenu-item,
  body.app-role-admin.app-logged-in .legacy-signout,
  body.app-role-admin.app-logged-in .btn {
    touch-action: manipulation;
  }

  body.app-role-admin:is(
      :has(#adminMainBoardPage:not(.hidden)),
      :has(#adminMainBoard3dPage:not(.hidden))
    ) {
    min-height: var(--sys2d-vv-height, 100svh);
  }

  /* UX-08: 2D + 3D MAIN + stock workspace — desktop-width canvas; pinch zoom in/out */
  body.app-role-admin.app-logged-in:is(
      :has(#adminMainBoardPage:not(.hidden)),
      :has(#adminMainBoard3dPage:not(.hidden)),
      :has(#adminDashboard.admin-dashboard--stock-workspace)
    ),
  body.app-role-agent.app-logged-in:is(
      :has(#agentMainBoardPage:not(.hidden)),
      :has(#agentMainBoard3dPage:not(.hidden)),
      :has(#agentDashboard.agent-dashboard--stock-workspace)
    ) {
    overflow-x: auto;
    overflow-y: auto;
    touch-action: pan-x pan-y pinch-zoom;
  }

  body.app-role-admin.app-logged-in:is(:has(#adminMainBoardPage:not(.hidden))),
  body.app-role-admin.app-logged-in:is(:has(#adminMainBoard3dPage:not(.hidden))),
  body.app-role-agent.app-logged-in:is(:has(#agentMainBoardPage:not(.hidden))),
  body.app-role-agent.app-logged-in:is(:has(#agentMainBoard3dPage:not(.hidden))) {
    overflow-x: auto;
    overflow-y: auto;
    touch-action: pan-x pan-y pinch-zoom;
  }

  body.app-role-admin.app-logged-in:is(:has(#adminDashboard[data-admin-root-view="dashboard"])) .legacy-content,
  body.app-role-admin.app-logged-in:is(:has(#adminDashboard[data-admin-root-view="dashboard"])) #adminMainPage,
  body.app-role-agent.app-logged-in:is(:has(#agentDashboard[data-agent-root-view="dashboard"])) .legacy-content,
  body.app-role-agent.app-logged-in:is(:has(#agentDashboard[data-agent-root-view="dashboard"])) #agentMainPage,
  body.app-role-admin.app-logged-in:is(:has(#adminDashboard.admin-dashboard--stock-workspace)) .legacy-content,
  body.app-role-admin.app-logged-in:is(:has(#adminDashboard.admin-dashboard--stock-workspace)) .admin-page:not(.hidden),
  body.app-role-agent.app-logged-in:is(:has(#agentDashboard.agent-dashboard--stock-workspace)) .legacy-content,
  body.app-role-agent.app-logged-in:is(:has(#agentDashboard.agent-dashboard--stock-workspace)) .admin-page:not(.hidden),
  body.app-role-admin.app-logged-in:is(:has(#adminMainBoardPage:not(.hidden))) .legacy-content,
  body.app-role-admin.app-logged-in:is(:has(#adminMainBoard3dPage:not(.hidden))) .legacy-content,
  body.app-role-agent.app-logged-in:is(:has(#agentMainBoardPage:not(.hidden))) .legacy-content,
  body.app-role-agent.app-logged-in:is(:has(#agentMainBoard3dPage:not(.hidden))) .legacy-content {
    overflow-x: auto;
    overflow-y: auto;
    max-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
  }

  /* UX-10z — stock tables/grids: pan inside page when zoomed (all directions) */
  body.sys2d-stock-window-canvas.app-role-admin.app-logged-in .summary-page__grid-wrap,
  body.sys2d-stock-window-canvas.app-role-admin.app-logged-in .agent-summary-page__wrap,
  body.sys2d-stock-window-canvas.app-role-admin.app-logged-in .report-week-report-panel,
  body.sys2d-stock-window-canvas.app-role-admin.app-logged-in .report-members-accordion-mount,
  body.sys2d-stock-window-canvas.app-role-admin.app-logged-in .admin-agent-report-accordion-mount,
  body.sys2d-stock-window-canvas.app-role-admin.app-logged-in .admin-agent-report-user-list,
  body.sys2d-stock-window-canvas.app-role-admin.app-logged-in .agent-payment-table-mount,
  body.sys2d-stock-window-canvas.app-role-admin.app-logged-in .period-page-stack,
  body.sys2d-stock-window-canvas.app-role-agent.app-logged-in .summary-page__grid-wrap,
  body.sys2d-stock-window-canvas.app-role-agent.app-logged-in .agent-summary-page__wrap,
  body.sys2d-stock-window-canvas.app-role-agent.app-logged-in .report-week-report-panel,
  body.sys2d-stock-window-canvas.app-role-agent.app-logged-in .report-members-accordion-mount,
  body.sys2d-stock-window-canvas.app-role-agent.app-logged-in .admin-agent-report-accordion-mount,
  body.sys2d-stock-window-canvas.app-role-agent.app-logged-in .admin-agent-report-user-list,
  body.sys2d-stock-window-canvas.app-role-agent.app-logged-in .agent-payment-table-mount,
  body.sys2d-stock-window-canvas.app-role-agent.app-logged-in .period-page-stack {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
  }

  body.app-role-admin.app-logged-in:is(:has(#adminMainBoardPage:not(.hidden))) #adminMainBoardPage,
  body.app-role-admin.app-logged-in:is(:has(#adminMainBoard3dPage:not(.hidden))) #adminMainBoard3dPage,
  body.app-role-agent.app-logged-in:is(:has(#agentMainBoardPage:not(.hidden))) #agentMainBoardPage,
  body.app-role-agent.app-logged-in:is(:has(#agentMainBoard3dPage:not(.hidden))) #agentMainBoard3dPage {
    overflow-x: auto;
    overflow-y: auto;
    max-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
  }

  .main-board-standalone-body {
    height: auto;
    min-height: var(--sys2d-vv-height, 100svh);
    overflow: auto;
    touch-action: pan-x pan-y pinch-zoom;
  }

  .main-board-standalone-body .app-shell.main-board-standalone-wrap,
  .main-board-standalone-body .main-board-standalone-main.container,
  .main-board-standalone-body #adminMainBoardPage {
    overflow: auto;
    height: auto;
    max-height: none;
    min-height: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-board-standalone-body .main-board-shell {
    min-width: var(--sys2d-desktop-canvas-min);
    width: max(100%, var(--sys2d-desktop-canvas-min));
    height: auto;
    min-height: min(85vh, 40rem);
    max-height: none;
    overflow: visible;
    grid-template-columns: minmax(10.5rem, 12.5rem) minmax(var(--main-board-center-min, 42.54rem), 1fr);
  }
}

/* UX-04c — admin/agent phone: html + body must allow overflow-x auto for pinch zoom IN (iOS) */
@media (max-width: 1023px), ((hover: none) and (pointer: coarse)) {
  html:has(body.app-role-admin.app-logged-in),
  html:has(body.app-role-agent.app-logged-in) {
    overflow-x: auto;
    overflow-y: auto;
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.app-logged-in.app-role-admin,
  body.app-logged-in.app-role-agent {
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: auto;
    max-width: none;
    touch-action: pan-x pan-y pinch-zoom;
  }
}

/* Member: compact header rows (2D|3D nav + name/date/period line) */
body.app-role-member.app-logged-in .app-shell {
  padding-top: max(0.2rem, env(safe-area-inset-top, 0px));
  padding-right: max(0.3rem, env(safe-area-inset-right, 0px));
  padding-bottom: max(0.3rem, env(safe-area-inset-bottom, 0px));
  padding-left: max(0.3rem, env(safe-area-inset-left, 0px));
}

body.app-role-member .member-page-nav.card,
body.app-role-member .member-meta-strip.card {
  padding: 0.26rem 0.42rem;
  border-radius: 10px;
}

body.app-role-member .member-page-nav {
  gap: 0.32rem 0.48rem;
}

body.app-role-member .member-page-nav__seg {
  min-height: 2rem;
  min-width: 3.1rem;
  padding: 0.28rem 1.15rem;
  font-size: 0.82rem;
}

body.app-role-member .member-page-nav__menu {
  min-height: 1.72rem;
  padding: 0.24rem 0.48rem;
  font-size: 0.76rem;
}

body.app-role-member .member-page-nav__menu-icon {
  font-size: 0.92rem;
}

body.app-role-member .member-meta-strip {
  grid-template-columns: minmax(0, auto) 1fr auto;
  column-gap: 0.35rem 0.45rem;
  padding: 0.24rem 0.42rem;
}

body.app-role-member .member-meta-strip__user {
  font-size: 0.78rem;
  line-height: 1.15;
}

body.app-role-member .member-meta-strip__date {
  font-size: 0.72rem;
  line-height: 1.15;
}

body.app-role-member .member-meta-strip__period.member-period-status-chip {
  padding: 0.14rem 0.32rem;
  font-size: clamp(0.52rem, 1.45vw, 0.6rem);
  line-height: 1.12;
  max-width: 8.5rem;
}

body.app-role-member .member-page-nav__actions {
  gap: 0.32rem;
}

body.app-role-member .member-page-nav__logout {
  padding: 0.1rem 0.4rem;
  font-size: 0.66rem;
  min-height: 1.48rem;
  line-height: 1.05;
}

body.app-role-member .member-page-stack {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}

body.app-role-member .member-page-pane.is-active {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.app-role-member .member-page-pane--menu.is-active,
body.app-role-member .member-page-pane--records.is-active {
  flex: none;
  min-height: auto;
  overflow: visible;
  display: block;
}

body.app-role-member .member-page-pane--intake .member-input-card--viber {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.app-role-member .member-dashboard-layout {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

body.app-role-member .member-intake-host,
body.app-role-member .member-intake-root--viber {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.app-role-member .member-input-card--viber {
  flex: 1 1 auto;
  min-height: 0;
  z-index: 4;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Composer+keyboard tethered below feed (not fixed) — page bottom meets keyboard top */
body.app-role-member .member-composer-dock {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.06rem;
  padding-bottom: max(0.06rem, env(safe-area-inset-bottom, 0px));
  border-radius: 0;
  box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.28);
  overflow-x: hidden;
  box-sizing: border-box;
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
  gap: 0;
  z-index: 4;
}

body.app-role-member .member-composer-dock > #memberComposerInputBlock {
  margin-left: max(0.45rem, env(safe-area-inset-left, 0px));
  margin-right: max(0.45rem, env(safe-area-inset-right, 0px));
  margin-top: 0.06rem;
  margin-bottom: 0.08rem;
}

/* Member: no max-height animation on keyboard — avoids layout thrash with fixed dock + ResizeObserver. */
body.app-role-member .member-keyboard-panel {
  transition: none;
}

body.app-role-member .member-composer-dock.member-composer-dock--kb-collapsed .member-keyboard-panel {
  display: none !important;
}

body.app-role-member .member-intake-maincol {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  box-sizing: border-box;
}

body.app-role-member .member-intake-body--viber > .member-composer-dock {
  flex: 0 0 auto;
}

body.app-role-member .member-composer-send,
body.app-role-member .member-input-bar-row--pill {
  touch-action: manipulation;
}

body.app-role-member .member-profile-details summary {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
}

body.app-role-member.member-page--3d .member-3d-intake-host,
body.app-role-member.member-page--3d .member-intake-root--3d {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

body.app-role-member.member-page--3d #member3dComposerDock {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  background: linear-gradient(135deg, #7889ed 0%, #8f6bb5 100%) !important;
  box-shadow: none !important;
  z-index: 4;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* 3D intake: keyboard flush to viewport bottom (safe-area on numpad only). */
body.app-role-member.member-page--3d:not(.member-page--menu):not(.member-page--records) .app-shell {
  padding-bottom: 0;
}

body.app-role-member.member-page--3d #member3dComposerDock.member-composer-dock {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.06rem;
}

body.app-role-member.member-page--3d #member3dComposerDock .member-keyboard-panel {
  margin-bottom: 0;
  padding-bottom: 0;
}

body.app-role-member.member-page--3d #member3dNumPad.member-kb-numpad--3d {
  padding-top: 0.06rem;
  padding-right: max(0.22rem, env(safe-area-inset-right, 0px));
  padding-bottom: calc(0.1rem + env(safe-area-inset-bottom, 0px));
  padding-left: max(0.22rem, env(safe-area-inset-left, 0px));
  gap: 0.18rem;
}

body.app-role-member.member-page--3d #memberPagePane3d {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

body.app-role-member.member-page--3d .member-intake-maincol {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 0;
}

body.app-role-member.member-page--3d .member-intake-body--viber .member-intake-maincol {
  gap: 0;
}

body.app-role-member.member-page--3d .member-chat-feed--3d {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.45rem;
  scroll-padding-bottom: 0.45rem;
}

body.app-role-member:not(.member-page--3d):not(.member-page--menu):not(.member-page--records)
  .member-page-pane--intake.is-active
  .member-chat-feed:not(.member-chat-feed--3d) {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* UX-09u — 3D composer bar grid parity with 2D (UX-08e) */
body.app-role-member.member-page--3d #member3dInputBarRow.member-input-bar-row--pill {
  display: grid;
  grid-template-columns: minmax(2.5rem, 28%) 1fr 5.4rem;
  column-gap: 0.4rem;
  align-items: end;
  min-height: 2.6rem;
  width: 100%;
  box-sizing: border-box;
}

body.app-role-member.member-page--3d #member3dComposerDock > #member3dComposerInputBlock {
  margin-left: max(0.45rem, env(safe-area-inset-left, 0px));
  margin-right: max(0.45rem, env(safe-area-inset-right, 0px));
  margin-top: 0.06rem;
  margin-bottom: 0.08rem;
}

body.app-role-member.member-page--3d #member3dFldNumber.member-na-number {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin-inline-end: 0.1rem;
  padding: 0.08rem 0.24rem 0.08rem;
}

body.app-role-member.member-page--3d #member3dFldNumber .member-na-value-num-pair {
  gap: 0.12rem;
  justify-content: flex-end;
  text-align: right;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
}

#member3dAmtSlot.member-composer-amt-slot {
  position: relative;
  display: flex;
  align-items: stretch;
  align-self: end;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 2.6rem;
  max-height: 2.6rem;
  height: 2.6rem;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 12;
  pointer-events: auto;
  touch-action: manipulation;
  isolation: isolate;
}

#member3dAmtSlot .member-na-amount {
  pointer-events: none;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

#member3dAmtSlot .member-composer-amt-hit:focus-visible {
  outline: none;
}

#member3dAmtSlot .member-na-amount.member-composer-field--focus,
#member3dAmtSlot:has(.member-composer-amt-hit:focus) .member-na-amount:not(.member-na-amount--locked) {
  border-color: #64748b;
  box-shadow: 0 0 0 1px rgba(100, 116, 139, 0.35);
}

body.app-role-member.member-page--3d #member3dSendBtn.member-composer-send {
  width: 5.4rem;
  max-width: 5.4rem;
  min-height: 2.6rem;
  height: 2.6rem;
  justify-self: end;
  align-self: end;
  flex: none;
  padding: 0.2rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
}

body.app-role-member.member-page--3d #member3dSendBtn .member-composer-send__icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

body.app-role-member.member-page--3d #member3dSendBtn .member-composer-send__preview {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.app-role-member.member-page--3d .member-kb-digit-grid--3d {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, minmax(2.2rem, auto));
  gap: 0.18rem;
}

body.app-role-member.member-page--3d .member-kb-digit-grid--3d > .member-kb-key {
  min-width: 0;
  min-height: 2.2rem;
}

body.app-role-member.member-page--3d .member-kb-digit-grid--3d .member-kb-key--enter-span {
  grid-column: 4;
  grid-row: 3 / span 2;
  min-height: 100%;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3D tri/R ready colors — composer dock uses glass only (**UX-09x**) */
body.app-role-member.member-page--3d .member-kb-key--tri.is-selected.member-kb-dim {
  opacity: 0.45;
}

body.app-role-member.member-page--3d .member-na-digit-slot--entry-active {
  box-shadow: 0 0 0 2px #2563eb;
  border-radius: 0.2rem;
}

body.app-role-member.member-page--3d .member-na-value--entry-active {
  box-shadow: inset 0 -2px 0 #2563eb;
}

body.app-role-member.member-page--3d .member-na-number--tri-dim {
  border-color: #e2e8f0;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.12);
  opacity: 0.72;
}

body.app-role-member.member-page--3d .member-na-number--tri-dim .member-na-label {
  color: #94a3b8;
}

body.app-role-member.member-page--3d #member3dAmtSlot.member-composer-amt-slot--tri-focus {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.45);
  border-radius: 0.45rem;
}

body.app-role-member.member-page--3d #member3dAmtSlot.member-composer-amt-slot--tri-focus .member-na-amount {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35);
}

body.app-role-member.member-page--3d .member-3d-comment-input {
  min-width: 0;
  font-size: 0.85rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.35rem;
}

body.app-role-member.member-page--3d .member-composer-bar-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 0.5rem;
  width: 100%;
}

body.app-role-member.member-page--3d .member-composer-bar-meta .member-input-footer-msg,
body.app-role-member.member-page--3d .member-composer-bar-meta .member-composer-status-msg {
  grid-column: 1;
  justify-self: start;
}

body.app-role-member.member-page--3d .member-composer-bar-meta #member3dPeriodTotal {
  grid-column: 2;
  justify-self: end;
  margin-left: auto;
  margin-inline-end: 3.2rem;
  padding-inline-end: 0.7rem;
  text-align: right;
}

/* 3D feed: grid columns = max content width per column (all rows share one grid) */
body.app-role-member.member-page--3d .member-chat-grid--3d.member-chat-grid--recall {
  --member-feed-recall-col: minmax(2rem, 3.5rem);
  grid-template-columns: var(--member-feed-recall-col) max-content var(--member-feed-amt-col) max-content max-content minmax(var(--member-feed-time-col-min), max-content) max-content;
}

body.app-role-member.member-page--3d .member-chat-grid--3d.member-chat-grid--recall .member-chat-cell--recall {
  text-align: start;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5b21b6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-inline-end: 0.35rem;
}

body.app-role-member.member-page--3d .member-chat-grid--3d {
  --member-feed-amt-col: 7.5ch;
  --member-feed-time-col-min: 12ch;
  --member-feed-gap-num-amt: 0.15rem;
  --member-feed-gap-amt-com: 0.85rem;
  --member-feed-gap-com-period: 0.85rem;
  --member-feed-gap-period-time: 0.65rem;
  --member-feed-gap-time-ok: 0.65rem;
  --member-feed-ok-pad-end: 0.65rem;
  display: grid;
  grid-template-columns: max-content var(--member-feed-amt-col) max-content max-content minmax(var(--member-feed-time-col-min), max-content) max-content;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin-inline-start: auto;
  margin-inline-end: 0;
  padding-inline-end: max(0.35rem, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

body.app-role-member.member-page--3d .member-chat-grid--3d .member-feed-line--3d {
  display: contents;
}

body.app-role-member.member-page--3d .member-chat-grid--3d .member-feed-line--3d:last-child .member-chat-cell {
  border-bottom: none;
}

body.app-role-member.member-page--3d .member-chat-grid--3d .member-chat-cell {
  width: max-content;
  max-width: 100%;
  min-width: min-content;
  box-sizing: border-box;
  border-bottom: 1px solid #e5e7eb;
  padding-block: 0.22rem;
  white-space: nowrap;
  user-select: text;
  -webkit-user-select: text;
}

body.app-role-member.member-page--3d .member-chat-grid--3d .member-chat-cell--num {
  width: 100%;
  justify-self: stretch;
  text-align: end;
  color: var(--text);
}

body.app-role-member.member-page--3d .member-chat-grid--3d .member-chat-cell--amt {
  width: 100%;
  justify-self: stretch;
  text-align: end;
  color: var(--text);
  padding-inline-start: var(--member-feed-gap-num-amt);
  box-sizing: border-box;
}

body.app-role-member.member-page--3d .member-chat-grid--3d .member-chat-cell--com {
  width: 100%;
  justify-self: stretch;
  text-align: end;
  font-family: var(--font-myanmar);
  padding-inline-start: var(--member-feed-gap-amt-com);
}

body.app-role-member.member-page--3d .member-chat-grid--3d .member-chat-cell--period {
  width: 100%;
  justify-self: stretch;
  text-align: start;
  font-size: 0.75rem;
  color: #64748b;
  padding-inline-start: var(--member-feed-gap-com-period);
}

body.app-role-member.member-page--3d .member-chat-grid--3d .member-chat-cell--time {
  width: 100%;
  justify-self: stretch;
  text-align: start;
  color: var(--text);
  padding-inline-start: var(--member-feed-gap-period-time);
}

body.app-role-member.member-page--3d .member-chat-grid--3d .member-chat-cell--ok {
  text-align: start;
  font-weight: 700;
  overflow: visible;
  text-overflow: clip;
  padding-inline-start: var(--member-feed-gap-time-ok);
  padding-inline-end: var(--member-feed-ok-pad-end);
}

body.app-role-member .member-intake-body--viber .member-intake-maincol {
  gap: 0;
}

body.app-role-member .member-intake-body--viber .member-chat-feed,
body.app-role-member .member-chat-feed {
  flex: 1 1 auto;
  min-height: 8rem;
  max-height: var(--member-feed-scroll-max, 40vh);
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  position: relative;
  z-index: 1;
  touch-action: pan-y;
  overscroll-behavior: contain;
  scroll-padding-bottom: 0.35rem;
}

/* 2D feed: allow horizontal pan (3D parity) — do not squash max-content grid */
body.app-role-member:not(.member-page--3d) .member-intake-body--viber .member-chat-feed,
body.app-role-member:not(.member-page--3d) .member-chat-feed {
  overflow-x: auto;
  touch-action: pan-y pan-x;
  overscroll-behavior-x: contain;
}

/* Member keyboard: no inner scrollbar — sheet grows within a taller cap; keys stay usable */
body.app-role-member .member-keyboard-panel {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

body.app-role-member .member-composer--keyboard-open .member-keyboard-panel:not(.member-keyboard-panel--collapsed) {
  max-height: min(50dvh, 470px);
  overflow: hidden;
  overflow-x: hidden;
  padding-top: 0;
  margin-top: 0;
}

body.app-role-member .member-kb-comment-rows {
  gap: 0.28rem;
}

body.app-role-member .member-kb-numpad {
  width: 100%;
  max-width: none;
  margin: 0;
  border-left: none;
  border-right: none;
  border-radius: 0;
  padding: 0.38rem max(0.35rem, env(safe-area-inset-left, 0px)) calc(0.28rem + env(safe-area-inset-bottom, 0px))
    max(0.35rem, env(safe-area-inset-right, 0px));
  gap: 0.28rem;
  box-sizing: border-box;
}

body.app-role-member .member-composer--keyboard-open .member-composer-dock {
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
}

body.app-role-member:not(.member-page--3d) .member-composer--keyboard-open .member-composer-dock {
  background: linear-gradient(135deg, #7889ed 0%, #8f6bb5 100%) !important;
  box-shadow: none !important;
}

body.app-role-member.member-page--3d .member-composer--keyboard-open .member-composer-dock,
body.app-role-member.member-page--3d .member-composer--keyboard-open #member3dComposerDock {
  background: linear-gradient(135deg, #7889ed 0%, #8f6bb5 100%) !important;
  box-shadow: none !important;
}

/* Custom keyboard open: dock fixed at bottom — page/header must not scroll up. */
html.member-keyboard-scroll-lock,
html.member-keyboard-scroll-lock body {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-x pan-y pinch-zoom;
}

body.app-role-member .member-composer-dock.member-composer--keyboard-open,
body.app-role-member #member3dComposerDock.member-composer--keyboard-open {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  z-index: 100;
  box-sizing: border-box;
}

/* Reserve in-flow space while dock is position:fixed (feed height stays stable). */
body.app-role-member .member-intake-body--viber.member-intake-body--keyboard-open::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: var(--member-dock-visual-h, 12rem);
  pointer-events: none;
}

@media (max-width: 540px) {
  body.app-role-member:not(.member-page--3d) #memberSendBtn.member-composer-send {
    width: 5.4rem;
    height: 2.6rem;
    min-width: 5.4rem;
    min-height: 2.6rem;
  }

  body.app-role-member.member-page--3d #member3dSendBtn.member-composer-send {
    width: 5.4rem;
    height: 2.6rem;
    min-width: 5.4rem;
    min-height: 2.6rem;
  }

  body.app-role-member .member-composer-send__icon {
    width: 1.08rem;
    height: 1.08rem;
    margin-inline-start: 0.12rem;
    transform: translateX(0.05rem);
  }

  body.app-role-member .member-kb-key--enter {
    min-height: 2.85rem;
  }

  body.app-role-member .member-kb-enter-icon {
    font-size: 1.72rem;
  }

  body.app-role-member .member-kb-key--num {
    min-height: 2.35rem;
    font-size: 1.08rem;
  }

  body.app-role-member .member-kb-digit-grid {
    grid-template-rows: repeat(4, minmax(2.35rem, auto));
    gap: 0.24rem;
  }

  body.app-role-member .member-kb-digit-grid > .member-kb-key {
    min-height: 2.35rem;
  }

  body.app-role-member .member-kb-numrow--r0e .member-kb-key {
    min-height: 2.35rem;
  }

  body.app-role-member .member-kb-key--action {
    min-height: 2.28rem;
  }

  body.app-role-member .member-kb-key--cat {
    min-height: 2rem;
    padding: 0.28rem 0.18rem;
  }

  body.app-logged-in .legacy-menu-item {
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
    touch-action: manipulation;
  }

  body.app-logged-in .legacy-sidebar--admin .legacy-menu-item, .legacy-sidebar--agent .legacy-menu-item.admin-win-tree__row {
    min-height: 1.85rem;
    padding: 0.28rem 0.4rem 0.28rem 0.2rem;
    touch-action: manipulation;
  }

  body.app-logged-in .legacy-submenu-item {
    min-height: 2.4rem;
    padding: 0.45rem 0.55rem;
    touch-action: manipulation;
  }

  body.app-logged-in .legacy-sidebar--admin .admin-win-tree__leaf , .legacy-sidebar--agent .admin-win-tree__leaf {
    min-height: 1.8rem;
    padding: 0.26rem 0.4rem 0.26rem 1.55rem;
    touch-action: manipulation;
  }

  body.app-logged-in .legacy-signout {
    min-height: 2.5rem;
    padding: 0.45rem 0.85rem;
    touch-action: manipulation;
  }

  body.app-logged-in .legacy-body {
    min-height: 0;
  }

  body.app-logged-in input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  body.app-logged-in select,
  body.app-logged-in textarea {
    font-size: 1rem;
  }

  body.app-logged-in .btn {
    min-height: 2.55rem;
    touch-action: manipulation;
  }

  body.app-logged-in .live-feed {
    -webkit-overflow-scrolling: touch;
  }
}

/* Agent: create member modal (overlays ACCOUNT / MAIN) */
body.agent-modal-open {
  overflow: hidden;
}

.my-members-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.35rem;
}

.my-members-card-head h3 {
  margin: 0;
}

.my-members-hint {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
}

.legacy-card--my-members .message {
  margin: 0 0 0.5rem;
}

.agent-create-member-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.25rem 0.75rem 2rem;
  overflow-y: auto;
  box-sizing: border-box;
  isolation: isolate;
  pointer-events: none;
}

.agent-create-member-modal.hidden {
  display: none !important;
}

.agent-create-member-modal__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(15, 23, 42, 0.55);
  cursor: pointer;
  pointer-events: auto;
}

.agent-create-member-modal__panel {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  width: 100%;
  max-width: 22rem;
  margin-top: 0.5rem;
  padding: 1rem 1.15rem 1.1rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

.agent-create-member-modal__panel--wide {
  max-width: 26rem;
}

.agent-modal-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.agent-create-member-modal__title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.agent-modal-close {
  flex: 0 0 auto;
  margin: -0.15rem -0.25rem 0 0;
  padding: 0.15rem 0.45rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
}

.agent-modal-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.agent-modal-subline {
  margin: 0 0 0.4rem;
  font-size: 0.88rem;
}

.agent-create-member-form .form-group {
  margin-bottom: 0.55rem;
}

.agent-create-member-form__actions {
  margin-top: 0.65rem;
  margin-bottom: 0;
}

.agent-create-member-form__actions .btn {
  width: 100%;
}

.agent-member-settings-form__actions {
  margin-top: 0.65rem;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.agent-member-settings-form__actions .btn {
  width: 100%;
}

.my-members-data-row {
  cursor: pointer;
}

.my-members-data-row:hover {
  background: #f1f5f9;
}

.my-members-data-row.is-selected {
  box-shadow: inset 3px 0 0 #2563eb;
  background: #eff6ff;
}

.my-members-footer-actions {
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.my-members-footer-hint {
  margin: 0;
  flex: 1 1 12rem;
}

/* Agent ACCOUNT page: Agent home heading + Profile/Member; live feed only on Profile (split 50/50) */
.agent-page-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
  min-width: 0;
}

.agent-page-head {
  margin: 0;
  padding: 0;
}

.agent-page-head__title {
  margin: 0 0 0.15rem;
  font-size: 1.12rem;
  font-weight: 800;
  color: #0f172a;
}

.agent-profile-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  align-items: start;
  min-width: 0;
}

.agent-profile-split__col {
  min-width: 0;
}

.agent-profile-feed-card .live-feed {
  max-height: min(52vh, 480px);
}

#agentMainPage #agentLiveFeed [lang="my"] {
  font-family: var(--font-myanmar);
  font-size: 0.86rem;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .agent-profile-split {
    grid-template-columns: 1fr;
  }

  .agent-profile-feed-card .live-feed {
    max-height: min(40vh, 360px);
  }
}

.agent-shell-account-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.agent-account-subnav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.agent-account-subnav__btn {
  width: auto;
  min-width: 6.75rem;
  flex: 0 1 auto;
  justify-content: center;
  text-align: center;
}

.agent-shell-account-panels {
  min-width: 0;
  width: 100%;
}

.agent-account-pane.hidden {
  display: none !important;
}

@media (max-width: 640px) {
  .agent-account-subnav__btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
  }
}

/* --- Admin: Agent management (MEMBER → Agent). Default 2D/3D template: localStorage only (no UI). --- */
.agent-mgmt-card {
  margin-bottom: 0.65rem;
}

.agent-mgmt-card__title {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
  font-weight: 600;
}

.agent-member-create-credit {
  margin-top: 0.15rem;
}

.admin-agent-settings-intro,
.admin-agent-member-tree-hint {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  line-height: 1.35;
}

.agent-mgmt-card__section-label {
  margin: 0.55rem 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.admin-agent-settings-table-wrap {
  margin-bottom: 0.45rem;
}

.admin-agent-settings-grid-head,
.admin-agent-settings-grid-row {
  display: grid;
  grid-template-columns: 2rem minmax(4.5rem, 0.75fr) minmax(7rem, 1.35fr) minmax(7rem, 1.35fr) 3.25rem;
  gap: 0.3rem 0.4rem;
  align-items: center;
}

.admin-agent-settings-grid-head {
  padding: 0.35rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  background: #e2e8f0;
  border-radius: 6px 6px 0 0;
}

.admin-agent-settings-name-list.main-board-user-list {
  max-height: min(38vh, 360px);
  overflow-y: auto;
  margin-bottom: 0.25rem;
}

/* Agent settings list: agent login always left (not space-between when no member count). */
.admin-agent-settings-name-list .main-board-agent-title-btn,
.admin-agent-settings-name-list .main-board-agent-title-btn.main-board-agent-title-btn--one-line {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  text-align: left;
}

.admin-agent-settings-name-list .main-board-agent-meta.main-board-agent-meta--row {
  flex: 0 1 auto;
  justify-content: flex-start;
}

.admin-agent-settings-name-list .main-board-agent-member-count {
  margin-left: auto;
}

.admin-agent-settings-name-list .main-board-agent-delete-btn {
  flex-shrink: 0;
}

.admin-agent-settings-detail-list {
  max-height: min(38vh, 360px);
  overflow: auto;
  padding: 0.2rem 0.25rem;
  border-radius: 0 0 8px 8px;
  background: #f1f5f9;
}

.admin-agent-settings-suspend-empty {
  padding: 0.5rem 0.45rem;
  text-align: center;
  font-size: 0.82rem;
}

.admin-agent-settings-grid-row {
  padding: 0.15rem 0.2rem;
  border-radius: 4px;
}

.admin-agent-settings-grid-row.is-selected {
  background: #e0f2fe;
  box-shadow: inset 0 0 0 2px #2563eb66;
}

.admin-agent-settings-grid-num {
  text-align: right;
  font-size: 0.78rem;
}

.admin-agent-settings-grid-agent {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.15rem 0.35rem;
  text-align: left;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f172a;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.admin-agent-settings-grid-agent:hover {
  background: rgba(255, 255, 255, 0.65);
}

.admin-agent-settings-grid-agent-name {
  display: block;
  padding: 0.15rem 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f172a;
}

.admin-agent-settings-grid-agent-name.is-selected {
  color: #1d4ed8;
}

.admin-agent-settings-grid-2d,
.admin-agent-settings-grid-3d {
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-agent-settings-grid-susp {
  text-align: center;
}

.admin-agent-settings-grid-del {
  text-align: center;
}

.admin-agent-settings-name-row-wrap {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.admin-agent-settings-name-row-wrap.is-selected .admin-agent-settings-name-row {
  background: #e0f2fe;
  box-shadow: inset 0 0 0 2px #2563eb66;
}

.admin-agent-settings-name-row-wrap .admin-agent-settings-name-row {
  flex: 1;
  min-width: 0;
}

.admin-agent-settings-name-row__delete {
  flex-shrink: 0;
  align-self: center;
}

.main-board-agent-delete-btn {
  flex-shrink: 0;
  align-self: center;
  margin-right: 0.2rem;
}

.admin-agent-settings-name-row {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.2rem 0.45rem;
  min-height: 0;
  line-height: 1.25;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #f8fafc;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.admin-agent-settings-name-row:hover {
  background: #eef2ff;
  border-color: #93c5fd;
}

.admin-agent-settings-name-row.selected {
  background: #e0f2fe;
  border-color: #60a5fa;
  box-shadow: inset 0 0 0 1px #2563eb55;
}

.admin-agent-settings-name-row__label {
  font-size: 0.84rem;
  font-weight: 600;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.agent-mgmt-card__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.agent-mgmt-card__head-row .agent-mgmt-card__title {
  margin: 0;
}

.admin-agent-member-tree-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.admin-agent-member-tree-panel {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
}

.admin-agent-member-tree-list {
  max-height: min(50vh, 420px);
}

.agent-mgmt-form-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin-top: 0.25rem;
}

@media (max-width: 720px) {
  .agent-mgmt-form-columns {
    grid-template-columns: 1fr;
  }
}

#adminAgentListPage #createAgentForm .form-group,
#agentMemberCreatePage .agent-mgmt-create-form .form-group,
#agentMemberInlineSettingsCard #agentMemberInlineSettingsForm .form-group {
  margin-bottom: 0.35rem;
}

#adminAgentListPage #createAgentForm .form-group.form-group--inline,
#agentMemberCreatePage .agent-mgmt-create-form .form-group.form-group--inline,
#agentMemberInlineSettingsCard #agentMemberInlineSettingsForm .form-group.form-group--inline {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin-bottom: 0.3rem;
}

/* MEMBER → Agent / Member account forms: no spinner arrows, compact numeric boxes */
.acct-num-input,
#adminAgentListPage #createAgentForm input[type="number"],
#agentMemberCreatePage input[type="number"],
.agent-create-member-form input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.acct-num-input::-webkit-outer-spin-button,
.acct-num-input::-webkit-inner-spin-button,
#adminAgentListPage #createAgentForm input[type="number"]::-webkit-outer-spin-button,
#adminAgentListPage #createAgentForm input[type="number"]::-webkit-inner-spin-button,
#agentMemberCreatePage input[type="number"]::-webkit-outer-spin-button,
#agentMemberCreatePage input[type="number"]::-webkit-inner-spin-button,
.agent-create-member-form input[type="number"]::-webkit-outer-spin-button,
.agent-create-member-form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.agent-create-member-form .acct-field-row,
#memberSettingsForm .acct-field-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin-bottom: 0.35rem;
}

.agent-create-member-form .acct-field-row label,
#memberSettingsForm .acct-field-row label {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.agent-create-member-form .acct-num-input,
#memberSettingsForm .acct-num-input {
  flex: 0 0 auto;
  width: 5rem;
  min-height: 1.72rem;
  padding: 0.18rem 0.42rem;
  font-size: 0.86rem;
  max-width: 100%;
}

.agent-create-member-form .acct-num-input--pct,
#memberSettingsForm .acct-num-input--pct {
  width: 3.5rem;
  text-align: center;
}

.acct-pct-suffix,
.agent-create-member-form .acct-pct-suffix {
  flex: 0 0 auto;
  font-size: 0.86rem;
  font-weight: 600;
  color: #334155;
}

/* Agent / member mgmt forms — label + compact box on one row (admin create agent parity) */
#adminAgentListPage #createAgentForm .agent-mgmt-agent-name-row,
#adminAgentListPage #createAgentForm .agent-mgmt-member-name-row,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-member-name-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.4rem;
  margin-bottom: 0.3rem;
}

#adminAgentListPage #createAgentForm .agent-mgmt-agent-name-row__label,
#adminAgentListPage #createAgentForm .agent-mgmt-member-name-row__label,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-member-name-row__label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}

#adminAgentListPage #createAgentForm .agent-mgmt-agent-name-row__sep,
#adminAgentListPage #createAgentForm .agent-mgmt-member-name-row__sep,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-member-name-row__sep {
  color: #94a3b8;
  font-weight: 600;
  user-select: none;
  flex: 0 0 auto;
}

#adminAgentListPage #createAgentForm .agent-mgmt-agent-name-row .agent-name-inline__login,
#adminAgentListPage #createAgentForm .agent-mgmt-agent-name-row .agent-name-inline__hyphen,
#adminAgentListPage #createAgentForm .agent-mgmt-member-name-row .agent-name-inline__login,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-member-name-row .agent-name-inline__login {
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
}

#adminAgentListPage #createAgentForm .agent-mgmt-agent-name-row .agent-name-inline__input,
#adminAgentListPage #createAgentForm .agent-mgmt-member-name-row .agent-name-inline__input,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-member-name-row .agent-name-inline__input {
  flex: 0 0 auto;
  width: 2.85rem;
  min-width: 2.85rem;
}

#adminAgentListPage #createAgentForm .agent-mgmt-inline-label,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-inline-label,
#agentMemberInlineSettingsCard #agentMemberInlineSettingsForm .agent-mgmt-inline-label,
.agent-profile-details .agent-mgmt-inline-label {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

#adminAgentListPage #createAgentForm .agent-mgmt-inline-control,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-inline-control,
#agentMemberInlineSettingsCard #agentMemberInlineSettingsForm .agent-mgmt-inline-control {
  flex: 0 1 auto;
  min-width: 0;
}

#adminAgentListPage #createAgentForm .agent-mgmt-inline-input,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-inline-input,
#agentMemberInlineSettingsCard #agentMemberInlineSettingsForm .agent-mgmt-inline-input {
  box-sizing: border-box;
  min-height: 1.72rem;
  padding: 0.18rem 0.42rem;
  font-size: 0.86rem;
  width: 5.25rem;
  max-width: 100%;
}

#adminAgentListPage #createAgentForm .agent-mgmt-inline-input--num,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-inline-input--num,
#agentMemberInlineSettingsCard #agentMemberInlineSettingsForm .agent-mgmt-inline-input--num {
  width: 4.75rem;
  -moz-appearance: textfield;
  appearance: textfield;
}

#adminAgentListPage #createAgentForm .agent-mgmt-inline-input--num::-webkit-outer-spin-button,
#adminAgentListPage #createAgentForm .agent-mgmt-inline-input--num::-webkit-inner-spin-button,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-inline-input--num::-webkit-outer-spin-button,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-inline-input--num::-webkit-inner-spin-button,
#agentMemberInlineSettingsCard #agentMemberInlineSettingsForm .agent-mgmt-inline-input--num::-webkit-outer-spin-button,
#agentMemberInlineSettingsCard #agentMemberInlineSettingsForm .agent-mgmt-inline-input--num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#adminAgentListPage #createAgentForm .agent-mgmt-inline-input--pct,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-inline-input--pct,
#agentMemberInlineSettingsCard #agentMemberInlineSettingsForm .agent-mgmt-inline-input--pct {
  width: 3.5rem;
  min-width: 3.5rem;
  text-align: center;
}

#adminAgentListPage #createAgentForm .agent-mgmt-pct-suffix,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-pct-suffix,
#agentMemberInlineSettingsCard #agentMemberInlineSettingsForm .agent-mgmt-pct-suffix {
  flex: 0 0 auto;
  font-size: 0.86rem;
  font-weight: 600;
  color: #334155;
  margin-left: 0.05rem;
}

#adminAgentListPage #createAgentForm .agent-mgmt-inline-input--pw,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-inline-input--pw,
#agentMemberInlineSettingsCard #agentMemberInlineSettingsForm .agent-mgmt-inline-input--pw {
  width: 7.5rem;
}

#adminAgentListPage #createAgentForm .agent-mgmt-inline-input--name,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-inline-input--name,
#agentMemberInlineSettingsCard #agentMemberInlineSettingsForm .agent-mgmt-inline-input--name {
  width: 8.5rem;
}

#adminAgentListPage #createAgentForm .agent-mgmt-agent-name-hint,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-agent-name-hint {
  margin: 0 0 0.35rem;
  padding-left: 0.15rem;
  font-size: 0.78rem;
}

#adminAgentListPage #createAgentForm .form-group label,
#agentMemberCreatePage .agent-mgmt-create-form .form-group label,
#agentMemberInlineSettingsCard #agentMemberInlineSettingsForm .form-group label {
  margin-bottom: 0.1rem;
  font-size: 0.82rem;
}

#adminAgentListPage #createAgentForm .form-group input[type="text"],
#adminAgentListPage #createAgentForm .form-group input[type="number"],
#adminAgentListPage #createAgentForm .form-group input[type="password"],
#agentMemberCreatePage .agent-mgmt-create-form .form-group input[type="text"],
#agentMemberCreatePage .agent-mgmt-create-form .form-group input[type="number"],
#agentMemberCreatePage .agent-mgmt-create-form .form-group input[type="password"],
#agentMemberInlineSettingsCard #agentMemberInlineSettingsForm .form-group input[type="text"],
#agentMemberInlineSettingsCard #agentMemberInlineSettingsForm .form-group input[type="password"] {
  min-height: 1.72rem;
  padding: 0.18rem 0.42rem;
  font-size: 0.86rem;
}

#adminAgentListPage #createAgentForm .agent-mgmt-suspended-fieldset.form-group--inline,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-suspended-fieldset.form-group--inline {
  padding: 0.28rem 0.45rem;
  gap: 0.35rem 0.55rem;
}

#adminAgentListPage #createAgentForm .agent-mgmt-suspended-fieldset .agent-mgmt-suspended-legend,
#agentMemberCreatePage .agent-mgmt-create-form .agent-mgmt-suspended-fieldset .agent-mgmt-suspended-legend {
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
}

#agentMemberCreatePage .agent-mgmt-create-form input:disabled,
#agentMemberInlineSettingsCard #agentMemberInlineSettingsForm input:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  background: #f1f5f9;
}

/* Agent profile + credit strip: horizontal label — value (read-only) */
#agentMainPage .agent-profile-split__col--profile .legacy-card h2,
#agentMainPage .agent-profile-split__col--profile .legacy-card > .muted,
.agent-profile-details,
.agent-profile-details .agent-profile-detail-row__lbl,
.agent-profile-details .agent-profile-detail-row__val {
  font-family: var(--font-sans);
  font-synthesis: none;
}

#agentMainPage .agent-profile-split__col--profile .legacy-card h2 {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  color: #0f172a;
}

#agentMainPage .agent-profile-split__col--profile .legacy-card > .muted {
  font-size: 0.82rem;
  line-height: 1.35;
  margin: 0 0 0.4rem;
}

.agent-profile-password-actions {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.agent-profile-password-actions__hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  max-width: 22rem;
}

#agentProfilePasswordMessage.message {
  margin: 0.15rem 0 0;
  min-height: 1.25rem;
}

.agent-profile-details {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin-top: 0.45rem;
  font-size: 0.86rem;
  line-height: 1.35;
}

.agent-profile-detail-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.agent-profile-detail-row__lbl {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  color: #475569;
}

.agent-profile-detail-row__val {
  flex: 0 1 auto;
  font-size: 0.86rem;
  font-weight: 600;
  color: #0f172a;
  font-variant-numeric: normal;
}

.agent-profile-detail-row__val--num,
.agent-profile-detail-row__val--login {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.agent-profile-detail-row__val--login {
  text-transform: lowercase;
}

.agent-member-create-credit.agent-profile-details {
  margin-top: 0.25rem;
}

#agentMemberInlineSettingsCard {
  margin-bottom: 0.65rem;
}

#agentMemberInlineSettingsCard .agent-member-inline-settings-form input:not([type="hidden"]) {
  pointer-events: auto;
}

.agent-name-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
}

.agent-name-inline__prefix {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
}

.agent-name-inline__login {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.agent-name-inline__hyphen {
  font-weight: 700;
}

.agent-name-inline__paren {
  font-weight: 600;
  color: #0f172a;
  user-select: none;
}

.agent-name-inline__input {
  width: 3.1rem;
  min-width: 3.1rem;
  min-height: 1.72rem;
  padding: 0.18rem 0.32rem;
  text-align: center;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  font-size: 0.86rem;
}

.agent-name-inline__full {
  margin: 0.28rem 0 0;
  font-size: 0.8rem;
}

.agent-mgmt-suspended-fieldset {
  border: 1px dashed #cbd5e1;
  border-radius: 0.35rem;
  padding: 0.35rem 0.5rem;
  margin: 0.12rem 0 0;
}

.agent-mgmt-suspended-legend {
  padding: 0 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.agent-mgmt-suspended-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
}

.agent-mgmt-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  font-size: 0.86rem;
}

.agent-mgmt-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.agent-mgmt-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.agent-mgmt-list-table th,
.agent-mgmt-list-table td {
  padding: 0.38rem 0.45rem;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: middle;
}

.agent-mgmt-list__name {
  cursor: pointer;
  font-weight: 600;
  color: #0f172a;
}

.agent-mgmt-list__name:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.agent-mgmt-susp-pill {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

.agent-mgmt-susp-off {
  background: #ecfdf5;
  color: #047857;
}

.agent-mgmt-susp-on {
  background: #fef2f2;
  color: #b91c1c;
}

/* Period form (simple): schedule spans card — 8 equal columns (edge to edge within card) */
#adminStockPeriodSimplePage .period-simple-schedule-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

#adminStockPeriodSimplePage .period-simple-schedule-table {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  table-layout: fixed;
  border-collapse: collapse;
}

#adminStockPeriodSimplePage .period-simple-schedule-table col.period-simple-schedule-col--eq {
  width: 12.5%;
}

#adminStockPeriodSimplePage .period-simple-schedule-lead {
  padding: 0.55rem 0.35rem;
  vertical-align: middle;
}

#adminStockPeriodSimplePage .period-simple-schedule-dow {
  padding: 0.52rem 0.28rem;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

#adminStockPeriodSimplePage .period-simple-schedule-cell {
  padding: 0.5rem 0.25rem;
  min-height: 2.35rem;
  font-size: 0.84rem;
  text-align: center;
  vertical-align: middle;
  color: var(--muted, #6b7280);
}

#adminStockPeriodSimplePage .period-simple-schedule-cell:empty::before {
  content: "—";
  opacity: 0.35;
}

/* Period form (simple): 1st period / Name / End time between Create and Schedule */
#adminStockPeriodSimplePage .period-simple-created-block {
  margin-top: 1.15rem;
  margin-bottom: 1.35rem;
}

#adminStockPeriodSimplePage .period-simple-created-wrap {
  width: 100%;
  overflow-x: auto;
}

#adminStockPeriodSimplePage .period-simple-created-table {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  table-layout: fixed;
}

#adminStockPeriodSimplePage .period-simple-created-table th:nth-child(1),
#adminStockPeriodSimplePage .period-simple-created-table td:nth-child(1) {
  width: 30%;
  min-width: 7.5rem;
}

#adminStockPeriodSimplePage .period-simple-created-table th:nth-child(2),
#adminStockPeriodSimplePage .period-simple-created-table td:nth-child(2) {
  width: 38%;
}

#adminStockPeriodSimplePage .period-simple-created-table th:nth-child(3),
#adminStockPeriodSimplePage .period-simple-created-table td:nth-child(3) {
  width: 32%;
}

#adminStockPeriodSimplePage .period-simple-created-table tbody tr:nth-child(even) td {
  background: rgba(241, 245, 249, 0.65);
}

#adminStockPeriodSimplePage .period-simple-created-table tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.98);
}

#adminStockPeriodSimplePage .period-simple-created-table .period-simple-created-col-ordinal {
  vertical-align: middle;
}

#adminStockPeriodSimplePage .period-simple-created-table .period-simple-created-ordinal-inner {
  display: inline-block;
  white-space: nowrap;
  word-break: keep-all;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  letter-spacing: 0.01em;
}

#adminStockPeriodSimplePage .period-simple-schedule-heading {
  margin-top: 0.25rem;
}

/* Member composer bar — layout lock (overrides stale cached flex rules) */
#memberInputBarRow.member-input-bar-row--pill:not(.member-input-bar-row--3d) {
  display: grid !important;
  grid-template-columns: minmax(2.5rem, 28%) 1fr 5.4rem !important;
  column-gap: 0.4rem !important;
  align-items: end !important;
  min-height: 2.6rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#memberNumSlot.member-composer-num-slot {
  align-self: end !important;
  height: 2.6rem !important;
  max-height: 2.6rem !important;
  min-height: 2.6rem !important;
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  touch-action: manipulation !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline-end: 0.1rem !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  z-index: 11 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

#memberNumSlot .member-composer-num-hit {
  position: absolute !important;
  inset: 0 !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

#memberFldNumber.member-na-number {
  align-self: end !important;
  min-height: 2.6rem !important;
  max-height: 2.6rem !important;
  height: 2.6rem !important;
  pointer-events: none !important;
}

#memberAmtSlot.member-composer-amt-slot {
  align-self: end !important;
  height: 2.6rem !important;
  max-height: 2.6rem !important;
  min-height: 2.6rem !important;
}

#memberFldAmount.member-na-amount {
  min-height: 2.6rem !important;
  max-height: 2.6rem !important;
  height: 2.6rem !important;
  pointer-events: none !important;
}

#memberFldNumber.member-na-number {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#memberAmtSlot.member-composer-amt-slot {
  display: flex !important;
  align-items: stretch !important;
  position: relative !important;
  touch-action: manipulation !important;
}

#memberFldAmount.member-na-amount {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#memberAmtSlot.member-composer-amt-slot {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline-start: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#memberFldNumber {
  overflow: hidden !important;
  margin-inline-end: 0 !important;
  pointer-events: none !important;
}

#memberFldNumber .member-na-value-num-pair {
  overflow: hidden !important;
  max-width: 100% !important;
}

@media (max-width: 540px) {
  #memberInputBarRow.member-input-bar-row--pill {
    grid-template-columns: minmax(2.5rem, 28%) 1fr 5.4rem !important;
    column-gap: 0.4rem !important;
  }
}

#memberFldNumber {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  box-sizing: border-box !important;
}

#memberFldAmount {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 2.6rem !important;
  max-height: 2.6rem !important;
  height: 2.6rem !important;
  flex: 0 0 auto !important;
  align-self: end !important;
  position: relative !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

#memberSendBtn.member-composer-send {
  width: 5.4rem !important;
  max-width: 5.4rem !important;
  min-height: 2.6rem !important;
  height: 2.6rem !important;
  flex: none !important;
  align-self: end !important;
  justify-self: end !important;
}

@media (min-width: 541px) and (max-width: 900px) {
  #memberInputBarRow.member-input-bar-row--pill {
    grid-template-columns: minmax(3.1rem, 28%) 1fr 5.4rem !important;
    column-gap: 0.5rem !important;
  }
}

@media (min-width: 901px) {
  #memberInputBarRow.member-input-bar-row--pill {
    grid-template-columns: minmax(3.6rem, 28%) 1fr 5.4rem !important;
    column-gap: 0.5rem !important;
  }
}

@media (min-width: 541px) and (max-width: 900px) {
  body.app-role-member.member-page--3d #member3dInputBarRow.member-input-bar-row--pill {
    grid-template-columns: minmax(3.1rem, 28%) 1fr 5.4rem;
    column-gap: 0.5rem;
  }
}

@media (min-width: 901px) {
  body.app-role-member.member-page--3d #member3dInputBarRow.member-input-bar-row--pill {
    grid-template-columns: minmax(3.6rem, 28%) 1fr 5.4rem;
    column-gap: 0.5rem;
  }
}

#member3dFldNumber.member-na-number {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#member3dAmtSlot.member-composer-amt-slot {
  align-self: end !important;
  height: 2.6rem !important;
  max-height: 2.6rem !important;
  min-height: 2.6rem !important;
}

#member3dSendBtn.member-composer-send {
  width: 5.4rem !important;
  max-width: 5.4rem !important;
  min-height: 2.6rem !important;
  height: 2.6rem !important;
  align-self: end !important;
  justify-self: end !important;
}

/* UX-09 — Member composer/keyboard: slate gray tray + holographic glass keys */
body.app-role-member {
  --sys2d-holo-key-fill: rgba(255, 255, 255, 0.13);
  --sys2d-holo-key-fill-hover: rgba(255, 255, 255, 0.2);
  --sys2d-holo-key-fill-active: rgba(255, 255, 255, 0.1);
  --sys2d-holo-key-text: #05DF72;
  --sys2d-holo-key-text-muted: #05DF72;
  --sys2d-holo-key-text-dim: #94a3b8;
  --sys2d-holo-border-grad: linear-gradient(
    125deg,
    rgba(192, 132, 252, 0.82) 0%,
    rgba(129, 140, 248, 0.55) 45%,
    rgba(34, 211, 238, 0.78) 100%
  );
  --sys2d-holo-glow: 0 0 12px rgba(168, 85, 247, 0.28), 0 0 20px rgba(34, 211, 238, 0.18);
  --sys2d-holo-ready-fill: rgba(34, 211, 238, 0.24);
  --sys2d-holo-ready-glow: 0 0 16px rgba(34, 211, 238, 0.42), 0 0 24px rgba(168, 85, 247, 0.22);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-composer-bar-meta,
body.app-role-member #memberComposerDock.member-composer-dock .member-composer-status-msg,
body.app-role-member #memberComposerDock.member-composer-dock .member-period-total--on-bar {
  color: #f1f5f9;
}

body.app-role-member #memberComposerDock.member-composer-dock .member-input-bar-row--pill {
  background: rgba(15, 23, 42, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 18px rgba(15, 23, 42, 0.16);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-input-bar-row--pill .member-na-number,
body.app-role-member #memberComposerDock.member-composer-dock .member-input-bar-row--pill .member-na-amount {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-input-bar-row--pill .member-na-label,
body.app-role-member #memberComposerDock.member-composer-dock .member-input-bar-row--pill .member-na-label--amt {
  color: #64748b;
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-numpad {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding-top: 0.32rem;
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-actionrow {
  border-top-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--sys2d-holo-key-fill);
  color: var(--sys2d-holo-key-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 14px rgba(15, 23, 42, 0.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--sys2d-holo-border-grad);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.88;
  z-index: -1;
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key:focus-visible {
  outline: none;
  box-shadow:
    var(--sys2d-holo-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key:hover:not(:disabled):not(.member-kb-dim) {
  background: var(--sys2d-holo-key-fill-hover);
  color: var(--sys2d-holo-key-text);
  box-shadow:
    var(--sys2d-holo-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key:active:not(:disabled):not(.member-kb-dim) {
  background: var(--sys2d-holo-key-fill-active);
  box-shadow:
    inset 0 2px 6px rgba(15, 23, 42, 0.22),
    0 2px 8px rgba(15, 23, 42, 0.14);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key:not(:disabled) {
  background: var(--sys2d-holo-key-fill);
  border-color: transparent;
  color: var(--sys2d-holo-key-text);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 14px rgba(15, 23, 42, 0.2);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key:not(:disabled):hover {
  background: var(--sys2d-holo-key-fill-hover);
  border-color: transparent;
  color: var(--sys2d-holo-key-text);
  box-shadow:
    var(--sys2d-holo-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key:not(:disabled):active {
  background: var(--sys2d-holo-key-fill-active);
  color: var(--sys2d-holo-key-text);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key--cat {
  background: rgba(255, 255, 255, 0.11);
  color: var(--sys2d-holo-key-text);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key__hint {
  color: var(--sys2d-holo-key-text-muted);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key--cat.is-selected .member-kb-key__hint,
body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key--cat-neighbor.is-selected .member-kb-key__hint {
  color: #e9d5ff;
}

body.app-role-member #memberComposerDock.member-composer-dock #memberKbGroupA .member-kb-key--cat.is-selected,
body.app-role-member #memberComposerDock.member-composer-dock #memberKbGroupA .member-kb-key--cat.is-selected:disabled {
  background: rgba(168, 85, 247, 0.28);
  border-color: transparent;
  color: #faf5ff;
  box-shadow:
    0 0 16px rgba(168, 85, 247, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key--r {
  color: #ccfbf1;
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key--r.member-kb-key--r-ready:not(:disabled):not(.member-kb-dim),
body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key--enter.member-kb-key--enter-ready:not(.member-kb-dim) {
  background: var(--sys2d-holo-ready-fill);
  border-color: transparent;
  color: #ecfeff;
  font-weight: 700;
  box-shadow:
    var(--sys2d-holo-ready-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key--r.member-kb-key--r-ready:not(:disabled):not(.member-kb-dim):hover,
body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key--enter.member-kb-key--enter-ready:not(.member-kb-dim):hover {
  background: rgba(34, 211, 238, 0.32);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key--r.is-selected:not(:disabled),
body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key.member-kb-key--r.is-selected:disabled,
body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key.member-kb-key--r.is-selected.member-kb-dim {
  background: rgba(148, 163, 184, 0.22);
  border-color: transparent;
  color: var(--sys2d-holo-key-text-dim);
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.18);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key:disabled,
body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key.member-kb-dim,
body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key--enter:disabled,
body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key--enter.member-kb-dim:not(.member-kb-key--enter-ready) {
  background: rgba(15, 23, 42, 0.16);
  border-color: transparent;
  color: var(--sys2d-holo-key-text-dim);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
  opacity: 0.72;
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key:disabled::before,
body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key.member-kb-dim::before {
  opacity: 0.35;
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key--action[data-act="clear"]:not(:disabled) {
  background: rgba(251, 191, 36, 0.18);
  color: #fef3c7;
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key--action[data-act="hide"]:not(:disabled) {
  background: rgba(129, 140, 248, 0.2);
  color: #e0e7ff;
}

body.app-role-member #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key--action[data-act="bk"]:not(:disabled),
body.app-role-member #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key--action.member-kb-key--bk-lit:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  color: #f1f5f9;
}

body.app-role-member #memberComposerDock.member-composer-dock .member-composer-send {
  border: 1px solid transparent;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--sys2d-holo-key-text-dim);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 14px rgba(15, 23, 42, 0.2);
  overflow: hidden;
}

body.app-role-member #memberComposerDock.member-composer-dock .member-composer-send::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--sys2d-holo-border-grad);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
  z-index: 0;
}

body.app-role-member #memberComposerDock.member-composer-dock .member-composer-send__icon {
  position: relative;
  z-index: 1;
}

body.app-role-member #memberComposerDock.member-composer-dock .member-composer-send.member-composer-send--ready:not(:disabled):not(.member-kb-dim) {
  background: var(--sys2d-holo-ready-fill);
  color: #ecfeff;
  box-shadow:
    var(--sys2d-holo-ready-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-composer-send.member-composer-send--ready:not(:disabled):not(.member-kb-dim):hover {
  background: rgba(34, 211, 238, 0.32);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-composer-send.member-kb-dim:not(:disabled) {
  background: rgba(15, 23, 42, 0.16);
  color: var(--sys2d-holo-key-text-dim);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
}

body.app-role-member #memberComposerDock.member-composer-dock .member-composer-send.member-kb-dim:not(:disabled)::before {
  opacity: 0.35;
}

body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--tri.member-kb-key--tri-ready:not(:disabled):not(.member-kb-dim),
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--r.member-kb-key--r-ready:not(:disabled):not(.member-kb-dim) {
  background: var(--sys2d-glass-fill-hover) !important;
  background-color: var(--sys2d-glass-fill-hover) !important;
  border: 1px solid var(--sys2d-glass-border-hover) !important;
  color: #fff !important;
  box-shadow: var(--sys2d-glass-shadow) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key,
  body.app-role-member #memberComposerDock.member-composer-dock .member-composer-send {
    background: rgba(71, 85, 105, 0.72);
  }
}

/* UX-09a/UX-09s — Member 2D composer dock: soft purple tray (contrast for glass keys) */
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock,
body.app-role-member:not(.member-page--3d) .member-composer--keyboard-open .member-composer-dock {
  background: linear-gradient(135deg, #7889ed 0%, #8f6bb5 100%) !important;
  box-shadow: none !important;
  gap: 0;
  padding-top: 0;
  padding-bottom: max(0, env(safe-area-inset-bottom, 0px));
}

body.app-role-member:not(.member-page--3d) {
  --sys2d-holo-key-fill: rgba(255, 255, 255, 0.68);
  --sys2d-holo-key-fill-hover: rgba(255, 255, 255, 0.82);
  --sys2d-holo-key-fill-active: rgba(255, 255, 255, 0.56);
  --sys2d-holo-key-text: #334155;
  --sys2d-holo-key-text-muted: #64748b;
  --sys2d-holo-key-text-dim: #94a3b8;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-composer-bar-meta,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-composer-status-msg,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-period-total--on-bar {
  color: rgba(255, 255, 255, 0.88);
}

body.app-role-member:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  .member-recall-bar__total.member-period-total--on-bar {
  color: #334155;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-input-bar-row--pill:not(.member-input-bar-row--3d) {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  align-items: end;
}

/* UX-09p — Member 2D input bar: white text + font +2 steps (on purple tray) */
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-input-bar-row--pill .member-na-label,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-input-bar-row--pill .member-na-label--amt,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-na-number--active .member-na-label,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-na-amount--active .member-na-label--amt,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberFldNumber .member-na-label,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberFldAmount .member-na-label--amt {
  color: #fff !important;
  font-size: 0.62rem !important;
  line-height: 1.1 !important;
  text-shadow: var(--sys2d-glass-text-shadow) !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-na-number .member-na-value,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-na-number .member-na-value-num-pair,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-na-number .member-na-digit-slot,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-na-amount .member-na-value--amt,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-na-amount .member-na-value--amt-after-r,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-na-amount .member-na-value--amt.member-na-value--empty,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-na-amount .member-na-value--amt-after-r.member-na-value--empty,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-na-value--empty:not(.member-na-value--amt) {
  color: #fff !important;
  font-size: 1.12rem !important;
  line-height: 1.15 !important;
  min-height: 0.85rem !important;
  text-shadow: var(--sys2d-glass-text-shadow) !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-input-bar-row .member-r-inline-badge {
  color: #fff !important;
  font-size: 1.28rem !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-khway-preview,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-khway-preview__digits,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-khway-preview__tag {
  color: #fff !important;
  font-size: 1.12rem !important;
}

/* UX-09q — Member 2D number box: tight digit/glyph spacing (no wide gaps) */
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberFldNumber .member-na-value-num-pair,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-na-number .member-na-value-num-pair {
  gap: 0.06rem !important;
  letter-spacing: 0 !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberFldNumber .member-na-digit-slot,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-na-number .member-na-digit-slot,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberFldNumber .member-na-value,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-na-number .member-na-value {
  letter-spacing: 0 !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-khway-preview {
  gap: 0.06rem !important;
  letter-spacing: 0 !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-na-value--khway-full {
  gap: 0.06rem !important;
  letter-spacing: 0 !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-actionrow {
  border-top-color: transparent;
  box-shadow: none;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock > #memberComposerInputBlock {
  margin-left: max(0.22rem, env(safe-area-inset-left, 0px));
  margin-right: max(0.22rem, env(safe-area-inset-right, 0px));
  margin-top: 0;
  margin-bottom: 0.14rem;
}

/* UX-09y — Member 2D: input bar ↔ keyboard breathing room (incl. ခွေ rows) */
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-keyboard-panel:not(.member-keyboard-panel--collapsed) {
  margin-top: 0.1rem;
  position: relative;
  z-index: 2;
}

body.app-role-member:not(.member-page--3d) .member-composer--keyboard-open #memberNumSlot.member-composer-num-slot,
body.app-role-member:not(.member-page--3d) .member-composer--keyboard-open #memberAmtSlot.member-composer-amt-slot {
  z-index: 1 !important;
}

body.app-role-member:not(.member-page--3d) .member-composer--keyboard-open #memberNumSlot .member-composer-num-hit,
body.app-role-member:not(.member-page--3d) .member-composer--keyboard-open #memberAmtSlot .member-composer-amt-hit {
  inset: 0 !important;
  z-index: 2 !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-comment-rows {
  padding-top: 0.04rem;
}

body.app-role-member:not(.member-page--3d) #memberInputBarRow.member-input-bar-row--pill:not(.member-input-bar-row--3d) {
  align-items: end !important;
  min-height: 2.6rem !important;
}

body.app-role-member:not(.member-page--3d) #memberNumSlot.member-composer-num-slot,
body.app-role-member:not(.member-page--3d) #memberAmtSlot.member-composer-amt-slot,
body.app-role-member:not(.member-page--3d) #memberFldNumber.member-na-number,
body.app-role-member:not(.member-page--3d) #memberFldAmount.member-na-amount,
body.app-role-member:not(.member-page--3d) #memberSendBtn.member-composer-send {
  align-self: end !important;
}

body.app-role-member:not(.member-page--3d) #memberSendBtn.member-composer-send {
  min-height: 2.6rem !important;
  height: 2.6rem !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-keyboard-panel {
  margin-top: 0;
  padding-top: 0;
  background: transparent;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad {
  padding-top: 0.06rem;
  padding-right: max(0.22rem, env(safe-area-inset-right, 0px));
  padding-bottom: calc(0.1rem + env(safe-area-inset-bottom, 0px));
  padding-left: max(0.22rem, env(safe-area-inset-left, 0px));
  gap: 0.18rem;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-comment-rows {
  gap: 0.22rem;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numrow {
  gap: 0.22rem;
}

/* UX-09b/UX-09v — Member 2D keyboard: compact key heights */
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--cat {
  min-height: 2.05rem;
  padding: 0.26rem 0.2rem;
  line-height: 1.15;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numrow--r0e .member-kb-key,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--num {
  min-height: 2.24rem;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-digit-grid {
  grid-template-rows: repeat(4, minmax(2.2rem, auto));
  gap: 0.18rem;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-digit-grid > .member-kb-key {
  min-height: 2.2rem;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--enter {
  min-height: 2.24rem;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--action {
  min-height: 2.15rem;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad {
  gap: 0.18rem;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-comment-rows {
  gap: 0.18rem;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numrow {
  gap: 0.14rem;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key,
  body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-composer-send,
  body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberFldNumber,
  body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberFldAmount {
    background: rgba(255, 255, 255, 0.38) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
  }
}

/* UX-09o/UX-09t — Member 2D keyboard: crisp glass on purple tray */
body.app-role-member:not(.member-page--3d) {
  --sys2d-glass-fill: rgba(255, 255, 255, 0.32);
  --sys2d-glass-border: rgba(255, 255, 255, 0.5);
  --sys2d-glass-fill-hover: rgba(255, 255, 255, 0.44);
  --sys2d-glass-border-hover: rgba(255, 255, 255, 0.58);
  --sys2d-glass-fill-active: rgba(255, 255, 255, 0.26);
  --sys2d-glass-blur: blur(6px);
  --sys2d-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 2px 10px rgba(15, 23, 42, 0.22);
  --sys2d-glass-text: #fff;
  --sys2d-glass-text-shadow: 0 1px 2px rgba(15, 23, 42, 0.42);
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key:not(:disabled),
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key--cat:not(:disabled) {
  isolation: auto !important;
  overflow: hidden !important;
  background: var(--sys2d-glass-fill) !important;
  background-color: var(--sys2d-glass-fill) !important;
  border: 1px solid var(--sys2d-glass-border) !important;
  color: var(--sys2d-glass-text) !important;
  font-weight: 700;
  text-shadow: var(--sys2d-glass-text-shadow) !important;
  -webkit-font-smoothing: antialiased;
  box-shadow: var(--sys2d-glass-shadow) !important;
  -webkit-backdrop-filter: var(--sys2d-glass-blur) !important;
  backdrop-filter: var(--sys2d-glass-blur) !important;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  transform: translateZ(0);
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key::before,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key::after,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-composer-send::before,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-composer-send::after,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberFldNumber::before,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberFldAmount::before,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberFldNumber::after,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberFldAmount::after {
  display: none !important;
  content: none !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--cat,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key--cat {
  border-radius: 999px !important;
  font-weight: 700;
  font-size: 0.8rem !important;
  line-height: 1.15 !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--num,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-digit-grid > .member-kb-key--num {
  color: var(--sys2d-glass-text) !important;
  font-weight: 800 !important;
  font-size: 1.08rem !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberKbGroupA .member-kb-key--cat[data-tag-group="K"] {
  font-size: 0.8rem !important;
  line-height: 1.15 !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key__hint {
  font-size: 0.66rem !important;
}

@media (max-width: 520px) {
  body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--cat,
  body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key--cat,
  body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberKbGroupA .member-kb-key--cat[data-tag-group="K"] {
    font-size: 0.72rem !important;
  }
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--num,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--enter,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--action,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--r,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--hide {
  border-radius: 1.05rem !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key:hover:not(:disabled):not(.member-kb-dim),
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key:not(:disabled):hover,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key--cat:not(:disabled):hover {
  background: var(--sys2d-glass-fill-hover) !important;
  background-color: var(--sys2d-glass-fill-hover) !important;
  border-color: var(--sys2d-glass-border-hover) !important;
  color: var(--sys2d-glass-text) !important;
  box-shadow: var(--sys2d-glass-shadow) !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key__hint,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--cat.is-selected .member-kb-key__hint,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--cat-neighbor.is-selected .member-kb-key__hint {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: var(--sys2d-glass-text-shadow) !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-input-bar-row--pill .member-na-number,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-input-bar-row--pill .member-na-amount,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberFldNumber.member-na-number,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberFldAmount.member-na-amount {
  isolation: auto !important;
  position: relative !important;
  overflow: hidden !important;
  background: var(--sys2d-glass-fill) !important;
  background-color: var(--sys2d-glass-fill) !important;
  border: 1px solid var(--sys2d-glass-border) !important;
  border-radius: 999px !important;
  box-shadow: var(--sys2d-glass-shadow) !important;
  -webkit-backdrop-filter: var(--sys2d-glass-blur) !important;
  backdrop-filter: var(--sys2d-glass-blur) !important;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-input-bar-row--pill .member-na-number:hover,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-input-bar-row--pill .member-na-amount:hover,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberFldNumber.member-na-number:focus-within,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberFldAmount.member-na-amount:focus-within {
  background: var(--sys2d-glass-fill-hover) !important;
  background-color: var(--sys2d-glass-fill-hover) !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-composer-send {
  isolation: auto !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--sys2d-glass-border) !important;
  border-radius: 999px !important;
  background: var(--sys2d-glass-fill) !important;
  background-color: var(--sys2d-glass-fill) !important;
  color: var(--sys2d-glass-text) !important;
  font-weight: 700;
  box-shadow: var(--sys2d-glass-shadow) !important;
  -webkit-backdrop-filter: var(--sys2d-glass-blur) !important;
  backdrop-filter: var(--sys2d-glass-blur) !important;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key:active:not(:disabled):not(.member-kb-dim),
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key:not(:disabled):active {
  background: var(--sys2d-glass-fill-active) !important;
  background-color: var(--sys2d-glass-fill-active) !important;
  background-image: none !important;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key:disabled,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key.member-kb-dim,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-composer-send.member-kb-dim:not(:disabled) {
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  opacity: 0.65 !important;
}

/* UX-09m — Member 2D keyboard: glass-button only (kill mint/purple/cyan/amber overrides) */
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--cat,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--r,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--enter,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--action,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--hide,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key:not(:disabled),
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key--cat:not(:disabled),
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--r.member-kb-key--r-ready:not(:disabled):not(.member-kb-dim),
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--enter.member-kb-key--enter-ready:not(.member-kb-dim),
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key--action[data-act="clear"]:not(:disabled),
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key--action[data-act="hide"]:not(:disabled),
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key--action[data-act="bk"]:not(:disabled),
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key--action.member-kb-key--bk-lit:not(:disabled),
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-composer-send,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-composer-send.member-composer-send--ready:not(:disabled):not(.member-kb-dim),
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberKbGroupA .member-kb-key--cat.is-selected,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberKbGroupA .member-kb-key--cat.is-selected:disabled {
  background: var(--sys2d-glass-fill) !important;
  background-color: var(--sys2d-glass-fill) !important;
  background-image: none !important;
  border: 1px solid var(--sys2d-glass-border) !important;
  border-color: var(--sys2d-glass-border) !important;
  color: var(--sys2d-glass-text) !important;
  box-shadow: var(--sys2d-glass-shadow) !important;
  filter: none !important;
  text-shadow: var(--sys2d-glass-text-shadow) !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberKbGroupA .member-kb-key--cat.is-selected,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock #memberKbGroupA .member-kb-key--cat.is-selected:disabled {
  background: var(--sys2d-glass-fill-hover) !important;
  background-color: var(--sys2d-glass-fill-hover) !important;
}

body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key:not(:disabled):hover,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key--cat:not(:disabled):hover {
  background: var(--sys2d-glass-fill-hover) !important;
  background-color: var(--sys2d-glass-fill-hover) !important;
  background-image: none !important;
  border-color: var(--sys2d-glass-border-hover) !important;
  color: var(--sys2d-glass-text) !important;
  box-shadow: var(--sys2d-glass-shadow) !important;
}

/* UX-09t — Member 2D glass clarity: legible labels on all keys + Send */
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-composer-send,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--action,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--enter,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--r,
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--hide {
  text-shadow: var(--sys2d-glass-text-shadow) !important;
}

/* UX-09u/UX-09v — Member 3D keyboard: compact heights (2D parity) */
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-numrow {
  gap: 0.14rem;
}

body.app-role-member.member-page--3d #member3dComposerDock .member-kb-numrow--r0e .member-kb-key,
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--num {
  min-height: 2.24rem;
  font-size: 1.08rem;
  font-weight: 800;
}

body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--enter,
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--enter-span {
  min-height: 2.24rem;
}

body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--action,
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--hide {
  min-height: 2.15rem;
}

body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--tri {
  min-height: 2.24rem;
  font-size: 0.84rem;
  font-weight: 700;
}

/* UX-09v — Member 3D composer: purple glass parity with 2D */
body.app-role-member.member-page--3d {
  --sys2d-glass-fill: rgba(255, 255, 255, 0.32);
  --sys2d-glass-border: rgba(255, 255, 255, 0.5);
  --sys2d-glass-fill-hover: rgba(255, 255, 255, 0.44);
  --sys2d-glass-border-hover: rgba(255, 255, 255, 0.58);
  --sys2d-glass-fill-active: rgba(255, 255, 255, 0.26);
  --sys2d-glass-blur: blur(6px);
  --sys2d-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 2px 10px rgba(15, 23, 42, 0.22);
  --sys2d-glass-text: #fff;
  --sys2d-glass-text-shadow: 0 1px 2px rgba(15, 23, 42, 0.42);
}

body.app-role-member.member-page--3d #member3dComposerDock .member-composer-bar-meta,
body.app-role-member.member-page--3d #member3dComposerDock .member-composer-status-msg,
body.app-role-member.member-page--3d #member3dComposerDock .member-period-total--on-bar {
  color: rgba(255, 255, 255, 0.88);
}

/* 3D-I01 / UX-12 — note + All Total row above composer (2D recall bar parity) */
body.app-role-member.member-page--3d #member3dComposerDock > .member-3d-composer-meta-bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border-top: none;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 0.22rem max(0.35rem, env(safe-area-inset-right, 0px)) 0.24rem
    max(0.35rem, env(safe-area-inset-left, 0px));
}

body.app-role-member.member-page--3d #member3dComposerDock > .member-3d-composer-meta-bar .member-recall-bar__lead {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.28rem;
}

body.app-role-member.member-page--3d #member3dComposerDock > .member-3d-composer-meta-bar .member-recall-bar__note {
  font-size: 0.62rem;
  white-space: nowrap;
}

body.app-role-member.member-page--3d #member3dComposerDock > .member-3d-composer-meta-bar .member-recall-bar__btn {
  max-width: 100%;
}

body.app-role-member.member-page--3d #member3dComposerDock > .member-3d-composer-meta-bar .member-recall-bar__total {
  flex: 0 0 auto;
}

body.app-role-member.member-page--3d
  #member3dComposerDock
  > .member-3d-composer-meta-bar
  .member-recall-bar__total.member-period-total--on-bar {
  color: #334155;
}

@media (max-width: 540px) {
  body.app-role-member.member-page--3d #member3dComposerDock > .member-3d-composer-meta-bar .member-recall-bar__total {
    padding-inline-end: max(1rem, calc(0.35rem + env(safe-area-inset-right, 0px)));
    font-size: 0.68rem;
  }
}

body.app-role-member.member-page--3d #member3dInputBarRow.member-input-bar-row--pill {
  background: transparent;
  border: none;
  box-shadow: none;
}

body.app-role-member.member-page--3d #member3dFldNumber .member-na-label,
body.app-role-member.member-page--3d #member3dFldAmount .member-na-label--amt,
body.app-role-member.member-page--3d #member3dFldNumber .member-na-value,
body.app-role-member.member-page--3d #member3dFldNumber .member-na-digit-slot,
body.app-role-member.member-page--3d #member3dFldAmount .member-na-value--amt,
body.app-role-member.member-page--3d #member3dFldAmount .member-na-value--amt-after-r,
body.app-role-member.member-page--3d #member3dRInlineBadge {
  color: #fff !important;
  text-shadow: var(--sys2d-glass-text-shadow) !important;
}

body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key,
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-numpad .member-kb-key,
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-numpad .member-kb-key:not(:disabled),
body.app-role-member.member-page--3d #member3dComposerDock #member3dSendBtn.member-composer-send,
body.app-role-member.member-page--3d #member3dComposerDock #member3dFldNumber,
body.app-role-member.member-page--3d #member3dComposerDock #member3dFldAmount {
  isolation: auto !important;
  overflow: hidden !important;
  background: var(--sys2d-glass-fill) !important;
  background-color: var(--sys2d-glass-fill) !important;
  background-image: none !important;
  border: 1px solid var(--sys2d-glass-border) !important;
  color: var(--sys2d-glass-text) !important;
  box-shadow: var(--sys2d-glass-shadow) !important;
  -webkit-backdrop-filter: var(--sys2d-glass-blur) !important;
  backdrop-filter: var(--sys2d-glass-blur) !important;
  text-shadow: var(--sys2d-glass-text-shadow) !important;
  filter: none !important;
}

body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key::before,
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key::after,
body.app-role-member.member-page--3d #member3dComposerDock #member3dSendBtn::before,
body.app-role-member.member-page--3d #member3dComposerDock #member3dSendBtn::after {
  display: none !important;
  content: none !important;
}

body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--tri.member-kb-key--tri-ready:not(:disabled):not(.member-kb-dim),
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--r.member-kb-key--r-ready:not(:disabled):not(.member-kb-dim),
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--enter.member-kb-key--enter-ready:not(.member-kb-dim),
body.app-role-member.member-page--3d #member3dComposerDock #member3dSendBtn.member-composer-send--ready:not(:disabled):not(.member-kb-dim) {
  background: var(--sys2d-glass-fill-hover) !important;
  background-color: var(--sys2d-glass-fill-hover) !important;
  border-color: var(--sys2d-glass-border-hover) !important;
  color: var(--sys2d-glass-text) !important;
  box-shadow: var(--sys2d-glass-shadow) !important;
}

body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key:hover:not(:disabled):not(.member-kb-dim),
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-numpad .member-kb-key:not(:disabled):hover {
  background: var(--sys2d-glass-fill-hover) !important;
  background-color: var(--sys2d-glass-fill-hover) !important;
  border-color: var(--sys2d-glass-border-hover) !important;
}

body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key:disabled,
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key.member-kb-dim:not(:disabled),
body.app-role-member.member-page--3d #member3dComposerDock #member3dSendBtn.member-kb-dim:not(:disabled) {
  background: rgba(255, 255, 255, 0.14) !important;
  background-color: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.52) !important;
  opacity: 1 !important;
}

body.app-role-member.member-page--3d #member3dComposerDock .member-kb-numpad {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

@media (max-width: 540px) {
  body.app-role-member #memberComposerDock.member-composer-dock .member-kb-key--enter,
  body.app-role-member #member3dComposerDock .member-kb-key--enter,
  body.app-role-member #member3dComposerDock .member-kb-key--enter-span {
    min-height: 2.24rem !important;
  }

  body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--num,
  body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-digit-grid > .member-kb-key,
  body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--num,
  body.app-role-member.member-page--3d #member3dComposerDock .member-kb-digit-grid--3d > .member-kb-key {
    min-height: 2.2rem !important;
  }

  body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-digit-grid,
  body.app-role-member.member-page--3d #member3dComposerDock .member-kb-digit-grid--3d {
    grid-template-rows: repeat(4, minmax(2.2rem, auto)) !important;
    gap: 0.18rem !important;
  }
}

/* UX-09w — 2D backspace white; 3D num/amt font +1 step, num right / amt left flush */
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--action[data-act="bk"],
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--action[data-act="bk"]:not(:disabled),
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-key--action[data-act="bk"].member-kb-key--bk-lit:not(:disabled),
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key--action[data-act="bk"]:not(:disabled),
body.app-role-member:not(.member-page--3d) #memberComposerDock.member-composer-dock .member-kb-numpad .member-kb-key--action.member-kb-key--bk-lit:not(:disabled) {
  color: #fff !important;
  background: var(--sys2d-glass-fill) !important;
  background-color: var(--sys2d-glass-fill) !important;
  background-image: none !important;
  border-color: var(--sys2d-glass-border) !important;
  text-shadow: var(--sys2d-glass-text-shadow) !important;
  filter: none !important;
}

body.app-role-member.member-page--3d #member3dFldNumber .member-na-label,
body.app-role-member.member-page--3d #member3dFldAmount .member-na-label--amt {
  font-size: 0.72rem !important;
  line-height: 1.1 !important;
}

body.app-role-member.member-page--3d #member3dFldNumber .member-na-value,
body.app-role-member.member-page--3d #member3dFldNumber .member-na-value-num-pair,
body.app-role-member.member-page--3d #member3dFldNumber .member-na-digit-slot,
body.app-role-member.member-page--3d #member3dFldAmount .member-na-value--amt,
body.app-role-member.member-page--3d #member3dFldAmount .member-na-value--amt-after-r,
body.app-role-member.member-page--3d #member3dRInlineBadge {
  font-size: 1.32rem !important;
  line-height: 1.15 !important;
}

body.app-role-member.member-page--3d #member3dFldNumber.member-na-number {
  padding: 0.06rem 0.1rem 0.06rem 0.16rem !important;
  text-align: right;
}

body.app-role-member.member-page--3d #member3dFldNumber .member-na-value-num-pair,
body.app-role-member.member-page--3d #member3dNumDisplay {
  justify-content: flex-end !important;
  text-align: right !important;
  width: 100%;
}

body.app-role-member.member-page--3d #member3dFldAmount.member-na-amount {
  padding: 0.06rem 0.16rem 0.06rem 0.1rem !important;
  text-align: left;
}

body.app-role-member.member-page--3d #member3dFldAmount .member-na-amt-line {
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100%;
}

body.app-role-member.member-page--3d #member3dFldAmount .member-na-value--amt,
body.app-role-member.member-page--3d #member3dFldAmount .member-na-value--amt-after-r {
  text-align: left !important;
}

/* UX-09x — 3D composer: glass-only R / bk / Send / Enter (no holo/mint/cyan) */
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--r,
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--r.member-kb-key--r-ready:not(:disabled):not(.member-kb-dim),
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--action[data-act="bk"],
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--action[data-act="bk"]:not(:disabled),
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--action.member-kb-key--bk-lit:not(:disabled),
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--enter,
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--enter-span,
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--enter.member-kb-key--enter-ready:not(.member-kb-dim),
body.app-role-member.member-page--3d #member3dComposerDock #member3dSendBtn.member-composer-send,
body.app-role-member.member-page--3d #member3dComposerDock #member3dSendBtn.member-composer-send--ready:not(:disabled):not(.member-kb-dim),
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--tri.member-kb-key--tri-ready:not(:disabled):not(.member-kb-dim),
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-numpad .member-kb-key--action[data-act="clear"]:not(:disabled),
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-numpad .member-kb-key--action[data-act="hide"]:not(:disabled) {
  background: var(--sys2d-glass-fill) !important;
  background-color: var(--sys2d-glass-fill) !important;
  background-image: none !important;
  border: 1px solid var(--sys2d-glass-border) !important;
  border-color: var(--sys2d-glass-border) !important;
  color: #fff !important;
  box-shadow: var(--sys2d-glass-shadow) !important;
  text-shadow: var(--sys2d-glass-text-shadow) !important;
  filter: none !important;
  opacity: 1 !important;
}

body.app-role-member.member-page--3d #member3dComposerDock #member3dSendBtn .member-composer-send__icon {
  color: inherit !important;
}

body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--r.member-kb-key--r-ready:not(:disabled):not(.member-kb-dim),
body.app-role-member.member-page--3d #member3dComposerDock #member3dSendBtn.member-composer-send--ready:not(:disabled):not(.member-kb-dim),
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--enter.member-kb-key--enter-ready:not(.member-kb-dim),
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--tri.member-kb-key--tri-ready:not(:disabled):not(.member-kb-dim) {
  background: var(--sys2d-glass-fill-hover) !important;
  background-color: var(--sys2d-glass-fill-hover) !important;
  border-color: var(--sys2d-glass-border-hover) !important;
}

/* UX-09x — 3D num/amt: +1 font step, edge flush */
body.app-role-member.member-page--3d #member3dFldNumber .member-na-value,
body.app-role-member.member-page--3d #member3dFldNumber .member-na-value-num-pair,
body.app-role-member.member-page--3d #member3dFldNumber .member-na-digit-slot,
body.app-role-member.member-page--3d #member3dFldAmount .member-na-value--amt,
body.app-role-member.member-page--3d #member3dFldAmount .member-na-value--amt-after-r,
body.app-role-member.member-page--3d #member3dRInlineBadge {
  font-size: 1.32rem !important;
}

body.app-role-member.member-page--3d #member3dFldNumber.member-na-number {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  padding: 0.04rem 0.08rem 0.04rem 0.12rem !important;
}

body.app-role-member.member-page--3d #member3dFldNumber .member-na-label {
  align-self: stretch !important;
  text-align: right !important;
  width: 100%;
}

body.app-role-member.member-page--3d #member3dFldAmount.member-na-amount {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 0.04rem 0.12rem 0.04rem 0.08rem !important;
}

body.app-role-member.member-page--3d #member3dFldAmount .member-na-label--amt {
  align-self: stretch !important;
  text-align: left !important;
  width: 100%;
}

/* UX-09z — 3D keyboard: taller keys + sit flush (2D #memberComposerDock rules isolated) */
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-digit-grid--3d {
  grid-template-rows: repeat(4, minmax(2.42rem, auto)) !important;
  gap: 0.2rem !important;
}

body.app-role-member.member-page--3d #member3dComposerDock .member-kb-digit-grid--3d > .member-kb-key {
  min-height: 2.42rem !important;
}

body.app-role-member.member-page--3d #member3dComposerDock .member-kb-numrow--r0e .member-kb-key,
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--num,
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--tri,
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--enter,
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--enter-span,
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--action,
body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--hide {
  min-height: 2.42rem !important;
}

body.app-role-member.member-page--3d #member3dNumPad.member-kb-numpad--3d {
  padding-top: 0.04rem !important;
  padding-bottom: max(0.04rem, env(safe-area-inset-bottom, 0px)) !important;
  gap: 0.2rem !important;
}

body.app-role-member.member-page--3d #member3dComposerDock > #member3dComposerInputBlock {
  margin-bottom: 0.04rem !important;
}

@media (max-width: 540px) {
  body.app-role-member.member-page--3d #member3dComposerDock .member-kb-key--num,
  body.app-role-member.member-page--3d #member3dComposerDock .member-kb-digit-grid--3d > .member-kb-key {
    min-height: 2.42rem !important;
  }

  body.app-role-member.member-page--3d #member3dComposerDock .member-kb-digit-grid--3d {
    grid-template-rows: repeat(4, minmax(2.42rem, auto)) !important;
  }
}

/* UX-20c — 2D large keys: beat UX-09v compact dock rules; visibly larger than default (~+35%). */
body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  .member-composer--keyboard-open
  .member-keyboard-panel:not(.member-keyboard-panel--collapsed),
body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock.member-composer--keyboard-open
  .member-keyboard-panel:not(.member-keyboard-panel--collapsed) {
  max-height: min(58dvh, 540px) !important;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  .member-kb-numpad {
  gap: 0.32rem !important;
  padding-top: 0.1rem !important;
  padding-bottom: calc(0.28rem + env(safe-area-inset-bottom, 0px)) !important;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  .member-kb-comment-rows,
body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  .member-kb-numrow {
  gap: 0.28rem !important;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  .member-kb-key--cat,
body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  .member-kb-numpad
  .member-kb-key--cat {
  min-height: 2.78rem !important;
  padding: 0.3rem 0.22rem !important;
  font-size: 0.86rem !important;
  line-height: 1.15 !important;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  .member-kb-numrow--r0e
  .member-kb-key,
body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  .member-kb-key--num,
body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  .member-kb-digit-grid
  > .member-kb-key--num {
  min-height: 3.05rem !important;
  font-size: 1.38rem !important;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  .member-kb-digit-grid {
  grid-template-rows: repeat(4, minmax(3rem, auto)) !important;
  gap: 0.4rem !important;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  .member-kb-digit-grid
  > .member-kb-key {
  min-height: 3rem !important;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  .member-kb-key--enter,
body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  .member-kb-key--action {
  min-height: 2.95rem !important;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  .member-kb-key__hint {
  font-size: 0.7rem !important;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  #memberKbGroupA
  .member-kb-key--cat[data-tag-group="K"] {
  font-size: 0.86rem !important;
}

body.app-role-member.member-kb-size-large:not(.member-page--3d)
  #memberComposerDock.member-composer-dock
  .member-kb-enter-icon {
  font-size: 1.95rem !important;
}

@media (max-width: 540px) {
  body.app-role-member.member-kb-size-large:not(.member-page--3d)
    #memberComposerDock.member-composer-dock
    .member-kb-key--num,
  body.app-role-member.member-kb-size-large:not(.member-page--3d)
    #memberComposerDock.member-composer-dock
    .member-kb-digit-grid
    > .member-kb-key,
  body.app-role-member.member-kb-size-large:not(.member-page--3d)
    #memberComposerDock.member-composer-dock
    .member-kb-digit-grid {
    min-height: 3rem !important;
    grid-template-rows: repeat(4, minmax(3rem, auto)) !important;
    gap: 0.4rem !important;
  }

  body.app-role-member.member-kb-size-large:not(.member-page--3d)
    #memberComposerDock.member-composer-dock
    .member-kb-numrow--r0e
    .member-kb-key {
    min-height: 3.05rem !important;
  }

  body.app-role-member.member-kb-size-large:not(.member-page--3d)
    #memberComposerDock.member-composer-dock
    .member-kb-key--cat {
    min-height: 2.78rem !important;
  }

  body.app-role-member.member-kb-size-large:not(.member-page--3d)
    #memberComposerDock.member-composer-dock
    .member-kb-key--enter {
    min-height: 2.95rem !important;
  }
}

/* UX-10v — 2D/3D MAIN: full browser width (body.sys2d-main-board-viewport from script.js) */
html:has(body.sys2d-main-board-viewport) {
  width: 100%;
  max-width: none;
  overflow-x: hidden;
}

body.sys2d-main-board-viewport.app-logged-in {
  width: 100%;
  max-width: none;
  /* UX-10w — global `stable both-edges` reserved side gutters; MAIN uses full width */
  scrollbar-gutter: auto;
  overflow-x: hidden;
}

body.sys2d-main-board-viewport.app-logged-in .app-shell,
body.sys2d-main-board-viewport.app-logged-in .container,
body.sys2d-main-board-viewport.app-logged-in #adminDashboard,
body.sys2d-main-board-viewport.app-logged-in #agentDashboard,
body.sys2d-main-board-viewport.app-logged-in .legacy-dashboard--admin,
body.sys2d-main-board-viewport.app-logged-in .legacy-dashboard--agent,
body.sys2d-main-board-viewport.app-logged-in .legacy-body--admin,
body.sys2d-main-board-viewport.app-logged-in .legacy-body--agent,
body.sys2d-main-board-viewport.app-logged-in .legacy-content,
body.sys2d-main-board-viewport.app-logged-in #adminMainBoardPage,
body.sys2d-main-board-viewport.app-logged-in #adminMainBoard3dPage,
body.sys2d-main-board-viewport.app-logged-in #agentMainBoardPage,
body.sys2d-main-board-viewport.app-logged-in #agentMainBoard3dPage,
body.sys2d-main-board-viewport.app-logged-in .sys3d-main-board-mount,
body.sys2d-main-board-viewport.app-logged-in #adminMainBoardPage > .main-board-shell,
body.sys2d-main-board-viewport.app-logged-in #agentMainBoardPage > .main-board-shell,
body.sys2d-main-board-viewport.app-logged-in #adminMainBoard3dPage .sys3d-board-shell.main-board-shell,
body.sys2d-main-board-viewport.app-logged-in #agentMainBoard3dPage .sys3d-board-shell.main-board-shell {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

body.sys2d-main-board-viewport.app-logged-in .app-shell,
body.sys2d-main-board-viewport.app-logged-in .container {
  width: 100vw !important;
  max-width: 100vw !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.sys2d-main-board-viewport.app-logged-in .legacy-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.sys2d-main-board-viewport.app-logged-in #adminDashboard,
body.sys2d-main-board-viewport.app-logged-in #agentDashboard {
  border: 0 !important;
  border-radius: 0 !important;
  background: #eef2f7;
}

body.sys2d-main-board-viewport.app-logged-in {
  background: #eef2f7;
}

body.sys2d-main-board-viewport.app-logged-in #adminMainBoardPage .main-board-four-grid,
body.sys2d-main-board-viewport.app-logged-in #agentMainBoardPage .main-board-four-grid,
body.sys2d-main-board-viewport.app-logged-in #adminMainBoard3dPage .main-board-four-grid,
body.sys2d-main-board-viewport.app-logged-in #agentMainBoard3dPage .main-board-four-grid {
  width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (min-width: 1024px) {
  body.sys2d-main-board-viewport.app-logged-in #adminMainBoardPage > .main-board-shell,
  body.sys2d-main-board-viewport.app-logged-in #agentMainBoardPage > .main-board-shell,
  body.sys2d-main-board-viewport.app-logged-in #adminMainBoard3dPage .sys3d-board-shell.main-board-shell:not(.sys3d-board-shell--purchaser-view):not(.sys3d-board-shell--purchaser-entry-active),
  body.sys2d-main-board-viewport.app-logged-in #agentMainBoard3dPage .sys3d-board-shell.main-board-shell:not(.sys3d-board-shell--purchaser-view):not(.sys3d-board-shell--purchaser-entry-active) {
    --main-board-shell-cols: minmax(12rem, 1.35fr) minmax(0, 6.25fr) minmax(8rem, 1.1fr);
    grid-template-columns: var(--main-board-shell-cols) !important;
    gap: 0.2rem;
  }

  body.sys2d-main-board-viewport.app-logged-in #adminMainBoardPage .main-board-main,
  body.sys2d-main-board-viewport.app-logged-in #agentMainBoardPage .main-board-main,
  body.sys2d-main-board-viewport.app-logged-in #adminMainBoard3dPage .main-board-main,
  body.sys2d-main-board-viewport.app-logged-in #agentMainBoard3dPage .main-board-main,
  body.sys2d-main-board-viewport.app-logged-in #adminMainBoardPage .main-board-aside,
  body.sys2d-main-board-viewport.app-logged-in #agentMainBoardPage .main-board-aside,
  body.sys2d-main-board-viewport.app-logged-in #adminMainBoardPage .main-board-side-sum,
  body.sys2d-main-board-viewport.app-logged-in #agentMainBoardPage .main-board-side-sum,
  body.sys2d-main-board-viewport.app-logged-in #adminMainBoard3dPage .sys3d-board-shell .main-board-aside,
  body.sys2d-main-board-viewport.app-logged-in #agentMainBoard3dPage .sys3d-board-shell .main-board-aside,
  body.sys2d-main-board-viewport.app-logged-in #adminMainBoard3dPage .sys3d-board-shell .main-board-side-sum,
  body.sys2d-main-board-viewport.app-logged-in #agentMainBoard3dPage .sys3d-board-shell .main-board-side-sum {
    border-radius: 4px;
    padding-left: 0.28rem;
    padding-right: 0.28rem;
  }
}