.studentModal{
  position:fixed;
  inset:0;
  z-index:10020;
  display:none;
  align-items:center;
  justify-content:center;
  padding:calc(20px + var(--safeTop)) calc(20px + var(--safeRight)) calc(20px + var(--safeBottom)) calc(20px + var(--safeLeft));
}

.studentModal.isOpen,
.studentModal.isClosing{
  display:flex;
}

.studentModalBackdrop{
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(15,23,42,.46);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .32s ease;
}

.studentModal.isOpen .studentModalBackdrop{
  opacity:1;
}

.studentModal.isClosing .studentModalBackdrop{
  opacity:0;
}

.studentModalDialog{
  position:relative;
  z-index:2;
  width:min(920px, calc(100vw - 40px));
  max-height:calc(100dvh - 40px - var(--safeTop) - var(--safeBottom));
  overflow:auto;
  margin:0;
  background:#fff;
  border:1px solid var(--cardBorder);
  border-radius:22px;
  box-shadow:0 24px 70px rgba(15,23,42,.22);
  opacity:0;
  transform:translateY(18px) scale(.975);
  transition:
    opacity .36s cubic-bezier(.22,.61,.36,1),
    transform .36s cubic-bezier(.22,.61,.36,1);
  will-change:transform, opacity;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}

.studentModal.isOpen .studentModalDialog{
  opacity:1;
  transform:translateY(0) scale(1);
}

.studentModal.isClosing .studentModalDialog{
  opacity:0;
  transform:translateY(14px) scale(.975);
}

.studentModalClose{
  position:absolute;
  top:max(14px, var(--safeTop));
  right:max(14px, var(--safeRight));
  z-index:5;
  width:38px;
  height:38px;
  border:none;
  border-radius:999px;
  background:#f1f5f9;
  color:#0f172a;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  font-weight:700;
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}

.studentModalClose:hover{
  background:#e2e8f0;
}

.studentModalBody{
  padding:28px 28px 24px;
}

.studentProfileHead{
  padding-right:52px;
  margin-bottom:18px;
}

.studentProfileEyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:#64748b;
  margin-bottom:8px;
}

.studentProfileTitle{
  font-size:28px;
  line-height:1.1;
  font-weight:900;
  color:var(--headerBg);
  margin:0 0 8px;
}

.studentProfileDiscipline{
  font-size:14px;
  font-weight:900;
  color:#0f172a;
  text-transform:uppercase;
  letter-spacing:.25px;
  opacity:.9;
}

.studentProfileTopMeta{
  display:grid;
  gap:8px;
  margin:10px 0 16px;
  padding:12px 14px;
  border:1px solid var(--cardBorder);
  border-radius:16px;
  background:linear-gradient(180deg,#fafcff 0%, #f4f7fb 100%);
}

.studentProfileMetaLine{
  font-size:14px;
  line-height:1.4;
  color:#334155;
}

.studentProfileMetaLine b{
  color:#0f172a;
  font-weight:900;
}

.studentProfileInfo{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin:18px 0 20px;
}

.studentInfoCard{
  border:1px solid var(--cardBorder);
  background:var(--tableWrapBg);
  border-radius:16px;
  padding:12px 14px;
}

.studentInfoLabel{
  font-size:11px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#64748b;
  margin-bottom:4px;
}

.studentInfoValue{
  font-size:14px;
  font-weight:700;
  color:#0f172a;
  line-height:1.35;
}

.studentSummaryWrap{
  margin-bottom:22px;
}

.studentSummaryGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.studentSummaryCard{
  border:1px solid var(--cardBorder);
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff 0%, var(--tableWrapBg) 100%);
  padding:16px 18px;
  box-shadow:0 8px 22px rgba(15,23,42,.05);
  position:relative;
  overflow:hidden;
}

.studentSummaryCard::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--headerBg);
  opacity:.9;
}

.studentSummaryValue{
  font-size:24px;
  font-weight:900;
  color:#0f172a;
  line-height:1;
  margin-bottom:6px;
}

.studentSummaryLabel{
  font-size:12px;
  font-weight:700;
  color:#64748b;
}

.studentEntriesTitle{
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#64748b;
  margin-bottom:12px;
}

.studentEntriesList{
  display:grid;
  gap:8px;
}

.studentEntryCard{
  border:1px solid var(--cardBorder);
  border-left:4px solid var(--headerBg);
  border-radius:14px;
  background:linear-gradient(
    to bottom,
    color-mix(in srgb, var(--headerBg) 6%, white),
    white
  );
  padding:10px 12px;
  transition:all .18s ease;
}

.studentAwardsSummary{
  border:1px solid var(--cardBorder);
  border-left:4px solid var(--headerBg);
  border-radius:16px;
  padding:14px;
  background:linear-gradient(
    to bottom,
    color-mix(in srgb, var(--headerBg) 5%, white),
    white
  );
}

.studentAwardsBarFill{
  background:linear-gradient(
    90deg,
    var(--headerBg),
    color-mix(in srgb, var(--headerBg) 65%, white)
  );
}

.studentEntryLevel{
  font-size:11px;
  font-weight:700;
  padding:4px 8px;
  border-radius:999px;
  background:color-mix(in srgb, var(--headerBg) 14%, white);
  color:var(--headerBg);
}

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

.studentEntryCompetition{
  font-size:13px;
  font-weight:900;
  color:#0f172a;
  line-height:1.2;
}

.studentEntryMetaTop{
  font-size:11px;
  color:#64748b;
  font-weight:800;
  text-align:right;
  white-space:nowrap;
}

.studentEntryDiscipline{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  color:#1e293b;
  margin-bottom:6px;
  letter-spacing:.15px;
}

.studentEntryRow{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin-bottom:6px;
}

.studentEntryScore{
  font-size:18px;
  font-weight:900;
  color:#0f172a;
  line-height:1;
}

.studentEntryScoreLabel{
  font-size:11px;
  font-weight:800;
  color:#64748b;
}

.studentEntryBadges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}

.studentBadge{
  padding:5px 8px;
  font-size:11px;
}

.studentEntryBottom{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px 14px;
  font-size:11px;
  color:#334155;
  padding-top:8px;
  border-top:1px solid #edf2f7;
}

.studentEntryBottom b{
  color:#475569;
}

.studentBadge.aw1{
  background:#fff3bf;
  border:1px solid #f4d35e;
  color:#7a5b00;
}

.studentBadge.aw2{
  background:#eef2f7;
  border:1px solid #d5dde7;
  color:#475569;
}

.studentBadge.aw3{
  background:#f6e7de;
  border:1px solid #ddb89d;
  color:#8a4b24;
}

.studentBadge.awx{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#64748b;
}

.studentBadge.yes{
  background:#dff5e8;
  border:1px solid #a7d9bb;
  color:#1f7a46;
}

.studentBadge.no,
.studentBadge.neutral{
  background:#f1f5f9;
  border:1px solid #d9e2ec;
  color:#64748b;
}

.studentEntryBottom b{
  color:#475569;
}

body.studentModalOpen{
  overflow:hidden;
}

@media (max-width: 560px){
  body.studentModalOpen{
    overflow:hidden;
  }
}

@keyframes studentModalIn{
  from{
    opacity:0;
    transform:translateY(12px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media (max-width: 840px){
  .studentSummaryGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .studentProfileInfo,
  .studentEntryBottom{
    grid-template-columns:1fr;
  }

  .studentEntryTop{
    flex-direction:column;
    align-items:flex-start;
  }

  .studentEntryMetaTop{
    text-align:left;
    white-space:normal;
  }
}

@media (max-width: 560px){
  .studentModalClose{
    display:flex;
  }

    .studentModal{
    align-items:flex-start;
    justify-content:center;
    padding:0 10px 24px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .studentModal.isMobileAnchored .studentModalDialog{
    margin-top:var(--mobileModalTop, 12px);
    margin-bottom:24px;
  }

  .studentModalDialog{
    width:min(100%, calc(100vw - 20px));
    max-height:none;
    border-radius:20px;
  }

  .studentModalBody{
    padding:22px 18px 18px;
  }

  .studentProfileTitle{
    font-size:24px;
  }

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

.studentProfileInfo-single{
  grid-template-columns:1fr;
  max-width:560px;
}

.studentAwardsWrap{
  margin-bottom:24px;
  padding:16px 18px 18px;
  border:1px solid var(--cardBorder);
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff 0%, var(--tableWrapBg) 100%);
  box-shadow:0 8px 22px rgba(15,23,42,.05);
}

.studentAwardsBar{
  display:flex;
  width:100%;
  height:16px;
  overflow:hidden;
  border-radius:999px;
  background:#eef2f7;
  border:1px solid #d8e0ea;
  margin-bottom:14px;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.05);
}

.studentAwardsSeg{
  display:block;
  height:100%;
}

.studentAwardsSeg.seg1{ background:#f4d35e; }
.studentAwardsSeg.seg2{ background:#cfd8e3; }
.studentAwardsSeg.seg3{ background:#d8a47f; }
.studentAwardsSeg.seg4{ background:#94a3b8; }

.studentAwardsLegend{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px 14px;
}

.studentAwardsItem{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#334155;
  font-weight:700;
}

.studentAwardsDot{
  width:11px;
  height:11px;
  border-radius:999px;
  flex:0 0 11px;
}

.studentAwardsDot.seg1{ background:#f4d35e; }
.studentAwardsDot.seg2{ background:#cfd8e3; }
.studentAwardsDot.seg3{ background:#d8a47f; }
.studentAwardsDot.seg4{ background:#94a3b8; }

@media (max-width: 840px){
  .studentAwardsLegend{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px){
  .studentAwardsLegend{
    grid-template-columns:1fr;
  }
}

/* =========================================
   STUDENT SUCCESS PANEL
========================================= */

.studentSuccessBox{
  border:1px solid var(--cardBorder);
  border-radius:18px;
  padding:16px 18px 14px;
  margin-bottom:22px;
  background:linear-gradient(180deg,#f8fafc 0%, #f1f5f9 100%);
  box-shadow:0 10px 30px rgba(15,23,42,.08);
}

.studentSuccessHead{
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:#64748b;
  margin-bottom:8px;
}

.studentSuccessDiscipline{
  font-size:14px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.2px;
  margin-bottom:8px;
  color:#0f172a;
}

.studentPointsRow{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin-bottom:10px;
}

.studentPointsValue{
  font-size:42px;
  font-weight:900;
  line-height:1;
  color:#0f172a;
  text-shadow:0 2px 8px rgba(0,0,0,.06);
}

.studentPointsUnit{
  font-size:14px;
  font-weight:800;
  color:#64748b;
  padding-bottom:4px;
}

.studentResultBadges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.studentSuccessMeta{
  font-size:13px;
  color:#334155;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 14px;
}

.studentSuccessMeta b{
  color:#475569;
}

/* ==============================
   BOJE PO NAGRADI
============================== */

.studentSuccessBox.award-1{
  background:linear-gradient(180deg,#fff8db 0%, #fef1b8 100%);
  border-color:#ecd67a;
}

.studentSuccessBox.award-1 .studentSuccessHead,
.studentSuccessBox.award-1 .studentPointsUnit{
  color:#8a6a00;
}

.studentSuccessBox.award-1 .studentPointsValue{
  color:#5f4700;
}

.studentSuccessBox.award-2{
  background:linear-gradient(180deg,#f3f6fb 0%, #e4ebf5 100%);
  border-color:#c7d3e3;
}

.studentSuccessBox.award-2 .studentSuccessHead,
.studentSuccessBox.award-2 .studentPointsUnit{
  color:#5f6f86;
}

.studentSuccessBox.award-2 .studentPointsValue{
  color:#334155;
}

.studentSuccessBox.award-3{
  background:linear-gradient(180deg,#f8eee7 0%, #efd9c9 100%);
  border-color:#ddb79c;
}

.studentSuccessBox.award-3 .studentSuccessHead,
.studentSuccessBox.award-3 .studentPointsUnit{
  color:#8a5a3b;
}

.studentSuccessBox.award-3 .studentPointsValue{
  color:#6b3f24;
}

.studentSuccessBox.award-neutral{
  background:linear-gradient(180deg,#f8fafc 0%, #eef2f7 100%);
  border-color:#d7dee8;
}

@media (max-width: 560px){
  .studentSummaryWrap,
  .studentAwardsWrap,
  .studentEntriesWrap{
    padding:14px;
  }

  .studentSuccessMeta,
  .studentEntryBottom{
    grid-template-columns:1fr;
  }
}

.studentSuccessCompetition{
  font-size:13px;
  font-weight:800;
  line-height:1.3;
  color:#7a5b00;
  margin-bottom:6px;
}

/* =========================================
   MODAL CONTENT ANIMATIONS
========================================= */

.studentModalBody > *{
  opacity:0;
  transform:translateY(10px);
}

.studentModal.isOpen .studentModalBody > *{
  animation:studentFadeIn .5s cubic-bezier(.22,1,.36,1) forwards;
}

.studentModal.isOpen .studentModalBody > *:nth-child(1){ animation-delay:.06s; }
.studentModal.isOpen .studentModalBody > *:nth-child(2){ animation-delay:.12s; }
.studentModal.isOpen .studentModalBody > *:nth-child(3){ animation-delay:.18s; }
.studentModal.isOpen .studentModalBody > *:nth-child(4){ animation-delay:.24s; }
.studentModal.isOpen .studentModalBody > *:nth-child(5){ animation-delay:.30s; }
.studentModal.isOpen .studentModalBody > *:nth-child(6){ animation-delay:.36s; }

@keyframes studentFadeIn{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.studentEntryCard{
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.studentEntryCard:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.08);
}

@media (hover:none){
  .studentEntryCard:hover{
    transform:none;
    box-shadow:none;
  }

  .studentModalClose:hover{
    background:#f1f5f9;
  }
}