/* ==========================================
   SARKARINEXT – SIMPLE ANALYTICS DASHBOARD
   (Student Friendly + No Cut Issues)
========================================== */

:root{
  --bg:#000;
  --card:#070707;
  --card2:#0b0b0b;

  --border:rgba(255,255,255,.10);

  --text:#fff;
  --muted:rgba(255,255,255,.65);

  --accent:#ff9900;
  --blue:#00a8e1;

  --shadow:0 18px 55px rgba(0,0,0,.70);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Poppins,Arial,sans-serif;
}

html,body{
  width:100%;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
}

/* ===============================
   TOPBAR
=============================== */
.topbar{
  position:sticky;
  top:0;
  z-index:9999;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  padding:12px 14px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.logo{
  font-weight:900;
  font-size:18px;
  color:var(--accent);
  line-height:1;
  white-space:nowrap;
}

.logo span{color:#fff;}

.tag{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  line-height:1.2;
  max-width:650px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.home-btn{
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  padding:10px 14px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--accent),#ffb300);
  color:#111;
  border:1px solid rgba(255,153,0,.55);
  flex-shrink:0;
}

/* ===============================
   WRAP
=============================== */
.wrap{
  max-width:1050px;
  margin:auto;
  width:100%;
  padding:16px 12px 55px;
}

/* ===============================
   HERO
=============================== */
.hero{
  background:linear-gradient(145deg,#0f172a,#000);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px 14px;
  box-shadow:var(--shadow);
}

.hero h1{
  font-size:20px;
  font-weight:900;
  color:#fff;
}

.hero p{
  margin-top:8px;
  color:var(--muted);
  font-weight:700;
  line-height:1.6;
  font-size:13px;
}

/* ===============================
   CONTROLS
=============================== */
.hero-controls{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.field label{
  font-size:12px;
  font-weight:900;
  color:#fff;
}

select{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:#000;
  color:#fff;
  font-weight:800;
  outline:none;
}

select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,153,0,.18);
}

.primary-btn{
  grid-column:1/-1;
  padding:14px 14px;
  border:none;
  border-radius:16px;
  cursor:pointer;
  font-weight:900;
  font-size:15px;
  background:linear-gradient(135deg,var(--accent),#ffb300);
  color:#111;
  box-shadow:0 16px 40px rgba(255,153,0,.20);
}

/* ===============================
   KPI CARDS (SIMPLE)
=============================== */
.kpi-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}

.kpi{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px 12px;
  box-shadow:0 12px 35px rgba(0,0,0,.45);
}

.kpi h3{
  font-size:18px;
  font-weight:900;
  color:var(--accent);
}

.kpi p{
  margin-top:6px;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}

/* ===============================
   DASH SECTIONS
=============================== */
.dash-grid{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* CARD */
.card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:14px;
  box-shadow:0 16px 45px rgba(0,0,0,.55);
}

.card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.card-head h2{
  font-size:15px;
  font-weight:900;
  color:#fff;
}

.hint{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}

/* ===============================
   TABLE (STUDENT FRIENDLY)
=============================== */
.table-wrap{
  width:100%;
  overflow:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
}

.data-table{
  width:100%;
  border-collapse:collapse;
  min-width:520px;
}

.data-table th{
  padding:12px;
  text-align:left;
  font-size:12px;
  font-weight:900;
  background:rgba(255,255,255,.06);
  color:#fff;
  white-space:nowrap;
}

.data-table td{
  padding:12px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:12.5px;
  font-weight:800;
  color:#e5e7eb;
}

/* ===============================
   INSIGHTS
=============================== */
.insight-list{
  margin-top:10px;
  padding-left:18px;
  color:#cbd5e1;
  font-weight:800;
  line-height:1.9;
  font-size:13px;
}

.insight-list li{
  margin:7px 0;
}

/* ===============================
   FOOTER
=============================== */
.footer{
  margin-top:22px;
  text-align:center;
  padding:18px 10px;
  border-top:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  font-weight:900;
}

/* ===============================
   MOBILE FIXES
=============================== */
@media(max-width:520px){

  .tag{display:none;}

  .hero-controls{
    grid-template-columns:1fr;
  }

  .kpi-grid{
    grid-template-columns:1fr;
  }

  .wrap{
    padding:14px 10px 50px;
  }

  .hero h1{
    font-size:18px;
  }
}

/* ===============================
   SCROLLBAR
=============================== */
::-webkit-scrollbar{width:7px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:10px;
}
::-webkit-scrollbar-thumb:hover{
  background:rgba(255,153,0,.35);
}