*{box-sizing:border-box} :root{
--cream:#fffefa;--paper:#f7f6f0;--stone:#f2f1eb;--white:#fff;--forest:#1a3c36;--deep:#002620;
--green:#008f6d;--green600:#056a52;--green100:#eef6f4;--green150:#e6f3ec;--border:#ced8d7;
--secondary:#4d6763;--muted:#71837f;--orange:#f18424;--blue:#388ef6;--red:#c54848;
--sidebar:#e7eaec;--sidebarActive:#405c62;--shadow:0 12px 34px rgba(17,48,43,.07);--radius:20px;
}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;background:var(--paper);color:var(--forest)}
button,input,select{font:inherit}button{cursor:pointer}
.app-shell{min-height:100vh;display:grid;grid-template-columns:258px 1fr}
.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#e6e9eb,#e1e5e7);padding:24px 16px;display:flex;flex-direction:column;border-right:1px solid #d9dfe0}
.collapse-btn{position:absolute;right:14px;top:22px;width:34px;height:34px;border-radius:50%;border:1px solid #8ea0a4;background:#eef0f1;color:#36535a;font-size:22px}
.side-logo{display:flex;align-items:center;gap:11px;padding:46px 10px 24px;font-weight:700}.brand-mark{width:44px;height:44px;border-radius:14px;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 8px 18px rgba(0,143,109,.18)}.brand-mark.small{width:34px;height:34px;border-radius:11px}
.side-nav{display:flex;flex-direction:column;gap:5px}.nav-link{border:0;background:transparent;padding:13px 14px;border-radius:28px;display:flex;align-items:center;gap:12px;color:#496168;font-weight:600;text-align:left}.nav-link:hover{background:rgba(255,255,255,.55)}.nav-link.active{background:#405c62;color:#fff}.nav-ico{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.75);color:#435c62;display:grid;place-items:center;font-size:13px}.nav-link.active .nav-ico{background:#fff}
.sidebar-bottom{margin-top:auto;background:rgba(255,255,255,.78);border-radius:18px;padding:12px}.user-row{display:flex;align-items:center;gap:10px}.avatar,.top-avatar{width:38px;height:38px;border-radius:50%;border:1px solid #b5c0c2;background:#fff;display:grid;place-items:center;color:#66787b}.user-meta{min-width:0;display:flex;flex-direction:column}.user-meta strong{font-size:13px}.user-meta small{color:#7b8a8d;margin-top:2px}.online-dot{width:8px;height:8px;border-radius:50%;background:#00a974;display:inline-block;box-shadow:0 0 0 3px rgba(0,169,116,.1)}.logout-link{display:block;margin-top:10px;color:#6f7d80;text-decoration:none;font-size:12px;padding:7px}
.main{min-width:0;padding:14px 14px 28px}.glass-soft{background:rgba(255,255,255,.76);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(31,63,57,.06)}
.topbar{position:sticky;top:12px;z-index:30;border-radius:22px;padding:17px 22px;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.page-kicker,.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:700;color:#708783}.topbar h1{margin:3px 0 0;font-size:26px;letter-spacing:-.8px}.top-actions{display:flex;align-items:center;gap:10px}.system-badge{display:flex;align-items:center;gap:8px;border:1px solid #dbe5e2;background:#f7fbfa;border-radius:999px;padding:9px 12px;font-size:12px}.icon-btn{width:38px;height:38px;border-radius:12px;border:1px solid #d9e0df;background:#fff;color:#516966}
.view{display:none}.view.active{display:block}.panel,.metric-card{background:#fff;border:1px solid #e2e7e6;border-radius:var(--radius);box-shadow:var(--shadow)}.panel{padding:22px}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}.metric-card{padding:18px}.metric-card span{font-size:12px;color:var(--secondary)}.metric-card strong{display:block;font-size:30px;line-height:1;margin:9px 0 8px;letter-spacing:-1px}.metric-card small{color:#8b9996;font-size:11px}
.overview-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(340px,.7fr);gap:14px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.panel-head h2{font-size:20px;margin:4px 0 0;letter-spacing:-.45px}.panel-head p{margin:5px 0 0;color:#78908a;font-size:12px}.text-btn{border:0;background:transparent;color:var(--green);font-size:12px;font-weight:700}.secondary{border:1px solid #d4dedb;background:#fff;color:var(--forest);padding:9px 14px;border-radius:10px;font-weight:600}.primary{border:0;background:var(--green);color:#fff;padding:11px 16px;border-radius:11px;font-weight:700}.primary:hover{background:var(--green600)}.wide{width:100%}
.search-field{height:44px;border:1px solid #dfe6e4;background:#fbfcfc;border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 12px}.search-field span{color:#859793}.search-field input{border:0;outline:0;background:transparent;width:100%;color:var(--forest)}.grow{flex:1}
.quick-staff{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px;max-height:360px;overflow:auto}.person-row,.staff-card{border:1px solid #e5e9e8;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px}.person-row:hover,.staff-card:hover{border-color:#c8d8d4;background:#fcfefd}.person-main{display:flex;align-items:center;gap:10px;min-width:0}.person-avatar{width:38px;height:38px;border-radius:50%;background:var(--green100);color:var(--green600);display:grid;place-items:center;font-weight:700;font-size:12px}.person-text{min-width:0}.person-text strong{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.person-text small{font-size:10px;color:#7d8e8a}.call-icon{width:38px;height:38px;border-radius:12px;border:1px solid #d3e6e0;background:var(--green100);color:var(--green);font-size:15px}.call-icon:hover{background:#dff2ec}
.history-list{display:flex;flex-direction:column;gap:7px}.history-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #eef1f0}.history-row:last-child{border:0}.history-who{display:flex;align-items:center;gap:10px}.history-who strong{font-size:12px;display:block}.history-who small{font-size:10px;color:#879691}.history-side{text-align:right}.history-side strong{font-size:11px}.history-side small{display:block;color:#8b9996;font-size:10px;margin-top:3px}
.calling-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);gap:14px}.call-console{min-height:610px}.state-pill{border-radius:999px;padding:8px 11px;font-size:11px;font-weight:700}.state-pill.idle{background:#f1f3f2;color:#71827e}.state-pill.live{background:#e6f3ec;color:#056a52}.state-pill.warn{background:#fff1e5;color:#a25b16}
.call-hero{min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:18px;background:linear-gradient(180deg,#f8fbfa,#f2f7f5);border:1px solid #e4ebe8;position:relative;overflow:hidden}.call-hero:before{content:"";position:absolute;width:300px;height:160px;border-radius:50%;background:rgba(0,143,109,.08);filter:blur(35px);top:-90px}.call-avatar{width:88px;height:88px;border-radius:50%;background:#fff;border:1px solid #d8e3df;box-shadow:0 16px 34px rgba(13,80,62,.08);display:grid;place-items:center;font-size:28px;font-weight:700;color:var(--green);z-index:1}.call-timer{font-size:32px;letter-spacing:-1px;margin-top:20px}.call-stage-text{font-size:12px;color:#738883;margin-top:5px}.call-actions{display:flex;justify-content:center;gap:12px;margin:20px 0}.round-action{width:72px;height:64px;border:1px solid #dfe6e4;background:#fff;border-radius:15px;color:#526b65;font-size:18px}.round-action span{display:block;font-size:9px;margin-top:3px}.round-action:disabled{opacity:.45;cursor:not-allowed}.round-action.danger:not(:disabled){background:#fff1ef;border-color:#f2cac5;color:#bd4c43}.privacy-note{font-size:11px;color:#78908a;text-align:center}
.call-picker{min-height:610px}.staff-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-height:500px;overflow:auto}.toolbar{display:flex;gap:10px;margin-bottom:16px}.toolbar select{border:1px solid #dfe6e4;background:#fff;border-radius:12px;padding:0 12px;color:#4c6660}.staff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.staff-card{padding:14px}.staff-card .person-main{flex:1}.staff-card .availability{font-size:9px;color:#008f6d}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#7b908b;padding:11px;border-bottom:1px solid #dfe6e4}td{padding:13px 11px;border-bottom:1px solid #eef1f0;font-size:12px}.status-dot{display:inline-flex;align-items:center;gap:6px}.status-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:#9aa8a5}.status-dot.answered:before,.status-dot.connected:before{background:#00a974}.status-dot.failed:before,.status-dot.cancelled:before{background:#d85d52}.status-dot.ringing_agent:before,.status-dot.dialing_staff:before{background:#f18424}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.settings-list{display:flex;flex-direction:column}.settings-row{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #eef1f0;font-size:12px}.settings-row span{color:#7b8d89}.good{color:#008f6d}.frosted-card{background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(238,246,244,.72));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.frosted-card p{font-size:13px;line-height:1.6;color:#5f7771}.security-points{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}.security-points span{border:1px solid #dce6e3;background:rgba(255,255,255,.72);border-radius:12px;padding:11px;font-size:11px;color:#526a64}.sync-meta{font-size:11px;color:#83948f}
.toast{position:fixed;right:24px;bottom:24px;z-index:60;background:#163d35;color:#fff;border-radius:13px;padding:13px 16px;box-shadow:0 16px 34px rgba(0,0,0,.18);font-size:12px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}
.login-body{background:var(--paper);min-height:100vh}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;padding:20px;gap:18px}.login-brand{border-radius:28px;background:linear-gradient(145deg,#06372b,#002620);color:#fffefa;padding:46px;display:flex;flex-direction:column}.login-copy{margin:auto 0;max-width:620px}.login-copy .eyebrow{color:#99cfc2}.login-copy h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:54px;line-height:1.02;letter-spacing:-1.8px;margin:12px 0 18px}.login-copy p{max-width:520px;color:#d4e2de;line-height:1.6}.login-security{margin-top:auto;color:#d9e8e4;border-radius:15px;padding:13px 15px;font-size:11px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}.login-panel{display:flex;align-items:center;justify-content:center;border-radius:28px}.login-card{width:min(380px,88%)}.mobile-brand{display:none}.login-card h2{font-size:30px;margin:0}.muted{color:#748985}.login-card label{display:block;font-size:11px;font-weight:700;margin:18px 0 7px}.login-card input{width:100%;height:46px;border:1px solid #d7e0de;border-radius:12px;padding:0 13px;outline:0}.login-card input:focus{border-color:#8cccbc;box-shadow:0 0 0 4px rgba(0,143,109,.08)}.login-card .primary{margin-top:20px}.form-error{margin-top:14px;padding:10px 12px;border-radius:10px;background:#fff0ee;color:#a94b43;font-size:11px}.login-foot{text-align:center;font-size:10px;color:#8c9a97;margin-top:20px}
@media(max-width:1100px){.stats-row{grid-template-columns:repeat(2,1fr)}.overview-grid,.calling-grid{grid-template-columns:1fr}.staff-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:780px){.app-shell{grid-template-columns:78px 1fr}.side-logo span,.nav-link span:last-child,.user-meta,.logout-link{display:none}.sidebar{padding:16px 10px}.collapse-btn{display:none}.side-logo{padding:10px 12px 24px}.nav-link{justify-content:center;padding:10px}.sidebar-bottom{padding:10px}.user-row{justify-content:center}.overview-grid{display:block}.activity-panel{margin-top:14px}.settings-grid{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr;padding:0}.login-brand{display:none}.login-panel{min-height:100vh;border-radius:0}.mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:40px}}@media(max-width:560px){.main{padding:8px}.topbar{top:6px}.stats-row{grid-template-columns:1fr 1fr}.quick-staff,.staff-grid{grid-template-columns:1fr}.topbar .page-kicker,.system-badge{display:none}.panel{padding:16px}.call-console,.call-picker{min-height:auto}}

.round-action.active{background:#e6f3ec;border-color:#b9ddd2;color:#006c52}
.modal{position:fixed;inset:0;z-index:100;background:rgba(0,38,32,.18);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}.modal-card{width:min(360px,94vw);border-radius:22px;padding:20px;background:rgba(255,255,255,.88)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}.modal-head h3{margin:4px 0 0;font-size:20px}.modal-close{width:34px;height:34px;border-radius:50%;border:1px solid #d7e1df;background:#fff;color:#526862;font-size:20px}
.dtmf-display{height:38px;border:1px solid #dfe6e4;border-radius:10px;background:#fff;margin-bottom:12px;padding:8px 10px;text-align:center;letter-spacing:.18em;color:#375950}
.keypad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.keypad-grid button{height:58px;border:1px solid #d8e4e1;border-radius:14px;background:#fff;color:#244d43;font-size:18px;font-weight:650}.keypad-grid button:hover{background:#eef6f4}
.field-label{display:block;font-size:11px;font-weight:700;color:#5b706b;margin-bottom:7px}.modal-input{width:100%;height:46px;border:1px solid #d7e0de;border-radius:12px;padding:0 13px;outline:0;margin-bottom:14px}.modal-input:focus{border-color:#8cccbc;box-shadow:0 0 0 4px rgba(0,143,109,.08)}.modal-help{font-size:10px;color:#82928e;line-height:1.5;margin:12px 0 0}

.round-action.active{background:#e6f3ec;border-color:#b9ddd2;color:#006c52}
.modal{position:fixed;inset:0;z-index:100;background:rgba(0,38,32,.18);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}.modal-card{width:min(360px,94vw);border-radius:22px;padding:20px;background:rgba(255,255,255,.88)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}.modal-head h3{margin:4px 0 0;font-size:20px}.modal-close{width:34px;height:34px;border-radius:50%;border:1px solid #d7e1df;background:#fff;color:#526862;font-size:20px}
.dtmf-display{height:38px;border:1px solid #dfe6e4;border-radius:10px;background:#fff;margin-bottom:12px;padding:8px 10px;text-align:center;letter-spacing:.18em;color:#375950}
.keypad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.keypad-grid button{height:58px;border:1px solid #d8e4e1;border-radius:14px;background:#fff;color:#244d43;font-size:18px;font-weight:650}.keypad-grid button:hover{background:#eef6f4}
.field-label{display:block;font-size:11px;font-weight:700;color:#5b706b;margin-bottom:7px}.modal-input{width:100%;height:46px;border:1px solid #d7e0de;border-radius:12px;padding:0 13px;outline:0;margin-bottom:14px}.modal-input:focus{border-color:#8cccbc;box-shadow:0 0 0 4px rgba(0,143,109,.08)}.modal-help{font-size:10px;color:#82928e;line-height:1.5;margin:12px 0 0}

/* ADVTECH-INCOMING-LIVE */
.incoming-live{position:fixed;right:24px;top:92px;z-index:90;width:min(390px,calc(100vw - 32px));padding:16px;border-radius:20px;background:rgba(255,255,255,.88);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.95);box-shadow:0 22px 60px rgba(0,38,32,.18);opacity:0;transform:translateY(-12px) scale(.98);pointer-events:none;transition:.2s}.incoming-live.show{opacity:1;transform:none;pointer-events:auto}.incoming-live.connected{border-color:#b9ddd2}.incoming-live.ringing{animation:incomingPulse 1.8s ease-in-out infinite}@keyframes incomingPulse{0%,100%{box-shadow:0 22px 60px rgba(0,38,32,.18)}50%{box-shadow:0 22px 64px rgba(0,143,109,.28)}}.incoming-live-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-live-person{display:flex;align-items:center;gap:12px;min-width:0}.incoming-live-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#eef6f4;color:#056a52;font-weight:800}.incoming-live-person strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.incoming-live-person small{display:block;margin-top:3px;color:#71837f;font-size:11px}.incoming-live-state{padding:7px 9px;border-radius:999px;background:#fff1e5;color:#9b5a18;font-size:10px;font-weight:800;white-space:nowrap}.incoming-live.connected .incoming-live-state{background:#e6f3ec;color:#056a52}.incoming-live-timer{font-size:30px;font-weight:650;letter-spacing:-1px;margin:18px 0 2px}.incoming-live-note{font-size:11px;color:#728581}.incoming-live-actions{display:flex;gap:9px;margin-top:15px}.incoming-live-actions button{flex:1;height:42px;border-radius:11px;font-weight:700}.incoming-live-end{border:1px solid #efc9c5;background:#fff4f2;color:#aa463d}.incoming-live-open{border:1px solid #cfe1dc;background:#eef6f4;color:#056a52}@media(max-width:700px){.incoming-live{right:16px;top:76px}}


/* ADVTECH AGENT RECORDING PLAYER */
.agent-rec-player{display:flex;align-items:center;gap:8px;min-width:170px;max-width:230px}
.agent-rec-play{width:29px;height:29px;flex:0 0 29px;border:1px solid #dbe5e2;border-radius:50%;background:#f7faf9;color:#08785c;display:grid;place-items:center;font-size:10px;font-weight:800;cursor:pointer;transition:.18s ease}
.agent-rec-play:hover{background:#eaf5f1;transform:translateY(-1px)}
.agent-rec-player.playing .agent-rec-play{background:#08785c;color:#fff;border-color:#08785c}
.agent-rec-time{width:37px;font-size:10px;font-variant-numeric:tabular-nums;color:#667b76}
.agent-rec-track{position:relative;flex:1;height:18px;cursor:pointer}
.agent-rec-track:before{content:"";position:absolute;left:0;right:0;top:8px;height:3px;border-radius:999px;background:#e3ebe8}
.agent-rec-track i{position:absolute;left:0;top:8px;height:3px;width:0;border-radius:999px;background:#0b9972;pointer-events:none}
.history-no-recording{color:#a2afac}

.agent-rec-download{width:29px;height:29px;flex:0 0 29px;border:1px solid #dbe5e2;border-radius:50%;background:#f7faf9;color:#08785c;text-decoration:none;display:grid;place-items:center;font-size:13px;font-weight:800;transition:.18s ease}
.agent-rec-download:hover{background:#eaf5f1;transform:translateY(-1px)}