/* palette */
$blue-50:#eff6ff;$blue-600:#2563eb;$slate-600:#475569;
$radius:.9rem;$shadow:0 14px 30px -18px rgba(0,0,0,.18);
$shadow-h:0 20px 46px -22px rgba(0,0,0,.28);

/* title */
.page-title{
  text-align:center;
  font:700 2rem/1.25 'Inter',sans-serif;
  color:$blue-600;margin-bottom:1.8rem;
}

/* grid wrapper */
.grid-wrap{
  display:grid;gap:1.4rem;
  @media(min-width:768px){grid-template-columns:370px 1fr}
}

/* glass card */
.glass{
  position:relative;background:rgba(255,255,255,.6);
  backdrop-filter:blur(10px)saturate(170%);
  border-radius:$radius;box-shadow:$shadow;transition:.4s;

  &:hover{transform:translateY(-6px);box-shadow:$shadow-h;background:#fff}
  &::before{
    content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
    background:linear-gradient(135deg,#3b82f6,#818cf8 50%,#a855f7);
    mask:linear-gradient(#fff 0 0)content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude;opacity:.45;pointer-events:none;transition:.35s;
  }
  &:hover::before{opacity:.9}
}

/* chart */
.card-chart{padding:1.5rem}
.chart{height:320px;width:100%}

/* table */
.card-table{padding:1rem 1.25rem;overflow:auto}
.grade-table{width:100%;border-collapse:collapse;font-size:.8rem;text-align:center}
th,td{padding:.35rem .4rem}
thead{background:$blue-600;color:#fff;font-weight:600}
tbody tr:nth-child(even){background:$blue-50}
tbody tr:hover{background:#dbeafe}
.foot{background:#e5e7eb;font-weight:700}
.stick{position:sticky;left:0;background:inherit;text-align:left;padding-left:.6rem}

/* scroll subtle */
.card-table::-webkit-scrollbar{height:.55rem}
.card-table::-webkit-scrollbar-thumb{background:#c4c4c4;border-radius:9999px}
