/* ============================================================
   DR-BIOS ACADEMY — Premium login & student portal overrides
   PCB Board Design System
   ============================================================ */

/* ---------- Background grid pattern ---------- */
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:
    linear-gradient(90deg,rgba(44,113,89,.06) 1px,transparent 1px),
    linear-gradient(rgba(44,113,89,.06) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,#000,transparent 72%);
}

/* ---------- Login page ---------- */
.login-premium{
  position:relative;isolation:isolate;
  min-height:calc(100vh - 180px);
  grid-template-columns:minmax(0,1.15fr) minmax(340px,440px);
  gap:clamp(45px,8vw,100px);
}
.login-premium:before{
  content:"";position:absolute;width:420px;height:420px;
  left:-160px;top:8%;
  border:1px solid rgba(44,113,89,.15);border-radius:50%;
  box-shadow:
    0 0 0 60px rgba(44,113,89,.04),
    0 0 0 120px rgba(44,113,89,.02);
  z-index:-1;
}

.portal-chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 13px;border-radius:2px;
  border:1px solid rgba(240,180,41,.28);
  background:rgba(240,180,41,.05);
  font-family:var(--f-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;color:var(--gold);
}
.portal-chip:before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 0 rgba(240,180,41,.6);
  animation:portalPulse 2.4s infinite;
}
@keyframes portalPulse{
  0%{box-shadow:0 0 0 0 rgba(240,180,41,.6)}
  70%{box-shadow:0 0 0 9px rgba(240,180,41,0)}
  100%{box-shadow:0 0 0 0 rgba(240,180,41,0)}
}

.login-story h1{
  max-width:780px;margin:.35em 0 .22em;
  font-size:clamp(2.5rem,6vw,4.5rem);
  line-height:.96;letter-spacing:-.04em;
}
.login-story h1 span{color:var(--gold)}
.login-lead{font-size:1.06rem;max-width:560px;color:var(--silk-2)}
.login-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.login-points span{
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;border:1px solid var(--edge);border-radius:2px;
  background:rgba(15,42,34,.42);
  font-family:var(--f-mono);font-size:.78rem;font-weight:600;
  color:var(--silk-2);letter-spacing:.03em;
}
.login-points i{font-style:normal;color:var(--gold);font-size:.68rem;font-weight:800}

/* Login card */
.login-card{
  position:relative;overflow:hidden;
  padding:clamp(26px,4vw,40px);
  border:1px solid var(--edge)!important;
  border-top:0!important;border-radius:3px!important;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
}
.login-card:before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--copper));
}
.login-card:after{
  content:"";position:absolute;width:150px;height:150px;
  right:-75px;top:-75px;border-radius:50%;
  background:rgba(240,180,41,.03);pointer-events:none;
}
.login-card h2{
  font-size:clamp(1.5rem,2.4vw,1.9rem);
  margin:5px 0 0;letter-spacing:-.02em;
}
.login-help{margin:0 0 13px;color:var(--silk-3);font-size:.92rem}
.login-mark{
  display:block;margin-bottom:6px;
}
.login-mark img{
  width:90px;height:auto;display:block;
}
.login-submit{
  display:inline-flex;align-items:center;gap:.5em;
  margin-top:4px;padding:12px 24px;width:auto;
}
.login-submit span{font-size:1.2rem}
.secure-note{
  text-align:center;color:var(--silk-3);
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.05em;
}
.secure-note span{color:var(--gold);margin-right:4px}

/* ---------- Enrol CTA on login ---------- */
.enrol-cta{
  text-align:center;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--edge);
}
.enrol-cta__txt{
  font-family:var(--f-mono);font-size:.72rem;color:var(--silk-3);
  letter-spacing:.04em;margin:0 0 10px;
}
.enrol-cta__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  background:var(--gold);color:#241A00;border:0;border-radius:2px;
  padding:11px 24px;font-family:var(--f-display);font-weight:700;font-size:.95rem;
  letter-spacing:.01em;text-decoration:none;
  box-shadow:0 0 0 1px rgba(240,180,41,.35),0 10px 34px -14px rgba(240,180,41,.6);
  transition:background .15s,transform .15s cubic-bezier(.22,.61,.36,1);
}
.enrol-cta__btn:hover{background:#FFC63F;transform:translateY(-1px)}

/* ---------- Student course hero ---------- */
.student-course-hero{
  display:grid;grid-template-columns:minmax(0,1fr) 220px;
  align-items:center;gap:50px;padding:30px 0 38px;
}
.student-course-hero h1{
  font-size:clamp(2rem,5vw,3.5rem);line-height:1;
  margin:.08em 0 .2em;letter-spacing:-.04em;
}
.student-course-hero p{max-width:760px;color:var(--silk-2);font-size:1rem}

.course-total{
  position:relative;overflow:hidden;padding:26px;border-radius:3px;
  background:linear-gradient(150deg,var(--board-3),var(--board-2));
  border:1px solid var(--edge);
  box-shadow:var(--shadow);
}
.course-total:after{
  content:"";position:absolute;width:110px;height:110px;
  right:-50px;top:-55px;border-radius:50%;
  border:18px solid rgba(240,180,41,.06);
}
.course-total span{color:var(--silk-3);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em}
.course-total small{color:var(--silk-3)}
.course-total b{
  display:block;font-family:var(--f-mono);font-size:1.8rem;
  font-variant-numeric:tabular-nums;color:var(--gold);
  letter-spacing:-.03em;margin:3px 0;
}

/* ---------- Student syllabus ---------- */
.student-syllabus{padding:0;overflow:hidden}
.student-syllabus>.section-title{padding:22px 26px;border-bottom:1px solid var(--edge)}
.student-syllabus h2{margin:0}
.student-lesson-list a{
  display:grid;grid-template-columns:56px minmax(0,1fr) 160px;
  align-items:center;gap:18px;padding:20px 26px;
  color:inherit;text-decoration:none;border-bottom:1px solid var(--edge);
  transition:background .15s,padding .15s;
}
.student-lesson-list a:last-child{border-bottom:0}
.student-lesson-list a:hover{background:rgba(240,180,41,.03);padding-left:32px}
.lesson-number{
  width:46px;height:46px;display:grid;place-items:center;border-radius:3px;
  background:linear-gradient(145deg,rgba(240,180,41,.16),rgba(240,180,41,.06));
  border:1px solid rgba(240,180,41,.25);
  color:var(--gold);font:900 15px/1 var(--f-mono);
}
.student-lesson-list b{display:block;font-family:var(--f-display);font-size:1rem;font-weight:600}
.student-lesson-list small{margin-top:3px;color:var(--silk-3)}
.lesson-status{text-align:right}
.lesson-status em{
  display:block;color:var(--silk-3);font-style:normal;
  font-family:var(--f-mono);font-size:.78rem;font-variant-numeric:tabular-nums;
}
.lesson-status strong{display:block;color:var(--gold);margin-top:4px;font-family:var(--f-display);font-weight:700}

/* Empty state */
.empty-course{text-align:center;max-width:600px;margin:70px auto}
.empty-course .login-mark{margin:0 auto 20px}

/* ---------- Student hero mark ---------- */
.student-hero{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:25px 0}
.student-hero-mark{
  width:110px;height:110px;border-radius:3px;
  display:grid;place-content:center;text-align:center;
  background:linear-gradient(150deg,var(--board-3),var(--board-2));
  border:1px solid var(--edge);
  color:var(--gold);font-family:var(--f-display);font-size:2rem;font-weight:900;
  box-shadow:var(--shadow);transform:rotate(2deg);
}
.student-hero-mark span{
  display:block;font-family:var(--f-mono);font-size:.52rem;
  letter-spacing:.2em;color:var(--silk-3);
}

/* ---------- Lesson progress bar ---------- */
.lesson-progress{
  height:4px;border-radius:2px;
  background:rgba(240,180,41,.12);
  margin-top:6px;overflow:hidden;
}
.lesson-progress__fill{
  height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  transition:width .4s var(--ease);
}
.lesson-progress__fill.complete{
  background:linear-gradient(90deg,#2C7159,#4ADE80);
}

/* ---------- Completed badge ---------- */
.lesson-completed-badge{
  display:inline-flex;align-items:center;gap:5px;
  color:#4ADE80;font-family:var(--f-display);font-weight:700;
}

/* ---------- Telegram button ---------- */
.telegram-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:2px;
  background:rgba(44,113,89,.15);border:1px solid var(--edge);
  color:var(--silk);font-family:var(--f-mono);font-size:.78rem;font-weight:600;
  text-decoration:none;letter-spacing:.02em;
  transition:background .15s,border-color .15s;
}
.telegram-btn:hover{background:rgba(44,113,89,.25);border-color:var(--edge-hi)}
.telegram-btn svg{width:16px;height:16px;fill:currentColor}

/* ---------- Telegram banner (student dashboard) ---------- */
.telegram-banner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 24px;border-radius:3px;margin-bottom:24px;
  background:linear-gradient(135deg,rgba(44,113,89,.12),rgba(240,180,41,.06));
  border:1px solid var(--edge);
}
.telegram-banner p{margin:0;color:var(--silk-2);font-size:.92rem}
.telegram-banner b{color:var(--silk);display:block;margin-bottom:2px}
.telegram-banner .telegram-btn{
  background:var(--edge-hi);border-color:var(--edge-hi);
  color:#fff;white-space:nowrap;
}
.telegram-banner .telegram-btn:hover{background:#37876a}

/* ---------- Course completion congratulations ---------- */
.congrats-banner{
  padding:22px 26px;border-radius:3px;margin-bottom:24px;
  background:linear-gradient(135deg,rgba(74,222,128,.08),rgba(240,180,41,.06));
  border:1px solid rgba(74,222,128,.25);
  text-align:center;
}
.congrats-banner h2{margin:0 0 6px;color:#4ADE80;font-family:var(--f-display)}
.congrats-banner p{margin:0 0 14px;color:var(--silk-2)}
.congrats-banner a{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 22px;border-radius:2px;
  background:var(--gold);color:#241A00;
  font-family:var(--f-display);font-weight:700;font-size:.92rem;
  text-decoration:none;
  box-shadow:0 0 0 1px rgba(240,180,41,.35),0 8px 24px -10px rgba(240,180,41,.5);
  transition:background .15s,transform .15s;
}
.congrats-banner a:hover{background:#FFC63F;transform:translateY(-1px)}

/* ---------- Exam request form ---------- */
.exam-form{max-width:600px}
.exam-form label{display:block;margin-bottom:14px}
.exam-form .phone-row{display:flex;gap:8px}
.exam-form .phone-row select{flex:0 0 220px}
.exam-form .phone-row input{flex:1}

/* ---------- Admin exam requests table ---------- */
.exam-status{
  display:inline-block;padding:3px 10px;border-radius:2px;
  font-family:var(--f-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
}
.exam-status.pending{background:rgba(240,180,41,.12);color:var(--gold)}
.exam-status.approved{background:rgba(74,222,128,.12);color:#4ADE80}
.exam-status.rejected{background:rgba(239,68,68,.12);color:#EF4444}

/* ---------- Responsive ---------- */
@media(max-width:800px){
  .login-premium{grid-template-columns:1fr;gap:28px}
  .login-story h1{font-size:clamp(2.2rem,11vw,3.2rem)}
  .login-points{display:none}
  .student-hero-mark{display:none}
  .student-course-hero{grid-template-columns:1fr;gap:20px}
  .course-total{max-width:280px}
  .student-lesson-list a{grid-template-columns:44px 1fr;padding:16px 18px}
  .lesson-status{grid-column:2;text-align:left}
  .student-syllabus>.section-title{align-items:flex-start}
}