/* ======================================================================
   SARAH OS — NEXT-GENERATION GLOBAL VISUAL SYSTEM
   Loaded last from base.html. Cosmetic layer only: no route/ID/JS changes.
   Dashboard cinematic layer remains in sarah-next-dashboard-v2.css.
   ====================================================================== */

:root {
  --sn-black: #000102;
  --sn-black-2: #01040a;
  --sn-black-3: #030812;
  --sn-panel: rgba(4, 12, 24, .92);
  --sn-panel-2: rgba(7, 19, 36, .86);
  --sn-panel-3: rgba(9, 25, 47, .72);
  --sn-blue: #2482ff;
  --sn-blue-hi: #63adff;
  --sn-blue-deep: #0d46c8;
  --sn-cyan: #18e8ff;
  --sn-cyan-hi: #9cf8ff;
  --sn-white: #f5fbff;
  --sn-text: #e7f2ff;
  --sn-text-2: #b4c7da;
  --sn-muted: #7890aa;
  --sn-dim: #536a83;
  --sn-green: #20e9a0;
  --sn-amber: #ffc44d;
  --sn-red: #ff5874;
  --sn-line: rgba(61, 141, 245, .28);
  --sn-line-hi: rgba(67, 168, 255, .62);
  --sn-line-soft: rgba(68, 138, 226, .14);
  --sn-radius-xl: 18px;
  --sn-radius-lg: 14px;
  --sn-radius-md: 10px;
  --sn-radius-sm: 7px;
  --sn-shadow: 0 20px 58px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.025);
  --sn-shadow-soft: 0 12px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.02);
  --sn-glow-blue: 0 0 9px rgba(55,151,255,.62), 0 0 27px rgba(36,130,255,.26);
  --sn-glow-cyan: 0 0 9px rgba(24,232,255,.78), 0 0 29px rgba(24,232,255,.24);
  --sn-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sn-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  min-height: 100%;
  background: var(--sn-black) !important;
  color-scheme: dark;
  scrollbar-color: rgba(49,140,241,.58) #02050a;
}

body.sarah-os-shell {
  min-height: 100vh;
  margin: 0;
  color: var(--sn-text);
  font-family: var(--sn-sans);
  background:
    radial-gradient(circle at 52% -12%, rgba(36,130,255,.15), transparent 34rem),
    radial-gradient(circle at 92% 31%, rgba(24,232,255,.055), transparent 29rem),
    radial-gradient(circle at -10% 74%, rgba(20,82,201,.08), transparent 32rem),
    linear-gradient(180deg, #02050a 0%, #000204 48%, #000 100%) !important;
  background-attachment: fixed !important;
  overflow-x: hidden;
}

body.sarah-os-shell::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .30;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.62) 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(90,181,255,.68) 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(24,232,255,.42) 0 1px, transparent 1.2px);
  background-size: 211px 227px, 293px 271px, 379px 347px;
  background-position: 17px 31px, 83px 19px, 131px 73px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.60) 54%, transparent 93%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.60) 54%, transparent 93%);
}

body.sarah-os-shell::after {
  content: "";
  position: fixed;
  z-index: 0;
  left: 50%;
  top: 58px;
  width: min(1000px, 78vw);
  height: 220px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: .18;
  background: radial-gradient(ellipse at center, rgba(34,132,255,.30), transparent 68%);
  filter: blur(30px);
}

/* Exclude the slide-in drawer + its overlay: they are position:fixed overlays
   with their own z-index (9000/960). Without this exclusion the (0,1,1)
   selector clobbers .nav-drawer's fixed → drawer sits in flow and shoves page
   content below the fold on every nav.html inner page (Phase 4 fix, 7/15). */
body.sarah-os-shell > *:not(.nav-drawer):not(.nav-drawer-overlay) {
  position: relative;
  z-index: 1;
}

body.sarah-os-shell *,
body.sarah-os-shell *::before,
body.sarah-os-shell *::after {
  box-sizing: border-box;
}

body.sarah-os-shell a {
  text-decoration: none;
}

body.sarah-os-shell ::selection {
  color: #fff;
  background: rgba(36,130,255,.54);
}

body.sarah-os-shell ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body.sarah-os-shell ::-webkit-scrollbar-track { background: #02050a; }
body.sarah-os-shell ::-webkit-scrollbar-thumb {
  border: 2px solid #02050a;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(38,138,255,.72), rgba(15,85,186,.54));
}
body.sarah-os-shell ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(24,232,255,.72), rgba(36,130,255,.68));
}

/* ======================================================================
   SHARED TOPBAR / SARAH BRAND
   ====================================================================== */

.sarah-inner-page .topbar {
  position: sticky !important;
  z-index: 600 !important;
  top: 0 !important;
  min-height: 64px !important;
  height: 64px !important;
  padding: 0 22px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(65,153,255,.27) !important;
  background:
    linear-gradient(180deg, rgba(2,8,17,.96), rgba(1,5,11,.90)),
    radial-gradient(circle at 15% 0%, rgba(36,130,255,.16), transparent 34%) !important;
  box-shadow: 0 12px 42px rgba(0,0,0,.46), inset 0 -1px 0 rgba(255,255,255,.018) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}

.sarah-inner-page .topbar::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(24,232,255,.55), rgba(65,143,255,.58), transparent);
  box-shadow: 0 0 14px rgba(24,232,255,.28);
}

.sarah-inner-page .topbar-left,
.sarah-inner-page .topbar-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: auto !important;
  gap: 12px !important;
}

.sarah-inner-page .topbar-home {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  min-width: 124px;
  color: var(--sn-white);
}

.sarah-inner-page .topbar-mark {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(99,190,255,.70);
  background: radial-gradient(circle, rgba(20,81,167,.24), rgba(1,6,14,.94) 70%);
  box-shadow: 0 0 5px rgba(255,255,255,.50), 0 0 16px rgba(24,232,255,.36), 0 0 32px rgba(36,130,255,.24);
}

.sarah-inner-page .topbar-mark::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(55,140,255,.20);
  animation: snTopHalo 5.8s ease-in-out infinite;
}

.sarah-inner-page .topbar-logo {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
  filter: saturate(1.18) contrast(1.10) drop-shadow(0 0 6px rgba(24,232,255,.82)) !important;
}

.sarah-inner-page .topbar-sarah-word {
  font: 800 17px/1 var(--sn-sans);
  letter-spacing: .26em;
  padding-left: .26em;
  color: transparent;
  background: linear-gradient(90deg, #1657de 0%, #5aaeff 28%, #e9fcff 50%, #5aaeff 72%, #1657de 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: snSarahWord 5.8s ease-in-out infinite;
}

.sarah-inner-page .topbar-title {
  display: inline-flex !important;
  align-items: center;
  min-height: 26px;
  padding-left: 14px;
  border-left: 1px solid rgba(90,150,222,.24);
  color: #a9bfd5 !important;
  font: 700 10px/1.2 var(--sn-mono) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}

.sarah-inner-page .topbar-right > .btn-logout,
.sarah-inner-page .topbar-right > form .btn-logout,
.sarah-inner-page .topbar-right > a.btn-logout {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  border: 1px solid rgba(64,141,235,.27) !important;
  border-radius: 8px !important;
  color: #b9cde0 !important;
  background: rgba(5,18,34,.70) !important;
  font: 700 9px/1 var(--sn-mono) !important;
  letter-spacing: .08em !important;
  box-shadow: inset 0 0 17px rgba(36,130,255,.03) !important;
  transition: .18s ease !important;
}

.sarah-inner-page .topbar-right > .btn-logout:hover,
.sarah-inner-page .topbar-right > form .btn-logout:hover,
.sarah-inner-page .topbar-right > a.btn-logout:hover,
.sarah-inner-page .topbar-right > .btn-active {
  color: #fff !important;
  border-color: rgba(74,177,255,.64) !important;
  background: rgba(13,53,101,.54) !important;
  box-shadow: 0 0 16px rgba(36,130,255,.17), inset 0 0 18px rgba(24,232,255,.04) !important;
}

.sarah-inner-page .nav-hamburger {
  min-width: 88px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(24,203,255,.48) !important;
  border-radius: 9px !important;
  color: #dff8ff !important;
  background: linear-gradient(180deg, rgba(10,43,78,.70), rgba(3,16,31,.86)) !important;
  box-shadow: inset 0 0 18px rgba(24,232,255,.035), 0 0 14px rgba(36,130,255,.10) !important;
}

.sarah-inner-page .nav-hamburger:hover,
.sarah-inner-page .nav-hamburger[aria-expanded="true"] {
  border-color: rgba(24,232,255,.82) !important;
  box-shadow: var(--sn-glow-cyan), inset 0 0 19px rgba(24,232,255,.06) !important;
}

.sarah-inner-page .nav-hamburger-lines span {
  background: linear-gradient(90deg, var(--sn-blue-hi), var(--sn-cyan)) !important;
  box-shadow: 0 0 6px rgba(24,232,255,.46);
}

.sarah-inner-page .nav-hamburger-label {
  color: #d8ecff !important;
  font: 800 9px/1 var(--sn-mono) !important;
  letter-spacing: .10em !important;
  text-transform: uppercase;
}

.sarah-inner-page .nav-badge,
.sarah-inner-page .nav-drawer-badge {
  color: #fff !important;
  background: linear-gradient(145deg, #ff6c83, #ca2044) !important;
  border: 1px solid rgba(255,155,171,.72) !important;
  box-shadow: 0 0 12px rgba(255,76,110,.36) !important;
}

/* ======================================================================
   NAV DRAWER — DESKTOP SIDE PANEL / MOBILE BOTTOM SHEET
   ====================================================================== */

.sarah-inner-page .nav-drawer-overlay {
  z-index: 950 !important;
  background: rgba(0,2,7,.76) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.sarah-inner-page .nav-drawer {
  z-index: 960 !important;
  width: min(340px, 92vw) !important;
  border-left: 1px solid rgba(76,164,255,.48) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(36,130,255,.18), transparent 31%),
    linear-gradient(180deg, rgba(4,13,26,.985), rgba(0,3,8,.995)) !important;
  box-shadow: -24px 0 70px rgba(0,0,0,.66), -1px 0 20px rgba(36,130,255,.12) !important;
}

.sarah-inner-page .nav-drawer-header {
  min-height: 68px !important;
  padding: 0 18px !important;
  border-bottom: 1px solid rgba(70,147,239,.22) !important;
}

.sarah-inner-page .nav-drawer-title {
  color: #f2fbff !important;
  font: 800 13px/1 var(--sn-mono) !important;
  letter-spacing: .20em !important;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(74,169,255,.38);
}

.sarah-inner-page .nav-drawer-close {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(67,145,239,.35) !important;
  border-radius: 9px !important;
  color: #b9d6ef !important;
  background: rgba(4,17,33,.76) !important;
}

.sarah-inner-page .nav-drawer-close:hover {
  color: #fff !important;
  border-color: rgba(24,232,255,.64) !important;
  box-shadow: 0 0 13px rgba(24,232,255,.16) !important;
}

.sarah-inner-page .nav-drawer-section {
  padding: 11px !important;
  border-bottom: 1px solid rgba(63,134,222,.14) !important;
}

.sarah-inner-page .nav-drawer-link {
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 13px !important;
  margin: 3px 0 !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  color: #b6c9dc !important;
  font: 650 12px/1.2 var(--sn-sans) !important;
  transition: .17s ease !important;
}

.sarah-inner-page .nav-drawer-link:hover {
  color: #fff !important;
  border-color: rgba(65,151,255,.25) !important;
  background: linear-gradient(90deg, rgba(22,78,145,.26), rgba(7,29,56,.14)) !important;
  transform: translateX(2px);
}

.sarah-inner-page .nav-drawer-link.active {
  color: #fff !important;
  border-color: rgba(65,167,255,.58) !important;
  background: linear-gradient(90deg, rgba(26,103,222,.52), rgba(6,34,74,.23)) !important;
  box-shadow: inset 0 0 24px rgba(36,130,255,.10), 0 0 15px rgba(36,130,255,.12) !important;
}

.sarah-inner-page .nav-drawer-link.active::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--sn-cyan);
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}

.sarah-inner-page .nav-tag {
  margin-left: auto;
  color: var(--sn-cyan-hi) !important;
  font: 800 7px/1 var(--sn-mono) !important;
  letter-spacing: .12em !important;
}

/* ======================================================================
   LAYOUT / PAGE SURFACES
   ====================================================================== */

.sarah-inner-page :is(
  .main, .agents-wrap, .container, .flags-wrap, .reps-wrap, .act-wrap,
  .ynk-wrap, .li-page, .lc-page, .matrix-page, .profile-wrap, .up-wrap,
  .sr-wrap, .sn-wrap, .sh-wrap, .snoop-page, .snoopq-page, .req-wrap,
  .pw-wrap, .dl-wrap, .chat-shell
) {
  width: min(100%, 1560px) !important;
  max-width: 1560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(15px, 2.25vw, 34px) !important;
  padding-right: clamp(15px, 2.25vw, 34px) !important;
}

.sarah-inner-page :is(.main, .agents-wrap, .container, .flags-wrap, .reps-wrap, .act-wrap, .ynk-wrap, .li-page, .lc-page, .matrix-page, .profile-wrap, .up-wrap, .sr-wrap, .sn-wrap, .sh-wrap, .snoop-page, .snoopq-page) {
  padding-top: clamp(22px, 3vw, 38px) !important;
  padding-bottom: 76px !important;
}

.sarah-inner-page :is(
  .agents-head, .prospects-header, .activity-section-title, .admin-section-title,
  .reports-header, .settings-header, .reps-head, .act-head, .ynk-head,
  .aw-title, .li-intro, .lc-intro, .sr-head, .sn-head, .sh-head,
  .snoop-header, .snoopq-header, .detail-head, .up-header
) {
  position: relative;
}

.sarah-inner-page :is(
  h1, .section-title, .agents-head h1, .agents-head h2, .prospect-name-lg,
  .pw-title, .req-title, .dl-title, .profile-card h1, .up-header h1,
  .sr-title, .sn-title, .sh-title, .snoop-title, .snoopq-title, .oc-title
) {
  color: var(--sn-white) !important;
  text-shadow: 0 0 18px rgba(66,159,255,.22) !important;
}

.sarah-inner-page :is(
  .sub, .subtitle, .pw-subtitle, .req-subtitle, .dl-subtitle, .prospect-meta,
  .sr-sub, .sn-sub, .sh-sub, .snoop-subtitle, .snoopq-subtitle, .oc-intro,
  .aw-lede, .lc-intro p, .li-intro p
) {
  color: var(--sn-muted) !important;
}

.sarah-inner-page :is(
  .section-title, .activity-section-title, .admin-section-title,
  .report-section-title, .settings-section-title, .spec-section-title,
  .detail-section-title, .pop-section-title, .li-section-h3
) {
  color: #eaf7ff !important;
  font-family: var(--sn-mono) !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

.sarah-inner-page :is(
  .section-title, .activity-section-title, .admin-section-title,
  .report-section-title, .settings-section-title, .spec-section-title,
  .detail-section-title, .pop-section-title, .li-section-h3
)::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--sn-cyan), var(--sn-blue), transparent);
  box-shadow: 0 0 10px rgba(24,232,255,.32);
}

/* Universal premium panel material. */
.sarah-inner-page :is(
  .card, .activity-card, .admin-card, .report-card, .settings-card,
  .pop-card, .campaign-perf-card, .prospect-card, .sarah-read,
  .eval-hero-card, .inbox-card, .aw-card, .li-card, .lc-card,
  .snoop-card, .snoopq-card, .spec-card, .detail-section, .profile-card,
  .pw-card, .req-card, .dl-card, .flags-table, .reps-table, .act-filters,
  .act-totals-card, .oracle-card, .sr-hero, .sn-kpi, .sh-control,
  .cy-chat, .campaign-content, .editor-fields, .inbox-summary,
  .prospect-header, .owner-filter-bar, .filter-chips, .results-toolbar,
  .agents-summary, .arch-pills, .atlas-content, .matrix-root
) {
  border: 1px solid var(--sn-line) !important;
  border-radius: var(--sn-radius-lg) !important;
  color: var(--sn-text) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(36,130,255,.07), transparent 38%),
    linear-gradient(160deg, rgba(8,22,41,.88), rgba(2,8,17,.94)) !important;
  box-shadow: var(--sn-shadow-soft) !important;
}

.sarah-inner-page :is(
  .card, .activity-card, .admin-card, .report-card, .settings-card,
  .pop-card, .campaign-perf-card, .eval-hero-card, .aw-card, .li-card,
  .snoop-card, .snoopq-card, .spec-card, .sn-kpi, .act-totals-card
):hover {
  border-color: rgba(63,165,255,.48) !important;
  box-shadow: 0 17px 42px rgba(0,0,0,.45), 0 0 19px rgba(36,130,255,.10), inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.sarah-inner-page :is(.fade-section, .admin-section, .activity-section, .report-section, .settings-section) {
  border-color: rgba(64,137,225,.13) !important;
}

.sarah-inner-page hr,
.sarah-inner-page :is(.profile-divider, .nav-drawer-divider) {
  border-color: rgba(65,139,226,.17) !important;
}

/* Cards with semantic tints keep meaning but lose the cheap wash. */
.sarah-inner-page .pop-tint-accent,
.sarah-inner-page .pop-tint-seq {
  border-color: rgba(55,148,255,.40) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(36,130,255,.12), transparent 42%),
    linear-gradient(155deg, rgba(8,24,47,.92), rgba(2,8,17,.95)) !important;
}
.sarah-inner-page .pop-tint-teal {
  border-color: rgba(24,232,255,.34) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(24,232,255,.09), transparent 42%),
    linear-gradient(155deg, rgba(6,27,44,.92), rgba(2,8,17,.95)) !important;
}
.sarah-inner-page .pop-tint-warm {
  border-color: rgba(255,196,77,.33) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,184,52,.075), transparent 42%),
    linear-gradient(155deg, rgba(28,22,11,.88), rgba(3,8,16,.95)) !important;
}
.sarah-inner-page .pop-tint-hot {
  border-color: rgba(255,88,116,.36) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,88,116,.08), transparent 42%),
    linear-gradient(155deg, rgba(31,12,22,.88), rgba(3,8,16,.95)) !important;
}

/* ======================================================================
   BUTTONS / INPUTS / INTERACTION
   ====================================================================== */

.sarah-inner-page :is(
  button, .btn, .btn-new, .btn-save, .btn-delete, .admin-btn, .ibtn,
  .aw-review, .ynk-btn, .lc-btn, .p-btn, .req-btn, .pw-btn, .dl-btn,
  .cy-send, .snoop-queue-link, .view-as-exit, .fbtn
) {
  border-radius: 8px !important;
  font-family: var(--sn-sans) !important;
  transition: color .17s ease, border-color .17s ease, background .17s ease, box-shadow .17s ease, transform .17s ease !important;
}

.sarah-inner-page :is(
  .btn, .btn-new, .btn-save, .admin-btn, .ibtn, .aw-review, .ynk-btn,
  .lc-btn-primary, .p-btn:not(.p-btn-subtle), .req-btn, .pw-btn, .dl-btn,
  .cy-send, .snoop-queue-link
) {
  color: #f6fcff !important;
  border: 1px solid rgba(63,174,255,.62) !important;
  background: linear-gradient(145deg, rgba(35,126,240,.82), rgba(14,63,159,.88)) !important;
  box-shadow: 0 0 16px rgba(36,130,255,.18), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.sarah-inner-page :is(
  .btn, .btn-new, .btn-save, .admin-btn, .ibtn, .aw-review, .ynk-btn,
  .lc-btn-primary, .p-btn:not(.p-btn-subtle), .req-btn, .pw-btn, .dl-btn,
  .cy-send, .snoop-queue-link
):hover {
  border-color: rgba(24,232,255,.84) !important;
  background: linear-gradient(145deg, rgba(38,151,255,.92), rgba(13,79,189,.96)) !important;
  box-shadow: 0 0 9px rgba(24,232,255,.36), 0 0 26px rgba(36,130,255,.28), inset 0 1px 0 rgba(255,255,255,.16) !important;
  transform: translateY(-1px);
}

.sarah-inner-page :is(.btn-delete, .fbtn-danger, .ibtn-reject) {
  color: #ffdce2 !important;
  border-color: rgba(255,88,116,.45) !important;
  background: rgba(101,18,39,.40) !important;
}

.sarah-inner-page :is(.p-btn-subtle, .lc-btn:not(.lc-btn-primary), .ibtn:not(.ibtn-approve), .fbtn) {
  color: #c8d9e8 !important;
  border: 1px solid rgba(67,145,235,.30) !important;
  background: rgba(5,19,36,.80) !important;
}

.sarah-inner-page :is(
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
  input[type="datetime-local"], select, textarea,
  .admin-input, .form-input, .editor-textarea, .search-input, .p-input,
  .req-input, .req-textarea, .pw-input, .lc-field input, .lc-field textarea
) {
  color: #edf8ff !important;
  border: 1px solid rgba(63,139,229,.35) !important;
  border-radius: 9px !important;
  background: rgba(1,7,15,.88) !important;
  box-shadow: inset 0 0 18px rgba(36,130,255,.035) !important;
  caret-color: var(--sn-cyan) !important;
}

.sarah-inner-page :is(
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
  input[type="datetime-local"], select, textarea,
  .admin-input, .form-input, .editor-textarea, .search-input, .p-input,
  .req-input, .req-textarea, .pw-input
):focus {
  outline: none !important;
  border-color: rgba(24,232,255,.74) !important;
  box-shadow: 0 0 0 2px rgba(24,232,255,.08), 0 0 19px rgba(36,130,255,.18), inset 0 0 20px rgba(24,232,255,.035) !important;
}

.sarah-inner-page input::placeholder,
.sarah-inner-page textarea::placeholder {
  color: #536d87 !important;
}

.sarah-inner-page label,
.sarah-inner-page :is(.form-label, .section-label, .lc-field label) {
  color: #a8bed3 !important;
}

.sarah-inner-page :is(.filter-chip, .owner-pill, .arch-pill, .inbox-pill, .badge, .pop-badge, .heat-pill) {
  border: 1px solid rgba(62,145,236,.31) !important;
  color: #c9e1f4 !important;
  background: rgba(6,23,43,.76) !important;
  box-shadow: inset 0 0 13px rgba(36,130,255,.025) !important;
}

.sarah-inner-page :is(.filter-chip, .owner-pill, .arch-pill):hover,
.sarah-inner-page :is(.filter-chip.active, .owner-pill.active, .arch-pill.active) {
  color: #fff !important;
  border-color: rgba(24,232,255,.61) !important;
  background: rgba(12,58,109,.64) !important;
  box-shadow: 0 0 13px rgba(24,232,255,.12), inset 0 0 16px rgba(24,232,255,.035) !important;
}

/* ======================================================================
   TABLES / DATA DENSITY
   ====================================================================== */

.sarah-inner-page table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  color: var(--sn-text-2) !important;
  background: transparent !important;
}

.sarah-inner-page thead th {
  position: sticky;
  top: 64px;
  z-index: 4;
  color: #91b5d6 !important;
  border-bottom: 1px solid rgba(64,146,239,.30) !important;
  background: rgba(3,12,24,.96) !important;
  font: 800 9px/1.2 var(--sn-mono) !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.sarah-inner-page tbody td {
  border-bottom: 1px solid rgba(67,130,210,.11) !important;
  color: #c3d3e2 !important;
}

.sarah-inner-page tbody tr {
  transition: background .15s ease, box-shadow .15s ease !important;
}

.sarah-inner-page tbody tr:hover {
  background: linear-gradient(90deg, rgba(17,71,134,.18), rgba(6,27,53,.08)) !important;
  box-shadow: inset 2px 0 0 rgba(24,232,255,.36) !important;
}

.sarah-inner-page :is(.flags-table, .reps-table) {
  overflow: hidden;
}

/* ======================================================================
   DETAILS / ACCORDIONS / ROWS / LISTS
   ====================================================================== */

.sarah-inner-page details {
  border-color: rgba(65,142,232,.25) !important;
  background: linear-gradient(160deg, rgba(7,20,38,.84), rgba(2,8,16,.93)) !important;
  box-shadow: var(--sn-shadow-soft) !important;
}

.sarah-inner-page details > summary {
  color: #e5f4ff !important;
}

.sarah-inner-page details[open] {
  border-color: rgba(63,162,255,.43) !important;
}

.sarah-inner-page :is(.campaign-row, .tool-row, .log-line, .activity-card, .inbox-row, .sr-row, .sn-row) {
  border-color: rgba(63,134,218,.14) !important;
}

.sarah-inner-page :is(.campaign-row, .tool-row, .inbox-row):hover {
  background: rgba(15,61,114,.12) !important;
}

/* ======================================================================
   ALERTS / TOASTS / STATUS
   ====================================================================== */

.sarah-os-shell .toast-stack {
  z-index: 2000 !important;
}

.sarah-os-shell .toast {
  border: 1px solid rgba(70,158,255,.40) !important;
  border-radius: 11px !important;
  color: #eef9ff !important;
  background: rgba(3,13,26,.96) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.60), 0 0 21px rgba(36,130,255,.12) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.sarah-os-shell .toast-success { border-color: rgba(32,233,160,.42) !important; }
.sarah-os-shell .toast-error { border-color: rgba(255,88,116,.48) !important; }
.sarah-os-shell .toast-warning { border-color: rgba(255,196,77,.48) !important; }

.sarah-inner-page :is(.audit-error, .act-error, .eval-error, .oc-err, .aw-err, .p-error, .pw-error, .req-msg) {
  border: 1px solid rgba(255,88,116,.35) !important;
  border-radius: 10px !important;
  color: #ffd4dd !important;
  background: rgba(71,13,30,.38) !important;
}

.sarah-inner-page :is(.p-success, .pw-success) {
  border: 1px solid rgba(32,233,160,.34) !important;
  color: #bfffe6 !important;
  background: rgba(8,65,46,.36) !important;
}

.sarah-inner-page :is(.live, .ok, .active, .approved) { --sn-state: var(--sn-green); }
.sarah-inner-page :is(.warm, .pending, .warn) { --sn-state: var(--sn-amber); }
.sarah-inner-page :is(.hot, .urgent, .bad, .revoked, .rejected) { --sn-state: var(--sn-red); }

/* ======================================================================
   PAGE-SPECIFIC REFINEMENT
   ====================================================================== */

/* Prospects / prospect */
.sarah-inner-page .prospects-header,
.sarah-inner-page .prospect-header {
  padding: 20px !important;
  margin-bottom: 16px !important;
}
.sarah-inner-page .prospects-counts {
  color: var(--sn-muted) !important;
}
.sarah-inner-page .prospect-name-lg {
  letter-spacing: -.02em !important;
}
.sarah-inner-page .sarah-read {
  border-color: rgba(24,232,255,.25) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.44), 0 0 24px rgba(24,232,255,.07) !important;
}
.sarah-inner-page .sarah-read-head {
  color: var(--sn-cyan-hi) !important;
  text-shadow: 0 0 10px rgba(24,232,255,.32);
}

/* Agents / specialist cards */
.sarah-inner-page :is(.pop-grid, .spec-grid) {
  gap: 14px !important;
}
.sarah-inner-page :is(.pop-card, .spec-card) {
  overflow: hidden;
}
.sarah-inner-page :is(.pop-card-name, .spec-name, .admin-card-name, .inbox-name) {
  color: #f0f9ff !important;
}
.sarah-inner-page :is(.pop-card-desc, .spec-desc, .admin-card-meta, .inbox-meta) {
  color: var(--sn-muted) !important;
}

/* Chat */
.sarah-inner-page.page-chat .chat-shell {
  max-width: 1180px !important;
  min-height: calc(100vh - 64px) !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.sarah-inner-page .chat-brand,
.sarah-inner-page .chat-inputbar {
  border-color: rgba(62,151,255,.29) !important;
  background: rgba(3,13,26,.90) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.sarah-inner-page .chat-history {
  background:
    radial-gradient(circle at 50% 0%, rgba(36,130,255,.07), transparent 42%),
    rgba(0,3,8,.68) !important;
}
.sarah-inner-page .chat-msg-sarah .chat-msg-body {
  border-color: rgba(24,232,255,.26) !important;
  background: linear-gradient(145deg, rgba(7,32,56,.91), rgba(3,14,28,.94)) !important;
}
.sarah-inner-page .chat-msg-user .chat-msg-body {
  border-color: rgba(55,132,233,.31) !important;
  background: linear-gradient(145deg, rgba(17,54,105,.74), rgba(6,22,43,.91)) !important;
}

/* Pricing / Cypher */
.sarah-inner-page .cy-chat {
  overflow: hidden;
}
.sarah-inner-page .cy-msg-cy .cy-bubble {
  border: 1px solid rgba(24,232,255,.24) !important;
  background: rgba(4,24,43,.88) !important;
}
.sarah-inner-page .cy-msg-user .cy-bubble {
  border: 1px solid rgba(65,145,236,.30) !important;
  background: rgba(12,44,85,.74) !important;
}

/* Matrix/mesh */
.sarah-inner-page .matrix-root {
  min-height: calc(100vh - 112px) !important;
  overflow: hidden;
}
.sarah-inner-page .matrix-side,
.sarah-inner-page .matrix-bar {
  border-color: rgba(64,144,234,.21) !important;
  background: rgba(2,10,20,.92) !important;
}
.sarah-inner-page .matrix-link.active {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(31,107,229,.50), rgba(7,35,73,.20)) !important;
  box-shadow: inset 0 0 18px rgba(36,130,255,.08) !important;
}

/* Login / password / request / download */
.sarah-inner-page:is(.page-login, .page-forgot_password, .page-reset_password, .page-change_pw, .page-request, .page-download) {
  min-height: 100vh;
}
.sarah-inner-page:is(.page-login, .page-forgot_password, .page-reset_password, .page-change_pw, .page-request, .page-download)::after {
  top: 20%;
  opacity: .35;
}
.sarah-inner-page :is(.login-wrap, .pw-wrap, .req-wrap, .dl-wrap) {
  width: min(100%, 520px) !important;
  margin-inline: auto !important;   /* center the 520px-capped wrap in the viewport (was left-pinned) */
  padding: 0 !important;
}
.sarah-inner-page :is(.login-card, .pw-card, .req-card, .dl-card) {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(65,160,255,.38) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(36,130,255,.16), transparent 38%),
    linear-gradient(160deg, rgba(7,21,41,.96), rgba(1,6,13,.98)) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.68), 0 0 40px rgba(36,130,255,.10) !important;
}
.sarah-inner-page :is(.login-card, .pw-card, .req-card, .dl-card)::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sn-cyan), var(--sn-blue), transparent);
  box-shadow: 0 0 15px rgba(24,232,255,.40);
}
.sarah-inner-page .login-card img {
  filter: drop-shadow(0 0 15px rgba(24,232,255,.35)) drop-shadow(0 0 34px rgba(36,130,255,.20)) !important;
}

/* Footer */
.sarah-os-shell .powered-by {
  position: relative;
  z-index: 2;
  opacity: .42 !important;
  padding: 18px 0 24px !important;
}
.sarah-os-shell .powered-by:hover { opacity: .88 !important; }
.sarah-os-shell .powered-by-label { color: #5e7891 !important; }
.sarah-os-shell .powered-by-wordmark {
  filter: saturate(1.12) drop-shadow(0 0 7px rgba(36,130,255,.22));
}


/* Dense operational components used by Inbox, Eval, Seer, Sentinel,
   Shakespeare, LinkedIn, Matrix, profile, and agent detail pages. */
.sarah-inner-page :is(
  .inbox-card-section, .inbox-card-quote, .eval-table, .up-section, .pg-section,
  .sr-m-block, .m-zone, .matrix-stat, .li-totals > div, .oc-totals > div,
  .sh-stat-row, .pipe-item, .m-pulse-item, .d-v4-mini-stat
) {
  border: 1px solid rgba(61,139,229,.20) !important;
  border-radius: 10px !important;
  background: rgba(3,13,26,.72) !important;
  box-shadow: inset 0 0 18px rgba(36,130,255,.025) !important;
}

.sarah-inner-page :is(
  .eval-hero-num, .sn-kpi-n, .sr-hero-stat-n, .matrix-stat-v, .act-totals-card .n,
  .li-totals .value, .oc-totals .oc-num, .pipe-value, .m-pulse-val
) {
  color: var(--sn-cyan-hi) !important;
  text-shadow: 0 0 10px rgba(24,232,255,.34), 0 0 22px rgba(36,130,255,.18) !important;
}

.sarah-inner-page :is(
  .eval-hero-label, .eval-hero-sub, .eval-hero-ts, .sn-kpi-l, .sn-kpi-sub,
  .sr-hero-stat-l, .matrix-stat-l, .matrix-stat-d, .act-totals-card .lbl,
  .li-totals .label, .oc-totals .oc-label, .pipe-label, .m-pulse-label
) {
  color: var(--sn-muted) !important;
}

.sarah-inner-page :is(.eval-section-title, .pg-section-label, .up-section-title, .sr-kicker, .sn-kicker, .sh-kicker) {
  color: #a8d5f7 !important;
  font-family: var(--sn-mono) !important;
  letter-spacing: .10em !important;
  text-transform: uppercase;
}

.sarah-inner-page :is(.inbox-card-label, .cy-from, .snoop-card-title, .snoopq-name, .sh-state-label) {
  color: #9fc7e8 !important;
}

.sarah-inner-page .inbox-card-quote {
  color: #d8e8f5 !important;
  border-left: 2px solid rgba(24,232,255,.48) !important;
  background: linear-gradient(90deg, rgba(12,58,105,.28), rgba(3,13,26,.50)) !important;
}

.sarah-inner-page .inbox-tag,
.sarah-inner-page .audit-type-pill,
.sarah-inner-page .up-badge,
.sarah-inner-page .spec-tier,
.sarah-inner-page .sb6-chip {
  border: 1px solid rgba(65,145,235,.28) !important;
  border-radius: 999px !important;
  color: #bed9ef !important;
  background: rgba(5,22,42,.76) !important;
}

.sarah-inner-page :is(.eval-table, .inbox-card, .up-section, .m-zone, .sr-m-block) {
  overflow: hidden;
}

.sarah-inner-page .up-section {
  padding: 17px !important;
  margin-bottom: 12px !important;
}

.sarah-inner-page .avatar-ring {
  border-color: rgba(24,232,255,.56) !important;
  background: radial-gradient(circle, rgba(18,83,158,.30), rgba(1,6,14,.96)) !important;
  box-shadow: 0 0 12px rgba(24,232,255,.27), 0 0 30px rgba(36,130,255,.20) !important;
}

.sarah-inner-page :is(.avatar-img, .chat-avatar) {
  filter: saturate(1.06) contrast(1.04);
}

.sarah-inner-page :is(.sr-hero, .sn-kpis, .eval-hero) {
  gap: 11px !important;
}

.sarah-inner-page .sr-hero,
.sarah-inner-page .sh-control {
  padding: 17px !important;
}

.sarah-inner-page :is(.sr-hero-stat, .sh-stat-row) {
  border-color: rgba(63,145,235,.20) !important;
  background: rgba(3,14,27,.70) !important;
}

.sarah-inner-page :is(.m-zone, .sr-m-block) {
  box-shadow: 0 12px 32px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.018) !important;
}

.sarah-inner-page .m-zone-head,
.sarah-inner-page .pop-card-head,
.sarah-inner-page .spec-card-head,
.sarah-inner-page .snoopq-head {
  border-bottom-color: rgba(64,140,229,.17) !important;
}

.sarah-inner-page .matrix-bar {
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
}

.sarah-inner-page .matrix-dot,
.sarah-inner-page .sdot,
.sarah-inner-page .dot {
  box-shadow: 0 0 8px currentColor;
}

.sarah-inner-page .sh-state-dot,
.sarah-inner-page .snoop-live {
  box-shadow: 0 0 12px currentColor;
}

.sarah-inner-page :is(.li-btn, .pg-btn, .snoopq-card button) {
  border-radius: 8px !important;
}

.sarah-inner-page .li-card,
.sarah-inner-page .snoopq-card,
.sarah-inner-page .inbox-card {
  transition: border-color .17s ease, box-shadow .17s ease, transform .17s ease !important;
}

.sarah-inner-page .li-card:hover,
.sarah-inner-page .snoopq-card:hover,
.sarah-inner-page .inbox-card:hover {
  transform: translateY(-1px);
  border-color: rgba(66,166,255,.46) !important;
  box-shadow: 0 17px 42px rgba(0,0,0,.44), 0 0 18px rgba(36,130,255,.09) !important;
}

.sarah-inner-page :is(.arch-empty, .inbox-empty, .eval-empty, .aw-empty, .ynk-empty, .li-empty, .snoopq-empty, .cy-empty) {
  border: 1px dashed rgba(65,145,235,.28) !important;
  border-radius: 13px !important;
  color: var(--sn-muted) !important;
  background: rgba(2,10,20,.58) !important;
}

.sarah-inner-page :is(.inbox-empty-icon, .aw-emoji, .snoop-icon, .snoopq-icon) {
  filter: drop-shadow(0 0 12px rgba(36,130,255,.28));
}

.sarah-inner-page :is(.sort-arrow, .search-icon, .search-clear, .prospect-linkedin) {
  color: #7db9ee !important;
}

.sarah-inner-page .search-wrap {
  position: relative;
}

.sarah-inner-page .search-count {
  color: var(--sn-muted) !important;
}

.sarah-inner-page .cap167-toggle,
.sarah-inner-page .cap167-batch-toolbar {
  border-color: rgba(64,145,235,.24) !important;
  background: rgba(3,14,28,.78) !important;
}

.sarah-inner-page .cap167-slider {
  border-color: rgba(64,145,235,.28) !important;
  background: rgba(1,8,17,.86) !important;
}

.sarah-inner-page input:checked + .cap167-slider {
  background: linear-gradient(90deg, rgba(25,107,221,.88), rgba(15,191,224,.82)) !important;
  box-shadow: 0 0 15px rgba(24,232,255,.22) !important;
}

.sarah-inner-page .view-as-banner {
  border-bottom: 1px solid rgba(255,196,77,.35) !important;
  color: #ffe5a6 !important;
  background: rgba(49,33,8,.92) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.32) !important;
}

/* ======================================================================
   MOBILE — ACTUAL MOBILE UX, NOT SHRUNK DESKTOP
   ====================================================================== */

@media (max-width: 900px) {
  body.sarah-os-shell {
    background:
      radial-gradient(circle at 50% -8%, rgba(36,130,255,.18), transparent 26rem),
      linear-gradient(180deg, #01040a 0%, #000 100%) !important;
  }

  body.sarah-os-shell::before {
    opacity: .20;
    background-size: 177px 191px, 239px 223px, 311px 287px;
  }

  /* Inner-page app header */
  .sarah-inner-page .topbar {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 11px !important;
    gap: 8px !important;
  }

  .sarah-inner-page .topbar-left { min-width: 0; gap: 8px !important; }
  .sarah-inner-page .topbar-right { gap: 6px !important; }
  .sarah-inner-page .topbar-home { min-width: 0; gap: 7px; }
  .sarah-inner-page .topbar-mark { width: 31px; height: 31px; }
  .sarah-inner-page .topbar-logo { width: 21px !important; height: 21px !important; }
  .sarah-inner-page .topbar-sarah-word { font-size: 14px; letter-spacing: .19em; padding-left: .19em; }
  .sarah-inner-page .topbar-title {
    max-width: 34vw;
    overflow: hidden;
    padding-left: 9px;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 8px !important;
    letter-spacing: .07em !important;
  }
  .sarah-inner-page .topbar-right > .btn-logout,
  .sarah-inner-page .topbar-right > form,
  .sarah-inner-page .topbar-right > form .btn-logout,
  .sarah-inner-page .topbar-right > a.btn-logout,
  .sarah-inner-page .topbar-right > .topbar-stat,
  .sarah-inner-page .topbar-right > .pulse-status,
  .sarah-inner-page .topbar-right > .seer-status {
    display: none !important;
  }
  .sarah-inner-page .nav-hamburger {
    min-width: 42px !important;
    width: 42px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }
  .sarah-inner-page .nav-hamburger-label { display: none !important; }

  /* Drawer becomes thumb-friendly bottom sheet. */
  .sarah-inner-page .nav-drawer {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: min(78dvh, 680px) !important;
    border: 1px solid rgba(72,164,255,.46) !important;
    border-bottom: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    transform: translateY(104%) !important;
    box-shadow: 0 -25px 80px rgba(0,0,0,.72), 0 -1px 28px rgba(36,130,255,.13) !important;
  }
  .sarah-inner-page .nav-drawer.is-open { transform: translateY(0) !important; }
  .sarah-inner-page .nav-drawer::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 42px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 99px;
    background: rgba(132,179,221,.38);
  }
  .sarah-inner-page .nav-drawer-header {
    min-height: 59px !important;
    padding: 7px 14px 0 !important;
  }
  .sarah-inner-page .nav-drawer-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 6px;
    padding: 9px 10px !important;
  }
  .sarah-inner-page .nav-drawer-link {
    min-height: 49px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-color: rgba(64,137,222,.15) !important;
    background: rgba(5,17,32,.60) !important;
  }
  .sarah-inner-page .nav-drawer-link:hover { transform: none; }
  .sarah-inner-page .nav-drawer-link.active::before { width: 5px; height: 5px; }

  .sarah-inner-page :is(
    .main, .agents-wrap, .container, .flags-wrap, .reps-wrap, .act-wrap,
    .ynk-wrap, .li-page, .lc-page, .matrix-page, .profile-wrap, .up-wrap,
    .sr-wrap, .sn-wrap, .sh-wrap, .snoop-page, .snoopq-page, .req-wrap,
    .pw-wrap, .dl-wrap, .chat-shell
  ) {
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .sarah-inner-page :is(.main, .agents-wrap, .container, .flags-wrap, .reps-wrap, .act-wrap, .ynk-wrap, .li-page, .lc-page, .matrix-page, .profile-wrap, .up-wrap, .sr-wrap, .sn-wrap, .sh-wrap, .snoop-page, .snoopq-page) {
    padding-top: 16px !important;
    padding-bottom: 78px !important;
  }

  .sarah-inner-page :is(h1, .section-title, .agents-head h1, .prospect-name-lg, .sr-title, .sn-title, .sh-title, .snoop-title, .snoopq-title) {
    overflow-wrap: anywhere;
  }

  .sarah-inner-page :is(.pop-grid, .spec-grid, .campaign-perf-grid, .eval-hero, .sn-kpis, .sr-hero-stats, .li-totals, .oc-totals) {
    grid-template-columns: 1fr !important;
  }

  .sarah-inner-page :is(.prospects-header, .prospect-header, .agents-head, .reps-head, .act-head, .up-header, .sr-head, .sn-head, .sh-head, .snoop-header, .snoopq-header) {
    padding: 15px !important;
    border-radius: 12px !important;
  }

  .sarah-inner-page :is(.owner-filter-bar, .filter-chips, .prospects-header, .up-header, .detail-head, .snoop-header, .snoopq-header) {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .sarah-inner-page :is(button, .btn, .btn-new, .btn-save, .admin-btn, .ibtn, .aw-review, .ynk-btn, .lc-btn, .p-btn, .req-btn, .pw-btn, .dl-btn) {
    min-height: 42px;
  }

  .sarah-inner-page :is(input, select, textarea) {
    font-size: 16px !important; /* prevents iOS zoom */
  }

  .sarah-inner-page table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border: 1px solid rgba(63,139,229,.20);
    border-radius: 11px;
    background: rgba(1,7,15,.66) !important;
  }
  .sarah-inner-page thead th { top: 58px; }
  .sarah-inner-page th,
  .sarah-inner-page td {
    min-width: 112px;
    padding: 11px 10px !important;
  }

  .sarah-inner-page .matrix-root {
    display: block !important;
    min-height: 0 !important;
  }
  .sarah-inner-page .matrix-side {
    width: 100% !important;
    display: flex !important;
    overflow-x: auto !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 11px !important;
  }
  .sarah-inner-page .matrix-link {
    flex: 0 0 auto;
    min-width: 118px;
  }

  .sarah-inner-page.page-chat .chat-shell {
    height: calc(100dvh - 58px) !important;
    min-height: 0 !important;
    padding: 8px !important;
  }
  .sarah-inner-page .chat-brand { border-radius: 12px 12px 0 0 !important; }
  .sarah-inner-page .chat-inputbar { border-radius: 0 0 12px 12px !important; }
  .sarah-inner-page .chat-msg-body { max-width: 88% !important; }

  /* Dashboard: compact top brand + fixed bottom nav, not a full desktop sidebar. */
  .sarah-dashboard-page {
    padding-bottom: 74px;
  }
  .sarah-dashboard-page .sb6-root {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 8px 18px !important;
  }
  .sarah-dashboard-page .sb6-side {
    position: sticky !important;
    z-index: 700 !important;
    top: 0 !important;
    width: calc(100% + 16px) !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 -8px 10px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(65,154,255,.31) !important;
    border-radius: 0 0 15px 15px !important;
    background: rgba(1,7,15,.94) !important;
    box-shadow: 0 12px 38px rgba(0,0,0,.46) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    overflow: visible !important;
  }
  .sarah-dashboard-page .sb6-side-brand {
    width: auto !important;
    height: 58px !important;
    min-height: 58px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .sarah-dashboard-page .sb6-side-brand::before,
  .sarah-dashboard-page .sb6-side-brand::after { display: none !important; }
  .sarah-dashboard-page .sb6-side-sigil {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
  }
  .sarah-dashboard-page .sb6-side-word {
    margin: 0 !important;
    font-size: 15px !important;
    letter-spacing: .20em !important;
  }
  .sarah-dashboard-page .sb6-side-live {
    margin: 0 0 0 3px !important;
    font-size: 7px !important;
  }
  .sarah-dashboard-page .sb6-side-status { display: none !important; }
  .sarah-dashboard-page .sb6-nav {
    position: fixed !important;
    z-index: 900 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 68px !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 5px max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left)) !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    border-top: 1px solid rgba(66,157,255,.34) !important;
    background: rgba(0,5,12,.96) !important;
    box-shadow: 0 -15px 46px rgba(0,0,0,.60), 0 -1px 18px rgba(36,130,255,.12) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
  .sarah-dashboard-page .sb6-nav-link {
    min-width: 69px !important;
    height: 55px !important;
    flex: 1 0 69px !important;
    scroll-snap-align: center;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 4px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }
  .sarah-dashboard-page .sb6-nav-link svg {
    width: 19px !important;
    height: 19px !important;
    margin: 0 !important;
  }
  .sarah-dashboard-page .sb6-nav-link.active {
    border-color: rgba(24,232,255,.34) !important;
    background: linear-gradient(180deg, rgba(24,114,217,.34), rgba(4,25,53,.54)) !important;
    box-shadow: inset 0 0 16px rgba(24,232,255,.04), 0 0 12px rgba(36,130,255,.11) !important;
  }
  .sarah-dashboard-page .sb6-nav-badge {
    position: absolute !important;
    top: 3px !important;
    right: 8px !important;
  }
  .sarah-dashboard-page .sb6-main {
    width: 100% !important;
    min-width: 0 !important;
  }
  .sarah-dashboard-page .sb6-hero {
    min-height: 0 !important;
    padding: 13px 10px 15px !important;
    border-radius: 14px !important;
  }
  .sarah-dashboard-page .sb6-hero-bar {
    gap: 8px !important;
    align-items: flex-start !important;
  }
  .sarah-dashboard-page .sb6-hero-date { display: none !important; }
  .sarah-dashboard-page .sb6-hero-word {
    margin-top: 4px !important;
    font-size: clamp(27px, 10vw, 38px) !important;
    letter-spacing: .20em !important;
    padding-left: .20em !important;
  }
  .sarah-dashboard-page .sb6-hero-core {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }
  .sarah-dashboard-page .sb6-orbit {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto 3px !important;
  }
  .sarah-dashboard-page .sb6-orbit img {
    width: 70px !important;
    height: 70px !important;
  }
  .sarah-dashboard-page .sb6-spoke-col {
    grid-row: 2 !important;
    min-width: 0 !important;
    gap: 7px !important;
  }
  .sarah-dashboard-page .sb6-spoke {
    min-height: 50px !important;
    padding: 7px 8px !important;
    gap: 7px !important;
  }
  .sarah-dashboard-page .sb6-spoke svg {
    width: 17px !important;
    height: 17px !important;
  }
  .sarah-dashboard-page .sb6-spoke-name { font-size: 8px !important; letter-spacing: .08em !important; }
  .sarah-dashboard-page .sb6-spoke-sub { font-size: 7px !important; }
  .sarah-dashboard-page .sb6-cmd-wrap { width: 100% !important; }
  .sarah-dashboard-page .sb6-cmd-input { width: 100% !important; min-width: 0 !important; }
  .sarah-dashboard-page .sb6-quick { gap: 5px !important; overflow-x: auto !important; justify-content: flex-start !important; padding-bottom: 2px; }
  .sarah-dashboard-page .sb6-quick-btn { flex: 0 0 auto !important; min-height: 36px !important; }
  .sarah-dashboard-page .sb6-stats {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  .sarah-dashboard-page .sb6-stat {
    min-height: 88px !important;
    padding: 11px !important;
  }
  .sarah-dashboard-page .sb6-rows { gap: 7px !important; }
  .sarah-dashboard-page .sb6-row > summary {
    min-height: 60px !important;
    padding: 9px 10px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  /* HOME MOBILE PILOT 7/20: the 4 SYSTEM HEALTH chips ran 388px inside a 378px
     panel under overflow-x:hidden, clipping "Bounces 0.0%" off the right edge
     with no scroll. flex-wrap alone does nothing here — the base rule is
     flex:0 0 auto (sarah-blue-v6.css:221), and a non-shrinking flex item keeps
     its max-content width, which for a wrapping row is still the single-line
     sum. All three declarations are load-bearing. */
  .sarah-dashboard-page .sb6-row-stats {
    margin-left: auto !important;
    flex-wrap: wrap !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  .sarah-dashboard-page .sb6-row-body { padding: 9px !important; }
  .sarah-dashboard-page .sb6-cols { grid-template-columns: 1fr !important; }
  .sarah-dashboard-page .sb6-item { min-height: 52px !important; }
  .sarah-dashboard-page .sb6-rail {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    margin-top: 8px !important;
    gap: 8px !important;
  }
  .sarah-dashboard-page .sb6-panel { border-radius: 13px !important; }
  .sarah-dashboard-page .powered-by { padding-bottom: 80px !important; }
}

@media (max-width: 560px) {
  .sarah-inner-page .topbar-title { display: none !important; }
  .sarah-inner-page .topbar-sarah-word { font-size: 13px; }
  .sarah-inner-page .nav-drawer-section { grid-template-columns: 1fr 1fr; }
  .sarah-inner-page .nav-drawer-link { font-size: 11px !important; }

  .sarah-inner-page :is(.main, .agents-wrap, .container, .flags-wrap, .reps-wrap, .act-wrap, .ynk-wrap, .li-page, .lc-page, .matrix-page, .profile-wrap, .up-wrap, .sr-wrap, .sn-wrap, .sh-wrap, .snoop-page, .snoopq-page) {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .sarah-inner-page :is(.card, .activity-card, .admin-card, .report-card, .settings-card, .pop-card, .campaign-perf-card, .prospect-header, .sarah-read, .eval-hero-card, .aw-card, .li-card, .lc-card, .snoop-card, .snoopq-card, .spec-card, .detail-section, .profile-card) {
    border-radius: 11px !important;
  }

  .sarah-inner-page :is(.prospects-header, .prospect-header, .agents-head, .up-header, .detail-head) {
    padding: 12px !important;
  }

  .sarah-inner-page .chat-msg-body { max-width: 94% !important; }

  .sarah-dashboard-page .sb6-root { padding-left: 5px !important; padding-right: 5px !important; }
  .sarah-dashboard-page .sb6-side { width: calc(100% + 10px) !important; margin-left: -5px !important; margin-right: -5px !important; }
  .sarah-dashboard-page .sb6-hero { padding-left: 7px !important; padding-right: 7px !important; }
  .sarah-dashboard-page .sb6-hero-core { gap: 6px !important; }
  .sarah-dashboard-page .sb6-spoke { padding: 6px !important; }
  .sarah-dashboard-page .sb6-spoke-sub { white-space: normal !important; }
  .sarah-dashboard-page .sb6-stat-num { font-size: 25px !important; }
}

@media (max-width: 390px) {
  .sarah-inner-page .topbar-sarah-word { letter-spacing: .14em; padding-left: .14em; }
  .sarah-inner-page .nav-drawer-section { grid-template-columns: 1fr; }
  .sarah-inner-page .nav-drawer-link { min-height: 44px !important; }
  .sarah-dashboard-page .sb6-side-live { display: none !important; }
  .sarah-dashboard-page .sb6-spoke-name { font-size: 7.5px !important; }
  .sarah-dashboard-page .sb6-spoke-sub { font-size: 6.5px !important; }
}

/* ======================================================================
   MOTION / ACCESSIBILITY
   ====================================================================== */

@keyframes snSarahWord {
  0%,100% {
    background-position: 0% 50%;
    filter: drop-shadow(0 0 5px rgba(50,133,255,.52)) drop-shadow(0 0 17px rgba(26,78,216,.24));
    opacity: .90;
  }
  50% {
    background-position: 100% 50%;
    filter: drop-shadow(0 0 7px rgba(219,252,255,.82)) drop-shadow(0 0 23px rgba(44,155,255,.52));
    opacity: 1;
  }
}

@keyframes snTopHalo {
  0%,100% { opacity: .42; transform: scale(.94); }
  50% { opacity: .92; transform: scale(1.07); }
}

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

@media (prefers-contrast: more) {
  .sarah-inner-page :is(.card, .activity-card, .admin-card, .report-card, .settings-card, .pop-card, .campaign-perf-card, .eval-hero-card, .aw-card, .li-card, .snoop-card, .snoopq-card, .spec-card) {
    border-color: rgba(114,184,255,.66) !important;
  }
  .sarah-inner-page { --sn-muted: #a8bdd0; }
}