:root{
  --nav:#0b1726;
  --nav-2:#0e2034;
  --nav-hover:#142b45;
  --nav-active:#174b86;
  --blue:#1677ff;
  --blue-2:#0f67e8;
  --blue-soft:#eaf3ff;
  --teal:#0c979e;
  --bg:#f5f7fa;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --text:#172133;
  --muted:#6c7a90;
  --line:#e3e9f1;
  --line-strong:#d4dde9;
  --green:#18a45b;
  --red:#d74545;
  --amber:#b7791f;
  --shadow:0 1px 2px rgba(16,24,40,.03),0 10px 28px rgba(20,40,80,.035);
  --sidebar:220px;
  --sidebar-collapsed:74px;
  --radius:12px;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
button,input,select,textarea{font:inherit}
.app{min-height:100vh}

/* SIDEBAR */
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar);
  background:linear-gradient(180deg,var(--nav),#08131f 78%);
  color:#dce8f7;
  padding:14px 10px 12px;
  display:flex;
  flex-direction:column;
  z-index:40;
  border-right:1px solid rgba(255,255,255,.04);
  transition:width .2s ease,transform .2s ease;
}
.brand-shell{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 2px 12px;
}
.brand{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border-radius:11px;
  color:#fff;
}
.brand:hover{background:rgba(255,255,255,.04)}
.brand .mark{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#2385ff,#1467e8);
  color:#fff;
  font-size:23px;
  font-weight:900;
  box-shadow:0 8px 24px rgba(22,119,255,.24);
}
.brand-copy{min-width:0}
.brand b{
  display:block;
  font-size:15px;
  line-height:1.05;
  letter-spacing:-.01em;
}
.brand span{
  display:block;
  margin-top:2px;
  color:#8fc3ff;
  font-size:11px;
}
.sidebar-collapse{
  flex:0 0 auto;
  width:26px;
  height:32px;
  border:0;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:#9fb2c8;
  background:transparent;
  cursor:pointer;
  font-size:20px;
}
.sidebar-collapse:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar-nav{
  display:flex;
  flex-direction:column;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#29405a transparent;
  padding:2px 0 8px;
}
.nav-group{padding:7px 0 4px}
.nav-group-title{
  padding:0 11px 6px;
  color:#67809b;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
.sidebar-nav a{
  min-height:39px;
  display:flex;
  align-items:center;
  gap:10px;
  margin:2px 0;
  padding:9px 10px;
  color:#c8d5e4;
  border-radius:9px;
  font-size:12.5px;
  font-weight:580;
  transition:background .14s ease,color .14s ease,transform .14s ease;
}
.sidebar-nav a:hover{background:var(--nav-hover);color:#fff}
.sidebar-nav a.active{
  background:linear-gradient(90deg,var(--nav-active),#173f6d);
  color:#fff;
  box-shadow:inset 3px 0 #62a5ff;
}
.sidebar-nav a i{
  width:20px;
  flex:0 0 20px;
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:14px;
  opacity:.94;
}
.sidebar-nav a span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sidebar-foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 10px 4px;
  color:#a5b4c5;
}
.sidebar-foot-dot{
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:#28b66d;
  box-shadow:0 0 0 4px rgba(40,182,109,.1);
}
.sidebar-foot b{display:block;color:#d4dfeb;font-size:11px}
.sidebar-foot small{display:block;margin-top:2px;font-size:10px;color:#7289a2}

/* COLLAPSED */
.nav-collapsed .sidebar{width:var(--sidebar-collapsed)}
.nav-collapsed .brand-copy,
.nav-collapsed .nav-group-title,
.nav-collapsed .sidebar-nav a span,
.nav-collapsed .sidebar-foot div{display:none}
.nav-collapsed .brand-shell{justify-content:center;flex-direction:column}
.nav-collapsed .brand{flex:0 0 auto;padding:7px}
.nav-collapsed .sidebar-collapse{height:25px;width:34px}
.nav-collapsed .sidebar-nav a{justify-content:center;padding:9px}
.nav-collapsed .sidebar-nav a i{font-size:17px}
.nav-collapsed .sidebar-foot{justify-content:center}

/* MAIN */
.main{
  min-height:100vh;
  width:calc(100% - var(--sidebar));
  margin-left:var(--sidebar);
  display:flex;
  flex-direction:column;
  transition:margin-left .2s ease,width .2s ease;
}
.nav-collapsed .main{
  margin-left:var(--sidebar-collapsed);
  width:calc(100% - var(--sidebar-collapsed));
}
.topbar{
  min-height:64px;
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:8px 22px;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-left{
  min-width:0;
  display:flex;
  align-items:center;
  gap:16px;
}
.mobile-menu{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  width:38px;
  height:38px;
  border-radius:9px;
  color:#36445b;
}
.tenant-switch{
  position:relative;
  min-width:215px;
}
.tenant-switch label{
  position:absolute;
  top:6px;
  left:12px;
  z-index:1;
  margin:0;
  color:#8b97a8;
  font-size:8px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.08em;
  pointer-events:none;
}
.tenant-switch select{
  min-width:215px;
  width:100%;
  height:46px;
  margin:0;
  padding:17px 34px 6px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-2);
  color:#1b2638;
  font-size:13px;
  font-weight:750;
}
.topbar-page{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding-left:16px;
  border-left:1px solid var(--line);
}
.topbar-page span{
  color:#95a0af;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.topbar-page b{
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:2px;
  font-size:13px;
}
.top-user{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.user-chip{
  display:flex;
  align-items:center;
  gap:9px;
  padding:4px 6px;
}
.user-avatar{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#23415f;
  background:#edf4fb;
  border:1px solid #dce8f3;
  font-size:12px;
  font-weight:900;
}
.user-chip>span{
  display:block;
  color:#1e2a3d;
  font-size:12px;
  font-weight:750;
  line-height:1.2;
}
.user-chip small{
  display:block;
  margin-top:2px;
  color:#8793a3;
  font-size:9px;
  font-weight:500;
}
.logout-link{
  padding:8px 9px;
  border-radius:8px;
  color:#617087;
  font-size:11px;
  font-weight:700;
}
.logout-link:hover{background:#f1f5f9;color:#1f4e82}
.content{
  width:100%;
  max-width:1540px;
  margin:0 auto;
  padding:24px 26px 30px;
  flex:1;
}
footer{
  max-width:1540px;
  width:100%;
  margin:0 auto;
  padding:14px 26px 20px;
  color:#93a0b2;
  font-size:10px;
}
footer b{margin-left:6px;color:#7f8da0}

/* HEADERS + SURFACES */
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.page-head h1{
  margin:0 0 4px;
  font-size:25px;
  line-height:1.16;
  letter-spacing:-.025em;
}
.page-head p{margin:0;color:var(--muted);font-size:13px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.cards{display:grid;gap:14px}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.metric,.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.metric{padding:18px}
.metric span{color:#7d899a;font-size:11px;font-weight:650}
.metric b{
  display:block;
  margin:5px 0 3px;
  color:#182336;
  font-size:27px;
  letter-spacing:-.03em;
}
.metric small{color:var(--green);font-size:10px}
.grid-2{
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:14px;
  margin-top:14px;
}
.panel{padding:17px}
.panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:11px;
}
.panel h2,.panel-title h2{
  margin:0 0 12px;
  font-size:15px;
  letter-spacing:-.01em;
}
.panel-title h2{margin:0}
.callout{
  background:linear-gradient(135deg,#f1f7ff,#fff 70%);
  border-color:#dce9f8;
}

/* TABLES */
.table-wrap{overflow:auto}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:12px;
}
th,td{
  padding:11px 10px;
  border-bottom:1px solid #edf1f5;
  text-align:left;
  vertical-align:top;
}
th{
  position:relative;
  color:#7b8797;
  background:#fafbfd;
  font-size:10px;
  font-weight:750;
  letter-spacing:.025em;
  text-transform:uppercase;
}
tbody tr:hover td{background:#fbfcfe}
td small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}

/* BADGES + STATUS */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-radius:999px;
  padding:4px 8px;
  background:#eef2f7;
  color:#526074;
  font-size:9.5px;
  font-weight:750;
  white-space:nowrap;
}
.badge.completed{background:#e7f8ee;color:#137a43}
.badge.sending,.badge.queued{background:#e9f2ff;color:#1765cc}
.badge.scheduled{background:#f2edff;color:#6948c8}
.badge.failed,.badge.cancelled{background:#ffeaea;color:#b52a2a}
.status-dot{font-size:11px}
.status-dot.on{color:var(--green)}
.status-dot.off{color:var(--red)}

/* LISTS */
.list{display:flex;flex-direction:column}
.list-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid #edf1f5;
}
.list-row:last-child{border-bottom:0}
.list-row small,.integration-card small,.template-card small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}

/* BUTTONS */
.btn{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--line-strong);
  border-radius:9px;
  padding:8px 12px;
  background:#fff;
  color:#314058;
  font-size:11px;
  font-weight:750;
  cursor:pointer;
  box-shadow:0 1px 1px rgba(16,24,40,.02);
  transition:border-color .14s ease,background .14s ease,transform .08s ease,box-shadow .14s ease;
}
.btn:hover{
  border-color:#b9c8dc;
  background:#fbfdff;
  box-shadow:0 3px 10px rgba(20,40,80,.05);
}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(180deg,#2283ff,var(--blue-2));
  border-color:var(--blue-2);
  color:#fff;
  box-shadow:0 5px 14px rgba(22,119,255,.16);
}
.btn.primary:hover{background:#106ce9}
.btn.ghost{background:transparent;box-shadow:none}
.btn.full{width:100%;margin-top:8px}

/* FORMS */
.filters{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:13px;
}
.filters input{min-width:280px}
.filters select{min-width:180px}
label{
  display:block;
  margin-bottom:12px;
  color:#344156;
  font-size:11px;
  font-weight:750;
}
input,select,textarea{
  width:100%;
  margin-top:5px;
  padding:9px 10px;
  border:1px solid #ccd7e4;
  border-radius:9px;
  outline:0;
  background:#fff;
  color:var(--text);
  font:inherit;
  font-size:12px;
  transition:border-color .14s ease,box-shadow .14s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:#8dbcf7;
  box-shadow:0 0 0 3px rgba(22,119,255,.09);
}
textarea{resize:vertical}
.form-panel{max-width:920px}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 14px;
}
.checks,.check{display:flex;gap:16px;flex-wrap:wrap}
.checks label,.check{font-weight:500}
.checks input,.check input{width:auto;margin:0 6px 0 0}
.hint{margin:5px 0 14px;color:var(--muted);font-size:10px}
.integration-card,.template-card{padding:11px 0;border-bottom:1px solid #edf1f5}
.key{margin:6px 0;font-size:10px}
.key code{
  display:block;
  overflow:auto;
  margin-top:4px;
  padding:7px;
  border-radius:7px;
  background:#f4f7fa;
}

/* FEEDBACK */
.alert{
  padding:11px 13px;
  border:1px solid transparent;
  border-radius:9px;
  margin-bottom:14px;
  font-size:11px;
}
.alert.success{background:#eaf8f0;border-color:#d4f0df;color:#167443}
.alert.error{background:#ffeded;border-color:#ffd8d8;color:#a52626}
.empty{padding:22px;text-align:center;color:var(--muted);font-size:11px}

/* LOGIN */
.login-body{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:20px;
  background:
    radial-gradient(circle at 18% 8%,rgba(22,119,255,.08),transparent 31%),
    radial-gradient(circle at 85% 12%,rgba(12,151,158,.06),transparent 30%),
    #f5f7fa;
}
.login-card,.install-card{
  width:min(430px,100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:27px;
  box-shadow:0 20px 60px rgba(30,70,120,.10);
}
.install-card{width:min(760px,100%)}
.login-brand{padding:0 0 20px}
.login-card h1,.install-card h1{margin:0 0 4px;font-size:23px}
.login-card>p,.install-card>p{margin:0 0 20px;color:var(--muted);font-size:12px}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* GLOBAL ALERT */
.top-chat-alert{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:0;
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:#263247;
  text-decoration:none;
}
.top-chat-alert:hover{background:#f8fafc}
.top-chat-alert .badge{
  display:none;
  background:#e53232;
  color:#fff;
}
.top-chat-alert.has-alert .badge{display:inline-flex}

/* Backup page inherits the cleaner surface */
.backup-wrap{max-width:1320px!important}
.backup-table-panel,.backup-card{box-shadow:var(--shadow)!important}

/* MOBILE */
.mobile-overlay{display:none}

@media(max-width:1120px){
  .cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2{grid-template-columns:1fr}
  .topbar-page{display:none}
}

@media(max-width:760px){
  :root{--sidebar:220px}

  .sidebar{
    transform:translateX(-100%);
    width:220px!important;
    box-shadow:18px 0 55px rgba(7,18,31,.18);
  }
  .mobile-nav-open .sidebar{transform:translateX(0)}
  .nav-collapsed .sidebar{width:220px!important}
  .nav-collapsed .brand-copy,
  .nav-collapsed .nav-group-title,
  .nav-collapsed .sidebar-nav a span,
  .nav-collapsed .sidebar-foot div{display:block}
  .nav-collapsed .brand-shell{justify-content:initial;flex-direction:row}
  .nav-collapsed .sidebar-nav a{justify-content:flex-start}
  .sidebar-collapse{display:none}

  .main,.nav-collapsed .main{
    width:100%;
    margin-left:0;
  }
  .mobile-menu{
    display:grid;
    place-items:center;
    flex:0 0 auto;
  }
  .mobile-overlay{
    position:fixed;
    inset:0;
    z-index:35;
    background:rgba(7,18,31,.34);
  }
  .mobile-nav-open .mobile-overlay{display:block}

  .topbar{padding:8px 12px;gap:8px}
  .topbar-left{gap:8px;flex:1}
  .tenant-switch{min-width:0;max-width:220px;flex:1}
  .tenant-switch select{min-width:0}
  .user-chip>span{display:none}
  .logout-link{display:none}

  .content{padding:17px 14px 24px}
  .page-head{flex-direction:column}
  .cards.four{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .filters>*{width:100%!important;min-width:0!important}
  footer{padding:12px 14px 18px}
}


/* =========================================================
   CONNECT 3.5 — PREMIUM SYSTEM UI / APPLE-LIKE LANGUAGE
   Visual inspirado em interfaces premium de desktop/mobile.
   Sem uso de marca, logo ou ativos proprietários da Apple.
   ========================================================= */

:root{
  --blue:#007aff;
  --blue-2:#0066d6;
  --blue-soft:#eaf4ff;
  --nav:#f7f8fa;
  --nav-2:#f4f5f7;
  --nav-hover:rgba(118,118,128,.09);
  --nav-active:rgba(0,122,255,.11);
  --bg:#f5f5f7;
  --surface:rgba(255,255,255,.86);
  --surface-2:rgba(248,248,250,.86);
  --text:#1d1d1f;
  --muted:#6e6e73;
  --line:rgba(60,60,67,.12);
  --line-strong:rgba(60,60,67,.18);
  --green:#30a46c;
  --red:#ff453a;
  --amber:#bf7a00;
  --shadow:0 1px 2px rgba(0,0,0,.02),0 10px 32px rgba(0,0,0,.055);
  --radius:18px;
  --sidebar:230px;
}

html{
  background:#f5f5f7;
  scroll-behavior:smooth;
}
body{
  color:var(--text);
  background:
    radial-gradient(circle at 82% -10%,rgba(0,122,255,.08),transparent 26%),
    radial-gradient(circle at 5% 20%,rgba(90,200,250,.055),transparent 28%),
    #f5f5f7;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Inter,system-ui,"Segoe UI",sans-serif;
  letter-spacing:-.005em;
}

::selection{background:rgba(0,122,255,.18)}
a{color:#0071e3}
button,input,select,textarea{font-family:inherit}
button,.btn,a,.metric,.panel{ -webkit-tap-highlight-color:transparent }

/* Sidebar: clara, translúcida e silenciosa */
.sidebar{
  width:var(--sidebar);
  padding:14px 12px 14px;
  color:#3a3a3c;
  background:rgba(246,247,249,.88);
  border-right:1px solid rgba(60,60,67,.11);
  box-shadow:none;
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
}
.brand-shell{padding:2px 2px 16px}
.brand{
  gap:11px;
  padding:8px 9px;
  color:#1d1d1f;
  border-radius:14px;
}
.brand:hover{background:rgba(118,118,128,.075)}
.brand .mark{
  width:36px;height:36px;border-radius:11px;
  background:linear-gradient(145deg,#0a84ff,#0066d6);
  box-shadow:0 7px 18px rgba(0,122,255,.20);
  font-size:17px;
}
.brand b{font-size:14px;font-weight:720;letter-spacing:-.018em}
.brand span{margin-top:2px;color:#86868b;font-size:10.5px;font-weight:520}
.sidebar-collapse{
  color:#8e8e93;border-radius:10px;
}
.sidebar-collapse:hover{background:rgba(118,118,128,.1);color:#1d1d1f}
.nav-group{padding:8px 0 4px}
.nav-group-title{
  padding:0 11px 7px;
  color:#9a9aa0;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
}
.sidebar-nav{
  scrollbar-color:rgba(60,60,67,.18) transparent;
}
.sidebar-nav a{
  min-height:40px;
  margin:2px 0;
  padding:9px 10px;
  border-radius:11px;
  color:#4b4b4f;
  font-size:12.5px;
  font-weight:560;
  transition:background .16s ease,color .16s ease,transform .12s ease;
}
.sidebar-nav a:hover{
  background:rgba(118,118,128,.075);
  color:#1d1d1f;
}
.sidebar-nav a.active{
  background:rgba(0,122,255,.105);
  color:#006edc;
  box-shadow:none;
}
.sidebar-nav a.active i{color:#007aff}
.sidebar-nav a i{
  color:#6e6e73;
  opacity:1;
  font-size:14px;
}
.sidebar-foot{
  padding:13px 10px 3px;
  color:#8e8e93;
  border-top:1px solid rgba(60,60,67,.08);
}
.sidebar-foot-dot{
  background:#34c759;
  box-shadow:0 0 0 4px rgba(52,199,89,.09)
}
.sidebar-foot b{color:#4d4d50;font-size:10.5px}
.sidebar-foot small{color:#9a9aa0;font-size:9.5px}

/* Barra superior: vidro fosco */
.main{
  width:calc(100% - var(--sidebar));
  margin-left:var(--sidebar);
}
.topbar{
  min-height:68px;
  padding:9px 25px;
  background:rgba(250,250,252,.76);
  border-bottom:1px solid rgba(60,60,67,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.65) inset;
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
}
.mobile-menu{
  border:1px solid rgba(60,60,67,.12);
  background:rgba(255,255,255,.74);
  border-radius:12px;
}
.tenant-switch{min-width:225px}
.tenant-switch label{
  top:7px;
  color:#8e8e93;
  font-size:7.5px;
  letter-spacing:.07em;
}
.tenant-switch select{
  height:48px;
  border:1px solid rgba(60,60,67,.11);
  border-radius:13px;
  background:rgba(255,255,255,.68);
  color:#1d1d1f;
  box-shadow:0 1px 2px rgba(0,0,0,.025);
}
.topbar-page{
  border-left:1px solid rgba(60,60,67,.10);
}
.topbar-page span{color:#9a9aa0;font-size:8.5px}
.topbar-page b{color:#2c2c2e;font-size:12.5px;font-weight:650}
.user-avatar{
  width:34px;height:34px;
  color:#006edc;
  background:rgba(0,122,255,.09);
  border:1px solid rgba(0,122,255,.10);
}
.user-chip>span{color:#2c2c2e}
.user-chip small{color:#8e8e93}
.logout-link{border-radius:10px;color:#6e6e73}
.logout-link:hover{background:rgba(118,118,128,.08);color:#1d1d1f}
.top-chat-alert{
  min-height:38px;
  border:1px solid rgba(60,60,67,.10);
  border-radius:12px;
  background:rgba(255,255,255,.70);
  box-shadow:0 1px 3px rgba(0,0,0,.025);
}
.top-chat-alert:hover{background:#fff}

/* Conteúdo / tipografia */
.content{
  max-width:1580px;
  padding:28px 30px 38px;
}
.page-head{margin-bottom:22px}
.page-head h1{
  color:#1d1d1f;
  font-size:28px;
  font-weight:730;
  letter-spacing:-.035em;
}
.page-head p{
  color:#6e6e73;
  font-size:12.5px;
}
footer{color:#a0a0a5}
footer b{color:#8e8e93}

/* Superfícies premium */
.metric,.panel,.cv33-card,.cv33-kpi{
  border:1px solid rgba(60,60,67,.10)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.86)!important;
  box-shadow:0 1px 2px rgba(0,0,0,.018),0 9px 28px rgba(0,0,0,.045)!important;
  backdrop-filter:saturate(140%) blur(18px);
  -webkit-backdrop-filter:saturate(140%) blur(18px);
}
.metric,.panel{transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
.metric:hover,.cv-clickable:hover{
  border-color:rgba(60,60,67,.16)!important;
}
.metric{padding:20px}
.metric span{color:#86868b;font-size:10.5px}
.metric b{color:#1d1d1f;font-size:28px;font-weight:720}
.panel{padding:19px}
.panel h2,.panel-title h2{
  color:#1d1d1f;
  font-size:15px;
  font-weight:680;
}
.panel-title a{font-size:11px;font-weight:620}
.callout{
  background:linear-gradient(145deg,rgba(240,247,255,.92),rgba(255,255,255,.9))!important;
}

/* Botões */
.btn{
  min-height:38px;
  border:1px solid rgba(60,60,67,.14);
  border-radius:12px;
  padding:8px 13px;
  background:rgba(255,255,255,.85);
  color:#2c2c2e;
  font-size:11px;
  font-weight:620;
  box-shadow:0 1px 2px rgba(0,0,0,.025);
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .10s ease;
}
.btn:hover{
  background:#fff;
  border-color:rgba(60,60,67,.20);
  box-shadow:0 4px 14px rgba(0,0,0,.055);
}
.btn:active{transform:scale(.985)}
.btn.primary{
  background:#007aff;
  border-color:#007aff;
  color:#fff;
  box-shadow:0 5px 14px rgba(0,122,255,.19);
}
.btn.primary:hover{
  background:#0875e1;
  border-color:#0875e1;
  box-shadow:0 7px 18px rgba(0,122,255,.23);
}
.btn.ghost{background:rgba(255,255,255,.45)}

/* Formulários */
label{
  color:#3a3a3c;
  font-size:10.5px;
  font-weight:630;
}
input,select,textarea{
  margin-top:6px;
  padding:10px 11px;
  border:1px solid rgba(60,60,67,.16);
  border-radius:12px;
  background:rgba(255,255,255,.84);
  color:#1d1d1f;
  font-size:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.018) inset;
}
input:hover,select:hover,textarea:hover{border-color:rgba(60,60,67,.24)}
input:focus,select:focus,textarea:focus{
  border-color:rgba(0,122,255,.55);
  box-shadow:0 0 0 4px rgba(0,122,255,.10);
  background:#fff;
}
input::placeholder,textarea::placeholder{color:#a0a0a5}

/* Tabelas */
.table-wrap{
  border-radius:13px;
  overflow:auto;
}
table{font-size:11.5px}
th,td{
  padding:12px 11px;
  border-bottom:1px solid rgba(60,60,67,.08);
}
th{
  color:#86868b;
  background:rgba(248,248,250,.80);
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
}
tbody tr{transition:background .12s ease}
tbody tr:hover td{background:rgba(0,122,255,.025)}
td small{color:#8e8e93}

/* Badges / feedback */
.badge{
  border-radius:999px;
  padding:4px 8px;
  background:rgba(118,118,128,.10);
  color:#636366;
  font-weight:650;
}
.badge.completed{background:rgba(52,199,89,.11);color:#248a3d}
.badge.sending,.badge.queued{background:rgba(0,122,255,.10);color:#006edc}
.badge.scheduled{background:rgba(175,82,222,.10);color:#8944ab}
.badge.failed,.badge.cancelled{background:rgba(255,69,58,.10);color:#d70015}
.alert{
  border-radius:14px;
  padding:12px 14px;
}
.alert.success{background:rgba(52,199,89,.09);border-color:rgba(52,199,89,.16);color:#248a3d}
.alert.error{background:rgba(255,69,58,.08);border-color:rgba(255,69,58,.14);color:#c81e1e}
.hint{color:#8e8e93}
.key code{background:rgba(118,118,128,.08);border-radius:9px}

/* Listas */
.list-row{
  padding:12px 1px;
  border-bottom:1px solid rgba(60,60,67,.08);
}
.list-row:hover{background:rgba(118,118,128,.025)}

/* Scrollbar discreto */
*{scrollbar-width:thin;scrollbar-color:rgba(60,60,67,.18) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:rgba(60,60,67,.18);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

/* Movimento delicado */
@media (prefers-reduced-motion:no-preference){
  .panel,.metric,.cv33-card,.cv33-kpi,.btn,.sidebar-nav a{
    transition-duration:.16s;
    transition-timing-function:cubic-bezier(.2,.8,.2,1);
  }
}

/* Mobile */
@media(max-width:760px){
  .sidebar{
    background:rgba(248,248,250,.96);
    box-shadow:18px 0 55px rgba(0,0,0,.12);
  }
  .mobile-overlay{
    background:rgba(20,20,22,.28);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
  }
  .topbar{padding:8px 12px}
  .content{padding:18px 14px 28px}
  .page-head h1{font-size:25px}
}


/* =========================================================
   CONNECT 3.5.1 — MOBILE LAYOUT HOTFIX
   Corrige deslocamento herdado da sidebar/estado collapsed
   e força uma experiência realmente mobile-first.
   ========================================================= */
@media (max-width:760px){
  html,body,.app{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }

  body.nav-collapsed .main,
  .main,
  .nav-collapsed .main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    transform:none!important;
  }

  .sidebar,
  .nav-collapsed .sidebar{
    width:min(82vw,320px)!important;
    max-width:320px!important;
    transform:translateX(-105%)!important;
  }
  .mobile-nav-open .sidebar,
  .mobile-nav-open.nav-collapsed .sidebar{
    transform:translateX(0)!important;
  }

  .topbar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:64px!important;
    padding:8px 12px!important;
    gap:8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
  }

  .topbar-left{
    min-width:0!important;
    width:auto!important;
    flex:1 1 auto!important;
    gap:8px!important;
  }

  .mobile-menu{
    display:grid!important;
    place-items:center!important;
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
    border-radius:13px!important;
    font-size:18px!important;
  }

  .tenant-switch{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
  }

  .tenant-switch select{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:46px!important;
    padding:17px 30px 5px 12px!important;
    border-radius:14px!important;
    font-size:14px!important;
    text-overflow:ellipsis!important;
  }

  .tenant-switch label{
    top:7px!important;
    left:12px!important;
  }

  .top-user{
    flex:0 0 auto!important;
    gap:0!important;
  }
  .top-user .user-chip,
  .top-user .logout-link{
    display:none!important;
  }
  .top-chat-alert{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:13px!important;
    font-size:15px!important;
  }
  .top-chat-alert .badge{
    position:absolute!important;
    top:-4px!important;
    right:-4px!important;
  }

  .content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:18px 16px 28px!important;
  }

  .page-head{
    width:100%!important;
    margin:0 0 20px!important;
    gap:14px!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .page-head>div:first-child{
    width:100%!important;
    min-width:0!important;
  }
  .page-head h1{
    max-width:none!important;
    margin:0 0 6px!important;
    font-size:30px!important;
    line-height:1.04!important;
    letter-spacing:-.04em!important;
  }
  .page-head p{
    max-width:100%!important;
    font-size:13px!important;
    line-height:1.42!important;
  }

  .page-head .actions,
  .actions{
    width:100%!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:8px!important;
    flex-wrap:wrap!important;
  }
  .page-head .actions .btn{
    flex:1 1 160px!important;
    min-height:44px!important;
    border-radius:13px!important;
  }

  .cards,
  .cards.four,
  .grid-2,
  .form-grid{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:1fr!important;
  }

  .metric,.panel{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  .filters{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .filters>*{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  .table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  footer{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:12px 16px 20px!important;
  }
}


/* =========================================================
   CONNECT 3.6 — MOCKUP MATCH
   ========================================================= */
@media (min-width:761px){
  :root{--sidebar:250px}
  body{
    background:
      radial-gradient(circle at 42% 2%,rgba(83,190,255,.12),transparent 25%),
      radial-gradient(circle at 78% 16%,rgba(65,214,137,.08),transparent 29%),
      #f7fbff!important;
  }
  .sidebar{
    width:250px!important;
    padding:24px 18px 18px!important;
    background:rgba(255,255,255,.94)!important;
    border-right:1px solid rgba(31,65,110,.07)!important;
    box-shadow:12px 0 35px rgba(31,70,120,.035)!important;
    color:#324866!important;
  }
  .main,.nav-collapsed .main{
    width:calc(100% - 250px)!important;
    margin-left:250px!important;
  }
  .nav-collapsed .sidebar{width:250px!important}
  .nav-collapsed .brand-copy,
  .nav-collapsed .nav-group-title,
  .nav-collapsed .sidebar-nav a span,
  .nav-collapsed .sidebar-foot div{display:block!important}
  .nav-collapsed .brand-shell{justify-content:initial!important;flex-direction:row!important}
  .nav-collapsed .sidebar-nav a{justify-content:flex-start!important;padding:10px 12px!important}
  .sidebar-collapse{display:none!important}
}
.brand-shell{padding:0 0 26px!important}
.brand{
  display:flex!important;align-items:center!important;gap:12px!important;
  padding:8px 10px!important;background:transparent!important;
}
.brand .mark.cv36-brand-bars{
  width:40px!important;height:40px!important;display:flex!important;align-items:flex-end!important;
  justify-content:center!important;gap:3px!important;padding:6px!important;
  background:transparent!important;box-shadow:none!important;border-radius:0!important;
}
.cv36-brand-bars i{
  display:block;width:5px;border-radius:6px;
  background:linear-gradient(180deg,#2ba7ff,#0a73ee);
  box-shadow:0 4px 10px rgba(0,122,255,.16)
}
.cv36-brand-bars i:nth-child(1){height:14px}
.cv36-brand-bars i:nth-child(2){height:21px}
.cv36-brand-bars i:nth-child(3){height:27px}
.cv36-brand-bars i:nth-child(4){height:32px}
.brand b{font-size:18px!important;line-height:1!important;font-weight:760!important;color:#17233a!important}
.brand span{margin-top:3px!important;color:#0878f8!important;font-size:17px!important;line-height:1!important;font-weight:720!important}
.nav-group{padding:0 0 4px!important}
.nav-group-title{display:none!important}
.sidebar-nav a{
  min-height:46px!important;margin:3px 0!important;padding:11px 13px!important;
  border-radius:13px!important;color:#53657d!important;font-size:13px!important;font-weight:590!important;
}
.sidebar-nav a i{
  width:24px!important;flex:0 0 24px!important;color:#53657d!important;font-size:17px!important;
}
.sidebar-nav a:hover{background:#f3f8fe!important;color:#0a6de5!important}
.sidebar-nav a.active{
  background:#eaf4ff!important;color:#0878f8!important;box-shadow:none!important;font-weight:700!important;
}
.sidebar-nav a.active i{color:#0878f8!important}
.sidebar-foot{
  margin-top:auto!important;padding:18px 10px 8px!important;border:0!important;
  background:#f8fbff!important;border-radius:15px!important;
}
.sidebar-foot-dot{background:#0a84ff!important;box-shadow:0 0 0 4px rgba(0,122,255,.08)!important}
.sidebar-foot b{color:#283950!important}
.sidebar-foot small{color:#8190a4!important}

.topbar{
  min-height:76px!important;padding:10px 28px!important;
  background:rgba(255,255,255,.80)!important;
  border-bottom:0!important;
  box-shadow:none!important;
  backdrop-filter:saturate(180%) blur(24px)!important;
  -webkit-backdrop-filter:saturate(180%) blur(24px)!important;
}
.topbar-left{margin-left:auto!important}
.tenant-switch{min-width:245px!important}
.tenant-switch select{
  height:52px!important;padding:18px 38px 6px 44px!important;border-radius:15px!important;
  background:rgba(255,255,255,.92)!important;border:1px solid #dfe8f3!important;
  color:#17233a!important;font-size:13px!important;font-weight:700!important;
  box-shadow:0 4px 16px rgba(42,75,115,.04)!important
}
.tenant-switch:before{
  content:'▣';position:absolute;left:14px;top:17px;z-index:2;color:#a87818;font-size:17px;pointer-events:none
}
.tenant-switch label{left:44px!important;top:7px!important;color:#77879c!important}
.topbar-page{display:none!important}
.top-user{gap:8px!important}
.top-chat-alert{
  width:42px!important;height:42px!important;min-width:42px!important;padding:0!important;border:0!important;
  background:transparent!important;font-size:18px!important
}
.user-chip{
  padding:5px 8px!important;border-radius:14px!important
}
.user-avatar{
  width:38px!important;height:38px!important;background:#315f9a!important;color:white!important;border:0!important
}
.user-chip>span{font-size:11px!important;color:#24364d!important}
.logout-link{display:none!important}

.content{
  max-width:1380px!important;padding:28px 34px 42px!important;
  position:relative!important;
}
.content:before{
  content:'';position:absolute;left:0;right:0;top:0;height:210px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse at 15% 25%,rgba(64,196,255,.10),transparent 48%),
    radial-gradient(ellipse at 85% 35%,rgba(63,220,145,.08),transparent 50%);
}

/* Mobile tab bar matching mockup */
.cv36-mobile-tabs{display:none}
@media(max-width:760px){
  body{padding-bottom:76px!important;background:#f7fbff!important}
  .topbar{
    min-height:68px!important;padding:8px 12px!important;background:rgba(255,255,255,.90)!important;
  }
  .topbar-left{margin-left:0!important}
  .tenant-switch{min-width:0!important}
  .tenant-switch select{height:48px!important;padding-left:40px!important}
  .tenant-switch:before{left:12px!important;top:16px!important}
  .tenant-switch label{left:40px!important}
  .top-user .user-chip{display:none!important}
  .content{
    padding:24px 16px 34px!important;
  }
  .content:before{height:150px!important}
  .cv36-mobile-tabs{
    position:fixed;left:0;right:0;bottom:0;z-index:65;
    height:72px;padding:7px max(12px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
    display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
    background:rgba(255,255,255,.95);border-top:1px solid rgba(60,60,67,.10);
    box-shadow:0 -8px 30px rgba(20,45,75,.06);
    backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px)
  }
  .cv36-mobile-tabs a,.cv36-mobile-tabs button{
    border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;color:#65758b;text-decoration:none;font-size:9px;font-weight:620;min-height:52px
  }
  .cv36-mobile-tabs i{font-style:normal;font-size:20px;line-height:1}
  .cv36-mobile-tabs .active{color:#0878f8}
  .cv36-mobile-tabs button{font-family:inherit}
  .mobile-overlay{z-index:70!important}
  .sidebar{z-index:75!important}
}


/* =========================================================
   CONNECT 3.6.1 — UNIFIED LINE ICONS
   ========================================================= */
.cv-icon{
  display:block;
  width:1em;
  height:1em;
  flex:0 0 auto;
  overflow:visible;
}
.sidebar-nav a i,
.cv36-mobile-tabs i,
.cv33-benefit i{
  display:grid!important;
  place-items:center!important;
  font-style:normal!important;
}
.sidebar-nav a i .cv-icon{font-size:20px}
.sidebar-nav a.active i .cv-icon{stroke-width:2}
.mobile-menu .cv-icon{font-size:21px}
.top-chat-alert .cv-icon{font-size:20px}
.tenant-switch:before{display:none!important;content:none!important}
.tenant-switch-icon{
  position:absolute;
  left:14px;
  top:17px;
  z-index:3;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  color:#a87818;
  pointer-events:none;
}
.tenant-switch-icon .cv-icon{font-size:17px}
.cv36-mobile-tabs i .cv-icon{font-size:21px}
.cv36-mobile-tabs button i .cv-icon{font-size:21px}

@media(max-width:760px){
  .tenant-switch-icon{left:12px!important;top:16px!important}
}


/* =========================================================
   CONNECT 3.7 — NAVIGATION PRIORITY / GROUPS
   ========================================================= */
@media (min-width:761px){
  .nav-group{
    padding:6px 0 10px!important;
  }
  .nav-group-title{
    display:block!important;
    padding:0 13px 7px!important;
    color:#9aa7b8!important;
    font-size:8px!important;
    line-height:1!important;
    font-weight:760!important;
    letter-spacing:.11em!important;
    text-transform:uppercase!important;
  }
  .nav-group:first-child .nav-group-title{
    margin-top:0!important;
  }
  .nav-group + .nav-group{
    margin-top:5px!important;
    padding-top:12px!important;
    border-top:1px solid rgba(60,60,67,.055)!important;
  }
  .sidebar-nav a{
    min-height:44px!important;
  }
  .sidebar-nav a[title="Atendimento"]{
    background:rgba(0,122,255,.055)!important;
    color:#086fde!important;
  }
  .sidebar-nav a[title="Atendimento"].active{
    background:#e3f1ff!important;
    color:#0878f8!important;
  }
}