:root {
  color-scheme: light;
  --ui-page: #f2f3f5;
  --ui-surface: #f8f9fb;
  --ui-edge: rgba(27, 36, 50, .08);
  --ui-raised: 0 5px 16px rgba(31, 41, 55, .055), inset 0 1px 0 rgba(255, 255, 255, .92);
  --ui-inset: inset 0 2px 5px rgba(31, 41, 55, .07), inset 0 1px 0 rgba(255, 255, 255, .7);
}

html { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; letter-spacing: -.018em; }
html.dark { color-scheme: dark; --ui-page: #101114; --ui-surface: #191a1e; --ui-edge: rgba(255,255,255,.07); --ui-raised: 0 7px 18px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.035); --ui-inset: inset 0 2px 5px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.025); }

body { background: var(--ui-page); }
body[data-route="invite"] { background: var(--ui-page) !important; color: #29231f; }
body[data-route="invite"] #root .text-white { color: #29231f; }
body[data-route="invite"] #root .text-slate-300,
body[data-route="invite"] #root .text-slate-400 { color: #68717d; }
body[data-route="invite"] #root .bg-white\/\[0\.04\] { background: var(--ui-surface); }
body[data-route="invite"] #root .border-white\/10 { border-color: var(--ui-edge); }
body[data-route="invite"] #root .invite-brand-chip { border: 1px solid var(--ui-accent-border); background: var(--ui-accent-soft); color: var(--ui-accent); }
body[data-route="invite"] #root .invite-brand-chip span { background: var(--ui-accent-fill); }
body[data-route="invite"] #root .invite-role { background: var(--ui-accent-soft); color: var(--ui-accent); }
body[data-route="invite"] #root .invite-submit { background: var(--ui-accent-fill); }
body[data-route="invite"] #root .invite-submit:hover { background: var(--ui-accent-hover); }
body[data-route="invite"] #root a.bg-white\/10 { background: var(--ui-accent-fill); color: #fff; }
body[data-route="invite"] #root .text-rose-400 { color: #b42318; }
body[data-route="invite"] #root .invite-spinner { border-color: var(--ui-accent-fill); border-right-color: transparent; }
.brand-kicker { color: var(--ui-accent); }
.brand-voice-icon { width: 20px; height: 20px; flex: 0 0 20px; padding: 2px; border: 1px solid var(--ui-accent-border); border-radius: 7px; background: var(--ui-accent-soft); color: var(--ui-accent); }
.team-chat-member-check { accent-color: var(--ui-accent-fill); }
#root .onboarding-card { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ui-accent-fill) 18%, var(--ui-edge)); background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--ui-accent-fill) 9%, transparent), transparent 42%), var(--ui-surface); }
.onboarding-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.onboarding-header h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 720; letter-spacing: -.04em; }
.onboarding-header > div > p:last-child { max-width: 650px; margin: 7px 0 0; color: #68717d; font-size: .9rem; line-height: 1.55; }
html.dark .onboarding-header > div > p:last-child { color: #a1a8b3; }
.onboarding-progress-label { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--ui-edge); border-radius: 999px; color: var(--ui-accent); background: var(--ui-page); font-size: .75rem; font-weight: 700; }
.onboarding-progress-track { height: 7px; margin: 18px 0 8px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ui-edge) 75%, transparent); }
.onboarding-progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--ui-accent-fill); transition: width .45s ease; }
.onboarding-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.onboarding-step { display: flex; align-items: flex-start; gap: 13px; padding: 16px 2px; border-bottom: 1px solid var(--ui-edge); }
.onboarding-step:last-child { border-bottom: 0; padding-bottom: 2px; }
.onboarding-step-mark { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid var(--ui-edge); border-radius: 50%; color: #737b87; background: var(--ui-page); font-size: .8rem; font-weight: 750; }
.onboarding-step.is-done .onboarding-step-mark { border-color: color-mix(in srgb, #18845b 25%, transparent); color: #18845b; background: color-mix(in srgb, #18845b 10%, var(--ui-surface)); }
.onboarding-step.is-waiting .onboarding-step-mark { border-color: color-mix(in srgb, var(--ui-accent-fill) 35%, transparent); color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent-fill) 9%, var(--ui-surface)); }
.onboarding-step h3 { margin: 0; font-size: .95rem; font-weight: 700; }
.onboarding-step p { margin: 4px 0 0; color: #68717d; font-size: .84rem; line-height: 1.5; }
html.dark .onboarding-step p { color: #a1a8b3; }
.onboarding-step-status { color: #78808c; font-size: .68rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.onboarding-step.is-done .onboarding-step-status { color: #18845b; }
.onboarding-step.is-waiting .onboarding-step-status { color: var(--ui-accent); }
.onboarding-compact { padding: 0 !important; }
.onboarding-checkpoint { display: flex; align-items: center; gap: 12px; min-height: 74px; padding: 14px 18px; cursor: pointer; list-style: none; }
.onboarding-checkpoint::-webkit-details-marker { display: none; }
.onboarding-checkpoint-mark { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid color-mix(in srgb, #18845b 25%, transparent); border-radius: 50%; color: #18845b; background: color-mix(in srgb, #18845b 10%, var(--ui-surface)); font-weight: 800; }
.onboarding-checkpoint-copy { display: grid; min-width: 0; gap: 3px; }
.onboarding-checkpoint-copy b { overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-checkpoint-copy small { color: #68717d; font-size: .76rem; }
html.dark .onboarding-checkpoint-copy small { color: #a1a8b3; }
.onboarding-checkpoint-action { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--ui-accent); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.onboarding-checkpoint-action span { transition: transform .2s ease; }
.onboarding-compact[open] .onboarding-checkpoint-action span { transform: rotate(180deg); }
.onboarding-expanded { padding: 0 18px 16px; }
.onboarding-expanded .onboarding-progress-track { margin-top: 0; }
@media (max-width: 640px) { .onboarding-checkpoint { min-height: 68px; gap: 9px; padding: 12px; }.onboarding-checkpoint-action { font-size: .72rem; }.onboarding-checkpoint-action span { display: none; }.onboarding-expanded { padding: 0 12px 12px; } }
@media (max-width: 640px) { .onboarding-header { flex-direction: column; gap: 12px; }.onboarding-progress-label { order: -1; }.onboarding-step { gap: 10px; padding: 13px 0; }.onboarding-step-mark { width: 27px; height: 27px; flex-basis: 27px; } }
@media (prefers-reduced-motion: reduce) { .onboarding-progress-track span { transition: none; } }
#root .team-chat-member-row { min-height: 44px; }
#root .customer-tag-assign-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
#root .customer-tag-create-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; }
#root { min-height: 100vh; }
.customer-mobile-list { display: none; }
body[data-route="login"] #root > main { background: var(--ui-page); color: #1f2937; }
body[data-route="login"] #root > main .text-white { color: #111827; }
body[data-route="login"] #root > main .text-slate-100 { color: #334155; }
body[data-route="login"] #root > main .text-slate-400 { color: #64748b; }
body[data-route="login"] #root > main form#loginForm input { border-color: var(--ui-edge); background: var(--ui-page); color: #111827; box-shadow: var(--ui-inset); }
html.dark body[data-route="login"] #root > main { background: var(--ui-page); color: #f1f5f9; }
html.dark body[data-route="login"] #root > main .text-white { color: #f8fafc; }
html.dark body[data-route="login"] #root > main .text-slate-100 { color: #e2e8f0; }
html.dark body[data-route="login"] #root > main .text-slate-400 { color: #94a3b8; }
html.dark body[data-route="login"] #root > main form#loginForm input { background: #121317; color: #f8fafc; }
#root .grid.min-h-screen.grid-cols-\[260px_minmax\(0\,1fr\)\] { background: var(--ui-page); }
#root aside.sticky { background: var(--ui-surface); border-color: var(--ui-edge); }
#root main { background: var(--ui-page); }
#root header.sticky { background: color-mix(in srgb, var(--ui-page) 92%, transparent); border-color: var(--ui-edge); }

#root .rounded-2xl.border,
#root .rounded-3xl.border,
#root article.rounded-2xl {
  border-color: var(--ui-edge);
  box-shadow: var(--ui-raised);
}
#root button.rounded-xl,
#root button.rounded-2xl,
#root button.rounded-full { transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
#root button:active { transform: scale(.985); }
#root button:focus-visible,
#root input:focus-visible,
#root select:focus-visible,
#root textarea:focus-visible { outline: 3px solid rgba(37, 99, 235, .22); outline-offset: 2px; }
#root input.rounded-xl,
#root select.rounded-xl,
#root textarea.rounded-xl { box-shadow: var(--ui-inset); border-color: var(--ui-edge); }
#root h1.font-black,
#root h2.font-black,
#root h3.font-black { font-weight: 680; letter-spacing: -.04em; }

.app-navigation { display: grid; align-content: start; gap: 16px; overflow-y: auto; }
.nav-group { display: grid; gap: 3px; }
.nav-group-label { margin: 0 10px 4px; color: #98a0ad; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
html.dark .nav-group-label { color: #737984; }
.nav-group button { min-height: 42px; border-radius: 12px; }
.nav-group button.bg-blue-600\/10,
.nav-group button.dark\:bg-blue-600\/20 { box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
.mobile-tab-bar { display: none; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dialer-layout { display: grid; grid-template-columns: minmax(300px, 440px) minmax(240px, 340px); align-items: start; justify-content: center; gap: 20px; }
.dialer-card { padding: clamp(18px, 4vw, 30px); }
.dialer-contact-details { padding: 11px 13px; border: 1px solid var(--ui-edge); border-radius: 12px; background: var(--ui-page); }
.dialer-contact-details summary { color: var(--ui-muted); font-size: 12px; font-weight: 650; cursor: pointer; }
.dialer-number-row { display: flex; gap: 8px; }
.dialer-number { min-width: 0; height: 56px; font-size: 21px; font-weight: 650; text-align: center; letter-spacing: .035em; }
.dialer-clear { flex: 0 0 48px; width: 48px; padding: 0; touch-action: manipulation; user-select: none; }
.dialer-clear svg { width: 19px; height: 19px; }
.dial-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 290px; margin-inline: auto; }
.dial-key { height: 58px; border: 1px solid var(--ui-edge); border-radius: 18px; background: var(--ui-surface); color: inherit; font-size: 20px; font-weight: 600; box-shadow: var(--ui-raised); }
.dial-key:hover { border-color: rgba(37, 99, 235, .25); }
.dial-call-button { min-width: min(100%, 290px); height: 52px; border-radius: 18px; }
.dialer-help { align-self: stretch; }
.dialer-tip { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 12px; border-radius: 14px; background: rgba(100, 116, 139, .07); color: #64748b; font-size: 13px; }
.dialer-tip-icon,
.setup-note-icon { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; background: rgba(37, 99, 235, .1); color: #2563eb; font-weight: 700; }
.setup-note { display: flex; align-items: flex-start; gap: 12px; }
.setup-note p { margin: 4px 0 8px; color: #64748b; font-size: 13px; line-height: 1.55; }
.setup-note code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-size: 12px; }

/* Compact, accessible customer actions in the agent contact queue. */
.agent-contact-list { display: grid; gap: 8px; }
.agent-contact-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px; border: 1px solid var(--ui-edge); border-radius: 16px; background: var(--ui-surface); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.agent-contact-row:hover { border-color: var(--ui-accent-border); box-shadow: 0 4px 14px rgba(53, 40, 28, .06); transform: translateY(-1px); }
.agent-contact-select { display: grid; min-width: 0; min-height: 54px; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 3px 5px; border: 0; border-radius: 11px; background: transparent; color: inherit; text-align: left; }
.agent-contact-select:hover { background: var(--ui-page); }
.agent-contact-avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 12px; font-weight: 700; }
.agent-contact-identity { display: grid; min-width: 0; gap: 3px; }
.agent-contact-identity b { overflow: hidden; color: inherit; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.agent-contact-identity span { overflow: hidden; color: #7a7772; font-size: 11px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.agent-contact-status { padding: 4px 7px; border-radius: 999px; background: var(--ui-page); color: #6d6964; font-size: 10px; font-weight: 650; white-space: nowrap; }
.agent-contact-edit { min-width: 56px; min-height: 42px; padding: 0 11px; border: 1px solid var(--ui-edge); border-radius: 11px; background: var(--ui-surface); color: var(--ui-accent); font-size: 12px; font-weight: 650; }
.agent-contact-edit:hover { border-color: var(--ui-accent-border); background: var(--ui-accent-soft); }

/* Photo-led split sign-in: keep the form clear, calm, and comfortable on mobile. */
body[data-route="login"] { --login-ink: #27221e; --login-muted: #766f68; --login-paper: #fffdfa; --login-line: #e9e2da; --login-accent: #b34712; background: var(--login-paper); }
body[data-route="login"] #root { min-height: 100svh; }
body[data-route="login"] #root > main.login-shell { padding: 0; background: var(--login-paper); }
.login-shell { display: grid; min-height: 100svh; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--login-paper); color: var(--login-ink); }
.login-story { position: relative; display: flex; min-height: 100svh; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(28px, 4.6vw, 68px); color: #fff; isolation: isolate; background: #6a2b12; }
.login-story-photo, .login-story-shade { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; }
.login-story-photo { object-fit: cover; object-position: 53% center; filter: brightness(1.06) contrast(.97) saturate(1.04); transition: filter .35s ease; animation: login-photo-float 22s ease-in-out infinite alternate; }
.login-story-shade { background: rgba(74, 37, 17, .28); transition: background-color .35s ease; }
.login-story::after { position: absolute; z-index: 0; inset: 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 22px 28px 20px 26px; box-shadow: inset 0 0 32px rgba(255,255,255,.035); content: ""; pointer-events: none; animation: image-edge-tide 13s ease-in-out infinite alternate; }
.login-story-brand { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; font-size: 17px; font-weight: 600; letter-spacing: -.03em; }
.login-brand-lockup { display: flex; min-width: 0; align-items: center; gap: 10px; }
.login-story-brand b { font-weight: 400; }
.login-brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: #ba4c18; color: #fff; font-size: 24px; font-weight: 650; letter-spacing: -.08em; }
.login-story-copy { max-width: 600px; margin-block: auto; padding-block: 58px; text-shadow: 0 2px 22px rgba(0,0,0,.3); animation: auth-copy-arrive 760ms cubic-bezier(.2,.75,.25,1) both; }
.login-story-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 17px; color: #fff0e4; font-size: 11px; font-weight: 700; letter-spacing: .15em; }
.login-story-kicker span { width: 7px; height: 7px; border-radius: 50%; background: #ffb27f; box-shadow: 0 0 0 5px rgba(255,178,127,.2); }
.login-story-copy h1 { margin: 0; font-size: clamp(38px, 5vw, 66px); font-weight: 620; letter-spacing: -.055em; line-height: 1.03; }
.login-story-copy > p:last-child { max-width: 400px; margin: 20px 0 0; color: rgba(255,255,255,.86); font-size: 16px; line-height: 1.65; }
.login-story-note { display: flex; width: min(360px, 48%); align-self: flex-end; align-items: center; gap: 12px; margin: -30px 0 24px; padding: 8px; border: 1px solid rgba(255,255,255,.36); border-radius: 16px; background: rgba(35,25,20,.58); box-shadow: 0 12px 35px rgba(0,0,0,.18); backdrop-filter: blur(14px); animation: note-float 6s ease-in-out infinite, auth-fade-in 820ms 180ms ease both; }
.login-story-note img { width: 66px; height: 62px; flex: 0 0 66px; border-radius: 10px; object-fit: cover; object-position: 70% center; transition: filter .35s ease; }
.login-story-note figcaption { display: grid; gap: 4px; }
.login-story-note b { font-size: 12px; font-weight: 650; }
.login-story-note span { color: rgba(255,255,255,.76); font-size: 10px; line-height: 1.4; }
.login-story-foot { margin: 0; color: rgba(255,255,255,.76); font-size: 11px; }
.login-panel { position: relative; display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 68px); }
.login-theme-toggle { display: inline-flex; min-height: 40px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; background: rgba(24,18,14,.48); color: #fff; font-size: 12px; font-weight: 650; cursor: pointer; backdrop-filter: blur(12px); }
.login-theme-toggle:hover { border-color: rgba(255,255,255,.7); background: rgba(24,18,14,.68); color: #fff; }
body[data-route="login"] #root button:focus-visible { outline: 3px solid rgba(190,81,27,.3); outline-offset: 2px; }
.login-card { width: min(100%, 420px); align-self: center; padding: 0; border: 0; background: transparent; box-shadow: none; animation: auth-form-arrive 680ms cubic-bezier(.2,.75,.25,1) both; }
.login-eyebrow { margin: 0 0 11px; color: var(--login-accent); font-size: 11px; font-weight: 750; letter-spacing: .15em; }
.login-card h2 { margin: 0; color: var(--login-ink); font-size: clamp(28px, 3vw, 36px); font-weight: 630; letter-spacing: -.045em; line-height: 1.15; }
.login-intro { margin: 11px 0 30px; color: var(--login-muted); font-size: 14px; line-height: 1.6; }
.login-fields { display: grid; gap: 19px; }
.login-field { display: grid; gap: 8px; color: #49433e; font-size: 12px; font-weight: 650; }
.login-field input { width: 100%; min-height: 52px; padding: 0 15px; border: 1px solid var(--login-line); border-radius: 12px; outline: 0; background: #fff; color: var(--login-ink); font: inherit; font-size: 14px; box-shadow: 0 1px 2px rgba(37,28,19,.025); }
.login-field input::placeholder { color: #aaa29a; font-weight: 400; }
body[data-route="login"] #root .login-field input:focus-visible { border-color: #c66b39; box-shadow: 0 0 0 3px rgba(190,81,27,.15); outline: 0; }
.login-forgot { justify-self: end; margin-top: -9px; padding: 5px 0; border: 0; background: none; color: var(--login-accent); font-size: 12px; font-weight: 650; }
.login-submit { display: flex; width: 100%; min-width: 0; max-width: 100%; min-height: 52px; box-sizing: border-box; align-items: center; justify-content: center; gap: 12px; margin-top: 3px; padding: 0 16px; border: 0; border-radius: 12px; background: #a9420f; color: #fff; font: inherit; font-size: 14px; font-weight: 680; text-align: center; white-space: normal; overflow-wrap: anywhere; box-shadow: 0 5px 12px rgba(155,62,14,.15); transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.login-submit:hover { transform: translateY(-1px); background: #8f350b; box-shadow: 0 8px 17px rgba(155,62,14,.2); }
.login-submit span { font-size: 18px; font-weight: 400; }
.login-security { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 25px 0 0; color: #8b837c; font-size: 11px; }
.login-security span { color: var(--login-accent); }
.login-error, .login-success { margin: 16px 0; padding: 12px 14px; border-radius: 10px; font-size: 12px; line-height: 1.5; }
.login-error { border: 1px solid #f0c5be; background: #fff5f3; color: #a72e1f; }
.login-success { border: 1px solid #c9e8d5; background: #f2fbf5; color: #17653a; }
.login-back { width: 100%; min-height: 46px; margin-top: 9px; border: 1px solid var(--login-line); border-radius: 12px; background: transparent; color: var(--login-muted); font: inherit; font-size: 13px; font-weight: 600; }
.login-panel-foot { position: absolute; right: 32px; bottom: 24px; left: 32px; margin: 0; color: #aaa29a; font-size: 10px; text-align: center; }
@keyframes login-photo-float { from { transform: scale(1.025) translate3d(-.25%, 0, 0); } to { transform: scale(1.075) translate3d(.3%, -.25%, 0); } }
@keyframes image-edge-tide { 0% { border-radius: 22px 28px 20px 26px; transform: translate3d(0,0,0); opacity: .7; } 50% { border-radius: 28px 20px 27px 19px; transform: translate3d(1px,-1px,0); opacity: 1; } 100% { border-radius: 19px 25px 22px 29px; transform: translate3d(-1px,1px,0); opacity: .76; } }
@keyframes auth-copy-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-form-arrive { from { opacity: 0; transform: translate3d(0,18px,0) scale(.99); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes auth-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes note-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-.35deg); } }
html.dark body[data-route="login"] { --login-ink: #f3ede7; --login-muted: #b8ada3; --login-paper: #191613; --login-line: #39312a; --login-accent: #ef9b67; }
html.dark body[data-route="login"] .login-field { color: #ded4ca; }
html.dark body[data-route="login"] .login-field input { border-color: var(--login-line); background: #211d19; color: var(--login-ink); }
html.dark body[data-route="login"] .login-theme-toggle:hover { background: #2b241f; }
html.dark body[data-route="login"] .login-error { background: #321e1c; }
html.dark body[data-route="login"] .login-success { background: #1d2b21; }
html.dark body[data-route="login"] .login-story { background: #17120f; }
html.dark body[data-route="login"] .login-story-photo { filter: brightness(.64) contrast(1.1) saturate(.82) sepia(.08); }
html.dark body[data-route="login"] .login-story-shade { background: rgba(10, 12, 16, .48); }
html.dark body[data-route="login"] .login-story-note img { filter: brightness(.82) contrast(1.04) saturate(.86); }

.welcome-tour-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(18, 15, 13, .58); backdrop-filter: blur(8px); animation: welcome-tour-in .2s ease-out both; }
.welcome-tour-card { width: min(100%, 480px); padding: clamp(24px, 5vw, 38px); border: 1px solid var(--ui-edge); border-radius: 24px; background: var(--ui-page); color: inherit; box-shadow: 0 24px 80px rgba(0, 0, 0, .24); }
.welcome-tour-mark { display: grid; width: 42px; height: 42px; margin-bottom: 26px; place-items: center; border-radius: 14px; background: #a9420f; color: white; font-size: 21px; font-weight: 800; }
.welcome-tour-card .login-eyebrow { display: flex; justify-content: space-between; gap: 10px; }
.welcome-tour-card h2 { margin: 0; color: inherit; font-size: clamp(25px, 5vw, 32px); font-weight: 700; letter-spacing: -.04em; line-height: 1.15; }
.welcome-tour-card .login-intro { margin: 13px 0 24px; opacity: .76; }
.welcome-tour-progress { display: flex; gap: 7px; margin: 0 0 28px; }
.welcome-tour-progress span { height: 4px; flex: 1; border-radius: 99px; background: var(--ui-edge); }
.welcome-tour-progress span.is-active { background: #b34712; }
.welcome-tour-actions { display: flex; justify-content: space-between; gap: 12px; }
.welcome-tour-actions .login-back, .welcome-tour-actions .login-submit { width: auto; min-width: 130px; margin: 0; padding-inline: 18px; }
@keyframes welcome-tour-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .welcome-tour-backdrop { animation: none; } }

@media (max-width: 1023px) {
  #root main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .mobile-tab-bar { position: fixed; z-index: 35; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-edge); background: color-mix(in srgb, var(--ui-surface) 94%, transparent); box-shadow: 0 -5px 22px rgba(24, 34, 48, .07); backdrop-filter: blur(18px); }
  .mobile-tab { display: grid; min-width: 0; min-height: 48px; align-content: center; justify-items: center; gap: 3px; border: 0; border-radius: 12px; background: transparent; color: #7b8492; font-size: 10px; font-weight: 600; touch-action: manipulation; }
  .mobile-tab svg { width: 19px; height: 19px; }
  .mobile-tab.is-active { background: var(--ui-accent-soft); color: var(--ui-accent); }
  html.dark .mobile-tab.is-active { color: var(--ui-accent); }
  .mobile-more-panel { position: fixed; z-index: 40; inset: 0; }
  .mobile-more-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(15, 23, 42, .48); touch-action: manipulation; }
  .mobile-more-sheet { position: absolute; right: 0; bottom: calc(68px + env(safe-area-inset-bottom)); left: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; max-height: min(76dvh, 680px); overflow: hidden; padding: 16px 18px 14px; border: 1px solid var(--ui-edge); border-bottom: 0; border-radius: 22px 22px 0 0; background: var(--ui-surface); color: var(--ui-ink); box-shadow: 0 -8px 24px rgba(15, 23, 42, .14); }
  .mobile-more-heading { display: flex; align-items: center; justify-content: space-between; }
  .mobile-more-navigation { min-height: 0; overflow-y: auto; padding: 2px 2px 10px; }
  .mobile-more-navigation .nav-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .mobile-more-navigation .nav-group-label { grid-column: 1 / -1; margin: 8px 4px 2px; }
  .mobile-more-navigation .nav-group button { min-width: 0; min-height: 42px; padding: 8px 10px; font-size: 12px; }
  .mobile-more-navigation .nav-group button svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .mobile-more-account { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--ui-edge); padding-top: 12px; }
  .dialer-layout { grid-template-columns: minmax(0, 480px); }
  .dialer-help { display: none; }
  .page-heading h1 { font-size: 28px; }
}

@media (max-width: 760px) {
  .login-shell { grid-template-columns: minmax(0, 1fr); }
  .login-story { min-height: min(49svh, 450px); padding: 25px; }
  .login-story-copy { padding-block: 42px 30px; }
  .login-story-copy h1 { font-size: clamp(34px, 8vw, 48px); }
  .login-story-copy > p:last-child { max-width: 330px; margin-top: 12px; font-size: 14px; }
  .login-story-note { width: min(330px, 68%); margin: -14px 0 15px; }
  .login-story-foot { font-size: 10px; }
  .login-panel { min-height: 490px; padding: 45px 24px 60px; }
  .login-panel-foot { bottom: 18px; }
}

@media (max-width: 400px) {
  .login-story { min-height: 390px; }
  .login-story-note { width: min(300px, 82%); }
  .agent-contact-status { display: none; }
  .agent-contact-row { gap: 4px; padding: 5px; }
}

@media (max-width: 640px) {
  #root main { padding-right: 14px; padding-left: 14px; }
  #root header.sticky { gap: 10px; padding-bottom: 10px; }
  #root header.sticky > div:last-child { width: 100%; justify-content: space-between; }
  #root header.sticky > div:last-child button { min-width: 0; padding-inline: 11px; font-size: 12px; }
  .dialer-card { padding: 18px 16px; }
  .dial-key { height: 54px; }
  .setup-note { padding: 15px; }
}

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

/* Calm dashboard system: neutral surfaces, one action color, native system type. */
:root {
  color-scheme: light;
  --ui-page: #f7f6f4;
  --ui-surface: #ffffff;
  --ui-edge: #e8e3dd;
  --ui-raised: 0 1px 2px rgba(40, 32, 24, .035);
  --ui-inset: inset 0 1px 2px rgba(40, 32, 24, .035);
  --ui-accent: #9a3412;
  --ui-accent-fill: #c2410c;
  --ui-accent-hover: #9a3412;
  --ui-accent-soft: rgba(234, 88, 12, .09);
  --ui-accent-border: rgba(194, 65, 12, .24);
  --ui-focus: rgba(194, 65, 12, .34);
}
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
html.dark {
  color-scheme: dark;
  --ui-page: #141210;
  --ui-surface: #1c1a18;
  --ui-edge: #332e29;
  --ui-raised: 0 1px 2px rgba(0, 0, 0, .2);
  --ui-inset: inset 0 1px 2px rgba(0, 0, 0, .18);
  --ui-accent: #fdba74;
  --ui-accent-fill: #c2410c;
  --ui-accent-hover: #9a3412;
  --ui-accent-soft: rgba(251, 146, 60, .12);
  --ui-accent-border: rgba(251, 146, 60, .28);
  --ui-focus: rgba(251, 146, 60, .42);
}
body { background: var(--ui-page); }
#root .grid.min-h-screen.grid-cols-\[260px_minmax\(0\,1fr\)\],
#root main { background: var(--ui-page); }
#root aside.sticky { background: var(--ui-surface); border-color: var(--ui-edge); }
#root header.sticky { background: color-mix(in srgb, var(--ui-page) 94%, transparent); border-color: var(--ui-edge); }
#root .rounded-2xl.border,
#root .rounded-3xl.border,
#root article.rounded-2xl {
  border-color: var(--ui-edge);
  box-shadow: var(--ui-raised);
}
#root .font-black, #root h1.font-black, #root h2.font-black, #root h3.font-black { font-weight: 650; letter-spacing: -.03em; }
#root .bg-blue-600 { background-color: var(--ui-accent-fill); }
#root .hover\:bg-blue-500:hover { background-color: var(--ui-accent-hover); }
#root .nav-group button.bg-blue-600\/10 { color: var(--ui-accent); background-color: var(--ui-accent-soft); box-shadow: inset 3px 0 0 var(--ui-accent-fill); }

/* Brand accents share one token family. Status colors stay semantic. */
#root [class*="text-blue-"] { color: var(--ui-accent) !important; }
#root [class*="text-purple-"], #root [class*="text-violet-"], #root [class*="text-indigo-"] { color: var(--ui-accent) !important; }
#root [class*="bg-blue-500/"], #root [class*="bg-blue-600/"], #root [class*="bg-blue-400/"] { background-color: var(--ui-accent-soft) !important; }
#root [class*="border-blue-"] { border-color: var(--ui-accent-border) !important; }
#root [class*="ring-blue-"] { --tw-ring-color: var(--ui-focus) !important; }
#root [class*="shadow-blue-"] { --tw-shadow-color: var(--ui-accent-border) !important; }
#root [class*="hover:bg-blue-"]:hover { background-color: var(--ui-accent-soft) !important; }
#root [class*="hover:text-blue-"]:hover { color: var(--ui-accent-hover) !important; }
#root input:focus, #root select:focus, #root textarea:focus,
#root input:focus-visible, #root select:focus-visible, #root textarea:focus-visible {
  border-color: var(--ui-accent-fill);
  box-shadow: 0 0 0 3px var(--ui-focus);
}
#root button:focus-visible, #root a:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
#root .call-action-primary { border-color: var(--ui-accent-fill); background: var(--ui-accent-fill); color: #fff; }
#root .call-action-primary:hover { background: var(--ui-accent-hover); }
#root .call-status.is-live { border-color: var(--ui-accent-border); background: var(--ui-accent-soft); color: var(--ui-accent); }
.dial-key:hover { border-color: var(--ui-accent-border); }
.dialer-tip-icon, .setup-note-icon { background: var(--ui-accent-soft); color: var(--ui-accent); }
@media (min-width: 1024px) {
  #root main { padding: 24px 32px; }
}
#view { animation: dashboard-arrive 240ms cubic-bezier(.2, .7, .25, 1) both; }
@keyframes dashboard-arrive {
  from { opacity: .65; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #view { animation: none; }
}

/* Call history is laid out as a calm, responsive list with actions sized for touch. */
.call-history-list { overflow: hidden; border: 1px solid var(--ui-edge); border-radius: 18px; background: var(--ui-surface); }
.call-history-row { display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(80px, .65fr) minmax(90px, .7fr) minmax(220px, 1.4fr); align-items: center; gap: 14px; min-height: 76px; padding: 12px 16px; border-bottom: 1px solid var(--ui-edge); color: inherit; transition: background-color 140ms ease; }
.call-history-row:last-child { border-bottom: 0; }
.call-history-row.is-clickable { cursor: pointer; }
.call-history-row.is-clickable:hover { background: color-mix(in srgb, var(--ui-page) 65%, var(--ui-surface)); }
.call-history-customer { display: flex; min-width: 0; align-items: center; gap: 11px; }
.call-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid var(--ui-edge); border-radius: 50%; background: var(--ui-page); color: #536174; font-size: 14px; font-weight: 650; }
.call-history-customer-copy { display: grid; min-width: 0; gap: 3px; }
.call-history-customer-copy strong { overflow: hidden; color: inherit; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.call-history-customer-copy small, .call-history-subtext { color: #758092; font-size: 12px; line-height: 1.4; }
.call-history-meta { display: grid; justify-items: start; gap: 5px; min-width: 0; }
.call-direction, .call-status { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px; border: 1px solid var(--ui-edge); border-radius: 999px; background: var(--ui-page); color: #566274; font-size: 11px; font-weight: 600; white-space: nowrap; }
.call-direction.is-incoming { color: #16794a; }
.call-status.is-live { border-color: rgba(37, 99, 235, .2); background: rgba(37, 99, 235, .07); color: #2563eb; }
.call-status.is-muted { color: #7b8492; }
.call-history-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 8px; }
.call-action-primary, .call-action-secondary, .call-action-danger, .call-action-delete { display: inline-flex; min-height: 38px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--ui-edge); border-radius: 11px; background: var(--ui-surface); color: #465264; font: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
.call-action-primary { padding: 0 13px; border-color: #2563eb; background: #2563eb; color: white; }
.call-action-primary:hover { background: #1d4ed8; }
.call-action-secondary { padding: 0 12px; }
.call-action-secondary:hover { border-color: #b7c0cd; background: var(--ui-page); }
.call-action-secondary.is-approved { color: #16794a; }
.call-action-danger { padding: 0 13px; border-color: rgba(220, 38, 38, .2); color: #c23434; }
.call-action-danger:hover { background: rgba(220, 38, 38, .06); }
.call-action-delete { width: 38px; padding: 0; color: #778294; }
.call-action-delete:hover { border-color: rgba(220, 38, 38, .25); color: #c23434; }
.call-action-delete svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html.dark .call-history-customer-copy small, html.dark .call-history-subtext { color: #9aa3b1; }
html.dark .call-avatar { color: #d4dae3; }
html.dark .call-direction.is-incoming { color: #6ed29b; }
html.dark .call-action-secondary, html.dark .call-action-delete, html.dark .call-action-danger { background: var(--ui-surface); color: #c4cad4; }
html.dark .call-action-danger { color: #ff8d8d; }
html.dark .call-action-delete:hover, html.dark .call-action-secondary:hover { background: #22252a; }

@media (max-width: 900px) {
  .call-history-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding: 14px; }
  .call-history-customer { grid-column: 1; }
  .call-history-meta { grid-column: 2; justify-items: end; }
  .call-history-meta:nth-of-type(2) { grid-row: 2; grid-column: 1; display: flex; align-items: center; gap: 8px; }
  .call-history-meta:nth-of-type(3) { grid-row: 2; grid-column: 2; }
  .call-history-actions { grid-row: 3; grid-column: 1 / -1; justify-content: flex-start; padding-top: 4px; }
}
@media (max-width: 420px) {
  .call-history-row { padding: 12px; }
  .call-history-actions { flex-wrap: wrap; }
  .call-action-primary, .call-action-secondary, .call-action-danger { min-height: 40px; }
}

/* Single visual system shared by every active workspace tab. */
#root { color: #29231f; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; }
#root button, #root input, #root select, #root textarea { font-family: inherit; }
#root button { letter-spacing: -.005em; }
#root button > svg, #root a > svg { width: 18px; height: 18px; flex: 0 0 auto; stroke-width: 1.9; }
#root .nav-icon { width: 20px; height: 20px; opacity: 1; }
#root .nav-group button { min-height: 44px; color: #626b78; }
#root .nav-group button:hover { color: #29231f; }
#root .nav-group button.bg-blue-600\/10,
#root .nav-group button.bg-blue-600\/20 { color: var(--ui-accent) !important; background: var(--ui-accent-soft) !important; box-shadow: inset 3px 0 0 var(--ui-accent-fill); }
html.dark #root .nav-group button { color: #bbc1c9; }
html.dark #root .nav-group button.bg-blue-600\/10,
html.dark #root .nav-group button.bg-blue-600\/20 { color: var(--ui-accent) !important; }
#root .nav-unread { display: inline-grid; min-width: 20px; height: 20px; margin-left: auto; place-items: center; border-radius: 999px; background: var(--ui-accent-fill); color: white; font-size: 11px; font-weight: 700; }
#root .team-chat-page { display: grid; gap: 18px; min-height: min(760px, calc(100vh - 150px)); }
#root .team-chat-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#root .team-chat-heading h1 { margin: 3px 0 0; font-size: 28px; font-weight: 650; letter-spacing: -.035em; }
#root .team-chat-heading p:last-child { margin: 5px 0 0; color: #737b86; font-size: 13px; }
#root .team-chat-layout { display: grid; min-height: 520px; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--ui-edge); border-radius: 18px; background: var(--ui-surface); box-shadow: var(--ui-raised); }
#root .team-chat-sidebar { min-width: 0; border-right: 1px solid var(--ui-edge); }
#root .team-chat-sidebar-heading { display: flex; height: 58px; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--ui-edge); font-size: 14px; }
#root .team-chat-sidebar-heading button { width: 32px; height: 32px; border: 1px solid var(--ui-edge); border-radius: 10px; background: var(--ui-page); color: var(--ui-accent); font-size: 20px; }
#root .team-chat-list { display: grid; max-height: 650px; overflow-y: auto; padding: 7px; }
#root .team-chat-list-item { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: left; }
#root .team-chat-list-item:hover, #root .team-chat-list-item.is-selected { background: var(--ui-page); }
#root .team-chat-list-item.is-selected { box-shadow: inset 3px 0 0 var(--ui-accent-fill); }
#root .team-chat-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid var(--ui-edge); border-radius: 50%; background: var(--ui-page); color: var(--ui-accent); font-size: 12px; font-weight: 700; }
#root .team-chat-list-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
#root .team-chat-list-copy b, #root .team-chat-thread-heading b { overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
#root .team-chat-list-copy small { overflow: hidden; color: #78818d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
#root .team-chat-unread { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 99px; background: var(--ui-accent-fill); color: white; font-size: 10px; font-weight: 700; }
#root .team-chat-empty-list { padding: 14px; color: #78818d; font-size: 12px; line-height: 1.5; }
#root .team-chat-thread { display: grid; min-width: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
#root .team-chat-thread-heading { display: flex; min-width: 0; height: 58px; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--ui-edge); }
#root .team-chat-thread-heading > div { display: grid; min-width: 0; gap: 3px; }
#root .team-chat-thread-heading small { overflow: hidden; color: #78818d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
#root .team-chat-messages { display: flex; min-height: 300px; max-height: 590px; flex-direction: column; gap: 12px; overflow-y: auto; padding: 20px; }
#root .team-message { max-width: min(76%, 600px); padding: 11px 13px; border: 1px solid var(--ui-edge); border-radius: 14px 14px 14px 4px; background: var(--ui-page); }
#root .team-message.is-mine { align-self: flex-end; border-color: var(--ui-accent-border); border-radius: 14px 14px 4px 14px; background: var(--ui-accent-soft); }
#root .team-message-meta { display: flex; align-items: center; gap: 10px; color: #59616c; font-size: 11px; }
#root .team-message-meta b { font-weight: 650; }
#root .team-message-meta time { color: #828a95; font-size: 10px; }
#root .team-message p { margin: 6px 0 0; color: #33302d; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
#root .team-message-receipt { display: block; margin-top: 5px; color: var(--ui-accent); font-size: 10px; text-align: right; }
#root .team-contact-chip { display: inline-flex; margin-top: 7px; padding: 4px 8px; border-radius: 999px; background: var(--ui-surface); color: var(--ui-accent); font-size: 10px; font-weight: 650; }
#root .team-chat-compose { display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--ui-edge); }
#root .team-chat-contact { width: fit-content; max-width: 100%; height: 30px; border: 0; background: transparent; color: #737b86; font-size: 11px; }
#root .team-chat-compose-row { display: flex; align-items: end; gap: 9px; }
#root .team-chat-compose-row textarea { min-height: 42px; max-height: 120px; flex: 1; resize: vertical; padding: 11px 13px; border: 1px solid var(--ui-edge); border-radius: 12px; background: var(--ui-page); color: inherit; font-size: 13px; outline: none; }
#root .team-chat-compose-row button { min-width: 44px; height: 42px; padding: 0; }
#root .team-chat-placeholder { display: grid; flex: 1; align-content: center; justify-items: center; color: #717985; text-align: center; }
#root .team-chat-placeholder > span { display: grid; width: 48px; height: 48px; margin-bottom: 12px; place-items: center; border-radius: 15px; background: var(--ui-accent-soft); color: var(--ui-accent); }
#root .team-chat-placeholder b { color: #34302c; font-size: 15px; }
#root .team-chat-placeholder p { max-width: 270px; font-size: 12px; line-height: 1.5; }
#root .customer-tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px 5px 10px; border: 1px solid var(--ui-accent-border); border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 11px; font-weight: 650; }
#root .customer-tag-chip small { opacity: .75; font-size: 9px; }
#root .customer-tag-chip button { width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 15px; line-height: 1; }
#root #view > * { animation: workspace-enter 240ms cubic-bezier(.2,.7,.2,1) both; }
#root #view > .grid > section { animation: section-arrive 360ms cubic-bezier(.2,.7,.25,1) both; }
#root #view > .grid > section:nth-child(2) { animation-delay: 45ms; }
#root #view > .grid > section:nth-child(3) { animation-delay: 90ms; }
#root #view > .grid > section:nth-child(4) { animation-delay: 135ms; }
#root #view article, #root #view .call-history-row { transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
#root #view .dashboard-metric { position: relative; overflow: hidden; transform: translateZ(0); transition: transform 220ms cubic-bezier(.2,.7,.25,1), border-color 220ms ease, box-shadow 220ms ease; animation: metric-arrive 420ms cubic-bezier(.2,.7,.25,1) both; }
#root #view .dashboard-metric::before { position: absolute; top: 0; left: 20px; width: 28px; height: 2px; border-radius: 0 0 3px 3px; background: var(--ui-accent-fill); content: ""; transition: width 220ms ease; }
#root #view .dashboard-metric:hover { transform: translateY(-3px); border-color: var(--ui-accent-border); box-shadow: 0 12px 28px rgba(50, 37, 25, .09); }
#root #view .dashboard-metric:hover::before { width: 48px; }
#root .dashboard-metrics .dashboard-metric:nth-child(2) { animation-delay: 45ms; }
#root .dashboard-metrics .dashboard-metric:nth-child(3) { animation-delay: 90ms; }
#root .dashboard-metrics .dashboard-metric:nth-child(4) { animation-delay: 135ms; }
#root .dashboard-metrics .dashboard-metric:nth-child(5) { animation-delay: 180ms; }
#root .dashboard-metrics .dashboard-metric:nth-child(6) { animation-delay: 225ms; }
#root #view .call-history-row.is-clickable:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(50, 37, 25, .07); }
#root .team-chat-list-item { transition: background-color 160ms ease, transform 160ms ease; }
#root .team-chat-list-item:hover { transform: translateX(2px); }
#root .team-message { animation: message-arrive 180ms ease-out both; }
#root .call-insight-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 18px; }
#root .call-insight-strip article { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--ui-edge); border-radius: 14px; background: var(--ui-page); }
#root .call-insight-strip span, #root .call-insight-strip small { color: #77808b; font-size: 11px; }
#root .call-insight-strip strong { color: var(--ui-ink); font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
#root .call-review-panel { display: grid; gap: 16px; margin-top: 16px; padding: 18px; border: 1px solid var(--ui-edge); border-radius: 16px; background: var(--ui-surface); color: var(--ui-ink); box-shadow: var(--ui-raised); }
#root .call-review-panel p { color: inherit; }
@keyframes workspace-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes section-arrive { from { opacity: 0; translate: 0 7px; } to { opacity: 1; translate: 0 0; } }
@keyframes metric-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes message-arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  #root #view > *, #root #view > .grid > section, #root #view article, #root #view .call-history-row, #root .team-chat-list-item, #root .team-message,
  .login-story-photo, .login-story::after, .login-story-copy, .login-story-note, .login-card { animation: none !important; transition: none !important; }
}
html.dark #root .team-message p, html.dark #root .team-chat-placeholder b { color: #e4e0dc; }
html.dark #root .team-message-meta { color: #c9c2bb; }
html.dark #root .team-chat-list-copy small, html.dark #root .team-chat-thread-heading small { color: #a29b94; }
@media (max-width: 760px) {
  #root .team-chat-page { min-height: calc(100vh - 170px); }
  #root .team-chat-layout { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  #root .team-chat-sidebar { border-right: 0; border-bottom: 1px solid var(--ui-edge); }
  #root .team-chat-list { display: flex; max-height: 128px; gap: 4px; overflow-x: auto; }
  #root .team-chat-list-item { min-width: 190px; }
  #root .team-chat-messages { min-height: 250px; max-height: calc(100dvh - 390px); padding: 14px; }
  #root .team-message { max-width: 90%; }
}
@media (max-width: 520px) {
  .mobile-tab-bar { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-right: 5px; padding-left: 5px; }
  .mobile-tab { font-size: 9px; }
  #root .team-chat-heading h1 { font-size: 24px; }
  #root .team-chat-heading > button { min-height: 38px; padding: 0 10px; font-size: 12px; }
}

/* Prevent mobile browsers from zooming the whole page when a small form field is focused. */
@media (max-width: 760px) {
  input,
  select,
  textarea,
  [contenteditable="true"] {
    font-size: 16px !important;
  }

  #root .customers-page > .grid > section > div:last-child {
    width: 100%;
    justify-content: flex-start;
  }

  #root .customers-page [data-action="add-customer"] {
    min-height: 44px;
    white-space: nowrap;
  }
}

/* Keep sign-in comfortable on small screens and make the agent home about work, not a second dialer. */
.agent-home-layout { display: grid; grid-template-columns: minmax(290px, 380px) minmax(0, 1fr); align-items: stretch; gap: 16px; }
.agent-contact-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.agent-contact-select.is-selected { background: var(--ui-accent-soft); }
.agent-contact-call { min-width: 52px; min-height: 42px; padding: 0 11px; border: 1px solid var(--ui-accent-border); border-radius: 11px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 12px; font-weight: 700; }
.agent-contact-empty { display: grid; min-height: 310px; align-content: center; justify-items: center; padding: 28px; text-align: center; }
.agent-contact-empty-icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 18px; background: var(--ui-accent-soft); color: var(--ui-accent); }
.agent-contact-empty-icon svg { width: 25px; height: 25px; }
.agent-contact-empty h2 { margin: 16px 0 0; color: var(--ui-ink); font-size: 18px; font-weight: 700; }
.agent-contact-empty p { max-width: 340px; margin: 7px 0 18px; color: var(--ui-muted); font-size: 13px; line-height: 1.55; }
@media (max-width: 760px) {
  .agent-home-layout { grid-template-columns: minmax(0, 1fr); }
  .login-shell { min-height: 100svh; grid-template-columns: minmax(0, 1fr); }
  .login-story { min-height: 210px; padding: 18px 20px; }
  .login-story-copy { padding-block: 20px 14px; }
  .login-story-copy h1 { font-size: clamp(30px, 7vw, 40px); }
  .login-story-copy > p:last-child { max-width: 320px; margin-top: 9px; font-size: 13px; }
  .login-story-note, .login-story-foot { display: none; }
  .login-panel { min-height: 0; padding: 26px 22px 24px; }
  .login-card h2 { font-size: clamp(27px, 7vw, 34px); }
  .login-intro { margin-bottom: 24px; }
  .login-panel-foot { position: static; margin-top: 25px; }
  .login-theme-toggle { min-height: 36px; padding-inline: 10px; font-size: 11px; }
}
@media (max-width: 390px) {
  .login-story { min-height: 185px; }
  .login-story-copy h1 { font-size: 29px; }
  .login-story-copy > p:last-child { max-width: 260px; font-size: 12px; }
  .login-panel { padding: 22px 18px; }
  .login-fields { gap: 15px; }
  .customer-desktop-table { display: none; }
  .customer-mobile-list { display: grid; gap: 9px; }
  .customer-mobile-card { display: grid; min-width: 0; grid-template-columns: 38px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; width: 100%; min-height: 70px; padding: 11px 12px; border: 1px solid var(--ui-edge); border-radius: 16px; background: var(--ui-surface); color: var(--ui-ink); text-align: left; box-shadow: 0 2px 8px rgba(28, 34, 44, .035); }
  .customer-mobile-card:active { border-color: var(--ui-accent-border); background: var(--ui-accent-soft); }
  .customer-mobile-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 13px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 12px; font-weight: 750; }
  .customer-mobile-main { display: grid; min-width: 0; gap: 4px; }
  .customer-mobile-main strong, .customer-mobile-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .customer-mobile-main strong { font-size: 13px; font-weight: 700; }
  .customer-mobile-main span { color: var(--ui-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
  .customer-mobile-status { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; border-radius: 999px; background: var(--ui-page); color: var(--ui-muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
  .customer-status-vip { background: #fff2db; color: #9a590b; }
  .customer-status-escalated { background: #fff0ed; color: #ae392a; }
  html.dark .customer-status-vip { background: #382919; color: #f4bd70; }
  html.dark .customer-status-escalated { background: #3a211e; color: #ff9c8d; }
  .customer-mobile-chevron { width: 16px; height: 16px; color: var(--ui-muted); }
  .customer-mobile-empty { padding: 30px 18px; border: 1px dashed var(--ui-edge); border-radius: 16px; color: var(--ui-muted); text-align: center; font-size: 13px; }
  .customer-details-modal { max-height: 88dvh; overflow-y: auto; }
  .customer-details-heading { display: flex; align-items: center; gap: 12px; }
  .customer-details-primary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--ui-edge); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
  .customer-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin: 16px 0 0; }
  .customer-details-grid div { min-width: 0; }
  .customer-details-grid dt { margin-bottom: 4px; color: var(--ui-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
  .customer-details-grid dd { overflow-wrap: anywhere; margin: 0; color: var(--ui-ink); font-size: 12px; font-weight: 600; }
  .customer-details-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
  .agent-contact-edit { min-width: 44px; padding-inline: 7px; }
  .agent-contact-call { min-width: 46px; padding-inline: 7px; }
}
.login-submit:disabled, #startCall:disabled { cursor: progress; opacity: .82; transform: none; }
.login-button-spinner, .call-button-spinner { display: inline-block; width: 14px; height: 14px; flex: 0 0 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: button-spin .7s linear infinite; vertical-align: -2px; }
.call-button-spinner { width: 17px; height: 17px; flex-basis: 17px; }
@keyframes button-spin { to { transform: rotate(360deg); } }
.min-h-36 { min-height: 9rem; }
.w-fit { width: fit-content; }

/* Dedicated SaaS operator console. This route intentionally has no workspace shell. */
body[data-route="platform"] { --platform-ink: #25221f; --platform-muted: #77716b; --platform-line: #e9e4de; --platform-canvas: #f6f4f1; --platform-card: #fff; --platform-orange: #bd4b16; background: var(--platform-canvas); color: var(--platform-ink); }
html.dark body[data-route="platform"] { --platform-ink: #f4f1ed; --platform-muted: #aaa39b; --platform-line: #34312e; --platform-canvas: #151413; --platform-card: #1e1c1a; --platform-orange: #ed8750; }
.platform-shell { min-height: 100dvh; display: grid; grid-template-columns: 252px minmax(0, 1fr); background: var(--platform-canvas); color: var(--platform-ink); }
.platform-rail { position: sticky; top: 0; display: flex; height: 100dvh; flex-direction: column; gap: 24px; padding: 22px 16px 17px; border-right: 1px solid var(--platform-line); background: var(--platform-card); }
.platform-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px; color: var(--platform-ink); text-decoration: none; font-size: 15px; font-weight: 650; }
.platform-brand > span:last-child { display: grid; grid-template-columns: auto auto; column-gap: 4px; align-items: baseline; }
.platform-brand small { grid-column: 1 / -1; margin-top: 2px; color: var(--platform-muted); font-size: 9px; font-weight: 750; letter-spacing: .13em; }
.platform-brand-mark { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 12px; background: var(--platform-orange); color: white; font-size: 20px; font-weight: 800; }
.platform-rail-label { padding: 2px 9px; color: var(--platform-muted); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.platform-navigation { display: grid; gap: 5px; }
.platform-nav-item { display: flex; min-height: 43px; align-items: center; gap: 11px; padding: 0 11px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--platform-muted); text-align: left; font: inherit; font-size: 12px; font-weight: 620; cursor: pointer; }
.platform-nav-item .nav-icon { width: 17px; height: 17px; }
.platform-nav-item:hover { background: var(--platform-canvas); color: var(--platform-ink); }
.platform-nav-item.is-active { border-color: color-mix(in srgb, var(--platform-orange) 18%, transparent); background: color-mix(in srgb, var(--platform-orange) 9%, var(--platform-card)); color: var(--platform-orange); }
.platform-nav-item i { display: grid; min-width: 20px; height: 20px; place-items: center; margin-left: auto; border-radius: 7px; background: var(--platform-orange); color: white; font-size: 10px; font-style: normal; }
.platform-rail-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 10px; border-top: 1px solid var(--platform-line); }
.platform-online-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #328d61; box-shadow: 0 0 0 4px rgb(50 141 97 / 12%); }
.platform-rail-foot span:last-child { display: grid; gap: 3px; font-size: 11px; }.platform-rail-foot small { color: var(--platform-muted); font-size: 10px; }
.platform-main { min-width: 0; background: var(--platform-canvas) !important; }.platform-topbar { position: sticky; z-index: 4; top: 0; display: flex; min-height: 78px; align-items: center; gap: 18px; padding: 12px clamp(18px, 4vw, 52px); border-bottom: 1px solid var(--platform-line); background: color-mix(in srgb, var(--platform-card) 94%, transparent); backdrop-filter: blur(16px); }
.platform-heading { min-width: 0; margin-right: auto; }.platform-heading p { margin: 0; font-size: 15px; font-weight: 720; }.platform-heading span { display: block; overflow: hidden; margin-top: 4px; color: var(--platform-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.platform-top-actions { display: flex; align-items: center; gap: 10px; }.platform-account-chip { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 4px 12px 4px 5px; border: 1px solid var(--platform-line); border-radius: 13px; background: color-mix(in srgb, var(--platform-card) 88%, var(--platform-canvas)); }.platform-account-avatar { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--platform-orange) 13%, var(--platform-card)); color: var(--platform-orange); font-size: 11px; font-weight: 800; }.platform-account-name { display: grid; gap: 2px; }.platform-account-name b { max-width: 120px; overflow: hidden; color: var(--platform-ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.platform-account-name small { color: var(--platform-muted); font-size: 9px; }
.platform-action-group { display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--platform-line); border-radius: 13px; background: var(--platform-card); box-shadow: 0 2px 8px rgb(38 30 20 / 4%); }.platform-action-group button { display: inline-flex; min-width: 36px; min-height: 36px; align-items: center; justify-content: center; gap: 7px; padding: 0 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--platform-muted); font-size: 11px; font-weight: 680; cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease; }.platform-action-group button:hover { border-color: var(--platform-line); background: var(--platform-canvas); color: var(--platform-orange); }.platform-action-group button:focus-visible { outline: 2px solid var(--platform-orange); outline-offset: 2px; }.platform-action-group button:disabled { opacity: .55; cursor: wait; }.platform-action-group svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.platform-signout-button { color: #b64c30 !important; }.platform-signout-button:hover { background: color-mix(in srgb, #b64c30 8%, var(--platform-card)) !important; }
.platform-mobile-brand,.platform-mobile-nav { display: none; }.platform-content { width: min(1360px, 100%); margin: 0 auto; padding: 34px clamp(18px, 4vw, 52px) 60px; }.platform-page-content { display: grid; gap: 20px; animation: platform-enter .28s ease-out both; }@keyframes platform-enter { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.platform-welcome { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 4px 0 3px; }.platform-welcome h1,.platform-section-intro h1 { margin: 6px 0 0; color: var(--platform-ink); font-size: clamp(25px, 3vw, 34px); font-weight: 760; letter-spacing: -.045em; }.platform-welcome > div > p:last-child,.platform-section-intro > p:last-child { margin: 7px 0 0; color: var(--platform-muted); font-size: 12px; line-height: 1.6; }.platform-eyebrow { margin: 0; color: var(--platform-orange); font-size: 9px; font-weight: 820; letter-spacing: .13em; }.platform-admin-pill,.platform-muted-label { display: inline-flex; align-items: center; min-height: 29px; padding: 0 10px; border: 1px solid var(--platform-line); border-radius: 999px; color: var(--platform-muted); font-size: 10px; font-weight: 650; }
.platform-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.platform-kpi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }.platform-kpi { position: relative; display: grid; min-width: 0; gap: 8px; padding: 17px; border: 1px solid var(--platform-line); border-radius: 15px; background: var(--platform-card); box-shadow: 0 3px 12px rgb(38 30 20 / 3%); }.platform-kpi .platform-eyebrow { color: var(--platform-muted); letter-spacing: .08em; }.platform-kpi strong { overflow: hidden; color: var(--platform-ink); font-size: clamp(22px, 2.7vw, 30px); font-variant-numeric: tabular-nums; letter-spacing: -.04em; text-overflow: ellipsis; }.platform-kpi small { color: var(--platform-muted); font-size: 10px; line-height: 1.5; }.platform-kpi-icon { display: grid; width: 31px; height: 31px; place-items: center; margin-bottom: 3px; border-radius: 10px; background: color-mix(in srgb, var(--platform-orange) 10%, var(--platform-card)); color: var(--platform-orange); }.platform-kpi-icon svg { width: 16px; height: 16px; }
.platform-overview-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 13px; }.platform-panel { min-width: 0; padding: 19px; border: 1px solid var(--platform-line); border-radius: 15px; background: var(--platform-card); box-shadow: 0 3px 12px rgb(38 30 20 / 3%); }.platform-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 15px; }.platform-panel-heading h2 { margin: 5px 0 0; color: var(--platform-ink); font-size: 16px; font-weight: 730; }.platform-panel-heading p:last-child { margin: 4px 0 0; color: var(--platform-muted); font-size: 10px; }.platform-text-link { flex: 0 0 auto; border: 0; background: none; color: var(--platform-orange); font-size: 11px; font-weight: 700; cursor: pointer; }.platform-status-list { display: grid; gap: 9px; }.platform-status-row { display: flex; align-items: center; gap: 9px; color: var(--platform-muted); font-size: 11px; }.platform-status-row b { margin-left: auto; color: var(--platform-ink); font-variant-numeric: tabular-nums; }.platform-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #a49d95; }.platform-status-dot.is-active { background: #328d61; }.platform-status-dot.is-pending { background: #d49525; }.platform-status-dot.is-suspended { background: #d06b33; }.platform-status-dot.is-closed { background: #817b76; }.platform-mini-stats { display: flex; flex-wrap: wrap; gap: 8px 15px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--platform-line); color: var(--platform-muted); font-size: 10px; }.platform-mini-stats b { color: var(--platform-ink); }.platform-queue-row { display: flex; width: 100%; min-height: 54px; align-items: center; gap: 10px; border: 0; border-top: 1px solid var(--platform-line); background: transparent; color: var(--platform-ink); text-align: left; cursor: pointer; }.platform-queue-row:hover b,.platform-queue-row:hover .platform-chevron { color: var(--platform-orange); }.platform-queue-row > span:nth-child(2) { display: grid; gap: 4px; }.platform-queue-row b { font-size: 11px; }.platform-queue-row small { color: var(--platform-muted); font-size: 10px; }.platform-queue-row strong,.platform-chevron { margin-left: auto; color: var(--platform-orange); }.platform-queue-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: var(--platform-canvas); color: var(--platform-orange); }
.platform-recent-list { display: grid; }.platform-recent-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; min-height: 55px; border-top: 1px solid var(--platform-line); }.platform-tenant-mark { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--platform-orange) 10%, var(--platform-card)); color: var(--platform-orange); font-size: 10px; font-weight: 800; }.platform-recent-copy,.platform-business-main { display: grid; min-width: 0; gap: 4px; }.platform-recent-copy b,.platform-business-main b { overflow: hidden; color: var(--platform-ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.platform-recent-copy small,.platform-business-main small { overflow: hidden; color: var(--platform-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.platform-recent-row > strong { font-size: 11px; font-variant-numeric: tabular-nums; }.platform-recent-row > strong small { color: var(--platform-muted); font-size: 9px; font-weight: 500; }.platform-state-chip { display: inline-flex; min-height: 23px; align-items: center; padding: 0 8px; border-radius: 999px; background: #eeeae5; color: #655e57; font-size: 9px; font-weight: 700; }.platform-state-chip.is-active { background: #e7f4ec; color: #28734a; }.platform-state-chip.is-pending { background: #fff3d8; color: #916515; }.platform-state-chip.is-suspended { background: #fff0e8; color: #a94c21; }html.dark .platform-state-chip { background: #302d2a; color: #c6bfb8; }html.dark .platform-state-chip.is-active { background: #183425; color: #8bd4a7; }html.dark .platform-state-chip.is-pending { background: #3b301b; color: #efc978; }html.dark .platform-state-chip.is-suspended { background: #40271d; color: #f1a47e; }
.platform-usage-list { display: grid; gap: 16px; }.platform-usage-row { display: grid; gap: 7px; }.platform-usage-label { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; }.platform-usage-label > span:nth-child(2) { display: grid; gap: 3px; }.platform-usage-label b { color: var(--platform-ink); font-size: 11px; }.platform-usage-label small,.platform-usage-foot { color: var(--platform-muted); font-size: 9px; }.platform-usage-label > strong { font-size: 11px; font-variant-numeric: tabular-nums; }.platform-usage-track { height: 5px; overflow: hidden; border-radius: 99px; background: var(--platform-canvas); }.platform-usage-track span { display: block; height: 100%; border-radius: inherit; background: var(--platform-orange); }.platform-usage-foot { display: block; }.platform-search { display: flex; min-height: 42px; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--platform-line); border-radius: 11px; background: var(--platform-card); color: var(--platform-muted); }.platform-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--platform-ink); font: inherit; font-size: 12px; }.platform-business-list { display: grid; gap: 10px; }.platform-business-row { display: grid; grid-template-columns: 38px minmax(150px, 1fr) auto auto auto auto 155px; align-items: center; gap: 13px; padding: 13px; border: 1px solid var(--platform-line); border-radius: 14px; background: var(--platform-card); }.platform-business-row[hidden] { display: none; }.platform-business-metric { display: grid; gap: 3px; justify-items: end; }.platform-business-metric b { font-size: 11px; font-variant-numeric: tabular-nums; }.platform-business-metric small,.platform-select-label > span { color: var(--platform-muted); font-size: 9px; }.platform-select-label { display: grid; gap: 5px; }.platform-select-label select { min-height: 34px; border: 1px solid var(--platform-line); border-radius: 8px; background: var(--platform-card); color: var(--platform-ink); font-size: 10px; }.platform-empty { padding: 24px; color: var(--platform-muted); text-align: center; font-size: 12px; }
body[data-route="platform"] .platform-panel .text-slate-500 { color: var(--platform-muted); }body[data-route="platform"] .platform-panel input:not([type="checkbox"]),body[data-route="platform"] .platform-panel select { border-color: var(--platform-line); background: var(--platform-card); color: var(--platform-ink); }
@media (max-width: 1050px) { .platform-shell { grid-template-columns: 214px minmax(0,1fr); }.platform-rail { padding-inline: 11px; }.platform-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.platform-business-row { grid-template-columns: 38px minmax(120px,1fr) auto auto; }.platform-business-row .platform-business-metric:nth-of-type(2),.platform-business-row .platform-select-label { grid-column: 2 / -1; justify-items: stretch; }.platform-business-row .platform-business-metric:nth-of-type(2) { display: none; } }
@media (max-width: 760px) { .platform-shell { display: block; padding-bottom: env(safe-area-inset-bottom); }.platform-rail { display: none; }.platform-topbar { position: relative; min-height: 64px; flex-wrap: wrap; gap: 10px; padding: 10px 14px; }.platform-mobile-brand { display: flex; align-items: center; gap: 7px; margin-right: auto; font-size: 12px; }.platform-mobile-brand .platform-brand-mark { width: 29px; height: 29px; border-radius: 9px; font-size: 16px; }.platform-mobile-brand small { color: var(--platform-muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; }.platform-heading { display: none; }.platform-top-actions { gap: 6px; }.platform-account-chip { min-height: 40px; padding-right: 6px; }.platform-account-name { display: none; }.platform-action-group { gap: 1px; padding: 3px; }.platform-action-group button { min-width: 34px; min-height: 34px; padding-inline: 7px; }.platform-mobile-nav { position: sticky; z-index: 5; top: 0; display: flex; gap: 5px; overflow-x: auto; padding: 7px 10px; border-bottom: 1px solid var(--platform-line); background: var(--platform-card); scrollbar-width: none; }.platform-mobile-nav::-webkit-scrollbar { display: none; }.platform-mobile-nav button { display: flex; min-height: 37px; flex: 0 0 auto; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--platform-muted); font-size: 10px; font-weight: 650; }.platform-mobile-nav button .nav-icon { width: 14px; height: 14px; }.platform-mobile-nav button.is-active { border-color: color-mix(in srgb, var(--platform-orange) 22%, transparent); background: color-mix(in srgb, var(--platform-orange) 9%, var(--platform-card)); color: var(--platform-orange); }.platform-content { padding: 21px 14px 35px; }.platform-overview-grid { grid-template-columns: minmax(0,1fr); }.platform-kpi-grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }.platform-kpi { padding: 13px; }.platform-kpi strong { font-size: 24px; }.platform-business-row { grid-template-columns: 36px minmax(0,1fr) auto; gap: 9px; }.platform-business-row > .platform-business-metric { display: none; }.platform-business-row .platform-select-label { grid-column: 2 / -1; }.platform-recent-row { grid-template-columns: 34px minmax(0,1fr) auto; }.platform-recent-row > strong { display: none; } }

.platform-business-actions { display: grid; gap: 8px; }
.platform-business-actions .platform-select-label { min-width: 0; }
.platform-delete-business { min-height: 35px; padding: 0 10px; border: 1px solid color-mix(in srgb, #c2410c 32%, var(--platform-line)); border-radius: 8px; background: color-mix(in srgb, #c2410c 7%, var(--platform-card)); color: #c2410c; font-size: 10px; font-weight: 700; cursor: pointer; }
.platform-delete-business:hover { background: color-mix(in srgb, #c2410c 13%, var(--platform-card)); }
.platform-delete-business:disabled { opacity: .55; cursor: wait; }
@media (max-width: 1050px) { .platform-business-actions { grid-column: 2 / -1; }.platform-business-row .platform-business-actions .platform-select-label { grid-column: auto; justify-items: stretch; } }
@media (max-width: 760px) { .platform-business-actions { grid-column: 2 / -1; grid-template-columns: minmax(0,1fr) auto; align-items: end; }.platform-business-actions .platform-delete-business { min-height: 42px; } }
@media (max-width: 390px) { .platform-signout-label { display: none; }.platform-kpi-grid,.platform-kpi-grid-3 { gap: 8px; }.platform-kpi { padding: 11px; }.platform-kpi small { font-size: 9px; }.platform-panel { padding: 14px; }.platform-section-intro h1,.platform-welcome h1 { font-size: 26px; } }

.platform-line-list { display: grid; gap: 0; padding: 0 18px; }
.platform-line-row { display: grid; grid-template-columns: minmax(190px,1.1fr) minmax(150px,.9fr) auto minmax(120px,.65fr) auto; align-items: center; gap: 16px; min-height: 76px; border-bottom: 1px solid var(--platform-line); }
.platform-line-row:last-child { border-bottom: 0; }
.platform-line-row[hidden] { display: none; }
.platform-line-business { display: flex; min-width: 0; align-items: center; gap: 10px; }
.platform-line-business > span:last-child { display: grid; min-width: 0; gap: 4px; }
.platform-line-business b { overflow: hidden; color: var(--platform-ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.platform-line-business small,.platform-line-date { color: var(--platform-muted); font-size: 9px; }

.platform-request-list { display: grid; gap: 0; }
.platform-request-count { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--platform-line); border-radius: 999px; color: var(--platform-muted); font-size: 10px; font-weight: 700; }
.platform-request-toolbar { display: grid; grid-template-columns: minmax(0,1fr) 180px; gap: 9px; margin: 0 0 10px; }
.platform-request-search { display: flex; min-width: 0; min-height: 42px; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--platform-line); border-radius: 10px; background: var(--platform-card); color: var(--platform-muted); }
.platform-request-search > span { font-size: 20px; line-height: 1; }
.platform-request-search input,.platform-request-status-filter select { width: 100%; min-width: 0; min-height: 40px; border: 0; outline: 0; background: transparent; color: var(--platform-ink); font: inherit; font-size: 11px; }
.platform-request-status-filter { display: flex; min-width: 0; align-items: center; padding: 0 10px; border: 1px solid var(--platform-line); border-radius: 10px; background: var(--platform-card); }
.platform-request-rows { display: grid; }
.platform-number-request { border-top: 1px solid var(--platform-line); }
.platform-number-request[hidden] { display: none; }
.platform-number-request-summary { display: grid; grid-template-columns: minmax(180px,1fr) auto minmax(110px,auto) auto; min-height: 66px; align-items: center; gap: 15px; cursor: pointer; list-style: none; }
.platform-number-request-summary::-webkit-details-marker { display: none; }
.platform-number-request-summary::marker { content: ""; }
.platform-request-main { display: grid; min-width: 0; gap: 5px; }
.platform-request-main b { overflow: hidden; color: var(--platform-ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.platform-request-main small,.platform-request-date { overflow: hidden; color: var(--platform-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.platform-request-action { color: var(--platform-orange); font-size: 10px; font-weight: 700; white-space: nowrap; }
.platform-request-action span { display: inline-block; transition: transform .16s ease; }
.platform-number-request[open] .platform-request-action span { transform: rotate(180deg); }
.platform-number-request-summary:hover .platform-request-main b { color: var(--platform-orange); }
.platform-number-request-summary:focus-visible { outline: 2px solid var(--platform-orange); outline-offset: 3px; border-radius: 5px; }
.platform-number-request-form { display: grid; gap: 12px; padding: 0 0 16px; }
.platform-request-context { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--platform-muted); font-size: 10px; }
.platform-request-no-results { margin: 12px 0 0; padding: 16px; border: 1px dashed var(--platform-line); border-radius: 10px; color: var(--platform-muted); text-align: center; font-size: 11px; }
.platform-request-no-results[hidden] { display: none; }
@media (max-width: 760px) {
  .platform-request-toolbar { grid-template-columns: minmax(0,1fr); }
  .platform-number-request-summary { grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; padding: 11px 0; }
  .platform-number-request-summary > .platform-request-main { grid-column: 1; }
  .platform-number-request-summary > .platform-request-date { grid-column: 1; }
  .platform-number-request-summary > .platform-request-action { grid-column: 2; grid-row: 1 / span 2; }
  .platform-number-request-summary > .platform-state-chip,.platform-number-request-summary > span.badge { justify-self: start; }
}
.platform-line-number { color: var(--platform-ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.platform-line-configure { justify-self: end; }
.platform-page-note { margin: -8px 2px 0; color: var(--platform-muted); font-size: 10px; line-height: 1.6; }
@media (max-width: 760px) {
  .platform-line-list { padding-inline: 13px; }
  .platform-line-row { grid-template-columns: minmax(0,1fr) auto; gap: 9px 12px; padding: 13px 0; }
  .platform-line-business { grid-column: 1; }
  .platform-line-number { grid-column: 1; padding-left: 44px; }
  .platform-line-row > .platform-state-chip { grid-column: 2; grid-row: 1; justify-self: end; }
  .platform-line-date { grid-column: 1; padding-left: 44px; }
  .platform-line-configure { grid-column: 2; grid-row: 2 / span 2; }
}