/* PHCO Modern UI — visual refresh inspired by modern SaaS dashboards.
   Uses a native font stack to avoid external font downloads and layout shifts. */
:root{
  --phco-font:"Segoe UI Variable Text","Segoe UI",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --phco-bg:#07080b;
  --phco-bg-soft:#0a0c11;
  --phco-surface:#0e1016;
  --phco-surface-2:#12151d;
  --phco-surface-hover:#151923;
  --phco-text:#f5f6fb;
  --phco-muted:#979fb2;
  --phco-muted-2:#70798e;
  --phco-border:rgba(255,255,255,.085);
  --phco-border-strong:rgba(255,255,255,.14);
  --phco-pink:#f34ec6;
  --phco-purple:#9a68f5;
  --phco-blue:#6f86ff;
  --phco-green:#35d985;
  --phco-red:#ff6f88;
  --phco-yellow:#f6c95e;
  --phco-gradient:linear-gradient(135deg,var(--phco-pink),var(--phco-purple) 52%,var(--phco-blue));
  --phco-shadow-sm:0 8px 24px rgba(0,0,0,.18);
  --phco-shadow:0 18px 55px rgba(0,0,0,.28);
  --phco-radius-sm:10px;
  --phco-radius:16px;
  --phco-radius-lg:20px;
}

html{font-size:16px}
body{
  font-family:var(--phco-font)!important;
  font-optical-sizing:auto;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:-.005em;
  color:var(--phco-text)!important;
  background:
    radial-gradient(circle at 8% 4%,rgba(243,78,198,.07),transparent 28rem),
    radial-gradient(circle at 96% 3%,rgba(111,134,255,.065),transparent 30rem),
    linear-gradient(180deg,#07080b 0%,#090b10 58%,#07080b 100%)!important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.23;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 72%);
}
button,input,select,textarea{font-family:inherit!important}
button,a,input,select,textarea{transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease,opacity .18s ease}
::selection{background:rgba(165,107,255,.34);color:#fff}

/* App shell */
.container,.nav-container{width:min(calc(100% - 48px),1240px)!important}
.header{
  background:rgba(7,8,11,.82)!important;
  border-bottom:1px solid rgba(255,255,255,.065)!important;
  box-shadow:none!important;
  backdrop-filter:blur(20px) saturate(140%)!important;
}
.nav{min-height:68px!important;gap:16px!important}
.brand{gap:11px!important;font-weight:700!important}
.brand-mark,.brand img{
  width:44px!important;
  height:44px!important;
  border-radius:13px!important;
}
.brand-mark{
  background:rgba(255,255,255,.025)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055),0 8px 28px rgba(154,104,245,.10)!important;
}
.brand-mark img,.brand>img{filter:drop-shadow(0 0 12px rgba(165,107,255,.26))!important}
.brand-wordmark{
  font-family:var(--phco-font)!important;
  font-size:1.16rem!important;
  font-weight:750!important;
  letter-spacing:.24em!important;
  transform:none!important;
  text-shadow:none!important;
  filter:none!important;
}
.nav-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
}
.nav-btn{
  min-height:38px!important;
  height:38px!important;
  padding:0 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  box-sizing:border-box!important;
  margin:0!important;
  border:1px solid var(--phco-border)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.025)!important;
  color:#e9ebf3!important;
  font-size:.84rem!important;
  font-weight:600!important;
  line-height:1!important;
  letter-spacing:-.01em!important;
  text-align:center!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  box-shadow:none!important;
}
.nav-btn:hover{transform:translateY(-1px);border-color:rgba(165,107,255,.40)!important;background:rgba(165,107,255,.075)!important}

/* Type scale */
h1,h2,h3,h4,strong{letter-spacing:-.025em}
h1{font-weight:720!important}
h2,h3,h4{font-weight:680!important}
p{letter-spacing:-.006em}

/* Generic modern controls */
.btn{
  min-height:42px!important;
  padding:0 15px!important;
  border-radius:10px!important;
  font-size:.86rem!important;
  font-weight:650!important;
  letter-spacing:-.01em!important;
  box-shadow:none!important;
}
.btn:hover{transform:translateY(-1px)!important}
.btn.primary{background:var(--phco-gradient)!important;box-shadow:0 9px 24px rgba(154,104,245,.17)!important}
.btn.secondary{background:rgba(255,255,255,.035)!important;border:1px solid var(--phco-border)!important}
.btn.secondary:hover{background:rgba(255,255,255,.065)!important;border-color:var(--phco-border-strong)!important}
.btn.danger{background:rgba(255,111,136,.065)!important;border:1px solid rgba(255,111,136,.22)!important;color:#ffb7c4!important}
.btn.small{min-height:34px!important;border-radius:9px!important;font-size:.79rem!important}

.control{gap:7px!important}
.control label,.field label{
  color:#a6aec0!important;
  font-size:.74rem!important;
  font-weight:600!important;
  letter-spacing:.015em!important;
}
.control input,.control select,.control textarea,.field input,.field select,.field textarea{
  border:1px solid var(--phco-border)!important;
  border-radius:10px!important;
  background:#090b10!important;
  color:#f5f6fb!important;
  padding:10px 12px!important;
  font-size:.88rem!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015)!important;
}
.control input:focus,.control select:focus,.control textarea:focus,.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(154,104,245,.62)!important;
  box-shadow:0 0 0 3px rgba(154,104,245,.10)!important;
}

/* Leads + campaigns */
.page{padding:38px 0 64px!important}
.page-head{align-items:center!important;margin-bottom:22px!important;gap:24px!important}
.page-head h1{
  margin:0!important;
  font-size:clamp(2rem,3.3vw,2.85rem)!important;
  line-height:1.08!important;
  letter-spacing:-.045em!important;
}
.page-head p{margin:8px 0 0!important;color:var(--phco-muted)!important;font-size:.92rem!important;line-height:1.55!important;max-width:720px!important}
.page-actions{gap:8px!important}
.stats{gap:10px!important;margin-bottom:14px!important}
.stat{
  min-height:88px;
  padding:15px 16px!important;
  border:1px solid var(--phco-border)!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,rgba(17,20,28,.84),rgba(10,12,17,.9))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.stat small{color:#8e97ab!important;font-size:.75rem!important;font-weight:500!important;margin-bottom:8px!important}
.stat strong{font-size:1.45rem!important;font-weight:680!important;line-height:1!important}
.card{
  padding:20px!important;
  border:1px solid var(--phco-border)!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,rgba(15,17,23,.96),rgba(9,11,15,.98))!important;
  box-shadow:var(--phco-shadow-sm)!important;
}
.card h2{font-size:1.3rem!important;letter-spacing:-.035em!important}
.toolbar{gap:9px!important;margin-bottom:14px!important}
.table-wrap{border:1px solid var(--phco-border)!important;border-radius:13px!important;background:rgba(5,7,10,.32)!important}
.table th{
  color:#8d96ab!important;
  font-size:.68rem!important;
  font-weight:650!important;
  letter-spacing:.08em!important;
  background:rgba(255,255,255,.025)!important;
}
.table th,.table td{padding:12px 13px!important;border-bottom:1px solid rgba(255,255,255,.06)!important;font-size:.86rem!important}
.table tbody tr:hover{background:rgba(154,104,245,.04)!important}
.contact-name{font-weight:650!important}
.contact-phone,.campaign-meta{color:#8f98ad!important;font-size:.76rem!important}
.badge,.status,.campaign-status{
  font-size:.69rem!important;
  font-weight:650!important;
  padding:4px 8px!important;
  letter-spacing:0!important;
}
.badge-dot{width:7px!important;height:7px!important}
.bulk{border-radius:12px!important;background:rgba(154,104,245,.045)!important}
.campaign-layout{gap:12px!important;grid-template-columns:1.22fr .78fr!important}
.campaign-row{padding:14px!important;border-radius:13px!important;border-color:var(--phco-border)!important;background:rgba(255,255,255,.018)!important}
.campaign-title{font-size:.94rem!important;font-weight:650!important}
.progress{height:6px!important;border:0!important;background:#06070a!important}
.notice{border-radius:11px!important;font-size:.78rem!important;line-height:1.55!important}
.template-preview{border-radius:12px!important;font-size:.86rem!important}

/* Modals */
.modal-backdrop{background:rgba(3,4,7,.78)!important;backdrop-filter:blur(10px)!important}
.modal{
  border:1px solid var(--phco-border-strong)!important;
  border-radius:18px!important;
  padding:22px!important;
  background:linear-gradient(155deg,#12151d,#0a0c11)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.52)!important;
}
.modal-head{margin-bottom:16px!important}
.modal-head h2{font-size:1.35rem!important}
.modal-head .muted{font-size:.84rem!important}
.icon-btn{width:36px!important;height:36px!important;border-radius:10px!important;font-size:1.05rem!important}
.check-row{border-radius:11px!important;font-size:.84rem!important}
.message{min-height:42px!important;border-radius:10px!important;font-size:.82rem!important}
.label-choice span{font-size:.76rem!important;font-weight:600!important;padding:6px 9px!important}

/* Central de canais */
body:has(.channels-grid) main{padding:36px 0 64px!important}
.intro{align-items:center!important;margin-bottom:28px!important;gap:26px!important}
.intro h1{
  font-size:clamp(2.15rem,4vw,3.35rem)!important;
  line-height:1.08!important;
  letter-spacing:-.052em!important;
}
.intro p{margin:10px 0 0!important;color:var(--phco-muted)!important;font-size:.93rem!important;line-height:1.55!important}
.summary-pill{
  min-height:42px!important;
  padding:0 15px!important;
  gap:8px!important;
  border-width:1px!important;
  font-size:.78rem!important;
  font-weight:620!important;
}
.summary-pill::before{width:9px!important;height:9px!important}
.channels-grid{gap:16px!important}
.channel-card{
  min-height:454px!important;
  padding:24px 20px 20px!important;
  border:1px solid var(--phco-border)!important;
  border-radius:17px!important;
  background:linear-gradient(150deg,rgba(16,18,25,.94),rgba(8,10,14,.98))!important;
  box-shadow:var(--phco-shadow-sm)!important;
}
.channel-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.15)!important;box-shadow:var(--phco-shadow)!important}
.channel-card.whatsapp{border-color:rgba(53,217,133,.26)!important}
.channel-card.instagram{border-color:rgba(243,78,198,.25)!important}
.channel-card::before{opacity:.34!important}
.channel-icon{
  width:76px!important;
  height:76px!important;
  margin:2px auto 13px!important;
  box-shadow:0 12px 30px rgba(0,0,0,.28)!important;
}
.channel-icon svg{width:43px!important;height:43px!important}
.channel-card h2{margin:0 0 8px!important;font-size:1.38rem!important;font-weight:680!important;letter-spacing:-.04em!important}
.status-badge{
  min-height:31px!important;
  gap:7px!important;
  padding:0 10px!important;
  font-size:.73rem!important;
  font-weight:620!important;
}
.status-badge.connected::before,.status-badge.disconnected::before,.status-badge.checking::before,.status-badge.unavailable::before{width:8px!important;height:8px!important}
.status-badge.soon svg{width:14px!important;height:14px!important}
.channel-action{
  min-height:46px!important;
  margin-top:20px!important;
  padding:0 14px!important;
  border-radius:10px!important;
  font-size:.84rem!important;
  font-weight:650!important;
}
.channel-action svg{width:18px!important;height:18px!important}
.channel-action:hover{transform:translateY(-1px)!important}
.whatsapp .channel-action{background:linear-gradient(90deg,rgba(21,159,87,.82),rgba(18,132,72,.86))!important;border-color:rgba(53,217,133,.50)!important}
.instagram .channel-action{background:linear-gradient(90deg,rgba(131,45,155,.80),rgba(106,35,137,.88))!important;border-color:rgba(243,78,198,.42)!important}
.card-details,.reserved{margin-top:20px!important;padding-top:18px!important;border-top:1px solid rgba(255,255,255,.07)!important}
.detail-row,.reserved{grid-template-columns:21px 1fr!important;gap:10px!important;font-size:.79rem!important;line-height:1.45!important}
.detail-row{margin-bottom:12px!important}
.detail-row svg,.reserved svg{width:18px!important;height:18px!important;color:#7f899f!important}
.detail-row strong{font-weight:600!important}
.detail-row .value-line{margin-top:3px!important;color:#e5e8f1!important}

/* Connection / login */
.hero{padding:50px 0 26px!important}
.eyebrow{font-size:.7rem!important;font-weight:650!important;letter-spacing:.13em!important;color:#9fa8bd!important}
.eyebrow:before{height:2px!important;width:23px!important}
.hero h1{font-size:clamp(2.35rem,5.5vw,4.25rem)!important;font-weight:720!important;letter-spacing:-.055em!important}
.lead{font-size:.98rem!important;color:var(--phco-muted)!important}
.auth-wrap{padding:12px 0 64px!important}
.auth-card{border-radius:18px!important;padding:24px!important;background:linear-gradient(150deg,rgba(16,18,25,.96),rgba(8,10,14,.98))!important;box-shadow:var(--phco-shadow)!important}
.dashboard{padding:40px 0 72px!important}
.dashboard .grid{gap:16px!important}
.dashboard .card{
  border-radius:18px!important;
  padding:24px!important;
  box-shadow:var(--phco-shadow)!important;
}
.connection-top h3{font-size:1.18rem!important;margin-bottom:4px!important}
.connection-top p{font-size:.82rem!important;color:var(--phco-muted)!important;margin:0!important}
.status-pill{min-height:30px!important;padding:0 10px!important;font-size:.71rem!important;font-weight:650!important}
.connection-hero{margin:18px 0!important;padding:18px!important;border-radius:14px!important}
.connection-hero h4{font-size:1.28rem!important;margin:0 0 6px!important}
.connection-hero p{font-size:.84rem!important;line-height:1.55!important;margin:0!important;color:#a9b0c1!important}
.info-grid{gap:9px!important}
.info{min-height:76px!important;padding:12px 13px!important;border-radius:11px!important;background:rgba(5,7,10,.48)!important;border-color:var(--phco-border)!important}
.info small{font-size:.7rem!important;color:#8791a7!important}
.info strong{font-size:.88rem!important;font-weight:650!important}
.channel-resource-section,.channel-settings{margin-top:18px!important;padding-top:17px!important;border-top-color:rgba(255,255,255,.07)!important}
.channel-resource-head h4{font-size:.95rem!important;margin:0!important}
.channel-resource-head p{font-size:.78rem!important;color:var(--phco-muted)!important;margin:2px 0 0!important}
.channel-resource-grid{gap:9px!important;margin-top:11px!important}
.channel-resource{min-height:78px!important;padding:12px!important;border-radius:12px!important;background:rgba(255,255,255,.02)!important;border-color:var(--phco-border)!important}
.channel-resource:hover{border-color:rgba(154,104,245,.38)!important;background:rgba(154,104,245,.05)!important;transform:translateY(-1px)}
.channel-resource-icon{width:40px!important;height:40px!important;border-radius:11px!important}
.channel-resource-icon svg{width:20px!important;height:20px!important}
.channel-resource strong{font-size:.83rem!important;font-weight:650!important}
.channel-resource>span:last-child>span{font-size:.72rem!important;line-height:1.42!important;color:#979fb2!important}
.channel-settings-label{font-size:.68rem!important;font-weight:650!important;letter-spacing:.09em!important;color:#8993a9!important}
.mini-status{min-height:42px!important;border-radius:10px!important;font-size:.8rem!important}

/* Scheduled campaign panel */
.schedule-panel{border-radius:14px!important;border-color:var(--phco-border)!important;background:rgba(154,104,245,.035)!important}
.schedule-panel-head h3{font-size:1rem!important}
.schedule-panel-head p,.schedule-summary{font-size:.77rem!important;color:#9da6ba!important}

@media(max-width:1180px){
  .channels-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .channel-card{min-height:420px!important}
}
@media(max-width:940px){
  .campaign-layout{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  .container,.nav-container{width:min(calc(100% - 28px),1240px)!important}
  .nav{min-height:64px!important}
  .brand-mark,.brand img{width:40px!important;height:40px!important}
  .brand-wordmark{font-size:1rem!important;letter-spacing:.18em!important}
  .nav-btn{min-height:35px!important;height:35px!important;padding:0 11px!important;font-size:.76rem!important}
  .page{padding:28px 0 46px!important}
  .page-head{align-items:flex-start!important;gap:16px!important}
  .page-head h1{font-size:2rem!important}
  body:has(.channels-grid) main{padding-top:28px!important}
  .intro{align-items:flex-start!important;margin-bottom:24px!important}
  .intro h1{font-size:2.25rem!important}
  .channels-grid{grid-template-columns:1fr!important;gap:13px!important}
  .channel-card{min-height:0!important;padding:22px 18px 18px!important}
  .dashboard{padding:28px 0 52px!important}
  .dashboard .card{padding:19px!important}
}
@media(max-width:520px){
  .container,.nav-container{width:min(calc(100% - 22px),1240px)!important}
  .nav-actions{gap:6px!important}
  .nav-btn{padding:0 9px!important}
  .page-head p{font-size:.86rem!important}
  .stats{grid-template-columns:1fr 1fr!important}
  .stat{min-height:80px!important;padding:13px!important}
  .card{padding:15px!important}
  .modal{padding:18px!important}
}


/* Shared label manager and compact color picker */
.phco-label-list{display:grid;gap:10px;margin-top:18px}
.phco-label-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--phco-border);border-radius:13px;background:rgba(255,255,255,.018)}
.phco-label-main{display:flex;align-items:center;min-width:0}
.phco-label-main .badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phco-label-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.phco-color-picker{display:flex;align-items:center;gap:10px;min-height:42px;flex-wrap:wrap}
.phco-color-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
.phco-color-trigger{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 13px;border:1px solid var(--phco-border);border-radius:11px;background:rgba(255,255,255,.035);color:#f5f7ff;font-size:.79rem;font-weight:750;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.phco-color-trigger:hover,.phco-color-trigger:focus-visible{border-color:rgba(165,107,255,.48);background:rgba(165,107,255,.08);outline:none;transform:translateY(-1px)}
.phco-color-swatch{display:inline-block;width:22px;height:22px;border-radius:7px;border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 0 0 2px rgba(0,0,0,.12)}
.phco-color-code{color:#9da6ba;font-size:.75rem;font-weight:700;letter-spacing:.03em}
@media(max-width:650px){.phco-label-row{align-items:flex-start;flex-direction:column}.phco-label-actions{width:100%;justify-content:flex-start}}


/* Grade de dados compartilhada: visual de planilha para tabelas de leads. */
.table-wrap:has(.table.phco-data-grid){
  border-color:rgba(181,190,214,.18)!important;
  background:rgba(5,7,11,.58)!important;
}
.table.phco-data-grid{
  border-collapse:separate!important;
  border-spacing:0!important;
  isolation:isolate;
}
.table.phco-data-grid thead th,
.table.phco-data-grid tbody td{
  position:relative;
  background-clip:padding-box!important;
  border-right:1px solid rgba(181,190,214,.18)!important;
  box-shadow:inset -1px 0 0 rgba(181,190,214,.08)!important;
}
.table.phco-data-grid thead th:last-child,
.table.phco-data-grid tbody td:last-child{
  border-right:0!important;
  box-shadow:none!important;
}
.table.phco-data-grid thead th{
  border-bottom:1px solid rgba(181,190,214,.20)!important;
  background:rgba(255,255,255,.035)!important;
}
.table.phco-data-grid tbody td{
  border-bottom:1px solid rgba(181,190,214,.13)!important;
}
.table.phco-data-grid tbody tr:last-child td{
  border-bottom:0!important;
}
.table.phco-data-grid tbody tr:hover td{
  background:rgba(154,104,245,.045)!important;
}
.table.phco-data-grid tbody tr:hover td:not(:last-child){
  border-right-color:rgba(181,190,214,.24)!important;
  box-shadow:inset -1px 0 0 rgba(181,190,214,.12)!important;
}