:root{
  --bg:#f7f9fb;
  --card:#ffffff;
  --muted:#6b7280;
  --primary:#2563eb;
  --border:#e6edf3;
  --table-header:#f3f7fa;
  --glass: rgba(255,255,255,0.6);
  font-family: Inter, Roboto, 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial;
}
.container{max-width:1100px;margin:0 auto}
.card{background:var(--card);border-radius:12px;box-shadow:0 6px 18px rgba(12,30,45,0.06);padding:18px;border:1px solid var(--border)}
.table-header{display:flex;align-items:center;justify-content:space-between;padding:8px 4px 18px}
.table-title{font-weight:700;font-size:18px;color:#0f172a}
.controls{display:flex;gap:12px;align-items:center}
.perpage{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;cursor:pointer}
select{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#fff;font-size:14px}
.search-bar input{margin-left: 150px; padding:10px 16px;border-radius:20px;border:1px solid var(--border);font-size:14px;width:360px;box-shadow:0 2px 10px rgba(2,6,23,0.04);transition:all .15s}
.search-bar input:focus{border-color:var(--primary);outline:none;box-shadow:0 6px 20px rgba(37,99,235,0.08)}

.table-wrap{overflow:auto;border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{background:var(--table-header);text-align:left;padding:14px;border-bottom:1px solid var(--border);font-weight:700;color:#374151;position:sticky;top:0;z-index:2}
tbody td{padding:14px;border-bottom:1px solid #f1f5f9;color:#0f172a;vertical-align:middle}

.name-cell{display:flex;gap:12px;align-items:center}
.logo{width:40px;height:40px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.logo.paytm{background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.logo.waaree{background:linear-gradient(135deg,#22c55e,#16a34a)}
.logo.nsdl{background:linear-gradient(135deg,#f59e0b,#d97706)}
.logo.hdb{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.logo.hexaware{background:linear-gradient(135deg,#3b82f6,#1e40af)}
.logo.uti{background:linear-gradient(135deg,#f97316,#ea580c)}
.logo.nazara{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.logo.tmb{background:linear-gradient(135deg,#ec4899,#db2777)}
.logo.tata{background:linear-gradient(135deg,#0d9488,#115e59)}
.logo.bbq{background:linear-gradient(135deg,#f43f5e,#b91c1c)}

.company-name{font-weight:700;color:var(--primary);text-decoration:none}
.company-name:hover{text-decoration:underline}

.price{white-space:nowrap}
.cmp{font-weight:700}

.invest-btn{padding:9px 18px;border-radius:999px;border:none;cursor:pointer;background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff;font-weight:700;font-size:13px;box-shadow:0 6px 18px rgba(37,99,235,0.12)}
.invest-btn:active{transform:translateY(1px)}

.pagination{display:flex;align-items:center;justify-content:space-between;padding-top:12px;gap:12px}
.pager{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.page-btn{border:1px solid var(--border);padding:8px 12px;border-radius:10px;background:#fff;cursor:pointer;text-decoration:none;color:#0f172a;min-width:40px;text-align:center}
.page-btn.active{background:linear-gradient(180deg,#3b82f6,#3b82f6);color:#fff;border:none}

.summary{font-size:13px;color:var(--muted);cursor:pointer;text-decoration:underline}

.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.45);display:none;align-items:center;justify-content:center;z-index:100}
.modal{width:360px;background:#fff;border-radius:12px;padding:18px;box-shadow:0 10px 40px rgba(2,6,23,0.2)}
.modal h3{margin:0 0 8px}
.modal .field{display:flex;flex-direction:column;margin-bottom:10px}
.modal .field label{font-size:13px;color:var(--muted);margin-bottom:6px}
.modal .field input, .modal .field textarea{padding:10px;border-radius:8px;border:1px solid var(--border);font-size:14px}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.btn{padding:8px 12px;border-radius:10px;border:none;cursor:pointer}
.btn.ghost{background:#fff;border:1px solid var(--border)}
.btn.primary{background:linear-gradient(180deg,#2563eb,#1e40af);color:#fff}

.footer-small{font-size:13px;color:var(--muted)}

/* responsive */
@media (max-width:760px){
  .controls{flex-direction:column;align-items:flex-start;gap:10px}
  .search-bar input{width:180px}
  .modal{width:92%}
}


/* responsive */


.fund-return{

  color: green;
  font-size: 12px;
}
.modal-backdrop {
  display: none; 
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.6);
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.modal h3 {
  margin-bottom: 15px;
}

.modal .field {
  margin-bottom: 10px;
}

.modal input, .modal textarea {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.modal .actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
}

.btn.primary {
  background: #007bff;
  border: none;
  color: white;
  padding: 8px 14px;
  border-radius: 5px;
  cursor: pointer;
}
.btn.ghost {
  background: #eee;
  border: none;
  padding: 8px 14px;
  border-radius: 5px;
  cursor: pointer;
}