:root{
  --cc-bg:#07090c;--cc-panel:#0d1117;--cc-panel2:#111821;--cc-line:#2a3039;
  --cc-red:#df3f32;--cc-red2:#ff5a45;--cc-gold:#e7b854;--cc-gold2:#ffd37b;
  --cc-text:#f7f5f1;--cc-muted:#8f99a4;--cc-green:#48d89b;
}
body{background:
  radial-gradient(circle at 56% 18%,rgba(154,38,29,.16),transparent 29%),
  radial-gradient(circle at 82% 8%,rgba(224,170,69,.055),transparent 22%),
  linear-gradient(180deg,#090c10 0,#05070a 100%)}
.sidebar{width:272px;background:linear-gradient(180deg,#080b0f,#0b1016 62%,#080b0f);border-right:1px solid #242a31;padding:18px 16px}
.brand-row{display:block}.brand-row img{width:238px;max-width:100%;border-radius:13px;padding:5px;background:#fff}
.assistant-id{margin:19px 0 11px;background:linear-gradient(135deg,rgba(223,63,50,.17),rgba(231,184,84,.045));border:1px solid rgba(231,184,84,.18);padding:12px 13px}
.assistant-id b{font-size:17px}.assistant-id small{font-size:11px;color:#c3a969}.live-dot{background:var(--cc-green)}
.sidebar nav{gap:4px}.sidebar nav button{padding:11px 12px;border-left:2px solid transparent;border-radius:9px;color:#abb3bc}
.sidebar nav button:hover{background:#111821;color:white}
.sidebar nav button.active{background:linear-gradient(90deg,rgba(223,63,50,.22),rgba(223,63,50,.05));border-left-color:var(--cc-red2);color:white}
.sidebar-foot{padding-top:15px;border-top:1px solid #20262d}.sidebar-foot .business-card{display:grid;gap:3px}
.sidebar-foot .business-card strong{font-size:13px;color:#fff}.sidebar-foot .business-card .phone{font-size:20px;color:var(--cc-red2);font-weight:850;letter-spacing:.01em}.sidebar-foot .business-card small{color:#c4a86a}
.topbar{left:272px;height:74px;padding:0 26px;background:rgba(6,9,12,.94);border-bottom:1px solid #242a31;backdrop-filter:blur(14px)}
.top-brand{gap:12px}.top-brand img{width:34px;height:42px}.top-brand .top-identity{display:flex;align-items:center;gap:15px}
.top-brand .archer-name{display:grid;line-height:1}.top-brand .archer-name b{font-size:24px;letter-spacing:.07em}.top-brand .archer-name span{font-size:9px;color:var(--cc-gold);letter-spacing:.17em;margin-top:5px}
.top-brand .top-divider{width:1px;height:34px;background:var(--cc-red)}
.top-brand .company-name{display:grid;line-height:1}.top-brand .company-name b{font-size:12px;letter-spacing:.12em}.top-brand .company-name span{font-size:9px;color:var(--cc-gold);letter-spacing:.18em;margin-top:5px}
.system-state{gap:9px;border:1px solid #273039;background:#0c1117;padding:8px 11px;border-radius:999px}
main{margin-left:272px;padding:100px 28px 46px}
.view{max-width:1480px}
.cc-greeting{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:17px}
.cc-greeting h1{font-size:clamp(31px,4vw,48px);letter-spacing:-.035em;margin:4px 0 4px}.cc-greeting p{margin:0;color:var(--cc-muted)}
.cc-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.cc-chip{border:1px solid #272e36;background:#0c1117;border-radius:999px;padding:8px 11px;font-size:11px;color:#bec5cb}.cc-chip strong{color:var(--cc-gold2)}
.cc-grid{display:grid;grid-template-columns:minmax(680px,1.65fr) minmax(295px,.55fr);gap:16px}
.cc-main-panel,.cc-side-panel{border:1px solid #252c34;background:linear-gradient(180deg,rgba(15,20,27,.97),rgba(9,13,18,.98));border-radius:18px;box-shadow:0 26px 70px rgba(0,0,0,.26)}
.cc-main-panel{padding:18px;overflow:hidden;position:relative}
.cc-main-panel:before{content:"";position:absolute;inset:0;background:
 linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
 linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,#000,transparent 58%);pointer-events:none}
.cc-panel-head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px}.cc-panel-head .section-title{font-size:12px;color:var(--cc-gold);letter-spacing:.16em;font-weight:800}
.cc-stage{height:330px;position:relative;display:grid;place-items:center;margin:0 auto}
.cc-orbit{position:absolute;border:1px solid rgba(223,63,50,.24);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.cc-orbit.o1{width:178px;height:178px;box-shadow:0 0 40px rgba(223,63,50,.08)}
.cc-orbit.o2{width:255px;height:255px;border-color:rgba(231,184,84,.13)}
.cc-orbit.o3{width:324px;height:324px;border-style:dashed;border-color:rgba(255,255,255,.07)}
.cc-core{width:142px;height:142px;border-radius:50%;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(255,90,69,.24),rgba(80,16,13,.45) 43%,#090c10 72%);border:1px solid rgba(255,97,73,.6);box-shadow:0 0 0 8px rgba(223,63,50,.055),0 0 48px rgba(223,63,50,.28),inset 0 0 40px rgba(239,76,52,.17);z-index:3}
.cc-core:before{content:"";position:absolute;inset:10px;border-radius:50%;border:1px solid rgba(231,184,84,.22)}
.cc-core img{width:65px;height:82px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.cc-core-pulse{position:absolute;inset:-15px;border:1px solid rgba(255,80,61,.18);border-radius:50%;animation:ccPulse 2.5s ease-in-out infinite}
@keyframes ccPulse{50%{transform:scale(1.06);opacity:.45}}
body.archer-listening .cc-core{box-shadow:0 0 0 9px rgba(223,63,50,.08),0 0 68px rgba(255,78,55,.46),inset 0 0 45px rgba(239,76,52,.2)}
body.archer-speaking .cc-core-pulse{animation-duration:1.1s}
.cc-core-label{position:absolute;top:calc(50% + 84px);left:50%;transform:translateX(-50%);text-align:center;z-index:4}.cc-core-label b{display:block;font-size:17px;letter-spacing:.16em}.cc-core-label span{display:block;font-size:9px;color:var(--cc-gold);letter-spacing:.19em;margin-top:4px}
.cc-agent{position:absolute;z-index:5;min-width:126px;border:1px solid #323943;background:rgba(12,17,23,.96);border-radius:11px;padding:8px 10px;text-align:center;font-size:9px;color:#b4bdc6;letter-spacing:.08em;box-shadow:0 9px 28px rgba(0,0,0,.25);transition:.18s ease}
.cc-agent b{display:block;color:#fff;font-size:10px;margin-bottom:3px}.cc-agent.active{border-color:rgba(255,89,65,.75);color:var(--cc-gold2);box-shadow:0 0 24px rgba(223,63,50,.24);transform:translateY(-2px)}
.cc-agent.dispatch{left:6%;top:20%}.cc-agent.crm{right:6%;top:20%}.cc-agent.finance{left:6%;bottom:17%}.cc-agent.office{right:6%;bottom:17%}
.cc-quick{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;position:relative;z-index:4;margin-top:-4px}
.cc-quick button{border:1px solid #292f37;background:linear-gradient(180deg,#111820,#0c1117);border-radius:11px;padding:10px 8px;text-align:center;min-height:62px}.cc-quick button:hover{border-color:#67413a;background:#15181c}.cc-quick b{display:block;font-size:11px}.cc-quick span{display:block;color:#858f99;font-size:9px;margin-top:4px}
.cc-conversation{min-height:0;margin-top:12px;padding:0;border:1px solid #252d35;background:#090d12;border-radius:14px;position:relative;z-index:4}
.cc-conversation .transcript{min-height:148px;max-height:250px;padding:12px}.cc-conversation .bubble{max-width:82%;padding:9px 11px;margin-bottom:7px}.cc-conversation .bubble.archer{background:#15100f;border-color:#3a2824}.cc-conversation .bubble.user{background:#111820}
.cc-conversation .composer{padding:10px;border-top:1px solid #222a31}.cc-conversation .composer input{background:#070a0e}.cc-conversation .speech-status{padding:0 11px 9px}
.cc-right{display:grid;gap:14px;align-content:start}.cc-side-panel{padding:16px}.cc-side-panel h3{margin:4px 0 9px;font-size:22px}.cc-side-panel p{margin:0;color:var(--cc-muted);font-size:12px;line-height:1.55}
.cc-side-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.cc-side-head span:first-child{font-size:10px;color:var(--cc-gold);letter-spacing:.14em;font-weight:800}
.cc-current{border-left:3px solid var(--cc-red)}
.context-divider{background:#252c34}.context-metrics{grid-template-columns:1fr 1fr}.context-metrics div{background:#090e13;border-color:#282f37}.context-metrics span{font-size:9px}.context-metrics b{font-size:21px}
.cc-system-list{display:grid;gap:8px}.cc-system-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #20262d;padding:8px 0;font-size:11px}.cc-system-row:last-child{border:0}.cc-system-row span:last-child{color:var(--cc-green);font-size:9px;letter-spacing:.1em}
.cc-note{margin-top:10px;padding:10px;border:1px solid rgba(231,184,84,.16);background:rgba(231,184,84,.045);border-radius:10px;color:#b9a87f;font-size:10px;line-height:1.5}
.page-title h1{letter-spacing:-.035em}.panel,.customer-card,.metrics article,.agent-card,.diag,.notice{border-color:#272e36;background:#0e141b}.panel-head h2{color:#fff}.pill{border-color:#303842}.quick-actions{display:none}
.modal-card{border-color:#303842;background:#0c1218}
.document-sheet{background:#fff!important;color:#101010!important}
@media(max-width:1180px){.cc-grid{grid-template-columns:1fr}.cc-right{grid-template-columns:1fr 1fr}.cc-current{min-height:100%}}
@media(max-width:900px){.sidebar{width:272px;transform:translateX(-104%);transition:.2s}.sidebar.open{transform:none}.brand-row .icon-btn{display:block;position:absolute;right:12px;top:12px;color:#111;background:#fff;border-radius:50%;width:30px;height:30px}.topbar{left:0}.topbar .icon-btn{display:block;margin-right:8px}main{margin-left:0;padding:96px 16px 34px}.cc-greeting{align-items:flex-start;flex-direction:column}.cc-meta{justify-content:flex-start}.cc-right{grid-template-columns:1fr}}
@media(max-width:720px){.top-brand .company-name,.top-brand .top-divider{display:none}.top-brand .archer-name b{font-size:18px}.system-state #systemLabel{display:none}.cc-stage{height:300px;transform:scale(.9);margin:-12px -20px}.cc-agent{min-width:104px;font-size:8px}.cc-agent.dispatch,.cc-agent.finance{left:0}.cc-agent.crm,.cc-agent.office{right:0}.cc-quick{grid-template-columns:repeat(2,1fr)}.cc-quick button:last-child{grid-column:1/-1}.cc-conversation .transcript{max-height:220px}.context-metrics{grid-template-columns:1fr 1fr}}

body.modal-open{overflow:hidden}
#modal .modal-card{position:relative}
#modalClose.modal-close{position:sticky;top:8px;float:right;z-index:1005;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:#171b21;color:#fff;font-size:28px;line-height:1;box-shadow:0 8px 24px rgba(0,0,0,.45)}
#modalClose.modal-close:hover,#modalClose.modal-close:focus{background:#df3f32;border-color:#ff7b68;outline:none;box-shadow:0 0 0 3px rgba(223,63,50,.2),0 8px 24px rgba(0,0,0,.45)}
#modalBody{clear:both}
@media(max-width:720px){#modal{padding:8px}#modal .modal-card{max-height:96vh;padding:16px}#modalClose.modal-close{top:2px;right:2px}}