::-webkit-scrollbar { width: 6px; height: 6px; }
       ::-webkit-scrollbar-track { background: transparent; }
       ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
       ::-webkit-scrollbar-thumb:hover { background: rgba(204, 255, 0, 0.3); }

       * {
           box-sizing: border-box;
           margin: 0;
           padding: 0
       }

       :root {
           --amaz-blue: #4DAAEE;
           --amaz-yellow: #FFC72C;
           --amaz-dark: #0f1923;
           --amaz-dark2: #162130;
           --amaz-dark3: #1e2d3d;
           --amaz-border: #253545;
           --amaz-text: #e8f0f7;
           --amaz-muted: #7a9ab5;
           --sidebar-w: 260px;
           --lime: #ccff00;
       }

       .amaz-select {
           appearance: none;
           -webkit-appearance: none;
           background: rgba(255, 255, 255, 0.04) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a9ab5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") no-repeat right 8px center / 14px !important;
           border: 1px solid rgba(255, 255, 255, 0.1);
           border-radius: 6px;
           padding: 4px 28px 4px 8px;
           color: #fff;
           font-size: 12px;
           outline: none;
           cursor: pointer;
           min-width: 120px;
       }

       .amaz-select option {
           background: #162130;
           color: #fff;
           padding: 8px;
       }

       body {
           font-family: system-ui, sans-serif;
           font-size: 14px;
           background: var(--amaz-dark);
           height: 100vh;
           margin: 0;
           overflow: hidden
       }

       .screen {
           display: none;
           width: 100%;
           height: 100vh
       }

       .screen.active {
           display: block
       }


       .nav-tabs {
           display: flex;
           gap: 6px;
           margin-bottom: 16px;
           flex-wrap: wrap
       }

       .nav-tab {
           padding: 6px 14px;
           border-radius: 20px;
           border: 1.5px solid var(--amaz-border);
           background: transparent;
           color: var(--amaz-muted);
           cursor: pointer;
           font-size: 12px;
           font-weight: 500;
           transition: all .15s
       }

       .nav-tab.active,
       .nav-tab:hover {
           background: var(--amaz-blue);
           color: #fff;
           border-color: var(--amaz-blue)
       }

       .app {
           display: flex;
           height: 100%;
           border-radius: 0;
           border: none;
           overflow: hidden;
           background: var(--amaz-dark)
       }

       .sidebar {
           width: var(--sidebar-w);
           background: var(--amaz-dark2);
           padding: 24px 0;
           flex-shrink: 0;
           display: flex;
           flex-direction: column;
           border-right: 1px solid rgba(255, 255, 255, 0.03)
       }

       .sidebar-logo {
           padding: 0 24px 32px;
           display: flex;
           align-items: center;
           gap: 12px
       }

       .logo-box {
           width: 38px;
           height: 38px;
           background: #ccff00;
           border-radius: 10px;
           display: flex;
           align-items: center;
           justify-content: center;
           box-shadow: 0 0 16px rgba(204, 255, 0, 0.15)
       }

       .logo-text {
           font-size: 15px;
           font-weight: 700;
           color: #ccff00;
           letter-spacing: -0.5px
       }

       .logo-brand {
           font-size: 18px;
           font-weight: 800;
           color: #fff;
           letter-spacing: -0.5px
       }

       .nav-item {
           display: flex;
           align-items: center;
           gap: 14px;
           padding: 14px 24px;
           color: var(--amaz-muted);
           cursor: pointer;
           font-size: 15px;
           font-weight: 500;
           transition: all .2s;
           border-left: 3px solid transparent
       }

       .nav-item:hover {
           background: rgba(204, 255, 0, .03);
           color: #fff
       }

       .nav-item.active {
           background: rgba(204, 255, 0, .06);
           color: #ccff00;
           border-left: 3px solid #ccff00
       }

       .nav-icon {
           width: 20px;
           height: 20px;
           opacity: .9;
           flex-shrink: 0
       }

       .nav-bottom {
           margin-top: auto;
           padding: 12px 0;
           border-top: 1px solid var(--amaz-border)
       }

       .main {
           flex: 1;
           background: var(--amaz-dark);
           padding: 20px;
           overflow: auto
       }

       .page-title {
           font-size: 28px;
           font-weight: 700;
           color: var(--amaz-text);
           margin-bottom: 4px
       }

       .page-sub {
           font-size: 12px;
           color: var(--amaz-muted);
           margin-bottom: 20px
       }

       .date-btn {
           display: flex;
           align-items: center;
           gap: 18px;
           padding: 12px 20px;
           border-radius: 12px;
           background: rgba(255, 255, 255, 0.03);
           color: #fff;
           border: 1px solid rgba(255, 255, 255, 0.06);
           cursor: pointer;
           transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1)
       }

       .date-btn:hover {
           background: rgba(204, 255, 0, 0.04);
           border-color: rgba(204, 255, 0, 0.3);
           transform: translateY(-2px);
           box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 16px rgba(204, 255, 0, 0.05)
       }

       input[type="date"] {
           color-scheme: dark;
           -webkit-appearance: none;
           appearance: none;
           cursor: pointer;
           position: relative;
       }

       input[type="date"]::-webkit-calendar-picker-indicator {
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           width: 100%;
           height: 100%;
           opacity: 0;
           cursor: pointer;
       }

       .date-input-wrap {
           position: relative;
           display: block;
       }

       .date-input-wrap svg.date-icon {
           position: absolute;
           right: 10px;
           top: 50%;
           transform: translateY(-50%);
           pointer-events: none;
           color: var(--amaz-muted);
           transition: color .2s;
       }

       .date-input-wrap:hover svg.date-icon,
       .date-input-wrap input:focus~svg.date-icon {
           color: rgba(204, 255, 0, 0.6);
       }

       @keyframes modalSlideIn {
           from {
               transform: translateY(-16px) scale(0.97);
               opacity: 0;
           }

           to {
               transform: translateY(0) scale(1);
               opacity: 1;
           }
       }

       @keyframes modalSlideOut {
           from {
               transform: translateY(0) scale(1);
               opacity: 1;
           }

           to {
               transform: translateY(24px) scale(0.94);
               opacity: 0;
           }
       }

       .modal-card {
           animation: modalSlideIn 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
       }

       .modal-exiting .modal-card {
           animation: modalSlideOut 0.22s ease forwards;
           pointer-events: none;
       }

       /* ====== CUSTOM DATE PICKER ====== */
       #custom-datepicker {
           position: fixed;
           z-index: 99999;
           background: #162130;
           border: 1px solid #253545;
           border-radius: 14px;
           box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(204, 255, 0, 0.06);
           padding: 16px;
           width: 272px;
           font-family: inherit;
           animation: modalSlideIn 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
           user-select: none;
       }

       .cdp-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
           margin-bottom: 10px;
       }

       .cdp-nav {
           background: none;
           border: 1px solid rgba(255, 255, 255, 0.1);
           color: rgba(255, 255, 255, 0.7);
           border-radius: 7px;
           width: 28px;
           height: 28px;
           cursor: pointer;
           font-size: 16px;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: all .15s;
           line-height: 1;
           padding: 0;
       }

       .cdp-nav:hover {
           border-color: rgba(204, 255, 0, 0.5);
           color: #ccff00;
       }

       #cdp-title {
           font-size: 13px;
           font-weight: 700;
           color: #fff;
           cursor: pointer;
           letter-spacing: 0.02em;
       }

       #cdp-title:hover {
           color: #ccff00;
       }

       .cdp-weekdays {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
           gap: 1px;
           margin-bottom: 4px;
       }

       .cdp-weekday {
           text-align: center;
           font-size: 10px;
           color: rgba(255, 255, 255, 0.28);
           padding: 3px 0;
           font-weight: 700;
           text-transform: uppercase;
       }

       .cdp-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
           gap: 2px;
       }

       .cdp-day {
           text-align: center;
           padding: 7px 2px;
           border-radius: 7px;
           cursor: pointer;
           font-size: 12px;
           color: rgba(255, 255, 255, 0.75);
           transition: background .12s, color .12s;
           min-width: 0;
       }

       .cdp-day:hover:not(.cdp-empty):not(.cdp-selected) {
           background: rgba(255, 255, 255, 0.08);
           color: #fff;
       }

       .cdp-empty {
           visibility: hidden;
           pointer-events: none;
       }

       .cdp-today {
           color: #ccff00 !important;
           font-weight: 700;
           position: relative;
       }

       .cdp-today::after {
           content: '';
           position: absolute;
           bottom: 2px;
           left: 50%;
           transform: translateX(-50%);
           width: 4px;
           height: 4px;
           background: #ccff00;
           border-radius: 50%;
       }

       .cdp-selected {
           background: #ccff00 !important;
           color: #0f1923 !important;
           font-weight: 800;
       }

       .cdp-selected.cdp-today::after {
           background: #0f1923;
       }

       .cdp-footer {
           display: flex;
           gap: 6px;
           margin-top: 10px;
           padding-top: 10px;
           border-top: 1px solid rgba(255, 255, 255, 0.05);
       }

       .cdp-btn {
           flex: 1;
           padding: 7px 6px;
           border-radius: 8px;
           border: 1px solid rgba(255, 255, 255, 0.1);
           background: none;
           color: rgba(255, 255, 255, 0.5);
           font-size: 11px;
           cursor: pointer;
           transition: all .15s;
           font-family: inherit;
           font-weight: 600;
       }

       .cdp-btn:hover {
           border-color: rgba(204, 255, 0, 0.35);
           color: #ccff00;
           background: rgba(204, 255, 0, 0.05);
       }

       .cdp-btn-today {
           border-color: rgba(204, 255, 0, 0.25);
           color: rgba(204, 255, 0, 0.7);
       }

       .date-popover {
           display: none;
           position: absolute;
           top: 100%;
           left: 0;
           margin-top: 8px;
           background: var(--amaz-dark2);
           border: 1px solid var(--amaz-border);
           border-radius: 8px;
           padding: 14px;
           width: 240px;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
           z-index: 20
       }

       .date-popover.show {
           display: block
       }

       .metrics-grid {
           display: grid;
           grid-template-columns: repeat(4, minmax(0, 1fr));
           gap: 10px;
           margin-bottom: 20px
       }

       .metric-card {
           background: var(--amaz-dark2) !important;
           border: 1px solid var(--amaz-border) !important;
           border-radius: 12px;
           padding: 18px;
           transition: all 0.3s ease;
           cursor: pointer;
           display: flex;
           flex-direction: column;
           justify-content: space-between;
           min-height: 160px;
           height: 100%
       }

       .metric-card:hover {
           transform: translateY(-4px) !important;
           box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6) !important
       }

       .metric-top {
           display: flex;
           justify-content: space-between;
           align-items: flex-start;
           margin-bottom: 6px
       }

       .metric-label {
           font-size: 15px;
           font-weight: 500;
           color: #cbd5e1;
           margin-bottom: 0
       }

       .metric-icon-wrap {
           width: 42px;
           height: 42px;
           border-radius: 10px;
           background: rgba(255, 255, 255, 0.05);
           display: flex;
           align-items: center;
           justify-content: center;
           color: #a1a1aa
       }

       .metric-icon-wrap svg {
           width: 20px;
           height: 20px
       }

       .metric-val-wrap {
           display: flex;
           align-items: flex-end;
           gap: 8px
       }

       .metric-val {
           font-size: 32px;
           font-weight: 700;
           color: #fff;
           line-height: 1
       }

       .metric-suf {
           font-size: 18px;
           color: #a1a1aa;
           font-weight: 500;
           margin-left: 2px
       }

       /* ---- SETAS DE TENDÊNCIA (DASHBOARD) ---- */
       .trend-up {
           color: #4ade80 !important;
           width: 24px !important;
           height: 24px !important;
           stroke-width: 2.5px;
       }

       .trend-down {
           color: #f87171 !important;
           width: 24px !important;
           height: 24px !important;
           stroke-width: 2.5px;
       }

       .trend-flat {
           color: var(--amaz-muted) !important;
           width: 24px !important;
           height: 24px !important;
           stroke-width: 2.5px;
       }

       .metric-sub {
           font-size: 12px;
           color: #e2e8f0;
           border: 1px solid #444;
           border-radius: 20px;
           padding: 4px 10px;
           align-self: flex-start;
           margin-top: auto;
           box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
           background: rgba(255, 255, 255, 0.02)
       }

       .section-card {
           background: var(--amaz-dark2);
           border: 1px solid var(--amaz-border);
           border-radius: 12px;
           padding: 32px;
           margin-bottom: 20px
       }

       .section-title {
           font-size: 13px;
           font-weight: 500;
           color: var(--amaz-text);
           margin-bottom: 4px
       }

       .section-sub {
           font-size: 11px;
           color: var(--amaz-muted);
           margin-bottom: 14px
       }

       .bar-chart-wrap {
           height: 220px;
           display: flex;
           align-items: flex-end;
           gap: 8px;
           border-bottom: 1px solid rgba(255, 255, 255, 0.06);
           padding-left: 14px;
           position: relative;
       }

       .bar-col {
           flex: 1;
           height: 100%;
           position: relative;
           display: flex;
           justify-content: center;
           cursor: pointer;
       }

       .bar-bg {
           position: absolute;
           bottom: 0;
           left: 50%;
           transform: translateX(-50%);
           width: 80%;
           height: 100%;
           background: rgba(255, 255, 255, 0);
           border-radius: 6px 6px 0 0;
           transition: all 0.3s;
           z-index: 0;
       }

       .bar {
           position: absolute;
           bottom: 0;
           left: 50%;
           transform: translateX(-50%);
           width: 80%;
           background: #ccff00;
           border-radius: 4px 4px 0 0;
           transition: all 0.3s;
           z-index: 1;
       }

       .bar-label {
           position: absolute;
           top: 100%;
           margin-top: 16px;
           width: 100%;
           text-align: center;
           font-size: 13px;
           color: var(--amaz-muted);
           transition: all 0.3s;
           font-weight: 500;
       }

       .bar-chart-wrap:hover .bar {
           opacity: 0.1;
       }

       .bar-chart-wrap .bar-col:hover .bar-bg {
           background: #d4d4d8;
       }

       .bar-chart-wrap .bar-col:hover .bar {
           opacity: 1;
           box-shadow: 0 0 20px rgba(204, 255, 0, 0.5);
           transform: translateX(-50%) scaleY(1.02);
           transform-origin: bottom;
       }

       .bar-chart-wrap .bar-col:hover .bar-label {
           color: #fff;
           font-weight: 600;
       }

       .bar-col .tooltip {
           opacity: 0;
           position: fixed;
           top: 0;
           left: 0;
           background: #111;
           color: #fff;
           padding: 12px 14px;
           border-radius: 8px;
           white-space: nowrap;
           border: 1px solid #333;
           box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
           z-index: 100;
           pointer-events: none;
           transition: opacity 0.18s ease, transform 0.28s cubic-bezier(0.23, 1, 0.32, 1);
       }

       .bar-col:hover .tooltip {
           opacity: 1;
       }

       .leads-list {
           display: flex;
           flex-direction: column;
           gap: 12px
       }

       .lead-row {
           display: flex;
           align-items: center;
           gap: 16px;
           padding: 16px 20px;
           border: 1px solid rgba(255, 255, 255, 0.06);
           border-radius: 12px;
           background: var(--amaz-dark3);
           transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
           cursor: pointer;
       }

       .lead-row:hover {
           background: rgba(204, 255, 0, 0.03);
           border-color: rgba(204, 255, 0, 0.4);
           transform: translateY(-2px);
           box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 16px rgba(204, 255, 0, 0.05);
       }

       .avatar {
           width: 42px;
           height: 42px;
           border-radius: 50%;
           background: #ccff00;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 15px;
           font-weight: 700;
           color: #111;
           flex-shrink: 0;
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.5)
       }

       .lead-name {
           font-size: 16px;
           color: #ccff00;
           font-weight: 700;
           margin-bottom: 6px;
           letter-spacing: -0.2px;
       }

       .lead-src {
           display: flex;
           align-items: center;
           gap: 8px;
           font-size: 13px;
           color: var(--amaz-muted);
           font-weight: 500;
       }

       .lead-date-col {
           margin-left: auto;
           text-align: right;
       }

       .lead-date-val {
           font-size: 14px;
           color: #fff;
           font-weight: 600;
           margin-bottom: 4px
       }

       .lead-date-time {
           font-size: 12px;
           color: var(--amaz-muted);
           opacity: 0.8;
       }

       .tag {
           font-size: 11px;
           font-weight: 600;
           padding: 2px 8px;
           border-radius: 10px;
           background: rgba(255, 255, 255, 0.05);
           color: #fff;
           border: 1px solid rgba(255, 255, 255, 0.1)
       }

       .kanban {
           display: flex;
           flex-wrap: nowrap;
           overflow-x: auto;
           padding-bottom: 12px;
           gap: 16px;
       }

       .kanban-col {
           flex: 1;
           min-width: 220px;
           background: var(--amaz-dark2);
           border: 1px solid var(--amaz-border);
           border-radius: 10px;
           padding: 12px
       }

       .col-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
           margin-bottom: 12px
       }

       .col-title {
           font-size: 12px;
           font-weight: 500;
           color: var(--amaz-text)
       }

       .col-count {
           font-size: 11px;
           background: rgba(77, 170, 238, .2);
           color: var(--amaz-blue);
           padding: 1px 7px;
           border-radius: 10px
       }

       .lead-card {
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 8px;
           padding: 10px;
           margin-bottom: 8px
       }

       .lead-card-name {
           font-size: 12px;
           font-weight: 500;
           color: var(--amaz-text);
           margin-bottom: 2px
       }

       .lead-card-sub {
           font-size: 11px;
           color: var(--amaz-muted)
       }

       .score-pill {
           font-size: 10px;
           padding: 2px 7px;
           border-radius: 10px;
           margin-top: 6px;
           display: inline-block
       }

       .score-hot {
           background: rgba(74, 222, 128, .15);
           color: #4ade80
       }

       .score-warm {
           background: rgba(255, 199, 44, .15);
           color: #FFC72C
       }

       .score-cold {
           background: rgba(248, 113, 113, .15);
           color: #f87171
       }

       .chat-layout {
           display: flex;
           gap: 0;
           height: 100%
       }

       .chat-list {
           width: 200px;
           border-right: 1px solid var(--amaz-border);
           overflow-y: auto;
           flex-shrink: 0
       }

       .chat-item {
           padding: 10px 12px;
           border-bottom: 1px solid var(--amaz-border);
           cursor: pointer
       }

       .chat-item.active {
           background: rgba(77, 170, 238, .1)
       }

       .chat-num {
           font-size: 12px;
           color: var(--amaz-text);
           font-weight: 500;
           margin-bottom: 2px
       }

       .chat-preview {
           font-size: 11px;
           color: var(--amaz-muted);
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis
       }

       .chat-main {
           flex: 1;
           display: flex;
           flex-direction: column;
           padding: 14px
       }

       .chat-header {
           font-size: 13px;
           font-weight: 500;
           color: var(--amaz-text);
           margin-bottom: 14px;
           padding-bottom: 10px;
           border-bottom: 1px solid var(--amaz-border)
       }

       .messages {
           flex: 1;
           display: flex;
           flex-direction: column;
           gap: 10px;
           overflow-y: auto
       }

       .msg {
           max-width: 80%;
           padding: 10px 12px;
           border-radius: 10px;
           font-size: 12px;
           line-height: 1.5
       }

       .msg-user {
           align-self: flex-end;
           background: var(--amaz-blue);
           color: #fff;
           border-radius: 10px 10px 2px 10px
       }

       .msg-bot {
           align-self: flex-start;
           background: var(--amaz-dark3);
           color: var(--amaz-text);
           border: 1px solid var(--amaz-border);
           border-radius: 10px 10px 10px 2px
       }

       .msg-link {
           color: var(--amaz-yellow);
           text-decoration: underline;
           font-size: 11px
       }

       .settings-grid {
           display: grid;
           grid-template-columns: 160px 1fr;
           gap: 0;
           height: 100%
       }

       .settings-nav {
           border-right: 1px solid var(--amaz-border);
           padding: 8px 0
       }

       .settings-nav-item {
           padding: 8px 14px;
           font-size: 12px;
           color: var(--amaz-muted);
           cursor: pointer;
           border-radius: 0
       }

       .settings-nav-item.active {
           color: var(--amaz-blue);
           background: rgba(77, 170, 238, .1);
           border-left: 2px solid var(--amaz-blue)
       }

       .settings-content {
           padding: 16px
       }

       .form-group {
           margin-bottom: 14px
       }

       .form-label {
           font-size: 11px;
           color: var(--amaz-muted);
           margin-bottom: 5px
       }

       .form-input {
           width: 100%;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 8px;
           padding: 8px 10px;
           color: var(--amaz-text);
           font-size: 12px
       }

       .qr-box {
           width: 80px;
           height: 80px;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 8px;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-top: 8px
       }

       .connected-badge {
           display: inline-flex;
           align-items: center;
           gap: 6px;
           background: rgba(74, 222, 128, .1);
           border: 1px solid rgba(74, 222, 128, .3);
           color: #4ade80;
           padding: 6px 12px;
           border-radius: 20px;
           font-size: 12px
       }

       .dot {
           width: 7px;
           height: 7px;
           border-radius: 50%;
           background: #4ade80
       }

       .login-wrap {
           min-height: 100vh;
           background: var(--amaz-dark);
           display: flex;
           align-items: center;
           justify-content: center;
           background-image: radial-gradient(ellipse at 60% 20%, rgba(204, 255, 0, 0.04) 0%, transparent 60%),
               radial-gradient(ellipse at 20% 80%, rgba(77, 170, 238, 0.05) 0%, transparent 55%);
       }

       .login-card {
           background: rgba(22, 24, 30, 0.75);
           backdrop-filter: blur(18px);
           -webkit-backdrop-filter: blur(18px);
           border: 1px solid rgba(255, 255, 255, 0.08);
           border-radius: 18px;
           padding: 36px 32px;
           width: 340px;
           box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
       }

       .login-logo {
           text-align: center;
           margin-bottom: 28px;
       }

       .login-logo-box {
           width: 48px;
           height: 48px;
           background: var(--lime, #ccff00);
           border-radius: 12px;
           display: flex;
           align-items: center;
           justify-content: center;
           margin: 0 auto 10px;
           box-shadow: 0 4px 18px rgba(204, 255, 0, 0.25);
       }

       .login-title {
           font-size: 19px;
           font-weight: 700;
           color: var(--amaz-text);
           margin-bottom: 4px;
           text-align: center;
           letter-spacing: -0.2px;
       }

       .login-sub {
           font-size: 12px;
           color: var(--amaz-muted);
           text-align: center;
           margin-bottom: 24px;
       }

       .login-label {
           font-size: 11px;
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.5px;
           color: var(--amaz-muted);
           margin-bottom: 6px;
       }

       .login-input {
           width: 100%;
           background: rgba(255, 255, 255, 0.04);
           border: 1px solid rgba(255, 255, 255, 0.1);
           border-radius: 9px;
           padding: 10px 13px;
           color: var(--amaz-text);
           font-size: 13px;
           margin-bottom: 14px;
           outline: none;
           transition: border-color 0.2s, box-shadow 0.2s;
           box-sizing: border-box;
       }

       .login-input:focus {
           border-color: rgba(204, 255, 0, 0.45);
           box-shadow: 0 0 0 3px rgba(204, 255, 0, 0.08);
       }

       .login-btn {
           width: 100%;
           background: var(--lime, #ccff00);
           color: #111;
           border: none;
           border-radius: 9px;
           padding: 11px;
           font-size: 14px;
           font-weight: 700;
           cursor: pointer;
           margin-top: 6px;
           letter-spacing: 0.1px;
           transition: opacity 0.15s, transform 0.15s;
       }

       .login-btn:hover {
           opacity: 0.88;
           transform: translateY(-1px);
       }

       .login-btn:active {
           transform: translateY(0);
           opacity: 1;
       }

       .login-forgot {
           text-align: center;
           margin-top: 14px;
           font-size: 12px;
           color: var(--amaz-muted);
       }

       .prog-bar {
           height: 4px;
           background: #333;
           border-radius: 2px;
           margin-top: 12px
       }

       .prog-fill {
           height: 100%;
           background: #ccff00;
           border-radius: 2px
       }

       .kanban-drop-placeholder {
           margin: 15px 0
       }

       /* Drag & Drop */
       .lead-card {
           transition: box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
       }

       .lead-card[draggable="true"]:hover:not(.dragging) {
           border-color: rgba(204, 255, 0, 0.3) !important;
           box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
           cursor: grab;
       }

       .lead-card.dragging {
           opacity: 0.3 !important;
           transform: scale(0.97) rotate(-0.5deg) !important;
           box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
       }

       .kanban-col.drag-over {
           background: rgba(204, 255, 0, 0.02) !important;
           border-color: rgba(204, 255, 0, 0.25) !important;
       }

       .kanban-cards {
           min-height: 60px;
           transition: all 0.3s
       }

       /* Modal Overlay */
       .modal-overlay {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.7);
           backdrop-filter: blur(4px);
           z-index: 1000;
           align-items: center;
           justify-content: center
       }

       .modal-overlay.show {
           display: flex
       }

       .modal-card {
           background: var(--amaz-dark2);
           border: 1px solid var(--amaz-border);
           border-radius: 16px;
           padding: 28px;
           width: 520px;
           max-height: 90vh;
           overflow-y: auto;
           position: relative;
           animation: modalIn 0.3s ease
       }

       @keyframes modalIn {
           from {
               opacity: 0;
               transform: translateY(20px) scale(0.97)
           }

           to {
               opacity: 1;
               transform: translateY(0) scale(1)
           }
       }

       .modal-close {
           position: absolute;
           top: 16px;
           right: 16px;
           width: 32px;
           height: 32px;
           border-radius: 8px;
           background: rgba(255, 255, 255, 0.05);
           border: 1px solid rgba(255, 255, 255, 0.08);
           display: grid;
           place-items: center;
           cursor: pointer;
           color: var(--amaz-muted);
           transition: all 0.2s;
           padding: 0;
           overflow: hidden;
       }

       .modal-close svg {
           width: 16px;
           height: 16px;
           display: block;
           grid-area: 1/1;
       }

       .modal-close:hover {
           background: rgba(248, 113, 113, 0.1);
           color: #f87171;
           border-color: rgba(248, 113, 113, 0.3)
       }

       .ld-clickable:hover {
           background: rgba(204, 255, 0, 0.05);
           border-color: rgba(204, 255, 0, 0.3);
           cursor: pointer;
       }

       .ld-placeholder {
           color: var(--amaz-muted) !important;
           font-style: italic;
           opacity: 0.6;
       }

       .ld-readonly {
           color: var(--amaz-muted) !important;
           cursor: default;
       }

       .form-section {
           margin-bottom: 18px
       }

       .form-section-label {
           font-size: 11px;
           color: var(--amaz-muted);
           font-weight: 700;
           margin-bottom: 10px;
           letter-spacing: 0.6px;
           text-transform: uppercase;
           display: flex;
           align-items: center;
           gap: 6px;
       }

       .form-section-label::after {
           content: '';
           flex: 1;
           height: 1px;
           background: var(--amaz-border);
           opacity: 0.6;
       }

       .form-req {
           font-size: 10px;
           color: rgba(248, 113, 113, .7);
           font-weight: 600;
           text-transform: none;
           letter-spacing: 0;
           margin-left: 2px;
       }

       .chip-group {
           display: flex;
           flex-wrap: wrap;
           gap: 8px
       }

       .chip {
           padding: 6px 14px;
           border-radius: 20px;
           font-size: 12px;
           font-weight: 500;
           border: 1px solid var(--amaz-border);
           color: var(--amaz-muted);
           cursor: pointer;
           background: transparent;
           transition: all 0.2s
       }

       .chip:hover {
           border-color: rgba(204, 255, 0, 0.3);
           color: #fff
       }

       .chip.selected {
           background: rgba(204, 255, 0, 0.1);
           border-color: rgba(204, 255, 0, 0.4);
           color: #ccff00;
           font-weight: 600
       }

       .score-bar-wrap {
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 10px;
           padding: 14px;
           margin-top: 8px
       }

       .score-bar-track {
           height: 8px;
           background: rgba(255, 255, 255, 0.06);
           border-radius: 4px;
           overflow: hidden
       }

       .score-bar-fill {
           height: 100%;
           border-radius: 4px;
           transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1), background 0.5s
       }

       /* Modern Scrollbar */
       .modal-card::-webkit-scrollbar,
       #ld-messages::-webkit-scrollbar,
       #ld-history::-webkit-scrollbar {
           width: 5px
       }

       .modal-card::-webkit-scrollbar-track,
       #ld-messages::-webkit-scrollbar-track,
       #ld-history::-webkit-scrollbar-track {
           background: transparent;
           border-radius: 10px
       }

       .modal-card::-webkit-scrollbar-thumb,
       #ld-messages::-webkit-scrollbar-thumb,
       #ld-history::-webkit-scrollbar-thumb {
           background: rgba(255, 255, 255, 0.1);
           border-radius: 10px;
           transition: background .2s
       }

       .modal-card::-webkit-scrollbar-thumb:hover,
       #ld-messages::-webkit-scrollbar-thumb:hover,
       #ld-history::-webkit-scrollbar-thumb:hover {
           background: rgba(204, 255, 0, 0.3)
       }

       /* ---- LEAD MODAL: WIN/LOSS ACTION BUTTONS ---- */
       .ld-action-btn {
           flex: 1;
           padding: 10px;
           border-radius: 10px;
           font-size: 12px;
           font-weight: 600;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 6px;
           transition: background .18s, box-shadow .18s, transform .12s;
           outline: none;
       }

       .ld-action-ganho {
           border: 1.5px solid #22c55e;
           background: #166534;
           color: #bbf7d0;
       }

       .ld-action-ganho:hover {
           background: #15803d;
           border-color: #4ade80;
           box-shadow: 0 0 20px rgba(34, 197, 94, .45);
           transform: translateY(-1px);
       }

       .ld-action-perda {
           border: 1.5px solid #ef4444;
           background: #7f1d1d;
           color: #fecaca;
       }

       .ld-action-perda:hover {
           background: #991b1b;
           border-color: #f87171;
           box-shadow: 0 0 20px rgba(239, 68, 68, .45);
           transform: translateY(-1px);
       }

       /* ---- CORREÇÃO: BOTÕES DE GANHO E PERDA (FUNDO SÓLIDO) ---- */
       .btn-action-ganho {
           background: var(--lime) !important;
           color: #0f1923 !important;
           border: none !important;
           font-weight: 700;
           transition: all 0.2s ease;
       }

       .btn-action-ganho:hover {
           background: #b8e600 !important;
           box-shadow: 0 4px 12px rgba(204, 255, 0, 0.4) !important;
           transform: translateY(-1px);
       }

       .btn-action-perda {
           background: #f87171 !important;
           color: #ffffff !important;
           border: none !important;
           font-weight: 700;
           transition: all 0.2s ease;
       }

       .btn-action-perda:hover {
           background: #ef4444 !important;
           box-shadow: 0 4px 12px rgba(248, 113, 113, 0.4) !important;
           transform: translateY(-1px);
       }

       /* ---- CORREÇÃO: HOVER DO BOTÃO ADICIONAR LEAD (IMPEDIR TRANSPARÊNCIA) ---- */
       .btn-lime {
           background: var(--lime) !important;
           color: #0f1923 !important;
       }

       .btn-lime:hover:not(:disabled) {
           background: var(--lime) !important;
           color: #0f1923 !important;
           filter: brightness(1.08);
           box-shadow: 0 4px 12px rgba(204, 255, 0, 0.3) !important;
           transform: translateY(-2px);
       }


       /* Stage Progress Bar */
       .stage-bar {
           display: flex;
           align-items: center;
           gap: 0;
           margin-bottom: 14px;
           position: relative
       }

       .stage-step {
           flex: 1;
           display: flex;
           flex-direction: column;
           align-items: center;
           gap: 6px;
           cursor: pointer;
           position: relative;
           z-index: 1;
           transition: all .2s
       }

       .stage-dot {
           width: 32px;
           height: 32px;
           border-radius: 50%;
           background: var(--amaz-dark3);
           border: 2px solid var(--amaz-border);
           display: flex;
           align-items: center;
           justify-content: center;
           color: var(--amaz-muted);
           transition: all .4s cubic-bezier(.23, 1, .32, 1);
           flex-shrink: 0
       }

       .stage-dot svg {
           width: 14px;
           height: 14px
       }

       .stage-step.active .stage-dot {
           background: #ccff00;
           border-color: #ccff00;
           color: #111;
           box-shadow: 0 0 16px rgba(204, 255, 0, .3)
       }

       .stage-step.completed .stage-dot {
           background: rgba(204, 255, 0, .15);
           border-color: rgba(204, 255, 0, .4);
           color: #ccff00
       }

       .stage-step:hover .stage-dot {
           border-color: rgba(204, 255, 0, .5);
           transform: scale(1.1)
       }

       .stage-label-txt {
           font-size: 10px;
           color: var(--amaz-muted);
           font-weight: 500;
           text-align: center;
           transition: color .3s;
           white-space: nowrap
       }

       .stage-step.active .stage-label-txt {
           color: #ccff00;
           font-weight: 700
       }

       .stage-step.completed .stage-label-txt {
           color: rgba(204, 255, 0, .7)
       }

       .stage-line {
           flex: 1;
           height: 2px;
           background: var(--amaz-border);
           margin: 0 -4px;
           margin-bottom: 20px;
           position: relative;
           z-index: 0;
           transition: background .4s
       }

       .stage-line.filled {
           background: rgba(204, 255, 0, .4)
       }

       /* Editable field */
       .ld-edit-val {
           background: transparent;
           border: 1px solid transparent;
           border-radius: 6px;
           padding: 2px 6px;
           color: #fff;
           font-size: 12px;
           font-weight: 500;
           width: auto;
           min-width: 60px;
           max-width: 55%;
           text-align: right;
           outline: none;
           cursor: pointer;
           transition: all .2s
       }

       .ld-edit-val:hover {
           border-color: rgba(204, 255, 0, .2);
           background: rgba(204, 255, 0, .03)
       }

       .ld-edit-val:focus {
           border-color: rgba(204, 255, 0, .4);
           background: var(--amaz-dark3);
           cursor: text
       }

       /* Geladeira button alert pulse */
       @keyframes geladeira-pulse {
           0%, 100% { box-shadow: 0 0 0 0 rgba(147,197,253,0.5); border-color: rgba(147,197,253,0.25); }
           50% { box-shadow: 0 0 0 6px rgba(147,197,253,0); border-color: rgba(147,197,253,0.8); }
       }
       .geladeira-alert {
           animation: geladeira-pulse 1.4s ease-in-out infinite !important;
       }

       /* Custom Dropdown */
       .cdd-wrap {
           position: relative;
           display: inline-block;
           min-width: 120px;
           max-width: 55%;
       }

       .cdd-label {
           display: inline-block;
           max-width: 100%;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
           vertical-align: middle;
       }

       .cdd-btn {
           display: flex;
           align-items: center;
           justify-content: flex-end;
           gap: 5px;
           width: 100%;
           background: transparent;
           border: 1px solid transparent;
           border-radius: 6px;
           padding: 2px 6px;
           color: #fff;
           font-size: 12px;
           font-weight: 500;
           cursor: pointer;
           transition: all .2s;
           outline: none;
           white-space: nowrap;
       }

       .cdd-btn:hover,
       .cdd-wrap.open .cdd-btn {
           border-color: rgba(204, 255, 0, .3);
           background: rgba(204, 255, 0, .04);
           color: #ccff00;
       }

       .cdd-chevron {
           flex-shrink: 0;
           transition: transform .2s;
           opacity: .55;
       }

       .cdd-wrap.open .cdd-chevron {
           transform: rotate(180deg);
           opacity: 1;
       }

       .cdd-list {
           display: none;
           position: absolute;
           right: 0;
           top: calc(100% + 4px);
           background: var(--amaz-dark2);
           border: 1px solid rgba(255, 255, 255, .12);
           border-radius: 8px;
           z-index: 9999;
           min-width: 170px;
           padding: 4px 0;
           list-style: none;
           box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
       }

       .cdd-wrap.open .cdd-list {
           display: block;
       }

       .cdd-item {
           padding: 8px 14px;
           font-size: 12px;
           color: var(--amaz-text);
           cursor: pointer;
           transition: all .15s;
           text-align: left;
           white-space: nowrap;
       }

       .cdd-item:hover {
           background: rgba(204, 255, 0, .08);
           color: #ccff00;
       }

       .cdd-item.cdd-selected {
           color: #ccff00;
           font-weight: 600;
       }

       .cdd-item.cdd-placeholder {
           color: var(--amaz-muted);
           pointer-events: none;
           cursor: default !important;
           opacity: 0.55;
       }

       /* Confirm overlay */
       .confirm-overlay {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, .8);
           backdrop-filter: blur(6px);
           z-index: 2000;
           align-items: center;
           justify-content: center
       }

       .confirm-overlay.show {
           display: flex
       }

       .confirm-card {
           background: var(--amaz-dark2);
           border: 1px solid rgba(248, 113, 113, .3);
           border-radius: 16px;
           padding: 28px;
           width: 400px;
           text-align: center;
           animation: modalIn .3s ease
       }

       /* Botão Cancelar padrão em modais */
       .btn-modal-cancel {
           padding: 10px 16px;
           background: rgba(255, 255, 255, 0.05);
           border: 1px solid rgba(255, 255, 255, 0.1);
           border-radius: 10px;
           color: rgba(255, 255, 255, 0.6);
           font-size: 13px;
           font-weight: 600;
           cursor: pointer;
           transition: background .15s, color .15s, border-color .15s;
       }

       .btn-modal-cancel:hover {
           background: rgba(255, 255, 255, 0.1);
           border-color: rgba(255, 255, 255, 0.18);
           color: #fff;
       }

       /* Fix: Botões Secundários sem Contraste */
       .modal-card button:not([style*="background:#ccff00"]):not([style*="background: #ccff00"]):not(.modal-close):not(.btn-lime):not(.btn-action-ganho):not(.btn-action-perda),
       #kb-date-btn,
       #kb-status-wrap .cdd-btn,
       button[onclick*="document.getElementById('dateStart').value=''"],
       button[onclick="clearKbDate()"] {
           background: rgba(255, 255, 255, 0.05) !important;
           color: #fff !important;
           border: 1px solid rgba(255, 255, 255, 0.1) !important;
       }

       .modal-card button:not([style*="background:#ccff00"]):not([style*="background: #ccff00"]):not(.modal-close):not(.btn-lime):not(.btn-action-ganho):not(.btn-action-perda):hover,
       #kb-date-btn:hover,
       #kb-status-wrap .cdd-btn:hover,
       button[onclick*="document.getElementById('dateStart').value=''"]:hover,
       button[onclick="clearKbDate()"]:hover {
           background: rgba(255, 255, 255, 0.1) !important;
       }

       /* Fix: Hitbox do Calendário */
       input[type="date"]::-webkit-calendar-picker-indicator {
           position: absolute !important;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           opacity: 0;
           cursor: pointer;
           z-index: 2;
       }

       button[onclick="submitNewContact()"]:hover,
       button[onclick="executeExport()"]:hover {
           background: #b8e600 !important;
           color: #111 !important;
           transform: translateY(-2px);
           box-shadow: 0 8px 30px rgba(204, 255, 0, 0.3) !important;
       }

       #origem-bars .bar,
       #origem-bars .bar-bg {
           width: 75%;
           max-width: 180px;
           left: 50%;
           transform: translateX(-50%);
       }

       /* ---- CONFIGURAÇÕES ---- */
       .cfg-nav {
           display: flex;
           gap: 8px;
           margin-bottom: 24px;
           border-bottom: 1px solid var(--amaz-border);
           padding-bottom: 12px;
       }

       .cfg-tab {
           padding: 6px 14px;
           font-size: 13px;
           font-weight: 600;
           color: var(--amaz-muted);
           cursor: pointer;
           border-radius: 6px;
           transition: all 0.2s;
           white-space: nowrap;
       }

       .cfg-tab.active {
           background: rgba(204, 255, 0, 0.08);
           color: var(--lime);
       }

       .cfg-tab:hover:not(.active) {
           color: #fff;
       }

       .cfg-section {
           display: none;
       }

       .cfg-section.active {
           display: block;
       }

       .cfg-card {
           background: var(--amaz-dark2);
           border: 1px solid var(--amaz-border);
           border-radius: 14px;
           padding: 24px;
           margin-bottom: 20px;
       }

       .cfg-title {
           font-size: 15px;
           font-weight: 600;
           color: var(--amaz-text);
           margin-bottom: 16px;
       }

       .cfg-avatar {
           width: 52px;
           height: 52px;
           border-radius: 50%;
           background: rgba(77, 170, 238, 0.15);
           border: 2px solid rgba(77, 170, 238, 0.3);
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 17px;
           font-weight: 700;
           color: var(--amaz-blue);
           flex-shrink: 0;
       }

       .info-grid {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 1px;
           background: var(--amaz-border);
           border-radius: 10px;
           overflow: hidden;
       }

       .info-cell {
           background: var(--amaz-dark3);
           padding: 16px 18px;
           display: flex;
           align-items: flex-start;
           gap: 12px;
       }

       .plan-badge {
           display: inline-flex;
           padding: 3px 10px;
           background: rgba(204, 255, 0, 0.1);
           border: 1px solid rgba(204, 255, 0, 0.25);
           border-radius: 20px;
           font-size: 11px;
           font-weight: 700;
           color: var(--lime);
       }

       .btn-lime {
           padding: 9px 20px;
           background: var(--lime);
           border: none;
           border-radius: 9px;
           font-size: 13px;
           font-weight: 700;
           color: #0f1923;
           cursor: pointer;
           transition: all 0.15s;
       }

       .btn-lime:hover {
           background: #b8e600;
       }

       .wa-layout {
           display: grid;
           grid-template-columns: 1fr 340px;
           gap: 24px;
           align-items: start;
       }

       .qa-item {
           border-bottom: 1px solid var(--amaz-border);
           padding: 14px 0;
           display: flex;
           align-items: flex-start;
           gap: 12px;
       }

       .toggle {
           width: 38px;
           height: 21px;
           background: #253545;
           border-radius: 20px;
           position: relative;
           cursor: pointer;
           transition: background 0.2s;
           flex-shrink: 0;
       }

       .toggle.on {
           background: rgba(204, 255, 0, 0.8);
       }

       .toggle::after {
           content: '';
           position: absolute;
           top: 3px;
           left: 3px;
           width: 15px;
           height: 15px;
           border-radius: 50%;
           background: #fff;
           transition: left 0.2s;
       }

       .toggle.on::after {
           left: 20px;
       }

       .hist-table {
           width: 100%;
           border-collapse: collapse;
       }

       .hist-table th {
           font-size: 11px;
           font-weight: 700;
           color: var(--amaz-muted);
           text-transform: uppercase;
           padding: 10px 16px;
           border-bottom: 1px solid var(--amaz-border);
           text-align: left;
       }

       .hist-table td {
           padding: 13px 16px;
           border-bottom: 1px solid rgba(37, 53, 69, 0.6);
           font-size: 13px;
           color: var(--amaz-text);
       }

       .badge-ok {
           display: inline-flex;
           align-items: center;
           gap: 5px;
           padding: 3px 11px;
           background: rgba(34, 197, 94, 0.1);
           border: 1px solid rgba(34, 197, 94, 0.2);
           border-radius: 20px;
           font-size: 11px;
           font-weight: 700;
           color: #4ade80;
       }

       .cfg-form-row {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 20px;
           margin-bottom: 20px;
       }

       .cfg-input-group label {
           display: block;
           font-size: 11px;
           color: var(--amaz-muted);
           margin-bottom: 6px;
       }

       .cfg-input {
           width: 100%;
           background: var(--amaz-dark3);
           border: 1px solid transparent;
           border-radius: 8px;
           padding: 10px 14px;
           color: #fff;
           font-size: 13px;
           outline: none;
           transition: 0.2s;
       }

       .cfg-input:focus {
           border-color: rgba(204, 255, 0, 0.3);
       }

       .bot-status-wrap {
           display: flex;
           align-items: center;
           gap: 12px;
           margin-bottom: 24px;
       }

       .badge-status-on {
           display: inline-flex;
           align-items: center;
           gap: 6px;
           padding: 8px 14px;
           background: rgba(34, 197, 94, 0.1);
           border: 1px solid rgba(34, 197, 94, 0.2);
           border-radius: 20px;
           font-size: 12px;
           font-weight: 600;
           color: #4ade80;
       }

       .badge-status-on::before {
           content: '';
           width: 6px;
           height: 6px;
           border-radius: 50%;
           background: #4ade80;
       }

       .btn-outline-red {
           padding: 8px 14px;
           background: transparent;
           border: 1px solid rgba(248, 113, 113, 0.3);
           border-radius: 8px;
           font-size: 12px;
           font-weight: 600;
           color: #f87171;
           cursor: pointer;
           transition: 0.2s;
       }

       .btn-outline-red:hover {
           background: rgba(248, 113, 113, 0.1);
       }

       /* ---- CONFIGURAÇÕES v2 (tab-btn layout) ---- */
       .cfg-nav-container {
           display: flex;
           gap: 4px;
           margin-bottom: 28px;
           border-bottom: 1px solid var(--amaz-border);
           padding-bottom: 12px;
           flex-wrap: wrap;
       }

       .cfg-tab-btn {
           padding: 8px 16px;
           font-size: 13px;
           font-weight: 600;
           color: var(--amaz-muted);
           cursor: pointer;
           border-radius: 8px;
           transition: all 0.2s;
           border: none;
           background: transparent;
       }

       .cfg-tab-btn.active {
           background: rgba(204, 255, 0, 0.1);
           color: var(--lime);
       }

       .cfg-tab-btn:hover:not(.active) {
           color: #fff;
           background: rgba(255, 255, 255, 0.05);
       }

       .cfg-inner-section {
           display: none;
       }

       .cfg-content-card {
           background: var(--amaz-dark2);
           border: 1px solid var(--amaz-border);
           border-radius: 14px;
           padding: 32px;
           margin-bottom: 20px;
       }

       .cfg-form-grid {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 24px;
           margin-top: 24px;
       }

       .cfg-field label {
           display: block;
           font-size: 12px;
           font-weight: 600;
           color: var(--amaz-muted);
           text-transform: uppercase;
           letter-spacing: .5px;
           margin-bottom: 8px;
       }

       .cfg-input-field {
           width: 100%;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 10px;
           padding: 12px 16px;
           color: #fff;
           font-size: 14px;
           outline: none;
           transition: border-color 0.2s;
           box-sizing: border-box;
       }

       .cfg-input-field:focus {
           border-color: rgba(204, 255, 0, 0.35);
       }

       .cfg-status-box {
           display: flex;
           align-items: center;
           gap: 12px;
           margin-top: 20px;
       }

       /* gerais v3 */
       .cfg-section-title {
           font-size: 12px;
           font-weight: 700;
           color: var(--amaz-muted);
           text-transform: uppercase;
           letter-spacing: .8px;
           margin-bottom: 20px;
           display: flex;
           align-items: center;
           gap: 10px;
       }

       .cfg-section-title::after {
           content: '';
           flex: 1;
           height: 1px;
           background: var(--amaz-border);
           opacity: 0.8;
       }

       .cfg-select {
           width: 100%;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 10px;
           padding: 12px 16px;
           color: #fff;
           font-size: 14px;
           outline: none;
           appearance: none;
           background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%237a9ab5' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
           background-repeat: no-repeat;
           background-position: right 14px center;
           cursor: pointer;
           transition: border-color .2s;
       }

       .cfg-select:focus {
           border-color: rgba(204, 255, 0, 0.35);
       }

       .cfg-textarea {
           width: 100%;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 10px;
           padding: 12px 16px;
           color: #fff;
           font-size: 14px;
           outline: none;
           resize: vertical;
           min-height: 80px;
           transition: border-color .2s;
           box-sizing: border-box;
           font-family: inherit;
       }

       .cfg-textarea:focus {
           border-color: rgba(204, 255, 0, 0.35);
       }

       .cfg-days {
           display: flex;
           gap: 6px;
           flex-wrap: wrap;
       }

       .cfg-day {
           width: 36px;
           height: 36px;
           border-radius: 8px;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 11px;
           font-weight: 700;
           color: var(--amaz-muted);
           cursor: pointer;
           transition: all .18s;
           user-select: none;
       }

       .cfg-day.on {
           background: rgba(204, 255, 0, .12);
           border-color: rgba(204, 255, 0, .35);
           color: var(--lime);
       }

       .cfg-notif-row {
           display: flex;
           align-items: flex-start;
           justify-content: space-between;
           gap: 16px;
           padding: 14px 0;
           border-bottom: 1px solid rgba(37, 53, 69, .6);
       }

       .cfg-notif-row:last-child {
           border-bottom: none;
           padding-bottom: 0;
       }

       .cfg-notif-label {
           font-size: 13px;
           font-weight: 600;
           color: #e8f0f7;
           margin-bottom: 2px;
       }

       .cfg-notif-desc {
           font-size: 11px;
           color: var(--amaz-muted);
           line-height: 1.5;
       }

       .cfg-inline-num {
           width: 52px;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 7px;
           padding: 4px 8px;
           color: #fff;
           font-size: 13px;
           font-weight: 600;
           outline: none;
           text-align: center;
       }

       .cfg-save-bar {
           display: flex;
           justify-content: flex-end;
           padding-top: 24px;
           border-top: 1px solid var(--amaz-border);
           margin-top: 8px;
       }

       /* ---- Membros ---- */
       .membro-row {
           display: flex;
           align-items: center;
           gap: 14px;
           padding: 14px 0;
           border-bottom: 1px solid rgba(37, 53, 69, .6);
       }

       .membro-row:last-child {
           border-bottom: none;
           padding-bottom: 0;
       }

       .membro-avatar {
           width: 40px;
           height: 40px;
           border-radius: 50%;
           background: rgba(77, 170, 238, .15);
           border: 1px solid rgba(77, 170, 238, .3);
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 13px;
           font-weight: 700;
           color: var(--amaz-blue);
           flex-shrink: 0;
       }

       .membro-meta {
           flex: 1;
           min-width: 0;
       }

       .membro-name {
           font-size: 13px;
           font-weight: 700;
           color: #e8f0f7;
           margin-bottom: 2px;
       }

       .membro-email {
           font-size: 11px;
           color: var(--amaz-muted);
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
       }

       .membro-phone {
           font-size: 11px;
           color: var(--amaz-muted);
           margin-top: 1px;
       }

       .badge-membro {
           display: inline-flex;
           padding: 2px 10px;
           background: rgba(255, 255, 255, .05);
           border: 1px solid var(--amaz-border);
           border-radius: 20px;
           font-size: 10px;
           font-weight: 700;
           color: var(--amaz-muted);
       }

       .badge-admin {
           display: inline-flex;
           padding: 2px 10px;
           background: rgba(204, 255, 0, .1);
           border: 1px solid rgba(204, 255, 0, .25);
           border-radius: 20px;
           font-size: 10px;
           font-weight: 700;
           color: var(--lime);
       }

       .badge-gerente {
           display: inline-flex;
           padding: 2px 10px;
           background: rgba(99, 179, 237, .1);
           border: 1px solid rgba(99, 179, 237, .25);
           border-radius: 20px;
           font-size: 10px;
           font-weight: 700;
           color: #63b3ed;
       }

       .btn-remove-membro {
           font-size: 11px;
           padding: 5px 12px;
           background: transparent;
           border: 1px solid rgba(248, 113, 113, .25);
           border-radius: 7px;
           color: #f87171;
           cursor: pointer;
           transition: .18s;
           white-space: nowrap;
       }

       .btn-remove-membro:hover {
           background: rgba(248, 113, 113, .1);
       }


       /* ---- DIAS DA SEMANA BTN ---- */
       .days-container {
           display: flex;
           gap: 8px;
           flex-wrap: wrap;
       }

       .day-btn {
           padding: 8px 14px;
           border-radius: 8px;
           border: 1px solid var(--amaz-border);
           background: var(--amaz-dark3);
           color: var(--amaz-muted);
           font-size: 12px;
           font-weight: 600;
           cursor: pointer;
           transition: background .18s, border-color .18s, color .18s, transform .15s;
           user-select: none;
       }

       .day-btn.active {
           background: rgba(204, 255, 0, .12);
           border-color: rgba(204, 255, 0, .35);
           color: var(--lime);
       }

       .day-btn:not([disabled]):hover {
           background: rgba(204, 255, 0, .07);
           border-color: rgba(204, 255, 0, .2);
           transform: translateY(-1px);
       }

       .day-btn[disabled] {
           cursor: default;
           opacity: 0.7;
       }

       /* ---- SCHEDULE BLOCKS ---- */
       .schedule-block {
           background: rgba(255,255,255,0.03);
           border: 1px solid var(--amaz-border);
           border-radius: 10px;
           padding: 14px 16px;
           display: flex;
           flex-direction: column;
           gap: 10px;
       }

       .schedule-block-days {
           display: flex;
           gap: 6px;
           align-items: center;
           flex-wrap: wrap;
       }

       .schedule-block-days .day-btn {
           padding: 5px 10px;
           font-size: 11px;
           min-width: 36px;
       }

       .schedule-block-times {
           display: flex;
           align-items: center;
           gap: 10px;
           flex-wrap: wrap;
       }

       .schedule-block-times label {
           font-size: 12px;
           color: var(--amaz-muted);
           margin: 0;
           font-weight: 500;
       }

       /* ---- CUSTOM TIME PICKER (schedule blocks) ---- */
       .sched-time-wrap {
           position: relative;
           display: flex;
           align-items: center;
           gap: 8px;
       }

       .sched-time-label {
           font-size: 12px;
           color: var(--amaz-muted);
           font-weight: 500;
           white-space: nowrap;
       }

       .sched-time-display {
           background: var(--amaz-dark1);
           border: 1px solid var(--amaz-border);
           border-radius: 7px;
           color: #e8f0f7;
           font-size: 13px;
           font-weight: 600;
           padding: 5px 12px;
           min-width: 72px;
           text-align: center;
           cursor: pointer;
           user-select: none;
           transition: border-color .15s, background .15s;
           letter-spacing: 0.04em;
       }

       .sched-time-display:not(.disabled):hover {
           border-color: rgba(204,255,0,0.35);
           background: rgba(204,255,0,0.05);
       }

       .sched-time-display.disabled {
           opacity: 0.55;
           cursor: default;
       }

       .sched-time-dropdown {
           display: none;
           position: absolute;
           top: calc(100% + 6px);
           left: 50%;
           transform: translateX(-50%);
           background: #1a2332;
           border: 1px solid rgba(204,255,0,0.2);
           border-radius: 10px;
           z-index: 9999;
           box-shadow: 0 8px 32px rgba(0,0,0,0.5);
           overflow: hidden;
           flex-direction: row;
           min-width: 130px;
       }

       .sched-time-dropdown.open {
           display: flex;
       }

       .sched-time-col {
           flex: 1;
           max-height: 200px;
           overflow-y: auto;
           scrollbar-width: thin;
           scrollbar-color: rgba(204,255,0,0.15) transparent;
       }

       .sched-time-col:first-child {
           border-right: 1px solid rgba(255,255,255,0.06);
       }

       .sched-time-col::-webkit-scrollbar { width: 3px; }
       .sched-time-col::-webkit-scrollbar-track { background: transparent; }
       .sched-time-col::-webkit-scrollbar-thumb { background: rgba(204,255,0,0.15); border-radius: 3px; }

       .sched-time-item {
           padding: 9px 0;
           text-align: center;
           font-size: 13px;
           font-weight: 500;
           color: #7a9ab5;
           cursor: pointer;
           transition: background .1s, color .1s;
       }

       .sched-time-item:hover {
           background: rgba(204,255,0,0.07);
           color: #e8f0f7;
       }

       .sched-time-item.selected {
           background: rgba(204,255,0,0.12);
           color: #ccff00;
           font-weight: 700;
       }

       .schedule-block-days .day-btn.active {
           background: rgba(204,255,0,0.12);
           border-color: rgba(204,255,0,0.45);
           color: var(--lime);
       }

       .schedule-block-days .day-btn:not([disabled]):not(.active):hover {
           background: rgba(204,255,0,0.06);
           border-color: rgba(204,255,0,0.2);
       }

       .btn-remove-block {
           margin-left: auto;
           background: transparent;
           border: none;
           color: #f87171;
           cursor: pointer;
           font-size: 16px;
           line-height: 1;
           padding: 2px 6px;
           border-radius: 6px;
           opacity: 0.6;
           transition: opacity .15s;
           flex-shrink: 0;
       }

       .btn-remove-block:hover { opacity: 1; }
       .btn-remove-block[disabled] { pointer-events: none; opacity: 0.2; }

       /* ---- GERAIS: CARDS SEPARADOS ---- */
       .cfg-section-card {
           background: var(--amaz-dark2);
           border: 1px solid var(--amaz-border);
           border-radius: 14px;
           padding: 28px 32px;
           margin-bottom: 20px;
       }

       /* Inputs bloqueados: fundo sutil, texto levemente visível */
       .cfg-input[readonly],
       .amaz-custom-select.disabled .select-selected {
           background: rgba(37, 53, 69, 0.45) !important;
           border-color: var(--amaz-border) !important;
           color: rgba(232, 240, 247, 0.55) !important;
           cursor: default;
       }

       .cfg-input:focus:not([readonly]) {
           border-color: var(--lime);
           box-shadow: 0 0 0 1px rgba(204, 255, 0, 0.2);
           background: var(--amaz-dark3);
           color: #fff;
       }

       /* Botão Editar — outline lime premium */
       #btn-edit-user.btn-outline-lime {
           padding: 14px 48px;
           background: transparent;
           border: 2px solid var(--lime);
           border-radius: 10px;
           font-size: 14px;
           font-weight: 700;
           color: var(--lime);
           cursor: pointer;
           transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
           letter-spacing: 0.02em;
       }

       #btn-edit-user.btn-outline-lime:hover {
           background: rgba(204, 255, 0, 0.08);
           box-shadow: 0 4px 16px rgba(204, 255, 0, 0.18);
           transform: translateY(-1px);
       }

       #btn-edit-user.btn-lime {
           padding: 14px 48px;
           font-size: 14px;
           font-weight: 700;
           letter-spacing: 0.02em;
       }

       /* Footer de acção centrado */
       .cfg-actions-footer {
           display: flex;
           justify-content: center;
           padding: 8px 0 32px;
       }

       /* empty state */
       .membro-empty {
           display: flex;
           flex-direction: column;
           align-items: center;
           padding: 48px 24px;
           text-align: center;
       }

       .membro-empty-icon {
           width: 56px;
           height: 56px;
           border-radius: 50%;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           display: flex;
           align-items: center;
           justify-content: center;
           margin-bottom: 16px;
       }

       /* modal membros */
       .membro-modal-overlay {
           position: fixed;
           inset: 0;
           background: rgba(0, 0, 0, .7);
           backdrop-filter: blur(4px);
           z-index: 9100;
           display: none;
           align-items: center;
           justify-content: center;
       }

       .membro-modal-overlay.show {
           display: flex;
       }

       .membro-modal-card {
           background: var(--amaz-dark2);
           border: 1px solid var(--amaz-border);
           border-radius: 14px;
           width: 100%;
           max-width: 440px;
           padding: 28px;
           position: relative;
           animation: fm-in .25s ease;
       }

       .membro-modal-close {
           position: absolute;
           top: 18px;
           right: 18px;
           width: 30px;
           height: 30px;
           display: flex;
           align-items: center;
           justify-content: center;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 8px;
           cursor: pointer;
           transition: background .15s;
       }

       .membro-modal-close:hover {
           background: rgba(248, 113, 113, .15);
           border-color: rgba(248, 113, 113, .3);
       }

       .membro-field {
           margin-bottom: 16px;
       }

       .membro-field label {
           display: block;
           font-size: 11px;
           font-weight: 700;
           color: var(--amaz-muted);
           text-transform: uppercase;
           letter-spacing: .5px;
           margin-bottom: 7px;
       }

       .membro-input {
           width: 100%;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 10px;
           padding: 12px 16px;
           color: #fff;
           font-size: 14px;
           outline: none;
           transition: border-color .2s;
           box-sizing: border-box;
       }

       .membro-input:focus {
           border-color: rgba(204, 255, 0, .35);
       }

       .membro-pw-wrap {
           position: relative;
       }

       .membro-pw-wrap .membro-input {
           padding-right: 44px;
       }

       .membro-eye {
           position: absolute;
           right: 13px;
           top: 50%;
           transform: translateY(-50%);
           background: none;
           border: none;
           cursor: pointer;
           color: var(--amaz-muted);
           display: flex;
           align-items: center;
           transition: color .15s;
           padding: 0;
       }

       .membro-eye:hover {
           color: #fff;
       }

       /* ---- Fontes de Captação ---- */
       .fontes-grid {
           display: flex;
           flex-direction: column;
           gap: 10px;
       }

       .fonte-row {
           display: flex;
           align-items: center;
           gap: 14px;
           padding: 14px 16px;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 12px;
           transition: border-color .2s, background .2s;
           position: relative;
           overflow: hidden;
       }

       .fonte-row.fonte-active {
           border-color: rgba(255,255,255,0.1);
       }

       .fonte-row.fonte-active:hover {
           border-color: rgba(204,255,0,0.2);
           background: rgba(204,255,0,0.02);
       }

       .fonte-row.fonte-inactive {
           opacity: 0.6;
       }

       .fonte-row::before {
           content: '';
           position: absolute;
           left: 0; top: 0; bottom: 0;
           width: 3px;
           border-radius: 12px 0 0 12px;
           background: transparent;
           transition: background .2s;
       }

       .fonte-row.fonte-active::before {
           background: var(--accent-color, #4ade80);
       }

       .fonte-icon {
           width: 40px;
           height: 40px;
           border-radius: 10px;
           background: var(--icon-bg, rgba(255,255,255,0.05));
           border: 1px solid var(--icon-border, var(--amaz-border));
           display: flex;
           align-items: center;
           justify-content: center;
           flex-shrink: 0;
           box-shadow: var(--icon-glow, none);
       }

       .fonte-meta {
           flex: 1;
           min-width: 0;
       }

       .fonte-name {
           font-size: 13px;
           font-weight: 700;
           color: #e8f0f7;
           margin-bottom: 4px;
           letter-spacing: .1px;
       }

       .fonte-sub {
           display: flex;
           align-items: center;
           gap: 8px;
           font-size: 11px;
           color: var(--amaz-muted);
       }

       .fonte-tag {
           font-size: 10px;
           font-weight: 600;
           color: var(--amaz-muted);
           background: rgba(255,255,255,0.05);
           border: 1px solid var(--amaz-border);
           border-radius: 6px;
           padding: 2px 7px;
           letter-spacing: .2px;
           flex-shrink: 0;
       }

       .fonte-badge-on {
           display: inline-flex;
           align-items: center;
           gap: 5px;
           font-size: 10px;
           font-weight: 700;
           color: #ccff00;
           background: rgba(204, 255, 0, .08);
           border: 1px solid rgba(204, 255, 0, .22);
           border-radius: 20px;
           padding: 2px 9px;
       }

       .fonte-badge-off {
           display: inline-flex;
           align-items: center;
           gap: 5px;
           font-size: 10px;
           font-weight: 700;
           color: var(--amaz-muted);
           background: rgba(255, 255, 255, .04);
           border: 1px solid var(--amaz-border);
           border-radius: 20px;
           padding: 2px 9px;
       }

       /* Modal Fontes */
       .fonte-modal-overlay {
           position: fixed;
           inset: 0;
           background: rgba(10, 18, 26, .75);
           backdrop-filter: blur(4px);
           z-index: 9000;
           display: none;
           align-items: center;
           justify-content: center;
       }

       .fonte-modal-overlay.show {
           display: flex;
       }

       .fonte-modal-card {
           background: var(--amaz-dark2);
           border: 1px solid var(--amaz-border);
           border-radius: 14px;
           width: 100%;
           max-width: 480px;
           padding: 28px;
           position: relative;
           animation: fm-in .25s ease;
       }

       @keyframes fm-in {
           from {
               opacity: 0;
               transform: translateY(-12px);
           }

           to {
               opacity: 1;
               transform: translateY(0);
           }
       }

       .fonte-modal-close {
           position: absolute;
           top: 18px;
           right: 18px;
           width: 30px;
           height: 30px;
           display: flex;
           align-items: center;
           justify-content: center;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 8px;
           cursor: pointer;
           transition: background .15s;
       }

       .fonte-modal-close:hover {
           background: rgba(248, 113, 113, .15);
           border-color: rgba(248, 113, 113, .3);
       }

       /* Radio pill */
       .fonte-radio-group {
           display: flex;
           gap: 10px;
       }

       .fonte-radio-opt {
           flex: 1;
           display: flex;
           align-items: center;
           gap: 9px;
           padding: 11px 14px;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 10px;
           cursor: pointer;
           transition: all .18s;
           user-select: none;
       }

       .fonte-radio-opt.selected {
           background: rgba(204, 255, 0, .06);
           border-color: rgba(204, 255, 0, .3);
       }

       .fonte-radio-dot {
           width: 16px;
           height: 16px;
           border-radius: 50%;
           border: 2px solid var(--amaz-border);
           flex-shrink: 0;
           transition: all .18s;
           position: relative;
       }

       .fonte-radio-opt.selected .fonte-radio-dot {
           border-color: var(--lime);
           background: var(--lime);
       }

       .fonte-radio-opt.selected .fonte-radio-dot::after {
           content: '';
           position: absolute;
           inset: 3px;
           border-radius: 50%;
           background: #0f1923;
       }

       .fonte-radio-label {
           font-size: 13px;
           font-weight: 700;
           color: var(--amaz-muted);
           transition: color .18s;
       }

       .fonte-radio-opt.selected .fonte-radio-label {
           color: #fff;
       }

       /* ---- WhatsApp tab ---- */
       .wa-v2-layout {
           display: grid;
           grid-template-columns: 55fr 45fr;
           gap: 20px;
           align-items: start;
       }

       /* status banner */
       .wa-banner {
           display: flex;
           align-items: center;
           gap: 10px;
           padding: 11px 16px;
           border-radius: 10px;
           margin-bottom: 22px;
           font-size: 13px;
           font-weight: 600;
       }

       .wa-banner.disconnected {
           background: rgba(248, 113, 113, .08);
           border: 1px solid rgba(248, 113, 113, .2);
           color: #f87171;
       }

       .wa-banner.waiting {
           background: rgba(251, 191, 36, .08);
           border: 1px solid rgba(251, 191, 36, .2);
           color: #fbbf24;
       }

       .wa-banner.connected {
           background: rgba(34, 197, 94, .08);
           border: 1px solid rgba(34, 197, 94, .2);
           color: #4ade80;
       }

       /* steps */
       .wa-steps {
           display: flex;
           flex-direction: column;
           gap: 0;
       }

       .wa-step {
           display: flex;
           gap: 14px;
           position: relative;
       }

       .wa-step:not(:last-child)::before {
           content: '';
           position: absolute;
           left: 15px;
           top: 32px;
           bottom: 0;
           width: 1px;
           background: var(--amaz-border);
       }

       .wa-step-num {
           width: 32px;
           height: 32px;
           border-radius: 50%;
           background: rgba(204, 255, 0, .1);
           border: 1px solid rgba(204, 255, 0, .25);
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 12px;
           font-weight: 800;
           color: var(--lime);
           flex-shrink: 0;
       }

       .wa-step-body {
           padding-bottom: 22px;
       }

       .wa-step-title {
           font-size: 13px;
           font-weight: 700;
           color: #e8f0f7;
           margin-bottom: 3px;
       }

       .wa-step-desc {
           font-size: 12px;
           color: var(--amaz-muted);
           line-height: 1.55;
       }

       /* info box */
       .wa-info-box {
           display: flex;
           gap: 10px;
           background: rgba(77, 170, 238, .07);
           border: 1px solid rgba(77, 170, 238, .2);
           border-radius: 10px;
           padding: 13px 15px;
           margin-top: 4px;
       }

       .wa-info-box svg {
           flex-shrink: 0;
           margin-top: 1px;
       }

       /* right panel */
       .wa-panel {
           background: var(--amaz-dark2);
           border: 1px solid var(--amaz-border);
           border-radius: 14px;
           overflow: hidden;
       }

       .wa-panel-tabs {
           display: flex;
           border-bottom: 1px solid var(--amaz-border);
       }

       .wa-panel-tab {
           flex: 1;
           padding: 13px;
           font-size: 13px;
           font-weight: 600;
           color: var(--amaz-muted);
           text-align: center;
           cursor: pointer;
           transition: all .18s;
           border: none;
           background: transparent;
       }

       .wa-panel-tab.active {
           color: var(--lime);
           background: rgba(204, 255, 0, .05);
           border-bottom: 2px solid var(--lime);
       }

       .wa-panel-tab:hover:not(.active) {
           color: #fff;
           background: rgba(255, 255, 255, .03);
       }

       .wa-panel-body {
           padding: 28px 24px;
       }

       /* QR area */
       .wa-qr-area {
           width: 160px;
           height: 160px;
           border: 2px dashed var(--amaz-border);
           border-radius: 14px;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           margin: 0 auto 18px;
           cursor: pointer;
           transition: border-color .2s;
       }

       .wa-qr-area:hover {
           border-color: rgba(204, 255, 0, .35);
       }

       .wa-qr-area svg {
           margin-bottom: 8px;
       }

       /* status pill */
       .wa-pill {
           display: inline-flex;
           align-items: center;
           gap: 7px;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 20px;
           padding: 6px 14px;
           font-size: 12px;
           color: var(--amaz-muted);
           font-weight: 600;
       }

       .wa-dot {
           width: 7px;
           height: 7px;
           border-radius: 50%;
           background: #fbbf24;
           animation: wa-pulse 1.4s ease-in-out infinite;
       }

       .wa-dot.green {
           background: #4ade80;
       }

       @keyframes wa-pulse {

           0%,
           100% {
               opacity: 1;
               transform: scale(1)
           }

           50% {
               opacity: .4;
               transform: scale(.75)
           }
       }

       /* phone input */
       .wa-phone-wrap {
           display: flex;
           border: 1px solid var(--amaz-border);
           border-radius: 10px;
           overflow: hidden;
           background: var(--amaz-dark3);
       }

       .wa-phone-prefix {
           padding: 12px 14px;
           font-size: 14px;
           font-weight: 700;
           color: var(--amaz-muted);
           border-right: 1px solid var(--amaz-border);
           white-space: nowrap;
       }

       .wa-phone-input {
           flex: 1;
           background: transparent;
           border: none;
           padding: 12px 14px;
           color: #fff;
           font-size: 14px;
           outline: none;
       }

       /* code reveal */
       .wa-code-box {
           background: var(--amaz-dark3);
           border: 1px solid rgba(204, 255, 0, .2);
           border-radius: 10px;
           padding: 14px 18px;
           text-align: center;
           font-size: 22px;
           font-weight: 800;
           color: var(--lime);
           letter-spacing: 3px;
           margin-bottom: 10px;
       }

       /* spinner */
       @keyframes wa-spin {
           to {
               transform: rotate(360deg);
           }
       }

       .wa-spinner {
           width: 20px;
           height: 20px;
           border: 2px solid rgba(204, 255, 0, .2);
           border-top-color: var(--lime);
           border-radius: 50%;
           animation: wa-spin .7s linear infinite;
       }

       /* ---- BASE DE CONHECIMENTO & MODAL Q&A ---- */
       .kb-grid {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 16px;
           margin-bottom: 24px;
       }

       .kb-box {
           background: var(--amaz-dark2);
           border: 1px solid var(--amaz-border);
           border-radius: 12px;
           padding: 20px;
       }

       .qa-main-card {
           background: var(--amaz-dark2);
           border: 1px solid var(--amaz-border);
           border-radius: 12px;
           padding: 24px;
       }

       .qa-header-row {
           display: flex;
           align-items: center;
           justify-content: space-between;
           margin-bottom: 20px;
           flex-wrap: wrap;
           gap: 12px;
       }

       .qa-item-card {
           background: transparent;
           border: 1px solid var(--amaz-border);
           border-radius: 10px;
           padding: 16px 20px;
           margin-bottom: 12px;
           display: flex;
           gap: 16px;
           align-items: flex-start;
           transition: border-color 0.2s;
       }

       .qa-item-card:hover {
           border-color: rgba(255, 255, 255, 0.15);
       }

       .qa-content {
           flex: 1;
       }

       .qa-actions-col {
           display: flex;
           align-items: center;
           gap: 16px;
           flex-shrink: 0;
       }

       .qa-btn-ghost {
           display: inline-flex;
           align-items: center;
           gap: 8px;
           padding: 9px 16px;
           background: transparent;
           border: 1px solid rgba(255, 255, 255, 0.1);
           border-radius: 8px;
           font-size: 13px;
           font-weight: 600;
           color: #fff;
           cursor: pointer;
           transition: 0.2s;
       }

       .qa-btn-ghost:hover {
           background: rgba(255, 255, 255, 0.05);
       }

       /* Modal Q&A */
       .qa-modal-overlay {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(4px);
           display: none;
           align-items: center;
           justify-content: center;
           z-index: 9999;
       }

       .qa-modal-card {
           background: var(--amaz-dark2);
           border: 1px solid var(--amaz-border);
           border-radius: 14px;
           width: 500px;
           max-width: 90%;
           padding: 24px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
       }

       .qa-textarea {
           width: 100%;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 8px;
           padding: 14px;
           color: #fff;
           font-size: 13px;
           resize: vertical;
           min-height: 80px;
           outline: none;
           transition: 0.2s;
           font-family: inherit;
       }

       .qa-textarea:focus {
           border-color: var(--lime);
           box-shadow: 0 0 0 1px var(--lime);
       }

       .qa-field-lbl {
           display: block;
           font-size: 12px;
           font-weight: 600;
           color: #fff;
           margin-bottom: 8px;
           margin-top: 16px;
       }

       /* ---- CUSTOM INPUTS & SELECTS (Aba Gerais) ---- */
       .amaz-input-wrap {
           position: relative;
           width: 100%;
           display: flex;
           align-items: center;
       }

       .amaz-input {
           width: 100%;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 8px;
           padding: 12px 16px;
           color: #fff;
           font-size: 13px;
           outline: none;
           transition: border-color 0.2s, box-shadow 0.2s;
           appearance: none;
           -webkit-appearance: none;
           cursor: text;
           font-family: inherit;
       }

       .amaz-input:focus {
           border-color: var(--lime);
           box-shadow: 0 0 0 1px rgba(204, 255, 0, 0.3);
       }

       .amaz-input[readonly],
       .amaz-input:disabled {
           background: var(--amaz-dark2);
           color: var(--amaz-muted);
           cursor: not-allowed;
           border-color: transparent;
           box-shadow: none;
       }

       .amaz-input[type="time"] {
           cursor: pointer;
       }

       .cfg-gerais-select {
           width: 100%;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 8px;
           padding: 12px 40px 12px 16px;
           color: #fff;
           font-size: 13px;
           outline: none;
           transition: border-color 0.2s;
           appearance: none;
           -webkit-appearance: none;
           cursor: pointer;
           font-family: inherit;
       }

       .cfg-gerais-select:focus {
           border-color: var(--lime);
           box-shadow: 0 0 0 1px rgba(204, 255, 0, 0.3);
       }

       .cfg-gerais-select:disabled {
           background: var(--amaz-dark2);
           color: var(--amaz-muted);
           cursor: not-allowed;
           border-color: transparent;
       }

       .amaz-select-wrap {
           position: relative;
           width: 100%;
       }

       .amaz-select-wrap::after {
           content: '▾';
           position: absolute;
           right: 16px;
           top: 50%;
           transform: translateY(-50%);
           color: var(--amaz-muted);
           pointer-events: none;
           font-size: 13px;
       }

       .amaz-time-wrap {
           position: relative;
           width: 100%;
       }

       .amaz-time-wrap input[type="time"]::-webkit-calendar-picker-indicator {
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           width: 100%;
           height: 100%;
           opacity: 0;
           cursor: pointer;
           z-index: 10;
       }

       .amaz-time-wrap::after {
           content: '⏱';
           position: absolute;
           right: 16px;
           top: 50%;
           transform: translateY(-50%);
           color: var(--amaz-muted);
           pointer-events: none;
           font-size: 14px;
       }

       .amaz-number-wrap input[type="number"]::-webkit-inner-spin-button,
       .amaz-number-wrap input[type="number"]::-webkit-outer-spin-button {
           -webkit-appearance: none;
           margin: 0;
       }

       .amaz-number-wrap {
           display: inline-flex;
           align-items: center;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 8px;
           overflow: hidden;
           padding-right: 4px;
       }

       .amaz-number-wrap:focus-within {
           border-color: var(--lime);
       }

       .amaz-number-wrap input {
           background: transparent;
           border: none;
           color: #fff;
           width: 50px;
           text-align: center;
           font-size: 14px;
           font-weight: 600;
           outline: none;
           padding: 8px 0;
           font-family: inherit;
       }

       .amaz-number-wrap input[readonly] {
           color: var(--amaz-muted);
       }

       .num-controls {
           display: flex;
           flex-direction: column;
       }

       .num-btn {
           background: transparent;
           border: none;
           color: var(--amaz-muted);
           cursor: pointer;
           font-size: 10px;
           padding: 2px 6px;
           transition: color 0.2s;
           line-height: 1;
       }

       .num-btn:hover:not(:disabled) {
           color: var(--lime);
       }

       .num-btn:disabled {
           opacity: 0.3;
           cursor: not-allowed;
       }

       .btn-action-row {
           display: flex;
           justify-content: flex-end;
           gap: 12px;
           margin-top: 24px;
       }

       .gerais-section-divider {
           margin-top: 36px;
           font-size: 11px;
           font-weight: 700;
           color: var(--amaz-muted);
           text-transform: uppercase;
           letter-spacing: .06em;
           margin-bottom: 20px;
           border-bottom: 1px solid var(--amaz-border);
           padding-bottom: 10px;
           display: flex;
           align-items: center;
           gap: 8px;
       }

       /* ---- BOTÕES PREMIUM ---- */
       .btn-lime {
           padding: 12px 24px;
           background: var(--lime);
           border: none;
           border-radius: 8px;
           font-size: 13px;
           font-weight: 700;
           color: #0f1923;
           cursor: pointer;
           transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
           outline: none;
           display: inline-flex;
           justify-content: center;
           align-items: center;
       }

       .btn-lime:hover:not(:disabled) {
           transform: translateY(-2px);
           filter: brightness(1.05);
           box-shadow: 0 4px 12px rgba(204, 255, 0, 0.25);
       }

       .btn-lime:active:not(:disabled) {
           transform: translateY(0);
           box-shadow: none;
       }

       .btn-lime:disabled {
           opacity: 0.5;
           cursor: not-allowed;
       }

       /* ---- CUSTOM SELECT ---- */
       .amaz-custom-select {
           position: relative;
           width: 100%;
           user-select: none;
       }

       .select-selected {
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 8px;
           padding: 12px 16px;
           color: #fff;
           font-size: 14px;
           cursor: pointer;
           transition: all 0.2s ease;
           display: flex;
           justify-content: space-between;
           align-items: center;
       }

       .select-selected::after {
           content: '';
           width: 0;
           height: 0;
           border-left: 5px solid transparent;
           border-right: 5px solid transparent;
           border-top: 5px solid var(--amaz-muted);
           transition: transform 0.2s ease;
           flex-shrink: 0;
       }

       .amaz-custom-select.select-open .select-selected {
           border-color: var(--lime);
       }

       .amaz-custom-select.select-open .select-selected::after {
           transform: rotate(180deg);
       }

       .amaz-custom-select.disabled .select-selected {
           background: var(--amaz-dark2);
           color: var(--amaz-muted);
           cursor: not-allowed;
           border-color: transparent;
       }

       .amaz-custom-select.disabled .select-selected::after {
           opacity: 0.3;
       }

       .select-items {
           position: absolute;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 8px;
           top: calc(100% + 4px);
           left: 0;
           right: 0;
           z-index: 99;
           overflow: hidden;
           opacity: 0;
           visibility: hidden;
           transform: translateY(-8px);
           transition: all 0.18s ease;
           box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
       }

       .amaz-custom-select.select-open .select-items {
           opacity: 1;
           visibility: visible;
           transform: translateY(0);
       }

       .select-items div {
           color: #fff;
           padding: 12px 16px;
           font-size: 13px;
           cursor: pointer;
           transition: background 0.12s ease;
       }

       .select-items div:hover {
           background: rgba(204, 255, 0, 0.1);
           color: var(--lime);
       }

       /* ---- CFG-INPUT (Gerais) ---- */
       .cfg-form-row {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 24px;
           margin-bottom: 24px;
       }

       .cfg-input {
           width: 100%;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 8px;
           padding: 12px 16px;
           color: #fff;
           font-size: 14px;
           outline: none;
           transition: all 0.2s ease;
           font-family: inherit;
       }

       .cfg-input:focus:not([readonly]) {
           border-color: var(--lime);
           box-shadow: 0 0 0 1px rgba(204, 255, 0, 0.2);
       }

       .cfg-input[readonly] {
           background: var(--amaz-dark2);
           color: var(--amaz-muted);
           border-color: transparent;
           cursor: default;
       }

       .cfg-input[type="time"] {
           cursor: pointer;
       }

       /* ---- TIME WRAP (ícone relógio) ---- */
       .time-wrap {
           position: relative;
           width: 100%;
       }

       .time-wrap input[type="time"]::-webkit-calendar-picker-indicator {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           opacity: 0;
           cursor: pointer;
       }

       .time-wrap::after {
           content: '';
           position: absolute;
           right: 14px;
           top: 50%;
           transform: translateY(-50%);
           width: 16px;
           height: 16px;
           background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%237a9ab5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>');
           background-size: contain;
           background-repeat: no-repeat;
           pointer-events: none;
       }

       /* ---- NUM SPINNER ---- */
       .num-spinner-wrap {
           display: inline-flex;
           align-items: center;
           background: var(--amaz-dark3);
           border: 1px solid var(--amaz-border);
           border-radius: 8px;
           overflow: hidden;
           padding-right: 4px;
           transition: border-color 0.2s, box-shadow 0.2s;
       }

       .num-spinner-wrap:focus-within:not(.readonly-mode) {
           border-color: var(--lime);
           box-shadow: 0 0 0 1px rgba(204, 255, 0, 0.2);
       }

       .num-spinner-wrap.readonly-mode {
           background: var(--amaz-dark2);
           border-color: transparent;
       }

       .num-spinner-wrap input {
           background: transparent;
           border: none;
           color: #fff;
           width: 44px;
           text-align: center;
           font-size: 14px;
           font-weight: 600;
           outline: none;
           padding: 10px 0;
           font-family: inherit;
           appearance: textfield;
           -moz-appearance: textfield;
       }

       .num-spinner-wrap.readonly-mode input {
           color: var(--amaz-muted);
       }

       .num-spinner-wrap input::-webkit-outer-spin-button,
       .num-spinner-wrap input::-webkit-inner-spin-button {
           -webkit-appearance: none;
           margin: 0;
       }

       .num-spinner-wrap .num-controls {
           display: flex;
           flex-direction: column;
           transition: opacity 0.2s;
       }

       .num-spinner-wrap.readonly-mode .num-controls {
           opacity: 0;
           pointer-events: none;
           width: 0;
           padding: 0;
           overflow: hidden;
       }

       /* ---- OVERRIDE FINAL: BOTÕES DE GANHO E PERDA (FUNDO SÓLIDO) ---- */
       .btn-action-ganho {
           background: var(--lime) !important;
           color: #0f1923 !important;
           border: none !important;
           font-weight: 700 !important;
           transition: all 0.2s ease;
       }

       .btn-action-ganho:hover {
           background: #b8e600 !important;
           box-shadow: 0 4px 12px rgba(204, 255, 0, 0.4) !important;
           transform: translateY(-1px);
       }

       .btn-action-perda {
           background: #f87171 !important;
           color: #ffffff !important;
           border: none !important;
           font-weight: 700 !important;
           transition: all 0.2s ease;
       }

       .btn-action-perda:hover {
           background: #ef4444 !important;
           box-shadow: 0 4px 12px rgba(248, 113, 113, 0.4) !important;
           transform: translateY(-1px);
       }

       .btn-lime {
           background: var(--lime) !important;
           color: #0f1923 !important;
       }

       .btn-lime:hover:not(:disabled) {
           background: var(--lime) !important;
           color: #0f1923 !important;
           filter: brightness(1.08) !important;
           box-shadow: 0 4px 12px rgba(204, 255, 0, 0.3) !important;
           transform: translateY(-2px);
       }

       /* ---- AÇÕES DA LISTA DE MEMBROS ---- */
       .membro-actions {
           display: flex;
           align-items: center;
           gap: 8px;
           margin-left: auto;
       }

       .btn-icon-membro {
           width: 32px;
           height: 32px;
           border-radius: 8px;
           background: transparent;
           border: 1px solid transparent;
           display: flex;
           align-items: center;
           justify-content: center;
           cursor: pointer;
           transition: all 0.2s;
       }

       .btn-icon-membro.edit {
           color: var(--amaz-muted);
           border-color: rgba(255, 255, 255, 0.1);
       }

       .btn-icon-membro.edit:hover {
           color: var(--lime);
           border-color: rgba(204, 255, 0, 0.3);
           background: rgba(204, 255, 0, 0.05);
       }

       .btn-icon-membro.delete {
           color: var(--amaz-muted);
           border-color: rgba(255, 255, 255, 0.1);
       }

       .btn-icon-membro.delete:hover {
           color: #f87171;
           border-color: rgba(248, 113, 113, 0.3);
           background: rgba(248, 113, 113, 0.05);
       }

       .membro-row {
           display: flex;
           align-items: center;
           gap: 14px;
           padding: 16px 0;
           border-bottom: 1px solid rgba(255, 255, 255, 0.06);
       }

       .membro-row:last-child {
           border-bottom: none;
       }

       /* generic outline-lime button for modals */
       .btn-outline-lime {
           background: transparent !important;
           border: 2px solid var(--lime) !important;
           border-radius: 9px !important;
           color: var(--lime) !important;
           font-size: 13px;
           font-weight: 700;
           cursor: pointer;
           transition: all 0.2s;
       }

       .btn-outline-lime:hover {
           background: rgba(204, 255, 0, 0.08) !important;
       }

       /* readonly membro-input visual hint */
       .membro-input[readonly] {
           opacity: 0.6;
           cursor: default;
       }

       /* ---- Botões de Feedback de Mensagem (Like / Dislike) ---- */
       .msg-fb-btn {
           display: inline-flex;
           align-items: center;
           gap: 4px;
           padding: 3px 8px;
           border-radius: 6px;
           font-size: 11px;
           font-weight: 600;
           cursor: pointer;
           transition: background .15s, border-color .15s, color .15s, opacity .15s;
           border: 1px solid transparent;
       }

       .msg-fb-btn.like {
           border-color: rgba(74, 222, 128, .2);
           background: rgba(74, 222, 128, .06);
           color: rgba(74, 222, 128, .5);
       }

       .msg-fb-btn.like:hover:not(.selected) {
           border-color: rgba(74, 222, 128, .45);
           background: rgba(74, 222, 128, .14);
           color: rgba(74, 222, 128, .9);
       }

       .msg-fb-btn.like.selected,
       .msg-fb-btn.like:disabled {
           border-color: rgba(74, 222, 128, .5);
           background: rgba(74, 222, 128, .18);
           color: #4ade80;
           cursor: default;
       }

       .msg-fb-btn.dislike {
           border-color: rgba(248, 113, 113, .2);
           background: rgba(248, 113, 113, .06);
           color: rgba(248, 113, 113, .5);
       }

       .msg-fb-btn.dislike:hover:not(.selected) {
           border-color: rgba(248, 113, 113, .45);
           background: rgba(248, 113, 113, .14);
           color: rgba(248, 113, 113, .9);
       }

       .msg-fb-btn.dislike.selected,
       .msg-fb-btn.dislike:disabled {
           border-color: rgba(248, 113, 113, .5);
           background: rgba(248, 113, 113, .18);
           color: #f87171;
           cursor: default;
       }

       .msg-fb-btn.faded {
           opacity: .3;
       }

       /* ---- Exit animations — all modal card types ---- */
       .modal-exiting .membro-modal-card,
       .modal-exiting .fonte-modal-card,
       .modal-exiting .confirm-card,
       .modal-exiting .qa-modal-card {
           animation: modalSlideOut 0.22s ease forwards;
           pointer-events: none;
       }

       /* Fast exit — input/interaction modals (snappier feel) */
       @keyframes modalSlideOutFast {
           from {
               transform: translateY(0) scale(1);
               opacity: 1;
           }

           to {
               transform: translateY(12px) scale(0.96);
               opacity: 0;
           }
       }

       .modal-exiting-fast .modal-card,
       .modal-exiting-fast .membro-modal-card,
       .modal-exiting-fast .fonte-modal-card,
       .modal-exiting-fast .qa-modal-card {
           animation: modalSlideOutFast 0.15s ease-in forwards;
           pointer-events: none;
       }

       /* QA modal show state (class-driven, matches all other modals) */
       .qa-modal-overlay.show {
           display: flex;
       }

       /* ---- BOTÃO DE REFRESH (TOP BAR) ---- */
       .btn-refresh {
           display: flex;
           align-items: center;
           justify-content: center;
           width: 36px;
           height: 36px;
           border-radius: 9px;
           background: rgba(255, 255, 255, 0.04);
           border: 1px solid rgba(255, 255, 255, 0.08);
           color: var(--amaz-muted);
           cursor: pointer;
           transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
           flex-shrink: 0;
       }

       .btn-refresh:hover {
           background: rgba(204, 255, 0, 0.08);
           border-color: rgba(204, 255, 0, 0.2);
           color: var(--lime);
       }

       .btn-refresh svg {
           transition: color 0.18s ease;
       }

       .btn-refresh.spinning svg {
           animation: spin-refresh 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
           color: var(--lime);
       }

       @keyframes spin-refresh {
           from {
               transform: rotate(0deg);
           }

           to {
               transform: rotate(360deg);
           }
       }

       /* ---- SISTEMA DE NOTIFICAÇÕES ---- */
       .btn-notif {
           position: relative;
           display: flex;
           align-items: center;
           justify-content: center;
           width: 36px;
           height: 36px;
           border-radius: 9px;
           background: rgba(255, 255, 255, 0.04);
           border: 1px solid rgba(255, 255, 255, 0.08);
           color: var(--amaz-muted);
           cursor: pointer;
           transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
           flex-shrink: 0;
       }

       .btn-notif:hover {
           background: rgba(255, 255, 255, 0.07);
           border-color: rgba(255, 255, 255, 0.14);
           color: #fff;
       }

       .notif-badge {
           position: absolute;
           top: -5px;
           right: -5px;
           background: #f87171;
           color: #fff;
           font-size: 9px;
           font-weight: 800;
           min-width: 16px;
           height: 16px;
           border-radius: 8px;
           display: none;
           align-items: center;
           justify-content: center;
           padding: 0 4px;
           border: 2px solid var(--amaz-dark);
       }

       .notif-panel {
           display: none;
           position: absolute;
           top: calc(100% + 10px);
           right: 0;
           width: 320px;
           background: var(--amaz-dark2);
           border: 1px solid var(--amaz-border);
           border-radius: 14px;
           box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
           z-index: 1000;
           overflow: hidden;
           flex-direction: column;
       }

       .notif-panel.show {
           display: flex;
           animation: modalIn 0.2s ease;
       }

       .notif-header {
           padding: 14px 18px;
           border-bottom: 1px solid var(--amaz-border);
           display: flex;
           justify-content: space-between;
           align-items: center;
       }

       /* ---- CONVERSAS: scrollbars ---- */
       .chat-list::-webkit-scrollbar,
       .messages::-webkit-scrollbar,
       #main-chat-messages::-webkit-scrollbar {
           width: 4px;
       }

       .chat-list::-webkit-scrollbar-track,
       .messages::-webkit-scrollbar-track,
       #main-chat-messages::-webkit-scrollbar-track {
           background: transparent;
       }

       .chat-list::-webkit-scrollbar-thumb,
       .messages::-webkit-scrollbar-thumb,
       #main-chat-messages::-webkit-scrollbar-thumb {
           background: rgba(255, 255, 255, 0.08);
           border-radius: 4px;
           transition: background .2s;
       }

       .chat-list::-webkit-scrollbar-thumb:hover,
       .messages::-webkit-scrollbar-thumb:hover,
       #main-chat-messages::-webkit-scrollbar-thumb:hover {
           background: rgba(204, 255, 0, 0.25);
       }

       /* ---- NOTIF LIST: scrollbar ---- */
       .notif-list::-webkit-scrollbar {
           width: 4px;
       }

       .notif-list::-webkit-scrollbar-track {
           background: transparent;
       }

       .notif-list::-webkit-scrollbar-thumb {
           background: rgba(255, 255, 255, 0.1);
           border-radius: 4px;
       }

       .notif-list::-webkit-scrollbar-thumb:hover {
           background: rgba(255, 255, 255, 0.18);
       }

       .notif-list {
           max-height: 360px;
           overflow-y: auto;
       }

       .notif-item {
           padding: 13px 18px;
           border-bottom: 1px solid rgba(255, 255, 255, 0.04);
           display: flex;
           gap: 12px;
           align-items: flex-start;
           cursor: pointer;
           transition: background 0.15s;
       }

       .notif-item:hover {
           background: rgba(255, 255, 255, 0.03);
       }

       .notif-item.unread {
           background: rgba(204, 255, 0, 0.03);
       }

       .notif-icon {
           width: 30px;
           height: 30px;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           flex-shrink: 0;
       }

       /* Toasts */
       #toast-container {
           position: fixed;
           bottom: 24px;
           right: 24px;
           display: flex;
           flex-direction: column;
           gap: 10px;
           z-index: 9999;
           pointer-events: none;
       }

       .amaz-toast {
           background: var(--amaz-dark2);
           border: 1px solid var(--amaz-border);
           border-left: 3px solid var(--lime);
           border-radius: 10px;
           padding: 13px 16px;
           color: #fff;
           display: flex;
           align-items: flex-start;
           gap: 12px;
           box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
           width: 300px;
           animation: slideInRight 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards;
           pointer-events: auto;
       }

       .amaz-toast.toast-error {
           border-left-color: #f87171;
       }

       .amaz-toast.toast-info {
           border-left-color: #93c5fd;
       }

       @keyframes slideInRight {
           from {
               transform: translateX(120%);
               opacity: 0;
           }

           to {
               transform: translateX(0);
               opacity: 1;
           }
       }

       @keyframes fadeOutRight {
           to {
               transform: translateX(120%);
               opacity: 0;
           }
       }

       /* ===== Floating Disconnect Warning ===== */
       .floating-warning {
           position: fixed !important;
           bottom: 28px !important;
           right: 28px !important;
           left: auto !important;
           z-index: 9999;
           display: flex;
           align-items: center;
           gap: 0;
           cursor: pointer;
       }

       .warning-icon {
           width: 46px;
           height: 46px;
           border-radius: 50%;
           background: #f87171;
           color: #111;
           display: flex;
           align-items: center;
           justify-content: center;
           flex-shrink: 0;
           box-shadow: 0 4px 18px rgba(248, 113, 113, 0.45);
           transition: transform 0.2s ease, box-shadow 0.2s ease;
       }

       .floating-warning:hover .warning-icon {
           transform: scale(1.08);
           box-shadow: 0 6px 24px rgba(248, 113, 113, 0.6);
       }

       .warning-tooltip {
           position: absolute;
           right: 56px;
           left: auto !important;
           bottom: 0;
           background: #1a1d23;
           border: 1px solid rgba(248, 113, 113, 0.25);
           border-radius: 10px;
           padding: 10px 14px;
           white-space: nowrap;
           font-size: 12px;
           pointer-events: none;
           opacity: 0;
           transform: translateX(8px);
           transition: opacity 0.2s ease, transform 0.2s ease;
           box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
       }

       .floating-warning:hover .warning-tooltip {
           opacity: 1;
           transform: translateX(0);
       }