:root{
  --bg:#132e59;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#00a86b;
  --primary:#6f9dff;
  --border:#e6edf3;
  --table-header:#ffffff;
  --glass: rgba(255,255,255,0.6);
  font-family: Inter, Roboto, 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);padding:28px}
.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{margin-left: 0px;}
.search-bar input{padding:10px 16px;border-radius:20px;border:1px solid var(--border);font-size:14px;width:260px;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:#000;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}
.invest-modal{width:360px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 10px 40px rgba(2,6,23,0.2)}
.invest-modal .modal-header{background:linear-gradient(180deg,#2563eb,#1e40af);color:#fff;padding:16px 20px}
.invest-modal .modal-header h3{margin:0;font-size:18px;font-weight:600;color:#fff}
.invest-modal .modal-body{padding:20px;background:#fff;color:#0f172a}
.invest-modal .field{display:flex;flex-direction:column;margin-bottom:10px}
.invest-modal .field label{font-size:13px;color:var(--muted);margin-bottom:6px}
.invest-modal .field input, .invest-modal .field textarea{padding:10px;border-radius:8px;border:1px solid var(--border);font-size:14px;background:#fff;color:#0f172a;transition:border-color .15s ease, box-shadow .15s ease}
.invest-modal .field input:focus,
.invest-modal .field textarea:focus{outline:2px solid rgba(37,99,235,0.4);border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.2)}
.invest-modal .field textarea{resize:vertical;min-height:90px}
.invest-modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.invest-modal .field input::placeholder,
.invest-modal .field textarea::placeholder{color:var(--muted)}
.field-row{display:flex;gap:16px;flex-wrap:wrap}
.field-row .field{flex:1;min-width:200px}
.btn{padding:8px 12px;border-radius:10px;border:none;cursor:pointer}
.invest-modal .btn.ghost{background:#fff;border:1px solid var(--border);color:#0f172a}
.invest-modal .btn.primary{background:linear-gradient(180deg,#2563eb,#1e40af);color:#fff;box-shadow:0 8px 16px rgba(37,99,235,0.25);transition:transform .15s ease, box-shadow .15s ease}
.invest-modal .btn.primary:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(37,99,235,0.28)}
.invest-modal .btn.primary:active{transform:translateY(0);box-shadow:0 4px 12px rgba(37,99,235,0.2)}
.btn.primary{background:linear-gradient(180deg,#2563eb,#1e40af);color:#fff}

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