body.phone-body{background:#f4f6fa;color:#14243b;margin:0;font-size:14px}.phone-body button{font:inherit;font-size:12px;border:1px solid #dce4ef;border-radius:9px;background:#fff;color:#20374f;padding:11px 15px;cursor:pointer;transition:background .15s,box-shadow .15s,transform .15s}.phone-body button:hover:not(:disabled){background:#eff5fd;border-color:#9db9dc}.phone-body button:active:not(:disabled){transform:translateY(1px)}.phone-body button.primary{background:#3a72b8;color:#fff;border-color:#3a72b8}.phone-body button.primary:hover:not(:disabled){background:#2f609e}.phone-body button.danger{background:#ef3e33;color:white;border-color:#ef3e33}.phone-body button:disabled{opacity:.45;cursor:not-allowed}.phone-body a{color:#3a72b8;text-decoration:none}.phone-body button:focus-visible,.phone-body a:focus-visible{outline:3px solid #73a0c1;outline-offset:3px}.phone-header{height:76px;background:white;border-bottom:1px solid #e1e7ef;display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:20px}.phone-header .phone-brand{display:flex;align-items:center;gap:11px;color:#0c2232;font-size:23px;letter-spacing:-.7px}.phone-logo{width:36px;height:36px;background:#ef3e33;color:white;border-radius:11px;display:grid;place-items:center;font-size:24px}.phone-brand small{display:block;font-size:8px;letter-spacing:3px;margin-top:3px;color:#69829e}.header-actions{display:flex;align-items:center;gap:22px;font-size:12px}.phone-workspace{display:grid;grid-template-columns:214px minmax(0,1fr);min-height:calc(100vh - 76px)}.phone-sidebar{background:#0c2232;padding:30px 17px;color:#cfdfed;display:flex;flex-direction:column}.phone-sidebar>.eyebrow{color:#89a5bf;padding:0 13px;margin-bottom:20px}.phone-sidebar nav{display:grid;gap:8px}.phone-sidebar nav button{border:0;text-align:left;background:none;color:#bdcfdf;padding:14px;font-size:13px;display:flex;gap:12px;align-items:center}.phone-sidebar nav button span{font-size:18px;width:20px}.phone-sidebar nav button:hover:not(:disabled){background:#16344d}.phone-sidebar nav button[aria-current=page]{background:#234766;color:white;box-shadow:inset 3px 0 #ef3e33}.sidebar-account{margin-top:auto;padding:42px 10px 0}.sidebar-account .person-avatar{width:40px;height:40px;background:#25455f;color:#e6f2ff}.sidebar-account>p{overflow-wrap:anywhere}#self-name{font-size:13px;margin:12px 0 6px}#account{font-size:10px;color:#92aac0;line-height:1.5}.sidebar-account label{font-size:10px;color:#92aac0;margin:22px 0}.sidebar-account select{background:#17334b;color:#e5eff7;border-color:#38556d;font-size:11px;padding:10px}.sidebar-foot{font-size:9px!important;line-height:1.8;color:#7692aa;margin-top:25px}.phone-main{padding:30px;max-width:1720px;min-width:0;margin:0;width:100%}.phone-page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}.phone-page-heading h1{font-size:29px;letter-spacing:-1px;margin:8px 0 10px}.phone-page-heading>div>p:last-child{font-size:12px;color:#718295;margin:0}.phone-body .eyebrow{font-size:9px;letter-spacing:1.8px;color:#3a72b8}.build-badge{white-space:nowrap;border:1px solid #dce5ee;background:white;border-radius:20px;padding:8px 12px;font-size:10px;color:#6c7f93}.phone-layout{display:grid;grid-template-columns:minmax(0,1fr) 328px;gap:26px;align-items:start}.phone-content{min-width:0}.directory-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:22px}.directory-toolbar h2{font-size:15px;margin:0;white-space:nowrap}.directory-toolbar h2 span{display:inline-block;background:#e6edf5;padding:3px 7px;border-radius:6px;color:#6d839b;font-size:10px;margin-left:5px}.search-wrap{margin:0;max-width:270px;width:45%}.search-wrap input{font-size:12px;margin:0;padding:12px 14px;border-radius:10px}.phone-directory{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:14px}.person{background:white;border:1px solid #e0e7f0;border-radius:13px;padding:20px;min-width:0;transition:box-shadow .15s,border-color .15s}.person:hover{border-color:#b6cce4;box-shadow:0 5px 20px #243e6510}.person-avatar{width:45px;height:45px;border-radius:15px;background:#e8f0fa;color:#3a72b8;display:grid;place-items:center;font-size:18px;flex-shrink:0}.person:nth-child(3n+2) .person-avatar{background:#f1eafa;color:#8863ac}.person:nth-child(3n+3) .person-avatar{background:#e7f4f4;color:#367e84}.person p{font-size:13px;margin:16px 0 5px;overflow-wrap:anywhere}.person small{font-size:11px;color:#7c8fa3}.person button{display:block;margin-top:18px;width:100%;text-align:center;background:#f7faff;color:#3a72b8;border-color:#e1eaf5}.subtle-note{font-size:10px;line-height:1.7;color:#8190a1;margin:19px 0}.dialler{background:white;border:1px solid #dce5ef;border-radius:17px;padding:22px;box-shadow:0 10px 35px #14243b07}.phone-identity{display:flex;align-items:center;justify-content:space-between}.phone-identity h2{font-size:18px;margin:0}.phone-identity .eyebrow{margin-bottom:8px}.identity-mark{width:34px;height:34px;border-radius:10px;background:#fceae8;color:#ef3e33;display:grid;place-items:center;font-size:20px}.connection-row{display:flex;align-items:center;gap:7px;margin:15px 0}.connection-row p{font-size:10px;color:#718295;margin:0}.connection-dot{width:6px;height:6px;border-radius:50%;background:#97a5b5;flex-shrink:0}.connection-dot[data-state=ready]{background:#278667}.connection-dot[data-state=connecting]{background:#d79b31}.dialler .subtle-button{font-size:10px;padding:0;border:0;color:#7c8fa3;background:none;margin-bottom:5px}.call-display{background:#f4f7fb;border:1px solid #e9eef5;border-radius:12px;text-align:center;padding:18px 12px;margin:18px 0}.call-avatar{width:49px;height:49px;border-radius:50%;margin:0 auto 10px;background:#e3ecf7;color:#3a72b8;display:grid;place-items:center;font-size:22px}#call-state{font-size:10px;color:#6983a0;margin-bottom:8px}#caller-name{font-size:17px;line-height:1.4;overflow-wrap:anywhere;margin:0 0 5px}#caller-number{font-size:10px;color:#7d8fa2;margin:0;overflow-wrap:anywhere}#call-duration{display:block;font-size:22px;letter-spacing:2px;margin-top:14px;font-variant-numeric:tabular-nums}#media-state{font-size:10px;margin:8px 0 0;color:#617991}.dialler[data-call=incoming] .call-display{background:#edf4ff;border-color:#91b8ec}.dialler[data-call=active] .call-display{background:#0c2232;color:white;border-color:#0c2232}.dialler[data-call=active] #call-state,.dialler[data-call=active] #caller-number,.dialler[data-call=active] #media-state{color:#b0c8df}.call-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:14px}.call-buttons:empty{display:none}.call-buttons button{flex:1;padding:11px 9px}.call-buttons button[aria-pressed=true]{background:#e6eef9;color:#2c5992;border-color:#7a9ecf}.number-field{display:flex;align-items:center;border:1px solid #dce5ee;border-radius:10px;overflow:hidden;margin-top:15px}.number-field input{border:0;min-width:0;font-size:20px;text-align:center;padding:13px 4px 13px 15px;background:white;letter-spacing:1px}.number-field button{border:0;padding:13px 10px;color:#8292a4}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0}.keypad button{height:48px;font-size:20px;background:#fafbfd;border-color:#edf1f6;padding:4px}.keypad button small{display:block;font-size:7px;letter-spacing:2px;color:#8a9bae;margin-top:2px}.phone-body .call-action{font-size:14px;padding:13px}.phone-note{font-size:9px;line-height:1.7;color:#8696a6;margin:16px 0 0}.phone-footer{display:flex;justify-content:space-between;gap:15px;font-size:9px;color:#90a0b1;margin-top:30px}.settings-card{background:white;border:1px solid #e0e7ef;border-radius:14px;padding:27px}.settings-card h2{font-size:22px}.settings-card .muted{font-size:12px}.settings-card label{font-size:12px;margin:22px 0 12px}.settings-card select{font-size:12px}.device-actions{display:flex;gap:10px;flex-wrap:wrap}.settings-card hr{border:0;border-top:1px solid #e7edf4;margin:27px 0}.settings-card h3{font-size:15px}#mic-test{margin:17px 0}#mic-level{width:100%;height:16px}.recent-row{background:white;border:1px solid #e1e8f1;padding:17px;border-radius:11px;display:flex;gap:13px;align-items:center;margin-bottom:9px}.recent-row .recent-copy{flex:1;min-width:0}.recent-copy p{font-size:13px;margin:0 0 5px;overflow-wrap:anywhere}.recent-copy small{color:#8091a3;font-size:10px}.recent-row button{font-size:11px}.empty-state{padding:50px 25px;text-align:center;background:white;border:1px dashed #cad8e7;border-radius:13px;color:#7f91a4;font-size:12px;line-height:1.8}.phone-login{display:grid;grid-template-columns:1fr 1fr;max-width:940px;margin:8vh auto;border:1px solid #dfe7f0;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px #243e6510}.login-art{background:#0c2232;color:white;padding:55px 40px;display:flex;flex-direction:column;justify-content:center}.login-art .eyebrow{color:#89abc9}.login-art h1{font-size:38px;line-height:1.25;margin:30px 0}.login-art>p:last-child{color:#86a4bf;font-size:12px}.login-form-panel{background:white;padding:50px 40px}.login-form-panel h2{font-size:24px}.login-form-panel>.muted{font-size:12px;margin-bottom:28px}.login-form-panel label{font-size:12px}.login-form-panel form>button{width:100%}#notice{margin:16px 28px;padding:14px 18px;border:1px solid #efc4bf;border-radius:10px;color:#943d35;background:#fff4f1;font-size:12px;line-height:1.6}.phone-body [hidden]{display:none!important}@media(min-width:1400px){.phone-directory{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}
@media(max-width:1150px){.phone-workspace{grid-template-columns:175px minmax(0,1fr)}.phone-main{padding:24px}.phone-layout{gap:18px;grid-template-columns:minmax(0,1fr) 300px}.directory-toolbar{align-items:stretch;flex-direction:column}.search-wrap{width:100%;max-width:none}.phone-page-heading{align-items:flex-start}.build-badge{display:none}.phone-sidebar{padding:24px 10px}.phone-directory{grid-template-columns:1fr}.sidebar-account{padding-left:8px;padding-right:8px}.dialler{padding:18px}}
@media(max-width:800px){.phone-header{height:auto;min-height:68px;padding:15px 18px;flex-wrap:wrap}.phone-brand{font-size:20px!important}.header-actions{gap:12px;font-size:10px}.header-actions button{font-size:10px;padding:8px}.phone-workspace{display:block}.phone-sidebar{padding:10px 14px}.phone-sidebar>.eyebrow,.sidebar-account{display:none}.phone-sidebar nav{display:flex;justify-content:space-around;gap:4px}.phone-sidebar nav button{font-size:11px;padding:11px 9px;gap:7px;white-space:nowrap}.phone-sidebar nav button span{font-size:15px;width:auto}.phone-main{padding:22px 16px}.phone-page-heading{margin-bottom:22px}.phone-page-heading h1{font-size:26px}.phone-layout{grid-template-columns:1fr}.dialler{grid-row:1;padding:20px;max-width:460px;width:100%;justify-self:center}.phone-content{grid-row:2}.phone-directory{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.person{padding:17px}.directory-toolbar{margin-top:10px}.phone-login{margin:25px 16px;grid-template-columns:1fr}.login-art{display:none}.login-form-panel{padding:32px 24px}.phone-footer{flex-wrap:wrap}.settings-card{padding:22px}.phone-page-heading .eyebrow{font-size:8px}#notice{margin:14px 16px}.recent-row{padding:13px}.recent-row .person-avatar{width:34px;height:34px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.phone-body *{transition:none!important}}

.phone-body .mobile-only{display:none}.dialler[data-call=active] .call-buttons{display:grid;grid-template-columns:repeat(3,1fr)}.dialler[data-call=active] #end{grid-column:1/-1}.dialler[data-call=active] .phone-note{margin-top:14px}
@media(max-width:800px){.phone-body .mobile-only{display:flex}.phone-sidebar nav button{font-size:10px;padding:10px 7px}.sidebar-account{display:block;padding:0}.sidebar-account>:not(label){display:none}.sidebar-account label{margin:10px 0 0;font-size:9px}.sidebar-account select{margin:5px 0 0;padding:8px}.phone-workspace:not([data-tab=keypad])[data-call=idle] .dialler{display:none}.phone-workspace:not([data-call=idle]) .phone-content{display:none}.phone-workspace:not([data-call=idle]) .dialler{display:block}.phone-workspace[data-tab=keypad] .dialler{display:block}.phone-workspace[data-tab=keypad] .phone-layout{gap:0}}

/* Text contrast and comfortable reading sizes on white/light surfaces. */
.phone-note,.subtle-note,.phone-footer{font-size:11px;color:#5d7187}.person small,.recent-copy small,.connection-row p,#caller-number,#call-state,#media-state,.phone-page-heading>div>p:last-child{color:#5d7187}.phone-body button.danger{background:#cb3028;border-color:#cb3028}.dialler[data-call=active] #call-state,.dialler[data-call=active] #caller-number,.dialler[data-call=active] #media-state{color:#b0c8df}

/* Compact software BLF keys retain text labels as well as colour. */
.phone-directory[data-layout="blf"]{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.phone-directory[data-layout="blf"] .person{min-height:140px;border-left:5px solid #94a3b8;border-radius:12px;background:#f8fafc;padding:16px}
.phone-directory[data-layout="blf"] .person[data-state="available"]{border-left-color:#13845b;background:#effaf4}
.phone-directory[data-layout="blf"] .person[data-state="ringing"]{border-left-color:#bd7600;background:#fff8dd;box-shadow:0 0 0 1px #edc565}
.phone-directory[data-layout="blf"] .person[data-state="on_call"],.phone-directory[data-layout="blf"] .person[data-state="dnd"]{border-left-color:#c63545;background:#fff2f3}
.phone-directory[data-layout="blf"] .person-avatar{display:none}
.phone-directory[data-layout="blf"] .person p{font-weight:650;margin:0 0 5px}
.phone-directory[data-layout="blf"] .person small{font-size:14px}
.phone-directory[data-layout="blf"] .person-presence{font-size:13px;font-weight:600}
@media(max-width:480px){.phone-directory[data-layout="blf"]{grid-template-columns:repeat(2,minmax(0,1fr))}.phone-directory[data-layout="blf"] .person{padding:12px}}

.phone-directory[data-layout="blf"] .person{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;gap:6px;align-items:start}
.phone-directory[data-layout="blf"] .person p{grid-column:1/-1;grid-row:1;overflow-wrap:anywhere}
.phone-directory[data-layout="blf"] .person small{grid-column:1/-1;grid-row:2}
.phone-directory[data-layout="blf"] .person-presence{grid-column:1;grid-row:3;align-self:end;justify-self:start}
.phone-directory[data-layout="blf"] .person button{grid-column:2;grid-row:3;align-self:end;justify-self:end}