/*
 * SimplyAnswered shared application theme.
 * Navy surfaces, violet actions and mint highlights match the native iOS shell.
 */
:root,
html[data-theme="dark"] {
  --brand-primary: #6956e8;
  --brand-darker: #5845d4;
  --brand-teal: #137262;
  --brand-rgb: 105, 86, 232;
  --bg: #f4f5f9;
  --bg-elevated: #ffffff;
  --bg-sunken: #f4f5f9;
  --bg-glass: var(--bg-elevated);
  --bg-glass-border: var(--line);
  --text: #151825;
  --text-secondary: #5845b9;
  --text-muted: #616b7e;
  --text-inverse: #ffffff;
  --text-gradient: none;
  --success: #6956e8;
  --success-bg: #f4f5f9;
  --success-border: #dfe2ea;
  --warning: #b85536;
  --warning-bg: #faebe5;
  --warning-border: #e7b9a8;
  --danger: #a83f38;
  --danger-bg: #fae9e7;
  --danger-border: #e4b7b1;
  --info: #246778;
  --info-bg: #e4eff1;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --shadow-xs: 0 1px 0 rgba(25,33,31,.06);
  --shadow-sm: 0 2px 0 rgba(25,33,31,.08);
  --shadow-md: 0 8px 24px rgba(25,33,31,.1), 0 2px 0 rgba(25,33,31,.08);
  --shadow-lg: 0 18px 46px rgba(25,33,31,.13), 0 3px 0 rgba(25,33,31,.08);
  --card: #ffffff;
  --raised: #ffffff;
  --hover: #f4f5f9;
  --line: #dfe2ea;
  --line-soft: #dfe2ea;
  --font: 'Manrope', system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  color-scheme: light;
}


html[data-theme="dark"] body,
body { color: var(--text); background: var(--bg); }
body::before { content: none; }
::selection { color: #fff; background: #6956e8; }
a { color: var(--brand-primary); }

/* Crisp application frame */
.topbar,
html[data-theme="dark"] .topbar {
  min-height: 66px;
  border-bottom: 1px solid #dfe2ea;
  background: rgba(255,253,248,.96);
  box-shadow: 0 2px 0 rgba(25,33,31,.035);
  backdrop-filter: blur(10px);
}
.topbar-inner { min-height: 66px; max-width: 1220px; gap: 28px; }
.brand { position: relative; gap: 14px; }
.brand:hover { transform: none; }
.brand-logo,
html[data-theme="dark"] .brand-logo { width: 154px; height: auto; max-height: 31px; border-radius: 0; filter: none; content: normal; }
.main-nav { justify-content: flex-start; gap: 2px; }
.main-nav a,
html[data-theme="dark"] .main-nav a {
  padding: 9px 12px;
  border-radius: 5px;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: .005em;
  border: 1px solid transparent;
  box-shadow: none;
  transition: color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease;
}
.main-nav a:hover { color: var(--text); background: #f4f5f9; transform: translateY(-1px); }
.main-nav a.active,
html[data-theme="dark"] .main-nav a.active { border-color: #151825; color: #fff; background: #151825; box-shadow: 0 2px 0 #151825; }
.main-nav a.active .bx { color: #7ee3cd; }
.credit-chip {
  padding: 7px 11px;
  border: 1px solid #dfe2ea;
  border-radius: 5px;
  color: var(--text);
  background: var(--hover);
  box-shadow: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.875rem;
}
.credit-chip:hover { transform: translateY(-1px); border-color: #616b7e; box-shadow: 0 3px 0 rgba(23,34,31,.06); }
.avatar { border-radius: 5px; color: #fff; background: #6956e8; box-shadow: none; }
.icon-btn { border-radius: 6px; }
.user-menu-popover { border-color: #dfe2ea; border-radius: 8px; background: var(--card); box-shadow: var(--shadow-md); }

.shell { max-width: 1220px; padding-top: 28px; position: relative; }
.page-head { position: relative; margin-bottom: 25px; }
.page-head h1 {
  color: var(--text);
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 43px);
  font-weight: 680;
  letter-spacing: -.052em;
  line-height: 1.02;
}
.page-head .sub { color: var(--text-muted); font-size: 0.875rem; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-bottom: 7px;
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.panel,
html[data-theme="dark"] .panel,
.work-panel {
  border: 1px solid #dfe2ea;
  border-radius: 9px;
  color: var(--text);
  background: var(--card);
  box-shadow: 0 2px 0 rgba(25,33,31,.07);
}
.panel:hover { box-shadow: 0 2px 0 rgba(23,34,31,.035); }
.panel-head { border-bottom-color: var(--line-soft); }
.panel-head h2 { font-size: 0.9375rem; font-weight: 650; }
.panel-head h2 .bx { color: #6956e8; }

.btn,
html[data-theme="dark"] .btn {
  min-height: 40px;
  border: 1px solid #5845d4;
  border-radius: 7px;
  color: #fff;
  background: #6956e8;
  box-shadow: 0 3px 0 #4938b9;
  font-weight: 650;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover { color: #fff; background: #5845d4; transform: translateY(-1px); box-shadow: 0 4px 0 #4938b9; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #4938b9; transition-duration: .06s; }
.btn.secondary,
html[data-theme="dark"] .btn.secondary { border-color: #616b7e; color: #151825; background: var(--card); box-shadow: 0 3px 0 var(--line); }
.btn.secondary:hover { border-color: #616b7e; color: var(--text); background: var(--hover); }
.btn.quiet { color: #5845b9; background: transparent; border-color: transparent; box-shadow: none; }

.control,
input.control,
textarea.control,
select.control,
.field-float input,
html[data-theme="dark"] .control,
html[data-theme="dark"] .field-float input,
html[data-theme="dark"] .page-call-handling .control,
html[data-theme="dark"] .page-setup .control {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(23,34,31,.025);
  color-scheme: light;
}
.control:focus,
.field-float input:focus {
  border-color: #6956e8;
  outline: 3px solid rgba(105,86,232,.13);
  background: var(--card);
  box-shadow: inset 3px 0 0 #6956e8;
}
.control::placeholder,
.field-float input::placeholder,
html[data-theme="dark"] .control::placeholder { color: #616b7e; -webkit-text-fill-color: #616b7e; opacity: 1; }
select.control option,
html[data-theme="dark"] select.control option { color: var(--text); background: var(--card); }
.mono, .num { font-family: 'IBM Plex Mono', monospace; }

/* The business line is the portal's visual signature. */
.line-desk {
  position: relative;
  min-height: 148px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  padding: 24px 26px;
  overflow: visible;
  border: 1px solid #151825;
  border-radius: 10px;
  color: var(--hover);
  background: #151825;
  box-shadow: 0 4px 0 #151825;
}
.line-desk-main { min-width: 0; display: flex; align-items: center; gap: 17px; position: relative; z-index: 1; }
.line-state-mark { position: relative; width: 54px; height: 54px; flex: none; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; color: var(--text); background: #7ee3cd; box-shadow: 0 3px 0 rgba(0,0,0,.22); }
.line-state-mark i { font-size: 25px; }
.tone-paused .line-state-mark { background: #ed704c; }
.line-kicker { display: block; margin-bottom: 4px; color: rgba(255,255,255,.52); font: 600 0.875rem/1.4 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.line-desk h2 { font-family: 'IBM Plex Mono', monospace; font-size: clamp(21px,3vw,31px); font-weight: 600; letter-spacing: -.03em; }
.line-desk p { margin-top: 7px; color: rgba(255,255,255,.65); font-size: 0.875rem; }
.line-desk p strong { color: #fff; font-weight: 600; }
.line-desk small { color: #7ee3cd; font-size: 0.875rem; }
.line-desk-actions { display: flex; align-items: center; gap: 7px; position: relative; z-index: 3; }
.line-desk .btn.secondary { border-color: rgba(255,255,255,.2); color: #fff; background: rgba(255,255,255,.07); box-shadow: none; }
.line-desk .icon-btn { border-color: rgba(255,255,255,.2); color: #fff; background: rgba(255,255,255,.07); }

.line-number-menu { position: relative; z-index: 9; width: fit-content; max-width: 100%; }
.line-number-menu > summary { display: flex; align-items: center; gap: 7px; width: fit-content; max-width: 100%; color: #fff; cursor: pointer; list-style: none; }
.line-number-menu > summary::-webkit-details-marker { display: none; }
.line-number-menu > summary h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-number-menu > summary > i { flex: none; color: rgba(255,255,255,.58); font-size: 20px; transition: transform .18s ease,color .18s ease; }
.line-number-menu > summary:hover > i { color: #fff; }
.line-number-menu[open] > summary > i { transform: rotate(180deg); }
.line-number-popover { position: absolute; top: calc(100% + 9px); left: 0; width: min(330px,calc(100vw - 32px)); padding: 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--card); box-shadow: var(--shadow-lg); animation: menu-in .16s ease both; }
.line-number-popover > span { display: block; padding: 4px 7px 7px; color: var(--text-muted); font: 600 0.875rem/1.4 'IBM Plex Mono',monospace; letter-spacing: .09em; text-transform: uppercase; }
.line-number-popover > a { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; color: var(--text); transition: background .15s ease; }
.line-number-popover > a:hover { background: #f4f5f9; }
.line-number-popover > a[aria-current="true"] { background: #f4f5f9; }
.line-number-popover > a > span { min-width: 0; }
.line-number-popover strong,.line-number-popover small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-number-popover strong { font: 600 0.875rem/1.35 'IBM Plex Mono',monospace; }
.line-number-popover small { margin-top: 2px; color: var(--text-muted); font: 500 0.875rem/1.35 var(--font); }
.line-number-popover > a > i { color: #6956e8; font-size: 1.125rem; }
.line-number-popover .line-number-manage { margin-top: 6px; border-top: 1px solid var(--line-soft); border-radius: 0 0 6px 6px; padding-top: 11px; }

.line-mode-menu { position: relative; z-index: 8; }
.line-mode-menu > summary { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; color: #fff; background: rgba(255,255,255,.07); font-size: 0.875rem; font-weight: 600; cursor: pointer; list-style: none; transition: background .15s ease,border-color .15s ease; }
.line-mode-menu > summary::-webkit-details-marker { display: none; }
.line-mode-menu > summary .bx-chevron-down { transition: transform .18s ease; }
.line-mode-menu[open] > summary { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.12); }
.line-mode-menu[open] > summary .bx-chevron-down { transform: rotate(180deg); }
.line-mode-popover { position: absolute; top: calc(100% + 8px); right: 0; width: min(340px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--card); box-shadow: var(--shadow-lg); animation: menu-in .16s ease both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-5px) scale(.985); } }
.line-mode-popover fieldset { border: 0; }
.line-mode-popover legend { margin: 2px 4px 8px; color: var(--text-muted); font: 600 0.875rem/1.4 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .09em; }
.line-mode-popover fieldset label { display: block; position: relative; cursor: pointer; }
.line-mode-popover fieldset input { position: absolute; opacity: 0; }
.line-mode-popover fieldset label > span { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; padding: 9px 10px; border: 1px solid transparent; border-radius: 6px; }
.line-mode-popover fieldset input:checked + span { border-color: #dfe2ea; background: #f4f5f9; }
.line-mode-popover fieldset i { grid-row: 1/3; align-self: center; color: #6956e8; font-size: 1.1875rem; }
.line-mode-popover fieldset strong,.line-mode-popover fieldset small { display: block; }
.line-mode-popover fieldset strong { font-size: 0.875rem; }
.line-mode-popover fieldset small { color: var(--text-muted); font-size: 0.875rem; }
.line-mode-popover fieldset label.unsafe { cursor: not-allowed; opacity: .48; }
.line-duration { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 6px; margin: 9px 0; font-size: 0.875rem; }
.line-duration .control { min-height: 36px; }
.line-mode-warning { display: flex; gap: 7px; margin: 8px 0; padding: 8px; border-radius: 5px; color: #8d402b; background: #faebe5; font-size: 0.875rem; line-height: 1.4; }

.summary-strip { display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 22px; border: 1px solid #dfe2ea; border-radius: 8px; background: var(--card); box-shadow: 0 2px 0 rgba(25,33,31,.06); }
.summary-strip a { min-width: 0; display: grid; gap: 4px; padding: 13px 15px 12px; border-right: 1px solid var(--line-soft); color: var(--text); transition: background .15s ease,transform .15s ease; }
.summary-strip a:last-child { border-right: 0; }
.summary-strip small { color: var(--text-muted); font: 500 0.875rem/1.3 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .055em; }
.summary-strip strong { font-family: var(--font-display); font-size: 21px; font-weight: 690; line-height: 1.1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.summary-strip a:hover { background: #f4f5f9; transform: translateY(-1px); }
.counter-arrived { animation: digit-seat .36s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes digit-seat { from { opacity: .35; transform: translateY(5px) scale(.97); } }
.setup-ribbon { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; margin-bottom: 22px; padding: 13px 14px; border-left: 3px solid #ed704c; border-radius: 0 6px 6px 0; background: #ffffff; }
.setup-count { font: 600 0.875rem/1 'IBM Plex Mono', monospace; }
.setup-progress { display: block; height: 3px; margin-top: 8px; border-radius: 99px; background: rgba(25,33,31,.08); overflow: hidden; }
.setup-progress > span { display: block; height: 100%; border-radius: 99px; background: #ed704c; transition: width .3s var(--ease-out); }
.setup-ribbon strong { font-size: 0.875rem; }
.setup-ribbon p { color: var(--text-muted); font-size: 0.875rem; }

.work-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(330px,.92fr); gap: 18px; }
.work-panel { overflow: hidden; }
.work-panel-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 17px; border-bottom: 1px solid var(--line-soft); }
.work-panel-head .eyebrow { margin: 0 0 2px; }
.work-panel-head h2 { font-size: 1.125rem; }
.work-panel-head > a { font-size: 0.875rem; font-weight: 600; }
.job-stack,.customer-list { padding: 6px; }
.job-card { position: relative; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; min-height: 58px; padding: 8px 10px; border-radius: 5px; color: var(--text); }
.job-card::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; background: #dfe2ea; }
.job-card.priority-high::before,.job-card.priority-urgent::before { background: #ed704c; }
.job-card:hover { background: #f4f5f9; }
.job-tick { color: #616b7e; }
.job-copy strong,.job-copy small { display: block; }
.job-copy strong { font-size: 0.875rem; }
.job-copy small,.job-card time { color: #616b7e; font-size: 0.875rem; }
.customer-list > a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; min-height: 55px; padding: 7px 10px; border-radius: 5px; color: var(--text); }
.customer-list > a:hover { background: #f4f5f9; }
.customer-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #6956e8; font: 600 0.875rem/1 'IBM Plex Mono', monospace; text-transform: uppercase; }
.customer-avatar.large { width: 44px; height: 44px; font-size: 0.9375rem; }
.customer-list strong,.customer-list small { display: block; }
.customer-list strong { font-size: 0.875rem; }
.customer-list small { color: #616b7e; font-size: 0.875rem; }
.customer-list em { padding: 3px 6px; border-radius: 3px; color: #91462f; background: #fae8df; font: 600 0.875rem/1.4 'IBM Plex Mono', monospace; font-style: normal; text-transform: uppercase; }
.quiet-empty { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; color: var(--text-muted); text-align: center; }
.quiet-empty > span { width: 37px; height: 37px; display: grid; place-items: center; margin-bottom: 9px; border: 1px solid #dfe2ea; border-radius: 50%; color: #6956e8; }
.quiet-empty strong { color: var(--text); font-size: 0.875rem; }
.quiet-empty p { font-size: 0.875rem; }
.quiet-empty.compact { min-height: 130px; }
.quiet-empty.large { min-height: 420px; }

/* Workbench: list, jobs and one continuous customer story. */
.view-switcher { display: flex; gap: 3px; padding: 3px; border: 1px solid #dfe2ea; border-radius: 7px; background: #f4f5f9; }
.view-switcher a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 4px; color: #616b7e; font-size: 0.875rem; font-weight: 600; }
.view-switcher a.active { color: #fff; background: #151825; }
.workbench { min-height: 620px; display: grid; grid-template-columns: 285px minmax(0,1fr); overflow: hidden; border: 1px solid #dfe2ea; border-radius: 8px; background: var(--card); box-shadow: 0 2px 0 rgba(23,34,31,.035); }
.customer-rail { min-width: 0; border-right: 1px solid var(--line); background: #f4f5f9; }
.rail-head { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid var(--line); color: #616b7e; font: 600 0.875rem/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.rail-head small { padding: 3px 6px; border-radius: 3px; color: #fff; background: #6956e8; }
.customer-rail-list { padding: 5px; }
.customer-rail-list a { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr) 8px; align-items: center; gap: 9px; min-height: 57px; padding: 7px 8px; border-radius: 5px; color: var(--text); }
.customer-rail-list a:hover { background: rgba(255,255,255,.55); }
.customer-rail-list a.active { background: var(--card); box-shadow: 0 1px 0 rgba(23,34,31,.04); }
.customer-rail-list strong,.customer-rail-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-rail-list strong { font-size: 0.875rem; }
.customer-rail-list small { color: #616b7e; font-size: 0.875rem; }
.attention-dot { width: 7px; height: 7px; border-radius: 50%; background: #ed704c; box-shadow: 0 0 0 3px rgba(237,112,76,.13); }
.customer-workspace { min-width: 0; background: var(--card); }
.customer-workspace-head { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.customer-title { min-width: 0; display: flex; align-items: center; gap: 11px; }
.customer-title h2 { font-size: 1.125rem; line-height: 1.25; }
.customer-title a { font: 500 0.875rem/1.5 'IBM Plex Mono', monospace; }
.customer-actions { display: flex; gap: 7px; }
.job-composer { padding: 16px 18px; border-bottom: 1px solid #dfe2ea; background: #f4f5f9; animation: composer-in .2s ease both; }
@keyframes composer-in { from { opacity: 0; transform: translateY(-7px); } }
.job-composer .field { margin-bottom: 10px; }
.job-composer label { font-size: 0.875rem; }
.composer-actions { display: flex; justify-content: flex-end; gap: 6px; }
.section-label { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: var(--text-muted); font: 600 0.875rem/1.4 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.section-label span { padding: 2px 5px; border-radius: 3px; color: #fff; background: #6956e8; }
.customer-jobs { padding: 16px 18px 9px; border-bottom: 1px solid var(--line-soft); }
.customer-job { position: relative; display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: start; gap: 9px; margin-bottom: 6px; padding: 10px 11px; border: 1px solid var(--line); border-left: 3px solid #616b7e; border-radius: 5px; background: var(--card); }
.customer-job.priority-high,.customer-job.priority-urgent { border-left-color: #ed704c; }
.customer-job form button { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #6956e8; background: var(--card); cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.customer-job form button:hover { color: #fff; background: #6956e8; transform: scale(1.05); }
.customer-job strong { font-size: 0.875rem; }
.customer-job p { color: var(--text-muted); font-size: 0.875rem; }
.customer-job time { color: var(--text-muted); font-size: 0.875rem; white-space: nowrap; }
.customer-timeline { padding: 16px 18px 24px; }
.timeline-item { position: relative; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 10px; min-height: 63px; padding: 9px 0; }
.timeline-item::before { content: ''; position: absolute; left: 15px; top: 42px; bottom: -10px; width: 1px; background: var(--line); }
.timeline-item:last-child::before { display: none; }
.timeline-item > span { width: 32px; height: 32px; display: grid; place-items: center; z-index: 1; border: 1px solid #dfe2ea; border-radius: 50%; color: #6956e8; background: var(--card); }
.timeline-item.type-sms > span { color: #9a482f; background: #fff3ed; }
.timeline-item.type-job > span { color: #5845b9; background: #f4f5f9; }
.timeline-item strong { font-size: 0.875rem; }
.timeline-item p { color: var(--text-muted); font-size: 0.875rem; white-space: pre-wrap; }
.timeline-item time { color: var(--text-muted); font: 500 0.875rem/1.5 'IBM Plex Mono', monospace; white-space: nowrap; }

.missed-call-plan .rescue-switch-row { margin-top: 7px; border-top: 1px solid var(--line-soft); }
.rescue-note { display: flex; gap: 8px; padding: 10px; border-left: 2px solid #6956e8; color: #616b7e; background: #f4f5f9; font-size: 0.875rem; }
.compact-field { max-width: 340px; }
.field code,.help code { padding: 1px 4px; border-radius: 3px; color: #7f402e; background: #faebe5; font: 500 0.875rem 'IBM Plex Mono', monospace; }

/* Minimal sign-in: one product mark, one task. */
.public-page,
.page-signin { color: var(--text); background: var(--bg); }
.auth-page .auth-column::before,
.auth-page .auth-column::after { display: none; }
.public-page .auth-wrap,
.page-signin .auth-wrap { width: 100%; max-width: none; min-height: 100dvh; display: grid; place-items: center; padding: 32px 20px; }
.page-signin .signin-shell { width: min(420px,100%); min-height: 0; display: block; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.public-page .auth-column,
.page-signin .auth-column { width: 100%; height: auto; }
.public-page .auth-card,
.page-signin .auth-card { width: 100%; max-width: 420px; height: auto; max-height: none; overflow: visible; padding: 26px 28px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--card); box-shadow: 0 3px 0 rgba(23,34,31,.05); animation: none; transform: none; }
.legal-page { width: 100%; max-width: 720px; margin: 0 auto; }
.legal-page-narrow { max-width: 640px; }
.legal-page .portal-table th,.legal-page .portal-table td { vertical-align: top; overflow-wrap: anywhere; }
.legal-table-wrap { max-width: 100%; border-radius: var(--radius-md); }
.public-page .auth-brand { display: block; margin: 0 0 24px; text-align: left; }
.public-page .auth-brand img { display: block; width: 170px !important; height: auto !important; max-height: 32px; object-fit: contain; object-position: left center; }
.page-signin .signin-heading { margin-bottom: 18px; }
.page-signin .signin-heading > span { display: none; }
.page-signin .signin-heading h1 { color: var(--text); font-size: 29px; font-weight: 600; letter-spacing: -.04em; }
.page-signin .signin-heading p { margin-top: 4px; color: var(--text-muted); font-size: 0.875rem; }
.public-page .field-float input { min-height: 48px; border-color: var(--line); background: var(--card); }
.public-page .field-float label { color: #616b7e; }
.page-signup { padding-bottom: 0; overflow-x: hidden; }
.page-signup .auth-wrap { display: block; min-height: 100dvh; padding: 28px 18px 34px; }
.page-signup .auth-column { width: min(100%,460px); margin: 0 auto; }
.page-signup .auth-card { max-width: 460px; padding: 25px 28px; }
.page-signup .signup-heading { margin-bottom: 20px; }
.page-signup .signup-heading h1 { color: var(--text); font-family: var(--font-display); font-size: 28px; font-weight: 750; letter-spacing: -.04em; }
.page-signup .signup-heading p { max-width: 38ch; margin-top: 5px; color: var(--text-muted); font-size: 0.875rem; line-height: 1.5; }
.page-signup .social-row { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 8px; margin-bottom: 11px; }
.page-signup .social-row .btn { min-width: 0; min-height: 42px; padding: 8px 10px; font-size: 0.875rem; }
.page-signup .divider { margin: 12px 0; font-size: 0.875rem; }
.page-signup .field { min-width: 0; margin-bottom: 14px; }
.page-signup .field-float { min-width: 0; margin-bottom: 12px; }
.page-signup .field-float input:focus { border-color: #6956e8; background: var(--card); box-shadow: inset 3px 0 0 #6956e8,0 0 0 3px rgba(105,86,232,.11); }
.page-signup .field .control { min-width: 0; border-color: var(--line); border-radius: 7px; color: var(--text); background: var(--card); }
.page-signup .field .help { font-size: 0.875rem; line-height: 1.45; }
.page-signup .type-toggle { grid-template-columns: repeat(2,minmax(0,1fr)); }
.page-signup .type-toggle label { min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 7px; font-size: 0.875rem; }
.page-signup .type-toggle label:has(input:checked) { border-color: #6956e8; background: #f4f5f9; box-shadow: 0 0 0 2px rgba(105,86,232,.09); }
.page-signup .business-name-field { display: none; }
.page-signup .account-type-fields.business-selected .business-name-field,
.page-signup .account-type-fields:has(input[name="account_type"][value="business"]:checked) .business-name-field {
  display: block;
  animation: signup-field-in 180ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes signup-field-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.page-signup .checkbox-row { min-width: 0; line-height: 1.45; }
.page-signup .checkbox-row span { min-width: 0; overflow-wrap: anywhere; }
.page-signup .auth-card .btn.pill { min-height: 46px; border: 1px solid #5845d4; border-radius: 7px; background: #6956e8; box-shadow: 0 3px 0 #4938b9; }
.page-signup .auth-card .btn.pill:hover { background: #5845d4; box-shadow: 0 4px 0 #4938b9; }
.verification-state { text-align: center; }
.verification-state .verification-mark { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 22px; border: 1px solid #95c9bd; border-radius: 50%; color: #6956e8; background: #f4f5f9; }
.verification-state .verification-mark.warning { border-color: #e9e6ff; color: #8b5527; background: #f4f5f9; }
.verification-state .verification-mark .bx { font-size: 27px; }
.verification-state .eyebrow { justify-content: center; margin-bottom: 9px; }
.verification-state h1 { max-width: 320px; margin: 0 auto 10px; color: var(--text); font-size: 25px; line-height: 1.15; letter-spacing: -.035em; }
.verification-state p { max-width: 330px; margin: 0 auto 25px; color: #616b7e; font-size: 0.875rem; line-height: 1.6; }
.verification-state .btn { width: 100%; min-height: 48px; justify-content: center; touch-action: manipulation; }
.page-accept-invite .auth-wrap { place-items: start center; padding-top: max(48px,env(safe-area-inset-top)); }
.page-accept-invite .auth-card { max-width: 440px; padding: 30px; }
.page-accept-invite .auth-brand { margin-bottom: 30px; }
.invite-join .auth-task-heading { margin-bottom: 19px; }
.invite-recipient {
  min-width: 0; display: grid; grid-template-columns: 28px minmax(0,1fr); column-gap: 9px;
  margin: 0 0 20px; padding: 11px 12px; border: 1px solid #dfe2ea; border-radius: 8px; background: #f4f5f9;
}
.invite-recipient > .bx { grid-row: 1 / 3; align-self: center; color: #6956e8; font-size: 1.125rem; }
.invite-recipient span { color: #616b7e; font-size: 0.875rem; }
.invite-recipient strong { min-width: 0; overflow-wrap: anywhere; color: #151825; font-size: 0.875rem; }
.invite-join .field-float { margin-bottom: 14px; }
.invite-password-help { margin: -6px 0 17px; color: #616b7e; font-size: 0.875rem; }
.invite-join .btn.pill { min-height: 50px; border: 1px solid #5845d4; border-radius: 9px; background: #6956e8; box-shadow: 0 3px 0 #4938b9; touch-action: manipulation; }
.invite-join .btn.pill:hover { background: #5845d4; box-shadow: 0 4px 0 #4938b9; }
.invite-help { margin: 18px 0 0; text-align: center; color: #616b7e; font-size: 0.875rem; }
.invite-help a { color: #6956e8; font-weight: 700; }
.demo-entry { text-align: left; }
.demo-entry span { min-width: 0; flex: 1; }
.demo-entry strong,.demo-entry small { display: block; }
.demo-entry small { color: #616b7e; font-size: 0.875rem; }
.demo-ribbon { border: 1px solid #dfe2ea; border-left: 3px solid #ed704c; border-radius: 0 5px 5px 0; color: #5845b9; background: #ffffff; }

/* Reusable switchboard surfaces: one physical grammar across every tool. */
.panel-head { min-height: 57px; padding: 13px 17px; background: var(--raised); }
.panel-head h2 { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 680; letter-spacing: -.018em; }
.panel-head h2 .bx { width: 27px; height: 27px; display: inline-grid; place-items: center; border: 1px solid var(--line-soft); border-radius: 7px; background: #f4f5f9; box-shadow: 0 2px 0 var(--line-soft); }
.panel-head .hint { font-family: 'IBM Plex Mono', monospace; font-size: 0.875rem; letter-spacing: .025em; }
.panel-body { padding: 20px; }
.badge { border-radius: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 0.875rem; font-weight: 600; letter-spacing: .025em; }
.badge.brand { border-color: #dfe2ea; color: #5845b9; background: #f4f5f9; }
.switch-row { border-radius: 7px; }
.switch-row:hover { background: #f4f5f9; transform: none; }
.switch .track { border: 1px solid #616b7e; background: #dfe2ea; box-shadow: inset 0 1px 2px rgba(25,33,31,.08); }
.switch input:checked + .track { border-color: #5845d4; background: #6956e8; box-shadow: 0 0 0 3px rgba(105,86,232,.1); }
.portal-table th { padding: 10px 13px; color: #616b7e; background: var(--line-soft); font-family: 'IBM Plex Mono', monospace; font-size: 0.875rem; font-weight: 600; letter-spacing: .055em; }
.portal-table td { padding: 12px 13px; border-color: var(--line-soft); font-size: 0.875rem; }
.portal-table tbody tr:hover { background: #ffffff; transform: none; }
.tabs,.view-switcher { border-color: #616b7e; border-radius: 8px; background: #f4f5f9; box-shadow: inset 0 1px 1px rgba(25,33,31,.05); }
.tabs a,.view-switcher a { border-radius: 5px; }
.tabs a.active,.view-switcher a.active { color: #fff; background: #151825; box-shadow: 0 2px 0 #151825; }
.kpi-label { color: #616b7e; font-family: 'IBM Plex Mono', monospace; font-size: 0.875rem; font-weight: 600; letter-spacing: .065em; }
.kpi-value { color: var(--text); font-family: var(--font-display); font-weight: 700; letter-spacing: -.055em; }

.package-card,.shop-package,.shop-package-panel,.call-mode-option,.use-card,
.endpoint-card,.api-guide-card,.payg-card,.greeting-upload-card {
  border-color: #dfe2ea;
  border-radius: 9px;
  background: var(--card);
  box-shadow: 0 2px 0 rgba(25,33,31,.07);
}
.package-card:hover,.shop-package:hover,.call-mode-option:hover,.use-card:hover,
.endpoint-card:hover,.api-guide-card:hover,.payg-card:hover {
  border-color: #616b7e;
  transform: translateY(-1px);
  box-shadow: 0 3px 0 rgba(25,33,31,.1);
}
.package-card.featured,.shop-package.featured,.call-mode-option:has(input:checked),.use-card:has(input:checked) {
  border-color: #6956e8;
  background: #f4f5f9;
  box-shadow: 0 3px 0 #dfe2ea;
}
.package-mark,.package-choice-icon,.call-mode-icon,.api-guide-icon,.greeting-list-icon {
  border: 1px solid #dfe2ea;
  border-radius: 8px;
  color: #6956e8;
  background: #f4f5f9;
  box-shadow: 0 2px 0 #dfe2ea;
}
.ivr-keypad-key { border-color: #616b7e; border-radius: 8px; color: var(--text); background: var(--card); box-shadow: 0 3px 0 #dfe2ea; }
.ivr-keypad-key:hover { transform: translateY(-1px); border-color: #6956e8; box-shadow: 0 4px 0 #dfe2ea; }
.ivr-keypad-key:active { transform: translateY(2px); box-shadow: 0 1px 0 #dfe2ea; }
.ivr-keypad-key.active { border-color: #6956e8; background: #f4f5f9; box-shadow: 0 3px 0 #dfe2ea; }

.insights-chart-track { border: 1px solid #dfe2ea; border-radius: 6px 6px 3px 3px; background: var(--line-soft); }
.insights-chart-track i { background: #dfe2ea; }
.insights-chart-track b { background: #6956e8; box-shadow: none; }
.hours-chart-row i { border: 1px solid #dfe2ea; background: var(--line-soft); }
.hours-chart-row b { background: #6956e8; }

/* The auth surface is intentionally sparse. */
.public-page .auth-card,.page-signin .auth-card { position: relative; overflow: hidden; border-color: #616b7e; border-radius: 10px; box-shadow: 0 4px 0 #dfe2ea, 0 18px 44px rgba(25,33,31,.08); }
.public-page .auth-card::before,
.public-page .auth-card::after { content: none; }
.public-page .auth-brand { position: relative; }
.page-signin .signin-heading h1,.verification-state h1 { font-family: var(--font-display); font-weight: 680; }
.public-page .field-float input { border-radius: 7px; box-shadow: inset 3px 0 0 transparent; }
.social.btn { border-color: #616b7e; color: var(--text); background: var(--card); box-shadow: 0 3px 0 var(--line); }
.social.btn:hover { color: var(--text); background: var(--hover); box-shadow: 0 4px 0 #dfe2ea; }
.page-signin .social-row { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 8px; margin-bottom: 10px; }
.page-signin .social-row .btn { min-height: 42px; padding: 8px 10px; font-size: 0.875rem; }
.page-signin .divider { margin: 12px 0; font-size: 0.875rem; }
.page-signin .field-float { gap: 6px; margin-bottom: 12px; }
.page-signin .field-float input:focus { border-color: #6956e8; background: var(--card); box-shadow: inset 3px 0 0 #6956e8,0 0 0 3px rgba(105,86,232,.11); }
.page-signin .auth-card .btn.pill { min-height: 46px; border: 1px solid #5845d4; border-radius: 7px; background: #6956e8; box-shadow: 0 3px 0 #4938b9; }
.page-signin .auth-card .btn.pill:hover { background: #5845d4; box-shadow: 0 4px 0 #4938b9; }
.page-signin .demo-divider { margin: 14px 0 10px; }
.page-signin .demo-entry { min-height: 54px; border-color: #616b7e; border-radius: 7px; background: var(--card); box-shadow: 0 3px 0 var(--line); }
.page-signin .demo-entry:hover { border-color: #616b7e; background: var(--hover); box-shadow: 0 4px 0 #dfe2ea; }
.page-signin .demo-entry > .bx:first-child { color: #6956e8; }
.page-signin .auth-card > p:last-child { margin-top: 16px !important; }
.demo-entry > .bx:first-child { border: 1px solid #dfe2ea; border-radius: 7px; background: #f4f5f9; box-shadow: 0 2px 0 #dfe2ea; }

.footer { color: var(--text-muted); }
.footer-owner { display: flex; align-items: center; gap: 8px; }
.footer-owner img { width: auto; height: 14px; opacity: .42; }
.footer-owner span { color: var(--text-muted); font: 600 0.875rem/1 'IBM Plex Mono', monospace; letter-spacing: .08em; }
.mobile-tabs { border-top-color: #616b7e; background: rgba(255,253,248,.98); box-shadow: 0 -3px 0 rgba(25,33,31,.04); }
.mobile-tabs a { position: relative; border-radius: 7px; }
.mobile-tabs a.active { color: #fff; background: #151825; box-shadow: 0 2px 0 #151825; }
.mobile-tabs a.active .bx { color: #7ee3cd; }
.status-dot.live { animation: none; }

@media (max-width: 900px) {
  .line-desk { grid-template-columns: minmax(0,1fr) auto; }
  .line-desk-actions { grid-column: 1/-1; justify-content: flex-end; }
  .work-grid { grid-template-columns: 1fr; }
  .workbench { grid-template-columns: 235px minmax(0,1fr); }
}

@media (max-width: 720px) {
  .shell { padding: 24px 14px 106px; }
  .app-page [data-reveal],
  .app-page [data-reveal="left"],
  .app-page [data-reveal="right"],
  .app-page [data-reveal="scale"] { transform: translateY(10px); }
  .app-page [data-reveal].revealed { opacity: 1; transform: none; }
  .page-head { align-items: flex-start; margin-bottom: 18px; }
  .page-head h1 { font-size: 31px; }
  .head-actions { width: 100%; }
  .home-heading .head-actions .btn { flex: 1; }
  .home-heading .sub,.work-heading .sub,.page-call-handling .page-head .sub { display: none; }
  .demo-ribbon { min-height: 46px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; }
  .demo-ribbon p { display: none; }
  .demo-ribbon form { margin-left: auto; }
  .demo-ribbon button { min-height: 30px; padding: 4px 8px; }
  .line-desk { min-height: 0; grid-template-columns: 1fr; align-items: start; padding: 22px 18px; overflow: visible; }
  .line-desk-main { align-items: flex-start; }
  .line-state-mark { width: 48px; height: 48px; }
  .line-desk p span { display: none; }
  .line-mode-menu { width: 100%; }
  .line-mode-menu > summary { justify-content: center; }
  .line-mode-popover { right: auto; left: 0; width: 100%; }
  .line-desk-actions { grid-column: auto; width: 100%; justify-content: stretch; }
  .line-desk-actions .btn { flex: 1; }
  .summary-strip { grid-template-columns: 1fr 1fr; }
  .summary-strip a:nth-child(2) { border-right: 0; }
  .summary-strip a:nth-child(-n+2) { border-bottom: 1px solid #dfe2ea; }
  .setup-ribbon { grid-template-columns: auto 1fr; }
  .setup-ribbon .btn { grid-column: 1/-1; }
  .workbench { display: block; overflow: visible; }
  .customer-rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .customer-rail-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .customer-rail-list a { min-width: 205px; scroll-snap-align: start; }
  .customer-workspace-head { align-items: flex-start; }
  .customer-actions .btn.secondary { display: none; }
  .timeline-item { grid-template-columns: 32px minmax(0,1fr); }
  .timeline-item time { grid-column: 2; }
  .customer-job { grid-template-columns: 28px minmax(0,1fr); }
  .customer-job time { grid-column: 2; }
  .view-switcher { width: 100%; }
  .view-switcher a { flex: 1; justify-content: center; }
  .public-page .auth-wrap,.page-signin .auth-wrap { align-items: start; padding: max(22px,env(safe-area-inset-top)) 14px 28px; }
  .public-page .auth-card,.page-signin .auth-card { padding: 23px 20px; }
  .public-page .auth-brand { margin-bottom: 22px; }
  .page-signup .auth-wrap { display: block; width: 100%; min-height: 100dvh; padding: max(18px,env(safe-area-inset-top)) 12px max(26px,env(safe-area-inset-bottom)); }
  .page-signup .auth-column { width: 100%; }
  .page-signup .auth-card { width: 100%; padding: 22px 18px; overflow: visible; }
  .page-signup .signup-heading h1 { font-size: 27px; }
  .page-signup .auth-brand { margin-bottom: 20px; }
  .page-signup .field-float input { min-width: 0; font-size: 1rem; }
  .page-signup .jmb-lockup { margin-top: 18px; }
  .page-call-handling .dependent > table.portal-table { width: 100%; min-width: 0; table-layout: fixed; }
  .page-call-handling .dependent > .portal-table th,
  .page-call-handling .dependent > .portal-table td { padding: 7px 3px; font-size: 0.875rem; }
  .page-call-handling .dependent > .portal-table th:first-child { width: 42px; }
  .page-call-handling .dependent > .portal-table th:nth-child(2) { width: 52px; }
  .page-call-handling .dependent > .portal-table .control { width: 100%; min-width: 0; min-height: 34px !important; padding: 5px 2px; font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .counter-arrived { animation: none; }
}

/* Package lifecycle: explicit, reversible and visually quieter than checkout. */
.package-manage { margin-top: 14px; border-top: 1px solid var(--bg-glass-border); }
.package-manage > summary { width: fit-content; padding: 11px 0 2px; color: var(--text-muted); font-size: 0.875rem; font-weight: 650; cursor: pointer; list-style: none; }
.package-manage > summary::-webkit-details-marker { display: none; }
.package-manage > summary::after { content: '\2192'; display: inline-block; margin-left: 6px; transition: transform .15s ease; }
.package-manage[open] > summary::after { transform: rotate(90deg); }
.package-manage-body { display: grid; justify-items: start; gap: 7px; margin-top: 9px; padding: 12px; border: 1px solid var(--bg-glass-border); border-radius: var(--radius-sm); background: var(--bg-sunken); }
.package-manage-body > strong { font-size: 0.875rem; }
.package-manage-body > p { max-width: 600px; margin: 0; color: var(--text-muted); font-size: 0.875rem; line-height: 1.55; }
.package-cancel-action { padding-left: 0; color: var(--danger); }
.package-cancel-action:hover { color: var(--danger); }
.package-manage-prominent { margin-top: 16px; }
.package-manage-prominent > summary { color: var(--danger); font-size: 0.875rem; }
.package-manage-prominent > summary .bx { margin-right: 4px; }
.package-number-settings { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 0.875rem; }
.package-ending { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; padding: 12px 13px; border: 1px solid var(--warning-border); border-radius: var(--radius-sm); background: var(--warning-bg); }
.package-ending strong { display: block; color: var(--text); font-size: 0.875rem; }
.package-ending strong .bx { margin-right: 4px; color: var(--warning); }
.package-ending p { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.875rem; line-height: 1.45; }

.back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; color: var(--text-muted); font-size: 0.875rem; font-weight: 650; }
.settings-facts, .package-renewal-summary { display: grid; gap: 0; }
.settings-facts > div, .package-renewal-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--bg-glass-border); }
.settings-facts > div:last-child, .package-renewal-summary > div:last-child { border-bottom: 0; }
.settings-facts span, .package-renewal-summary span { color: var(--text-muted); font-size: 0.875rem; }
.settings-facts strong, .package-renewal-summary strong { text-align: right; font-size: 0.875rem; }
.settings-facts strong .bx { margin-right: 4px; color: var(--brand-teal); }
.number-use-actions { display: grid; gap: 10px; color: var(--text-muted); font-size: 0.875rem; line-height: 1.5; }
.number-use-actions .package-manage { margin: 0; }
.number-use-actions .package-manage > summary { color: var(--text-secondary); font-size: 0.875rem; }
.use-card.is-current { opacity: .68; }
.use-card.is-current .use-status { border-color: var(--success-border); background: var(--success-bg); color: var(--success); }
.change-use-notice { margin-bottom: var(--portal-space-4); }

@media (max-width: 620px) {
  .package-ending { align-items: stretch; flex-direction: column; }
  .package-ending .btn { width: 100%; }
  .page-number-settings .head-actions, .page-number-settings .head-actions .btn { width: 100%; }
  .page-number-settings .head-actions { display: grid; }
  .settings-facts > div, .package-renewal-summary > div { align-items: flex-start; flex-direction: column; gap: 3px; }
  .settings-facts strong, .package-renewal-summary strong { text-align: left; }
}

/*
 * Operator Rail — visual refresh
 * A recognisable product silhouette built from a permanent ink navigation
 * rail and an open, quiet workspace. This layer changes presentation only;
 * existing page structure and behaviour remain intact.
 */
:root,
html[data-theme="dark"] {
  --brand-primary: #6956e8;
  --brand-darker: #5542cf;
  --brand-teal: #00a98f;
  --brand-rgb: 105, 86, 232;
  --bg: #f4f5f7;
  --bg-elevated: #ffffff;
  --bg-sunken: #ebeef2;
  --bg-glass: #ffffff;
  --bg-glass-border: #dde1e8;
  --text: #151825;
  --text-secondary: #424757;
  --text-muted: #747a89;
  --text-inverse: #ffffff;
  --success: #5845b9;
  --success-bg: #f4f5f9;
  --success-border: #dfe2ea;
  --warning: #b65c2d;
  --warning-bg: #fff1e8;
  --warning-border: #f0c5ad;
  --danger: #b33c4a;
  --danger-bg: #fcecef;
  --danger-border: #efbdc5;
  --info: #5365c7;
  --info-bg: #eef0ff;
  --radius-xs: 7px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --shadow-xs: 0 1px 2px rgba(20, 24, 37, .035);
  --shadow-sm: 0 1px 3px rgba(20, 24, 37, .05), 0 8px 24px rgba(20, 24, 37, .035);
  --shadow-md: 0 18px 42px rgba(20, 24, 37, .1);
  --shadow-lg: 0 28px 70px rgba(20, 24, 37, .14);
  --font: 'Manrope', system-ui, sans-serif;
  --font-display: 'Manrope', system-ui, sans-serif;
  color-scheme: light;
}


html[data-theme="dark"] body,
body { color: var(--text); background: var(--bg); }
::selection { color: #fff; background: var(--brand-primary); }

/* Desktop product frame */
.topbar,
html[data-theme="dark"] .topbar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 224px;
  min-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-right: 1px solid rgba(255,255,255,.08);
  background: #111426;
  box-shadow: none;
  backdrop-filter: none;
  animation: rail-arrive .48s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rail-arrive { from { opacity: .72; } }
.topbar-inner {
  width: 100%;
  min-height: 100dvh;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 25px 15px 17px;
}
.brand { min-height: 40px; display: flex; align-items: center; padding: 0 8px; }
.brand:hover { transform: none; }
.brand-logo,
html[data-theme="dark"] .brand-logo { width: 174px; max-height: 37px; filter: none; }
.main-nav { flex: 0; flex-direction: column; gap: 6px; margin-top: 38px; }
.main-nav a,
html[data-theme="dark"] .main-nav a {
  min-height: 45px;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  color: #9299b1;
  background: transparent;
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: -.01em;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.main-nav a .bx { color: #747c99; font-size: 20px; }
.main-nav a:hover { color: #fff; background: rgba(255,255,255,.055); transform: translateX(2px); }
.main-nav a.active,
html[data-theme="dark"] .main-nav a.active {
  color: #fff;
  background: #6956e8;
  box-shadow: none;
}
.main-nav a.active .bx { color: #dfe2ea; transform: none; }
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid rgba(255,255,255,.09);
}
.credit-chip {
  min-width: 0;
  flex: 1;
  min-height: 40px;
  justify-content: flex-start;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  color: #f4f5ff;
  background: rgba(255,255,255,.055);
  box-shadow: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.875rem;
}
.credit-chip .bx { color: #72dec7; }
.credit-chip:hover { color: #fff; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.09); box-shadow: none; }
.avatar { width: 40px; height: 40px; border-radius: 9px; color: #111426; background: #dfe2ea; box-shadow: none; }
.user-menu-popover { right: auto; left: 0; bottom: calc(100% + 9px); top: auto; border: 1px solid #dfe2e8; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-md); }

.shell {
  width: calc(100% - 224px);
  max-width: 1440px;
  min-height: calc(100dvh - 84px);
  margin: 0 0 0 224px;
  padding: 43px clamp(28px, 4vw, 62px) 70px;
}
.footer { margin-left: 224px; padding-left: clamp(28px, 4vw, 62px); padding-right: clamp(28px, 4vw, 62px); }

/* Open workspace rather than a stack of themed cards */
.page-head { align-items: flex-end; margin-bottom: 30px; }
/* Stacked headers share a left edge; desktop actions keep their baseline. */
@media (max-width: 768px) {
  .page-head { align-items: flex-start; text-align: start; }
}
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 750;
  letter-spacing: -.055em;
  line-height: 1.02;
}
.page-head .sub { margin-top: 7px; color: var(--text-muted); font-size: 0.875rem; }
.eyebrow {
  margin-bottom: 9px;
  color: #7c8190;
  font: 600 0.875rem/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .105em;
}
.panel,
html[data-theme="dark"] .panel,
.work-panel,
.package-card,.shop-package,.shop-package-panel,.call-mode-option,.use-card,
.endpoint-card,.api-guide-card,.payg-card,.greeting-upload-card {
  border: 1px solid #e0e3e9;
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.panel:hover { transform: none; border-color: #d5d9e1; box-shadow: 0 1px 3px rgba(20,24,37,.055),0 12px 30px rgba(20,24,37,.045); }
.panel-head { min-height: 61px; padding: 14px 19px; border-bottom-color: #e8eaf0; background: var(--card); }
.panel-head h2 { font-size: 0.875rem; font-weight: 720; letter-spacing: -.025em; }
.panel-head h2 .bx {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  color: #5e4bdb;
  background: #efedff;
  box-shadow: none;
}
.panel-head .hint { color: #858a98; font: 500 0.875rem/1.4 var(--font); letter-spacing: 0; }
.panel-body { padding: 22px; }

.btn,
html[data-theme="dark"] .btn {
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid #5845d4;
  border-radius: 10px;
  color: #fff;
  background: #6956e8;
  box-shadow: none;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s ease, box-shadow .18s ease;
}
.btn:hover { color: #fff; background: #5c49dc; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(88,69,212,.2); }
.btn:active { transform: scale(.98); box-shadow: none; }
.btn.secondary,
html[data-theme="dark"] .btn.secondary { border-color: #d9dde5; color: #303544; background: var(--card); box-shadow: none; }
.btn.secondary:hover { color: var(--text); border-color: #c9ced8; background: var(--raised); box-shadow: none; }
.btn.quiet { color: #646a79; background: transparent; border-color: transparent; }

.control,input.control,textarea.control,select.control,.field-float input,
html[data-theme="dark"] .control,html[data-theme="dark"] .field-float input,
html[data-theme="dark"] .page-call-handling .control,html[data-theme="dark"] .page-setup .control {
  border: 1px solid #d8dce4;
  border-radius: 9px;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  background: var(--card);
  box-shadow: none;
}
.control:focus,.field-float input:focus {
  border-color: #6956e8;
  outline: 3px solid rgba(105,86,232,.12);
  background: var(--card);
  box-shadow: none;
}

/* Dashboard signature: one solid command surface, no decorative lines/dots. */
.line-desk {
  min-height: 164px;
  gap: 22px;
  margin-bottom: 18px;
  padding: 27px 29px;
  border: 0;
  border-radius: 17px;
  color: #fff;
  background: #161a31;
  box-shadow: 0 18px 40px rgba(22,26,49,.14);
}
.line-state-mark {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 15px;
  color: #151825;
  background: #7ee3cd;
  box-shadow: none;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), background .2s ease;
}
.line-desk:hover .line-state-mark { transform: rotate(-3deg) scale(1.035); }
.tone-paused .line-state-mark { color: #36190f; background: #ff9a72; }
.line-kicker { color: #8e95b2; font-size: 0.875rem; letter-spacing: .115em; }
.line-desk h2 { font-family: var(--font-display); font-size: clamp(23px,3vw,33px); font-weight: 730; letter-spacing: -.045em; }
.line-desk p { color: #9da4bd; }
.line-desk small { color: #7ee3cd; }
.line-mode-menu > summary,.line-desk .btn.secondary,.line-desk .icon-btn {
  border-color: rgba(255,255,255,.13);
  border-radius: 9px;
  color: #fff;
  background: rgba(255,255,255,.055);
  box-shadow: none;
}
.line-mode-menu > summary:hover,.line-desk .btn.secondary:hover,.line-desk .icon-btn:hover { background: rgba(255,255,255,.1); }
.line-mode-menu .status-dot { display: none; }
.line-mode-popover { border-color: #dfe2e8; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-lg); }

.summary-strip {
  gap: 8px;
  margin-bottom: 25px;
  padding: 7px;
  border: 0;
  border-radius: 14px;
  background: #e9ecf1;
  box-shadow: none;
}
.summary-strip a { padding: 14px 16px; border: 0; border-radius: 9px; background: rgba(255,255,255,.58); }
.summary-strip a:hover { background: var(--card); transform: translateY(-1px); }
.summary-strip small { color: #7a808e; font-size: 0.875rem; }
.summary-strip strong { font-family: var(--font-display); font-size: 23px; font-weight: 750; }
.setup-ribbon { border: 0; border-radius: 12px; background: var(--card); box-shadow: inset 4px 0 0 #ff8c63,var(--shadow-xs); }
.work-grid { gap: 19px; }
.work-panel-head { border-bottom-color: #eaecf1; }
.work-panel-head h2 { font-size: 1.0625rem; letter-spacing: -.035em; }
.job-card,.customer-list > a { border-radius: 9px; }
.job-card::before { display: none; }
.job-card:hover,.customer-list > a:hover { background: #f5f6f9; }
.customer-avatar { border-radius: 10px; background: #6956e8; font-family: var(--font); }
.customer-list em { border-radius: 6px; color: #a34827; background: #fff0e8; font-family: var(--font); }

/* Settings, tools and workbench inherit the same quiet geometry. */
.tabs,.view-switcher { padding: 4px; border: 0; border-radius: 11px; background: #e7eaf0; box-shadow: none; }
.tabs a,.view-switcher a { border-radius: 8px; }
.tabs a.active,.view-switcher a.active { color: #fff; background: #161a31; box-shadow: none; }
.portal-table th { color: #7b8190; background: #f4f5f8; font-size: 0.875rem; }
.portal-table td { border-color: #eceef2; }
.portal-table tbody tr:hover { background: var(--raised); }
.switch-row { border-radius: 10px; }
.switch-row:hover { background: #f5f6f9; }
.switch input:checked + .track { border-color: #5946d6; background: #6956e8; box-shadow: 0 0 0 3px rgba(105,86,232,.1); }
.badge { border-radius: 6px; font-family: var(--font); font-size: 0.875rem; }
.badge.brand { border-color: #d8d2ff; color: #5845d4; background: #f0eeff; }
.package-card.featured,.shop-package.featured,.call-mode-option:has(input:checked),.use-card:has(input:checked) {
  border-color: #a99df4;
  background: #f5f3ff;
  box-shadow: 0 0 0 3px rgba(105,86,232,.08);
}
.package-mark,.package-choice-icon,.call-mode-icon,.api-guide-icon,.greeting-list-icon {
  border: 0;
  border-radius: 10px;
  color: #5946d6;
  background: #eeebff;
  box-shadow: none;
}
.ivr-keypad-key {
  border-color: #d8dce4;
  border-radius: 11px;
  color: var(--text);
  background: var(--card);
  box-shadow: 0 2px 0 #dfe2e8;
}
.ivr-keypad-key:hover { border-color: #9d90ef; box-shadow: 0 3px 0 #d9d3ff; }
.ivr-keypad-key.active { border-color: #6956e8; color: #fff; background: #6956e8; box-shadow: 0 2px 0 #4937bd; }
.insights-chart-track,.hours-chart-row i { border-color: #dfe2e8; background: #eff1f5; }
.insights-chart-track i { background: #cfc9f7; }
.insights-chart-track b,.hours-chart-row b { background: #6956e8; }
.quiet-empty > span { border-color: #dfe2e8; border-radius: 11px; color: #5946d6; background: #f3f1ff; }
.line-mode-popover fieldset input:checked + span { border-color: #c8c0fb; background: #f2f0ff; }
.line-mode-popover fieldset i { color: #5946d6; }
.rescue-note { border-left-color: #6956e8; background: #f2f0ff; }
.workbench { border-color: #e0e3e9; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-sm); }
.customer-rail { border-right-color: #e2e5eb; background: #f0f2f5; }
.rail-head { border-bottom-color: #dde1e8; color: #737988; }
.rail-head small { border-radius: 5px; background: #6956e8; }
.customer-rail-list a { border-radius: 9px; }
.customer-rail-list a.active { background: var(--card); box-shadow: var(--shadow-xs); }
.attention-dot { border-radius: 3px; background: #ff8059; box-shadow: none; }
.customer-workspace { background: var(--card); }
.customer-workspace-head,.customer-jobs { border-bottom-color: #e7e9ee; }
.job-composer { border-bottom-color: #e1e4ea; background: var(--bg); }
.customer-job { border-color: #e0e3e9; border-left-color: #6956e8; border-radius: 9px; }
.timeline-item::before { background: #e1e4ea; }
.timeline-item > span { border-color: #dfe2e8; color: #5a47d5; background: #f3f1ff; }

/* Special-date planner: preset first, arbitrary dates still available. */
.holiday-planner {
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid #dedbe9;
  border-radius: 12px;
  background: #f8f7fc;
}
.holiday-planner-head {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 15px 16px 13px;
  border-bottom: 1px solid #e5e2ee;
}
.holiday-planner-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #5845d4;
  background: #ebe8ff;
  font-size: 1.1875rem;
}
.holiday-planner-head strong,.holiday-planner-head small { display: block; }
.holiday-planner-head strong { color: #252836; font-size: 0.875rem; }
.holiday-planner-head small { margin-top: 3px; color: #777c89; font-size: 0.875rem; line-height: 1.45; }
.holiday-preset-controls {
  display: grid;
  grid-template-columns: minmax(190px,.72fr) minmax(0,1.28fr);
  gap: 18px;
  padding: 15px 16px 12px;
}
.holiday-preset-controls .field { margin: 0; }
.holiday-years { min-width: 0; margin: 0; padding: 0; border: 0; }
.holiday-years legend { margin-bottom: 7px; color: var(--text-muted); font-size: 0.875rem; font-weight: 700; }
.holiday-years > div { display: flex; flex-wrap: wrap; gap: 6px; }
.holiday-years label { cursor: pointer; }
.holiday-years input { position: absolute; opacity: 0; pointer-events: none; }
.holiday-years span {
  min-width: 50px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 5px 9px;
  border: 1px solid #d8d5e1;
  border-radius: 8px;
  color: #5f6472;
  background: var(--card);
  font-size: 0.875rem;
  font-weight: 700;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}
.holiday-years label:hover span { border-color: #aaa0ed; color: #4f3fc1; transform: translateY(-1px); }
.holiday-years input:checked + span { border-color: #6956e8; color: #fff; background: #6956e8; }
.holiday-years input:focus-visible + span { outline: 3px solid rgba(105,86,232,.18); outline-offset: 1px; }
.holiday-years input:disabled + span { cursor: not-allowed; opacity: .44; transform: none; }
.holiday-preview { min-height: 46px; padding: 0 16px 14px; }
.holiday-preview-empty { color: #858a97; font-size: 0.875rem; }
.holiday-preview-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.holiday-preview-count { flex: 0 0 100%; margin-bottom: 2px; color: #626774; font-size: 0.875rem; font-weight: 650; }
.holiday-date-chip,.holiday-date-more {
  padding: 5px 8px;
  border: 1px solid #e1ddec;
  border-radius: 7px;
  color: #4f5360;
  background: rgba(255,255,255,.8);
  font-size: 0.875rem;
  animation: holidayChipIn .2s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--chip-order,0) * 14ms);
}
.holiday-date-more { border-style: dashed; color: #5946d6; background: transparent; animation: none; }
.holiday-custom-row .optional { color: #9296a2; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; }
@keyframes holidayChipIn { from { opacity: 0; transform: translateY(3px); } }

/* Auth: deliberately unboxed, one calm task on one coherent surface. */
.public-page,.page-signin { color: var(--text); background: var(--bg); }
.public-page { padding-bottom: 0; }
.public-page .auth-wrap,.page-signin .auth-wrap {
  grid-template-columns: minmax(0,392px);
  justify-content: center;
  padding: 42px 20px;
}
.page-signin .signin-shell { width: min(392px,100%); }
.public-page .auth-card,.page-signin .auth-card {
  max-width: 392px;
  padding: 10px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.public-content-page .auth-wrap { grid-template-columns: minmax(0,900px); place-items: start center; }
.public-content-page .auth-column,.public-content-page .auth-card { max-width: 900px; }
.public-page .auth-brand { margin-bottom: 34px; }
.public-page .auth-brand img { width: 188px !important; max-height: 40px; }
.auth-task-heading { margin: 0 0 25px; }
.auth-task-heading > span {
  display: block;
  margin-bottom: 7px;
  color: #6956e8;
  font: 700 0.875rem/1.4 'IBM Plex Mono',monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.auth-task-heading h1 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.auth-task-heading p { margin: 7px 0 0; color: var(--text-muted); font-size: 0.875rem; line-height: 1.5; }
.page-signin .signin-heading { margin-bottom: 23px; }
.page-signin .signin-heading h1 { font-size: 31px; font-weight: 750; }
.page-signin .signin-heading p { color: var(--text-muted); }
.page-signin .signin-providers { grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); margin-bottom: 0; }
.page-signin .auth-provider-btn {
  min-height: 52px;
  border-color: #d3d6de;
  border-radius: 11px;
  color: #242836;
  background: var(--card);
  font-size: 0.875rem;
  font-weight: 680;
}
.page-signin .auth-provider-btn:hover {
  transform: translateY(-1px);
  border-color: #bfc4cf;
  background: var(--card);
  box-shadow: 0 8px 22px rgba(25,29,43,.07);
}
.page-signin .signin-divider { margin: 18px 0; color: #989da9; font-size: 0.875rem; letter-spacing: .06em; text-transform: uppercase; }
.page-signin .signin-divider span { padding-inline: 3px; }
.page-signin .signin-email-form { display: grid; }
.page-signin .signin-field { display: grid; gap: 7px; margin-bottom: 15px; }
.page-signin .signin-field > label,
.page-signin .signin-field-head label { color: #393e51; font-size: 0.875rem; font-weight: 700; line-height: 1.2; }
.page-signin .signin-field-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-signin .signin-field-head a { color: #5f4bc9; font-size: 0.875rem; font-weight: 650; }
.page-signin .signin-field-head a:hover,
.page-signin .signin-field-head a:focus-visible { color: #4432ad; text-decoration: underline; text-underline-offset: 3px; }
.page-signin .signin-field .control {
  min-height: 52px;
  padding: 0 14px;
  border-color: #d5d9e1;
  border-radius: 11px;
  color: var(--text);
  background: var(--card);
  font-size: 0.9375rem;
  box-shadow: 0 1px 2px rgba(20,24,37,.03);
}
.page-signin .signin-field .control:focus { transform: none; border-color: #6956e8; box-shadow: 0 0 0 3px rgba(105,86,232,.11); }
.page-signin .auth-card .btn.signin-email-submit {
  min-height: 52px;
  justify-content: space-between;
  margin-top: 2px;
  padding: 7px 8px 7px 17px;
  border: 1px solid #171a25;
  border-radius: 11px;
  color: #fff;
  background: #171a25;
  box-shadow: none;
}
.page-signin .auth-card .btn.signin-email-submit:hover { border-color: #24283a; background: #24283a; box-shadow: 0 9px 22px rgba(23,26,37,.15); }
.page-signin .signin-email-submit .bx {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--text);
  background: #e9e6ff;
  font-size: 20px;
  transition: transform .2s cubic-bezier(.22,1,.36,1),background .2s;
}
.page-signin .signin-email-submit:hover .bx { transform: translateX(2px); background: #e9e6ff; }
.page-signin .signin-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 12px;
  color: #a0a5b0;
  font-size: 0.875rem;
}
.page-signin .signin-legal a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  color: #6e7381;
  font-weight: 600;
  text-decoration: none;
}
.page-signin .signin-legal a:hover,
.page-signin .signin-legal a:focus-visible { color: #5140c5; text-decoration: underline; text-underline-offset: 3px; }
.linked-signin-list { display: grid; gap: 8px; }
.linked-signin-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #e0e3ea;
  border-radius: 10px;
  background: var(--card);
}
.linked-signin-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; color: #3358a7; background: #f0f4fc; }
.linked-signin-icon.apple { color: #fff; background: #20232b; }
.linked-signin-icon .bx { font-size: 20px; }
.linked-signin-copy { min-width: 0; display: grid; gap: 2px; }
.linked-signin-copy strong { color: #252a37; font-size: 0.875rem; }
.linked-signin-copy small { overflow: hidden; color: var(--text-muted); font-size: 0.875rem; text-overflow: ellipsis; white-space: nowrap; }
.linked-signin-row .badge,.linked-signin-row .btn { justify-self: end; white-space: nowrap; }
.public-page .field-float input { min-height: 51px; border-color: #d5d9e1; border-radius: 10px; background: var(--card); box-shadow: 0 1px 2px rgba(20,24,37,.03); }
.page-signin .field-float input:focus,.page-signup .field-float input:focus { border-color: #6956e8; box-shadow: 0 0 0 3px rgba(105,86,232,.11); }
.page-signin .auth-card .btn.pill,.page-signup .auth-card .btn.pill {
  min-height: 49px;
  border-color: #5845d4;
  border-radius: 10px;
  background: #6956e8;
  box-shadow: none;
}
.page-signin .demo-entry {
  min-height: 58px;
  border-color: #d6dae2;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
}
.page-signin .demo-entry:hover { border-color: #bfc4cf; background: var(--card); box-shadow: var(--shadow-xs); }
.demo-entry > .bx:first-child { border: 0; border-radius: 9px; color: #5b48d6; background: #eeebff; box-shadow: none; }
.social.btn { border-color: #d6dae2; color: #242836; background: var(--card); box-shadow: none; }
.social.btn:hover { color: var(--text); border-color: #c4c9d3; background: var(--raised); box-shadow: none; }
.auth-provider-btn { position: relative; min-width: 0; gap: 10px; }
.auth-provider-btn > span { white-space: nowrap; }
.social-row:has(> .auth-provider-btn:nth-child(2)) .auth-provider-verb { display: none; }
.auth-provider-mark { width: 18px; height: 18px; flex: 0 0 18px; }
.verification-state .verification-mark { border: 0; border-radius: 14px; color: #5845b9; background: #f4f5f9; }
.demo-ribbon { border: 0; border-radius: 10px; color: #5845b9; background: #f4f5f9; box-shadow: inset 4px 0 0 #ff9a62; }
.jmb-lockup { opacity: .62; }

.mobile-tabs { border-top-color: #242942; background: rgba(17,20,38,.98); box-shadow: none; }
.mobile-tabs a { border-radius: 9px; color: #858da8; }
.mobile-tabs a.active { color: #fff; background: #2a2f4b; box-shadow: none; }
.mobile-tabs a.active .bx { color: #7ee3cd; }

@media (max-width: 980px) {
  .topbar,html[data-theme="dark"] .topbar {
    position: sticky;
    inset: auto;
    top: 0;
    width: 100%;
    min-height: 64px;
    margin: 0;
    border-radius: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    animation: none;
  }
  .topbar-inner { min-height: 64px; flex-direction: row; align-items: center; padding: 8px 14px; }
  .brand { padding: 0; }
  .brand-logo,html[data-theme="dark"] .brand-logo { width: 164px; }
  .main-nav { display: none; }
  .topbar-actions { display: flex; margin: 0 0 0 auto; padding: 0; border: 0; }
  .credit-chip { width: auto; }
  .user-menu-popover { right: 0; left: auto; top: calc(100% + 9px); bottom: auto; }
  .shell { width: 100%; margin: 0; padding-top: 31px; }
  .footer { margin-left: 0; }
}

@media (max-width: 720px) {
  .shell { padding: 25px 14px 106px; }
  .topbar-inner { padding-left: 14px; padding-right: 10px; }
  .brand-logo,html[data-theme="dark"] .brand-logo { width: 148px; }
  .credit-chip { min-height: 38px; padding: 6px 9px; }
  .page-head { margin-bottom: 21px; }
  .page-head h1 { font-size: 30px; }
  .line-desk { padding: 22px 18px; border-radius: 15px; }
  .line-state-mark { width: 50px; height: 50px; border-radius: 13px; }
  .summary-strip { grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
  .summary-strip a:nth-child(-n+2) { border-bottom: 0; }
  .public-page .auth-wrap,.page-signin .auth-wrap {
    grid-template-columns: minmax(0,1fr);
    place-items: start center;
    align-content: start;
    padding: max(26px,env(safe-area-inset-top)) 18px max(30px,env(safe-area-inset-bottom));
  }
  .public-page .auth-card,.page-signin .auth-card { padding: 0; }
  .public-page .auth-column { min-width: 0; }
  .page-accept-invite .auth-wrap { place-items: start center; padding: max(22px,env(safe-area-inset-top)) 14px max(28px,env(safe-area-inset-bottom)); }
  .page-accept-invite .auth-card { padding: 22px 18px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); box-shadow: 0 3px 0 rgba(23,34,31,.05); }
  .page-accept-invite .auth-brand { margin-bottom: 26px; }
  .page-accept-invite .auth-brand img { width: 176px !important; }
  .page-accept-invite .auth-task-heading h1 { font-size: 27px; }
  .page-accept-invite .jmb-lockup { margin-top: 17px; }
  .auth-task-heading h1 { font-size: 28px; }
  .page-signup .auth-wrap { padding-left: 15px; padding-right: 15px; }
  .page-signup .auth-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .page-signup .auth-brand { margin-bottom: 28px; }
  .page-signin .signin-field .control { font-size: 1rem; }
  .linked-signin-row { grid-template-columns: 38px minmax(0,1fr); }
  .linked-signin-row .badge,.linked-signin-row .btn { grid-column: 2; justify-self: start; }
  .holiday-preset-controls { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .holiday-planner-head { align-items: start; padding: 14px; }
  .holiday-planner-head small { line-height: 1.5; }
  .holiday-preview { padding: 0 14px 14px; }
  .holiday-years > div { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .holiday-years label { flex: 0 0 auto; }
  .holiday-date-chip { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar { animation: none; }
  .line-desk:hover .line-state-mark { transform: none; }
  .holiday-date-chip { animation: none; }
  .holiday-years label:hover span { transform: none; }
}

/* Customer notes (work inbox) */
.note-composer { margin: 14px 0 4px; padding: 13px 14px; border: 1px dashed #dfe2ea; border-radius: 12px; background: var(--card); }
.note-composer .field { margin: 0; }
.note-composer label { display: block; margin-bottom: 6px; color: var(--text-muted); font: 600 0.875rem/1.4 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.note-row { display: flex; gap: 8px; align-items: flex-end; }
.note-row textarea { flex: 1; min-height: 46px; resize: vertical; }
.note-row .btn { flex: 0 0 auto; }
.timeline-item.type-note > span { color: #086d75; background: #eefafb; }
@media (max-width: 720px) { .note-row { flex-direction: column; align-items: stretch; } .note-row .btn { width: 100%; } }

/* ==========================================================================
   Micro-interaction polish — quick, small, purposeful. Nothing ambient.
   ========================================================================== */
.simple-disclosure > .disclosure-body,
.advanced-settings > .advanced-settings-body,
.secondary-plans > .secondary-plans-body,
.specialist-purpose > .purpose-grid { animation: disclosure-in .18s var(--ease-out); }
@keyframes disclosure-in { from { opacity: 0; transform: translateY(-3px); } }

.simple-disclosure > summary > i,
.advanced-settings > summary > i,
.secondary-plans > summary > i,
.specialist-purpose > summary > i { transition: transform .18s var(--ease-out); }
.simple-disclosure > summary,
.advanced-settings > summary,
.secondary-plans > summary,
.specialist-purpose > summary { transition: background .15s ease; }
.simple-disclosure > summary:hover,
.advanced-settings > summary:hover,
.secondary-plans > summary:hover,
.specialist-purpose > summary:hover { background: var(--hover); }

.simple-choice-row > label > span:active,
.purpose-card:has(> input[name="use"]:checked):active { transform: scale(.995); }

.today-override > form { animation: disclosure-in .16s var(--ease-out); }
.line-number-popover,
.user-menu-popover,
.mobile-more-popover { animation: popover-in .16s var(--ease-out); }
@keyframes popover-in { from { opacity: 0; transform: translateY(-4px) scale(.99); } }

.business-line-card,
.number-card,
.empty-line-card { transition: border-color .18s ease, box-shadow .18s ease; }
.number-card:hover { border-color: #dfe2ea; box-shadow: 0 6px 20px rgba(35,40,52,.08); }

.recent-call-list a:active { transform: scale(.995); }
.hours-row .control,
.simple-save .btn { transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }

@media (prefers-reduced-motion: reduce) {
  .simple-disclosure > .disclosure-body,
  .advanced-settings > .advanced-settings-body,
  .secondary-plans > .secondary-plans-body,
  .specialist-purpose > .purpose-grid,
  .today-override > form,
  .line-number-popover,
  .user-menu-popover,
  .mobile-more-popover { animation: none; }
}