/* ==========================================================================
   CONNECT BY JBRH — FINAL UNIFIED V9
   Replaces: styles.css + premium-theme.css + corporate-polish.css
   Scope: owner workspace + tenant/customer workspace + day/dark + responsive
   ========================================================================== */

/* ==========================================================================
   CONNECT BY JBRH — UNIFIED ENTERPRISE UI V8
   Replaces BOTH: styles.css + premium-theme.css
   Source SHA256 styles.css: 24776a1c47cdd5e6c21091db2c9a6107235861f3f413dd2c65c249fc8ed1c220
   Source SHA256 premium-theme.css: 21026ebae0f03216ea215888548c318731dc1c4879bc09639548f9d11d50d952

   Design goals:
   - One cascade instead of two competing stylesheets
   - Strong day-mode hierarchy: dark rail / neutral canvas / white surfaces
   - Warm copper brand without generic blue-purple AI styling
   - WCAG-oriented text, control-boundary, focus and touch behavior
   - Existing selectors/modules preserved; V7 variable names retained for compatibility
   ========================================================================== */

/* ==========================================================================
   CONNECT BY JBRH — RESPONSIVE REFACTOR
   Rewritten from the supplied stylesheet.
   Goals: scoped component CSS, theme-safe tokens, semantic overflow guards,
   accessible focus/touch behavior, and canonical tablet/mobile layouts.
   ========================================================================== */

/* Connect by JBRH — control panel
   Warm-wood accent taken from the Presence Column, on a deep neutral shell. */

:root {
  --bg:        #0e1014;
  --bg-2:      #14171d;
  --panel:     #181c23;
  --panel-2:   #1e232b;
  --line:      #272d37;
  --line-soft: #20252d;

  --ink:       #e8ebf0;
  --ink-2:     #a6b0bf;
  --ink-3:     #6d7787;

  --accent:    #d08a4a;   /* warm wood */
  --accent-2:  #b8703a;
  --accent-ink:#1a1206;

  --ok:        #4ec9a0;
  --warn:      #e5b45c;
  --bad:       #e57373;
  --info:      #6fa8dc;

  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 8px 28px rgba(0,0,0,.42);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

img, picture, video, canvas {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2b323d; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ shell */
#app { display: grid; grid-template-columns: 232px 1fr; height: 100vh; }

.rail {
  background: var(--bg-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 18px 16px 14px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 700; font-size: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 15px; letter-spacing: .2px; }
.brand-text span { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .09em; }

nav { flex: 1; overflow-y: auto; padding: 6px 10px 16px; }
nav a {
  display: flex; align-items: center; gap: 10px; position: relative;
  padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink-2);
  font-size: 13.5px; margin-bottom: 1px; transition: background .12s, color .12s;
}
nav a:hover { background: #1c212a; color: var(--ink); }
nav a.on { background: #23282f; color: var(--ink); font-weight: 550; }
nav a.on::before {
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
  background: var(--accent); border-radius: 0 3px 3px 0;
}
.rail-sep {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-3); padding: 16px 10px 6px;
}
.pip {
  margin-left: auto; min-width: 20px; text-align: center; font-size: 11px;
  background: #2c333d; color: var(--ink-2); border-radius: 20px; padding: 1px 6px;
}
.pip:empty { display: none; }
.pip.warn { background: rgba(229,180,92,.16); color: var(--warn); }

.rail-foot { padding: 12px; border-top: 1px solid var(--line); }
.power { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.power-row { display: flex; align-items: center; justify-content: space-between; }
.power-label { font-size: 13px; font-weight: 600; }
.power-state { font-size: 11.5px; color: var(--ink-3); margin: 6px 0 10px; }
.power-state.on { color: var(--ok); }
.power-state.stopped { color: var(--bad); }

/* switch */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch input:focus-visible + span {
  outline: 2px solid var(--focus-ring, var(--accent));
  outline-offset: 3px;
}
.switch span {
  position: absolute; inset: 0; background: #333a45; border-radius: 22px; transition: .18s;
  pointer-events: none;
}
.switch span::before {
  content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
  background: #cfd6e0; border-radius: 50%; transition: .18s;
}
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::before { transform: translateX(18px); background: #fff; }

/* ----------------------------------------------------------------- stage */
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  height: 54px; flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; border-bottom: 1px solid var(--line); background: rgba(20,23,29,.7);
  backdrop-filter: blur(8px);
}
.crumb { font-size: 15px; font-weight: 600; letter-spacing: .1px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.live { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.live b { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); transition: background .2s; }
.live.on b { background: var(--ok); box-shadow: 0 0 0 3px rgba(78,201,160,.16); }

.view { flex: 1; overflow-y: auto; padding: 22px; min-height: 0; }
.view.flush { padding: 0; }

/* --------------------------------------------------------------- widgets */
.grid { display: grid; gap: 14px; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2,1fr);} .g3,.g2 { grid-template-columns: 1fr; } }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
}
.card h3 {
  margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3);
  font-weight: 600;
}
.card.pad0 { padding: 0; }

.tile { display: flex; flex-direction: column; gap: 2px; }
.tile .n { font-size: 28px; font-weight: 650; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.tile .l { font-size: 12px; color: var(--ink-3); }
.tile.ok .n { color: var(--ok); } .tile.warn .n { color: var(--warn); }
.tile.bad .n { color: var(--bad); } .tile.acc .n { color: var(--accent); }

.btn {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  padding: 7px 13px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background .12s, border-color .12s, transform .06s; font-size: 13px;
}
.btn:hover { background: #262c35; border-color: #333b47; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 550; }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.danger { background: rgba(229,115,115,.1); border-color: rgba(229,115,115,.32); color: #f0a0a0; }
.btn.danger:hover { background: rgba(229,115,115,.2); }
.btn.ok { background: rgba(78,201,160,.11); border-color: rgba(78,201,160,.32); color: #7fdcbd; }
.btn.ghost { background: transparent; }
.btn.tiny { padding: 4px 9px; font-size: 12px; }
.btn.full { width: 100%; margin-top: 4px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1; }

label.field { display: block; margin-bottom: 12px; }
label.field > span {
  display: block; font-size: 11.5px; color: var(--ink-3); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .07em;
}
input[type=text], input[type=number], input[type=password], input[type=email], textarea, select {
  width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 11px; outline: none; transition: border-color .12s;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 84px; font-family: var(--sans); line-height: 1.6; }
textarea.mono { font-family: var(--mono); font-size: 12.5px; }
.hint { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.check { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.check span { font-size: 13.5px; }

.tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 8px;
  border-radius: 20px; background: #262c35; color: var(--ink-2); white-space: nowrap;
}
.tag.ok { background: rgba(78,201,160,.13); color: var(--ok); }
.tag.warn { background: rgba(229,180,92,.13); color: var(--warn); }
.tag.bad { background: rgba(229,115,115,.13); color: var(--bad); }
.tag.info { background: rgba(111,168,220,.13); color: var(--info); }
.tag.acc { background: rgba(208,138,74,.14); color: var(--accent); }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line);
}
td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #1b2029; }

.empty { text-align: center; padding: 48px 20px; color: var(--ink-3); }
.empty b { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 6px; font-weight: 600; }

/* --------------------------------------------------------------- inbox */
.split { display: grid; grid-template-columns: 340px 1fr; height: 100%; min-height: 0; }
.split > * { min-height: 0; overflow-y: auto; }
.thread-list { border-right: 1px solid var(--line); }
.tl-head { padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 2; }
.tl-item { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.tl-item:hover { background: #1a1f27; }
.tl-item.on { background: #1f242d; box-shadow: inset 3px 0 0 var(--accent); }
.tl-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tl-from { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-time { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.tl-subj { font-size: 13px; color: var(--ink-2); margin: 2px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-prev { font-size: 12px; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-tags { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }

.thread-pane { padding: 20px 24px 40px; }
.th-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 18px; }
.th-head h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }

.thread-pane .msg { margin-bottom: 16px; display: flex; gap: 12px; }
.thread-pane .msg .av {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; background: #2a313b; color: var(--ink-2);
}
.thread-pane .msg.out .av { background: rgba(208,138,74,.18); color: var(--accent); }
.thread-pane .msg-body { flex: 1; min-width: 0; }
.thread-pane .msg-meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; flex-wrap: wrap; }
.thread-pane .msg-meta b { font-size: 13px; }
.thread-pane .msg-meta span { font-size: 11px; color: var(--ink-3); }
.thread-pane .msg-text {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  white-space: pre-wrap; word-break: break-word; font-size: 13.5px; line-height: 1.62;
}
.thread-pane .msg.out .msg-text { background: #1c1f22; border-color: #2c3038; }

.draft-box { border: 1px solid var(--accent); border-radius: var(--radius); overflow: hidden; margin-top: 22px; }
.draft-head {
  background: rgba(208,138,74,.1); padding: 10px 14px; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; border-bottom: 1px solid rgba(208,138,74,.25);
}
.draft-head b { font-size: 13px; }
.draft-body { padding: 14px; }
.draft-body textarea { min-height: 200px; }
.countdown { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12px; color: var(--warn); }

/* --------------------------------------------------------------- stream */
.stream { max-height: 420px; overflow-y: auto; margin: -4px -4px 0; }
.ev { display: flex; gap: 10px; padding: 7px 8px; border-radius: 7px; font-size: 12.5px; align-items: baseline; }
.ev:hover { background: #1c2129; }
.ev .t { color: var(--ink-3); font-family: var(--mono); font-size: 11px; flex: none; }
.ev .d { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--ink-3); transform: translateY(-1px); }
.ev.success .d { background: var(--ok); } .ev.warn .d { background: var(--warn); }
.ev.error .d { background: var(--bad); } .ev.info .d { background: var(--info); }
.ev .m { flex: 1; color: var(--ink-2); word-break: break-word; }

/* ----------------------------------------------------------------- chat */
.chat-wrap { display: flex; flex-direction: column; height: 100%; }
.chat-log { flex: 1; overflow-y: auto; padding: 20px 22px; }
.bubble { max-width: 720px; margin-bottom: 14px; }
.bubble .who { font-size: 11px; color: var(--ink-3); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .07em; }
.bubble .txt {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px;
  white-space: pre-wrap; font-size: 13.5px; line-height: 1.62;
}
.bubble.me { margin-left: auto; }
.bubble.me .txt { background: rgba(208,138,74,.11); border-color: rgba(208,138,74,.3); }
.bubble.me .who { text-align: right; }
.chat-input { flex: none; border-top: 1px solid var(--line); padding: 12px 22px; display: flex; gap: 10px; align-items: flex-end; }
.chat-input textarea { min-height: 44px; max-height: 160px; }

/* -------------------------------------------------------------- helpers */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.checklist li:last-child { border-bottom: none; }
.checklist .mk { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #2b323d; color: var(--ink-3); }
.checklist li.done .mk { background: rgba(78,201,160,.16); color: var(--ok); }
.checklist .cl-t { font-size: 13.5px; }
.checklist .cl-s { font-size: 11.5px; color: var(--ink-3); }
.checklist a { color: var(--accent); }

.banner {
  display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: var(--radius);
  margin-bottom: 16px; font-size: 13px; border: 1px solid;
}
.banner.warn { background: rgba(229,180,92,.08); border-color: rgba(229,180,92,.3); color: #f0d5a0; }
.banner.bad  { background: rgba(229,115,115,.08); border-color: rgba(229,115,115,.32); color: #f2b0b0; }
.banner.ok   { background: rgba(78,201,160,.07); border-color: rgba(78,201,160,.28); color: #a5e6d0; }

.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 90; }
.toast {
  background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  padding: 10px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: 13px;
  max-width: 380px; animation: slide .18s ease-out;
}
.toast.ok { border-left-color: var(--ok); } .toast.bad { border-left-color: var(--bad); }
@keyframes slide { from { opacity: 0; transform: translateX(14px);} to { opacity: 1; transform: none; } }

.modal-back {
  position: fixed; inset: 0; background: rgba(6,8,11,.66); display: grid; place-items: center; z-index: 100;
  padding: 20px; backdrop-filter: blur(2px);
}
.modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  width: min(620px, 100%); max-height: 88vh; overflow-y: auto;
}
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { margin: 0; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.modal-body { padding: 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.x { background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 20px; line-height: 1; padding: 0 4px; }
.x:hover { color: var(--ink); }

.provider-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--panel); }
.provider-card.on { border-color: var(--accent); background: linear-gradient(180deg, rgba(208,138,74,.06), transparent); }
.provider-card h4 { margin: 0 0 3px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.provider-card p { margin: 0 0 12px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 5px 12px; font-size: 13px; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; }

i[data-ico] { width: 15px; height: 15px; flex: none; display: inline-block; opacity: .8; background: currentColor;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.mono { font-family: var(--mono); }
.small { font-size: 12px; }
.muted { color: var(--ink-3); }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------ mailboxes */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.page-head h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.page-head p { margin: 0; max-width: 62ch; }

.mb-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); }
@media (max-width: 900px) { .mb-grid { grid-template-columns: 1fr; } }

.mb-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
  border-left: 3px solid var(--line); transition: border-color .15s;
}
.mb-card.connected       { border-left-color: var(--ok); }
.mb-card.reauth_required { border-left-color: var(--warn); }
.mb-card.error           { border-left-color: var(--bad); }
.mb-card.disabled        { opacity: .74; }
.mb-card.not_configured,
.mb-card.untested        { border-left-color: var(--info); }

.mb-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.mb-id { min-width: 0; }
.mb-addr {
  font-size: 15px; font-weight: 600; letter-spacing: .1px; word-break: break-all; line-height: 1.3;
}
.mb-name { margin-top: 2px; }
.mb-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }

.mb-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.mb-error {
  background: rgba(229, 115, 115, .07); border: 1px solid rgba(229, 115, 115, .26);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.mb-error-msg { font-size: 13px; color: #f0b8b8; line-height: 1.55; }
.linky {
  background: none; border: none; padding: 4px 0 0; cursor: pointer;
  color: var(--ink-3); font-size: 11.5px; text-decoration: underline; text-underline-offset: 2px;
}
.linky:hover { color: var(--ink-2); }
.diag {
  margin: 8px 0 0; padding: 10px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; font-family: var(--mono); font-size: 11px; line-height: 1.55;
  color: var(--ink-3); white-space: pre-wrap; word-break: break-all; max-height: 240px; overflow: auto;
}
.diag-details { margin-top: 8px; }
.diag-details summary {
  cursor: pointer; font-size: 11.5px; color: var(--ink-3); list-style: none;
  text-decoration: underline; text-underline-offset: 2px;
}
.diag-details summary::-webkit-details-marker { display: none; }
.diag-details summary:hover { color: var(--ink-2); }

.mb-cta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(229, 180, 92, .07); border: 1px solid rgba(229, 180, 92, .26);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.mb-cta .small { flex: 1; min-width: 180px; }

.mb-actions {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: auto;
}
.switch.small-switch { width: 34px; height: 19px; }
.switch.small-switch span::before { height: 13px; width: 13px; }
.switch.small-switch input:checked + span::before { transform: translateX(15px); }

.mb-result { display: none; }
.mb-result.show {
  display: block; font-size: 12.5px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg); line-height: 1.55;
}
.mb-result.ok      { border-color: rgba(78, 201, 160, .3);  color: #a5e6d0; }
.mb-result.bad     { border-color: rgba(229, 115, 115, .3); color: #f0b8b8; }
.mb-result.pending { color: var(--ink-3); }
.mb-result.pending::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px;
  border: 2px solid var(--ink-3); border-top-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite; vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.copyline {
  display: flex; gap: 8px; align-items: center; margin-top: 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px;
}
.copyline code {
  flex: 1; font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  word-break: break-all; line-height: 1.5;
}

.banner.dup { align-items: flex-start; }
.dup-row {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer;
}
.dup-row:hover { background: #1c212a; }
.dup-row input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.dup-body { flex: 1; min-width: 0; }
.dup-body .row { gap: 6px; margin-bottom: 3px; }

.check.radio { align-items: flex-start; padding: 9px 0; }
.check.radio input { margin-top: 2px; }

.steps { margin: 0 0 18px; padding-left: 20px; }
.steps li { margin-bottom: 10px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.steps a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.empty.card { border-style: dashed; }

/* ------------------------------------------------------------- responsive */
/* The shell is a fixed two-column grid on desktop. Below this width the rail
   becomes a horizontal strip so the whole width belongs to the content. */
@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100vh; }

  .rail {
    flex-direction: row; align-items: center; gap: 8px;
    border-right: none; border-bottom: 1px solid var(--line);
    padding: 8px 10px; overflow: hidden;
  }
  .brand { padding: 0; flex: none; }
  .brand-text { display: none; }

  nav {
    flex: 1; display: flex; gap: 4px; padding: 0;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  nav::-webkit-scrollbar { display: none; }
  nav a { white-space: nowrap; padding: 7px 11px; margin: 0; }
  nav a.on::before { left: 0; right: 0; top: auto; bottom: -8px; width: auto; height: 2px; border-radius: 2px 2px 0 0; }
  .rail-sep { display: none; }
  .pip { margin-left: 4px; }

  .rail-foot { border-top: none; padding: 0; flex: none; }
  .power { display: flex; align-items: center; gap: 10px; padding: 6px 10px; }
  .power-label, .power-state { display: none; }
  .power .btn.full { width: auto; margin: 0; white-space: nowrap; }

  .topbar { padding: 0 14px; height: 48px; }
  .crumb { font-size: 14px; }
  .topbar-right .live { display: none; }
  .view { padding: 14px; }

  .mb-grid { grid-template-columns: 1fr; }
  .mb-addr { font-size: 14px; }
  .mb-actions .btn { flex: 1 1 auto; }

  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .row { justify-content: flex-start; }

  /* The inbox is a two-pane layout; stack it and let the page scroll. */
  .split { grid-template-columns: 1fr; height: auto; }
  .split > * { overflow-y: visible; }
  .thread-list { border-right: none; border-bottom: 1px solid var(--line); max-height: 44vh; overflow-y: auto; }
  .thread-pane { padding: 16px 14px 32px; }

  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 8px; }
  .modal-back { padding: 0; align-items: flex-start; }
  .modal { max-height: 100vh; border-radius: 0; width: 100%; }
  .toasts { left: 12px; right: 12px; bottom: 12px; }
  .toast { max-width: none; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 460px) {
  .mb-top { flex-direction: column; gap: 8px; }
  .mb-badges { justify-content: flex-start; }
  .mb-actions { gap: 6px; }
  .copyline { flex-direction: column; align-items: stretch; }
  .copyline .btn { width: 100%; }
}

/* ---------------------------------------------------------------- manager */
/* Two columns: the conversation, and a side rail carrying the orb above the
   live task board. The rail is a fixed width so the board never reflows
   while steps stream into it. */
.mgr { display: grid; grid-template-columns: 1fr 380px; height: 100%; min-height: 0; }
.mgr-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mgr-chat .banner { margin: 14px 18px 0; }

/* The reading column. Generous gutters and a measure that stays comfortable
   however wide the window gets — long lines are what make a log feel cheap. */
.mgr-log {
  flex: 1; overflow-y: auto; padding: 28px 32px 36px; scroll-behavior: smooth;
  background:
    radial-gradient(900px 380px at 50% -8%, rgba(208,138,74,.055), transparent 70%),
    var(--bg);
}
.mgr-stream { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }

.mgr-input {
  border-top: 1px solid var(--line); padding: 14px 20px 16px;
  background: linear-gradient(180deg, var(--bg-2), #11141a);
}
.mgr-input textarea {
  flex: 1; resize: none; padding: 12px 14px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--panel);
  min-height: 48px; max-height: 200px; line-height: 1.55;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.mgr-input textarea:focus {
  outline: none; border-color: rgba(208,138,74,.55);
  box-shadow: 0 0 0 3px rgba(208,138,74,.12);
}
.mgr-modebar { display: flex; gap: 6px; align-items: center; margin-bottom: 11px; flex-wrap: wrap; }

/* ---------------------------------------------------------- one message */
/* Two columns: a 34px avatar gutter and the content. The user's messages
   mirror the same grid rather than using a second set of rules, so the two
   sides can never drift apart. */
.mgr .msg {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px;
  align-items: start;
  animation: msg-in .32s cubic-bezier(.22, .9, .3, 1) both;
}
.mgr .msg.from-you { grid-template-columns: minmax(0, 1fr) 34px; }
.mgr .msg.from-you .msg-avatar { order: 2; }
.mgr .msg.from-you .msg-col { order: 1; align-items: flex-end; }
.mgr .msg.from-you .msg-meta { flex-direction: row-reverse; }

@keyframes msg-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.mgr .msg-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

/* Metadata in mono, small and wide-tracked — the console voice of the panel. */
.mgr .msg-meta {
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.mgr .msg-who { color: var(--ink-2); font-weight: 600; }
.mgr .msg.from-bot .msg-who { color: var(--accent); }
.mgr .msg-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.mgr .msg-steps {
  padding: 1px 7px; border-radius: 999px; letter-spacing: .08em;
  background: rgba(111,168,220,.12); color: var(--info);
}

/* The avatar. The manager's echoes the presence orb, so the thing you talk to
   and the thing you watch working read as one character. */
.mgr .msg-avatar {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); background: var(--panel); border: 1px solid var(--line);
  flex: none; user-select: none;
}
.mgr .msg-avatar.bot { border-color: rgba(208,138,74,.4); background: rgba(208,138,74,.08); }
.mgr .msg-avatar.bot span {
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f2ab6a, var(--accent) 46%, var(--accent-2) 100%);
  box-shadow: 0 0 11px rgba(208,138,74,.5);
}

/* The bubble itself. Roomy padding and a 1.7 line-height are most of what
   makes long operational answers readable. */
.mgr .msg-body {
  padding: 15px 18px; border-radius: 14px; font-size: 14.5px; line-height: 1.7;
  color: var(--ink); background: var(--panel-2); border: 1px solid var(--line);
  max-width: 100%; overflow-wrap: anywhere;
}
.mgr .msg.from-bot .msg-body { border-top-left-radius: 5px; }
.mgr .msg.from-you .msg-body {
  border-top-right-radius: 5px;
  background: linear-gradient(180deg, rgba(208,138,74,.13), rgba(208,138,74,.07));
  border-color: rgba(208,138,74,.32);
}
.mgr .msg-body p { margin: 0 0 11px; }
.mgr .msg-body p:last-child { margin-bottom: 0; }
.mgr .msg-body ul, .mgr .msg-body ol { margin: 0 0 11px; padding-left: 20px; }
.mgr .msg-body ul:last-child, .mgr .msg-body ol:last-child { margin-bottom: 0; }
.mgr .msg-body li { margin-bottom: 5px; }
.mgr .msg-body li::marker { color: var(--accent); }
.mgr .msg-body strong { color: var(--ink); font-weight: 600; }
.mgr .msg-body code {
  font-family: var(--mono); font-size: .87em; padding: 1px 6px; border-radius: 5px;
  background: rgba(0,0,0,.32); border: 1px solid var(--line); color: #f0c193;
}
.mgr .msg-body a { color: var(--info); text-decoration: underline; text-underline-offset: 2px; }

/* Per-message actions, kept out of sight until wanted. */
.mgr .msg-tools { display: flex; gap: 4px; margin-top: 6px; opacity: 0; transition: opacity .18s ease; }
.mgr .msg:hover .msg-tools, .mgr .msg:focus-within .msg-tools { opacity: 1; }
.mgr .msg-tool {
  border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 6px;
}
.mgr .msg-tool:hover { color: var(--ink); background: var(--panel); }

/* Date rule between days. */
.mgr .msg-day { display: flex; align-items: center; gap: 14px; margin: 4px 0; color: var(--ink-3); }
.mgr .msg-day::before, .mgr .msg-day::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.mgr .msg-day span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}

/* Waiting on the model. */
.mgr .msg.thinking .msg-body { padding: 17px 18px; }
.mgr .dots { display: inline-flex; gap: 5px; }
.mgr .dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
  animation: dot-bob 1.1s ease-in-out infinite;
}
.mgr .dots i:nth-child(2) { animation-delay: .16s; }
.mgr .dots i:nth-child(3) { animation-delay: .32s; }
@keyframes dot-bob {
  0%, 80%, 100% { opacity: .3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-4px); }
}

.task.flash { animation: task-flash 1.2s ease; }
@keyframes task-flash {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 2px var(--accent); }
}

.chip {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer;
}
.chip:hover { border-color: #3a434f; color: var(--ink); }
.chip.on { background: rgba(208,138,74,.14); border-color: var(--accent); color: #f0c193; }

.mgr-welcome { max-width: 620px; margin: 44px auto; text-align: center; color: var(--ink-2); }
.welcome-orb {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 20px;
  background: radial-gradient(circle at 34% 30%, #f2ab6a, var(--accent) 46%, var(--accent-2) 100%);
  box-shadow: 0 0 34px rgba(208,138,74,.42);
  animation: orb-breathe 4.5s ease-in-out infinite;
}
.mgr-welcome h3 {
  font-size: 22px; margin: 0 0 10px; color: var(--ink);
  font-weight: 600; letter-spacing: -.2px;
}
.mgr-welcome p { font-size: 13.5px; line-height: 1.7; margin: 0 auto 22px; max-width: 470px; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* --- presence ---------------------------------------------------------- */
.mgr-side {
  border-left: 1px solid var(--line); background: var(--bg-2);
  display: flex; flex-direction: column; min-height: 0;
}
.rail-full { display: flex; flex-direction: column; min-height: 0; flex: 1; }

/* --- open / closed ------------------------------------------------------ */
/* Closed, the rail keeps a 48px strip rather than vanishing: the orb stays on
   screen, and there is an obvious place to click to get the board back.

   The column swap is deliberately NOT transitioned. Animating
   grid-template-columns across `fr` units does not reliably settle — it can
   leave the track stuck at the end value, which showed up here as a 380px
   board squeezed into 48px. The panel snaps; its contents fade instead. */
.mgr.rail-closed { grid-template-columns: 1fr 48px; }
.mgr.rail-closed .rail-full { display: none; }
.mgr.rail-closed .rail-strip { display: flex; }
.rail-full, .mgr.rail-closed .rail-strip { animation: rail-in .22s ease both; }
@keyframes rail-in { from { opacity: 0; } to { opacity: 1; } }

.rail-strip {
  display: none; flex-direction: column; align-items: center; gap: 14px;
  width: 100%; height: 100%; padding: 18px 0; cursor: pointer;
  background: transparent; border: 0; color: var(--ink-3);
}
.rail-strip:hover { background: var(--panel); color: var(--ink-2); }
.strip-orb {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, #f2ab6a, var(--accent) 46%, var(--accent-2) 100%);
  box-shadow: 0 0 12px rgba(208,138,74,.5);
  animation: orb-breathe 4.5s ease-in-out infinite;
}
.strip-orb[data-state="working"] { animation-duration: 1.4s; }
.strip-orb[data-state="waiting"] {
  background: radial-gradient(circle at 34% 30%, #f5d79a, var(--warn) 50%, #c9963d 100%);
  box-shadow: 0 0 14px rgba(229,180,92,.55); animation: orb-blink 1.1s ease-in-out infinite;
}
.strip-orb[data-state="error"] {
  background: radial-gradient(circle at 34% 30%, #f0a5a5, var(--bad) 55%, #a94b4b 100%);
}
.strip-label {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
}
.strip-chev { margin-top: auto; font-size: 17px; line-height: 1; opacity: .6; }
.strip-pip {
  min-width: 18px; padding: 1px 5px; border-radius: 999px;
  background: var(--warn); color: #241a05;
  font-size: 10.5px; font-weight: 700; line-height: 1.5;
}
.rail-strip.urgent { color: var(--warn); }
.rail-strip.urgent .strip-label { color: var(--warn); }

.rail-close {
  position: absolute; top: 10px; right: 10px;
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--ink-3);
  font-size: 17px; line-height: 1;
}
.rail-close:hover { background: var(--panel); border-color: var(--line); color: var(--ink); }

.orb-wrap {
  position: relative;
  padding: 22px 16px 16px; text-align: center; border-bottom: 1px solid var(--line);
}
.orb { position: relative; width: 108px; height: 108px; margin: 0 auto 12px; }
.orb-core {
  position: absolute; inset: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f2ab6a, var(--accent) 45%, var(--accent-2) 100%);
  box-shadow: 0 0 24px rgba(208,138,74,.45);
  animation: orb-breathe 4.5s ease-in-out infinite;
}
.orb-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(208,138,74,.34); opacity: 0;
}
.orb-bars {
  position: absolute; inset: auto 0 -4px 0; display: none;
  justify-content: center; align-items: flex-end; gap: 3px; height: 18px;
}
.orb-bars b { width: 3px; height: 5px; border-radius: 2px; background: var(--accent); }

@keyframes orb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes orb-pulse   { 0% { transform: scale(.75); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes orb-spin    { to { transform: rotate(360deg); } }
@keyframes orb-blink   { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes orb-bar     { 0%, 100% { height: 4px; } 50% { height: 17px; } }

/* thinking — slow concentric pulses */
.orb[data-state="thinking"] .orb-ring { animation: orb-pulse 2.4s ease-out infinite; opacity: 1; }
.orb[data-state="thinking"] .r2 { animation-delay: .8s; }
.orb[data-state="thinking"] .r3 { animation-delay: 1.6s; }

/* working — a dashed ring spins around a faster core */
.orb[data-state="working"] .orb-core { animation-duration: 1.4s; }
.orb[data-state="working"] .r1 {
  opacity: 1; border-style: dashed; border-width: 2px;
  border-color: var(--accent); animation: orb-spin 2.6s linear infinite;
}
.orb[data-state="working"] .r2 { opacity: 1; animation: orb-pulse 1.6s ease-out infinite; }

/* waiting — amber and blinking, so it reads as "stopped, needs you" */
.orb[data-state="waiting"] .orb-core {
  background: radial-gradient(circle at 35% 30%, #f5d79a, var(--warn) 50%, #c9963d 100%);
  box-shadow: 0 0 26px rgba(229,180,92,.5); animation: orb-blink 1.1s ease-in-out infinite;
}
.orb[data-state="waiting"] .orb-ring { border-color: rgba(229,180,92,.5); opacity: 1; }

/* speaking — a small level meter */
.orb[data-state="speaking"] .orb-bars { display: flex; }
.orb[data-state="speaking"] .orb-bars b { animation: orb-bar .5s ease-in-out infinite; }
.orb[data-state="speaking"] .orb-bars b:nth-child(2) { animation-delay: .1s; }
.orb[data-state="speaking"] .orb-bars b:nth-child(3) { animation-delay: .2s; }
.orb[data-state="speaking"] .orb-bars b:nth-child(4) { animation-delay: .3s; }
.orb[data-state="speaking"] .orb-bars b:nth-child(5) { animation-delay: .4s; }

.orb[data-state="error"] .orb-core {
  background: radial-gradient(circle at 35% 30%, #f0a5a5, var(--bad) 55%, #a94b4b 100%);
  box-shadow: 0 0 22px rgba(229,115,115,.45);
}

.orb-name { font-size: 14px; font-weight: 600; }
.orb-caption { font-size: 11.5px; color: var(--ink-3); min-height: 17px; margin-bottom: 8px; }
.orb-meta { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .orb-core, .orb-ring, .orb-bars b, .welcome-orb, .msg, .dots i, .task.flash,
  .strip-orb, .rail-full, .rail-strip {
    animation: none;
  }
  .mgr-log { scroll-behavior: auto; }
  .orb[data-state="thinking"] .orb-ring, .orb[data-state="working"] .r1 { opacity: 1; }
}

/* --- task board -------------------------------------------------------- */
.board-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px;
}
.board { flex: 1; overflow-y: auto; padding: 12px; min-height: 0; }
.task {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 11px 12px; margin-bottom: 11px;
}
.task.awaiting_confirm { border-color: rgba(229,180,92,.5); }
.task.failed { border-color: rgba(229,115,115,.4); }
.task-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.task-plan { margin: 8px 0 4px; padding-left: 18px; font-size: 11.5px; color: var(--ink-3); }
.task-plan li { margin-bottom: 2px; }
.task-result {
  margin-top: 9px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--panel-2); font-size: 12.5px; line-height: 1.5; white-space: pre-wrap;
}

.steps { margin-top: 9px; display: flex; flex-direction: column; gap: 7px; }
.step { border-left: 2px solid var(--line); padding: 5px 0 5px 9px; font-size: 12px; }
.step.done { border-left-color: var(--ok); }
.step.failed { border-left-color: var(--bad); }
.step.running { border-left-color: var(--info); }
.step.awaiting_confirm { border-left-color: var(--warn); }
.step.denied, .step.skipped { border-left-color: var(--ink-3); opacity: .65; }
.step-top { display: flex; align-items: center; gap: 6px; }
.step-ico { width: 14px; text-align: center; color: var(--ink-3); }
.step.done .step-ico { color: var(--ok); }
.step.failed .step-ico { color: var(--bad); }
.step.awaiting_confirm .step-ico { color: var(--warn); }
.step-tool { font-size: 11.5px; color: var(--ink-2); }
.tiny-tag { font-size: 9.5px; padding: 1px 5px; }
.step-thought { color: var(--ink-3); margin-top: 3px; line-height: 1.45; }
.step-args { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; word-break: break-all; }
.step-out {
  margin-top: 5px; padding: 6px 8px; background: var(--bg); border-radius: var(--radius-sm);
  font-size: 10.5px; color: var(--ink-2); white-space: pre-wrap; max-height: 150px; overflow-y: auto;
}
.step-err {
  margin-top: 5px; padding: 6px 8px; border-radius: var(--radius-sm);
  background: rgba(229,115,115,.09); color: #f2b0b0; font-size: 11px;
}
.step-confirm {
  margin-top: 6px; padding: 8px 9px; border-radius: var(--radius-sm);
  background: rgba(229,180,92,.09); border: 1px solid rgba(229,180,92,.28);
}
.step-media { margin-top: 7px; }
.step-media img, .step-video { width: 100%; border-radius: var(--radius-sm); display: block; }

/* --- phone -------------------------------------------------------------- */
.phone { display: flex; flex-direction: column; }
.phone-log {
  min-height: 230px; max-height: 300px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; display: flex; flex-direction: column; gap: 9px;
}
.phone-log.tall { max-height: 380px; }
.phone-line { display: flex; gap: 9px; align-items: baseline; font-size: 13px; line-height: 1.55; }
.phone-line b {
  flex: none; width: 42px; text-align: right;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.phone-line.maya b { color: var(--accent); }
.phone-line.maya span { color: var(--ink); }
.phone-line.you span, .phone-line.caller span { color: var(--ink-2); }
.phone-line.system {
  font-size: 11.5px; color: var(--warn); font-style: italic;
  padding-left: 51px; opacity: .85;
}
.phone-line.system b { display: none; }
.phone-line i { font-style: normal; font-size: 10px; color: var(--ink-3); font-family: var(--mono); }

.webhook {
  margin: 12px 0; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--line-soft);
}
.webhook code {
  display: block; font-size: 11px; color: #f0c193; word-break: break-all; margin-top: 3px;
}

/* --- teams -------------------------------------------------------------- */
.pipeline {
  display: flex; align-items: stretch; gap: 6px; margin: 14px 0 18px;
  padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.pipe-step { flex: 1; text-align: center; }
.pipe-step b {
  display: block; font-size: 21px; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.pipe-step span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.pipe-step:last-child b, .pipe-step:nth-child(7) b { color: var(--ok); }
.pipe-arrow { align-self: center; color: var(--ink-3); font-size: 15px; }

.team-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 15px 16px; margin-bottom: 14px;
}
.team-card.off { opacity: .55; }
.team-card h4 { margin: 0; font-size: 14.5px; }
.team-tools { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.team-tools .tag { font-size: 9.5px; padding: 1px 6px; }

.rubric { margin-top: 10px; }
.rubric summary {
  cursor: pointer; font-size: 12.5px; color: var(--ink-2);
  padding: 6px 0; user-select: none;
}
.rubric summary:hover { color: var(--ink); }
.rubric-row {
  padding: 7px 10px; margin-bottom: 5px; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--line-soft);
}
.rubric-row b { margin-right: 7px; font-size: 11.5px; }

.team-report {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--panel-2); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap;
  border-left: 2px solid var(--accent);
}

/* --- budget gauge ------------------------------------------------------- */
.budget-bar {
  height: 8px; border-radius: 999px; background: var(--panel-2);
  overflow: hidden; border: 1px solid var(--line);
}
.budget-bar span { display: block; height: 100%; transition: width .3s ease; }
.budget-bar span.ok { background: var(--ok); }
.budget-bar span.warn { background: var(--warn); }
.budget-bar span.bad { background: var(--bad); }
.est {
  font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 7px 0 2px; color: var(--ink);
}
.est.bad { color: var(--bad); }

/* --- engine: modality rows and the try-it panel ------------------------- */
.modal-row.off input { opacity: .45; cursor: not-allowed; }
.tool-list { max-height: 190px; overflow-y: auto; }
.tool-list .check { margin-bottom: 4px; }
.gen-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.gen-item { margin: 0; }
.gen-item img, .gen-item video { width: 100%; border-radius: var(--radius-sm); display: block; }
.gen-item figcaption { font-size: 11px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }

@media (max-width: 1180px) {
  /* Stacked, so the rail becomes a bottom panel and the strip a full-width bar. */
  .mgr { grid-template-columns: 1fr; }
  .mgr.rail-closed { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .mgr-side { border-left: 0; border-top: 1px solid var(--line); }
  .board { max-height: 340px; }
  .rail-strip { flex-direction: row; height: auto; padding: 11px 16px; gap: 11px; }
  .rail-strip .strip-label { writing-mode: horizontal-tb; }
  .strip-chev { margin: 0 0 0 auto; transform: rotate(-90deg); }
}

/* --- reach a lead ------------------------------------------------------- */
.reach-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
}
.reach-row.off { opacity: .6; background: transparent; }
.reach-row b { font-size: 13px; margin-right: 7px; }
.warn-text { color: var(--warn); margin-top: 3px; }

/* --- channels ----------------------------------------------------------- */
.chan-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 14px 15px;
}
.chan-card.on { border-color: rgba(78,201,160,.35); }
.chan-card h4 { margin: 0; font-size: 14px; }
.chan-card .field { margin-bottom: 8px; }
.chan-card .mono { font-size: 10.5px; }

/* --- editable phone cell ------------------------------------------------ */
.phone-cell {
  width: 148px; padding: 5px 8px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent;
  font-family: var(--mono); font-size: 12px; color: var(--ink);
}
.phone-cell:hover { border-color: var(--line); background: var(--bg); }
.phone-cell:focus {
  outline: none; border-color: var(--accent); background: var(--bg);
  box-shadow: 0 0 0 3px rgba(208,138,74,.12);
}
.phone-cell.empty { color: var(--ink-3); font-style: italic; font-family: var(--sans); }
.phone-cell:disabled { opacity: .5; }

/* --- Knowledge Bank ----------------------------------------------------- */
.kb-source { padding: 15px 16px; }
.kb-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 7px 10px;
  margin-top: 7px;
}
.kb-preview {
  max-height: 440px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 12px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
}
.kb-hit {
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  background: var(--bg);
  border-radius: var(--radius-sm);
}
.tiny-banner { padding: 7px 9px; font-size: 11px; }

/* ========================================================================
   Connect by JBRH V6 — outcome-first owner workspace
   ======================================================================== */
:root {
  --stone: #d5c7b7;
}

/* Minimum practical target footprint; final focus treatment lives in ACCESSIBILITY. */
.btn, nav a, .top-action, .maya-status, .op-tab, .autonomy-card { min-height: 32px; }
.x { min-width: 32px; min-height: 32px; }
.switch { min-width: 44px; min-height: 24px; }

.rail-sep.first { padding-top: 8px; }
.topbar { min-height: 62px; height: 62px; position: relative; z-index: 20; }
.topbar-right { gap: 7px; }
.top-action { min-width: 74px; }
.maya-status {
  display:flex; align-items:center; gap:8px; min-height:36px; padding:7px 11px;
  border:1px solid var(--line); border-radius:999px; background:var(--panel); cursor:pointer;
}
.status-beacon { width:8px; height:8px; border-radius:50%; background:var(--ink-3); }
.maya-status.working .status-beacon { background:var(--ok); box-shadow:0 0 0 4px rgba(78,201,160,.12); }

.op-page { max-width: 1500px; margin: 0 auto; display:flex; flex-direction:column; gap:16px; }
.op-title, .op-hero {
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding: 5px 2px 4px;
}
.op-title h1, .op-hero h1 { margin:2px 0 5px; font-size:clamp(24px,2.3vw,36px); line-height:1.14; letter-spacing:-.025em; }
.op-hero h1 { max-width:960px; font-size:clamp(25px,2.6vw,40px); }
.op-title p, .op-hero p { margin:0; color:var(--ink-2); max-width:900px; }
.eyebrow { color:var(--accent); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px; }

.op-panel {
  background:linear-gradient(180deg, rgba(255,255,255,.012), transparent 44%), var(--panel);
  border:1px solid var(--line); border-radius:14px; padding:18px;
}
.op-panel h2 { margin:2px 0 5px; font-size:18px; line-height:1.3; }
.op-panel p { color:var(--ink-2); }
.op-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:14px; }
.op-panel-head p { margin:3px 0 0; font-size:12px; color:var(--ink-3); }
.op-grid-2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }

.op-metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.op-metrics-grid.compact { margin-top:16px; }
.op-metric { padding:16px; border-radius:13px; border:1px solid var(--line); background:var(--panel); min-height:112px; }
.op-metric-value { font-size:30px; font-weight:720; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.op-metric-label { color:var(--ink); margin-top:2px; font-weight:600; }
.op-metric-scope { color:var(--ink-3); font-size:11.5px; margin-top:9px; }
.op-metric.ok .op-metric-value{color:var(--ok)} .op-metric.warn .op-metric-value{color:var(--warn)}
.op-metric.bad .op-metric-value{color:var(--bad)} .op-metric.info .op-metric-value{color:var(--info)}
.op-metric.acc .op-metric-value{color:var(--accent)}

.op-tabs { display:flex; gap:5px; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:11px; overflow:auto; }
.op-tab { padding:8px 14px; border-radius:8px; color:var(--ink-2); white-space:nowrap; }
.op-tab:hover { color:var(--ink); background:var(--panel-2); }
.op-tab.on { background:#2a3039; color:var(--ink); box-shadow:0 0 0 1px rgba(255,255,255,.04) inset; }

.funnel { display:flex; align-items:stretch; gap:7px; margin-top:10px; overflow:auto; }
.funnel div { min-width:84px; flex:1; text-align:center; padding:12px 8px; border-radius:10px; background:var(--bg); border:1px solid var(--line-soft); }
.funnel b { display:block; font-size:22px; }
.funnel span { color:var(--ink-3); text-transform:capitalize; font-size:10.5px; }
.funnel i { align-self:center; color:var(--ink-3); font-style:normal; }
.funnel.wide div { min-width:105px; }

.status-dot { display:inline-flex; align-items:center; justify-content:center; min-height:27px; padding:4px 10px; border-radius:999px; background:#282e37; color:var(--ink-2); font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.05em; }
.status-dot.ok { color:var(--ok); background:rgba(78,201,160,.12); }
.status-dot.warn { color:var(--warn); background:rgba(229,180,92,.12); }
.status-dot.bad { color:var(--bad); background:rgba(229,115,115,.12); }
.status-dot.info { color:var(--info); background:rgba(111,168,220,.12); }
.op-positive { padding:11px 12px; border-radius:9px; color:#8ee0c4; background:rgba(78,201,160,.08); border:1px solid rgba(78,201,160,.18); }
.blocker { padding:13px 14px; background:rgba(229,180,92,.08); border:1px solid rgba(229,180,92,.25); border-radius:10px; margin-bottom:10px; }
.blocker p { margin:5px 0 9px; }

.op-statline { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:39px; border-bottom:1px solid var(--line-soft); }
.op-statline:last-child { border-bottom:0; }
.op-statline span { color:var(--ink-3); }
.op-statline b { text-align:right; }
.op-list { color:var(--ink-2); padding-left:20px; }
.guardrail-strip { display:flex; gap:10px; align-items:flex-start; margin-top:14px; padding:11px 12px; border-radius:9px; background:var(--bg); border:1px solid var(--line-soft); font-size:12px; }
.guardrail-strip span { color:var(--ink-2); }

.work-row, .knowledge-row, .cap-row { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.work-row:last-child,.knowledge-row:last-child,.cap-row:last-child{border-bottom:0}
.work-row p,.knowledge-row p,.cap-row p{margin:3px 0 0;color:var(--ink-3);font-size:12px}
.progress { width:160px; height:7px; background:var(--bg); border-radius:99px; overflow:hidden; align-self:center; }
.progress span { display:block; height:100%; background:var(--accent); }

.decision-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 0; border-top:1px solid var(--line-soft); }
.decision-row:first-of-type { border-top:0; }
.decision-row p,.decision-row small{display:block;margin:3px 0 0;color:var(--ink-3)}
.decision-row:hover b{color:var(--accent)}
.decision-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px; }
.decision-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:17px; }
.decision-card h2 { font-size:18px; margin:13px 0 7px; }
.decision-card p { color:var(--ink-2); }
.decision-needs { padding:10px 0; margin:10px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.decision-needs span { display:block; color:var(--ink-3); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.decision-needs b { display:block; margin-top:3px; }

.play-summary { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0; }
.play-summary div { background:var(--bg); border:1px solid var(--line-soft); border-radius:9px; padding:10px; }
.play-summary span { display:block; color:var(--ink-3); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.play-summary b { display:block; margin-top:3px; font-size:12px; }
.play-steps { display:grid; grid-template-columns:repeat(9,1fr); gap:7px; }
.play-step { min-height:77px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px solid var(--line); background:var(--bg); border-radius:9px; color:var(--ink-3); }
.play-step b { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--panel-2); font-size:11px; }
.play-step span { font-size:10.5px; text-align:center; }
.play-step.ready { color:var(--ink); border-color:rgba(78,201,160,.25); }
.play-step.ready b { background:rgba(78,201,160,.15); color:var(--ok); }
.score-pill { display:inline-flex; min-width:48px; justify-content:center; padding:3px 8px; border-radius:99px; background:rgba(78,201,160,.12); color:var(--ok); font-weight:650; }
.table-wrap { overflow:auto; border:1px solid var(--line-soft); border-radius:10px; }

.activity-list { padding-top:2px; }
.activity-row { display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:15px; padding:15px 0; border-bottom:1px solid var(--line-soft); }
.activity-row:last-child { border-bottom:0; }
.activity-row time { color:var(--ink-3); font-size:11px; }
.activity-row p { margin:3px 0; }
.activity-row details { font-size:11px; color:var(--ink-3); }
.activity-row pre { white-space:pre-wrap; word-break:break-word; max-height:220px; overflow:auto; background:var(--bg); padding:9px; border-radius:8px; }

.autonomy-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:15px; }
.autonomy-card { text-align:left; padding:14px; border:1px solid var(--line); border-radius:11px; background:var(--bg); color:var(--ink); cursor:pointer; }
.autonomy-card b,.autonomy-card span{display:block}.autonomy-card span{color:var(--ink-3);margin-top:5px;font-size:12px;line-height:1.5}
.autonomy-card.selected { border-color:var(--accent); box-shadow:0 0 0 1px rgba(208,138,74,.25) inset; }

.plan-grid { display:grid; grid-template-columns:repeat(5,minmax(190px,1fr)); gap:10px; overflow:auto; }
.plan-card { min-width:190px; border:1px solid var(--line); border-radius:12px; background:var(--bg); padding:15px; }
.plan-card.featured { border-color:var(--accent); background:linear-gradient(180deg,rgba(208,138,74,.07),var(--bg)); }
.plan-card h2 { margin:9px 0 5px; }
.plan-price { font-size:22px; font-weight:700; color:var(--stone); }
.plan-price small { font-size:11px; color:var(--ink-3); font-weight:400; }
.plan-card ul { padding-left:18px; color:var(--ink-2); font-size:12px; }

.op-empty { text-align:center; color:var(--ink-3); padding:45px 20px; }
.op-empty-title { color:var(--ink); font-size:18px; font-weight:650; margin-bottom:5px; }
.op-empty .btn { margin-top:16px; }
.result-box { margin-top:14px; padding:13px; border-radius:9px; border:1px solid var(--line); background:var(--bg); }

.ask-history { max-height:330px; overflow:auto; display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.ask-msg { padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.ask-msg.user { margin-left:10%; background:var(--panel-2); }.ask-msg.manager { margin-right:10%; }
.ask-msg p { margin:3px 0 0; white-space:pre-wrap; }
.search-results { max-height:520px; overflow:auto; }
.search-result { display:flex; gap:10px; align-items:flex-start; padding:11px; border-bottom:1px solid var(--line-soft); }
.search-result:hover { background:var(--panel-2); }
.search-result p { margin:2px 0 0; color:var(--ink-3); }

/* Improve mobile/tablet rather than merely shrinking desktop. */
@media (max-width: 1180px) {
  .op-metrics-grid { grid-template-columns:repeat(2,1fr); }
  .play-steps { grid-template-columns:repeat(5,1fr); }
  .plan-grid { grid-template-columns:repeat(3,minmax(200px,1fr)); }
}
@media (max-width: 820px) {
  #app { grid-template-columns:72px 1fr; }
  .brand-text, nav a { font-size:0; }
  nav a { justify-content:center; padding:10px; }
  nav a svg { width:20px; height:20px; }
  .rail-sep { text-align:center; padding-left:0; padding-right:0; }
  .rail-foot { padding:7px; }.power-label,.power-state,.kill-btn{font-size:0}.power{padding:8px}.btn.full{font-size:10px}
  .topbar { padding:0 10px; }.crumb{display:none}.top-action{min-width:38px;font-size:0}.top-action::first-letter{font-size:12px}
  #needs-top { font-size:0; }.maya-status #maya-status-text{display:none}.maya-status{min-width:38px;justify-content:center}
  .view { padding:14px; }
  .op-grid-2 { grid-template-columns:1fr; }
  .op-title,.op-hero { flex-direction:column; gap:10px; }
  .autonomy-cards { grid-template-columns:1fr; }
  .play-steps { grid-template-columns:repeat(3,1fr); }
  .activity-row { grid-template-columns:1fr auto; }.activity-row time{grid-column:1/-1}
}
@media (max-width: 560px) {
  #app { grid-template-columns:1fr; grid-template-rows:1fr 64px; }
  .rail { grid-row:2; grid-column:1; border-right:0; border-top:1px solid var(--line); z-index:50; }
  .brand,.rail-sep,.rail-foot { display:none; }
  nav { display:flex; overflow-x:auto; padding:7px 8px; gap:3px; }
  nav a { min-width:48px; margin:0; flex:none; }
  nav a.on::before { left:8px; right:8px; top:auto; bottom:-6px; width:auto; height:3px; border-radius:3px 3px 0 0; }
  .stage { grid-row:1; grid-column:1; }
  .op-metrics-grid { grid-template-columns:1fr 1fr; }
  .op-metric { min-height:94px; padding:12px; }.op-metric-value{font-size:24px}
  .play-summary { grid-template-columns:1fr; }.play-steps { grid-template-columns:1fr 1fr; }
  .modal { max-height:92vh; }
}
/* KK-UI-GOVERNOR-V3 SEMANTIC GUARDRAILS START */
/* Structural overflow protection without DOM-order selectors or specificity escalation. */
pre {
  max-inline-size: 100%;
  overflow-x: auto;
}

@media (max-width: 820px) {
  nav svg,
  nav i[data-ico],
  .step-media img,
  .step-video {
    max-inline-size: 100%;
    block-size: auto;
  }

  .op-grid-2 > *,
  .op-panel,
  .op-panel-head,
  .op-actions,
  .op-statline,
  .funnel,
  .funnel > *,
  .activity-row > *,
  .decision-card,
  .plan-card {
    min-inline-size: 0;
    max-inline-size: 100%;
    box-sizing: border-box;
  }

  .funnel,
  .table-wrap,
  .plan-grid {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
}
/* KK-UI-GOVERNOR-V3 SEMANTIC GUARDRAILS END */
/* ==========================================================================
   CONNECT APP SHELL V8 — UNIFIED ENTERPRISE OPERATING WORKSPACE
   Standalone compatibility layer.
   This section intentionally comes AFTER the existing Connect component rules
   so current pages keep working while the shell and visual hierarchy improve.
   ========================================================================== */

/* ---------- V8 DESIGN TOKENS ---------- */

:root {
  /* Core dark system — stable compatibility names retained for existing JS/HTML. */
  --v7-canvas: #0b0f14;
  --v7-canvas-2: #0e131a;
  --v7-surface-1: #111720;
  --v7-surface-2: #151c25;
  --v7-surface-3: #1b2430;
  --v7-surface-4: #222d3a;

  --v7-nav: #0b0f14;
  --v7-topbar: rgba(11,15,20,.94);
  --v7-context: #0f151d;
  --v7-command: rgba(12,17,23,.97);

  --v7-border-soft: rgba(255,255,255,.075);
  --v7-border: rgba(255,255,255,.115);
  --v7-border-strong: rgba(255,255,255,.19);

  --v7-text: #f4f7fb;
  --v7-text-2: #bdc7d3;
  --v7-text-3: #8b98a8;

  --v7-brand: #d88a4b;
  --v7-brand-2: #c97839;
  --v7-brand-soft: rgba(216,138,75,.14);

  --v7-success: #57d6ad;
  --v7-warning: #efbd62;
  --v7-danger: #f07d82;
  --v7-info: #82b8f4;

  --v7-radius-xs: 8px;
  --v7-radius-sm: 10px;
  --v7-radius: 14px;
  --v7-radius-lg: 18px;
  --v7-radius-xl: 22px;

  --v7-shadow-soft: 0 8px 24px rgba(0,0,0,.20);
  --v7-shadow-panel: 0 1px 0 rgba(255,255,255,.025) inset,
                     0 10px 30px rgba(0,0,0,.17);
  --v7-shadow-float: 0 24px 72px rgba(0,0,0,.40);

  --v7-sidebar-width: 252px;
  --v7-topbar-height: 64px;
  --v7-context-width: 356px;
  --v7-command-height: 82px;

  --v7-ease: cubic-bezier(.2,.8,.2,1);

  /* Interaction + rail tokens. */
  --control-border: #64748b;
  --control-border-hover: #8793a3;
  --rail-surface: #111720;
  --rail-line: rgba(255,255,255,.115);
  --rail-text: #bdc7d3;
  --rail-text-strong: #f4f7fb;
  --rail-muted: #8b98a8;
  --rail-hover: #151c25;
  --rail-active: #1c2530;

  /* Safe defaults before JavaScript sets data-theme. */
  --surface-raised: #151c25;
  --surface-hover: #1b2430;
  --surface-active: #222d3a;
  --surface-input: #0f151d;
  --surface-soft: #111820;
  --topbar-bg: var(--v7-topbar);
  --rail-bg: var(--v7-nav);
  --focus-ring: #f0a66a;
  --shadow-card: var(--v7-shadow-panel);
}

/* Map old tokens to V7 so every existing component stays compatible. */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--v7-canvas);
  --bg-2: var(--v7-canvas-2);
  --panel: var(--v7-surface-2);
  --panel-2: var(--v7-surface-3);

  --line: var(--v7-border);
  --line-soft: var(--v7-border-soft);

  --ink: var(--v7-text);
  --ink-2: var(--v7-text-2);
  --ink-3: var(--v7-text-3);

  --accent: var(--v7-brand);
  --accent-2: var(--v7-brand-2);
  --accent-ink: #1a0f08;

  --ok: var(--v7-success);
  --warn: var(--v7-warning);
  --bad: var(--v7-danger);
  --info: var(--v7-info);

  --radius: var(--v7-radius);
  --radius-sm: var(--v7-radius-sm);

  --surface-raised: #151c25;
  --surface-hover: #1b2430;
  --surface-active: #222d3a;
  --surface-input: #0f151d;
  --surface-soft: #111820;

  --control-border: #64748b;
  --control-border-hover: #8793a3;

  --rail-bg: #0b0f14;
  --rail-surface: #111720;
  --rail-line: rgba(255,255,255,.115);
  --rail-text: #bdc7d3;
  --rail-text-strong: #f4f7fb;
  --rail-muted: #8b98a8;
  --rail-hover: #151c25;
  --rail-active: #1c2530;

  --topbar-bg: rgba(11,15,20,.94);
  --v7-context: #0f151d;
  --v7-command: rgba(12,17,23,.97);

  --ring: rgba(216,138,75,.28);
  --shadow: var(--v7-shadow-float);
  --shadow-soft: var(--v7-shadow-soft);
  --shadow-card: var(--v7-shadow-panel);
  --focus-ring: #f0a66a;
}

/* Day mode is a first-class enterprise workspace, not a washed-out dark-theme inversion. */
html[data-theme="day"] {
  color-scheme: light;

  --bg: #f3f5f7;
  --bg-2: #e9edf2;
  --panel: #ffffff;
  --panel-2: #f7f9fb;

  --line: #d6dce5;
  --line-soft: #e5e9ef;

  --ink: #111827;
  --ink-2: #4b5563;
  --ink-3: #667085;

  --accent: #a84f17;
  --accent-2: #863b0f;
  --accent-ink: #ffffff;

  --ok: #087a62;
  --warn: #9a5a00;
  --bad: #b42318;
  --info: #175cd3;

  --surface-raised: #ffffff;
  --surface-hover: #eef2f6;
  --surface-active: #e7ecf2;
  --surface-input: #ffffff;
  --surface-soft: #f7f9fb;

  /* WCAG-sensitive control boundary: >=3:1 against white. */
  --control-border: #8a94a6;
  --control-border-hover: #667085;

  /* Strong navigation anchor prevents the white-on-white visual wash. */
  --rail-bg: #171c22;
  --rail-surface: #1e252d;
  --rail-line: #313a45;
  --rail-text: #c3ccd6;
  --rail-text-strong: #ffffff;
  --rail-muted: #909cab;
  --rail-hover: #222a33;
  --rail-active: #29323c;

  --v7-context: #f8fafc;
  --v7-command: rgba(248,250,252,.98);
  --v7-border-strong: #aeb8c4;

  --topbar-bg: rgba(255,255,255,.96);

  --ring: rgba(168,79,23,.20);
  --shadow: 0 24px 64px rgba(17,24,39,.14);
  --shadow-soft: 0 6px 18px rgba(17,24,39,.07);
  --shadow-card: 0 1px 2px rgba(17,24,39,.045),
                 0 8px 24px rgba(17,24,39,.055);
  --focus-ring: #a84f17;
}

/* ---------- GLOBAL CANVAS ---------- */

html,
body {
  background: var(--bg);
}

body {
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 76% -24%,
      color-mix(in srgb, var(--accent) 7%, transparent),
      transparent 68%),
    linear-gradient(180deg, var(--bg), var(--bg));
  letter-spacing: -.006em;
}

::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--ink);
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink-3) 36%, transparent);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink-3) 55%, transparent);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- PRIMARY APP SHELL ---------- */

#app {
  display: grid;
  grid-template-columns: var(--v7-sidebar-width) minmax(0, 1fr);
  height: 100dvh;
  min-height: 0;
  background: transparent;
}

.rail {
  position: relative;
  z-index: 30;
  min-width: 0;
  min-height: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--rail-bg) 98%, transparent),
      var(--rail-bg));
  border-right: 1px solid var(--line);
  box-shadow: 12px 0 40px rgba(0,0,0,.06);
}

.stage {
  min-width: 0;
  min-height: 0;
  background: transparent;
}

.topbar {
  height: var(--v7-topbar-height);
  min-height: var(--v7-topbar-height);
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,.015) inset;
}

.crumb {
  font-size: 15px;
  font-weight: 690;
  letter-spacing: -.01em;
}

.topbar-right {
  gap: 8px;
}

.view {
  padding: 24px 28px 52px;
  min-height: 0;
  background: transparent;
  scroll-behavior: smooth;
}

/* ---------- BRAND ---------- */

.brand {
  padding: 19px 16px 13px;
  gap: 11px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 19px;
  background:
    linear-gradient(150deg,
      var(--accent),
      var(--accent-2));
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 12px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

.brand-text strong {
  font-size: 15px;
  font-weight: 720;
  letter-spacing: -.01em;
}

.brand-text span {
  margin-top: 3px;
  font-size: 9.5px;
  letter-spacing: .17em;
  color: var(--ink-3);
}

/* ---------- SIDEBAR ---------- */

nav {
  padding: 9px 10px 18px;
  scrollbar-width: thin;
}

nav a {
  min-height: 42px;
  padding: 9px 11px;
  margin-bottom: 2px;
  gap: 11px;
  border-radius: 11px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 510;
  transition:
    color .18s var(--v7-ease),
    background-color .18s var(--v7-ease),
    transform .18s var(--v7-ease);
}

nav a:hover {
  color: var(--ink);
  background: var(--surface-hover);
}

nav a.on {
  color: var(--ink);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 11%, var(--surface-active)),
      var(--surface-active));
  font-weight: 650;
  box-shadow:
    0 1px 0 rgba(255,255,255,.025) inset,
    0 8px 20px rgba(0,0,0,.055);
}

nav a.on::before {
  left: -10px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
}

nav i[data-ico],
nav svg {
  opacity: .76;
}

nav a.on i[data-ico],
nav a.on svg,
nav a:hover i[data-ico],
nav a:hover svg {
  opacity: 1;
}

.rail-sep {
  padding: 17px 10px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink-3);
}

.pip {
  min-width: 21px;
  padding: 2px 7px;
  border: 1px solid var(--line-soft);
  background: var(--surface-active);
  color: var(--ink-2);
  font-size: 10.5px;
}

.pip.warn {
  border-color: color-mix(in srgb, var(--warn) 22%, transparent);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
}

/* ---------- CONNECT CONTROL CARD ---------- */

.rail-foot {
  padding: 11px;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-2) 80%, transparent));
}

.power {
  padding: 12px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.016),
      transparent 42%),
    var(--panel);
  box-shadow: var(--shadow-soft);
}

.power-label {
  font-size: 13px;
  font-weight: 700;
}

.power-state {
  margin: 7px 0 10px;
  font-size: 11.5px;
}

.switch {
  width: 44px;
  height: 24px;
}

.switch span {
  background: var(--surface-active);
  border: 1px solid var(--line);
}

.switch span::before {
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: var(--ink-2);
}

.switch input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
}

.switch input:checked + span::before {
  transform: translateX(20px);
  background: #fff;
}

/* ---------- TOPBAR ACTIONS ---------- */

.top-action,
.maya-status,
.theme-toggle,
.btn {
  border-radius: 11px;
}

.top-action {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid var(--control-border);
  background: var(--surface-raised);
  color: var(--ink-2);
  box-shadow: 0 1px 0 rgba(255,255,255,.018) inset;
  transition:
    background-color .18s var(--v7-ease),
    border-color .18s var(--v7-ease),
    color .18s var(--v7-ease),
    transform .16s var(--v7-ease);
}

.top-action:hover {
  background: var(--surface-hover);
  border-color: var(--line);
  color: var(--ink);
  transform: translateY(-1px);
}

.maya-status {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.016), transparent),
    var(--surface-raised);
}

.status-beacon {
  width: 9px;
  height: 9px;
}

.maya-status.working .status-beacon {
  background: var(--ok);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--ok) 12%, transparent),
    0 0 18px color-mix(in srgb, var(--ok) 34%, transparent);
}

/* ---------- HOME / OPERATOR PAGE ---------- */

.op-page {
  max-width: 1480px;
  gap: 14px;
}

.op-title,
.op-hero {
  gap: 18px;
  padding: 2px 2px 5px;
}

.op-title h1,
.op-hero h1 {
  margin: 2px 0 6px;
  max-width: 960px;
  font-size: clamp(23px, 2.15vw, 32px);
  line-height: 1.16;
  letter-spacing: -.035em;
  font-weight: 760;
}

.op-hero h1 {
  font-size: clamp(24px, 2.25vw, 34px);
}

.op-title p,
.op-hero p {
  color: var(--ink-2);
  font-size: 13.5px;
}

.eyebrow {
  margin-bottom: 5px;
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--accent);
}

/* Compact metrics: preserve data, stop wasting the first screen. */
.op-metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.op-metrics-grid.compact {
  margin-top: 10px;
}

.op-metric {
  min-height: 84px;
  padding: 13px 14px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 55%),
    var(--panel);
  box-shadow: 0 1px 0 rgba(255,255,255,.012) inset;
}

.op-metric-value {
  font-size: 25px;
  line-height: 1.05;
  font-weight: 760;
}

.op-metric-label {
  margin-top: 5px;
  font-size: 12.5px;
}

.op-metric-scope {
  margin-top: 5px;
  font-size: 10.5px;
}


/* Page headers need a clear visual anchor in dense operational screens. */
.page-head h2 {
  color: var(--ink);
  font-size: clamp(22px, 1.8vw, 27px);
  font-weight: 760;
  line-height: 1.18;
  letter-spacing: -.03em;
}

.page-head p {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.6;
}

.mb-addr {
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.012em;
}

/* ---------- PANELS ---------- */

.card,
.op-panel,
.decision-card,
.mb-card,
.provider-card,
.plan-card,
.task {
  border-color: var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 46%),
    var(--panel);
  box-shadow: var(--shadow-card);
}

.card,
.op-panel {
  border-radius: 16px;
}

.op-panel {
  padding: 16px;
}

.op-panel-head {
  gap: 14px;
  margin-bottom: 12px;
}

.op-panel h2 {
  margin: 2px 0 4px;
  font-size: 17px;
  letter-spacing: -.015em;
}

.op-panel-head p {
  font-size: 11.5px;
}

.op-grid-2 {
  gap: 12px;
}

.op-statline {
  min-height: 37px;
}

.op-positive {
  border-color: color-mix(in srgb, var(--ok) 20%, transparent);
  background: color-mix(in srgb, var(--ok) 8%, transparent);
}

/* ---------- PIPELINE ---------- */

.funnel {
  gap: 6px;
  margin-top: 8px;
}

.funnel div {
  min-width: 78px;
  padding: 10px 7px;
  border-radius: 10px;
  background: var(--bg);
  border-color: var(--line-soft);
}

.funnel b {
  font-size: 19px;
}

.funnel span {
  font-size: 9.5px;
}

/* ---------- DECISIONS / NEEDS YOU ---------- */

.decision-row {
  min-height: 62px;
  padding: 12px 0;
  transition: background-color .16s var(--v7-ease);
}

.decision-row:hover {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--warn) 5%, transparent),
      transparent 54%);
}

.decision-row:hover b {
  color: var(--warn);
}

.decision-grid {
  gap: 11px;
}

.decision-card {
  border-radius: 15px;
  padding: 15px;
}

/* ---------- ACTIVITY ---------- */

.activity-row {
  grid-template-columns: 132px minmax(0,1fr) auto;
  gap: 13px;
  padding: 13px 0;
}

.activity-row time {
  font-size: 10.5px;
}

/* ---------- BUTTONS ---------- */

.btn {
  min-height: 38px;
  padding: 8px 13px;
  border-color: var(--control-border);
  background: var(--surface-raised);
  font-size: 12.5px;
  font-weight: 560;
  transition:
    transform .16s var(--v7-ease),
    color .16s var(--v7-ease),
    background-color .16s var(--v7-ease),
    border-color .16s var(--v7-ease),
    box-shadow .16s var(--v7-ease);
}

.btn:hover {
  background: var(--surface-hover);
  border-color: var(--line);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn.primary {
  color: var(--accent-ink);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 96%, white 4%),
      var(--accent-2));
  border-color: color-mix(in srgb, var(--accent) 82%, white 0%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 8px 22px color-mix(in srgb, var(--accent) 15%, transparent);
}

.btn.primary:hover {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 88%, white 12%),
      var(--accent-2));
}

.btn.danger {
  background: color-mix(in srgb, var(--bad) 9%, transparent);
  border-color: color-mix(in srgb, var(--bad) 28%, transparent);
  color: color-mix(in srgb, var(--bad) 76%, white 24%);
}

.btn.ok {
  background: color-mix(in srgb, var(--ok) 9%, transparent);
  border-color: color-mix(in srgb, var(--ok) 26%, transparent);
  color: color-mix(in srgb, var(--ok) 78%, white 22%);
}

/* ---------- FORMS ---------- */

input[type=text],
input[type=number],
input[type=password],
input[type=email],
input[type=url],
input[type=search],
textarea,
select {
  min-height: 40px;
  border-color: var(--control-border);
  border-radius: 11px;
  background: var(--surface-input);
  box-shadow: 0 1px 0 rgba(255,255,255,.015) inset;
  transition:
    border-color .16s var(--v7-ease),
    box-shadow .16s var(--v7-ease),
    background-color .16s var(--v7-ease);
}

input:focus,
textarea:focus,
select:focus {
  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ---------- CONTENT LINKS ---------- */
:where(.msg-text, .mgr .msg-body, .op-panel, .context-panel, .modal-body) a[href] {
  color: var(--info);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: .08em;
}

/* ---------- TABLES ---------- */

.table-wrap {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  border-color: var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
}

.table-wrap table {
  display: table;
  inline-size: 100%;
  min-inline-size: 640px;
}

th {
  padding: 9px 13px;
  font-size: 9.5px;
  letter-spacing: .12em;
}

td {
  padding: 10px 13px;
}

tbody tr:hover {
  background: var(--surface-soft);
}

/* ---------- INBOX ---------- */

.split {
  grid-template-columns: 328px minmax(0, 1fr);
}

.thread-list {
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
}

.tl-head {
  padding: 12px 13px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px);
}

.tl-item {
  padding: 11px 13px;
  transition: background-color .16s var(--v7-ease);
}

.tl-item:hover {
  background: var(--surface-soft);
}

.tl-item.on {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 10%, var(--surface-active)),
      var(--surface-active));
  box-shadow: inset 2px 0 0 var(--accent);
}

.thread-pane {
  padding: 20px 24px 46px;
}

/* Preserve original Inbox message layout against later generic manager rules. */
.thread-pane .msg {
  margin-bottom: 16px;
}

.thread-pane .msg-text {
  border-color: var(--line);
  background: var(--panel);
}

/* ---------- MANAGER / CONNECT CHAT ---------- */

.mgr {
  grid-template-columns: minmax(0,1fr) 348px;
  background: transparent;
}

.mgr-log {
  padding: 28px 34px 42px;
  background:
    radial-gradient(900px 380px at 50% -8%,
      color-mix(in srgb, var(--accent) 5%, transparent),
      transparent 70%),
    var(--bg);
}

.mgr-stream {
  max-width: 820px;
  gap: 22px;
}

.mgr-side {
  background: var(--v7-context);
  border-left: 1px solid var(--line);
}

.mgr-input {
  padding: 13px 20px 15px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-2) 94%, transparent),
      var(--bg-2));
  backdrop-filter: blur(18px);
}

.mgr-input textarea {
  min-height: 50px;
  border-radius: 13px;
  background: var(--surface-input);
}

.mgr .msg-body {
  border-color: var(--line);
  background: var(--panel-2);
  box-shadow: 0 1px 0 rgba(255,255,255,.012) inset;
}

.orb-wrap {
  padding: 20px 16px 15px;
}

.orb {
  width: 96px;
  height: 96px;
}

.orb-core {
  inset: 28px;
}

.board {
  padding: 10px;
}

/* ---------- MODALS ---------- */

.modal-back {
  background: rgba(3,6,10,.68);
  backdrop-filter: blur(8px);
}

.modal {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 38%),
    var(--panel);
  border-color: var(--line);
  box-shadow: var(--v7-shadow-float);
}

.modal-head,
.modal-foot {
  border-color: var(--line);
}

/* ---------- STATUS CHIPS ---------- */

.status-dot,
.tag,
.chip {
  border: 1px solid var(--line-soft);
}

.status-dot {
  min-height: 25px;
  font-size: 9.5px;
  letter-spacing: .07em;
}

.status-dot.ok,
.tag.ok {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}

.status-dot.warn,
.tag.warn {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}

.status-dot.bad,
.tag.bad {
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 10%, transparent);
}

.status-dot.info,
.tag.info {
  color: var(--info);
  background: color-mix(in srgb, var(--info) 10%, transparent);
}

/* ---------- MOTION ---------- */

.card,
.op-panel,
.op-metric,
.decision-card,
.mb-card,
.provider-card,
.plan-card,
.task {
  transition:
    border-color .18s var(--v7-ease),
    background-color .18s var(--v7-ease),
    box-shadow .18s var(--v7-ease),
    transform .18s var(--v7-ease);
}

@media (hover:hover) and (pointer:fine) {
  .op-panel:hover,
  .decision-card:hover,
  .mb-card:hover,
  .provider-card:hover {
    border-color: var(--v7-border-strong);
  }
}

/* ==========================================================================
   GLOBAL V8 SHELL CLASSES
   These rules are ready now. They become visible after index.html/app.js adds
   the corresponding DOM elements. Keeping them here lets the next step be
   structural rather than another visual rewrite.
   ========================================================================== */

.workspace-shell {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--v7-context-width);
  background: transparent;
}

.workspace-main {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.context-panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-left: 1px solid var(--line);
  background: var(--v7-context);
}

.context-panel-inner {
  padding: 18px;
}

.context-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.context-kicker {
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.context-title {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -.02em;
}

.context-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.context-section:last-child {
  border-bottom: 0;
}

.context-section-title {
  margin-bottom: 7px;
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.context-value {
  color: var(--ink);
  line-height: 1.55;
}

.context-muted {
  color: var(--ink-2);
  line-height: 1.55;
}

/* Business switcher */
.business-switcher {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  max-width: 260px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-raised);
  color: var(--ink);
  cursor: pointer;
}

.business-switcher:hover {
  background: var(--surface-hover);
}

.business-switcher-mark {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 760;
}

.business-switcher-copy {
  min-width: 0;
  text-align: left;
}

.business-switcher-copy b,
.business-switcher-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-switcher-copy b {
  font-size: 12px;
}

.business-switcher-copy span {
  margin-top: 1px;
  font-size: 9.5px;
  color: var(--ink-3);
}

/* Global search */
.global-search {
  width: min(420px, 34vw);
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-input);
  color: var(--ink-3);
}

.global-search input {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.global-search input:focus {
  border: 0;
  box-shadow: none;
}

/* Persistent Connect command bar */
.maya-commandbar {
  position: sticky;
  bottom: 0;
  z-index: 25;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--v7-command) 86%, transparent),
      var(--v7-command));
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.maya-commandbar-inner {
  width: min(920px, 100%);
  min-height: 54px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 7px 8px 7px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 45%),
    var(--surface-raised);
  box-shadow:
    0 1px 0 rgba(255,255,255,.025) inset,
    0 18px 50px rgba(0,0,0,.2);
}

.maya-commandbar textarea {
  flex: 1;
  min-height: 38px;
  max-height: 150px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  resize: none;
}

.maya-commandbar textarea:focus {
  border: 0;
  box-shadow: none;
}

.maya-command-action {
  width: 40px;
  height: 40px;
  min-height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

.maya-command-action:hover {
  background: var(--accent-2);
}

/* Compact executive "Today" strip, ready for Home redesign. */
.today-strip {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
}

.today-strip-label {
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.today-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.today-stat b {
  font-size: 15px;
}

.today-stat span {
  font-size: 11px;
  color: var(--ink-3);
}


/* ---------- UNIFIED V8 COMPLETION: PREMIUM-ONLY ESSENTIALS ---------- */

[hidden] { display: none !important; }

html {
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { isolation: isolate; }

button, a, input, textarea, select, summary {
  -webkit-tap-highlight-color: transparent;
}

img, video, canvas, svg { max-width: 100%; }
pre, code, .mono { font-variant-ligatures: none; }

* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink-3) 36%, transparent) transparent;
}

/* Day mode: dark navigation + clean neutral work canvas. */
html[data-theme="day"] body { background: var(--bg); }

html[data-theme="day"] .rail {
  color: var(--rail-text);
  border-right-color: var(--rail-line);
  box-shadow: 10px 0 28px rgba(17,24,39,.09);
}

.brand-text strong { color: var(--rail-text-strong); }
.brand-text span,
.rail-sep { color: var(--rail-muted); }

nav a { color: var(--rail-text); }
nav a:hover {
  color: var(--rail-text-strong);
  background: var(--rail-hover);
}
nav a.on {
  color: var(--rail-text-strong);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 18%, var(--rail-active)),
    var(--rail-active));
}

.pip {
  color: var(--rail-text);
  background: var(--rail-active);
  border-color: var(--rail-line);
}

.rail-foot {
  border-top-color: var(--rail-line);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--rail-bg) 86%, black 14%));
}

.power {
  color: var(--rail-text);
  border-color: var(--rail-line);
  background: var(--rail-surface);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}
.power-label { color: var(--rail-text-strong); }
.power-state { color: var(--rail-muted); }
.rail .switch span { background: var(--rail-active); border-color: var(--rail-line); }
.rail .switch span::before { background: var(--rail-text); }

/* Remove washed-out decorative haze in day mode; keep subtle depth in dark mode. */
html[data-theme="dark"] body {
  background:
    radial-gradient(820px 440px at 72% -28%, rgba(216,138,75,.055), transparent 70%),
    var(--bg);
}

html[data-theme="day"] .topbar {
  border-bottom-color: #d3d9e2;
  box-shadow: 0 1px 0 rgba(17,24,39,.025), 0 4px 14px rgba(17,24,39,.035);
}

html[data-theme="day"] .context-panel {
  background: #f8fafc;
  border-left-color: #d6dce5;
}

html[data-theme="day"] .maya-commandbar {
  border-top-color: #d6dce5;
  background: rgba(248,250,252,.96);
}

/* Stronger surface separation without "floating card" excess. */
.card,
.op-panel,
.op-metric,
.decision-card,
.mb-card,
.provider-card,
.plan-card,
.autonomy-card,
.result-box,
.ask-msg,
.task {
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

html[data-theme="day"] :where(.card,.op-panel,.op-metric,.decision-card,.mb-card,.provider-card,.plan-card,.autonomy-card,.task) {
  background: #ffffff;
}

html[data-theme="day"] .mb-card.connected {
  border-left-color: var(--ok);
}

/* Every visible control gets a deliberately stronger boundary than decorative cards. */
.top-action,
.theme-toggle,
.business-switcher,
.global-search,
.btn:not(.primary):not(.danger):not(.ok):not(.ghost),
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
  border-color: var(--control-border);
}

.top-action:hover,
.theme-toggle:hover,
.business-switcher:hover,
.btn:not(.primary):not(.danger):not(.ok):not(.ghost):hover {
  border-color: var(--control-border-hover);
}

/* Theme control existed only in premium-theme.css; keep it in the unified file. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 78px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--control-border);
  border-radius: 11px;
  background: var(--surface-raised);
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .18s var(--v7-ease), border-color .18s var(--v7-ease), color .18s var(--v7-ease), transform .14s var(--v7-ease);
}
.theme-toggle:hover { background: var(--surface-hover); color: var(--ink); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle-glyph { position: relative; display: inline-block; width: 18px; height: 18px; flex: none; }

html[data-theme="day"] .theme-toggle-glyph::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 -7px 0 -3px var(--accent), 0 7px 0 -3px var(--accent), 7px 0 0 -3px var(--accent), -7px 0 0 -3px var(--accent), 5px 5px 0 -3px var(--accent), -5px 5px 0 -3px var(--accent), 5px -5px 0 -3px var(--accent), -5px -5px 0 -3px var(--accent);
}
html[data-theme="dark"] .theme-toggle-glyph::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  top: 1px;
  left: 1px;
  border: 2px solid var(--ink-2);
  border-radius: 50%;
}
html[data-theme="dark"] .theme-toggle-glyph::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  top: -1px;
  left: 6px;
  border-radius: 50%;
  background: var(--surface-raised);
}

.maya-status.working { color: var(--ink); }
.btn.ghost:hover { background: var(--surface-hover); }

input::placeholder,
textarea::placeholder { color: var(--ink-3); opacity: .92; }
input:disabled,
textarea:disabled,
select:disabled,
button:disabled { opacity: .52; cursor: not-allowed; }
.field > span:first-child { color: var(--ink-2); }

tbody tr { transition: background-color .14s var(--v7-ease); }

.tag, .status-dot, .chip { border: 1px solid var(--line); }
.tag.ok, .status-dot.ok { border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); }
.tag.warn, .status-dot.warn { border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); }
.tag.bad, .status-dot.bad { border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); }
.tag.info, .status-dot.info { border-color: color-mix(in srgb, var(--info) 30%, var(--line)); }

.guardrail-strip,
.result-box { background: var(--surface-soft); border-color: var(--line); }
.thread-pane .msg-text,
.msg.out .msg-text { background: var(--panel); border-color: var(--line); }
.mb-meta, .mb-actions,
.knowledge-row, .cap-row { border-color: var(--line-soft); }
.calls .phone,
.phone,
.webhook,
.channel-card { border-color: var(--line); background: var(--surface-soft); }
.autonomy-card,
.plan-card,
.provider-card { border-radius: 15px; }
.empty, .op-empty { color: var(--ink-2); }
.context-value, .context-muted { line-height: 1.55; }

html[data-theme="day"] .modal-back { background: rgba(17,24,39,.38); }
html[data-theme="day"] .banner.warn { color: #7a4700; }
html[data-theme="day"] .banner.bad { color: #8f1f17; }
html[data-theme="day"] .banner.ok,
html[data-theme="day"] .op-positive { color: #06644f !important; }
html[data-theme="day"] .btn.danger { color: #9f2118; }
html[data-theme="day"] .btn.ok { color: #066b55; }
html[data-theme="day"] .plan-price { color: #4f3a2a; }
html[data-theme="dark"] .op-tab.on { background: var(--surface-active); }
html[data-theme="dark"] .msg.out .msg-text { background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%); }

/* Fine-pointer polish only. Touch never depends on hover movement. */
@media (hover: hover) and (pointer: fine) {
  .op-panel:hover,
  .decision-card:hover,
  .mb-card:hover,
  .provider-card:hover {
    border-color: var(--v7-border-strong, var(--control-border));
    box-shadow: 0 2px 4px rgba(17,24,39,.05), 0 12px 30px rgba(17,24,39,.075);
  }
}

/* Touch controls use a practical 44px target while desktop remains compact. */
@media (hover: none) and (pointer: coarse) {
  :where(.btn,.top-action,.theme-toggle,.maya-status,.business-switcher,.maya-command-action,nav a) {
    min-height: 44px;
  }
}

/* ---------- RESPONSIVE V8 CONSOLIDATION ---------- */

@media (max-width: 1240px) {
  :root {
    --v7-sidebar-width: 228px;
    --v7-context-width: 330px;
  }

  .op-metrics-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .workspace-shell {
    grid-template-columns: minmax(0,1fr);
  }

  .context-panel {
    display: none;
  }
}

@media (max-width: 920px) {
  :root {
    --v7-sidebar-width: 76px;
  }

  #app {
    grid-template-columns: var(--v7-sidebar-width) minmax(0,1fr);
  }

  .brand {
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
  }

  .brand-text {
    display: none;
  }

  nav {
    padding-left: 8px;
    padding-right: 8px;
  }

  nav a {
    justify-content: center;
    gap: 0;
    padding: 10px;
    font-size: 0;
  }

  nav a i[data-ico],
  nav a svg {
    width: 19px;
    height: 19px;
  }

  nav a .pip {
    position: absolute;
    right: 2px;
    top: 3px;
    min-width: 16px;
    padding: 0 4px;
    font-size: 8px;
  }

  nav a.on::before {
    left: -8px;
  }

  .rail-sep {
    height: 14px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }

  .rail-foot {
    padding: 7px;
  }

  .power {
    padding: 8px;
  }

  .power-label,
  .power-state,
  .power .btn.full {
    font-size: 0;
  }

  .topbar {
    padding: 0 13px;
  }

  .crumb {
    display: none;
  }

  .top-action {
    min-width: 40px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .view {
    padding: 18px 18px 42px;
  }

  .op-grid-2 {
    grid-template-columns: 1fr;
  }

  .mgr {
    grid-template-columns: minmax(0,1fr);
  }

  .mgr-side {
    display: none;
  }

  .split {
    grid-template-columns: 300px minmax(0,1fr);
  }
}

@media (max-width: 700px) {
  body {
    overflow: hidden;
  }

  #app {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0,1fr) 64px;
  }

  .stage {
    grid-column: 1;
    grid-row: 1;
  }

  .rail {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-top: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,.12);
  }

  .brand,
  .rail-sep,
  .rail-foot {
    display: none;
  }

  nav {
    display: flex;
    flex: 1;
    gap: 3px;
    padding: 7px 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  nav a {
    min-width: 50px;
    min-height: 48px;
    margin: 0;
    flex: 1 0 50px;
    justify-content: center;
  }


  nav a.on::before {
    left: 9px;
    right: 9px;
    top: auto;
    bottom: -7px;
    width: auto;
    height: 3px;
  }

  .topbar {
    height: 56px;
    min-height: 56px;
    padding: 0 10px;
  }

  .topbar-right {
    gap: 5px;
  }

  .top-action {
    min-width: 38px;
    min-height: 38px;
  }

  .view {
    padding: 14px 12px 28px;
  }

  .op-title,
  .op-hero {
    flex-direction: column;
    gap: 10px;
  }

  .op-title h1,
  .op-hero h1 {
    font-size: 24px;
  }

  .op-metrics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .op-metric {
    min-height: 78px;
    padding: 11px 12px;
  }

  .op-metric-value {
    font-size: 23px;
  }

  .split {
    grid-template-columns: 1fr;
    height: auto;
  }

  .thread-list {
    max-height: 42vh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .thread-pane {
    padding: 16px 13px 34px;
  }

  .maya-commandbar {
    padding: 8px 9px 10px;
  }

  .maya-commandbar-inner {
    border-radius: 14px;
  }
}

@media (max-width: 460px) {
  .op-metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .op-metric {
    min-height: 74px;
  }

  .op-metric-scope {
    display: none;
  }

  .today-strip {
    align-items: flex-start;
    gap: 7px 13px;
  }

  .business-switcher-copy span {
    display: none;
  }
}

/* ---------- CANONICAL TABLET + MOBILE EXPERIENCE ---------- */

/* Tablet: preserve content width with one compact, vertical navigation rail. */
@media (min-width: 701px) and (max-width: 1100px) {
  :root {
    --v7-sidebar-width: 76px;
  }

  #app {
    grid-template-columns: var(--v7-sidebar-width) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: 100dvh;
  }

  .rail {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-top: 0;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }

  .brand {
    display: flex;
    justify-content: center;
    padding: 14px 8px 10px;
  }

  .brand-text {
    display: none;
  }

  nav {
    display: block;
    flex: 1;
    min-height: 0;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  nav a {
    display: flex;
    min-height: 46px;
    margin: 2px 0;
    padding: 11px 8px;
    justify-content: center;
    gap: 0;
    font-size: 0;
    white-space: normal;
  }

  nav a i[data-ico],
  nav a svg {
    width: 20px;
    height: 20px;
  }

  nav a.on::before {
    left: -8px;
    right: auto;
    top: 10px;
    bottom: 10px;
    width: 3px;
    height: auto;
    border-radius: 0 3px 3px 0;
  }

  .rail-sep {
    display: block;
    height: 14px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }

  .rail-foot {
    display: block;
    padding: 7px;
    border-top: 1px solid var(--line);
  }

  .power {
    display: block;
    padding: 8px;
  }

  .power-label,
  .power-state {
    display: none;
  }

  .power .btn.full {
    width: 100%;
    margin-top: 4px;
    font-size: 10px;
    white-space: normal;
  }

  .topbar {
    height: 60px;
    min-height: 60px;
    padding: 0 14px;
  }

  .crumb {
    display: none;
  }

  .topbar-right {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .topbar-right::-webkit-scrollbar {
    display: none;
  }

  .top-action {
    min-width: 40px;
    min-height: 40px;
    font-size: 12px;
  }

  #needs-top {
    font-size: 12px;
  }

  .view {
    padding: 18px 18px 42px;
  }

  .op-grid-2,
  .workspace-shell {
    grid-template-columns: 1fr;
  }

  .context-panel,
  .mgr-side {
    display: none;
  }

  .mgr {
    grid-template-columns: minmax(0, 1fr);
  }

  .split {
    grid-template-columns: 300px minmax(0, 1fr);
    height: 100%;
  }

  .split > * {
    min-height: 0;
    overflow-y: auto;
  }

  .toasts {
    left: auto;
    right: 16px;
    bottom: 16px;
  }

  .toast {
    max-width: 380px;
  }

  .modal-back {
    padding: 16px;
    align-items: center;
  }

  .modal {
    width: min(620px, 100%);
    max-height: calc(100dvh - 32px);
    border-radius: 18px;
  }
}

/* Mobile: bottom navigation, safe areas, larger touch targets and content-first spacing. */
@media (max-width: 700px) {
  html,
  body {
    height: 100%;
    min-height: 100%;
  }

  body {
    overflow: hidden;
  }

  #app {
    grid-template-columns: 1fr;
    grid-template-rows:
      minmax(0, 1fr)
      calc(64px + env(safe-area-inset-bottom));
    height: 100dvh;
    min-height: 100dvh;
  }

  .stage {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    overflow: hidden;
  }

  .rail {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-right: 0;
    border-bottom: 0;
    background: var(--rail-bg);
  }

  .brand,
  .rail-sep,
  .rail-foot {
    display: none;
  }

  nav {
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 64px;
    gap: 3px;
    padding: 7px max(8px, env(safe-area-inset-left)) 7px max(8px, env(safe-area-inset-right));
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  nav::-webkit-scrollbar {
    display: none;
  }

  nav a {
    display: flex;
    flex: 0 0 56px;
    min-width: 56px;
    min-height: 48px;
    margin: 0;
    padding: 8px;
    justify-content: center;
    gap: 0;
    font-size: 0;
    scroll-snap-align: center;
    touch-action: manipulation;
  }

  nav a i[data-ico],
  nav a svg {
    width: 20px;
    height: 20px;
  }

  nav a.on::before {
    left: 9px;
    right: 9px;
    top: auto;
    bottom: -7px;
    width: auto;
    height: 3px;
    border-radius: 3px 3px 0 0;
  }

  .topbar {
    height: 56px;
    min-height: 56px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .crumb {
    display: none;
  }

  .topbar-right {
    min-width: 0;
    gap: 5px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .topbar-right::-webkit-scrollbar {
    display: none;
  }

  .top-action,
  .maya-status,
  button,
  [role="button"] {
    min-height: 44px;
    touch-action: manipulation;
  }

  .top-action {
    min-width: 44px;
    padding-inline: 10px;
    font-size: 12px;
  }

  #needs-top {
    font-size: 11px;
  }

  .view {
    min-height: 0;
    padding:
      14px
      max(12px, env(safe-area-inset-right))
      28px
      max(12px, env(safe-area-inset-left));
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  input[type=text],
  input[type=number],
  input[type=password],
  input[type=email],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px;
  }

  .btn {
    min-height: 44px;
  }

  .btn.tiny {
    min-height: 36px;
  }

  .op-page {
    gap: 12px;
  }

  .op-panel,
  .decision-card,
  .mb-card,
  .provider-card,
  .plan-card {
    padding: 14px;
  }

  .op-title,
  .op-hero,
  .op-panel-head,
  .decision-row,
  .work-row,
  .knowledge-row,
  .cap-row {
    gap: 10px;
  }

  .op-title h1,
  .op-hero h1 {
    font-size: clamp(22px, 7vw, 26px);
  }

  .op-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .op-metric {
    min-width: 0;
    min-height: 78px;
    padding: 11px 12px;
  }

  .op-metric-value {
    font-size: 23px;
  }

  .split {
    grid-template-columns: 1fr;
    height: auto;
  }

  .thread-list {
    max-height: 36dvh;
    overflow-y: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    -webkit-overflow-scrolling: touch;
  }

  .thread-pane {
    padding: 16px 12px 34px;
  }

  .mgr-log {
    padding: 18px 12px 28px;
  }

  .mgr-stream {
    gap: 18px;
  }

  .mgr .msg {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
  }

  .mgr .msg.from-you {
    grid-template-columns: minmax(0, 1fr) 30px;
  }

  .mgr .msg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  .mgr .msg-body {
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.62;
  }

  .mgr-input {
    padding: 10px 10px 12px;
  }

  .maya-commandbar {
    padding:
      8px
      max(9px, env(safe-area-inset-right))
      10px
      max(9px, env(safe-area-inset-left));
  }

  .maya-commandbar-inner {
    min-height: 56px;
    border-radius: 14px;
  }

  .maya-command-action {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .modal-back {
    align-items: end;
    padding:
      max(12px, env(safe-area-inset-top))
      0
      0;
  }

  .modal {
    width: 100%;
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top)));
    border-radius: 18px 18px 0 0;
  }

  .modal-foot {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .toasts {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .toast {
    max-width: none;
  }

  .table-wrap {
    margin-inline: -2px;
  }

  .table-wrap table {
    min-inline-size: 600px;
  }
}

@media (max-width: 360px) {
  .op-metrics-grid {
    grid-template-columns: 1fr;
  }

  .op-metric-scope {
    display: block;
  }

  .view {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
}

@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .top-action:hover,
  nav a:hover,
  .tl-item:hover,
  .search-result:hover,
  .decision-row:hover,
  .provider-card:hover,
  .mb-card:hover {
    transform: none;
  }
}

/* ---------- FINAL INTEGRATED DETAILS ---------- */

.banner.info {
  background: color-mix(in srgb, var(--info) 8%, transparent);
  border-color: color-mix(in srgb, var(--info) 28%, transparent);
  color: var(--info);
}

@media (min-width: 701px) and (max-width: 1100px) {
  .theme-toggle-label { display: none; }
}

/* Mobile navigation intentionally stays horizontally scrollable.
   Do not hide later destinations: every app section remains reachable. */

/* ---------- ACCESSIBILITY ---------- */

:where(
  a[href],
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent));
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--bg), 0 0 0 4px color-mix(in srgb, var(--focus-ring, var(--accent)) 72%, transparent);
}

@media (forced-colors: active) {
  :where(.btn,.card,.op-panel,.op-metric,.decision-card,.mb-card,.provider-card,.plan-card,.top-action,.maya-status,.theme-toggle,.business-switcher,.global-search) {
    border: 1px solid CanvasText;
  }

  :where(a[href],button,input,select,textarea,summary,[role="button"],[tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid Highlight;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   END CONNECT APP SHELL V8
   ========================================================================== */

/* ==========================================================================\n   CONNECT BY JBRH — UNIFIED V9 INTEGRATION\n   This file replaces styles.css + premium-theme.css + corporate-polish.css.\n   Corporate/tenant functionality is preserved, while all visual aliases resolve\n   back to the unified V9 token system.\n   ========================================================================== */

:root {
  /* Compatibility aliases used by tenant/customer workspace rules. */
  --canvas: var(--bg);
  --surface: var(--panel);
  --text: var(--ink);
  --muted: var(--ink-3);
  --topbar-h: var(--v7-topbar-height);

  /* Corporate workspace geometry. */
  --v72-sidebar-width: 240px;
  --v72-context-width: 332px;

  /* Scrollbar and focus tokens. */
  --v72-focus-outer: #ffffff;
  --v72-focus-inner: var(--accent);
  --v72-scroll-thumb: color-mix(in srgb, var(--ink-3) 42%, transparent);
  --v72-scroll-thumb-hover: color-mix(in srgb, var(--ink-3) 66%, transparent);
}

html[data-theme="day"] {
  --v7-context: #f8fafc;
  --v7-command: rgba(248, 250, 252, .97);
  --v72-focus-outer: #ffffff;
  --v72-focus-inner: #8f3f12;
}

html[data-theme="dark"] {
  --v7-context: #0b1016;
  --v7-command: rgba(11, 15, 21, .97);
  --v72-focus-outer: #080b10;
  --v72-focus-inner: #e5a66d;
}

/* Ensure tenant aliases follow the active theme even when they are consumed
   by late-loaded or dynamically injected customer-workspace modules. */
html[data-theme="day"],
html[data-theme="dark"] {
  --canvas: var(--bg);
  --surface: var(--panel);
  --text: var(--ink);
  --muted: var(--ink-3);
}

:root {
  --v72-sidebar-width: 240px;
  --v72-context-width: 332px;
  --v72-focus-outer: #ffffff;
  --v72-focus-inner: #a9602f;
  --v72-scroll-thumb: color-mix(in srgb, var(--ink-3) 38%, transparent);
  --v72-scroll-thumb-hover: color-mix(in srgb, var(--ink-3) 62%, transparent);
}

html[data-theme="day"] {
  /* V7 originally inherited dark-only context/command tokens in light mode. */
  --v7-context: #f8fafc;
  --v7-command: rgba(247, 249, 252, .96);
  --v72-focus-outer: #ffffff;
  --v72-focus-inner: #8d4d22;
}

html[data-theme="dark"] {
  --v7-context: #0b1016;
  --v7-command: rgba(11, 15, 21, .96);
  --v72-focus-outer: #080b10;
  --v72-focus-inner: #e5a66d;
}

html,
body {
  min-width: 0;
  overflow: hidden;
}

body {
  min-height: 100dvh;
}

#app {
  grid-template-columns: var(--v72-sidebar-width) minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.stage,
.workspace-shell,
.workspace-main {
  min-width: 0;
  min-height: 0;
}

.workspace-shell {
  grid-template-columns: minmax(0, 1fr) var(--v72-context-width);
  overflow: hidden;
}

.workspace-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.view {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 84px;
}

.context-panel {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: var(--v7-context);
  color: var(--ink);
  border-left-color: var(--line);
}

html[data-theme="day"] .context-panel {
  box-shadow: -12px 0 34px rgba(23, 35, 49, .035);
}

html[data-theme="dark"] .context-panel {
  box-shadow: -12px 0 34px rgba(0, 0, 0, .10);
}

.context-panel-inner {
  min-width: 0;
  padding: 18px 20px 28px;
}

.context-title,
.context-value,
.context-muted,
.op-statline b,
.kv dd,
.thread-pane,
.msg-text,
.tl-item {
  overflow-wrap: anywhere;
  word-break: normal;
}

.context-section {
  padding-block: 15px;
}

.context-section-title {
  margin-bottom: 8px;
}

/* The command surface is a flex sibling of .view. Sticky positioning is
   unnecessary here and can obscure focus/content at zoomed or short heights. */
.maya-commandbar {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  z-index: 20;
  padding: 10px 18px 12px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--v7-command) 88%, transparent),
      var(--v7-command));
  border-top-color: var(--line);
}

html[data-theme="day"] .maya-commandbar {
  box-shadow: 0 -10px 28px rgba(23, 35, 49, .04);
}

html[data-theme="dark"] .maya-commandbar {
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .14);
}

.maya-commandbar-inner {
  width: min(900px, 100%);
  min-height: 52px;
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.025) inset,
    0 10px 30px rgba(0,0,0,.10);
}

html[data-theme="day"] .maya-commandbar-inner {
  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 9px 24px rgba(23,35,49,.065);
}

/* Corporate density: more content space while preserving readable rhythm. */
.topbar {
  padding-inline: 22px;
}

.business-switcher {
  cursor: default;
  user-select: none;
}

.business-switcher:hover {
  background: var(--surface-raised);
}

.global-search,
.theme-toggle,
.maya-status,
.top-action,
.btn,
nav a {
  min-height: 40px;
}

.global-search {
  width: clamp(250px, 30vw, 420px);
}

/* WCAG 2.2 AA target floor is 24px; keep the custom switch comfortably over it. */
.switch {
  width: 44px;
  height: 26px;
  min-width: 44px;
  min-height: 26px;
}

.switch span {
  border-radius: 999px;
}

.switch span::before {
  width: 18px;
  height: 18px;
  left: 4px;
  top: 4px;
}

.switch input:checked + span::before {
  transform: translateX(18px);
}

/* Strong two-layer focus ring stays visible on light and dark surfaces. */
:where(
  a[href],
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--v72-focus-inner);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--v72-focus-outer);
}

/* Scrollbars remain available but do not visually dominate three-pane views. */
.view,
.context-panel,
.thread-list,
.thread-pane,
nav {
  scrollbar-width: thin;
  scrollbar-color: var(--v72-scroll-thumb) transparent;
}

.view:hover,
.context-panel:hover,
.thread-list:hover,
.thread-pane:hover,
nav:hover {
  scrollbar-color: var(--v72-scroll-thumb) transparent;
}

.view::-webkit-scrollbar,
.context-panel::-webkit-scrollbar,
.thread-list::-webkit-scrollbar,
.thread-pane::-webkit-scrollbar,
nav::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.view::-webkit-scrollbar-thumb,
.context-panel::-webkit-scrollbar-thumb,
.thread-list::-webkit-scrollbar-thumb,
.thread-pane::-webkit-scrollbar-thumb,
nav::-webkit-scrollbar-thumb {
  background: var(--v72-scroll-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

.view:hover::-webkit-scrollbar-thumb,
.context-panel:hover::-webkit-scrollbar-thumb,
.thread-list:hover::-webkit-scrollbar-thumb,
.thread-pane:hover::-webkit-scrollbar-thumb,
nav:hover::-webkit-scrollbar-thumb {
  background: var(--v72-scroll-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.view:hover::-webkit-scrollbar-thumb:hover,
.context-panel:hover::-webkit-scrollbar-thumb:hover,
.thread-list:hover::-webkit-scrollbar-thumb:hover,
.thread-pane:hover::-webkit-scrollbar-thumb:hover,
nav:hover::-webkit-scrollbar-thumb:hover {
  background: var(--v72-scroll-thumb-hover);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Inbox: keep list and conversation useful without crowding the detail pane. */
.split {
  grid-template-columns: minmax(288px, 320px) minmax(0, 1fr);
  min-width: 0;
  min-height: 100%;
}

.thread-list,
.thread-pane {
  overscroll-behavior: contain;
}

.thread-pane {
  padding-inline: clamp(18px, 2vw, 28px);
  padding-bottom: 56px;
}

.kv {
  grid-template-columns: minmax(92px, 120px) minmax(0, 1fr);
  column-gap: 18px;
}

.table-wrap {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Modal semantics are fixed in app.js; this gives focus-safe sizing/reflow. */
.modal-back {
  padding: 20px;
}

.modal {
  max-height: min(88dvh, 860px);
  overflow: hidden;
}

.modal-body {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.x {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
}

/* Improve status/state readability without relying only on color. */
.maya-status,
.theme-toggle,
.global-search,
.business-switcher {
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
}

html[data-theme="day"] .tl-head,
html[data-theme="day"] .thread-list {
  background: var(--surface-soft);
}

html[data-theme="day"] .tl-item.on {
  background: color-mix(in srgb, var(--accent) 7%, #eef2f6);
}

html[data-theme="dark"] .tl-item.on {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-active));
}

/* Keep long headings/controls from colliding in translated or zoomed UI. */
.op-panel-head,
.th-head .row,
.topbar-right,
.row {
  min-width: 0;
}

.op-panel-head > *,
.th-head .row > *,
.topbar-right > * {
  min-width: 0;
}

/* Breakpoint tuned for enterprise laptop widths. Context remains useful on
   wide desktops, then disappears before it can squeeze core mail work. */
@media (max-width: 1360px) {
  :root {
    --v72-sidebar-width: 224px;
    --v72-context-width: 300px;
  }

  .topbar { padding-inline: 18px; }
  .view { padding-inline: 22px; }
}

@media (max-width: 1240px) {
  :root { --v72-sidebar-width: 220px; }

  .workspace-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .context-panel { display: none; }
  .global-search { width: clamp(230px, 34vw, 380px); }
}

@media (max-width: 920px) {
  :root { --v72-sidebar-width: 76px; }
  .global-search { width: min(44vw, 360px); }
  .split { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); }
}

@media (max-width: 700px) {
  /* KK-MAYA-MOBILE-SHELL-REPAIR-V1
     Restore the one-column mobile shell after this final cascade layer.
     Without this override, the 76px tablet sidebar track wins on phones. */
  #app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 64px;
  }

  html,
  body { overflow: hidden; }

  .global-search {
    width: 40px;
    min-width: 40px;
    padding-inline: 10px;
  }

  .global-search > span,
  .global-search > kbd { display: none; }

  .view {
    padding-bottom: 24px;
    scroll-padding-block: 72px;
  }

  .maya-commandbar {
    padding: 8px 9px 10px;
  }

  .split {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .thread-list {
    max-height: 38dvh;
  }

  .modal-back { padding: 10px; }
  .modal { max-height: 92dvh; }
}

@media (max-height: 700px) and (min-width: 701px) {
  .brand { padding-top: 12px; padding-bottom: 8px; }
  nav { padding-top: 4px; padding-bottom: 10px; }
  nav a { min-height: 38px; padding-block: 7px; }
  .rail-sep { padding-top: 10px; }
  .rail-foot { padding: 8px; }
  .power { padding: 9px; }
  .maya-commandbar { padding-block: 7px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .view { scroll-behavior: auto; }
}


/* ==========================================================================\n   CONNECT TENANT WORKSPACE UI — PART 5\n   Customer sessions use a dedicated, tenant-safe workspace shell. The owner\n   rail/context/command surfaces never become customer navigation.\n   ========================================================================== */
body.customer-workspace-mode #app {
  grid-template-columns: minmax(0, 1fr) !important;
}
body.customer-workspace-mode .stage {
  grid-column: 1 / -1;
  min-width: 0;
}
body.customer-workspace-mode .rail,
body.customer-workspace-mode #context-panel,
body.customer-workspace-mode .maya-commandbar,
body.customer-workspace-mode #global-search,
body.customer-workspace-mode #maya-status { display: none !important; }
body.customer-workspace-mode .workspace-shell {
  display: block !important;
  grid-template-columns: minmax(0,1fr) !important;
  overflow: hidden;
}
body.customer-workspace-mode .workspace-main { width: 100%; overflow: hidden !important; }
body.customer-workspace-mode .view { padding: 0; overflow: auto; }
body.customer-workspace-mode .topbar { min-width: 0; }
body.customer-workspace-mode .topbar > .row { flex: 1 1 auto; overflow: hidden; }
body.customer-workspace-mode .business-switcher { max-width: min(360px, 42vw); }
body.customer-workspace-mode .topbar-right { flex: 0 0 auto; }

.tenant-app-shell {
  min-height: 100%;
  display: grid;
  grid-template-columns: 232px minmax(0,1fr);
  background: var(--canvas);
}
.tenant-nav {
  min-width: 0;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100%;
  min-height: calc(100dvh - var(--topbar-h, 64px));
  padding: 22px 14px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.tenant-nav-head { display:flex; align-items:center; gap:10px; padding:0 8px; min-width:0; }
.tenant-brand-mark { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:none; font-weight:800; color:#fff; background:var(--accent); box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 22%,transparent); }
.tenant-brand-copy { min-width:0; display:flex; flex-direction:column; }
.tenant-brand-copy strong { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tenant-brand-copy span { margin-top:2px; font-size:10px; color:var(--ink-3); }
.tenant-nav-items { display:grid; gap:5px; }
.tenant-nav-link { min-height:42px; padding:0 12px; display:flex; align-items:center; border-radius:10px; color:var(--ink-2); font-weight:650; text-decoration:none; border:1px solid transparent; }
.tenant-nav-link:hover { color:var(--ink); background:var(--surface-hover); }
.tenant-nav-link.active { color:var(--ink); background:var(--surface-raised); border-color:var(--line); box-shadow:0 8px 26px rgba(0,0,0,.04); }
.tenant-nav-foot { margin-top:auto; padding:12px; display:flex; align-items:center; gap:8px; font-size:11px; color:var(--ink-3); }
.tenant-security-dot { width:8px; height:8px; border-radius:999px; background:#37a66b; box-shadow:0 0 0 4px color-mix(in srgb,#37a66b 14%,transparent); }
.tenant-content { min-width:0; padding:clamp(20px,3vw,42px); }
.tenant-mobile-route { display:none; }
.tenant-page { width:min(1240px,100%); margin:0 auto; }
.tenant-page h1 { margin:5px 0 6px; font-size:clamp(26px,3vw,38px); letter-spacing:-.035em; line-height:1.08; }
.tenant-page h2 { margin:4px 0 8px; font-size:20px; letter-spacing:-.02em; }
.tenant-page p { line-height:1.6; }
.tenant-kicker { display:block; font-size:10px; font-weight:800; letter-spacing:.16em; color:var(--accent); text-transform:uppercase; }
.tenant-page-head,.tenant-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px; }
.tenant-page-head p,.tenant-hero p { margin:0; color:var(--ink-2); max-width:700px; }
.tenant-plan-pill,.tenant-plan-state,.tenant-count-badge { flex:none; padding:10px 13px; border:1px solid var(--line); border-radius:12px; background:var(--surface-raised); }
.tenant-plan-pill { min-width:160px; text-align:right; }
.tenant-plan-pill span { display:block; font-weight:800; }
.tenant-plan-pill small { display:block; margin-top:3px; color:var(--ink-3); font-size:10px; }
.tenant-plan-state.good { color:#2e9a63; }
.tenant-stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.tenant-stat { min-width:0; padding:18px; border:1px solid var(--line); border-radius:15px; background:var(--surface-raised); }
.tenant-stat span,.tenant-stat small { display:block; color:var(--ink-3); }
.tenant-stat strong { display:block; margin:7px 0 4px; font-size:22px; letter-spacing:-.025em; overflow-wrap:anywhere; }
.tenant-stat small { font-size:10px; }
.tenant-grid-2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-bottom:18px; }
.tenant-panel { min-width:0; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--surface-raised); box-shadow:0 12px 36px rgba(0,0,0,.035); }
.tenant-panel-head,.tenant-mailbox-head,.tenant-contact-top,.tenant-inbox-title,.tenant-message>div { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.tenant-panel-head a { font-size:12px; color:var(--accent); }
.tenant-progress-label,.tenant-count-badge { font-size:12px; font-weight:750; }
.tenant-progress { height:7px; margin:14px 0 16px; overflow:hidden; border-radius:999px; background:var(--surface-input); }
.tenant-progress span { display:block; height:100%; border-radius:inherit; background:var(--accent); }
.tenant-checklist { display:grid; gap:8px; }
.tenant-check { display:flex; align-items:center; gap:10px; min-height:36px; color:var(--ink-2); }
.tenant-check>span { width:22px; height:22px; display:grid; place-items:center; border-radius:999px; border:1px solid var(--line); }
.tenant-check.done { color:var(--ink); }
.tenant-check.done>span { color:#2e9a63; border-color:color-mix(in srgb,#2e9a63 35%,var(--line)); background:color-mix(in srgb,#2e9a63 9%,transparent); }
.tenant-actions,.tenant-form-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:16px; }
.tenant-list,.tenant-inbox-list { display:grid; }
.tenant-list-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.tenant-list-row:last-child { border-bottom:0; }
.tenant-list-copy { min-width:0; display:flex; flex-direction:column; }
.tenant-list-copy strong,.tenant-list-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tenant-list-copy span,.tenant-list-row time { font-size:10px; color:var(--ink-3); }
.tenant-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--surface-input); border:1px solid var(--line); font-weight:750; color:var(--ink-2); }
.tenant-avatar.large { width:42px; height:42px; border-radius:12px; }
.tenant-safety-panel { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.tenant-safety-panel p { margin:0; color:var(--ink-2); }
.tenant-secure-badge { flex:none; padding:8px 12px; border-radius:999px; color:#2e9a63; background:color-mix(in srgb,#2e9a63 10%,transparent); border:1px solid color-mix(in srgb,#2e9a63 28%,var(--line)); font-weight:750; font-size:11px; }
.tenant-empty { min-height:220px; display:grid; place-items:center; align-content:center; text-align:center; padding:30px; border:1px dashed var(--line); border-radius:16px; background:color-mix(in srgb,var(--surface-raised) 86%,transparent); }
.tenant-empty-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#fff; background:var(--accent); font-weight:800; }
.tenant-empty h3 { margin:12px 0 4px; }
.tenant-empty p { max-width:520px; margin:0 0 14px; color:var(--ink-2); }
.tenant-inbox-list { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface-raised); }
.tenant-inbox-row { display:grid; grid-template-columns:42px minmax(0,1fr); gap:12px; padding:16px 18px; border-bottom:1px solid var(--line-soft); }
.tenant-inbox-row:last-child { border-bottom:0; }
.tenant-inbox-main { min-width:0; }
.tenant-inbox-title strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tenant-inbox-title time,.tenant-inbox-main>span { color:var(--ink-3); font-size:10px; }
.tenant-inbox-main>p { margin:7px 0 0; color:var(--ink-2); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.tenant-thread-layout { min-height:520px; display:grid; grid-template-columns:minmax(260px,.78fr) minmax(0,1.4fr); gap:14px; }
.tenant-thread-list,.tenant-thread-detail { min-width:0; border:1px solid var(--line); border-radius:16px; background:var(--surface-raised); overflow:auto; }
.tenant-thread-row { width:100%; min-height:72px; padding:13px 15px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; text-align:left; border:0; border-bottom:1px solid var(--line-soft); background:transparent; color:inherit; cursor:pointer; }
.tenant-thread-row:hover,.tenant-thread-row.active { background:var(--surface-hover); }
.tenant-thread-row strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tenant-thread-row span,.tenant-thread-row small { color:var(--ink-3); font-size:10px; }
.tenant-thread-detail { padding:20px; }
.tenant-message-stack { display:grid; gap:12px; margin-top:18px; }
.tenant-message { padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-input); }
.tenant-message.outbound { margin-left:clamp(0px,8vw,96px); background:color-mix(in srgb,var(--accent) 7%,var(--surface-raised)); }
.tenant-message time { color:var(--ink-3); font-size:10px; }
.tenant-message p { white-space:pre-wrap; overflow-wrap:anywhere; margin:9px 0 0; }
.tenant-search input { min-width:min(280px,40vw); }
.tenant-contact-grid,.tenant-mailbox-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.tenant-contact-card { min-width:0; padding:17px; border:1px solid var(--line); border-radius:15px; background:var(--surface-raised); }
.tenant-contact-top { justify-content:flex-start; }
.tenant-contact-top>div:last-child { min-width:0; display:flex; flex-direction:column; }
.tenant-contact-top strong,.tenant-contact-top span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tenant-contact-top span { color:var(--ink-3); font-size:11px; }
.tenant-contact-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px 0; font-size:11px; color:var(--ink-2); }
.tenant-contact-meta>span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tenant-chip { flex:none; padding:5px 8px; border-radius:999px; border:1px solid var(--line); font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.tenant-chip.good { color:#2e9a63; }.tenant-chip.danger { color:#cc5b5b; }
.tenant-usage-card { flex:none; min-width:150px; padding:11px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-raised); text-align:right; }
.tenant-usage-card strong,.tenant-usage-card span { display:block; }.tenant-usage-card span { margin-top:2px; color:var(--ink-3); font-size:10px; }
.tenant-form { display:grid; gap:13px; }.tenant-form label { display:grid; gap:6px; }.tenant-form label>span { font-size:11px; font-weight:700; color:var(--ink-2); }.tenant-form textarea { resize:vertical; min-height:180px; }
.tenant-policy-row,.tenant-plan-list>div { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line-soft); }.tenant-policy-row:last-of-type,.tenant-plan-list>div:last-child { border-bottom:0; }.tenant-policy-row span,.tenant-plan-list span { color:var(--ink-3); text-align:right; }
.tenant-mailbox-head { justify-content:flex-start; align-items:center; }.tenant-mailbox-head>div:nth-child(2) { min-width:0; flex:1; display:flex; flex-direction:column; }.tenant-mailbox-head strong,.tenant-mailbox-head span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.tenant-mailbox-head span { color:var(--ink-3); font-size:11px; }
.tenant-mailbox-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:18px 0; }.tenant-mailbox-meta>div { padding:10px; border-radius:11px; background:var(--surface-input); }.tenant-mailbox-meta span,.tenant-mailbox-meta strong { display:block; overflow-wrap:anywhere; }.tenant-mailbox-meta span { color:var(--ink-3); font-size:9px; }.tenant-mailbox-meta strong { margin-top:4px; font-size:11px; }
.tenant-info-strip { display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; padding:13px 15px; border:1px solid var(--line); border-radius:13px; color:var(--ink-2); font-size:11px; }.tenant-info-strip b { color:var(--ink); }
.tenant-loading { min-height:200px; display:grid; place-items:center; color:var(--ink-3); }

@media (max-width: 1080px) {
  .tenant-app-shell { grid-template-columns:minmax(0,1fr); }
  .tenant-nav { position:sticky; top:0; z-index:5; min-height:0; height:auto; padding:10px 14px; border-right:0; border-bottom:1px solid var(--line); flex-direction:row; align-items:center; gap:12px; }
  .tenant-nav-head { display:none; }
  .tenant-nav-items { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }.tenant-nav-items::-webkit-scrollbar{display:none;}
  .tenant-nav-link { flex:none; min-height:38px; padding:0 11px; font-size:12px; }
  .tenant-nav-foot { margin:0 0 0 auto; flex:none; }
  .tenant-content { padding:24px; }
  .tenant-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  body.customer-workspace-mode .topbar { padding-inline:12px; gap:8px; }
  body.customer-workspace-mode #crumb { display:none; }
  body.customer-workspace-mode .business-switcher { max-width:min(58vw,360px); }
  body.customer-workspace-mode .business-switcher-copy b { font-size:11px; }
  body.customer-workspace-mode .business-switcher-copy span { display:none; }
  body.customer-workspace-mode .theme-toggle { width:40px; min-width:40px; padding:0; }
  body.customer-workspace-mode .theme-toggle-label { display:none; }
  body.customer-workspace-mode #logout-btn { padding-inline:10px; }
  .tenant-nav { padding-inline:10px; }
  .tenant-nav-foot { display:none; }
  .tenant-content { padding:18px 14px 28px; }
  .tenant-mobile-route { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; color:var(--ink-2); }.tenant-mobile-route span{font-weight:750;color:var(--ink);}.tenant-mobile-route small{color:var(--ink-3);}
  .tenant-page-head,.tenant-hero,.tenant-safety-panel { flex-direction:column; align-items:stretch; gap:12px; }
  .tenant-plan-pill,.tenant-usage-card { min-width:0; width:100%; text-align:left; }
  .tenant-stats-grid,.tenant-grid-2,.tenant-contact-grid,.tenant-mailbox-grid { grid-template-columns:minmax(0,1fr); }
  .tenant-thread-layout { grid-template-columns:minmax(0,1fr); min-height:0; }.tenant-thread-list{max-height:320px;}.tenant-thread-detail{min-height:300px;}
  .tenant-search input { width:100%; min-width:0; }
  .tenant-mailbox-meta { grid-template-columns:minmax(0,1fr); }
  .tenant-message.outbound { margin-left:20px; }
  .tenant-inbox-row { grid-template-columns:34px minmax(0,1fr); padding:14px 12px; }
  .tenant-inbox-title { display:grid; gap:3px; }.tenant-inbox-title time{text-align:left;}
}
@media (max-width: 480px) {
  body.customer-workspace-mode .business-switcher-mark { display:none; }
  body.customer-workspace-mode .business-switcher { border:0; background:transparent; padding-inline:0; max-width:48vw; }
  .tenant-nav-link { font-size:11px; padding-inline:9px; }
  .tenant-content { padding-inline:11px; }
  .tenant-panel,.tenant-stat { border-radius:13px; padding:15px; }
  .tenant-page h1 { font-size:28px; }
  .tenant-actions .btn,.tenant-form-actions .btn { flex:1 1 auto; }
}

/* PART 5E — commercial account center / connection hub */
.tenant-provider-choice{min-height:112px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:16px;white-space:normal}
.tenant-provider-choice b{font-size:15px}.tenant-provider-choice span{color:var(--text);font-size:13px}.tenant-provider-choice small{color:var(--muted);font-size:12px}
.account-center .account-checklist{margin-top:14px}.account-center .plan-card .btn{margin-top:auto}.account-center .op-statline small{display:block;color:var(--muted);font-weight:400;margin-top:3px}
@media (max-width:720px){.tenant-provider-choice{min-height:92px}.account-center .plan-grid{grid-template-columns:1fr}}

/* ==========================================================================\n   V9 FINAL QUALITY GUARDRAILS\n   ========================================================================== */

/* Never remove access to later navigation destinations on mobile. */
@media (max-width: 700px) {
  nav a:nth-of-type(n+7) { display: flex; }
}

/* Touch/coarse pointer targets: comfortable operational floor. */
@media (pointer: coarse) {
  .btn,
  .top-action,
  .theme-toggle,
  .maya-status,
  .global-search,
  nav a,
  .tenant-nav-link,
  .tenant-thread-row,
  .x {
    min-height: 44px;
  }
}

/* Text/surface contrast guardrails for day mode. */
html[data-theme="day"] .muted,
html[data-theme="day"] .hint,
html[data-theme="day"] .context-muted,
html[data-theme="day"] .op-metric-scope,
html[data-theme="day"] .tenant-stat span,
html[data-theme="day"] .tenant-stat small,
html[data-theme="day"] .tenant-list-copy span,
html[data-theme="day"] .tenant-list-row time,
html[data-theme="day"] .tenant-inbox-title time,
html[data-theme="day"] .tenant-inbox-main > span {
  color: var(--ink-3);
}

/* Preserve visible keyboard focus even on components that define shadows. */
:where(
  a[href],
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--v72-focus-inner);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--v72-focus-outer);
}

@media (forced-colors: active) {
  :where(
    a[href], button, input, select, textarea, summary,
    [role="button"], [tabindex]:not([tabindex="-1"])
  ):focus-visible {
    outline: 2px solid Highlight;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* MAYA-V10-PROFESSIONAL-OVERRIDE START */

/* =========================
   CONNECT PROFESSIONAL V10
   ========================= */

:root {
  --maya-brand: #d8893f;
  --maya-brand-hover: #c36f2d;
  --maya-brand-strong: #a94f16;
  --maya-brand-dark-ink: #211307;

  --maya-font:
    "Segoe UI Variable Text",
    "Segoe UI Variable",
    "Segoe UI",
    Inter,
    Roboto,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  --maya-display-font:
    "Segoe UI Variable Display",
    "Segoe UI Variable",
    "Segoe UI",
    Inter,
    system-ui,
    sans-serif;

  --maya-sidebar-width: 244px;
  --maya-context-width: 342px;
}

/* DAY MODE */

html[data-theme="day"] {
  --bg: #f3f5f7;
  --bg-2: #edf1f4;
  --panel: #ffffff;
  --panel-2: #f8fafc;

  --surface-raised: #ffffff;
  --surface-hover: #f1f4f7;
  --surface-active: #e9eef3;
  --surface-input: #ffffff;
  --surface-soft: #f7f9fb;

  --line: #d7dee7;
  --line-soft: #e7ebf0;

  --ink: #111827;
  --ink-2: #4b5563;
  --ink-3: #697586;

  --accent: #d8893f;
  --accent-2: #c36f2d;
  --accent-ink: #211307;

  --ok: #157a64;
  --warn: #956317;
  --bad: #b44046;
  --info: #326b99;

  --rail-bg: #171c22;
  --topbar-bg: #ffffff;

  --v7-context: #f8fafc;
  --v7-command: #f7f9fb;

  --maya-link: #a14b16;
  --maya-link-hover: #78360e;

  --focus-ring: #8f430f;
}

/* DARK MODE */

html[data-theme="dark"] {
  --bg: #090e14;
  --bg-2: #0c1219;
  --panel: #111821;
  --panel-2: #161f2a;

  --surface-raised: #141d27;
  --surface-hover: #1a2531;
  --surface-active: #202c39;
  --surface-input: #0d141c;
  --surface-soft: #0c131b;

  --line: #283440;
  --line-soft: #202b36;

  --ink: #f4f7fa;
  --ink-2: #b6c0cc;
  --ink-3: #8794a3;

  --accent: #e29a53;
  --accent-2: #cb7b35;
  --accent-ink: #1c1108;

  --ok: #52c7a5;
  --warn: #d5a64f;
  --bad: #e17479;
  --info: #77a9d5;

  --rail-bg: #080d12;
  --topbar-bg: #0a0f15;

  --v7-context: #0d141c;
  --v7-command: #0d141c;

  --maya-link: #f0aa67;
  --maya-link-hover: #ffc58d;

  --focus-ring: #f0aa65;
}

/* TYPOGRAPHY */

html,
body,
button,
input,
textarea,
select {
  font-family: var(--maya-font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--maya-display-font);
}

body {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.006em;
}

.op-title h1,
.op-hero h1 {
  font-size: clamp(28px, 2.15vw, 34px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.034em;
}

.op-title p,
.op-hero p {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
}

.eyebrow,
.context-section-title,
.context-title,
.rail-sep,
.today-strip-label,
.tenant-kicker {
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .13em;
}

/* SHELL */

#app {
  grid-template-columns: var(--maya-sidebar-width) minmax(0,1fr);
  background: var(--bg);
}

.workspace-shell {
  grid-template-columns: minmax(0,1fr) var(--maya-context-width);
}

.stage {
  background: var(--bg);
}

/* SIDEBAR */

.rail {
  background: var(--rail-bg);
  border-right: 1px solid rgba(255,255,255,.075);
  box-shadow: none;
}

html[data-theme="day"] .rail,
html[data-theme="dark"] .rail {
  --ink: #f3f6f9;
  --ink-2: #bdc6d0;
  --ink-3: #83909f;
  --line: rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.055);
  --surface-hover: rgba(255,255,255,.055);
  --surface-active: rgba(255,255,255,.095);
}

.brand-mark {
  background: var(--maya-brand);
  color: var(--maya-brand-dark-ink);
  border-radius: 11px;
  box-shadow: none;
}

nav a {
  min-height: 42px;
  padding: 9px 11px;
  border-radius: 10px;
  color: #b9c2cd;
  font-weight: 560;
}

nav a:hover {
  background: rgba(255,255,255,.055);
  color: #ffffff;
}

nav a.on {
  background: #29313b;
  color: #ffffff;
  font-weight: 660;
}

nav a.on::before {
  background: var(--maya-brand);
  box-shadow: none;
}

.power {
  background: #161f29;
  border-color: #2b3744;
  box-shadow: none;
}

/* TOPBAR */

.topbar {
  height: 64px;
  min-height: 64px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.business-switcher,
.global-search,
.theme-toggle,
.maya-status,
.top-action {
  border-radius: 11px;
  border-color: var(--line);
  box-shadow: none;
}

/* MAIN */

.view {
  padding: 26px 28px 52px;
}

.op-page {
  max-width: 1480px;
}

/* PANELS */

.card,
.op-panel,
.op-metric,
.decision-card,
.mb-card,
.provider-card,
.plan-card,
.autonomy-card,
.task,
.tenant-panel,
.tenant-stat,
.tenant-contact-card,
.tenant-thread-list,
.tenant-thread-detail,
.tenant-inbox-list {
  background: var(--panel);
  background-image: none;
  border-color: var(--line);
}

.card,
.op-panel,
.decision-card,
.mb-card,
.provider-card,
.plan-card,
.tenant-panel {
  border-radius: 15px;
}

/* BUTTONS */

.btn {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 620;
  box-shadow: none;
}

.btn.primary {
  color: var(--maya-brand-dark-ink);
  background: var(--accent);
  background-image: none;
  border-color: var(--accent);
  font-weight: 680;
}

.btn.primary:hover {
  background: var(--accent-2);
  background-image: none;
}

.maya-command-action {
  background: var(--accent);
  color: var(--maya-brand-dark-ink);
}

/* LINKS */

.view a:not(.btn):not(.op-tab):not(.tenant-nav-link),
.context-panel a:not(.btn),
.tenant-content a:not(.btn):not(.tenant-nav-link) {
  color: var(--maya-link);
  text-decoration-color: currentColor;
}

.view a:not(.btn):not(.op-tab):hover,
.context-panel a:not(.btn):hover {
  color: var(--maya-link-hover);
}

/* TABLE */

.table-wrap {
  border-color: var(--line);
  border-radius: 13px;
  background: var(--panel);
}

th {
  background: var(--surface-soft);
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .105em;
}

td {
  border-bottom-color: var(--line-soft);
}

tbody tr:hover {
  background: var(--surface-hover);
}

/* CONTEXT */

.context-panel {
  background: var(--v7-context);
  border-left: 1px solid var(--line);
  box-shadow: none;
}

/* COMMAND BAR */

.maya-commandbar {
  background: var(--v7-command);
  border-top: 1px solid var(--line);
  box-shadow: none;
}

.maya-commandbar-inner {
  width: min(940px,100%);
  min-height: 56px;
  border-color: var(--line);
  border-radius: 14px;
  background: var(--surface-raised);
}

/* FORMS */

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
  border-color: var(--line);
  background: var(--surface-input);
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-3);
}

/* FOCUS */

:where(
  a[href],
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* TABLET */

@media (max-width: 920px) {
  :root {
    --maya-sidebar-width: 76px;
  }

  #app {
    grid-template-columns: 76px minmax(0,1fr);
  }

  .op-title h1,
  .op-hero h1 {
    font-size: 27px;
  }
}

/* MOBILE */

@media (max-width: 700px) {
  #app {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(0,1fr) 64px;
  }

  .view {
    padding: 16px 12px 28px;
  }

  .op-title h1,
  .op-hero h1 {
    font-size: 25px;
  }

  .btn,
  .top-action,
  .theme-toggle,
  .maya-status {
    min-height: 42px;
  }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* MAYA-V10-PROFESSIONAL-OVERRIDE END */

/* MAYA-V10.1-COMPACT-CLARITY START
   ================================================================
   Goals:
   - ~12% smaller visual scale
   - less visual noise
   - remove unnecessary horizontal separators
   - higher Light mode contrast
   - clearer Dark mode secondary text
   - stronger status-pill legibility
   ================================================================ */


/* ================================================================
   01. TYPOGRAPHY — APPROX 12% COMPACTION
   ================================================================ */

body {
  font-size: 12.32px;
  line-height: 1.46;
}

.crumb {
  font-size: 13.2px;
}

.brand-text strong {
  font-size: 13.2px;
}

.brand-text span {
  font-size: 8.8px;
}

nav a {
  font-size: 11.9px;
}

.op-title h1,
.op-hero h1 {
  font-size: clamp(24.5px, 1.9vw, 30px);
  line-height: 1.13;
  letter-spacing: -.03em;
}

.op-title p,
.op-hero p {
  font-size: 12.3px;
  line-height: 1.5;
}

.op-panel h2,
.decision-card h2 {
  font-size: 15.8px;
  line-height: 1.3;
}

.op-panel-head p,
.decision-card p,
.context-muted {
  font-size: 11.5px;
}

.eyebrow,
.context-section-title,
.context-title,
.rail-sep,
.today-strip-label,
.tenant-kicker {
  font-size: 8.8px;
  letter-spacing: .12em;
}

.op-metric-value {
  font-size: 22.8px;
}

.op-metric-label {
  font-size: 10.6px;
}

.op-metric-scope {
  font-size: 9.4px;
}

.btn {
  font-size: 11px;
}

.status-dot,
.tag,
.score-pill,
.pip {
  font-size: 9.7px;
}

table {
  font-size: 11.5px;
}

th {
  font-size: 8.8px;
}

.context-panel {
  font-size: 12px;
}


/* ================================================================
   02. LAYOUT / SPACING — APPROX 12% COMPACTION
   ================================================================ */

:root {
  --maya-sidebar-width: 224px;
  --maya-context-width: 312px;
}

.topbar {
  height: 58px;
  min-height: 58px;
  padding-inline: 19px;
}

.brand {
  padding: 15px 14px 12px;
}

.brand-mark {
  width: 34px;
  height: 34px;
}

nav {
  padding-inline: 9px;
}

nav a {
  min-height: 37px;
  padding: 8px 10px;
  border-radius: 9px;
}

.view {
  padding: 22px 24px 44px;
}

.op-page {
  gap: 13px;
}

.op-title,
.op-hero {
  gap: 15px;
  padding-block: 4px 6px;
}

.op-panel {
  padding: 16px 17px;
}

.op-panel-head {
  margin-bottom: 12px;
}

.decision-grid {
  gap: 12px;
}

.decision-card {
  padding: 16px 17px;
}

.op-metrics-grid {
  gap: 8px;
}

.op-metric {
  min-height: 76px;
  padding: 12px 13px;
}

.btn {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 9px;
}

.top-action,
.theme-toggle,
.maya-status,
.global-search,
.business-switcher {
  min-height: 36px;
}

.context-panel-inner {
  padding: 17px 20px 26px;
}

.context-section {
  padding-block: 13px;
}

.maya-commandbar {
  padding: 8px 15px 10px;
}

.maya-commandbar-inner {
  min-height: 50px;
  padding: 6px 7px 6px 13px;
}

.maya-command-action {
  width: 36px;
  height: 36px;
  min-height: 36px;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
  min-height: 36px;
  padding: 8px 10px;
}


/* ================================================================
   03. REMOVE INTERNAL HORIZONTAL LINES
   Keep outer card boundaries.
   ================================================================ */

.decision-row,
.decision-needs,
.op-statline,
.activity-row,
.search-result,
.work-row,
.knowledge-row,
.cap-row,
.context-section,
.tenant-list-row,
.tenant-policy-row,
.tenant-plan-list > div,
.tenant-inbox-row,
.tenant-thread-row,
td {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Replace lines with breathing space */

.decision-row,
.activity-row,
.work-row,
.knowledge-row,
.cap-row,
.search-result {
  margin-bottom: 3px;
}

.decision-card .decision-needs {
  padding-top: 9px;
  padding-bottom: 9px;
}


/* ================================================================
   04. LIGHT MODE — STRONGER CONTRAST
   ================================================================ */

html[data-theme="day"] {
  --bg: #f2f4f6;
  --bg-2: #e9edf1;

  --panel: #ffffff;
  --panel-2: #f7f9fb;

  --surface-raised: #ffffff;
  --surface-hover: #edf1f5;
  --surface-active: #e5eaf0;
  --surface-input: #ffffff;

  --line: #cbd4de;
  --line-soft: #e0e6ec;

  --ink: #101722;
  --ink-2: #465365;
  --ink-3: #5f6e81;

  --v7-context: #f7f9fb;
  --v7-command: #f5f7f9;

  --maya-link: #8d4215;
  --maya-link-hover: #642d0c;
}

html[data-theme="day"] .op-panel,
html[data-theme="day"] .decision-card,
html[data-theme="day"] .card,
html[data-theme="day"] .mb-card {
  background: #ffffff;
  border-color: #cbd4de;
  box-shadow:
    0 1px 2px rgba(17,24,39,.03),
    0 8px 20px rgba(17,24,39,.05);
}

html[data-theme="day"] .op-title p,
html[data-theme="day"] .op-hero p,
html[data-theme="day"] .decision-card p,
html[data-theme="day"] .context-muted {
  color: #4b596b;
}

html[data-theme="day"] small,
html[data-theme="day"] .hint,
html[data-theme="day"] .muted {
  color: #59687a;
}


/* ================================================================
   05. DARK MODE — KEEP SECONDARY TEXT VISIBLE
   ================================================================ */

html[data-theme="dark"] {
  --bg: #090e14;
  --panel: #111922;
  --panel-2: #17212c;

  --surface-raised: #151f29;
  --surface-hover: #1b2733;
  --surface-active: #22303d;

  --line: #31404e;
  --line-soft: #25323e;

  --ink: #f6f8fa;
  --ink-2: #c0c9d3;
  --ink-3: #98a5b3;

  --maya-link: #efa55d;
  --maya-link-hover: #ffc286;
}

html[data-theme="dark"] .op-title p,
html[data-theme="dark"] .op-hero p,
html[data-theme="dark"] .decision-card p,
html[data-theme="dark"] .context-muted {
  color: #b5c0cc;
}


/* ================================================================
   06. FIX LOW-CONTRAST PILLS / STATUS LABELS
   Especially screenshot "email decision"
   ================================================================ */

.status-dot,
.tag,
.score-pill {
  border: 1px solid transparent;
}

html[data-theme="day"] .status-dot,
html[data-theme="day"] .tag {
  color: #384657;
  background: #eef2f6;
  border-color: #cdd6df;
}

html[data-theme="day"] .status-dot.warn,
html[data-theme="day"] .tag.warn {
  color: #7d470e;
  background: #fff4e8;
  border-color: #e4c6a3;
}

html[data-theme="day"] .status-dot.ok,
html[data-theme="day"] .tag.ok {
  color: #136a56;
  background: #e8f6f2;
  border-color: #b9ded4;
}

html[data-theme="day"] .status-dot.bad,
html[data-theme="day"] .tag.bad {
  color: #9d3439;
  background: #fceced;
  border-color: #e7bec1;
}

html[data-theme="day"] .status-dot.info,
html[data-theme="day"] .tag.info {
  color: #315f88;
  background: #edf4fa;
  border-color: #bfd1e0;
}

html[data-theme="dark"] .status-dot,
html[data-theme="dark"] .tag {
  color: #d8e0e8;
  background: #202b36;
  border-color: #354454;
}

html[data-theme="dark"] .status-dot.warn,
html[data-theme="dark"] .tag.warn {
  color: #f0b56f;
  background: #2a2118;
  border-color: #5d4327;
}


/* ================================================================
   07. CARD TEXT READABILITY
   ================================================================ */

.decision-card h2 {
  color: var(--ink);
}

.decision-card p,
.decision-card small {
  color: var(--ink-2);
}

.decision-needs span {
  color: var(--ink-3);
}

.decision-needs b {
  color: var(--ink);
}


/* ================================================================
   08. LINKS — REMOVE VISUAL NOISE FROM UNDERLINES
   ================================================================ */

.view a:not(.btn):not(.op-tab):not(.tenant-nav-link),
.context-panel a:not(.btn),
.tenant-content a:not(.btn):not(.tenant-nav-link) {
  text-decoration: none;
  font-weight: 600;
}

.view a:not(.btn):not(.op-tab):not(.tenant-nav-link):hover,
.context-panel a:not(.btn):hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/* ================================================================
   09. TABLES — CLEANER, NO ROW LINES
   ================================================================ */

.table-wrap {
  overflow: hidden auto;
}

th {
  border-bottom: 0 !important;
}

tbody tr + tr td {
  border-top: 0 !important;
}

tbody tr:hover {
  background: var(--surface-hover);
}


/* ================================================================
   10. MOBILE / TABLET COMPACT SCALE
   ================================================================ */

@media (max-width: 920px) {
  :root {
    --maya-sidebar-width: 68px;
  }

  #app {
    grid-template-columns: 68px minmax(0,1fr);
  }

  .op-title h1,
  .op-hero h1 {
    font-size: 23.5px;
  }

  .view {
    padding: 17px 16px 36px;
  }
}

@media (max-width: 700px) {
  #app {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(0,1fr) 58px;
  }

  .op-title h1,
  .op-hero h1 {
    font-size: 22px;
  }

  .view {
    padding: 14px 11px 24px;
  }

  .decision-card,
  .op-panel {
    padding: 14px;
  }

  .btn,
  .top-action,
  .theme-toggle,
  .maya-status {
    min-height: 38px;
  }

  nav a {
    min-height: 42px;
  }
}


/* MAYA-V10.1-COMPACT-CLARITY END */

/* MAYA-V10.2-GRAPHITE-GLOW START
   ========================================================================
   CONNECT BY JBRH — V10.2
   Neutral Graphite + Soft Luminous Depth

   Dark:
   - no navy/blue cast
   - graphite + charcoal surfaces
   - controlled neutral separation
   - soft warm reflected glow

   Day:
   - warm-neutral canvas
   - pure clean cards
   - subtle premium elevation
   - low-noise luminous depth
   ======================================================================== */


/* ========================================================================
   01 — REFINED CONNECT BRAND
   ======================================================================== */

:root {
  --maya-brand: #d68a45;
  --maya-brand-hover: #c87532;
  --maya-brand-strong: #9a4a19;
  --maya-brand-dark-ink: #211307;

  --maya-glow-soft: rgba(214, 138, 69, .045);
  --maya-glow-medium: rgba(214, 138, 69, .075);
}


/* ========================================================================
   02 — DARK MODE
   TRUE NEUTRAL GRAPHITE — NO NAVY CAST
   ======================================================================== */

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0b0c;
  --bg-2: #0f1011;

  --panel: #141516;
  --panel-2: #1a1b1d;

  --surface-raised: #18191b;
  --surface-hover: #202123;
  --surface-active: #26282a;
  --surface-input: #101112;
  --surface-soft: #111213;

  --line: #303235;
  --line-soft: #242628;

  --ink: #f5f5f4;
  --ink-2: #bcbdb9;
  --ink-3: #929590;

  --accent: #e3a15f;
  --accent-2: #cd8240;
  --accent-ink: #1e1309;

  --ok: #57c7a5;
  --warn: #d7a75a;
  --bad: #df777b;
  --info: #9faeb9;

  --rail-bg: #08090a;
  --topbar-bg: #0d0e0f;

  --v7-context: #101112;
  --v7-command: #111213;

  --maya-link: #eca15b;
  --maya-link-hover: #ffc188;

  --focus-ring: #efa961;

  --shadow-soft:
    0 1px 0 rgba(255,255,255,.026) inset,
    0 7px 20px rgba(0,0,0,.20);

  --shadow-card:
    0 1px 0 rgba(255,255,255,.032) inset,
    0 9px 24px rgba(0,0,0,.22),
    0 22px 48px rgba(0,0,0,.11);

  --shadow:
    0 24px 64px rgba(0,0,0,.42);
}


/* ========================================================================
   03 — DARK CANVAS / SHELL
   ======================================================================== */

html[data-theme="dark"] body,
html[data-theme="dark"] .stage,
html[data-theme="dark"] .workspace-main,
html[data-theme="dark"] .view {
  background-color: #0b0b0c;
}

html[data-theme="dark"] body {
  background-image:
    radial-gradient(
      800px 440px at 64% -180px,
      rgba(227,161,95,.032),
      transparent 67%
    );
}


/* Sidebar should be the darkest anchor */

html[data-theme="dark"] .rail {
  background: #08090a;
  border-right-color: #242628;
  box-shadow:
    8px 0 30px rgba(0,0,0,.10);
}


/* Topbar gets a clean graphite separation */

html[data-theme="dark"] .topbar {
  background: #0d0e0f;
  border-bottom-color: #292b2d;
  box-shadow:
    0 1px 0 rgba(255,255,255,.018) inset,
    0 8px 24px rgba(0,0,0,.10);
}


/* ========================================================================
   04 — DARK CARDS
   Luminous depth, not neon glow
   ======================================================================== */

html[data-theme="dark"] :where(
  .card,
  .op-panel,
  .decision-card,
  .mb-card,
  .provider-card,
  .plan-card,
  .tenant-panel,
  .tenant-stat,
  .tenant-contact-card,
  .tenant-thread-list,
  .tenant-thread-detail,
  .tenant-inbox-list
) {
  background: #141516;
  border-color: #303235;

  box-shadow:
    0 1px 0 rgba(255,255,255,.032) inset,
    0 8px 22px rgba(0,0,0,.20),
    0 22px 52px rgba(0,0,0,.10),
    0 0 38px rgba(227,161,95,.018);
}


/* Raised data/table surfaces one level brighter */

html[data-theme="dark"] :where(
  .table-wrap,
  .op-metric,
  .funnel div,
  .result-box,
  .ask-msg,
  .tenant-message
) {
  background: #171819;
  border-color: #2d2f31;
}


/* Selected/active surface */

html[data-theme="dark"] :where(
  nav a.on,
  .op-tab.on,
  .tenant-nav-link.active
) {
  background-color: #232527;
}


/* ========================================================================
   05 — DARK CONTEXT PANEL
   ======================================================================== */

html[data-theme="dark"] .context-panel {
  background: #101112;
  border-left-color: #292b2d;

  box-shadow:
    -8px 0 28px rgba(0,0,0,.095),
    inset 1px 0 0 rgba(255,255,255,.012);
}

html[data-theme="dark"] .context-section {
  border-color: #242628;
}


/* ========================================================================
   06 — DARK COMMAND BAR
   ======================================================================== */

html[data-theme="dark"] .maya-commandbar {
  background: #101112;
  border-top-color: #292b2d;

  box-shadow:
    0 -14px 34px rgba(0,0,0,.11);
}

html[data-theme="dark"] .maya-commandbar-inner {
  background: #18191b;
  border-color: #343638;

  box-shadow:
    0 1px 0 rgba(255,255,255,.035) inset,
    0 9px 22px rgba(0,0,0,.23),
    0 18px 48px rgba(0,0,0,.11),
    0 0 34px rgba(227,161,95,.022);
}


/* ========================================================================
   07 — DARK INPUT / CONTROL DEPTH
   ======================================================================== */

html[data-theme="dark"] :where(
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  textarea,
  select,
  .global-search,
  .business-switcher,
  .theme-toggle,
  .maya-status,
  .top-action
) {
  background-color: #151617;
  border-color: #323436;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}

html[data-theme="dark"] :where(
  .global-search,
  .business-switcher,
  .theme-toggle,
  .maya-status,
  .top-action
):hover {
  background-color: #1c1d1f;
  border-color: #3b3d40;
}


/* ========================================================================
   08 — DARK TEXT READABILITY
   ======================================================================== */

html[data-theme="dark"] :where(
  .op-title p,
  .op-hero p,
  .decision-card p,
  .op-panel p,
  .context-muted,
  .power-state
) {
  color: #b8bab7;
}

html[data-theme="dark"] :where(
  small,
  .muted,
  .hint,
  .op-metric-scope,
  .decision-needs span
) {
  color: #929590;
}


/* ========================================================================
   09 — DAY MODE
   WARM-NEUTRAL, NOT COLD GREY
   ======================================================================== */

html[data-theme="day"] {
  color-scheme: light;

  --bg: #f4f3f1;
  --bg-2: #eceae6;

  --panel: #ffffff;
  --panel-2: #faf9f7;

  --surface-raised: #ffffff;
  --surface-hover: #f3f1ed;
  --surface-active: #ebe8e3;
  --surface-input: #ffffff;
  --surface-soft: #faf9f7;

  --line: #d8d6d1;
  --line-soft: #e8e5e0;

  --ink: #181816;
  --ink-2: #575752;
  --ink-3: #777872;

  --accent: #d68a45;
  --accent-2: #c87532;
  --accent-ink: #211307;

  --ok: #187761;
  --warn: #8c5c18;
  --bad: #aa4145;
  --info: #576c79;

  --topbar-bg: #ffffff;

  --v7-context: #f8f7f5;
  --v7-command: #f7f6f4;

  --maya-link: #8b4318;
  --maya-link-hover: #67300f;

  --focus-ring: #88400f;

  --shadow-soft:
    0 1px 2px rgba(23,23,20,.025),
    0 7px 20px rgba(23,23,20,.045);

  --shadow-card:
    0 1px 1px rgba(23,23,20,.025),
    0 7px 22px rgba(23,23,20,.055),
    0 20px 48px rgba(23,23,20,.025);

  --shadow:
    0 20px 54px rgba(23,23,20,.14);
}


/* ========================================================================
   10 — DAY CANVAS
   ======================================================================== */

html[data-theme="day"] body,
html[data-theme="day"] .stage,
html[data-theme="day"] .workspace-main,
html[data-theme="day"] .view {
  background-color: #f4f3f1;
}

html[data-theme="day"] body {
  background-image:
    radial-gradient(
      900px 470px at 67% -190px,
      rgba(214,138,69,.045),
      transparent 68%
    );
}


/* ========================================================================
   11 — DAY CARDS WITH SOFT PREMIUM LIFT
   ======================================================================== */

html[data-theme="day"] :where(
  .card,
  .op-panel,
  .decision-card,
  .mb-card,
  .provider-card,
  .plan-card,
  .tenant-panel,
  .tenant-stat,
  .tenant-contact-card,
  .tenant-thread-list,
  .tenant-thread-detail,
  .tenant-inbox-list
) {
  background: #ffffff;
  border-color: #d8d6d1;

  box-shadow:
    0 1px 1px rgba(23,23,20,.024),
    0 8px 22px rgba(23,23,20,.055),
    0 20px 46px rgba(23,23,20,.028),
    0 0 32px rgba(214,138,69,.018);
}


/* Important panels get extremely subtle warm reflected light */

html[data-theme="day"] :where(
  .decision-card:hover,
  .op-panel:hover,
  .mb-card:hover
) {
  border-color: #cac6bf;

  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 9px 25px rgba(57,47,38,.07),
    0 24px 52px rgba(23,23,20,.032),
    0 0 36px rgba(214,138,69,.028);
}


/* ========================================================================
   12 — DAY TOPBAR
   ======================================================================== */

html[data-theme="day"] .topbar {
  background: rgba(255,255,255,.985);
  border-bottom-color: #dcd9d4;

  box-shadow:
    0 1px 0 rgba(255,255,255,.96) inset,
    0 7px 22px rgba(23,23,20,.045);
}


/* ========================================================================
   13 — DAY RIGHT CONTEXT PANEL
   ======================================================================== */

html[data-theme="day"] .context-panel {
  background: #f8f7f5;
  border-left-color: #dad7d2;

  box-shadow:
    -8px 0 26px rgba(23,23,20,.032);
}


/* ========================================================================
   14 — DAY COMMAND BAR
   ======================================================================== */

html[data-theme="day"] .maya-commandbar {
  background: #f7f6f4;
  border-top-color: #d9d6d1;

  box-shadow:
    0 -10px 28px rgba(23,23,20,.04);
}

html[data-theme="day"] .maya-commandbar-inner {
  background: #ffffff;
  border-color: #d4d1cb;

  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 8px 21px rgba(23,23,20,.06),
    0 18px 42px rgba(23,23,20,.025),
    0 0 32px rgba(214,138,69,.022);
}


/* ========================================================================
   15 — DAY CONTROLS
   ======================================================================== */

html[data-theme="day"] :where(
  .global-search,
  .business-switcher,
  .theme-toggle,
  .maya-status,
  .top-action
) {
  background: #ffffff;
  border-color: #d7d4ce;

  box-shadow:
    0 1px 1px rgba(23,23,20,.02),
    0 4px 12px rgba(23,23,20,.025);
}

html[data-theme="day"] :where(
  .global-search,
  .business-switcher,
  .theme-toggle,
  .maya-status,
  .top-action
):hover {
  background: #faf9f7;
  border-color: #cac6bf;
}


/* ========================================================================
   16 — AMBER CTA REFINEMENT
   ======================================================================== */

.btn.primary,
.maya-command-action {
  color: #211307;
  background: #d68a45;
  border-color: #c87735;

  box-shadow:
    0 1px 0 rgba(255,255,255,.30) inset,
    0 7px 17px rgba(154,74,25,.14),
    0 0 24px rgba(214,138,69,.08);
}

.btn.primary:hover,
.maya-command-action:hover {
  color: #211307;
  background: #c87532;
  border-color: #af6228;

  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 8px 20px rgba(154,74,25,.17),
    0 0 28px rgba(214,138,69,.095);
}


/* ========================================================================
   17 — ACTIVE / BRAND DETAILS
   ======================================================================== */

nav a.on::before {
  background: #d68a45;
}

.switch input:checked + span {
  background: #d68a45;
  border-color: #d68a45;
}


/* ========================================================================
   18 — REMOVE BLUE-TINTED ACCIDENTAL SHADOWS
   ======================================================================== */

html[data-theme="dark"] :where(
  .card,
  .op-panel,
  .decision-card,
  .mb-card,
  .provider-card,
  .table-wrap,
  .maya-commandbar-inner,
  .context-panel
) {
  background-image: none;
}


/* ========================================================================
   19 — INTERACTION SMOOTHNESS
   ======================================================================== */

@media (hover: hover) and (pointer: fine) {

  :where(
    .card,
    .op-panel,
    .decision-card,
    .mb-card,
    .provider-card,
    .top-action,
    .theme-toggle,
    .maya-status,
    .business-switcher
  ) {
    transition:
      background-color .16s cubic-bezier(.2,.75,.25,1),
      border-color .16s cubic-bezier(.2,.75,.25,1),
      box-shadow .18s cubic-bezier(.2,.75,.25,1),
      transform .16s cubic-bezier(.2,.75,.25,1);
  }

  html[data-theme="dark"] :where(
    .op-panel:hover,
    .decision-card:hover,
    .mb-card:hover
  ) {
    background: #171819;
    border-color: #3a3c3f;

    box-shadow:
      0 1px 0 rgba(255,255,255,.037) inset,
      0 10px 26px rgba(0,0,0,.23),
      0 26px 54px rgba(0,0,0,.115),
      0 0 38px rgba(227,161,95,.027);
  }
}


/* ========================================================================
   20 — ACCESSIBILITY
   Glow must never replace visible focus
   ======================================================================== */

:where(
  a[href],
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;

  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--focus-ring) 14%, transparent);
}


/* ========================================================================
   21 — REDUCED MOTION
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* MAYA-V10.2-GRAPHITE-GLOW END */

/* MAYA-V10.3-PREMIUM-SHELL START */


/* ================================================================
   01 — FINAL BRAND / SHELL TOKENS
   ================================================================ */

:root {
  --maya-brand: #d98a43;
  --maya-brand-hover: #c67732;
  --maya-brand-deep: #934514;

  --maya-rail-width: 220px;
  --maya-context-width: 300px;

  --maya-radius-control: 9px;
  --maya-radius-panel: 13px;
}


/* ================================================================
   02 — DARK MODE: TRUE GRAPHITE
   ================================================================ */

html[data-theme="dark"] {
  --bg: #0d0d0e;
  --bg-2: #111112;

  --panel: #171718;
  --panel-2: #1d1d1f;

  --surface-raised: #1b1b1d;
  --surface-hover: #222224;
  --surface-active: #28282b;
  --surface-input: #131314;
  --surface-soft: #151516;

  --line: #303033;
  --line-soft: #252527;

  --ink: #f4f4f2;
  --ink-2: #bebfbc;
  --ink-3: #92938f;

  --accent: #e2a05d;
  --accent-2: #ca7d38;
  --accent-ink: #1f140a;

  --rail-bg: #090909;
  --topbar-bg: #101011;

  --v7-context: #111112;
  --v7-command: #121213;

  --maya-link: #e6a05f;
  --maya-link-hover: #ffc28a;
}


/* ================================================================
   03 — DAY MODE: CLEAN NEUTRAL
   ================================================================ */

html[data-theme="day"] {
  --bg: #f5f6f7;
  --bg-2: #eef0f2;

  --panel: #ffffff;
  --panel-2: #fafbfc;

  --surface-raised: #ffffff;
  --surface-hover: #f3f4f5;
  --surface-active: #e9ebed;
  --surface-input: #ffffff;
  --surface-soft: #f8f9fa;

  --line: #d8dce1;
  --line-soft: #e7e9ec;

  --ink: #18191b;
  --ink-2: #555b63;
  --ink-3: #767c84;

  --accent: #d98a43;
  --accent-2: #c67732;
  --accent-ink: #211307;

  --topbar-bg: #ffffff;

  --v7-context: #f8f9fa;
  --v7-command: #f7f8f9;

  --maya-link: #864014;
  --maya-link-hover: #622d0c;
}


/* ================================================================
   04 — SIDEBAR COMPLETE NEUTRALIZATION
   ================================================================ */

#app {
  grid-template-columns: var(--maya-rail-width) minmax(0, 1fr);
}

.rail {
  background: #090a0b !important;
  border-right: 1px solid #25272a !important;
  box-shadow:
    8px 0 28px rgba(0,0,0,.10) !important;
}

.brand {
  padding: 14px 13px 12px;
}

.brand-mark {
  background: #d98a43 !important;
  color: #211307 !important;
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 6px 16px rgba(217,138,67,.12);
}

.brand-text strong {
  color: #f3f3f1 !important;
}

.brand-text span {
  color: #888d92 !important;
}


/* Sidebar section labels */

.rail-sep {
  color: #7e848b !important;
}


/* Base navigation */

.rail nav a {
  color: #b3b8be !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  min-height: 37px;
  border-radius: 8px;
}


/* Hover */

.rail nav a:hover {
  color: #f3f3f1 !important;
  background: #171819 !important;
  border-color: #202224 !important;
}


/* Active */

.rail nav a.on {
  color: #ffffff !important;
  background: #202123 !important;
  border-color: #292b2d !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.025) inset !important;
}

.rail nav a.on::before {
  width: 3px !important;
  background: #d98a43 !important;
  box-shadow:
    0 0 12px rgba(217,138,67,.18) !important;
}


/* Icons */

.rail nav svg,
.rail nav i[data-ico] {
  color: #8e949a !important;
}

.rail nav a.on svg,
.rail nav a.on i[data-ico] {
  color: #e8e8e6 !important;
}


/* Counts */

.rail nav .pip {
  background: #242628 !important;
  border-color: #34373a !important;
  color: #c6c9cc !important;
}

.rail nav .pip.warn {
  color: #e5a05d !important;
  background: #241b13 !important;
  border-color: #49311d !important;
}


/* ================================================================
   05 — SIDEBAR CONNECT CONTROLLER
   ================================================================ */

.rail-foot {
  background: #0d0e0f !important;
  border-top: 1px solid #242628 !important;
  padding: 8px !important;
}

.power {
  padding: 10px !important;
  background: #121314 !important;
  border: 1px solid #292b2e !important;
  border-radius: 12px !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.02) inset !important;
}

.power-label {
  color: #ededeb !important;
  font-weight: 650;
}

.power-state {
  color: #969b9f !important;
}


/* Switch */

.rail .switch span {
  background: #25282b !important;
  border-color: #363a3e !important;
}

.rail .switch input:checked + span {
  background: #d98a43 !important;
  border-color: #d98a43 !important;
}


/* Emergency control — quieter */

.kill-btn,
.btn.danger {
  color: #d9797b !important;
  background: rgba(126,48,52,.08) !important;
  border-color: rgba(190,76,81,.30) !important;
  box-shadow: none !important;
}

.kill-btn:hover,
.btn.danger:hover {
  background: rgba(126,48,52,.14) !important;
  border-color: rgba(204,87,91,.42) !important;
}


/* ================================================================
   06 — TOP BAR
   ================================================================ */

html[data-theme="dark"] .topbar {
  background: #101011 !important;
  border-bottom-color: #292a2c !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.018) inset,
    0 8px 24px rgba(0,0,0,.09) !important;
}

html[data-theme="day"] .topbar {
  background: #ffffff !important;
  border-bottom-color: #dce0e4 !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 6px 18px rgba(24,28,32,.04) !important;
}


/* ================================================================
   07 — MAIN CANVAS
   ================================================================ */

html[data-theme="dark"] :where(
  body,
  .stage,
  .workspace-main,
  .view
) {
  background: #0d0d0e !important;
}

html[data-theme="day"] :where(
  body,
  .stage,
  .workspace-main,
  .view
) {
  background: #f5f6f7 !important;
}


/* ================================================================
   08 — PREMIUM CARD DEPTH
   ================================================================ */

html[data-theme="dark"] :where(
  .card,
  .op-panel,
  .decision-card,
  .mb-card,
  .provider-card,
  .plan-card,
  .tenant-panel,
  .tenant-stat
) {
  background: #171718 !important;
  border-color: #303033 !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.032) inset,
    0 7px 18px rgba(0,0,0,.18),
    0 20px 48px rgba(0,0,0,.10),
    0 0 30px rgba(226,160,93,.016) !important;
}


html[data-theme="day"] :where(
  .card,
  .op-panel,
  .decision-card,
  .mb-card,
  .provider-card,
  .plan-card,
  .tenant-panel,
  .tenant-stat
) {
  background: #ffffff !important;
  border-color: #d8dce1 !important;

  box-shadow:
    0 1px 1px rgba(24,28,32,.022),
    0 7px 20px rgba(24,28,32,.05),
    0 18px 42px rgba(24,28,32,.025),
    0 0 28px rgba(217,138,67,.014) !important;
}


/* ================================================================
   09 — REMOVE INTERNAL SECTION LINES
   ================================================================ */

.context-section,
.op-statline,
.decision-row,
.decision-needs,
.activity-row,
.work-row,
.knowledge-row,
.cap-row,
.search-result {
  border-top: 0 !important;
  border-bottom: 0 !important;
}


/* Right panel itself retains only the structural edge */

.context-panel {
  border-top: 0 !important;
  border-bottom: 0 !important;
}


/* ================================================================
   10 — RIGHT CONTEXT PANEL
   ================================================================ */

.workspace-shell {
  grid-template-columns:
    minmax(0, 1fr)
    var(--maya-context-width);
}


html[data-theme="dark"] .context-panel {
  background: #111112 !important;
  border-left: 1px solid #292a2c !important;

  box-shadow:
    -8px 0 24px rgba(0,0,0,.075) !important;
}


html[data-theme="day"] .context-panel {
  background: #f8f9fa !important;
  border-left: 1px solid #dfe2e5 !important;

  box-shadow:
    -7px 0 20px rgba(24,28,32,.026) !important;
}


.context-panel-inner {
  padding: 16px 19px 24px !important;
}


/* Right-panel quick buttons */

.context-panel .btn,
.context-panel .top-action {
  box-shadow: none !important;
}


/* ================================================================
   11 — COMMAND BAR
   ================================================================ */

.maya-commandbar {
  padding: 7px 14px 9px !important;
}


html[data-theme="dark"] .maya-commandbar {
  background: #101011 !important;
  border-top: 1px solid #292a2c !important;

  box-shadow:
    0 -12px 28px rgba(0,0,0,.09) !important;
}


html[data-theme="day"] .maya-commandbar {
  background: #f7f8f9 !important;
  border-top: 1px solid #dde0e3 !important;

  box-shadow:
    0 -8px 22px rgba(24,28,32,.03) !important;
}


.maya-commandbar-inner {
  width: min(900px, 100%) !important;
  border-radius: 12px !important;
}


html[data-theme="dark"] .maya-commandbar-inner {
  background: #19191b !important;
  border-color: #363639 !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.033) inset,
    0 8px 20px rgba(0,0,0,.20),
    0 0 24px rgba(226,160,93,.02) !important;
}


html[data-theme="day"] .maya-commandbar-inner {
  background: #ffffff !important;
  border-color: #d5d9dd !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 7px 18px rgba(24,28,32,.055),
    0 0 24px rgba(217,138,67,.018) !important;
}


/* ================================================================
   12 — BUTTONS
   ================================================================ */

.btn.primary,
.maya-command-action {
  background: #d98a43 !important;
  border-color: #c97a34 !important;
  color: #211307 !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 6px 15px rgba(147,69,20,.14),
    0 0 18px rgba(217,138,67,.065) !important;
}

.btn.primary:hover,
.maya-command-action:hover {
  background: #c67732 !important;
}


/* ================================================================
   13 — TEXT CLARITY
   ================================================================ */

html[data-theme="dark"] :where(
  .op-title p,
  .op-hero p,
  .op-panel p,
  .decision-card p,
  .context-muted,
  .tenant-page p
) {
  color: #bbbcb9 !important;
}

html[data-theme="dark"] :where(
  small,
  .muted,
  .hint,
  .op-metric-scope
) {
  color: #92938f !important;
}


html[data-theme="day"] :where(
  .op-title p,
  .op-hero p,
  .op-panel p,
  .decision-card p,
  .context-muted,
  .tenant-page p
) {
  color: #555b63 !important;
}


/* ================================================================
   14 — EMPTY STATE REFINEMENT
   ================================================================ */

.op-empty,
.tenant-empty {
  min-height: 180px !important;
  padding: 24px !important;
}

.op-empty-title,
.tenant-empty h3 {
  margin-bottom: 4px !important;
}

.op-empty .btn,
.tenant-empty .btn {
  margin-top: 12px !important;
}


/* ================================================================
   15 — SCROLLBARS
   ================================================================ */

.view,
.context-panel,
nav,
.thread-list,
.thread-pane {
  scrollbar-width: thin;
  scrollbar-color:
    rgba(126,130,134,.32)
    transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(126,130,134,.28);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(126,130,134,.48);
}


/* ================================================================
   16 — SOFT INTERACTION
   ================================================================ */

@media (hover: hover) and (pointer: fine) {

  html[data-theme="dark"] :where(
    .op-panel:hover,
    .decision-card:hover,
    .mb-card:hover
  ) {
    background: #1a1a1c !important;
    border-color: #39393c !important;

    box-shadow:
      0 1px 0 rgba(255,255,255,.035) inset,
      0 9px 23px rgba(0,0,0,.20),
      0 22px 48px rgba(0,0,0,.11),
      0 0 28px rgba(226,160,93,.022) !important;
  }


  html[data-theme="day"] :where(
    .op-panel:hover,
    .decision-card:hover,
    .mb-card:hover
  ) {
    border-color: #cbd0d5 !important;

    box-shadow:
      0 1px 0 rgba(255,255,255,.95) inset,
      0 8px 22px rgba(24,28,32,.062),
      0 20px 42px rgba(24,28,32,.03),
      0 0 30px rgba(217,138,67,.022) !important;
  }
}


/* ================================================================
   17 — RESPONSIVE
   ================================================================ */

@media (max-width: 1360px) {
  :root {
    --maya-rail-width: 210px;
    --maya-context-width: 284px;
  }
}

@media (max-width: 1240px) {
  .workspace-shell {
    grid-template-columns: minmax(0,1fr);
  }

  .context-panel {
    display: none;
  }
}

@media (max-width: 920px) {
  :root {
    --maya-rail-width: 68px;
  }

  #app {
    grid-template-columns: 68px minmax(0,1fr);
  }
}


/* ================================================================
   18 — ACCESSIBILITY / MOTION
   ================================================================ */

:where(
  a[href],
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* MAYA-V10.3-PREMIUM-SHELL END */

/* MAYA-V10.4-REFERENCE-CARDS START
   Reference-driven premium surface system
   ======================================== */


/* ================================================================
   01 — DARK SURFACE TOKENS
   ================================================================ */

html[data-theme="dark"] {
  --maya-card-base: #171819;
  --maya-card-raised: #1c1e20;
  --maya-card-hover: #202224;

  --maya-card-border: #34373a;
  --maya-card-border-strong: #41454a;

  --maya-card-inner-light: rgba(255,255,255,.045);
  --maya-card-shadow: rgba(0,0,0,.27);
  --maya-card-shadow-soft: rgba(0,0,0,.14);

  --maya-card-warm-glow: rgba(217,138,67,.035);
  --maya-card-warm-glow-active: rgba(217,138,67,.075);
}


/* ================================================================
   02 — DAY SURFACE TOKENS
   ================================================================ */

html[data-theme="day"] {
  --maya-card-base: #ffffff;
  --maya-card-raised: #ffffff;
  --maya-card-hover: #fbfbfa;

  --maya-card-border: #d6d9dd;
  --maya-card-border-strong: #c4c9cf;

  --maya-card-inner-light: rgba(255,255,255,.96);
  --maya-card-shadow: rgba(31,35,39,.075);
  --maya-card-shadow-soft: rgba(31,35,39,.038);

  --maya-card-warm-glow: rgba(217,138,67,.025);
  --maya-card-warm-glow-active: rgba(217,138,67,.055);
}


/* ================================================================
   03 — MASTER PREMIUM CARD SYSTEM
   ================================================================ */

:where(
  .card,
  .op-panel,
  .decision-card,
  .mb-card,
  .provider-card,
  .plan-card,
  .tenant-panel,
  .tenant-stat,
  .tenant-contact-card,
  .tenant-thread-list,
  .tenant-thread-detail,
  .tenant-inbox-list
) {
  position: relative;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018) 0%,
      transparent 22%
    ),
    var(--maya-card-base) !important;

  border:
    1px solid var(--maya-card-border) !important;

  border-radius: 14px !important;

  box-shadow:
    inset 0 1px 0 var(--maya-card-inner-light),
    0 1px 1px var(--maya-card-shadow-soft),
    0 8px 22px var(--maya-card-shadow),
    0 24px 54px var(--maya-card-shadow-soft),
    0 0 34px var(--maya-card-warm-glow) !important;
}


/* ================================================================
   04 — MAIN OPERATION PANELS
   Slightly stronger than normal cards
   ================================================================ */

.op-panel {
  box-shadow:
    inset 0 1px 0 var(--maya-card-inner-light),
    0 1px 1px var(--maya-card-shadow-soft),
    0 9px 25px var(--maya-card-shadow),
    0 28px 60px var(--maya-card-shadow-soft),
    0 0 42px var(--maya-card-warm-glow) !important;
}


/* ================================================================
   05 — METRIC / PIPELINE CARDS
   Reference-image segmented feel
   ================================================================ */

:where(
  .op-metric,
  .funnel div,
  .play-step,
  .tenant-stat
) {
  position: relative;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      transparent 45%
    ),
    var(--maya-card-raised) !important;

  border:
    1px solid var(--maya-card-border) !important;

  border-radius: 12px !important;

  box-shadow:
    inset 0 1px 0 var(--maya-card-inner-light),
    0 6px 16px var(--maya-card-shadow),
    0 16px 34px var(--maya-card-shadow-soft) !important;
}


/* ================================================================
   06 — ACTIVE / SELECTED PIPELINE TILE
   Like reference orange-highlight card
   ================================================================ */

:where(
  .op-metric.acc,
  .funnel div.active,
  .funnel div.on,
  .play-step.ready,
  .tenant-nav-link.active
) {
  border-color:
    color-mix(
      in srgb,
      var(--accent) 58%,
      var(--maya-card-border)
    ) !important;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 12%, transparent),
      transparent 55%
    ),
    var(--maya-card-raised) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 7px 18px var(--maya-card-shadow),
    0 18px 38px var(--maya-card-shadow-soft),
    0 0 28px var(--maya-card-warm-glow-active) !important;
}


/* ================================================================
   07 — HEALTH / STATUS CARDS
   ================================================================ */

:where(
  .op-positive,
  .result-box,
  .guardrail-strip,
  .tenant-info-strip
) {
  border-radius: 11px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 5px 14px rgba(0,0,0,.08) !important;
}


/* ================================================================
   08 — DARK SPECIAL HEALTH SURFACE
   ================================================================ */

html[data-theme="dark"] :where(
  .op-positive,
  .tenant-info-strip
) {
  background:
    linear-gradient(
      90deg,
      rgba(39,115,86,.13),
      rgba(39,115,86,.055)
    ) !important;

  border-color:
    rgba(70,142,112,.28) !important;
}


/* ================================================================
   09 — DAY SPECIAL HEALTH SURFACE
   ================================================================ */

html[data-theme="day"] :where(
  .op-positive,
  .tenant-info-strip
) {
  background:
    linear-gradient(
      90deg,
      #eef8f4,
      #f7fbf9
    ) !important;

  border-color: #c6ded5 !important;
}


/* ================================================================
   10 — CARD HEADINGS
   Reference image tighter hierarchy
   ================================================================ */

:where(
  .op-panel h2,
  .decision-card h2,
  .tenant-panel h2
) {
  letter-spacing: -.018em;
  font-weight: 680;
}


/* ================================================================
   11 — BUTTONS INSIDE CARDS
   ================================================================ */

:where(
  .op-panel,
  .decision-card,
  .mb-card,
  .tenant-panel
) .btn {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 5px 14px rgba(0,0,0,.09) !important;
}


/* ================================================================
   12 — SECONDARY BUTTONS
   Dark professional outlined surface
   ================================================================ */

html[data-theme="dark"] :where(
  .btn:not(.primary):not(.danger),
  .top-action
) {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02),
      transparent
    ),
    #191b1d !important;

  border-color: #41464b !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 5px 13px rgba(0,0,0,.11) !important;
}


/* ================================================================
   13 — DAY SECONDARY BUTTONS
   ================================================================ */

html[data-theme="day"] :where(
  .btn:not(.primary):not(.danger),
  .top-action
) {
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fafafa
    ) !important;

  border-color: #cbd1d7 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 4px 11px rgba(31,35,39,.045) !important;
}


/* ================================================================
   14 — HOVER LIFT
   Very small, premium, not floating cartoon cards
   ================================================================ */

@media (hover: hover) and (pointer: fine) {

  :where(
    .op-panel,
    .decision-card,
    .mb-card,
    .provider-card,
    .tenant-panel
  ):hover {
    transform: translateY(-1px);

    border-color:
      var(--maya-card-border-strong) !important;

    box-shadow:
      inset 0 1px 0 var(--maya-card-inner-light),
      0 2px 2px var(--maya-card-shadow-soft),
      0 11px 28px var(--maya-card-shadow),
      0 30px 64px var(--maya-card-shadow-soft),
      0 0 40px var(--maya-card-warm-glow-active) !important;
  }
}


/* ================================================================
   15 — COMMAND BAR AS RAISED CONTROL SURFACE
   ================================================================ */

.maya-commandbar-inner {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.022),
      transparent
    ),
    var(--maya-card-raised) !important;

  border-color:
    var(--maya-card-border) !important;

  box-shadow:
    inset 0 1px 0 var(--maya-card-inner-light),
    0 8px 22px var(--maya-card-shadow),
    0 20px 44px var(--maya-card-shadow-soft),
    0 0 30px var(--maya-card-warm-glow) !important;
}


/* ================================================================
   16 — CONTEXT PANEL VISUAL DEPTH
   ================================================================ */

html[data-theme="dark"] .context-panel {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.012),
      transparent 25%
    ),
    #121314 !important;
}

html[data-theme="day"] .context-panel {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.90),
      rgba(249,250,251,.96)
    ) !important;
}


/* ================================================================
   17 — SIDEBAR ACTIVE CARD REFERENCE LOOK
   ================================================================ */

.rail nav a.on {
  background:
    linear-gradient(
      90deg,
      rgba(217,138,67,.055),
      transparent 72%
    ),
    #202123 !important;

  border-color: #323437 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 5px 14px rgba(0,0,0,.10) !important;
}


/* ================================================================
   18 — SIDEBAR CONNECT CONTROL CARD
   ================================================================ */

.power {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018),
      transparent
    ),
    #141516 !important;

  border-color: #303235 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 7px 18px rgba(0,0,0,.14) !important;
}


/* ================================================================
   19 — PRIMARY CTA AMBER GLOW
   ================================================================ */

.btn.primary,
.maya-command-action {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 5px 14px rgba(147,69,20,.16),
    0 0 18px rgba(217,138,67,.10) !important;
}


/* ================================================================
   20 — REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  :where(
    .op-panel,
    .decision-card,
    .mb-card,
    .provider-card,
    .tenant-panel
  ):hover {
    transform: none;
  }
}


/* MAYA-V10.4-REFERENCE-CARDS END */

/* MAYA-V10.5-COMPLETE-COLOR-SYSTEM START */


/* ================================================================
   01 — GLOBAL BRAND + SEMANTIC TOKENS
   ================================================================ */

:root {
  --maya-brand:              #d98a43;
  --maya-brand-hover:        #c67732;
  --maya-brand-deep:         #934514;
  --maya-brand-ink:          #211307;

  --maya-brand-soft:         rgba(217,138,67,.10);
  --maya-brand-glow:         rgba(217,138,67,.07);
  --maya-brand-glow-strong:  rgba(217,138,67,.12);

  --ok:                      #4ec9a0;
  --ok-deep:                 #187761;
  --ok-soft:                 rgba(78,201,160,.10);

  --warn:                    #e5b45c;
  --warn-deep:               #8c5c18;
  --warn-soft:               rgba(229,180,92,.10);

  --bad:                     #e57373;
  --bad-deep:                #aa4145;
  --bad-soft:                rgba(229,115,115,.10);

  --info:                    #6fa8dc;
  --info-deep:               #576c79;
  --info-soft:               rgba(111,168,220,.10);
}


/* ================================================================
   02 — DARK MODE MASTER PALETTE
   ================================================================ */

html[data-theme="dark"] {
  --bg:                      #0d0d0e;
  --bg-2:                    #111112;

  --panel:                   #171718;
  --panel-2:                 #1d1d1f;

  --surface-raised:          #1b1b1d;
  --surface-hover:           #222224;
  --surface-active:          #28282b;
  --surface-input:           #131314;
  --surface-soft:            #151516;

  --rail-bg:                 #090909;
  --rail-hover:              #171819;
  --rail-active:             #202123;
  --rail-card:               #141516;

  --topbar-bg:               #101011;
  --context-bg:              #111112;
  --command-bg:              #121213;

  --line:                    #303033;
  --line-soft:               #252527;
  --line-strong:             #41454a;

  --ink:                     #f4f4f2;
  --ink-2:                   #bebfbc;
  --ink-3:                   #92938f;
  --ink-disabled:            #666864;

  --link:                    #e6a05f;
  --link-hover:              #ffc28a;

  --accent:                  #e2a05d;
  --accent-2:                #ca7d38;
  --accent-ink:              #1f140a;

  --focus-ring:              #efa961;

  --badge-bg:                #242628;
  --badge-border:            #34373a;
  --badge-text:              #c6c9cc;

  --badge-warn-bg:           #241b13;
  --badge-warn-border:       #49311d;
  --badge-warn-text:         #e5a05d;

  --success-surface:         rgba(39,115,86,.13);
  --success-border:          rgba(70,142,112,.28);

  --danger-surface:          rgba(126,48,52,.08);
  --danger-border:           rgba(190,76,81,.30);
  --danger-text:             #d9797b;

  --shadow-near:             rgba(0,0,0,.27);
  --shadow-soft-color:       rgba(0,0,0,.14);
  --shadow-heavy:            rgba(0,0,0,.42);

  --inner-highlight:         rgba(255,255,255,.045);
  --inner-highlight-soft:    rgba(255,255,255,.025);

  --warm-reflection:         rgba(217,138,67,.035);
  --warm-reflection-active:  rgba(217,138,67,.075);

  --scroll-thumb:            rgba(126,130,134,.28);
  --scroll-thumb-hover:      rgba(126,130,134,.48);

  --v7-context:              var(--context-bg);
  --v7-command:              var(--command-bg);
  --maya-link:               var(--link);
  --maya-link-hover:         var(--link-hover);
}


/* ================================================================
   03 — DAY MODE MASTER PALETTE
   ================================================================ */

html[data-theme="day"] {
  --bg:                      #f5f6f7;
  --bg-2:                    #eef0f2;

  --panel:                   #ffffff;
  --panel-2:                 #fafbfc;

  --surface-raised:          #ffffff;
  --surface-hover:           #f3f4f5;
  --surface-active:          #e9ebed;
  --surface-input:           #ffffff;
  --surface-soft:            #f8f9fa;

  --rail-bg:                 #090a0b;
  --rail-hover:              #171819;
  --rail-active:             #202123;
  --rail-card:               #141516;

  --topbar-bg:               #ffffff;
  --context-bg:              #f8f9fa;
  --command-bg:              #f7f8f9;

  --line:                    #d8dce1;
  --line-soft:               #e7e9ec;
  --line-strong:             #c4c9cf;

  --ink:                     #18191b;
  --ink-2:                   #555b63;
  --ink-3:                   #767c84;
  --ink-disabled:            #a0a5ab;

  --link:                    #864014;
  --link-hover:              #622d0c;

  --accent:                  #d98a43;
  --accent-2:                #c67732;
  --accent-ink:              #211307;

  --focus-ring:              #88400f;

  --badge-bg:                #eef1f4;
  --badge-border:            #cdd3d9;
  --badge-text:              #3f4954;

  --badge-warn-bg:           #fff4e8;
  --badge-warn-border:       #e4c6a3;
  --badge-warn-text:         #7d470e;

  --success-surface:         #eef8f4;
  --success-border:          #c6ded5;

  --danger-surface:          #fff2f2;
  --danger-border:           #e4bfc1;
  --danger-text:             #a33c41;

  --shadow-near:             rgba(31,35,39,.075);
  --shadow-soft-color:       rgba(31,35,39,.038);
  --shadow-heavy:            rgba(31,35,39,.14);

  --inner-highlight:         rgba(255,255,255,.96);
  --inner-highlight-soft:    rgba(255,255,255,.72);

  --warm-reflection:         rgba(217,138,67,.025);
  --warm-reflection-active:  rgba(217,138,67,.055);

  --scroll-thumb:            rgba(126,130,134,.25);
  --scroll-thumb-hover:      rgba(126,130,134,.45);

  --v7-context:              var(--context-bg);
  --v7-command:              var(--command-bg);
  --maya-link:               var(--link);
  --maya-link-hover:         var(--link-hover);
}


/* ================================================================
   04 — APP SHELL COLOR BINDING
   ================================================================ */

body,
.stage,
.workspace-main,
.view {
  background: var(--bg) !important;
  color: var(--ink);
}

.topbar {
  background: var(--topbar-bg) !important;
  border-color: var(--line) !important;
}

.context-panel {
  background: var(--context-bg) !important;
  border-left-color: var(--line) !important;
}

.maya-commandbar {
  background: var(--command-bg) !important;
  border-top-color: var(--line) !important;
}


/* ================================================================
   05 — SIDEBAR COLOR BINDING
   ================================================================ */

.rail {
  background: var(--rail-bg) !important;
}

.rail nav a {
  color: #b3b8be !important;
}

.rail nav a:hover {
  background: var(--rail-hover) !important;
}

.rail nav a.on {
  background: var(--rail-active) !important;
}

.rail nav a.on::before {
  background: var(--maya-brand) !important;
}

.power {
  background: var(--rail-card) !important;
}

.rail nav .pip {
  background: var(--badge-bg) !important;
  border-color: var(--badge-border) !important;
  color: var(--badge-text) !important;
}

html[data-theme="dark"] .rail nav .pip,
html[data-theme="day"] .rail nav .pip {
  background: #242628 !important;
  border-color: #34373a !important;
  color: #c6c9cc !important;
}


/* ================================================================
   06 — GENERAL SURFACES
   ================================================================ */

:where(
  .card,
  .op-panel,
  .decision-card,
  .mb-card,
  .provider-card,
  .plan-card,
  .tenant-panel,
  .tenant-stat,
  .tenant-contact-card,
  .tenant-thread-list,
  .tenant-thread-detail,
  .tenant-inbox-list
) {
  background-color: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--ink);
}

:where(
  .op-metric,
  .funnel div,
  .play-step
) {
  background-color: var(--surface-raised) !important;
  border-color: var(--line) !important;
}


/* ================================================================
   07 — TEXT SYSTEM
   ================================================================ */

:where(
  h1,h2,h3,h4,h5,h6,
  .context-value,
  .op-metric-value
) {
  color: var(--ink) !important;
}

:where(
  p,
  .op-title p,
  .op-hero p,
  .context-muted,
  .decision-card p,
  .tenant-page p
) {
  color: var(--ink-2);
}

:where(
  small,
  .muted,
  .hint,
  .op-metric-scope,
  .decision-needs span
) {
  color: var(--ink-3);
}


/* ================================================================
   08 — LINKS
   ================================================================ */

.view a:not(.btn):not(.op-tab):not(.tenant-nav-link),
.context-panel a:not(.btn),
.tenant-content a:not(.btn):not(.tenant-nav-link) {
  color: var(--link) !important;
}

.view a:not(.btn):not(.op-tab):hover,
.context-panel a:not(.btn):hover,
.tenant-content a:not(.btn):hover {
  color: var(--link-hover) !important;
}


/* ================================================================
   09 — PRIMARY ACTIONS
   ================================================================ */

.btn.primary,
.maya-command-action {
  background: var(--maya-brand) !important;
  border-color: var(--maya-brand-hover) !important;
  color: var(--maya-brand-ink) !important;
}

.btn.primary:hover,
.maya-command-action:hover {
  background: var(--maya-brand-hover) !important;
}


/* ================================================================
   10 — STATUS SYSTEM
   ================================================================ */

.tag,
.status-dot,
.score-pill {
  background: var(--badge-bg);
  border-color: var(--badge-border);
  color: var(--badge-text);
}

.tag.ok,
.status-dot.ok {
  color: var(--ok-deep);
  background: var(--ok-soft);
}

.tag.warn,
.status-dot.warn {
  color: var(--warn-deep);
  background: var(--warn-soft);
}

.tag.bad,
.status-dot.bad {
  color: var(--bad-deep);
  background: var(--bad-soft);
}

.tag.info,
.status-dot.info {
  color: var(--info-deep);
  background: var(--info-soft);
}

html[data-theme="dark"] .tag.ok,
html[data-theme="dark"] .status-dot.ok {
  color: var(--ok);
}

html[data-theme="dark"] .tag.warn,
html[data-theme="dark"] .status-dot.warn {
  color: var(--warn);
}

html[data-theme="dark"] .tag.bad,
html[data-theme="dark"] .status-dot.bad {
  color: var(--bad);
}

html[data-theme="dark"] .tag.info,
html[data-theme="dark"] .status-dot.info {
  color: var(--info);
}


/* ================================================================
   11 — SUCCESS / HEALTH SURFACES
   ================================================================ */

:where(
  .op-positive,
  .tenant-info-strip
) {
  background: var(--success-surface) !important;
  border-color: var(--success-border) !important;
}


/* ================================================================
   12 — DANGER SYSTEM
   ================================================================ */

.kill-btn,
.btn.danger {
  background: var(--danger-surface) !important;
  border-color: var(--danger-border) !important;
  color: var(--danger-text) !important;
}


/* ================================================================
   13 — INPUTS / CONTROLS
   ================================================================ */

:where(
  input,
  textarea,
  select,
  .global-search,
  .business-switcher,
  .theme-toggle,
  .maya-status,
  .top-action
) {
  background-color: var(--surface-input);
  border-color: var(--line);
  color: var(--ink);
}

:where(
  input::placeholder,
  textarea::placeholder
) {
  color: var(--ink-3);
}


/* ================================================================
   14 — HOVER / ACTIVE
   ================================================================ */

tbody tr:hover,
.tenant-thread-row:hover {
  background: var(--surface-hover) !important;
}

.tenant-nav-link.active,
.op-tab.on {
  background: var(--surface-active) !important;
}


/* ================================================================
   15 — FOCUS
   ================================================================ */

:where(
  a[href],
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}


/* ================================================================
   16 — SCROLLBARS
   ================================================================ */

.view,
.context-panel,
nav,
.thread-list,
.thread-pane {
  scrollbar-color: var(--scroll-thumb) transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}


/* ================================================================
   17 — SHADOW / GLOW NORMALIZATION
   ================================================================ */

:where(
  .card,
  .op-panel,
  .decision-card,
  .mb-card,
  .provider-card,
  .plan-card,
  .tenant-panel,
  .tenant-stat
) {
  box-shadow:
    inset 0 1px 0 var(--inner-highlight),
    0 1px 1px var(--shadow-soft-color),
    0 8px 22px var(--shadow-near),
    0 24px 54px var(--shadow-soft-color),
    0 0 34px var(--warm-reflection) !important;
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .op-panel,
    .decision-card,
    .mb-card,
    .provider-card,
    .tenant-panel
  ):hover {
    border-color: var(--line-strong) !important;

    box-shadow:
      inset 0 1px 0 var(--inner-highlight),
      0 2px 2px var(--shadow-soft-color),
      0 11px 28px var(--shadow-near),
      0 30px 64px var(--shadow-soft-color),
      0 0 40px var(--warm-reflection-active) !important;
  }
}


/* ================================================================
   18 — COMMAND BAR
   ================================================================ */

.maya-commandbar-inner {
  background: var(--surface-raised) !important;
  border-color: var(--line) !important;

  box-shadow:
    inset 0 1px 0 var(--inner-highlight),
    0 8px 22px var(--shadow-near),
    0 20px 44px var(--shadow-soft-color),
    0 0 30px var(--warm-reflection) !important;
}


/* ================================================================
   19 — BRAND MICRO-GLOW
   ================================================================ */

.brand-mark,
.btn.primary,
.maya-command-action {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 6px 16px var(--maya-brand-glow),
    0 0 20px var(--maya-brand-glow) !important;
}


/* ================================================================
   20 — REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* MAYA-V10.5-COMPLETE-COLOR-SYSTEM END */

/* MAYA-V10.6-INBOX-READABILITY START */


/* ================================================================
   INBOX / CONVERSATION READING SURFACE
   Fixes dark-on-dark message rendering in Day mode.
   ================================================================ */


/* ---------- DAY MODE ---------- */

html[data-theme="day"] :where(
  .message-body,
  .message-content,
  .mail-body,
  .email-body,
  .conversation-message-body,
  .thread-message-body,
  .msg-body,
  .body-content,
  .message-html,
  .email-content
) {
  background: #ffffff !important;
  background-image: none !important;

  color: #25272a !important;

  border-color: #d8dce1 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 6px 18px rgba(31,35,39,.045) !important;
}


/* Force readable descendants.
   Important because email HTML often brings nested spans/divs. */

html[data-theme="day"] :where(
  .message-body,
  .message-content,
  .mail-body,
  .email-body,
  .conversation-message-body,
  .thread-message-body,
  .msg-body,
  .body-content,
  .message-html,
  .email-content
) :where(
  p,
  div,
  span,
  td,
  li,
  blockquote
) {
  color: #25272a !important;
  background-color: transparent !important;
}


/* Links remain visibly interactive */

html[data-theme="day"] :where(
  .message-body,
  .message-content,
  .mail-body,
  .email-body,
  .conversation-message-body,
  .thread-message-body,
  .msg-body,
  .body-content,
  .message-html,
  .email-content
) a {
  color: #864014 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}


/* ---------- DARK MODE ---------- */

html[data-theme="dark"] :where(
  .message-body,
  .message-content,
  .mail-body,
  .email-body,
  .conversation-message-body,
  .thread-message-body,
  .msg-body,
  .body-content,
  .message-html,
  .email-content
) {
  background: #171718 !important;
  background-image: none !important;

  color: #e8e8e6 !important;

  border-color: #303033 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 20px rgba(0,0,0,.18) !important;
}


html[data-theme="dark"] :where(
  .message-body,
  .message-content,
  .mail-body,
  .email-body,
  .conversation-message-body,
  .thread-message-body,
  .msg-body,
  .body-content,
  .message-html,
  .email-content
) :where(
  p,
  div,
  span,
  td,
  li,
  blockquote
) {
  color: #e2e2df !important;
  background-color: transparent !important;
}


html[data-theme="dark"] :where(
  .message-body,
  .message-content,
  .mail-body,
  .email-body,
  .conversation-message-body,
  .thread-message-body,
  .msg-body,
  .body-content,
  .message-html,
  .email-content
) a {
  color: #e6a05f !important;
}


/* ================================================================
   MESSAGE PARAGRAPH READABILITY
   ================================================================ */

:where(
  .message-body,
  .message-content,
  .mail-body,
  .email-body,
  .conversation-message-body,
  .thread-message-body,
  .msg-body,
  .body-content,
  .message-html,
  .email-content
) {
  line-height: 1.58 !important;
  font-size: 12.5px !important;
}

:where(
  .message-body,
  .message-content,
  .mail-body,
  .email-body,
  .conversation-message-body,
  .thread-message-body,
  .msg-body,
  .body-content,
  .message-html,
  .email-content
) p {
  margin: 0 0 12px !important;
}


/* ================================================================
   QUOTED EMAIL CONTENT
   ================================================================ */

:where(
  .message-body,
  .message-content,
  .mail-body,
  .email-body,
  .conversation-message-body,
  .thread-message-body
) blockquote {
  margin: 12px 0 !important;
  padding: 6px 0 6px 12px !important;

  border-left:
    2px solid var(--line-strong) !important;

  opacity: .86;
}


/* ================================================================
   PRE / CODE
   ================================================================ */

html[data-theme="day"] :where(
  .message-body,
  .message-content,
  .mail-body,
  .email-body
) :where(pre, code) {
  background: #f3f4f5 !important;
  color: #282b2f !important;
}


html[data-theme="dark"] :where(
  .message-body,
  .message-content,
  .mail-body,
  .email-body
) :where(pre, code) {
  background: #101011 !important;
  color: #e4e4e1 !important;
}


/* ================================================================
   TEXT SELECTION
   Removes muddy brown selection shown in screenshot.
   ================================================================ */

html[data-theme="day"] ::selection {
  color: #211307;
  background: rgba(217,138,67,.28);
}

html[data-theme="dark"] ::selection {
  color: #fff8f0;
  background: rgba(217,138,67,.38);
}


/* ================================================================
   MESSAGE HEADER / SENDER AREA
   ================================================================ */

html[data-theme="day"] :where(
  .message-header,
  .mail-header,
  .thread-message-head,
  .message-meta
) {
  color: #555b63 !important;
}


html[data-theme="dark"] :where(
  .message-header,
  .mail-header,
  .thread-message-head,
  .message-meta
) {
  color: #bebfbc !important;
}


/* ================================================================
   INBOX LIST
   ================================================================ */

html[data-theme="day"] :where(
  .thread-list,
  .inbox-list,
  .conversation-list
) {
  background: #f8f9fa !important;
}


html[data-theme="dark"] :where(
  .thread-list,
  .inbox-list,
  .conversation-list
) {
  background: #111112 !important;
}


/* ================================================================
   CENTER THREAD READING CANVAS
   ================================================================ */

html[data-theme="day"] :where(
  .thread-pane,
  .conversation-pane,
  .message-pane
) {
  background: #f5f6f7 !important;
}


html[data-theme="dark"] :where(
  .thread-pane,
  .conversation-pane,
  .message-pane
) {
  background: #0d0d0e !important;
}


/* MAYA-V10.6-INBOX-READABILITY END */

/* MAYA-V10.7-INBOX-PRODUCTIVITY START
   =================================================================
   CONNECT BY JBRH
   Inbox Productivity / Conversation Density Upgrade
   ================================================================= */


/* ================================================================
   01 — INBOX MASTER LAYOUT
   Give the thread list less width and reading pane more width.
   ================================================================ */

:where(
  .inbox-shell,
  .conversation-shell,
  .thread-shell
) {
  --maya-inbox-list-width: 350px;
  --maya-inbox-context-width: 300px;
}


/* Common 3-column owner inbox layouts */

:where(
  .inbox-layout,
  .conversation-layout,
  .thread-layout
) {
  grid-template-columns:
    minmax(300px, 350px)
    minmax(480px, 1fr)
    minmax(270px, 300px) !important;
}


/* ================================================================
   02 — LEFT THREAD LIST
   ================================================================ */

:where(
  .thread-list,
  .inbox-list,
  .conversation-list
) {
  background: var(--bg) !important;
  border-right: 1px solid var(--line-soft) !important;
}


/* Filter area */

:where(
  .thread-list,
  .inbox-list,
  .conversation-list
) :where(
  .filters,
  .filter-row,
  .conversation-filters,
  .inbox-filters
) {
  padding: 10px 12px !important;
  gap: 6px !important;
}


/* Filter pills smaller */

:where(
  .thread-list,
  .inbox-list,
  .conversation-list
) :where(
  .btn,
  .tag,
  .filter-pill
) {
  min-height: 31px;
  padding: 5px 10px;
  border-radius: 9px;
}


/* ================================================================
   03 — CONVERSATION ROWS
   Gmail-level scan density, Connect visual language
   ================================================================ */

:where(
  .thread-row,
  .conversation-row,
  .inbox-row,
  .thread-item,
  .conversation-item
) {
  position: relative;

  min-height: 78px !important;
  padding: 11px 14px !important;

  background: transparent !important;

  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  transition:
    background-color .14s ease,
    color .14s ease !important;
}


:where(
  .thread-row,
  .conversation-row,
  .inbox-row,
  .thread-item,
  .conversation-item
):hover {
  background: var(--surface-hover) !important;
}


/* ================================================================
   04 — SELECTED ROW
   Remove muddy brown rectangle.
   ================================================================ */

:where(
  .thread-row.active,
  .thread-row.selected,
  .conversation-row.active,
  .conversation-row.selected,
  .inbox-row.active,
  .inbox-row.selected,
  .thread-item.active,
  .conversation-item.active
) {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--maya-brand) 8%, transparent),
      transparent 72%
    ),
    var(--surface-active) !important;

  box-shadow: none !important;
}


:where(
  .thread-row.active,
  .thread-row.selected,
  .conversation-row.active,
  .conversation-row.selected,
  .inbox-row.active,
  .inbox-row.selected,
  .thread-item.active,
  .conversation-item.active
)::before {
  content: "";
  position: absolute;

  left: 0;
  top: 8px;
  bottom: 8px;

  width: 3px;

  border-radius: 0 4px 4px 0;

  background: var(--maya-brand);

  box-shadow:
    0 0 12px var(--maya-brand-glow);
}


/* ================================================================
   05 — ROW TYPOGRAPHY
   ================================================================ */

:where(
  .thread-row,
  .conversation-row,
  .inbox-row,
  .thread-item,
  .conversation-item
) :where(
  .sender,
  .thread-sender,
  .conversation-sender
) {
  color: var(--ink) !important;
  font-weight: 660 !important;
  font-size: 12.4px !important;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


:where(
  .thread-row,
  .conversation-row,
  .inbox-row,
  .thread-item,
  .conversation-item
) :where(
  .subject,
  .thread-subject,
  .conversation-subject
) {
  color: var(--ink-2) !important;
  font-weight: 540 !important;
  font-size: 12px !important;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


:where(
  .thread-row,
  .conversation-row,
  .inbox-row,
  .thread-item,
  .conversation-item
) :where(
  .snippet,
  .preview,
  .thread-preview,
  .conversation-preview
) {
  color: var(--ink-3) !important;
  font-size: 11.2px !important;
  line-height: 1.35 !important;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
}


:where(
  .thread-row,
  .conversation-row,
  .inbox-row,
  .thread-item,
  .conversation-item
) :where(
  .date,
  .time,
  .thread-time
) {
  color: var(--ink-3) !important;
  font-size: 10.5px !important;
  white-space: nowrap;
}


/* ================================================================
   06 — ROW TAGS
   Reduce pill overload
   ================================================================ */

:where(
  .thread-row,
  .conversation-row,
  .inbox-row,
  .thread-item,
  .conversation-item
) :where(
  .tag,
  .status-dot,
  .score-pill
) {
  min-height: 20px !important;

  padding: 2px 7px !important;

  border-radius: 999px !important;

  font-size: 9px !important;
  font-weight: 600 !important;

  box-shadow: none !important;
}


/* ================================================================
   07 — CENTER READING PANE
   ================================================================ */

:where(
  .thread-pane,
  .conversation-pane,
  .message-pane
) {
  background: var(--bg) !important;

  padding-left: 28px !important;
  padding-right: 28px !important;
}


/* Main conversation title */

:where(
  .thread-pane,
  .conversation-pane,
  .message-pane
) :where(
  h1,
  .conversation-title,
  .thread-title
) {
  font-size: 19px !important;
  line-height: 1.25 !important;
  letter-spacing: -.022em !important;
}


/* ================================================================
   08 — LEAD / CONTACT SUMMARY
   Less bulky CRM card.
   ================================================================ */

:where(
  .lead-card,
  .contact-card,
  .conversation-lead,
  .thread-lead
) {
  padding: 14px 16px !important;

  border-radius: 12px !important;

  box-shadow:
    inset 0 1px 0 var(--inner-highlight),
    0 5px 15px var(--shadow-soft-color) !important;
}


/* Use denser 2-column label/value alignment */

:where(
  .lead-card,
  .contact-card,
  .conversation-lead,
  .thread-lead
) :where(
  .row,
  .field-row,
  .kv-row
) {
  min-height: 28px !important;
}


/* Prevent emails from ugly character wrapping */

:where(
  .lead-card,
  .contact-card,
  .context-panel
) :where(
  a[href^="mailto:"],
  .email,
  .contact-email
) {
  overflow-wrap: anywhere;
  word-break: normal !important;
}


/* ================================================================
   09 — MESSAGE HEADER
   ================================================================ */

:where(
  .message-header,
  .mail-header,
  .thread-message-head,
  .message-meta
) {
  padding-block: 8px !important;

  border-bottom: 0 !important;

  color: var(--ink-2) !important;
}


/* Sender name stronger */

:where(
  .message-header,
  .mail-header,
  .thread-message-head
) :where(
  strong,
  .sender,
  .from-name
) {
  color: var(--ink) !important;
  font-weight: 650 !important;
}


/* ================================================================
   10 — MESSAGE BODY
   Reading surface, not giant heavy card
   ================================================================ */

:where(
  .message-body,
  .message-content,
  .mail-body,
  .email-body,
  .conversation-message-body,
  .thread-message-body,
  .msg-body,
  .body-content,
  .message-html,
  .email-content
) {
  max-width: 760px;

  padding: 17px 18px !important;

  border-radius: 12px !important;

  font-size: 12.5px !important;
  line-height: 1.58 !important;
}


html[data-theme="dark"] :where(
  .message-body,
  .message-content,
  .mail-body,
  .email-body,
  .conversation-message-body,
  .thread-message-body,
  .msg-body,
  .body-content,
  .message-html,
  .email-content
) {
  background: #171718 !important;

  border: 1px solid #303033 !important;

  color: #e8e8e6 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.028),
    0 6px 18px rgba(0,0,0,.12) !important;
}


html[data-theme="day"] :where(
  .message-body,
  .message-content,
  .mail-body,
  .email-body,
  .conversation-message-body,
  .thread-message-body,
  .msg-body,
  .body-content,
  .message-html,
  .email-content
) {
  background: #ffffff !important;

  border: 1px solid #dfe2e5 !important;

  color: #25272a !important;

  box-shadow:
    0 5px 16px rgba(31,35,39,.04) !important;
}


/* ================================================================
   11 — RIGHT CONTEXT PANEL
   Narrower and calmer.
   ================================================================ */

.context-panel {
  width: auto !important;
}


.context-panel-inner {
  padding: 16px 18px 28px !important;
}


.context-section {
  padding-block: 12px !important;
}


/* No repeated divider lines */

.context-section {
  border-top: 0 !important;
  border-bottom: 0 !important;
}


/* Labels */

.context-section-title,
.context-title {
  color: var(--ink-3) !important;

  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
}


/* Value rows */

.context-panel :where(
  .context-value,
  .value,
  dd
) {
  color: var(--ink) !important;
  font-size: 11.5px !important;
}


/* Metadata label */

.context-panel :where(
  .label,
  dt
) {
  color: var(--ink-3) !important;
  font-size: 10.8px !important;
}


/* ================================================================
   12 — RIGHT PANEL EMAIL SAFETY
   ================================================================ */

.context-panel :where(
  a[href^="mailto:"],
  .email,
  .contact-email
) {
  max-width: 100%;

  overflow-wrap: anywhere;
  word-break: normal;

  font-size: 10.8px !important;
}


/* ================================================================
   13 — TOPBAR DENSITY
   ================================================================ */

.topbar {
  padding-inline: 18px !important;
}


.global-search {
  max-width: 520px !important;
}


.business-switcher {
  min-width: 180px !important;
}


/* ================================================================
   14 — REMOVE EXCESSIVE INBOX BOXING
   ================================================================ */

:where(
  .thread-list,
  .conversation-list,
  .inbox-list,
  .thread-pane,
  .conversation-pane,
  .message-pane
) {
  box-shadow: none !important;

  border-radius: 0 !important;
}


/* ================================================================
   15 — COMMAND BAR
   Less footer-like.
   ================================================================ */

.maya-commandbar {
  padding-top: 7px !important;
  padding-bottom: 8px !important;
}


.maya-commandbar-inner {
  min-height: 46px !important;

  width: min(880px, 100%) !important;

  border-radius: 11px !important;
}


/* ================================================================
   16 — SCROLLBARS
   ================================================================ */

:where(
  .thread-list,
  .conversation-list,
  .thread-pane,
  .conversation-pane,
  .context-panel
) {
  scrollbar-width: thin;

  scrollbar-color:
    var(--scroll-thumb)
    transparent;
}


/* ================================================================
   17 — RESPONSIVE
   ================================================================ */

@media (max-width: 1450px) {
  :where(
    .inbox-layout,
    .conversation-layout,
    .thread-layout
  ) {
    grid-template-columns:
      minmax(290px, 330px)
      minmax(430px, 1fr)
      minmax(250px, 280px) !important;
  }
}


@media (max-width: 1180px) {
  .context-panel {
    display: none !important;
  }

  :where(
    .inbox-layout,
    .conversation-layout,
    .thread-layout
  ) {
    grid-template-columns:
      minmax(280px, 340px)
      minmax(0, 1fr) !important;
  }
}


/* ================================================================
   18 — TOUCH
   ================================================================ */

@media (hover: none) and (pointer: coarse) {
  :where(
    .thread-row,
    .conversation-row,
    .inbox-row,
    .thread-item,
    .conversation-item
  ) {
    min-height: 72px !important;
  }
}


/* ================================================================
   19 — REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  :where(
    .thread-row,
    .conversation-row,
    .inbox-row
  ) {
    transition: none !important;
  }
}


/* MAYA-V10.7-INBOX-PRODUCTIVITY END */

/* MAYA-V10.8-PROSPECTS-REFINEMENT START
   ================================================================
   PROSPECTS / DISCOVER / CSV LIFECYCLE REFINEMENT
   ================================================================ */


/* ================================================================
   01 — PROSPECT CONTENT WIDTH / BREATHING SPACE
   ================================================================ */

:where(
  .prospects-page,
  .prospect-page,
  .discover-page,
  .prospect-discover
) {
  --prospect-gap: 14px;
}

:where(
  .prospects-page,
  .prospect-page,
  .discover-page,
  .prospect-discover
) :where(
  .op-panel,
  .card
) {
  overflow: visible;
}


/* ================================================================
   02 — MAIN CSV / LIFECYCLE CARD
   ================================================================ */

:where(
  .prospect-upload-card,
  .prospect-import-card,
  .csv-card,
  .upload-card,
  .lifecycle-card,
  .prospect-panel
) {
  padding: 18px 20px !important;

  border-radius: 14px !important;

  background: var(--panel) !important;

  border: 1px solid var(--line) !important;

  box-shadow:
    inset 0 1px 0 var(--inner-highlight),
    0 8px 22px var(--shadow-near),
    0 22px 48px var(--shadow-soft-color),
    0 0 30px var(--warm-reflection) !important;
}


/* ================================================================
   03 — UPLOAD / CONSENT LAYOUT
   ================================================================ */

:where(
  .prospect-upload-grid,
  .csv-upload-grid,
  .upload-grid,
  .prospect-form-grid
) {
  display: grid !important;

  grid-template-columns:
    minmax(280px, .95fr)
    minmax(360px, 1.05fr) !important;

  gap: 22px !important;

  align-items: start !important;
}


/* ================================================================
   04 — CSV LABEL
   ================================================================ */

:where(
  .prospect-upload-card,
  .prospect-import-card,
  .csv-card,
  .upload-card
) label:not(.checkbox-row):not(.check-row) {
  color: var(--ink-2);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .10em;
  text-transform: uppercase;
}


/* ================================================================
   05 — NATIVE FILE INPUT REBUILD
   ================================================================ */

input[type="file"] {
  width: 100%;
  max-width: 420px;

  min-height: 38px;

  padding: 4px;

  color: var(--ink-2);

  background: var(--surface-input);

  border: 1px solid var(--line);
  border-radius: 9px;

  font-family: inherit;
  font-size: 11.5px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 var(--inner-highlight-soft);
}


input[type="file"]::file-selector-button {
  min-height: 28px;

  margin-right: 10px;

  padding: 5px 11px;

  border: 1px solid var(--line-strong);
  border-radius: 7px;

  background: var(--surface-raised);

  color: var(--ink);

  font-family: inherit;
  font-size: 11px;
  font-weight: 650;

  cursor: pointer;

  transition:
    background-color .14s ease,
    border-color .14s ease;
}


input[type="file"]::file-selector-button:hover {
  background: var(--surface-hover);
  border-color: var(--maya-brand);
}


html[data-theme="dark"] input[type="file"] {
  background: #131314;
  border-color: #343538;
}


html[data-theme="dark"] input[type="file"]::file-selector-button {
  background: #202123;
  border-color: #414347;
  color: #f2f2f0;
}


/* ================================================================
   06 — HELP / RECOMMENDED COLUMNS
   ================================================================ */

:where(
  .prospect-upload-card,
  .prospect-import-card,
  .csv-card,
  .upload-card
) :where(
  .hint,
  .muted,
  .help,
  .description,
  .csv-help
) {
  max-width: 560px;

  margin-top: 10px;

  color: var(--ink-3) !important;

  font-size: 11.3px !important;
  line-height: 1.52 !important;
}


/* ================================================================
   07 — CHECKBOX ROWS
   Large reliable hit target + proper alignment
   ================================================================ */

:where(
  .checkbox-row,
  .check-row,
  .consent-row,
  .prospect-consent
) {
  display: grid !important;

  grid-template-columns: 20px minmax(0,1fr) !important;

  gap: 10px !important;

  align-items: start !important;

  min-height: 38px;

  margin: 0 0 9px !important;

  color: var(--ink-2);

  font-size: 11.7px;
  line-height: 1.48;

  cursor: pointer;
}


:where(
  .checkbox-row,
  .check-row,
  .consent-row,
  .prospect-consent
) input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;

  min-width: 16px !important;
  min-height: 16px !important;

  margin: 2px 0 0 !important;

  accent-color: var(--maya-brand);

  cursor: pointer;
}


/* Generic fallback for nearby checkbox labels */

input[type="checkbox"] {
  accent-color: var(--maya-brand);
}


/* ================================================================
   08 — ACTION BAR
   Hierarchy instead of 4 equally strong buttons
   ================================================================ */

:where(
  .prospect-actions,
  .csv-actions,
  .upload-actions,
  .lifecycle-actions
) {
  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;

  gap: 8px !important;

  margin-top: 14px !important;
}


/* Normal actions */

:where(
  .prospect-actions,
  .csv-actions,
  .upload-actions,
  .lifecycle-actions
) .btn {
  min-height: 36px !important;

  padding-inline: 13px !important;

  border-radius: 9px !important;

  font-size: 11px !important;
}


/* Prevent secondary actions appearing as giant cards */

:where(
  .prospect-actions,
  .csv-actions,
  .upload-actions,
  .lifecycle-actions
) .btn:not(.primary) {
  background: var(--surface-raised) !important;

  color: var(--ink) !important;

  border-color: var(--line-strong) !important;

  box-shadow:
    inset 0 1px 0 var(--inner-highlight-soft),
    0 4px 11px var(--shadow-soft-color) !important;
}


/* Primary lifecycle action */

:where(
  .prospect-actions,
  .csv-actions,
  .upload-actions,
  .lifecycle-actions
) .btn.primary {
  background: var(--maya-brand) !important;

  color: var(--maya-brand-ink) !important;

  border-color: var(--maya-brand-hover) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 6px 16px var(--maya-brand-glow),
    0 0 18px var(--maya-brand-glow) !important;
}


/* ================================================================
   09 — IF MULTIPLE PRIMARY BUTTONS EXIST:
   visually reduce earlier primary actions and make last primary
   strongest.
   ================================================================ */

:where(
  .prospect-actions,
  .csv-actions,
  .upload-actions,
  .lifecycle-actions
) .btn.primary:not(:last-child) {
  background:
    color-mix(
      in srgb,
      var(--maya-brand) 78%,
      var(--surface-raised)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 10px var(--maya-brand-glow) !important;
}


:where(
  .prospect-actions,
  .csv-actions,
  .upload-actions,
  .lifecycle-actions
) .btn.primary:last-child {
  font-weight: 720 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 8px 19px var(--maya-brand-glow-strong),
    0 0 22px var(--maya-brand-glow) !important;
}


/* ================================================================
   10 — SUCCESS / PREFLIGHT STRIP
   Softer and smaller
   ================================================================ */

:where(
  .preflight-ok,
  .lifecycle-preflight,
  .prospect-preflight,
  .op-positive,
  .success-strip
) {
  min-height: 46px !important;

  margin-top: 10px !important;

  padding: 11px 13px !important;

  border-radius: 10px !important;

  font-size: 11.5px !important;
  line-height: 1.45 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.022) !important;
}


html[data-theme="dark"] :where(
  .preflight-ok,
  .lifecycle-preflight,
  .prospect-preflight,
  .op-positive,
  .success-strip
) {
  color: #88ddc0 !important;

  background:
    linear-gradient(
      90deg,
      rgba(42,116,91,.12),
      rgba(42,116,91,.045)
    ) !important;

  border-color: rgba(69,143,116,.26) !important;
}


html[data-theme="day"] :where(
  .preflight-ok,
  .lifecycle-preflight,
  .prospect-preflight,
  .op-positive,
  .success-strip
) {
  color: #176650 !important;

  background: #eff8f4 !important;

  border-color: #c8e1d8 !important;
}


/* ================================================================
   11 — CLIENT TRUTH STRIP
   Fix broken/narrow label layout.
   ================================================================ */

:where(
  .client-truth,
  .truth-strip,
  .prospect-truth,
  .owner-truth
) {
  display: grid !important;

  grid-template-columns: minmax(76px, max-content) minmax(0,1fr) !important;

  gap: 18px !important;

  align-items: start !important;

  margin-top: 16px !important;

  padding: 14px 16px !important;

  border: 1px solid var(--line) !important;

  border-radius: 11px !important;

  background: var(--surface-soft) !important;

  box-shadow:
    inset 0 1px 0 var(--inner-highlight-soft) !important;
}


:where(
  .client-truth,
  .truth-strip,
  .prospect-truth,
  .owner-truth
) :where(
  strong,
  b,
  .label,
  .title
) {
  min-width: 76px;

  color: var(--ink) !important;

  font-size: 11.4px !important;
  font-weight: 720 !important;

  line-height: 1.35 !important;
}


:where(
  .client-truth,
  .truth-strip,
  .prospect-truth,
  .owner-truth
) :where(
  p,
  span:not(.label):not(.title)
) {
  margin: 0 !important;

  color: var(--ink-2) !important;

  font-size: 11.4px !important;
  line-height: 1.5 !important;
}


/* ================================================================
   12 — DARK CARD DEPTH
   ================================================================ */

html[data-theme="dark"] :where(
  .prospect-upload-card,
  .prospect-import-card,
  .csv-card,
  .upload-card,
  .lifecycle-card,
  .prospect-panel
) {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.015),
      transparent 34%
    ),
    #171718 !important;

  border-color: #323437 !important;
}


/* ================================================================
   13 — METRIC CARDS ABOVE FORM
   ================================================================ */

:where(
  .prospects-page,
  .prospect-page,
  .discover-page,
  .prospect-discover
) :where(
  .op-metric,
  .metric-card,
  .stat-card
) {
  min-height: 68px !important;

  padding: 11px 13px !important;

  border-radius: 11px !important;
}


/* ================================================================
   14 — RIGHT PROSPECT CONTEXT PANEL
   ================================================================ */

.context-panel :where(
  .prospect-summary,
  .pipeline-inputs,
  .outreach-state
) {
  padding-block: 10px !important;
}


.context-panel :where(
  .prospect-summary,
  .pipeline-inputs,
  .outreach-state
) :where(
  .row,
  .kv-row,
  .context-row
) {
  min-height: 34px !important;
}


/* ================================================================
   15 — LOWER CARDS / COMMAND BAR CLEARANCE
   ================================================================ */

:where(
  .prospects-page,
  .prospect-page,
  .discover-page,
  .prospect-discover
) {
  padding-bottom: 74px !important;
}


/* ================================================================
   16 — BUTTON HOVER
   ================================================================ */

@media (hover: hover) and (pointer: fine) {

  :where(
    .prospect-actions,
    .csv-actions,
    .upload-actions,
    .lifecycle-actions
  ) .btn:hover {
    transform: translateY(-1px);
  }

}


/* ================================================================
   17 — TABLET
   ================================================================ */

@media (max-width: 980px) {

  :where(
    .prospect-upload-grid,
    .csv-upload-grid,
    .upload-grid,
    .prospect-form-grid
  ) {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 15px !important;
  }

}


/* ================================================================
   18 — MOBILE
   ================================================================ */

@media (max-width: 700px) {

  :where(
    .prospect-actions,
    .csv-actions,
    .upload-actions,
    .lifecycle-actions
  ) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  :where(
    .prospect-actions,
    .csv-actions,
    .upload-actions,
    .lifecycle-actions
  ) .btn {
    width: 100% !important;
  }

  :where(
    .client-truth,
    .truth-strip,
    .prospect-truth,
    .owner-truth
  ) {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

}


/* MAYA-V10.8-PROSPECTS-REFINEMENT END */

/* MAYA-V10.9-CONVERSATION-SPACIOUS START
   ================================================================
   CONVERSATIONS — SPACIOUS ADVANCED DETAIL SYSTEM
   ================================================================ */


/* ================================================================
   01 — CENTER CONVERSATION PANE
   ================================================================ */

:where(
  .thread-pane,
  .conversation-pane,
  .message-pane,
  .conversation-detail,
  .thread-detail
) {
  padding-left: 32px !important;
  padding-right: 32px !important;

  background: var(--bg) !important;
}


/* ================================================================
   02 — CONVERSATION HEADER
   ================================================================ */

:where(
  .conversation-header,
  .thread-header,
  .conversation-detail-header,
  .thread-detail-header
) {
  padding-top: 22px !important;
  padding-bottom: 18px !important;

  margin-bottom: 4px !important;

  border-bottom: 1px solid var(--line-soft) !important;
}


:where(
  .conversation-header,
  .thread-header,
  .conversation-detail-header,
  .thread-detail-header
) h1,
:where(
  .conversation-pane,
  .thread-pane
) > h1 {
  max-width: 760px;

  margin: 0 0 10px !important;

  font-size: 22px !important;
  line-height: 1.28 !important;

  font-weight: 720 !important;

  letter-spacing: -.028em !important;

  color: var(--ink) !important;

  text-wrap: balance;
}


/* ================================================================
   03 — STATUS CHIPS ROW
   ================================================================ */

:where(
  .conversation-statuses,
  .conversation-tags,
  .thread-tags,
  .detail-tags,
  .status-row
) {
  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;

  gap: 7px !important;

  margin-top: 8px !important;
  margin-bottom: 12px !important;
}


:where(
  .conversation-statuses,
  .conversation-tags,
  .thread-tags,
  .detail-tags,
  .status-row
) :where(
  .tag,
  .status-dot,
  .score-pill
) {
  min-height: 23px !important;

  padding: 3px 9px !important;

  border-radius: 999px !important;

  font-size: 9.5px !important;
  font-weight: 620 !important;
}


/* ================================================================
   04 — OWNER ACTION CONTROLS
   ================================================================ */

:where(
  .conversation-controls,
  .thread-controls,
  .owner-controls,
  .conversation-actions
) {
  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;

  gap: 18px !important;

  margin-top: 10px !important;
  margin-bottom: 14px !important;
}


:where(
  .conversation-controls,
  .thread-controls,
  .owner-controls,
  .conversation-actions
) label {
  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  min-height: 34px;

  color: var(--ink-2) !important;

  font-size: 11.7px !important;
  line-height: 1.35 !important;

  cursor: pointer;
}


:where(
  .conversation-controls,
  .thread-controls,
  .owner-controls,
  .conversation-actions
) input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;

  margin: 0 !important;

  accent-color: var(--maya-brand);
}


/* ================================================================
   05 — CONVERSATION DESCRIPTION
   ================================================================ */

:where(
  .conversation-summary-line,
  .thread-summary-line,
  .conversation-description,
  .thread-description,
  .detail-summary
) {
  max-width: 760px;

  margin-top: 4px !important;
  margin-bottom: 18px !important;

  color: var(--ink-3) !important;

  font-size: 11.7px !important;
  line-height: 1.55 !important;
}


/* ================================================================
   06 — LEAD CARD
   ================================================================ */

:where(
  .lead-card,
  .conversation-lead,
  .thread-lead,
  .prospect-card,
  .contact-card
) {
  width: 100%;
  max-width: 760px;

  margin-top: 20px !important;
  margin-bottom: 22px !important;

  padding: 20px 22px !important;

  border-radius: 14px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018),
      transparent 30%
    ),
    var(--panel) !important;

  border: 1px solid var(--line) !important;

  box-shadow:
    inset 0 1px 0 var(--inner-highlight),
    0 8px 22px var(--shadow-near),
    0 22px 48px var(--shadow-soft-color),
    0 0 28px var(--warm-reflection) !important;
}


/* Lead title */

:where(
  .lead-card,
  .conversation-lead,
  .thread-lead,
  .prospect-card,
  .contact-card
) > :where(
  h2,
  h3,
  .title,
  .card-title
) {
  margin-bottom: 16px !important;

  color: var(--ink) !important;

  font-size: 12px !important;
  font-weight: 750 !important;

  letter-spacing: .08em !important;
  text-transform: uppercase;
}


/* ================================================================
   07 — LEAD CARD LABEL / VALUE GRID
   ================================================================ */

:where(
  .lead-card,
  .conversation-lead,
  .thread-lead,
  .prospect-card,
  .contact-card
) :where(
  .row,
  .field-row,
  .kv-row,
  .detail-row
) {
  display: grid !important;

  grid-template-columns:
    minmax(120px, 150px)
    minmax(0, 1fr) !important;

  gap: 18px !important;

  align-items: start !important;

  min-height: 34px !important;

  padding-block: 4px !important;
}


/* Label */

:where(
  .lead-card,
  .conversation-lead,
  .thread-lead,
  .prospect-card,
  .contact-card
) :where(
  dt,
  .label,
  .field-label
) {
  color: var(--ink-3) !important;

  font-size: 11.2px !important;
  line-height: 1.45 !important;

  font-weight: 500 !important;
}


/* Value */

:where(
  .lead-card,
  .conversation-lead,
  .thread-lead,
  .prospect-card,
  .contact-card
) :where(
  dd,
  .value,
  .field-value
) {
  min-width: 0;

  color: var(--ink) !important;

  font-size: 11.8px !important;
  line-height: 1.5 !important;

  font-weight: 520 !important;

  overflow-wrap: anywhere;
  word-break: normal !important;
}


/* ================================================================
   08 — EMAIL / CONTACT VALUE
   ================================================================ */

:where(
  .lead-card,
  .conversation-lead,
  .thread-lead,
  .prospect-card,
  .contact-card
) :where(
  a[href^="mailto:"],
  .email,
  .contact-email
) {
  display: inline-block;

  max-width: 100%;

  overflow-wrap: anywhere;
  word-break: normal !important;

  color: var(--ink) !important;

  text-decoration: none !important;
}


/* ================================================================
   09 — CAPTURED / QUALIFICATION METADATA
   ================================================================ */

:where(
  .captured,
  .qualification-details,
  .lead-meta,
  .research-meta,
  .qualification-meta
) {
  max-width: 100%;

  padding-top: 3px;

  color: var(--ink-2) !important;

  font-size: 10.9px !important;
  line-height: 1.55 !important;

  overflow-wrap: anywhere;
}


/* ================================================================
   10 — STAGE CHIP WITH SCORE
   ================================================================ */

:where(
  .lead-card,
  .conversation-lead,
  .thread-lead
) :where(
  .stage,
  .stage-pill,
  .score-pill
) {
  vertical-align: middle;
}


/* ================================================================
   11 — LEFT CONVERSATION LIST
   More room, less brown selected block
   ================================================================ */

:where(
  .thread-row,
  .conversation-row,
  .inbox-row,
  .thread-item,
  .conversation-item
) {
  padding: 14px 16px !important;

  min-height: 92px !important;
}


:where(
  .thread-row.active,
  .thread-row.selected,
  .conversation-row.active,
  .conversation-row.selected,
  .inbox-row.active,
  .inbox-row.selected,
  .thread-item.active,
  .conversation-item.active
) {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--maya-brand) 6%, transparent),
      transparent 72%
    ),
    var(--surface-active) !important;

  box-shadow:
    inset 0 1px 0 var(--inner-highlight-soft) !important;
}


/* ================================================================
   12 — SELECTED ROW INDICATOR
   ================================================================ */

:where(
  .thread-row.active,
  .thread-row.selected,
  .conversation-row.active,
  .conversation-row.selected,
  .inbox-row.active,
  .inbox-row.selected,
  .thread-item.active,
  .conversation-item.active
)::before {
  width: 3px !important;

  top: 10px !important;
  bottom: 10px !important;

  background: var(--maya-brand) !important;

  box-shadow:
    0 0 14px var(--maya-brand-glow) !important;
}


/* ================================================================
   13 — LEFT ROW TYPOGRAPHY
   ================================================================ */

:where(
  .thread-row,
  .conversation-row,
  .inbox-row,
  .thread-item,
  .conversation-item
) :where(
  .sender,
  .thread-sender,
  .conversation-sender
) {
  margin-bottom: 4px !important;

  font-size: 12.2px !important;
  font-weight: 680 !important;
}


:where(
  .thread-row,
  .conversation-row,
  .inbox-row,
  .thread-item,
  .conversation-item
) :where(
  .subject,
  .thread-subject,
  .conversation-subject
) {
  margin-bottom: 5px !important;

  font-size: 11.7px !important;
}


:where(
  .thread-row,
  .conversation-row,
  .inbox-row,
  .thread-item,
  .conversation-item
) :where(
  .snippet,
  .preview,
  .thread-preview,
  .conversation-preview
) {
  font-size: 10.9px !important;

  line-height: 1.45 !important;
}


/* ================================================================
   14 — MESSAGE AREA SPACING
   ================================================================ */

:where(
  .message,
  .thread-message,
  .conversation-message
) {
  margin-top: 18px !important;
  margin-bottom: 22px !important;
}


/* ================================================================
   15 — RIGHT CONTEXT PANEL
   Keep detail readable but reduce visual pressure
   ================================================================ */

.context-panel-inner {
  padding: 20px 22px 30px !important;
}


.context-section {
  padding-block: 14px !important;
}


.context-panel :where(
  .context-row,
  .kv-row,
  .detail-row
) {
  min-height: 36px !important;

  display: grid;

  grid-template-columns:
    minmax(84px, .85fr)
    minmax(0, 1.15fr);

  gap: 12px;
}


.context-panel :where(
  .label,
  dt
) {
  color: var(--ink-3) !important;

  font-size: 10.7px !important;
}


.context-panel :where(
  .value,
  dd,
  .context-value
) {
  min-width: 0;

  color: var(--ink) !important;

  font-size: 11.2px !important;

  overflow-wrap: anywhere;
}


/* ================================================================
   16 — DARK PREMIUM DEPTH
   ================================================================ */

html[data-theme="dark"] :where(
  .lead-card,
  .conversation-lead,
  .thread-lead,
  .prospect-card,
  .contact-card
) {
  background:
    radial-gradient(
      700px 220px at 38% -80px,
      rgba(217,138,67,.028),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.018),
      transparent 30%
    ),
    #171718 !important;

  border-color: #343538 !important;
}


/* ================================================================
   17 — DAY PREMIUM DEPTH
   ================================================================ */

html[data-theme="day"] :where(
  .lead-card,
  .conversation-lead,
  .thread-lead,
  .prospect-card,
  .contact-card
) {
  background:
    radial-gradient(
      700px 220px at 38% -90px,
      rgba(217,138,67,.026),
      transparent 64%
    ),
    #ffffff !important;

  border-color: #d7dbe0 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 8px 21px rgba(31,35,39,.052),
    0 22px 46px rgba(31,35,39,.026) !important;
}


/* ================================================================
   18 — RESPONSIVE
   ================================================================ */

@media (max-width: 1200px) {

  :where(
    .thread-pane,
    .conversation-pane,
    .message-pane,
    .conversation-detail,
    .thread-detail
  ) {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

}


@media (max-width: 900px) {

  :where(
    .lead-card,
    .conversation-lead,
    .thread-lead,
    .prospect-card,
    .contact-card
  ) :where(
    .row,
    .field-row,
    .kv-row,
    .detail-row
  ) {
    grid-template-columns:
      minmax(95px, 120px)
      minmax(0,1fr) !important;
  }

}


@media (max-width: 700px) {

  :where(
    .thread-pane,
    .conversation-pane,
    .message-pane,
    .conversation-detail,
    .thread-detail
  ) {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  :where(
    .conversation-header,
    .thread-header,
    .conversation-detail-header,
    .thread-detail-header
  ) h1,
  :where(
    .conversation-pane,
    .thread-pane
  ) > h1 {
    font-size: 19px !important;
  }

  :where(
    .lead-card,
    .conversation-lead,
    .thread-lead,
    .prospect-card,
    .contact-card
  ) {
    padding: 16px !important;
  }

  :where(
    .lead-card,
    .conversation-lead,
    .thread-lead,
    .prospect-card,
    .contact-card
  ) :where(
    .row,
    .field-row,
    .kv-row,
    .detail-row
  ) {
    grid-template-columns: 1fr !important;

    gap: 3px !important;

    margin-bottom: 10px !important;
  }

}

/* MAYA-CONVERSATION-FILTERS-MAXIMIZED */

:where(
  .conversation-filters,
  .inbox-filters,
  .filter-row,
  .filters
) {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

  width: 100% !important;
  max-width: none !important;

  gap: 7px !important;

  padding: 12px 14px !important;
  margin: 0 !important;

  align-items: stretch !important;
}

:where(
  .conversation-filters,
  .inbox-filters,
  .filter-row,
  .filters
) :where(
  button,
  .btn,
  .filter-pill
) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  min-height: 40px !important;

  padding: 8px 7px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 10px !important;

  white-space: nowrap !important;

  font-size: 11px !important;
  font-weight: 650 !important;

  text-align: center !important;
}

:where(
  .conversation-filters,
  .inbox-filters,
  .filter-row,
  .filters
) :where(
  button.active,
  .btn.active,
  .filter-pill.active,
  .on
) {
  background: var(--maya-brand) !important;
  color: var(--maya-brand-ink) !important;

  border-color: var(--maya-brand-hover) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 5px 14px var(--maya-brand-glow) !important;
}

/* Smaller screens */
@media (max-width: 760px) {
  :where(
    .conversation-filters,
    .inbox-filters,
    .filter-row,
    .filters
  ) {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}
/* MAYA-V10.9-CONVERSATION-SPACIOUS END */

/* KK-UI-GOVERNOR-V3 AUTOFIX START */
/* KK UI Governor V3.2 - ADAPTIVE CORPORATE DESIGN CONTRACT */
:root {
  --kk-governor-color-canvas-observed: rgb(245, 246, 247);
  --kk-governor-color-text-observed: rgb(24, 25, 27);
  --kk-governor-color-canvas-dark-observed: rgb(245, 246, 247);
  --kk-governor-color-text-dark-observed: rgb(24, 25, 27);
  --kk-governor-font-sans-observed: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", Inter, Roboto, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --kk-governor-type-xs: 12px;
  --kk-governor-type-sm: 14px;
  --kk-governor-type-md: 16px;
  --kk-governor-type-lg: 20px;
  --kk-governor-type-xl: 24px;
  --kk-governor-type-2xl: 32px;
  --kk-governor-space-1: 4px;
  --kk-governor-space-2: 8px;
  --kk-governor-space-3: 12px;
  --kk-governor-space-4: 16px;
  --kk-governor-space-6: 24px;
  --kk-governor-space-8: 32px;
  --kk-governor-radius-sm: 6px;
  --kk-governor-radius-lg: 10px;
  --kk-governor-control-height: 40px;
  --kk-governor-motion-fast: 120ms;
  --kk-governor-motion-standard: 180ms;
  --kk-governor-ease: cubic-bezier(0.2, 0, 0, 1);
  --kk-governor-shadow-subtle: 0 1px 2px rgb(15 23 42 / 0.08);
  --kk-governor-breakpoint-compact: 600px;
  --kk-governor-breakpoint-tablet: 768px;
  --kk-governor-breakpoint-laptop: 1024px;
  --kk-governor-breakpoint-desktop: 1440px;
}

/* KK UI Governor V3.2 - RUNTIME-PROVEN LAYOUT RHYTHM */
.power-row {
  gap: 8px !important;
}
.rail {
  gap: 8px !important;
}
.stage {
  gap: 8px !important;
}
.topbar {
  gap: 8px !important;
}
#app {
  gap: 8px !important;
}
#workspace-main {
  gap: 8px !important;
}
#workspace-shell {
  gap: 8px !important;
}

/* KK UI Governor V3.2 - RUNTIME-PROVEN NATIVE COMPONENT CONSISTENCY */
#maya-login-submit {
  border-radius: 11px !important;
  font-size: 12.32px !important;
  font-weight: 400 !important;
  line-height: 17.9872px !important;
}
/* KK-UI-GOVERNOR-V3 AUTOFIX END */

/* MAYA-RESPONSIVE-SHELL-REPAIR-V2 START
   Final cascade owner for the application shell.
   Purpose: prevent late desktop/tablet rules from reintroducing a side rail on phones,
   preserve a compact tablet rail, and keep route content inside the usable viewport.
*/
:where(#app, .stage, .workspace-shell, .workspace-main, .view) {
  min-inline-size: 0;
}

@media (max-width: 1240px) {
  .workspace-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .context-panel {
    display: none !important;
  }
}

@media (min-width: 701px) and (max-width: 1024px) {
  :root {
    --maya-rail-width: 72px;
    --v7-sidebar-width: 72px;
    --v72-sidebar-width: 72px;
  }

  body #app {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
    block-size: 100dvh;
    min-block-size: 100dvh;
  }

  body .rail {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    inline-size: auto !important;
    min-inline-size: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    border-top: 0 !important;
    border-right: 1px solid var(--line) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  body .rail .brand {
    display: flex !important;
    justify-content: center !important;
    padding: 14px 8px 10px !important;
  }

  body .rail .brand-text,
  body .rail .rail-sep,
  body .rail .rail-foot {
    display: none !important;
  }

  body .rail nav {
    display: block !important;
    flex: 1 1 auto !important;
    min-block-size: 0 !important;
    padding: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body .rail nav a {
    display: flex !important;
    position: relative !important;
    align-items: center !important;
    justify-content: center !important;
    inline-size: 54px !important;
    min-inline-size: 54px !important;
    min-block-size: 46px !important;
    margin: 2px 0 !important;
    padding: 8px !important;
    gap: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    border-radius: 10px !important;
  }

  body .rail nav a > span:not(.pip) {
    inline-size: 0 !important;
    max-inline-size: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 0 !important;
  }

  body .rail nav a i[data-ico],
  body .rail nav a svg {
    inline-size: 20px !important;
    block-size: 20px !important;
    flex: 0 0 20px !important;
  }

  body .rail nav .pip {
    position: absolute !important;
    inset-inline-end: 2px !important;
    inset-block-start: 3px !important;
    min-inline-size: 15px !important;
    padding-inline: 4px !important;
    font-size: 9px !important;
    line-height: 15px !important;
  }

  body .stage {
    grid-column: 2 !important;
    grid-row: 1 !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    min-block-size: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  body #workspace-shell,
  body #workspace-main {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    min-block-size: 0 !important;
    gap: 0 !important;
  }

  body .topbar {
    min-inline-size: 0 !important;
    padding-inline: 14px !important;
  }

  body .topbar > .row {
    min-inline-size: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  body .topbar-right {
    min-inline-size: 0 !important;
    flex: 0 1 auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body .view {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 700px) {
  html,
  body {
    inline-size: 100%;
    min-inline-size: 0;
    block-size: 100%;
    min-block-size: 100%;
    overflow: hidden !important;
  }

  body #app {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows:
      minmax(0, 1fr)
      calc(68px + env(safe-area-inset-bottom)) !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    block-size: 100dvh !important;
    min-block-size: 100dvh !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  body .stage {
    grid-column: 1 !important;
    grid-row: 1 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    min-block-size: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  body .rail {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: calc(68px + env(safe-area-inset-bottom)) !important;
    min-block-size: calc(68px + env(safe-area-inset-bottom)) !important;
    padding: 0 0 env(safe-area-inset-bottom) !important;
    gap: 0 !important;
    overflow: hidden !important;
    border-right: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-bottom: 0 !important;
    box-shadow: 0 -8px 22px rgba(0, 0, 0, .16) !important;
    z-index: 80 !important;
  }

  body .rail .brand,
  body .rail .rail-sep,
  body .rail .rail-foot {
    display: none !important;
  }

  body .rail nav {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: stretch !important;
    min-inline-size: 0 !important;
    min-block-size: 68px !important;
    margin: 0 !important;
    padding:
      6px max(8px, env(safe-area-inset-right))
      6px max(8px, env(safe-area-inset-left)) !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body .rail nav::-webkit-scrollbar {
    display: none !important;
  }

  body .rail nav a {
    display: flex !important;
    position: relative !important;
    flex: 0 0 74px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    inline-size: 74px !important;
    min-inline-size: 74px !important;
    max-inline-size: 74px !important;
    min-block-size: 54px !important;
    margin: 0 !important;
    padding: 5px 6px !important;
    gap: 3px !important;
    overflow: visible !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    border-radius: 10px !important;
    scroll-snap-align: center;
    touch-action: manipulation;
  }

  body .rail nav a > span:not(.pip) {
    display: block !important;
    inline-size: 100% !important;
    max-inline-size: 68px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 9.5px !important;
    line-height: 1.1 !important;
  }

  body .rail nav a i[data-ico],
  body .rail nav a svg {
    inline-size: 19px !important;
    block-size: 19px !important;
    flex: 0 0 19px !important;
  }

  body .rail nav a.on::before {
    inset-inline: 12px !important;
    inset-block-start: auto !important;
    inset-block-end: -6px !important;
    inline-size: auto !important;
    block-size: 3px !important;
    border-radius: 3px 3px 0 0 !important;
  }

  body .rail nav .pip {
    position: absolute !important;
    inset-inline-end: 5px !important;
    inset-block-start: 3px !important;
    min-inline-size: 15px !important;
    padding-inline: 4px !important;
    font-size: 9px !important;
    line-height: 15px !important;
  }

  body #workspace-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    min-block-size: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  body #workspace-main {
    display: flex !important;
    flex-direction: column !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    min-block-size: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  body .context-panel {
    display: none !important;
  }

  body .topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: 56px !important;
    min-block-size: 56px !important;
    padding-inline:
      max(10px, env(safe-area-inset-left))
      max(10px, env(safe-area-inset-right)) !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  body .topbar > .row {
    display: flex !important;
    flex: 1 1 auto !important;
    min-inline-size: 0 !important;
    max-inline-size: 52% !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  body .crumb {
    display: none !important;
  }

  body .business-switcher {
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    padding: 5px 7px !important;
  }

  body .business-switcher-copy {
    min-inline-size: 0 !important;
  }

  body .business-switcher-copy b {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10.5px !important;
  }

  body .business-switcher-copy > span {
    display: none !important;
  }

  body .topbar-right {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    min-inline-size: 0 !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  body .global-search,
  body .theme-toggle,
  body .maya-status,
  body .top-action {
    flex: 0 0 40px !important;
    inline-size: 40px !important;
    min-inline-size: 40px !important;
    max-inline-size: 40px !important;
    min-block-size: 40px !important;
    padding-inline: 0 !important;
    justify-content: center !important;
  }

  body .global-search > span,
  body .global-search > kbd,
  body .theme-toggle-label,
  body #maya-status-text {
    display: none !important;
  }

  body #logout-btn {
    font-size: 0 !important;
  }

  body #logout-btn::after {
    content: "↗";
    font-size: 16px;
    line-height: 1;
  }

  body .view {
    flex: 1 1 auto !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    min-block-size: 0 !important;
    padding:
      14px max(12px, env(safe-area-inset-right))
      22px max(12px, env(safe-area-inset-left)) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  body .view > * {
    min-inline-size: 0 !important;
    max-inline-size: 100%;
  }

  body :where(
    .g2,
    .g3,
    .g4,
    .op-grid-2,
    .op-metrics-grid,
    .plan-grid,
    .mb-grid,
    .prospect-upload-grid,
    .csv-upload-grid,
    .upload-grid,
    .prospect-form-grid
  ) {
    min-inline-size: 0 !important;
  }

  body :where(
    .g2,
    .g3,
    .op-grid-2,
    .plan-grid,
    .mb-grid,
    .prospect-upload-grid,
    .csv-upload-grid,
    .upload-grid,
    .prospect-form-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body :where(
    .g4,
    .op-metrics-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body :where(
    .split,
    .inbox-layout,
    .conversation-layout,
    .thread-layout
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    min-inline-size: 0 !important;
  }

  body :where(
    .thread-list,
    .conversation-list,
    .inbox-list
  ) {
    max-block-size: 38dvh;
    min-inline-size: 0 !important;
  }

  body :where(
    .thread-pane,
    .conversation-pane,
    .message-pane,
    .conversation-detail,
    .thread-detail
  ) {
    min-inline-size: 0 !important;
    padding-inline: 14px !important;
  }

  body :where(
    .op-title,
    .op-hero,
    .page-head,
    .section-head,
    .actions,
    .op-actions,
    .tenant-actions,
    .tenant-form-actions
  ) {
    min-inline-size: 0 !important;
    flex-wrap: wrap !important;
  }

  body :where(
    h1, h2, h3,
    .op-title h1,
    .op-hero h1
  ) {
    max-inline-size: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  body :where(
    .op-title h1,
    .op-hero h1
  ) {
    font-size: clamp(23px, 7vw, 28px) !important;
    line-height: 1.12 !important;
  }

  body :where(
    img,
    video,
    canvas,
    svg
  ) {
    max-inline-size: 100%;
  }

  body :where(
    .table-wrap,
    .table-scroll,
    .op-table-wrap,
    .tenant-table-wrap
  ) {
    max-inline-size: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body .maya-commandbar {
    flex: 0 0 auto !important;
    padding: 7px 9px 9px !important;
  }

  body .maya-commandbar-inner {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
  }

  body .maya-commandbar-inner > span:nth-last-child(2) {
    display: none !important;
  }

  body .modal-back {
    padding: 10px !important;
  }

  body .modal {
    inline-size: min(100%, 620px) !important;
    max-inline-size: 100% !important;
    max-block-size: 92dvh !important;
  }
}

@media (max-width: 360px) {
  body .rail nav a {
    flex-basis: 68px !important;
    inline-size: 68px !important;
    min-inline-size: 68px !important;
    max-inline-size: 68px !important;
  }

  body .view {
    padding-inline: 10px !important;
  }

  body :where(
    .g4,
    .op-metrics-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* MAYA-RESPONSIVE-SHELL-REPAIR-V2 END */