:root{
  --cw-primary:#6c4df6;
  --cw-dark:#17151f;
  --cw-bg:#f6f7fb;
  --cw-border:#e7e8ef;
  --cw-radius:20px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cw-bg);color:#1d1b24;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:260px;background:#fff;border-right:1px solid var(--cw-border);padding:24px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:1040}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#7c5cff,#ff74b8);color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px}
.brand strong{display:block;font-size:18px}.brand small{display:block;color:#9092a3;font-size:12px}
.sidebar-nav{margin-top:32px;gap:8px}
.sidebar-nav .nav-link{display:flex;align-items:center;gap:12px;color:#696b79;border-radius:14px;padding:12px 14px;font-weight:600}
.sidebar-nav .nav-link:hover,.sidebar-nav .nav-link.active{background:#f0edff;color:var(--cw-primary)}
.sidebar-nav svg{width:19px;height:19px}
.main-content{margin-left:260px;min-width:0;width:calc(100% - 260px)}
.topbar{padding:24px 32px;display:flex;align-items:center;justify-content:space-between;background:rgba(246,247,251,.85);backdrop-filter:blur(16px);position:sticky;top:0;z-index:100}
.topbar h1{font-size:28px;margin:0}.topbar p{margin:4px 0 0;color:#8d8f9d}
.status-pill{padding:9px 14px;border-radius:999px;background:#eafaf0;color:#1b8f4c;font-weight:700;font-size:13px}
.status-pill span{display:inline-block;width:8px;height:8px;border-radius:50%;background:#24c76f;margin-right:7px}
.content-area{padding:0 32px 32px}
.panel,.stat-card{background:#fff;border:1px solid var(--cw-border);border-radius:var(--cw-radius);box-shadow:0 10px 30px rgba(25,22,37,.04)}
.panel{padding:24px}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.panel-header h3,.panel h3{margin:0;font-size:20px}.panel-header p,.panel p{margin:6px 0 0;color:#8d8f9d}
.stat-card{padding:22px;display:flex;align-items:center;gap:16px}
.stat-card small{display:block;color:#8d8f9d}.stat-card strong{display:block;font-size:30px;margin-top:4px}
.stat-icon{width:50px;height:50px;border-radius:16px;background:#f1eeff;color:var(--cw-primary);display:grid;place-items:center}
.btn{border-radius:12px;font-weight:700}.btn-primary{background:var(--cw-primary);border-color:var(--cw-primary)}
.form-control,.form-select{border-radius:12px;border-color:var(--cw-border);padding:.78rem .9rem}
.modal-content{border:0;border-radius:22px;box-shadow:0 30px 80px rgba(20,18,30,.18)}
.modal-header,.modal-footer{border-color:var(--cw-border)}
.table>:not(caption)>*>*{padding:1rem .8rem;border-color:#f0f1f5}
.table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#8d8f9d}
.step-list>div{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid #f0f1f5}.step-list span{width:34px;height:34px;border-radius:12px;background:#f1eeff;color:var(--cw-primary);display:grid;place-items:center;font-weight:800}
.step-list p{margin:4px 0 0}
.api-card code{display:block;background:#17151f;color:#fff;padding:16px;border-radius:14px;margin:18px 0}
.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left,#ebe6ff,transparent 35%),radial-gradient(circle at bottom right,#ffe4f3,transparent 35%),#f7f7fb;padding:24px}
.login-card{width:min(430px,100%);background:#fff;border:1px solid var(--cw-border);border-radius:28px;padding:34px;box-shadow:0 30px 80px rgba(32,24,70,.12)}
.login-card h2{font-size:28px}
.qr-box{min-height:260px;border:2px dashed var(--cw-border);border-radius:18px;display:grid;place-items:center;align-content:center;gap:14px}
.qr-success{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:#eafaf0;color:#1b8f4c;font-size:38px}
@media(max-width:991.98px){
.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.show{transform:translateX(0)}
.main-content{margin-left:0;width:100%}.topbar{padding:18px}.content-area{padding:0 18px 24px}.status-pill{display:none}
}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search-box{position:relative;min-width:260px}
.search-box svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#8d8f9d}
.search-box input{padding-left:42px}
.per-page-select{width:auto;min-width:85px}
.pagination-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px}
.pagination-info{font-size:13px;color:#8d8f9d}
.pagination-buttons{display:flex;gap:6px;flex-wrap:wrap}
.page-btn{min-width:36px;height:36px;border:1px solid var(--cw-border);background:#fff;border-radius:10px;color:#5f6170;font-weight:700}
.page-btn:hover:not(:disabled),.page-btn.active{background:var(--cw-primary);border-color:var(--cw-primary);color:#fff}
.page-btn:disabled{opacity:.45;cursor:not-allowed}
.mobile-card-list{display:none}
.data-card{background:#fff;border:1px solid var(--cw-border);border-radius:18px;padding:16px;margin-bottom:12px}
.data-card-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.data-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:13px}
.data-card-grid span{color:#8d8f9d;display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.data-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.empty-state{text-align:center;padding:48px 20px;color:#8d8f9d}
.empty-state svg{width:48px;height:48px;margin-bottom:10px}
.filter-select{min-width:150px}
@media(max-width:767.98px){
  .desktop-table{display:none}
  .mobile-card-list{display:block}
  .toolbar{align-items:stretch}
  .toolbar-left,.toolbar-right{width:100%}
  .search-box{min-width:0;width:100%}
  .toolbar-right .form-select,.toolbar-right .btn{flex:1}
  .panel{padding:18px}
  .panel-header{align-items:flex-start;flex-direction:column}
  .panel-header .btn,.panel-header>div+div{width:100%}
  .data-card-grid{grid-template-columns:1fr}
  .pagination-wrap{flex-direction:column;align-items:stretch}
  .pagination-buttons{justify-content:center}
  .topbar h1{font-size:22px}
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
}
.btn svg{
  width:17px;
  height:17px;
  flex:0 0 auto;
}
.btn-icon{
  width:42px;
  height:42px;
  padding:0;
}
.page-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.page-btn svg{
  width:16px;
  height:16px;
}
.sidebar-backdrop{
  position:fixed;
  inset:0;
  background:rgba(16,14,22,.45);
  opacity:0;
  visibility:hidden;
  transition:.2s ease;
  z-index:1035;
}
.sidebar-backdrop.show{
  opacity:1;
  visibility:visible;
}
.data-card-actions .btn{
  min-height:36px;
}
.table .btn{
  white-space:nowrap;
}
.modal-footer{
  gap:.5rem;
}
@media(max-width:575.98px){
  .modal-dialog{
    margin:.75rem;
  }
  .modal-footer{
    flex-direction:column-reverse;
  }
  .modal-footer .btn{
    width:100%;
  }
  .w-100-mobile{
    width:100%;
  }
  .w-100-mobile .btn{
    flex:1;
  }
}

.status-pill.offline{
  background:#fff0f0;
  color:#c43636;
}
.status-pill.offline span:first-child{
  background:#e5484d;
}
.qr-box img{
  background:#fff;
  padding:12px;
  border:1px solid var(--cw-border);
}

/* ===== CandyWA refined UI ===== */
:root{
  --cw-primary:#6f4ef6;
  --cw-primary-soft:#f1edff;
  --cw-success:#22a06b;
  --cw-success-soft:#eaf8f1;
  --cw-danger:#dc4c64;
  --cw-danger-soft:#fff0f3;
  --cw-warning:#c98516;
  --cw-warning-soft:#fff7e6;
  --cw-text:#1c1a23;
  --cw-muted:#858898;
  --cw-surface:#ffffff;
  --cw-bg:#f6f7fb;
  --cw-border:#e8e9ef;
  --cw-shadow:0 12px 34px rgba(31,27,52,.06);
}
body{
  background:
    radial-gradient(circle at top right, rgba(111,78,246,.06), transparent 26rem),
    var(--cw-bg);
  color:var(--cw-text);
}
.sidebar{box-shadow:8px 0 28px rgba(31,27,52,.03)}
.sidebar-nav .nav-link{min-height:46px;transition:all .18s ease}
.sidebar-nav .nav-link:hover{transform:translateX(2px)}
.topbar{min-height:88px;border-bottom:1px solid rgba(232,233,239,.75)}
.panel{border:1px solid rgba(232,233,239,.95);box-shadow:var(--cw-shadow)}
.panel-header{padding-bottom:18px;border-bottom:1px solid #f0f1f5}
.table{margin-bottom:0}
.table thead th{
  background:#fafafe;
  border-bottom:1px solid var(--cw-border);
  color:#777a8c;
  font-size:11px;
  font-weight:800;
}
.table tbody tr{transition:background .15s ease}
.table tbody tr:hover{background:#fbfaff}
.table td{vertical-align:middle}
.toolbar{
  padding:14px;
  background:#fafafe;
  border:1px solid var(--cw-border);
  border-radius:16px;
}
.search-box input{background:#fff}
.form-control:focus,.form-select:focus{
  border-color:#baaefd;
  box-shadow:0 0 0 .2rem rgba(111,78,246,.12);
}
.btn{
  min-height:40px;
  padding:.6rem .9rem;
  border-radius:12px;
  transition:all .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-sm{min-height:34px;padding:.4rem .62rem;border-radius:10px}
.btn-light{background:#fff;border-color:var(--cw-border)}
.btn-light:hover{background:#f7f7fb;border-color:#dfe0e8}
.btn-soft-danger{
  color:var(--cw-danger);
  background:var(--cw-danger-soft);
  border:1px solid #ffd8df;
}
.btn-soft-danger:hover{
  color:#fff;
  background:var(--cw-danger);
  border-color:var(--cw-danger);
}
.badge{padding:.48rem .65rem;border-radius:999px;font-weight:700}
.data-card{box-shadow:0 8px 22px rgba(31,27,52,.04)}
.modal-content{overflow:hidden}
.modal-header{padding:1.15rem 1.25rem}
.modal-body{padding:1.25rem}
.modal-footer{padding:1rem 1.25rem;background:#fafafe}
.empty-state{
  border:1px dashed var(--cw-border);
  border-radius:16px;
  background:#fafafe;
}
.pagination-wrap{margin-top:4px}
.page-btn.active{box-shadow:0 6px 14px rgba(111,78,246,.22)}
.section-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:var(--cw-primary);
  background:var(--cw-primary-soft);
  flex:0 0 auto;
}
.section-icon svg{width:21px;height:21px}
.topbar-title h1{letter-spacing:-.02em}
@media(max-width:991.98px){.topbar{min-height:76px}}
@media(max-width:767.98px){
  .content-area{padding-bottom:90px}
  .panel{border-radius:18px}
  .toolbar{padding:12px}
  .data-card{border-radius:16px}
}

/* UI action and header status fix */
.topbar{
  gap:18px;
  overflow:visible;
}
.topbar-title{
  min-width:0;
  flex:1 1 auto;
}
.topbar-title h1,
.topbar-title p{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.status-pill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:190px;
  min-height:38px;
  padding:8px 13px;
  white-space:nowrap;
  overflow:hidden;
  border:1px solid rgba(34,160,107,.12);
  box-shadow:0 6px 16px rgba(34,160,107,.08);
}
.status-pill .status-dot{
  display:block;
  width:9px;
  height:9px;
  margin:0;
  flex:0 0 auto;
}
.status-pill .status-text{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.status-pill.offline{
  border-color:rgba(220,76,100,.14);
  box-shadow:0 6px 16px rgba(220,76,100,.07);
}
.action-buttons{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:7px;
  flex-wrap:nowrap;
}
.action-buttons .btn{
  flex:0 0 auto;
}
.action-buttons .btn span{
  display:inline-block;
}
.table td:last-child,
.table th:last-child{
  min-width:250px;
}
@media(max-width:1199.98px){
  .action-buttons .btn span{display:none}
  .table td:last-child,
  .table th:last-child{min-width:180px}
}
@media(max-width:991.98px){
  .status-pill{
    margin-left:auto;
    max-width:150px;
    min-height:36px;
    padding:7px 11px;
    font-size:12px;
  }
}
@media(max-width:575.98px){
  .topbar{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
  }
  .status-pill{
    max-width:42px;
    width:42px;
    padding:0;
    justify-content:center;
  }
  .status-pill .status-text{display:none}
}

.qr-canvas{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:#fff;
  border:1px solid var(--cw-border);
  border-radius:18px;
  box-shadow:0 12px 30px rgba(31,27,52,.08);
}
.qr-canvas img,
.qr-canvas canvas{
  display:block;
  max-width:100%;
  height:auto;
}

/* QR rendering fix */
.qr-canvas{
  width:290px;
  min-height:290px;
  margin:0 auto;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--cw-border);
  border-radius:18px;
  box-shadow:0 12px 30px rgba(31,27,52,.08);
  overflow:hidden;
}

.qr-canvas canvas,
.qr-canvas img,
.qr-image{
  display:block !important;
  width:260px !important;
  height:260px !important;
  max-width:100%;
  object-fit:contain;
  image-rendering:pixelated;
}

.qr-loading,
.qr-error{
  min-height:260px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--cw-muted);
  text-align:center;
}

.qr-error{
  color:var(--cw-danger);
}

.qr-error svg{
  width:32px;
  height:32px;
}

@media(max-width:575.98px){
  .qr-canvas{
    width:100%;
    min-height:250px;
  }

  .qr-canvas canvas,
  .qr-canvas img,
  .qr-image{
    width:230px !important;
    height:230px !important;
  }
}

/* ===== Complete Contacts Module ===== */
.contact-header{
  align-items:flex-start;
}

.contact-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.contact-header-actions .dropdown-item{
  display:flex;
  align-items:center;
  gap:9px;
}

.contact-header-actions .dropdown-item svg{
  width:17px;
  height:17px;
}

.contact-summary{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.summary-chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 13px;
  border-radius:999px;
  background:var(--cw-primary-soft);
  color:var(--cw-primary);
  font-size:13px;
}

.summary-chip.success{
  background:var(--cw-success-soft);
  color:var(--cw-success);
}

.summary-chip.muted{
  background:#f0f1f5;
  color:#707383;
}

.summary-chip svg{
  width:16px;
  height:16px;
}

.contact-filter-left{
  flex:1 1 auto;
}

.contact-filter-left .search-box{
  flex:1 1 290px;
}

.contact-table .checkbox-column{
  width:42px;
  min-width:42px;
  text-align:center;
}

.contact-identity{
  display:flex;
  align-items:center;
  gap:12px;
}

.contact-avatar{
  width:40px;
  height:40px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:linear-gradient(135deg,#ebe6ff,#f8e9f3);
  color:var(--cw-primary);
  font-weight:800;
}

.group-badge{
  display:inline-flex;
  padding:4px 8px;
  margin:2px;
  border-radius:999px;
  background:#f0edff;
  color:#6244d9;
  font-size:11px;
  font-weight:700;
}

.bulk-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
  padding:12px 14px;
  border-radius:15px;
  background:#f4f1ff;
  border:1px solid #e5ddff;
}

.bulk-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.group-checkbox-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  padding:12px;
  background:#fafafe;
  border:1px solid var(--cw-border);
  border-radius:14px;
}

.group-check-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--cw-border);
  cursor:pointer;
}

.group-color{
  width:10px;
  height:10px;
  border-radius:50%;
  flex:0 0 auto;
}

.group-inline-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:10px;
  padding:14px;
  border:1px solid var(--cw-border);
  border-radius:16px;
  background:#fafafe;
}

.group-list{
  display:grid;
  gap:10px;
}

.group-list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px;
  border:1px solid var(--cw-border);
  border-radius:14px;
}

.group-avatar{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#fff;
}

.group-avatar svg{
  width:19px;
  height:19px;
}

.import-dropzone{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:22px;
  text-align:center;
  border:2px dashed var(--cw-border);
  border-radius:18px;
  background:#fafafe;
}

.import-dropzone > svg{
  width:36px;
  height:36px;
  color:var(--cw-primary);
}

.check-result-grid,
.import-result-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px;
}

.import-result-grid{
  grid-template-columns:repeat(4,1fr);
}

.check-result-grid > div,
.import-result-grid > div{
  padding:14px 8px;
  border-radius:14px;
  background:#f7f7fb;
  text-align:center;
}

.check-result-grid strong,
.import-result-grid strong{
  display:block;
  font-size:22px;
}

.check-result-grid span,
.import-result-grid span{
  display:block;
  margin-top:4px;
  color:var(--cw-muted);
  font-size:12px;
}

.contact-mobile-card .data-card-header{
  align-items:center;
}

@media(max-width:991.98px){
  .contact-header-actions{
    width:100%;
    justify-content:flex-start;
  }

  .contact-header-actions .btn{
    flex:1 1 auto;
  }
}

@media(max-width:767.98px){
  .contact-toolbar,
  .contact-filter-left{
    align-items:stretch;
  }

  .contact-filter-left{
    width:100%;
  }

  .contact-filter-left .filter-select{
    flex:1 1 160px;
  }

  .bulk-bar{
    align-items:flex-start;
    flex-direction:column;
  }

  .bulk-actions{
    width:100%;
  }

  .bulk-actions .btn{
    flex:1 1 auto;
  }

  .group-checkbox-grid{
    grid-template-columns:1fr;
  }

  .group-inline-form{
    grid-template-columns:1fr auto;
  }

  .group-inline-form .btn{
    grid-column:1/-1;
  }
}

@media(max-width:575.98px){
  .contact-header-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .contact-header-actions .btn,
  .contact-header-actions .dropdown{
    width:100%;
  }

  .contact-header-actions .dropdown .btn{
    width:100%;
  }

  .contact-summary{
    display:grid;
    grid-template-columns:1fr;
  }

  .summary-chip{
    justify-content:center;
  }

  .check-result-grid,
  .import-result-grid{
    grid-template-columns:1fr 1fr;
  }
}

/* ===== Message group sending ===== */
.message-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.message-tabs{
  gap:8px;
  margin-bottom:18px;
  padding:6px;
  width:max-content;
  max-width:100%;
  border-radius:14px;
  background:#f4f4f8;
}

.message-tabs .nav-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:10px;
  color:var(--cw-muted);
  font-weight:700;
}

.message-tabs .nav-link.active{
  color:var(--cw-primary);
  background:#fff;
  box-shadow:0 5px 14px rgba(31,27,52,.07);
}

.message-tabs svg{
  width:17px;
  height:17px;
}

.message-variable-help{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:9px;
  font-size:12px;
  color:var(--cw-muted);
}

.message-variable-help button{
  border:1px solid var(--cw-border);
  border-radius:999px;
  padding:4px 8px;
  color:var(--cw-primary);
  background:#fff;
  font-family:monospace;
}

.message-variable-help button:hover{
  background:var(--cw-primary-soft);
}

.message-preview{
  padding:14px;
  border:1px solid var(--cw-border);
  border-radius:16px;
  background:#f7f8fa;
}

.message-preview-title{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:10px;
  color:var(--cw-muted);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
}

.message-preview-title svg{
  width:16px;
  height:16px;
}

.message-preview-bubble{
  max-width:520px;
  margin-left:auto;
  padding:12px 14px;
  white-space:pre-wrap;
  border-radius:15px 15px 4px 15px;
  background:#dcf8c6;
  box-shadow:0 5px 14px rgba(31,27,52,.06);
}

.batch-result-grid,
.batch-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.batch-result-grid > div,
.batch-summary > div{
  padding:14px;
  text-align:center;
  border-radius:14px;
  background:#f7f7fb;
}

.batch-result-grid strong,
.batch-summary strong{
  display:block;
  font-size:24px;
}

.batch-result-grid span,
.batch-summary span{
  display:block;
  margin-top:4px;
  color:var(--cw-muted);
  font-size:12px;
}

@media(max-width:991.98px){
  .message-header-actions{
    width:100%;
    justify-content:flex-start;
  }

  .message-header-actions .btn{
    flex:1 1 auto;
  }
}

@media(max-width:575.98px){
  .message-header-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .message-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }

  .message-tabs .nav-link{
    justify-content:center;
    width:100%;
  }

  .batch-result-grid,
  .batch-summary{
    grid-template-columns:1fr;
  }
}

/* ===== API Documentation ===== */
.api-docs-page{
  display:grid;
  gap:20px;
}

.api-docs-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  gap:22px;
  align-items:center;
  padding:28px;
  border-radius:24px;
  color:#fff;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 17rem),
    linear-gradient(135deg,#6747ec,#8d62f7 55%,#ad72ef);
  box-shadow:0 18px 42px rgba(103,71,236,.22);
}

.api-docs-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.api-docs-kicker svg{
  width:15px;
  height:15px;
}

.api-docs-hero h2{
  margin:0;
  max-width:660px;
  font-size:clamp(28px,4vw,44px);
  font-weight:800;
  letter-spacing:-.035em;
}

.api-docs-hero p{
  max-width:680px;
  margin:14px 0 0;
  color:rgba(255,255,255,.82);
  font-size:15px;
  line-height:1.7;
}

.api-docs-hero-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  padding:15px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:rgba(25,18,58,.22);
  backdrop-filter:blur(12px);
}

.api-docs-hero-card span{
  grid-column:1/-1;
  color:rgba(255,255,255,.72);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.api-docs-hero-card code{
  min-width:0;
  overflow:hidden;
  color:#fff;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.api-docs-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:20px;
  align-items:start;
}

.api-docs-sidebar{
  position:sticky;
  top:112px;
  display:grid;
  gap:7px;
  padding:16px;
  border:1px solid var(--cw-border);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--cw-shadow);
}

.api-docs-sidebar-title{
  padding:4px 8px 9px;
  color:var(--cw-muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.api-endpoint-nav{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:9px;
  align-items:center;
  width:100%;
  padding:10px;
  border:0;
  border-radius:12px;
  color:#595b68;
  background:transparent;
  text-align:left;
  font-weight:700;
  transition:.16s ease;
}

.api-endpoint-nav:hover,
.api-endpoint-nav.active{
  color:var(--cw-primary);
  background:var(--cw-primary-soft);
}

.method-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-width:43px;
  padding:4px 7px;
  border-radius:7px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.03em;
}

.method-badge.post{
  color:#805300;
  background:#fff2cf;
}

.method-badge.get{
  color:#08734d;
  background:#dff8eb;
}

.api-docs-sidebar-note{
  display:flex;
  gap:10px;
  margin-top:10px;
  padding:12px;
  border-radius:13px;
  color:#675b40;
  background:#fff8e8;
}

.api-docs-sidebar-note svg{
  width:17px;
  height:17px;
  flex:0 0 auto;
}

.api-docs-sidebar-note strong,
.api-docs-sidebar-note span{
  display:block;
}

.api-docs-sidebar-note span{
  margin-top:3px;
  font-size:11px;
  line-height:1.5;
}

.api-docs-content{
  min-width:0;
}

.api-config-card{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:14px;
  margin-bottom:20px;
  padding:17px;
  border:1px solid var(--cw-border);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--cw-shadow);
}

.api-config-group label{
  display:block;
  margin-bottom:7px;
  font-size:12px;
  font-weight:800;
}

.api-config-group small{
  display:block;
  margin-top:6px;
  color:var(--cw-muted);
  font-size:11px;
  line-height:1.5;
}

.api-config-input{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}

.api-endpoint-panel{
  display:none;
  padding:24px;
  border:1px solid var(--cw-border);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--cw-shadow);
}

.api-endpoint-panel.active{
  display:block;
}

.api-endpoint-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
  padding-bottom:20px;
  border-bottom:1px solid #f0f1f5;
}

.api-endpoint-title-row{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:9px;
}

.api-endpoint-title-row code{
  color:#525462;
  font-size:13px;
}

.api-endpoint-heading h3{
  margin:0;
  font-size:23px;
}

.api-endpoint-heading p{
  margin:7px 0 0;
  color:var(--cw-muted);
  line-height:1.6;
}

.api-doc-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
  gap:20px;
  margin-bottom:22px;
}

.api-doc-grid h4{
  margin:0 0 10px;
  font-size:14px;
}

.api-param-table{
  border:1px solid var(--cw-border);
  border-radius:14px;
  overflow:hidden;
}

.api-param-row{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:14px;
  padding:12px 14px;
  border-bottom:1px solid #f0f1f5;
}

.api-param-row:last-child{
  border-bottom:0;
}

.api-param-row > div{
  display:flex;
  align-items:center;
  gap:7px;
}

.api-param-row > span{
  color:var(--cw-muted);
  font-size:13px;
}

.required-dot,
.optional-dot{
  display:inline-flex;
  padding:3px 6px;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
}

.required-dot{
  color:#bd3b50;
  background:#fff0f3;
}

.optional-dot{
  color:#6f7280;
  background:#f0f1f5;
}

.api-response{
  min-height:100%;
  margin:0;
  padding:16px;
  overflow:auto;
  border-radius:14px;
  color:#d8e6ff;
  background:#15151d;
  font-size:12px;
  line-height:1.65;
}

.api-info-box{
  display:flex;
  gap:10px;
  padding:14px;
  border-radius:14px;
  color:#5d5f6b;
  background:#f6f6fa;
  line-height:1.6;
}

.api-info-box svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.api-id-input-row{
  max-width:480px;
  margin-bottom:20px;
}

.api-id-input-row label{
  display:block;
  margin-bottom:7px;
  font-size:12px;
  font-weight:800;
}

.api-code-section{
  overflow:hidden;
  border:1px solid #292934;
  border-radius:17px;
  background:#17171f;
}

.api-code-tabs{
  display:flex;
  gap:4px;
  padding:8px;
  overflow-x:auto;
  border-bottom:1px solid #292934;
  background:#1e1e28;
}

.api-code-tabs button{
  padding:7px 11px;
  border:0;
  border-radius:8px;
  color:#9fa2b4;
  background:transparent;
  font-size:12px;
  font-weight:800;
}

.api-code-tabs button.active{
  color:#fff;
  background:#343445;
}

.api-code-panel{
  display:none;
}

.api-code-panel.active{
  display:block;
}

.api-code-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px 0;
  color:#777b8e;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}

.api-code-toolbar button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border:1px solid #3a3a48;
  border-radius:8px;
  color:#c7cad8;
  background:#252530;
}

.api-code-toolbar button.copied{
  color:#7ee2b8;
  border-color:#275c49;
}

.api-code-toolbar svg{
  width:14px;
  height:14px;
}

.api-code-panel pre{
  min-height:270px;
  max-height:520px;
  margin:0;
  padding:14px;
  overflow:auto;
  color:#d9e7ff;
  font-size:12px;
  line-height:1.65;
}

@media(max-width:1199.98px){
  .api-config-card{
    grid-template-columns:1fr 1fr;
  }

  .api-config-group:first-child{
    grid-column:1/-1;
  }

  .api-doc-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:991.98px){
  .api-docs-hero{
    grid-template-columns:1fr;
  }

  .api-docs-layout{
    grid-template-columns:1fr;
  }

  .api-docs-sidebar{
    position:static;
    display:flex;
    overflow-x:auto;
  }

  .api-docs-sidebar-title,
  .api-docs-sidebar-note{
    display:none;
  }

  .api-endpoint-nav{
    grid-template-columns:auto auto;
    width:max-content;
    flex:0 0 auto;
  }
}

@media(max-width:767.98px){
  .api-docs-hero,
  .api-endpoint-panel{
    padding:18px;
    border-radius:18px;
  }

  .api-config-card{
    grid-template-columns:1fr;
  }

  .api-config-group:first-child{
    grid-column:auto;
  }

  .api-endpoint-heading{
    flex-direction:column;
  }

  .api-endpoint-heading .btn{
    width:100%;
  }

  .api-param-row{
    grid-template-columns:1fr;
    gap:7px;
  }

  .api-code-panel pre{
    min-height:230px;
  }
}

@media(max-width:575.98px){
  .api-docs-hero-card{
    grid-template-columns:1fr;
  }

  .api-docs-hero-card .btn{
    width:100%;
  }
}

/* ===== Message Templates + Campaigns ===== */
.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.template-card{display:flex;flex-direction:column;min-width:0;padding:17px;border:1px solid var(--cw-border);border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(31,27,52,.05);transition:.18s ease}
.template-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(31,27,52,.09)}
.template-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.template-category{display:inline-flex;padding:5px 9px;border-radius:999px;color:var(--cw-primary);background:var(--cw-primary-soft);font-size:11px;font-weight:800}
.template-star{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;color:#a7a9b5;background:#f7f7fa}
.template-star.active{color:#e6a400;background:#fff6d9}
.template-star svg{width:17px;height:17px}
.template-card h4{margin:15px 0 8px;font-size:17px}
.template-card p{display:-webkit-box;min-height:76px;margin:0;overflow:hidden;color:var(--cw-muted);white-space:pre-wrap;-webkit-line-clamp:4;-webkit-box-orient:vertical;line-height:1.55}
.template-card-meta{margin-top:auto;padding-top:14px;color:var(--cw-muted);font-size:11px}
.template-card-meta span{display:inline-flex;align-items:center;gap:6px}
.template-card-meta svg{width:14px;height:14px}
.template-card-actions{display:flex;gap:7px;margin-top:12px}
.template-card-actions .btn:first-child{flex:1 1 auto}
.template-empty{grid-column:1/-1}
.favorite-switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.favorite-switch span{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.favorite-switch svg{width:17px;height:17px}

.campaign-page{display:grid;gap:18px}
.campaign-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px;border-radius:22px;color:#fff;background:radial-gradient(circle at 84% 20%,rgba(255,255,255,.18),transparent 13rem),linear-gradient(135deg,#5f43db,#8b5df4 55%,#b16fec);box-shadow:0 18px 40px rgba(95,67,219,.21)}
.campaign-kicker{display:inline-flex;align-items:center;gap:7px;margin-bottom:8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.campaign-kicker svg{width:16px;height:16px}
.campaign-hero h2{margin:0;font-size:30px}
.campaign-hero p{margin:8px 0 0;color:rgba(255,255,255,.78)}
.campaign-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campaign-form-section{padding:17px;border:1px solid var(--cw-border);border-radius:17px;background:#fff}
.campaign-form-section h6{display:flex;align-items:center;gap:9px;margin:0 0 16px;font-size:15px}
.campaign-form-section h6>span{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;color:#fff;background:var(--cw-primary);font-size:12px}
.campaign-schedule-section{grid-column:1/-1}
.campaign-check{display:flex;align-items:flex-start;gap:9px;padding:11px;border-radius:12px;background:#f7f7fb}
.schedule-type-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.schedule-choice{position:relative;cursor:pointer}
.schedule-choice input{position:absolute;opacity:0}
.schedule-choice>span{display:flex;flex-direction:column;gap:5px;min-height:115px;padding:14px;border:1px solid var(--cw-border);border-radius:14px;background:#fff;transition:.16s ease}
.schedule-choice input:checked+span{border-color:var(--cw-primary);background:var(--cw-primary-soft);box-shadow:0 0 0 3px rgba(111,78,246,.09)}
.schedule-choice svg{width:21px;height:21px;color:var(--cw-primary)}
.schedule-choice strong{margin-top:4px}
.schedule-choice small{color:var(--cw-muted);line-height:1.4}
.schedule-fields{padding:14px;border-radius:14px;background:#f8f8fb}
@media(max-width:1199.98px){.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.schedule-type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:991.98px){.campaign-form-grid{grid-template-columns:1fr}.campaign-schedule-section{grid-column:auto}}
@media(max-width:767.98px){.template-grid{grid-template-columns:1fr}.campaign-hero{align-items:flex-start;flex-direction:column}.campaign-hero .btn{width:100%}}
@media(max-width:575.98px){.schedule-type-grid{grid-template-columns:1fr}.schedule-choice>span{min-height:unset}}

/* ===== Unified CandyWA UI System ===== */
:root{
  --cw-primary:#6f4ef6;
  --cw-primary-hover:#5d3be8;
  --cw-primary-soft:#f1edff;
  --cw-success:#22a06b;
  --cw-success-soft:#e9f8f1;
  --cw-danger:#dc4c64;
  --cw-danger-soft:#fff0f3;
  --cw-warning:#d99800;
  --cw-warning-soft:#fff6dc;
  --cw-border:#e7e8ef;
  --cw-muted:#777b8d;
  --cw-text:#252633;
  --cw-bg:#f7f7fb;
  --cw-surface:#fff;
  --cw-radius-sm:10px;
  --cw-radius-md:14px;
  --cw-radius-lg:20px;
  --cw-shadow:0 12px 32px rgba(31,27,52,.07);
}

body{
  color:var(--cw-text);
  background:var(--cw-bg);
}

.panel,
.modal-content,
.api-config-card,
.api-endpoint-panel,
.template-card,
.data-card{
  border:1px solid var(--cw-border);
  background:var(--cw-surface);
  box-shadow:var(--cw-shadow);
}

.panel{border-radius:var(--cw-radius-lg)}
.panel-header{gap:16px;margin-bottom:18px}
.panel-header h3,.modal-title{letter-spacing:-.015em}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  border-radius:var(--cw-radius-sm);
  font-weight:700;
}

.btn-sm{min-height:34px}
.btn-primary{border-color:var(--cw-primary);background:var(--cw-primary)}
.btn-primary:hover,.btn-primary:focus{border-color:var(--cw-primary-hover);background:var(--cw-primary-hover)}

.form-label{
  margin-bottom:7px;
  color:#4f5260;
  font-size:12px;
  font-weight:800;
}

.form-control,.form-select{
  min-height:44px;
  border-color:var(--cw-border);
  border-radius:var(--cw-radius-sm);
  background:#fff;
  box-shadow:none;
}

textarea.form-control{min-height:auto}

.form-control:focus,.form-select:focus{
  border-color:rgba(111,78,246,.65);
  box-shadow:0 0 0 .22rem rgba(111,78,246,.12);
}

.form-control.is-valid,.form-select.is-valid{
  border-color:var(--cw-success);
  background-color:#fff;
}

.form-control.is-invalid,.form-select.is-invalid{
  border-color:var(--cw-danger);
  background-color:#fff;
}

.invalid-feedback{
  margin-top:6px;
  color:var(--cw-danger);
  font-size:11px;
}

.modal-header,.modal-footer{border-color:#eff0f4}
.modal-header{padding:18px 20px}
.modal-body{padding:20px}
.modal-footer{padding:14px 20px 18px}

.toolbar{
  gap:12px;
  margin-bottom:16px;
  padding:12px;
  border:1px solid var(--cw-border);
  border-radius:var(--cw-radius-md);
  background:#fbfbfd;
}

.search-box{min-height:44px}
.table{margin-bottom:0}

.table thead th{
  padding-top:13px;
  padding-bottom:13px;
  color:#6b6e7d;
  background:#fafafe;
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.table tbody td{padding-top:14px;padding-bottom:14px}

.badge{
  border-radius:999px;
  padding:.48em .75em;
  font-weight:800;
}

.section-icon{
  border-radius:13px;
  background:var(--cw-primary-soft);
  color:var(--cw-primary);
}

.sidebar-nav{display:grid;gap:6px}

.sidebar-group{
  display:grid;
  gap:5px;
}

.sidebar-group-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:42px;
  padding:9px 11px;
  border:0;
  border-radius:11px;
  color:#666978;
  background:transparent;
  font-weight:800;
  text-align:left;
}

.sidebar-group-toggle:hover{
  color:var(--cw-primary);
  background:var(--cw-primary-soft);
}

.sidebar-group-toggle>span{
  display:flex;
  align-items:center;
  gap:10px;
}

.sidebar-group-toggle svg{
  width:18px;
  height:18px;
}

.sidebar-group-chevron{
  transition:transform .18s ease;
}

.sidebar-group.open .sidebar-group-chevron{
  transform:rotate(180deg);
}

.sidebar-group-menu{
  display:none;
  gap:4px;
  padding-left:8px;
}

.sidebar-group.open .sidebar-group-menu{
  display:grid;
}

.sidebar-group-menu .nav-link{
  min-height:38px;
  padding-left:13px;
}

.sidebar-group-menu .nav-link span{
  font-size:13px;
}

.empty-state{
  padding:34px 18px;
  border:1px dashed var(--cw-border);
  border-radius:var(--cw-radius-md);
  color:var(--cw-muted);
  background:#fcfcfe;
  text-align:center;
}

.was-validated .form-control:valid,
.was-validated .form-select:valid{
  border-color:var(--cw-success);
}

.was-validated .form-control:invalid,
.was-validated .form-select:invalid{
  border-color:var(--cw-danger);
}

@media(max-width:767.98px){
  .panel{border-radius:16px}
  .toolbar{padding:10px}
  .modal-body{padding:16px}
  .btn{min-height:42px}
}

/* ===== Compact Toolbar / Filter Layout ===== */
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

.toolbar-left,
.toolbar-right{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.toolbar-left{
  flex:1 1 auto;
  min-width:0;
}

.toolbar-right{
  flex:0 0 auto;
  margin-left:auto;
}

.toolbar .search-box{
  flex:1 1 260px;
  min-width:220px;
  max-width:420px;
}

.toolbar .search-box .form-control{
  width:100%;
}

.toolbar .filter-select{
  flex:0 0 180px;
  width:180px;
  min-width:160px;
  max-width:220px;
}

.toolbar .per-page-select{
  flex:0 0 84px;
  width:84px;
  min-width:84px;
  max-width:84px;
}

.toolbar .btn{
  flex:0 0 auto;
  white-space:nowrap;
}

.toolbar > .form-control,
.toolbar > .form-select{
  width:auto;
}

@media(min-width:992px){
  .toolbar{
    flex-wrap:nowrap;
  }

  .toolbar-left,
  .toolbar-right{
    flex-wrap:nowrap;
  }
}

@media(max-width:991.98px){
  .toolbar .search-box{
    flex:1 1 100%;
    max-width:none;
  }

  .toolbar .filter-select{
    flex:1 1 180px;
    width:auto;
    max-width:none;
  }

  .toolbar-right{
    margin-left:0;
  }
}

@media(max-width:575.98px){
  .toolbar{
    align-items:stretch;
  }

  .toolbar-left,
  .toolbar-right{
    width:100%;
    align-items:stretch;
  }

  .toolbar .search-box,
  .toolbar .filter-select{
    flex:1 1 100%;
    width:100%;
    min-width:0;
    max-width:none;
  }

  .toolbar .per-page-select{
    flex:0 0 82px;
    width:82px;
    min-width:82px;
  }

  .toolbar-right .btn{
    flex:1 1 auto;
  }
}

/* Compact specific page filters */
.contact-toolbar .contact-filter-left,
.contact-filter-left{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  flex:1 1 auto;
}

.api-docs-page .toolbar,
.template-page .toolbar,
.campaign-page .toolbar,
.message-page .toolbar,
.contact-page .toolbar{
  padding:10px 12px;
}

.template-page .toolbar .search-box{
  flex-basis:260px;
}

.template-page .toolbar .filter-select{
  flex-basis:170px;
  width:170px;
}

.message-page .toolbar .filter-select,
.campaign-page .toolbar .filter-select,
.contact-page .toolbar .filter-select{
  width:170px;
  flex-basis:170px;
}

/* ===== CandyWA Inbox ===== */
.inbox-page{
  display:grid;
  gap:16px;
}

.inbox-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:22px 24px;
  border-radius:20px;
  color:#fff;
  background:
    radial-gradient(circle at 85% 20%,rgba(255,255,255,.18),transparent 14rem),
    linear-gradient(135deg,#4f35c9,#7655e9 58%,#9c66ea);
  box-shadow:0 16px 36px rgba(79,53,201,.2);
}

.inbox-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:7px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.inbox-kicker svg{
  width:16px;
  height:16px;
}

.inbox-header h2{
  margin:0;
  font-size:29px;
}

.inbox-header p{
  margin:7px 0 0;
  color:rgba(255,255,255,.78);
}

.inbox-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.inbox-live-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(24,17,62,.22);
  font-size:12px;
  font-weight:700;
}

.live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 0 4px rgba(74,222,128,.15);
}

.inbox-shell{
  display:grid;
  grid-template-columns:minmax(310px,360px) minmax(0,1fr);
  min-height:650px;
  overflow:hidden;
  border:1px solid var(--cw-border);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--cw-shadow);
}

.conversation-pane{
  display:flex;
  flex-direction:column;
  min-width:0;
  border-right:1px solid var(--cw-border);
  background:#fcfcfe;
}

.conversation-toolbar{
  display:grid;
  gap:10px;
  padding:14px;
  border-bottom:1px solid var(--cw-border);
}

.conversation-toolbar .search-box{
  max-width:none;
}

.conversation-filters{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.conversation-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;
  color:var(--cw-muted);
  font-size:11px;
}

.unread-pill{
  padding:4px 8px;
  border-radius:999px;
  color:var(--cw-primary);
  background:var(--cw-primary-soft);
}

.conversation-list{
  flex:1;
  min-height:0;
  overflow-y:auto;
}

.conversation-item{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:11px;
  width:100%;
  padding:13px 14px;
  border:0;
  border-bottom:1px solid #f0f1f5;
  color:inherit;
  background:transparent;
  text-align:left;
}

.conversation-item:hover,
.conversation-item.active{
  background:#f4f1ff;
}

.conversation-avatar,
.chat-avatar{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:14px;
  color:var(--cw-primary);
  background:linear-gradient(135deg,#ebe6ff,#f8e9f3);
  font-weight:900;
}

.conversation-main,
.conversation-top,
.conversation-bottom{
  min-width:0;
}

.conversation-top,
.conversation-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.conversation-top strong,
.conversation-preview{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.conversation-top time{
  flex:0 0 auto;
  color:var(--cw-muted);
  font-size:10px;
}

.conversation-bottom{
  margin-top:4px;
}

.conversation-preview{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--cw-muted);
  font-size:12px;
}

.conversation-preview svg{
  width:13px;
  height:13px;
  flex:0 0 auto;
}

.conversation-unread{
  display:grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  color:#fff;
  background:var(--cw-primary);
  font-size:10px;
  font-weight:900;
}

.conversation-device{
  display:block;
  margin-top:5px;
  color:#989aa8;
  font-size:10px;
}

.chat-pane{
  position:relative;
  min-width:0;
  background:
    linear-gradient(rgba(248,248,251,.94),rgba(248,248,251,.94)),
    radial-gradient(circle at 20% 20%,#ebe8f8 0 2px,transparent 3px);
  background-size:auto,24px 24px;
}

.chat-empty{
  display:grid;
  place-items:center;
  align-content:center;
  min-height:650px;
  padding:30px;
  text-align:center;
}

.chat-empty-icon{
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  margin-bottom:16px;
  border-radius:22px;
  color:var(--cw-primary);
  background:var(--cw-primary-soft);
}

.chat-empty-icon svg{
  width:31px;
  height:31px;
}

.chat-empty h3{
  margin:0;
}

.chat-empty p{
  max-width:450px;
  margin:8px 0 0;
  color:var(--cw-muted);
  line-height:1.6;
}

.active-chat{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  height:650px;
}

.chat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 16px;
  border-bottom:1px solid var(--cw-border);
  background:rgba(255,255,255,.96);
}

.chat-contact{
  display:flex;
  align-items:center;
  gap:11px;
}

.chat-contact strong,
.chat-contact span{
  display:block;
}

.chat-contact span{
  margin-top:3px;
  color:var(--cw-muted);
  font-size:11px;
}

.chat-actions{
  display:flex;
  gap:7px;
}

.chat-messages{
  min-height:0;
  padding:18px;
  overflow-y:auto;
}

.message-row{
  display:flex;
  margin-bottom:9px;
}

.message-row.outgoing{
  justify-content:flex-end;
}

.message-bubble{
  max-width:min(76%,620px);
  padding:10px 12px 7px;
  border-radius:15px 15px 15px 4px;
  background:#fff;
  box-shadow:0 4px 13px rgba(31,27,52,.07);
}

.message-row.outgoing .message-bubble{
  border-radius:15px 15px 4px 15px;
  background:#dcf8c6;
}

.message-text{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:1.55;
}

.message-time{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-top:5px;
  color:#8d909d;
  font-size:9px;
}

.message-media-meta{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:220px;
  margin-bottom:7px;
  padding:10px;
  border-radius:11px;
  background:rgba(0,0,0,.045);
}

.message-media-meta svg{
  width:22px;
  height:22px;
}

.message-media-meta strong,
.message-media-meta span{
  display:block;
}

.message-media-meta span{
  margin-top:2px;
  color:var(--cw-muted);
  font-size:10px;
}

.chat-composer{
  padding:12px 14px;
  border-top:1px solid var(--cw-border);
  background:#fff;
}

.composer-box{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:end;
}

.chat-composer textarea{
  max-height:130px;
  resize:none;
}

.chat-composer > small{
  display:block;
  margin-top:5px;
  color:var(--cw-muted);
  font-size:10px;
}

@media(max-width:991.98px){
  .inbox-shell{
    grid-template-columns:300px minmax(0,1fr);
  }
}

@media(max-width:767.98px){
  .inbox-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .inbox-header-actions{
    width:100%;
  }

  .inbox-header-actions .btn{
    flex:1;
  }

  .inbox-shell{
    display:block;
    min-height:auto;
  }

  .conversation-pane{
    min-height:520px;
    border-right:0;
  }

  .chat-pane{
    position:fixed;
    z-index:1050;
    inset:0;
    display:none;
  }

  .chat-pane:has(.active-chat:not(.d-none)){
    display:block;
  }

  .active-chat{
    height:100dvh;
  }

  .chat-header::before{
    content:'←';
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:10px;
    background:#f1f1f5;
    cursor:pointer;
  }

  .message-bubble{
    max-width:86%;
  }
}

/* ===== Auto Reply + Webhook ===== */
.automation-page{display:grid;gap:18px}
.automation-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px;border-radius:20px;color:#fff;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.17),transparent 14rem),linear-gradient(135deg,#5b3fd4,#7e58ec 60%,#9d68e8);box-shadow:0 16px 36px rgba(91,63,212,.2)}
.automation-kicker{display:inline-flex;align-items:center;gap:7px;margin-bottom:7px;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.automation-kicker svg{width:16px;height:16px}
.automation-hero h2{margin:0}
.automation-hero p{margin:7px 0 0;color:rgba(255,255,255,.8)}
.compact-tabs{display:flex;gap:6px;margin-bottom:16px;padding:6px;border-radius:12px;background:#f3f3f8}
.compact-tabs button{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:0;border-radius:9px;color:var(--cw-muted);background:transparent;font-weight:800}
.compact-tabs button.active{color:var(--cw-primary);background:#fff;box-shadow:0 4px 12px rgba(31,27,52,.07)}
.compact-tabs svg{width:16px;height:16px}
.automation-rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.automation-rule-card,.webhook-card{padding:16px;border:1px solid var(--cw-border);border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(31,27,52,.05)}
.automation-rule-card.muted,.webhook-card.muted{opacity:.62}
.automation-rule-head,.webhook-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.automation-rule-head>div,.webhook-card-head>div{display:flex;align-items:center;gap:8px}
.automation-priority{display:inline-flex;padding:4px 7px;border-radius:8px;color:var(--cw-primary);background:var(--cw-primary-soft);font-size:10px;font-weight:900}
.automation-condition{display:flex;align-items:center;gap:8px;margin:13px 0}
.automation-condition>span{padding:4px 7px;border-radius:7px;color:#8b6300;background:#fff4cf;font-size:10px;font-weight:900;text-transform:uppercase}
.automation-condition code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.automation-rule-card p{min-height:70px;margin:0;color:var(--cw-muted);white-space:pre-wrap;line-height:1.55}
.automation-rule-meta,.webhook-meta{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:13px;color:var(--cw-muted);font-size:10px}
.automation-rule-meta span,.webhook-meta span{display:inline-flex;align-items:center;gap:5px}
.automation-rule-meta svg,.webhook-meta svg{width:13px;height:13px}
.automation-rule-actions,.webhook-actions{display:flex;gap:7px;margin-top:13px}
.automation-rule-actions .btn:first-child{flex:1}
.weekday-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.weekday-grid label{cursor:pointer}
.weekday-grid input{position:absolute;opacity:0}
.weekday-grid span{display:grid;place-items:center;min-height:38px;border:1px solid var(--cw-border);border-radius:10px;background:#fff;font-size:11px;font-weight:800}
.weekday-grid input:checked+span{color:var(--cw-primary);border-color:var(--cw-primary);background:var(--cw-primary-soft)}
.automation-check{display:flex;align-items:center;gap:9px;padding:11px;border-radius:11px;background:#f7f7fb}
.switch{position:relative;display:inline-flex;width:42px;height:24px}
.switch input{position:absolute;opacity:0}
.switch span{position:absolute;inset:0;border-radius:999px;background:#d8dae3;transition:.16s}
.switch span::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:.16s}
.switch input:checked+span{background:var(--cw-primary)}
.switch input:checked+span::after{transform:translateX(18px)}

.webhook-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.webhook-status{width:9px;height:9px;border-radius:50%;background:#bbb}
.webhook-status.active{background:#22a06b;box-shadow:0 0 0 4px rgba(34,160,107,.12)}
.webhook-url{display:block;margin:12px 0;padding:10px;border-radius:10px;overflow:hidden;color:#4d5060;background:#f7f7fb;text-overflow:ellipsis;white-space:nowrap}
.webhook-events{display:flex;flex-wrap:wrap;gap:6px}
.webhook-events span{padding:4px 7px;border-radius:999px;color:var(--cw-primary);background:var(--cw-primary-soft);font-size:9px;font-weight:800}
.webhook-signature-info{display:flex;gap:11px;padding:14px;border-radius:13px;color:#575a68;background:#f7f7fb}
.webhook-signature-info svg{width:20px;height:20px;color:var(--cw-primary);flex:0 0 auto}
.webhook-signature-info p{margin:5px 0 0;color:var(--cw-muted)}
.event-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.event-grid label{cursor:pointer}
.event-grid input{position:absolute;opacity:0}
.event-grid span{display:block;padding:10px;border:1px solid var(--cw-border);border-radius:10px;background:#fff}
.event-grid input:checked+span{border-color:var(--cw-primary);background:var(--cw-primary-soft)}
.copy-secret-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:11px;border:1px solid var(--cw-border);border-radius:11px;background:#f8f8fb}
.copy-secret-box code{overflow-wrap:anywhere}

@media(max-width:1199.98px){.automation-rule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:991.98px){.webhook-grid{grid-template-columns:1fr}.event-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767.98px){.automation-hero{align-items:flex-start;flex-direction:column}.automation-hero .btn{width:100%}.automation-rule-grid{grid-template-columns:1fr}.weekday-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.webhook-actions{flex-wrap:wrap}}
@media(max-width:575.98px){.event-grid{grid-template-columns:1fr}}

/* ===== Safety, Analytics & Inbox CRM ===== */
.analytics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.analytics-card{display:flex;align-items:center;gap:13px;padding:16px;border:1px solid var(--cw-border);border-radius:16px;background:#fff;box-shadow:var(--cw-shadow)}
.analytics-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;color:var(--cw-primary);background:var(--cw-primary-soft)}
.analytics-card.success .analytics-icon{color:#16895c;background:#e7f8ef}.analytics-card.warning .analytics-icon{color:#ad7900;background:#fff4d7}.analytics-card.danger .analytics-icon{color:#cc4058;background:#fff0f3}
.analytics-card span,.analytics-card strong{display:block}.analytics-card span{color:var(--cw-muted);font-size:11px;font-weight:800}.analytics-card strong{margin-top:3px;font-size:24px}
.analytics-chart-wrap{height:320px}
.system-summary-list{display:grid;gap:8px}.system-summary-list a{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:9px;align-items:center;padding:11px;border-radius:11px;color:inherit;background:#f8f8fb;text-decoration:none}.system-summary-list svg{width:17px;height:17px;color:var(--cw-primary)}
.conversation-labels{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}.conversation-labels i{padding:2px 6px;border-radius:999px;color:var(--label-color);background:color-mix(in srgb,var(--label-color) 12%,white);font-size:8px;font-style:normal;font-weight:800}
.crm-label-grid{display:flex;flex-wrap:wrap;gap:8px}.crm-label-choice input{position:absolute;opacity:0}.crm-label-choice span{display:inline-flex;padding:7px 10px;border:1px solid var(--cw-border);border-radius:999px;cursor:pointer}.crm-label-choice input:checked+span{color:var(--label-color);border-color:var(--label-color);background:color-mix(in srgb,var(--label-color) 10%,white)}
.crm-add-label{padding:7px 10px;border:1px dashed var(--cw-border);border-radius:999px;background:#fff}.crm-note-list{display:grid;gap:8px}.crm-note{padding:11px;border-radius:11px;background:#fff8dd}.crm-note p{margin:0;white-space:pre-wrap}.crm-note small{display:block;margin-top:5px;color:var(--cw-muted)}
@media(max-width:1199.98px){.analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575.98px){.analytics-grid{grid-template-columns:1fr}.analytics-chart-wrap{height:260px}}

/* ===== Usage & Quota ===== */
.usage-page{display:grid;gap:16px}
.usage-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:23px 25px;border-radius:20px;color:#fff;background:radial-gradient(circle at 83% 15%,rgba(255,255,255,.18),transparent 14rem),linear-gradient(135deg,#4830bf,#7152e3 58%,#9b68eb);box-shadow:0 16px 36px rgba(72,48,191,.2)}
.usage-kicker{display:inline-flex;align-items:center;gap:7px;margin-bottom:7px;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.usage-kicker svg{width:16px;height:16px}
.usage-hero h2{margin:0}.usage-hero p{margin:7px 0 0;color:rgba(255,255,255,.8)}
.usage-plan{min-width:180px;padding:12px 15px;border-radius:14px;background:rgba(26,17,75,.24)}
.usage-plan span,.usage-plan strong,.usage-plan small{display:block}
.usage-plan span,.usage-plan small{color:rgba(255,255,255,.72);font-size:10px}.usage-plan strong{margin:3px 0;font-size:20px}
.usage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.usage-card{padding:15px;border:1px solid var(--cw-border);border-radius:16px;background:#fff;box-shadow:var(--cw-shadow)}
.usage-card.warning{border-color:#f0c75e}.usage-card.blocked{border-color:#e86a7f}
.usage-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.usage-card-head span,.usage-card-head strong{display:block}.usage-card-head>div>span{color:var(--cw-muted);font-size:11px;font-weight:800}.usage-card-head strong{margin-top:5px;font-size:19px}.usage-card-head strong small{color:var(--cw-muted);font-size:10px;font-weight:700}
.usage-percent{padding:5px 7px;border-radius:8px;color:var(--cw-primary);background:var(--cw-primary-soft);font-size:10px;font-weight:900}
.usage-card.warning .usage-percent{color:#9a6a00;background:#fff4d5}.usage-card.blocked .usage-percent{color:#c5304c;background:#fff0f3}
.usage-progress{height:8px;margin:14px 0 9px;overflow:hidden;border-radius:999px;background:#eeeef4}.usage-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6244d8,#9a6aeb)}
.usage-card.warning .usage-progress span{background:#e6a900}.usage-card.blocked .usage-progress span{background:#dc4962}
.usage-card-foot{display:flex;justify-content:space-between;gap:8px;color:var(--cw-muted);font-size:9px;text-transform:capitalize}
.usage-chart-wrap{height:320px}
.usage-alert-list{display:grid;gap:8px}
.usage-alert{display:grid;grid-template-columns:36px minmax(0,1fr);gap:9px;width:100%;padding:10px;border:0;border-radius:11px;color:inherit;background:#fff8dd;text-align:left}
.usage-alert.critical{background:#fff0f3}.usage-alert.read{opacity:.58}.usage-alert-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#a97800;background:#fff}.usage-alert.critical .usage-alert-icon{color:#cf3f58}
.usage-alert strong,.usage-alert small{display:block}.usage-alert small{margin-top:3px;color:var(--cw-muted);line-height:1.4}
@media(max-width:1199.98px){.usage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767.98px){.usage-hero{align-items:flex-start;flex-direction:column}.usage-plan{width:100%}}
@media(max-width:575.98px){.usage-grid{grid-template-columns:1fr}.usage-chart-wrap{height:260px}}

/* ===== Superadmin System Settings ===== */
.sidebar-section-label{
    margin:16px 12px 6px;
    color:#9692a5;
    font-size:9px;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.system-settings-page{
    display:grid;
    gap:16px;
}

.system-settings-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:23px 25px;
    border-radius:20px;
    color:#fff;
    background:
        radial-gradient(
            circle at 84% 18%,
            rgba(255,255,255,.18),
            transparent 15rem
        ),
        linear-gradient(135deg,#392694,#6948d8 58%,#9464e8);
    box-shadow:0 16px 38px rgba(57,38,148,.2);
}

.settings-kicker{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
}

.settings-kicker svg{
    width:15px;
    height:15px;
}

.system-settings-hero h2{
    margin:8px 0 5px;
}

.system-settings-hero p{
    max-width:650px;
    margin:0;
    color:rgba(255,255,255,.76);
}

.system-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 12px;
    border-radius:999px;
    background:rgba(20,13,61,.22);
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}

.system-badge svg{
    width:15px;
    height:15px;
}

.system-option-grid{
    display:grid;
    gap:9px;
}

.system-option{
    cursor:pointer;
}

.system-option input{
    position:absolute;
    opacity:0;
}

.system-option>span{
    display:grid;
    grid-template-columns:39px minmax(0,1fr);
    gap:10px;
    padding:11px;
    border:1px solid var(--cw-border);
    border-radius:12px;
    background:#fafafe;
    transition:.16s ease;
}

.system-option>span>svg{
    grid-row:1/3;
    align-self:center;
    width:19px;
    height:19px;
    color:var(--cw-primary);
}

.system-option strong,
.system-option small{
    display:block;
}

.system-option small{
    margin-top:2px;
    color:var(--cw-muted);
    line-height:1.4;
}

.system-option input:checked+span{
    border-color:var(--cw-primary);
    background:var(--cw-primary-soft);
    box-shadow:0 0 0 3px rgba(111,78,246,.08);
}

.system-option.danger input:checked+span{
    border-color:#dc4962;
    background:#fff0f3;
}

.system-option.danger input:checked+span>svg{
    color:#dc4962;
}

.settings-form-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin-top:18px;
}

.system-flow-card{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    padding:15px;
    border:1px solid var(--cw-border);
    border-radius:15px;
    color:var(--cw-muted);
    background:#fff;
    font-size:11px;
}

.system-flow-card>div{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--cw-text);
}

.system-flow-card svg{
    width:16px;
    height:16px;
    color:var(--cw-primary);
}

.system-flow-card>span{
    padding:6px 9px;
    border-radius:999px;
    background:#f4f2fb;
}

@media(max-width:767.98px){
    .system-settings-hero{
        align-items:flex-start;
        flex-direction:column;
    }

    .system-badge{
        white-space:normal;
    }

    .settings-form-actions{
        align-items:stretch;
        flex-direction:column-reverse;
    }

    .settings-form-actions .btn{
        width:100%;
    }

    .system-flow-card{
        align-items:stretch;
        flex-direction:column;
        text-align:center;
    }

    .system-flow-card>div{
        justify-content:center;
    }

    .system-flow-card>svg{
        align-self:center;
        transform:rotate(90deg);
    }
}


/* ================================================================
   CandyWA SaaS Dashboard UI Consistency
   Onboarding, Subscription, Usage, Superadmin and related pages
   ================================================================ */

.saas-dashboard-page{
    display:grid;
    gap:18px;
}

.dashboard-hero{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    min-height:220px;
    overflow:hidden;
    padding:28px 30px;
    border-radius:22px;
    color:#fff;
    background:
        radial-gradient(
            circle at 86% 16%,
            rgba(255,255,255,.18),
            transparent 17rem
        ),
        linear-gradient(
            135deg,
            #3c2798 0%,
            #6645d5 52%,
            #9363ea 100%
        );
    box-shadow:0 20px 48px rgba(66,42,160,.22);
}

.dashboard-hero::before{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    right:-130px;
    bottom:-180px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;
}

.dashboard-hero-content{
    position:relative;
    z-index:2;
    max-width:720px;
}

.dashboard-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 10px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    background:rgba(255,255,255,.09);
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.dashboard-eyebrow svg{
    width:14px;
    height:14px;
}

.dashboard-hero h1{
    margin:14px 0 8px;
    font-size:clamp(28px,3vw,42px);
    font-weight:900;
    letter-spacing:-.035em;
}

.dashboard-hero-content>p{
    max-width:680px;
    margin:0;
    color:rgba(255,255,255,.77);
    line-height:1.7;
}

.saas-side-card,
.saas-content-card{
    border:1px solid var(--cw-border);
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 28px rgba(31,27,52,.055);
}

.saas-side-card{
    padding:15px;
}

.saas-content-card{
    padding:20px;
}

.saas-side-card-head,
.saas-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
}

.saas-side-card-head{
    padding:5px 5px 15px;
}

.saas-side-card-head span,
.saas-card-heading>div>span,
.saas-section-header>div>span{
    color:var(--cw-primary);
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
}

.saas-side-card-head h3,
.saas-card-heading h2,
.saas-section-header h2{
    margin:5px 0 0;
    color:var(--cw-text);
    font-weight:900;
    letter-spacing:-.02em;
}

.saas-side-card-head h3{
    font-size:17px;
}

.saas-card-heading{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.saas-card-heading h2{
    font-size:20px;
}

.saas-card-heading p,
.saas-section-header p{
    margin:5px 0 0;
    color:var(--cw-muted);
    line-height:1.55;
}

.saas-card-icon{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:44px;
    height:44px;
    border-radius:13px;
    color:#fff;
    background:linear-gradient(135deg,#6444d9,#9365eb);
    box-shadow:0 9px 20px rgba(99,68,217,.2);
}

.saas-card-icon.soft{
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
    box-shadow:none;
}

.saas-card-icon.danger{
    color:#d63f5a;
    background:#fff0f3;
    box-shadow:none;
}

.saas-card-icon svg{
    width:19px;
    height:19px;
}

.status-badge,
.compact-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 9px;
    border-radius:999px;
    font-size:9px;
    font-weight:900;
    white-space:nowrap;
}

.status-badge svg{
    width:13px;
    height:13px;
}

.status-badge.success,
.compact-status.success{
    color:#16865a;
    background:#e8f8f0;
}

.status-badge.primary,
.compact-status.primary{
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
}

.status-badge.warning{
    color:#936800;
    background:#fff3cf;
}

.status-badge.danger{
    color:#cc3c56;
    background:#fff0f3;
}

.saas-form-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-top:19px;
    padding-top:16px;
    border-top:1px solid var(--cw-border);
}

.saas-form-footer>span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--cw-muted);
    font-size:10px;
}

.saas-form-footer>span svg{
    width:14px;
    height:14px;
    color:#27a36c;
}

.form-section-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin-top:18px;
}

.form-group-modern{
    min-width:0;
}

.form-group-modern.form-group-wide{
    grid-column:1/-1;
}

.form-group-modern>label{
    display:block;
    margin-bottom:7px;
    color:#4f4b5f;
    font-size:11px;
    font-weight:800;
}

.form-group-modern>label>span{
    color:#df4661;
}

.modern-input-wrap{
    position:relative;
}

.modern-input-wrap>svg{
    position:absolute;
    z-index:2;
    top:50%;
    left:13px;
    width:17px;
    height:17px;
    color:#9692a2;
    transform:translateY(-50%);
    pointer-events:none;
}

.modern-input-wrap .form-control,
.modern-input-wrap .form-select{
    min-height:46px;
    padding-left:40px;
}

/* Onboarding */
.onboarding-layout{
    display:grid;
    grid-template-columns:minmax(270px,320px) minmax(0,1fr);
    gap:18px;
    align-items:start;
}

.onboarding-step-card{
    position:sticky;
    top:82px;
}

.onboarding-step-list{
    display:grid;
    gap:7px;
}

.onboarding-step-item{
    display:grid;
    grid-template-columns:38px minmax(0,1fr) 18px;
    gap:10px;
    align-items:center;
    padding:10px;
    border:1px solid transparent;
    border-radius:12px;
    color:inherit;
    text-decoration:none;
    transition:.16s ease;
}

.onboarding-step-item:hover{
    border-color:var(--cw-border);
    background:#f8f7fc;
    transform:translateX(2px);
}

.step-number{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:11px;
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
    font-size:11px;
    font-weight:900;
}

.step-number svg{
    width:16px;
    height:16px;
}

.onboarding-step-item.done .step-number{
    color:#16865a;
    background:#e8f8f0;
}

.step-copy{
    min-width:0;
}

.step-copy strong,
.step-copy small{
    display:block;
}

.step-copy strong{
    font-size:12px;
}

.step-copy small{
    margin-top:2px;
    overflow:hidden;
    color:var(--cw-muted);
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.step-arrow{
    width:15px;
    height:15px;
    color:#aaa6b5;
}

.onboarding-step-item.done .step-arrow{
    color:#25a36d;
}

.onboarding-main{
    display:grid;
    min-width:0;
    gap:15px;
}

.onboarding-progress-summary{
    display:grid;
    grid-template-columns:auto minmax(150px,320px) auto;
    gap:12px;
    align-items:center;
    margin-top:22px;
}

.onboarding-progress-summary>div:first-child strong,
.onboarding-progress-summary>div:first-child span{
    display:block;
}

.onboarding-progress-summary>div:first-child strong{
    font-size:20px;
}

.onboarding-progress-summary>div:first-child span{
    color:rgba(255,255,255,.67);
    font-size:9px;
}

.onboarding-progress-summary>b{
    font-size:12px;
}

.onboarding-progress-track{
    height:8px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.18);
}

.onboarding-progress-track span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:#fff;
    box-shadow:0 0 12px rgba(255,255,255,.35);
}

.onboarding-hero-visual{
    position:relative;
    display:grid;
    place-items:center;
    flex:0 0 245px;
    min-height:160px;
}

.hero-visual-ring{
    position:absolute;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
}

.hero-visual-ring.ring-one{
    width:190px;
    height:190px;
}

.hero-visual-ring.ring-two{
    width:135px;
    height:135px;
}

.onboarding-hero-card{
    position:relative;
    z-index:2;
    width:190px;
    padding:16px;
    border:1px solid rgba(255,255,255,.17);
    border-radius:16px;
    background:rgba(255,255,255,.11);
    backdrop-filter:blur(15px);
    box-shadow:0 18px 40px rgba(20,13,65,.2);
}

.hero-card-icon{
    display:grid;
    place-items:center;
    width:39px;
    height:39px;
    margin-bottom:12px;
    border-radius:12px;
    color:#fff;
    background:rgba(255,255,255,.14);
}

.hero-card-icon svg{
    width:18px;
    height:18px;
}

.onboarding-hero-card small,
.onboarding-hero-card strong,
.onboarding-hero-card em{
    display:block;
}

.onboarding-hero-card small{
    color:rgba(255,255,255,.62);
    font-size:9px;
}

.onboarding-hero-card strong{
    margin:4px 0 8px;
    font-size:14px;
}

.onboarding-hero-card em{
    width:max-content;
    padding:4px 7px;
    border-radius:999px;
    color:#d9fff0;
    background:rgba(31,179,112,.22);
    font-size:8px;
    font-style:normal;
    font-weight:800;
}

.quick-start-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:17px;
}

.quick-start-card{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 17px;
    gap:10px;
    align-items:center;
    padding:12px;
    border:1px solid var(--cw-border);
    border-radius:13px;
    color:inherit;
    background:#fff;
    text-decoration:none;
    transition:.18s ease;
}

.quick-start-card:hover{
    border-color:rgba(111,78,246,.34);
    box-shadow:0 12px 28px rgba(52,39,110,.08);
    transform:translateY(-2px);
}

.quick-start-icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:12px;
}

.quick-start-icon svg{
    width:18px;
    height:18px;
}

.quick-start-icon.purple{
    color:#714ee5;
    background:#f0ecff;
}

.quick-start-icon.blue{
    color:#3478d5;
    background:#ebf4ff;
}

.quick-start-icon.green{
    color:#1b9562;
    background:#e8f8f0;
}

.quick-start-icon.orange{
    color:#b66a12;
    background:#fff3e4;
}

.quick-start-card strong,
.quick-start-card small{
    display:block;
}

.quick-start-card strong{
    font-size:12px;
}

.quick-start-card small{
    margin-top:3px;
    color:var(--cw-muted);
    font-size:9px;
    line-height:1.4;
}

.quick-start-card>svg{
    width:15px;
    height:15px;
    color:#aaa6b5;
}

.onboarding-complete-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:16px 18px;
    border:1px solid rgba(111,78,246,.18);
    border-radius:16px;
    background:linear-gradient(135deg,#faf8ff,#f3efff);
}

.onboarding-complete-card>div{
    display:flex;
    align-items:center;
    gap:12px;
}

.complete-icon{
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    border-radius:13px;
    color:#fff;
    background:linear-gradient(135deg,#6545da,#9566eb);
}

.complete-icon svg{
    width:19px;
    height:19px;
}

.onboarding-complete-card strong,
.onboarding-complete-card p{
    display:block;
}

.onboarding-complete-card p{
    margin:3px 0 0;
    color:var(--cw-muted);
    font-size:10px;
}

/* Subscription */
.subscription-dashboard-hero{
    min-height:235px;
}

.subscription-hero-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.subscription-hero-meta>span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 10px;
    border-radius:10px;
    color:rgba(255,255,255,.74);
    background:rgba(255,255,255,.09);
    font-size:10px;
}

.subscription-hero-meta svg{
    width:14px;
    height:14px;
}

.subscription-hero-meta strong{
    color:#fff;
}

.current-plan-card{
    position:relative;
    z-index:2;
    flex:0 0 265px;
    padding:17px;
    border:1px solid rgba(255,255,255,.17);
    border-radius:17px;
    background:rgba(255,255,255,.11);
    backdrop-filter:blur(16px);
    box-shadow:0 18px 42px rgba(20,13,65,.2);
}

.current-plan-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.current-plan-top>span:first-child{
    color:rgba(255,255,255,.6);
    font-size:9px;
    font-weight:900;
}

.current-plan-card>strong{
    display:block;
    margin:15px 0 3px;
    font-size:24px;
}

.current-plan-card>p{
    margin:0 0 14px;
    color:#fff;
    font-size:17px;
    font-weight:900;
}

.current-plan-card>p small{
    color:rgba(255,255,255,.65);
    font-size:9px;
    font-weight:700;
}

.saas-section-header{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    padding:3px 2px;
}

.saas-section-header h2{
    font-size:23px;
}

.billing-switch{
    display:flex;
    gap:4px;
    padding:4px;
    border:1px solid var(--cw-border);
    border-radius:12px;
    background:#f5f4f8;
}

.billing-switch button{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 11px;
    border:0;
    border-radius:9px;
    color:var(--cw-muted);
    background:transparent;
    font-size:10px;
    font-weight:800;
}

.billing-switch button.active{
    color:var(--cw-primary);
    background:#fff;
    box-shadow:0 5px 14px rgba(31,27,52,.08);
}

.billing-switch button>span{
    padding:2px 5px;
    border-radius:999px;
    color:#148558;
    background:#e7f8ef;
    font-size:7px;
}

.subscription-plan-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    align-items:stretch;
}

.subscription-plan-card{
    position:relative;
    display:flex;
    min-width:0;
    flex-direction:column;
    padding:20px;
    border:1px solid var(--cw-border);
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 28px rgba(31,27,52,.05);
    transition:.2s ease;
}

.subscription-plan-card:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 42px rgba(47,33,110,.1);
}

.subscription-plan-card.current{
    border:2px solid var(--cw-primary);
    background:linear-gradient(180deg,#fff,#fbf9ff);
}

.subscription-plan-card.featured:not(.current){
    border-color:#c8bbfa;
}

.plan-recommended{
    position:absolute;
    top:-11px;
    right:16px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 8px;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,#6645d8,#9365eb);
    font-size:8px;
    font-weight:900;
}

.plan-recommended svg{
    width:11px;
    height:11px;
}

.subscription-plan-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.subscription-plan-head>div>span{
    color:var(--cw-muted);
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
}

.subscription-plan-head h3{
    margin:5px 0 0;
    font-size:22px;
    font-weight:900;
}

.current-plan-check{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:10px;
    color:#fff;
    background:var(--cw-primary);
}

.current-plan-check svg{
    width:15px;
    height:15px;
}

.subscription-plan-description{
    min-height:48px;
    margin:11px 0 0;
    color:var(--cw-muted);
    font-size:10px;
    line-height:1.55;
}

.subscription-plan-price{
    display:flex;
    align-items:baseline;
    gap:4px;
    margin:17px 0;
}

.subscription-plan-price>small{
    color:var(--cw-muted);
    font-size:10px;
}

.subscription-plan-price>strong{
    font-size:28px;
    letter-spacing:-.03em;
}

.subscription-plan-price>span{
    color:var(--cw-muted);
    font-size:9px;
}

.subscription-limit-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    padding:11px;
    border-radius:12px;
    background:#f8f7fb;
}

.subscription-limit-grid>span{
    display:grid;
    grid-template-columns:17px auto 1fr;
    gap:5px;
    align-items:center;
    color:var(--cw-muted);
    font-size:8px;
}

.subscription-limit-grid svg{
    width:14px;
    height:14px;
    color:var(--cw-primary);
}

.subscription-limit-grid strong{
    color:var(--cw-text);
    font-size:10px;
}

.subscription-feature-list{
    display:grid;
    flex:1;
    gap:8px;
    margin:16px 0 18px;
}

.subscription-feature-list>span{
    display:flex;
    align-items:center;
    gap:7px;
    color:#5d596b;
    font-size:10px;
}

.subscription-feature-list svg{
    width:14px;
    height:14px;
    color:#25a36d;
}

.subscription-management-grid{
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:14px;
}

.subscription-note-list{
    display:grid;
    gap:8px;
    margin-top:16px;
}

.subscription-note-list>span{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--cw-muted);
    font-size:10px;
}

.subscription-note-list svg{
    width:14px;
    height:14px;
    color:#25a36d;
}

.danger-zone-card{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:18px;
}

/* Usage polish */
.usage-page .usage-hero{
    min-height:205px;
}

.usage-page .usage-plan{
    position:relative;
    z-index:2;
    min-width:210px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(13px);
}

.usage-page .usage-card{
    border-radius:16px;
    box-shadow:0 10px 28px rgba(31,27,52,.05);
    transition:.18s ease;
}

.usage-page .usage-card:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 35px rgba(47,33,110,.09);
}

.usage-settings-card .saas-card-header{
    margin-bottom:18px;
}

.usage-settings-card .form-control,
.usage-settings-card .form-select{
    min-height:44px;
}

/* Superadmin card refinement */
.system-settings-page .panel{
    border-radius:18px;
    box-shadow:0 10px 28px rgba(31,27,52,.05);
}

.system-settings-page .system-settings-hero{
    border-radius:22px;
}

.system-settings-page .form-control,
.system-settings-page .form-select,
.system-settings-page .input-group-text{
    min-height:44px;
}

/* Responsive */
@media(max-width:1199.98px){
    .subscription-plan-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .subscription-plan-card:last-child:nth-child(odd){
        grid-column:1/-1;
        max-width:540px;
        justify-self:center;
        width:100%;
    }
}

@media(max-width:991.98px){
    .dashboard-hero{
        align-items:flex-start;
        flex-direction:column;
    }

    .onboarding-hero-visual,
    .current-plan-card{
        width:100%;
        flex-basis:auto;
    }

    .onboarding-hero-visual{
        display:none;
    }

    .onboarding-layout{
        grid-template-columns:1fr;
    }

    .onboarding-step-card{
        position:static;
    }

    .onboarding-step-list{
        grid-template-columns:1fr 1fr;
    }

    .subscription-management-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:767.98px){
    .dashboard-hero{
        min-height:auto;
        padding:22px;
    }

    .dashboard-hero h1{
        font-size:28px;
    }

    .saas-content-card{
        padding:16px;
    }

    .saas-card-header,
    .saas-section-header,
    .saas-form-footer,
    .onboarding-complete-card{
        align-items:flex-start;
        flex-direction:column;
    }

    .saas-form-footer .btn,
    .onboarding-complete-card .btn{
        width:100%;
    }

    .form-section-grid,
    .quick-start-grid,
    .subscription-plan-grid{
        grid-template-columns:1fr;
    }

    .subscription-plan-card:last-child:nth-child(odd){
        grid-column:auto;
        max-width:none;
    }

    .onboarding-step-list{
        grid-template-columns:1fr;
    }

    .billing-switch{
        width:100%;
    }

    .billing-switch button{
        flex:1;
        justify-content:center;
    }

    .subscription-hero-meta{
        align-items:stretch;
        flex-direction:column;
    }

    .subscription-hero-meta>span{
        width:100%;
    }
}

@media(max-width:480px){
    .onboarding-progress-summary{
        grid-template-columns:auto 1fr;
    }

    .onboarding-progress-summary>b{
        display:none;
    }

    .subscription-limit-grid{
        grid-template-columns:1fr;
    }
}

/* ===== Simple Superadmin Control Center ===== */
.superadmin-sidebar-note{display:grid;grid-template-columns:36px 1fr;gap:9px;align-items:center;margin:18px 8px 0;padding:10px;border-radius:12px;color:#c9c4db;background:rgba(255,255,255,.06)}
.superadmin-sidebar-note>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#fff;background:rgba(255,255,255,.09)}
.superadmin-sidebar-note svg{width:16px;height:16px}.superadmin-sidebar-note strong,.superadmin-sidebar-note small{display:block}.superadmin-sidebar-note strong{font-size:10px}.superadmin-sidebar-note small{margin-top:2px;color:#aaa5bb;font-size:8px;line-height:1.4}
.superadmin-page{display:grid;gap:16px}
.superadmin-hero,.simple-page-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;border-radius:19px}
.superadmin-hero{color:#fff;background:linear-gradient(135deg,#38258e,#6544ce 58%,#8c5fe4);box-shadow:0 15px 34px rgba(56,37,142,.18)}
.superadmin-hero>div>span,.simple-page-header>div>span{display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:900;letter-spacing:.08em}.superadmin-hero svg{width:14px;height:14px}.superadmin-hero h2,.simple-page-header h2{margin:6px 0}.superadmin-hero p,.simple-page-header p{margin:0}.superadmin-hero p{color:rgba(255,255,255,.72)}.simple-page-header{padding:4px 2px}.simple-page-header>div>span{color:var(--cw-primary)}.simple-page-header p{color:var(--cw-muted)}
.superadmin-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.superadmin-stat-card{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--cw-border);border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(31,27,52,.045)}
.superadmin-stat-card>span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:var(--cw-primary);background:var(--cw-primary-soft)}.superadmin-stat-card.success>span{color:#16875b;background:#e7f8ef}.superadmin-stat-card.warning>span{color:#a36f00;background:#fff4d4}.superadmin-stat-card.danger>span{color:#d03c56;background:#fff0f3}.superadmin-stat-card svg{width:18px;height:18px}.superadmin-stat-card small,.superadmin-stat-card strong{display:block}.superadmin-stat-card small{color:var(--cw-muted);font-size:9px;font-weight:800}.superadmin-stat-card strong{margin-top:3px;font-size:22px}
.tenant-status-select{width:132px}
.superadmin-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.superadmin-plan-card{position:relative;padding:18px;border:1px solid var(--cw-border);border-radius:17px;background:#fff;box-shadow:0 9px 25px rgba(31,27,52,.05)}
.superadmin-plan-card.featured{border-color:#b8a6f5}.superadmin-plan-head{display:flex;justify-content:space-between;gap:10px}.superadmin-plan-head span{color:var(--cw-muted);font-size:8px;font-weight:900}.superadmin-plan-head h3{margin:5px 0 0;font-size:21px}.superadmin-plan-head b{height:max-content;padding:4px 7px;border-radius:999px;color:#fff;background:var(--cw-primary);font-size:7px}
.superadmin-plan-price{margin:17px 0;font-size:25px;font-weight:900}.superadmin-plan-price small{color:var(--cw-muted);font-size:9px}
.superadmin-plan-limits{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:17px}.superadmin-plan-limits span{padding:5px 7px;border-radius:8px;color:var(--cw-muted);background:#f5f4f9;font-size:8px}
@media(max-width:1199.98px){.superadmin-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.superadmin-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767.98px){.superadmin-hero,.simple-page-header{align-items:flex-start;flex-direction:column}.superadmin-hero .btn,.simple-page-header .btn{width:100%}.superadmin-stat-grid,.superadmin-plan-grid{grid-template-columns:1fr}.tenant-status-select{width:100%}}

/* ===== Customer Package Expiry & Reminder ===== */
.tenant-summary-strip{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:12px;
    padding:11px 13px;
    border-radius:12px;
    color:var(--cw-muted);
    background:#f7f6fb;
    font-size:9px;
}

.tenant-summary-strip>span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.tenant-summary-strip svg{
    width:14px;
    height:14px;
    color:var(--cw-primary);
}

.tenant-identity{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:10px;
    align-items:center;
}

.tenant-avatar{
    display:grid;
    place-items:center;
    width:37px;
    height:37px;
    border-radius:11px;
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
    font-size:13px;
    font-weight:900;
}

.tenant-identity strong,
.tenant-identity small{
    display:block;
}

.tenant-identity small{
    margin-top:2px;
    color:var(--cw-muted);
    font-size:9px;
}

.expiry-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 7px;
    border-radius:999px;
    font-size:8px;
    font-weight:900;
}

.expiry-badge svg{
    width:11px;
    height:11px;
}

.expiry-badge.active{
    color:#16875b;
    background:#e7f8ef;
}

.expiry-badge.warning{
    color:#9a6c00;
    background:#fff4d4;
}

.expiry-badge.expired{
    color:#cc3c56;
    background:#fff0f3;
}

.expiry-badge.neutral{
    color:#777284;
    background:#f0eff4;
}

.tenant-action-buttons{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
}

.btn-soft-success{
    color:#16875b;
    border:1px solid #d5f2e3;
    background:#eaf9f1;
}

.btn-soft-success:hover{
    color:#0d6d47;
    background:#dff5e9;
}

.extend-duration-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}

.extend-duration-grid input{
    position:absolute;
    opacity:0;
}

.extend-duration-grid span{
    display:grid;
    place-items:center;
    min-height:76px;
    border:1px solid var(--cw-border);
    border-radius:12px;
    cursor:pointer;
    background:#fff;
    transition:.16s ease;
}

.extend-duration-grid strong{
    font-size:22px;
}

.extend-duration-grid small{
    color:var(--cw-muted);
}

.extend-duration-grid input:checked+span{
    color:var(--cw-primary);
    border-color:var(--cw-primary);
    background:var(--cw-primary-soft);
    box-shadow:0 0 0 3px rgba(111,78,246,.08);
}

.subscription-extend-note{
    display:grid;
    grid-template-columns:19px minmax(0,1fr);
    gap:8px;
    margin-top:14px;
    padding:10px;
    border-radius:11px;
    color:#666174;
    background:#f6f4fb;
    font-size:10px;
    line-height:1.5;
}

.subscription-extend-note svg{
    width:16px;
    height:16px;
    color:var(--cw-primary);
}

@media(max-width:991.98px){
    .tenant-action-buttons{
        align-items:stretch;
        flex-direction:column;
    }

    .tenant-action-buttons .btn,
    .tenant-action-buttons .form-select{
        width:100%;
    }
}

@media(max-width:575.98px){
    .extend-duration-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

/* ===== Simple System Settings Tabs ===== */
.simple-system-settings{
    display:grid;
    gap:14px;
}

.system-settings-tabs{
    display:flex;
    align-items:center;
    gap:6px;
    width:max-content;
    max-width:100%;
    padding:5px;
    border:1px solid var(--cw-border);
    border-radius:13px;
    background:#f5f4f9;
    overflow:auto;
}

.system-settings-tabs button{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 13px;
    border:0;
    border-radius:9px;
    color:var(--cw-muted);
    background:transparent;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

.system-settings-tabs button svg{
    width:15px;
    height:15px;
}

.system-settings-tabs button.active{
    color:var(--cw-primary);
    background:#fff;
    box-shadow:0 5px 14px rgba(31,27,52,.08);
}

.settings-tab-panel{
    display:none;
}

.settings-tab-panel.active{
    display:block;
    animation:settingsPanelIn .25s ease;
}

.system-device-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:18px;
}

.system-device-option input{
    position:absolute;
    opacity:0;
}

.system-device-option>span{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:12px;
    border:1px solid var(--cw-border);
    border-radius:13px;
    background:#fff;
    cursor:pointer;
    transition:.16s ease;
}

.system-device-option input:checked+span{
    border-color:var(--cw-primary);
    background:var(--cw-primary-soft);
    box-shadow:0 0 0 3px rgba(111,78,246,.08);
}

.device-radio-icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:11px;
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
}

.device-radio-icon svg{
    width:17px;
    height:17px;
}

.device-radio-copy{
    min-width:0;
}

.device-radio-copy strong,
.device-radio-copy small{
    display:block;
}

.device-radio-copy strong{
    overflow:hidden;
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.device-radio-copy small{
    margin-top:3px;
    color:var(--cw-muted);
    font-size:9px;
}

.device-state{
    padding:4px 7px;
    border-radius:999px;
    color:#777284;
    background:#f0eff4;
    font-size:8px;
    font-weight:900;
    text-transform:capitalize;
}

.device-state.connected,
.device-state.ready,
.device-state.active{
    color:#16875b;
    background:#e7f8ef;
}

.device-state.disconnected,
.device-state.offline{
    color:#cc3c56;
    background:#fff0f3;
}

.system-device-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin-top:17px;
    padding-top:15px;
    border-top:1px solid var(--cw-border);
}

.system-usage-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}

.system-usage-list>span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 9px;
    border-radius:9px;
    color:var(--cw-muted);
    background:#f6f5fa;
    font-size:9px;
}

.system-usage-list svg{
    width:13px;
    height:13px;
    color:var(--cw-primary);
}

.settings-empty-device{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px;
    border:1px dashed #d9d5e5;
    border-radius:13px;
    background:#faf9fc;
}

.settings-empty-device>span{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:12px;
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
}

.settings-empty-device svg{
    width:18px;
    height:18px;
}

.settings-empty-device>div{
    flex:1;
}

.settings-empty-device strong,
.settings-empty-device p{
    display:block;
}

.settings-empty-device p{
    margin:3px 0 0;
    color:var(--cw-muted);
    font-size:9px;
}

@keyframes settingsPanelIn{
    from{
        opacity:0;
        transform:translateY(6px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

@media(max-width:767.98px){
    .system-settings-tabs{
        width:100%;
    }

    .system-settings-tabs button{
        flex:1;
        justify-content:center;
    }

    .system-device-grid{
        grid-template-columns:1fr;
    }

    .system-device-actions{
        align-items:stretch;
        flex-direction:column-reverse;
    }

    .system-device-actions .btn{
        width:100%;
    }

    .settings-empty-device{
        align-items:flex-start;
        flex-direction:column;
    }

    .settings-empty-device .btn{
        width:100%;
    }
}

/* ===== Superadmin Device System ===== */
.device-system-page{display:grid;gap:16px}
.device-system-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;border-radius:19px;color:#fff;background:radial-gradient(circle at 85% 18%,rgba(255,255,255,.17),transparent 15rem),linear-gradient(135deg,#38258e,#6544ce 58%,#8c5fe4);box-shadow:0 15px 34px rgba(56,37,142,.18)}
.device-system-hero>div>span{display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:900;letter-spacing:.08em}
.device-system-hero svg{width:14px;height:14px}
.device-system-hero h2{margin:7px 0 5px}
.device-system-hero p{max-width:690px;margin:0;color:rgba(255,255,255,.74)}
.device-system-info{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 14px;padding:11px 13px;border-radius:12px;color:var(--cw-muted);background:#f7f6fb;font-size:9px}
.device-system-info>span{display:inline-flex;align-items:center;gap:6px}
.device-system-info svg{width:14px;height:14px;color:var(--cw-primary)}
@media(max-width:767.98px){.device-system-hero{align-items:flex-start;flex-direction:column}.device-system-hero .btn{width:100%}}

/* ===== Superadmin Tenant Delete & Change Plan ===== */
.tenant-action-buttons{
    flex-wrap:wrap;
}

.tenant-action-buttons .dropdown-item{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:11px;
}

.tenant-action-buttons .dropdown-item svg{
    width:14px;
    height:14px;
}

.plan-keep-date{
    display:grid;
    grid-template-columns:18px minmax(0,1fr);
    gap:8px;
    align-items:start;
    padding:11px;
    border:1px solid var(--cw-border);
    border-radius:12px;
    background:#faf9fc;
}

.plan-keep-date strong,
.plan-keep-date small{
    display:block;
}

.plan-keep-date small{
    margin-top:3px;
    color:var(--cw-muted);
    font-size:9px;
}

.change-plan-note{
    display:grid;
    grid-template-columns:18px minmax(0,1fr);
    gap:8px;
    margin-top:13px;
    padding:10px;
    border-radius:11px;
    color:#625d70;
    background:#f4f1ff;
    font-size:10px;
    line-height:1.5;
}

.change-plan-note svg{
    width:16px;
    height:16px;
    color:var(--cw-primary);
}

.delete-warning-box{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:10px;
    align-items:start;
    padding:12px;
    border:1px solid #ffd3da;
    border-radius:12px;
    color:#a92f45;
    background:#fff2f4;
}

.delete-warning-box>svg{
    width:21px;
    height:21px;
}

.delete-warning-box strong,
.delete-warning-box span{
    display:block;
}

.delete-warning-box span{
    margin-top:4px;
    color:#8e6670;
    font-size:10px;
    line-height:1.5;
}

@media(max-width:1199.98px){
    .tenant-action-buttons{
        min-width:210px;
    }
}


/* ================================================================
   GLOBAL DASHBOARD STYLE CONSISTENCY
   Applies to all tenant and superadmin menus
   ================================================================ */

:root{
    --cw-page-gap:16px;
    --cw-card-radius:17px;
    --cw-card-border:#e8e5f0;
    --cw-card-shadow:0 10px 28px rgba(31,27,52,.055);
    --cw-card-shadow-hover:0 16px 38px rgba(46,33,104,.09);
    --cw-soft-bg:#f7f6fb;
    --cw-heading:#29263a;
    --cw-subtle:#7d788c;
}

.cw-page-shell{
    display:grid;
    gap:var(--cw-page-gap);
    min-width:0;
}

.cw-page-shell>*{
    min-width:0;
}

.cw-page-intro{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:21px 23px;
    border:1px solid var(--cw-card-border);
    border-radius:var(--cw-card-radius);
    background:
        radial-gradient(
            circle at 88% 16%,
            rgba(113,78,229,.10),
            transparent 17rem
        ),
        linear-gradient(135deg,#fff,#faf8ff);
    box-shadow:var(--cw-card-shadow);
}

.cw-page-intro h2{
    margin:6px 0 4px;
    color:var(--cw-heading);
    font-size:25px;
    font-weight:900;
    letter-spacing:-.025em;
}

.cw-page-intro p{
    margin:0;
    color:var(--cw-subtle);
    line-height:1.55;
}

.cw-page-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--cw-primary);
    font-size:9px;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.cw-page-eyebrow svg{
    width:14px;
    height:14px;
}

/* Consistent panels and cards */
.cw-page-shell .panel,
.cw-page-shell .cw-panel,
.cw-page-shell .saas-content-card,
.cw-page-shell .saas-side-card{
    border:1px solid var(--cw-card-border);
    border-radius:var(--cw-card-radius);
    background:#fff;
    box-shadow:var(--cw-card-shadow);
}

.cw-page-shell .panel{
    padding:18px;
}

.cw-page-shell .panel:hover,
.cw-page-shell .saas-content-card:hover{
    box-shadow:var(--cw-card-shadow-hover);
}

.cw-page-shell .panel-header,
.cw-page-shell .saas-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:15px;
}

.cw-panel-heading{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.cw-page-shell .panel-header h3,
.cw-page-shell .saas-card-header h2,
.cw-page-shell .saas-card-header h3{
    margin:0;
    color:var(--cw-heading);
    font-size:19px;
    font-weight:900;
    letter-spacing:-.02em;
}

.cw-page-shell .panel-header p,
.cw-page-shell .saas-card-header p{
    margin:4px 0 0;
    color:var(--cw-subtle);
    font-size:10px;
    line-height:1.5;
}

.cw-page-shell .section-icon,
.cw-page-shell .saas-card-icon{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:42px;
    height:42px;
    border-radius:12px;
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
    box-shadow:none;
}

.cw-page-shell .section-icon svg,
.cw-page-shell .saas-card-icon svg{
    width:18px;
    height:18px;
}

/* Toolbar consistency */
.cw-page-shell .toolbar,
.cw-page-shell .cw-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
    padding:11px;
    border:1px solid var(--cw-card-border);
    border-radius:13px;
    background:var(--cw-soft-bg);
}

.cw-page-shell .toolbar-left,
.cw-page-shell .toolbar-right{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.cw-page-shell .search-box{
    position:relative;
    min-width:260px;
}

.cw-page-shell .search-box>svg{
    position:absolute;
    z-index:2;
    top:50%;
    left:12px;
    width:16px;
    height:16px;
    color:#9893a5;
    transform:translateY(-50%);
}

.cw-page-shell .search-box .form-control{
    padding-left:38px;
}

.cw-page-shell .filter-select,
.cw-page-shell .per-page-select{
    min-width:130px;
}

/* Inputs and forms */
.cw-page-shell .form-control,
.cw-page-shell .form-select,
.cw-page-shell .input-group-text{
    min-height:43px;
    border-color:#dfdce8;
    border-radius:10px;
    font-size:11px;
}

.cw-page-shell textarea.form-control{
    min-height:96px;
}

.cw-page-shell .form-control:focus,
.cw-page-shell .form-select:focus{
    border-color:#9377ef;
    box-shadow:0 0 0 .2rem rgba(111,78,246,.10);
}

.cw-page-shell .form-label{
    margin-bottom:6px;
    color:#514d60;
    font-size:10px;
    font-weight:800;
}

.cw-page-shell .input-group>.form-control,
.cw-page-shell .input-group>.form-select{
    border-radius:10px 0 0 10px;
}

.cw-page-shell .input-group>.input-group-text{
    border-radius:0 10px 10px 0;
    color:#777284;
    background:#f5f4f8;
}

/* Buttons */
.cw-page-shell .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:38px;
    border-radius:10px;
    font-size:10px;
    font-weight:800;
}

.cw-page-shell .btn-sm{
    min-height:32px;
    padding:6px 9px;
    border-radius:9px;
    font-size:9px;
}

.cw-page-shell .btn svg{
    width:15px;
    height:15px;
}

/* Tables */
.cw-page-shell .table-responsive{
    border:1px solid var(--cw-card-border);
    border-radius:13px;
    background:#fff;
}

.cw-page-shell .table{
    margin:0;
}

.cw-page-shell .table thead th{
    padding:11px 12px;
    border-bottom:1px solid var(--cw-card-border);
    color:#676276;
    background:#f8f7fb;
    font-size:9px;
    font-weight:900;
    letter-spacing:.035em;
    text-transform:uppercase;
    white-space:nowrap;
}

.cw-page-shell .table tbody td{
    padding:12px;
    border-color:#efedf4;
    color:#3c3849;
    font-size:10px;
    vertical-align:middle;
}

.cw-page-shell .table tbody tr{
    transition:.14s ease;
}

.cw-page-shell .table tbody tr:hover{
    background:#fbfaff;
}

.cw-page-shell .table strong{
    color:#29263a;
}

/* Badges */
.cw-page-shell .badge{
    padding:5px 8px;
    border-radius:999px;
    font-size:8px;
    font-weight:900;
}

/* Modals */
.cw-modal-content{
    overflow:hidden;
    border:0;
    border-radius:18px;
    box-shadow:0 30px 80px rgba(25,19,55,.22);
}

.cw-modal-header{
    padding:17px 19px;
    border-bottom:1px solid var(--cw-card-border);
    background:linear-gradient(180deg,#fff,#fbfaff);
}

.cw-modal-header .modal-title{
    color:var(--cw-heading);
    font-size:18px;
    font-weight:900;
}

.cw-modal-content .modal-body{
    padding:19px;
}

.cw-modal-footer{
    padding:13px 19px;
    border-top:1px solid var(--cw-card-border);
    background:#faf9fc;
}

/* Empty states */
.cw-page-shell .empty-state{
    display:grid;
    place-items:center;
    min-height:110px;
    padding:18px;
    color:#918c9e;
    text-align:center;
    font-size:10px;
}

/* Existing hero normalization */
.cw-page-shell .campaign-hero,
.cw-page-shell .automation-hero,
.cw-page-shell .inbox-header,
.cw-page-shell .usage-hero,
.cw-page-shell .dashboard-hero,
.cw-page-shell .superadmin-hero,
.cw-page-shell .device-system-hero{
    border-radius:19px;
    box-shadow:0 16px 38px rgba(62,40,149,.18);
}

.cw-page-shell .campaign-hero h2,
.cw-page-shell .automation-hero h2,
.cw-page-shell .inbox-header h2,
.cw-page-shell .usage-hero h2,
.cw-page-shell .dashboard-hero h1,
.cw-page-shell .superadmin-hero h2,
.cw-page-shell .device-system-hero h2{
    font-weight:900;
    letter-spacing:-.025em;
}

/* Grid consistency */
.cw-page-shell .analytics-grid,
.cw-page-shell .usage-grid,
.cw-page-shell .superadmin-stat-grid{
    gap:12px;
}

.cw-page-shell .analytics-card,
.cw-page-shell .usage-card,
.cw-page-shell .superadmin-stat-card{
    border:1px solid var(--cw-card-border);
    border-radius:15px;
    box-shadow:var(--cw-card-shadow);
}

/* Pagination */
.cw-page-shell .pagination{
    justify-content:center;
    gap:4px;
    margin:14px 0 0;
}

.cw-page-shell .page-link{
    display:grid;
    place-items:center;
    min-width:34px;
    min-height:34px;
    border:1px solid var(--cw-card-border);
    border-radius:9px!important;
    color:#625d70;
    font-size:9px;
}

.cw-page-shell .page-item.active .page-link{
    color:#fff;
    border-color:var(--cw-primary);
    background:var(--cw-primary);
}

/* Responsive */
@media(max-width:991.98px){
    .cw-page-intro{
        align-items:flex-start;
        flex-direction:column;
    }

    .cw-page-intro .btn{
        width:100%;
    }

    .cw-page-shell .panel-header,
    .cw-page-shell .saas-card-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .cw-page-shell .panel-header>.btn,
    .cw-page-shell .panel-header>.d-flex:last-child{
        width:100%;
    }

    .cw-page-shell .panel-header>.d-flex:last-child .btn{
        flex:1;
    }
}

@media(max-width:767.98px){
    .cw-page-shell{
        gap:12px;
    }

    .cw-page-shell .panel,
    .cw-page-shell .saas-content-card{
        padding:14px;
        border-radius:14px;
    }

    .cw-page-shell .toolbar,
    .cw-page-shell .cw-toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .cw-page-shell .toolbar-left,
    .cw-page-shell .toolbar-right{
        width:100%;
    }

    .cw-page-shell .search-box,
    .cw-page-shell .filter-select,
    .cw-page-shell .per-page-select{
        width:100%;
        min-width:0;
    }

    .cw-page-shell .table-responsive{
        border-radius:11px;
    }

    .cw-page-shell .table thead th,
    .cw-page-shell .table tbody td{
        padding:10px;
    }
}

@media(max-width:575.98px){
    .cw-page-intro{
        padding:17px;
    }

    .cw-page-intro h2{
        font-size:21px;
    }

    .cw-page-shell .panel-header>.d-flex:last-child{
        flex-direction:column;
    }

    .cw-page-shell .panel-header>.d-flex:last-child .btn{
        width:100%;
    }
}


/* ================================================================
   TABLE ACTION MINIMAL + TOOLTIP
   ================================================================ */

.cw-page-shell .table-responsive{
    overflow-x:auto;
    overflow-y:visible;
}

.cw-page-shell .table{
    min-width:720px;
}

.cw-page-shell .table thead{
    position:relative;
}

.cw-page-shell .table thead th:first-child{
    border-top-left-radius:11px;
}

.cw-page-shell .table thead th:last-child{
    border-top-right-radius:11px;
}

.cw-page-shell .table tbody tr:last-child td{
    border-bottom:0;
}

.cw-page-shell .table td.text-end,
.cw-page-shell .table th.text-end{
    white-space:nowrap;
}

.table-action-group{
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    white-space:nowrap;
}

.table-action-btn{
    position:relative;
    display:inline-grid;
    place-items:center;
    width:32px;
    height:32px;
    padding:0;
    border:1px solid #e2dfe9;
    border-radius:9px;
    color:#686374;
    background:#fff;
    box-shadow:0 3px 9px rgba(31,27,52,.035);
    transition:
        transform .15s ease,
        border-color .15s ease,
        color .15s ease,
        background .15s ease;
}

.table-action-btn:hover{
    z-index:3;
    color:var(--cw-primary);
    border-color:#c9bbf5;
    background:var(--cw-primary-soft);
    transform:translateY(-1px);
}

.table-action-btn.primary{
    color:#fff;
    border-color:var(--cw-primary);
    background:var(--cw-primary);
}

.table-action-btn.primary:hover{
    color:#fff;
    background:#5d3fd0;
}

.table-action-btn.success{
    color:#16875b;
    border-color:#cdeedc;
    background:#eaf9f1;
}

.table-action-btn.success:hover{
    color:#0d7049;
    background:#def5e8;
}

.table-action-btn.warning{
    color:#956800;
    border-color:#f2df9f;
    background:#fff5d8;
}

.table-action-btn.danger{
    color:#c63852;
    border-color:#f1ccd3;
    background:#fff3f5;
}

.table-action-btn.danger:hover{
    color:#a7243d;
    border-color:#ebaeb9;
    background:#ffe8ec;
}

.table-action-btn svg{
    width:15px;
    height:15px;
    pointer-events:none;
}

.table-action-btn[data-tooltip]::before,
.table-action-btn[data-tooltip]::after{
    position:absolute;
    left:50%;
    pointer-events:none;
    opacity:0;
    transform:translate(-50%,4px);
    transition:.14s ease;
}

.table-action-btn[data-tooltip]::before{
    content:attr(data-tooltip);
    z-index:9999;
    bottom:calc(100% + 8px);
    width:max-content;
    max-width:190px;
    padding:6px 8px;
    border-radius:7px;
    color:#fff;
    background:#292536;
    font-size:9px;
    font-weight:700;
    line-height:1.35;
    text-align:center;
    white-space:normal;
    box-shadow:0 8px 20px rgba(28,23,48,.2);
}

.table-action-btn[data-tooltip]::after{
    content:"";
    z-index:9998;
    bottom:calc(100% + 3px);
    border:5px solid transparent;
    border-top-color:#292536;
}

.table-action-btn[data-tooltip]:hover::before,
.table-action-btn[data-tooltip]:hover::after,
.table-action-btn[data-tooltip]:focus-visible::before,
.table-action-btn[data-tooltip]:focus-visible::after{
    opacity:1;
    transform:translate(-50%,0);
}

.cw-page-shell .dropdown-menu{
    min-width:190px;
    padding:6px;
    border:1px solid var(--cw-card-border);
    border-radius:11px;
    box-shadow:0 18px 46px rgba(28,23,48,.16);
}

.cw-page-shell .dropdown-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 9px;
    border-radius:8px;
    font-size:10px;
}

.cw-page-shell .dropdown-item:hover{
    background:#f5f2ff;
}

.cw-page-shell .dropdown-item svg{
    width:14px;
    height:14px;
}

.tenant-table th:last-child,
.tenant-table td:last-child{
    width:170px;
    min-width:170px;
}

@media(max-width:767.98px){
    .cw-page-shell .table{
        min-width:680px;
    }

    .table-action-btn{
        width:31px;
        height:31px;
    }
}


/* ================================================================
   GLOBAL FONT SIZE & READABILITY FIX
   Membesarkan font seluruh dashboard tanpa merusak layout.
   ================================================================ */

:root{
    --cw-font-xs:11px;
    --cw-font-sm:12px;
    --cw-font-md:13px;
    --cw-font-lg:15px;
    --cw-font-xl:18px;
    --cw-font-title:26px;
    --cw-line-height:1.55;
}

html{
    font-size:16px;
}

body,
button,
input,
select,
textarea{
    font-size:var(--cw-font-md);
}

body{
    line-height:var(--cw-line-height);
}

/* Sidebar */
.sidebar-brand strong{
    font-size:18px;
}

.sidebar-brand small{
    font-size:11px;
}

.sidebar-nav .nav-link,
.sidebar-group-toggle{
    min-height:42px;
    font-size:12px;
}

.sidebar-nav .nav-link span,
.sidebar-group-toggle span{
    font-size:12px;
}

.sidebar-section-label{
    font-size:10px;
}

.superadmin-sidebar-note strong{
    font-size:11px;
}

.superadmin-sidebar-note small{
    font-size:10px;
}

/* Header */
.topbar h1,
.topbar h2,
.topbar .page-title{
    font-size:20px;
}

.topbar p,
.topbar small{
    font-size:11px;
}

/* Page headings */
.cw-page-intro h2,
.simple-page-header h2,
.superadmin-hero h2,
.dashboard-hero h1,
.device-system-hero h2,
.usage-hero h2,
.campaign-hero h2,
.automation-hero h2{
    font-size:28px;
}

.cw-page-intro p,
.simple-page-header p,
.superadmin-hero p,
.dashboard-hero p,
.device-system-hero p{
    font-size:13px;
}

.cw-page-eyebrow,
.dashboard-eyebrow,
.settings-kicker,
.simple-page-header>div>span,
.superadmin-hero>div>span{
    font-size:11px;
}

/* Panels and cards */
.cw-page-shell .panel-header h3,
.cw-page-shell .saas-card-header h2,
.cw-page-shell .saas-card-header h3,
.saas-side-card-head h3,
.saas-card-heading h2{
    font-size:20px;
}

.cw-page-shell .panel-header p,
.cw-page-shell .saas-card-header p,
.saas-card-heading p{
    font-size:12px;
}

.cw-page-shell .panel-header small,
.cw-page-shell .saas-card-header small{
    font-size:11px;
}

/* Forms */
.cw-page-shell .form-label,
.form-group-modern>label,
.auth-card .form-label{
    font-size:12px;
}

.cw-page-shell .form-control,
.cw-page-shell .form-select,
.cw-page-shell .input-group-text,
.auth-card .form-control,
.auth-card .form-select{
    min-height:46px;
    font-size:13px;
}

.cw-page-shell textarea.form-control{
    font-size:13px;
}

.invalid-feedback,
.valid-feedback{
    font-size:11px;
}

.form-text,
.text-secondary,
small.text-secondary{
    font-size:11px;
}

/* Buttons */
.cw-page-shell .btn,
.auth-card .btn,
.saas-public .btn{
    min-height:40px;
    font-size:12px;
}

.cw-page-shell .btn-sm{
    min-height:34px;
    font-size:11px;
}

.table-action-btn{
    width:34px;
    height:34px;
}

.table-action-btn svg{
    width:16px;
    height:16px;
}

/* Tables */
.cw-page-shell .table thead th{
    font-size:10px;
}

.cw-page-shell .table tbody td{
    font-size:12px;
}

.cw-page-shell .table tbody td small,
.cw-page-shell .table tbody td .small{
    font-size:10px!important;
}

.cw-page-shell .table strong{
    font-size:12px;
}

.tenant-identity strong{
    font-size:12px;
}

.tenant-identity small{
    font-size:10px;
}

/* Badges and status */
.cw-page-shell .badge,
.status-badge,
.compact-status,
.expiry-badge,
.device-state{
    font-size:9px;
}

.expiry-badge{
    padding:5px 8px;
}

/* Dashboard stats */
.analytics-card small,
.usage-card small,
.superadmin-stat-card small{
    font-size:10px;
}

.analytics-card strong,
.usage-card strong,
.superadmin-stat-card strong{
    font-size:24px;
}

.analytics-card p,
.usage-card p{
    font-size:11px;
}

/* Subscription */
.subscription-plan-head h3{
    font-size:23px;
}

.subscription-plan-description{
    font-size:11px;
}

.subscription-plan-price>strong{
    font-size:30px;
}

.subscription-plan-price>span,
.subscription-plan-price>small{
    font-size:10px;
}

.subscription-limit-grid>span,
.subscription-feature-list>span{
    font-size:10px;
}

.subscription-limit-grid strong{
    font-size:11px;
}

/* Onboarding */
.step-copy strong{
    font-size:12px;
}

.step-copy small{
    font-size:10px;
}

.quick-start-card strong{
    font-size:12px;
}

.quick-start-card small{
    font-size:10px;
}

.onboarding-complete-card p{
    font-size:11px;
}

/* Superadmin plans */
.superadmin-plan-head h3{
    font-size:22px;
}

.superadmin-plan-head span,
.superadmin-plan-head b,
.superadmin-plan-limits span{
    font-size:9px;
}

.superadmin-plan-price{
    font-size:27px;
}

/* Settings */
.system-settings-tabs button{
    font-size:11px;
}

.system-option strong{
    font-size:12px;
}

.system-option small{
    font-size:10px;
}

.device-radio-copy strong{
    font-size:12px;
}

.device-radio-copy small{
    font-size:10px;
}

.system-usage-list>span{
    font-size:10px;
}

/* Modals */
.cw-modal-header .modal-title{
    font-size:19px;
}

.cw-modal-content .modal-body,
.cw-modal-content .modal-footer{
    font-size:12px;
}

.dropdown-menu,
.dropdown-item{
    font-size:11px;
}

/* Tooltips */
.table-action-btn[data-tooltip]::before{
    font-size:10px;
}

/* Public website */
.saas-public{
    font-size:14px;
}

.saas-nav-links>a:not(.btn){
    font-size:13px;
}

.saas-hero p{
    font-size:18px;
}

.saas-feature-grid h3,
.saas-feature-detail-grid h3{
    font-size:19px;
}

.saas-feature-grid p,
.saas-feature-detail-grid p{
    font-size:13px;
}

.saas-plan-grid article>p,
.saas-plan-grid li{
    font-size:12px;
}

.saas-footer,
.saas-footer a,
.saas-footer p{
    font-size:12px;
}

/* Login & auth */
.auth-heading h2{
    font-size:32px;
}

.auth-heading p{
    font-size:13px;
}

.auth-switch,
.auth-help,
.auth-forgot-link,
.auth-secure-note{
    font-size:12px;
}

.auth-plan-grid strong{
    font-size:12px;
}

.auth-plan-grid small{
    font-size:10px;
}

/* Responsive typography */
@media(max-width:991.98px){
    .cw-page-intro h2,
    .simple-page-header h2,
    .superadmin-hero h2,
    .dashboard-hero h1,
    .device-system-hero h2{
        font-size:25px;
    }
}

@media(max-width:767.98px){
    body{
        font-size:12px;
    }

    .cw-page-intro h2,
    .simple-page-header h2,
    .superadmin-hero h2,
    .dashboard-hero h1,
    .device-system-hero h2{
        font-size:23px;
    }

    .cw-page-shell .panel-header h3,
    .cw-page-shell .saas-card-header h2,
    .cw-page-shell .saas-card-header h3{
        font-size:18px;
    }

    .cw-page-shell .table tbody td{
        font-size:11px;
    }

    .cw-page-shell .form-control,
    .cw-page-shell .form-select,
    .cw-page-shell .input-group-text{
        font-size:12px;
    }
}

@media(max-width:480px){
    .auth-heading h2{
        font-size:27px;
    }

    .saas-hero p{
        font-size:16px;
    }
}


/* ===== Superadmin Add Customer ===== */
.customer-form-section{
    padding:15px;
    border:1px solid var(--cw-card-border);
    border-radius:14px;
    background:#fcfbfe;
}

.customer-form-section + .customer-form-section{
    margin-top:14px;
}

.customer-form-heading{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}

.customer-form-heading>span{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:11px;
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
}

.customer-form-heading svg{
    width:17px;
    height:17px;
}

.customer-form-heading strong,
.customer-form-heading small{
    display:block;
}

.customer-form-heading strong{
    font-size:13px;
}

.customer-form-heading small{
    margin-top:2px;
    color:var(--cw-muted);
    font-size:10px;
}

.customer-send-option{
    display:grid;
    grid-template-columns:18px minmax(0,1fr);
    gap:9px;
    align-items:start;
    margin-top:14px;
    padding:12px;
    border:1px solid #d8efe3;
    border-radius:12px;
    background:#eefaf4;
}

.customer-send-option strong,
.customer-send-option small{
    display:block;
}

.customer-send-option strong{
    color:#176e4d;
    font-size:12px;
}

.customer-send-option small{
    margin-top:3px;
    color:#5d7d6e;
    font-size:10px;
}

.credential-success-icon{
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    margin:0 auto 16px;
    border-radius:18px;
    color:#fff;
    background:linear-gradient(135deg,#24a36c,#55c993);
    box-shadow:0 12px 28px rgba(36,163,108,.22);
}

.credential-success-icon svg{
    width:27px;
    height:27px;
}

.credential-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.credential-grid>div{
    padding:11px;
    border:1px solid var(--cw-card-border);
    border-radius:11px;
    background:#faf9fc;
}

.credential-grid span,
.credential-grid strong{
    display:block;
}

.credential-grid span{
    color:var(--cw-muted);
    font-size:10px;
}

.credential-grid strong{
    margin-top:4px;
    overflow-wrap:anywhere;
    font-size:12px;
}

.credential-wa-status{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:12px;
    padding:10px;
    border-radius:10px;
    font-size:11px;
}

.credential-wa-status svg{
    width:15px;
    height:15px;
}

.credential-wa-status.success{
    color:#176e4d;
    background:#eaf9f1;
}

.credential-wa-status.warning{
    color:#8f6500;
    background:#fff5d8;
}

@media(max-width:767.98px){
    .credential-grid{
        grid-template-columns:1fr;
    }
}


/* ================================================================
   GLOBAL CHECKBOX & RADIO STYLE FIX
   Merapikan seluruh checkbox/radio di dashboard dan modal.
   ================================================================ */

.cw-page-shell .form-check,
.cw-modal-content .form-check,
.auth-card .form-check,
.saas-public .form-check{
    position:relative;
    display:grid;
    grid-template-columns:22px minmax(0,1fr);
    gap:10px;
    align-items:start;
    min-height:0;
    margin:0;
    padding:12px 13px;
    border:1px solid var(--cw-card-border);
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.cw-page-shell .form-check:hover,
.cw-modal-content .form-check:hover,
.auth-card .form-check:hover,
.saas-public .form-check:hover{
    border-color:#cfc5f5;
    background:#fbfaff;
}

.cw-page-shell .form-check-input,
.cw-modal-content .form-check-input,
.auth-card .form-check-input,
.saas-public .form-check-input{
    position:relative;
    float:none;
    width:18px;
    height:18px;
    margin:1px 0 0;
    border:1.5px solid #bdb7ca;
    border-radius:5px;
    background-color:#fff;
    box-shadow:none;
    cursor:pointer;
}

.cw-page-shell .form-check-input[type="radio"],
.cw-modal-content .form-check-input[type="radio"],
.auth-card .form-check-input[type="radio"],
.saas-public .form-check-input[type="radio"]{
    border-radius:50%;
}

.cw-page-shell .form-check-input:checked,
.cw-modal-content .form-check-input:checked,
.auth-card .form-check-input:checked,
.saas-public .form-check-input:checked{
    border-color:var(--cw-primary);
    background-color:var(--cw-primary);
}

.cw-page-shell .form-check-input:focus,
.cw-modal-content .form-check-input:focus,
.auth-card .form-check-input:focus,
.saas-public .form-check-input:focus{
    border-color:var(--cw-primary);
    box-shadow:0 0 0 .2rem rgba(111,78,246,.12);
}

.cw-page-shell .form-check-input:checked + span,
.cw-modal-content .form-check-input:checked + span,
.auth-card .form-check-input:checked + span,
.saas-public .form-check-input:checked + span{
    color:var(--cw-heading);
}

.cw-page-shell .form-check>span,
.cw-modal-content .form-check>span,
.auth-card .form-check>span,
.saas-public .form-check>span{
    display:block;
    min-width:0;
}

.cw-page-shell .form-check strong,
.cw-page-shell .form-check small,
.cw-modal-content .form-check strong,
.cw-modal-content .form-check small,
.auth-card .form-check strong,
.auth-card .form-check small,
.saas-public .form-check strong,
.saas-public .form-check small{
    display:block;
}

.cw-page-shell .form-check strong,
.cw-modal-content .form-check strong,
.auth-card .form-check strong,
.saas-public .form-check strong{
    color:var(--cw-heading);
    font-size:12px;
    font-weight:800;
    line-height:1.35;
}

.cw-page-shell .form-check small,
.cw-modal-content .form-check small,
.auth-card .form-check small,
.saas-public .form-check small{
    margin-top:3px;
    color:var(--cw-muted);
    font-size:10px;
    line-height:1.45;
}

/* Checked card state */
.cw-page-shell .form-check:has(.form-check-input:checked),
.cw-modal-content .form-check:has(.form-check-input:checked),
.auth-card .form-check:has(.form-check-input:checked),
.saas-public .form-check:has(.form-check-input:checked){
    border-color:#b8a8f2;
    background:linear-gradient(135deg,#fbf9ff,#f4efff);
    box-shadow:0 0 0 3px rgba(111,78,246,.07);
}

/* Success checkbox variant */
.customer-send-option,
.automation-check,
.plan-keep-date{
    display:grid!important;
    grid-template-columns:22px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:start!important;
    margin:0!important;
    padding:12px 13px!important;
    border-radius:12px!important;
}

.customer-send-option{
    margin-top:14px!important;
    border:1px solid #d8efe3!important;
    background:#f4fbf7!important;
}

.customer-send-option:has(.form-check-input:checked){
    border-color:#9fd8bb!important;
    background:linear-gradient(135deg,#eefaf4,#e5f7ee)!important;
    box-shadow:0 0 0 3px rgba(36,163,108,.07)!important;
}

.customer-send-option .form-check-input:checked{
    border-color:#1f9b67!important;
    background-color:#1f9b67!important;
}

.customer-send-option strong{
    color:#176e4d!important;
    font-size:12px!important;
}

.customer-send-option small{
    color:#5d7d6e!important;
    font-size:10px!important;
}

/* Compact standalone checkbox */
.form-check.compact-check,
.compact-check.form-check{
    display:inline-grid;
    width:auto;
    padding:8px 10px;
    border-radius:10px;
}

/* Switch style */
.form-switch{
    grid-template-columns:42px minmax(0,1fr)!important;
}

.form-switch .form-check-input{
    width:38px!important;
    height:22px!important;
    margin:0!important;
    border-radius:999px!important;
    background-position:left center;
    background-size:18px 18px;
}

.form-switch .form-check-input:checked{
    background-position:right center;
}

/* Native checkbox/radio outside Bootstrap wrappers */
.cw-page-shell input[type="checkbox"]:not(.form-check-input),
.cw-page-shell input[type="radio"]:not(.form-check-input),
.cw-modal-content input[type="checkbox"]:not(.form-check-input),
.cw-modal-content input[type="radio"]:not(.form-check-input){
    width:18px;
    height:18px;
    margin:0;
    accent-color:var(--cw-primary);
    cursor:pointer;
}

/* Existing custom selectable cards */
.system-option,
.system-device-option,
.extend-duration-grid label{
    cursor:pointer;
}

.system-option>span,
.system-device-option>span,
.extend-duration-grid label>span{
    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.system-option:hover>span,
.system-device-option:hover>span,
.extend-duration-grid label:hover>span{
    transform:translateY(-1px);
}

/* Prevent misaligned Bootstrap negative margins */
.form-check .form-check-input{
    margin-left:0!important;
}

/* Responsive */
@media(max-width:575.98px){
    .cw-page-shell .form-check,
    .cw-modal-content .form-check,
    .auth-card .form-check,
    .saas-public .form-check{
        padding:11px;
    }

    .form-switch{
        grid-template-columns:40px minmax(0,1fr)!important;
    }
}


/* ===== Usage Read Only ===== */
.usage-readonly-note{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:12px;
    align-items:start;
    padding:15px 16px;
    border:1px solid #ddd5fb;
    border-radius:14px;
    background:linear-gradient(135deg,#faf8ff,#f3efff);
}

.usage-readonly-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:12px;
    color:var(--cw-primary);
    background:#fff;
    box-shadow:0 8px 20px rgba(80,56,170,.08);
}

.usage-readonly-icon svg{
    width:18px;
    height:18px;
}

.usage-readonly-note strong,
.usage-readonly-note p{
    display:block;
}

.usage-readonly-note strong{
    color:var(--cw-heading);
    font-size:13px;
}

.usage-readonly-note p{
    margin:4px 0 0;
    color:var(--cw-muted);
    font-size:11px;
    line-height:1.55;
}

@media(max-width:575.98px){
    .usage-readonly-note{
        grid-template-columns:1fr;
    }
}


/* ===== Superadmin Account Management ===== */
.superadmin-security-note{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:13px;
    padding:11px 13px;
    border:1px solid #ddd5fb;
    border-radius:12px;
    color:#5f5873;
    background:#f8f5ff;
    font-size:11px;
}

.superadmin-security-note svg{
    flex:0 0 auto;
    width:16px;
    height:16px;
    color:var(--cw-primary);
}

.current-account-label{
    display:inline-flex;
    margin-left:6px;
    padding:3px 6px;
    border-radius:999px;
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
    font-size:8px;
    font-weight:900;
    vertical-align:middle;
}

.superadmin-account-page .table th:last-child,
.superadmin-account-page .table td:last-child{
    width:160px;
    min-width:160px;
}


/* ===== Superadmin Activity Log ===== */
.superadmin-log-page .table th:last-child,
.superadmin-log-page .table td:last-child{
    width:70px;
    min-width:70px;
}

.log-endpoint{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:220px;
}

.log-endpoint>b{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:54px;
    padding:4px 6px;
    border-radius:7px;
    font-size:9px;
}

.log-endpoint>b.primary{
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
}

.log-endpoint>b.warning{
    color:#956800;
    background:#fff5d8;
}

.log-endpoint>b.danger{
    color:#c63852;
    background:#fff3f5;
}

.log-endpoint code{
    overflow:hidden;
    max-width:330px;
    color:#5f596d;
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.log-detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:0;
}

.log-detail-grid>div{
    padding:11px;
    border:1px solid var(--cw-card-border);
    border-radius:11px;
    background:#faf9fc;
}

.log-detail-grid>div.wide{
    grid-column:1/-1;
}

.log-detail-grid dt{
    margin-bottom:4px;
    color:var(--cw-muted);
    font-size:10px;
}

.log-detail-grid dd{
    margin:0;
    color:var(--cw-heading);
    font-size:12px;
    overflow-wrap:anywhere;
}

.log-detail-grid pre{
    max-height:260px;
    margin:0;
    overflow:auto;
    color:#504a5e;
    font-size:11px;
    white-space:pre-wrap;
}

@media(max-width:575.98px){
    .log-detail-grid{
        grid-template-columns:1fr;
    }

    .log-detail-grid>div.wide{
        grid-column:auto;
    }
}


/* ===== Customer Detail + Invoice ===== */
.customer-detail-hero{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:22px;
    border:1px solid var(--cw-card-border);
    border-radius:18px;
    background:
        radial-gradient(
            circle at 88% 20%,
            rgba(111,78,246,.12),
            transparent 18rem
        ),
        linear-gradient(135deg,#fff,#faf8ff);
    box-shadow:var(--cw-card-shadow);
}

.customer-back-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:16px;
    color:#716b7d;
    font-size:11px;
    font-weight:700;
    text-decoration:none;
}

.customer-back-link:hover{
    color:var(--cw-primary);
}

.customer-back-link svg{
    width:14px;
    height:14px;
}

.customer-detail-identity{
    display:flex;
    align-items:center;
    gap:14px;
}

.customer-detail-avatar{
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    border-radius:17px;
    color:#fff;
    background:linear-gradient(135deg,#7656e7,#9d85ef);
    font-size:24px;
    font-weight:900;
    box-shadow:0 14px 30px rgba(111,78,246,.24);
}

.customer-detail-identity h2{
    margin:4px 0 3px;
    color:var(--cw-heading);
    font-size:27px;
    font-weight:900;
}

.customer-detail-identity p{
    margin:0;
    color:var(--cw-muted);
    font-size:12px;
}

.customer-detail-actions{
    display:flex;
    align-items:flex-start;
}

.customer-stat-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:11px;
}

.customer-stat-card{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px;
    border:1px solid var(--cw-card-border);
    border-radius:14px;
    background:#fff;
    box-shadow:var(--cw-card-shadow);
}

.customer-stat-card>span{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    flex:0 0 auto;
    border-radius:11px;
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
}

.customer-stat-card svg{
    width:17px;
    height:17px;
}

.customer-stat-card small,
.customer-stat-card strong{
    display:block;
}

.customer-stat-card small{
    color:var(--cw-muted);
    font-size:10px;
}

.customer-stat-card strong{
    margin-top:2px;
    color:var(--cw-heading);
    font-size:20px;
}

.customer-detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.customer-info-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.customer-info-list>div,
.customer-quota-grid>div{
    padding:12px;
    border:1px solid var(--cw-card-border);
    border-radius:11px;
    background:#faf9fc;
}

.customer-info-list span,
.customer-info-list strong,
.customer-info-list small,
.customer-quota-grid span,
.customer-quota-grid strong{
    display:block;
}

.customer-info-list span,
.customer-quota-grid span{
    color:var(--cw-muted);
    font-size:10px;
}

.customer-info-list strong,
.customer-quota-grid strong{
    margin-top:4px;
    color:var(--cw-heading);
    font-size:12px;
}

.customer-info-list small{
    margin-top:3px;
    color:var(--cw-muted);
    font-size:10px;
}

.customer-quota-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.invoice-preview-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:15px;
    padding:14px;
    border:1px solid #ddd5fb;
    border-radius:12px;
    background:#f8f5ff;
}

.invoice-preview-box span{
    color:#716b7d;
    font-size:11px;
}

.invoice-preview-box strong{
    color:var(--cw-primary);
    font-size:21px;
}

@media(max-width:1199.98px){
    .customer-stat-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:991.98px){
    .customer-detail-hero{
        flex-direction:column;
    }

    .customer-detail-actions .btn{
        width:100%;
    }

    .customer-detail-actions{
        width:100%;
    }

    .customer-detail-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:575.98px){
    .customer-stat-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .customer-info-list,
    .customer-quota-grid{
        grid-template-columns:1fr;
    }

    .customer-detail-identity{
        align-items:flex-start;
    }

    .customer-detail-avatar{
        width:50px;
        height:50px;
    }

    .customer-detail-identity h2{
        font-size:22px;
    }
}


/* ===== Customer Detail Visibility Fix ===== */
.superadmin-quick-actions{
    margin-bottom:14px;
}

.superadmin-quick-actions>a{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 18px;
    gap:12px;
    align-items:center;
    padding:14px 16px;
    border:1px solid #ddd5fb;
    border-radius:14px;
    color:inherit;
    background:linear-gradient(135deg,#faf8ff,#f3efff);
    text-decoration:none;
    transition:.16s ease;
}

.superadmin-quick-actions>a:hover{
    border-color:#bfaef6;
    box-shadow:0 12px 28px rgba(72,50,155,.10);
    transform:translateY(-1px);
}

.superadmin-quick-actions>a>span{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,#7656e7,#9d85ef);
}

.superadmin-quick-actions svg{
    width:17px;
    height:17px;
}

.superadmin-quick-actions strong,
.superadmin-quick-actions small{
    display:block;
}

.superadmin-quick-actions strong{
    color:var(--cw-heading);
    font-size:13px;
}

.superadmin-quick-actions small{
    margin-top:3px;
    color:var(--cw-muted);
    font-size:10px;
    line-height:1.45;
}

.customer-detail-page .table-action-btn,
.superadmin-account-page .table-action-btn{
    text-decoration:none;
}


/* ===== Superadmin Payment Management ===== */
.payment-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:11px;
}

.payment-summary-grid article{
    display:flex;
    align-items:center;
    gap:11px;
    padding:15px;
    border:1px solid var(--cw-card-border);
    border-radius:14px;
    background:#fff;
    box-shadow:var(--cw-card-shadow);
}

.payment-summary-grid article.wide{
    grid-column:span 2;
}

.payment-summary-icon{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:42px;
    height:42px;
    border-radius:12px;
}

.payment-summary-icon svg{
    width:18px;
    height:18px;
}

.payment-summary-icon.primary{
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
}

.payment-summary-icon.warning{
    color:#956800;
    background:#fff5d8;
}

.payment-summary-icon.success{
    color:#16875b;
    background:#eaf9f1;
}

.payment-summary-icon.danger{
    color:#c63852;
    background:#fff3f5;
}

.payment-summary-grid small,
.payment-summary-grid strong{
    display:block;
}

.payment-summary-grid small{
    color:var(--cw-muted);
    font-size:10px;
}

.payment-summary-grid strong{
    margin-top:3px;
    color:var(--cw-heading);
    font-size:21px;
}

.payment-toolbar .payment-date-input{
    width:150px;
    min-width:150px;
}

.payment-management-page .table th:last-child,
.payment-management-page .table td:last-child{
    min-width:170px;
    width:170px;
}

.payment-detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.payment-detail-grid>div{
    padding:11px;
    border:1px solid var(--cw-card-border);
    border-radius:11px;
    background:#faf9fc;
}

.payment-detail-grid>div.wide{
    grid-column:1/-1;
}

.payment-detail-grid span,
.payment-detail-grid strong{
    display:block;
}

.payment-detail-grid span{
    color:var(--cw-muted);
    font-size:10px;
}

.payment-detail-grid strong{
    margin-top:4px;
    color:var(--cw-heading);
    font-size:12px;
    overflow-wrap:anywhere;
}

@media(max-width:991.98px){
    .payment-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .payment-summary-grid article.wide{
        grid-column:span 1;
    }
}

@media(max-width:767.98px){
    .payment-toolbar .payment-date-input{
        width:100%;
        min-width:0;
    }
}

@media(max-width:575.98px){
    .payment-summary-grid{
        grid-template-columns:1fr;
    }

    .payment-detail-grid{
        grid-template-columns:1fr;
    }

    .payment-detail-grid>div.wide{
        grid-column:auto;
    }
}


/* ===== Customer Complete Payment Flow ===== */
.customer-payment-flow-card{
    overflow:hidden;
}

.customer-payment-steps{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
    margin-bottom:14px;
}

.customer-payment-steps span{
    display:flex;
    align-items:center;
    gap:7px;
    padding:9px 10px;
    border:1px solid var(--cw-card-border);
    border-radius:10px;
    color:#777184;
    background:#faf9fc;
    font-size:10px;
    font-weight:700;
}

.customer-payment-steps b{
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    border-radius:50%;
    color:#fff;
    background:#a6a0b3;
    font-size:9px;
}

.customer-payment-steps span.active{
    color:var(--cw-primary);
    border-color:#cabdf5;
    background:#f7f3ff;
}

.customer-payment-steps span.active b{
    background:var(--cw-primary);
}

.payment-bank-card{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:12px;
    align-items:start;
    padding:14px;
    border:1px solid #d9d0f7;
    border-radius:13px;
    background:linear-gradient(135deg,#faf8ff,#f2edff);
}

.payment-bank-icon{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border-radius:13px;
    color:#fff;
    background:linear-gradient(135deg,#7555e6,#9c82ef);
}

.payment-bank-icon svg{
    width:20px;
    height:20px;
}

.payment-bank-card small,
.payment-bank-card strong,
.payment-bank-card p,
.payment-bank-card em{
    display:block;
}

.payment-bank-card small{
    color:#797287;
    font-size:10px;
}

.payment-bank-card strong{
    margin-top:2px;
    color:var(--cw-heading);
    font-size:14px;
}

.payment-bank-card p{
    margin:3px 0 0;
    color:#5f586d;
    font-size:12px;
}

.payment-bank-card em{
    margin-top:7px;
    color:#777184;
    font-size:10px;
    font-style:normal;
}

.payment-proof-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:15px;
    padding:13px;
    border:1px solid #d9d0f7;
    border-radius:11px;
    background:#f7f3ff;
}

.payment-proof-summary span{
    color:#706979;
    font-size:11px;
}

.payment-proof-summary strong{
    color:var(--cw-primary);
    font-size:19px;
}

@media(max-width:991.98px){
    .customer-payment-steps{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:575.98px){
    .customer-payment-steps{
        grid-template-columns:1fr;
    }

    .payment-bank-card{
        grid-template-columns:1fr;
    }
}


/* ===== Payment Proof Modal + Method Guide ===== */
.payment-method-guide{
    margin-top:14px;
}

.payment-method-guide-head h4{
    margin:5px 0 3px;
    color:var(--cw-heading);
    font-size:17px;
    font-weight:900;
}

.payment-method-guide-head p{
    margin:0;
    color:var(--cw-muted);
    font-size:11px;
}

.payment-method-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:12px;
}

.payment-method-card{
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    gap:10px;
    align-items:start;
    width:100%;
    padding:12px;
    border:1px solid var(--cw-card-border);
    border-radius:12px;
    color:inherit;
    background:#fff;
    text-decoration:none;
}

button.payment-method-card{
    cursor:pointer;
}

.payment-method-card.active,
.payment-method-card:hover{
    border-color:#c8baf5;
    background:#f8f5ff;
}

.payment-method-icon{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:11px;
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
}

.payment-method-icon svg{
    width:17px;
    height:17px;
}

.payment-method-card small,
.payment-method-card strong,
.payment-method-card p{
    display:block;
}

.payment-method-card small{
    color:var(--cw-muted);
    font-size:9px;
}

.payment-method-card strong{
    margin-top:2px;
    color:var(--cw-heading);
    font-size:12px;
}

.payment-method-card p{
    margin:3px 0 0;
    color:#6e6879;
    font-size:10px;
}

.payment-instruction-card{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:11px;
    margin-top:11px;
    padding:13px;
    border:1px solid #d9d0f7;
    border-radius:12px;
    background:linear-gradient(135deg,#faf8ff,#f4f0ff);
}

.payment-instruction-card>span{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:11px;
    color:#fff;
    background:var(--cw-primary);
}

.payment-instruction-card svg{
    width:17px;
    height:17px;
}

.payment-instruction-card strong{
    color:var(--cw-heading);
    font-size:12px;
}

.payment-instruction-card ol{
    margin:8px 0 0;
    padding-left:18px;
    color:#625c6d;
    font-size:10px;
    line-height:1.65;
}

.payment-instruction-card p{
    margin:8px 0 0;
    color:var(--cw-primary);
    font-size:10px;
    font-weight:700;
}

.payment-proof-image{
    display:block;
    width:auto;
    max-width:100%;
    max-height:68vh;
    margin:auto;
    border:1px solid var(--cw-card-border);
    border-radius:12px;
    background:#f5f4f8;
    object-fit:contain;
}

.payment-proof-frame{
    display:block;
    width:100%;
    min-height:62vh;
    border:1px solid var(--cw-card-border);
    border-radius:12px;
    background:#f5f4f8;
}

.payment-proof-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.payment-proof-meta>div{
    padding:10px;
    border:1px solid var(--cw-card-border);
    border-radius:10px;
    background:#faf9fc;
}

.payment-proof-meta>div.wide{
    grid-column:1/-1;
}

.payment-proof-meta span,
.payment-proof-meta strong{
    display:block;
}

.payment-proof-meta span{
    color:var(--cw-muted);
    font-size:9px;
}

.payment-proof-meta strong{
    margin-top:3px;
    color:var(--cw-heading);
    font-size:11px;
    overflow-wrap:anywhere;
}

.payment-qris-image{
    display:block;
    width:min(100%,360px);
    max-height:65vh;
    margin:auto;
    border:1px solid var(--cw-card-border);
    border-radius:14px;
    object-fit:contain;
}

@media(max-width:767.98px){
    .payment-method-grid{
        grid-template-columns:1fr;
    }

    .payment-proof-frame{
        min-height:55vh;
    }
}

@media(max-width:575.98px){
    .payment-instruction-card{
        grid-template-columns:1fr;
    }

    .payment-proof-meta{
        grid-template-columns:1fr;
    }

    .payment-proof-meta>div.wide{
        grid-column:auto;
    }
}


/* ===== Dynamic Payment Settings ===== */
.payment-setting-grid{
    display:grid;
    gap:13px;
}

.payment-setting-section{
    padding:15px;
    border:1px solid var(--cw-card-border);
    border-radius:14px;
    background:#faf9fc;
}

.payment-setting-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:13px;
}

.payment-setting-title>svg{
    width:18px;
    height:18px;
    color:var(--cw-primary);
}

.payment-setting-title strong,
.payment-setting-title small{
    display:block;
}

.payment-setting-title strong{
    color:var(--cw-heading);
    font-size:13px;
}

.payment-setting-title small{
    margin-top:2px;
    color:var(--cw-muted);
    font-size:10px;
}

.payment-qris-setting{
    display:grid;
    grid-template-columns:180px minmax(0,1fr);
    gap:14px;
    align-items:start;
}

.payment-qris-preview{
    display:grid;
    place-items:center;
    min-height:180px;
    overflow:hidden;
    border:1px dashed #cfc7df;
    border-radius:13px;
    background:#fff;
}

.payment-qris-preview img{
    display:block;
    width:100%;
    max-height:260px;
    object-fit:contain;
}

.payment-qris-preview span{
    display:grid;
    place-items:center;
    gap:7px;
    color:var(--cw-muted);
    font-size:10px;
}

.payment-qris-preview svg{
    width:22px;
    height:22px;
}

@media(max-width:767.98px){
    .payment-qris-setting{
        grid-template-columns:1fr;
    }

    .payment-qris-preview{
        min-height:220px;
    }
}


/* ===== Hybrid PAYG Wallet ===== */
.wallet-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:11px;
}
.wallet-summary-grid article{
    padding:16px;
    border:1px solid var(--cw-card-border);
    border-radius:14px;
    background:#fff;
    box-shadow:var(--cw-card-shadow);
}
.wallet-summary-grid span,
.wallet-summary-grid strong,
.wallet-summary-grid small{
    display:block;
}
.wallet-summary-grid span{
    color:var(--cw-muted);
    font-size:10px;
}
.wallet-summary-grid strong{
    margin-top:5px;
    color:var(--cw-heading);
    font-size:22px;
}
.wallet-summary-grid small{
    margin-top:5px;
    color:var(--cw-primary);
    font-size:9px;
}
.wallet-balance-card{
    background:linear-gradient(135deg,#f8f4ff,#fff)!important;
    border-color:#cfc1f8!important;
}
.wallet-rate-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}
.wallet-rate-grid>div{
    padding:13px;
    border:1px solid var(--cw-card-border);
    border-radius:12px;
    background:#faf9fc;
}
.wallet-rate-grid span,
.wallet-rate-grid strong,
.wallet-rate-grid small{
    display:block;
}
.wallet-rate-grid span{color:var(--cw-muted);font-size:10px}
.wallet-rate-grid strong{margin-top:4px;color:var(--cw-primary);font-size:17px}
.wallet-rate-grid small{margin-top:3px;color:var(--cw-muted);font-size:9px}
.wallet-quick-amounts{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:10px;
}
.wallet-quick-amounts button{
    padding:6px 10px;
    border:1px solid #d8cef8;
    border-radius:9px;
    color:var(--cw-primary);
    background:#f8f5ff;
    font-size:10px;
    font-weight:800;
}
@media(max-width:991.98px){
    .wallet-summary-grid,.wallet-rate-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:575.98px){
    .wallet-summary-grid,.wallet-rate-grid{
        grid-template-columns:1fr;
    }
}


/* ===== Wallet Menu & Navbar Balance ===== */
.topbar{
    gap:10px;
}

.navbar-wallet-balance{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:132px;
    padding:7px 10px;
    margin-left:auto;
    border:1px solid var(--cw-card-border);
    border-radius:12px;
    color:inherit;
    background:#fff;
    text-decoration:none;
    box-shadow:0 5px 16px rgba(52,40,92,.05);
    transition:.16s ease;
}

.navbar-wallet-balance:hover{
    color:var(--cw-primary);
    border-color:#c8b9f5;
    background:#faf8ff;
}

.navbar-wallet-balance.is-low{
    border-color:#ffd6a6;
    background:#fff8ed;
}

.navbar-wallet-icon{
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    flex:0 0 auto;
    border-radius:9px;
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
}

.navbar-wallet-balance.is-low .navbar-wallet-icon{
    color:#b86700;
    background:#fff0d7;
}

.navbar-wallet-icon svg{
    width:14px;
    height:14px;
}

.navbar-wallet-copy{
    min-width:0;
}

.navbar-wallet-copy small,
.navbar-wallet-copy strong{
    display:block;
}

.navbar-wallet-copy small{
    color:var(--cw-muted);
    font-size:8px;
    line-height:1;
}

.navbar-wallet-copy strong{
    margin-top:3px;
    overflow:hidden;
    color:var(--cw-heading);
    font-size:11px;
    line-height:1.1;
    text-overflow:ellipsis;
    white-space:nowrap;
}

@media(max-width:767.98px){
    .navbar-wallet-balance{
        min-width:0;
        margin-left:auto;
        padding:6px;
    }

    .navbar-wallet-copy{
        display:none;
    }
}


/* ===== Navbar Account, Plan, Logout & Server Status ===== */
.topbar-actions{
    display:flex;
    align-items:center;
    gap:9px;
    margin-left:auto;
}

.navbar-account-dropdown{
    flex:0 0 auto;
}

.navbar-account-button{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:178px;
    padding:6px 9px;
    border:1px solid var(--cw-card-border);
    border-radius:12px;
    color:inherit;
    background:#fff;
    box-shadow:0 5px 16px rgba(52,40,92,.05);
    cursor:pointer;
    text-align:left;
    transition:.16s ease;
}

.navbar-account-button:hover,
.navbar-account-button[aria-expanded="true"]{
    border-color:#c7b8f4;
    background:#faf8ff;
}

.navbar-account-avatar{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    flex:0 0 auto;
    border-radius:10px;
    color:#fff;
    background:linear-gradient(135deg,#7555e6,#9d84ef);
    font-size:13px;
    font-weight:900;
}

.navbar-account-copy{
    min-width:0;
    flex:1;
}

.navbar-account-copy strong,
.navbar-account-copy small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.navbar-account-copy strong{
    color:var(--cw-heading);
    font-size:11px;
    line-height:1.2;
}

.navbar-account-copy small{
    margin-top:3px;
    color:var(--cw-primary);
    font-size:8px;
    font-weight:700;
    line-height:1.1;
}

.navbar-account-chevron{
    width:14px;
    height:14px;
    color:var(--cw-muted);
}

.navbar-account-menu{
    width:230px;
    margin-top:7px!important;
    padding:7px;
    border:1px solid var(--cw-card-border);
    border-radius:13px;
    box-shadow:0 18px 45px rgba(43,31,79,.14);
}

.navbar-account-menu-head{
    padding:9px 10px 10px;
}

.navbar-account-menu-head span,
.navbar-account-menu-head small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.navbar-account-menu-head span{
    color:var(--cw-heading);
    font-size:11px;
    font-weight:800;
}

.navbar-account-menu-head small{
    margin-top:3px;
    color:var(--cw-primary);
    font-size:9px;
    font-weight:700;
}

.navbar-account-menu .dropdown-item{
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 10px;
    border-radius:9px;
    font-size:10px;
    font-weight:700;
}

.navbar-account-menu .dropdown-item svg{
    width:14px;
    height:14px;
}

.server-status-card{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:145px;
    padding:7px 9px;
    border:1px solid #ded9e8;
    border-radius:12px;
    background:#fff;
    box-shadow:0 5px 16px rgba(52,40,92,.05);
}

.server-status-icon{
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    flex:0 0 auto;
    border-radius:9px;
}

.server-status-icon svg,
.server-status-signal svg{
    width:14px;
    height:14px;
}

.server-status-copy{
    min-width:0;
    flex:1;
}

.server-status-copy small,
.server-status-copy strong{
    display:block;
}

.server-status-copy small{
    color:var(--cw-muted);
    font-size:8px;
    line-height:1;
}

.server-status-copy strong{
    margin-top:3px;
    font-size:10px;
    line-height:1.1;
}

.server-status-signal{
    display:grid;
    place-items:center;
}

.server-status-card.checking{
    color:#8066c7;
    background:#faf8ff;
    border-color:#d8cff3;
}

.server-status-card.checking .server-status-icon{
    color:#7656e7;
    background:#eee8ff;
}

.server-status-card.checking .server-status-signal{
    animation:serverSpin 1s linear infinite;
}

.server-status-card.online{
    color:#157651;
    background:#f1fbf6;
    border-color:#bce6d1;
}

.server-status-card.online .server-status-icon{
    color:#157651;
    background:#daf3e5;
}

.server-status-card.offline{
    color:#b92f48;
    background:#fff4f6;
    border-color:#f0bec8;
}

.server-status-card.offline .server-status-icon{
    color:#b92f48;
    background:#ffe0e6;
}

@keyframes serverSpin{
    to{transform:rotate(360deg)}
}

@media(max-width:991.98px){
    .topbar-title{
        min-width:0;
        flex:1;
    }

    .server-status-copy,
    .navbar-account-copy{
        display:none;
    }

    .server-status-card,
    .navbar-account-button{
        min-width:0;
        padding:6px;
    }

    .server-status-card{
        gap:5px;
    }
}

@media(max-width:575.98px){
    .topbar-actions{
        gap:6px;
    }

    .server-status-card{
        display:none;
    }

    .navbar-account-button{
        border:none;
        background:transparent;
        box-shadow:none;
    }

    .navbar-account-chevron{
        display:none;
    }
}


/* ===== Navbar Dropdown Visibility Fix ===== */
.topbar,
.topbar-actions,
.navbar-account-dropdown{
    overflow:visible!important;
}

.navbar-account-dropdown{
    position:relative;
    z-index:1060;
}

.navbar-account-button{
    position:relative;
    z-index:1061;
}

.navbar-account-menu{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    left:auto;
    z-index:1080;
    min-width:230px;
}

.navbar-account-dropdown .dropdown-menu.show,
.navbar-account-menu.show{
    display:block;
}

.app-shell,
.main-content,
.content-area{
    overflow:visible;
}

@media(max-width:575.98px){
    .navbar-account-menu{
        right:0;
        left:auto;
        min-width:210px;
    }
}


/* ===== Wallet Top-up WhatsApp Notification Settings ===== */
.wallet-wa-setting-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.wallet-wa-setting-item{
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr);
    gap:9px;
    align-items:center;
    padding:11px;
    border:1px solid var(--cw-card-border);
    border-radius:11px;
    background:#fff;
    cursor:pointer;
}

.wallet-wa-setting-item>input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.wallet-wa-switch{
    position:relative;
    width:34px;
    height:19px;
    border-radius:999px;
    background:#d8d4df;
    transition:.16s ease;
}

.wallet-wa-switch::after{
    position:absolute;
    top:3px;
    left:3px;
    width:13px;
    height:13px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 6px rgba(35,25,64,.18);
    content:'';
    transition:.16s ease;
}

.wallet-wa-setting-item>input:checked
    +.wallet-wa-switch{
    background:var(--cw-primary);
}

.wallet-wa-setting-item>input:checked
    +.wallet-wa-switch::after{
    transform:translateX(15px);
}

.wallet-wa-setting-copy strong,
.wallet-wa-setting-copy small{
    display:block;
}

.wallet-wa-setting-copy strong{
    color:var(--cw-heading);
    font-size:11px;
}

.wallet-wa-setting-copy small{
    margin-top:3px;
    color:var(--cw-muted);
    font-size:9px;
    line-height:1.45;
}

@media(max-width:767.98px){
    .wallet-wa-setting-grid{
        grid-template-columns:1fr;
    }
}


/* ===== Scrollable + Icon-only Collapsible Sidebar ===== */
.sidebar{
    overflow:hidden;
    transition:
        width .22s ease,
        padding .22s ease,
        transform .25s ease;
}

.sidebar .brand{
    flex:0 0 auto;
    min-height:42px;
}

.sidebar .brand-copy{
    min-width:0;
    flex:1;
    overflow:hidden;
    white-space:nowrap;
}

.sidebar-collapse-toggle{
    place-items:center;
    width:30px;
    height:30px;
    flex:0 0 auto;
    padding:0;
    border:0;
    border-radius:9px;
    color:#78728a;
    background:#f5f3fa;
    transition:.16s ease;
}

.sidebar-collapse-toggle:hover{
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
}

.sidebar-collapse-toggle svg{
    width:15px;
    height:15px;
}

.sidebar-nav{
    min-height:0;
    flex:1 1 auto;
    overflow-x:hidden;
    overflow-y:auto;
    padding-right:5px;
    padding-bottom:18px;
    scrollbar-width:thin;
    scrollbar-color:#d7d0eb transparent;
}

.sidebar-nav::-webkit-scrollbar{
    width:5px;
}

.sidebar-nav::-webkit-scrollbar-track{
    background:transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:#d7d0eb;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover{
    background:#bfb3e4;
}

.sidebar,
.main-content{
    transition:
        width .22s ease,
        margin-left .22s ease;
}

@media(min-width:992px){
    body.sidebar-collapsed .sidebar{
        width:82px;
        padding:24px 14px;
    }

    body.sidebar-collapsed .main-content{
        width:calc(100% - 82px);
        margin-left:82px;
    }

    body.sidebar-collapsed .brand{
        justify-content:center;
    }

    body.sidebar-collapsed .brand-mark{
        width:42px;
        min-width:42px;
    }

    body.sidebar-collapsed .brand-copy{
        display:none;
    }

    body.sidebar-collapsed .sidebar-collapse-toggle{
        position:absolute;
        top:72px;
        left:50%;
        transform:translateX(-50%);
    }

    body.sidebar-collapsed .sidebar-nav{
        margin-top:68px;
        padding-right:0;
    }

    body.sidebar-collapsed .sidebar-section-label,
    body.sidebar-collapsed .superadmin-sidebar-note{
        display:none;
    }

    body.sidebar-collapsed .sidebar-nav .nav-link{
        position:relative;
        justify-content:center;
        min-height:44px;
        padding:11px;
        gap:0;
    }

    body.sidebar-collapsed .sidebar-nav .nav-link>span{
        display:none;
    }

    body.sidebar-collapsed .sidebar-nav .nav-link svg{
        width:20px;
        height:20px;
        flex:0 0 auto;
    }

    body.sidebar-collapsed .sidebar-group{
        display:block;
    }

    body.sidebar-collapsed .sidebar-group-toggle{
        justify-content:center;
        min-height:44px;
        padding:11px;
    }

    body.sidebar-collapsed
    .sidebar-group-toggle>span{
        gap:0;
    }

    body.sidebar-collapsed
    .sidebar-group-toggle>span>span,
    body.sidebar-collapsed
    .sidebar-group-chevron,
    body.sidebar-collapsed
    .sidebar-group-menu{
        display:none!important;
    }

    body.sidebar-collapsed
    .sidebar-group-toggle svg{
        width:20px;
        height:20px;
    }

    body.sidebar-collapsed
    .sidebar-nav [title]{
        cursor:pointer;
    }

    body.sidebar-collapsed
    .sidebar-nav [title]::after{
        position:fixed;
        z-index:1200;
        left:72px;
        padding:6px 9px;
        border-radius:8px;
        color:#fff;
        background:#241f31;
        box-shadow:0 8px 22px rgba(25,18,50,.18);
        content:attr(title);
        font-size:10px;
        font-weight:700;
        opacity:0;
        pointer-events:none;
        transform:translateY(-50%) translateX(-4px);
        transition:.12s ease;
        white-space:nowrap;
    }

    body.sidebar-collapsed
    .sidebar-nav [title]:hover::after{
        opacity:1;
        transform:translateY(-50%) translateX(0);
    }
}

@media(max-width:991.98px){
    body.sidebar-collapsed .sidebar{
        width:260px;
        padding:24px;
    }

    body.sidebar-collapsed .main-content{
        width:100%;
        margin-left:0;
    }

    .sidebar-nav{
        padding-right:4px;
    }
}


/* ===== Auto-suspend Subscription ===== */
.auto-suspend-setting-grid{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(240px,.75fr);
    gap:10px;
    align-items:stretch;
}

.tenant-suspended-banner{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
    padding:13px 15px;
    border:1px solid #f0c36d;
    border-radius:14px;
    color:#6f4800;
    background:#fff8e8;
    box-shadow:0 8px 22px rgba(112,72,0,.06);
}

.tenant-suspended-icon{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    flex:0 0 auto;
    border-radius:11px;
    color:#a46500;
    background:#ffe8b2;
}

.tenant-suspended-icon svg{
    width:17px;
    height:17px;
}

.tenant-suspended-banner>div{
    min-width:0;
    flex:1;
}

.tenant-suspended-banner strong{
    display:block;
    font-size:12px;
}

.tenant-suspended-banner p{
    margin:3px 0 0;
    font-size:10px;
    line-height:1.5;
}

.tenant-suspended-banner .btn{
    flex:0 0 auto;
}

@media(max-width:767.98px){
    .auto-suspend-setting-grid{
        grid-template-columns:1fr;
    }

    .tenant-suspended-banner{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .tenant-suspended-banner .btn{
        width:100%;
    }
}


/* ===== Customer Impersonation ===== */
.impersonation-banner{
    position:fixed;
    inset:0 0 auto 0;
    z-index:1100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:54px;
    padding:8px 18px;
    color:#fff;
    background:linear-gradient(135deg,#33215f,#6c4df6);
    box-shadow:0 8px 24px rgba(41,25,85,.22);
}
.impersonation-banner-copy{display:flex;align-items:center;gap:10px;min-width:0}
.impersonation-banner-icon{
    display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;
    border-radius:10px;color:#fff;background:rgba(255,255,255,.15)
}
.impersonation-banner-icon svg{width:16px;height:16px}
.impersonation-banner-copy strong,.impersonation-banner-copy small{display:block}
.impersonation-banner-copy strong{font-size:11px}
.impersonation-banner-copy small{margin-top:2px;color:rgba(255,255,255,.78);font-size:9px}
.impersonation-stop-form{flex:0 0 auto}
.has-impersonation-banner{padding-top:54px}
.has-impersonation-banner .sidebar{top:54px}
.has-impersonation-banner .topbar{top:54px}
.customer-detail-hero{display:flex;align-items:center;justify-content:space-between;gap:18px}
.customer-impersonate-btn{flex:0 0 auto}

@media(max-width:767.98px){
    .impersonation-banner{align-items:flex-start;flex-wrap:wrap;padding:9px 12px}
    .impersonation-stop-form{width:100%}
    .impersonation-stop-form .btn{width:100%}
    .has-impersonation-banner{padding-top:98px}
    .has-impersonation-banner .sidebar{top:98px}
    .has-impersonation-banner .topbar{top:98px}
    .customer-detail-hero{align-items:flex-start;flex-direction:column}
    .customer-impersonate-btn{width:100%}
}


/* ===== Midtrans Payment Gateway ===== */
.gateway-setting-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.gateway-webhook-box{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:12px;
    padding:12px;
    border:1px dashed #cfc5ef;
    border-radius:12px;
    background:#faf8ff;
}

.gateway-webhook-box>span{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    flex:0 0 auto;
    border-radius:10px;
    color:var(--cw-primary);
    background:#eee9ff;
}

.gateway-webhook-box svg{
    width:16px;
    height:16px;
}

.gateway-webhook-box strong,
.gateway-webhook-box code,
.gateway-webhook-box small{
    display:block;
}

.gateway-webhook-box strong{
    font-size:11px;
}

.gateway-webhook-box code{
    margin-top:5px;
    padding:7px 9px;
    border-radius:8px;
    color:#5137bc;
    background:#eee9ff;
    font-size:9px;
    overflow-wrap:anywhere;
}

.gateway-webhook-box small{
    margin-top:5px;
    color:var(--cw-muted);
    font-size:9px;
}

@media(max-width:767.98px){
    .gateway-setting-grid{
        grid-template-columns:1fr;
    }
}


/* ===== Superadmin Monitoring Log + Simple Sidebar ===== */
.monitoring-log-tabs{
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:16px;
    padding:5px;
    border:1px solid var(--cw-border);
    border-radius:13px;
    background:#f7f7fb;
    overflow-x:auto;
}

.monitoring-log-tab{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:38px;
    padding:8px 13px;
    border:0;
    border-radius:10px;
    color:#777989;
    background:transparent;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

.monitoring-log-tab svg{
    width:15px;
    height:15px;
}

.monitoring-log-tab:hover{
    color:var(--cw-primary);
    background:#efecfa;
}

.monitoring-log-tab.active{
    color:#fff;
    background:var(--cw-primary);
    box-shadow:0 6px 18px rgba(108,77,246,.18);
}

.monitoring-log-panel{
    display:none;
}

.monitoring-log-panel.active{
    display:block;
}

.monitoring-detail-payload{
    max-height:520px;
    margin:0;
    padding:14px;
    border-radius:12px;
    color:#f8f8fc;
    background:#17151f;
    font-size:10px;
    line-height:1.55;
    overflow:auto;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

@media(max-width:767.98px){
    .monitoring-log-tabs{
        align-items:stretch;
    }

    .monitoring-log-tab{
        flex:1 0 auto;
    }
}


/* ===== Sidebar Menu Spacing Fix =====
   Prevent CSS Grid from stretching a few menu rows
   to fill the full sidebar height. */
.sidebar-nav{
    align-content:start;
    grid-auto-rows:max-content;
}

.sidebar-nav>.nav-link,
.sidebar-nav>.sidebar-group{
    align-self:start;
}

.sidebar-group{
    align-content:start;
}

.sidebar-group-menu{
    align-content:start;
}

@media(min-width:992px){
    body.sidebar-collapsed .sidebar-nav{
        align-content:start;
        grid-auto-rows:max-content;
    }
}


/* ===== Clean Payment Management ===== */
.payment-management-clean{
    gap:14px;
}

.payment-page-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    padding:2px 2px 4px;
}

.payment-page-heading h2{
    margin:5px 0 4px;
    font-size:24px;
}

.payment-page-heading p{
    max-width:720px;
    margin:0;
    color:var(--cw-muted);
    font-size:11px;
}

.payment-summary-compact{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:9px;
}

.payment-summary-compact article{
    min-height:78px;
    padding:12px;
    border-radius:13px;
}

.payment-summary-compact article.revenue{
    grid-column:span 1;
}

.payment-summary-compact small{
    font-size:9px;
}

.payment-summary-compact strong{
    font-size:18px;
}

.payment-summary-icon.gateway{
    color:#5c42ca;
    background:#ede9ff;
}

.payment-list-card{
    padding:16px;
}

.payment-filter-bar{
    display:grid;
    gap:9px;
    margin-bottom:13px;
    padding:11px;
    border:1px solid var(--cw-border);
    border-radius:13px;
    background:#fafafe;
}

.payment-filter-main,
.payment-filter-secondary{
    display:flex;
    align-items:center;
    gap:8px;
}

.payment-filter-main .payment-search-box{
    flex:1 1 320px;
    min-width:240px;
    max-width:none;
}

.payment-filter-main .form-select{
    flex:0 0 170px;
    width:170px;
}

.payment-filter-secondary{
    justify-content:flex-end;
}

.payment-date-range{
    display:flex;
    align-items:center;
    gap:7px;
}

.payment-date-range span{
    color:var(--cw-muted);
    font-size:9px;
}

.payment-date-range .form-control{
    width:145px;
}

.payment-per-page{
    width:82px;
}

.payment-table-wrap{
    border:1px solid var(--cw-border);
    border-radius:13px;
    overflow:hidden;
}

.payment-table{
    margin-bottom:0;
}

.payment-table thead th{
    background:#f8f7fb;
}

.payment-table td{
    vertical-align:middle;
}

.payment-invoice-number{
    font-size:11px;
}

.payment-total-value{
    white-space:nowrap;
    font-size:12px;
}

.payment-method-badge,
.payment-status-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-top:5px;
    padding:4px 7px;
    border-radius:999px;
    font-size:8px;
    font-weight:800;
    text-transform:capitalize;
}

.payment-method-badge svg{
    width:11px;
    height:11px;
}

.payment-method-badge.gateway{
    color:#5b3fc6;
    background:#eee9ff;
}

.payment-method-badge.manual{
    color:#5f6674;
    background:#f0f1f4;
}

.payment-status-badge.success{
    color:#08784c;
    background:#e6f7ef;
}

.payment-status-badge.warning{
    color:#8c6200;
    background:#fff3cf;
}

.payment-status-badge.info{
    color:#166b8f;
    background:#e8f6fb;
}

.payment-status-badge.danger{
    color:#b52d47;
    background:#fff0f3;
}

.payment-status-badge.secondary{
    color:#626775;
    background:#eff0f3;
}

@media(max-width:1199.98px){
    .payment-summary-compact{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .payment-filter-main{
        flex-wrap:wrap;
    }

    .payment-filter-main .payment-search-box{
        flex:1 1 100%;
    }

    .payment-filter-main .form-select{
        flex:1 1 160px;
        width:auto;
    }
}

@media(max-width:767.98px){
    .payment-page-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .payment-page-heading .btn{
        width:100%;
    }

    .payment-summary-compact{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .payment-filter-secondary{
        align-items:stretch;
        flex-direction:column;
    }

    .payment-date-range{
        width:100%;
    }

    .payment-date-range .form-control{
        flex:1;
        width:auto;
        min-width:0;
    }

    .payment-per-page{
        width:100%;
    }
}

@media(max-width:479.98px){
    .payment-summary-compact{
        grid-template-columns:1fr;
    }
}


/* ===== System Announcement ===== */
.announcement-settings-card{
    overflow:hidden;
}

.announcement-setting-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.announcement-setting-grid .announcement-wide{
    grid-column:1/-1;
}

.announcement-preview-wrap{
    display:grid;
    gap:7px;
    margin-top:15px;
}

.announcement-preview-wrap>span{
    color:var(--cw-muted);
    font-size:9px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.system-announcement-banner{
    display:flex;
    align-items:flex-start;
    gap:11px;
    margin-bottom:14px;
    padding:12px 13px;
    border:1px solid transparent;
    border-radius:13px;
    box-shadow:0 7px 22px rgba(31,27,52,.045);
}

.system-announcement-icon{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    flex:0 0 auto;
    border-radius:10px;
}

.system-announcement-icon svg{
    width:17px;
    height:17px;
}

.system-announcement-copy{
    min-width:0;
    flex:1;
}

.system-announcement-copy strong,
.system-announcement-copy p{
    display:block;
}

.system-announcement-copy strong{
    font-size:11px;
}

.system-announcement-copy p{
    margin:3px 0 0;
    font-size:10px;
    line-height:1.55;
}

.system-announcement-close{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    flex:0 0 auto;
    padding:0;
    border:0;
    border-radius:8px;
    color:inherit;
    background:transparent;
    opacity:.68;
}

.system-announcement-close:hover{
    background:rgba(0,0,0,.06);
    opacity:1;
}

.system-announcement-close svg{
    width:14px;
    height:14px;
}

.system-announcement-banner.info{
    color:#155f80;
    border-color:#bfe4f3;
    background:#eef9fd;
}

.system-announcement-banner.info
.system-announcement-icon{
    background:#d9f0f9;
}

.system-announcement-banner.warning{
    color:#795300;
    border-color:#f0d58c;
    background:#fff9e9;
}

.system-announcement-banner.warning
.system-announcement-icon{
    background:#ffedb9;
}

.system-announcement-banner.danger{
    color:#9d2940;
    border-color:#efbdc7;
    background:#fff1f4;
}

.system-announcement-banner.danger
.system-announcement-icon{
    background:#ffdce3;
}

.system-announcement-banner.success{
    color:#08764a;
    border-color:#b9e4cf;
    background:#edf9f3;
}

.system-announcement-banner.success
.system-announcement-icon{
    background:#d8f2e5;
}

@media(max-width:767.98px){
    .announcement-setting-grid{
        grid-template-columns:1fr;
    }

    .announcement-setting-grid
    .announcement-wide{
        grid-column:auto;
    }
}


/* ===== Complete Engine Monitoring ===== */
.engine-monitoring-page{
    gap:14px;
}

.engine-monitoring-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
}

.engine-monitoring-header h2{
    margin:5px 0 4px;
}

.engine-monitoring-header p{
    max-width:720px;
    margin:0;
    color:var(--cw-muted);
}

.engine-monitoring-actions{
    display:flex;
    align-items:center;
    gap:9px;
}

.engine-auto-refresh{
    display:flex;
    align-items:center;
    gap:7px;
    padding:9px 11px;
    border:1px solid var(--cw-border);
    border-radius:11px;
    background:#fff;
    font-size:10px;
    font-weight:700;
    cursor:pointer;
}

.engine-auto-refresh input{
    accent-color:var(--cw-primary);
}

.engine-health-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px 20px;
    border:1px solid #e6e3ee;
    border-radius:17px;
    background:#fff;
    box-shadow:0 9px 26px rgba(31,27,52,.05);
}

.engine-health-hero.online{
    border-color:#bfe5d2;
    background:linear-gradient(135deg,#f4fcf8,#fff);
}

.engine-health-hero.offline{
    border-color:#efbdc7;
    background:linear-gradient(135deg,#fff3f5,#fff);
}

.engine-health-main{
    display:flex;
    align-items:center;
    gap:13px;
}

.engine-health-icon{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    flex:0 0 auto;
    border-radius:14px;
    color:#777184;
    background:#f0eef6;
}

.engine-health-hero.online
.engine-health-icon{
    color:#0a8153;
    background:#daf3e7;
}

.engine-health-hero.offline
.engine-health-icon{
    color:#ba314c;
    background:#ffdde4;
}

.engine-health-icon svg{
    width:21px;
    height:21px;
}

.engine-health-main small{
    color:var(--cw-muted);
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
}

.engine-health-main h3{
    margin:3px 0 2px;
    font-size:20px;
}

.engine-health-main p{
    margin:0;
    color:var(--cw-muted);
    font-size:10px;
}

.engine-health-meta{
    display:flex;
    align-items:center;
    gap:18px;
}

.engine-health-meta div{
    min-width:90px;
}

.engine-health-meta small,
.engine-health-meta strong{
    display:block;
}

.engine-health-meta small{
    color:var(--cw-muted);
    font-size:8px;
}

.engine-health-meta strong{
    margin-top:3px;
    font-size:11px;
}

.engine-stat-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
}

.engine-stat-grid article{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:76px;
    padding:12px;
    border:1px solid var(--cw-border);
    border-radius:13px;
    background:#fff;
    box-shadow:0 7px 20px rgba(31,27,52,.04);
}

.engine-stat-icon{
    display:grid;
    place-items:center;
    width:39px;
    height:39px;
    flex:0 0 auto;
    border-radius:11px;
}

.engine-stat-icon svg{
    width:17px;
    height:17px;
}

.engine-stat-icon.primary{
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
}

.engine-stat-icon.success{
    color:#0a8153;
    background:#e4f7ed;
}

.engine-stat-icon.warning{
    color:#906300;
    background:#fff3d2;
}

.engine-stat-icon.danger{
    color:#bd324d;
    background:#fff0f3;
}

.engine-stat-grid small,
.engine-stat-grid strong{
    display:block;
}

.engine-stat-grid small{
    color:var(--cw-muted);
    font-size:8px;
}

.engine-stat-grid strong{
    margin-top:3px;
    font-size:17px;
}

.engine-monitoring-grid{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:12px;
}

.engine-resource-list{
    display:grid;
    gap:13px;
}

.engine-resource-list>div>div:first-child{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:6px;
}

.engine-resource-list span{
    color:var(--cw-muted);
    font-size:9px;
}

.engine-resource-list strong{
    font-size:10px;
}

.engine-progress{
    height:8px;
    border-radius:999px;
    background:#eceaf2;
    overflow:hidden;
}

.engine-progress>span{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:var(--cw-primary);
    transition:width .3s ease;
}

.engine-progress>span.warning{
    background:#dfa21b;
}

.engine-progress>span.danger{
    background:#d94a61;
}

.engine-runtime-meta{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin-top:16px;
}

.engine-runtime-meta>div{
    padding:9px;
    border:1px solid var(--cw-border);
    border-radius:10px;
    background:#fafafe;
}

.engine-runtime-meta span,
.engine-runtime-meta strong{
    display:block;
}

.engine-runtime-meta span{
    color:var(--cw-muted);
    font-size:8px;
}

.engine-runtime-meta strong{
    margin-top:3px;
    font-size:10px;
    overflow-wrap:anywhere;
}

.engine-queue-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}

.engine-queue-grid>div{
    padding:12px;
    border:1px solid var(--cw-border);
    border-radius:11px;
    background:#fafafe;
}

.engine-queue-grid span,
.engine-queue-grid strong{
    display:block;
}

.engine-queue-grid span{
    color:var(--cw-muted);
    font-size:8px;
}

.engine-queue-grid strong{
    margin-top:4px;
    font-size:18px;
}

.engine-count-badge{
    padding:6px 9px;
    border-radius:999px;
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
    font-size:9px;
    font-weight:800;
}

.engine-app-stat-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
}

.engine-app-stat-grid>div{
    padding:12px;
    border:1px solid var(--cw-border);
    border-radius:11px;
    background:#fafafe;
}

.engine-app-stat-grid span,
.engine-app-stat-grid strong,
.engine-app-stat-grid small{
    display:block;
}

.engine-app-stat-grid span{
    color:var(--cw-muted);
    font-size:8px;
}

.engine-app-stat-grid strong{
    margin-top:4px;
    font-size:20px;
}

.engine-app-stat-grid small{
    margin-top:2px;
    color:var(--cw-muted);
    font-size:8px;
}

@media(max-width:1199.98px){
    .engine-stat-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .engine-monitoring-grid{
        grid-template-columns:1fr;
    }

    .engine-app-stat-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:767.98px){
    .engine-monitoring-header,
    .engine-health-hero{
        align-items:flex-start;
        flex-direction:column;
    }

    .engine-monitoring-actions{
        width:100%;
    }

    .engine-monitoring-actions .btn{
        flex:1;
    }

    .engine-health-meta{
        width:100%;
        flex-wrap:wrap;
    }

    .engine-stat-grid{
        grid-template-columns:1fr;
    }

    .engine-runtime-meta{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .engine-app-stat-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:479.98px){
    .engine-app-stat-grid,
    .engine-runtime-meta{
        grid-template-columns:1fr;
    }
}


/* ===== Engine Monitoring Data Diagnostics ===== */
.engine-endpoint-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
}

.engine-endpoint-item{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px;
    border:1px solid var(--cw-border);
    border-radius:11px;
    background:#fafafe;
}

.engine-endpoint-item>span{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    flex:0 0 auto;
    border-radius:9px;
}

.engine-endpoint-item.success>span{
    color:#08764a;
    background:#daf3e7;
}

.engine-endpoint-item.danger>span{
    color:#b52d47;
    background:#ffe4ea;
}

.engine-endpoint-item svg{
    width:15px;
    height:15px;
}

.engine-endpoint-item strong,
.engine-endpoint-item small{
    display:block;
}

.engine-endpoint-item strong{
    font-size:9px;
}

.engine-endpoint-item small{
    margin-top:2px;
    color:var(--cw-muted);
    font-size:8px;
}

@media(max-width:991.98px){
    .engine-endpoint-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:479.98px){
    .engine-endpoint-grid{
        grid-template-columns:1fr;
    }
}


/* ===== Superadmin Database Manager ===== */
.database-manager-page{
    gap:14px;
}

.database-page-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
}

.database-page-header h2{
    margin:5px 0 4px;
}

.database-page-header p{
    max-width:700px;
    margin:0;
    color:var(--cw-muted);
}

.database-header-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.database-summary-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:9px;
}

.database-summary-grid article{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:78px;
    padding:12px;
    border:1px solid var(--cw-border);
    border-radius:13px;
    background:#fff;
    box-shadow:0 7px 20px rgba(31,27,52,.04);
}

.database-summary-icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    flex:0 0 auto;
    border-radius:11px;
}

.database-summary-icon svg{
    width:17px;
    height:17px;
}

.database-summary-icon.primary{
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
}

.database-summary-icon.success{
    color:#08764a;
    background:#e1f6eb;
}

.database-summary-icon.warning{
    color:#8d6200;
    background:#fff2cd;
}

.database-summary-grid small,
.database-summary-grid strong{
    display:block;
}

.database-summary-grid small{
    color:var(--cw-muted);
    font-size:8px;
}

.database-summary-grid strong{
    margin-top:3px;
    font-size:17px;
}

.database-info-card{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:8px;
    padding:10px;
    border:1px solid var(--cw-border);
    border-radius:13px;
    background:#fff;
}

.database-info-card>div{
    padding:9px;
    border-radius:9px;
    background:#fafafe;
}

.database-info-card span,
.database-info-card strong{
    display:block;
}

.database-info-card span{
    color:var(--cw-muted);
    font-size:8px;
}

.database-info-card strong{
    margin-top:3px;
    font-size:10px;
    overflow-wrap:anywhere;
}

.database-table-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.database-select-all{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:9px;
    font-weight:700;
    cursor:pointer;
}

.database-select-all input{
    accent-color:var(--cw-primary);
}

.database-table-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.database-table-toolbar .search-box{
    max-width:320px;
}

.database-table-toolbar>span{
    color:var(--cw-muted);
    font-size:9px;
    font-weight:700;
}

.database-check-column{
    width:36px;
    text-align:center;
}

.database-table-checkbox{
    accent-color:var(--cw-primary);
}

.database-bottom-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.database-backup-list,
.database-log-list{
    display:grid;
    gap:7px;
}

.database-backup-list article{
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px;
    border:1px solid var(--cw-border);
    border-radius:11px;
    background:#fafafe;
}

.database-file-icon{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    flex:0 0 auto;
    border-radius:9px;
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
}

.database-file-icon svg{
    width:15px;
    height:15px;
}

.database-file-copy{
    min-width:0;
    flex:1;
}

.database-file-copy strong,
.database-file-copy small{
    display:block;
}

.database-file-copy strong{
    font-size:9px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.database-file-copy small{
    margin-top:2px;
    color:var(--cw-muted);
    font-size:8px;
}

.database-log-list article{
    display:flex;
    align-items:flex-start;
    gap:9px;
    padding:8px 0;
    border-bottom:1px solid var(--cw-border);
}

.database-log-list article:last-child{
    border-bottom:0;
}

.database-log-icon{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    flex:0 0 auto;
    border-radius:9px;
}

.database-log-icon.success{
    color:#08764a;
    background:#e1f6eb;
}

.database-log-icon.danger{
    color:#b52d47;
    background:#ffe6eb;
}

.database-log-icon svg{
    width:14px;
    height:14px;
}

.database-log-list strong,
.database-log-list small{
    display:block;
}

.database-log-list strong{
    font-size:9px;
    text-transform:capitalize;
}

.database-log-list small{
    margin-top:2px;
    color:var(--cw-muted);
    font-size:8px;
    line-height:1.45;
}

.database-confirmation-note,
.database-restore-source,
.database-danger-note{
    display:flex;
    align-items:flex-start;
    gap:9px;
    padding:11px;
    border-radius:11px;
}

.database-confirmation-note{
    color:#4d3ab1;
    background:#f0edff;
}

.database-confirmation-note svg{
    width:16px;
    height:16px;
}

.database-restore-source{
    margin-bottom:12px;
    color:#4d3ab1;
    background:#f3f0ff;
}

.database-restore-source>span{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    flex:0 0 auto;
    border-radius:9px;
    background:#e7e1ff;
}

.database-restore-source svg{
    width:15px;
    height:15px;
}

.database-restore-source strong,
.database-restore-source small{
    display:block;
}

.database-restore-source strong{
    font-size:10px;
}

.database-restore-source small{
    margin-top:2px;
    font-size:8px;
    overflow-wrap:anywhere;
}

.database-danger-note{
    margin:12px 0;
    color:#a32f46;
    border:1px solid #efc2cb;
    background:#fff1f4;
}

.database-danger-note svg{
    width:17px;
    height:17px;
    flex:0 0 auto;
}

.database-danger-note strong,
.database-danger-note span{
    display:block;
}

.database-danger-note strong{
    font-size:10px;
}

.database-danger-note span{
    margin-top:3px;
    font-size:8px;
    line-height:1.5;
}

@media(max-width:1199.98px){
    .database-summary-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .database-info-card{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:767.98px){
    .database-page-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .database-header-actions{
        width:100%;
    }

    .database-header-actions .btn{
        flex:1;
    }

    .database-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .database-info-card{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .database-bottom-grid{
        grid-template-columns:1fr;
    }

    .database-table-actions,
    .database-table-toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .database-table-actions .btn,
    .database-table-toolbar .search-box{
        width:100%;
        max-width:none;
    }
}

@media(max-width:479.98px){
    .database-summary-grid,
    .database-info-card{
        grid-template-columns:1fr;
    }

    .database-header-actions{
        flex-direction:column;
    }

    .database-header-actions .btn{
        width:100%;
    }
}


/* ===== Per-device Sticky Engine ===== */
.engine-node-page{
    gap:14px;
}

.engine-node-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
}

.engine-node-header h2{
    margin:5px 0 4px;
}

.engine-node-header p{
    max-width:720px;
    margin:0;
    color:var(--cw-muted);
}

.engine-node-header-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.engine-sticky-note{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:12px 14px;
    border:1px solid #d7cdf8;
    border-radius:13px;
    color:#4933a8;
    background:#f4f1ff;
}

.engine-sticky-note>span{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    flex:0 0 auto;
    border-radius:10px;
    background:#e8e2ff;
}

.engine-sticky-note svg{
    width:17px;
    height:17px;
}

.engine-sticky-note strong{
    display:block;
    font-size:11px;
}

.engine-sticky-note p{
    margin:3px 0 0;
    font-size:9px;
    line-height:1.5;
}

.engine-node-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.engine-node-card{
    padding:14px;
    border:1px solid var(--cw-border);
    border-radius:15px;
    background:#fff;
    box-shadow:0 8px 24px rgba(31,27,52,.045);
}

.engine-node-card.default{
    border-color:#cfc2fa;
    box-shadow:0 8px 24px rgba(108,77,246,.09);
}

.engine-node-card-head{
    display:flex;
    align-items:center;
    gap:10px;
}

.engine-node-card-icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    flex:0 0 auto;
    border-radius:11px;
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
}

.engine-node-card-icon svg{
    width:18px;
    height:18px;
}

.engine-node-title{
    display:flex;
    align-items:center;
    gap:6px;
}

.engine-node-title strong{
    font-size:12px;
}

.engine-node-title span{
    padding:3px 5px;
    border-radius:999px;
    color:#fff;
    background:var(--cw-primary);
    font-size:7px;
    font-weight:900;
}

.engine-node-card-head small{
    color:var(--cw-muted);
    font-size:8px;
}

.engine-node-badges{
    display:flex;
    gap:5px;
    margin-top:11px;
}

.engine-node-url{
    display:block;
    margin-top:10px;
    padding:8px;
    border-radius:9px;
    color:#5741b4;
    background:#f5f2ff;
    font-size:8px;
    overflow-wrap:anywhere;
}

.engine-node-meta{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    margin-top:10px;
}

.engine-node-meta div{
    padding:8px;
    border-radius:9px;
    background:#fafafe;
}

.engine-node-meta span,
.engine-node-meta strong{
    display:block;
}

.engine-node-meta span{
    color:var(--cw-muted);
    font-size:7px;
}

.engine-node-meta strong{
    margin-top:2px;
    font-size:10px;
}

.engine-node-capacity{
    height:6px;
    margin-top:10px;
    border-radius:999px;
    background:#ece9f4;
    overflow:hidden;
}

.engine-node-capacity span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:var(--cw-primary);
}

.engine-node-check-time{
    display:block;
    margin-top:7px;
    color:var(--cw-muted);
    font-size:8px;
}

.engine-node-error{
    margin-top:8px;
    padding:7px;
    border-radius:8px;
    color:#ad2d45;
    background:#fff0f3;
    font-size:8px;
}

.engine-node-card-actions{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:11px;
}

.engine-device-search{
    max-width:300px;
}

.engine-sticky-label{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 7px;
    border-radius:999px;
    color:#5139b6;
    background:#eee9ff;
    font-size:8px;
    font-weight:800;
}

.engine-sticky-label svg{
    width:11px;
    height:11px;
}

.engine-failover-log-list{
    display:grid;
    gap:7px;
}

.engine-failover-log-list article{
    display:flex;
    gap:9px;
    padding:9px;
    border:1px solid var(--cw-border);
    border-radius:10px;
    background:#fafafe;
}

.engine-failover-log-list article>span{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    flex:0 0 auto;
    border-radius:9px;
    color:#8a6100;
    background:#fff0c8;
}

.engine-failover-log-list svg{
    width:14px;
    height:14px;
}

.engine-failover-log-list strong,
.engine-failover-log-list p,
.engine-failover-log-list small{
    display:block;
}

.engine-failover-log-list strong{
    font-size:9px;
}

.engine-failover-log-list p{
    margin:2px 0;
    font-size:9px;
}

.engine-failover-log-list small{
    color:var(--cw-muted);
    font-size:8px;
}

.engine-node-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.engine-form-wide{
    grid-column:1/-1;
}

.engine-move-warning{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin-bottom:12px;
    padding:11px;
    border:1px solid #efd18b;
    border-radius:11px;
    color:#7b5500;
    background:#fff7e3;
}

.engine-move-warning svg{
    width:17px;
    height:17px;
    flex:0 0 auto;
}

.engine-move-warning strong,
.engine-move-warning span{
    display:block;
}

.engine-move-warning strong{
    font-size:10px;
}

.engine-move-warning span{
    margin-top:2px;
    font-size:8px;
    line-height:1.5;
}

@media(max-width:1199.98px){
    .engine-node-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:767.98px){
    .engine-node-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .engine-node-header-actions{
        width:100%;
    }

    .engine-node-header-actions .btn{
        flex:1;
    }

    .engine-node-grid{
        grid-template-columns:1fr;
    }

    .engine-node-form-grid{
        grid-template-columns:1fr;
    }

    .engine-form-wide{
        grid-column:auto;
    }

    .engine-device-search{
        width:100%;
        max-width:none;
    }
}


/* ===== Baileys Version Update Checker ===== */
.baileys-update-notice{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:12px 14px;
    border:1px solid #d9d2ef;
    border-radius:13px;
    color:#4f4668;
    background:#faf8ff;
}

.baileys-update-notice>span{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    flex:0 0 auto;
    border-radius:10px;
    color:#6046c9;
    background:#ebe6ff;
}

.baileys-update-notice svg{
    width:17px;
    height:17px;
}

.baileys-update-notice strong{
    display:block;
    font-size:11px;
}

.baileys-update-notice p{
    margin:3px 0 0;
    font-size:9px;
    line-height:1.5;
}

.engine-baileys-box{
    margin-top:10px;
    padding:9px;
    border:1px solid var(--cw-border);
    border-radius:10px;
    background:#fafafe;
}

.engine-baileys-box.success{
    border-color:#bde3cf;
    background:#f1fbf6;
}

.engine-baileys-box.warning{
    border-color:#efd58e;
    background:#fff9e8;
}

.engine-baileys-box.danger{
    border-color:#edbcc6;
    background:#fff1f4;
}

.engine-baileys-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.engine-baileys-head>span{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:8px;
    font-weight:900;
}

.engine-baileys-head svg{
    width:12px;
    height:12px;
}

.engine-baileys-head b{
    font-size:7px;
    text-transform:uppercase;
}

.engine-baileys-box.success
.engine-baileys-head b{
    color:#08764a;
}

.engine-baileys-box.warning
.engine-baileys-head b{
    color:#865d00;
}

.engine-baileys-box.danger
.engine-baileys-head b{
    color:#b32f48;
}

.engine-baileys-versions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    margin-top:8px;
}

.engine-baileys-versions>div{
    padding:6px;
    border-radius:8px;
    background:rgba(255,255,255,.7);
}

.engine-baileys-versions small,
.engine-baileys-versions strong{
    display:block;
}

.engine-baileys-versions small{
    color:var(--cw-muted);
    font-size:7px;
}

.engine-baileys-versions strong{
    margin-top:2px;
    font-size:9px;
    overflow-wrap:anywhere;
}

.engine-baileys-checked{
    display:block;
    margin-top:6px;
    color:var(--cw-muted);
    font-size:7px;
}

@media(max-width:767.98px){
    .engine-node-header-actions{
        flex-wrap:wrap;
    }

    .engine-node-header-actions .btn{
        min-width:140px;
    }
}


/* ===== Queue & Dead Letter Manager ===== */
.queue-manager-page{
    gap:14px;
}

.queue-manager-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
}

.queue-manager-header h2{
    margin:5px 0 4px;
}

.queue-manager-header p{
    max-width:760px;
    margin:0;
    color:var(--cw-muted);
}

.queue-manager-header-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.queue-manager-header-actions .form-select{
    min-width:210px;
}

.queue-auto-refresh{
    display:flex;
    align-items:center;
    gap:7px;
    padding:9px 11px;
    border:1px solid var(--cw-border);
    border-radius:11px;
    background:#fff;
    font-size:9px;
    font-weight:800;
    white-space:nowrap;
    cursor:pointer;
}

.queue-auto-refresh input{
    accent-color:var(--cw-primary);
}

.queue-manager-alert{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border:1px solid #d8d0f4;
    border-radius:11px;
    color:#5343a1;
    background:#f6f3ff;
    font-size:9px;
}

.queue-manager-alert svg{
    width:15px;
    height:15px;
}

.queue-summary-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.queue-summary-card{
    padding:13px;
    border:1px solid var(--cw-border);
    border-radius:14px;
    background:#fff;
    box-shadow:0 7px 20px rgba(31,27,52,.04);
}

.queue-summary-card.paused{
    border-color:#edcf88;
    background:#fffaf0;
}

.queue-summary-head{
    display:flex;
    align-items:center;
    gap:9px;
}

.queue-summary-head>span{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    flex:0 0 auto;
    border-radius:10px;
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
}

.queue-summary-head svg{
    width:17px;
    height:17px;
}

.queue-summary-head>div{
    min-width:0;
    flex:1;
}

.queue-summary-head strong,
.queue-summary-head small{
    display:block;
}

.queue-summary-head strong{
    font-size:11px;
}

.queue-summary-head small{
    color:var(--cw-muted);
    font-size:8px;
}

.queue-summary-head>b{
    font-size:22px;
}

.queue-summary-counts{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;
    margin-top:10px;
}

.queue-summary-counts>div{
    padding:7px 4px;
    border-radius:8px;
    text-align:center;
    background:#fafafe;
}

.queue-summary-counts span,
.queue-summary-counts strong{
    display:block;
}

.queue-summary-counts span{
    color:var(--cw-muted);
    font-size:6px;
    text-transform:uppercase;
}

.queue-summary-counts strong{
    margin-top:2px;
    font-size:11px;
}

.queue-tabs-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.queue-tabs{
    display:flex;
    gap:5px;
    padding:5px;
    border-radius:12px;
    background:#f0f1f5;
}

.queue-tabs button{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:35px;
    padding:7px 10px;
    border:0;
    border-radius:9px;
    color:var(--cw-muted);
    background:transparent;
    font-size:9px;
    font-weight:800;
}

.queue-tabs button.active{
    color:var(--cw-primary);
    background:#fff;
    box-shadow:0 5px 14px rgba(31,27,52,.07);
}

.queue-tabs svg{
    width:14px;
    height:14px;
}

.queue-current-actions{
    display:flex;
    align-items:center;
    gap:6px;
}

.queue-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
    padding:10px;
    border:1px solid var(--cw-border);
    border-radius:12px;
    background:#fafafe;
}

.queue-toolbar-left,
.queue-toolbar-right{
    display:flex;
    align-items:center;
    gap:8px;
}

.queue-toolbar-left .search-box{
    min-width:330px;
}

.queue-toolbar-right>span{
    color:var(--cw-muted);
    font-size:9px;
    font-weight:800;
    white-space:nowrap;
}

.queue-error-text{
    display:block;
    max-width:220px;
    color:#a53449;
    font-size:8px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.queue-mobile-error{
    margin-top:9px;
    padding:8px;
    border-radius:8px;
    color:#a53449;
    background:#fff0f3;
    font-size:8px;
    overflow-wrap:anywhere;
}

.queue-manager-log-list{
    display:grid;
    gap:7px;
}

.queue-manager-log-list article{
    display:flex;
    gap:9px;
    padding:9px;
    border:1px solid var(--cw-border);
    border-radius:10px;
    background:#fafafe;
}

.queue-manager-log-list article>span{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    flex:0 0 auto;
    border-radius:9px;
}

.queue-manager-log-list article>span.success{
    color:#08764a;
    background:#e1f6eb;
}

.queue-manager-log-list article>span.danger{
    color:#b52d47;
    background:#ffe6eb;
}

.queue-manager-log-list svg{
    width:14px;
    height:14px;
}

.queue-manager-log-list strong,
.queue-manager-log-list p,
.queue-manager-log-list small{
    display:block;
}

.queue-manager-log-list strong{
    font-size:9px;
    text-transform:capitalize;
}

.queue-manager-log-list p{
    margin:2px 0;
    font-size:8px;
}

.queue-manager-log-list small{
    color:var(--cw-muted);
    font-size:8px;
}

.queue-job-detail-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.queue-job-detail-grid>div{
    padding:9px;
    border:1px solid var(--cw-border);
    border-radius:9px;
    background:#fafafe;
}

.queue-job-detail-grid span,
.queue-job-detail-grid strong{
    display:block;
}

.queue-job-detail-grid span{
    color:var(--cw-muted);
    font-size:8px;
}

.queue-job-detail-grid strong{
    margin-top:3px;
    font-size:9px;
    overflow-wrap:anywhere;
}

.queue-job-error-box{
    margin-top:10px;
    padding:10px;
    border:1px solid #edbcc6;
    border-radius:10px;
    color:#a82d44;
    background:#fff1f4;
}

.queue-job-error-box strong{
    display:block;
    margin-bottom:5px;
    font-size:9px;
}

.queue-job-error-box pre{
    margin:0;
    color:inherit;
    font-size:8px;
    white-space:pre-wrap;
}

.queue-json-block{
    margin-top:10px;
    border:1px solid var(--cw-border);
    border-radius:10px;
    overflow:hidden;
}

.queue-json-block>div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px 10px;
    background:#fafafe;
}

.queue-json-block>div strong{
    font-size:9px;
}

.queue-json-block button{
    display:inline-flex;
    align-items:center;
    gap:5px;
    border:0;
    color:var(--cw-primary);
    background:transparent;
    font-size:8px;
    font-weight:800;
}

.queue-json-block button svg{
    width:12px;
    height:12px;
}

.queue-json-block pre{
    max-height:290px;
    margin:0;
    padding:11px;
    color:#e8e8ed;
    background:#19171f;
    font-size:8px;
    overflow:auto;
}

.queue-clean-warning{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
    padding:10px;
    border:1px solid #efc984;
    border-radius:10px;
    color:#7a5500;
    background:#fff8e8;
    font-size:8px;
}

.queue-clean-warning svg{
    width:15px;
    height:15px;
}

@media(max-width:1199.98px){
    .queue-summary-grid{
        grid-template-columns:1fr;
    }

    .queue-tabs-wrap,
    .queue-toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .queue-current-actions,
    .queue-toolbar-left,
    .queue-toolbar-right{
        width:100%;
    }

    .queue-toolbar-left .search-box{
        min-width:0;
        flex:1;
    }
}

@media(max-width:767.98px){
    .queue-manager-header{
        align-items:stretch;
        flex-direction:column;
    }

    .queue-manager-header-actions{
        align-items:stretch;
        flex-wrap:wrap;
    }

    .queue-manager-header-actions .form-select{
        width:100%;
    }

    .queue-manager-header-actions .btn{
        flex:1;
    }

    .queue-tabs{
        display:grid;
        grid-template-columns:1fr;
    }

    .queue-tabs button{
        justify-content:center;
    }

    .queue-current-actions{
        flex-direction:column;
    }

    .queue-current-actions .btn{
        width:100%;
    }

    .queue-toolbar-left,
    .queue-toolbar-right{
        align-items:stretch;
        flex-direction:column;
    }

    .queue-toolbar-left .search-box,
    .queue-toolbar-left .form-select,
    .queue-toolbar-right .form-select{
        width:100%;
    }

    .queue-job-detail-grid{
        grid-template-columns:1fr;
    }
}


/* ===== WhatsApp Session Backup & Restore ===== */
.session-backup-page{
    gap:14px;
}

.session-backup-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
}

.session-backup-header h2{
    margin:5px 0 4px;
}

.session-backup-header p{
    max-width:760px;
    margin:0;
    color:var(--cw-muted);
}

.session-security-note{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:12px 14px;
    border:1px solid #bee1cf;
    border-radius:13px;
    color:#166b49;
    background:#f0faf5;
}

.session-security-note>span{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    flex:0 0 auto;
    border-radius:10px;
    background:#daf2e6;
}

.session-security-note svg{
    width:17px;
    height:17px;
}

.session-security-note strong{
    display:block;
    font-size:11px;
}

.session-security-note p{
    margin:3px 0 0;
    font-size:9px;
    line-height:1.5;
}

.session-stat-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
}

.session-stat-grid article{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    border:1px solid var(--cw-border);
    border-radius:13px;
    background:#fff;
    box-shadow:0 7px 20px rgba(31,27,52,.04);
}

.session-stat-grid article>span{
    display:grid;
    place-items:center;
    width:39px;
    height:39px;
    flex:0 0 auto;
    border-radius:11px;
    color:var(--cw-primary);
    background:var(--cw-primary-soft);
}

.session-stat-grid svg{
    width:17px;
    height:17px;
}

.session-stat-grid small,
.session-stat-grid strong{
    display:block;
}

.session-stat-grid small{
    color:var(--cw-muted);
    font-size:8px;
}

.session-stat-grid strong{
    margin-top:3px;
    font-size:17px;
}

.session-device-search{
    max-width:310px;
}

.session-backup-list{
    display:grid;
    gap:8px;
}

.session-backup-list article{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px;
    border:1px solid var(--cw-border);
    border-radius:12px;
    background:#fafafe;
}

.session-backup-file-icon{
    display:grid;
    place-items:center;
    width:39px;
    height:39px;
    flex:0 0 auto;
    border-radius:11px;
    color:#08764a;
    background:#e1f6eb;
}

.session-backup-file-icon svg{
    width:17px;
    height:17px;
}

.session-backup-copy{
    min-width:0;
    flex:1;
}

.session-backup-copy>div{
    display:flex;
    align-items:center;
    gap:6px;
}

.session-backup-copy strong,
.session-backup-copy p,
.session-backup-copy small{
    display:block;
}

.session-backup-copy strong{
    font-size:10px;
}

.session-backup-copy p{
    margin:2px 0;
    font-size:8px;
}

.session-backup-copy small{
    color:var(--cw-muted);
    font-size:8px;
}

.session-restore-warning{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin-bottom:12px;
    padding:11px;
    border:1px solid #efd18b;
    border-radius:11px;
    color:#7b5500;
    background:#fff7e3;
}

.session-restore-warning svg{
    width:17px;
    height:17px;
    flex:0 0 auto;
}

.session-restore-warning strong,
.session-restore-warning span{
    display:block;
}

.session-restore-warning strong{
    font-size:10px;
}

.session-restore-warning span{
    margin-top:2px;
    font-size:8px;
    line-height:1.5;
}

@media(max-width:991.98px){
    .session-stat-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:767.98px){
    .session-backup-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .session-device-search{
        width:100%;
        max-width:none;
    }

    .session-backup-list article{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .session-backup-list
    .table-action-group{
        width:100%;
        justify-content:flex-end;
    }
}

@media(max-width:479.98px){
    .session-stat-grid{
        grid-template-columns:1fr;
    }
}