*{
      font-family: 'Cairo', sans-serif;
    }

    body{
      background:#020817;
      color:#fff;
    }


body{
    transition: .3s;
}

[data-bs-theme="dark"] {

    --bs-body-bg: #121212;
    --bs-body-color: #ffffff;
}

[data-bs-theme="dark"] .sidebar {

    background: #1e1e1e !important;
}

[data-bs-theme="dark"] .card {

    background: #242424;
    border-color: #333;
}

[data-bs-theme="dark"] .table {

    color: white;
}


    .topbar{
      padding:20px 0;
      border-bottom:1px solid rgba(255,255,255,.08);
      margin-bottom:25px;
    }

    .dashboard-title{
      font-size:26px;
      font-weight:700;
    }

    .dashboard-sub{
      color:#94a3b8;
      font-size:14px;
    }

    .stat-card{
      background:linear-gradient(180deg,#0f172a,#081225);
      border:1px solid rgba(255,255,255,.06);
      border-radius:20px;
      padding:25px;
      position:relative;
      overflow:hidden;
      height:100%;
    }

    .stat-icon{
      width:60px;
      height:60px;
      border-radius:18px;
      background:#172554;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#60a5fa;
      font-size:22px;
      margin-bottom:18px;
    }

    .stat-title{
      color:#cbd5e1;
      font-size:15px;
      margin-bottom:10px;
    }

    .stat-number{
      font-size:38px;
      font-weight:800;
      line-height:1;
    }

    .stat-change{
      color:#10b981;
      margin-top:10px;
      font-size:14px;
    }

    .table-wrapper{
      margin-top:25px;
      background:#0f172a;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.06);
      overflow:hidden;
    }

    .table-header{
      padding:20px;
      border-bottom:1px solid rgba(255,255,255,.06);
    }

    .table-title{
      font-size:22px;
      font-weight:700;
    }

    .table-sub{
      color:#94a3b8;
      font-size:13px;
    }

    .custom-input{
      background:#020817;
      border:1px solid rgba(255,255,255,.08);
      border-radius:14px;
      color:#fff;
      padding:12px 18px;
    }

    .custom-input::placeholder{
      color:#64748b;
    }

    .custom-input:focus{
      background:#020817;
      color:#fff;
      box-shadow:none;
      border-color:#2563eb;
    }

    .btn-custom{
      background:#111c34;
      border:none;
      color:#fff;
      border-radius:14px;
      padding:12px 18px;
    }

    .btn-custom:hover{
      background:#1d2b4b;
      color:#fff;
    }

    table{
      color:#fff !important;
      margin:0;
    }

    thead{
      background:#111c34;
    }

    thead th{
      border:none !important;
      color:#cbd5e1 !important;
      font-size:14px;
      padding:18px !important;
    }

    tbody td{
      border-color:rgba(255,255,255,.06) !important;
      vertical-align:middle;
      padding:18px !important;
    }

    .site-name{
      font-weight:700;
    }

    .site-url{
      color:#94a3b8;
      font-size:13px;
    }

    .status-badge{
      padding:8px 14px;
      border-radius:30px;
      font-size:13px;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }

    .online{
      background:rgba(16,185,129,.15);
      color:#10b981;
    }

    .offline{
      background:rgba(148,163,184,.15);
      color:#94a3b8;
    }

    .status-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:currentColor;
    }

    .website-icon{
      width:42px;
      height:42px;
      border-radius:12px;
      background:#172554;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#60a5fa;
    }

    .add-btn{
      background:#2563eb;
      border:none;
      border-radius:14px;
      color:#fff;
      padding:12px 22px;
      font-weight:600;
    }

    .add-btn:hover{
      background:#1d4ed8;
    }