
/* =========================================================
   EDGITEK_IELTS_V1_START
   Learning & Coaching Workspace
   Slate + Warm Neutral + Amber
   ========================================================= */

:root{
  --primary:#F59E0B;
  --primary2:#D97706;
  --soft:#FEF3C7;

  --bg:#F6F7F9;
  --surface:#FFFFFF;

  --text:#1E293B;
  --muted:#64748B;

  --line:#E2E8F0;

  --success:#067647;
  --danger:#B42318;

  --shadow:
    0 1px 2px rgba(15,23,42,.025),
    0 12px 30px rgba(15,23,42,.045);
}


/* GLOBAL ================================================= */

html,
body{
  color:var(--text);
}

body{
  -webkit-font-smoothing:antialiased;
}


/* LOGIN ================================================== */

.auth-shell{
  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(245,158,11,.14),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #FFFDF8,
      var(--bg)
    );
}

.auth-card{
  border:
    1px solid #E1E5EA;

  border-radius:
    20px;

  box-shadow:
    0 25px 75px rgba(15,23,42,.11);
}

.auth-card h1{
  color:
    #0F172A;

  letter-spacing:
    -.045em;
}

.auth-card .muted{
  color:
    #64748B;
}


/* EDGE FOLD ============================================== */

.brand-mark{
  color:
    transparent !important;

  font-size:
    0 !important;

  background:
    #0F172A
    url("/assets/icon-192.png")
    center/cover no-repeat !important;

  border:
    1px solid rgba(15,23,42,.12);

  box-shadow:
    0 9px 24px rgba(15,23,42,.14);
}


/* APP SHELL ============================================== */

.app-shell{
  grid-template-columns:
    264px minmax(0,1fr);
}


/* SIDEBAR ================================================ */

.sidebar{
  padding:
    19px 14px;

  color:
    #DCE5F0;

  background:
    linear-gradient(
      180deg,
      #0F172A,
      #111C30
    );

  border-right:
    1px solid rgba(255,255,255,.055);
}

.brand-row{
  min-height:
    62px;

  gap:
    11px;

  margin-bottom:
    17px;

  padding:
    2px 5px 18px;

  border-bottom:
    1px solid rgba(255,255,255,.08);
}

.brand-row strong{
  color:
    #FFFFFF;

  font-size:
    14px;

  font-weight:
    850;

  letter-spacing:
    -.025em;
}

.brand-row span{
  color:
    #8190A5;

  font-size:
    9px;

  letter-spacing:
    .025em;
}

.side-nav{
  gap:
    3px;
}

.side-nav:before{
  content:
    "LEARNING WORKSPACE";

  display:block;

  margin:
    6px 11px 5px;

  color:
    #64748B;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .14em;
}

.side-nav button{
  min-height:
    42px;

  padding:
    9px 11px;

  color:
    #B5C0CE;

  border-radius:
    9px;

  font-size:
    12px;

  font-weight:
    680;
}

.side-nav button:hover{
  color:
    #FFFFFF;

  background:
    rgba(255,255,255,.055);
}

.side-nav button.active{
  color:
    #FFFFFF;

  background:
    rgba(245,158,11,.12);

  box-shadow:
    inset 3px 0 0 #F59E0B;
}

.sidebar-foot{
  color:
    #94A3B8;
}


/* MAIN =================================================== */

.main-column{
  padding:
    0 35px 45px;
}

.topbar{
  height:
    88px;

  border-bottom:
    1px solid var(--line);
}

.topbar h2{
  color:
    #0F172A;

  font-size:
    1.55rem;

  letter-spacing:
    -.035em;
}

.eyebrow{
  color:
    #A15C00;

  font-size:
    .67rem;

  letter-spacing:
    .13em;
}


/* CARDS ================================================== */

.card{
  background:
    var(--surface);

  border:
    1px solid var(--line);

  border-radius:
    15px;

  box-shadow:
    0 1px 2px rgba(15,23,42,.02),
    0 9px 25px rgba(15,23,42,.035);
}


/* HERO =================================================== */

.hero-programme{
  overflow:hidden;

  background:
    radial-gradient(
      circle at 94% 7%,
      rgba(245,158,11,.25),
      transparent 31%
    ),
    linear-gradient(
      135deg,
      #0F172A,
      #1E293B
    );

  color:
    #FFFFFF;

  border:
    0;

  border-radius:
    17px;
}

.hero-programme h3{
  color:
    #FFFFFF;

  letter-spacing:
    -.035em;
}

.hero-programme p{
  color:
    #CBD5E1;
}

.hero-programme .btn{
  color:
    #111827;

  background:
    #F59E0B;

  border-color:
    #F59E0B;
}


/* BUTTONS ================================================ */

.btn{
  border-radius:
    9px;

  box-shadow:
    none;
}

.btn.primary{
  color:
    #111827;

  background:
    #F59E0B;
}

.btn.primary:hover{
  background:
    #D97706;
}

.btn.secondary{
  color:
    #854D0E;

  background:
    #FEF3C7;
}

.btn.ghost{
  color:
    #334155;

  background:
    var(--surface);

  border:
    1px solid #CBD5E1;
}

.btn.ghost:hover{
  color:
    #0F172A;

  border-color:
    #F59E0B;

  background:
    #FFFCF5;
}


/* INPUTS ================================================= */

input,
textarea,
select{
  color:
    var(--text);

  background:
    var(--surface);

  border-color:
    #CBD5E1;

  border-radius:
    9px;
}

input:focus,
textarea:focus,
select:focus{
  border-color:
    #F59E0B;

  box-shadow:
    0 0 0 3px rgba(245,158,11,.11);
}


/* CHIPS ================================================== */

.chip{
  color:
    #854D0E;

  background:
    #FFF4D6;
}

.chip.current{
  color:
    #854D0E;

  background:
    #FEF3C7;
}

.chip.complete{
  color:
    #067647;

  background:
    #ECFDF3;
}

.chip.locked{
  color:
    #64748B;

  background:
    #F1F5F9;
}


/* PROGRAMME PHASES ======================================= */

.phase-card.current{
  border-color:
    #F59E0B;

  box-shadow:
    0 0 0 2px rgba(245,158,11,.10),
    0 11px 27px rgba(15,23,42,.04);
}

.phase-number{
  color:
    #111827;

  background:
    #F59E0B;
}

.outcome-item b{
  color:
    #92400E;
}


/* MODULES ================================================ */

.module-card{
  background:
    var(--surface);

  border-color:
    var(--line);

  border-radius:
    13px;
}

.module-card:hover,
.module-card.active{
  background:
    #FFFBF3;

  border-color:
    #E8B956;
}

.module-band::after{
  background:
    #F59E0B;
}

.foundation-icon{
  color:
    #854D0E;

  background:
    #FEF3C7;
}


/* TRAINING =============================================== */

.training-method span{
  color:
    #854D0E;

  background:
    #FFFBF2;

  border-color:
    #EAD19A;
}

.training-step{
  background:
    var(--surface);

  border-color:
    var(--line);
}

.training-step.active{
  color:
    var(--text);

  background:
    #FFF9EA;

  border-color:
    #E3B153;
}

.training-step.active b{
  color:
    #111827;

  background:
    #F59E0B;
}

.training-step.done{
  color:
    #067647;

  background:
    #F3FBF6;

  border-color:
    #ABEFC6;
}


/* SESSION ================================================= */

.session-header{
  border-color:
    var(--line);
}

.lesson-section{
  background:
    var(--surface);

  border-color:
    var(--line);
}

.lesson-section h4{
  color:
    #92400E;
}

.lesson-section.task{
  background:
    #FFF9EA;

  border-color:
    #E7C276;

  box-shadow:
    inset 4px 0 0 #F59E0B;
}

.lesson-section.feedback{
  background:
    #F8FAFC;

  border-color:
    #CBD5E1;

  box-shadow:
    inset 4px 0 0 #64748B;
}

.lesson-section.improved{
  background:
    #F3FBF6;

  border-color:
    #ABEFC6;

  box-shadow:
    inset 4px 0 0 #067647;
}

.response-panel{
  border-color:
    var(--line);
}

.mic-btn{
  color:
    #854D0E;

  background:
    #FFF7E7;

  border-color:
    #E7C276;
}

.support-note,
.speech-status{
  color:
    #64748B;

  background:
    #F8FAFC;
}


/* PRACTICE =============================================== */

.practice-tabs button.active{
  color:
    #111827;

  background:
    #F59E0B;
}

.option{
  background:
    var(--surface);

  border-color:
    var(--line);
}

.option:hover{
  border-color:
    #E4B657;

  background:
    #FFFCF5;
}

.timer{
  color:
    #92400E;
}

.model-answer{
  background:
    #FFFCF5;

  border-color:
    #E6C77F;
}


/* PROGRESS =============================================== */

.progress-line{
  background:
    #E8EDF3;
}

.progress-line span{
  background:
    #F59E0B;
}

.bar{
  background:
    linear-gradient(
      #FBBF24,
      #D97706
    );
}

.band-status{
  background:
    var(--surface);

  border-color:
    var(--line);
}


/* NOTICES ================================================ */

.notice{
  background:
    #FFF8E6;

  border-left-color:
    #F59E0B;
}

.notice.neutral{
  background:
    #F8FAFC;

  border-left-color:
    #64748B;
}


/* PROCESSING SUPPORT ===================================== */

/*
   IMPORTANT:
   Do not force global background/font values here.
   Existing processing-support body variables must remain
   free to switch between white / cream / soft-grey and
   readable font / spacing modes.
*/

.support-settings-card{
  border-color:
    #D2B36B;
}

.support-preview{
  background:
    #FFFCF5;

  border-color:
    #DDBA68;
}

.switch-row{
  background:
    var(--surface);

  border-color:
    var(--line);
}

.switch-row input{
  accent-color:
    #F59E0B;
}

.reading-player{
  background:
    #FFFDF7;

  border-color:
    #DDBA68;
}

.reading-current-sentence{
  background:
    var(--surface);

  border-color:
    #DDBA68;
}

.reading-sentence-list button{
  background:
    var(--surface);

  border-color:
    var(--line);
}

.reading-sentence-list button.active{
  background:
    #FFF5DC;

  border-color:
    #E2B85F;

  box-shadow:
    inset 4px 0 0 #F59E0B;
}

#reading-support-toggle.support-active{
  color:
    #854D0E;

  background:
    #FFF4D6;

  border-color:
    #E2B85F;
}


/* TOAST ================================================== */

.toast{
  color:
    #FFFFFF;

  background:
    #0F172A;

  border-radius:
    9px;

  box-shadow:
    0 15px 40px rgba(15,23,42,.18);
}


/* MOBILE ================================================= */

@media(max-width:720px){

  .main-column{
    padding:
      0 14px 82px;
  }

  .topbar{
    height:
      76px;
  }

  .bottom-nav{
    background:
      rgba(255,255,255,.98);

    border-top:
      1px solid #E2E8F0;

    box-shadow:
      0 -8px 25px rgba(15,23,42,.05);
  }

  .bottom-nav button.active{
    color:
      #D97706;
  }

  .hero-programme{
    padding:
      20px;
  }
}

/* EDGITEK_IELTS_V1_END */

