@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
    --ink:#17252c;
    --muted:#78868b;
    --line:#e6eceb;
    --mint:#b9f3df;
    --mint-dark:#23856e;
    --orange:#ff916f;
    --paper:#fbfdfc
}
*{
    box-sizing:border-box
}
body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:14px 'DM Sans',sans-serif
}
h1,h2,h3,strong{
    font-family:'Space Grotesk',sans-serif}h1,h2,h3,p{
    margin:0
}
button{
    font:inherit;
    cursor:pointer
}
.shell{
    display:flex;
    min-height:100vh
}
aside{
    width:238px;
    background:#17343a;
    color:#d5e5e1;
    padding:30px 18px;
    display:flex;
    flex-direction:column
}
.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font:700 25px 'Space Grotesk';
    color:#f4fffb;
    margin:0 12px 60px
}
.brand-mark{
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    background:var(--mint);
    border-radius:9px;
    color:#17343a;
    font-size:18px
}
.accent{
    color:var(--orange)
}
.eyebrow{
    font-size:10px;
    letter-spacing:1.5px;
    color:var(--muted);
    font-weight:700
}
.mint{
    color:var(--mint-dark)
}
aside .eyebrow{
    color:#76918f;
    margin:0 12px 14px
}
nav{
    display:grid;
    gap:6px
}
nav a{
    padding:12px 13px;
    border-radius:8px;
    color:#b7ceca;
    text-decoration:none;
    display:flex;
    gap:12px;
    align-items:center
}
nav a span{
    font-size:17px;
    width:17px
}
nav a b{
    margin-left:auto;
    font-size:11px;
    background:#31535a;
    padding:2px 7px;
    border-radius:20px;
    color:#c8ded8
}
nav a.active,nav a:hover{
    background:#295059;
    color:white
}
.side-note{
    margin-top:auto;
    padding:15px 10px;
    border-top:1px solid #31545a;
    display:flex;
    gap:10px;
    align-items:center
}
.side-note strong,.side-note small{
    display:block;
    font-size:11px
}
.side-note small{
    color:#88aaa5;
    margin-top:4px
}
.pulse,.live-dot{
    color:#61d6a8
}
.pulse{
    width:8px;
    height:8px;
    background:#61d6a8;
    border-radius:50%;
    box-shadow:0 0 0 4px #61d6a822
}
main{
    flex:1;
    padding:34px 5vw 60px;
    max-width:1500px;
    margin:auto
}
header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px
}
header h1{
    font-size:26px;
    margin-top:5px
}
.avatar{
    border:0;
    background:#ffcab9;
    color:#7e4034;
    border-radius:50%;
    font-weight:700;
    width:38px;
    height:38px
}
.hero{
    background:#d9f7e9;
    border-radius:12px;
    min-height:210px;
    padding:32px 38px;
    display:flex;
    justify-content:space-between;
    overflow:hidden;
    position:relative
}
.hero h2{
    font-size:35px;
    line-height:1.05;
    margin:10px 0
}
.hero h2 em{
    color:#23856e;
    font-style:normal
}
.hero-copy{
    color:#54706d
}
.hero-orbit{
    width:220px;
    height:180px;
    border:1px solid #9edcc6;
    border-radius:50%;
    position:relative;
    transform:rotate(-18deg);
    margin-right:50px
}
.hero-orbit:before,.hero-orbit:after{
    content:'';
    position:absolute;
    border:1px solid #9edcc6;
    border-radius:50%;
    inset:22px -18px
}
.hero-orbit:after{
    inset:45px -35px
}
.hero-orbit span{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    background:#fff6;
    border-radius:50%;
    font:700 24px 'Space Grotesk';
    color:#23856e;
    transform:rotate(18deg)
}
.hero-orbit i{
    position:absolute;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--orange)
}
.hero-orbit i:nth-of-type(1){
    top:20px;
    right:28px
}
.hero-orbit i:nth-of-type(2){
    bottom:25px;
    left:12px;
    background:#23856e
}
.hero-orbit i:nth-of-type(3){
    top:80px;
    right:-38px;
    background:#f2bd4d
}
.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin:18px 0 25px
}
.stat,.panel{
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px
}
.stat{
    padding:19px 20px
}
.stat span,.stat small{
    display:block;
    color:var(--muted);
    font-size:12px
}
.stat strong{
    display:block;
    font-size:29px;
    margin:9px 0
}
.stat small label{
    color:#9aa5a5;
    margin-left:4px
}
.up{
    color:#299b75!important
}
.warn{
    color:#d58056!important
}
.content-grid{
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);
    gap:18px
}
.panel{
    padding:22px
}
.panel-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px
}
.panel h3{
    font-size:19px;
    margin-top:6px
}
.outline{
    border:1px solid #bdd8d1;
    background:#f7fffb;
    color:#23856e;
    padding:9px 13px;
    border-radius:6px;
    font-weight:600
}
.table-wrap{
    overflow:auto
}
table{
    border-collapse:collapse;
    width:100%;
    min-width:600px;
    text-align:left
}
th{
    font-size:10px;
    color:#9aa7a7;
    letter-spacing:1px;
    text-transform:uppercase;
    font-weight:600
}
th,td{
    padding:13px 10px;
    border-bottom:1px solid #eef2f1
}
td{
    color:#687679;
    font-size:12px
}
.person{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--ink)
}
.person strong{
    font-size:13px
}
.person-icon,.call-icon{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:50%;
    background:#e6f6ef;
    color:#23856e;
    font-weight:700
}
.tag{
    font-size:10px;
    text-transform:capitalize;
    padding:5px 8px;
    border-radius:4px;
    background:#eef2f1;
    color:#708080;
    white-space:nowrap
}
.tag-interested,.tag-completed{
    background:#e0f7eb;
    color:#278663
}
.tag-retrying,.tag-no_answer{
    background:#fff0dc;
    color:#ba7744
}
.tag-call_queued,.tag-ringing{
    background:#e6f0fb;
    color:#527ca9
}
.tag-not_interested{
    background:#ffe5e0;
    color:#c56d5f
}
.activity{
    min-height:300px
}
.live-dot{
    font-size:11px
}
.activity-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 0;
    border-bottom:1px solid #eef2f1
}
.activity-row>div{
    flex:1
}
.activity-row strong,.activity-row small{
    display:block
}
.activity-row strong{
    font-size:12px
}
.activity-row small{
    color:var(--muted);
    font-size:11px;
    margin-top:4px
}
.call-icon{
    background:#fff0e7;
    color:#e58262
}
.empty{
    text-align:center;
    color:var(--muted);
    padding:35px 10px;
    font-size:12px
}
dialog{
    border:0;
    border-radius:12px;
    padding:0;
    box-shadow:0 20px 70px #17343a33
}
dialog::backdrop{
    background:#17343a66
}
dialog form{
    padding:28px;
    width:min(360px,90vw);
    display:grid;
    gap:13px;
    position:relative
}
dialog h3{
    font-size:22px;
    margin-bottom:7px
}
input{
    padding:12px;
    border:1px solid var(--line);
    border-radius:6px;
    font:inherit
}
.primary{
    padding:12px;
    border:0;
    background:#23856e;
    color:white;
    border-radius:6px;
    font-weight:600
}
.close{
    position:absolute;
    right:17px;
    top:13px;
    border:0;
    background:none;
    font-size:22px;
    color:var(--muted)
}
#form-message{
    color:#c56d5f;
    font-size:12px
}
@media(max-width:850px){
    aside{
        width:72px;
        padding:25px 10px
    }
    .brand{
        margin:0 auto 50px
    }
    .brand>span:last-child,aside .eyebrow,.side-note,nav a b{
        display:none
    }
    nav a{
        justify-content:center
    }
    nav a span{
        width:auto
    }
    main{
        padding:25px 18px
    }
    .hero{
        padding:28px 24px
    }
    .hero-orbit{
        margin-right:-70px;
        opacity:.7
    }
    .stats{
        grid-template-columns:repeat(2,1fr)
    }
    .content-grid{
        grid-template-columns:1fr
    }
}
@media(max-width:500px){
    header h1{
        font-size:21px
    }
    .hero h2
    {
        font-size:28px
    }
    .hero-orbit
    {
        display:none
    }
    .stats
    {
        gap:8px
    }
    .stat{
        padding:14px
    }
    .stat strong{
        font-size:23px
    }
    .content-grid{
        display:block
    }
    .activity{
        margin-top:15px
    }
}