:root{font-family:Inter,system-ui,sans-serif;color:#17202d;background:#f8f9fb;--border:#dce1e8;--blue:#174dbd}
*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:32px;padding:0 26px;background:#fff;border-bottom:1px solid var(--border);min-height:72px}
.brand strong{display:block;font-size:27px;line-height:1;letter-spacing:-1px}.brand span{color:#154099}.brand small{font-size:11px}
nav{display:flex;gap:6px}button,select{font:inherit;border:1px solid var(--border);border-radius:7px;background:#fff;padding:9px 14px;color:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}button:not(:disabled):hover{border-color:#7193d2}button:focus-visible,select:focus-visible{outline:3px solid #8aabec;outline-offset:2px}nav button{border-color:transparent}nav button[aria-current]{background:#e8eef9;color:#143e95;font-weight:650}.workspace{margin-left:auto;font-weight:650}.workspace span{display:block;color:#546276;font-size:12px;font-weight:400}
.shell{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:calc(100vh - 73px)}aside{padding:24px 16px;background:#fff;border-right:1px solid var(--border)}aside h2{font-size:14px;margin:0 10px 12px}aside nav{flex-direction:column}aside button{text-align:left}
main{padding:32px;max-width:1280px}h1{font-size:27px;margin:0 0 8px}p{color:#4e5b6c;line-height:1.5;margin:0 0 18px}.panel{border:1px solid var(--border);background:white;border-radius:9px;overflow:auto;margin-top:18px}.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px}.row+.row{border-top:1px solid var(--border)}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.primary{background:var(--blue);border-color:var(--blue);color:white}.notice{background:#fff2e8;border:1px solid #f2d7c4;color:#743811;padding:12px 14px;border-radius:7px;margin:16px 0}.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:12px}.card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:15px}.card h2{font-size:15px;margin:0 0 7px}.card p{font-size:13px;margin:0}table{width:100%;border-collapse:collapse;text-align:left}td,th{padding:12px 16px;border-bottom:1px solid var(--border);white-space:nowrap}th{font-size:13px;color:#4e5b6c}#status:not(:empty){position:fixed;bottom:18px;right:18px;padding:12px 18px;background:#182638;color:#fff;border-radius:8px;max-width:90vw}
@media(max-width:650px){header{gap:12px;flex-wrap:wrap;padding:14px}.shell{display:block}aside{padding:12px;border-right:0;border-bottom:1px solid var(--border)}aside nav{flex-direction:row;flex-wrap:wrap}main{padding:20px}}
.carrier-search{flex-wrap:wrap}.carrier-search input{font:inherit;width:5em;padding:9px;border:1px solid var(--border);border-radius:7px}.carrier-search label{display:flex;align-items:center;gap:8px}
[hidden]{display:none!important}
.skill-field{display:grid;gap:10px;align-content:start;font-size:15px;font-weight:600}.skill-field input,.skill-field textarea{font:inherit;font-weight:400;width:100%;border:1px solid var(--border);border-radius:7px;padding:9px}.skill-field textarea{resize:vertical}
#extension-form input[name=label]{width:min(15em,52vw)}
#call-timer{font-variant-numeric:tabular-nums;font-size:2rem;color:#17202d;font-weight:600}
#mute[aria-pressed=true]{background:#e8eef9;border-color:#174dbd;color:#143e95}
#phone-actions button:not(:disabled):active{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){#phone-actions button:not(:disabled):active{transform:none}}
.portal { background: #f4f6fa; --blue: #1949be; --border: #dde3ed; }
.portal > header { min-height: 4.5rem; }
.portal .brand { min-width: 10rem; }
.portal header nav button { padding: .7rem 1rem; }
.portal .shell { grid-template-columns: 13.5rem minmax(0, 1fr); }
.portal aside { background: #fbfcfe; padding: 1.5rem .875rem; }
.portal aside h2 { color: #546276; margin: 0 .75rem .75rem; }
.portal aside button { min-height: 2.75rem; }
.portal main { width: 100%; max-width: 96rem; padding: clamp(1.25rem, 3vw, 3rem); }
.dashboard { display: grid; gap: 1.5rem; }
.dashboard-heading, .dashboard-section-heading, .dashboard-panel-heading {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
}
.dashboard-heading h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.05; letter-spacing: -.035em; }
.dashboard-heading p { margin: 0; }
.dashboard-heading button { min-height: 2.75rem; }
.dashboard h2 { margin: 0; font-size: 1.05rem; letter-spacing: -.015em; }
.dashboard-section-heading { margin-bottom: .75rem; }
.dashboard-section-heading span { color: #546276; font-size: .875rem; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .75rem; }
.metric {
  display: grid; align-content: space-between; gap: .65rem; position: relative; min-height: 7rem;
  padding: 1rem; border: 1px solid var(--border); border-radius: .75rem; background: white; text-align: left;
}
.metric span:first-child { color: #455670; font-size: .875rem; padding-right: 1rem; }
.metric strong { font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.metric-arrow { position: absolute; right: .75rem; bottom: .8rem; color: var(--blue); }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr); gap: 1rem; align-items: start; }
.dashboard-panel { min-width: 0; border: 1px solid var(--border); border-radius: .875rem; background: white; }
.dashboard-panel-heading { padding: .875rem 1rem; min-height: 4rem; border-bottom: 1px solid var(--border); }
.dashboard-panel-heading button { color: var(--blue); min-height: 2.5rem; }
.dashboard-calls { padding: 0; margin: 0; list-style: none; }
.dashboard-calls li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .75rem 1rem; }
.dashboard-calls li + li { border-top: 1px solid var(--border); }
.dashboard-calls li div { display: grid; gap: .2rem; overflow-wrap: anywhere; }
.dashboard-calls li div span, .dashboard-calls time { color: #546276; font-size: .8rem; }
.dashboard-calls time { text-align: right; }
.call-direction { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; background: #eaf0ff; color: var(--blue); }
.dashboard-empty { padding: 1rem; margin: 0; }
.dashboard-shortcuts { padding: .35rem .65rem; }
.dashboard-shortcuts button { display: flex; align-items: center; justify-content: space-between; gap: .5rem; text-align: left; width: 100%; min-height: 2.75rem; border-color: transparent; }
.dashboard-shortcuts button span:last-child, .dashboard-shortcuts strong { color: var(--blue); }
.dashboard button:active { background-color: #edf2fc; color: #173c8c; }
@media (max-width: 850px) { .dashboard-columns { grid-template-columns: 1fr; } }
@media (max-width: 650px) {
  .portal .brand { min-width: 0; }
  .portal header nav { order: 1; width: 100%; }
  .portal aside { padding: .75rem; }
  .portal aside nav { flex-wrap: nowrap; overflow-x: auto; padding: .25rem; }
  .portal aside button { flex: none; }
  .dashboard-calls time { grid-column: 2; text-align: left; }
}
.actions button[aria-pressed=true]{background:#e8eef9;border-color:#174dbd;color:#143e95}
#draft-fields{border:0;margin:0;padding:0;min-inline-size:0}

.phone-workspace { --ink: #14233c; --line: #dce3ed; --wash: #f0f3f8; color: var(--ink); }
.phone-heading {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; padding-bottom: 1.15rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line);
}
.phone-heading h1 { font-size: clamp(1.6rem, 3vw, 2rem); letter-spacing: -.035em; margin: 0 0 .25rem; }
.phone-heading p { margin: 0; }
.phone-mode, #call-state {
  border: 1px solid var(--line); border-radius: 2rem; padding: .4rem .7rem;
  background: var(--wash); color: #384b65; font-size: .8rem; font-weight: 650;
}
.phone-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
.phone-metric {
  display: flex; align-items: center; gap: .75rem; min-width: 0; min-height: 5rem;
  padding: .85rem; border: 1px solid var(--line); border-radius: .95rem; background: #fff; text-align: left;
}
.phone-metric strong { display: block; font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.phone-metric div span { color: #44546a; font-size: .83rem; }
.metric-symbol, .call-avatar, .directory-avatar, .recent-direction {
  display: grid; place-items: center; border-radius: 50%; background: var(--wash); color: #203752;
  flex: 0 0 2.35rem; width: 2.35rem; height: 2.35rem; font-weight: 700;
}
.metric-symbol { font-size: 1.2rem; }
.softphone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1.32fr); gap: .95rem; align-items: start; }
.phone-stack { display: grid; gap: .95rem; min-width: 0; }
.dial-card, .phone-directory {
  background: #fff; border: 1px solid var(--line); border-radius: .95rem; min-width: 0;
  box-shadow: 0 .35rem 1rem #152b4c08;
}
.dial-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45rem;
  padding: .9rem 1rem; border-bottom: 1px solid var(--line);
}
.dial-header h2 { font-size: 1.05rem; margin: 0; letter-spacing: -.018em; }
.dial-header button { border: 0; padding: .3rem 0; color: #264f85; font-size: .8rem; }
.phone-line {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem;
  margin: .85rem 1rem 0; padding: .5rem .65rem; border: 1px solid var(--line);
  border-radius: .65rem; background: #f7f9fc; color: #364b65; font-size: .8rem;
}
.phone-line button { padding: .35rem .5rem; font-size: .8rem; }
#dial-form, #active-call, .directory-body { padding: .9rem 1rem; }
#dial-form fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
#dial-form label, .directory-body label { display: block; margin-bottom: .35rem; font-size: .8rem; font-weight: 650; }
.dial-entry { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: .65rem; }
.dial-entry input {
  min-width: 0; width: 100%; border: 0; background: transparent; color: inherit;
  border-radius: .65rem; padding: .55rem; font: inherit;
}
.dial-entry button { border: 0; background: transparent; padding-inline: .65rem; }
.dial-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: .7rem 0 .8rem; }
.dial-keys button {
  display: grid; justify-items: center; gap: .05rem; min-height: 2.75rem; padding: .35rem .2rem;
  border: 1px solid transparent; border-radius: .75rem; background: var(--wash);
}
.dial-keys strong { font-size: 1.15rem; line-height: 1.1; }
.dial-keys small { color: #465973; font-size: .63rem; letter-spacing: .09em; }
.dial-keys button:not(:disabled):active { background: #dce6f3; }
.dial-call, .call-controls [data-phone-action="answer"] { background: #172a45; color: white; border-color: #172a45; font-weight: 700; }
.dial-call { display: block; margin: auto; border-radius: 2rem; min-height: 2.75rem; min-width: 6rem; }
.dial-footer { padding: 0 1rem .8rem; }
.dial-footer button { width: 100%; font-size: .85rem; min-height: 2.5rem; }
.dial-feedback { margin: 0; padding: 0 1rem .8rem; font-size: .8rem; }
.dial-feedback:empty { display: none; }
.phone-empty, .call-party { display: grid; justify-items: center; align-content: center; gap: .65rem; text-align: center; padding: 1.5rem 1rem; overflow-wrap: anywhere; }
.phone-empty { min-height: 17rem; }
.phone-empty p { max-width: 22ch; margin: 0; font-size: .875rem; }
.call-party { min-height: 12rem; }
.call-party strong { font-size: 1.35rem; }
.call-party .call-avatar, .phone-empty .call-avatar { width: 3.5rem; height: 3.5rem; }
#active-time { color: #526783; font-variant-numeric: tabular-nums; }
.call-controls { display: flex; flex-wrap: wrap; gap: .5rem; }
.call-controls button { flex: 1 1 5rem; min-height: 2.75rem; padding-inline: .45rem; }
.call-controls button[aria-pressed="true"], .call-controls button[aria-expanded="true"] { background: #dceaff; color: #153e74; }
.call-controls .call-end { background: #a62f44; color: #fff; border-color: #a62f44; }
[data-state="connected"] #call-state, [data-state="ringing"] #call-state { background: #e4f5ea; color: #23653e; }
[data-state="held"] #call-state { background: #fff3dc; color: #815200; }
.directory-body p { font-size: .8rem; margin-bottom: .6rem; }
#phone-search { width: 100%; padding: .6rem .7rem; font: inherit; border: 1px solid var(--line); border-radius: 2rem; background: #f7f9fc; }
.softphone input:focus-visible { outline: 3px solid #86a8dc; outline-offset: -2px; }
#phone-teammates, .phone-recents { list-style: none; margin: .45rem 0 0; padding: 0; }
.phone-recents { margin: 0; padding-inline: 1rem; }
#phone-teammates li, .phone-recents li { display: flex; align-items: center; gap: .55rem; padding: .7rem 0; overflow-wrap: anywhere; }
#phone-teammates li + li, .phone-recents li + li { border-top: 1px solid var(--line); }
#phone-teammates li div, .phone-recents li div { min-width: 0; flex: 1; }
#phone-teammates small, .phone-recents small { display: block; margin-top: .15rem; color: #51637d; }
#phone-teammates button, .phone-recents button { min-height: 2.5rem; padding-inline: .65rem; font-size: .8rem; }
#phone-teammates li:nth-child(3n + 2) .directory-avatar { background: #e5f1eb; color: #24614d; }
#phone-teammates li:nth-child(3n + 3) .directory-avatar { background: #e9ecf7; color: #41538b; }
@media (max-width: 1150px) {
  .softphone { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .phone-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .softphone { grid-template-columns: minmax(0, 1fr); }
  .call-panel { grid-row: 1; }
  [data-state="idle"] .call-panel { grid-row: auto; }
  .phone-empty { min-height: 8rem; }
}
@media (max-width: 420px) {
  .phone-metric { padding: .65rem; gap: .45rem; }
  .metric-symbol { flex-basis: 1.8rem; width: 1.8rem; height: 1.8rem; }
}
.phone-view { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.phone-view button { font-size: .8rem; }
.phone-metric:disabled { opacity: 1; }
.phone-stack > section:has(#sample-queue) { grid-row: 2; }
.sample-portrait { background-image: url('/sample-portraits.png'); background-size: 200% 200%; color: transparent; }
.sample-portrait.front-desk { background-position: top right; }
.sample-portrait.dispatch { background-position: bottom left; }
.sample-portrait.support { background-position: bottom right; }
.call-party .sample-portrait { width: 4.4rem; height: 4.4rem; }
#active-number:empty { display: none; }
.sample-wave { height: 2.6rem; display: flex; justify-content: center; align-items: center; gap: .2rem; margin: -.25rem 0 .75rem; }
.sample-wave i { width: .17rem; height: .45rem; border-radius: .2rem; background: #849ab8; }
.sample-wave i:nth-child(3n) { height: .85rem; }
.sample-wave i:nth-child(4n) { height: 1.25rem; }
.sample-wave i:nth-child(7n) { height: 1.85rem; background: #294766; }
.sample-wave i:nth-child(n+12):nth-child(-n+30):nth-child(2n) { height: 1.6rem; background: #294766; }
.sample-transcript { border-top: 1px solid var(--line); padding: .9rem 1rem 1rem; }
.sample-transcript h3 { margin: 0 0 .7rem; font-size: .92rem; }
.sample-transcript p { margin: 0 0 .55rem; font-size: .85rem; }
.sample-transcript > p { padding-left: .55rem; border-left: 2px solid #ced9e8; }
.sample-transcript > p strong { display: block; color: var(--ink); }
.sample-summary { margin-top: .8rem; padding: .65rem .75rem; border-radius: .65rem; background: var(--wash); font-size: .85rem; }
.sample-summary p { margin: .25rem 0 0; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; background: #f0f3f8; }
.auth-card { width: min(100%, 27rem); padding: clamp(1.5rem, 5vw, 2.5rem); background: white; border: 1px solid #dce3ed; border-radius: 1rem; }
.auth-card .brand { margin-bottom: 2rem; }
.auth-card h1 { margin-bottom: 1rem; }
.auth-card form, .auth-card label { display: grid; gap: .45rem; }
.auth-card form { gap: 1rem; }
.auth-card label { font-weight: 650; font-size: .875rem; }
.auth-card input { min-width: 0; width: 100%; min-height: 2.75rem; padding: .65rem .75rem; font: inherit; border: 1px solid #aab7c9; border-radius: .55rem; }
.auth-card input:focus-visible { outline: 3px solid #8aabec; outline-offset: 2px; }
.auth-card button { min-height: 2.75rem; }
.auth-card a { display: inline-block; margin-top: .9rem; color: #234b83; }
.auth-card #feedback { margin: .65rem 0 0; color: #9a2942; }
.auth-card #feedback:empty { display: none; }
.section-tools { align-items: end; }
.section-tools label, .extension-edit label { display: grid; gap: .35rem; font-size: .85rem; }
.section-tools input, .extension-edit input { max-width: 100%; font: inherit; padding: .55rem; border: 1px solid var(--border); border-radius: .5rem; }
#voicemail-list .row, #extension-list .row { flex-wrap: wrap; }
.number-finder { max-width: 60rem; padding: 1.25rem; }
.number-finder h2, .assigned-lines h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.number-preferences { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; }
.number-preferences label { display: grid; gap: .35rem; font-size: .85rem; font-weight: 650; }
.number-preferences input { width: 8rem; padding: .55rem; font: inherit; border: 1px solid var(--border); border-radius: .5rem; }
.number-results { margin-top: 1.25rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.number-results h3 { margin: 0 0 .35rem; font-size: 1rem; }
.number-results p, #number-order-status { margin: .25rem 0; }
#carrier-results .row { padding: .65rem .1rem; }
#carrier-results strong { font-variant-numeric: tabular-nums; }
.assigned-lines { margin-top: 1.5rem; }
.assigned-lines .panel { margin-top: .65rem; }
.number-review { width: min(28rem, calc(100% - 2rem)); color: inherit; border: 1px solid var(--border); border-radius: 1rem; padding: 1.35rem; }
.number-review::backdrop { background: #17202d66; }
.number-review h2 { margin: 0 0 .7rem; }
.number-review > strong { display: block; font-size: 1.35rem; margin-bottom: .6rem; }
.number-review [role="alert"]:empty { display: none; }