:root {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #19231f;
  background: #f5f7f5;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #19231f;
  --muted: #7c8983;
  --line: #e7ece8;
  --green: #167b5a;
  --green-dark: #105e45;
  --pale-green: #eaf5ef;
  --orange: #e7a45f;
  --red: #bf4848;
  --shadow: 0 22px 70px rgba(34, 58, 47, .08);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #f5f7f5; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
[hidden] { display: none !important; }
.ambient { position: fixed; pointer-events: none; z-index: -1; filter: blur(1px); }
.ambient-one { width: 570px; height: 570px; right: -180px; top: -250px; border-radius: 50%; background: radial-gradient(circle, rgba(218, 238, 226, .62), rgba(218, 238, 226, 0) 70%); }
.ambient-two { width: 440px; height: 440px; left: 10%; bottom: -280px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 228, 207, .48), rgba(242, 228, 207, 0) 70%); }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 520px) 1fr; align-items: center; gap: clamp(48px, 10vw, 160px); max-width: 1320px; margin: 0 auto; padding: 48px clamp(24px, 6vw, 88px); }
.login-card { width: 100%; max-width: 410px; margin: auto; padding: 18px 0; }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: flex; align-items: center; gap: 3px; height: 25px; padding: 0 4px; }
.brand-mark span { display: block; width: 4px; border-radius: 8px; background: var(--green); }
.brand-mark span:nth-child(1) { height: 11px; opacity: .65; }
.brand-mark span:nth-child(2) { height: 21px; }
.brand-mark span:nth-child(3) { height: 15px; opacity: .8; }
.brand-name { font-family: Manrope, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .17em; }
.brand-name b { color: var(--green); font-weight: 800; }
.eyebrow { margin: 58px 0 12px; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.login-card h1 { margin: 0; font-family: Manrope, sans-serif; font-size: 39px; letter-spacing: -.04em; }
.muted { color: var(--muted); line-height: 1.65; }
.login-copy { margin: 14px 0 30px; font-size: 14px; }
.stack-form { display: grid; gap: 10px; }
.stack-form label, .field-label { font-size: 12px; font-weight: 700; color: #34443c; }
.stack-form input { height: 48px; border: 1px solid #dce5df; border-radius: 9px; background: rgba(255,255,255,.84); padding: 0 14px; outline: 0; transition: border .18s, box-shadow .18s; }
input:focus, textarea:focus, select:focus { border-color: #75af93 !important; box-shadow: 0 0 0 3px rgba(45, 140, 94, .11); outline: 0; }
.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 8px; padding: 0 15px; font-size: 12px; font-weight: 700; transition: transform .16s, background .16s, border .16s; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button-primary { background: var(--green); color: #fff; box-shadow: 0 7px 18px rgba(22, 123, 90, .16); }
.button-primary:hover:not(:disabled) { background: var(--green-dark); }
.button-wide { width: 100%; margin-top: 9px; min-height: 48px; }
.button-secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.button-secondary:hover:not(:disabled), .button-quiet:hover:not(:disabled) { background: #f1f5f2; border-color: #d6e2da; }
.button-quiet { color: #42564b; border-color: #e4ebe6; background: #fff; }
.button-danger { color: #fff; background: #b84444; }
.button-danger:hover:not(:disabled) { background: #a63838; }
.button-small { min-height: 34px; padding: 0 11px; font-size: 11px; }
.fine-print { margin-top: 18px; color: #9aa69f; font-size: 11px; }
.form-message { color: var(--red); font-size: 12px; line-height: 1.5; }
.login-side { min-height: 590px; position: relative; overflow: hidden; border: 1px solid rgba(221, 231, 225, .8); border-radius: 28px; background: linear-gradient(145deg, rgba(239,247,241,.8), rgba(250,248,242,.84)); display: flex; align-items: end; padding: 52px; box-shadow: 0 30px 100px rgba(43, 69, 55, .07); }
.orbit { border: 1px solid rgba(71, 142, 105, .12); border-radius: 50%; display: grid; place-items: center; position: absolute; }
.orbit-outer { width: 510px; height: 510px; top: 22px; right: -28px; transform: rotate(-25deg); }
.orbit-inner { width: 360px; height: 360px; border-color: rgba(71,142,105,.19); }
.orbit-core { width: 115px; height: 115px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff, #dceddf 65%, #b7d8c2); box-shadow: 0 0 70px rgba(81, 157, 108, .25), inset 0 0 20px rgba(255,255,255,.9); }
.orbit-outer::after, .orbit-inner::before { content: ""; width: 8px; height: 8px; position: absolute; border-radius: 50%; background: var(--orange); box-shadow: 0 0 18px rgba(231,164,95,.6); }
.orbit-outer::after { top: 69px; left: 100px; }
.orbit-inner::before { right: 4px; bottom: 78px; background: #4e9c76; }
.side-copy { position: relative; z-index: 1; }
.side-copy .eyebrow { margin: 0 0 14px; }
.side-copy h2 { margin: 0; font: 700 34px/1.2 Manrope, sans-serif; letter-spacing: -.04em; }
.side-copy p { color: var(--muted); font-size: 13px; }
.side-foot { position: absolute; right: 34px; bottom: 35px; display: flex; gap: 8px; align-items: center; color: #79877f; font-size: 10px; }
.live-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #54a97a; box-shadow: 0 0 0 3px rgba(84,169,122,.13); flex: 0 0 auto; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 4; width: 238px; display: flex; flex-direction: column; padding: 28px 17px 18px; border-right: 1px solid var(--line); background: rgba(251,252,251,.9); backdrop-filter: blur(16px); }
.sidebar-brand { padding: 2px 11px 36px; }
.workspace-label { padding: 0 12px 12px; color: #a2ada6; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.main-nav { display: grid; gap: 4px; }
.nav-button { position: relative; min-height: 43px; display: flex; align-items: center; gap: 12px; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: #75827a; text-align: left; font-size: 12px; font-weight: 600; }
.nav-button:hover { color: var(--ink); background: #f3f6f3; }
.nav-button.active { color: var(--green-dark); background: #eaf4ed; }
.nav-button.active::before { content: ""; position: absolute; left: -17px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--green); }
.nav-icon { width: 17px; text-align: center; font-size: 16px; line-height: 1; }
.sidebar-spacer { flex: 1; }
.sidebar-note { display: flex; align-items: center; gap: 11px; margin: 8px 5px 10px; padding: 12px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.sidebar-note strong, .sidebar-note small { display: block; }
.sidebar-note strong { font-size: 11px; }
.sidebar-note small { margin-top: 3px; color: #9aa49d; font-size: 10px; }
.logout-button { min-height: 38px; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: #87928b; text-align: left; font-size: 11px; }
.logout-button:hover { background: #f1f5f2; color: #34443c; }
.main-shell { width: calc(100% - 238px); margin-left: 238px; padding: 0 clamp(24px, 4.2vw, 62px) 72px; }
.topbar { min-height: 99px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.breadcrumb { color: #98a39c; font-size: 10px; }
.breadcrumb span { padding: 0 7px; color: #ccd4ce; }
.breadcrumb strong { color: #66746b; font-weight: 600; }
.topbar-title { margin-top: 8px; font: 700 21px Manrope, sans-serif; letter-spacing: -.03em; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.environment-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #e0e9e2; border-radius: 20px; background: #fff; color: #65746a; font-size: 10px; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #dce9df; border-radius: 50%; background: #eaf4ed; color: var(--green); font: 700 12px Manrope, sans-serif; }
.view-root { width: 100%; max-width: 1280px; margin: 0 auto; padding-top: 30px; }
.global-message { position: fixed; top: 18px; left: 50%; z-index: 8; max-width: min(640px, 90vw); padding: 12px 17px; border: 1px solid #e9d1a9; border-radius: 9px; background: #fff9ea; color: #75551e; box-shadow: var(--shadow); font-size: 12px; transform: translateX(-50%); }
.page-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 4px 0 25px; }
.page-heading-row h1 { margin: 0; font: 700 27px Manrope, sans-serif; letter-spacing: -.045em; }
.page-heading-row p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.eyebrow-inline { margin: 0 0 8px; color: var(--green); font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.stat-card, .panel, .agent-card { border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.88); box-shadow: 0 5px 21px rgba(39,65,51,.025); }
.stat-card { min-height: 120px; padding: 17px 18px; }
.stat-label { display: flex; justify-content: space-between; align-items: center; color: #839087; font-size: 10px; }
.stat-symbol { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: #eff6f0; color: var(--green); font-size: 13px; }
.stat-value { margin-top: 15px; font: 700 25px Manrope, sans-serif; letter-spacing: -.04em; }
.stat-foot { margin-top: 3px; color: #9ba69f; font-size: 10px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .85fr); gap: 14px; margin-top: 17px; }
.panel { padding: 19px; }
.panel-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 17px; }
.panel-heading h2 { margin: 0; font: 700 14px Manrope, sans-serif; }
.panel-heading p { margin: 5px 0 0; color: #9aa59e; font-size: 10px; }
.text-link { padding: 0; border: 0; background: transparent; color: var(--green); font-size: 10px; font-weight: 700; }
.agent-list { display: grid; gap: 8px; }
.agent-row { min-height: 55px; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border: 1px solid #edf1ee; border-radius: 8px; }
.agent-avatar { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: #edf5ee; color: var(--green); font: 700 12px Manrope,sans-serif; }
.agent-summary { min-width: 0; flex: 1; }
.agent-summary strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.agent-summary small { display: block; margin-top: 3px; color: #9aa59e; font-size: 9px; }
.status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 20px; background: #f2f5f3; color: #7b8980; white-space: nowrap; font-size: 9px; font-weight: 700; }
.status-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #adb7b0; }
.status-chip.on { background: #eaf5ed; color: #327950; }
.status-chip.on::before { background: #54a97a; }
.call-lab { position: relative; overflow: hidden; min-height: 246px; padding: 21px; border: 1px solid #dfece2; border-radius: 11px; background: linear-gradient(140deg, #edf6ee, #f8f9f3); }
.call-lab::after { content: ""; position: absolute; right: -47px; top: -71px; width: 205px; height: 205px; border: 1px solid rgba(66,145,97,.12); border-radius: 50%; box-shadow: 0 0 0 27px rgba(66,145,97,.025), 0 0 0 55px rgba(66,145,97,.02); pointer-events: none; }
.call-lab-content { position: relative; z-index: 1; }
.demo-pill { padding: 5px 8px; border: 1px solid #dbe9db; border-radius: 20px; background: rgba(255,255,255,.68); color: #568063; font-size: 8px; font-weight: 700; letter-spacing: .07em; white-space: nowrap; }
.call-lab h2 { margin: 14px 0 5px; font: 700 17px Manrope,sans-serif; }
.call-lab p { max-width: 340px; margin: 0 0 16px; color: #7d8b81; font-size: 10px; line-height: 1.6; }
.call-controls { display: flex; gap: 8px; align-items: end; }
.select-wrap { display: grid; gap: 6px; flex: 1; max-width: 260px; }
.select-wrap label { color: #728078; font-size: 9px; font-weight: 700; }
select, input[type="text"], input[type="number"], input[type="url"], textarea, input:not([type]) { width: 100%; min-height: 38px; border: 1px solid #dde6df; border-radius: 7px; background: #fff; padding: 8px 10px; color: #26362d; outline: 0; font-size: 11px; }
textarea { min-height: 85px; resize: vertical; line-height: 1.55; }
.call-status { min-height: 15px; margin-top: 12px; color: #7c8b80; font-size: 10px; }
.call-status.error { color: var(--red); }
.call-status.connected { color: #2e8351; }
.inline-note { color: #9aa59e; font-size: 9px; line-height: 1.5; }
.empty-state { padding: 23px 16px; border: 1px dashed #dce5de; border-radius: 9px; color: #8b9890; text-align: center; font-size: 11px; line-height: 1.6; }
.empty-state strong { display: block; margin-bottom: 5px; color: #56665c; font-size: 12px; }
.list-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.list-toolbar h1 { margin: 0; font: 700 25px Manrope,sans-serif; letter-spacing: -.04em; }
.agent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.agent-card { padding: 17px; }
.agent-card-head { display: flex; align-items: start; gap: 12px; }
.agent-card-head .agent-avatar { width: 39px; height: 39px; border-radius: 11px; }
.agent-card-main { flex: 1; min-width: 0; }
.agent-card-main strong { display: block; font-size: 12px; }
.agent-card-main small { display: block; margin-top: 4px; color: #97a39a; font-size: 9px; }
.agent-description { min-height: 35px; margin: 14px 0; color: #7d8981; font-size: 10px; line-height: 1.6; }
.agent-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid #edf1ee; }
.agent-model { overflow: hidden; color: #87938b; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.editor-shell { max-width: 940px; }
.editor-title-row { display: flex; justify-content: space-between; align-items: start; gap: 15px; margin-bottom: 20px; }
.editor-title-row h1 { margin: 0; font: 700 25px Manrope,sans-serif; letter-spacing: -.04em; }
.editor-title-row p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.editor-panel { padding: 22px; }
.form-section { padding: 20px 0; border-top: 1px solid #edf1ee; }
.form-section:first-child { padding-top: 0; border-top: 0; }
.form-section h2 { margin: 0 0 4px; font: 700 13px Manrope,sans-serif; }
.form-section > p { margin: 0 0 16px; color: #94a097; font-size: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 15px; }
.field { display: grid; align-content: start; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field .hint { color: #9ba59e; font-size: 9px; line-height: 1.4; }
.field-check { display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; border: 1px solid #edf1ee; border-radius: 7px; background: #fbfcfb; }
.field-check input { margin: 2px 0 0; accent-color: var(--green); }
.field-check span { display: block; }
.field-check strong { display: block; font-size: 10px; }
.field-check small { display: block; margin-top: 3px; color: #94a097; font-size: 9px; line-height: 1.4; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 19px; padding-top: 17px; border-top: 1px solid #edf1ee; }
.form-actions-right { display: flex; gap: 8px; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.data-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.data-table th { padding: 12px 14px; background: #fafcfb; color: #8c9991; text-align: left; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.data-table td { padding: 12px 14px; border-top: 1px solid #edf1ee; color: #59685f; font-size: 10px; }
.data-table td:first-child { color: #26362d; font-weight: 600; }
.data-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.system-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: 14px; }
.presence-list { display: grid; gap: 0; }
.presence-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 45px; border-bottom: 1px solid #eef2ef; }
.presence-row:last-child { border-bottom: 0; }
.presence-name { color: #647269; font-size: 10px; }
.presence-state { display: inline-flex; align-items: center; gap: 6px; color: #929e95; font-size: 9px; font-weight: 700; }
.presence-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b9c2bc; }
.presence-state.present { color: #388357; }
.presence-state.present::before { background: #56a678; }
.presence-state.missing { color: #b07b39; }
.presence-state.missing::before { background: #d89b4d; }
.readiness-banner { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid #e7ede8; border-radius: 9px; background: #fafcfb; }
.readiness-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: #edf5ee; color: var(--green); font-size: 16px; }
.readiness-banner strong { display: block; font-size: 11px; }
.readiness-banner small { display: block; margin-top: 4px; color: #909d94; font-size: 9px; line-height: 1.4; }
.secondary-heading { margin: 21px 0 12px; font: 700 11px Manrope,sans-serif; }
.call-dock { position: fixed; right: 25px; bottom: 22px; left: calc(238px + 25px); z-index: 7; display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 980px; margin: auto; padding: 14px 17px; border: 1px solid #dce9df; border-radius: 13px; background: rgba(255,255,255,.96); box-shadow: 0 18px 55px rgba(31,64,44,.17); backdrop-filter: blur(18px); }
.dock-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dock-orb { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #d7eadd; border-radius: 50%; background: #f0f7f1; }
.dock-orb span { width: 9px; height: 9px; border-radius: 50%; background: #4e9b70; box-shadow: 0 0 0 6px rgba(78,155,112,.11); }
.dock-copy { min-width: 0; }
.dock-title-row { display: flex; align-items: center; gap: 9px; }
.dock-title-row strong { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.dock-status { margin-top: 4px; }
.dock-transcript { max-width: 460px; overflow: hidden; margin-top: 4px; color: #87968c; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.dock-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.remote-audio { display: none; }
.table-status { display: inline-block; padding: 4px 7px; border-radius: 9px; background: #f1f5f2; color: #7b8980; font-size: 8px; }
.table-status.completed { background: #eaf5ed; color: #347b51; }
.table-status.failed, .table-status.cancelled { background: #faeeee; color: #ac5656; }
.table-status.active { background: #edf4fb; color: #527b9c; }
.table-status.synthetic { background: #fdf4e9; color: #98682d; }

@media (max-width: 1080px) {
  .sidebar { width: 205px; }
  .main-shell { width: calc(100% - 205px); margin-left: 205px; }
  .call-dock { left: 220px; }
  .content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .login-shell { display: block; padding: 32px 24px; }
  .login-card { max-width: 440px; padding: 30px 0 45px; }
  .login-side { display: none; }
  .sidebar { position: static; width: auto; height: auto; padding: 11px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .app-shell { display: block; }
  .sidebar-brand { padding: 4px 8px 10px; }
  .workspace-label, .sidebar-spacer, .sidebar-note, .logout-button { display: none; }
  .main-nav { display: flex; gap: 4px; overflow: auto; }
  .nav-button { min-height: 35px; flex: 0 0 auto; padding: 0 11px; font-size: 10px; }
  .nav-button.active::before { inset: auto 10px -1px; width: auto; height: 2px; border-radius: 2px 2px 0 0; }
  .main-shell { width: 100%; margin: 0; padding: 0 18px 55px; }
  .topbar { min-height: 78px; }
  .environment-pill { display: none; }
  .view-root { padding-top: 21px; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .stat-card { min-height: 106px; padding: 13px; }
  .stat-value { font-size: 22px; }
  .agent-grid, .system-grid { grid-template-columns: 1fr; }
  .call-dock { right: 10px; bottom: 10px; left: 10px; align-items: stretch; flex-direction: column; gap: 9px; padding: 11px; }
  .dock-actions { justify-content: end; }
  .dock-transcript { max-width: 70vw; }
}
@media (max-width: 520px) {
  .topbar-title { font-size: 18px; }
  .topbar-right { gap: 8px; }
  .page-heading-row, .list-toolbar, .editor-title-row { align-items: start; flex-direction: column; }
  .page-heading-row .button, .list-toolbar .button { align-self: stretch; }
  .form-grid, .checkbox-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .editor-panel, .panel { padding: 15px; }
  .call-controls { align-items: stretch; flex-direction: column; }
  .select-wrap { max-width: none; }
  .call-controls .button { width: 100%; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions-right { justify-content: end; }
  .dock-actions .button { min-height: 36px; padding: 0 10px; font-size: 10px; }
  .dock-title-row strong { max-width: 170px; }
}