:root{
      --bg:#f7f9fc;
      --card:#ffffff;
      --muted:#6b7280;
      --accent:#3366FF;
      --danger:#e53e3e;
      --radius:10px;
      --shadow: 0 6px 24px rgba(16,24,40,0.06);
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    html,body{height:100%;margin:0;background:var(--bg);color:#0f1724;}
    .wrap{max-width:1200px;margin:28px auto;padding:0 16px;box-sizing:border-box;}
    header.site-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--card);border-radius:12px;box-shadow:var(--shadow);}
    .brand{display:flex;align-items:center;gap:12px}
    .brand .logo{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#6ea0ff);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
    .brand h1{font-size:16px;margin:0}
    nav a{color:var(--muted);text-decoration:none;margin-left:14px;font-size:14px}
    .controls{display:flex;gap:12px;align-items:center}
    .search{display:flex;align-items:center;background:#f1f5f9;padding:8px 12px;border-radius:8px;gap:8px}
    .search input{border:0;background:transparent;outline:none;font-size:14px;width:220px}

    main{margin-top:18px}
    .card{background:var(--card);padding:16px;border-radius:var(--radius);box-shadow:var(--shadow)}
    .toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px;flex-wrap:wrap}
    .toolbar .left{display:flex;gap:12px;align-items:center}
    
    /* hover effects */
    .btn{transition:transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease}
    .btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(51,102,255,0.2)}
    .btn.primary:hover{box-shadow:0 4px 12px rgba(51,102,255,0.35)}
    .btn.warn:hover{box-shadow:0 4px 12px rgba(229,62,62,0.3)}
    .btn.ghost:hover{background:#f8faff;border-color:var(--accent)}
    .btn:active{transform:translateY(0)}
    nav a{transition:color 0.2s ease}
    nav a:hover{color:var(--accent)}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;border:0;cursor:pointer;font-weight:600}
    .btn.primary{background:var(--accent);color:#fff}
    .btn.ghost{background:transparent;border:1px solid #e6eefc;color:var(--accent)}
    .btn.warn{background:var(--danger);color:#fff}

    /* table */
    .table-wrap{overflow:auto;border-radius:8px}
    table.leads{width:100%;border-collapse:collapse;min-width:900px}
    table.leads thead{background:#fbfdff}
    table.leads th, table.leads td{padding:12px 14px;text-align:left;border-bottom:1px solid #f1f5f9;font-size:14px;color:#0f1724}
    table.leads th{font-weight:600;color:var(--muted);font-size:13px}
    table.leads td .muted{color:var(--muted);font-size:13px}
    .actions-cell{display:flex;gap:8px;align-items:center}
    .pill{padding:6px 8px;border-radius:999px;background:#f1f5ff;color:var(--accent);font-weight:600;font-size:13px}

    /* responsive: stacked cards on small screens */
    @media (max-width:880px){
      table.leads{min-width:unset;border:0}
      table.leads thead{display:none}
      table.leads tr{display:block;margin-bottom:12px;background:transparent}
      table.leads td{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:8px;background:var(--card);box-shadow:var(--shadow)}
      table.leads td[data-label]{flex-direction:column;align-items:flex-start}
      table.leads td[data-label] .value{margin-top:6px;color:#0f1724}
      table.leads td.actions{display:flex;gap:8px;justify-content:flex-end}
    }

    footer.site-footer{margin-top:18px;padding:14px 18px;border-radius:12px;background:var(--card);box-shadow:var(--shadow);text-align:center;color:var(--muted);font-size:13px}
    /* modal */
    .modal-back{position:fixed;inset:0;background:rgba(4,6,12,0.45);display:none;align-items:center;justify-content:center;z-index:9999}
    .modal{background:var(--card);padding:18px;border-radius:10px;max-width:720px;width:94%;box-shadow:var(--shadow)}
    .modal header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}

.page-btn{
        background:transparent;
        border:1px solid #e6eefc;
        padding:8px 12px;
        border-radius:8px;
        cursor:pointer;
        font-weight:600;
        color:var(--muted);
        transition:all 0.2s ease;
        min-width:40px;
    }
    .page-btn:hover{
        background:#f8faff;
        border-color:var(--accent);
        color:var(--accent);
    }
    .page-btn.active{
        background:var(--accent);
        color:#fff;
        border-color:var(--accent);
    }


 .tab-btn{background:transparent;border:none;padding:10px 16px;cursor:pointer;font-size:14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px;transition:color 0.2s ease}
    .tab-btn:hover{color:var(--accent)}
    .tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}



.preloader-spinner {
            width:48px;
            height:48px;
            border:6px solid #e0e7ef;
            border-top:6px solid #3b82f6;
            border-radius:50%;
            animation:spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform:rotate(0deg);}
            100% { transform:rotate(360deg);}
        }
        /* Make sure .table-wrap is position:relative for overlay */
        .table-wrap { position:relative; }


          table.leads {
      border-collapse: collapse;
      width: 100%;
    }
    table.leads th, table.leads td {
      padding: 8px 12px;
      border-bottom: 1px solid #00000041;
   
    }
    table.leads thead tr {
      background: #f8fafc;
    }
    table.leads tbody tr:last-child td {
      border-bottom: none;
    }
    /* table{
        min-height: 300px;
    } */


   .actions-wrap{display:inline-flex;gap:8px;align-items:center;white-space:nowrap;}