:root{
--ink:#172033;
--muted:#6e788d;
--line:#e8ebf0;
--panel:#fff;
--wash:#f7f8fa;
--blue:#2364da;
--navy:#12234a;
--green:#16866b;
--amber:#d78612}
.app-page{min-height:100vh;margin-left:240px;padding:34px 42px;background:#f7f8fa}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:28px}.page-head h1{margin:0;color:#12234a;font-size:30px;letter-spacing:-1px}.page-head p{margin:7px 0 0;color:#6e788d;font-size:14px}.page-action{border:1px solid #d9e1ee;border-radius:7px;background:#fff;padding:9px 13px;color:#244d98;font-size:12px;font-weight:700;white-space:nowrap}.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}.kpi,.surface{background:#fff;border:1px solid #e5eaf1;border-radius:10px;box-shadow:0 2px 7px #15213b08}.kpi{padding:17px}.kpi small{display:block;color:#6e788d;font-size:12px;margin-bottom:7px}.kpi strong{font-size:27px;letter-spacing:-1px;color:#12234a}.kpi span{font-size:11px;margin-left:6px}.up{color:#16866b}.layout-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.surface{padding:20px}.surface h2{font-size:16px;color:#12234a;margin:0 0 17px}.attention,.activity-line,.member{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid #edf0f4}.attention:first-of-type,.activity-line:first-of-type,.member:first-of-type{border-top:0}.attention>span{width:8px;height:8px;border-radius:50%;background:#f2aa32;flex:none}.attention strong,.activity-line strong,.member strong{font-size:13px;color:#172033}.attention small,.activity-line small,.member small{display:block;color:#6e788d;font-size:12px;margin-top:3px}.activity-line{justify-content:space-between}.activity-line small{white-space:nowrap}.filterbar{display:flex;gap:10px;margin-bottom:20px}.filterbar input,.filterbar select,.field input,.field select{min-height:38px;border:1px solid #d9dfe8;border-radius:7px;background:#fff;padding:8px 10px;outline-color:#2364da}.filterbar input{flex:1}.table{width:100%;border-collapse:collapse;font-size:13px}.table th{text-align:left;color:#7d8798;font-size:10px;letter-spacing:.5px;padding:0 10px 11px}.table td{padding:13px 10px;border-top:1px solid #edf0f4}.pill{display:inline-block;border-radius:20px;background:#eef3ff;color:#365caa;font-size:10px;font-weight:700;padding:4px 8px}.pill.green{background:#e7f6f1;color:#16866b}.pill.orange{background:#fff0df;color:#b66c09}.bar-chart{height:185px;display:flex;align-items:end;gap:13px;padding:0 8px;border-bottom:1px solid #e4e8ee}.bar-chart div{position:relative;flex:1;min-height:12px;border-radius:6px 6px 0 0;background:#6992e6}.bar-chart span{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);font-size:10px;color:#758094}.progress-row{margin:16px 0}.progress-row>div:first-child{display:flex;justify-content:space-between;font-size:12px}.progress{height:7px;background:#eaf0f7;border-radius:8px;margin-top:7px}.progress i{display:block;height:100%;border-radius:inherit;background:#4d7fdb}.member .pill{margin-left:auto}.settings-grid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px}.setting-nav{background:#fff;border:1px solid #e5eaf1;border-radius:10px;padding:9px;height:max-content}.setting-nav button{display:block;width:100%;padding:10px;text-align:left;border-radius:6px;color:#4a5870}.setting-nav button:first-child{background:#edf3ff;color:#2364da;font-weight:700}.field{margin:14px 0}.field label{display:block;font-size:12px;font-weight:700;margin-bottom:6px}.field input,.field select{width:100%}.toggle{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid #edf0f4;font-size:13px}.toggle b{color:#16866b}@media(max-width:1100px){.app-page{margin-left:240px;padding:28px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.app-page{margin:0;padding:22px 16px}.page-head{margin-bottom:20px}.page-head h1{font-size:25px}.kpis,.layout-two,.settings-grid{grid-template-columns:1fr}.filterbar{flex-direction:column}.table{min-width:620px}.surface{overflow:auto}.activity-line{align-items:flex-start;flex-direction:column;gap:2px}.activity-line small{white-space:normal}}
.app-page{position:fixed;inset:0 0 0 240px;margin:0;overflow:auto}@media(max-width:760px){.app-page{inset:0;margin:0}}
*{
box-sizing:border-box}
body{
margin:0;
font:14px Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
color:var(--ink);
background:var(--wash)}
button,input,textarea{
font:inherit}
button{
border:0;
background:none;
color:inherit;
cursor:pointer}
.shell{
min-height:100vh}
.rail{
position:fixed;
width:240px;
inset:0 auto 0 0;
background:var(--navy);
color:#dbe5ff;
padding:25px 14px;
display:flex;
flex-direction:column}
.brand{
font-size:22px;
font-weight:800;
letter-spacing:-1px;
color:#fff;
padding:0 12px 34px}
.brand span{
display:inline-grid;
place-items:center;
width:27px;
height:27px;
border-radius:8px;
background:#45c0a5;
margin-right:6px;
font-style:italic}
.rail nav{
display:grid;
gap:5px}
.rail a{
padding:12px 13px;
border-radius:8px;
display:flex;
align-items:center;
gap:10px;
color:#b9c8e8;
text-decoration:none}
.rail a.active,.rail a:hover{
background:#203864;
color:white}
.rail i{
font-style:normal;
background:#ef725b;
color:#fff;
border-radius:10px;
padding:1px 6px;
font-size:11px;
margin-left:auto}
.account{
margin-top:auto;
border-top:1px solid #294270;
padding:17px 8px 0;
display:flex;
gap:9px;
align-items:center}
.account small{
display:block;
color:#9cafcf;
font-size:11px;
margin-top:2px}
.account button{
margin-left:auto;
color:white}
.avatar{
width:34px;
height:34px;
border-radius:50%;
display:grid;
place-items:center;
font-size:11px;
font-weight:700;
color:#174063;
background:#c5e7e2;
flex:none}
.avatar.large{
width:39px;
height:39px}
.avatar.xl{
width:58px;
height:58px;
font-size:15px;
margin:auto;
background:#d7e2fb;
color:#31579e}
.workspace{
margin-left:240px;
display:grid;
grid-template-columns:330px minmax(420px,1fr) 310px;
min-height:100vh;
background:#fff}
.list-pane,.details{
background:#fff}
.list-pane{
border-right:1px solid var(--line)}
.list-pane header,.details>header{
height:88px;
padding:21px 20px 12px;
display:flex;
justify-content:space-between;
align-items:center}
.eyebrow{
font-size:10px;
color:var(--blue);
font-weight:800;
letter-spacing:1px;
margin:0 0 4px}
.list-pane h1,.details h2{
font-size:20px;
letter-spacing:-.4px;
margin:0}
.icon-btn{
font-size:25px;
color:var(--blue)}
.search{
margin:1px 16px 14px;
padding:9px 10px;
border:1px solid var(--line);
border-radius:7px;
color:#99a3b5}
.search input{
outline:0;
border:0;
width:90%;
padding-left:5px}
.tabs{
display:flex;
gap:13px;
padding:0 17px;
border-bottom:1px solid var(--line)}
.tabs button{
padding:10px 0 12px;
color:var(--muted);
font-size:12px}
.tabs button.selected{
color:var(--blue);
font-weight:700;
border-bottom:2px solid var(--blue)}
.tabs b{
font-size:10px;
padding:2px 5px;
border-radius:9px;
background:#eef2f7}
.filter{
display:flex;
justify-content:space-between;
padding:16px 19px 8px;
color:var(--muted);
font-size:12px}
.filter button{
font-weight:600;
color:#42516b}
.conversation{
display:flex;
gap:10px;
padding:13px 16px;
cursor:pointer;
border-left:3px solid transparent}
.conversation:hover,.conversation.active{
background:#f1f6ff;
border-left-color:var(--blue)}
.conv-copy{
min-width:0;
flex:1}
.conv-top,.conv-bottom{
display:flex;
justify-content:space-between;
gap:10px}
.conv-top strong{
font-size:13px}
.conv-top time,.conv-bottom{
font-size:11px;
color:var(--muted)}
.conv-bottom p{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
margin:5px 0 0;
max-width:180px}
.badge{
font-size:10px;
background:#e5edfc;
color:var(--blue);
font-weight:800;
padding:2px 6px;
border-radius:10px}
.thread{
display:flex;
flex-direction:column;
min-width:0;
background:#fafbfc}
.thread-head{
height:88px;
background:#fff;
border-bottom:1px solid var(--line);
padding:18px 24px;
display:flex;
align-items:center;
gap:11px}
.thread-head h2{
font-size:16px;
margin:0}
.thread-head p{
font-size:12px;
color:var(--muted);
margin:3px 0}
.thread-actions{
margin-left:auto;
display:flex;
gap:15px;
font-size:18px;
color:#58647a}
.mobile-back{
display:none}
.assignment{
display:flex;
gap:8px;
align-items:center;
padding:9px 25px;
background:#eef7f4;
color:#397164;
font-size:12px}
.assignment button{
margin-left:auto;
color:#1b7e68;
font-weight:700}
.green-dot{
height:7px;
width:7px;
border-radius:50%;
background:var(--green)}
.messages{
padding:28px max(30px,6vw);
overflow:auto;
flex:1;
display:flex;
flex-direction:column;
gap:13px}
.day{
text-align:center;
color:#8791a3;
font-size:11px;
margin:5px}
.message{
max-width:72%;
padding:10px 12px;
border-radius:10px;
background:#fff;
border:1px solid #e7ebef;
line-height:1.45;
box-shadow:0 1px 1px #dce1e81f}
.message.out{
align-self:flex-end;
background:#e5f6f0;
border-color:#d1eee4}
.message.note{
align-self:center;
max-width:86%;
background:#fff7dd;
border:1px solid #f1df9d;
color:#725c18;
font-size:12px}
.message small{
display:block;
text-align:right;
color:#86909d;
font-size:10px;
margin-top:5px}
.composer{
background:#fff;
border-top:1px solid var(--line);
padding:10px 20px 12px}
.reply-row{
display:flex;
gap:15px;
margin:0 0 7px}
.reply-row button{
font-size:12px;
color:#53627b;
font-weight:600}
.compose-box{
display:flex;
align-items:center;
gap:8px;
border:1px solid #d8dee8;
border-radius:8px;
padding:5px 6px 5px 12px}
.compose-box textarea{
border:0;
outline:0;
resize:none;
flex:1;
padding:7px}
.compose-box button{
background:var(--blue);
color:#fff;
width:32px;
height:32px;
border-radius:6px}
.composer small{
font-size:10px;
color:#8590a1;
margin:6px 2px 0;
display:block}
.details{
border-left:1px solid var(--line);
overflow:auto}
.details>header{
height:70px;
border-bottom:1px solid var(--line)}
.details>header h2{
font-size:15px}
.details>header button{
color:var(--blue);
font-size:16px}
.profile{
text-align:center;
padding:21px 18px 18px;
border-bottom:1px solid var(--line)}
.profile h3{
margin:8px 0 2px}
.profile p{
margin:0;
color:var(--muted);
font-size:12px}
.tags{
display:flex;
justify-content:center;
gap:5px;
flex-wrap:wrap;
margin-top:13px}
.tags span{
font-size:9px;
font-weight:800;
letter-spacing:.2px;
padding:4px 6px;
border-radius:4px;
color:#a04f00;
background:#fff1de}
.tags span+span{
background:#e9f2ff;
color:#3464ab}
.detail-section{
padding:16px 19px;
border-bottom:1px solid var(--line)}
h4{
margin:0 0 12px;
font-size:12px}
.status-row{
display:flex;
align-items:center;
justify-content:space-between}
.status-row small,.followup small{
display:block;
color:var(--muted);
font-size:11px;
margin-bottom:3px}
.status-row strong{
font-size:13px;
color:#bf7306}
.status-row button,.section-title button{
color:var(--blue);
font-size:11px;
font-weight:700}
.pipeline{
display:flex;
gap:3px;
margin-top:15px}
.pipeline span{
height:4px;
flex:1;
background:#dce1e8;
border-radius:5px}
.pipeline .done{
background:#5fc3a6}
.pipeline .current{
background:#f2aa32}
.pipe-label{
display:flex;
justify-content:space-between;
gap:3px;
margin-top:4px}
.pipe-label small{
font-size:8px;
color:#8993a3;
text-align:center}
.fields p{
display:flex;
justify-content:space-between;
margin:10px 0;
font-size:12px}
.fields span{
color:var(--muted)}
.section-title{
display:flex;
justify-content:space-between}
.followup{
display:flex;
gap:9px;
align-items:flex-start;
background:#f1f7ff;
padding:9px;
border-radius:7px;
color:#345171}
.followup>span{
font-size:17px;
color:var(--blue)}
.followup strong{
font-size:12px}
.followup button{
margin-left:auto}
.notes article{
background:#fff9e9;
padding:9px;
border-radius:6px}
.notes p{
font-size:11px;
line-height:1.4;
margin:0 0 6px}
.notes small{
color:#887d59;
font-size:10px}
.modal{
position:fixed;
inset:0;
background:#14214277;
display:grid;
place-items:center;
z-index:4}
.hidden{
display:none}
.modal-card{
width:min(430px,90vw);
background:#fff;
border-radius:12px;
padding:25px;
position:relative;
box-shadow:0 15px 35px #0d1a3450}
.modal-card h2{
margin:0 0 18px;
font-size:18px}
.close{
position:absolute;
right:15px;
top:11px;
font-size:24px;
color:#7a8494}
.modal label{
display:block;
font-size:12px;
font-weight:700;
margin:12px 0 5px}
.modal input,.modal textarea,.modal select{
width:100%;
border:1px solid #d9dfe8;
border-radius:6px;
padding:9px;
outline-color:var(--blue)}
.primary{
width:100%;
background:var(--blue);
color:white;
border-radius:6px;
padding:10px;
margin-top:17px;
font-weight:700}
.app-page .surface>label{display:block;margin:20px 0 7px;font-size:13px;font-weight:700;color:#1c2a49}
.app-page .surface>input,.app-page .surface>textarea{display:block;width:100%;box-sizing:border-box;border:1px solid #d9dfe8;border-radius:9px;padding:12px;font:inherit;color:#172b4d;background:#fff;outline-color:var(--blue)}
.app-page .surface>textarea{min-height:120px;resize:vertical}
.app-page .surface .filterbar{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}
.app-page .surface .filterbar input{width:100%;box-sizing:border-box;border:1px solid #d9dfe8;border-radius:9px;padding:12px;font:inherit}
.app-page .surface .layout-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.app-page .surface .layout-two .primary{margin-top:0}
.app-page .surface .placements{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 20px}.app-page .surface .placements label{display:flex;align-items:center;gap:7px;margin:0;padding:11px;border:1px solid #d9dfe8;border-radius:8px;font-size:13px;font-weight:600}.app-page .surface .placements input{width:auto;margin:0}.app-page .surface .location-targeting{margin-top:20px}.app-page .surface .location-targeting>label{display:block;margin-bottom:7px;font-size:13px;font-weight:700;color:#1c2a49}.app-page .surface .location-targeting>select,.app-page .surface .location-grid select{width:100%;box-sizing:border-box;border:1px solid #d9dfe8;border-radius:9px;padding:12px;font:inherit;background:#fff}.app-page .surface .location-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:15px}.app-page .surface .location-grid label{display:block;margin:0 0 7px;font-size:13px;font-weight:700}.app-page .surface .location-grid small{display:block;margin-top:6px;color:#6e788d}.app-page .surface .location-grid select{padding:5px}.app-page .surface .hidden{display:none}
.app-page .surface .city-picker{margin:0}.app-page .surface .city-options{display:flex;gap:7px;flex-wrap:wrap}.app-page .surface .city-options button{width:auto;padding:7px 9px;border:1px solid #d9dfe8;border-radius:7px;background:#fff;color:#1c2a49;font-size:12px}.app-page .surface .city-options button:disabled{opacity:.38}.app-page .surface .city-box{min-height:47px;margin-top:10px;padding:8px;border:1px dashed #b8c7df;border-radius:8px;background:#f8faff;display:flex;gap:7px;flex-wrap:wrap;align-items:center}.app-page .surface .city-box span{background:#e3edff;color:#174eae;border-radius:16px;padding:5px 8px;font-size:12px}.app-page .surface .city-box span button{border:0;background:none;color:#174eae;padding:0 0 0 6px;font-weight:800}.app-page .surface .city-box small{color:#6e788d}
@media(max-width:650px){.app-page .surface .layout-two,.app-page .surface .filterbar{grid-template-columns:1fr}}
@media(max-width:1100px){
.workspace{
grid-template-columns:300px 1fr}
.details{
display:none}
}
@media(max-width:760px){
.rail{
display:none}
.workspace{
margin:0;
display:block}
.list-pane{
display:none}
.thread{
min-height:100vh}
.thread-head{
height:67px;
padding:12px}
.mobile-back{
display:block;
font-size:28px;
color:var(--blue)}
.messages{
padding:17px}
.assignment{
padding:9px 12px}
.composer{
padding:9px}
.message{
max-width:87%}
}

/* Polished interaction and visual hierarchy */
button,a,input,select,textarea{transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #9bbcff;outline-offset:2px}
button:hover:not(:disabled){transform:translateY(-1px)}
button:disabled{cursor:not-allowed;opacity:.55}
.rail{box-shadow:8px 0 28px #0a17381c}
.rail a{font-weight:600}
.rail a.active{box-shadow:inset 3px 0 #53d3b5}
.workspace{background:linear-gradient(110deg,#fff 0%,#fbfcff 100%)}
.list-pane header{background:linear-gradient(180deg,#fff,#fbfcff)}
.search{background:#fff;box-shadow:0 3px 10px #17203308}
.conversation{position:relative;transition:background .16s ease,border-color .16s ease}
.conversation:hover{background:#f5f8ff}
.thread-head{box-shadow:0 2px 12px #17203305;z-index:1}
.thread-actions button{width:32px;height:32px;border-radius:8px;background:#f4f7fc}
.thread-actions button:hover{background:#e6efff;color:var(--blue)}
.assignment{border-bottom:1px solid #dcefe9}
.message{border-radius:14px 14px 14px 4px}
.message.out{border-radius:14px 14px 4px 14px}
.composer{box-shadow:0 -6px 20px #17203306}
.compose-box:focus-within{border-color:#78a1eb;box-shadow:0 0 0 3px #dce9ff}
.compose-box button{box-shadow:0 4px 10px #2364da44}
.details{background:#fcfdff}
.detail-section:hover{background:#fff}
.page-action{background:#fff;box-shadow:0 3px 10px #1720330c}
.page-action:hover{border-color:#9bb8ee;background:#f5f8ff}
.kpi{position:relative;overflow:hidden}
.kpi:after{content:"";position:absolute;right:-20px;bottom:-28px;width:90px;height:90px;border-radius:50%;background:#e7efff}
.kpi strong,.kpi small,.kpi span{position:relative;z-index:1}
.surface{box-shadow:0 8px 24px #1720330a}
.surface:hover{border-color:#d8e2f3}
.table tbody tr{transition:background .14s ease}
.table tbody tr:hover{background:#f6f9ff}
.modal{backdrop-filter:blur(5px)}
.modal-card{border:1px solid #e7edf7;box-shadow:0 24px 65px #0d1a3466}
.primary{box-shadow:0 7px 15px #2364da33}
.primary:hover{background:#1b55bf}
.app-page{background:linear-gradient(135deg,#f6f8fc,#eef4ff)}
@media(max-width:760px){.thread-actions{gap:7px}.thread-actions button{width:29px;height:29px}.profile{padding:16px}.modal-card{padding:22px}}