/* EnglishGate Unified Student UI v1
   Visual source of truth: premium student homepage.
   This layer harmonizes login, student shell, My Book, lessons and workbook
   without changing any authentication, grading or learning behavior. */

:root{
  --eg-ink:#0f172a;
  --eg-ink-2:#10233e;
  --eg-blue:#2563eb;
  --eg-blue-2:#2f5bff;
  --eg-blue-soft:#eef4ff;
  --eg-bg:#f4f7fb;
  --eg-surface:#ffffff;
  --eg-surface-soft:#f8fafc;
  --eg-border:#dce5ee;
  --eg-muted:#6f8092;
  --eg-success:#16845b;
  --eg-danger:#c53c3c;
  --eg-radius-sm:12px;
  --eg-radius:18px;
  --eg-radius-lg:24px;
  --eg-shadow:0 8px 28px rgba(31,55,88,.065);
  --eg-shadow-lg:0 18px 46px rgba(31,55,88,.10);

  /* map legacy tokens into the student-home system */
  --navy:var(--eg-ink);
  --navy-2:var(--eg-blue-2);
  --teal:var(--eg-blue);
  --teal-soft:var(--eg-blue-soft);
  --bg:var(--eg-bg);
  --card:var(--eg-surface);
  --text:var(--eg-ink-2);
  --muted:var(--eg-muted);
  --border:var(--eg-border);
  --shadow:var(--eg-shadow);
  --radius:var(--eg-radius);
}

html,body{background:var(--eg-bg);color:var(--eg-ink-2)}
body,button,input,textarea,select{font-family:'Nunito',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}

/* =========================================================
   LOGIN — same family as the premium student homepage
   ========================================================= */
.login-screen{
  min-height:100vh;
  padding:24px;
  background:
    radial-gradient(circle at 78% 14%,rgba(47,91,255,.10),transparent 24%),
    radial-gradient(circle at 20% 82%,rgba(78,159,199,.10),transparent 25%),
    linear-gradient(180deg,#f8faff 0%,var(--eg-bg) 100%);
}
.login-shell{
  width:min(1080px,100%);
  min-height:min(690px,calc(100vh - 48px));
  grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);
  border:1px solid var(--eg-border);
  border-radius:28px;
  background:var(--eg-surface);
  box-shadow:var(--eg-shadow-lg);
}
.login-brand{
  position:relative;
  overflow:hidden;
  padding:58px;
  background:
    radial-gradient(circle at 88% 22%,rgba(66,103,255,.48),transparent 27%),
    linear-gradient(135deg,#0f172a 0%,#111827 58%,#1e3a8a 100%);
  color:#fff;
}
.login-brand::before{
  content:'ENGLISHGATE';
  display:inline-flex;
  width:max-content;
  margin-bottom:28px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#c8d5ff;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.13em;
}
.login-brand::after{
  content:'';
  position:absolute;
  width:260px;
  height:260px;
  right:-80px;
  bottom:-70px;
  border-radius:50%;
  border:42px solid rgba(255,255,255,.055);
}
.login-brand .eyebrow{color:#b8c8ff!important;margin:0 0 12px!important}
.login-brand h1{
  max-width:520px;
  margin:0 0 18px;
  font-size:clamp(2.6rem,5vw,4.25rem);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:900;
}
.login-brand .lead{max-width:540px;color:#c9d3df;font-size:1rem;line-height:1.65}
.promise-card{
  max-width:560px;
  margin-top:30px;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(8px);
}
.promise-card strong{color:#fff}
.promise-card span{color:#c9d3df}
.login-card{
  justify-content:center;
  padding:52px;
  gap:24px;
  background:#fff;
}
.login-card .eyebrow{color:#4965b0}
.login-card h2{color:var(--eg-ink);font-size:2rem;letter-spacing:-.035em;font-weight:900}
.login-card .muted{color:var(--eg-muted)}
.login-card label{color:#172033;font-weight:800}
.login-card input{
  min-height:50px;
  border:1px solid var(--eg-border);
  border-radius:14px;
  background:var(--eg-surface-soft);
  color:var(--eg-ink-2);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.login-card input:focus{
  border-color:#6f8cff;
  background:#fff;
  box-shadow:0 0 0 3px rgba(37,99,235,.10);
}
.login-card .primary-btn{
  min-height:52px;
  border-radius:14px;
  background:var(--eg-ink);
  box-shadow:0 10px 22px rgba(15,23,42,.13);
}
.login-card .primary-btn:hover{background:var(--eg-blue-2)}
.login-card .forgot-password-link,.login-card .demo-login{color:#3555a6;font-weight:900}
.login-card small{color:var(--eg-muted);line-height:1.45}

/* =========================================================
   STUDENT APP SHELL
   ========================================================= */
.app.student-mode{background:var(--eg-bg);color:var(--eg-ink-2)}
.app.student-mode .sidebar{
  background:#fff;
  border-right:1px solid var(--eg-border);
  box-shadow:8px 0 30px rgba(31,55,88,.025);
}
.app.student-mode .sidebar-brand span{color:var(--eg-ink);font-weight:900}
.app.student-mode .nav-btn{
  color:#5f7185;
  border-radius:13px;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.app.student-mode .nav-btn:hover{background:#f4f7fb;color:var(--eg-ink);transform:translateX(1px)}
.app.student-mode .nav-btn.active{background:var(--eg-blue-soft);color:#244aa5}
.app.student-mode .topbar{
  height:70px;
  padding:0 28px;
  border-bottom:1px solid var(--eg-border);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  box-shadow:none;
}
.app.student-mode .topbar h2{color:var(--eg-ink);font-weight:900;letter-spacing:-.025em}
.app.student-mode .content{max-width:1240px;padding:26px 30px 78px}
.app.student-mode .student-profile-btn{border:1px solid var(--eg-border);background:#fff;box-shadow:0 5px 14px rgba(31,55,88,.06)}

/* Shared student surfaces */
.app.student-mode .card,
.app.student-mode .lesson-picker,
.app.student-mode .activity-card,
.app.student-mode .course-intro,
.app.student-mode .course-topic,
.app.student-mode .eg-skill-hero,
.app.student-mode .eg-source-column,
.app.student-mode .transcript-card,
.app.student-mode .eg-task-panel,
.app.student-mode .sep-hero,
.app.student-mode .sep-source,
.app.student-mode .sep-audio-source,
.app.student-mode .sep-question-panel{
  border-color:var(--eg-border);
  background:#fff;
  border-radius:var(--eg-radius);
  box-shadow:var(--eg-shadow);
}

.app.student-mode h1,
.app.student-mode h2,
.app.student-mode h3,
.app.student-mode h4{color:var(--eg-ink);letter-spacing:-.02em}
.app.student-mode .muted{color:var(--eg-muted)}
.app.student-mode .eyebrow,
.app.student-mode .eg-premium-kicker{color:#4965b0}
.app.student-mode .pill{background:#eef4ff;color:#3555a6;border:1px solid #d8e4ff}
.app.student-mode .progress{background:#e8eef6}
.app.student-mode .progress>span{background:var(--eg-blue-2)}

/* Buttons */
.app.student-mode .primary-btn{
  border:0;
  border-radius:13px;
  background:var(--eg-ink);
  color:#fff;
  box-shadow:none;
  transition:background .16s ease,transform .16s ease;
}
.app.student-mode .primary-btn:hover{background:var(--eg-blue-2);transform:translateY(-1px)}
.app.student-mode .secondary-btn{border-radius:13px;background:var(--eg-blue-soft);color:#3555a6}
.app.student-mode .ghost-btn{
  border:1px solid var(--eg-border);
  border-radius:13px;
  background:#fff;
  color:var(--eg-ink-2);
}
.app.student-mode .ghost-btn:hover{border-color:#aebdde;background:#f8faff}

/* Form controls */
.app.student-mode input,
.app.student-mode textarea,
.app.student-mode select{
  border-color:var(--eg-border);
  border-radius:12px;
  background:#fff;
  color:var(--eg-ink-2);
}
.app.student-mode input:focus,
.app.student-mode textarea:focus,
.app.student-mode select:focus{
  border-color:#7893ef;
  box-shadow:0 0 0 3px rgba(37,99,235,.10);
}

/* =========================================================
   MY BOOK / COURSE PATH
   ========================================================= */
.app.student-mode .course-shell{color:var(--eg-ink-2)}
.app.student-mode .course-intro{padding:22px 24px}
.app.student-mode .course-intro h1{font-weight:900}
.app.student-mode .course-overall>strong{color:var(--eg-blue-2)}
.app.student-mode .course-path{gap:11px}
.app.student-mode .course-topic{
  border-radius:16px;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.app.student-mode .course-topic:hover{border-color:#c8d5e6;box-shadow:0 10px 28px rgba(31,55,88,.07);transform:translateY(-1px)}
.app.student-mode .course-topic.eg-course-next{
  border-color:#bdccef;
  background:linear-gradient(180deg,#fff 0%,#f5f8ff 100%);
}
.app.student-mode .course-topic.eg-course-next .topic-state{background:var(--eg-ink);color:#fff}
.app.student-mode .topic-copy strong{color:var(--eg-ink-2)}
.app.student-mode .topic-copy small,.app.student-mode .topic-copy>span{color:var(--eg-muted)}

/* =========================================================
   LESSON PLAYER / WORKBOOK
   ========================================================= */
.app.student-mode .lesson-book-workbook{color:var(--eg-ink-2)}
.app.student-mode .eg-lesson-header{
  padding:24px 26px;
  border:1px solid var(--eg-border);
  border-radius:var(--eg-radius-lg);
  background:
    radial-gradient(circle at 88% 15%,rgba(47,91,255,.08),transparent 22%),
    linear-gradient(135deg,#fff 0%,#f7f9ff 100%);
  box-shadow:var(--eg-shadow);
}
.app.student-mode .eg-lesson-header h1,
.app.student-mode .eg-lesson-header h2,
.app.student-mode .eg-lesson-header h3{color:var(--eg-ink);font-weight:900}
.app.student-mode .eg-lesson-header p,
.app.student-mode .eg-lesson-header small{color:var(--eg-muted)}
.app.student-mode .eg-stage-list{
  border-color:var(--eg-border);
  background:#fff;
  border-radius:16px;
}
.app.student-mode .eg-stage,
.app.student-mode .step-btn,
.app.student-mode .lesson-tab{
  border-color:var(--eg-border);
  border-radius:13px;
  background:#fff;
  color:#617286;
}
.app.student-mode .eg-stage.is-current,
.app.student-mode .step-btn.active,
.app.student-mode .lesson-tab.active{
  border-color:#b7c8f2;
  background:var(--eg-blue-soft);
  color:#274aa0;
  box-shadow:0 0 0 2px rgba(37,99,235,.04);
}
.app.student-mode .eg-goal{
  border-left-color:var(--eg-blue-2);
  background:#f1f5ff;
  color:#355278;
}
.app.student-mode .eg-skill-hero{padding:20px 22px}
.app.student-mode .eg-source-column,
.app.student-mode .transcript-card,
.app.student-mode .eg-task-panel{padding:20px}

/* Questions and answer choices */
.app.student-mode .question{border-bottom-color:#e8edf3}
.app.student-mode .question p{color:var(--eg-ink-2);font-weight:800}
.app.student-mode .choice,
.app.student-mode .sep-choice{
  border-color:#dbe4ee;
  border-radius:13px;
  background:#fff;
  color:#27384c;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
}
.app.student-mode .choice:hover,
.app.student-mode .sep-choice:hover{border-color:#a9bdec;background:#fafcff;transform:translateY(-1px)}
.app.student-mode .choice:has(input:checked),
.app.student-mode .sep-choice:has(input:checked){
  border-color:#7f9df0;
  background:#eef4ff;
  box-shadow:0 0 0 3px rgba(37,99,235,.06);
}
.app.student-mode .audio-box{
  border-color:var(--eg-border);
  border-radius:15px;
  background:#f8fafc;
}
.app.student-mode .play-btn{background:var(--eg-ink)}
.app.student-mode .play-btn:hover{background:var(--eg-blue-2)}

/* Reading + Listening */
.app.student-mode .sep-hero{
  background:
    radial-gradient(circle at 90% 16%,rgba(47,91,255,.07),transparent 22%),
    linear-gradient(135deg,#fff,#f8faff);
}
.app.student-mode .sep-hero h1{color:var(--eg-ink);font-weight:900}
.app.student-mode .sep-hero p,.app.student-mode .sep-status{color:var(--eg-muted)}
.app.student-mode .sep-source summary{color:#3555a6;background:#f8fafc;border-bottom-color:var(--eg-border)}
.app.student-mode .sep-reading-text{color:#2b4058}
.app.student-mode .sep-question-track{background:#e8eef6}
.app.student-mode .sep-question-track>span{background:var(--eg-blue-2)}
.app.student-mode .sep-question-meta span{background:#eef4ff;color:#3555a6}
.app.student-mode .sep-choice-index{background:#f1f5f9;color:#5b6c80}

/* Grammar: remove the separate green textbook universe */
.app.student-mode .eg-grammar-page{
  max-width:940px;
  border:1px solid var(--eg-border);
  border-radius:var(--eg-radius-lg);
  background:#fff;
  box-shadow:var(--eg-shadow);
  color:var(--eg-ink-2);
}
.app.student-mode .eg-grammar-head{
  padding:28px 30px 24px;
  border-bottom:1px solid var(--eg-border);
  background:
    radial-gradient(circle at 88% 15%,rgba(47,91,255,.08),transparent 24%),
    linear-gradient(135deg,#fff,#f7f9ff);
}
.app.student-mode .eg-grammar-label{color:#4965b0!important}
.app.student-mode .eg-grammar-head h2,
.app.student-mode .eg-grammar-block h3,
.app.student-mode .eg-grammar-block h4{color:var(--eg-ink)}
.app.student-mode .eg-grammar-goal{
  border-left-color:var(--eg-blue-2);
  background:#f1f5ff;
  color:#355278!important;
}
.app.student-mode .eg-grammar-block{border-bottom-color:#e8edf3}
.app.student-mode .eg-grammar-block p{color:#455b72}
.app.student-mode .egg-question,
.app.student-mode .egg-remember,
.app.student-mode .egg-fix,
.app.student-mode .egg-challenge{
  border-color:var(--eg-border);
  background:#fbfcfe;
  border-radius:13px;
}
.app.student-mode .egg-question>strong{color:var(--eg-ink-2)}
.app.student-mode .egg-option{
  border-color:#dbe4ee;
  border-radius:12px;
  background:#fff;
  color:#2d4054;
}
.app.student-mode .egg-option:hover:not(:disabled){border-color:#9eb4eb;background:#f8faff}
.app.student-mode .egg-radio{border-color:#aab7c7}
.app.student-mode .egg-option.is-correct{border-color:#68ae8a;background:#edf8f2;color:#176044}
.app.student-mode .egg-option.is-wrong{border-color:#d38b8b;background:#fff3f3;color:#8b3838}
.app.student-mode .egg-notice strong{border-left-color:var(--eg-blue-2);background:#f1f5ff;color:#355278}
.app.student-mode .egg-remember h4,
.app.student-mode .egg-challenge strong{color:#3555a6}
.app.student-mode .egg-remember th{background:#f1f5ff;color:#354d6a}
.app.student-mode .egg-check,
.app.student-mode .egg-boost{border-color:#b8c8ee;color:#3555a6;background:#fff}

/* Feedback preserves meaning but shares shape and spacing */
.app.student-mode .feedback,
.app.student-mode .eg-grammar-feedback{border-radius:12px}
.app.student-mode .feedback.good{background:#edf8f2;color:#176044}
.app.student-mode .feedback.bad{background:#fff3f3;color:#933c3c}

/* =========================================================
   MOBILE — preserve focus layouts, unify their visual language
   ========================================================= */
@media(max-width:760px){
  .login-screen{padding:12px;background:var(--eg-bg)}
  .login-shell{
    min-height:calc(100vh - 24px);
    grid-template-columns:1fr;
    border-radius:22px;
    overflow:hidden;
  }
  .login-brand{padding:30px 24px}
  .login-brand::before{margin-bottom:18px}
  .login-brand h1{font-size:2.2rem}
  .login-brand .lead{font-size:.9rem}
  .promise-card{margin-top:20px;padding:15px}
  .login-card{padding:26px 22px}

  .app.student-mode .main{margin-left:0;background:var(--eg-bg)!important}
  .app.student-mode .topbar{
    min-height:54px!important;
    height:54px!important;
    padding:0 14px!important;
    border-bottom:1px solid var(--eg-border)!important;
    background:rgba(255,255,255,.97)!important;
  }
  .app.student-mode .content{
    max-width:none!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .app.student-mode .bottom-nav{
    border-top:1px solid var(--eg-border)!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 -6px 24px rgba(31,55,88,.06)!important;
  }
  .app.student-mode .bottom-nav .nav-btn.active{background:#eef4ff!important;color:#3555a6!important}

  body.student-lesson-player-mode .eg-lesson-header{
    padding:16px 2px 10px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.student-lesson-player-mode .eg-goal{
    border-left-color:var(--eg-blue-2)!important;
    background:#eef4ff!important;
    color:#355278!important;
  }
  body.student-lesson-player-mode .eg-skill-hero,
  body.student-lesson-player-mode .eg-source-column,
  body.student-lesson-player-mode .transcript-card{
    border-color:var(--eg-border)!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 6px 20px rgba(31,55,88,.045)!important;
  }
  body.student-lesson-player-mode .eg-mobile-primary-action-row{
    border-top-color:var(--eg-border)!important;
    box-shadow:0 -8px 24px rgba(31,55,88,.06)!important;
  }
  body.student-lesson-player-mode .eg-mobile-primary-action-row>.eg-mobile-primary-action{
    border-radius:14px!important;
    background:var(--eg-ink)!important;
  }

  body.student-course-focus-mode .course-intro,
  body.student-course-focus-mode .course-topic,
  body.student-home-focus-mode .eg-premium-learning-card,
  body.student-home-focus-mode .eg-premium-progress-card{
    border-color:var(--eg-border)!important;
    border-radius:18px!important;
    box-shadow:0 6px 20px rgba(31,55,88,.05)!important;
  }

  .app.student-mode .eg-grammar-page{
    border-left:0;
    border-right:0;
    border-radius:18px;
    box-shadow:none;
  }
  .app.student-mode .eg-grammar-head,.app.student-mode .eg-grammar-block{padding:20px 18px}

  .app.student-mode .sep-hero{border-radius:18px}
  .app.student-mode .sep-source,
  .app.student-mode .sep-audio-source,
  .app.student-mode .sep-question-panel{border-radius:16px}
}

@media(max-width:390px){
  .login-screen{padding:8px}
  .login-shell{min-height:calc(100vh - 16px);border-radius:18px}
  .login-brand{padding:24px 20px}
  .login-card{padding:22px 18px}
  .app.student-mode .content{padding-left:9px!important;padding-right:9px!important}
}

@media(prefers-reduced-motion:reduce){
  .app.student-mode *, .login-screen *{transition:none!important;scroll-behavior:auto!important}
}